/* Tribe.One · tribe.one · V2 (8 October 2026), on Release 0: draft A's layout and type, with the
   prototype's light (site-r0/c/c.js). The words sit on the left, the figure
   on the right; on a phone, the figure holds the upper half and the words
   rise beneath it. */

@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/EBGaramond-400.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/EBGaramond-400i.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/Jost-300.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Jost-500.woff2) format('woff2')}

:root{
  --ink:#070605;--cream:#efe6d2;--cream-hi:#f6eee0;--muted:rgba(239,230,210,.68);--dim:rgba(239,230,210,.42);
  --gold:#d8b56a;--gold-hi:#f0d49a;--human:#9fcfae;
  --serif:'EB Garamond',Georgia,serif;--sans:'Jost',system-ui,sans-serif;
  --pad:clamp(22px,5.5vw,72px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--cream);font:300 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:rgba(216,181,106,.35)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--gold);color:var(--ink);padding:8px 14px;border-radius:4px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#field{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;display:block} /* as tall as the screen without a phone's toolbar: it never stretches */
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 62% 48%,transparent 50%,rgba(0,0,0,.5) 100%)}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--ink) 0,rgba(7,6,5,.82) 28%,rgba(7,6,5,0) 52%)}

/* the figure's words */
#labels{position:fixed;inset:0;z-index:2;pointer-events:none}
.lab{position:absolute;transform:translate(-50%,0);text-align:center;white-space:nowrap;opacity:0}
.lab b{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.28em;color:rgba(239,230,210,.7)}
.lab.hot b{color:var(--gold-hi)}
.lab span{display:block;margin-top:7px;font:italic 400 16px/1 var(--serif);color:var(--muted)}
.lab.legend{font:500 10px/1 var(--sans);letter-spacing:.26em;color:rgba(239,230,210,.62)}
.lab.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 8px 1px 18px;vertical-align:middle}
.lab.legend i:first-child{margin-left:0}
.lab.legend .e{background:#7fdcff;box-shadow:0 0 10px #7fdcff}
.lab.legend .h{background:#ffcf8a;box-shadow:0 0 10px #ffcf8a}
.lab.side{transform:none;text-align:left}
.lab.side b{color:rgba(239,230,210,.6)}
.lab.side.hot b{color:var(--gold-hi)}
.lab.mid{transform:translate(-50%,-50%)}
.lab.mid b{font:400 clamp(28px,8vw,40px)/1 var(--serif);letter-spacing:.04em;color:var(--gold-hi);text-shadow:0 0 24px rgba(242,196,109,.6)}

/* the bar: the brand once the page moves, and the way to us */
.nav::before{content:'';position:absolute;inset:0 0 -36px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--ink) 30%,rgba(7,6,5,0))}
.nav{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:64px;padding:env(safe-area-inset-top,0) var(--pad) 0}
.nav .brand{opacity:0;transform:translateY(-6px);transition:opacity .6s,transform .6s}
body.moved .nav .brand{opacity:1;transform:none}
.nav .brand img{height:24px;width:auto;display:block}
.talk{font:500 11.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi);border:1px solid rgba(216,181,106,.45);border-radius:999px;padding:11px 18px;transition:background .3s,border-color .3s}
.talk:hover{background:rgba(216,181,106,.1);border-color:var(--gold)}

/* where you are */
.dots{position:fixed;right:calc(var(--pad) - 8px);top:50%;z-index:20;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.dots a{display:block;width:16px;height:16px;position:relative}
.dots a::after{content:'';position:absolute;left:5px;top:5px;width:6px;height:6px;border-radius:50%;background:rgba(239,230,210,.25);transition:background .4s,transform .4s}
.dots a.on::after{background:var(--gold-hi);transform:scale(1.35);box-shadow:0 0 10px var(--gold)}

/* the steps */
main{position:relative;z-index:3}
.step{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:96px var(--pad)}
.tx{width:min(560px,44vw)}
.rv{opacity:0;transform:translateY(16px);transition:opacity 1s var(--d,0s),transform 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.step.seen .rv{opacity:1;transform:none}

h1,h2{font-family:var(--serif);font-weight:400;color:var(--cream-hi);text-wrap:balance;letter-spacing:-.005em}
h1{font-size:clamp(46px,5.6vw,86px);line-height:1}
h1 .ai{white-space:nowrap}
h1 em{font-style:normal;color:var(--gold-hi)}
h2{font-size:clamp(34px,3.7vw,58px);line-height:1.06}
h2.long{font-size:clamp(28px,2.7vw,42px);line-height:1.14}
h2.state{font-size:clamp(28px,2.7vw,42px);line-height:1.2}
h2.state .g{white-space:normal}
.g{color:var(--gold-hi);text-shadow:0 0 28px rgba(242,196,109,.28)}
.dim{color:var(--dim)}
h2 .dim{display:block}
.sub{margin-top:26px;font:italic 400 clamp(21px,1.9vw,27px)/1.35 var(--serif);color:var(--cream)}
.kick{margin-bottom:22px;font:500 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.line{margin-top:24px;font:300 clamp(18px,1.45vw,21px)/1.55 var(--sans);color:var(--muted);max-width:30em}
.em{margin-top:24px;font:italic 400 clamp(22px,1.9vw,28px)/1.3 var(--serif);color:var(--gold-hi)}
.line + .em{margin-top:14px}
.we{list-style:none;margin-top:32px;border-top:1px solid rgba(216,181,106,.25)}
.we li{padding:15px 0 15px 26px;position:relative;border-bottom:1px solid rgba(239,230,210,.08);font:300 clamp(16.5px,1.3vw,19px)/1.45 var(--sans);color:var(--muted)}
.we li::before{content:'';position:absolute;left:2px;top:24px;width:6px;height:6px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 8px var(--gold)}
.three span{display:block}
.three span + span{margin-top:.28em}
.hero .tx{width:min(640px,48vw)}
.cue{position:absolute;left:50%;bottom:28px;width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.2;transform:scaleY(.6);transform-origin:top}50%{opacity:.9;transform:scaleY(1)}}
.hero{position:relative}

/* the last step: the mark at rest, above the words */
.keep{justify-content:center;align-items:flex-end;padding-bottom:16vh}
.keep .tx{width:auto;text-align:center}
.sign{font:400 clamp(24px,2.3vw,34px)/1.25 var(--serif);color:var(--cream-hi);letter-spacing:.005em}
.cta{display:inline-block;margin-top:30px;font:500 12.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink);background:var(--gold-hi);border-radius:999px;padding:17px 30px;box-shadow:0 0 30px rgba(216,181,106,.25);transition:transform .3s,box-shadow .3s}
.cta:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(216,181,106,.4)}

footer{position:relative;z-index:3;display:flex;justify-content:space-between;gap:16px;padding:28px var(--pad) calc(28px + env(safe-area-inset-bottom,0));border-top:1px solid rgba(239,230,210,.08);font:500 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);background:var(--ink)}
footer a:hover{color:var(--cream)}

/* a phone: the figure above, the words beneath */
@media (max-width:820px) and (orientation:portrait){
  .scrim{background:linear-gradient(180deg,rgba(7,6,5,0) 0,rgba(7,6,5,0) 46%,rgba(7,6,5,.9) 60%,var(--ink) 74%)}
  .dots{display:none}
  .step{align-items:flex-start;padding:54svh var(--pad) 8svh}
  .tx,.hero .tx{width:100%}
  h1{font-size:clamp(40px,11.4vw,58px)}
  h2{font-size:clamp(31px,8.6vw,44px)}
  h2.state{font-size:clamp(24px,6.6vw,32px)}
  .sub{margin-top:18px}
  .kick{margin-bottom:14px}
  .line,.em{margin-top:16px}
  .we{margin-top:20px}
  .we li{padding:11px 0 11px 22px}
  .we li::before{top:19px}
  .keep{align-items:flex-start;padding-bottom:8svh}
  .lab b{font-size:9.5px;letter-spacing:.22em}
  .lab span{font-size:14px;margin-top:5px}
  .lab.legend{font-size:9px}
  .talk{padding:10px 14px;font-size:10.5px}
  .cue{display:none}
  footer{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{transition:none;opacity:1;transform:none}
  .lab{transition:none}
  .cue{animation:none}
}
.line i{font-family:var(--serif);font-style:italic;font-size:1.08em;color:var(--gold-hi);white-space:nowrap}

/* three lines under every headline: two that tell, one to take away */
.body{margin-top:26px;max-width:31em}
.body p{font:300 clamp(17.5px,1.4vw,20.5px)/1.5 var(--sans);color:var(--muted)}
.body p + p{margin-top:6px}
.body .take{margin-top:14px;font:italic 400 clamp(21px,1.8vw,27px)/1.3 var(--serif);color:var(--gold-hi)}
@media (max-width:820px) and (orientation:portrait){
  h2{font-size:clamp(30px,8.2vw,40px)}
  h2.long{font-size:clamp(25px,6.6vw,31px)}
  h2.state{font-size:clamp(24px,6.4vw,30px)}
  .body{margin-top:16px}
  .body p{font-size:16.5px;line-height:1.45}
  .body p + p{margin-top:4px}
  .body .take{margin-top:10px;font-size:21px}
  .step{padding-top:50svh}
}

/* the phone: the figure holds the upper band; the words are pinned beneath it and
   cross-fade as you scroll, so no line ever crosses the light */
.prog,.hint{display:none}
@media (max-width:820px) and (orientation:portrait){
  html.pin{scroll-snap-type:y proximity}
  html.pin .step{scroll-snap-align:start;padding:0;min-height:100vh;min-height:100svh}
  html.pin .step .tx{position:fixed;left:0;right:0;top:var(--split,50svh);bottom:0;z-index:4;width:auto;padding:16px var(--pad) calc(22px + env(safe-area-inset-bottom,0px));opacity:0;pointer-events:none;will-change:opacity,transform}
  html.pin .step.cur .tx{pointer-events:auto}
  html.pin .scrim{background:linear-gradient(180deg,rgba(7,6,5,0) 0,rgba(7,6,5,0) calc(var(--split,50svh) - 64px),rgba(7,6,5,.94) calc(var(--split,50svh) - 4px),var(--ink) calc(var(--split,50svh) + 40px))}
  html.pin .keep .tx{text-align:center}
  html.pin h1{font-size:clamp(34px,min(11vw,6.4vh),56px)}
  html.pin h2{font-size:clamp(26px,min(7.8vw,4.5vh),40px)}
  html.pin h2.long,html.pin h2.state{font-size:clamp(21px,min(6vw,3.5vh),30px)}
  html.pin .kick{margin-bottom:10px;font-size:10.5px}
  html.pin .sub{margin-top:12px;font-size:clamp(17px,min(5vw,2.8vh),22px)}
  html.pin .body{margin-top:12px}
  html.pin .body p{font-size:clamp(14.5px,min(4vw,2.2vh),16.5px);line-height:1.42}
  html.pin .body .take{margin-top:8px;font-size:clamp(17px,min(5vw,2.75vh),21px)}
  html.pin .sign{font-size:clamp(20px,min(5.6vw,3.6vh),28px);text-wrap:balance}
  html.pin h2,html.pin .sub,html.pin .body .take{text-wrap:balance} /* no word left alone on a line */
  html.pin h2.state,html.pin .body p{text-wrap:pretty}
  /* the last screen: the mark, its line, and the footer beneath, all in one view */
  html.pin .step.keep{min-height:calc(100vh - 92px);min-height:calc(100svh - 92px - env(safe-area-inset-bottom,0px))}
  html.pin footer{z-index:5;height:calc(92px + env(safe-area-inset-bottom,0px));padding:0 var(--pad) env(safe-area-inset-bottom,0px);flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;font-size:10px;letter-spacing:.26em;border-top:0;background:transparent}
  html.pin footer a{padding:6px 2px}
  .prog{display:block;position:fixed;left:0;top:0;right:0;height:2px;z-index:30;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transform-origin:left;transform:scaleX(var(--p,0));box-shadow:0 0 8px rgba(242,196,109,.6)}
  .hint{display:block;position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:5;transform:translateX(-50%);font:500 10px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--dim);text-align:center;transition:opacity .8s;pointer-events:none}
  .hint i{display:block;width:1px;height:28px;margin:10px auto 0;background:linear-gradient(var(--gold),transparent);animation:drip 2.2s ease-in-out infinite}
  body.moved .hint{opacity:0}
}
@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}}
@media (prefers-reduced-motion:reduce){.hint i{animation:none}}
/* a phone on its side: the wide layout, in smaller type */
@media (orientation:landscape) and (max-height:500px){
  h1{font-size:clamp(30px,5.2vw,46px)}
  .hero .tx{width:min(640px,44vw)}
}
#labels.small .lab b{font-size:8.5px;letter-spacing:.16em}
#labels.small .lab span{font-size:12.5px;margin-top:4px}
#labels.small .lab.mid b{font-size:28px}