/* oklitz.net — bento layout (2026-10). Used by every page of the site,
   including the app pages walld/, blackout/ and wordpile/. */

/* Schibsted Grotesk (text) and Martian Mono (data, tags) are self-hosted (no Google Fonts request). Latin subsets, SIL OFL, see fonts/OFL-*.txt */
@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: "Martian Mono"; src: url("fonts/martian-mono.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-style: normal; font-display: swap; }

:root {
  --bg: #EEF0F3;
  --tile: #FFFFFF;
  --ink: #0D1015;
  --muted: #5E6673;
  --line: #E1E4E9;
  --accent: #0D1015;
  --ok: #16A05A;
  --err: #D23B3B;
  --cell: #E7E9ED;
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 26px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08090C; --tile: #121419; --ink: #F1F3F6; --muted: #959DAA; --line: #1F232A;
    --accent: #F1F3F6; --ok: #3DD68C; --err: #FF7A7A; --cell: #1B1F26; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #08090C; --tile: #121419; --ink: #F1F3F6; --muted: #959DAA; --line: #1F232A;
  --accent: #F1F3F6; --ok: #3DD68C; --err: #FF7A7A; --cell: #1B1F26; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; }
.wrap { max-width: 1240px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); } }
.stat-label, .toc-label { font-size: 13px; color: var(--muted); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 20; padding: 10px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; }
.skip:focus { top: 10px; }

/* header: who I am · what I made (real app icons) · where to go · how to reach me.
   Not sticky, no glass: the page is short and the header is content, not chrome. */
.top { padding-top: env(safe-area-inset-top, 0px); }
.top-in { display: flex; align-items: center; gap: 28px; min-height: 80px; }
.who { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.dock { margin-left: auto; display: flex; gap: 6px; }
.dock a { position: relative; display: block; border-radius: 8px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.dock img { width: 30px; height: 30px; border-radius: 8px; display: block; box-shadow: 0 0 0 1px var(--line); }
.dock a:hover { transform: translateY(-3px); }
.dock span { position: absolute; z-index: 5; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -3px); padding: 3px 8px; border-radius: 6px; background: var(--ink); color: var(--bg); font: 500 11px/1.5 var(--font-mono); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.dock a:hover span, .dock a:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
.links { display: flex; gap: 22px; font-size: 14px; color: var(--muted); }
.links a:hover, .links a[aria-current="page"] { color: var(--ink); }
.reach { display: grid; justify-items: end; gap: 1px; padding-left: 24px; border-left: 1px solid var(--line); line-height: 1.3; }
.reach small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.reach small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.reach span { font: 500 14px var(--font-mono); background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.2,.7,.2,1); }
.reach:hover span { background-position: 0 100%; background-size: 100% 1px; }
@media (max-width: 1040px) { .top-in { gap: 20px; } .reach { padding-left: 20px; } .links { gap: 16px; } }
@media (max-width: 860px) {
  .top-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who reach" "dock links"; gap: 14px 12px; min-height: 0; padding-block: 16px 12px; }
  .who { grid-area: who; } .reach { grid-area: reach; border: 0; padding: 0; }
  .dock { grid-area: dock; margin: 0; } .links { grid-area: links; align-self: center; }
}
@media (max-width: 420px) { .who { font-size: 16px; } .reach span { font-size: 13px; } .reach small { font-size: 11px; } .links { gap: 14px; font-size: 13.5px; } .dock { gap: 5px; } .dock img { width: 28px; height: 28px; } }

/* tiles */
.tile {
  position: relative; overflow: hidden; isolation: isolate; min-width: 0;
  background: var(--tile); border-radius: var(--r); border: 1px solid var(--line);
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
a.tile:hover, .tile.hov:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(13,16,21,.08); }
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--tint, var(--accent)) 16%, transparent), transparent 62%);
}
.tile:hover::before { opacity: 1; }
.tile h2, .tile h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.tile p { margin: 0; color: var(--muted); max-width: 44ch; }
.row { display: flex; align-items: center; gap: 12px; }
.row img { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font: 500 11.5px var(--font-mono); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tag.live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.go { position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--tile); font-size: 14px; transition: transform .3s, background .3s, color .3s; }
a.tile:hover .go, a.go:hover { transform: rotate(-45deg); background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--tile); color: var(--ink); font: 500 14px var(--font-sans); cursor: pointer; transition: transform .2s; }
.btn:hover { transform: translateY(-1px); }
.btn.dark { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn:disabled { opacity: .55; cursor: progress; transform: none; }

/* ───────── home grid ───────── */
.grid {
  display: grid; gap: 12px; padding-block: 8px 40px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "intro intro intro intro intro intro intro word word word word word"
    "intro intro intro intro intro intro intro word word word word word"
    "mimic mimic mimic mimic kegel kegel kegel kegel kegel kegel kegel kegel"
    "mimic mimic mimic mimic walld walld walld walld blk blk blk blk"
    "crew crew crew crew crew crew crew crew mail mail mail mail"
    "act act act act act act act act act act act act";
}
@media (max-width: 1040px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas:
    "intro intro intro intro intro intro"
    "word word word mimic mimic mimic"
    "kegel kegel kegel kegel kegel kegel"
    "walld walld walld blk blk blk"
    "crew crew crew crew mail mail"
    "act act act act act act"; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "word" "mimic" "kegel" "walld" "blk" "crew" "act" "mail"; }
}

/* intro */
.intro { grid-area: intro; padding: clamp(26px, 4vw, 44px); justify-content: space-between; gap: 28px; min-height: 420px; }
/* the old site's joke, kept: a claim with a footnote */
.intro .copy-block { display: grid; gap: 14px; }
.intro h1 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: .95; font-size: clamp(46px, 7vw, 92px); text-wrap: balance; animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.intro h1 .ast { font-weight: 400; font-size: .6em; vertical-align: .55em; margin-left: .04em; letter-spacing: 0; }
.intro .footnote { margin: 0 0 12px; display: flex; gap: .3em; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: -.01em; color: var(--muted); animation: rise .9s .1s cubic-bezier(.2,.7,.2,1) both; }
.intro .footnote span { color: var(--ink); }
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
.intro .lede { font-size: clamp(16px, 1.5vw, 18px); max-width: 48ch; }
.intro .lede b { color: var(--ink); font-weight: 500; }

/* app feature tiles */
.word { grid-area: word; --tint: #fff; background: #2D44E0; border-color: transparent; color: #fff; padding-bottom: 0; min-height: 420px; }
.mimic { grid-area: mimic; --tint: #fff; background: #0E6B65; border-color: transparent; color: #fff; padding-bottom: 0; }
.word p, .mimic p { color: rgba(255,255,255,.88); }
.word .tag, .mimic .tag { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.32); }
.word .tag.live, .mimic .tag.live { color: #fff; border-color: rgba(255,255,255,.75); }
.word .go, .mimic .go { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.shot { margin-top: auto; display: flex; justify-content: center; padding-top: 14px; }
.shot img { width: min(74%, 270px); height: auto; border-radius: 22px 22px 0 0; display: block; box-shadow: 0 -10px 40px rgba(0,0,0,.18); transition: transform .5s cubic-bezier(.2,.7,.2,1); transform: translateY(6px); }
.word:hover .shot img, .mimic:hover .shot img { transform: translateY(-6px); }

/* small app tiles */
.walld { grid-area: walld; --tint: #2E8B7A; }
.blk { grid-area: blk; --tint: #F2B705; }
/* Kegelmanager: brand gradient "Signatur Deep" (#047857 → #075985, from the app's DESIGN.md), keeps white text at AA */
.kegel {
  grid-area: kegel; --tint: #fff; color: #fff; border-color: transparent;
  background: radial-gradient(380px circle at 80% 50%, rgba(56,189,248,.28), transparent 70%), linear-gradient(135deg, #047857 0%, #075985 62%);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 32px; padding: clamp(24px, 3vw, 34px);
}
.kegel-main { display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.kegel h2 { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.035em; line-height: 1; }
.kegel p { color: rgba(255,255,255,.88); }
.kegel .tag { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.32); }
.kegel .tag.live { color: #fff; border-color: rgba(255,255,255,.75); }
.kegel .go { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.kegel .viz { padding-top: 18px; }
.kegel-mark { position: relative; margin-right: clamp(8px, 3vw, 40px); }
.kegel-mark::before { content: ""; position: absolute; inset: 14% 4% -4%; border-radius: 50%; background: rgba(2,30,40,.35); filter: blur(28px); z-index: -1; }
.kegel-mark img { display: block; width: clamp(170px, 18vw, 236px); height: auto; transform: rotate(-4deg); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.kegel:hover .kegel-mark img { transform: rotate(0) translateY(-6px) scale(1.03); }
.kegel-mark img.cheer { animation: cheer .7s cubic-bezier(.3,.6,.3,1.4); }
@keyframes cheer { 0% { transform: rotate(-4deg); } 35% { transform: rotate(5deg) translateY(-14px) scale(1.08); } 70% { transform: rotate(-2deg) translateY(-4px); } 100% { transform: rotate(0) translateY(-6px) scale(1.03); } }
.viz { margin-top: auto; padding-top: 8px; }
.lights { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.lights i { aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, #F5B800 calc(var(--l, 0) * 100%), var(--cell)); transition: background 1.5s ease-out; }
.lights i.on { transition: background .04s; }
.path { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.path i { aspect-ratio: 1; border-radius: 4px; background: var(--cell); }
.path i.p { background: color-mix(in srgb, #2E8B7A var(--k, 60%), var(--cell)); }
.path i.w { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.pins { display: grid; grid-template-columns: repeat(5, 18px); grid-auto-rows: 18px; gap: 2px 8px; }
.pins i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.16); border: 2px solid #fff; transition: transform .45s, opacity .45s; }
.pins i.down { transform: translate(4px, 6px) rotate(75deg) scale(.7); opacity: .2; }
.kegel-foot { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.kegel-ctl { display: grid; gap: 6px; justify-items: end; }
.throw { height: 34px; padding: 0 16px; border-radius: 999px; border: 0; background: #F5A623; color: #1A2320; font: 600 13px var(--font-sans); cursor: pointer; transition: transform .2s; }
.throw:hover { transform: translateY(-1px); }
.throw:focus-visible { outline-color: #fff; }
.throw-out { font: 500 12px var(--font-mono); color: rgba(255,255,255,.82); text-align: right; min-height: 1.4em; }

/* stats */
/* numbers live in the activity tile, above the heatmap they summarise */
.act-stats { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; padding-bottom: 6px; }
.act-total { display: grid; gap: 4px; }
.act-total span:last-child { color: var(--muted); font-size: 14px; }
.big { font-size: clamp(40px, 4.4vw, 56px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.act-kv { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.act-kv div { display: grid; gap: 2px; }
.act-kv dt { color: var(--muted); font-size: 13px; }
.act-kv dd { margin: 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* crewfloor */
.crew { grid-area: crew; --tint: #F0C24E; min-height: clamp(300px, 30vw, 400px); padding: 0; border-color: transparent; background: #121836; color: #fff; justify-content: flex-end; }
.crew .art {
  position: absolute; inset: 0; z-index: -2; image-rendering: pixelated; transition: transform .8s cubic-bezier(.2,.7,.2,1);
  background: url("img/crewfloor.webp") center 30% / cover no-repeat;
  background-image: -webkit-image-set(url("img/crewfloor.webp") 1x, url("img/crewfloor@2x.webp") 2x);
  background-image: image-set(url("img/crewfloor.webp") 1x, url("img/crewfloor@2x.webp") 2x);
}
.crew:hover .art { transform: scale(1.04); }
/* text sits over the pixel house: the scrim stays dark up to the middle so copy, tags and button read */
.crew::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,13,30,.96) 0%, rgba(10,13,30,.82) 45%, rgba(10,13,30,0) 85%); }
.crew .body { padding: 26px; display: grid; gap: 8px; }
.crew p { color: rgba(255,255,255,.8); }
.crew .tag { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.3); }
.crew .go { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }

/* contact tile */
.mail { grid-area: mail; background: var(--ink); color: var(--bg); border-color: var(--ink); justify-content: space-between; gap: 22px; }
.mail h2, .mail h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.035em; line-height: 1.02; }
.mail h3 em, .mail h2 em { font-style: normal; color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
.mail p { color: color-mix(in srgb, var(--bg) 75%, var(--ink)); }
.mail .addr-block { display: grid; gap: 10px; }
.mail code { font: 500 17px var(--font-sans); user-select: all; word-break: break-all; }
.mail .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.copy { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--bg) 30%, transparent); background: transparent; color: var(--bg); font: 500 13px var(--font-sans); cursor: pointer; width: max-content; }
.copy:hover { background: color-mix(in srgb, var(--bg) 10%, transparent); }


/* activity */
.act { grid-area: act; gap: 14px; }
.act-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; }
.legend { display: flex; align-items: center; gap: 4px; font: 11px var(--font-mono); color: var(--muted); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.heat-scroll { overflow-x: auto; margin-top: auto; scrollbar-width: thin; }
.months, .heat { display: grid; grid-auto-flow: column; grid-auto-columns: 10px; gap: 2px; width: max-content; }
.months { font: 10.5px var(--font-mono); color: var(--muted); height: 15px; }
.months span { white-space: nowrap; }
.heat { grid-template-rows: repeat(7, 10px); }
.heat i, .legend i { background: var(--cell); border-radius: 2.5px; }
.heat i[data-l="1"], .legend i[data-l="1"] { background: color-mix(in srgb, var(--accent) 28%, var(--cell)); }
.heat i[data-l="2"], .legend i[data-l="2"] { background: color-mix(in srgb, var(--accent) 52%, var(--cell)); }
.heat i[data-l="3"], .legend i[data-l="3"] { background: color-mix(in srgb, var(--accent) 76%, var(--cell)); }
.heat i[data-l="4"], .legend i[data-l="4"] { background: var(--accent); }
.heat i.future { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.heat i.out { visibility: hidden; }
/* full-width tile from tablet up: the year fills the width instead of scrolling */
@media (min-width: 760px) {
  .heat-scroll { overflow: visible; }
  .months, .heat { width: 100%; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
  .heat { grid-template-rows: repeat(7, auto); }
  .heat i { aspect-ratio: 1; border-radius: 3px; }
}

/* ───────── sub pages (contact, impressum, privacy) ───────── */
.sub { display: grid; gap: 12px; padding-block: 8px 40px; }
.head { padding: clamp(26px, 4vw, 44px); gap: 18px; }
.head h1 { margin: 0; font-weight: 600; letter-spacing: -.045em; line-height: .98; font-size: clamp(38px, 5.4vw, 68px); text-wrap: balance; }
.head h1 em { display: block; font-style: normal; color: var(--muted); }
.head .lede { font-size: clamp(16px, 1.5vw, 18px); max-width: 60ch; }
.head .meta { font: 500 12px var(--font-mono); color: var(--muted); }

/* contact */
.services { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .services { grid-template-columns: minmax(0, 1fr); } }
.services .tile { gap: 6px; }
.services h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.contact-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form-tile { padding: clamp(22px, 3vw, 32px); gap: 18px; }
.form-tile h2, .sub .mail h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.sub .mail { grid-area: auto; gap: 14px; }
.contact-form { display: grid; gap: 14px; }
.form-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.form-group { display: grid; gap: 6px; min-width: 0; }
.form-label { font-size: 13.5px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
.form-label small { font: 500 11px var(--font-mono); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.form-input { width: 100%; min-width: 0; font: 400 16px/1.4 var(--font-sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; transition: border-color .2s, box-shadow .2s; }
.form-input::placeholder { color: var(--muted); }
.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.form-select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.form-textarea { resize: vertical; min-height: 140px; }
.form-submit { width: max-content; }
.form-feedback { border-radius: 16px; padding: 16px 18px; border: 1px solid var(--line); }
.form-feedback p { margin: 0; max-width: none; }
.form-feedback .feedback-title { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.form-success { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--tile)); }
.form-error { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); background: color-mix(in srgb, var(--err) 8%, var(--tile)); }
.form-feedback a { color: var(--ink); border-bottom: 1px solid currentColor; }

/* legal */
.legal { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
@media (max-width: 900px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal .toc { display: none; } }
.legal-content { padding: clamp(22px, 4vw, 44px); gap: 0; }
.legal-content h2 { margin: 34px 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h2 .sec { font: 500 12px var(--font-mono); color: var(--muted); }
.legal-content p { margin: 0 0 12px; max-width: 54ch; color: color-mix(in srgb, var(--ink) 82%, var(--muted)); overflow-wrap: anywhere; }
.legal-content a { color: var(--ink); border-bottom: 1px solid var(--line); }
.legal-content a:hover { border-color: var(--ink); }
.toc { position: sticky; top: 74px; padding: 20px; gap: 10px; }
.toc ol, .toc-mobile ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a, .toc-mobile a { display: flex; gap: 10px; padding: 6px 10px; border-radius: 10px; color: var(--muted); font-size: 14px; }
.toc a:hover, .toc-mobile a:hover { color: var(--ink); background: var(--bg); }
.toc a.active { color: var(--ink); background: var(--bg); }
.toc .n, .toc-mobile .n { font: 500 12px/1.9 var(--font-mono); min-width: 2.6em; }
.toc-mobile { display: none; padding: 14px 18px; }
@media (max-width: 900px) { .toc-mobile { display: block; } }
.toc-mobile summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--muted); }
.toc-mobile ol { margin-top: 10px; }

/* ───────── app pages (walld/, blackout/, wordpile/, mimic/) ─────────
   Each app brings its own colour as --app (+ --app-ink for text on it). The hero is that colour,
   like the app's tile on the home page, so the click from tile to page feels like the same object. */
.app { display: grid; gap: 12px; padding-block: 8px 40px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.app > * { grid-column: span 12; }
.app .mail { grid-area: auto; justify-content: flex-start; align-self: start; }
.app-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.app-tabs a { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 500; }
.app-tabs a:hover { color: var(--ink); }
.app-tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.app-tabs .back { margin-left: auto; border-color: transparent; }

.app-hero { background: var(--app); color: var(--app-ink); border-color: transparent; padding: clamp(26px, 4vw, 44px); gap: 22px; justify-content: space-between; --tint: #fff; }
.app-hero .id { display: flex; align-items: center; gap: 16px; }
.app-hero .icon { width: 72px; height: 72px; border-radius: 17px; flex: none; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.app-hero h1 { margin: 0; font-weight: 700; font-size: clamp(44px, 6vw, 80px); line-height: .95; letter-spacing: -.03em; }
.app-hero .pitch { margin: 0; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.25; letter-spacing: -.015em; max-width: 32ch; color: inherit; }
.app-hero p { color: var(--app-soft); max-width: 46ch; }
.app-hero .tag { color: var(--app-ink); border-color: var(--app-line); }
.app-hero .tag.live { color: var(--app-ink); border-color: var(--app-ink); }
.app-hero .acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border-radius: 14px; background: var(--app-key); color: var(--app-key-ink); font-weight: 600; font-size: 15px; transition: transform .2s; }
.store:hover { transform: translateY(-1px); }
.store small { display: block; font-size: 11px; font-weight: 500; opacity: .8; line-height: 1; }
.store span { display: grid; gap: 3px; line-height: 1.05; }
.soon { font-size: 15px; font-weight: 500; }
.app-hero.small { gap: 12px; }
.app-hero.small h1 { font-size: clamp(36px, 4.6vw, 60px); }

.app-visual { padding: 0; align-items: center; justify-content: flex-end; background: color-mix(in srgb, var(--app) 10%, var(--tile)); overflow: hidden; min-height: 320px; }
.app-visual .shots { display: flex; gap: 14px; justify-content: center; align-items: flex-end; padding: 28px 24px 0; width: 100%; }
.app-visual .shots img { width: min(46%, 250px); height: auto; border-radius: 22px 22px 0 0; display: block; box-shadow: 0 -8px 30px rgba(0,0,0,.14); }
.app-visual .shots img:nth-child(2) { transform: translateY(18px); }
.app-visual .play { width: 100%; padding: 28px; display: grid; gap: 12px; align-self: stretch; align-content: end; }
.app-visual .play small { color: var(--muted); font-size: 13px; }
.app-visual.on-app { background: var(--app); color: var(--app-ink); border-color: transparent; justify-content: center; --cell: color-mix(in srgb, var(--app-ink) 9%, var(--app)); }
.app-visual.on-app .play { width: min(100%, 380px); align-self: center; align-content: center; justify-items: center; }
.app-visual.on-app .play .lights { width: 100%; }
.app-visual.on-app .play small { color: var(--app-soft); }

.rules ol { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 12px; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 2em 1fr; gap: 10px; color: color-mix(in srgb, var(--ink) 82%, var(--muted)); max-width: 52ch; }
.rules li::before { content: counter(r); font: 500 13px/1.9 var(--font-mono); color: var(--muted); }
.feats dl { margin: 6px 0 0; display: grid; gap: 0; }
.feats dl > div { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 4px 18px; padding: 12px 0; border-top: 1px solid var(--line); }
.feats dt { font-weight: 600; }
.feats dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .feats dl > div { grid-template-columns: minmax(0, 1fr); } }

.faq { gap: 0; }
.faq h2 { margin-bottom: 8px; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px/1 var(--font-sans); color: var(--muted); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 16px; max-width: 60ch; }
.faq details p + p { margin-top: -6px; }
.inshort dl { margin: 6px 0 0; display: grid; gap: 10px 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inshort dl > div { padding-top: 10px; border-top: 1px solid var(--line); }
.inshort dt { font-weight: 600; }
.inshort dd { margin: 2px 0 0; color: var(--muted); }
@media (max-width: 640px) { .inshort dl { grid-template-columns: minmax(0, 1fr); } }

@media (min-width: 900px) {
  .app .app-hero { grid-column: span 7; min-height: 460px; }
  .app .app-visual { grid-column: span 5; }
  .app .rules, .app .feats { grid-column: span 6; }
  .app .app-hero.small { grid-column: span 12; min-height: 0; }
  .app .faq { grid-column: span 8; }
  .app .side { grid-column: span 4; }
}

/* ───────── agents page (agents/) ─────────
   Same building blocks as the app pages, in Crewfloor navy + gold. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tag.pilot { color: var(--app-key); border-color: color-mix(in srgb, var(--app-key) 60%, transparent); display: inline-flex; align-items: center; gap: 6px; }
.tag.pilot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.app-hero .more { font-size: 15px; font-weight: 500; color: var(--app-soft); padding: 0 6px; }
.app-hero .more:hover { color: var(--app-ink); }

.queue-tile { padding: 0; justify-content: center; }
.queue { width: 100%; align-self: stretch; display: grid; gap: 14px; align-content: center; padding: clamp(20px, 3vw, 28px); }
.queue-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.queue h2 { font-size: 18px; font-weight: 600; }
.queue-count, .queue .src { font: 500 11.5px var(--font-mono); font-stretch: 87.5%; color: var(--muted); }
.queue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--tile); border: 1px solid var(--line); transition: opacity .3s; }
.queue li p { grid-column: 1; margin: 0; max-width: none; color: var(--ink); font-size: 14px; line-height: 1.4; }
.queue li button { grid-column: 2; grid-row: 1 / span 2; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font: 600 13px var(--font-sans); cursor: pointer; transition: transform .2s; }
.queue li button:hover { transform: translateY(-1px); }
.queue li.done { opacity: .6; }
.queue li.done button { background: transparent; border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); color: var(--ok); cursor: default; transform: none; }
.queue small { color: var(--muted); font-size: 13px; }

.pkgs { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pkgs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pkgs .tile { --tint: #F0C24E; gap: 8px; }
.pkgs .n { font: 500 11.5px var(--font-mono); font-stretch: 87.5%; color: var(--muted); }
.pkgs .tags { margin-top: auto; padding-top: 10px; }

.agents .crew { grid-area: auto; grid-column: span 12; }
.crew .kicker { font: 500 11.5px var(--font-mono); font-stretch: 87.5%; color: #F0C24E; }
.agents .mail { grid-column: span 12; align-self: stretch; justify-content: flex-start; }
.agents .mail .addr-block { margin-top: auto; }
@media (min-width: 900px) {
  .agents .inshort { grid-column: span 6; }
  .agents .crew { grid-column: span 7; min-height: 340px; }
  .agents .mail { grid-column: span 5; }
}

/* home: Crewfloor tile links to crwflr.com (↗) and to the agents page */
.crew .to-agents { justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: #F0C24E; color: #121836; font: 600 13.5px var(--font-sans); transition: transform .2s; }
.crew .to-agents:hover { transform: translateY(-1px); }
.crew .to-agents:focus-visible { outline-color: #F0C24E; }

/* footer */
footer { color: var(--muted); font-size: 13.5px; padding-block: 8px 40px; padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer a:hover, footer a[aria-current="page"] { color: var(--ink); }

@media (max-width: 640px) {
  .intro, .word { min-height: 0; }
  .word .shot img, .mimic .shot img { width: min(70%, 240px); }
  /* phone: the house on top, the copy below it on solid navy */
  .crew { min-height: 0; padding-top: 180px; }
  .kegel { grid-template-columns: minmax(0, 1fr); }
  .kegel-mark { order: -1; margin: 0; }
  .kegel-mark img { width: 120px; }
  .crew .art { bottom: auto; height: 240px; background-position: center top; }
  .crew::after { background: linear-gradient(0deg, #0A0D1E calc(100% - 200px), rgba(10,13,30,0) calc(100% - 110px)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  a.tile:hover, .tile.hov:hover, .btn:hover { transform: none; }
  .word:hover .shot img, .mimic:hover .shot img { transform: translateY(6px); }
  .crew:hover .art { transform: none; }
  .kegel:hover .kegel-mark img { transform: rotate(-4deg); }
}

/* Martian Mono is wide; run it a step narrower wherever it appears (after the `font` shorthands, which reset font-stretch) */
.dock span, .reach span, .tag, .throw-out, .legend, .months, .head .meta, .form-label small, .legal-content h2 .sec, .toc .n, .toc-mobile .n { font-stretch: 87.5%; letter-spacing: -.01em; }