/* Home & Out — hand-written stylesheet. No framework, no preprocessor.
   Light is the design, not a mode: warm near-white paper, cream only as a tint.
   A 12-column grid, an 8px rhythm, and accents used sparingly. */

@font-face{font-family:'Playfair Display';src:url('../fonts/PlayfairDisplay-wght.ttf') format('truetype-variations'),url('../fonts/PlayfairDisplay-wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../fonts/PlayfairDisplay-Italic-wght.ttf') format('truetype-variations'),url('../fonts/PlayfairDisplay-Italic-wght.ttf') format('truetype');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:'Karla';src:url('../fonts/Karla-wght.ttf') format('truetype-variations'),url('../fonts/Karla-wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
/* ---------- tokens ----------
   Paper is the brightest thing on the page; the old cream survives only as a
   tint for bands and quiet cards. Terracotta and gold are rare accents. */
:root{
--paper:#FFFFFF;--paper-2:#FAFAF9;--tint:#F2F2F0;--tint-2:#E9E9E6;
--ink:#2A2115;--muted:#5E5546;--faint:#756B59;
--rule:#E2E2DE;--hair:#EEEEEA;--hairw:1px;
--terracotta:#9C4A2C;--gold:#B08A3C;--gold-ink:#8A6A26;--clara:#8A4363;--june:#3E6678;
--serif:'Playfair Display',Georgia,'Times New Roman',serif;
--sans:'Karla','Heebo',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:72px;--s7:104px;--s8:144px;
--gutter:clamp(20px,4.4vw,64px);--colgap:clamp(16px,2.2vw,32px);--rowgap:clamp(48px,5.4vw,84px);
--wide:77.5rem;--mid:72rem;--measure:34rem;
--t-body:clamp(1.0625rem,1.0rem + .3vw,1.125rem);
--t-xl:clamp(2.7rem,1.15rem + 5.3vw,4.4rem);
--t-l:clamp(2.15rem,1.2rem + 3.9vw,3.4rem);
--t-m:clamp(1.6rem,1.12rem + 2vw,2.3rem);
--t-s:clamp(1.24rem,1.1rem + .7vw,1.55rem);
--t-card:clamp(1.18rem,1.06rem + .42vw,1.34rem);
--t-dek:clamp(1.1rem,1.0rem + .55vw,1.4rem);
--t-label:.6875rem;
--ar-wide:3/2;--ar-tall:4/5;--ar-strip:12/5;
--ease:cubic-bezier(.22,.61,.36,1)}
@media (min-resolution:2dppx){:root{--hairw:.5px}}
*,*::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(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:var(--t-body);line-height:1.74;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.06;margin:0;letter-spacing:-.018em;text-wrap:balance}
p{margin:0 0 1.15em;text-wrap:pretty}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 16px;z-index:60}
.skip-link:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:4px;border-radius:1px}
/* ---------- labels ---------- */
.label,.eyebrow{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin:0;font-weight:500}
.label--room{display:block;color:var(--terracotta);margin-bottom:12px}
.label--byline{display:block;letter-spacing:.2em;font-size:.625rem;color:var(--faint)}
.folio{font-family:var(--mono);font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
/* ---------- measure / grid ---------- */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.wrap--mid{max-width:var(--mid)}
/* ---------- masthead ---------- */
.masthead{padding:clamp(22px,3.4vw,40px) var(--gutter) 0;text-align:center}
.masthead-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.mark{flex:none;display:block}.mark-accent{fill:var(--terracotta)}
.wordmark{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,6.2vw,2.5rem);letter-spacing:-.028em;line-height:1}
.masthead-tagline{display:flex;align-items:center;justify-content:center;gap:16px;font-family:var(--mono);font-size:.5625rem;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);margin:16px 0 0}
.masthead-tagline .rule{display:block;width:clamp(16px,8vw,72px);height:var(--hairw);background:var(--rule)}
.nav{margin-top:22px;border-top:var(--hairw) solid var(--rule);border-bottom:var(--hairw) solid var(--rule)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(14px,3.1vw,36px)}
.nav a{position:relative;display:inline-flex;align-items:center;text-decoration:none;color:var(--muted);font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding:0 2px;min-height:48px;transition:color .3s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:11px;height:1px;background:var(--terracotta);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a.is-current{color:var(--ink)}
.nav a.is-current::after{transform:scaleX(1)}
@media (max-width:26rem){.nav ul{gap:0 13px}.nav a{font-size:.6rem;letter-spacing:.13em}}
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:45;pointer-events:none}
.progress-bar{display:block;height:100%;background:var(--terracotta);transform:scaleX(0);transform-origin:0 50%}
.topbar{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px var(--gutter);background:rgba(255,255,255,.94);border-bottom:var(--hairw) solid var(--rule);transform:translateY(-105%);visibility:hidden}
.topbar-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.topbar-link{text-decoration:none;color:var(--muted);font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;padding:12px 4px}
/* ---------- home opening spread ----------
   One cinematic picture across all twelve columns, the headline under it in
   seven, and the standfirst in the remaining five. */
.opener{padding-top:clamp(24px,3.4vw,44px)}
.opener-media{position:relative;display:block;overflow:hidden;background:var(--tint)}
.opener-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.opener-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap);row-gap:var(--s3);margin-top:clamp(22px,2.8vw,38px)}
.opener-head{grid-column:1/13}
.opener-side{grid-column:1/13}
.opener-head h1{font-size:var(--t-xl);line-height:.98;letter-spacing:-.032em;margin:14px 0 0}
.opener-head h1 a{text-decoration:none;color:inherit}
.dek{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--t-dek);line-height:1.42;color:var(--muted);margin:0 0 26px;letter-spacing:-.005em;text-wrap:pretty}
@media (min-width:48rem){.opener-media img{aspect-ratio:2/1}}
@media (min-width:64rem){
  .opener-head{grid-column:1/8}
  .opener-side{grid-column:8/13;border-top:1px solid var(--ink);padding-top:18px}
  .opener-side .dek{margin-bottom:22px}
}
@media (max-width:63.99rem){
  .opener-media{width:calc(100% + var(--gutter)*2);margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1)}
}
/* ---------- byline ---------- */
.byline{display:flex;align-items:center;gap:13px;margin:0 0 24px}
.byline-avatar{width:44px;height:44px;border-radius:50%;flex:none;display:block}
.byline-avatar img,.se-voice-avatar img{display:block;width:100%;height:100%;border-radius:50%}
.byline-text{font-size:.86rem;line-height:1.3;color:var(--muted)}
.byline-text strong{display:block;color:var(--ink);font-weight:500;font-size:.66rem;font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase}
.byline-meta{display:block;font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--muted);line-height:1.35;margin-top:2px}
.byline.nora .byline-meta{color:var(--terracotta)}
.byline.clara .byline-meta{color:var(--clara)}
.readmore{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta);text-decoration:none;padding:12px 0;min-height:44px}
.readmore::after{content:"";width:28px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.readmore:hover::after{width:44px}
/* ---------- article opening ---------- */
.article-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap)}
.article-head{grid-column:1/13;padding-top:clamp(22px,4vw,48px)}
@media (min-width:64rem){.article-head{grid-column:1/10}}
.article-head h1{font-size:var(--t-l);line-height:1.02;letter-spacing:-.026em;margin:0 0 20px}
.article-head .dek{margin-bottom:26px;max-width:32em}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--mono);font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--terracotta);margin:0 0 16px}
.kicker a{text-decoration:none}
.kicker .no{color:var(--faint)}
.article-figure{grid-column:1/13;margin:clamp(20px,3.4vw,40px) 0 clamp(22px,3vw,38px);overflow:hidden;background:var(--tint)}
.article-figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (min-width:48rem){.article-figure img{aspect-ratio:var(--ar-wide)}}
@media (max-width:63.99rem){
  .article-figure{width:calc(100% + var(--gutter)*2);margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1)}
}


/* ---------- hairlines and ornament ---------- */
.sep{color:var(--faint);margin:0 .2em;font-style:normal}
.ornament{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--faint);margin:var(--s6) 0}
.ornament span{display:block;height:var(--hairw);background:var(--rule);flex:1;max-width:160px}
.ornament .mark-accent{fill:var(--terracotta)}

/* ---------- sticky bar (JS adds the classes; without JS it never shows) ---------- */
html.js .topbar{transition:transform .38s var(--ease),visibility .38s}
html.is-scrolled .topbar{transform:translateY(0);visibility:visible}
html.is-scrolled.is-down .topbar{transform:translateY(-105%);visibility:hidden}
@supports (backdrop-filter:blur(8px)){.topbar{backdrop-filter:blur(10px) saturate(1.06)}}
@media (prefers-reduced-motion:reduce){html.js .topbar{transition:none}}
html.js .progress-bar{transition:transform .12s linear}

/* ---------- reveal: slow, small, opt-in ---------- */
html.reveal-on .reveal{opacity:0;transform:translateY(10px)}
html.reveal-on .reveal.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

/* ---------- section furniture ---------- */
.section{padding-top:var(--s7)}
.section:last-of-type{padding-bottom:var(--s5)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:12px;margin-bottom:var(--s5)}
.section-head h2{font-size:var(--t-s);letter-spacing:-.012em}
.section-head .count{font-family:var(--mono);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.section-head .readmore{padding:0;min-height:0}

/* The issue line that closes the opening spread */
.issueline{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:space-between;border-top:var(--hairw) solid var(--rule);border-bottom:var(--hairw) solid var(--rule);padding:14px 0;margin-top:clamp(34px,4.6vw,64px)}
.issueline span{white-space:nowrap}

/* ---------- opener media ---------- */
.opener-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(42,33,21,.06);pointer-events:none}
.opener-media img{transition:transform 1.4s var(--ease)}
.opener-media:hover img,.opener-media:focus-visible img{transform:scale(1.018)}
@media (prefers-reduced-motion:reduce){.opener-media img{transition:none}.opener-media:hover img{transform:none}}

/* ---------- the story grid ---------- */
.stories{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap);row-gap:var(--rowgap)}
.card{margin:0;grid-column:1/13}
.card-link{display:block;text-decoration:none;color:inherit}
.card-media{display:block;overflow:hidden;background:var(--tint);margin-bottom:var(--s3);position:relative}
.card-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(42,33,21,.06);pointer-events:none;transition:box-shadow .5s var(--ease)}
.card-media img{width:100%;aspect-ratio:var(--ar-wide);object-fit:cover;transition:transform 1.2s var(--ease)}
.card-link:hover .card-media img,.card-link:focus-visible .card-media img{transform:scale(1.022)}
.card-link:hover .card-media::after{box-shadow:inset 0 0 0 1px rgba(42,33,21,.16)}
.card-headline{font-family:var(--serif);font-weight:700;font-size:var(--t-card);line-height:1.15;margin:0 0 10px;letter-spacing:-.016em;text-wrap:balance;transition:color .45s var(--ease)}
.card-link:hover .card-headline,.card-link:focus-visible .card-headline{color:var(--terracotta)}
.card-hook{display:block;font-size:.95rem;color:var(--muted);line-height:1.62;margin-bottom:16px;text-wrap:pretty}
.card-no{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;color:var(--gold-ink);display:block;margin-bottom:10px}

.card--feature .card-headline{font-size:var(--t-m);line-height:1.08;letter-spacing:-.026em}
.card--feature .card-hook{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.5}
@media (min-width:40rem){
  .card{grid-column:span 6}
  .card--feature{grid-column:span 12}
}
@media (min-width:64rem){
  .card{grid-column:span 4}
  .card--feature{grid-column:span 8}
  .card--feature .card-text{display:block;max-width:44rem}
  .card--feature .card-hook{font-size:1.12rem;max-width:34rem}
  .card--tall,.card--text{align-self:start}
}
.card--tall .card-media img{aspect-ratio:var(--ar-tall)}
/* A typographic card: used where the photo library would otherwise repeat */
.card--text{border-top:1px solid var(--ink);padding-top:var(--s2)}
.card--text .card-media{display:none}
.card--text .card-headline{font-size:var(--t-s);line-height:1.12}
.card--text .card-hook{font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.5;color:var(--muted)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:0 20px;background:var(--paper);font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:border-color .35s var(--ease),color .35s var(--ease),background-color .35s var(--ease)}
.chip:hover,.chip:focus-visible{border-color:var(--terracotta);color:var(--terracotta);background:var(--paper-2)}

/* ---------- cinemagraph ----------
   The photograph does not move. One or two things inside it do: a curtain
   breathing at the window, a patch of afternoon light shifting on the bed.
   Over the still picture sits one opaque copy of it per moving part, each cut
   to that part's traced outline. The parts never overlap, so nothing is ever
   drawn twice and the picture stays as sharp as the original. The loop runs
   back and forth, so it never jumps; it is slow enough to be felt, not watched. */
.cine{position:relative;isolation:isolate}
.cine-drift{position:absolute;inset:0;pointer-events:none;
  animation-name:cine-drift;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;animation-direction:alternate}
@keyframes cine-drift{
  0%{transform:translate3d(-.14%,0,0)}
  38%{transform:translate3d(.06%,-.05%,0)}
  100%{transform:translate3d(.14%,.04%,0)}
}
.cine-layer{position:absolute;inset:0;pointer-events:none;
  background-image:var(--img-tall);background-size:cover;background-position:center;
  -webkit-mask-image:var(--matte-tall);mask-image:var(--matte-tall);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation-iteration-count:infinite;animation-direction:alternate;
  backface-visibility:hidden;transform:translateZ(0)}
@media (min-width:48rem){
  .cine-layer{background-image:var(--img-wide);
    -webkit-mask-image:var(--matte-wide);mask-image:var(--matte-wide)}
}
/* Wind. The rod holds the top of the curtain still; the hem travels furthest.
   A plain 2D skew keeps every thread of the lace exactly as crisp as the
   photograph underneath - a 3D turn would resample it and soften the weave. */
.cine--wind{transform-origin:top center;--sk:1.15deg;--tx:.22%;
  animation-name:cine-wind;animation-timing-function:cubic-bezier(.42,.02,.58,.98)}
/* Unequal stops, not a clean there-and-back. Real air gusts and slackens, so
   the curtain pauses at one end and hurries through the middle. A pure
   pendulum is predictable, and a predictable motion stops being looked at. */
@keyframes cine-wind{
  0%{transform:skewX(calc(var(--sk) * -1)) translateX(calc(var(--tx) * -1))}
  22%{transform:skewX(calc(var(--sk) * -.42)) translateX(calc(var(--tx) * -.5))}
  46%{transform:skewX(calc(var(--sk) * .78)) translateX(calc(var(--tx) * .62))}
  61%{transform:skewX(calc(var(--sk) * .34)) translateX(calc(var(--tx) * .28))}
  100%{transform:skewX(var(--sk)) translateX(var(--tx))}
}
/* Light. Nothing moves at all: a cloud crosses, and the patch of sun dims and
   brightens around the exposure the photographer chose. Geometry is untouched,
   so it cannot blur - but pushing brightness only upward blows out a sunbeam
   that is already near white and erases the detail in it, which reads as
   softness just the same.

   So a light part does not paint a copy of the photograph at all. It lays a
   soft-light wash over it and animates only that wash's colour: neutral grey
   at rest, a warm pale at the bright end, a cool grey at the dim end - sun,
   then cloud. Not one pixel of the picture is resampled, so this cannot cost
   detail even where the part covers half the frame. */
.cine .cine--light{background-image:none;background-color:rgb(128,128,128);
  mix-blend-mode:soft-light;opacity:.62;will-change:background-color;
  animation-name:cine-light;animation-timing-function:ease-in-out}
@keyframes cine-light{
  0%{background-color:rgb(128,128,128)}
  46%{background-color:rgb(198,193,181)}
  100%{background-color:rgb(104,107,114)}
}
/* Cut flowers in a jug. They are held at the stems, so the heads lean and
   return; the pivot sits low, at the mouth of the vessel. */
.cine--nod{transform-origin:bottom center;--sk:.9deg;
  animation-name:cine-nod;animation-timing-function:cubic-bezier(.4,.05,.6,.95)}
@keyframes cine-nod{
  0%{transform:rotate(calc(var(--sk) * -1))}
  34%{transform:rotate(calc(var(--sk) * .2))}
  67%{transform:rotate(calc(var(--sk) * -.3))}
  100%{transform:rotate(var(--sk))}
}
.is-listening .cine--nod{--sk:1.25deg}
.cine--nod.is-cued{--sk:1.9deg}
/* Some things cannot be cut cleanly from what is behind them - a houseplant
   standing in a window, its leaves laced through the frame. Those move a
   third as far, which is enough to read as alive and too little to drag the
   architecture with them. */
.cine--nod.is-gentle{--sk:.34deg}
.is-listening .cine--nod.is-gentle{--sk:.46deg}
.cine--nod.is-gentle.is-cued{--sk:.72deg}
.cine--wind.is-gentle{--sk:.4deg;--tx:.08%}
.is-listening .cine--wind.is-gentle{--sk:.55deg;--tx:.11%}
.cine--wind.is-gentle.is-cued{--sk:.9deg;--tx:.18%}
/* Steam, or dust in a shaft of light. It rises, spreads and thins out, so it
   fades at both ends of the loop and the turn is never visible. */
.cine--rise{animation-name:cine-rise;animation-timing-function:ease-in-out}
@keyframes cine-rise{
  0%{opacity:.25;transform:translate3d(.3%,1.8%,0) scale(1)}
  55%{opacity:.85;transform:translate3d(-.2%,-.6%,0) scale(1.02)}
  100%{opacity:.15;transform:translate3d(-.7%,-2.6%,0) scale(1.05)}
}
/* A casement on the breeze. Small on purpose: the photograph holds no
   information about what is behind the sash, so it can drift, never swing. */
.cine--sash{transform-origin:left center;
  animation-name:cine-sash;animation-timing-function:cubic-bezier(.36,0,.64,1)}
@keyframes cine-sash{
  from{transform:perspective(1800px) rotateY(0deg)}
  to{transform:perspective(1800px) rotateY(1.4deg)}
}
/* While June is reading, the reader is looking at this photograph and nothing
   else, often for three minutes. So the room breathes a little deeper for as
   long as the audio runs, and settles again when it stops. The two cycles are
   11s and 17s - both prime, so the pair only repeats every 3 minutes 7 seconds,
   about the length of a story. Nobody staring at it will catch the loop. */
.is-listening .cine--wind{--sk:1.7deg;--tx:.34%}
.is-listening .cine .cine--light{animation-duration:12s}
/* And when June actually names this thing, it answers her. The amplitude is a
   custom property, so it eases from one value to the other without restarting
   the cycle - the curtain lifts mid-swing, the way a real gust takes it. */
.cine-layer{transition:--sk 1.6s ease,--tx 1.6s ease}
.cine--wind.is-cued{--sk:2.9deg;--tx:.6%}
@property --sk{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --tx{syntax:"<percentage>";inherits:false;initial-value:0%}
@media (prefers-reduced-motion:reduce){.cine-layer{animation:none;opacity:0}}

/* ---------- listen: June reads the story ----------
   Sits above the first paragraph, in June's slate blue. Nothing is fetched
   until the reader presses play, so the page weight is unchanged for readers. */
.listen{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s2);
  margin:0 0 var(--s4);padding:14px 18px 14px 14px;max-width:var(--measure);
  border:1px solid var(--rule);border-radius:2px;background:var(--paper-2)}
.listen.is-live{border-color:var(--june)}
.listen-play{grid-row:1;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--june);color:var(--paper);
  transition:transform .3s var(--ease),background-color .3s var(--ease)}
.listen-play:hover,.listen-play:focus-visible{transform:scale(1.06)}
.listen-icon{width:22px;height:22px;fill:currentColor}
.listen .listen-pause{display:none}
.listen.is-playing .listen-tri{display:none}
.listen.is-playing .listen-pause{display:inline}
.listen-text{grid-row:1;min-width:0}
.listen-label{margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.3;color:var(--ink)}
.listen-meta{margin:3px 0 0;font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint)}
.listen-meta .ver{color:var(--june)}
.listen-meta .sep{margin:0 .35em}
.listen-time{grid-row:1;font-family:var(--mono);font-size:.6875rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.listen-track{grid-column:1/4;height:2px;background:var(--tint-2);overflow:visible;
  cursor:pointer;position:relative}
.listen-track::before{content:"";position:absolute;inset:-10px 0}
.listen-track:focus-visible{outline:2px solid var(--june);outline-offset:6px}
.listen-fill{display:block;height:100%;width:100%;background:var(--june);
  transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
@media (max-width:30rem){.listen{gap:12px;padding:12px 14px}.listen-label{font-size:.95rem}}
@media (prefers-reduced-motion:reduce){.listen-play,.listen-fill{transition:none}}

/* ---------- article body and margin rail ---------- */
.article-body{grid-column:1/13}
.rail{grid-column:1/13;margin:0 0 var(--s4);border-top:1px solid var(--ink);padding-top:14px}
@media (min-width:64rem){
  .article-head{grid-row:1}
  .article-figure{grid-row:2}
  .article-body{grid-column:1/9;grid-row:3}
  .rail{grid-column:10/13;grid-row:3;align-self:start;position:sticky;top:96px;margin:0;border-top-width:1px}
}
.rail dl{margin:0;display:grid;gap:14px}
@media (max-width:63.99rem){.rail .rail-dup{display:none}.rail dl{gap:12px}}
.rail dt{font-family:var(--mono);font-size:.5625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.rail dd{margin:0;font-size:.8rem;line-height:1.55;color:var(--muted)}
.rail dd a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.rail dd a:hover{color:var(--terracotta);text-decoration-color:var(--terracotta)}
.rail .no{font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--gold);letter-spacing:-.02em}


.prose{font-size:var(--t-body);line-height:1.76;max-width:var(--measure)}
.prose p{margin:0 0 1.3em}
.prose strong{font-weight:700;color:var(--ink)}
.prose em{font-style:italic}
.prose code{font-family:var(--mono);font-size:.85em;background:var(--tint);padding:.1em .35em;border-radius:2px}
.prose ul,.prose ol{margin:0 0 1.5em;padding-left:1.3em}
.prose li{margin:0 0 .55em;padding-left:.2em}
.prose ul li::marker{color:var(--terracotta)}
.prose ol li::marker{font-family:var(--mono);font-size:.8em;color:var(--gold-ink)}
.prose > p:first-of-type{font-size:1.06em;line-height:1.66}
.prose > p:first-of-type::first-letter{font-family:var(--serif);font-weight:700;float:left;font-size:3.35em;line-height:.78;padding:.06em .085em 0 0;margin-top:.03em;color:var(--terracotta)}

.callout{background:var(--tint);border-top:2px solid var(--terracotta);padding:var(--s4) clamp(20px,3.4vw,34px);margin:var(--s6) 0;max-width:var(--measure)}
.callout .eyebrow{color:var(--terracotta);margin-bottom:10px}
.callout h2{font-size:1.32rem;margin:0 0 16px}
.callout p:last-child,.callout ul:last-child,.callout ol:last-child{margin-bottom:0}
.callout ol,.callout ul{padding-left:1.25em;margin:0 0 1.1em}
.callout li{margin:0 0 .5em}
.callout ol li::marker{font-family:var(--mono);font-size:.78em;color:var(--terracotta)}

.closing{max-width:var(--measure);margin:var(--s6) 0;padding:var(--s4) 0;border-top:1px solid var(--ink);border-bottom:var(--hairw) solid var(--rule);font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.3rem,3.2vw,1.65rem);line-height:1.34;color:var(--ink);letter-spacing:-.014em;text-wrap:balance}

.carousel{margin:var(--s6) 0;max-width:var(--measure)}
.carousel .eyebrow{margin-bottom:16px}
.slides{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,58%);gap:12px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.slides img{width:100%;aspect-ratio:var(--ar-tall);object-fit:cover;scroll-snap-align:start;background:var(--tint);box-shadow:inset 0 0 0 1px rgba(42,33,21,.06)}
@media (min-width:48rem){.slides{grid-auto-columns:minmax(180px,32%)}}
@media (max-width:63.99rem){
  .carousel{width:calc(100% + var(--gutter)*2);margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1);padding-left:var(--gutter);max-width:none}
  .carousel .eyebrow{padding-right:var(--gutter)}
  .slides{padding-right:var(--gutter)}
}

/* Sources: an editorial footnote block */
.sources{max-width:var(--measure);margin:var(--s6) 0 0;padding-top:var(--s3);border-top:1px solid var(--ink)}
.sources h2{font-size:1.05rem;margin:0 0 4px}
.sources .note{font-size:.82rem;color:var(--muted);margin:0 0 var(--s3)}
.sources ol{list-style:none;margin:0;padding:0;counter-reset:src}
.sources li{counter-increment:src;position:relative;padding:0 0 16px 32px;margin:0 0 16px;border-bottom:var(--hairw) solid var(--rule);font-size:.85rem;line-height:1.55;color:var(--muted)}
.sources li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.sources li::before{content:counter(src);position:absolute;left:0;top:2px;font-family:var(--mono);font-size:.625rem;color:var(--gold-ink);letter-spacing:.06em}
.sources a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;text-decoration-thickness:1px}
.sources a:hover{color:var(--terracotta);text-decoration-color:var(--terracotta)}
.sources .host{display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.04em;color:var(--faint);margin-top:6px;word-break:break-all}

.writer-note{display:flex;gap:var(--s3);align-items:flex-start;max-width:var(--measure);background:var(--paper-2);border-top:1px solid var(--ink);border-bottom:var(--hairw) solid var(--rule);padding:var(--s4) clamp(20px,3.4vw,30px);margin:var(--s6) 0 0}
.writer-note .byline-avatar{width:64px;height:64px}
.writer-note h2{font-size:1.2rem;margin:0 0 6px}
.writer-note .role{font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.writer-note p{font-size:.92rem;color:var(--muted);margin:0 0 12px}
.writer-note p:last-child{margin-bottom:0}
@media (max-width:30rem){.writer-note{flex-direction:column;gap:var(--s2)}}

/* Next story */
.nextup{max-width:var(--measure);margin:var(--s7) 0 0;padding-top:var(--s3);border-top:1px solid var(--ink)}
.nextup .eyebrow{margin-bottom:var(--s3)}
.nextup-link{display:grid;grid-template-columns:1fr;gap:var(--s3);text-decoration:none;color:inherit}
@media (min-width:34rem){.nextup-link{grid-template-columns:.86fr 1.14fr;align-items:center}}
.nextup-media{overflow:hidden;background:var(--tint);position:relative}
.nextup-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(42,33,21,.06)}
.nextup-media img{width:100%;aspect-ratio:var(--ar-wide);object-fit:cover;transition:transform 1.2s var(--ease)}
.nextup-link:hover .nextup-media img{transform:scale(1.022)}
.nextup h2{font-size:var(--t-s);line-height:1.12;margin:8px 0 10px;letter-spacing:-.018em}
.nextup-link:hover h2{color:var(--terracotta)}
.nextup .card-hook{font-size:.9rem;margin-bottom:12px}
.prevlink{display:inline-flex;align-items:center;gap:12px;max-width:var(--measure);margin:var(--s4) 0 0;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-decoration:none;min-height:44px}
.prevlink::before{content:"";width:28px;height:1px;background:currentColor}
.prevlink:hover{color:var(--terracotta)}

/* ---------- page intros ---------- */
.page-head{padding-top:clamp(28px,4.6vw,60px);max-width:48rem}
.page-head h1{font-size:var(--t-l);line-height:1.0;letter-spacing:-.03em;margin:12px 0 18px}
.page-head .dek{margin:0}

/* ---------- rooms index ---------- */
.room-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap);row-gap:clamp(40px,4.6vw,68px)}
.room-card{grid-column:1/13;display:block;text-decoration:none;color:inherit}
@media (min-width:40rem){.room-card{grid-column:span 6}}
@media (min-width:64rem){.room-card{grid-column:span 4}}
.room-card .rc-media{display:block;overflow:hidden;background:var(--tint);position:relative;margin-bottom:var(--s2)}
.room-card .rc-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(42,33,21,.06);transition:box-shadow .5s var(--ease)}
.room-card img{width:100%;aspect-ratio:var(--ar-wide);object-fit:cover;transition:transform 1.2s var(--ease)}
.room-card:hover img{transform:scale(1.022)}
.room-card:hover .rc-media::after{box-shadow:inset 0 0 0 1px rgba(42,33,21,.16)}
.room-card .rc-no{font-family:var(--mono);font-size:.5625rem;letter-spacing:.22em;color:var(--gold-ink);display:block;margin-bottom:8px}
.room-card h2{font-size:var(--t-card);margin:0 0 8px;transition:color .45s var(--ease)}
.room-card:hover h2{color:var(--terracotta)}
.room-card p{font-size:.92rem;color:var(--muted);margin:0 0 12px;line-height:1.6}
.room-card .count{font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* ---------- writers ---------- */
.writers{display:grid;gap:var(--s6)}
.writer{border-top:1px solid var(--ink);padding-top:var(--s4)}
.writer-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
@media (min-width:64rem){.writer{display:grid;grid-template-columns:.34fr .66fr;gap:var(--s5)}.writer-head{margin-bottom:0;flex-direction:column;align-items:flex-start;gap:var(--s2)}.writer-body{max-width:none}}
.writer-avatar{width:76px;height:76px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--tint);box-shadow:inset 0 0 0 1px currentColor}
.writer-avatar svg{width:38px;height:38px;display:block}
/* Nora and Clara side by side on desktop, Nora left and Clara right: their
   line portraits turn toward each other. */
.writers-pair{display:grid;gap:var(--s6)}
@media (min-width:64rem){.writers-pair{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6)}}
.writers-pair .writer{display:block}
.writers-pair .writer-head{flex-direction:row;align-items:flex-end;margin-bottom:var(--s3)}
.writer-portrait{margin:0 0 var(--s3);border-bottom:var(--hairw) solid var(--rule)}
.writer-portrait svg{display:block;width:100%;max-width:30rem;height:auto;margin:0 auto}
.writer.nora .writer-portrait svg{margin-left:0}
.writer.clara .writer-portrait svg{margin-right:0}
.writer-portrait [stroke="#2A2115"]{stroke:var(--ink)}
.writer-portrait [fill="#fff"]{fill:var(--paper)}
.writer-portrait [stroke="#9C4A2C"]{stroke:var(--terracotta)}
.writer-portrait [fill="#9C4A2C"]{fill:var(--terracotta)}
.writer-portrait [stroke="#B08A3C"]{stroke:var(--gold)}
.writer.june .writer-avatar{color:#7FA6C4;background:#121A1F;box-shadow:inset 0 0 0 1px rgba(127,166,196,.45)}
.writer-name{font-family:var(--serif);font-weight:700;font-size:clamp(1.65rem,4.4vw,2.2rem);line-height:1.03;margin:0;letter-spacing:-.028em}
.writer-name .ver{font-family:var(--mono);font-size:.32em;color:var(--faint);vertical-align:super;letter-spacing:.12em;margin-left:.12em;font-weight:400}
.writer-role{font-family:var(--mono);font-size:.5625rem;letter-spacing:.22em;text-transform:uppercase;margin:10px 0 0}
.writer.nora .writer-role{color:var(--terracotta)}
.writer.clara .writer-role{color:var(--clara)}
.writer.june .writer-role{color:var(--june)}
.writer-body{display:grid;gap:var(--s2);max-width:42rem}
.writer-body > p{margin:0;font-size:1.02rem;max-width:33rem}
.kv{display:flex;gap:var(--s2);font-size:.92rem;flex-wrap:wrap;padding-top:10px;border-top:var(--hairw) solid var(--rule)}
.kv .k{font-family:var(--mono);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);flex:none;min-width:8rem;padding-top:5px}
.kv .v{color:var(--muted);flex:1;min-width:12rem}
.kv .v .col{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--terracotta);font-size:1.1em}
.pull{border-left:1px solid;padding:12px 0 12px 22px;margin:10px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.12rem,2.5vw,1.32rem);line-height:1.4;color:var(--ink)}
.writer.nora .pull{border-color:var(--terracotta)}
.writer.clara .pull{border-color:var(--clara)}
.writer.june .pull{border-color:var(--june)}
.note-box{background:var(--tint);border-left:2px solid var(--gold);padding:var(--s3);color:var(--muted);font-size:.88rem;line-height:1.66}
.note-box strong{color:var(--ink)}
.note-box p:last-child{margin-bottom:0}
.note-box code{font-family:var(--mono);font-size:.85em}

/* ---------- June ---------- */
.june-stage{background:#121A1F;padding:clamp(40px,7vw,80px) var(--gutter);text-align:center;color:#E8EEF1}
@media (max-width:63.99rem){.june-stage{width:calc(100% + var(--gutter)*2);margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1)}}
.june-orb{width:clamp(136px,32vw,180px);height:clamp(136px,32vw,180px);margin:0 auto var(--s3);color:#7FA6C4;position:relative}
.june-orb svg{width:100%;height:100%;display:block}
.june-orb::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(127,166,196,.3);animation:june-pulse 5s ease-in-out infinite}
@keyframes june-pulse{0%,100%{box-shadow:0 0 0 0 rgba(127,166,196,.26)}50%{box-shadow:0 0 0 26px rgba(127,166,196,0)}}
@media (prefers-reduced-motion:reduce){.june-orb::after{animation:none}}
.june-name{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,5.4vw,2.7rem);margin:0;line-height:1.04;letter-spacing:-.028em}
.june-name .ver{font-family:var(--mono);font-size:.3em;color:#8FA6B3;vertical-align:super;letter-spacing:.14em;margin-left:.12em;font-weight:400}
.june-status{font-family:var(--mono);font-size:.5625rem;letter-spacing:.26em;text-transform:uppercase;color:#7FA6C4;margin:14px 0 0}
.june-line{color:#C2CFD7;max-width:34rem;margin:var(--s3) auto 0;font-size:1rem;line-height:1.7}
.june-slot{margin:var(--s4) auto 0;max-width:34rem;border:1px dashed rgba(127,166,196,.36);padding:var(--s3);text-align:left}
.june-slot .eyebrow{color:#7FA6C4;margin-bottom:12px}
.june-bar{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(127,166,196,.26);border-radius:999px;padding:8px 8px 8px 20px;min-height:52px}
.june-bar span{flex:1;color:#8B9AA3;font-size:.92rem}
.june-bar i{flex:none;width:36px;height:36px;border-radius:50%;background:rgba(127,166,196,.22);display:block}
.june-slot .small{font-size:.76rem;color:#8FA6B3;margin:14px 0 0;line-height:1.6}

/* ---------- signup ---------- */
.signup{background:var(--tint);border-top:var(--hairw) solid var(--rule);border-bottom:var(--hairw) solid var(--rule);padding:clamp(44px,6.6vw,76px) var(--gutter);text-align:center;margin-top:var(--s7)}
.signup-inner{max-width:38rem;margin:0 auto}
.signup h2{font-size:var(--t-m);line-height:1.06;margin:12px 0 12px;letter-spacing:-.026em}
.signup-note{color:var(--muted);margin:0 0 var(--s3)}
.signup-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.signup-form input{flex:1 1 15rem;min-width:0;min-height:48px;font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:12px 16px}
.signup-form input::placeholder{color:var(--faint)}
.signup-form input:focus-visible{border-color:var(--terracotta)}
.signup-form button{flex:0 0 auto;cursor:pointer;min-height:48px;font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:12px 28px;transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.signup-form button:hover{background:var(--terracotta);border-color:var(--terracotta)}
.signup-meta{font-size:.78rem;color:var(--faint);margin:var(--s2) 0 0}
.signup-meta a{color:var(--terracotta)}
@media (max-width:30rem){.signup-form input,.signup-form button{flex:1 1 100%}}

/* ---------- footer ---------- */
.site-footer{padding:var(--s7) var(--gutter) var(--s5);background:var(--paper)}
.footer-inner{max-width:var(--wide);margin:0 auto;display:grid;gap:var(--s5)}
@media (min-width:44rem){.footer-inner{grid-template-columns:1.4fr 1fr 1fr;gap:var(--s4)}}
.footer-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.footer-logo .wordmark{font-size:1.35rem}
.footer-tagline{font-family:var(--mono);font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);margin:12px 0 0}
.footer-blurb{font-size:.86rem;color:var(--muted);margin:var(--s2) 0;max-width:26rem}
.fb-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--terracotta);font-size:.84rem;min-height:44px}
.footer-nav .eyebrow{margin-bottom:var(--s2)}
.footer-links{display:flex;flex-direction:column}
.footer-links a{text-decoration:none;color:var(--muted);font-size:.9rem;padding:8px 0;min-height:34px;transition:color .35s var(--ease)}
.footer-links a:hover{color:var(--terracotta)}
.colophon{max-width:var(--wide);margin:var(--s6) auto 0;padding-top:var(--s3);border-top:var(--hairw) solid var(--rule);font-size:.74rem;line-height:1.66;color:var(--faint)}
.colophon a{color:var(--faint)}

/* ---------- prose pages ---------- */
.copy{font-size:var(--t-body);line-height:1.76;max-width:var(--measure);margin-inline:auto}
.copy h2{font-size:1.42rem;margin:var(--s5) 0 12px;letter-spacing:-.018em}
.copy h3{font-size:1.1rem;margin:var(--s4) 0 8px}
.copy ul{padding-left:1.3em;margin:0 0 1.4em}
.copy li{margin:0 0 .55em}
.copy ul li::marker{color:var(--terracotta)}
.copy a{color:var(--terracotta);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.copy a:hover{text-decoration-color:var(--terracotta)}
.copy .note-box{margin-top:var(--s5)}

/* ---------- dark, as a courtesy only ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14110B;--paper-2:#181409;--tint:#1E1810;--tint-2:#241D12;--ink:#F3ECDE;--muted:#BCB098;--faint:#948871;
    --rule:#352C1C;--hair:#2A2216;--terracotta:#E09A72;--gold:#DCBB62;--gold-ink:#DCBB62;--clara:#E19AC5;--june:#8FB4CF;
  }
  :root:not([data-theme="light"]) .topbar{background:rgba(20,17,11,.93)}
  :root:not([data-theme="light"]) .signup-form button{color:#14110B;background:var(--ink);border-color:var(--ink)}
  :root:not([data-theme="light"]) .signup-form button:hover{color:#14110B}
  :root:not([data-theme="light"]) .card-media::after,
  :root:not([data-theme="light"]) .opener-media::after,
  :root:not([data-theme="light"]) .nextup-media::after,
  :root:not([data-theme="light"]) .room-card .rc-media::after,
  :root:not([data-theme="light"]) .slides img{box-shadow:inset 0 0 0 1px rgba(243,236,222,.08)}
}

@media print{
  .nav,.signup,.site-footer,.nextup,.prevlink,.carousel,.topbar,.progress,.rail{display:none}
  body{background:#fff;color:#000}
  .prose,.copy{max-width:none}
}