/* Duke landing, dressed after the dotfiles landing: the project's own palette is the brand. Dotfiles wears Catppuccin; Duke wears
   its nine game colours (--l-* in tokens.css) as a strip under the nav, a frame round the page, the art on the band and the full stop
   after the headline. Tiny caps labels, small square buttons, film grain, and art cut from Duke's own runs (tools/dither_art.py): Bayer-dithered
   frames under scanlines, Stitch beside the Duolingo band and all nine games in the closer.
   Colour, type, space and radii come from tokens.css (brand/, copied in by deploy.sh). */
:root {
  --display: var(--font);
  --demo-bg: #fff; --demo-tile: #eef0f3; --demo-text: #1c1d22; --demo-text2: rgba(28, 29, 34, .55); --demo-tile2: rgba(28, 29, 34, .06);
  --scan: repeating-linear-gradient(to bottom, #000 0 1.5px, transparent 1.5px 3px);  /* scanlines for the art */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .28 0 0 0 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root { --demo-bg: #1c1c1e; --demo-tile: #2c2c2e; --demo-text: #f5f5f7; --demo-text2: rgba(245, 245, 247, .6); --demo-tile2: rgba(245, 245, 247, .08); }
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); font-size: 17px; line-height: 24px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)); }
.center { text-align: center; }
h1, h2, h3, .label { font-family: var(--display); }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(48px, 9vw, 120px); line-height: 1.02; font-weight: 700; letter-spacing: -.04em; }
h2 { font-size: clamp(40px, 6vw, 72px); line-height: 1.04; font-weight: 600; letter-spacing: -.022em; }
h3 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.label { font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); margin-bottom: var(--sp-4); }
.btn { height: var(--control); padding: 0 var(--sp-5); border-radius: 8px; display: inline-flex; align-items: center; font-weight: 600; font-size: 17px; text-decoration: none; transition: background var(--motion); }
.btn-solid { background: var(--btn); color: #fff; }
.btn-solid:hover { background: color-mix(in srgb, var(--btn) 82%, #fff); }
.btn-ghost { background: var(--surface); color: var(--text); }
.btn-ghost:hover { background: color-mix(in srgb, var(--surface) 90%, var(--text)); }
a:focus-visible, .btn:focus-visible, select:focus-visible { outline: 4px solid var(--ring); outline-offset: 0; }

.nav { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-5); height: var(--control); padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--strip); }
.nav-brand { grid-column: 2; display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: 17px; text-decoration: none; color: var(--text); }
.nav-brand img { width: 24px; height: 24px; border-radius: var(--r-icon); }
.nav-links { display: flex; gap: var(--sp-5); font-size: 13px; line-height: 16px; }
.nav-links a { text-decoration: none; color: var(--sub); }
.nav-links a:hover { color: var(--text); }
.nav-end { grid-column: 3; justify-self: end; }

.hero { padding: var(--sp-9) 0 var(--sp-8); }
.lead { max-width: 640px; margin: var(--sp-5) auto 0; font-size: 22px; line-height: 28px; color: var(--sub); }
.cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.center .cta { justify-content: center; }

/* The live demo sits straight on the band: no window, no device. */
.stage { position: relative; overflow: hidden; margin: var(--sp-8) clamp(0px, 3vw, 44px) 0; background: var(--grain), var(--band); padding: clamp(32px, 7vw, 96px) var(--sp-5); }
.stage-art { position: absolute; inset: 0; background: var(--strip); opacity: .75;
  -webkit-mask: var(--scan), url(art/games.png) center / cover no-repeat; -webkit-mask-composite: source-in;
  mask: var(--scan), url(art/games.png) center / cover no-repeat; mask-composite: intersect; }
/* the frame round the whole page, the Nous way */
body::after { content: ""; position: fixed; inset: 8px; border: 1px solid transparent; border-image: var(--strip) 1; opacity: .6; pointer-events: none; z-index: 30; }
.app-demo { position: relative; max-width: 320px; margin: 0 auto; background: var(--demo-bg); color: var(--demo-text); border-radius: var(--r-card); padding: var(--sp-5) var(--sp-4); text-align: center; }
.demo-hint { margin-top: var(--sp-3); font-size: 13px; line-height: 16px; color: var(--sub); text-align: center; }
.app-demo h4 { font-size: .95rem; font-weight: 700; margin-bottom: .3rem; }
.app-meta { font-size: .7rem; color: var(--demo-text2); margin-bottom: .8rem; }
/* The board keeps the app's own colours in both themes: a chessboard that inverts stops reading as one. */
.demo-board { --board-dark: #759657; --board-light: #ededd1; position: relative; width: 200px; aspect-ratio: 1; margin: 0 auto .8rem; border-radius: var(--r-group); overflow: hidden;
  background-image: linear-gradient(45deg, var(--board-dark) 25%, transparent 25%), linear-gradient(-45deg, var(--board-dark) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--board-dark) 75%), linear-gradient(-45deg, transparent 75%, var(--board-dark) 75%);
  background-size: 50px 50px; background-position: 0 0, 0 25px, 25px -25px, -25px 0; background-color: var(--board-light); }
.demo-piece { position: absolute; width: 12.5%; height: 12.5%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; transition: left .6s cubic-bezier(.4, 0, .2, 1), top .6s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.demo-piece.w { color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.demo-piece.b { color: #1c1d22; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
.demo-flash { position: absolute; width: 12.5%; height: 12.5%; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(.4); pointer-events: none; transition: opacity .25s, transform .25s; }
.demo-flash.on { opacity: .55; transform: scale(1.5); }
.app-label { font-size: 1.05rem; font-weight: 700; color: var(--accent); height: 1.4em; opacity: 0; transition: opacity .25s; }
.app-label.on { opacity: 1; }
.app-xp { font-size: 1.5rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; margin-top: .3rem; }
.app-stats { display: flex; justify-content: center; gap: 1.6rem; margin-top: .6rem; }
.app-stats div b { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.app-stats div span { font-size: .7rem; color: var(--demo-text2); }
.demo-math, .demo-lang { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; width: 200px; height: 200px; margin: 0 auto .8rem; border-radius: var(--r-group); background: var(--demo-tile); }
.demo-math .problem { font-size: 1.15rem; font-weight: 600; }
.demo-math .answer { font-size: 1.3rem; font-weight: 700; color: var(--accent); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; padding: .3rem .8rem; border-radius: 8px; }
.demo-math .answer.on { opacity: 1; transform: none; background: color-mix(in srgb, var(--accent) 15%, transparent); }
.demo-lang { padding: 0 .8rem; }
.demo-lang .prompt { font-size: .95rem; color: var(--demo-text2); text-align: center; }
.demo-lang .tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.demo-lang .tile { font-size: .85rem; padding: .35rem .65rem; border-radius: 6px; background: var(--demo-tile2); color: var(--demo-text2); transition: background .25s, color .25s, transform .25s; }
.demo-lang .tile.on { background: var(--accent); color: #fff; transform: scale(1.05); }
.demo-game { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); height: 100%; }
.demo-game-tile { width: 46%; aspect-ratio: 1; border-radius: var(--r-icon); background: var(--game); display: grid; place-items: center; animation: demo-pop .35s ease both; }
.demo-game-tile svg { width: 58%; height: 58%; }
.demo-game-move { font-size: 15px; line-height: 20px; color: var(--sub); text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.demo-game-move.on { opacity: 1; transform: none; }
@keyframes demo-pop { from { transform: scale(.8); opacity: 0; } }

/* Band: how it works, then the features as ruled cells */
.band { margin: 0 clamp(0px, 3vw, 44px); background: var(--grain), color-mix(in srgb, var(--g-duolingo) 58%, #0b0b0d); color: #fff; overflow: hidden; }
.band .label { color: rgba(255,255,255,.72); }
.band { --band-sub: rgba(255,255,255,.78); --band-line: rgba(255,255,255,.2); }
.band-head { position: relative; padding: var(--sp-9) var(--sp-5) var(--sp-8); text-align: center; }
.duke-art { position: absolute; right: 5%; bottom: 0; width: 26%; height: 96%; background: var(--band-sub); opacity: .9;
  -webkit-mask: var(--scan), url(art/stitch.png) center bottom / contain no-repeat; -webkit-mask-composite: source-in;
  mask: var(--scan), url(art/stitch.png) center bottom / contain no-repeat; mask-composite: intersect; }
@media (min-width: 1001px) {   /* the art gets its own column beside a left-set head */
  .band-head { text-align: left; padding-left: 6%; padding-right: 34%; }
  .band .band-head p:not(.label) { margin: var(--sp-5) 0 0; }
}
@media (max-width: 1000px) { .duke-art { display: none; } }
.band-head h2 { font-size: clamp(40px, 7vw, 88px); }
.band-head p:not(.label) { margin: var(--sp-5) auto 0; max-width: 600px; color: var(--band-sub); }
.cells { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--band-line); }
.cell { padding: var(--sp-6) var(--sp-6) var(--sp-7); border-right: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); }
.cell:nth-child(3n) { border-right: 0; }
.cell:nth-last-child(-n+3) { border-bottom: 0; }
.cell .label { margin-bottom: var(--sp-5); }
.cell p:last-child { margin-top: var(--sp-2); color: var(--band-sub); font-size: 15px; line-height: 20px; }

.sec { padding: var(--sp-9) 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.body { color: var(--sub); margin: var(--sp-5) auto 0; max-width: 600px; }
.rows { margin: var(--sp-7) auto 0; max-width: 680px; text-align: left; background: var(--surface); border-radius: var(--r-group); overflow: hidden; }
.row { position: relative; display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); font-size: 15px; line-height: 20px; }
.row + .row::before { content: ""; position: absolute; top: 0; left: var(--sp-4); right: 0; height: 1px; background: var(--line); }
.row b { font-weight: 600; }
.row span { color: var(--sub); }
.quote { margin-top: var(--sp-7); font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 32px; letter-spacing: -.02em; text-wrap: balance; }
.quote small { display: block; margin-top: var(--sp-3); font-family: var(--font); font-weight: 400; font-size: 13px; color: var(--sub); }

.foot { text-align: center; padding: var(--sp-8) var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); overflow: hidden; }
.foot-top { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-7); text-align: left; }
.foot-brand { display: grid; gap: var(--sp-2); align-content: start; }
.foot-brand img { border-radius: var(--r-icon); }
.foot-brand b { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 28px; }
.foot-brand p { color: var(--sub); font-size: 15px; }
.foot-cols { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.foot-cols div { display: grid; gap: var(--sp-2); align-content: start; }
.foot-cols a { color: var(--text); text-decoration: none; font-size: 15px; }
.foot-cols a:hover { color: var(--link); }
.foot select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 15px; color: var(--text); height: var(--control); padding: 0 40px 0 var(--sp-4); border: 0; border-radius: var(--r-pill); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center; }
.foot-cols .label { margin-bottom: var(--sp-2); }
.word-band { color: var(--accent); position: relative; width: 100vw; margin: var(--sp-6) 0 0 calc(50% - 50vw); height: clamp(120px, 16vw, 220px); }
.word-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.word-band.live .word-canvas { display: block; }
.legal a { color: inherit; }
.legal { margin-top: var(--sp-2); font-size: 13px; line-height: 16px; color: var(--sub); text-wrap: balance; }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .cells { grid-template-columns: 1fr 1fr; }
  .cell, .cell:nth-child(3n), .cell:nth-last-child(-n+3) { border-right: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); }
  .cell:nth-child(2n) { border-right: 0; }
  .cell:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 600px) {
  .nav-links { display: none; }
  .nav { grid-template-columns: 1fr; justify-items: center; }
  .nav-brand { grid-column: 1; }
  .wrap { padding: 0 var(--sp-4); }
  .hero { padding-top: var(--sp-8); }
  .cells { grid-template-columns: 1fr; }
  .cell, .cell:nth-child(2n), .cell:nth-child(3n), .cell:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--band-line); padding: var(--sp-5); }
  .cell:last-child { border-bottom: 0; }
  .row { grid-template-columns: 1fr; gap: var(--sp-1); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .demo-piece { transition: none; }
}

/* Privacy page: one reading column */
.doc { max-width: var(--measure); margin: 0 auto; padding: var(--sp-8) max(20px, env(safe-area-inset-left)) var(--sp-9); }
.doc h1 { font-size: 34px; line-height: 41px; letter-spacing: -.022em; margin-bottom: var(--sp-2); }
.doc h2 { font-size: 22px; line-height: 28px; letter-spacing: -.01em; margin: var(--sp-6) 0 var(--sp-2); }
.doc p { color: var(--sub); }
.doc p + p { margin-top: var(--sp-3); }

/* Games: one card per game, in that game's own colour (--g-* in tokens.css), a real frame from Duke's run on top and the
   game's glyph riding the seam, the same tile as the icon. The page around it stays ink; the games bring the colour. */
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-7); }
.game { position: relative; background: var(--game); color: #fff; border-radius: var(--r-card); overflow: hidden; text-align: left; padding: 0 var(--sp-5) var(--sp-5); transition: transform var(--motion); }
.game:hover { transform: translateY(-4px); }
.game-shot { display: block; width: calc(100% + 2 * var(--sp-5)); margin: 0 calc(-1 * var(--sp-5)); aspect-ratio: 3 / 2; height: auto; object-fit: cover; image-rendering: pixelated; background: #0b0b0d; }
.game-tile { width: 56px; height: 56px; border-radius: var(--r-icon); background: var(--game); display: grid; place-items: center; margin: -28px 0 var(--sp-3); position: relative; outline: 4px solid var(--game); box-shadow: inset 2px 2px 0 rgba(255,255,255,.25), inset -2px -2px 0 rgba(0,0,0,.2); }
.game-tile svg { width: 40px; height: 40px; }
.game h3 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; }
.game p { margin-top: var(--sp-1); font-size: 15px; line-height: 20px; color: rgba(255,255,255,.82); }
.game-live { margin: var(--sp-6) auto 0; max-width: 720px; text-align: center; }
.game-live img { width: 100%; height: auto; border-radius: var(--r-group); image-rendering: pixelated; display: block; }
.game-live figcaption { margin-top: var(--sp-3); font-size: 13px; line-height: 16px; color: var(--sub); }
@media (max-width: 900px) { .games { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .games { grid-template-columns: 1fr; gap: var(--sp-3); } .game:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .game { transition: none; } .game:hover { transform: none; } }

/* The palette at work: the headline's full stop walks the nine colours, each band cell wears one (the 3x3 of the icon). */
h1 .dot { color: var(--l-factorio); animation: dot-walk 18s steps(1) infinite; }
@keyframes dot-walk { 0% { color: var(--l-duolingo); } 11.1% { color: var(--l-factorio); } 22.2% { color: var(--l-gdt); } 33.3% { color: var(--l-fez); } 44.4% { color: var(--l-papers); } 55.5% { color: var(--l-oni); } 66.6% { color: var(--l-pokemon); } 77.7% { color: var(--l-mirage); } 88.8% { color: var(--l-pikmin); } }
.cell .label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-2); background: #fff; }
@media (prefers-reduced-motion: reduce) { h1 .dot { animation: none; } }

/* The closer: nine frames from Duke's own runs, dithered to one bit and cut by scanlines, each in its own game's colour. */
.closer { position: relative; overflow: hidden; isolation: isolate; margin: 0 clamp(0px, 3vw, 44px); background: var(--grain), #0b0b0d; color: #fff; padding: clamp(96px, 14vw, 200px) 0; }
.closer .stage-art { z-index: -1; opacity: .34; }

.closer .body { color: rgba(255,255,255,.78); }
.sec + .sec.closer { border-top: 0; }