/* =========================================================
   AMANDA ROSE — Fine Art Wedding Photography
   Shared design system
   ========================================================= */

:root{
  /* colour */
  --bg:#f3eee7;
  --surface:#e8e1d8;
  --surface-2:#ece5db;
  --plate:#ffffff;   /* page-hero title card — white, so it lifts off the beige page */
  --band:#ded3c2;    /* closing CTA band — a step deeper than --surface so it never merges with it */
  --fg:#2a2521;
  --muted:#6b6157;
  --accent:#9a8f86;
  --dark:#585451;
  --deep:#3b3734;
  --on-dark:#f1ece4;
  --line:#d8cfc4;
  --line-soft:#e2d9ce;

  /* type */
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-serif:'Lora', Georgia, serif;
  --font-sans:'Josefin Sans', system-ui, sans-serif;

  /* metrics */
  --radius:0px;
  --section-y:clamp(4.5rem, 9vw, 9rem);
  --section-y-sm:clamp(3rem, 6vw, 5.5rem);
  --rail:1240px;
  --rail-wide:1560px;
  --rail-narrow:760px;
  --gutter:clamp(1.25rem, 5vw, 3rem);
  --nav-h:74px;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
/* [hidden] is only `display:none` in the UA stylesheet, so any class of ours that
   sets an explicit display (flex, grid) silently outranks it and the element stays
   on screen doing nothing. The script toggles .hidden on the grid, the topic bar,
   the pagination and the load-more button — all of which have one. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-serif); font-size:16px; line-height:1.78;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden;}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; line-height:1.06; margin:0; letter-spacing:.005em;}
p{margin:0;}
::selection{background:var(--accent); color:#fff;}

/* focus */
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--dark); color:var(--on-dark);
  padding:.8rem 1.2rem; font-family:var(--font-sans); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;}
.skip:focus{left:.75rem; top:.75rem;}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--rail); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}
.wrap-wide{max-width:var(--rail-wide); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}
.wrap-narrow{max-width:var(--rail-narrow); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}
/* grid items default to min-width:auto, which lets long words and form controls
   blow out their track — reset it everywhere we lay out in columns */
.split > *, .sticky-split > *, .cards > *, .tiers > *, .posts > *, .chapters > *,
.addons > *, .quotes-3 > *, .foot-grid > *, .menu-inner > *, .menu-side > *,
.post-feature > *, .article-nav > *, .form .grid-2 > *, .ilist .row > *{min-width:0;}
.section{padding:var(--section-y) 0;}
.section-sm{padding:var(--section-y-sm) 0;}
.bg-surface{background:var(--surface);}
.bg-dark{background:var(--dark); color:var(--on-dark);}
.bg-deep{background:var(--deep); color:var(--on-dark);}
.center{text-align:center;}
.hr{height:1px; background:var(--line); border:0; margin:0;}

/* ---------- type utilities ---------- */
.eyebrow{
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.36em;
  font-size:.7rem; color:var(--muted); font-weight:400; display:inline-block;
}
.eyebrow-line{display:flex; align-items:center; gap:1rem;}
.eyebrow-line::after{content:""; height:1px; width:clamp(32px,6vw,72px); background:var(--line); flex:0 0 auto;}
.eyebrow-line.center-line{justify-content:center;}
.eyebrow-line.center-line::before{content:""; height:1px; width:clamp(32px,6vw,72px); background:var(--line); flex:0 0 auto;}

.h-xl{font-size:clamp(2.7rem,6.2vw,5.2rem);}
.h-lg{font-size:clamp(2.3rem,4.8vw,3.9rem);}
.h-md{font-size:clamp(1.9rem,3.6vw,2.9rem);}
.h-sm{font-size:clamp(1.5rem,2.4vw,2rem);}

.lead{font-size:clamp(1.02rem,1.35vw,1.15rem); color:var(--muted); line-height:1.9;}
.small{font-size:.92rem; color:var(--muted);}
.script{font-family:var(--font-display); font-style:italic; color:var(--accent);}
.sig{font-family:var(--font-display); font-style:italic; font-size:clamp(1.5rem,2.4vw,1.9rem); color:var(--muted);}
.measure{max-width:56ch;}
.measure-sm{max-width:44ch;}

/* numeral motif */
.numeral{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:.95rem; letter-spacing:.12em; color:var(--accent);
}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.7rem;
  padding:1.05rem 2.1rem; border:1px solid var(--dark); background:var(--dark); color:var(--on-dark);
  border-radius:var(--radius); cursor:pointer; transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  line-height:1; position:relative;
}
.btn:hover{background:transparent; color:var(--dark);}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--fg);}
.btn-ghost:hover{background:var(--fg); color:var(--bg);}
.btn-ondark{background:var(--on-dark); border-color:var(--on-dark); color:var(--dark);}
.btn-ondark:hover{background:transparent; color:var(--on-dark);}
.btn-ondark-ghost{background:transparent; border-color:rgba(241,236,228,.5); color:var(--on-dark);}
.btn-ondark-ghost:hover{background:var(--on-dark); color:var(--dark); border-color:var(--on-dark);}

/* underline sweeps IN from the left on hover */
.tlink{
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.26em; font-size:.7rem;
  color:var(--fg); display:inline-flex; align-items:center; gap:.7rem; padding-bottom:.4rem;
  position:relative; transition:color .25s ease;
}
.tlink::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor;
  transition:right .3s;}
.tlink:hover{color:var(--accent);}
.tlink:hover::after{right:0;}
.tlink .arw{display:inline-block; transition:transform .25s ease;}
.tlink:hover .arw{transform:translateX(5px);}
.tlink-ondark{color:var(--on-dark);}
.tlink-ondark:hover{color:#fff;}

/* ---------- reveals ----------
   Gated on .js (set inline in <head>) so no-JS visitors never see hidden content.
   .curtain is the same motion as .reveal — kept as a separate hook for figures. */
.js .reveal, .js .curtain{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease;}
.js .reveal.in, .js .curtain.in{opacity:1; transform:none;}
.js .reveal[data-d="1"]{transition-delay:.1s;}
.js .reveal[data-d="2"]{transition-delay:.2s;}
.js .reveal[data-d="3"]{transition-delay:.3s;}
.js .reveal[data-d="4"]{transition-delay:.4s;}
.js .reveal[data-d="5"]{transition-delay:.5s;}
.curtain{position:relative; overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  .js .reveal, .js .curtain{opacity:1 !important; transform:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------- figures ---------- */
.fig{position:relative; overflow:hidden; background:var(--surface);}
.fig img{width:100%; height:100%; object-fit:cover;}
.fig-3x4{aspect-ratio:3/4;} .fig-4x5{aspect-ratio:4/5;} .fig-1x1{aspect-ratio:1/1;}
.fig-4x3{aspect-ratio:4/3;} .fig-3x2{aspect-ratio:3/2;} .fig-16x9{aspect-ratio:16/9;}
.fig-2x3{aspect-ratio:2/3;}
.fig img{transition:transform 1.1s var(--ease);}
.zoom:hover img{transform:scale(1.03);}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding:1.05rem clamp(1.25rem,4vw,2.75rem);
  background:var(--bg); border-bottom:1px solid var(--line);
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.nav .brand{
  font-family:var(--font-display); font-size:1.5rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg); justify-self:start; line-height:1; transition:color .4s var(--ease);
}
.nav-links{display:flex; gap:clamp(1rem,2vw,2rem); justify-self:center; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.8rem;
  color:var(--fg); opacity:.82; position:relative; padding-bottom:.25rem; transition:opacity .3s, color .3s;
}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor;
  transition:right .3s;}
.nav-links a:hover{opacity:1;}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{right:0;}
.nav-links a[aria-current="page"]{opacity:1;}
.nav-right{justify-self:end; display:flex; align-items:center; gap:1rem;}
.nav .inquire{
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.76rem;
  color:var(--fg); border:1px solid var(--line); padding:.68rem 1.25rem; transition:.4s var(--ease);
}
.nav .inquire:hover{background:var(--dark); color:var(--on-dark); border-color:var(--dark);}
.nav.hide{transform:translateY(-100%);}
.nav.scrolled{box-shadow:0 12px 34px rgba(42,37,33,.06);}

/* transparent nav over a hero */
.nav.over{background:transparent; border-bottom-color:transparent;}
.nav.over .brand, .nav.over .nav-links a, .nav.over .inquire{color:#fff;}
.nav.over .inquire{border-color:rgba(255,255,255,.5);}
.nav.over .inquire:hover{background:#fff; color:var(--fg); border-color:#fff;}
.nav.over .nav-toggle span{background:#fff;}

.nav-toggle{display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.45rem; justify-self:end;}
.nav-toggle span{display:block; width:26px; height:1.4px; background:var(--fg); transition:.35s var(--ease);}
.nav-toggle:hover span:nth-child(2){transform:scaleX(.62); transform-origin:left;}

/* full-screen menu */
.menu{
  position:fixed; inset:0; z-index:90; background:var(--bg);
  display:grid; grid-template-columns:1fr; align-items:center;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.menu.open{opacity:1; visibility:visible;}
.menu-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,5rem); align-items:center;
  max-width:var(--rail); margin:0 auto; padding:0 var(--gutter); width:100%;}
.menu-close{position:absolute; top:1.15rem; right:clamp(1.25rem,4vw,2.75rem); background:none; border:0; cursor:pointer;
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.68rem; color:var(--fg); padding:.6rem;}
.menu-nav{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(.4rem,1.4vw,.9rem);}
.menu-nav a{
  font-family:var(--font-display); font-size:clamp(2rem,5.2vw,3.4rem); line-height:1.12; color:var(--fg);
  display:inline-flex; align-items:baseline; gap:1rem; transition:color .35s var(--ease), transform .45s var(--ease);
}
.menu-nav a .n{font-family:var(--font-sans); font-size:.6rem; letter-spacing:.24em; color:var(--accent); transform:translateY(-.7em);}
.menu-nav a:hover{color:var(--accent); transform:translateX(10px);}
.menu-side{border-left:1px solid var(--line); padding-left:clamp(1.5rem,4vw,3rem);}
.menu-side a{font-size:.95rem; color:var(--muted); overflow-wrap:anywhere; transition:color .25s ease;}
.menu-side a:hover{color:var(--fg);}
.menu-side ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem;}

/* collapsible blocks — click the label, the items unfold beneath it */
.menu-side details.blk{border-bottom:1px solid var(--line-soft);}
.menu-side details.blk:last-child{border-bottom:0;}
.menu-side summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.05rem 0;
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.26em; font-size:.66rem;
  color:var(--muted); transition:color .25s ease;
}
.menu-side summary::-webkit-details-marker{display:none;}
.menu-side summary:hover{color:var(--fg);}
.menu-side summary .ind{font-family:var(--font-sans); font-size:1rem; color:var(--accent);
  line-height:1; transition:transform .25s ease; flex:0 0 auto;}
.menu-side details[open] summary .ind{transform:rotate(45deg);}
.menu-side .blk-body ul{padding-bottom:1.1rem;}
/* the same interruptible 0fr -> 1fr collapse the FAQ uses, scoped to .acc-anim
   (added by JS) so no-JS visitors keep native <details> */
.acc-anim .blk-body{display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .42s cubic-bezier(.33,1,.68,1), opacity .32s ease;}
.acc-anim details.is-open .blk-body{grid-template-rows:1fr; opacity:1;}
.acc-anim .blk-body > *{overflow:hidden; min-height:0;}
.acc-anim details summary .ind{transform:none;}
.acc-anim details.is-open summary .ind{transform:rotate(45deg);}
@media (prefers-reduced-motion:reduce){.acc-anim .blk-body{transition:none;}}

/* =========================================================
   HOME HERO
   ========================================================= */
.hero{position:relative; width:100%; height:100svh; min-height:600px; overflow:hidden; background:var(--dark);}
.hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%;}
.hero .scrim{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(38,33,29,.44) 0%, rgba(38,33,29,.06) 28%, rgba(38,33,29,.10) 58%, rgba(38,33,29,.46) 100%);}
/* padding-bottom biases the title block into the clean sky above the couple */
.hero .overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding:var(--nav-h) 1.5rem 30vh;}
.hero .wordmark{
  font-family:var(--font-display); font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  font-size:clamp(2.4rem,7.4vw,6.2rem); line-height:1; color:#fff; text-shadow:0 2px 40px rgba(30,25,20,.3);
  padding-left:.14em;
}
.hero .subtitle{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.52em;
  font-size:clamp(.6rem,1.15vw,.78rem); margin-top:1.7rem; padding-left:.52em; color:#fff; opacity:.94;}
.hero .scroll-cue{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); color:#fff;
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.3em; font-size:.6rem; opacity:.8;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.hero .scroll-cue i{display:block; width:1px; height:38px; background:rgba(255,255,255,.6); animation:cue 2.4s var(--ease) infinite;}
@keyframes cue{0%{transform:scaleY(.2); transform-origin:top;}50%{transform:scaleY(1); transform-origin:top;}
  51%{transform:scaleY(1); transform-origin:bottom;}100%{transform:scaleY(.2); transform-origin:bottom;}}

/* one-shot Ken Burns, then it settles */
.hero > img{animation:kb 12s ease-out forwards;}
@keyframes kb{from{transform:scale(1);} to{transform:scale(1.05);}}

/* staggered hero entrance */
.hero .wordmark, .hero .subtitle, .hero .scroll-cue{opacity:0; animation:heroin .7s ease-out forwards;}
.hero .wordmark{animation-delay:.2s;}
.hero .subtitle{animation-delay:.35s;}
.hero .scroll-cue{animation-delay:.5s;}
@keyframes heroin{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

@media (prefers-reduced-motion:reduce){
  .hero > img{animation:none;}
  .hero .wordmark, .hero .subtitle, .hero .scroll-cue{animation:none; opacity:1;}
  .hero .scroll-cue i{animation:none;}
}

/* =========================================================
   PAGE HERO (interior pages)
   ========================================================= */
/* The title card is white on the light-beige page, so it reads as a card
   notched into the photograph without needing a band behind it. */
.phero{position:relative; background:var(--bg);}
.phero .media{position:relative; height:clamp(46vh,58vh,640px); min-height:340px; overflow:hidden; background:var(--dark);}
.phero .media img{width:100%; height:100%; object-fit:cover;}
.phero .media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(38,33,29,.4) 0%, rgba(38,33,29,.10) 45%, rgba(38,33,29,.34) 100%);}
.phero .plate{
  position:relative; z-index:3; margin:calc(-1 * clamp(3rem,7vw,6rem)) auto 0;
  max-width:min(880px, calc(100% - 2 * var(--gutter)));
  background:var(--plate); padding:clamp(2.2rem,4.5vw,3.6rem) clamp(1.5rem,4vw,3.5rem) clamp(1.8rem,3.5vw,2.8rem);
  text-align:center;
}
.phero .plate .eyebrow{margin-bottom:1.1rem;}
.phero .plate h1{font-size:clamp(2.4rem,5.4vw,4.4rem); margin-bottom:1.1rem;}
.phero .plate .lead{max-width:52ch; margin:0 auto;}
.phero-min{padding:calc(var(--nav-h) + clamp(3.5rem,8vw,7rem)) 0 clamp(2rem,4vw,3rem); text-align:center; background:var(--bg);}
.phero-min h1{font-size:clamp(2.4rem,5.4vw,4.4rem); margin:1.1rem 0;}

/* breadcrumb */
.crumbs{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.63rem; color:var(--muted);
  display:flex; gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap;}
.crumbs a:hover{color:var(--fg);}
.crumbs span{opacity:.5;}

/* =========================================================
   EDITORIAL SPLIT
   ========================================================= */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5.5rem); align-items:center;}
.split.wide-media{grid-template-columns:1.15fr .85fr;}
.split.wide-text{grid-template-columns:.85fr 1.15fr;}
.split .txt > * + *{margin-top:1.2rem;}
.split .txt .eyebrow{margin-bottom:.4rem;}
.split .txt .btn, .split .txt .tlink{margin-top:.9rem;}
.media-first .txt{order:2;} .media-first .fig-col{order:1;}

/* symmetric image pair — two equal 2:3 frames, no offset, no overlap.
   .a / .b / .flip survive in the markup but carry no asymmetry any more. */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,1.4vw,1.15rem); align-items:start;}
.pair > *{grid-column:auto; margin-top:0; box-shadow:none; aspect-ratio:2/3;}

/* sticky split (text scrolls, image holds) */
.sticky-split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start;}
.sticky-split .hold{position:sticky; top:calc(var(--nav-h) + 2.5rem);}
.sticky-split .flow > * + *{margin-top:clamp(2.5rem,5vw,4rem);}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.marquee-track{display:flex; gap:1.15rem; width:max-content; animation:scrollx 60s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee .frame{width:clamp(210px,24vw,330px); flex:0 0 auto; aspect-ratio:3/4; overflow:hidden; background:var(--surface);}
.marquee .frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease);}
.marquee .frame:hover img{transform:scale(1.03);}
@keyframes scrollx{from{transform:translateX(0);} to{transform:translateX(calc(-50% - .575rem));}}

/* word marquee */
.wordstrip{overflow:hidden; padding:clamp(1.6rem,3vw,2.4rem) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.wordstrip .track{display:flex; width:max-content; animation:scrollx 42s linear infinite; gap:0;}
.wordstrip span{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.5rem,3vw,2.4rem); color:var(--accent);
  padding:0 clamp(1.2rem,3vw,2.4rem); white-space:nowrap; opacity:.85;
}
.wordstrip i{align-self:center; width:5px; height:5px; border-radius:50%; background:var(--line); flex:0 0 auto;}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;} .marquee-track{animation:none;}
  .wordstrip .track{animation:none;}
}

/* =========================================================
   GALLERY GRIDS
   ========================================================= */
.gal{display:grid; gap:clamp(.8rem,1.6vw,1.4rem);}
.gal-3{grid-template-columns:repeat(3,1fr);}
.gal-2{grid-template-columns:repeat(2,1fr);}
.gal-item{position:relative; overflow:hidden; background:var(--surface); cursor:zoom-in; display:block; width:100%; border:0; padding:0;}
.gal-item img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease);}
.gal-item:hover img{transform:scale(1.03);}
.gal-item::after{content:""; position:absolute; inset:0; background:rgba(42,37,33,0); transition:background .5s var(--ease);}
.gal-item:hover::after{background:rgba(42,37,33,.08);}

/* symmetric gallery wall — every row is either three equal 2:3 tiles
   or one centred full-width band. No offsets, no uneven spans. */
.mosaic{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.4rem); align-items:start;}
.mosaic .m{overflow:hidden; background:var(--surface); position:relative; cursor:zoom-in;
  border:0; padding:0; display:block; width:100%; aspect-ratio:2/3;}
.mosaic .m img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease);}
.mosaic .m:hover img{transform:scale(1.03);}
.mosaic .band{grid-column:1 / -1; aspect-ratio:16/9;}

/* lightbox */
.lbox{position:fixed; inset:0; z-index:120; background:rgba(28,24,20,.975);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;}
.lbox.open{opacity:1; visibility:visible;}
.lbox img{max-width:min(92vw,1100px); max-height:82vh; object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.4);}
.lbox .lb-close, .lbox .lb-prev, .lbox .lb-next{
  position:absolute; background:none; border:0; color:#f1ece4; cursor:pointer; padding:1rem;
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.68rem; opacity:.8; transition:opacity .3s;
}
.lbox .lb-close:hover, .lbox .lb-prev:hover, .lbox .lb-next:hover{opacity:1;}
.lbox .lb-close{top:1rem; right:1.2rem;}
.lbox .lb-prev{left:.6rem; top:50%; transform:translateY(-50%); font-size:1.6rem; letter-spacing:0;}
.lbox .lb-next{right:.6rem; top:50%; transform:translateY(-50%); font-size:1.6rem; letter-spacing:0;}
.lbox .lb-count{position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); color:#f1ece4;
  font-family:var(--font-sans); letter-spacing:.24em; font-size:.66rem; opacity:.75;}

/* =========================================================
   CARDS / COLLECTIONS
   ========================================================= */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem);}
.card{display:flex; flex-direction:column;}
.card .fig{aspect-ratio:3/4; margin-bottom:1.5rem;}
.card .k{display:flex; align-items:baseline; gap:.8rem; margin-bottom:.6rem;}
.card h3{font-size:clamp(1.6rem,2.4vw,2rem);}
.card p{color:var(--muted); font-size:.97rem; line-height:1.8; margin-bottom:1.3rem; flex:1;}

/* index list (numbered rows) */
.ilist{border-top:1px solid var(--line);}
.ilist .row{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,3vw,2.5rem); align-items:center;
  border-bottom:1px solid var(--line); padding:clamp(1.4rem,2.6vw,2.1rem) 0; transition:padding .45s var(--ease);
}
.ilist .row:hover{padding-left:clamp(.5rem,1.5vw,1.2rem);}
.ilist .row .n{font-family:var(--font-sans); font-size:.64rem; letter-spacing:.24em; color:var(--accent);}
.ilist .row h3{font-size:clamp(1.4rem,2.6vw,2.1rem);}
.ilist .row .desc{color:var(--muted); font-size:.95rem; margin-top:.4rem; max-width:60ch;}
.ilist .row .go{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.64rem; color:var(--muted);
  white-space:nowrap; transition:color .35s;}
.ilist .row:hover .go{color:var(--fg);}

/* process chapters */
.chapters{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.4rem,3vw,2.6rem);}
.chapter .n{font-family:var(--font-display); font-style:italic; font-size:clamp(2.4rem,4vw,3.4rem); color:var(--line);
  line-height:1; display:block; margin-bottom:.7rem;}
.chapter h3{font-size:1.35rem; margin-bottom:.6rem;}
.chapter p{color:var(--muted); font-size:.93rem; line-height:1.8;}
.chapter{border-top:1px solid var(--line); padding-top:1.4rem;}

/* =========================================================
   PRICING
   ========================================================= */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2rem); align-items:stretch;}
.tier{background:var(--bg); border:1px solid var(--line); padding:clamp(1.8rem,3vw,2.6rem); display:flex; flex-direction:column;}
.tier.feature{background:var(--dark); color:var(--on-dark); border-color:var(--dark);}
.tier.feature .price, .tier.feature h3{color:#fff;}
.tier.feature li{color:rgba(241,236,228,.85); border-color:rgba(241,236,228,.18);}
.tier.feature .eyebrow{color:#ddd3c4;}
.tier .eyebrow{margin-bottom:1rem;}
.tier h3{font-size:clamp(1.7rem,2.6vw,2.2rem); margin-bottom:.5rem;}
.tier .price{font-family:var(--font-display); font-size:1.55rem; color:var(--muted); margin-bottom:1.4rem;}
.tier ul{list-style:none; margin:0 0 1.8rem; padding:0; flex:1;}
.tier li{font-size:.94rem; color:var(--muted); padding:.7rem 0; border-bottom:1px solid var(--line-soft); line-height:1.65;}
.tier li:last-child{border-bottom:0;}
/* min-height keeps all three buttons the same height even when one label wraps,
   so their tops sit on one line and not just their bottoms */
.tier .btn{width:100%; min-height:3.6rem;}

/* addons */
.addons{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.6vw,2.2rem); align-items:stretch;}
/* flex column + growing paragraph lands every price on one line across the row */
.addon{border-top:1px solid var(--line); padding-top:1.2rem; display:flex; flex-direction:column; height:100%;}
.addon h4{font-family:var(--font-display); font-size:1.25rem; margin-bottom:.45rem;}
.addon p{color:var(--muted); font-size:.92rem; flex:1 0 auto;}
.addon .amt{font-family:var(--font-sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-top:.6rem; display:block;}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.quote-block{text-align:center;}
.quote-block .mark{font-family:var(--font-display); font-size:5rem; line-height:.35; color:var(--line); display:block; margin-bottom:1.4rem;}
.quote-block .q{font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1.36; max-width:24ch; margin:0 auto;}
.quote-block .attr{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.28em;
  font-size:.68rem; color:var(--muted); margin-top:2rem;}
.bg-dark .quote-block .mark{color:rgba(241,236,228,.28);}
.bg-dark .quote-block .attr{color:rgba(241,236,228,.7);}

.quotes-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,4vw,3.4rem);}
.qcard{border-top:1px solid var(--line); padding-top:1.6rem;}
.qcard .q{font-family:var(--font-display); font-style:italic; font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.5;}
.qcard .attr{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.64rem; color:var(--muted); margin-top:1.2rem;}

/* =========================================================
   CONTACT PAGE
   The form sits on a white plate — the same card language as the page-hero —
   with the studio details beside it as quiet hairline rows.
   ========================================================= */
.form-plate{background:var(--plate); padding:clamp(2rem,4vw,3.5rem);}
.form-plate--center{max-width:860px; margin:0 auto;}
.form-plate .eyebrow{margin-bottom:1.1rem;}
.form-plate h2{margin-bottom:clamp(1.6rem,3vw,2.4rem);}
.form-plate .form{gap:clamp(1.5rem,2.4vw,2rem);}
.form-foot{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:.3rem;}
.form-foot .note{margin:0;}
.form-foot .form-msg{width:100%; padding:0;}
@media (max-width:560px){ .form-foot .btn{width:100%;} }

a@media (max-width:560px){
    .form-foot .btn{width:100%;}
}

/* =========================================================
   FORMS
   ========================================================= */
.form{display:grid; gap:1.4rem;}
.form .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;}
.field{display:flex; flex-direction:column; gap:.55rem; min-width:0;}
.field label{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.63rem; color:var(--muted);}
.field input, .field select, .field textarea{
  width:100%; min-width:0;
  font-family:var(--font-serif); font-size:.98rem; color:var(--fg);
  padding:.9rem 0; border:0; border-bottom:1px solid var(--line); background:transparent;
  border-radius:0; transition:border-color .35s var(--ease);
}
.field textarea{resize:vertical; min-height:130px; line-height:1.7;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-bottom-color:var(--accent);}
.field input::placeholder, .field textarea::placeholder{color:var(--accent); opacity:.65;}
.field select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 12px) calc(50% + 2px), calc(100% - 7px) calc(50% + 2px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;}
.form .note{font-size:.85rem; color:var(--muted);}
.form-msg{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem;
  color:var(--accent); padding:.9rem 0; display:none;}
.form-msg.show{display:block;}

/* inline signup */
.signup{display:flex; gap:.75rem; flex-wrap:wrap; max-width:480px;}
.signup input{flex:1 1 220px; min-width:0; font-family:var(--font-sans); letter-spacing:.06em; font-size:.8rem;
  padding:1rem 1.1rem; border:1px solid var(--line); background:var(--bg); color:var(--fg);}
.signup input::placeholder{color:var(--muted); text-transform:uppercase; letter-spacing:.16em; font-size:.68rem;}
.signup input:focus{outline:none; border-color:var(--accent);}
.bg-dark .signup input{background:transparent; border-color:rgba(241,236,228,.32); color:var(--on-dark);}
.bg-dark .signup input::placeholder{color:rgba(241,236,228,.6);}

/* =========================================================
   ACCORDION (FAQ)
   ========================================================= */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none; cursor:pointer; padding:clamp(1.2rem,2.2vw,1.7rem) 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  font-family:var(--font-display); font-size:clamp(1.15rem,2vw,1.5rem); color:var(--fg); transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--accent);}
.faq summary .ind{font-family:var(--font-sans); font-size:1.1rem; color:var(--accent); line-height:1; transition:transform .25s ease; flex:0 0 auto;}
.faq details[open] summary .ind{transform:rotate(45deg);}
.faq .ans{padding:0 0 clamp(1.3rem,2.4vw,1.9rem); color:var(--muted); max-width:70ch;}
.faq .ans p + p{margin-top:.9rem;}

/* Smooth accordion: CSS-driven 0fr -> 1fr grid collapse, no per-frame JS and
   interruptible. Scoped to .faq-anim (added by site.js) so no-JS visitors keep
   native <details> behaviour. site.js wraps each .ans in the .faq-body element. */
.faq-anim .ans{padding-bottom:0;}
.faq-anim .faq-body{display:grid; grid-template-rows:0fr; padding-bottom:0; opacity:0;
  transition:grid-template-rows .42s cubic-bezier(.33,1,.68,1), padding-bottom .42s cubic-bezier(.33,1,.68,1), opacity .32s ease;}
.faq-anim details.is-open .faq-body{grid-template-rows:1fr; padding-bottom:clamp(1.3rem,2.4vw,1.9rem); opacity:1;}
.faq-anim .faq-body > *{overflow:hidden; min-height:0;}
.faq-anim details summary .ind{transform:none;}
.faq-anim details.is-open summary .ind{transform:rotate(45deg);}
@media (prefers-reduced-motion:reduce){.faq-anim .faq-body{transition:none;}}

/* =========================================================
   JOURNAL
   ========================================================= */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.4vw,2.8rem); align-items:stretch;}

/* Fallback for browsers without subgrid: flex column, only the excerpt grows
   (`p:not(.meta)` matters — the meta line is a <p> too and would otherwise
   absorb slack and shove the title down), plus a two-line floor on the title
   so a one-line headline still leaves the excerpt starting on the same line. */
.post-card{display:flex; flex-direction:column; height:100%;}
.post-card .fig{aspect-ratio:4/3; margin-bottom:1.3rem; flex:0 0 auto;}
.post-card .meta{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.62rem;
  color:var(--accent); margin-bottom:.7rem; flex:0 0 auto;}
.post-card h3{font-size:clamp(1.35rem,2.2vw,1.75rem); margin-bottom:.6rem; transition:color .35s;
  min-height:2.12em;}
.post-card:hover h3{color:var(--accent);}
.post-card p{color:var(--muted); font-size:.94rem; margin-bottom:1rem;}
.post-card p:not(.meta){flex:1 0 auto;}
.post-card .tlink{align-self:flex-start; margin-top:auto;}

/* Archive treatment for the journal grid: a display-size headline and a hairline
   closing each card. The homepage teaser row keeps the lighter 4:3 card.

   The cover frame is 3:2 because the journal covers are shot 1536x1024 — the
   reference site uses a 4:5 portrait frame, but its covers are portrait. Forcing
   3:2 sources into 4:5 centre-crops away 58% of the width, which took the album
   out of one cover and the couple out of another. 3:2 shows the whole frame. */
.posts-journal .post-card .fig{aspect-ratio:3/2;}
.posts-journal .post-card h3{font-size:clamp(1.6rem,2.6vw,2.15rem); margin-bottom:.7rem;}
.posts-journal .post-card .tlink{padding-bottom:0; margin-bottom:1.6rem;}
.posts-journal .post-card{border-bottom:1px solid var(--line);}
.bg-surface .posts-journal .post-card{border-bottom-color:var(--line);}

/* Subgrid: image, meta, title, excerpt and link each share one row across the
   whole set of cards, so all four bands line up whatever the copy length.
   row-gap:0 stops the grid's 2.8rem card gap from leaking between the rows
   inside a card — the internal spacing stays on the margins above. */
@supports (grid-template-rows: subgrid){
  .posts{grid-template-rows:repeat(5, auto);}
  .post-card{display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:0; height:auto;}
  .post-card h3{min-height:0;}
  .post-card .tlink{margin-top:0;}
}

.post-feature{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,5vw,4rem); align-items:center;}
.post-feature .fig{aspect-ratio:16/10;}

/* article body */
.article{max-width:var(--rail-narrow); margin:0 auto; padding:0 var(--gutter);}
.article p{font-size:1.07rem; line-height:1.95; color:#453e38;}
.article p + p{margin-top:1.5rem;}
.article h2{font-size:clamp(1.8rem,3.2vw,2.5rem); margin:clamp(2.6rem,5vw,3.8rem) 0 1.1rem;}
.article h3{font-size:clamp(1.35rem,2.2vw,1.7rem); margin:clamp(2rem,4vw,2.8rem) 0 .8rem;}
.article blockquote{margin:clamp(2.4rem,5vw,3.4rem) 0; padding-left:clamp(1.2rem,3vw,2rem); border-left:1px solid var(--accent);}
.article blockquote p{font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.7rem);
  line-height:1.5; color:var(--fg);}
.article ul{margin:1.4rem 0; padding-left:1.2rem; color:#453e38;}
.article li{margin:.55rem 0; line-height:1.85;}
.article .cap{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.62rem;
  color:var(--muted); margin-top:.8rem; text-align:center;}
.article figure{margin:clamp(2.4rem,5vw,3.6rem) 0;}
.article-wide{max-width:var(--rail); margin-left:auto; margin-right:auto; padding:0 var(--gutter);}

/* ---------- journal: topics + search ----------
   Topics are ordinary links to real archive pages, so they stay available with
   scripting off. Search cannot be, so it is the only part gated behind .js —
   a dead search box would be worse than none. */
.topics-bar{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding-bottom:clamp(1.4rem,2.6vw,2rem); border-bottom:1px solid var(--line);
  margin-bottom:clamp(2rem,4vw,3rem);}
/* Bordered chips with a count, filling on hover — square, because the whole
   system is --radius:0 and a rounded pill would be the one soft corner on the site. */
.topics{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;}
.topic{
  display:inline-flex; align-items:baseline; gap:.55rem;
  padding:.72rem 1.15rem; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.18em; font-size:.63rem;
  color:var(--muted); background:transparent; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.topic i{font-style:normal; font-size:.55rem; letter-spacing:.08em; color:var(--accent); transition:color .25s ease;}
.topic:hover{color:var(--fg); border-color:var(--fg);}
.topic[aria-current="page"]{background:var(--dark); border-color:var(--dark); color:var(--on-dark);}
.topic[aria-current="page"] i{color:rgba(241,236,228,.7);}

.topic-search{display:none;}
.js .topic-search{display:flex; align-items:center; gap:.6rem; border-bottom:1px solid var(--line);
  padding:.45rem 0; min-width:min(240px,100%); transition:border-color .3s ease;}
.topic-search svg{color:var(--accent); flex:0 0 auto;}
.topic-search input{flex:1; min-width:0; border:0; background:transparent; outline:none; padding:.25rem 0;
  font-family:var(--font-sans); font-size:.72rem; letter-spacing:.12em; color:var(--fg);}
.topic-search input::placeholder{color:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:.64rem;}
.topic-search:focus-within{border-color:var(--accent);}
.topic-search input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none;}

.journal-empty{display:none; padding:clamp(2.5rem,6vw,4.5rem) 0; text-align:center;}
.journal-empty.show{display:block;}
.journal-empty p{font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.7rem);
  color:var(--muted);}
.journal-empty button{margin-top:1.2rem;}

/* the small dot separator used in card meta and article datelines */
.dot{display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor;
  opacity:.45; vertical-align:middle; margin:0 .15rem;}

/* ---------- article head + share ---------- */
.post-back{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.66rem;
  color:var(--muted); display:inline-flex; align-items:center; gap:.6rem; position:relative;
  padding-bottom:.3rem; margin-bottom:1.6rem; transition:color .25s ease;}
.post-back .arw{transition:transform .25s ease;}
.post-back:hover{color:var(--fg);}
.post-back:hover .arw{transform:translateX(-4px);}
.dateline{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.55rem;
  margin-top:1.5rem; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em;
  font-size:.62rem; color:var(--muted);}
.dateline .dl-cat{color:var(--accent); position:relative; transition:color .25s ease;}
.dateline .dl-cat:hover{color:var(--fg);}

.post-share{display:flex; align-items:center; gap:clamp(1rem,2.4vw,1.8rem); flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:1.4rem;}
.ps-label{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.26em; font-size:.62rem;
  color:var(--muted); margin-right:auto;}
.ps-link{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.2em; font-size:.64rem;
  color:var(--fg); position:relative; padding-bottom:.25rem; transition:color .25s ease;}
.ps-link::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .3s;}
.ps-link:hover{color:var(--accent);}
.ps-link:hover::after{right:0;}
@media (max-width:560px){
  .post-share{gap:1rem;}
  .ps-label{width:100%; margin-right:0;}
}

/* ---------- journal: load more ----------
   Sits where the pagination was, in the same chip language as the topics above
   it: the chips narrow the listing, this one extends it. The arrow points down
   because that is where the next cards appear. */
.journal-more{display:flex; justify-content:center; margin-top:clamp(2.6rem,5vw,4rem);}
.journal-more .btn{gap:1rem; min-width:15rem;}
.journal-more .btn::after{content:"\2193"; font-size:.85rem;}
/* Busy without moving: no spinner, no size change, just clearly not accepting
   a second press. */
.journal-more .btn[aria-busy="true"]{opacity:.45; cursor:progress;}

/* journal pagination — only rendered once the posts spill past one page */
.pagination{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-top:clamp(2.6rem,5vw,4rem); padding-top:clamp(1.6rem,3vw,2.2rem); border-top:1px solid var(--line);}
.pagination .pg-step{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em;
  font-size:.68rem; color:var(--fg); position:relative; padding-bottom:.35rem; transition:color .25s ease;}
.pagination .pg-step::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .3s;}
.pagination a.pg-step:hover{color:var(--accent);}
.pagination a.pg-step:hover::after{right:0;}
.pagination .pg-step.is-off{color:var(--accent); opacity:.4; cursor:default;}
.pg-nums{list-style:none; display:flex; align-items:center; gap:.35rem; margin:0; padding:0;}
.pg-nums a{display:inline-flex; align-items:center; justify-content:center; min-width:2.4rem; height:2.4rem;
  font-family:var(--font-sans); font-size:.72rem; letter-spacing:.08em; color:var(--muted);
  border:1px solid transparent; transition:color .25s ease, border-color .25s ease;}
.pg-nums a:hover{color:var(--fg); border-color:var(--line);}
.pg-nums a[aria-current="page"]{color:var(--fg); border-color:var(--fg);}
@media (max-width:560px){
  .pagination{justify-content:center;}
  .pg-nums{order:-1; width:100%; justify-content:center;}
}



/* =========================================================
   ARTICLE SHEET
   The whole story lives on one white sheet — head, cover, prose,
   share — after the clara-hayes article sheet, squared off for this
   house. Prev/next follow as two bordered cards on the page below.
   ========================================================= */
.article-sheet{
  width:min(1040px, calc(100% - 2rem));
  margin:calc(var(--nav-h) + clamp(1.5rem,3vw,2.5rem)) auto clamp(2.5rem,4.5vw,4rem);
  background:var(--plate);
  padding:clamp(2.2rem,4.5vw,4rem) clamp(1.2rem,3.5vw,3rem) clamp(2.4rem,4.5vw,3.5rem);
}
.article-head{text-align:center; max-width:var(--rail-narrow); margin:0 auto clamp(2rem,4vw,3rem);
  padding:0 var(--gutter);}
.article-head h1{font-size:clamp(2.2rem,4.8vw,3.8rem); margin:1.2rem 0 1rem;}
.article-cover{background:var(--surface);}
.article-flow{display:block; padding:clamp(2.4rem,4.5vw,3.6rem) 0 0;}
/* inside the sheet the wide gallery rows span the sheet, not the page rail */
.article-sheet .article-wide{max-width:none; padding:0;}
.article-sheet .post-share{margin-top:clamp(2.2rem,4vw,3rem);}

.article-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(.9rem,1.6vw,1.25rem);
  width:min(1040px, calc(100% - 2rem)); margin:0 auto;
  padding-bottom:clamp(3rem,6vw,5rem);
}
.an-item{
  display:flex; flex-direction:column; gap:.55rem;
  padding:clamp(1.4rem,2.4vw,1.9rem) clamp(1.5rem,2.6vw,2rem);
  border:1px solid var(--line); background:var(--plate);
  transition:border-color .25s ease, transform .25s ease;
}
.an-item:hover{border-color:var(--accent); transform:translateY(-3px);}
.an-label{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em;
  font-size:.6rem; color:var(--accent);}
.an-item h4{font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.3; transition:color .25s ease;}
.an-item:hover h4{color:var(--accent);}
.an-next{text-align:right; align-items:flex-end;}
@media (max-width:700px){
  .article-nav{grid-template-columns:1fr;}
  .an-next{text-align:left; align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){ .an-item:hover{transform:none;} }


/* =========================================================
   UTILITY PAGES
   Links-in-bio, coming soon, thank-you and legal pages — the
   clara-hayes utility set, rendered in this house's language.
   ========================================================= */
/* centred single-purpose page (coming soon, form submitted) */
.utility{min-height:calc(100svh - var(--nav-h)); display:flex; align-items:center;
  padding:calc(var(--nav-h) + var(--section-y-sm)) 0 var(--section-y-sm);}
.utility .inner{max-width:560px; margin:0 auto; padding:0 var(--gutter); text-align:center;}
.utility h1{font-size:clamp(2.4rem,5.4vw,4rem); margin:1.2rem 0 1rem;}
.utility .lead{margin-bottom:2rem;}
.utility .acts{display:flex; justify-content:center; gap:1rem; flex-wrap:wrap;}
.utility .signup{justify-content:center; margin:0 auto;}
.utility .back{margin-top:2.2rem;}

/* link-in-bio */
.links-page{max-width:460px; margin:0 auto; padding:calc(var(--nav-h) + clamp(3rem,7vw,5rem)) var(--gutter) var(--section-y-sm);
  text-align:center;}
/* the one deliberately round element on the site — the user asked for
   clara-hayes' avatar exactly: 156px circle */
.links-avatar{width:156px; height:156px; border-radius:50%; object-fit:cover;
  object-position:50% 18%; margin:0 auto 1.6rem; display:block;}
.links-page h1{font-size:clamp(1.9rem,4vw,2.5rem); margin:.9rem 0 .6rem;
  letter-spacing:.1em; text-transform:uppercase;}
.links-page .lead{font-size:1rem; margin-bottom:2.2rem;}
.link-stack{display:flex; flex-direction:column; gap:.8rem; margin-bottom:2rem;}
.link-stack a{
  display:block; padding:1.15rem 1.4rem; border:1px solid var(--line); background:var(--plate);
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.68rem;
  color:var(--fg); transition:background .3s ease, color .3s ease, border-color .3s ease, transform .25s ease;
}
.link-stack a:hover{background:var(--dark); border-color:var(--dark); color:var(--on-dark); transform:translateY(-2px);}
.social-line{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em;
  font-size:.64rem; color:var(--muted);}
.social-line a{padding:0 .2rem; transition:color .25s ease;}
.social-line a:hover{color:var(--fg);}
@media (prefers-reduced-motion:reduce){ .link-stack a:hover{transform:none;} }

/* legal pages ride the article sheet; their head has no cover or dateline */
.legal-head{margin-bottom:clamp(1.5rem,3vw,2rem);}
.legal-updated{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em;
  font-size:.62rem; color:var(--accent); margin-top:1.2rem;}

/* =========================================================
   CTA BAND
   Airy closing band after the clara-hayes cta-band: one generous beige strip,
   headline | line of copy | action, no photograph. Replaces the old photo+dark
   split that sat with zero padding against the footer strip and read cramped.
   The hairline keeps its edge on pages that end in another --surface section.
   ========================================================= */
.cta-band{background:var(--band); border-top:1px solid var(--line); padding:clamp(4.5rem,7.5vw,7rem) 0;}
.cta-band .inner{display:grid; grid-template-columns:1.05fr .95fr auto; align-items:center;
  gap:clamp(2rem,5.5vw,5rem);}
.cta-band .eyebrow{display:inline-flex; margin-bottom:1rem;}
.cta-band h2{font-size:clamp(2rem,3.8vw,3.1rem);}
.cta-band .lead{max-width:38ch;}
.cta-band .act{display:flex; flex-direction:column; align-items:stretch; gap:.9rem; min-width:15rem;}
@media (max-width:960px){
  .cta-band .inner{grid-template-columns:1fr; gap:1.6rem;}
  .cta-band .lead{max-width:56ch;}
  .cta-band .act{flex-direction:row; flex-wrap:wrap; min-width:0;}
}
@media (max-width:760px){
  .cta-band .inner{text-align:center; justify-items:center;}
  .cta-band .eyebrow-line{justify-content:center;}
  .cta-band .act{flex-direction:column; width:100%; max-width:22rem;}
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--dark); color:var(--on-dark);}
/* Instagram strip — six square tiles reading as one continuous band.
   Hovering a tile dims it and centres an Instagram glyph. */
.igstrip{display:grid; grid-template-columns:repeat(6,1fr); background:var(--surface);}
.igstrip a{aspect-ratio:1/1; overflow:hidden; display:block; background:#4a4643; position:relative;}
.igstrip img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), opacity .45s; opacity:.92;}
.igstrip a::after{
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.2' cy='6.8' r='0.65' fill='white' stroke='none'/%3E%3C/svg%3E");
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(30,26,22,.42); opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.igstrip a:hover::after, .igstrip a:focus-visible::after{opacity:1;}
.igstrip a:hover img{transform:scale(1.05); opacity:1;}
.foot-main{padding:clamp(3.5rem,7vw,6rem) 0 2.5rem;}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:start;}
.foot-brand .fb-word{font-family:var(--font-display); font-size:1.9rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; line-height:1.1;}
.foot-brand .fb-tag{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.28em; font-size:.62rem;
  color:rgba(241,236,228,.85); margin-top:1rem;}
.foot-brand p{color:rgba(241,236,228,.72); font-size:.93rem; margin-top:1.4rem; max-width:34ch;}
.foot-col h4{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.64rem;
  font-weight:400; color:#ddd3c4; margin:0 0 1.2rem;}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem;}
.foot-col a, .foot-col p{font-size:.93rem; color:rgba(241,236,228,.82);}
.foot-col a{position:relative; transition:color .25s ease;}
.foot-col a::after{content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:currentColor; transition:right .3s;}
.foot-col a:hover{color:#fff;}
.foot-col a:hover::after{right:0;}
.foot-bottom{border-top:1px solid rgba(241,236,228,.16); margin-top:clamp(2.5rem,5vw,4rem); padding:1.8rem 0;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.18em; font-size:.62rem; color:rgba(241,236,228,.75);}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .nav-links{gap:1rem;}
  .nav-links a{font-size:.72rem; letter-spacing:.15em;}
}
/* the enlarged nav type needs more room — hand over to the burger earlier */
@media (max-width:1060px){
  .nav{grid-template-columns:1fr auto; padding:.95rem 1.25rem;}
  .nav > nav{display:none;}
  .nav .inquire{display:none;}
}
@media (max-width:960px){
  .menu-inner{grid-template-columns:1fr; gap:1.8rem; align-content:start;}
  .menu{align-items:start; padding-top:calc(var(--nav-h) + 1rem); overflow-y:auto;}

  /* the numbered list stays the hero, at a size where all seven fit a phone */
  .menu-nav{gap:.4rem;}
  .menu-nav a{font-size:clamp(1.5rem,6vw,2rem);}

  /* the accordions carry the mobile layout by themselves — just drop the rail */
  .menu-side{border-left:0; border-top:1px solid var(--line); padding-left:0;}

  .cards, .posts, .tiers, .quotes-3, .addons{grid-template-columns:repeat(2,1fr);}
  .chapters{grid-template-columns:repeat(2,1fr);}
  .gal-3{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .foot-brand{grid-column:1 / -1;}
  .sticky-split{grid-template-columns:1fr;}
  .sticky-split .hold{position:static;}
  .post-feature{grid-template-columns:1fr;}
}
@media (max-width:760px){
  :root{--nav-h:64px;}
  .hero{height:92svh; min-height:520px;}
  .hero > img{object-position:50% 36%;}
  .hero .overlay{padding-bottom:34vh;}

  .split, .split.wide-media, .split.wide-text{grid-template-columns:1fr;}
  .split .txt{text-align:center;}
  .split .txt .measure, .split .txt .measure-sm{margin-left:auto; margin-right:auto;}
  .split .eyebrow-line{justify-content:center;}
  .media-first .txt, .media-first .fig-col{order:initial;}
  .split .fig-col{margin-bottom:2rem;}
  .split.text-first .fig-col{margin-bottom:0; margin-top:2rem;}

  .cards, .posts, .tiers, .quotes-3, .addons, .chapters{grid-template-columns:1fr;}
  .cards, .posts, .tiers{max-width:440px; margin-left:auto; margin-right:auto;}
  .gal-3, .gal-2{grid-template-columns:1fr; }
  /* one image per row on phones — biggest possible photo, still perfectly symmetric */
  .mosaic{grid-template-columns:1fr;}
  .mosaic .band{aspect-ratio:3/2;}
  .pair{gap:.6rem;}

  .ilist .row{grid-template-columns:auto 1fr; }
  .ilist .row .go{grid-column:2; justify-self:start; margin-top:.6rem;}

  .form .grid-2{grid-template-columns:1fr;}
  .igstrip{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1fr; text-align:center; justify-items:center;}
  .foot-col ul{align-items:center;}
  .foot-brand p{margin-left:auto; margin-right:auto;}
  .foot-bottom{justify-content:center; text-align:center;}
  .tlink{justify-content:center;}
  .split .txt .tlink, .split .txt .btn{margin-left:auto; margin-right:auto;}

    
  .phero .plate{margin-top:-2rem; padding:1.8rem 1.4rem 1.4rem;}
  .lbox .lb-prev{left:0;} .lbox .lb-next{right:0;}
}
@media (max-width:420px){
  .hero .wordmark{font-size:2.1rem; letter-spacing:.1em;}
  .hero .subtitle{letter-spacing:.32em;}
}