/* ==========================================================================
   Atelier — a quiet, editorial site for a multi-disciplinary artist
   Palette, type and rhythm are all defined here in one place.
   ========================================================================== */

/* ---- 1. Palette & tokens ------------------------------------------------ */
:root {
  --chalk:      #FAF8F3;
  --bone:       #F1EBE0;
  --sand:       #DFD3BC;
  --stone:      #C6BFB2;
  --sage:       #A9B0A0;
  --olive:      #4A5240;
  --olive-deep: #333A2C;
  --clay:       #A9765C;
  --pink:       #CFA79E;
  --ink:        #2C2823;
  --ink-soft:   #5C564C;

  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --measure: 34rem;          /* comfortable reading width */
  --gutter: clamp(1.5rem, 5vw, 6rem);
  --rule: 1px solid rgba(44, 40, 35, 0.16);
}

/* ---- 2. Reset & base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.55vw + 0.95rem, 1.2rem);
  line-height: 1.72;
  font-feature-settings: "kern", "liga", "onum";
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Linen weave + photographic grain, laid over everything, very faint. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(44,40,35,.020) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(44,40,35,.016) 0 1px, transparent 1px 3px);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 901;
  pointer-events: none;
  opacity: 0.24;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* ---- 3. Typographic roles ---------------------------------------------- */
h1, h2, h3 { font-weight: 400; letter-spacing: -0.012em; line-height: 1.08; margin: 0; }

.display {                       /* the single opening statement */
  font-size: clamp(2.4rem, 6.2vw, 5.1rem);
  line-height: 1.06;
  text-wrap: balance;
}
.headline {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.12;
}
.lede {
  font-size: clamp(1.15rem, 1.1vw + 0.95rem, 1.45rem);
  color: var(--ink-soft);
  max-width: var(--measure);
}
.tag {                           /* tiny uppercase / typewriter support text */
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.caption {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
  line-height: 1.7;
}
em, .italic { font-style: italic; }

/* A short hairline used as a breath mark between ideas. */
.hair { width: 3.5rem; height: 1px; background: rgba(44,40,35,.3); border: 0; margin: 2.4rem 0; }
.hair.center { margin-inline: auto; }

/* ---- 4. Layout scaffolding --------------------------------------------- */
.wrap  { width: min(100% - (var(--gutter) * 2), 78rem); margin-inline: auto; }
.narrow{ width: min(100% - (var(--gutter) * 2), 46rem); margin-inline: auto; }
section { position: relative; }
.pad    { padding-block: clamp(6rem, 14vh, 12rem); }

/* Softly curved boundary between sections. */
.curve { display: block; width: 100%; height: clamp(48px, 7vw, 110px); }
.curve path { fill: currentColor; }

/* ---- 5. Masthead -------------------------------------------------------- */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem var(--gutter);
  transition: background-color .5s ease, padding .5s ease, box-shadow .5s ease;
}
.masthead.is-settled {
  background: rgba(241, 235, 224, 0.88);
  backdrop-filter: blur(9px);
  padding-block: 0.85rem;
  box-shadow: 0 1px 0 rgba(44,40,35,.10);
}
.masthead .sig {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); }
.nav a {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); border-color: var(--ink); }

/* Over the dark reading room the masthead inverts, so the bar never
   punches a pale hole through the olive. */
.masthead.on-dark { color: var(--bone); }
.masthead.on-dark .nav a { color: rgba(241, 235, 224, .72); }
.masthead.on-dark .nav a:hover,
.masthead.on-dark .nav a:focus-visible { color: var(--bone); border-color: var(--bone); }
.masthead.on-dark.is-settled {
  background: rgba(51, 58, 44, .82);
  box-shadow: 0 1px 0 rgba(241, 235, 224, .14);
}
/* On a phone the five waypoints drop to a second line under the wordmark,
   rather than being truncated. Reads as a deliberate two-line masthead. */
@media (max-width: 760px) {
  .masthead {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: .5rem;
    padding-inline: var(--gutter);
  }
  .masthead .sig { font-size: .6rem; letter-spacing: .24em; flex: 1 0 100%; }
  .nav { flex: 1 0 100%; gap: clamp(.6rem, 3.2vw, 1.2rem); flex-wrap: wrap; }
  .nav a { font-size: .52rem; letter-spacing: .14em; }
}

/* ---- 6. I. Opening ------------------------------------------------------ */
.opening {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: 8rem 6rem;
}
.opening-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.64fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.opening .display { margin-top: 1.6rem; }
.opening-object { position: relative; justify-self: center; max-width: 20rem; }
.opening-object img { box-shadow: 0 30px 60px -40px rgba(44,40,35,.55); }
.scroll-cue {
  position: absolute; bottom: 2.2rem; left: var(--gutter);
  display: flex; align-items: center; gap: .8rem;
}
.scroll-cue .line {
  display: block; width: 3.2rem; height: 1px; background: rgba(44,40,35,.35);
  transform-origin: left; animation: draw 3.4s ease-in-out infinite;
}
@keyframes draw { 0%,100% { transform: scaleX(.35); opacity:.4 } 50% { transform: scaleX(1); opacity:1 } }
@media (prefers-reduced-motion: reduce) { .scroll-cue .line { animation: none; } }
@media (max-width: 820px) {
  .opening-grid { grid-template-columns: 1fr; }
  .opening-object { max-width: 14rem; justify-self: start; }
}

/* ---- 7. II. Collage ----------------------------------------------------- */
.collage { background: var(--chalk); }
.collage-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.plate { position: relative; }
.plate img { box-shadow: 0 40px 70px -50px rgba(44,40,35,.6); }
/* Explicit rows + columns so the plates genuinely overlap each other
   rather than being pushed apart by grid auto-placement. */
.plate--a { grid-column: 1 / 7;  grid-row: 1; z-index: 1; }
.plate--b { grid-column: 5 / 10; grid-row: 1; z-index: 3;
            margin-top: clamp(5rem, 13vw, 12rem); }
.plate--c { grid-column: 9 / 13; grid-row: 1; z-index: 2;
            margin-top: clamp(-5rem, -3vw, 0rem); }
.plate--d { grid-column: 7 / 13; grid-row: 2; z-index: 1;
            margin-top: clamp(-7rem, -5vw, 0rem); }
.collage-note { grid-column: 2 / 7; grid-row: 2; align-self: center;
            padding-right: clamp(0rem, 3vw, 3rem); }
@media (max-width: 820px) {
  .plate--a, .plate--b, .plate--c, .plate--d, .collage-note {
    grid-column: 1 / -1; margin-top: 0; padding-left: 0;
  }
  .plate--b { margin-left: 12%; }
  .plate--c { margin-right: 18%; }
}

/* ---- 8. III. Numbered chapters ------------------------------------------ */
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  border-top: var(--rule);
}
.chapter:nth-child(even) .chapter-figure { order: 2; }
.chapter:nth-child(even) .chapter-body   { order: 1; }
.chapter .chapter-num {
  font-family: var(--mono);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(44,40,35,.42);
  margin-bottom: 1.4rem;
}
.chapter-body p { max-width: var(--measure); color: var(--ink-soft); }
.chapter-figure img { box-shadow: 0 40px 70px -55px rgba(44,40,35,.6); }
.chapter:nth-child(odd)  .chapter-figure { transform: translateY(clamp(0px, 1.5vw, 22px)); }
.chapter:nth-child(even) .chapter-figure { transform: translateY(clamp(-22px, -1.5vw, 0px)); }
.list-plain { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.list-plain li {
  display: flex; gap: 1.2rem; align-items: baseline;
  padding: .7rem 0; border-top: var(--rule);
  font-size: .98rem;
}
.list-plain li span:first-child {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-soft); flex: 0 0 3.2rem;
}
@media (max-width: 820px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter:nth-child(even) .chapter-figure,
  .chapter:nth-child(even) .chapter-body { order: initial; }
  .chapter-figure { transform: none !important; }
}

/* ---- 9. IV. Marginalia (botanical line work) ---------------------------- */
.marginalia {
  display: grid; place-items: center;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.marginalia svg { width: clamp(90px, 13vw, 150px); height: auto; overflow: visible; }
.marginalia svg [stroke] {
  stroke: rgba(44,40,35,.5); fill: none;
  stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}
.marginalia .tag { max-width: 26rem; text-align: center; }
.ink-draw [stroke] {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1);
}
.is-visible .ink-draw [stroke] { stroke-dashoffset: 0; }

/* ---- 10. V. Reading room ------------------------------------------------ */
.reading-room {
  background: var(--olive);
  color: var(--bone);
  --rule: 1px solid rgba(241,235,224,.22);
}
.reading-room .tag,
.reading-room .caption,
.reading-room .lede { color: rgba(241,235,224,.72); }
.reading-room .chapter-num { -webkit-text-stroke-color: rgba(241,235,224,.45); }
.curve-in  { color: var(--olive); background: var(--chalk); }
.curve-out { color: var(--bone);  background: var(--olive); }
.reading-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
}
.pull {
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.42;
  font-style: italic;
  max-width: 30rem;
  margin: 0 0 2rem;
}
.reading-room .drop::first-letter {
  float: left; font-size: 3.9em; line-height: .84; padding: .06em .12em 0 0;
  color: var(--sand);
}
.entry {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1.2rem;
  align-items: baseline; padding: 1.15rem 0; border-top: var(--rule);
  text-decoration: none; transition: opacity .3s, transform .4s;
}
.entry:hover, .entry:focus-visible { opacity: .68; transform: translateX(5px); }
.entry .no, .entry .yr {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(241,235,224,.6);
}
.entry .ttl { font-size: 1.15rem; }
@media (max-width: 820px) { .reading-grid { grid-template-columns: 1fr; } }

/* ---- 11. VI. Colophon --------------------------------------------------- */
.colophon { background: var(--bone); }
.colophon-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-top: 3rem; border-top: var(--rule);
}
.colophon-grid h3 { font-family: var(--mono); font-size: .62rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .9rem; }
.colophon-grid p, .colophon-grid a { font-size: .98rem; margin: 0 0 .35rem; }
.colophon-grid a { display: block; text-decoration: none; border-bottom: 1px solid rgba(44,40,35,.25); width: fit-content; }
.colophon-grid a:hover { border-color: var(--ink); }
/* The one place the person behind the studio is named. Set in the serif,
   a shade darker than the surrounding notes — a signature, not a headline. */
.signed { color: var(--ink); font-style: italic; }
.colophon-mark { text-align: center; padding-block: clamp(4rem, 10vw, 8rem) 3rem; }
.colophon-mark .display { font-size: clamp(1.8rem, 4vw, 3rem); }
.fine {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding: 1.5rem 0 3rem; border-top: var(--rule);
}

/* ---- 12. Reveal on scroll ----------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1); }
.reveal.d1.is-visible { transition-delay: .12s; }
.reveal.d2.is-visible { transition-delay: .24s; }
.reveal.d3.is-visible { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .ink-draw [stroke] { stroke-dashoffset: 0; transition: none; }
}

/* Keyboard users always get a visible focus ring. */
:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }

/* ==========================================================================
   PART TWO — the five worlds
   Hub gateways, section pages, galleries, verse, audio and article lists.
   ========================================================================== */

/* ---- 13. The five gateways on the hub ---------------------------------- */
.gateways { display: grid; gap: clamp(1px, .3vw, 2px); }

.gateway {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.6rem, 3.4vw, 3rem) 0;
  border-top: var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background-color .55s ease, padding-left .55s cubic-bezier(.22,.61,.36,1);
}
.gateway:last-child { border-bottom: var(--rule); }
.gateway:hover, .gateway:focus-visible {
  background: var(--chalk);
  padding-left: clamp(.5rem, 1.6vw, 1.4rem);
}

.gateway-num {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .24em;
  color: var(--ink-soft);
  align-self: start;
  padding-top: .55rem;
}
.gateway-name {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  transition: color .4s;
}
.gateway:hover .gateway-name { color: var(--clay); }
.gateway-line {
  color: var(--ink-soft);
  font-size: clamp(.95rem, .5vw + .85rem, 1.1rem);
  margin: .55rem 0 0;
  max-width: 34ch;
}
.gateway-count {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: .9rem 0 0;
}
.gateway-thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.gateway-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1), filter .7s;
  filter: saturate(.82);
}
.gateway:hover .gateway-thumb img { transform: scale(1.045); filter: saturate(1); }
.gateway-arrow {
  position: absolute; right: 0; top: 50%;
  font-family: var(--mono); font-size: .8rem; color: var(--ink-soft);
  opacity: 0; transform: translate(-14px, -50%);
  transition: opacity .45s, transform .45s;
}
.gateway:hover .gateway-arrow { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 820px) {
  .gateway { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .gateway-thumb { display: none; }
  .gateway-num { padding-top: .35rem; font-size: .6rem; }
}

/* ---- 14. Section page hero --------------------------------------------- */
.page-hero { padding-block: clamp(7rem, 15vh, 11rem) clamp(2.5rem, 6vw, 4.5rem); }
.page-hero .display { max-width: 16ch; margin-top: 1.2rem; }
.page-hero .lede { margin-top: 1.8rem; }
.crumb {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .3s, color .3s;
}
.crumb:hover { color: var(--ink); border-color: var(--ink); }

/* ---- 15. Filters -------------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: .5rem clamp(.5rem, 1.4vw, 1rem);
  padding: 1.2rem 0; border-top: var(--rule); border-bottom: var(--rule);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.chip {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft);
  background: none; border: 1px solid rgba(44,40,35,.22);
  padding: .5rem .85rem; cursor: pointer; border-radius: 999px;
  transition: color .3s, border-color .3s, background-color .3s;
}
.chip:hover { color: var(--ink); border-color: rgba(44,40,35,.5); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.is-filtered-out { display: none !important; }

/* ---- 16. Galleries ------------------------------------------------------ */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.4vw, 2.2rem);
}
.gallery--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }

.work { position: relative; margin: 0; cursor: zoom-in; }
.work-frame { position: relative; overflow: hidden; background: var(--stone); }
.work-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1), filter .6s;
}
.work:hover .work-frame img { transform: scale(1.04); }
.work-meta { margin-top: .8rem; }
.work-title { font-size: 1.02rem; line-height: 1.3; }
.work-sub {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin: .35rem 0 0;
}
.work-hint {
  position: absolute; inset: auto 0 0 0;
  padding: 2.2rem .9rem .8rem;
  background: linear-gradient(to top, rgba(30,27,22,.62), transparent);
  color: var(--bone);
  font-family: var(--mono); font-size: .55rem; letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0; transition: opacity .4s;
}
.work:hover .work-hint { opacity: 1; }

/* ---- 17. Lightbox — the image and the story behind it ------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(32, 30, 25, .93);
  backdrop-filter: blur(6px);
}
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  width: min(100%, 74rem);
  max-height: 88vh;
}
.lightbox-figure { display: grid; place-items: center; min-height: 0; }
.lightbox-figure img {
  max-width: 100%; max-height: 82vh; object-fit: contain;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.7);
}
.lightbox-story { color: var(--bone); max-height: 78vh; overflow-y: auto; padding-right: .5rem; }
.lightbox-story .tag { color: rgba(241,235,224,.66); }
.lightbox-story h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); margin: .8rem 0 1rem; }
.lightbox-story p { color: rgba(241,235,224,.86); font-size: 1rem; }
.lightbox-close {
  position: fixed; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(241,235,224,.75);
}
.lightbox-close:hover { color: var(--bone); }
.lightbox-nav {
  position: fixed; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%);
  display: flex; gap: 1.6rem; align-items: center;
}
.lightbox-nav button {
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(241,235,224,.75);
}
.lightbox-nav button:hover { color: var(--bone); }
.lightbox-count { font-family: var(--mono); font-size: .58rem; letter-spacing: .2em; color: rgba(241,235,224,.5); }
@media (max-width: 820px) {
  .lightbox-inner { grid-template-columns: 1fr; max-height: 82vh; overflow-y: auto; }
  .lightbox-figure img { max-height: 46vh; }
  .lightbox-story { max-height: none; }
}

/* ---- 18. The editable canvas on each landing page ----------------------- */
.canvas { padding-bottom: clamp(5rem, 12vw, 9rem); }

.block { padding-block: clamp(2.2rem, 5vw, 4rem); border-top: var(--rule); }
.block:first-child { border-top: 0; padding-top: 0; }
.block-label {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1.1rem;
}
.block h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin-bottom: .9rem; }
.block p { max-width: var(--measure); color: var(--ink-soft); }

/* An empty slot — visible enough to show where work will sit, quiet enough
   not to look broken while the room is still being furnished. */
.slot {
  display: grid; place-items: center; text-align: center;
  gap: .7rem;
  min-height: clamp(9rem, 20vw, 15rem);
  padding: 2rem;
  border: 1px dashed rgba(44,40,35,.26);
  background: rgba(250,248,243,.5);
}
.slot .tag { color: var(--ink-soft); }
.slot-note { font-size: .95rem; color: var(--ink-soft); max-width: 34ch; margin: 0; }
.slot-grid {
  display: grid; gap: clamp(.9rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.reading-room .slot { border-color: rgba(241,235,224,.3); background: rgba(241,235,224,.05); }
.reading-room .slot-note, .reading-room .slot .tag { color: rgba(241,235,224,.7); }

/* ---- 19. Verse, for the Poetry room ------------------------------------ */
.verse { margin: 0 0 clamp(2rem, 4vw, 3rem); max-width: 40rem; }
.verse-form {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .8rem;
}
.verse-body { font-size: clamp(1.1rem, 1.4vw, 1.35rem); line-height: 2; white-space: pre-line; }
.verse--urdu {
  direction: rtl; text-align: right;
  font-family: "Noto Nastaliq Urdu", var(--serif);
  line-height: 2.9; font-size: clamp(1.05rem, 1.3vw, 1.25rem);
}
.verse--hindi { font-family: "Noto Serif Devanagari", var(--serif); line-height: 2.2; }
.verse-gloss {
  font-size: .95rem; font-style: italic; color: var(--ink-soft);
  margin-top: 1rem; padding-top: 1rem; border-top: var(--rule); max-width: 34rem;
}

/* ---- 20. Audio, for the Melody room ------------------------------------ */
.track { padding: 1.3rem 0; border-top: var(--rule); }
.track:last-of-type { border-bottom: var(--rule); }
.track-head { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: baseline; }
.track-title { font-size: 1.15rem; }
.track-meta {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft);
}
.track audio { width: 100%; margin-top: .9rem; filter: grayscale(1) contrast(.9); opacity: .85; }
.embed { position: relative; padding-top: 56.25%; margin-top: .9rem; background: var(--stone); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- 21. The doors, set in the olive room ------------------------------- */
/* Cream, then a dark chamber where you choose, then cream again — the same
   rhythm the single page had, doing more work here. */
.rooms-dark {
  background: var(--olive);
  color: var(--bone);
  --rule: 1px solid rgba(241, 235, 224, .2);
}
.rooms-dark .tag { color: rgba(241, 235, 224, .68); }
.rooms-dark .headline { color: var(--bone); }

.rooms-dark .gateway { color: var(--bone); }
.rooms-dark .gateway:hover,
.rooms-dark .gateway:focus-visible { background: rgba(241, 235, 224, .06); }
.rooms-dark .gateway-num,
.rooms-dark .gateway-line,
.rooms-dark .gateway-count { color: rgba(241, 235, 224, .66); }
.rooms-dark .gateway:hover .gateway-name { color: var(--pink); }
.rooms-dark .gateway-arrow { color: rgba(241, 235, 224, .8); }
.rooms-dark .gateway-thumb img { filter: saturate(.7) brightness(.9); }
.rooms-dark .gateway:hover .gateway-thumb img { filter: saturate(1) brightness(1); }

/* the curved boundaries either side of it */
.curve-into-olive { color: var(--olive); background: var(--bone); }
.curve-outof-olive { color: var(--bone); background: var(--olive); }

/* ---- 22. The olive band on a room page --------------------------------- */
.band-dark {
  background: var(--olive);
  color: var(--bone);
  --rule: 1px solid rgba(241, 235, 224, .2);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.band-dark .block-label,
.band-dark .tag,
.band-dark .caption { color: rgba(241, 235, 224, .68); }
.band-dark p { color: rgba(241, 235, 224, .84); }
.band-dark h3 { color: var(--bone); }
.band-dark .entry .ttl { color: var(--bone); }
.band-dark .slot { border-color: rgba(241,235,224,.3); background: rgba(241,235,224,.05); }
.band-dark .slot-note { color: rgba(241,235,224,.7); }

/* ---- 23. The wordmark gains its tagline -------------------------------- */
.masthead { align-items: flex-start; }
.sig { display: block; line-height: 1.2; }
.sig-tag {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: .82rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  margin-top: .28rem;
}
.masthead.on-dark .sig-tag { color: rgba(241, 235, 224, .68); }
.masthead.is-settled .sig-tag { font-size: .76rem; }
@media (max-width: 760px) { .sig-tag { font-size: .74rem; } }

/* With the section heading gone, the olive room needs its own breathing room */
.rooms-dark { padding-top: clamp(3rem, 7vw, 5.5rem) !important; }

/* ---- 24. The tagline begins where the wordmark ends --------------------- */
/* An invisible copy of the wordmark reserves exactly its width, so the
   tagline starts at the wordmark's right edge at every size — no guessed
   pixel values that drift when the type scales. */
.sig { display: inline-block; }
.sig-ghost {
  display: inline-block;
  visibility: hidden;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-style: normal;
}
@media (max-width: 760px) {
  .sig-ghost { font-size: .6rem; letter-spacing: .24em; }
}

/* ---- 25. Verse titles --------------------------------------------------- */
.verse-title {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  margin: 0 0 1.1rem;
  color: var(--ink);
}
.verse-title.verse--hindi { font-family: "Noto Serif Devanagari", var(--serif); line-height: 1.5; }
.verse-title.verse--urdu  { font-family: "Noto Nastaliq Urdu", var(--serif); line-height: 2.2; }
.verse-body.verse--hindi  { direction: ltr; text-align: left; }

/* ---- 26. The photograph on each door ----------------------------------- */
/* Sources from images/doors/<room>.jpg — swap that file and the door
   changes; no markup or CSS to touch. */
.gateway-thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
}
.gateway-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}

/* The drawn marks are kept below, unused, in case the doors ever want them
   back. Nothing references .gateway-mark at present. */
.gateway-mark { width: clamp(74px, 8.5vw, 116px); height: auto; overflow: visible; }
.gateway-mark path, .gateway-mark circle {
  fill: none; stroke: rgba(241, 235, 224, .42);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .5s ease;
}
.gateway-mark .fill { fill: rgba(241, 235, 224, .42); stroke: none; }

@media (max-width: 820px) {
  .gateway-thumb { display: none; }
}

/* ---- 27. The invocation ------------------------------------------------- */
/* A small drawn portrait at the head of the page. Ink on nothing, so it sits
   on the paper rather than on top of it. Deliberately coin-sized — present,
   not presiding. */
.invocation {
  display: grid;
  place-items: center;
  margin-bottom: clamp(2.4rem, 6vw, 4.5rem);
}
.invocation img {
  width: clamp(78px, 8.5vw, 120px);
  height: auto;
  opacity: .92;
}

/* the dedication, set in the same hand as the wordmark's tagline */
.invocation-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: .82rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  margin: .85rem 0 0;
  text-align: center;
}
@media (max-width: 760px) { .invocation-line { font-size: .74rem; } }

/* ---- 28. A cut-out in the opening -------------------------------------- */
/* Transparent PNG: no frame, no drop shadow — otherwise a rectangular shadow
   appears behind an object that has no rectangle. */
.opening-object--cutout { max-width: 27.6rem; }   /* 24rem + 15% */
.opening-object--cutout img { box-shadow: none; }
@media (max-width: 820px) { .opening-object--cutout { max-width: 17.25rem; } }

/* ---- 29. Artistry — paintings, uncropped ------------------------------- */
/* A column flow rather than a grid: paintings arrive in every proportion and
   must never be cropped to fit a cell. Each keeps its own shape; the columns
   fill around them. */
.gallery--art {
  display: block;
  columns: 3;
  column-gap: clamp(1rem, 2.4vw, 2.2rem);
}
@media (max-width: 1000px) { .gallery--art { columns: 2; } }
@media (max-width: 620px)  { .gallery--art { columns: 1; } }

.gallery--art .work {
  break-inside: avoid;
  margin: 0 0 clamp(1rem, 2.4vw, 2.2rem);
  display: block;
}
.gallery--art .work-frame {
  display: block;
  background: #FBF9F5;                     /* paper, a shade above the page */
  padding: clamp(.5rem, 1.1vw, .9rem);     /* a mount, as a print would have */
  box-shadow: 0 2px 3px rgba(44,40,35,.05), 0 14px 30px -22px rgba(44,40,35,.5);
  transition: box-shadow .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.gallery--art .work-frame img {
  width: 100%; height: auto;               /* natural proportions, never cropped */
  object-fit: fill;
  display: block;
}
.gallery--art .work:hover .work-frame {
  transform: translateY(-3px);
  box-shadow: 0 3px 5px rgba(44,40,35,.06), 0 22px 44px -24px rgba(44,40,35,.55);
}
.gallery--art .work:hover .work-frame img { transform: none; }
.gallery--art .work-hint { padding: 1.6rem .8rem .7rem; }