/* -----------------------------------------------------------------------
   lexosi.com

   Plain CSS. No preprocessor, no utility framework, no build step. Every
   colour, size and rhythm value is a token in :root - change one line there
   and the whole page follows.

   Order: reset, tokens, components top to bottom of the page, then the
   breakpoints, then motion and print. Media queries live at the end on
   purpose, so a rule is never quietly overridden a hundred lines earlier.
   ----------------------------------------------------------------------- */

/* -- Fonts -------------------------------------------------------------
   Self-hosted, latin subset, ~100 KB for three families. Google Fonts would
   be one line less work and one more origin the visitor is handed to on
   every page load. Not worth it.
--------------------------------------------------------------------- */
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -- Tokens ------------------------------------------------------------
   The accent is a muted gold rather than the neon a gaming portfolio
   reaches for by default. This page is read by people hiring for product
   roles as often as by people from games.
--------------------------------------------------------------------- */
:root {
  --bg:          #0A0B0D;
  --bg-raise:    #101216;
  --bg-sunk:     #07080A;
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);

  --fg:          #F4F5F7;
  --fg-2:        #A5ACB5;
  /* 4.5:1 against every surface on the page, including the raised panels.
     The previous value was 4.23 and failed WCAG AA on small text. */
  --fg-3:        #7A8189;

  --accent:      #D9A441;
  --accent-soft: rgba(217,164,65,.14);
  --accent-line: rgba(217,164,65,.34);

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;

  --wrap: 1160px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(4.5rem, 11vw, 9rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* -- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
/* display:block above outranks the browser's own [hidden] rule, so hiding
   an element from JS would silently do nothing without this. */
[hidden] { display: none !important; }
a { color: inherit; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--accent); color: #0A0B0D; }

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--accent); color: #0A0B0D; padding: .6rem 1.1rem;
  font: 500 .875rem var(--sans); border-radius: 0 0 8px 8px; z-index: 100;
  transition: transform .18s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* -- Entrance animation ------------------------------------------------
   .reveal starts invisible, which means a JS failure would blank the page.
   The :not(.js-ready) rule is the safety net: no JS, no hiding.
--------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.js-ready .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
/* Without JS the js-ready class never arrives and the content stays put. */
html:not(.js-ready) .reveal { opacity: 1; transform: none; }

/* -- Header ---------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.nav.is-stuck {
  background: rgba(10,11,13,.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}
.nav__inner {
  max-width: var(--wrap); margin-inline: auto; padding: .95rem var(--pad);
  display: flex; align-items: center; gap: 1.5rem;
}
.nav__brand {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; font-weight: 600; letter-spacing: -.01em; font-size: .95rem;
}
.nav__mark {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--accent-line); border-radius: 7px;
  color: var(--accent); font-family: var(--serif); font-size: 1rem; line-height: 1;
  padding-bottom: 2px;
}
.nav__links {
  display: flex; gap: 1.75rem; margin-left: auto;
  font-size: .875rem; font-weight: 450;
}
.nav__links a {
  text-decoration: none; color: var(--fg-2);
  transition: color .2s var(--ease); position: relative; padding-block: .2rem;
}
.nav__links a:hover { color: var(--fg); }
.nav__links a.is-active { color: var(--fg); }
.nav__links a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.15rem;
  height: 1px; background: var(--accent);
}
.nav__cta { margin-left: .25rem; }

/* -- Language switcher ----------------------------------------------- */
.lang {
  display: flex; align-items: center; gap: .1rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .18rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .08em;
}
.lang a {
  text-decoration: none; color: var(--fg-3); padding: .3rem .5rem;
  border-radius: 999px; line-height: 1;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.lang a:hover { color: var(--fg); }
.lang a.is-current { color: #0A0B0D; background: var(--accent); font-weight: 500; }

/* -- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem; border-radius: 999px;
  font-size: .9375rem; font-weight: 500; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line-strong);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn--sm { padding: .5rem .95rem; font-size: .8125rem; }
.btn--primary {
  background: var(--accent); border-color: var(--accent); color: #0A0B0D; font-weight: 600;
}
.btn--primary:hover { background: #EFBE68; border-color: #EFBE68; transform: translateY(-1px); }
.btn--ghost { color: var(--fg-2); }
.btn--ghost:hover { color: var(--fg); border-color: var(--fg-3); background: rgba(255,255,255,.035); }

/* -- Shared type ----------------------------------------------------- */
.eyebrow {
  font-family: var(--mono); font-size: .75rem; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fg-3);
}
.eyebrow .sep { color: var(--accent); padding-inline: .25rem; }

.section-label {
  /* These are <h2> elements, so the browser defaults for size, weight and
     margin have to be reset here. They were <p> until the validator pointed
     out that #work and #writing had no heading at all. */
  font-weight: 400; margin: 0;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-3);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}
.section-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}
/* .48 alpha, not .22: this is real text (a date range), so it has to clear
   4.5:1 like any other. It only looks decorative. */
.section-label__meta { margin-left: auto; color: rgba(255,255,255,.48); }

.hl { color: var(--accent); }

/* -- Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  padding-top: clamp(8rem, 20vh, 12rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; z-index: -1;
  top: -30%; left: 50%; transform: translateX(-50%);
  width: min(1100px, 130vw); aspect-ratio: 1.6;
  background: radial-gradient(ellipse at center, rgba(217,164,65,.10), rgba(217,164,65,0) 62%);
  pointer-events: none;
}
.hero__avatar {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; margin-bottom: 1.5rem;
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 4px rgba(217,164,65,.07);
}
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.45rem, 6.4vw, 5.1rem);
  line-height: 1.03; letter-spacing: -.018em;
  margin-top: 1.75rem; max-width: 17ch;
  text-wrap: balance;
}
.hero__lede {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 60ch; font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.72; color: var(--fg-2);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }

/* -- Proof bar ------------------------------------------------------- */
.proof {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
.proof__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.proof__item {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  padding-right: clamp(1rem, 2.5vw, 2rem);
  border-right: 1px solid var(--line);
}
.proof__item:last-child { border-right: 0; padding-right: 0; }
.proof__num {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.05;
  letter-spacing: -.02em; color: var(--fg);
}
.proof__sub { color: var(--fg-3); font-size: .62em; }
.proof__label {
  display: block; margin-top: .7rem; font-size: .8125rem; line-height: 1.5;
  color: var(--fg-3); max-width: 26ch;
}

/* -- Work chapters --------------------------------------------------- */
.work { padding-block: var(--sec); }

.work__note {
  max-width: 62ch; margin-top: -1.5rem; margin-bottom: clamp(3rem, 6vw, 4.5rem);
  font-size: .9375rem; color: var(--fg-3);
  padding-left: 1rem; border-left: 1px solid var(--line-strong);
}

.chapter {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
.chapter:first-of-type { border-top: 0; padding-top: 0; }

.chapter__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.chapter__idx {
  font-family: var(--serif); font-size: 1.75rem; line-height: 1;
  /* Large text, so 3:1 is the bar rather than 4.5:1. .18 gave 1.65. */
  color: rgba(255,255,255,.36); letter-spacing: -.02em;
}
.chapter__year {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
}
.chip {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fg-2);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .35rem .7rem;
  /* No nowrap. "Administrador del servidor - Director de la serie" renders
     at 396px and the side column is 190px wide: the Spanish and French copy
     runs 30-50% longer than the English this was first laid out in.
     Wrapping is the correct behaviour, not a defect. */
  max-width: 100%; line-height: 1.45; text-wrap: balance;
}
.chip--accent {
  color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft);
}

/* Videos get the full column; prose stays at a readable measure. */
.chapter__body { max-width: 840px; }
.chapter__body > p,
.chapter__body > h2,
.chapter__body > blockquote,
.chapter__body > aside { max-width: 66ch; }
/* Demoted to <h3> under the section <h2>; the class carries all styling. */
.chapter__title, .ai__title, .contact__title, .writing__title { margin: 0; font-weight: 400; }
.chapter__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.75rem, 3.1vw, 2.55rem); line-height: 1.12;
  letter-spacing: -.017em; margin-bottom: 1.5rem; text-wrap: balance;
}
/* Direct children only. Without the child combinator this reaches every
   descendant paragraph, and .pull / .aside / .codes / .specs each have to
   win their own styling back with !important. That is how a stylesheet
   ends up carrying fifteen of them. */
.chapter__body > p { color: var(--fg-2); margin-bottom: 1.1rem; }
.chapter__body > p:last-child { margin-bottom: 0; }
.chapter__body em { font-style: italic; color: var(--fg); }
.chapter__body strong { color: var(--fg); font-weight: 600; }

.chapter--peak .chapter__title { color: var(--fg); }

/* -- Pull quote ------------------------------------------------------ */
.pull {
  margin-top: 2.25rem; padding-left: clamp(1.1rem, 2.5vw, 1.75rem);
  border-left: 2px solid var(--accent-line);
}
.pull p {
  font-family: var(--serif); font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  line-height: 1.42; color: var(--fg); letter-spacing: -.01em;
  margin-bottom: .85rem;
}
.pull cite {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
}

/* -- Aside ----------------------------------------------------------- */
.aside {
  margin-top: 2.25rem; padding: 1.4rem 1.5rem;
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px;
}
.aside__title {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: .7rem;
}
.aside p { font-size: .9375rem; margin-bottom: 0; color: var(--fg-2); }

/* -- Video facade ---------------------------------------------------- */
.video {
  position: relative; margin-top: 2rem;
  aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: var(--bg-raise); border: 1px solid var(--line);
}
.video + .video { margin-top: 1rem; }
.video iframe { width: 100%; height: 100%; border: 0; }

.video__btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; padding: 0; overflow: hidden;
}
.video__thumb {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease), opacity .3s var(--ease);
  opacity: .78;
}
.video__btn:hover .video__thumb { transform: scale(1.035); opacity: .92; }
.video__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,11,13,.15) 0%, rgba(10,11,13,.62) 100%);
}
.video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(10,11,13,.62); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.video__btn:hover .video__play {
  background: var(--accent); border-color: var(--accent);
  transform: translate(-50%,-50%) scale(1.06);
}
.video__play svg { width: 20px; height: 20px; margin-left: 3px; fill: #fff; transition: fill .25s var(--ease); }
.video__btn:hover .video__play svg { fill: #0A0B0D; }
/* No-JS fallback: fills the panel the facade would otherwise occupy. */
.video__fallback {
  position: absolute; inset: 0; display: grid; place-content: center;
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .06em;
  color: var(--fg-2); text-decoration: none; text-align: center; padding: 1rem;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 12px,
              transparent 12px 24px), var(--bg-raise);
}
.video__fallback:hover { color: var(--accent); }

.video__src {
  position: absolute; right: .9rem; bottom: .8rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}

/* -- Video card and caption ------------------------------------------ */
.video-card { margin-top: 2rem; }
.video-card .video { margin-top: 0; }
.video-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem .8rem;
  margin-top: .85rem; font-size: .8125rem; line-height: 1.5; color: var(--fg-3);
}
.video-cap__role {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 999px;
  padding: .25rem .6rem; flex: 0 1 auto;
  max-width: 100%; line-height: 1.45;
}
.video-cap__txt em { font-style: italic; color: var(--fg-2); }

.video-grid { display: grid; gap: 1.75rem 1.5rem; margin-top: 2rem; }
.video-grid .video-card { margin-top: 0; }

.video__pending {
  position: absolute; inset: 0; display: grid; place-content: center; gap: .75rem;
  justify-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px),
    var(--bg-raise);
  color: var(--fg-3); font-family: var(--mono); font-size: .8125rem; letter-spacing: .06em;
}
.video__pending-tag {
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: .25rem .6rem;
  color: var(--fg-2);
}

/* -- AI section ------------------------------------------------------ */
.ai {
  padding-block: var(--sec);
  background: var(--bg-sunk);
  border-block: 1px solid var(--line);
}
.ai__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
.ai__body { max-width: 66ch; }
.ai__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.85rem, 3.3vw, 2.75rem); line-height: 1.1;
  letter-spacing: -.018em; margin-bottom: 1.5rem; text-wrap: balance;
}
.ai__body > p { color: var(--fg-2); margin-bottom: 1.1rem; }
.ai__body strong { color: var(--fg); font-weight: 600; }
.ai__body > p.ai__claim {
  font-family: var(--mono); font-size: .875rem; line-height: 1.75;
  color: var(--accent);
  border-left: 2px solid var(--accent-line);
  padding: .35rem 0 .35rem 1.1rem;
  margin-block: 1.5rem;
}
.ai__links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* -- Lead-in line ------------------------------------------------------
   Introduces what follows the video grid. Smaller and quieter than body
   copy on purpose: it frames the next card rather than continuing the
   argument, and the reader should feel the gear change.
--------------------------------------------------------------------- */
.chapter__lead {
  margin-top: 2.75rem; max-width: 62ch;
  font-size: .9375rem; line-height: 1.6; color: var(--fg-3);
  padding-left: 1rem; border-left: 1px solid var(--accent-line);
}
.chapter__lead + .video-card { margin-top: 1.1rem; }

/* -- Playable island list -------------------------------------------- */
.chapter__body > p.codes__note {
  max-width: 66ch; margin-top: 2rem; margin-bottom: 0;
  font-size: .9375rem; color: var(--fg-3);
}
.codes__note + .codes { margin-top: 1.1rem; }
.codes {
  margin-top: 2.25rem; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--bg-raise);
}
.codes__label {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
  padding: .85rem 1.2rem; border-bottom: 1px solid var(--line); margin: 0;
}
.codes li { border-bottom: 1px solid var(--line); }
.codes li:last-child { border-bottom: 0; }
.codes a, .codes__row {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.2rem; text-decoration: none;
  transition: background .2s var(--ease);
}
.codes a:hover { background: rgba(255,255,255,.035); }
.codes__name { flex: 1 1 12rem; font-size: .9375rem; color: var(--fg); }
.codes__code {
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em;
  color: var(--fg-3); white-space: nowrap;
}
.codes__arrow {
  color: var(--fg-3); font-size: 1.1rem; line-height: 1;
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.codes a:hover .codes__arrow { transform: translateX(4px); color: var(--accent); }
.codes a:hover .codes__name { color: var(--accent); }

/* -- Spec block (reused by the chapters and the AI section) ---------- */
.specs {
  align-self: start;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--bg-raise);
}
.specs__label {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-3);
  padding: .85rem 1.2rem; border-bottom: 1px solid var(--line); margin: 0;
}
.specs li {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .35rem 1.5rem;
  padding: .8rem 1.2rem; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .8125rem;
}
.specs li:last-child { border-bottom: 0; }
.specs span { color: var(--fg-3); letter-spacing: .04em; }
.specs b { color: var(--fg); font-weight: 500; font-size: 1rem; }
.specs--inline { max-width: 430px; margin-top: 2.25rem; }
.specs--ai li:nth-child(4) b, .specs--ai li:nth-child(5) b { color: var(--accent); }

/* -- Writing --------------------------------------------------------- */
.writing { padding-block: var(--sec); }
.writing__list { display: grid; gap: 0; }
.writing__list li { border-top: 1px solid var(--line); }
.writing__list li:last-child { border-bottom: 1px solid var(--line); }
.writing__list a {
  display: grid; gap: .5rem; text-decoration: none;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  grid-template-columns: 1fr auto; align-items: start;
  transition: opacity .2s var(--ease);
}
.writing__meta {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}
.writing__title {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  line-height: 1.2; letter-spacing: -.015em; max-width: 24ch;
  transition: color .2s var(--ease);
}
.writing__desc {
  grid-column: 1; font-size: .9375rem; color: var(--fg-3);
  max-width: 62ch; line-height: 1.6;
}
.writing__arrow {
  grid-row: 2; grid-column: 2; font-size: 1.35rem; color: var(--fg-3);
  transition: transform .28s var(--ease), color .28s var(--ease);
}
.writing__list a:hover .writing__arrow { transform: translateX(6px); color: var(--accent); }
.writing__list a:hover .writing__title { color: var(--accent); }

/* -- What you'd be hiring ----------------------------------------------
   Two columns rather than a stacked list: four claims in one column reads
   as a manifesto, and the whole point is that none of these is an opinion.
   Side by side they read as a summary of what came before.
--------------------------------------------------------------------- */
.hiring { padding-bottom: var(--sec); }
.hiring__grid { display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); }
.hiring__item { max-width: 52ch; }
.hiring__claim {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.2;
  letter-spacing: -.015em; margin-bottom: .85rem;
  padding-top: 1.1rem; border-top: 1px solid var(--accent-line);
  text-wrap: balance;
}
.hiring__item p { color: var(--fg-2); font-size: .9375rem; line-height: 1.7; }

/* -- Contact --------------------------------------------------------- */
.contact {
  padding-block: var(--sec);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(217,164,65,.035));
}
.contact__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.1;
  letter-spacing: -.02em; text-wrap: balance;
}
.contact__lede { margin-top: 1.1rem; color: var(--fg-2); max-width: 48ch; }
.contact__links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* -- Footer ---------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding-block: 2rem; }
.foot__inner {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--fg-3);
}

/* -- Breakpoints ----------------------------------------------------- */
@media (min-width: 900px) {
  .chapter { grid-template-columns: 190px minmax(0, 1fr); }
  .chapter__meta {
    flex-direction: column; align-items: flex-start; gap: .6rem;
    position: sticky; top: 6.5rem; align-self: start;
  }
  .chapter__idx { font-size: 2.5rem; }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .hiring__grid { grid-template-columns: 1fr 1fr; }
  .ai__grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .writing__list a { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 899px) {
  .proof__item { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .proof__item:last-child { border-bottom: 0; }
  .proof__label { max-width: none; }
}

@media (max-width: 640px) {
  .nav__inner { gap: .8rem; }
  .nav__links { gap: 1rem; font-size: .8125rem; }
  .nav__name, .nav__cta { display: none; }
  .writing__list a { grid-template-columns: 1fr; }
  .writing__arrow { grid-row: auto; grid-column: 1; }
  .writing__title { max-width: none; }
}

/* -- Narrow screens ----------------------------------------------------
   At 375px the full header needed 382px against 335px available, and the
   language switcher was clipped. Below 560px it keeps the two links that
   matter, work and contact, plus the language switch. The page is a single
   scroll, so dropping the other two costs nothing.
--------------------------------------------------------------------- */
@media (max-width: 560px) {
  .nav__links { gap: .9rem; font-size: .75rem; }
  .nav__links a[href="#ai"],
  .nav__links a[href="#writing"] { display: none; }
  .lang { font-size: .5625rem; padding: .15rem; }
  .lang a { padding: .28rem .42rem; }
  .chapter__meta { gap: .5rem; }
  .chip { font-size: .625rem; }
}

/* -- Motion and print ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media print {
  .nav, .video, .hero::before { display: none; }
  body { background: #fff; color: #000; }
  .wrap { max-width: none; }
}

/* Closing note under the work chapters. */
.work__note--end {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 0;
  border-left-color: var(--accent-line);
}


/* -- 404 ------------------------------------------------------------- */
.nf { min-height: 100vh; display: grid; place-content: center; text-align: center; padding: 2rem; }
.nf__code {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem;
}
.nf__title {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.05; margin-bottom: 1.25rem;
}
.nf__lede { color: var(--fg-2); margin-bottom: 2.25rem; max-width: 40ch; margin-inline: auto; }
.nf__links { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }