/* 10zero round 2 shared base (2026-09-29). Every colour is a --tz-* token from /assets/css/tokens.css.
   Type is Option D: Oswald 400 caps for h1, the closing band and labels; Source Sans 3 600 for every other heading.
   A direction's own stylesheet loads after this and may override anything; it may not add a colour or a font. */
:root{
  --nav-h:64px;
  --gut:clamp(16px,5vw,80px);
  --max:1320px;
  --hair:color-mix(in srgb,var(--tz-charcoal) 16%,transparent);
  --hair-d:color-mix(in srgb,var(--tz-paper) 18%,transparent);
  --ease:cubic-bezier(.2,.7,.2,1);
  --body:18px;
}
@media (max-width:760px){:root{--body:17px}}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tz-paper);color:var(--tz-charcoal);font-family:'Source Sans 3',system-ui,sans-serif;font-size:var(--body);line-height:1.5;font-weight:400}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit}

/* Option D */
h1,.band-line,.label,.btn,.nav a,.eyebrow{font-family:'Oswald',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0}
h1{font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1.02;text-wrap:balance}
h2,h3{font-family:'Source Sans 3',sans-serif;font-weight:600;text-transform:none}
h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.1;text-wrap:balance;max-width:26ch}
h3{font-size:clamp(1.35rem,2.4vw,2.25rem);line-height:1.15}
.label,.eyebrow{font-size:13px;letter-spacing:.08em;color:var(--tz-oxblood)}
[data-ground="charcoal"] .label,[data-ground="charcoal"] .eyebrow{color:var(--tz-amber)}
.lede{font-size:clamp(1.1rem,1.6vw,1.4rem);max-width:44ch}
.small{font-size:15px}
[data-ground="charcoal"]{background:var(--tz-charcoal);color:var(--tz-paper)}
[data-ground="charcoal"] p{color:var(--tz-stone)}
[data-ground="charcoal"] h2,[data-ground="charcoal"] h3{color:var(--tz-paper)}
[data-ground="paper"]{background:var(--tz-paper);color:var(--tz-charcoal)}
[data-ground="paper"] h2{color:var(--tz-oxblood)}
[data-ground="stone"]{background:var(--tz-stone);color:var(--tz-charcoal)}

.skip{position:absolute;left:-9999px;top:8px;background:var(--tz-amber);color:var(--tz-charcoal);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--tz-amber);outline-offset:3px}
.wrap{position:relative;width:100%;max-width:var(--max);margin:0 auto}
.section{padding:clamp(80px,12vh,140px) var(--gut)}

/* nav: paper on paper sections, charcoal on charcoal, follows the section under the bar */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);display:flex;align-items:center;gap:24px;padding:0 var(--gut);z-index:40;background:var(--tz-paper);color:var(--tz-charcoal);border-bottom:1px solid var(--hair);transition:background .25s linear,color .25s linear,border-color .25s linear}
html[data-nav-ground="charcoal"] .nav{background:var(--tz-charcoal);color:var(--tz-paper);border-bottom-color:var(--hair-d)}
.nav-home{display:block;flex:none}
#nav-mark{display:block;width:92px;height:40px}
/* the engine's reduced-motion path drops a static compact mark into the nav at 100% width; cap it to the bar */
#nav-mark .tz-lockup{width:auto!important;height:40px}
#nav-mark svg{height:40px!important;width:auto!important}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav-links a:not(.btn){text-decoration:none;font-size:14px;letter-spacing:.06em}
.nav-links a:not(.btn):hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.nav .btn{padding:9px 18px;font-size:14px}
@media (max-width:760px){.nav-links a:not(.btn){display:none}}

/* the one button: amber, charcoal text, 28 degree wipe to oxblood (paper on charcoal grounds) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;isolation:isolate;padding:14px 28px;background:var(--tz-amber);color:var(--tz-charcoal);border:0;text-decoration:none;font-size:17px;letter-spacing:.06em;cursor:pointer;transition:color .3s var(--ease)}
.btn::after{content:"";position:absolute;inset:-60% -40%;background:var(--tz-oxblood);transform:translateX(-135%) skewX(-28deg);transition:transform .42s var(--ease);z-index:-1}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(0) skewX(-28deg)}
.btn:hover,.btn:focus-visible{color:var(--tz-paper)}
.btn:active{transform:translateY(1px)}
[data-ground="charcoal"] .btn::after,html[data-nav-ground="charcoal"] .nav .btn::after{background:var(--tz-paper)}
[data-ground="charcoal"] .btn:hover,[data-ground="charcoal"] .btn:focus-visible,html[data-nav-ground="charcoal"] .nav .btn:hover{color:var(--tz-charcoal)}
.quiet{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}

/* the travelling mark (engine host) */
.tz-lockup{color:var(--tz-oxblood);z-index:50;transition:color .25s linear}
html[data-nav-ground="charcoal"] .tz-lockup{color:var(--tz-paper)}
.hero .mark-fallback{width:100%;height:auto}
html.js .hero .mark-fallback{display:none}
html.js.rm .hero .mark-fallback{display:none}

/* hero placeholder box for the mark: the direction's css sets the size; the lockup must own the first viewport */
#hero-mark{width:min(100%,calc((100svh - var(--nav-h) - var(--hero-reserve,260px)) * 1.6418));aspect-ratio:265.9748/162}

/* reveal grammar: fade up 10 px once (Old Tom). Hidden only when JS is on and motion allowed. */
html.js:not(.rm) [data-reveal],html.js:not(.rm) [data-hero]{opacity:0;visibility:hidden;transform:translateY(10px)}

/* opening layer: full screen, above everything, removed by base.js when the direction's opening resolves */
.opening{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--tz-charcoal);color:var(--tz-paper)}
html:not(.js) .opening,html.rm .opening,html.tz-opened .opening{display:none}
body.tz-opening{overflow:hidden}

/* image frame: shows the generated scene when /assets/img/<shot>.webp exists, the shot id when it doesn't */
.ph{position:relative;overflow:hidden;background:var(--tz-stone);aspect-ratio:var(--r,16/9);width:100%}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph::before{content:attr(data-shot);position:absolute;left:14px;top:12px;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.08em;color:var(--tz-charcoal);opacity:.55;z-index:1}
.ph::after{content:"";position:absolute;top:-10%;left:50%;width:2px;height:120%;background:var(--tz-charcoal);opacity:.12;transform:rotate(28deg)}
.ph.has-img::before,.ph.has-img::after{display:none}

/* closing band and footer (Oswald caps line, the Reevo block) */
.band{padding:clamp(80px,14vh,160px) var(--gut)}
.band-line{font-size:clamp(2rem,5vw,4.4rem);line-height:1.04;max-width:18ch;margin-bottom:28px}
.footer{padding:40px var(--gut);border-top:1px solid var(--hair);display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:15px}
.footer .foot-mark{width:44px;height:auto}
.footer span{opacity:.75}

/* utilities */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
@media (max-width:760px){.two,.three{grid-template-columns:1fr;gap:28px}}
.hairline{border-top:1px solid var(--hair)}
[data-ground="charcoal"] .hairline{border-top-color:var(--hair-d)}
.held{opacity:.6}
.founder-call{border:1px dashed var(--tz-oxblood);padding:2px 6px;font-size:.85em}