/* Calm Room — dusty rose and sage on blush paper, taken from the studio wall
   and its tiles. The softest of the five. */

:root {
  color-scheme: light;

  --bg: #fcf3f1;
  --bg-alt: #f5e2e2;
  --bg-invert: #2e2228;
  --ink: #2e2228;
  --ink-soft: #63505a;
  --ink-invert: #fcf3f1;
  --accent: #a33f5b;
  --accent-hover: #b8506c;
  --accent-ink: #fcf3f1;
  --accent-on-dark: #e59ab0; /* 7:1 on --bg-invert */
  --sage: #4f6047;
  --rule: rgb(46 34 40 / 0.14);
  --rule-strong: rgb(46 34 40 / 0.28);
  --focus: #a33f5b;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --font-ui: 'Jost', system-ui, sans-serif;
  --font-wordmark: 'Rye', Georgia, serif;

  --body-weight: 300;
  --body-size: 1.1rem;
  --body-lh: 1.68;
  --display-weight: 400;
  --display-lh: 1.02;
  --h1: clamp(2.7rem, 6.6vw, 4.4rem);
  --h2: clamp(2rem, 4.2vw, 3.15rem);
  --wordmark-size: 1.45rem;
  --wordmark-color: var(--accent);
  --nav-size: 0.88rem;

  --btn-weight: 500;
  --btn-tracking: 0.02em;
  --link-weight: 500;
  --label-weight: 500;
  --card-title-size: 1.35rem;

  --gutter: 1.5rem;
  --section-y: clamp(3.75rem, 7.5vw, 6rem);
  --radius: 10px;
  --btn-radius: 999px;
  --badge-radius: 999px;
  --card-ratio: 4 / 5;
  --card-pad: 1rem 0 0;

  --status-available: #4f6047;
  --status-hold: #a86a1c;

  /* The top line is dark here, so its dot needs the lighter sage. */
  --announce-bg: #2e2228;
  --announce-ink: #e3d1d5;
  --announce-dot-ok: #a9c19c;
  --announce-dot-hold: #e2b46f;
}

/* Signature: warm light washing in from the corners, over a fine dot grid. */
.hero {
  position: relative;
  background:
    radial-gradient(70% 60% at 12% 0%, rgb(205 128 148 / 0.4) 0%, rgb(205 128 148 / 0) 58%),
    radial-gradient(80% 70% at 88% 12%, rgb(109 127 99 / 0.32) 0%, rgb(109 127 99 / 0) 60%),
    linear-gradient(#fcf3f1, #f5e2e2);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(46 34 40 / 0.18) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.5;
  pointer-events: none;
}
.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); }
.site-footer { --footer-bg: #2e2228; --footer-ink: #f3e3e3; }
.status { background: var(--bg); }

/* The closing band sits on the blush of the studio wall, not the plum of the
   footer. In plum the two ran together into one slab and the band read as
   part of the footer. The band's buttons flip back from their on-dark
   versions to match. */
.cta-band { background: var(--bg-alt); color: var(--ink); }
.cta-band .lede { color: var(--ink-soft); }
.cta-band .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cta-band .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cta-band .btn--on-dark { color: var(--ink); border-color: var(--rule-strong); }
.cta-band .btn--on-dark:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Photo frames, like the border of a flash sheet: two firm ink rules close
   together around the photo. The hero's top is a true semicircle (50cqi is
   half the frame's width), like a parlour mirror. Everything hangs off the
   frame, not the photo, so a slideshow can swap pictures inside without
   redrawing it. */
.media-frame {
  --frame-ink: var(--ink);
  --frame-gap: 7px;
  --frame-out: 13px;
  --frame-top: var(--radius);
  display: block;
  position: relative;
  width: 100%;
  container-type: inline-size;
}
.section--invert .media-frame { --frame-ink: var(--ink-invert); }
.hero:not(.hero--centred) .media-frame { --frame-top: 50cqi; }
@media (min-width: 880px) {
  .feature--flip .media-frame { order: -1; }
}

.media-frame > .hero-media,
.media-frame > .feature-media {
  border-radius: var(--frame-top) var(--frame-top) var(--radius) var(--radius);
  outline: 2.5px solid var(--frame-ink);
  outline-offset: var(--frame-gap);
}
.frame-line {
  display: block;
  position: absolute;
  inset: calc(-1 * var(--frame-out));
  border: 1px solid var(--frame-ink);
  border-radius:
    calc(var(--frame-top) + var(--frame-out)) calc(var(--frame-top) + var(--frame-out))
    calc(var(--radius) + var(--frame-out)) calc(var(--radius) + var(--frame-out));
  pointer-events: none;
}

/* The section's photo again, washed out behind everything, strongest behind
   the framed copy and gone before it reaches the words, as if the photo's
   light spills into the room. */
.has-ghost { position: relative; isolation: isolate; overflow: hidden; }
.section-ghost {
  --ghost-strength: 0.22;
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mask-image: linear-gradient(to top, #000 25%, transparent 70%);
}
.section--invert .section-ghost { --ghost-strength: 0.3; }
.section-ghost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--ghost-strength);
  filter: blur(3px) saturate(0.75);
  scale: 1.06;
}
@media (min-width: 880px) {
  .section-ghost { mask-image: linear-gradient(to left, #000 30%, transparent 68%); }
  .has-ghost:has(.feature--flip) .section-ghost { mask-image: linear-gradient(to right, #000 30%, transparent 68%); }
}

/* The one moment of motion on the page: the hero photo settles into its
   frame as the headline lands. Once, on load; scrolling moves nothing. */
@keyframes pp-settle {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.hero .media-frame { animation: pp-settle 0.9s var(--ease-out) 0.1s both; }
@media (prefers-reduced-motion: reduce) {
  .hero .media-frame { animation: none; }
}