/* Arcwright landing page.
   Type: Schibsted Grotesk (a newsroom grotesk: plain, dense, reads like reporting),
   JetBrains Mono only where the content is data (reports, logs, timings).
   Colour: warm near-black from the dusk footage, bone text, one cyan used for actions only. */
:root{
  --bg:#0e0f0f;
  --bg-2:#141515;
  --ink:#ecebe5;
  --ink-2:#b9b8b1;
  --ink-3:#85847e;
  --rule:#2a2b2a;
  --paper:#e9e6dd;
  --paper-ink:#1b1b19;
  --cyan:#38e1f0;
  --sans:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:100}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* nav: solid bar, no blur */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:36px;height:60px;padding:0 32px;background:var(--bg);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.03em}
.nav nav{display:flex;gap:28px;margin-left:auto}
.nav nav a{text-decoration:none;font-size:15px;color:var(--ink-2)}
.nav nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.nav-cta{font-size:15px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--cyan);padding-bottom:1px}

/* hero: footage first, nothing on top of it */
.hero-film{position:relative;background:#000;aspect-ratio:21/9;max-height:78vh;overflow:hidden;width:100%}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
/* the recording includes the game HUD at its top and bottom edges; the wide crop leaves it out */
.pause{position:absolute;right:20px;bottom:20px;width:36px;height:36px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:grid;place-items:center;border-radius:2px}
.pause svg{width:12px;height:12px;fill:currentColor}
.caption{font-size:14px;color:var(--ink-3);padding-top:12px;padding-bottom:12px}
.hero-text{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;padding-top:56px;padding-bottom:88px;align-items:start}
h1{font-size:clamp(42px,5.4vw,78px);line-height:1.02;letter-spacing:-.035em;font-weight:700}
.hero-side>p:first-child{color:var(--ink-2);font-size:19px;margin-bottom:28px}
.fine{font-size:14px;color:var(--ink-3);margin-top:10px}

/* form */
.signup{display:flex;flex-wrap:wrap;gap:0;border:1px solid #3a3b39}
.signup input[type=email]{flex:1 1 200px;min-width:0;background:transparent;border:0;color:var(--ink);font:400 17px var(--sans);padding:15px 16px}
.signup input::placeholder{color:var(--ink-3)}
.signup input:focus{outline:none}
.signup:focus-within{border-color:var(--cyan)}
.signup button{border:0;background:var(--cyan);color:#061517;font:600 16px var(--sans);padding:0 22px;cursor:pointer}
.signup button:hover{background:#6fecf6}
.signup button:disabled{opacity:.6}
.form-msg{flex-basis:100%;font-size:14px;padding:0 16px;color:var(--ink-2)}
.form-msg:empty{display:none}
.form-msg:not(:empty){padding:10px 16px;border-top:1px solid #3a3b39}
.form-msg.err{color:#ff9a8a}

/* numbers: a plain ruled table of facts */
.numbers dl{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.numbers dl>div{padding:22px 20px 20px 0;display:flex;flex-direction:column}
.numbers dl>div+div{padding-left:20px;border-left:1px solid var(--rule)}
.numbers dt{font-size:14px;color:var(--ink-2);order:2;margin-top:6px}
.numbers dd{font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1.1;order:1}
.numbers .src{order:3;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:8px}

/* editor */
.editor-sec{padding:110px 0 40px}
.editor-head{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:end;margin-bottom:36px}
.editor-head p{color:var(--ink-2)}
.editor-shot img{width:100%;border:1px solid var(--rule)}

/* section rhythm varies on purpose */
h2{font-size:clamp(32px,3.6vw,52px);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.report-sec{padding:100px 0 96px}
.lead{max-width:720px;color:var(--ink-2);font-size:19px;margin-top:20px}
.report-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;margin-top:48px;align-items:start}
.clip video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
figcaption{font-size:14px;color:var(--ink-3);margin-top:10px}

/* the report looks like a printed sheet, because it is one */
.paper{background:var(--paper);color:var(--paper-ink);padding:24px 24px 20px;font-family:var(--mono);font-size:13.5px;line-height:1.5}
.paper-title{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:-.01em;margin-bottom:14px}
.paper-title span{display:block;font-family:var(--mono);font-weight:400;font-size:12px;color:#5f5e58;letter-spacing:0;margin-top:2px}
.paper table{width:100%;border-collapse:collapse}
.paper th,.paper td{text-align:left;padding:8px 0;border-top:1px solid #cfccc2;font-weight:400;vertical-align:top}
.paper td{text-align:right;font-weight:500}
.log{margin:16px 0 0;padding:14px 0 0;border-top:1px dashed #b9b6ab;font:inherit;font-size:12.5px;color:#3d3c38;white-space:pre;overflow-x:auto}
.aside{max-width:720px;margin-top:40px;color:var(--ink-2);border-left:2px solid var(--ink-3);padding-left:18px}

.games{padding:72px 0 120px;border-top:1px solid var(--rule)}
.game{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:end;margin-top:64px}
.game.flip{grid-template-columns:1fr 1.6fr}
.game.flip .game-media{order:2}
.game-media img,.game-media video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.game h3{font-size:30px;letter-spacing:-.02em;margin-bottom:12px}
.game-text p{color:var(--ink-2)}
.wip-tag{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0;color:var(--ink-3);vertical-align:middle;margin-left:8px;border:1px solid var(--rule);padding:3px 6px}
.game-text .facts{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:13px;color:var(--ink)}

.forge{background:var(--bg-2);padding:110px 0 120px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.forge-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:44px}
.forge-head p{color:var(--ink-2)}
.turn{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--rule)}
.turn figure,.fit-row figure{background:#ecece9}
.turn img,.fit-row img{width:100%;aspect-ratio:1;object-fit:contain}
.turn figcaption,.fit-row figcaption{margin:0;background:var(--bg-2);padding:8px 0;font-family:var(--mono);font-size:12px}
.fit-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2px;margin-top:2px;background:var(--rule)}
.fit-row .fit img{aspect-ratio:auto;height:100%;object-fit:contain}

.deck{padding:120px 0}
.deck-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.deck-grid h2{margin-bottom:18px}
.deck-grid p{color:var(--ink-2)}
.cmp{width:100%;border-collapse:collapse;margin:28px 0 16px;font-size:15px}
.cmp th,.cmp td{text-align:left;padding:10px 8px 10px 0;border-bottom:1px solid var(--rule);font-weight:400}
.cmp thead th{color:var(--ink-3);font-size:13px}
.cmp td{font-family:var(--mono);font-size:14px;color:var(--ink)}
.small{font-size:15px;color:var(--ink-3)}

.log-sec{padding:96px 0 110px;border-top:1px solid var(--rule)}
.log-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:56px}
.log-grid .small{margin-top:16px;max-width:340px}
.entries{list-style:none;padding:0}
.entries li{display:grid;grid-template-columns:90px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--rule)}
.entries li:last-child{border-bottom:1px solid var(--rule)}
.entries time{font-family:var(--mono);font-size:14px;color:var(--ink-3);padding-top:3px}
.entries p{color:var(--ink-2)}
.status{margin-top:72px}
.status h3{font-size:20px;margin-bottom:14px}
.status dl{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.status dt{font-weight:600;margin-bottom:6px}
.status dd{color:var(--ink-2);font-size:16px}

.join{padding:110px 0 120px;background:var(--paper);color:var(--paper-ink)}
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.join ul{padding-left:20px;margin-bottom:28px;font-size:18px}
.join li{padding:3px 0}
.join .signup{border-color:#9e9b90}
.join .signup input[type=email]{color:var(--paper-ink)}
.join .signup input::placeholder{color:#77756d}
.join .signup button{background:var(--paper-ink);color:var(--paper)}
.join .signup button:hover{background:#000}
.join .signup:focus-within{border-color:var(--paper-ink)}
.join .form-msg{color:#3b3a36;border-color:#9e9b90}

.foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding-top:40px;padding-bottom:56px}
.foot nav{display:flex;gap:20px}
.foot nav a{font-size:15px;color:var(--ink-2)}
.foot p{flex-basis:100%;font-size:13.5px;color:var(--ink-3)}
.foot p.tag{font-size:15px;color:var(--ink-2)}

@media (max-width:980px){
  .nav nav{display:none}
  .nav-cta{margin-left:auto}
  .hero-film{aspect-ratio:16/10}
  .editor-head,.hero-text,.report-grid,.game,.game.flip,.forge-head,.deck-grid,.log-grid,.join-grid{grid-template-columns:1fr;gap:28px}
  .game.flip .game-media{order:0}
  .numbers dl{grid-template-columns:1fr 1fr}
  .numbers dl>div:nth-child(3){padding-left:0;border-left:0}
  .numbers dl>div:nth-child(n+3){border-top:1px solid var(--rule)}
  .status dl{grid-template-columns:1fr}
  .fit-row{grid-template-columns:1fr 1fr}
  .fit-row .fit{grid-column:1/-1}
}
@media (max-width:600px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  .nav{padding:0 16px;gap:16px}
  .hero-film{aspect-ratio:1/1;max-height:70vh}
  .hero-video{transform:scale(1.25);transform-origin:50% 92%}
  .hero-text{padding-top:32px;padding-bottom:64px}
  .numbers dd{font-size:30px}
  .turn{grid-template-columns:1fr 1fr}
  .report-sec,.deck,.forge,.join{padding:72px 0}
  .games{padding:48px 0 72px}
  .game{margin-top:48px}
  .entries li{grid-template-columns:1fr;gap:4px}
  .signup button{flex:1 1 100%;padding:14px}
}
/* motion: two moments only, both off when the visitor asks for reduced motion */
.mark-a{fill:var(--ink);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.mark-bar{fill:var(--cyan)}
.js .mark-a{fill-opacity:0;stroke-dasharray:420;stroke-dashoffset:420;animation:mark-draw .7s cubic-bezier(.6,0,.2,1) .15s forwards,mark-fill .25s ease .8s forwards}
.js .mark-bar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:mark-click .18s cubic-bezier(.2,1.6,.4,1) 1s forwards}
@keyframes mark-draw{to{stroke-dashoffset:0}}
@keyframes mark-fill{to{fill-opacity:1}}
@keyframes mark-click{to{transform:scaleX(1)}}
.js [data-typed] span{visibility:hidden}
.js [data-typed] span.on{visibility:visible}
.js [data-typed] span.cur::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-2px;background:#3d3c38;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .js .mark-a,.js .mark-bar{animation:none;fill-opacity:1;stroke-dashoffset:0;transform:none}
  .js [data-typed] span{visibility:visible}
  .js [data-typed] span.cur::after{display:none}
}