/* Haktan Sağlam — "boxed-software reference manual" world.
   Each chapter is a full-strength colour board; the content sits on a
   milk-acetate leaf laid over it, so a hint of the board tints the leaf.
   Motion is stepped (two frames, no easing), like a hinged page. */

:root {
  --yellow: #f4c20d;
  --orange: #e8601c;
  --grass: #3f9a43;
  --teal: #169ba4;
  --ultra: #2b44b8;
  --violet: #6a40b0;
  --sienna: #9a4a24;

  --ink: #1c1a16;
  --ink-2: #4b463c;
  --rule: #d3c9b5;
  --rule-strong: #b3a78f;
  --milk: #f7f3ea;
  --panel: #fbf9f3;

  --ok: #1d6a32;
  --prep: #946a00;
  --dev: #b8460f;
  --oss: #0b6f76;

  --display: "Archivo", "Arial Narrow", sans-serif;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pixel: "Jersey 10", var(--mono);

  --cell: 8px;
  --rail: 64px;
  --hinge: 90ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink) var(--yellow); }
body {
  margin: 0;
  background: var(--yellow);
  color: var(--ink);
  font: 400 18px/1.55 var(--serif);
  font-variant-numeric: lining-nums;
  caret-color: var(--orange);
}
::selection { background: var(--ink); color: var(--yellow); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
h1, h2, h3, p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
svg { width: 18px; height: 18px; flex: none; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

/* language switch: both languages live in the HTML, CSS shows one */
html[data-lang="tr"] [lang="en"]:not(html),
html[data-lang="en"] [lang="tr"]:not(html) { display: none !important; }

.mono { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--milk); padding: 8px 12px; }
.skip:focus { left: 16px; }

/* ---------- chapters: board + leaf ---------- */
.chapter {
  background: var(--board);
  padding: calc(var(--cell) * 2) calc(var(--rail) + var(--cell) * 3) calc(var(--cell) * 2) calc(var(--cell) * 3);
  scroll-margin-top: 0;
}
.leaf {
  position: relative;
  --pad-top: calc(var(--cell) * 4);
  max-width: 1480px;
  margin-inline: auto;
  background: color-mix(in srgb, #f8f0df 97%, var(--board));
  border-radius: 12px;
  padding: var(--pad-top) calc(var(--cell) * 6) calc(var(--cell) * 5) calc(var(--cell) * 11);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--board) 50%, #000), 0 24px 40px -28px rgba(0,0,0,.45);
}
.holes::before, .holes::after {
  content: ""; position: absolute; left: 28px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--board);
  box-shadow: inset 0 3px 4px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.6);
}
.holes::before { top: 120px; }
.holes::after { bottom: 120px; }
.spine {
  position: absolute; left: 30px; bottom: 210px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 11px var(--mono); letter-spacing: .14em; color: var(--ink-2);
}

.leaf[data-spine-tr]::after {
  content: attr(data-spine-tr);
  position: absolute; left: 30px; bottom: 200px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 11px var(--mono); letter-spacing: .14em; color: var(--ink-2);
}
html[data-lang="en"] .leaf[data-spine-en]::after { content: attr(data-spine-en); }
.leaf.no-spine::after { display: none; }

/* ---------- tab rail ---------- */
.rail {
  position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; width: var(--rail);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: calc(var(--cell) * 3) 0;
  pointer-events: none;
}
.rail a {
  pointer-events: auto;
  flex: var(--extent, 1) 1 0; min-height: 84px; max-height: 150px;
  margin-left: 12px;
  background: var(--board);
  border-radius: 10px 0 0 10px;
  box-shadow: inset 2px 0 0 rgba(255,255,255,.25), -2px 3px 6px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  font: 400 21px/1 var(--pixel); letter-spacing: .04em; color: var(--ink);
  text-decoration: none;
  transition: margin-left var(--hinge) steps(2, end);
}
.rail a[href="#hakkimda"], .rail a[href="#deneyim"], .rail a[href="#iletisim"] { color: #fff; }
.rail a:hover { margin-left: 6px; }
.rail a.is-current { margin-left: 0; box-shadow: inset 2px 0 0 rgba(255,255,255,.35), -4px 4px 10px rgba(0,0,0,.25); }

/* ---------- shared pieces ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 600 13px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  padding: 13px 18px;
  border: 1.5px solid var(--ink); border-radius: 4px;
  text-decoration: none; color: var(--ink); background: transparent; cursor: pointer;
  transition: transform var(--hinge) steps(2, end), box-shadow var(--hinge) steps(2, end), background var(--hinge) steps(2, end);
}
.btn-solid { background: var(--yellow); }
.btn-line { background: var(--panel); }
.btn:hover { background: var(--ink); color: var(--milk); }
.btn-solid:hover { background: var(--ink); color: var(--yellow); }
.btn:active { transform: translateY(1px); }

.badge {
  display: inline-block; white-space: nowrap;
  font: 600 11px/1 var(--mono); letter-spacing: .06em;
  padding: 6px 8px; border: 1.5px solid currentColor; border-radius: 3px; color: var(--ink-2);
}
.badge-ok { color: var(--ok); }
.badge-prep { color: var(--prep); }
.badge-dev { color: var(--dev); }
.badge-oss { color: var(--oss); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; flex: none; }
.dot-live { background: #2f9a46; animation: blink 2.4s steps(2, end) infinite; }
.dot-prep { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--prep); }
.dot-dev { background: var(--orange); }
.dot-oss { background: var(--teal); }
@keyframes blink { 50% { opacity: .35; } }

.panel {
  background: var(--panel);
  border: 1.5px solid var(--rule-strong);
  border-radius: 7px;
  padding: calc(var(--cell) * 2) calc(var(--cell) * 2.5);
}
.panel-title { font-size: 12px; color: var(--ink-2); margin-bottom: calc(var(--cell) * 1.25); }

.rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); font: 500 16px var(--display); font-stretch: 92%; }
.rows li:first-child { border-top: 0; padding-top: 2px; }
.rows a { display: flex; align-items: center; text-decoration: none; }
.rows a:hover { text-decoration: underline; }
.rows .ok, .rows .prep, .rows .dev, .rows .oss { font: 500 14px var(--serif); }
.rows .ok { color: var(--ok); } .rows .prep { color: var(--prep); } .rows .dev { color: var(--dev); } .rows .oss { color: var(--oss); }
.rows .mono { font-size: 13px; color: var(--ink-2); }

.log td { padding: 6px 0; border-top: 1px solid var(--rule); vertical-align: top; font-size: 13px; }
.log tr:first-child td { border-top: 0; }
.log td:first-child { color: var(--ink-2); width: 84px; padding-right: 12px; }
.log td:last-child { font-family: var(--serif); font-size: 16px; letter-spacing: 0; font-weight: 400; }

.spec { margin: calc(var(--cell) * 3) 0; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 10px 0; border-top: 1px solid var(--rule); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 1px solid var(--rule); }
.spec th { width: 132px; padding-right: 16px; font-size: 12px; color: var(--ink-2); padding-top: 13px; }
.spec td { font-size: 18px; }

.stack { font-size: 12.5px; color: var(--ink-2); margin-top: calc(var(--cell) * 1.5); }
.stack a { color: var(--ink); }
.tool-row .stack, .tool-text .stack, .timeline .stack { font-size: 12.5px; }

.display {
  font-family: var(--display); font-weight: 800; font-stretch: 76%;
  text-transform: uppercase;
  font-size: clamp(44px, 6.1vw, 92px); line-height: .9; letter-spacing: -.005em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--display); font-weight: 800; font-stretch: 78%;
  text-transform: uppercase; font-size: clamp(40px, 4.4vw, 68px); line-height: .92;
}
.h3 { font-family: var(--display); font-weight: 800; font-stretch: 82%; text-transform: uppercase; font-size: 30px; line-height: 1; }
.h4 { font-family: var(--display); font-weight: 800; font-stretch: 85%; text-transform: uppercase; font-size: 22px; line-height: 1; }
.lead { font-size: 21px; line-height: 1.45; max-width: 60ch; margin-top: calc(var(--cell) * 2.5); }
.title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(var(--cell) * 4); }

/* ---------- cover ---------- */
.masthead {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: calc(var(--cell) * 3);
  padding-bottom: calc(var(--cell) * 2); border-bottom: 1.5px solid var(--ink);
}
.wordmark {
  font-family: var(--display); font-weight: 700; font-stretch: 118%;
  font-size: 26px; letter-spacing: .14em; text-decoration: none; white-space: nowrap;
}
.tagline { font-size: 11px; line-height: 1.5; color: var(--ink-2); white-space: nowrap; }
.status { display: flex; justify-content: center; }
.status li { display: flex; flex-direction: column; gap: 4px; padding: 2px 20px; border-left: 1px solid var(--rule-strong); }
.status li:first-child { border-left: 0; }
.status b { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.status li > span { font-size: 14.5px; display: flex; align-items: center; white-space: nowrap; }
.mast-actions { display: flex; gap: 10px; align-items: center; }
.lang-toggle { white-space: nowrap; font-size: 12.5px; padding: 12px 12px; border: 1.5px solid var(--rule-strong); border-radius: 4px; background: transparent; color: var(--ink-2); cursor: pointer; }
.lang-toggle:hover { border-color: var(--ink); }
html[data-lang="tr"] .lt-tr, html[data-lang="en"] .lt-en { color: var(--ink); font-weight: 700; }

.cover-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.cover-main { padding: calc(var(--cell) * 3.5) calc(var(--cell) * 4) calc(var(--cell) * 2) 0; border-right: 1px solid var(--rule-strong); }
.cover-side { padding: calc(var(--cell) * 3) 0 calc(var(--cell) * 2) calc(var(--cell) * 4); display: grid; gap: calc(var(--cell) * 1.5); align-content: start; }
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: auto; padding-top: calc(var(--cell) * 3); font-size: 13px; }
.cover-main { display: flex; flex-direction: column; align-items: flex-start; }
.links a { color: var(--ink-2); }
.links a:hover { color: var(--ink); }

.id-panel { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: center; }
.id-panel img { width: 88px; height: 88px; object-fit: cover; border-radius: 4px; border: 1.5px solid var(--ink); }
.id-name { font: 800 24px/1.05 var(--display); font-stretch: 85%; text-transform: uppercase; }
.id-meta { font-size: 16px; line-height: 1.35; color: var(--ink-2); margin-top: 6px; }

.contents { border-top: 1.5px solid var(--ink); padding-top: calc(var(--cell) * 1.5); }
.contents-title { font-size: 12px; color: var(--ink-2); margin-bottom: calc(var(--cell) * 1.5); }
.contents-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--cell) * 2); }
.entry {
  position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start;
  padding: 12px; background: var(--panel); border: 1.5px solid var(--rule-strong); border-radius: 7px;
  text-decoration: none;
  transition: transform var(--hinge) steps(2, end), border-color var(--hinge) steps(2, end);
}
.entry:hover { transform: translateY(-3px); border-color: var(--ink); }
.entry-img { width: 92px; height: 92px; border-radius: 5px; background: var(--c); padding: 6px; overflow: hidden; }
.entry-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 3px; }
.entry-img.px img { image-rendering: pixelated; object-position: center; }
.entry-txt { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; font-size: 15.5px; line-height: 1.35; color: var(--ink-2); }
.entry-txt b { font: 800 18px/1.05 var(--display); font-stretch: 85%; text-transform: uppercase; color: var(--ink); padding-right: 0; }
.entry .badge { grid-column: 2; justify-self: start; font-size: 11px; padding: 4px 6px; }
.entry-img { grid-row: span 2; }

/* ---------- chapter heads ---------- */
.chapter-head { display: flex; align-items: end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; padding-bottom: calc(var(--cell) * 3); border-bottom: 1.5px solid var(--ink); margin-bottom: calc(var(--cell) * 4); }
.chapter-sub { font-size: 20px; line-height: 1.45; max-width: 56ch; color: var(--ink-2); }

/* ---------- ZingRead ---------- */
.zr { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: calc(var(--cell) * 6); align-items: center; }
.zr .title-row .h2 { margin-right: 4px; }
.note { margin-top: calc(var(--cell) * 4); max-width: 62ch; }
.note p:last-child { font-size: 17px; line-height: 1.5; }
.zr-phones { display: flex; justify-content: center; align-items: center; padding: calc(var(--cell) * 2) 0; }
.zr-phones .device { width: 31%; max-width: 210px; }
.zr-phones .device:nth-child(1) { transform: rotate(-5deg) translateY(18px); margin-right: -22px; }
.zr-phones .device:nth-child(2) { position: relative; z-index: 2; width: 36%; max-width: 240px; }
.zr-phones .device:nth-child(3) { transform: rotate(5deg) translateY(18px); margin-left: -22px; }

/* ---------- phone: one device for every app screen on the page ----------
   Proportions follow a current 6.3" phone (body about 71.5 x 149.6 mm): thin even
   black bezel, a light titanium rim, large continuous corners and a pill island.
   Sizes use container units so the frame scales with the phone's own width. */
.device {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 71.5 / 149.6;
  flex: none;
  border-radius: 17.5% / 8.4%;
  background: #0d0d0f;
  box-shadow: 0 14px 26px -12px rgba(0,0,0,.55);
}
/* titanium rim: drawn on a pseudo-element so its width can follow the phone's own width */
.device::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 .9cqi #8d8a86, inset 0 0 0 1.5cqi #2b2a2c; }
.device-screen { position: absolute; inset: 3.4cqi; border-radius: 14cqi; overflow: hidden; display: flex; flex-direction: column; background: var(--top, #fff); }
.device-screen img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; display: block; }
.device-status { flex: none; height: 13cqi; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 7.5cqi 0 9cqi; color: #111; font: 600 5cqi/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; letter-spacing: 0; }
.device--dark .device-status { color: #fff; }
.device-island { width: 31cqi; height: 9cqi; border-radius: 99px; background: #000; }
.device-status svg { justify-self: end; width: 19cqi; height: auto; }
.device--native .device-screen { background: #fff; }

/* ---------- games: flip leaves ---------- */
.games { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--cell) * 4); }
.flip { perspective: 1800px; }
.flip-inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform calc(var(--hinge) * 2) steps(2, end); }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.face {
  background: var(--panel); border: 1.5px solid var(--rule-strong); border-radius: 9px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.front { height: 100%; display: flex; flex-direction: column; }
.back { transform: rotateY(180deg); padding: calc(var(--cell) * 3); display: flex; flex-direction: column; }
.back .spec { margin: calc(var(--cell) * 2) 0 auto; }
.back .spec td { font-size: 17px; }
.media { aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.face .media { background: var(--c); padding: 10px 10px 0; aspect-ratio: auto; }
.face .media img, .face .media video { aspect-ratio: 16 / 9; border-radius: 4px 4px 0 0; }
.face.back { border-radius: 9px; border-top-width: 1.5px; box-shadow: inset 0 10px 0 var(--c); padding-top: calc(var(--cell) * 4); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media.px img, .media.px video { image-rendering: pixelated; }
.face-body { padding: calc(var(--cell) * 3); display: flex; flex-direction: column; gap: calc(var(--cell) * 1.5); flex: 1; }
.face-body p { font-size: 18px; color: var(--ink-2); }
.flip-btn {
  align-self: flex-start; margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; text-transform: uppercase;
  padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer;
}
.flip-btn:hover { background: var(--ink); color: var(--milk); }
.flip-btn svg { width: 16px; height: 16px; }
.back .flip-btn { margin-top: calc(var(--cell) * 2); }

/* both faces share one grid cell, so the card is as tall as its taller face */
.face { grid-area: 1 / 1; }
.back .feat { margin: calc(var(--cell) * 2) 0 auto; grid-template-columns: 170px 1fr; }
.back .feat dt, .back .feat dd { padding-top: 14px; padding-bottom: 14px; }
.back .feat dd { font-size: 18px; }
.face-body .stack { margin-top: 0; }

/* ---------- described lists (ZingRead features, how a game plays) ---------- */
.feat { display: grid; grid-template-columns: 190px 1fr; margin: calc(var(--cell) * 3) 0; border-bottom: 1px solid var(--rule); }
.feat dt, .feat dd { padding: 11px 0; border-top: 1px solid var(--rule); }
.feat dt { font: 800 15.5px/1.3 var(--display); font-stretch: 88%; text-transform: uppercase; padding-right: 16px; padding-top: 13px; }
.feat dd { font-size: 17.5px; line-height: 1.45; color: var(--ink-2); }
.body { font-size: 18.5px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.method .body { margin-top: calc(var(--cell) * 2); max-width: none; }
.about-col { display: grid; gap: calc(var(--cell) * 3); align-content: start; }
.face-body .stack, .zr-text .stack { font-size: 12.5px; }
.zr-text .body { margin-top: 0; }
.body-flush { margin-top: 0 !important; font-size: 17px; }

/* ---------- cover: name, role, summary ---------- */
.role { font: 600 24px/1.3 var(--display); font-stretch: 90%; color: var(--ink-2); margin-top: 14px; text-wrap: balance; }
.cover-main .lead + .lead { margin-top: 10px; }
.id-panel .id-name { font-size: 19px; line-height: 1.1; }
.rows .more { font: 500 14px var(--serif); color: var(--ink-2); }
.levels li { font-size: 16px; }
.tile-img { display: grid; place-items: center; color: #fff; }
.tile-img svg { width: 44px; height: 44px; }

/* ---------- other projects: a ruled list, deliberately quieter than the chapters above ---------- */
.h2-sm { font-size: clamp(32px, 3.2vw, 48px); }
.chapter-head-sm { margin-bottom: 0; }
.other { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 250px); gap: 8px calc(var(--cell) * 4); align-items: baseline; padding: calc(var(--cell) * 2.5) 0; border-bottom: 1px solid var(--rule); }
.other:last-child { border-bottom: 0; padding-bottom: 0; }
/* small projects as figure plates: each picture sits in a mat of its own board hue */
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--cell) * 3); padding-top: calc(var(--cell) * 4); border-top: 1px solid var(--rule); }
.plate { display: flex; flex-direction: column; background: var(--panel); border: 1.5px solid var(--rule-strong); border-radius: 9px; overflow: hidden; }
.plate-img { aspect-ratio: 16 / 10; background: var(--c); overflow: hidden; }
.plate-photo { padding: 10px 10px 0; }
.plate-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 4px 4px 0 0; transition: transform var(--hinge) steps(2, end); transform-origin: 50% 100%; }
.plate:hover .plate-photo img { transform: scale(1.03); }
/* three whole phones standing in the mat, equal margin above and below */
.plate-phones { display: flex; justify-content: center; align-items: center; gap: 5%; padding: 4.5% 6%; }
.plate-phones .device { height: 100%; width: auto; }
.plate-body { padding: calc(var(--cell) * 2.5) calc(var(--cell) * 2.5) calc(var(--cell) * 3); display: flex; flex-direction: column; gap: calc(var(--cell) * 1.25); flex: 1; }
.plate-body p { font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.plate-body .stack { margin-top: auto; padding-top: 6px; font-size: 12.5px; }
.others > .other-feature { border-bottom: 0; padding-top: calc(var(--cell) * 4); }

/* the one small project shown with its own photo */
.other-feature { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: center; gap: calc(var(--cell) * 5); padding-top: calc(var(--cell) * 3.5); padding-bottom: calc(var(--cell) * 3.5); }
.other-media { position: relative; display: block; border: 1.5px solid var(--rule-strong); border-radius: 7px; overflow: hidden; background: var(--panel); }
.other-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--hinge) steps(2, end); }
.other-media:hover img { transform: scale(1.03); }
.play { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--ink); color: var(--milk); border-radius: 4px; font-size: 12px; text-transform: uppercase; }
.play svg { width: 14px; height: 14px; }
.other-media:hover .play { background: var(--yellow); color: var(--ink); }
.other-text { display: grid; gap: calc(var(--cell) * 1.5); }
.other-text p { max-width: 62ch; }
.other p { font-size: 18px; line-height: 1.45; color: var(--ink-2); }
.other .stack { margin-top: 0; font-size: 12.5px; }

/* ---------- tools ---------- */
.tools { display: grid; gap: calc(var(--cell) * 3); }
.tool-feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; }
.tool-feature .media { border-bottom: 0; border-right: 1.5px solid var(--rule-strong); }
.tool-feature { background: var(--panel); border: 1.5px solid var(--rule-strong); border-radius: 9px; overflow: hidden; }
.tool-feature .media { aspect-ratio: 1200 / 742; background: #e9e4d8; border-bottom: 1.5px solid var(--rule-strong); }
.tool-feature .media img { object-fit: contain; }
.tool-text { padding: calc(var(--cell) * 4); display: flex; flex-direction: column; gap: calc(var(--cell) * 1.5); align-items: flex-start; }
.tool-text p { font-size: 20px; color: var(--ink-2); max-width: 54ch; }
.tool-text .stack { margin-top: 0; }
.tool-list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--cell) * 3); }
.tool-row { display: grid; grid-template-columns: 76px 1fr; gap: 20px; padding: calc(var(--cell) * 2.5); background: var(--panel); border: 1.5px solid var(--rule-strong); border-radius: 9px; }
.tool-row p { font-size: 17px; color: var(--ink-2); margin-top: 10px; }
.tile { width: 76px; height: 76px; border-radius: 6px; background: var(--c); color: #fff; display: grid; place-items: center; }
.tile svg { width: 40px; height: 40px; }
.tile[style*="--yellow"] { color: var(--ink); }

/* ---------- method ---------- */
.method { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(var(--cell) * 3) calc(var(--cell) * 5); align-items: start; }
.agents td:first-child { width: 190px; color: var(--ink); white-space: nowrap; }
.now li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--rule); font-size: 17px; line-height: 1.4; }
.now li:first-child { border-top: 0; padding-top: 2px; }
.now li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; background: var(--ultra); }
.now li:first-child::before { top: 10px; }
.kit { display: grid; grid-template-columns: 110px 1fr; }
.kit dt, .kit dd { padding: 8px 0; border-top: 1px solid var(--rule); }
.kit dt:first-of-type, .kit dd:first-of-type { border-top: 0; padding-top: 2px; }
.kit dt { font-size: 12px; color: var(--ink-2); padding-top: 11px; }
.kit dt:first-of-type { padding-top: 5px; }
.kit dd { font-size: 17px; }

/* ---------- record ---------- */
.record { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(var(--cell) * 6); }
.record .h2 { padding-bottom: calc(var(--cell) * 2.5); border-bottom: 1.5px solid var(--ink); margin-bottom: calc(var(--cell) * 1); }
.timeline td { vertical-align: top; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.timeline td:first-child { width: 150px; font-size: 12px; color: var(--ink-2); padding-top: 22px; padding-right: 16px; }
.timeline b { font: 800 21px/1.15 var(--display); font-stretch: 85%; text-transform: uppercase; }
.timeline p { font-size: 17px; color: var(--ink-2); margin-top: 8px; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: calc(var(--cell) * 6); align-items: end; }
.display-sm { font-size: clamp(44px, 5.4vw, 86px); }
.mail {
  display: inline-flex; align-items: center; gap: 16px; margin-top: calc(var(--cell) * 4);
  font: 800 clamp(28px, 3.6vw, 52px)/1 var(--display); font-stretch: 88%;
  text-decoration: none; border-bottom: 4px solid var(--sienna); padding-bottom: 8px;
  overflow-wrap: anywhere;
}
.mail svg { width: 44px; height: 44px; color: var(--sienna); }
.mail:hover { border-color: var(--ink); }
.contact .rows a { font-weight: 800; text-transform: uppercase; }
.colophon { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: calc(var(--cell) * 6); padding-top: calc(var(--cell) * 2); border-top: 1.5px solid var(--ink); font-size: 12px; color: var(--ink-2); }

/* ---------- small projects as flip cards (same hinge as the game cards) ---------- */
.plate-flip .front { border-top-width: 1.5px; }
.plate-flip .front .flip-btn { margin-top: 4px; }
.plate-flip:hover .front { border-color: var(--ink); }
.plate-back { padding: calc(var(--cell) * 3) calc(var(--cell) * 3) calc(var(--cell) * 2.5); box-shadow: inset 0 10px 0 var(--c); padding-top: calc(var(--cell) * 4); }
.back-text { margin: calc(var(--cell) * 1.5) 0 auto; display: grid; gap: 12px; }
.back-text p { font-size: 17.5px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.feat-compact { grid-template-columns: 150px 1fr; margin: calc(var(--cell) * 1.5) 0 auto; }
.feat-compact dt, .feat-compact dd { padding: 10px 0; }
.feat-compact dt { font-size: 14px; padding-top: 12px; }
.feat-compact dd { font-size: 16px; line-height: 1.4; }

/* ---------- responsive ---------- */
@media (max-width: 1560px) {
  .masthead { grid-template-columns: auto 1fr auto; }
  .tagline { display: none; }
}
@media (max-width: 1240px) {
  .status li { padding: 2px 14px; }
  .contents-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .masthead { grid-template-columns: 1fr auto; }
  .status { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; row-gap: 10px; }
  .status li:first-child { padding-left: 0; }
  .cover-grid { grid-template-columns: 1fr; }
  .cover-main { border-right: 0; padding-right: 0; }
  .cover-side { padding: 0 0 calc(var(--cell) * 4); grid-template-columns: 1fr 1fr; }
  .cover-side .id-panel { grid-column: 1 / -1; }
  .zr, .record, .contact, .method, .tool-feature, .tool-list { grid-template-columns: 1fr; }
  .other { grid-template-columns: 1fr; gap: 6px; }
  .other-feature { gap: calc(var(--cell) * 2.5); }
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-feature .media { border-right: 0; border-bottom: 1.5px solid var(--rule-strong); }
  .games { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --rail: 0px; }
  body { font-size: 17px; padding-bottom: 60px; }
  .chapter { padding: 10px; }
  .leaf { padding: 28px 18px 32px 40px; border-radius: 10px; }
  .holes::before, .holes::after { left: 12px; width: 14px; height: 14px; }
  .spine, .leaf[data-spine-tr]::after { display: none; }
  .rail {
    top: auto; left: 0; height: 58px; width: auto; flex-direction: row; align-items: flex-end; justify-content: flex-start;
    padding: 0 8px; gap: 3px; background: transparent;
    overflow-x: auto; scrollbar-width: none; pointer-events: auto;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail a {
    writing-mode: horizontal-tb; flex: 0 0 auto; min-height: 0; max-height: none; height: 44px; margin-left: 0;
    padding: 0 14px; border-radius: 9px 9px 0 0; font-size: 18px; box-shadow: 0 -2px 6px rgba(0,0,0,.18);
    transition: height var(--hinge) steps(2, end);
  }
  .rail a:hover { margin-left: 0; }
  .rail a.is-current { height: 54px; }
  .masthead { grid-template-columns: 1fr; gap: 16px; }
  .wordmark { font-size: 21px; }
  .mast-actions { justify-content: space-between; }
  .status { grid-row: auto; flex-direction: column; row-gap: 0; }
  .status li { flex-direction: row; justify-content: space-between; align-items: center; border-left: 0; padding: 7px 0; border-top: 1px solid var(--rule); }
  .status li > span { font-size: 14px; }
  .cover-main { padding-top: calc(var(--cell) * 4); }
  .cover-side { grid-template-columns: 1fr; }
  .contents-row { grid-template-columns: 1fr; }
  .lead { font-size: 20px; }
  .spec th { width: 96px; }
  /* phones: no flip; the "how it plays" face sits open under the card */
  .flip-inner { display: block; height: auto; transition: none; }
  .front { height: auto; }
  .flip.is-flipped .flip-inner { transform: none; }
  .face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .back { transform: none; margin-top: 10px; }
  .back .h3, .back .h4, .flip-btn { display: none; }
  .plate-back { padding-top: calc(var(--cell) * 3); }
  .back-text p { font-size: 17px; }
  .feat-compact { grid-template-columns: 1fr; }
  .back .feat { margin-top: 0; }
  .back .feat dt { padding-bottom: 0; }
  .back .feat dd { padding-top: 4px; }
  .plates { grid-template-columns: 1fr; }
  .feat, .back .feat { grid-template-columns: 1fr; }
  .feat dt { padding-bottom: 0; }
  .feat dd { border-top: 0; padding-top: 4px; }
  .role { font-size: 20px; }
  .timeline td:first-child { width: 92px; }
  .agents td:first-child { width: 110px; }
  .kit { grid-template-columns: 86px 1fr; }
  .tool-row { grid-template-columns: 56px 1fr; gap: 14px; }
  .tile { width: 56px; height: 56px; }
  .tile svg { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}