/* KIN 01 — Hero three. Dark warm ground, bone type, amber accent. Isolated from the approved hero and shared styles. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  color-scheme:dark;
  --paper:#211e1b;--ink:#f1ede6;--muted:#a89f92;--amber:#ffc46b;
  --f-display:'Space Grotesk',sans-serif;--f-accent:'Fraunces',Georgia,serif;
  --f-sans:'Archivo',sans-serif;--f-mono:'Geist Mono',monospace;
  --accent-size:1.24em;--accent-leading:1.06;--accent-gap:.02em;   /* two-line headlines hug, so they read as one unit: tighter than the gaps above and below (Jesse, 2026-11-02) */
  
  --mk-shell:#f1ede6;--mk-panel:#211e1b;
  --gutter:clamp(28px,4.8vw,92px);
  --home-gradient:radial-gradient(ellipse 86% 91% at 94% 88%,rgba(181,167,147,.24) 0%,rgba(181,167,147,.12) 38%,transparent 78%),radial-gradient(ellipse 110% 100% at 100% 100%,rgba(163,151,132,.12) 0%,transparent 80%),var(--paper);
}
body{background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
.portrait-caption,.reserve-arrow{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
::selection{background:#cfb28a;color:#24231f}
:focus-visible{outline:2px solid var(--amber);outline-offset:7px}
#hero{position:relative;isolation:isolate;height:100svh;overflow:hidden;
  background:radial-gradient(ellipse 55% 65% at 82% 58%,rgba(255,205,140,.14) 0%,transparent 60%),
  radial-gradient(ellipse 90% 90% at 100% 50%,rgba(255,255,255,.04) 0%,transparent 70%),var(--paper)}
/* Jesse-approved Combined: a broad brown lift behind the artwork, desktop only. */
@media(min-width:761px){
  .hero-warmth #hero{background:
    radial-gradient(ellipse 58% 64% at 77% 61%,rgba(177,140,105,.075) 0%,rgba(177,140,105,.035) 36%,transparent 72%),
    radial-gradient(ellipse 55% 65% at 82% 58%,rgba(255,205,140,.14) 0%,transparent 60%),
    radial-gradient(ellipse 90% 90% at 100% 50%,rgba(255,255,255,.04) 0%,transparent 70%),var(--paper)}
}
/* Broad lower-right studio light; the earlier review modes retain their brown lift. */
@media(min-width:761px){
  .hero-studio #hero{background:var(--home-gradient)}
}

.product-stage{position:absolute;inset:0;overflow:hidden;touch-action:pan-y pinch-zoom;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#backtype{position:absolute;inset:0;z-index:0;user-select:none}
.bt-stack{position:absolute;left:7vw;top:calc(17% + 20px);width:86vw;display:flex;flex-direction:column;
  align-items:center;gap:26px;opacity:0;transition:opacity 1.4s ease .15s}
.woke .bt-stack{opacity:1}
.always{font:400 11px/1 var(--f-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:12px}
.always::before{content:'';width:15px;height:2px;background:var(--amber);border-radius:2px}
#word{font:500 19.5vw/.8 var(--f-display);letter-spacing:-.03em;color:rgb(241 237 230 / 6%);white-space:nowrap;transition:opacity .7s ease}
#word.swap{opacity:0}
.wordbox{display:none;position:relative;width:100%;line-height:0}
#word2d{display:block;width:100%}
.cv #word{display:none}.cv .wordbox{display:block}
#c{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.nav{position:absolute;z-index:5;left:var(--gutter);right:var(--gutter);top:28px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.lockup{display:flex;align-items:flex-start;flex-shrink:0}
.lockup-svg{display:block;color:var(--ink)}
.lk01{font:500 10px/1 var(--f-mono);color:var(--amber);margin:4px 0 0 4px}
.nav-links{display:flex;align-items:center;gap:38px}
.nav-links a{font:400 11px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;gap:12px}
.nav-links a:hover{color:var(--amber)}
.nav-dot{width:5px;height:5px;border-radius:50%;background:var(--amber)}
.copy{position:absolute;z-index:3;left:var(--gutter);bottom:clamp(24px,4.8vh,64px);width:42%;max-width:620px;
  opacity:0;transition:opacity .9s ease .5s}
.woke .copy{opacity:1}
.eyebrow{display:flex;align-items:center;gap:12px;font:500 11px/1.6 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:20px}
.eyebrow>span{display:inline-block;height:3px;width:17px;background:var(--amber);border-radius:2px}
/* Hero: the label sits as close to the headline as its two lines sit to each other; the body copy and the price get
   clear air, so the headline reads as its own object (Jesse, 2026-11-02). */
#hero .eyebrow{margin-bottom:8px}
h1{font:700 clamp(42px,4.3vw,78px)/.96 var(--f-display);letter-spacing:-.055em;text-wrap:nowrap}
/* Fairwater is drawn with its own slant. Native shaping keeps the joins intact. */
:is(h1,.life-copy,.night-story h2) em{display:block;
  font:italic 340 1.08em/var(--accent-leading) var(--f-accent);font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1;letter-spacing:-.025em;
  letter-spacing:0;font-synthesis:none;font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  margin-left:0;margin-top:var(--accent-gap)}
/* The lead sits closer to the headline than to the button, so it reads as the headline's line (Jesse, 2026-11-03). */
.sub .nowrap{white-space:nowrap}   /* "glasses put away" stays on one line */
.sub{font-size:clamp(18px,1.4vw,20px);line-height:1.5;color:var(--muted);max-width:40ch;margin-top:14px;text-wrap:pretty}   /* hero lead: 18px, 20px on big screens (12% up, Jesse 2026-11-02); two lines */
.cta-zone{margin-top:36px;display:flex;flex-direction:column;align-items:flex-start;gap:44px;scroll-margin-top:28px}
.cta{--dot-w:6px;--dot-h:6px;--bar-right:30px;--bar-w:14px;
  position:relative;display:inline-flex;align-items:center;gap:30px;min-height:52px;
  border:1px solid transparent;border-radius:999px;padding:16px 24px 16px 40px;
  background:transparent;color:var(--ink);cursor:pointer;font:500 11px/1.5 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  transition:background-color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.cta:hover{background:rgba(241,237,230,.08)}
.cta:active{transform:scale(.98)}
.cta-dot{position:absolute;left:calc(var(--bar-right) - var(--dot-w));top:50%;width:var(--dot-w);height:var(--dot-h);
  margin-top:calc(var(--dot-h) / -2);border-radius:999px;background:var(--amber);
  transition:width .42s cubic-bezier(.16,.84,.24,1),height .42s cubic-bezier(.16,.84,.24,1),left .42s cubic-bezier(.16,.84,.24,1),margin-top .42s cubic-bezier(.16,.84,.24,1)}
.cta:hover .cta-dot,.cta:focus-visible .cta-dot{--dot-w:var(--bar-w);--dot-h:4px}
.cta-arrow{font:400 17px/1 var(--f-sans);letter-spacing:0}
.price-cue{font-size:12px;line-height:1.5;color:var(--muted);letter-spacing:.01em}
.price-cue strong{font-weight:500;color:var(--ink)}
.price-cue>span:not(.availability){padding:0 8px;color:rgba(241,237,230,.3)}
#boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--paper);z-index:40;transition:opacity .6s ease}
#boot.gone{opacity:0;pointer-events:none}
#boot .stack{display:flex;flex-direction:column;align-items:center;gap:20px}
#boot .cap{font:400 10px/1.6 var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
@media(min-width:761px) and (max-height:850px){
  h1{font-size:clamp(42px,4.05vw,62px)}
  .eyebrow{margin-bottom:18px}.sub{margin-top:18px}.cta-zone{margin-top:24px}
  /* Keep ALWAYS and every rotating word centred on the viewport. Short
     windows compact the copy below the backtype instead of shifting the type. */
  .bt-stack{top:calc(14% + 20px)}
  body .life-journey #hero>.copy{bottom:clamp(24px,3.2vh,40px);width:36%;max-width:500px}
  h1{font-size:clamp(36px,min(4.05vw,6vh),50px)}
  .sub{font-size:18px;max-width:40ch;line-height:1.45}   /* 12% up with the big-screen lead */
  .cta{min-height:44px;padding-top:12px;padding-bottom:12px}
  .eyebrow{margin-bottom:12px}.sub{margin-top:12px}.cta-zone{margin-top:22px;gap:30px}
}
@media(min-width:761px) and (max-width:1100px){
  .copy{width:44%}h1{font-size:clamp(38px,4.5vw,51px)}
  .sub{max-width:40ch}
}
@media(min-width:761px) and (max-width:1100px) and (max-height:850px){
  body .life-journey #hero>.copy{width:40%}
  h1{font-size:clamp(34px,min(4.5vw,6vh),46px)}
}
@media(min-width:761px) and (max-height:650px){
  /* Extremely short desktop windows also reduce the centred display type. */
  .bt-stack{top:10%;left:13vw;width:74vw;gap:16px}
  body .life-journey #hero>.copy{width:42%;max-width:620px;bottom:24px}
  h1{font-size:clamp(30px,min(3.4vw,5.6vh),36px)}
  .sub{font-size:14px;line-height:1.45;max-width:42ch}
  .eyebrow{font-size:10px}
  .price-cue{font-size:11px}
  .cta{min-height:44px;padding-top:12px;padding-bottom:12px}
  .eyebrow{margin-bottom:8px}.sub{margin-top:8px}.cta-zone{margin-top:12px;gap:12px}
}
@media(max-width:760px){
  :root{--gutter:20px;--home-gradient:radial-gradient(ellipse 90% 60% at 50% 100%,rgba(255,205,140,.12) 0%,transparent 65%),var(--paper)}
  #hero{height:100svh;overflow:hidden;
    background:var(--home-gradient)}
  .nav{top:16px;gap:16px}.nav-links{gap:22px}
  .nav-links a{font-size:10px;letter-spacing:.06em}.nav-links a>span:not(.nav-dot){display:none}
  .lockup-svg{width:70px;height:31px}.lk01{font-size:9px}
  .product-stage{inset:auto 0 0 0;height:calc(100% - 392px)}
  .bt-stack{top:8%;left:5%;width:90%;gap:18px}.always{font-size:10px}
  .copy{position:absolute;top:78px;bottom:auto;left:0;right:auto;max-width:80vw;width:auto;margin:0 var(--gutter)}
  .eyebrow{font-size:10px;margin-bottom:14px;letter-spacing:.12em}
  h1{font-size:clamp(34px,9vw,50px)}
  .sub{max-width:32ch;margin-top:10px;font-size:14px;line-height:1.55}
  .cta-zone{margin-top:18px;gap:14px}.cta{min-height:48px;padding:14px 20px 14px 34px;gap:22px}
  .always{align-self:flex-start;margin-left:8%}
}
@media(max-width:760px) and (max-height:740px){
  .copy{top:70px}
  .eyebrow{margin-bottom:10px}
  h1{font-size:30px}
  .sub{font-size:12px;margin-top:8px;max-width:35ch}
  .cta-zone{margin-top:12px;gap:12px}
  .cta{min-height:44px;padding-top:11px;padding-bottom:11px}
  .price-cue{font-size:10px}
  .product-stage{height:calc(100% - 322px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}