/* TIDE — the v3 landing's own layers (from site/hero-lab/lab.css, scoped so nothing leaks into v3).
   The canvases and the words are fixed to the viewport while the hero is on screen; the sections
   after the hero carry their own grounds and slide over them. */
.words{--fg:#0d0f14;--fg2:#454a55;--em:#2f6bff;--rule:rgba(13,15,20,.14);--col:calc((100vw - 2*var(--m))/12);
  position:fixed;inset:0;z-index:2;pointer-events:none;color:var(--fg);font-family:G,system-ui,sans-serif}
.words .hit{pointer-events:auto}
#f{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:1;opacity:0;transition:opacity .5s linear;pointer-events:none}
html.drawn #f{opacity:1}
#inv{display:block;--fg:#f2f3f5;--fg2:rgba(242,243,245,.78);--em:#ffffff;--rule:rgba(242,243,245,.3)}
#fx{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:3;pointer-events:none}
#f2{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:3;pointer-events:none}
html.past .words,html.past #f,html.past #f2,html.past #fx{visibility:hidden}

.words .mono{font:500 clamp(9px,.78vw,11px)/1 GM,monospace;letter-spacing:.14em;text-transform:uppercase}
.words button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.words .rail{position:absolute;left:var(--m);right:var(--m);top:max(var(--m),5.4vh);display:flex;justify-content:space-between;align-items:flex-end;
  color:var(--fg)}   /* no rule, no picker: the link sits in the corner, its top inset equal to the side margin */
.words .rail .cta{display:inline-flex;align-items:center;gap:8px;font:600 clamp(9px,.76vw,11px)/1 GM;letter-spacing:.14em;text-transform:uppercase}
.words .rail .cta s{display:inline-block;width:22px;height:1px;background:currentColor}
.words .rail .l{color:var(--fg2)}
.words .lc{position:absolute;left:var(--m);top:19vh;width:calc(var(--col)*7)}
.words .hl{margin:0}
.words .hl .l1{display:block;font:800 min(6.2vw,11vh)/.94 G;letter-spacing:-.052em;font-stretch:118%}
.words .hl .l2{display:block;font:300 min(6.6vw,11.7vh)/1 G;letter-spacing:-.042em}
.words .hl em{font-style:normal;color:var(--em);font-weight:400}
.words .hl .cur{display:inline-block;width:.42em;height:.085em;background:var(--em);vertical-align:.08em;margin-left:.05em;margin-right:-.47em;animation:tblink 1.05s steps(1) infinite}   /* takes no width: the line doesn't move when it appears */
.words .hl .gh{visibility:hidden}   /* the not-yet-typed rest: holds the line's final width */
@keyframes tblink{50%{opacity:0}}
.words .note{margin-top:2.1vh;font:400 clamp(13px,1.12vw,17px)/1.45 G;letter-spacing:-.015em;color:var(--fg2)}
.words .tag{position:absolute;left:var(--m);color:var(--fg2);margin:0}
.words .cue{position:absolute;right:var(--m);bottom:4.2vh;display:inline-flex;align-items:center;gap:11px;color:var(--fg2)}
.words .cue i{display:inline-block;width:26px;height:1px;background:currentColor}
.words .nmw{position:absolute;left:var(--m);bottom:0;overflow:hidden;line-height:1}
.words .nm{display:inline-block;white-space:nowrap;font:900 200px/1 TH;letter-spacing:.018em;color:var(--fg)}
.words .nm i{display:inline-block;font-style:normal;transform:translate3d(0,105%,0) rotate(6deg)}
html.live .words .nm i{transform:none;transition:transform 1.3s cubic-bezier(.19,1,.22,1) var(--nd,0ms)}
.words [data-type]{visibility:hidden} html.typed .words [data-type]{visibility:visible}
.words .fade{opacity:0;transition:opacity .9s linear .2s} html.live .words .fade{opacity:1}

/* the hero section itself is transparent: the fixed layers above are the picture */
#s-hero{height:130vh;padding:0;background:transparent!important}   /* About arrives while the tide is still rising: no standalone blue screen */
@media (max-aspect-ratio:4/5){
  .words .lc{width:calc(100vw - 2*var(--m));top:14vh}
  .words .hl .l1,.words .hl .l2{font-size:min(10.4vw,6.4vh)}
}
@media (prefers-reduced-motion:reduce){ .words .nm i{transform:none!important} }
html.headdone .words .hl .cur{display:none}   /* typed in: the caret goes (it takes no width, so nothing moves) */
html.past .words .cur{animation:none}   /* the caret stops blinking once the landing is gone */

/* ── layout options for review (9 Oct) — the words only; the field, the water and the name's font stay ── */
.words .idx{display:none}
/* A · POSTER: the name is the page (full width, cut by the bottom edge); the headline is one line sitting on the
   name's top edge, the promise answers it on the right; one quiet line at the top: the motto and the link */
html[data-lay=a] .words .lc{top:auto;bottom:calc(var(--nh,200px)*.9 + 2.2vh);right:var(--m);width:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:4vw}
html[data-lay=a] .words .hl .l1,html[data-lay=a] .words .hl .l2{display:inline;font-size:min(3.25vw,6.4vh)}
html[data-lay=a] .words .hl .l1::after{content:' '}
html[data-lay=a] .words .note{margin:0 0 .35em;text-align:right;max-width:22ch}
html[data-lay=a] .words .tag{top:max(var(--m),5.4vh);bottom:auto!important}
html[data-lay=a] .words .cue{display:none}
/* B · INDEX: the statement on the left, the site's contents as a numbered index on the right (it works as the menu) */
html[data-lay=b] .words .idx{display:flex;position:absolute;right:var(--m);top:19.6vh;flex-direction:column;align-items:flex-start;gap:.2vh;width:calc(var(--col)*3)}
html[data-lay=b] .words .idx button{display:flex;align-items:baseline;gap:1.1vw;padding:.55vh 0;font:400 clamp(16px,1.5vw,24px)/1.1 G;letter-spacing:-.025em;color:var(--fg);transition:color .25s,transform .35s cubic-bezier(.19,1,.22,1)}
html[data-lay=b] .words .idx button span{font-size:clamp(9px,.68vw,11px);letter-spacing:.12em;color:var(--fg2)}
html[data-lay=b] .words .idx button:hover{color:var(--em);transform:translateX(.6vw)}
html[data-lay=b] .words .cue{display:none}
/* C · STATEMENT: the headline is the poster, edge to edge; the name signs it at the bottom */
html[data-lay=c] .words .lc{top:13vh;width:calc(100vw - 2*var(--m))}
html[data-lay=c] .words .hl .l1{font-size:min(9.6vw,17vh)}
html[data-lay=c] .words .hl .l2{font-size:min(10.2vw,18vh)}
html[data-lay=c] .words .note{margin-top:3.2vh;text-align:right;font-size:clamp(14px,1.3vw,20px)}
@media (max-aspect-ratio:4/5){
  html[data-lay=a] .words .lc{flex-direction:column;align-items:flex-start;gap:1.4vh}
  html[data-lay=a] .words .hl .l1,html[data-lay=a] .words .hl .l2{display:block;font-size:min(8.6vw,5.4vh)}
  html[data-lay=a] .words .hl .l1::after{content:none}
  html[data-lay=a] .words .note{text-align:left;margin:0}
  html[data-lay=b] .words .idx{top:auto;bottom:calc(var(--nh,200px)*.9 + 6vh);left:var(--m);width:auto}
  html[data-lay=c] .words .hl .l1,html[data-lay=c] .words .hl .l2{font-size:min(12.6vw,8vh)}
  html[data-lay=c] .words .note{text-align:left}
}

/* ── centred, calibrated (9 Oct): sizes from a perfect-fourth scale on a 16 px base (16 · 21 · 28 · 38 · 50 · 67 · 90);
   hero headlines on calm sites sit at 48–72 px, so nothing here goes past 67 px except the name's own lettering ── */
/* D · CENTRED: one quiet column in the middle of the field — the motto, the name (a signature, ~1/3 of the width),
   the headline as one line under it (38 px), the promise (16 px); the scroll cue centred at the foot */
html[data-lay=d] .words .tag{top:calc(39vh - var(--nh,140px)*.5 - 4.2vh);bottom:auto!important;left:0;right:0;text-align:center}
html[data-lay=d] .words .nmw{top:calc(39vh - var(--nh,140px)*.5);bottom:auto!important;left:50%;transform:translateX(-50%)}
html[data-lay=d] .words .lc{top:calc(39vh + var(--nh,140px)*.5 + 2.6vh);left:var(--m);right:var(--m);width:auto;text-align:center}
html[data-lay=d] .words .hl .l1,html[data-lay=d] .words .hl .l2{display:inline;font-size:clamp(22px,2.65vw,38px);line-height:1.1}
html[data-lay=d] .words .hl .l1::after{content:' '}
html[data-lay=d] .words .note{margin-top:1.4vh;font-size:clamp(13px,1.1vw,16px)}
html[data-lay=d] .words .cue{display:none}   /* centred, it landed on the densest glyphs and could not be read */
/* E · CENTRED STATEMENT: the headline is the centre (two lines, 67 px), the motto above it, the promise under it;
   the name is a small wordmark at the top centre */
html[data-lay=e] .words .tag{top:calc(30vh - 4.4vh);bottom:auto!important;left:0;right:0;text-align:center}
html[data-lay=e] .words .lc{top:30vh;left:var(--m);right:var(--m);width:auto;text-align:center}
html[data-lay=e] .words .hl .l1,html[data-lay=e] .words .hl .l2{font-size:clamp(36px,4.65vw,67px);line-height:1.02}
html[data-lay=e] .words .note{margin-top:2.4vh;font-size:clamp(14px,1.18vw,18px)}
html[data-lay=e] .words .nmw{top:calc(max(var(--m),5.4vh) - var(--nh,48px)*.22);bottom:auto!important;left:50%;transform:translateX(-50%)}   /* a wordmark, top centre */
html[data-lay=e] .words .cue{display:none}
@media (max-aspect-ratio:4/5){
  html[data-lay=d] .words .hl .l1,html[data-lay=d] .words .hl .l2{display:block;font-size:min(7vw,4.6vh)}
  html[data-lay=d] .words .hl .l1::after{content:none}
  html[data-lay=d] .words .tag{top:calc(40vh - var(--nh,140px)*.5 - 3.6vh)}
  html[data-lay=d] .words .nmw{top:calc(40vh - var(--nh,140px)*.5)}
  html[data-lay=d] .words .lc{top:calc(40vh + var(--nh,140px)*.5 + 2.4vh)}
  html[data-lay=e] .words .nmw{left:var(--m);transform:none}   /* phone: the wordmark moves to the left corner, clear of the link */
  html[data-lay=e] .words .lc{top:28vh}
  html[data-lay=e] .words .tag{top:calc(28vh - 3.8vh)}
  html[data-lay=e] .words .hl .l1,html[data-lay=e] .words .hl .l2{font-size:min(10vw,6.2vh)}
}