/* ================= header (reference: .header-bar / .header-item) ================= */
header { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-h); padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; z-index: 1100; background: var(--bg); border-bottom: 2px solid var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,.1); transition: background-color 420ms, color 420ms, border-color 420ms; }
.top-nav { height: 100%; display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 0 1rem; box-sizing: border-box; }
.nav-btn { display: flex; align-items: center; gap: 7px; padding: 5px 12px; background: var(--bg); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,.12);
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; text-transform: lowercase; line-height: normal; white-space: nowrap;
  transition: transform .1s steps(2, end), box-shadow .1s steps(2, end); }
.nav-btn span { display: block; }
.nav-btn svg { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }
.nav-btn:hover, .nav-btn.active { background: var(--ink); color: var(--bg); }
.nav-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(0,0,0,.15); }
.nav-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,.1); }
.nav-logo { display: flex; align-items: center; justify-content: center; }
.nav-logo img { width: 38px; height: auto; display: block; transition: transform .2s steps(4, end); }
[data-theme="light"] .nav-logo img { filter: invert(1); }
.nav-logo:hover img { transform: scale(1.12); }

/* ================= inner pages ================= */
main { position: relative; z-index: 1; }
.section:not(#home-section) { min-height: 100vh; min-height: 100dvh; padding: calc(var(--nav-h) + 64px) var(--pad) 130px; max-width: 980px; margin: 0 auto; }
.section h2 { font-style: italic; font-weight: 400; font-size: clamp(40px, 6vw, 72px); line-height: 1.2; margin: 0 0 28px; }
.prose { max-width: 60ch; color: var(--ink-dim); }
.prose p { margin: 0 0 1em; }
.prose .note { margin-top: 2.2em; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { border: 2px solid var(--ink); padding: 20px; background: var(--bg); box-shadow: 3px 3px 0 rgba(0,0,0,.12); transition: transform .1s steps(2, end), box-shadow .1s steps(2, end); display: block; }
.card:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(0,0,0,.15); }
.card h3 { margin: 0 0 6px; font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.25; }
.card p { margin: 0 0 10px; color: var(--ink-dim); font-size: 18px; }
.tags span { margin-right: 10px; }

/* ================= front page (reference: #fg-plane, .link-item, #title-source) ================= */
#home-section { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 6vw; pointer-events: none; }
.links { display: flex; flex-direction: column; gap: .55rem; pointer-events: all; }
.link-item { display: flex; align-items: center; gap: 1.1rem; color: var(--ink);
  font-family: var(--font-display); font-style: italic; font-weight: 400; line-height: 1; letter-spacing: .04em;
  font-size: calc(clamp(1.4rem, 2.8vw, 2.1rem) * var(--cs));
  opacity: 0; animation: .5s steps(10, end) forwards slide-in; animation-delay: calc(var(--i) * 85ms + 200ms);
  transition: gap .18s steps(4, end); pointer-events: all; }
.link-item:hover { gap: 1.9rem; }
.link-item .icon { width: 1.35em; height: 1.35em; flex-shrink: 0; display: block; transition: opacity .15s steps(3, end); }
.link-item .icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.link-item:hover .icon { opacity: .55; }
.link-item .lbl { display: block; }
html[lang="en"][data-theme="light"] .link-item { font-weight: 800; }
html:not([lang="en"]) .link-item { letter-spacing: 0; }
@keyframes slide-in { from { opacity: 0; translate: -20px 0; } to { opacity: 1; translate: 0 0; } }

#title-source { margin: 0; color: var(--ink); text-transform: lowercase; white-space: nowrap; user-select: none; pointer-events: all; cursor: default; outline: none;
  font-family: var(--font-display); font-weight: 400; font-style: italic; letter-spacing: -2px; line-height: 1.05;
  font-size: calc(min(10.5rem, 15vw) * var(--ts)); }
html:not([lang="en"]) #title-source { letter-spacing: 0; text-transform: none; }
#title-source .tch { display: inline-block; }
#title-source .tld { display: inline-block; width: 0; opacity: 0; white-space: nowrap; transition: width .3s, opacity .3s; }
@media (hover: hover) { #title-source:hover .tld, #title-source:focus .tld { width: 1.3em; opacity: 1; } }

/* pixel text (JS draws the text into a low-res canvas, like the reference's #ui-canvas) */
#ui-canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; filter: url(#pixel-threshold); }
.px-on #ui-canvas { display: block; }
.px-on .link-item, .px-on #title-source { color: transparent; }

/* ================= controls: language + theme (reference: .controls-overlay) ================= */
.controls { position: fixed; right: 2rem; bottom: 2rem; z-index: 10000; display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; pointer-events: none; }
.controls > * { pointer-events: auto; }
.lang { display: flex; flex-direction: column; gap: 4px; background: var(--bg); border: 2px solid var(--ink); padding: 2px; box-shadow: 4px 4px 0 rgba(0,0,0,.1); image-rendering: pixelated; }
.lang-btn { background: none; border: 0; color: var(--ink); padding: 4px 8px; font-family: 'Press Start 2P', cursive; font-size: 9px; line-height: 1; text-align: center; opacity: .5; transition: background .1s, color .1s; }
.lang-btn.active { background: var(--ink); color: var(--bg); opacity: 1; }
.lang-btn:hover:not(.active) { opacity: 1; background: var(--ink); color: var(--bg); }

.theme-toggle { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden;
  background: var(--bg); color: var(--ink); border: 2px solid var(--ink); box-shadow: 6px 6px 0 rgba(0,0,0,.1); image-rendering: pixelated;
  transition: transform .2s steps(4), box-shadow .2s steps(4), background-color .2s steps(4), color .2s steps(4); -webkit-tap-highlight-color: transparent; }
.theme-toggle:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 rgba(0,0,0,.2); background: var(--ink); color: var(--bg); }
.theme-toggle:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(0,0,0,.1); }
.theme-toggle .mode { width: 22px; height: 22px; overflow: visible; transition: transform .75s cubic-bezier(.34, 1.4, .5, 1); }

/* moon <-> sun morph: the core disc shrinks, the cut-out slides away, rays spin in */
.theme-toggle .core { transform-origin: 12px 12px; transform: scale(1); transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.theme-toggle .cut  { transform: translate(4px, -4px); transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.theme-toggle .rays { transform-origin: 12px 12px; transform: rotate(-90deg) scale(.3); opacity: 0; transition: transform .7s cubic-bezier(.34, 1.4, .5, 1), opacity .35s; }
[data-theme="light"] .theme-toggle .mode { transform: rotate(180deg); }
[data-theme="light"] .theme-toggle .core { transform: scale(.55); }
[data-theme="light"] .theme-toggle .cut  { transform: translate(18px, -18px); }
[data-theme="light"] .theme-toggle .rays { transform: rotate(0) scale(1); opacity: 1; transition-delay: .12s, .12s; }

/* sleepy z's (reference: #particles, VT323 12px, stepped float) */
.zzz { position: absolute; inset: 0; pointer-events: none; }
.zzz span { position: absolute; color: currentColor; font-family: VT323, monospace; font-size: 12px; line-height: 1; opacity: 0; }
.zzz span::after { content: 'z'; }
.zzz .p1 { left: 10%; top: 20%; } .zzz .p2 { left: 20%; top: 10%; } .zzz .p3 { left: 15%; top: 30%; }
:root:not([data-theme="light"]) .zzz .p1 { animation: float-zzz 2s steps(8) infinite; }
:root:not([data-theme="light"]) .zzz .p2 { animation: float-zzz 2s steps(8) .6s infinite; }
:root:not([data-theme="light"]) .zzz .p3 { animation: float-zzz 2s steps(8) 1.2s infinite; }
@keyframes float-zzz { 0% { transform: translate(0, 0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translate(10px, -20px); opacity: 0; } }

/* theme switch: circular reveal growing from the toggle button (View Transitions API) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
html.theme-vt *:not(.theme-toggle):not(.theme-toggle *), html.theme-vt *::before, html.theme-vt *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .link-item { opacity: 1; }
}

/* ================= mobile (reference breakpoint: 768px) ================= */
@media (max-width: 768px) {
  #home-section { flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 5vw 10vh; gap: 5vh; }
  #title-source { font-size: calc(min(10.5rem, 21vw) * var(--ts)); }
  #title-source .tld { display: none; }
  .link-item { font-size: calc(clamp(1.05rem, 5vw, 1.5rem) * var(--cs)); }
  .controls { right: 1.5rem; bottom: 1.5rem; }
  .section:not(#home-section) { padding-bottom: 190px; }
}
@media (max-width: 420px) {
  .top-nav { gap: 1rem; }
  .nav-btn svg { display: none; }
}
@supports (padding: env(safe-area-inset-bottom)) {
  .controls { bottom: calc(2rem + env(safe-area-inset-bottom)); }
  @media (max-width: 768px) { .controls { bottom: calc(1.5rem + env(safe-area-inset-bottom)); } }
}

/* ================= touch + small screens =================
   1. taps never leave a "stuck hover" behind
   2. every control is at least ~44px to hit with a thumb
   3. language picker collapses to one button on phones (tap it to open the list)            */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

@media (hover: none) {
  .nav-btn:hover:not(.active) { background: var(--bg); color: var(--ink); }
  .nav-btn:hover { transform: none; box-shadow: 3px 3px 0 rgba(0,0,0,.12); }
  .nav-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,.1); }
  .nav-logo:hover img { transform: none; }
  .theme-toggle:hover { transform: none; box-shadow: 6px 6px 0 rgba(0,0,0,.1); background: var(--bg); color: var(--ink); }
  .theme-toggle:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(0,0,0,.1); }
  .lang-btn:hover:not(.active) { opacity: .5; background: none; color: var(--ink); }
  .link-item:hover { gap: 1.1rem; }
  .link-item:hover .icon { opacity: 1; }
  .card:hover { transform: none; box-shadow: 3px 3px 0 rgba(0,0,0,.12); }
}

@media (max-width: 768px), (pointer: coarse) {
  .top-nav { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }
  .nav-btn { padding: 8px 14px; font-size: 13px; }

  /* front page: bigger tap area for the links, clear of the notch and the bottom bar */
  #home-section { padding-left: max(5vw, env(safe-area-inset-left, 0px)); padding-right: max(5vw, env(safe-area-inset-right, 0px)); }
  .links { gap: .1rem; }
  .link-item { padding: .5rem 0; }

  /* language + theme: one row, bottom-right, both 48px */
  .controls { flex-direction: row; align-items: flex-end; gap: .75rem; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .theme-toggle { box-shadow: 4px 4px 0 rgba(0,0,0,.1); }
  .lang { box-shadow: 4px 4px 0 rgba(0,0,0,.1); }
  .lang-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; font-size: 10px; }
  .lang:not(.open) .lang-btn:not(.active) { display: none; }
  .lang:not(.open) .lang-btn.active::after { content: ''; position: absolute; right: 4px; bottom: 4px; border: 3px solid transparent; border-bottom: 4px solid currentColor; border-top: 0; }
  .lang.open .lang-btn:not(.active) { opacity: .85; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .section:not(#home-section) { padding-bottom: 120px; }
}