/* erikgaren.com home page. Fonts are self-hosted (SIL OFL 1.1, licences in /home/fonts). */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/home/fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/home/fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/home/fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/home/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #0a0b0e; --surface: #131519; --surface-2: #1b1e24; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.18);
  --ink: #eef0f3; --muted: #9aa1ad; --accent: #a81d36; --accent-ink: #ffffff; --accent-text-dark: #f2788b; --accent-text-light: #8c1c2e; --accent-2: #ff4d6d;
  --sonic: #1B4FBB; --ryu: #6E1423; --rgg: #6A00FF; --auto: #107C10; --os: #0F6CBD; --world: #C42B1C; --ask: #0E5A9C;
  --dock: 68px; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --metro: cubic-bezier(0, .5, .1, 1);
  --accent-text: var(--accent-text-dark, var(--accent));
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg:#f3f3f0; --surface:#fff; --surface-2:#e9e8e3; --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.2); --ink:#15171c; --muted:#5b626e; --accent:#8c1c2e; --accent-ink:#fff; --accent-text: var(--accent-text-light, var(--accent)); color-scheme: light; } }
:root[data-theme="light"] { --bg:#f3f3f0; --surface:#fff; --surface-2:#e9e8e3; --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.2); --ink:#15171c; --muted:#5b626e; --accent:#8c1c2e; --accent-ink:#fff; --accent-text: var(--accent-text-light, var(--accent)); color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 "Archivo", system-ui, sans-serif; }
a { color: inherit; }
code { font-family: var(--mono); font-size: .92em; color: var(--accent-text); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(55rem 38rem at 92% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
              radial-gradient(40rem 30rem at -12% 40%, color-mix(in srgb, var(--rgg) 10%, transparent), transparent 60%); }

/* ---------- dock (side nav, a taskbar on phones) ---------- */
.dock { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--dock); display:flex; flex-direction:column; align-items:center; gap:.35rem; padding: 1rem 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px); }
.dock .mark { width:40px; height:40px; display:grid; place-items:center; background: var(--accent); color: var(--accent-ink); font-weight:900; font-size:.95rem; text-decoration:none; margin-bottom:.6rem; font-variation-settings:"wdth" 75; }
.dock a.nav, .dock button { position:relative; width:44px; height:44px; display:grid; place-items:center; border:1px solid transparent; background:none; color: var(--muted); cursor:pointer; text-decoration:none; }
.dock a.nav:hover, .dock button:hover, .dock a.nav:focus-visible, .dock button:focus-visible { color: var(--ink); background: var(--surface-2); outline:none; }
.dock a.nav[aria-current="true"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.dock svg { width:20px; height:20px; }
.dock .tip { position:absolute; left: 54px; padding:.25rem .55rem; background: var(--ink); color: var(--bg); font-size:.75rem; white-space:nowrap; opacity:0; transform: translateX(-4px); pointer-events:none; transition: .15s; }
.dock a.nav:hover .tip, .dock button:hover .tip, .dock a.nav:focus-visible .tip, .dock button:focus-visible .tip { opacity:1; transform:none; }
.dock .spacer { flex:1; }
#sound-btn .wave { display:none; } #sound-btn[aria-pressed="true"] .wave { display:inline; } #sound-btn[aria-pressed="true"] .mute { display:none; } #sound-btn[aria-pressed="true"] { color: var(--accent-text); }

main { position: relative; z-index: 1; margin-left: var(--dock); }
.wrap { width: min(1240px, 100% - 2.5rem); margin: 0 auto; }

/* ---------- hero: poster name + HawaiiOS terminal window ---------- */
.hero { display:flex; flex-direction:column; align-items:center; text-align:center; padding: 3.6rem 0 .6rem; }
.hero .cta { justify-content:center; }
.hero .window { position:relative; width: min(46rem, 100%); margin-top: 9.6rem; text-align:left; }
.hello { font: 600 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
.hello b { color: var(--accent-text); font-weight:600; }
.hero h1 { margin: .9rem 0 0; font-weight: 900; font-variation-settings: "wdth" 76; line-height: .86; letter-spacing: -.02em; font-size: clamp(2.9rem, 8vw, 8.2rem); text-transform: uppercase; }
.hero h1 .two { display:block; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.hero .role { margin: 1.3rem 0 0; font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.hero .role b { color: var(--accent-text); font-weight: 800; }
.hero .lead { margin: .5rem auto 0; max-width: 42rem; color: var(--muted); font-size: 1.06rem; }
.cta { display:flex; flex-wrap:wrap; gap:.6rem; margin-top: 1.4rem; }
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.72rem 1.15rem; border:1px solid var(--line-2); text-decoration:none; font-weight:700; transition: transform .15s, background .15s; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); outline:none; }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }

.window { border:1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 30px 80px -40px rgba(0,0,0,.8); }
.titlebar { display:flex; align-items:center; gap:.55rem; height: 34px; padding-left: .7rem; border-bottom:1px solid var(--line); font: 12px "Segoe UI", "Archivo", sans-serif; color: var(--muted); user-select:none; }
.titlebar .ico { width:16px; height:14px; background: var(--accent); display:grid; place-items:center; color: var(--accent-ink); font: 700 8px var(--mono); }
#win-title { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.titlebar .ctl { margin-left:auto; display:flex; height:100%; flex:none; }
.titlebar .ctl button { width: 42px; height:100%; display:grid; place-items:center; font-size: 13px; border:0; background:none; color: inherit; cursor:pointer; }
.titlebar .ctl button:hover, .titlebar .ctl button:focus-visible { background: var(--surface-2); color: var(--ink); outline:none; }
.titlebar .ctl button:last-child:hover { background:#c42b1c; color:#fff; }
.term { font: 13.5px/1.6 var(--mono); }
.term-out { height: 10.5rem; overflow:auto; padding: .7rem .95rem 0; color: var(--muted); white-space: pre-wrap; overflow-wrap:anywhere; }
.term-out:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.term-out .q { color: var(--ink); }
.term-out .q b { color: var(--accent-text); font-weight:400; }
.term-out a { color: var(--accent-text); }
.term-out .ans { color: var(--ink); opacity:.88; }
.term-line { display:flex; align-items:center; gap:.6rem; padding: .55rem .95rem .7rem; border-top: 1px dashed var(--line); }
.term-line label { color: var(--accent-text); white-space:nowrap; }
.term-line { flex-wrap: wrap; row-gap: .25rem; }
/* when the prompt and the hint no longer fit side by side, the input drops to its own line instead of clipping */
.term-line input { flex: 1 1 13rem; min-width:0; border:0; outline:none; background:none; color: var(--ink); font: inherit; caret-color: var(--accent-text); }
.asks { display:flex; flex-wrap:wrap; gap:.4rem; padding: 0 .95rem .9rem; }
.asks button { font: 12px var(--mono); color: var(--muted); background: var(--surface-2); border:1px solid var(--line); padding:.3rem .6rem; cursor:pointer; }
.asks button:hover, .asks button:focus-visible { color: var(--ink); border-color: var(--accent-text); outline:none; }
.term-note { margin: 0; padding: .45rem .95rem; border-top:1px solid var(--line); font: 11px var(--mono); color: var(--muted); }

/* ---------- Start: live tiles from HawaiiOS ---------- */
.group { display:flex; align-items:baseline; gap: .8rem; margin: 2.4rem 0 .8rem; }
.group h2 { margin:0; font-weight: 300; font-size: 1.6rem; letter-spacing: .01em; }
.group > span { font: 12px var(--mono); color: var(--muted); }
.start { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); grid-auto-rows: 9.6rem; gap: 8px; perspective: 1400px; }
.tile { position:relative; overflow:hidden; background: var(--surface); color: var(--ink); text-decoration:none; transform-style: preserve-3d; transition: transform .12s ease-out; outline: none; }
.tile::after { content:""; position:absolute; inset:0; pointer-events:none; border: 3px solid transparent; transition: border-color .12s; z-index:3; }
a.tile:hover::after, button.tile:hover::after, .tile:focus-visible::after, .tile:focus-within::after { border-color: color-mix(in srgb, var(--ink) 70%, transparent); }
.tile.w2 { grid-column: span 2; } .tile.w3 { grid-column: span 3; } .tile.w4 { grid-column: span 4; } .tile.h3 { grid-row: span 3; } .tile.w6 { grid-column: span 6; } .tile.h2 { grid-row: span 2; }
.tile .faces { position:absolute; inset:0; transition: transform .8s var(--metro); }
.tile .face { position:absolute; left:0; right:0; top:0; height:100%; padding: .85rem 1rem; display:flex; flex-direction:column; }
.faces > .face:nth-child(2) { top:100%; } .faces > .face:nth-child(3) { top:200%; } .faces > .face:nth-child(4) { top:300%; }
.tile .brand { margin-top:auto; font-size: .9rem; font-weight: 500; display:flex; justify-content:space-between; align-items:end; gap:.5rem; }
.tile .brand small { font: 11px var(--mono); opacity:.75; }
.tile .big { font-weight: 300; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height:1.1; letter-spacing: -.005em; }
.tile .kick { font: 600 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; opacity:.78; }
.tile p { margin:.35rem 0 0; font-size: .92rem; opacity:.85; }
.tile.color { color:#fff; }
.tile.color .kick, .tile.color p, .tile.color .brand small { color:#fff; opacity:1; }
.tile .bgmedia { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile .shade { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.72)); }
.tile .face > :where(:not(.bgmedia):not(.shade)) { position:relative; z-index:2; }

.photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 50% 30%; }
.sticker { position:absolute; z-index:4; right:.8rem; bottom:.9rem; transform: rotate(-6deg); padding:.5rem .75rem; background: #fff; color: #0a0b0e; font: 800 .78rem/1 "Archivo"; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; box-shadow: 4px 4px 0 var(--accent); transition: transform .2s; }
.sticker:hover, .sticker:focus-visible { transform: rotate(-2deg) scale(1.06); outline:none; }

.now .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#3ddc84; margin-right:.45rem; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.6); } 70% { box-shadow: 0 0 0 9px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.now-row { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:.45rem; }
.now-time { font: 200 2.7rem/1 "Archivo"; font-variation-settings:"wdth" 80; }
.now-wx { display:flex; align-items:center; gap:.4rem; font-size:1.05rem; }
.now-ico { font-size:1.5rem; line-height:1; }
.now-sub { margin-top:.3rem; font-size:.85rem; color: var(--muted); }
.tile.ask .ask-cat { position:absolute; right: .8rem; bottom: .6rem; width: 54px; height: 54px; z-index:2; }
.tile.ask .ask-cat svg { width:100%; height:100%; }
.tile.ask .big { padding-right: 60px; }

.strip { display:flex; flex-direction:column; justify-content:center; gap:.55rem; padding: .75rem 0; }
.strip .kick { padding: 0 1rem; }
.marquee { overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.track { display:flex; gap:.45rem; width:max-content; animation: scroll 85s linear infinite; }
.strip.paused .track, .strip:has(button:focus-visible) .track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(calc(-50% - .225rem)); } }
.track button { display:inline-flex; align-items:center; gap:.5rem; font: 500 .9rem "Archivo"; color: var(--ink); background: var(--surface-2); border:1px solid var(--line); padding:.3rem .8rem .3rem .3rem; cursor:pointer; white-space:nowrap; }
.ti { width:24px; height:24px; flex:none; display:grid; place-items:center; background: var(--b); color: var(--f, #fff); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.ti svg { width:15px; height:15px; fill: currentColor; }
.ti.mono { font: 800 9px/1 var(--mono); letter-spacing:-.03em; }
.track button:hover, .track button:focus-visible, .track button[aria-pressed="true"] { border-color: var(--accent-text); color: var(--accent-text); outline:none; }
.proof { padding: 0 1rem; color: var(--muted); font-size:.92rem; min-height:1.45em; }
.proof a { color: var(--accent-text); }

.graph { background:#00000f; }
.graph img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: 35% 45%; }
.tile .face > .mini-run { position:absolute; right: 1rem; top: .85rem; width: 98px; height: 40px; }
.tile .face > .mini-run ~ .kick, .tile .face > .mini-run ~ .big { padding-right: 112px; }
.facts ul { list-style:none; padding:0; margin:.55rem 0 0; display:grid; gap:.4rem; }
.facts li { display:flex; justify-content:space-between; gap:1rem; padding-bottom:.35rem; border-bottom:1px dashed var(--line); font-size:.93rem; }
.facts li span:last-child { color: var(--muted); text-align:right; }

/* ---------- stage select (Work Adventure's game-menu feel, original art) ---------- */
section.block { padding: 4.6rem 0 0; scroll-margin-top: 1rem; }
.head { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.head h2 { margin:0; font-weight:900; font-variation-settings:"wdth" 80; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height:1; text-transform:uppercase; letter-spacing:-.01em; }
.head h2 small { display:block; font: 600 12px/1 var(--mono); letter-spacing:.14em; color: var(--muted); margin-bottom:.6rem; }
.head .hint { color: var(--muted); font: 12px var(--mono); text-decoration:none; white-space:nowrap; }
.head a.hint:hover { color: var(--accent-text); }

.select { display:grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 8px; }
.menu { list-style:none; margin:0; padding:.5rem 0; border:1px solid var(--line); background: var(--surface); }
.menu a { position:relative; display:grid; grid-template-columns: 2.2rem 1fr; align-items:center; padding:.75rem 1rem .75rem .6rem; text-decoration:none; color: var(--muted); font-weight:700; transition: color .15s, background .15s; }
.menu a .cur { font-size: .8rem; color: var(--accent-text); opacity:0; transform: translateX(-6px); transition: .18s; text-align:center; }
.menu a small { display:block; font: 11px var(--mono); font-weight:400; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }
.menu a .stat { display:block; margin-top:.2rem; font-size:.84rem; font-weight:500; line-height:1.3; color: var(--muted); }
.menu a[aria-current="true"] .stat { color: var(--ink); }
.menu a[aria-current="true"] { color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--stage) 38%, transparent), transparent); }
.menu a[aria-current="true"] .cur { opacity:1; transform:none; animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(3px); } }
.menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.preview { position:relative; min-height: 25rem; border:1px solid var(--line); background: var(--stage, var(--surface)); color:#fff; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; transition: background .35s; }
.preview .art { position:absolute; inset:0; }
.preview .art > img, .preview .art > video { width:100%; height:100%; object-fit:cover; opacity:.6; display:block; }
.preview .art > img.kb { animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.08) translate(-1.5%, -1%); } }
.illus { position:absolute; inset:0; width:100%; height:100%; }
.il-k { font: 600 11px var(--mono); letter-spacing:.14em; fill: rgba(255,255,255,.7); }
.il-big { font: 900 34px "Archivo"; fill:#fff; }
.il-s { font: 500 13px "Archivo"; fill: rgba(255,255,255,.8); }
.il-c { fill: rgba(255,255,255,.12); animation: ilpass 6.3s steps(1) infinite; }
@keyframes ilpass { 0% { fill: rgba(255,255,255,.12); } 12% { fill: #c8facc; } 88% { fill: #c8facc; } }
.il-scan { fill: #fff; opacity:.8; animation: ilscan 6.3s linear infinite; }
@keyframes ilscan { from { transform: translateX(0); } to { transform: translateX(294px); } }
.il-row { fill: rgba(255,255,255,.22); }
.il-scr { fill: rgba(0,0,0,.35); stroke: rgba(255,255,255,.5); stroke-width:2; }
.il-ui { fill: rgba(255,255,255,.16); }
.il-hl, .il-box { opacity:0; animation: ilhl 6s infinite; }
.il-hl { fill: rgba(255,255,255,.55); } .il-box { fill: none; stroke: #ffe066; stroke-width: 2.5; }
.il-d1 { animation-delay: 0s; } .il-d2 { animation-delay: 2s; } .il-d3 { animation-delay: 4s; }
@keyframes ilhl { 0%, 30% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
.il-note { font: 11px var(--mono); fill: rgba(255,255,255,.6); }
.preview::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.82)); }
.preview .inner { position:relative; z-index:1; padding: 1.4rem 1.5rem 1.5rem; }
.preview .num { font: 600 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.preview h3 { margin:.35rem 0 .4rem; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight:900; font-variation-settings:"wdth" 82; line-height:1.05; }
.preview p { margin:0; max-width: 40rem; color: rgba(255,255,255,.8); font-size:.95rem; }
.preview .plain { margin:0 0 .45rem; font-size: 1.15rem; font-weight:600; color:#fff; }
.preview .chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.9rem; }
.preview .chips span { font: 600 11px/1.6 var(--mono); padding:.1rem .5rem; border:1px solid rgba(255,255,255,.3); }
.preview .open { display:inline-flex; margin-top:1.1rem; padding:.6rem 1rem; background:#fff; color:#000; font-weight:800; text-decoration:none; }
.preview .open:focus-visible, .preview .open:hover { box-shadow: 4px 4px 0 var(--accent); outline:none; }
.loading { position:fixed; inset:0; z-index:60; display:none; place-items:center; background:#000; color:#fff; font: 900 clamp(1.6rem, 4vw, 2.6rem) "Archivo"; font-variation-settings:"wdth" 80; letter-spacing:.06em; }
.loading.on { display:grid; animation: fadein .2s ease-out; }
.loading span { animation: blink .5s steps(1) infinite; }
@keyframes fadein { from { opacity:0; } }
@keyframes blink { 50% { opacity:.25; } }

/* ---------- experience (expandable cards) ---------- */
.acc { display:grid; gap:8px; }
.acc details { border:1px solid var(--line); background: var(--surface); }
.acc summary { list-style:none; cursor:pointer; display:grid; grid-template-columns: 1fr auto; gap:.15rem 1rem; padding: 1rem 1.2rem; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary b { font-size:1.08rem; }
.acc summary span { color: var(--muted); font-size:.93rem; }
.acc summary em { grid-row: 1 / span 2; grid-column: 2; align-self:center; font-style:normal; color: var(--muted); font-size:1.3rem; transition: transform .2s; }
.acc details[open] summary em { transform: rotate(45deg); }
.acc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acc .in { padding: 0 1.2rem 1.1rem; color: var(--muted); }
.acc .in ul { margin:.1rem 0 0; padding-left:1.1rem; display:grid; gap:.3rem; }

/* ---------- writing ---------- */
.posts { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.posts li a { display:grid; grid-template-columns: 9rem 1fr auto; gap:1rem; align-items:baseline; padding: 1.1rem .2rem; border-bottom:1px solid var(--line); text-decoration:none; transition: padding .2s, background .2s; }
.posts li a:hover, .posts li a:focus-visible { padding-left: .8rem; background: var(--surface); outline:none; }
.posts time { font: 12px var(--mono); color: var(--muted); }
.posts b { font-size: 1.12rem; }
.posts small { display:block; color: var(--muted); font-size:.92rem; margin-top:.2rem; font-weight:400; }
.posts .tag { font: 600 11px var(--mono); color: var(--accent-text); text-transform:uppercase; letter-spacing:.1em; }

/* ---------- go deeper: the doors ---------- */
.doors { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.door { position:relative; min-height: 16rem; padding: 1.2rem 1.25rem; color:#fff; text-decoration:none; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; transform-style: preserve-3d; transition: transform .12s ease-out; }
.door .press { position:absolute; top:1.1rem; right:1.2rem; font: 600 11px/1 var(--mono); letter-spacing:.16em; animation: blink 1.4s steps(1) infinite; }
.door .k { font: 600 11px var(--mono); letter-spacing:.12em; opacity:.8; }
.door h3 { margin:.35rem 0 0; font-size: 1.5rem; font-weight: 300; line-height:1.15; }
.door p { margin:.4rem 0 0; color: rgba(255,255,255,.85); font-size:.94rem; }
.door::after { content:""; position:absolute; inset:0; border:3px solid transparent; transition: border-color .12s; }
.door:hover::after, .door:focus-visible::after { border-color: rgba(255,255,255,.75); }
.door:focus-visible { outline:none; }
.door .glyph { position:absolute; right:-.6rem; top: 1.6rem; font: 900 9rem/1 "Archivo"; opacity:.12; font-variation-settings:"wdth" 70; }
.door-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.door .shade { position:absolute; inset:0; background: linear-gradient(180deg, transparent 15%, var(--tint) 78%); }
.door > .k, .door > h3, .door > p { position:relative; z-index:1; }
.door > .press, .door > .glyph { z-index:1; }
.door .pix + .shade { background: linear-gradient(180deg, transparent 42%, var(--tint) 86%); }
.pix .cloud { animation: drift 18s linear infinite; } .pix .cloud.b { animation-duration: 26s; animation-delay: -9s; }
@keyframes drift { from { transform: translateX(-120px); } to { transform: translateX(520px); } }
.pix .ground { animation: groundscroll 1.2s linear infinite; }
@keyframes groundscroll { to { transform: translateX(-32px); } }
.pix .hero-cat { animation: hop 1.2s cubic-bezier(.3,.7,.4,1) infinite; transform-origin: center bottom; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-38px); } }

/* ---------- about ---------- */
.about { display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 8px; }
.neo { margin:0; border:1px solid var(--line); background: #0d1117; color:#c9d1d9; padding: 1.1rem 1.2rem; font: 12.5px/1.45 var(--mono); overflow-x:auto; white-space:pre; }
.neo .k { color:#4aa8ff; } .neo .p { color:#7ee787; }
.card { border:1px solid var(--line); background: var(--surface); padding: 1.3rem; }
.quotes { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.quotes-title { grid-column: 1 / -1; margin: 1.2rem 0 .2rem; font-size: 1.1rem; }
.quote { margin:0; padding: 1.2rem 1.3rem; border:1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); display:flex; flex-direction:column; gap:.8rem; }
.quote blockquote { margin:0; }
.quote p { margin:0; font-size: 1.02rem; line-height:1.55; }
.quote p::before { content:"“"; } .quote p::after { content:"”"; }
.quote figcaption { margin-top:auto; display:flex; flex-direction:column; font-size:.9rem; }
.quote figcaption span { color: var(--muted); }
.quotes-more { grid-column: 1 / -1; justify-self:start; padding:.3rem 0; color: var(--accent-text); font: 12px var(--mono); text-decoration:none; }
.quotes-more:hover { text-decoration: underline; }
.card h3 { margin:0 0 .5rem; font-size:1.1rem; }
.card p { margin:0; color: var(--muted); }

/* ---------- closing contact band (the other pages end with the same one) ---------- */
.contact { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2rem; padding: 1.8rem 2rem; background: var(--surface); border:1px solid var(--line); border-top: 4px solid var(--accent); }
.contact h2 { margin:0 0 .35rem; font-weight:900; font-variation-settings:"wdth" 80; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height:1; text-transform:uppercase; }
.contact p { margin:0; max-width: 38rem; color: var(--muted); }
.contact p a { color: var(--accent-text); overflow-wrap:anywhere; }
.contact-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
@media (max-width: 560px) {
  .contact { padding: 1.3rem 1.1rem; }
  .contact-actions { display:grid; grid-template-columns: 1fr 1fr; width:100%; }
  .contact-actions .btn { justify-content:center; }
  .contact-actions .primary { grid-column: 1 / -1; }
}

footer { margin: 5rem 0 2rem; padding-bottom: 4.5rem; padding-top:1.2rem; border-top:1px solid var(--line); color: var(--muted); font-size:.85rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; }

/* ---------- command palette ---------- */
.palette { position:fixed; inset:0; z-index:50; display:none; place-items: start center; padding-top: 14vh; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.palette.open { display:grid; }
.palette .box { width: min(36rem, 92vw); border:1px solid var(--line-2); background: var(--surface); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.palette input { width:100%; border:0; border-bottom:1px solid var(--line); padding: 1rem 1.1rem; background:none; color: var(--ink); font: 1rem "Archivo"; outline:none; }
.palette ul { list-style:none; margin:0; padding:.4rem; max-height: 50vh; overflow:auto; }
.palette li a { display:flex; justify-content:space-between; padding:.6rem .7rem; text-decoration:none; }
.palette li a[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.palette li small { color: var(--muted); font: 12px var(--mono); }


/* ---------- dock level path: dotted track that fills as you scroll ---------- */
.dock .path, .dock .path-fill { position:absolute; left:50%; width:2px; transform:translateX(-50%); z-index:0; pointer-events:none; }
.dock .path { background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1.4px); background-size: 2px 7px; }
.dock .path-fill { background: var(--accent); }
.dock a.nav, .dock .mark { z-index:1; }
.dock a.nav { background: var(--bg); }
.dock a.nav.passed { color: var(--accent-text); }

/* ---------- hero shader ---------- */
.fx { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.wrap { position:relative; z-index:1; }
.shader-chip { margin-top: 1rem; display:inline-flex; gap:.5rem; align-items:center; font: 12px var(--mono); color: var(--muted); background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px dashed var(--line-2); padding: .42rem .7rem; cursor:pointer; text-align:left; }
.shader-chip:hover, .shader-chip:focus-visible { color: var(--ink); border-color: var(--accent); outline:none; }
.shader-chip span { color: var(--accent-text); }
.term-out .code { display:block; font-size: 11.5px; line-height:1.5; color: var(--ink); opacity:.82; }

/* ---------- toast ---------- */
.toast { position:fixed; z-index:70; left:50%; bottom: 1.4rem; transform: translate(-50%, 1rem); opacity:0; pointer-events:none; max-width: min(34rem, 92vw); padding:.7rem 1rem; background: var(--ink); color: var(--bg); font-size:.92rem; box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); transition: opacity .2s, transform .25s var(--metro); }
.toast.on { opacity:1; transform: translate(-50%, 0); pointer-events:auto; }
.toast a { color: inherit; font-weight:700; }

/* ---------- accent swatches (HawaiiOS settings colours) ---------- */
.swatches { position:fixed; z-index:40; left: calc(var(--dock) + 10px); bottom: 4.6rem; display:grid; grid-template-columns: repeat(7, 28px); gap:6px; padding:.65rem; background: var(--surface); border:1px solid var(--line-2); box-shadow: 0 20px 50px -20px rgba(0,0,0,.7); }
.swatches[hidden] { display:none; }
.swatches p { grid-column: 1 / -1; margin:0 0 .2rem; font: 11px var(--mono); color: var(--muted); }
.swatches button { width:28px; height:28px; border:2px solid transparent; outline-offset:2px; cursor:pointer; padding:0; }
.swatches button[aria-pressed="true"] { border-color: var(--ink); }

/* ---------- media lightbox ---------- */
.preview .actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.preview .actions .open { margin-top:0; }
.preview .watch { padding:.6rem 1rem; background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.45); font: 800 1rem "Archivo"; cursor:pointer; }
.preview .watch:hover, .preview .watch:focus-visible { background: rgba(255,255,255,.24); outline:none; }
dialog.lb { padding:0; border:1px solid var(--line-2); background:#000; color:#fff; width: min(1100px, 94vw); max-height: 94vh; }
dialog.lb::backdrop { background: rgba(0,0,0,.82); }
.lb-media { display:grid; place-items:center; background:#000; }
.lb-media img, .lb-media video { display:block; max-width:100%; max-height: 76vh; }
.lb-bar { display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; border-top:1px solid rgba(255,255,255,.14); font-size:.92rem; }
.lb-bar p { margin:0; flex:1; color: rgba(255,255,255,.86); }
.lb-bar span { font: 12px var(--mono); color: rgba(255,255,255,.6); white-space:nowrap; }
.lb-bar button { width:36px; height:36px; flex:none; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; cursor:pointer; }
.lb-bar button:hover, .lb-bar button:focus-visible { background: rgba(255,255,255,.24); outline:none; }

/* ---------- journey (world map) ---------- */
.journey { position:relative; list-style:none; margin:0 0 8px; padding: 1.3rem 1.3rem 1.2rem; border:1px solid var(--line); background: var(--surface); display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1rem; }
.journey::before { content:""; position:absolute; left:1.3rem; right:1.3rem; top: 1.85rem; border-top: 2px dashed var(--line-2); }
.journey li { position:relative; padding-top: 1.7rem; font-size:.9rem; line-height:1.4; }
.journey li::before { content:""; position:absolute; top:.33rem; left:0; width: 13px; height:13px; background: var(--accent); border:2px solid var(--accent); transform: rotate(45deg); }
.journey li.now::before { background: var(--surface); animation: beacon 1.6s ease-in-out infinite; }
@keyframes beacon { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); } }
.journey b { display:block; font: 600 11px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color: var(--accent-text); margin-bottom:.2rem; }
.journey span { display:block; color: var(--muted); font-size:.85rem; }
.journey-head { display:flex; justify-content:space-between; gap:1rem; font: 600 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color: var(--muted); margin: 0 0 .6rem; }

/* ---------- footer easter egg ---------- */
.palm { position:relative; vertical-align:middle; margin-left:.5rem; width:26px; height:26px; padding:0; border:0; background:none; color: var(--muted); cursor:pointer; }
.palm svg { width:26px; height:26px; transform-origin: 50% 100%; }
.palm:hover, .palm:focus-visible { color: var(--accent-text); outline:none; }
.palm .bubble { position:absolute; bottom: 125%; left:50%; transform: translateX(-50%) scale(.6); opacity:0; background: var(--ink); color: var(--bg); font: 700 .8rem "Archivo"; padding:.25rem .55rem; white-space:nowrap; transition: .2s var(--metro); pointer-events:none; }
.palm.sway svg { animation: sway .9s ease-in-out; }
.palm.sway .bubble { opacity:1; transform: translateX(-50%) scale(1); }
@keyframes sway { 25% { transform: rotate(-14deg); } 70% { transform: rotate(10deg); } }


/* ---------- palm cat: ray-marched mascot on the terminal window ---------- */
.cat { position:absolute; right: 2.2rem; bottom: calc(100% - 20px); width: 176px; height: 166px; padding:0; border:0; background:none; cursor:pointer; z-index:2; }
.cat canvas { width:176px; height:166px; display:block; }
.cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cat .bubble { position:absolute; right: 88%; top: 18%; padding:.32rem .6rem; background: var(--ink); color: var(--bg); font: 700 .82rem "Archivo"; white-space:normal; width:max-content; max-width: 15rem; text-align:left; opacity:0; transform: translateX(6px) scale(.8); transform-origin: right center; transition: .25s var(--metro); pointer-events:none; }
.cat .bubble::after { content:""; position:absolute; right:-6px; top:50%; margin-top:-5px; border:5px solid transparent; border-right:0; border-left:6px solid var(--ink); }
.cat.talk .bubble { opacity:1; transform:none; }
/* On phones the cat sits mid-screen, so a bubble to its left would run off the edge; it goes above instead. */
@media (max-width: 700px) {
  .cat .bubble { right: 15%; top: auto; bottom: 88%; max-width: min(15rem, calc(100vw - 4rem)); transform: translateY(6px) scale(.8); transform-origin: bottom right; }
  .cat .bubble::after { right: 14px; top: 100%; margin-top: 0; border: 5px solid transparent; border-bottom: 0; border-top: 6px solid var(--ink); }
}
.cat .fallback { display:none; font-size: 64px; line-height:140px; }
.cat.no-gl canvas { display:none; } .cat.no-gl .fallback { display:block; }


/* ---------- settings flyout, styled after the HawaiiOS settings app ---------- */
.settings { position:fixed; z-index:45; top:0; right:0; bottom:0; width: min(22rem, 92vw); padding: 1.2rem 1.3rem; overflow:auto; background: var(--surface); border-left:1px solid var(--line-2); box-shadow: -30px 0 80px -40px rgba(0,0,0,.8); visibility:hidden; transform: translateX(100%); transition: transform .35s var(--metro), visibility 0s .35s; }
.settings.open { visibility:visible; transform:none; transition: transform .35s var(--metro); }
.st-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.st-head h2, .settings h3 { font-weight: 300; text-transform: lowercase; margin:0; }
.st-head h2 { font-size: 2rem; }
.settings h3 { font-size: 1.1rem; margin: 1.2rem 0 .5rem; color: var(--ink); }
.st-head button { width:36px; height:36px; border:1px solid var(--line-2); background:none; color: var(--ink); cursor:pointer; }
.st-row { display:flex; flex-wrap:wrap; gap:.4rem; }
.st-row .choice { padding:.45rem .8rem; border:2px solid var(--line-2); background:none; color: var(--ink); font: 600 .9rem "Archivo"; cursor:pointer; }
.st-row .choice[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.st-row .swatch { width:34px; height:34px; border:3px solid transparent; outline-offset:2px; cursor:pointer; padding:0; }
.st-row .swatch[aria-pressed="true"] { border-color: var(--ink); }
.st-row button:focus-visible, .st-head button:focus-visible, .st-reset:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.st-reset { margin-top: 1.4rem; padding:.55rem .9rem; border:1px solid var(--line-2); background:none; color: var(--muted); cursor:pointer; font: 600 .85rem "Archivo"; }
.st-note { margin: .8rem 0 0; font: 11px var(--mono); color: var(--muted); }
.proof { transition: opacity .25s; } .proof.fading { opacity: 0; }
.door.wa { grid-column: 1 / -1; display:grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.6rem; align-items:center; min-height:0; padding: 1.6rem; color:#eaf7e6;
  background: linear-gradient(180deg, rgba(120,200,60,.06) 1px, transparent 1px) 0 0 / 100% 22px, radial-gradient(60rem 30rem at 80% 50%, #123a17, #050d07 70%); }
.door.wa .wa-copy { position:relative; z-index:1; display:flex; flex-direction:column; gap:.5rem; align-self:stretch; justify-content:center; }
.door.wa .press { position:static; align-self:flex-start; color:#ffd23f; }
.door.wa .k { color:#9be36a; opacity:1; }
.door.wa .wa-title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight:300; line-height:1.1; }
.door.wa .wa-text { color: rgba(234,247,230,.82); font-size:.98rem; max-width: 30rem; }
.plain-toggle { border:0; padding:0; background:none; color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor:pointer; }
.why-deeper { max-width: 52rem; margin: -.4rem 0 1.2rem; color: var(--muted); }
.why-deeper b { color: var(--ink); }
.why-deeper a { color: var(--accent-text); }
.door.wa .wa-credit { font-size:.82rem; color: rgba(234,247,230,.62); max-width: 30rem; }
.door.wa .wa-credit a { color: #9be36a; }
.door.wa .wa-go { margin-top:.6rem; align-self:flex-start; padding:.55rem .95rem; background:#ffd23f; color:#1a1400; font: 800 .95rem "Archivo"; }
.door.wa .wa-screen { position:relative; z-index:1; display:block; aspect-ratio: 16 / 10; border:2px solid rgba(155,227,106,.45); box-shadow: 0 0 0 6px rgba(0,0,0,.35), 0 30px 70px -30px rgba(80,200,60,.45); background:#000; overflow:hidden; }
.door.wa .wa-screen video { display:block; width:100%; height:100%; object-fit:cover; }
.door.wa:hover .wa-screen, .door.wa:focus-visible .wa-screen { border-color: #ffd23f; }


/* ---------- shell output ---------- */
.t-dir { color: var(--accent-text); } .t-err { color: #ff8a8a; } .t-dim { color: var(--muted); }
.term-out .t-dim, .term-out .ans.t-dim { color: var(--muted); opacity:1; }
.term-note code { color: var(--accent-text); }
/* ---------- floating terminal ---------- */
.term-float { position:fixed; right: 16px; bottom: 16px; z-index: 36; display:none; }
.term-float.open { display:block; animation: floatin .3s var(--metro); }
@keyframes floatin { from { transform: translateY(20px); opacity:0; } }
.window.floating { position:relative; width: min(27rem, calc(100vw - 32px)); margin:0; box-shadow: 0 30px 80px -20px rgba(0,0,0,.85); }
.window.floating .term-out { height: 12.5rem; }
.window.floating.max { width: min(44rem, calc(100vw - 32px)); }
.window.floating.max .term-out { height: 22rem; }
.window.floating .asks button { font-size: 11px; }
.window.min .term { display:none; }
.window.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.term-slot { display:flex; align-items:center; justify-content:center; gap:.8rem; width: min(46rem, 100%); margin-top: 9.6rem; border:1px dashed var(--line-2); color: var(--muted); font: 13px var(--mono); }
.term-slot button { border:1px solid var(--line-2); background:none; color: var(--ink); padding:.4rem .7rem; cursor:pointer; font: inherit; }
.fab { position:fixed; right:16px; bottom:16px; z-index:35; display:flex; align-items:center; gap:.55rem; padding:.4rem .9rem .4rem .4rem; background: var(--surface); color: var(--ink); border:1px solid var(--line-2); box-shadow: 0 18px 40px -16px rgba(0,0,0,.7); font: 700 .92rem "Archivo"; cursor:pointer; animation: floatin .3s var(--metro); }
.fab[hidden] { display:none; }
.fab svg { width:38px; height:38px; }
.fab .fab-term { display:none; width:38px; height:38px; place-items:center; background: var(--accent); color: var(--accent-ink); font: 700 13px var(--mono); }
.fab.no-cat svg { display:none; } .fab.no-cat .fab-term { display:grid; }
.fab:hover, .fab:focus-visible { border-color: var(--accent); outline:none; }
/* ---------- World Adventure-style dialog, spotlight and achievement toast ---------- */
.wa-dlg { position:fixed; z-index:76; width: min(25rem, calc(100vw - 24px)); color:#fff; font: 500 1rem/1.45 "Archivo"; text-shadow: 0 1px 2px rgba(0,0,0,.55);
  background: linear-gradient(180deg, #d3d3d3 0%, #a2a2a2 48%, #767676 100%); border: 2px solid #f0f0f0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.85);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.wa-dlg[hidden] { display:none; }
.wa-dlg-body { display:flex; gap:.8rem; align-items:center; padding: 1rem 1.1rem .7rem; }
.wa-ava svg { width:46px; height:46px; flex:none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.wa-dlg p { margin:0; text-align:left; }
.wa-dlg-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.5rem; padding: .5rem .9rem .8rem; border-top: 1px solid rgba(255,255,255,.35); }
.wa-dlg-foot > span { margin-right:auto; font: 600 11px var(--mono); letter-spacing:.1em; color: rgba(255,255,255,.9); }
.wa-dlg-foot button { border:1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.18); color:#fff; padding:.35rem .7rem; font: 700 .85rem "Archivo"; cursor:pointer; text-shadow: inherit; }
.wa-dlg-foot button.main { background: #1d1d1d; border-color:#fff; }
.wa-dlg-foot button:hover, .wa-dlg-foot button:focus-visible { background: rgba(0,0,0,.42); outline: 2px solid #ffd23f; outline-offset: 1px; }
.wa-dlg kbd { font: 700 10px var(--mono); padding: .05rem .3rem; border:1px solid currentColor; margin-left:.3rem; }
.tour-spot { position:fixed; z-index:75; pointer-events:none; box-shadow: 0 0 0 200vmax rgba(0,0,0,.5), 0 0 0 3px var(--accent); transition: all .35s var(--metro); }
.tour-spot[hidden] { display:none; }
.ach { position:fixed; z-index:80; top: 1rem; left:50%; display:flex; align-items:center; gap:.7rem; padding:.5rem 1.1rem .5rem .55rem; color:#fff; background: linear-gradient(180deg, #4a4a4a, #1f1f1f); border:2px solid #e6e6e6; box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.8); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transform: translate(-50%, -180%); transition: transform .5s var(--metro); pointer-events:none; }
.ach.on { transform: translate(-50%, 0); }
.ach svg { width:38px; height:38px; background:#0d0d0d; border:1px solid #777; flex:none; }
.ach b { display:block; color:#ffd23f; font: italic 800 .95rem "Archivo"; }
.ach .ach-name { font: 600 .9rem "Archivo"; }
@media (max-width: 700px) { .term-float { left: 8px; right: 8px; bottom: 68px; } .window.floating, .window.floating.max { width: 100%; } .fab { bottom: 72px; right: 12px; } }


/* ---------- career timeline (interactive) ---------- */
.career { display:grid; gap:8px; }
.journey li { padding-top:0; }
.journey li::before { top:.33rem; }
.journey button { display:block; width:100%; padding: 1.7rem 0 0; border:0; background:none; color: var(--ink); font: inherit; font-size:.9rem; line-height:1.4; text-align:left; cursor:pointer; }
.journey button:hover, .journey button:focus-visible { color: var(--accent-text); outline:none; }
.journey button:focus-visible b { text-decoration: underline; }
.journey button[aria-pressed="true"] { color: var(--accent-text); }
.journey li.work::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.career-detail { border:1px solid var(--line); background: var(--surface); padding: 1.1rem 1.3rem; min-height: 9.5rem; }
.career-detail h3 { margin:0; font-size:1.1rem; }
.career-detail .meta { margin:.25rem 0 .6rem; color: var(--muted); font-size:.93rem; }
.career-detail ul { margin:0; padding-left:1.1rem; color: var(--muted); display:grid; gap:.3rem; }
.plain-list { margin:0 0 .7rem; padding-left:1.1rem; color: var(--muted); display:grid; gap:.25rem; }
.langs { margin:0 0 .5rem; color: var(--ink); }
.small { font-size:.85rem; margin:0; }
@media (max-width: 700px) { .journey button { padding-top:0; } }


/* ---------- Unleashed menu chrome, from World Adventure's reconstructed assets (playful mode) ---------- */
.wa-ui .wa-dlg { background:none; clip-path:none; box-shadow:none; border: 22px solid transparent; border-image: url(/home/ui/wa-window.png) 28 24 28 28 fill / 22px stretch; filter: drop-shadow(0 18px 28px rgba(0,0,0,.55)); text-shadow: 0 1px 0 rgba(0,0,0,.65), 0 0 6px rgba(0,0,0,.35); }
.wa-ui .wa-dlg-body { padding: .1rem .2rem .6rem; }
.wa-ui .wa-dlg-foot { border-top: 1px solid rgba(255,255,255,.4); padding: .55rem 0 .1rem; }
.wa-ui .wa-dlg-foot button { background:none; border:0; padding:.2rem .35rem; display:inline-flex; align-items:center; gap:.4rem; }
.wa-ui .wa-dlg-foot button img { height: 22px; width:auto; }
.wa-ui .wa-dlg-foot button.main { background:none; }
.wa-ui .wa-dlg-foot button:hover, .wa-ui .wa-dlg-foot button:focus-visible { background:none; outline:none; color:#ffe14d; }
.wa-ui .wa-dlg kbd { display:none; }
.wa-dlg-foot button img { display:none; } .wa-ui .wa-dlg-foot button img { display:inline; }
.wa-ui .ach { background:none; clip-path:none; box-shadow:none; border: 18px solid transparent; border-image: url(/home/ui/wa-window.png) 28 24 28 28 fill / 18px stretch; padding: 0 .4rem 0 0; filter: drop-shadow(0 14px 24px rgba(0,0,0,.55)); }
.wa-ui .ach svg { display:none; }
.trophy { display:none; width:44px; height:44px; flex:none; background: 0 0 / 1320px 44px no-repeat; animation: trophy 1.6s steps(30) infinite; }
.ach.loaded .trophy { background-image: url(/home/ui/trophy-strip.webp); }
.wa-ui .trophy { display:block; }
@keyframes trophy { to { background-position: -1320px 0; } }
.wa-ui .ach b { color:#ffe14d; text-shadow: 0 1px 0 rgba(0,0,0,.7); }
.wa-ui .ach .ach-name { color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.7); }
.wa-ui .menu a[aria-current="true"] { background: none; color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); border: 8px solid transparent; border-image: url(/home/ui/wa-select.png) 10 fill / 8px stretch; padding: calc(.75rem - 8px) calc(1rem - 8px) calc(.75rem - 8px) calc(.6rem - 8px); }
/* the highlight is a translucent yellow over the dark panel, so its text stays light to stay readable */
.wa-ui .menu a[aria-current="true"] small, .wa-ui .menu a[aria-current="true"] .stat { color: rgba(255,255,255,.92); }
.wa-ui .menu a .cur { width:14px; height:14px; color:transparent; background: url(/home/ui/wa-bullet-off.png) center / contain no-repeat; opacity:1; transform:none; }
.wa-ui .menu a[aria-current="true"] .cur { background-image: url(/home/ui/wa-bullet-on.png); animation:none; filter: drop-shadow(0 0 4px #ffe14d); }
.wa-ui .st-row .choice[aria-pressed="true"] { background:none; color:#1a1400; border: 8px solid transparent; border-image: url(/home/ui/wa-select.png) 10 fill / 8px stretch; padding: calc(.45rem - 6px) calc(.8rem - 6px); }


/* ---------- fork door logo ---------- */
.door .pix-logo small { display:block; font-size:.55em; letter-spacing:.06em; margin-bottom:.15em; }
.door .pix-logo { position:absolute; z-index:1; top: 2.1rem; left: 1.25rem; color:#fff; text-transform:uppercase; font: 900 2rem/.86 "Archivo"; font-variation-settings:"wdth" 72; letter-spacing:.01em;
  -webkit-text-stroke: 1.5px #0b3d91; text-shadow: 3px 3px 0 #0b3d91, 6px 6px 0 rgba(0,0,0,.3); }
.door .pix-logo .tape { position:absolute; left: 62%; top: 72%; transform: rotate(-8deg); white-space:nowrap; background:#ffd23f; color:#1a1400; font: 800 .62rem/1 var(--mono); letter-spacing:.14em; padding:.3rem .5rem; -webkit-text-stroke:0; text-shadow:none; box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
/* ---------- pixel Beluga on the run (playful easter egg) ---------- */
.runner { position:fixed; z-index:34; left:0; bottom: 6px; width: 48px; height: 64px; padding:0; border:0; background:none; cursor:pointer; transform: translateX(-80px); }
.runner[hidden] { display:none; }
.runner svg { width:48px; height:64px; image-rendering: pixelated; }
.runner.go { animation: run 7.5s linear forwards; }
.runner.go svg { animation: hop .45s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes run { to { transform: translateX(calc(100vw + 80px)); } }
@media (max-width: 700px) { .runner { bottom: 66px; } }
.runner.r3d svg { animation: hop .45s cubic-bezier(.3,.7,.4,1) infinite; }
.runner.r3d.held svg { animation: none; }
.runner.r3d.squash svg { animation: none; transform: scaleY(.45); transform-origin: 50% 100%; }

/* ---------- touch screens get tap wording; the shader note only makes sense where the shaders run ---------- */
.on-touch { display:none; }
@media (hover: none) and (pointer: coarse) { .on-fine { display:none !important; } .on-touch { display:inline; } }
html:not(.wa-ui) .shader-chip { display:none; }

/* ---------- results at a glance, under the hero buttons ---------- */
.proofs { list-style:none; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; width: min(54rem, 100%); margin: 1.7rem auto 0; padding:0; text-align:left; }
.proofs a { display:flex; flex-direction:column; gap:.3rem; height:100%; padding:.85rem 1rem; border:1px solid var(--line); background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--ink); text-decoration:none; font-size:.9rem; line-height:1.38; transition: border-color .15s, transform .15s; }
.proofs b { font: 900 1.8rem/1 "Archivo"; font-variation-settings:"wdth" 80; color: var(--accent-text); }
.proofs a:hover, .proofs a:focus-visible { border-color: var(--accent-text); transform: translateY(-2px); outline:none; }
@media (max-width: 700px) {
  .proofs { grid-template-columns: 1fr; }
  .proofs a { flex-direction:row; align-items:center; gap:.9rem; padding:.65rem .9rem; }
  .proofs b { flex:none; min-width: 4.4rem; font-size:1.45rem; }
}

/* ---------- calm and playful wording: one of each pair shows ---------- */
html.wa-ui .xp-c, html:not(.wa-ui) .xp-p { display:none; }

/* ---------- Calm: just the CV and the work. The terminal waits behind a button, tiles and tools hold still ---------- */
.term-launch { display:none; }
html:not(.wa-ui) .term-launch { display:inline-flex; align-items:center; gap:.65rem; margin-top: 2rem; padding:.5rem .95rem .5rem .5rem; border:1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 600 .95rem "Archivo"; cursor:pointer; }
html:not(.wa-ui) .term-launch:hover, html:not(.wa-ui) .term-launch:focus-visible { border-color: var(--accent-text); outline:none; }
html:not(.wa-ui) .term-launch[aria-expanded="true"] { display:none; }
.term-launch .ico { width:26px; height:22px; display:grid; place-items:center; background: var(--accent); color: var(--accent-ink); font: 700 10px var(--mono); }
html:not(.wa-ui) .hero .window:not(.calm-open) { display:none; }
html:not(.wa-ui) .hero .window { margin-top: 1.6rem; }
html:not(.wa-ui) .term-slot { margin-top: 1.6rem; }
html:not(.wa-ui) .fab { display:none !important; }
html:not(.wa-ui) .start { grid-auto-rows: minmax(9.6rem, auto); }
html:not(.wa-ui) .track { animation:none; flex-wrap:wrap; width:auto; padding: 0 1rem; }
html:not(.wa-ui) .track > [aria-hidden="true"] { display:none; }
html:not(.wa-ui) .marquee { mask-image:none; }
/* the playground is optional, so in Calm it is a row of plain links rather than four animated posters */
html:not(.wa-ui) .why-deeper { display:none; }
/* the contact band at the end carries the same buttons */
html:not(.wa-ui) .about .cta { display:none; }
html:not(.wa-ui) .doors { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
html:not(.wa-ui) .door, html:not(.wa-ui) .door.wa { grid-column:auto; display:flex; flex-direction:column; justify-content:flex-start; gap:.25rem; min-height:0; padding: 1rem 1.1rem; background: var(--surface) !important; color: var(--ink); border:1px solid var(--line); }
html:not(.wa-ui) .door .door-bg, html:not(.wa-ui) .door .shade, html:not(.wa-ui) .door .glyph, html:not(.wa-ui) .door .press, html:not(.wa-ui) .door .pix-logo, html:not(.wa-ui) .door.wa .wa-screen, html:not(.wa-ui) .door.wa .wa-go { display:none; }
html:not(.wa-ui) .door.wa .wa-copy { gap:.25rem; }
html:not(.wa-ui) .door .k, html:not(.wa-ui) .door.wa .k { color: var(--muted); opacity:1; }
html:not(.wa-ui) .door h3, html:not(.wa-ui) .door.wa .wa-title { margin:0; font-size: 1.15rem; font-weight:700; line-height:1.25; }
html:not(.wa-ui) .door p, html:not(.wa-ui) .door.wa .wa-text { margin:0; color: var(--muted); font-size:.9rem; }
html:not(.wa-ui) .door.wa .wa-credit { color: var(--muted); font-size:.8rem; }
html:not(.wa-ui) .door.wa .wa-credit a { color: var(--accent-text); }
html:not(.wa-ui) .door:hover::after, html:not(.wa-ui) .door:focus-visible::after { border-color: var(--accent-text); }
@media (max-width: 700px) {
  html:not(.wa-ui) .start { grid-auto-rows: 9rem; }
  html:not(.wa-ui) .track { flex-wrap:nowrap; width:max-content; }
  html:not(.wa-ui) .marquee { overflow-x:auto; }
  /* phones reach the projects sooner: the playful tiles step aside and the portrait is shorter */
  html:not(.wa-ui) .tile.now, html:not(.wa-ui) .tile.ask, html:not(.wa-ui) .tile.graph { display:none; }
  html:not(.wa-ui) .start > .tile.h2 { grid-row: span 1; }
  .tile.photo.h3 { grid-row: span 2; }
}

/* ---------- dock labels: words under the icons, so nobody has to guess what a gamepad means ---------- */
.dock a.nav { width:60px; height:auto; min-height:50px; padding:7px 0 5px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.dock a.nav .tip { position:static; opacity:1; transform:none; padding:0; background:none; color:inherit; font: 600 10px/1.1 "Archivo", sans-serif; font-variation-settings:"wdth" 78; white-space:nowrap; }
@media (min-width: 701px) and (max-height: 700px) {
  .dock a.nav { width:44px; min-height:44px; padding:0; }
  .dock a.nav .tip { position:absolute; left:54px; padding:.25rem .55rem; background: var(--ink); color: var(--bg); font-size:.75rem; opacity:0; transform: translateX(-4px); }
  .dock a.nav:hover .tip, .dock a.nav:focus-visible .tip { opacity:1; transform:none; }
}

/* ---------- first visit: calm or playful ---------- */
.xp-ask { position:fixed; z-index:46; right: 1.2rem; bottom: 1.2rem; width: min(25rem, calc(100vw - 2rem)); padding: 1rem 1.1rem .8rem; background: var(--surface); color: var(--ink); border:1px solid var(--line-2); box-shadow: 0 24px 60px -24px rgba(0,0,0,.75); opacity:0; transform: translateY(12px); transition: opacity .25s, transform .3s var(--metro); }
.xp-ask.on { opacity:1; transform:none; }
.xp-ask.bye { opacity:0; transform: translateY(12px); }
.xp-ask h2 { margin: 0 2rem .7rem 0; font-size: 1.05rem; font-weight: 800; }
.xp-ask p { margin: .7rem 0 0; font-size: .78rem; color: var(--muted); }
.xp-opts { display:grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.xp-opts button { display:flex; flex-direction:column; gap:.25rem; text-align:left; padding: .65rem .7rem; background: var(--surface-2); color: var(--ink); border:1px solid var(--line-2); cursor:pointer; font: inherit; }
.xp-opts button:hover, .xp-opts button:focus-visible { border-color: var(--accent); outline:none; }
.xp-opts button[data-xp="playful"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); }
.xp-opts b { font-size: .95rem; }
.xp-opts span { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.xp-x { position:absolute; top:.5rem; right:.5rem; width: 2rem; height: 2rem; background:none; border:0; color: var(--muted); cursor:pointer; font-size: .9rem; }
.xp-x:hover, .xp-x:focus-visible { color: var(--ink); outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 700px) { .xp-ask { left: 1rem; right: 1rem; bottom: 72px; width:auto; } }
@media (prefers-reduced-motion: reduce) { .xp-ask, .xp-ask.on, .xp-ask.bye { transition:none; } }

/* ---------- Beluga and John chase it in 3D (runner3d.js); clicks pass through except on the controls ---------- */
.r3d { position:fixed; z-index:33; left:0; right:0; bottom:0; height:440px; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
html.r3d-thumbs, html.r3d-thumbs * { -webkit-user-select:none !important; user-select:none !important; -webkit-touch-callout:none !important; }
.r3d[hidden] { display:none; }
.r3d canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.r3d-hit { position:absolute; left:0; bottom:0; padding:0; border:0; background:none; pointer-events:auto; cursor:grab; touch-action:none; -webkit-tap-highlight-color: transparent; }
.r3d-hit:active { cursor:grabbing; }
.r3d-hit:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; }
.runner.r3d { cursor:grab; touch-action:none; }
.r3d-pop { position:absolute; left:0; bottom:0; visibility:hidden; will-change: transform; }
.r3d-pop.show { visibility:visible; }
.r3d-pop > span { display:block; transform: translateX(-50%); }
.r3d-pop.show > span { animation: r3d-pop 1.1s cubic-bezier(.2,.9,.3,1.3) forwards; }
.r3d-pop b { position:relative; display:block; min-width:22px; padding:1px 7px 2px; background:#fff; color:#0a0b0e; font: 900 16px/1.15 "Archivo", system-ui, sans-serif; text-align:center; box-shadow: 3px 3px 0 var(--accent); }
.r3d-pop b::after { content:""; position:absolute; left:50%; bottom:-5px; margin-left:-4px; border:4px solid transparent; border-top-color:#fff; border-bottom:0; }
@keyframes r3d-pop { 0% { transform: translateX(-50%) translateY(10px) scale(.2); opacity:0; } 16% { transform: translateX(-50%) translateY(-4px) scale(1.3); opacity:1; } 30% { transform: translateX(-50%) translateY(0) scale(1); } 78% { opacity:1; } 100% { transform: translateX(-50%) translateY(-12px) scale(1); opacity:0; } }
/* while playing on a phone the whole screen is the controller, so the page cannot scroll */
.r3d-pad { position:fixed; inset:0; z-index:1; pointer-events:auto; touch-action:none; overscroll-behavior:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color: transparent; }
.r3d-pad[hidden] { display:none; }
.r3d-ask { position:absolute; left:0; bottom:0; z-index:2; display:flex; gap:6px; padding:6px; background:#fff; border-radius:16px; box-shadow: 3px 3px 0 var(--accent), 0 10px 24px rgba(0,0,0,.4); pointer-events:auto; animation: r3d-ask-in .22s cubic-bezier(.2,.9,.3,1.3); }
.r3d-ask[hidden] { display:none; }
.r3d-ask::after { content:""; position:absolute; left: calc(50% + var(--ax, 0px)); bottom:-7px; margin-left:-7px; border:7px solid transparent; border-top-color:#fff; border-bottom:0; }
.r3d-ask button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:54px; height:58px; padding:4px 6px; border:0; border-radius:12px; background:#f0f0f4; color:#15171c; font: 800 11px/1 "Archivo", sans-serif; cursor:pointer; touch-action:manipulation; }
/* the characters' own faces, from a 4×2 sheet: columns are normal, wink, happy, hurt; rows are Beluga, John */
.r3d-face { display:block; width:34px; height:34px; border-radius:50%; background: url(/home/models/face-icons.webp) calc(var(--fx, 0) * 33.333%) calc(var(--fy, 0) * 100%) / 400% 200% no-repeat; }
.r3d-pop b.has-face { padding:2px; }
.r3d-pop b.has-face .r3d-face { width:30px; height:30px; }
.r3d-ask button:hover, .r3d-ask button:focus-visible { background:#ffe3e8; outline:2px solid var(--accent); }
@keyframes r3d-ask-in { from { opacity:0; scale:.6; } to { opacity:1; scale:1; } }
.r3d-stick { position:absolute; width:104px; height:104px; margin:-52px 0 0 -52px; border-radius:50%; border:2px solid color-mix(in srgb, var(--ink) 35%, transparent); background: color-mix(in srgb, var(--surface) 35%, transparent); opacity:0; transition: opacity .12s; pointer-events:none; }
.r3d-stick.on { opacity:1; }
.r3d-stick span { position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background: color-mix(in srgb, var(--accent) 80%, transparent); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
@media (max-width: 700px) { .r3d { bottom: 60px; height: 360px; } }


/* ---------- phone pass ---------- */
.fab-label { white-space:nowrap; }
.head .hint { display:inline-block; padding: .4rem 0; }
footer a, .plain-toggle { display:inline-block; padding: .3rem 0; }
.sticker { min-height: 30px; display:inline-flex; align-items:center; }
.window.floating .term-out { height: max(5rem, min(12.5rem, calc(100vh - 290px))); }
@media (max-width: 480px) {
  /* on a phone the terminal is a full-width pane, not a window floating inside the margins */
  .hero .window { width: calc(100% + 2rem); margin-left: -1rem; margin-right: -1rem; border-left:0; border-right:0; }
  .hero .cta { display:grid; grid-template-columns: 1fr 1fr; width:100%; }
  .hero .cta .btn { justify-content:center; }
  .hero .cta .primary { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .fab .fab-label { display:none; }
  .fab { padding: .35rem; }
}
@media (max-width: 700px), (max-height: 600px) { .window.floating .cat { display:none; } }
/* ---------- accessibility ---------- */
.skip { position:absolute; z-index:100; left: 1rem; top: -4rem; padding:.6rem 1rem; background: var(--accent); color: var(--accent-ink); font-weight:700; text-decoration:none; }
.skip:focus { top: 1rem; }
.window:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 30px 80px -40px rgba(0,0,0,.8); }

/* ---------- motion: Start-screen fly-in and section reveal ---------- */
.js .tile.enter { opacity:0; transform: translate3d(-48px, 0, -48px) rotateY(70deg); }
.tile.entered { opacity:1; transition: transform .7s var(--metro), opacity .4s ease-out; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s var(--metro); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 1060px) {
  .doors { grid-template-columns: 1fr 1fr; } .doors > .door:last-child { grid-column: 1 / -1; }
  .door.wa { grid-template-columns: 1fr; } .door.wa .wa-screen { order:-1; }
  .journey { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .journey::before { display:none; }
  .start { grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-flow: row dense; }
  .tile.w3, .tile.w4, .tile.w6 { grid-column: span 4; }
  .about { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  :root { --dock: 0px; }
  .dock { inset: auto 0 0 0; width:auto; height: 60px; flex-direction:row; justify-content:space-around; padding: 0 .4rem; border-right:0; border-top:1px solid var(--line); }
  .dock .mark, .dock .spacer, .dock .opt { display:none; }
  .dock .tip { width:1px; height:1px; padding:0; overflow:hidden; clip-path: inset(50%); }
  .dock a.nav { width:auto; min-width:48px; min-height:52px; padding:6px 2px 4px; }
  .dock a.nav .tip { width:auto; height:auto; overflow:visible; clip-path:none; font-size:9.5px; }
  .dock a.nav[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--accent); }
  main { padding-bottom: 68px; }
  .wrap { width: calc(100% - 2rem); }
  .hero { padding-top: 2rem; }
  .hero h1 { font-size: 11.8vw; }
  .start { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 9rem; }
  .tile.w2, .tile.w3, .tile.w4, .tile.w6 { grid-column: span 2; }
  .tile.sm-1 { grid-column: span 1; }
  .select { grid-template-columns: 1fr; }
  .preview { min-height: 21rem; }
  .doors { grid-template-columns: 1fr; } .doors > .door:last-child { grid-column: auto; }
  .door.wa { grid-template-columns: 1fr; padding: 1.1rem; }
  .door.wa .wa-screen { order:-1; }
  .posts li a { grid-template-columns: 1fr; gap:.2rem; }
  .head { flex-wrap: wrap; }
  .journey { grid-template-columns: 1fr; gap:.9rem; padding-left: 2.6rem; }
  .journey::before { display:block; left: 1.45rem; right:auto; top:1.4rem; bottom:1.4rem; border-top:0; border-left: 2px dashed var(--line-2); }
  .journey li { padding-top:0; }
  .journey li::before { left: -1.55rem; top:.2rem; }
  .toast { bottom: 76px; }
  .term-out { height: 12rem; }
}
:root[data-motion="reduced"] { scroll-behavior: auto; }
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="reduced"] .track { padding: 0 1rem; }
:root[data-motion="reduced"] .track > [aria-hidden="true"] { display:none; }
:root[data-motion="reduced"] .marquee { mask-image:none; overflow-x:auto; }
:root[data-motion="reduced"] .reveal, :root[data-motion="reduced"] .tile.enter { opacity:1; transform:none; }
:root[data-motion="reduced"] .il-c { fill: #c8facc; }
:root[data-motion="reduced"] .il-d1 { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) { scroll-behavior: auto; }
  :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :root:not([data-motion="full"]) .track { padding: 0 1rem; }
  :root:not([data-motion="full"]) .track > [aria-hidden="true"] { display:none; }
  :root:not([data-motion="full"]) .marquee { mask-image:none; overflow-x:auto; }
  :root:not([data-motion="full"]) .reveal, :root:not([data-motion="full"]) .tile.enter { opacity:1; transform:none; }
  :root:not([data-motion="full"]) .il-c { fill: #c8facc; }
  :root:not([data-motion="full"]) .il-d1 { opacity: 1; }
}