/* AETERNA — home page compositions. Builds only on tokens from site.css. */

/* ------------------------------------------------------------------ HERO --
   A pinned dark chapter. The film scrubs with the scroll for two beats and
   then rests on the finished watch. Deliberately short: the first product is
   two and a half screens away, not eight. */
.hero{position:relative;height:250vh;background:var(--night)}
.hero__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--night)}
.hero__poster{position:absolute;inset:0;background-size:cover;background-position:46% 50%}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 50%;
  opacity:0;transition:opacity 900ms var(--e-io);will-change:transform;transform:translateZ(0);
}
.hero__stage.is-ready .hero__video{opacity:1}
.hero__stage.is-failed .hero__video{display:none}

/* One left-weighted scrim, always on. Guarantees at least 5.5:1 for the copy
   even against a blown highlight in the footage, with no per-beat tuning. */
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,9,11,.88) 0%,rgba(10,9,11,.74) 30%,rgba(10,9,11,.2) 62%,rgba(10,9,11,0) 84%),
    linear-gradient(180deg,rgba(10,9,11,.6) 0,rgba(10,9,11,0) 22%,rgba(10,9,11,0) 72%,rgba(10,9,11,.5) 100%);
}

.hero__bands{position:absolute;inset:0}
.hero__band{
  position:absolute;top:50%;transform:translateY(-50%);
  left:var(--gutter);width:min(46vw,560px);
  opacity:0;visibility:hidden;
  text-shadow:0 1px 2px rgba(5,5,10,.6),0 10px 40px rgba(5,5,10,.5);
}
.hero__band.is-on{visibility:visible}
.hero__band .eyebrow{color:var(--brass-lite)}
.hero__band .display,.hero__band .h1{color:var(--night-ink);margin-top:var(--s4)}
.hero__band .lede{color:var(--night-ink);opacity:.86;margin-top:var(--s5);max-width:38ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7)}
.hero__cta .btn{text-shadow:none}

/* Beat one assembles on load so the page never opens wordless, then hands
   over to the scroll. Beat two rises word by word as the watch settles. */
.hero__band .w{display:inline-block;white-space:nowrap}
.hero__band[data-fx=rise] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*20px));
}
.hero__band[data-fx=rise] .lede{--ks:clamp(0,(var(--k,0) - .5)*4,1);opacity:calc(.86*var(--ks));transform:translateY(calc((1 - var(--ks))*12px))}
.hero__band[data-fx=rise] .hero__cta{--kb:clamp(0,(var(--k,0) - .66)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}

.hero__cue{
  position:absolute;left:var(--gutter);bottom:clamp(20px,4vh,36px);z-index:3;
  display:flex;align-items:center;gap:var(--s3);
  font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--night-ink-60);
  transition:opacity var(--d2) var(--e-io);
}
.hero__cue i{display:block;width:44px;height:1px;background:var(--brass-lite);transform-origin:left;animation:cue 2.8s var(--e-io) infinite}
@keyframes cue{0%,100%{transform:scaleX(.18);opacity:.45}50%{transform:scaleX(1);opacity:1}}
.hero__stage.is-past .hero__cue{opacity:0}

.hero__ring{
  position:absolute;right:var(--gutter);bottom:clamp(20px,4vh,36px);z-index:3;
  width:20px;height:20px;color:var(--brass-lite);transform:rotate(-90deg);
}
.hero__ring circle{transition:stroke-dashoffset .2s linear}
.hero__ring{opacity:1;transition:opacity var(--d2) var(--e-io)}
.hero__stage.is-ready .hero__ring,.hero__stage.is-failed .hero__ring{opacity:0}

/* Static hero: phones, portrait tablets, coarse landscape, reduced motion.
   A composed layout in its own right, not an apology. */
.hero__static{display:none;position:relative;min-height:100svh;grid-template-rows:1fr auto;isolation:isolate}
.hero__static-img{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:50% 32%}
.hero__static-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,11,.5) 0,rgba(10,9,11,0) 26%,rgba(10,9,11,.18) 50%,rgba(10,9,11,.9) 82%,var(--night) 100%);
}
.hero__static-copy{grid-row:2;padding:0 var(--gutter) clamp(36px,8vh,64px);text-shadow:0 1px 2px rgba(5,5,10,.6),0 10px 40px rgba(5,5,10,.5)}
.hero__static-copy .h1{color:var(--night-ink);margin-top:var(--s4)}
.hero__static-copy .lede{color:var(--night-ink);opacity:.86;margin-top:var(--s4);max-width:34ch}
.hero__static-copy .btn{text-shadow:none}

@media (max-width:820px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{height:auto}
  .hero__stage{position:relative;height:auto;overflow:visible}
  .hero__poster,.hero__video,.hero__scrim,.hero__bands,.hero__cue,.hero__ring{display:none}
  .hero__static{display:grid}
  .hero__static-img{background-image:url("hero-static.jpg")}
}
@media (prefers-reduced-motion:reduce) and (min-width:821px) and (orientation:landscape){
  .hero__static-img{background-image:url("watch-wide.jpg");background-position:58% 50%}
}

/* -------------------------------------------------------------- FEATURED */
.featured__head{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-end;justify-content:space-between;margin-bottom:var(--s8)}
.featured__head .sec-head{gap:var(--s3)}

/* ---------------------------------------------------------- BRAND STORY --
   Sticky plate on the left, chapters scrolling past on the right. The plate
   crossfades between three frames as each chapter takes the reading line.
   This is the one place on the site where scroll drives a picture, and it is
   driven by IntersectionObserver rather than a per-frame scroll handler. */
.story{background:var(--night);color:var(--night-ink-60)}
.story__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(40px,6vw,120px);align-items:start}
.story__plate{position:sticky;top:calc(var(--header-h) + var(--s6));height:min(74vh,720px);border-radius:var(--r-sm);overflow:hidden;background:var(--night-2)}
.story__plate img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  /* The frame arrives lifted and a little over-scaled and settles into place,
     so a chapter change reads as a camera coming to rest rather than as two
     stills swapped. The rise sits well inside the scale's own slack -- 1.085
     on a 720px plate leaves 30px of vertical play against an 18px travel --
     so no edge is ever exposed at either end of the move. Transform runs
     longer than opacity on purpose: the picture is still settling after the
     dissolve has finished, which is what stops it looking like a slideshow. */
  transform:scale(1.085) translateY(18px);
  transition:opacity 900ms var(--e-io),transform 2600ms var(--e-out);
}
.story__plate img.is-on{opacity:1;transform:none}
.story__plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--night-rule);
}
.story__chapters{display:grid;gap:0}
/* The live chapter is marked with a rule and a brass number, never by dimming
   the others: text at 34% opacity measures 1.81:1 on this ground, and even 62%
   only reaches 3.28:1. Every chapter stays fully readable. */
.story__chapter{
  position:relative;min-height:78vh;display:grid;align-content:center;gap:var(--s4);
  padding-block:var(--s7);padding-left:var(--s6);
}
.story__chapter::before{
  content:"";position:absolute;left:0;top:var(--s7);bottom:var(--s7);width:1px;
  background:var(--night-rule);
}
.story__chapter::after{
  content:"";position:absolute;left:0;top:var(--s7);width:2px;height:0;
  background:var(--brass-lite);
  transition:height var(--d3) var(--e-out);
}
.story__chapter.is-live::after{height:calc(100% - 2*var(--s7))}
.story__chapter .h2{max-width:16ch;color:var(--night-ink-60);transition:color var(--d3) var(--e-out)}
.story__chapter.is-live .h2{color:var(--night-ink)}
.story__chapter .body{color:var(--night-ink-60);max-width:46ch}
.story__num{font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:var(--track-wide);color:var(--night-ink-60);transition:color var(--d3) var(--e-out)}
.story__chapter.is-live .story__num{color:var(--brass-lite)}
@media (max-width:900px){
  .story__grid{grid-template-columns:1fr;gap:var(--s7)}
  .story__plate{position:relative;top:0;height:62vh}
  .story__chapter{min-height:0;padding-block:var(--s6)}
  .story__chapter .h2,.story__num{color:var(--night-ink)}
  .story__chapter::after{height:calc(100% - 2*var(--s6))}
  .story__chapters{gap:var(--s6)}
}

/* ------------------------------------------------------ CRAFT PREVIEW -- */
.craft__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border-block:1px solid var(--rule);margin-top:var(--s8)}
.craft__cell{background:var(--paper);padding:var(--s6) var(--s5) var(--s7);display:grid;gap:var(--s3);align-content:start;transition:background-color var(--d2) var(--e-micro)}
.craft__cell:hover{background:var(--paper-card)}
.craft__cell .h4{margin-top:var(--s2)}
.craft__cell p{font-size:var(--t-sm);color:var(--ink-45);margin:0}
.craft__n{font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:.12em;color:var(--brass)}
@media (max-width:980px){.craft__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.craft__grid{grid-template-columns:1fr}}

/* ------------------------------------------------- TWELVE: THE REGISTER --
   Twelve references as twelve photographs, grouped by case metal in reference
   order, so AE-T01..T09 / AE-R01..R02 / AE-K01 run in sequence with no gaps.
   Price and edition size belong to the case, so each band states them once.
   The board closes on the arithmetic.

   This replaces the old swatch grid. Gone with it: the --r-full discs, their
   outer drop shadow and the translateY(-3px) hover, all three of which
   contradicted the ground rules at the top of site.css. */

.twelve{position:relative;background:var(--paper-sunk)}
/* overflow:hidden is gone: nothing here bleeds, and it is the one declaration
   that clips a focus ring at the section edge. */

.tw-board{display:grid;gap:var(--s9);margin-top:var(--s8)}
.tw__set{display:grid;gap:var(--s6)}

/* -- the band: metal, arithmetic, price. Three registers, three rules. */
.tw__band{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--rule-strong);
}
.tw__metal{display:flex;align-items:center;gap:var(--s3);margin:0}
/* caseSwatch: the photograph shows the dial, this shows the case metal.
   Near square per the ground rules, inset hairline rather than a shadow. */
.tw__sw{
  /* 12px square: the workhorse radius would round it into a blob */
  flex:none;width:var(--s3);height:var(--s3);border-radius:var(--r-xs);
  background:var(--sw);box-shadow:inset 0 0 0 1px var(--rule-strong);
}
.tw__count{
  flex:1 1 auto;min-width:0;margin:0;
  font:400 var(--t-xs)/1.5 var(--f-mono);letter-spacing:.08em;color:var(--ink-45);
}
.tw__price{margin:0;font:400 var(--t-sm)/1.4 var(--f-mono);letter-spacing:.06em;color:var(--ink)}

/* -- the rows. One primitive, one variable, three values. */
.tw__row{
  display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));
  gap:var(--s7) var(--s5);margin:0;padding:0;list-style:none;
}
.tw__set--ti   .tw__row{--n:5}   /* nine references fall 5 + 4 */
.tw__set--rose .tw__row{--n:2}
.tw__set--king .tw__row{--n:2}   /* the reference, then the close */

/* -- one reference. */
.tw__ref{position:relative;isolation:isolate;display:grid;gap:var(--s4);align-content:start}
.tw__plate{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper-card);border-radius:var(--r-sm)}
/* 572/715 is exactly 4/5, so the intrinsic ratio matches the well and no
   srcset candidate can shift the layout. */
/* <picture> is inline by default, which breaks the height:100% chain and the
   image stops filling the well. */
.tw__plate picture{display:block;width:100%;height:100%}
.tw__plate img{width:100%;height:100%;object-fit:cover;transition:transform var(--d4) var(--e-out)}
.tw__copy{display:grid;gap:var(--s1);align-content:start;min-width:0}
.tw__no{
  margin:0;font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:.12em;color:var(--ink-45);
  transition:color var(--d1) var(--e-micro);
}
.tw__name{margin:0}
.tw__name a{text-decoration:none}
/* Whole cell is the target, only the name is in the tab order: the shipped
   .pcard__name a::after idiom, not a new one. */
.tw__name a::after{content:"";position:absolute;inset:0;z-index:1}
.tw__dial{margin:0;font:400 var(--t-sm)/1.45 var(--f-sans);color:var(--ink-45)}
.tw__say{margin:var(--s2) 0 0;font-size:var(--t-sm);color:var(--ink-70);max-width:34ch}
/* Words first, colour as reinforcement. Two references carry a flag and ten do
   not, which is what makes the two mean anything. */
.tw__flag{margin:var(--s1) 0 0;font:400 var(--t-xs)/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.tw__flag[data-avail=low]{color:var(--brass)}
.tw__flag[data-avail=waitlist]{color:var(--err)}

/* -- micro only: the photograph settles, the reference number darkens. */
.tw__ref:hover .tw__plate img,
.tw__ref:focus-within .tw__plate img{transform:scale(1.04)}
.tw__ref:hover .tw__no,
.tw__ref:focus-within .tw__no{color:var(--ink)}

/* -- the three precious references sit beside their copy: it fills their short
      rows and earns them the one thing the nine do not get, a line of prose. */
/* The plate leads and the copy sits against its middle. Top-aligning copy
   beside a plate half again as tall leaves a void under it that reads as an
   accident rather than as air. */
.tw__ref--wide{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);align-items:center}
.tw__ref--wide .tw__copy{gap:var(--s1)}
/* These three carry the strap as well: it is the one specification a buyer at
   this price asks for next, and it gives the column something to hold. */
.tw__strap{margin:var(--s2) 0 0;font-size:var(--t-sm);line-height:1.5;color:var(--ink-45);max-width:32ch}

/* -- the close, second cell of the king gold row. --ink is the accounting
      total rule: heavier than a divider, over its own column only. */
.tw__close{display:grid;gap:var(--s4);align-content:start;padding-top:var(--s5);border-top:1px solid var(--ink)}
.tw__sum{margin:0;font:400 var(--t-sm)/1.6 var(--f-mono);letter-spacing:.08em;color:var(--ink-45)}
.tw__total{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3);margin:0}
.tw__total span:last-child{font-size:var(--t-sm);color:var(--ink-45);max-width:30ch}

/* -- 641 to 1040: three across. Nine falls exactly 3 + 3 + 3. */
@media (max-width:1040px){
  .tw-board{gap:var(--s8)}
  .tw__set--ti .tw__row,
  .tw__set--rose .tw__row,
  .tw__set--king .tw__row{--n:3}
  .tw__ref--wide{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .tw__close{grid-column:span 2}
}

/* -- 640 and down: two across, king gold takes the full measure. */
@media (max-width:640px){
  .tw__row{gap:var(--s6) var(--s4)}
  .tw__set--ti .tw__row,
  .tw__set--rose .tw__row{--n:2}
  .tw__set--king .tw__row{--n:1}
  .tw__close{grid-column:1/-1}
}

@media print{.tw__ref{break-inside:avoid}}

/* No prefers-reduced-motion block: site.css already collapses every duration
   and forces .reveal visible, and both transitions above land on their correct
   final frame. */

/* --------------------------------------------------------------- TRUST -- */
/* .twelve directly above is also --paper-sunk. One hairline so the two stop
   reading as a single long trough. */
.trust{background:var(--paper-sunk);border-top:1px solid var(--rule)}
.trust__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) var(--s6);margin-top:var(--s8)}
.trust__item{display:grid;gap:var(--s3);align-content:start;grid-template-columns:auto 1fr;column-gap:var(--s4)}
.trust__item svg{grid-row:1/span 3;width:26px;height:26px;fill:none;stroke:var(--brass);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.trust__item .h4{margin:0}
.trust__item p{font-size:var(--t-sm);color:var(--ink-45);margin:0}
@media (max-width:880px){.trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.trust__grid{grid-template-columns:1fr;gap:var(--s6)}}

/* ------------------------------------------------------------- REVIEWS -- */
.reviews__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-top:var(--s8)}
.review{display:grid;gap:var(--s4);align-content:start;padding:var(--s6);background:var(--paper-card);border:1px solid var(--rule);border-radius:var(--r-sm)}
.review blockquote{margin:0;font:400 var(--t-h4)/1.5 var(--f-sans);color:var(--ink);letter-spacing:-.006em}
.review figcaption{display:grid;gap:var(--s1)}
.review__who{font:500 var(--t-sm)/1.3 var(--f-sans);color:var(--ink)}
.review__what{font:400 var(--t-xs)/1.4 var(--f-mono);letter-spacing:.08em;color:var(--ink-45)}
.stars{display:flex;gap:2px}
.stars svg{width:14px;height:14px;fill:var(--brass);stroke:none}
.reviews__summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s5);margin-top:var(--s5)}
.reviews__score{font:400 var(--t-h3)/1 var(--f-display);color:var(--ink)}
@media (max-width:900px){.reviews__grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------- JOURNAL -- */
.journal__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) var(--s6);margin-top:var(--s8)}
.jcard{position:relative;display:grid;gap:var(--s4);align-content:start}
.jcard__media{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-sm);background:var(--paper-sunk)}
.jcard__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d4) var(--e-out)}
.jcard:hover .jcard__media img{transform:scale(1.04)}
.jcard__meta{display:flex;gap:var(--s3);font:400 var(--t-xs)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
.jcard h3{margin:0}
.jcard h3 a{text-decoration:none}
.jcard h3 a::after{content:"";position:absolute;inset:0}
.jcard p{font-size:var(--t-sm);color:var(--ink-45);margin:0}
@media (max-width:900px){.journal__grid{grid-template-columns:1fr;gap:var(--s7)}}

/* ---------------------------------------------------------- NEWSLETTER -- */
.news{background:var(--night)}
.news__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:clamp(32px,5vw,96px);align-items:center}
.news form{display:grid;gap:var(--s4)}
.news__row{display:flex;gap:var(--s3);align-items:flex-start}
.news__row .field{flex:1;min-width:0}
@media (max-width:820px){.news__grid{grid-template-columns:1fr}.news__row{flex-direction:column;align-items:stretch}}

/* Reduced motion: no plate crossfade, no chapter marker animation, and every
   chapter reads as live so nothing is left in a half state. */
@media (prefers-reduced-motion:reduce){
  .story__plate img{opacity:0}
  .story__plate img:first-of-type{opacity:1;transform:none}
  .story__chapter .h2{color:var(--night-ink)}
  .story__chapter::after{height:calc(100% - 2*var(--s7))}
  .story__num{color:var(--brass-lite)}
  .hero__cue i{transform:none;opacity:1}
}