/* ═══════════════════════════════════════════════
   FEMORA
   Colours sampled from the production packaging
   artwork, not invented.
   ═══════════════════════════════════════════════ */
:root{
  --wine:#88012a;
  --wine-soft:#a5675f;
  --rose:#cc9e98;
  --blush:#e7d0cf;
  --sage:#525447;
  --sand:#e3d1c1;

  --night:#0a0607;        /* the room — the opening stays dark */
  --night-2:#150d10;
  --page:#e8dccb;         /* soft beige: the ground outside the hero */
  --cream:#f6efe2;        /* warm cream, not off-white */
  --ink:#2b1c1e;
  --ink-soft:#6d5a5c;

  /* Where the O of "femora" sits inside the wordmark artwork.
     Measured off the mask: bowl centre, plus the counter's half-width.
     This didone O has a narrow slit, not a round hole — so the aperture
     starts at the slit and outgrows the letterform as we fly in. */
  --o-fx:.618;
  --o-fy:.299;
  --o-fr:.013;

  --serif:"Playfair Display",Georgia,serif;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:clip;              /* clip, not hidden — hidden can break position:sticky */
}

/* ═══════════ BROWSER SURFACES ═══════════
   Selection, caret and scrollbar ship with defaults that belong to no design
   system. They are part of the page. */
/* visible to screen readers, not to the eye — for labels a design can't show */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

::selection{background:rgba(180,0,60,.18); color:var(--ink)}
::-moz-selection{background:rgba(180,0,60,.18); color:var(--ink)}
:where(input, textarea){caret-color:var(--wine)}
:where(html){scrollbar-color:rgba(136,1,42,.34) transparent; scrollbar-width:thin}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(136,1,42,.28); border-radius:99px;
  border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(136,1,42,.46); background-clip:content-box}
/* figures quoting measurements should not wobble between glyph widths */
:where(.pick__spec, .anat__spec, .compare__cell, .contact-info__value){font-variant-numeric:tabular-nums}

/* ═══════════ FOCUS ═══════════
   One visible ring for everything reachable by keyboard. `:where()` keeps the
   specificity at zero, so any component that wants its own ring still wins —
   but nothing is left with no ring at all. appearance:none on a button can
   drop the UA default, which is why this is stated rather than inherited. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--wine);
  outline-offset:3px;
  border-radius:3px;
}
/* pointer users get no ring, but never no feedback — see the hover rules */
:where(button, [role="button"]):active{transform:translateY(.5px)}
@media (prefers-reduced-motion:reduce){
  :where(button, [role="button"]):active{transform:none}
}

.wordmark{
  display:block; line-height:1; color:currentColor;
  font-family:"Abril Fatface",Georgia,serif;
  font-size:27px; letter-spacing:-.005em;
}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,54px);
  color:var(--wine);
  opacity:0; transform:translateY(-14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.nav.is-on{opacity:1; transform:none; pointer-events:auto}
/* text scrolls under the fixed nav on every long page — a soft cream veil
   keeps the links readable (the only place it sits over something non-cream
   is the dark hero, where the nav is hidden anyway) */
.nav{
  background:rgba(246,239,226,.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(136,1,42,.06);
}
.nav__mark{color:var(--wine); display:block}
.nav__links{display:flex; gap:clamp(16px,2.4vw,34px)}
.nav__links a{
  position:relative;
  color:var(--wine); text-decoration:none;
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  opacity:.78; transition:opacity .3s;
}
/* a rule that draws itself from the left, rather than opacity alone */
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:1.5px;
  background:currentColor; border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover,
.nav__links a:focus-visible{opacity:1}
.nav__links a:hover::after,
.nav__links a:focus-visible::after{transform:scaleX(1)}
.nav__links a.is-current{opacity:1}
.nav__links a.is-current::after{transform:scaleX(1)}
.nav__mark{transition:transform .3s var(--ease)}
.nav__mark:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){
  .nav__links a::after{transition:none}
  .nav__mark{transition:none}
  .nav__mark:hover{transform:none}
}

/* ── phones: the links fold behind a button (js/menu.js) ── */
.nav__burger{display:none}
@media (max-width:860px){
  .nav__burger{
    display:grid; place-content:center; gap:6px;
    width:40px; height:40px; margin-right:-8px; padding:0;
    appearance:none; background:none; border:0; border-radius:50%;
    cursor:pointer; color:var(--wine);
  }
  .nav__burger i{
    display:block; width:20px; height:1.5px; border-radius:2px;
    background:currentColor;
    transition:transform .3s var(--ease);
  }
  .nav.is-menu .nav__burger i:first-child{transform:translateY(3.75px) rotate(45deg)}
  .nav.is-menu .nav__burger i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

  .nav__links{
    position:absolute; top:calc(100% - 6px); left:12px; right:12px;
    display:flex; flex-direction:column; gap:0;
    padding:8px;
    background:var(--cream);
    border:1px solid rgba(136,1,42,.16);
    border-radius:16px;
    box-shadow:0 22px 44px -20px rgba(84,20,44,.45);
    opacity:0; transform:translateY(-8px); visibility:hidden;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  }
  .nav.is-menu .nav__links{
    opacity:1; transform:none; visibility:visible;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
  }
  .nav__links a{
    padding:16px 14px; border-radius:10px;
    font-size:13px; opacity:1;
  }
  .nav__links a + a{box-shadow:0 -1px 0 rgba(136,1,42,.1)}
  .nav__links a::after{display:none}
  .nav__links a:hover{background:rgba(136,1,42,.06)}
  .nav__links a:focus-visible{outline-offset:-2px}
  .nav__links a.is-current{background:rgba(136,1,42,.07)}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .nav__burger i, .nav__links{transition:none}
}

/* ═══════════ STAGE ═══════════ */
.stage{height:215vh; position:relative}
/* clip, not just hidden: a hidden box is still a scroll container, and focusing
   a box in the row made the browser scroll it sideways to "reveal" the glow */
.stage__vp{position:sticky; top:0; height:100vh; overflow:hidden; overflow:clip}

/* ═══════════ THE ROOM ═══════════
   Near-black, with coloured light moving through it. The opening stays dark
   deliberately — it is the only dark surface on the site, and the flight out
   of the O into daylight depends on it. Everything outside the hero sits on
   --page instead.
   ═══════════════════════════════ */
.room{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 90% 70% at 50% 42%, var(--night-2) 0%, var(--night) 68%);
}
.room i{position:absolute; display:block; border-radius:50%; mix-blend-mode:screen}
.lp{filter:blur(70px)}
.lp--rose{
  width:78vmax; height:60vmax; left:-22vmax; top:-16vmax;
  background:radial-gradient(circle at 50% 50%,
    rgba(196,74,102,.46), rgba(150,40,70,.16) 42%, rgba(120,20,50,0) 66%);
  animation:drift1 19s ease-in-out infinite alternate;
}
.lp--amber{
  width:66vmax; height:52vmax; right:-20vmax; bottom:-18vmax;
  background:radial-gradient(circle at 50% 50%,
    rgba(224,150,92,.38), rgba(190,110,60,.13) 44%, rgba(150,80,40,0) 70%);
  animation:drift2 23s ease-in-out infinite alternate;
}
.lp--wine{
  width:54vmax; height:54vmax; right:6vmax; top:-14vmax;
  background:radial-gradient(circle at 50% 50%,
    rgba(136,1,42,.40), rgba(96,0,30,.14) 46%, rgba(60,0,20,0) 70%);
  animation:drift3 27s ease-in-out infinite alternate;
}
.room__vig{
  inset:0; width:100%; height:100%; border-radius:0; mix-blend-mode:normal;
  background:radial-gradient(ellipse 76% 62% at 50% 44%,
    rgba(0,0,0,0) 34%, rgba(0,0,0,.72) 100%);
}
/* Phones: a 70px blur on three moving, screen-blended, viewport-sized lamps is
   re-rendered on every frame of the flight. The gradients already fade to
   nothing on their own, so the blur and the blend add little but cost a lot. */
@media (max-width:860px), (pointer:coarse){
  .room .lp{filter:none; mix-blend-mode:normal}
  /* `.room i` outranks .room__vig, so the vignette has always been screen-blended
     black — a no-op. Blended normally it shows as an oval rim; just drop it. */
  .room .room__vig{display:none}
  /* without the blur the gradients must reach zero at the element's own edge
     (closest-side), or the ellipse shows as a hard rim */
  .lp--rose{background:radial-gradient(closest-side,
    rgba(196,74,102,.40), rgba(150,40,70,.14) 50%, rgba(120,20,50,0))}
  .lp--amber{background:radial-gradient(closest-side,
    rgba(224,150,92,.32), rgba(190,110,60,.11) 52%, rgba(150,80,40,0))}
  .lp--wine{background:radial-gradient(closest-side,
    rgba(136,1,42,.36), rgba(96,0,30,.12) 52%, rgba(60,0,20,0))}
}
@keyframes drift1{to{transform:translate3d(7vmax,5vmax,0) scale(1.14)}}
@keyframes drift2{to{transform:translate3d(-8vmax,-4vmax,0) scale(1.18)}}
@keyframes drift3{to{transform:translate3d(-5vmax,7vmax,0) scale(1.1)}}

/* ═══════════ THE MARK WE FLY INTO ═══════════
   Live type, so it is genuinely resolution-independent — the packaging
   raster only held ~715px of detail and could never survive a 9x zoom.
   ═══════════════════════════════════════════ */
.logo{
  /* Full-bleed centring container. It is NOT the thing that scales: a
     viewport-sized box at 9x becomes a layer past Chrome's max texture size
     and silently fails to rasterise. Only the type itself is transformed.
     pointer-events:none because nothing inside is interactive — this lets
     the fade (opacity, not visibility) do the hiding without ever blocking
     clicks on the portal/picker underneath. */
  position:absolute; z-index:20; inset:0;
  display:grid; place-items:center;
  opacity:var(--logoOn,1);
  pointer-events:none;
  will-change:opacity;
}
.logo__type{
  position:relative; display:block; line-height:1;
  transform:scale(var(--s,1));
  transform-origin:var(--ogx,50%) var(--ogy,50%);   /* the O's own centre */
  will-change:transform;
}
#baseMark{display:inline-block; width:0; height:0; vertical-align:baseline}
.logo__ink,.logo__glow{display:block}
.logo__glow{position:absolute; inset:0}

.logo__word{
  display:block;
  font-family:"Abril Fatface",Georgia,serif;
  font-size:var(--type,180px);
  letter-spacing:-.005em;
  line-height:.92;
  white-space:nowrap;
}
.logo__sub{
  display:block; text-align:right;
  font-family:"Parisienne",cursive;
  font-size:calc(var(--type,180px) * .40);
  line-height:1;
  margin-top:calc(var(--type,180px) * -.10);
  padding-right:calc(var(--type,180px) * .06);
}

/* the letters themselves */
.logo__ink{
  color:#fdeeeb;                    /* solid, not gradient text */
  position:relative; z-index:2;
}

/* backlit: the same letterforms behind, blurred into a rose bloom */
.logo__glow{
  color:#ff7d9e;
  filter:blur(calc(var(--type,180px) * .085)) saturate(1.25);
  opacity:var(--glow,.5);
  z-index:1;
}
.logo__glow::after{                 /* a wider, softer second pass */
  content:''; position:absolute; left:-12%; top:-30%; width:124%; height:170%;
  background:radial-gradient(ellipse at 52% 48%,
    rgba(255,120,155,.42), rgba(210,60,105,.16) 44%, rgba(120,20,50,0) 72%);
  filter:blur(calc(var(--type,180px) * .13));
}

/* ═══════════ WHAT'S THROUGH THE O ═══════════
   Full-screen and bright, revealed by a circle growing
   out of the O's counter.
   ═══════════════════════════════════════════ */
.portal{
  position:absolute; inset:0; z-index:10;
  display:grid; place-items:center;
  pointer-events:none;
  /* the aperture is the O's own counter outline — driven from js/hero.js.
     Starts closed so the opening frame is a clean shot of the logo. */
  clip-path:circle(0px at 50% 50%);
  /* the same cream as the sections below it, so scrolling out of the portal
     is a continuous surface rather than a hue change from pink-white to cream */
  background:
    radial-gradient(ellipse 70% 55% at 50% 34%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 90% 70% at 50% 60%, #fdf9ef 0%, var(--cream) 44%, #e8dcc9 100%);
}
.portal.is-live{pointer-events:auto}
.portal__cotton{position:absolute; inset:0; width:100%; height:100%}
.portal__body{
  position:relative; z-index:2; width:min(1180px,92vw); text-align:center;
  opacity:var(--pop,0);
  transform:translateY(var(--portalRise,30px));
}
.portal__kicker{
  margin:0 0 10px; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  /* wine, like every other eyebrow on the site. The pale pink this replaced
     was written for the dark room and never updated when the portal became
     cream — at 11px it was sitting on the cream at roughly 1.1:1, i.e.
     invisible. */
  color:var(--wine); font-weight:600;
}
.portal__title{
  margin:0 0 clamp(28px,5vh,56px);
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(30px,4.6vw,58px); color:var(--wine);
}

/* ═══════════ THE BOX ═══════════
   Geometry driven by real millimetres from the dielines.
   ═══════════════════════════════ */
.pbox{
  --u:3px;
  --W:calc(var(--w) * var(--u));
  --D:calc(var(--d) * var(--u));
  --H:calc(var(--h) * var(--u));
  position:relative; width:var(--W); height:var(--H);
  transform-style:preserve-3d;
}
.pbox i{position:absolute; left:50%; top:50%; display:block; background-repeat:no-repeat}

/* url() inside a custom property resolves against the stylesheet that
   consumes it, so these must live here rather than inline in the HTML. */
.pbox--day{
  --w:100; --d:58; --h:105;
  --front:url('../assets/brand/day-front.webp');
  --side:url('../assets/brand/day-side.webp');
  --lid:#cc9e98; --lidDark:#a5675f; --innerTone:#f3e4e2;
}
.pbox--night{
  --w:100; --d:60; --h:115;
  --front:url('../assets/brand/night-front.webp');
  --side:url('../assets/brand/night-side.webp');
  --lid:#b1afa3; --lidDark:#525447; --innerTone:#e6e9dd;
}
.pbox--liner{
  --w:70; --d:31; --h:125;
  --front:url('../assets/brand/liner-front.webp');
  --side:url('../assets/brand/liner-side.webp');
  --lid:#e3d1c1; --lidDark:#b2a799; --innerTone:#f1e7db;
  /* 70x125 standing reads as a tower beside the other two — lay it flat.
     Its panel art is printed rotated 90deg, so this also sets the branding
     upright. --drop returns the rotated silhouette to the shared baseline. */
  --lay:90deg;
  --drop:calc((var(--H) - var(--W)) / 2);
}

.pf{background-size:100% 100%; backface-visibility:hidden}
.pf--front,.pf--back{
  width:var(--W); height:var(--H);
  margin-left:calc(var(--W)/-2); margin-top:calc(var(--H)/-2);
}
.pf--front{background-image:var(--front); transform:translateZ(calc(var(--D)/2))}
.pf--back{background:var(--lidDark); transform:translateZ(calc(var(--D)/-2)) rotateY(180deg)}
.pf--left,.pf--right{
  width:var(--D); height:var(--H);
  margin-left:calc(var(--D)/-2); margin-top:calc(var(--H)/-2);
  background-image:var(--side);
}
.pf--left{transform:rotateY(-90deg) translateZ(calc(var(--W)/2))}
.pf--right{transform:rotateY(90deg) translateZ(calc(var(--W)/2))}
.pf--top,.pf--bottom{
  width:var(--W); height:var(--D);
  margin-left:calc(var(--W)/-2); margin-top:calc(var(--D)/-2);
  background:var(--lid);
}
.pf--top{
  transform:rotateX(90deg) translateZ(calc(var(--H)/2));
  background-image:linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.06));
}
.pf--bottom{transform:rotateX(-90deg) translateZ(calc(var(--H)/2)); background:var(--lidDark)}

/* ═══════════ THE THREE ═══════════ */
.picker{
  --u:clamp(1.05px,2.2vh,2px);          /* px per mm, shared by box and glow */
  --stageH:clamp(230px,34vh,320px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,2.4vw,40px); align-items:end;
}
/* each box's visual height, so the glow can sit on its centre rather than the
   stage's — the boxes are different heights and the liner lies flat */
.pick:has(.pbox--day){--glowRGB:236 146 152; --boxH:calc(105 * var(--u))}
.pick:has(.pbox--night){--glowRGB:150 170 122; --boxH:calc(115 * var(--u))}
.pick:has(.pbox--liner){--glowRGB:214 174 128; --boxH:calc(70 * var(--u))}
.pick{
  appearance:none; border:0; background:none; padding:0; cursor:pointer;
  font:inherit; color:inherit; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  position:relative;
}
/* the glow behind the box — ::before paints under the button's own children */
.pick::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:calc(var(--stageH) - 14px - var(--boxH,150px) / 2);
  width:min(112%,380px); aspect-ratio:1.15;
  transform:translate(-50%,-50%) scale(var(--gz,1));
  background:radial-gradient(ellipse 58% 50% at 50% 47%,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.82) 26%,
    rgb(var(--glowRGB,255 236 232) / .58) 44%,
    rgb(var(--glowRGB,255 236 232) / .22) 62%,
    rgb(var(--glowRGB,255 236 232) / 0) 80%);
  opacity:var(--go,1);
  transition:opacity .5s var(--ease), transform .55s var(--ease);
}
.pick:hover::before,
.pick:focus-visible::before{--go:1; --gz:1.16}
/* chosen: brighter and wider still */
.pick.is-chosen::before{--go:1; --gz:1.34}
.pick.is-chosen::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:calc(var(--stageH) - 14px - var(--boxH,150px) / 2);
  width:min(168%,560px); aspect-ratio:1.15;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 46% 44% at 50% 47%,
    rgba(255,255,255,.5) 0%,
    rgb(var(--glowRGB,255 236 232) / .26) 38%,
    rgb(var(--glowRGB,255 236 232) / 0) 70%);
  animation:glowIn .7s var(--ease) both;
}
@keyframes glowIn{from{opacity:0; transform:translate(-50%,-50%) scale(.8)}
                  to{opacity:1; transform:translate(-50%,-50%) scale(1)}}
.pick__stage,.pick__meta{position:relative; z-index:1}
.pick__stage{
  position:relative;
  display:grid; place-items:end center;      /* the boxes share a baseline */
  height:var(--stageH); width:100%;
  padding-bottom:14px;
  perspective:1000px;
}
.pick__stage::before{
  content:''; position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  width:64%; height:20px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(122,92,88,.34), rgba(122,92,88,0) 70%);
  filter:blur(7px);
}
/* Never put a filter on .pbox itself: it forces transform-style:flat
   and collapses the whole 3D box into a plane. */
.pick .pbox{
  --u:inherit;                 /* .pbox sets its own --u; take the picker's instead */
  transform-style:preserve-3d;
  transform:translateY(var(--drop,0px))
            rotateX(-8deg) rotateY(-26deg) rotateZ(var(--lay,0deg))
            scale(var(--z,1));
  transition:transform .55s var(--ease);
}
.pick:hover .pbox,
.pick:focus-visible .pbox{
  --z:1.13;
  transform:translateY(var(--drop,0px))
            rotateX(-9deg) rotateY(-19deg) rotateZ(var(--lay,0deg))
            scale(var(--z));
}

.pick__meta{display:block; margin-top:18px; max-width:30ch}
.pick__name{display:block; font-family:var(--serif); font-size:clamp(19px,2.1vw,27px); color:var(--wine)}
.pick__spec{
  display:block; margin-top:5px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
.pick__when{
  display:block; margin-top:12px; min-height:4.4em;
  font-size:clamp(12.5px,1.05vw,14px); line-height:1.65; color:var(--ink-soft);
  opacity:0; transform:translateY(7px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.pick:hover .pick__when,
.pick:focus-visible .pick__when{opacity:1; transform:none}
/* the box is the target, so ring the box — the underline alone was too quiet */
.pick:focus-visible{outline:2px solid var(--wine); outline-offset:6px; border-radius:14px}
.pick:focus-visible .pick__name{text-decoration:underline; text-underline-offset:5px}


/* ═══════════ CHOSEN: one box, held ═══════════
   Info left · box dead-centre · name right. The other two lift away.
   ═══════════════════════════════════════════ */
.pick{transition:opacity .55s var(--ease), transform .7s var(--ease)}
.is-focused .pick{opacity:0; transform:translateY(-70px); pointer-events:none}
.is-focused .pick.is-chosen{
  opacity:1; pointer-events:auto;
  transform:translateX(var(--dx,0px));
}
.is-focused .pick.is-chosen .pick__meta{opacity:0; transition:opacity .3s}
.is-focused .pick.is-chosen .pbox{
  transform:translateY(var(--drop,0px))
            rotateX(-7deg) rotateY(-20deg) rotateZ(var(--lay,0deg)) scale(1.2);
}
.is-focused .portal__kicker,
.is-focused .portal__title{opacity:0; transition:opacity .45s var(--ease)}

.detail{
  position:absolute; inset:0; z-index:4;
  display:grid; align-items:center;
  grid-template-columns:1fr clamp(210px,26vw,330px) 1fr;
  gap:clamp(14px,3vw,54px);
  opacity:0; pointer-events:none;
  transition:opacity .6s var(--ease) .18s;
}
.is-focused .detail{opacity:1}

.detail__info{grid-column:3; grid-row:1; justify-self:start; text-align:left; max-width:36ch}
.detail__eyebrow{
  margin:0 0 16px; font-size:12.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--wine); font-weight:600;
}
.detail__list{list-style:none; margin:0; padding:0}
.detail__list li{
  font-size:clamp(14.5px,1.3vw,18px); line-height:1.5; color:var(--ink-soft);
  padding:10px 0; border-top:1px solid rgba(136,1,42,.12);
}
.detail__list li:first-child{border-top:0}

.detail__name{
  grid-column:1; grid-row:1; justify-self:end; margin:0; max-width:14ch; text-align:right;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(32px,4.5vw,64px); line-height:1.1;
  color:var(--wine-soft); letter-spacing:.01em;
}

.detail__close{
  /* top-left, just under the nav (Vasian, 2026-10-02 — it used to sit bottom-centre) */
  position:absolute; left:clamp(18px,3.2vw,48px); top:calc(74px + clamp(14px,2.4vh,26px));
  pointer-events:auto; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  background:none; border:0; border-bottom:1px solid rgba(136,1,42,.3);
  padding:6px 2px; color:var(--wine);
  font:600 13.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  transition:color .3s, border-color .3s;
}
.detail__close::before{content:'←'; font-size:17px; letter-spacing:0; line-height:1}
.detail__close:hover{color:var(--wine); border-color:var(--wine)}

.detail__when{display:none}

@media (max-width:860px){
  /* No room for three columns. Lift the box and stack name then benefits
     beneath it — space-between can't know where the box actually sits. */
  /* the rail's overflow-x:auto clips vertically too, and the chosen box is
     lifted out of it — release it once something is chosen */
  /* the chosen box rises to --lift (js/hero.js measures it against the text
     below) and grows, since in the row it is only a third of the width */
  .is-focused .pick.is-chosen{transform:translateX(var(--dx,0px)) translateY(var(--lift,-17vh))}
  .is-focused .pick.is-chosen .pbox{
    transform:translateY(var(--drop,0px))
              rotateX(-7deg) rotateY(-20deg) rotateZ(var(--lay,0deg)) scale(var(--grow,1.55));
  }

  /* everything stacks in flow — the absolutely placed button and "Затвори"
     used to land on top of the last line of the list */
  .detail{
    grid-template-columns:1fr;
    align-content:end; justify-items:center;
    padding:0 22px max(18px, 3.5vh); gap:10px;
  }
  .detail__name{
    grid-row:1; grid-column:1; justify-self:center; text-align:center;
    max-width:none; font-size:clamp(26px,7.4vw,34px);
  }
  .detail__when{
    display:block; grid-row:2; grid-column:1;
    margin:-4px 0 4px; max-width:32ch; text-align:center;
    font-size:12.5px; line-height:1.55; color:var(--ink-soft);
  }
  .detail__info{grid-row:3; grid-column:1; justify-self:center; text-align:center; max-width:30ch}
  .detail__eyebrow{margin-bottom:6px; font-size:11.5px}
  .detail__list li{font-size:14px; padding:5px 0}
  .detail .wl__cta--detail{
    grid-row:4; grid-column:1; position:static; transform:none; margin-top:6px;
  }
  .detail .wl__cta--detail:active{transform:translateY(1px)}
  .detail__close{left:14px; top:96px; font-size:12.5px}   /* phone nav is 84px tall */
}

/* ═══════════ WHITE-OUT ═══════════ */
.bloom{
  position:absolute; inset:0; z-index:30; pointer-events:none;
  background:radial-gradient(circle at var(--ox,50%) var(--oy,50%),
    #fff 0%, #fffaf9 32%, rgba(255,247,246,.6) 58%, rgba(255,245,244,0) 80%);
  opacity:var(--bloom,0);
}

/* ═══════════ SCROLL HINT ═══════════ */
.hint{
  position:absolute; left:50%; bottom:38px; transform:translateX(-50%);
  z-index:40; display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:var(--hint,1); transition:opacity .5s linear; pointer-events:none;
}
.hint__word{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--wine); font-weight:600;
}
.hint__line{
  width:1px; height:52px;
  background:linear-gradient(180deg, rgba(255,214,212,.85), rgba(255,214,212,0));
  animation:drip 2.3s var(--ease) infinite;
}
@keyframes drip{
  0%{transform:scaleY(0); transform-origin:top}
  45%{transform:scaleY(1); transform-origin:top}
  55%{transform:scaleY(1); transform-origin:bottom}
  100%{transform:scaleY(0); transform-origin:bottom}
}

.after{min-height:46vh; background:var(--cream)}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:860px){
  .wordmark{font-size:21px}
  .stage{height:190vh}

  /* 100vw, not 100%: the scroll rail is a grid item, so a percentage width
     resolves against content and the rail inflates its own parent. */
  .portal__body{width:100vw; padding-top:58px}
  .portal__kicker{font-size:11px; letter-spacing:.22em}
  .portal__title{font-size:clamp(25px,7.4vw,34px); margin-bottom:14px}

  /* All three in one row, as on desktop, sized from the width: the widest
     silhouette (the liner laid flat, ~126mm across once turned) has to fit a
     third of the screen. The "when" line moves into the chosen view. */
  .picker{
    --u:min(calc((100vw - 36px) / 370), 1.8px);
    --stageH:calc(var(--u) * 150);
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px; padding-inline:12px;
    align-items:start;
  }
  .pick__meta{margin-top:10px; max-width:none}
  .pick__name{font-size:clamp(16px,4.6vw,22px)}
  .pick__spec{margin-top:4px; font-size:11px; letter-spacing:.03em; line-height:1.45}
  .pick__when{display:none}
  .pick::before{width:150%}
}

/* ═══════════ MOTION SAFETY ═══════════ */
@media (prefers-reduced-motion:reduce){
  .stage{height:100vh}
  .logo,.bloom,.hint,.room{display:none}
  .portal{clip-path:none !important}
  .portal__body{opacity:1 !important; transform:none !important}
  .nav{opacity:1; transform:none; pointer-events:auto}
  .lp{animation:none}
  .pick .pbox,.pick__when{transition:none}
}

/* the bot trap — off-screen, unreachable by keyboard, invisible to a person.
   Not display:none: some bots skip hidden fields, and that would defeat it. */
.hp{
  position:absolute !important;
  left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important;
}

/* the hCaptcha widget — mounted by js/forms.js into every form.
   Its iframe is a fixed 303px wide and cannot be restyled, so the job here is
   only to centre it and keep it from overflowing a narrow card: below 303px
   it is scaled down from its own left edge. */
.fcap{
  display:flex; justify-content:center;
  margin:4px 0 2px;
  /* the widget now loads on the first touch of the form — keep its 78px
     so the button below does not jump when it arrives */
  min-height:78px;
}
.fcap iframe{border-radius:8px}

@media (max-width:360px){
  .fcap{justify-content:flex-start}
  .fcap > div{transform:scale(.88); transform-origin:left center}
}

/* ── touch targets ──
   Small text controls keep their look but get an invisible hit area of at
   least 24x24 (WCAG 2.2, 2.5.8) — easier on a thumb, no visual change. */
/* .detail__close is left out here: it is already positioned (absolute on
   desktop, relative in the phone layout), which is all ::after needs */
.legal-foot__links a, .cc-reopen, .contact-copy, .popup-copy, .wl__copy,
.why-cta__link, a.contact-info__value{position:relative}
.nav__mark{position:relative}
.legal-foot__links a::after, .cc-reopen::after, .contact-copy::after,
.popup-copy::after, .wl__copy::after, .detail__close::after,
.why-cta__link::after, a.contact-info__value::after, .nav__mark::after{
  content:''; position:absolute; inset:-9px -6px;
}

/* ── skip link: the first Tab on every page jumps past the nav ── */
.skip{
  position:absolute; left:12px; top:-80px; z-index:10000;
  padding:12px 18px; border-radius:10px;
  background:var(--wine); color:var(--cream); text-decoration:none;
  font:600 13px/1 var(--sans);
}
.skip:focus{top:12px}