/* Anwar Debes. Shared styles. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "STIX Two Text";
  src: url("../fonts/stix-two-text-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "STIX Two Math";
  src: url("../fonts/stix-two-math.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --mist: #E3E7E5;
  --paper: #F2F4F3;
  --ink: #101614;
  --graphite: #4E5956;
  --glass: #186A55;
  --signal: #B1321B;
  --rule: rgba(16, 22, 20, 0.14);
  --rule-strong: rgba(16, 22, 20, 0.28);
  --focus: #186A55;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --math: "STIX Two Text", "STIX Two Math", "Cambria Math", "Times New Roman", serif;
  --pad: clamp(20px, 4.2vw, 60px);
  --max: 1360px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mist: #121816;
    --paper: #1A2220;
    --ink: #E4EAE7;
    --graphite: #9AA7A3;
    --glass: #74C9AE;
    --signal: #F08A70;
    --rule: rgba(228, 234, 231, 0.14);
    --rule-strong: rgba(228, 234, 231, 0.3);
    --focus: #74C9AE;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --mist: #121816;
  --paper: #1A2220;
  --ink: #E4EAE7;
  --graphite: #9AA7A3;
  --glass: #74C9AE;
  --signal: #F08A70;
  --rule: rgba(228, 234, 231, 0.14);
  --rule-strong: rgba(228, 234, 231, 0.3);
  --focus: #74C9AE;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--rule-strong); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.022em; line-height: 1.08; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--mist); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }

/* WebGL stage sits behind the page and never takes pointer events itself */
#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}
main, .site-header, .site-footer { position: relative; z-index: 1; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--mist) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.scrolled { border-bottom-color: var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.brand { font-weight: 650; font-size: 18px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); font-size: 16px; }
.nav a { text-decoration: none; color: var(--graphite); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.theme-toggle {
  font: inherit; font-size: 16px; color: var(--graphite); background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); }

/* Hero */
.hero { position: relative; min-height: calc(100svh - 64px); display: grid; align-items: center; padding: 28px 0 56px; overflow-x: clip; }
.hero .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.hero-text { grid-column: 1 / span 6; align-self: end; padding-bottom: clamp(8px, 4vh, 48px); }
.hero h1 {
  font-size: clamp(52px, 7.6vw, 124px);
  font-weight: 680;
  letter-spacing: -0.045em;
  line-height: 0.94;
  margin-bottom: 0.32em;
  max-width: 9.5ch;
}
.hero .intro { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; max-width: 34em; color: var(--ink); }
.hero .intro + .intro { color: var(--graphite); }
.hero-board { grid-column: 7 / span 6; position: relative; }

.board-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  touch-action: pan-y;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}
.board-slot canvas.pins { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; max-width: none; pointer-events: none; }
.board-slot .fallback { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; max-width: none; object-fit: contain; opacity: 1; transition: opacity 0.6s ease; pointer-events: none; }
.board-slot.live .fallback { opacity: 0; }
.board-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-top: 14px; font-size: 15px; color: var(--graphite); }
.board-caption p { margin: 0; max-width: 34em; }
.link-button {
  font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--rule-strong);
}
.link-button:hover { text-decoration-color: currentColor; }

/* Sections */
section.block { position: relative; padding: clamp(72px, 12vh, 140px) 0; }
.block h2 { font-size: clamp(34px, 4.2vw, 60px); font-weight: 660; letter-spacing: -0.035em; max-width: 18ch; margin-bottom: 0.5em; }
.block .lead { font-size: clamp(18px, 1.4vw, 21px); max-width: 38em; color: var(--graphite); }

/* Demo */
.demo { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.demo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; margin-top: 40px; }
.demo-input { grid-column: 1 / span 6; }
.demo-output { grid-column: 7 / span 6; }
.demo label { display: block; font-size: 15px; color: var(--graphite); margin-bottom: 8px; }
.demo textarea {
  width: 100%; min-height: 150px; resize: vertical;
  font: inherit; font-size: 20px; line-height: 1.45; color: var(--ink);
  background: var(--mist); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 16px 18px;
}
.demo textarea::placeholder { color: color-mix(in srgb, var(--graphite) 70%, transparent); }
.tries { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; padding: 0; list-style: none; }
.tries button {
  font: inherit; font-size: 15px; line-height: 1.3; color: var(--ink); text-align: left;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.tries button:hover { border-color: var(--ink); }
.verdict { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.verdict strong { font-size: clamp(40px, 4.6vw, 64px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.verdict[data-state="unsafe"] strong { color: var(--signal); }
.verdict[data-state="safe"] strong { color: var(--glass); }
.verdict[data-state="empty"] strong { color: var(--graphite); }
.verdict span { color: var(--graphite); font-size: 16px; }
.tally { position: relative; height: 10px; border-radius: 6px; background: var(--rule); margin: 18px 0 8px; overflow: hidden; }
.tally i { position: absolute; top: 0; bottom: 0; transition: width 0.25s ease, left 0.25s ease; }
.tally .for-unsafe { left: 50%; background: var(--signal); }
.tally .for-safe { right: 50%; background: var(--glass); }
.tally::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink); opacity: 0.5; }
.tally-legend { display: flex; justify-content: space-between; font-size: 14px; color: var(--graphite); font-variant-numeric: tabular-nums; }
.votes { margin-top: 26px; }
.votes-head { font-size: 15px; color: var(--graphite); margin: 18px 0 6px; }
.votes-head:first-child { margin-top: 0; }
.clauses { list-style: none; margin: 0; padding: 0; }
.clauses li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 1.45; }
.clauses li:first-child { border-top: 1px solid var(--rule); }
.clauses .n { flex: none; font-size: 14px; color: var(--graphite); font-variant-numeric: tabular-nums; }
.lit { font-weight: 600; }
.op { font-family: var(--math); font-style: normal; padding: 0 0.3em; color: var(--graphite); }
.neg { color: var(--graphite); }
.neg .lit { font-weight: 500; }
.absent { color: var(--graphite); font-size: 15px; }
.demo-note { font-size: 15px; color: var(--graphite); margin-top: 26px; max-width: 46em; }

/* Work */
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 48px; }
.work-list { grid-column: 1 / span 7; grid-row: 1; list-style: none; margin: 0; padding: 0; }
.work-aside { grid-column: 9 / span 4; grid-row: 1; }
.work-sticky { position: sticky; top: 96px; }
.work-group { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); margin: 0 0 14px; }
.work-items { list-style: none; margin: 0; padding: 0; }
.work-items + .work-group { margin-top: 72px; }
.work-item { padding: 30px 0 32px; border-top: 1px solid var(--rule); outline: none; scroll-margin-top: 12px; }
.work-item:last-child { border-bottom: 1px solid var(--rule); }
.work-item h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 650; letter-spacing: -0.025em; margin-bottom: 10px; }
.work-item h3 a { text-decoration: none; }
.work-item h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.work-item p { margin: 0 0 10px; max-width: 40em; }
.work-item .result { color: var(--graphite); }
.work-item .links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 16px; margin-top: 14px; }
.work-item.active h3 a { color: var(--glass); }
.emblem-caption { font-size: 15px; color: var(--graphite); margin-top: 14px; min-height: 3.2em; }

/* Pixie film */
.film { border-top: 1px solid var(--rule); }
.film-frame { position: relative; margin-top: 40px; border-radius: 16px; overflow: hidden; background: #12110e; border: 1px solid var(--rule); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22); aspect-ratio: 16 / 9; }
.film-frame video { width: 100%; height: 100%; object-fit: cover; }
.film-sound {
  position: absolute; left: 18px; top: 18px; font: inherit; font-size: 15px; font-weight: 600; color: #12110e;
  background: #e8a085; border: 0; border-radius: 999px; padding: 9px 18px 9px 38px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.film-sound::before { content: ""; position: absolute; left: 16px; top: 50%; margin-top: -7px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #12110e; }
.film-sound:hover { background: #f0b499; }
.film-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; margin-top: 32px; align-items: center; }
.playground { grid-column: 1 / span 8; display: flex; gap: 22px; align-items: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 14px 20px 14px 14px; }
.playground canvas { width: 132px; height: 132px; flex: none; image-rendering: pixelated; border-radius: 10px; background: radial-gradient(circle at 50% 45%, rgba(217, 119, 87, 0.16), transparent 70%); }
.pg-label { margin: 0 0 10px; font-size: 16px; color: var(--graphite); }
.pg-label strong { color: var(--ink); font-weight: 650; }
.pg-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-buttons button {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--mist); border: 1px solid var(--rule-strong);
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
}
.pg-buttons button:hover { border-color: var(--ink); }
.pg-buttons button[aria-pressed="true"] { background: var(--ink); color: var(--mist); border-color: var(--ink); }
.film-links { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; font-size: 17px; }
.film-links .cta { font-weight: 650; text-decoration: none; background: var(--ink); color: var(--mist); border-radius: 999px; padding: 10px 20px; }
.film-links .cta:hover { background: var(--glass); }
.film-links .install { font-size: 13px; color: var(--graphite); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 10px; max-width: 100%; overflow-wrap: anywhere; }

/* The short film, and its transcript */
.reel { border-top: 1px solid var(--rule); }
.reel-frame { background: #050807; }
.reel-transcript { margin-top: 34px; max-width: 54em; font-size: 19px; line-height: 1.62; color: var(--graphite); }
.reel-transcript p { margin: 6px 0 16px; }
.reel-chap { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--glass); cursor: pointer; }
.reel-chap:hover { text-decoration: underline; text-underline-offset: 4px; }
.reel-time { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500; letter-spacing: 0; color: var(--graphite); }
.reel-transcript .w { cursor: pointer; border-radius: 4px; transition: color 0.18s ease, background-color 0.18s ease; }
.reel-transcript .w:hover { background: var(--paper); }
.reel-transcript .w.em { font-family: var(--math); font-style: italic; font-size: 1.06em; }
.reel-transcript .w.said { color: var(--ink); }
.reel-transcript .w.now { color: var(--glass); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 700px) { .reel-transcript { font-size: 17px; } }

/* Live research films */
.lab { border-top: 1px solid var(--rule); }
.lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 28px; margin-top: 44px; }
.lab-film { border-radius: 14px; overflow: hidden; background: #0b1014; border: 1px solid var(--rule); aspect-ratio: 16 / 9; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16); }
.lab-film video { width: 100%; height: 100%; display: block; object-fit: cover; }
.lab-item h3 { font-size: 26px; letter-spacing: -0.02em; margin: 20px 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.lab-item h3 a { color: inherit; text-decoration: none; }
.lab-item h3 a:hover { color: var(--glass); }
.lab-tag { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--graphite); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 2px 10px; }
.lab-item p { color: var(--graphite); max-width: 34em; margin: 0; }
.lab-item .links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 16px; font-size: 16px; }
.lab-item .links .cta { font-weight: 650; text-decoration: none; background: var(--ink); color: var(--mist); border-radius: 999px; padding: 9px 18px; }
.lab-item .links .cta:hover { background: var(--glass); }
@media (max-width: 980px) { .lab-grid { grid-template-columns: 1fr; gap: 44px; } }

/* Explore */
.explore-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; margin-top: 44px; }
.explore-item { grid-column: span 6; }
.explore-item a.shot { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: var(--paper); aspect-ratio: 16 / 10; }
.explore-item a.shot img { width: 100%; height: 100%; object-fit: cover; }
.explore-item h3 { font-size: 26px; letter-spacing: -0.02em; margin: 20px 0 8px; }
.explore-item p { color: var(--graphite); max-width: 32em; }

/* Papers */
.papers { list-style: none; margin: 40px 0 0; padding: 0; columns: 2 420px; column-gap: 48px; }
.papers li { break-inside: avoid; padding: 16px 0 18px; border-top: 1px solid var(--rule); }
.papers .title { font-weight: 600; text-decoration: none; display: block; font-size: 18px; line-height: 1.4; }
.papers a.title:hover { text-decoration: underline; }
.papers .src { font-size: 15px; color: var(--graphite); }

/* About */
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 36px; }
.about-text { grid-column: 1 / span 7; font-size: 20px; line-height: 1.6; }
.about-text p { max-width: 36em; }
.facts { grid-column: 9 / span 4; margin: 0; font-size: 16px; }
.facts dt { color: var(--graphite); font-size: 14px; margin-top: 18px; }
.facts dt:first-child { margin-top: 6px; }
.facts dd { margin: 2px 0 0; }

/* Contact */
.contact .big-links { display: flex; flex-wrap: wrap; gap: 14px 40px; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; margin-top: 28px; }

/* Footer */
.site-footer { padding: 36px 0 48px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--graphite); background: var(--mist); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.site-footer p { margin: 0; }

.math { font-family: var(--math); font-style: italic; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Responsive */
@media (max-width: 980px) {
  .hero { min-height: auto; padding-top: 12px; }
  .hero-text { grid-column: 1 / -1; order: 2; padding-bottom: 0; margin-top: 28px; }
  .hero-board { grid-column: 1 / -1; order: 1; max-width: 560px; justify-self: center; width: 100%; }
  .hero h1 { max-width: 12ch; }
  .demo-input, .demo-output { grid-column: 1 / -1; }
  .work-grid { display: block; }
  .work-aside { position: sticky; top: 64px; z-index: 5; background: var(--mist); margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
  .work-sticky { position: static; padding: 10px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
  .work-sticky .board-slot { width: 150px; }
  .work-item { scroll-margin-top: 160px; }
  .emblem-caption { margin: 0; min-height: 0; }
  .explore-item { grid-column: 1 / -1; }
  .playground, .film-links { grid-column: 1 / -1; }
  .about-text, .facts { grid-column: 1 / -1; }
  .facts { margin-top: 28px; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .nav { gap: 12px; font-size: 15px; }
  .nav .opt { display: none; }
  .site-header .wrap { gap: 12px; }
  .demo textarea { font-size: 18px; }
  .work-sticky { grid-template-columns: 112px 1fr; }
  .work-sticky .board-slot { width: 112px; }
  .work-item { scroll-margin-top: 120px; }
  .playground { flex-direction: column; align-items: flex-start; }
  .film-frame { border-radius: 12px; margin-top: 28px; }
  .film-sound { left: 10px; top: 10px; font-size: 13px; padding: 7px 14px 7px 32px; }
  .film-sound::before { left: 13px; }
}
@media (max-width: 420px) {
  .nav .opt-xs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}