/* ============================================================
   IRON: the Pulgaa theme
   Iron-black surfaces, chalk text, one competition-plate red.
   Condensed uppercase display type, hard 3px corners, and a
   knurled-steel texture used as the only ornament.
   ============================================================ */

@property --kg { syntax: '<integer>'; inherits: false; initial-value: 20; }

:root {
  --iron-0: #0C0C0D;
  --iron-1: #131315;
  --iron-2: #1A1A1D;
  --iron-3: #27272B;
  --iron-4: #3B3B41;
  --chalk: #EFECE6;
  --chalk-2: #B6B1A8;
  --chalk-3: #827D76;
  --red: #E5392B;
  --red-ink: #FF5A47;
  --red-wash: rgba(229, 57, 43, .12);

  --f-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --wrap: 1280px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --r: 3px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.75, 0, .2, 1);
  --enter: .1s;
  --knurl: repeating-linear-gradient(45deg, var(--iron-4) 0 1px, transparent 1px 5px),
           repeating-linear-gradient(-45deg, var(--iron-4) 0 1px, transparent 1px 5px);

  /* Names the interactive writeup components (writeup-interactive.css/js) read */
  --bg-deep: var(--iron-0);
  --bg-surface: var(--iron-1);
  --bg-elevated: var(--iron-2);
  --text: var(--chalk);
  --text-muted: var(--chalk-2);
  --text-dim: var(--chalk-3);
  --gold: var(--red-ink);
  --gold-dim: var(--red-wash);
  --gold-border: rgba(229, 57, 43, .4);
  --blue: #9DB0C4;
  --sage: var(--chalk-2);
  --radius-sm: var(--r);
  --radius-md: 4px;
  --radius-lg: 6px;
}

/* The hero waits for the loader's curtain before it rises */
html.is-loading { --enter: 1.3s; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; scrollbar-color: var(--iron-4) var(--iron-0); }
html.is-locked { overflow: hidden; }
body {
  background: var(--iron-0);
  color: var(--chalk-2);
  font: 400 1.0625rem/1.65 var(--f-sans);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
ol, ul { list-style: none; }
::selection { background: var(--red); color: var(--iron-0); }
:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 1rem; z-index: 200; padding: .6rem 1rem; background: var(--red); color: var(--iron-0); font-weight: 700; }
.skip:focus { left: 1rem; }

/* Display type: every big heading shares the same condensed black cut */
.hero-name, .page-title, .section-head h2, .cta-title, .post-title, .group-title, .row-title,
.tile-title, .feature-title, .record-value, .missed-title, .wordmark, .menu-link,
.pager-title, .ld-num, .collection-title, .post-content h2, .explore-title, .result-rank {
  font-family: var(--f-sans);
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--chalk);
  line-height: .9;
  letter-spacing: 0;
  word-spacing: .1em;
  text-wrap: balance;
}

/* Small uppercase labels: always beside or below what they describe */
.mono-label, .row-when, .row-time, .record-label, .tile-foot, .page-stats, .group-meta,
.post-meta, .feature-meta, .pager-label, .footer-base, .ld-unit, .toc-box summary, .result-detail, .glance dt, .tl-when, .bg-name small {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--chalk-3);
}

.knurl { height: 10px; background: var(--knurl); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  height: 3.25rem; padding: 0 1.6rem;
  border: 1px solid transparent; border-radius: var(--r);
  font: 800 .92rem/1 var(--f-sans); font-stretch: 75%; letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn i { font-size: .85em; transition: transform .3s var(--ease); }
.btn:hover .fa-arrow-right { transform: translateX(4px); }
.btn:hover .fa-arrow-down { transform: translateY(2px); }
.btn-red { background: var(--red); color: var(--iron-0); }
.btn-red:hover { background: var(--chalk); }
.btn-line { border-color: var(--iron-4); color: var(--chalk); background: transparent; }
.btn-line:hover { border-color: var(--chalk); }
.btn-sm { height: 2.5rem; padding: 0 1.05rem; font-size: .8rem; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 4.5rem;
  border-bottom: 1px solid transparent;
  transition: transform .45s var(--ease), background .3s, border-color .3s;
  view-transition-name: topbar;
}
.topbar.is-scrolled { background: rgba(12, 12, 13, .88); border-bottom-color: var(--iron-3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.topbar.is-hidden { transform: translateY(-100%); }
.topbar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.wordmark { display: inline-flex; align-items: center; gap: .65rem; font-size: 1.65rem; line-height: 1; }
.mark { width: 34px; height: 16px; flex: none; fill: var(--chalk-3); transition: transform .5s var(--ease); }
.mark .mark-plate { fill: var(--red); }
.wordmark:hover .mark { transform: translateY(-3px); }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav-link {
  position: relative; padding: .55rem .9rem;
  font: 700 .82rem/1 var(--f-sans); font-stretch: 85%; letter-spacing: .09em; text-transform: uppercase;
  color: var(--chalk-2); transition: color .2s;
}
.nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .05rem; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-link:hover, .nav-link.is-current { color: var(--chalk); }
.nav-link:hover::after, .nav-link.is-current::after { transform: scaleX(1); }
.nav .btn { margin-left: 1rem; }

.menu-btn { display: none; position: relative; width: 2.75rem; height: 2.75rem; border: 1px solid var(--iron-4); border-radius: var(--r); background: none; cursor: pointer; }
.menu-btn span { position: absolute; left: .7rem; right: .7rem; height: 2px; background: var(--chalk); transition: transform .35s var(--ease); }
.menu-btn span:first-child { top: 1.05rem; }
.menu-btn span:last-child { bottom: 1.05rem; }
html.menu-open .menu-btn span:first-child { transform: translateY(4.2px) rotate(45deg); }
html.menu-open .menu-btn span:last-child { transform: translateY(-4.2px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 7rem var(--gutter) 2rem; background: var(--iron-0);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .6s var(--ease-io), visibility 0s .6s;
}
html.menu-open { overflow: hidden; }
html.menu-open .menu { clip-path: inset(0); visibility: visible; transition: clip-path .6s var(--ease-io), visibility 0s; }
html.menu-open .topbar { background: transparent; border-bottom-color: transparent; transform: none; backdrop-filter: none; }
/* Phone menu: one row per page, big enough to tap without shouting */
.menu-links { border-top: 1px solid var(--iron-3); }
.menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem .2rem; border-bottom: 1px solid var(--iron-3);
  font-size: clamp(1.45rem, 6.2vw, 2rem); font-weight: 700; font-stretch: 75%; letter-spacing: .04em; line-height: 1;
  opacity: 0; transform: translateY(16px); transition: transform .5s var(--ease), opacity .4s, color .2s;
}
.menu-link i { font-size: .5em; color: var(--chalk-3); transition: transform .3s var(--ease), color .2s; }
html.menu-open .menu-link { opacity: 1; transform: none; transition-delay: calc(.15s + var(--i) * .04s); }
.menu-link:hover, .menu-link.is-current { color: var(--red); }
.menu-link:hover i, .menu-link.is-current i { color: var(--red); }
.menu-link:hover i { transform: translateX(4px); }
.menu-foot { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; border-top: 1px solid var(--iron-3); padding-top: 1.5rem; }
.menu-mail { font-family: var(--f-mono); font-size: .9rem; color: var(--chalk-2); }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(2.5rem, 4vw, 3.25rem); padding-top: 6.5rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.hero-name { font-size: clamp(4rem, 10.4vw, 9rem); line-height: .82; margin-bottom: 2rem; }
.hero-name .dot { color: var(--red); font-style: normal; }
.hero-lede { max-width: 33rem; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--chalk-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* Clips only vertically, so the rising line is hidden below but a wide word never gets cut off at the side */
.mask { display: block; overflow-x: visible; overflow-y: clip; padding-block: .02em .04em; }
.mask > span { display: block; transform: translateY(108%); animation: rise 1s var(--ease) calc(var(--enter) + var(--d, 0s)) forwards; }
.fade-in { opacity: 0; transform: translateY(16px); animation: fade-up .9s var(--ease) calc(var(--enter) + var(--d, 0s)) forwards; }
@keyframes rise { to { transform: none; } }
@keyframes fade-up { to { opacity: 1; transform: none; } }

/* Portrait, in its original colours */
.photo { position: relative; aspect-ratio: 4 / 5; }
.photo::before {
  content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; background: var(--red);
  clip-path: inset(100% 0 0 0); animation: wipe-up .9s var(--ease-io) calc(var(--enter) + .25s) forwards;
}
.photo img {
  position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%;
  clip-path: inset(0 0 100% 0); animation: wipe-down 1s var(--ease-io) calc(var(--enter) + .1s) forwards;
}
@keyframes wipe-up { to { clip-path: inset(0); } }
@keyframes wipe-down { to { clip-path: inset(0); } }
.hero-photo { justify-self: end; width: min(100%, 22.5rem); margin: 0 1.25rem 3.25rem 0; }

/* ---------- Personal records board ---------- */
.records { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-bottom: 1px solid var(--iron-3); }
.records .knurl { grid-column: 1 / -1; }
.record { padding: 1.6rem 1.5rem 1.8rem; border-left: 1px solid var(--iron-3); }
.record:nth-child(2) { border-left: 0; padding-left: 0; }
.record-value { display: block; font-size: clamp(2.75rem, 5.2vw, 4.6rem); line-height: .85; }
.record-label { display: block; margin-top: .75rem; line-height: 1.4; }

/* ---------- Sections ---------- */
.section { padding-top: clamp(5rem, 10vw, 8.5rem); }
.section-tight { padding-top: clamp(2.5rem, 5vw, 3.75rem); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.4rem; border-bottom: 2px solid var(--chalk); }
.section-head h2 { font-size: clamp(2.9rem, 7vw, 6rem); line-height: .84; }
.more {
  display: inline-flex; align-items: center; gap: .55rem; padding: .4rem 0; white-space: nowrap;
  font: 700 .8rem/1 var(--f-sans); font-stretch: 85%; letter-spacing: .09em; text-transform: uppercase;
  color: var(--chalk-2); transition: color .2s;
}
.more i { transition: transform .3s var(--ease); }
.more:hover { color: var(--red-ink); }
.more:hover i { transform: translateX(4px); }

/* ---------- Rows (writeups, posts): a training-log table ---------- */
.row { border-bottom: 1px solid var(--iron-3); }
.row[hidden] { display: none; }
.row-link {
  position: relative; isolation: isolate; display: grid; align-items: center; gap: 2rem;
  grid-template-columns: 12rem minmax(0, 1fr) 7.25rem 4rem 1.25rem;
  padding: 1.65rem 0;
}
.row-link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red);
  transform: scaleY(0); transition: transform .35s var(--ease);
}
.row-link::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--iron-1), transparent 85%); opacity: 0; transition: opacity .35s;
}
.row-link > * { transition: transform .4s var(--ease), color .25s; }
.row-link:hover::before { transform: scaleY(1); }
.row-link:hover::after { opacity: 1; }
.row-link:hover > * { transform: translateX(1.1rem); }
.row-when { display: flex; flex-direction: column; gap: .3rem; align-self: start; padding-top: .45rem; line-height: 1.35; }
.row-when b { font-weight: 500; color: var(--chalk-2); }
.row-main { min-width: 0; }
.row-title { display: block; font-size: clamp(1.65rem, 2.6vw, 2.3rem); line-height: .92; overflow-wrap: anywhere; }
.row-desc { margin-top: .55rem; font-size: .95rem; line-height: 1.5; color: var(--chalk-3); display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.row-level { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--chalk-3); }
.row-time { text-align: right; }
.row-arrow { color: var(--chalk-3); font-size: .9rem; }
.row-link:hover .row-arrow { color: var(--red-ink); }

/* Difficulty: plates loaded on a bar */
.lift { display: inline-flex; align-items: center; gap: .55rem; font: 600 .72rem/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--chalk-3); white-space: nowrap; }
.lift svg { width: 30px; height: 14px; flex: none; }
.lift-bar { fill: var(--iron-4); }
.lift-plate { fill: none; stroke: var(--iron-4); stroke-width: 1; }
.lift-plate.on { fill: currentColor; stroke: none; }
.lift-medium { color: var(--chalk); }
.lift-hard { color: var(--red-ink); }

/* ---------- Project tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--iron-3); border-bottom: 1px solid var(--iron-3); }
.tile { min-width: 0; background: var(--iron-0); }
.tile-wide { grid-column: 1 / -1; }
.tile-link { display: grid; height: 100%; transition: background .35s var(--ease); }
.tile-link:hover { background: var(--iron-1); }
.tile-wide .tile-link { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.tile-body { display: flex; flex-direction: column; gap: 1rem; min-height: 21rem; padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.25rem); }
.tile-title { font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: .86; transition: color .25s; }
.tile-link:hover .tile-title { color: var(--red-ink); }
.tile-sub { margin-top: -.35rem; font: 700 .92rem/1.3 var(--f-sans); font-stretch: 85%; letter-spacing: .05em; text-transform: uppercase; color: var(--chalk-2); }
.tile-desc { max-width: 46ch; font-size: .98rem; line-height: 1.6; color: var(--chalk-3); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.25rem; line-height: 1.5; }
.tile-arrow { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--iron-4); border-radius: var(--r); color: var(--chalk); transition: background .25s, border-color .25s, color .25s; }
.tile-arrow i { transition: transform .3s var(--ease); }
.tile-link:hover .tile-arrow { background: var(--red); border-color: var(--red); color: var(--iron-0); }
.tile-link:hover .tile-arrow i { transform: translateX(2px); }
.tile-cover { position: relative; overflow: hidden; min-height: 21rem; border-left: 1px solid var(--iron-3); }
.tile-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; filter: grayscale(1) brightness(.7); transition: filter .7s var(--ease), transform 1s var(--ease); }
.tile-link:hover .tile-cover img { filter: grayscale(0) brightness(.95); transform: scale(1.03); }
.tiles-page { margin-top: .5rem; border-top: 2px solid var(--chalk); }


/* ---------- Contact ---------- */
.cta { position: relative; overflow: hidden; margin-top: clamp(6rem, 11vw, 10rem); padding-block: clamp(4.5rem, 9vw, 8rem); border-top: 1px solid var(--iron-3); }
.cta-inner { position: relative; }
.cta-title { max-width: 11ch; font-size: clamp(3.4rem, 10vw, 9rem); line-height: .82; }
.cta-copy { max-width: 34rem; margin-top: 1.75rem; font-size: 1.15rem; color: var(--chalk-2); }
.cta-mail {
  display: inline-block; margin-top: 2.25rem; padding: .1rem .2rem .3rem;
  font: 800 clamp(1.35rem, 3.6vw, 2.6rem)/1.15 var(--f-sans); font-stretch: 75%; color: var(--chalk); overflow-wrap: anywhere;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 100% 3px no-repeat;
  transition: background-size .45s var(--ease), color .3s;
}
.cta-mail:hover { background-size: 100% 100%; color: var(--iron-0); }
.cta-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
/* A 25 kg plate seen face-on, turning as you scroll */
.cta-plate { position: absolute; right: max(-14rem, calc((100vw - var(--wrap)) / 2 - 12rem)); top: 50%; width: clamp(26rem, 48vw, 42rem); transform: translateY(-50%); pointer-events: none; }
.cta-plate-spin { transform: rotate(var(--spin, 0deg)); }
.pl-face { fill: var(--iron-1); stroke: var(--iron-3); stroke-width: 2; }
.pl-line { fill: none; stroke: var(--iron-3); stroke-width: 1.5; }
.pl-hub { fill: var(--iron-2); stroke: var(--iron-4); stroke-width: 2; }
.pl-hole { fill: var(--iron-0); }
.pl-text { fill: var(--iron-4); font: 900 26px var(--f-sans); font-stretch: 62%; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--iron-3); }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; padding-block: 2.75rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.footer-nav a { font: 700 .8rem/1 var(--f-sans); font-stretch: 85%; letter-spacing: .09em; text-transform: uppercase; color: var(--chalk-2); transition: color .2s; }
.footer-nav a:hover { color: var(--chalk); }
.footer-social { display: flex; gap: .5rem; }
.footer-social a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--iron-4); border-radius: var(--r); color: var(--chalk-2); transition: background .25s, border-color .25s, color .25s; }
.footer-social a:hover { background: var(--red); border-color: var(--red); color: var(--iron-0); }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.4rem 2.25rem;
  background: linear-gradient(var(--iron-3), var(--iron-3)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.to-top { transition: color .2s; }
.to-top:hover { color: var(--chalk); }

/* ---------- Page headers (index pages) ---------- */
.page-head { padding-top: clamp(7.5rem, 11vw, 9.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
/* Sized so the longest title, ACHIEVEMENTS, fits on one line from phone to desktop */
.page-title { font-size: clamp(3.5rem, 12.6vw, 11.5rem); line-height: .8; }
.page-sub { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.page-lede { max-width: 38rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--chalk-2); }
.page-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.page-stats span + span::before { content: ""; display: inline-block; width: .7rem; height: 2px; margin-right: 1.5rem; background: var(--red); vertical-align: middle; transform: translateY(-1px); }

/* ---------- Blog tabs ---------- */
.tabs-inner { display: flex; gap: 2.25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--iron-3); }
.tab {
  position: relative; flex: none; display: inline-flex; align-items: baseline; gap: .5rem; padding: 1.15rem 0 1.05rem;
  font: 800 1.05rem/1 var(--f-sans); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase;
  color: var(--chalk-3); transition: color .2s;
}
.tab span { font: 500 .72rem/1 var(--f-mono); letter-spacing: 0; color: var(--chalk-3); }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.tab:hover, .tab.is-current { color: var(--chalk); }
.tab:hover::after, .tab.is-current::after { transform: scaleX(1); }

/* ---------- Writeups index ---------- */
.toolbar {
  position: sticky; top: 4.5rem; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem;
  padding-block: 1.25rem; background: rgba(12, 12, 13, .94); border-bottom: 1px solid var(--iron-3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: top .45s var(--ease);
}
html:has(.topbar.is-hidden) .toolbar { top: 0; }
.search { flex: 1 1 20rem; display: flex; align-items: center; gap: .8rem; height: 3rem; padding: 0 .85rem 0 1rem; border: 1px solid var(--iron-4); border-radius: var(--r); background: var(--iron-1); color: var(--chalk-3); transition: border-color .2s; }
.search:focus-within { border-color: var(--chalk-2); }
.search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font-size: 1rem; color: var(--chalk); }
.search input::placeholder { color: var(--chalk-3); }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }
.search kbd { padding: .15rem .45rem; border: 1px solid var(--iron-4); border-radius: var(--r); font: 500 .72rem/1.2 var(--f-mono); color: var(--chalk-3); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; height: 2.6rem; padding: 0 .95rem;
  border: 1px solid var(--iron-4); border-radius: var(--r); background: none; cursor: pointer;
  font: 700 .78rem/1 var(--f-sans); font-stretch: 85%; letter-spacing: .08em; text-transform: uppercase; color: var(--chalk-2);
  transition: background .2s, border-color .2s, color .2s;
}
.chip span { font: 500 .7rem/1 var(--f-mono); letter-spacing: 0; color: var(--chalk-3); }
.chip:hover { border-color: var(--chalk-2); color: var(--chalk); }
.chip.is-on { background: var(--chalk); border-color: var(--chalk); color: var(--iron-0); }
.chip.is-on span { color: var(--iron-4); }
.chip-tag { text-transform: none; letter-spacing: .02em; }
.chip-tag[hidden] { display: none; }
.filter-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 3rem 0; color: var(--chalk-2); }
.filter-empty[hidden] { display: none; }

.group { padding-top: clamp(3.25rem, 6vw, 4.75rem); }
.group[hidden] { display: none; }
.group-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--chalk); }
.group-title { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: .86; }
.group-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; }
.group-meta a { display: inline-flex; align-items: center; gap: .45rem; color: var(--chalk); border-bottom: 1px solid var(--red); padding-bottom: .1rem; transition: color .2s; }
.group-meta a:hover { color: var(--red-ink); }

/* ---------- Article pages ---------- */
.progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; }
.post-header { padding-top: clamp(8.5rem, 14vw, 11rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.post-title { max-width: 15ch; font-size: clamp(3.2rem, 9vw, 8rem); line-height: .84; overflow-wrap: anywhere; }
.post-title-long { max-width: 20ch; font-size: clamp(2.8rem, 6.6vw, 6rem); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.75rem; margin-top: 2rem; }
.post-meta a { display: inline-flex; align-items: center; gap: .45rem; color: var(--chalk); border-bottom: 1px solid var(--red); padding-bottom: .1rem; transition: color .2s; }
.post-meta a:hover { color: var(--red-ink); }
.post-meta-strong { color: var(--chalk-2); }
.post-dek { max-width: 46rem; margin-top: 1.5rem; font-size: clamp(1.1rem, 1.55vw, 1.3rem); line-height: 1.55; color: var(--chalk-2); }
.post-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.5rem; }
.tag { display: inline-flex; align-items: center; height: 1.95rem; padding: 0 .7rem; border: 1px solid var(--iron-3); border-radius: var(--r); font: 500 .72rem/1 var(--f-mono); color: var(--chalk-3); transition: border-color .2s, color .2s; }
a.tag:hover { border-color: var(--red); color: var(--chalk); }
.post-cover { margin-bottom: 3rem; }
.post-cover img { width: 100%; border: 1px solid var(--iron-3); border-radius: var(--r); }

/* The top rule sits inside the gutters, in line with the header above */
.post-layout {
  display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; padding-top: 3rem;
  background: linear-gradient(var(--iron-3), var(--iron-3)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.post-aside { position: sticky; top: 6.5rem; display: flex; flex-direction: column; gap: 2.25rem; max-height: calc(100vh - 8rem); overflow-y: auto; scrollbar-width: none; }
.post-main { min-width: 0; max-width: 46rem; }
.post-page:last-child { padding-bottom: clamp(4.5rem, 8vw, 7rem); }
.back { display: inline-flex; align-items: flex-start; gap: .6rem; font: 700 .8rem/1.35 var(--f-sans); font-stretch: 85%; letter-spacing: .08em; text-transform: uppercase; color: var(--chalk-2); transition: color .2s; }
.back i { margin-top: .2em; transition: transform .3s var(--ease); }
.back:hover { color: var(--chalk); }
.back:hover i { transform: translateX(-4px); }
.toc-box summary { list-style: none; margin-bottom: .9rem; cursor: pointer; }
.toc-box summary::-webkit-details-marker { display: none; }
.post-toc ol { border-left: 1px solid var(--iron-3); }
.post-toc a { display: block; margin-left: -1px; padding: .42rem 0 .42rem 1rem; border-left: 2px solid transparent; font-size: .87rem; line-height: 1.35; color: var(--chalk-3); transition: color .2s, border-color .2s; }
.post-toc a:hover { color: var(--chalk); }
.post-toc a.is-active { color: var(--chalk); border-left-color: var(--red); }
.post-toc code { font: inherit; }

.post-collection { margin: 3rem 0; }
.collection-title { font-size: clamp(1.9rem, 3vw, 2.5rem); padding-bottom: 1rem; border-bottom: 2px solid var(--chalk); }
.post-main .row-link { grid-template-columns: 2.5rem minmax(0, 1fr) 6.5rem 1.25rem; }
.post-main .row-time { display: none; }

.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 4.5rem; }
.pager a { display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem 1.5rem; border: 1px solid var(--iron-3); background: var(--iron-0); transition: background .25s, border-color .25s; }
.pager a:hover { background: var(--iron-1); border-color: var(--iron-4); }
.pager-next { grid-column: 2; align-items: flex-end; text-align: right; }
.pager-title { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: .95; transition: color .2s; }
.pager-title i { font-size: .6em; vertical-align: .2em; color: var(--red-ink); }
.pager a:hover .pager-title { color: var(--red-ink); }

/* Long-form content */
.post-content { font-size: 1.0625rem; line-height: 1.78; color: var(--chalk-2); }
.post-content p { margin-bottom: 1.35em; }
.post-content h2 { margin: 3.75rem 0 1.25rem; padding-top: 1.6rem; border-top: 1px solid var(--iron-3); font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: .95; }
.post-content > h2:first-child, .post-content hr + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.post-content h3 { margin: 2.6rem 0 .9rem; font-weight: 800; font-stretch: 75%; font-size: 1.5rem; line-height: 1.12; color: var(--chalk); }
.post-content h4 { margin: 2rem 0 .75rem; font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: var(--chalk); }
.post-content h2, .post-content h3, .post-content h4 { scroll-margin-top: 6.5rem; }
.post-content strong { color: var(--chalk); font-weight: 650; }
.post-content em { color: var(--chalk); }
.post-content a { color: var(--chalk); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s; }
.post-content a:hover { color: var(--red-ink); }
.post-content ul, .post-content ol { margin-bottom: 1.35em; padding-left: 1.3rem; }
.post-content ul { list-style: square; }
.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: .5em; padding-left: .25rem; }
.post-content li::marker { color: var(--red); }
.post-content blockquote { margin: 2rem 0; padding: .15rem 0 .15rem 1.3rem; border-left: 3px solid var(--iron-4); color: var(--chalk-2); }
.post-content blockquote p:last-child { margin-bottom: 0; }
/* `> [!NOTE]` style callouts, built in lib/article.js */
.post-content .callout { position: relative; margin: 2rem 0; padding: 1.1rem 1.4rem 1.2rem; border: 1px solid var(--iron-3); border-left: 3px solid var(--chalk-3); border-radius: var(--r); background: var(--iron-1); font-size: 1rem; line-height: 1.7; }
.post-content .callout p { margin-bottom: .7em; }
.post-content .callout p:last-child { margin-bottom: 0; }
.post-content .callout-label { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; font-weight: 800; font-stretch: 75%; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; color: var(--chalk); }
.post-content .callout-label i { width: 1rem; font-size: .9rem; text-align: center; color: var(--chalk-3); }
.post-content .callout-tip { border-left-color: var(--chalk); }
.post-content .callout-important { border-left-color: var(--red); background: linear-gradient(var(--red-wash), var(--red-wash)), var(--iron-1); }
.post-content .callout-important .callout-label i, .post-content .callout-warning .callout-label i, .post-content .callout-caution .callout-label i { color: var(--red-ink); }
/* Warnings get a hazard stripe instead of a plain rule */
.post-content .callout-warning, .post-content .callout-caution { padding-left: calc(1.4rem + 4px); border-left-width: 1px; }
.post-content .callout-warning::before, .post-content .callout-caution::before { content: ''; position: absolute; inset: -1px auto -1px -1px; width: 7px; border-radius: var(--r) 0 0 var(--r); background: repeating-linear-gradient(-45deg, var(--red) 0 5px, var(--iron-0) 5px 10px); }
.post-content hr { height: 10px; margin: 3.5rem 0; border: 0; background: var(--knurl); }
.post-content code { padding: .12em .38em; border: 1px solid var(--iron-3); border-radius: var(--r); background: var(--iron-2); font: .86em var(--f-mono); color: var(--chalk); overflow-wrap: anywhere; }
.post-content pre { margin: 1.75rem 0; padding: 1.25rem 1.4rem; overflow-x: auto; border: 1px solid var(--iron-3); border-radius: var(--r); background: var(--iron-1); font-size: .85rem; line-height: 1.65; }
.post-content pre code { padding: 0; border: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.post-content img { margin: 2rem 0; border: 1px solid var(--iron-3); border-radius: var(--r); }
/* Diagrams are drawn on white paper; flip them dark so they don't glare. Inverting
   then turning the hue half a turn keeps their reds, greens and blues. The filter flips the
   border too, so it is set light here to come out as --iron-4. Screenshots stay as they are. */
.post-content img[src$=".svg"] { border-color: #DCDCD8; filter: invert(.9) hue-rotate(180deg); }
.post-content table { display: block; width: 100%; margin: 1.75rem 0; overflow-x: auto; border-collapse: collapse; font-size: .92rem; }
.post-content th, .post-content td { padding: .6rem .85rem; border: 1px solid var(--iron-3); text-align: left; vertical-align: top; }
.post-content th { background: var(--iron-2); color: var(--chalk); font-weight: 650; }
.post-content details { margin: 1rem 0; padding: 0 1.1rem; border: 1px solid var(--iron-3); border-radius: var(--r); background: var(--iron-1); }
.post-content details[open] { padding-bottom: .6rem; }
.post-content summary { padding: .8rem 0; cursor: pointer; font-weight: 650; color: var(--chalk); }
.post-content details.flag { border-left: 3px solid var(--red); }

/* ---------- Blog index ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end; padding-block: 2.5rem 3rem; border-top: 2px solid var(--chalk); border-bottom: 1px solid var(--iron-3); }
.feature-title { max-width: 18ch; font-size: clamp(2.6rem, 6vw, 5.25rem); line-height: .85; transition: color .25s; }
.feature:hover .feature-title { color: var(--red-ink); }
.feature-desc { max-width: 42rem; margin-top: 1.4rem; font-size: 1.15rem; line-height: 1.55; color: var(--chalk-2); }
.feature-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1.25rem; }
.feature + .feature { border-top: 0; }

/* ---------- About ---------- */
.about-intro { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.about-photo { margin-right: 1.25rem; }
.about-lead { margin-bottom: 1.75rem; font-size: clamp(1.45rem, 2.5vw, 2.05rem); font-weight: 500; font-stretch: 92%; line-height: 1.25; color: var(--chalk); }
.about-copy p:not(.about-lead) + p { margin-top: 1.2rem; }
.about-copy p:not(.about-lead) { max-width: 40rem; }
.about-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* At a glance: a label beside its chips */
.glance { margin-top: 2rem; border-top: 1px solid var(--iron-3); }
.glance-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding-block: .85rem; border-bottom: 1px solid var(--iron-3); }
.glance dd { display: flex; flex-wrap: wrap; gap: .4rem; }
.glance span.tag { color: var(--chalk-2); }

/* ---------- Background: big names, details beside them on hover (below them on phones) ---------- */
.bg-list { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.bg-item { display: contents; }
.bg-name {
  grid-column: 1; position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  width: 100%; padding: .85rem 0 .75rem; border: 0; border-bottom: 1px solid var(--iron-3); background: none;
  color: var(--chalk-3); text-align: left; cursor: pointer; transition: color .3s var(--ease), padding .4s var(--ease);
}
.bg-name span { font: 900 clamp(2.6rem, 6vw, 5.25rem)/.86 var(--f-sans); font-stretch: 62%; text-transform: uppercase; letter-spacing: 0; overflow-wrap: anywhere; }
.bg-name small { flex: none; }
.bg-name::before { content: ""; position: absolute; left: 0; top: .85rem; bottom: .75rem; width: 4px; background: var(--red); transform: scaleY(0); transition: transform .35s var(--ease); }
.bg-name:hover, .bg-item.is-active .bg-name { color: var(--chalk); }
.bg-item.is-active .bg-name { padding-left: 1.25rem; }
.bg-item.is-active .bg-name::before { transform: scaleY(1); }
.bg-detail {
  grid-column: 2; grid-row: 1 / span var(--n); position: sticky; top: 7rem; align-self: start;
  padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--iron-3); border-top: 3px solid var(--red); background: var(--iron-1);
}
.js .bg-detail { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s .3s; }
.js .bg-item.is-active .bg-detail { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s; }
.bg-logo { width: 4.5rem; height: 4.5rem; margin-bottom: 1.25rem; object-fit: contain; border-radius: var(--r); }
.bg-detail h3 { font: 800 clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--f-sans); font-stretch: 75%; text-transform: uppercase; color: var(--chalk); }
.bg-detail p { margin-top: .9rem; color: var(--chalk-2); }
.bg-detail ul { display: grid; gap: .55rem; margin-top: 1.1rem; }
.bg-detail li { position: relative; padding-left: 1.4rem; font-size: .98rem; line-height: 1.55; }
.bg-detail li::before { content: ""; position: absolute; left: 0; top: .72em; width: .7rem; height: 2px; background: var(--red); }
/* Without JavaScript every item simply shows its details */
html:not(.js) .bg-list, html:not(.js) .bg-item { display: block; }
html:not(.js) .bg-detail { position: static; margin-bottom: 1rem; }

/* ---------- Experience: a compact timeline threaded through the logos ---------- */
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 1.75rem; top: 1.5rem; bottom: 1.5rem; width: 1px; background: var(--iron-3); }
.tl-item { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.5rem; padding-block: 1.4rem; }
.tl-body { max-width: 50rem; }
.tl-logo {
  position: relative; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; overflow: hidden;
  border: 1px solid var(--iron-4); border-radius: var(--r); background: var(--iron-1);
  font: 900 1.2rem/1 var(--f-sans); font-stretch: 62%; letter-spacing: .04em; color: var(--chalk-2); transition: border-color .3s;
}
.tl-logo img { width: 100%; height: 100%; object-fit: contain; }
.tl-item:hover .tl-logo { border-color: var(--red); }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.5rem; }
.tl-name { font: 800 clamp(1.35rem, 2.2vw, 1.75rem)/1.05 var(--f-sans); font-stretch: 75%; text-transform: uppercase; color: var(--chalk); }
.tl-role { margin-top: .4rem; font: 700 .84rem/1.35 var(--f-sans); font-stretch: 85%; letter-spacing: .07em; text-transform: uppercase; color: var(--red-ink); }
.tl-desc { max-width: 46rem; margin-top: .6rem; font-size: 1rem; line-height: 1.6; color: var(--chalk-2); }
.tl-link { margin-top: .75rem; }

/* ---------- Achievements ---------- */
.result { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto; gap: .75rem 2rem; align-items: center; padding-block: 1.7rem; border-bottom: 1px solid var(--iron-3); }
.result-rank { font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: .85; transition: color .3s var(--ease); }
.result:hover .result-rank { color: var(--red); }
.result-event { font-weight: 800; font-stretch: 75%; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.05; text-transform: uppercase; color: var(--chalk); }
.result-detail { margin-top: .55rem; line-height: 1.45; }
.records + .results { margin-top: .5rem; }
.sub-head { margin: 3.5rem 0 1.25rem; font: 800 clamp(1.5rem, 2.4vw, 2rem)/1 var(--f-sans); font-stretch: 75%; text-transform: uppercase; color: var(--chalk); }
.posts-more { margin-top: 2.25rem; }

/* ---------- Links between the about pages ---------- */
.explore { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1px; background: var(--iron-3); border-bottom: 1px solid var(--iron-3); }
.explore-tile { display: flex; flex-direction: column; gap: .85rem; min-height: 15rem; padding: 2rem clamp(1.25rem, 2.4vw, 2rem) 1.75rem; background: var(--iron-0); transition: background .3s var(--ease); }
.explore-tile:hover { background: var(--iron-1); }
.explore-title { font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: .88; overflow-wrap: anywhere; transition: color .25s; }
.explore-tile:hover .explore-title { color: var(--red-ink); }
.explore-text { font-size: .97rem; line-height: 1.55; color: var(--chalk-3); }
.explore-tile .tile-arrow { margin-top: auto; }
.explore-tile:hover .tile-arrow { background: var(--red); border-color: var(--red); color: var(--iron-0); }

/* ---------- 404 ---------- */
.missed { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 7rem; padding-bottom: 4rem; }
.missed-bar { width: min(100%, 38rem); margin-bottom: 2.5rem; overflow: visible; }
.missed-floor { stroke: var(--iron-4); stroke-width: 2; }
.missed-steel { fill: var(--chalk-3); }
.missed-red { fill: var(--red); }
.missed-plate { fill: var(--iron-2); stroke: var(--iron-4); stroke-width: 1.5; }
.missed-drop { animation: drop 1.1s cubic-bezier(.5, 0, .75, 0) var(--enter) both; }
@keyframes drop {
  0% { transform: translateY(-160px); }
  55% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  72% { transform: translateY(-16px); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  86% { transform: translateY(0); }
  93% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
.missed-title { font-size: clamp(4.5rem, 15vw, 12.5rem); line-height: .8; }
.missed p { max-width: 32rem; margin-top: 1.75rem; font-size: 1.15rem; }
.missed-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---------- LOADER (every page load) ----------
   0.03s bar draws · 0.18–0.75s plates and collars slide on, counter 20 → 140 kg
   0.80s the bar is pressed and held · 1.20s the sheet slides up · 1.72s gone */
.loader { display: none; }
/* A sheet with a red bottom edge (parked just below the screen) that slides up and away */
html.is-loading .loader {
  position: fixed; inset: 0 0 -4px; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 1.75rem;
  background: var(--iron-0); border-bottom: 4px solid var(--red);
  animation: ld-out .52s var(--ease-io) 1.2s forwards;
}
.ld-svg { width: min(80vw, 38rem); overflow: visible; }
.ld-sleeve { fill: #8A857D; }
.ld-collar, .ld-clip { fill: #A39E95; }
.ld-plate { fill: var(--iron-2); stroke: var(--iron-4); stroke-width: 1.5; }
.ld-red { fill: var(--red); stroke: none; }
.ld-bar { transform-origin: 320px 110px; transform: scaleX(0); animation: ld-bar .35s var(--ease) .03s forwards; }
.ld-l > *, .ld-r > * { opacity: 0; animation: .3s var(--ease) forwards; }
.ld-l > * { transform: translateX(-280px); animation-name: ld-slide; }
.ld-r > * { transform: translateX(280px); animation-name: ld-slide; }
.ld-l > :nth-child(1), .ld-r > :nth-child(1) { animation-delay: .18s; }
.ld-l > :nth-child(2), .ld-r > :nth-child(2) { animation-delay: .27s; }
.ld-l > :nth-child(3), .ld-r > :nth-child(3) { animation-delay: .36s; }
.ld-l > :nth-child(4), .ld-r > :nth-child(4) { animation-delay: .45s; }
.ld-lift { animation: ld-press .3s cubic-bezier(.3, 1.6, .5, 1) .8s forwards; }
.ld-count { display: flex; align-items: baseline; gap: .6rem; }
.ld-num { font-size: clamp(3.25rem, 9vw, 5.5rem); line-height: 1; font-variant-numeric: tabular-nums; counter-reset: kg var(--kg); animation: ld-kg .57s cubic-bezier(.3, .6, .4, 1) .18s forwards; }
.ld-num::after { content: counter(kg); }
.ld-unit { font-size: .9rem; }
@keyframes ld-bar { to { transform: scaleX(1); } }
@keyframes ld-slide { to { opacity: 1; transform: none; } }
@keyframes ld-press { to { transform: translateY(-26px); } }
@keyframes ld-kg { from { --kg: 20; } to { --kg: 140; } }
@keyframes ld-out { to { transform: translateY(-100%); visibility: hidden; } }

/* ---------- Scroll reveal ----------
   Named .scroll-in, not .reveal: writeup-interactive.js puts .reveal on <body> to un-blur flags */
.js .scroll-in { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease), transform .75s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .scroll-in.in { opacity: 1; transform: none; }

/* ---------- Page transitions (same-origin navigations) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .2s ease both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); padding-top: 2rem; }
  .post-aside { position: static; max-height: none; gap: 1.5rem; }
  .post-main { max-width: none; }
  .toc-box { padding: 1rem 1.1rem; border: 1px solid var(--iron-3); border-radius: var(--r); background: var(--iron-1); }
  .toc-box summary { margin: 0; }
  .toc-box[open] summary { margin-bottom: .9rem; }
  .toc-box summary::after { content: "+"; float: right; color: var(--chalk-2); }
  .toc-box[open] summary::after { content: "–"; }
  .explore { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore-tile:nth-child(3):last-child { grid-column: 1 / -1; }
  .row-link { grid-template-columns: 9.5rem minmax(0, 1fr) 7.25rem 1.25rem; }
  .row-time { display: none; }
}

@media (max-width: 960px) {
  .nav { display: none; }
  .menu-btn { display: block; }
}

@media (max-width: 860px) {
  .hero { min-height: 0; padding-top: 6.5rem; justify-content: flex-start; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-photo { justify-self: start; width: min(68%, 17rem); margin: .5rem 1.25rem 1.25rem 0; }
  .hero-name { margin-bottom: 1.5rem; }
  .records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record { padding: 1.4rem 1rem 1.5rem; }
  .record:nth-child(2n) { border-left: 0; padding-left: 0; }
  .record:nth-child(n + 4) { border-top: 1px solid var(--iron-3); }
  .result { grid-template-columns: minmax(0, 1fr); padding-block: 1.4rem; }
  /* On phones the filters scroll away with the page and the chips swipe sideways */
  .toolbar { position: static; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .chip { flex: none; }
  .row-level:empty { display: none; }
  .row-link { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.25rem; padding: 1.4rem 0; }
  .row-main { order: -1; flex: 1 0 100%; margin-bottom: .35rem; }
  .row-when { flex-direction: row; gap: 1rem; padding-top: 0; }
  .row-time { display: inline; }
  .row-arrow { display: none; }
  .row-desc { -webkit-line-clamp: 2; line-clamp: 2; }
  .row-link:hover > * { transform: translateX(.6rem); }
  .post-main .row-link { gap: .5rem 1rem; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile-wide .tile-link { grid-template-columns: minmax(0, 1fr); }
  .tile-cover { order: -1; min-height: 13rem; border-left: 0; border-bottom: 1px solid var(--iron-3); }
  .tile-body { min-height: 0; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature-side { align-items: flex-start; }
  .about-intro { grid-template-columns: minmax(0, 1fr); }
  .about-photo { width: min(70%, 20rem); }
  .bg-list, .bg-item { display: block; }
  .bg-name span { font-size: clamp(2.1rem, 10vw, 3.4rem); }
  .bg-detail { position: static; margin: 0 0 1rem; }
  .js .bg-detail { display: none; opacity: 1; visibility: visible; transform: none; }
  .js .bg-item.is-active .bg-detail { display: block; }
  .tl-item { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; }
  .tl-logo { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
  .timeline::before { left: 1.375rem; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager-next { grid-column: auto; }
  .cta-plate { opacity: .55; right: -12rem; top: 2rem; transform: none; }
}

@media (max-width: 520px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .explore { grid-template-columns: minmax(0, 1fr); }
  .glance-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .explore-tile { min-height: 0; }
  .explore-tile:nth-child(3):last-child { grid-column: auto; }
  .search kbd { display: none; }
  .btn { height: 3rem; padding: 0 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .scroll-in { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}