/* The field — ZenMode OS
   Albeit tokens, dark surface. The colour arc is the OS gradient itself:
   ember at full hook, amber through the cut, brand green once unhooked. */

@font-face{font-family:"Departure Mono";src:url("../assets/fonts/DepartureMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/ClashDisplay-Medium.otf") format("opentype");font-weight:500;font-display:swap}

:root{
  --void:#0C0F09;
  --deep:#12160F;
  --line:#242A20;
  --line-soft:#1A1F16;

  --bone:#F5F5F0;
  --slate:#9DA298;
  --slate-dim:#7D8279;

  --ember:#FF6600;
  --ember-soft:#FF9A4D;
  --amber:#FFC800;
  --zen:#5BDF62;
  --zen-deep:#0F7A18;

  --display:"Clash Display",Iowan Old Style,Georgia,serif;
  --body:"Geist",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Departure Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* the canvas reserves no layout space and carries nothing readable */
#field{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:0;
  transition:opacity 900ms ease;
  pointer-events:none;
}
#field.on{opacity:1}

/* grain: animated at 12fps, because a still grain reads as dirt */
.grain{
  position:fixed;inset:-40px;z-index:1;pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  17%{transform:translate(-9px,4px)}
  34%{transform:translate(6px,-8px)}
  51%{transform:translate(-4px,9px)}
  68%{transform:translate(8px,5px)}
  85%{transform:translate(-7px,-5px)}
  100%{transform:translate(0,0)}
}

main{position:relative;z-index:2}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
.band{min-height:100vh;display:flex;align-items:center;padding-block:96px}
.col{max-width:62ch}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--zen);
  margin:0 0 20px;
  font-variant-numeric:tabular-nums;
}
.eyebrow .dim{color:var(--slate-dim)}

h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(40px,7.4vw,92px);
  line-height:1.02;letter-spacing:-.04em;
  margin:0 0 22px;text-wrap:balance;
}
h1 .g{color:var(--zen-deep)}
h2{
  font-family:var(--display);font-weight:500;
  font-size:clamp(28px,4.4vw,52px);
  line-height:1.06;letter-spacing:-.032em;
  margin:0 0 18px;text-wrap:balance;
}
h3{
  font-family:var(--display);font-weight:500;
  font-size:22px;line-height:1.14;letter-spacing:-.02em;margin:0 0 10px;
}
p{margin:0 0 16px;color:var(--slate);max-width:62ch}
p.lead{font-size:20px;color:var(--bone)}
strong{color:var(--bone);font-weight:500}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;
  font-family:var(--body);font-size:15px;font-weight:500;
  padding:13px 24px;border-radius:999px;border:0;
  background:var(--zen);color:var(--void);
  text-decoration:none;cursor:pointer;
  transition:background 180ms ease,transform 180ms cubic-bezier(.22,1,.36,1);
}
.btn:hover{background:var(--bone)}
.btn:active{transform:scale(.96)}
.btn-ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{background:transparent;color:var(--zen);box-shadow:inset 0 0 0 1px var(--zen)}
:focus-visible{outline:2px solid var(--zen);outline-offset:2px;border-radius:3px}

/* the interruptions, in their own words */
.frags{display:grid;gap:10px;margin-top:28px;max-width:44ch}
.frag{
  font-size:15px;color:var(--slate);
  padding:12px 16px;
  background:var(--deep);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  border-left:2px solid var(--ember);
}
.frag span{font-family:var(--mono);font-size:11px;color:var(--slate-dim);letter-spacing:.06em;display:block;margin-top:3px}

/* exactly one card style in the whole page */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.card{
  background:var(--deep);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  padding:26px 24px;
}
.card .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--zen);margin-bottom:14px}
.card p{font-size:15px;margin:0}

.rule{height:1px;background:var(--line-soft);border:0;margin:0}

.readout{
  position:fixed;left:24px;bottom:22px;z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  color:var(--slate-dim);text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.readout b{color:var(--zen);font-weight:400}

footer{position:relative;z-index:2;padding:72px 0 88px;border-top:1px solid var(--line-soft)}
footer .slogan{font-family:var(--display);font-weight:500;font-size:32px;letter-spacing:-.03em;margin-bottom:12px}
footer .meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--slate-dim);line-height:1.9}
footer a{color:var(--slate)}
footer a:hover{color:var(--zen)}
.foot-row{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin-top:22px}

.toggle{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--line);
  color:var(--slate);padding:9px 14px;border-radius:999px;cursor:pointer;
  transition:color 180ms ease,box-shadow 180ms ease;
}
.toggle:hover{color:var(--zen);box-shadow:inset 0 0 0 1px var(--zen)}
.toggle[aria-pressed="true"]{color:var(--zen);box-shadow:inset 0 0 0 1px var(--zen)}

.skip{position:absolute;left:-9999px;top:0;z-index:40;background:var(--zen);color:var(--void);padding:12px 18px}
.skip:focus{left:0}

@media (max-width:860px){
  .wrap{padding-inline:20px}
  .band{min-height:auto;padding-block:64px}
  .cards{grid-template-columns:1fr}
  .readout{display:none}
  footer{padding:52px 0 64px}
}

@media (prefers-reduced-motion: reduce){
  .grain{animation:none}
  #field{transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}