/*
Theme Name: Dipin Krishna
Theme URI: https://dipinkrishna.com
Author: Dipin Krishna
Description: Portfolio + blog theme for dipinkrishna.com. Dark, type-led, with a project case-study post type.
Version: 1.3.2
Requires at least: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: dipinkrishna
*/

/* ------------------------------------------------------------------
   1. Fonts (self-hosted, latin + latin-ext)

   The weight ranges below are not the stock Google Fonts ones: the files are
   re-instanced to exactly what the theme asks for, which is what keeps
   Newsreader at 33 KB instead of 132 KB. Widen a range here and the font has
   nothing to interpolate. See assets/fonts/README.md.
   ------------------------------------------------------------------ */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("assets/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("assets/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap;
  src: url("assets/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap;
  src: url("assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------------------------
   2. Tokens
   ------------------------------------------------------------------ */
:root {
  --bg:          #100e0c;
  --bg-2:        #14100c;   /* text on accent */
  --surface:     #17140f;
  --surface-2:   #1d1914;   /* hover bg, code bg, image placeholders */
  --surface-3:   #221e19;   /* active nav chip */
  --line:        #221e19;   /* section rules */
  --line-soft:   #1c1814;
  --border:      #2a2520;   /* card borders */
  --border-2:    #2e2924;
  --border-3:    #35302a;   /* chip / outline button borders */
  --border-hover:#6d655b;

  --text:        #f2ede6;
  --text-2:      #ded6cb;   /* long-form body */
  --text-3:      #bdb3a6;   /* chips, secondary links */
  --muted:       #a89e91;   /* lead paragraphs, card blurbs */
  --muted-2:     #9c9285;   /* labels, meta */

  --accent:      #e07a3c;
  --accent-hover:#f08c4d;
  --accent-link: #f2a066;
  --accent-deep: #ab4d1b;   /* on light panels; 4.7:1 on --light, AA for the 10.5px labels */

  --light:       #f2ede6;   /* inverted panel bg */
  --light-text:  #100e0c;
  --light-text-2:#4a443e;
  --light-text-3:#5c554d;
  --light-muted: #6b645b;

  --sans:  'Space Grotesk', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'Newsreader', Georgia, serif;

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: 24px;

  --r-card: 20px;
  --r-panel: 24px;
  --r-tile: 16px;
  --r-row: 14px;
  --r-pill: 999px;

  --bg-blur:     rgba(16, 14, 12, 0.9);   /* sticky header over blurred content */

  --hatch: repeating-linear-gradient(135deg, rgba(242,237,230,0.06) 0 1px, transparent 1px 10px);

	/* Syntax colours for legacy wp-geshi-highlight blocks. GeSHi ships a
	   light-background palette (brackets and symbols are #000), unreadable here. */
	--code-punct: #9c9285;
	--code-kw:    #e08a54;
	--code-str:   #a8b86a;
	--code-com:   #7d746a;
	--code-num:   #d3a15f;
	--code-fn:    #8bb0b7;
}

/* ------------------------------------------------------------------
   3. Base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;   /* mobile browser chrome shrinks the viewport as you scroll */
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-link); text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--accent); color: var(--bg-2); }
img { max-width: 100%; height: auto; display: block; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
h1, h2, h3, h4 { font-weight: 500; margin: 0; overflow-wrap: break-word; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.screen-reader-text:focus { position: fixed !important; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; clip: auto; padding: 12px 20px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-pill); font-family: var(--mono); font-size: 12px; color: var(--text); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.site-main { flex: 1; }

/* The header is sticky, so anything jumped to by fragment (#comments, a heading,
   a comment permalink) has to clear it. */
:target, .prose :where(h2, h3, h4), .comment-list li, #comments { scroll-margin-top: 96px; }

/* ------------------------------------------------------------------
   4. Layout primitives
   ------------------------------------------------------------------ */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
/* Notched phones in landscape: keep the content clear of the cutout. Declared
   separately so browsers without env()/max() keep the plain padding above. */
.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.grid-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.grid-cards > * { flex: 1 1 400px; min-width: min(280px, 100%); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }

/* ------------------------------------------------------------------
   5. Type
   ------------------------------------------------------------------ */
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); display: block; }
.kicker--sm { font-size: 10.5px; }
.label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }

.h-hero { font-size: clamp(40px, 7.4vw, 88px); line-height: 0.98; letter-spacing: -0.042em; margin: 34px 0 28px; max-width: 17ch; text-wrap: balance; }
.h-page { font-size: clamp(34px, 5.4vw, 62px); line-height: 1.02; letter-spacing: -0.038em; margin: 22px 0; text-wrap: balance; }
.h-page--wide { max-width: 20ch; }
.h-single { font-size: clamp(32px, 4.8vw, 54px); line-height: 1.04; letter-spacing: -0.036em; margin: 0 0 24px; text-wrap: balance; }
.h-section { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.03em; }
.h-card { font-size: 23px; line-height: 1.2; letter-spacing: -0.025em; }
.h-panel { font-size: 22px; letter-spacing: -0.025em; }
.h-mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); font-weight: 400; margin: 0 0 18px; }

.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--muted); max-width: 56ch; }
.lead--page { font-size: 18px; max-width: 58ch; margin: 0 0 44px; }
.lead--single { font-size: 19px; max-width: 52ch; margin: 0 0 26px; }

.meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); }
.meta--upper { letter-spacing: 0.06em; text-transform: uppercase; }

/* ------------------------------------------------------------------
   6. Buttons, chips, pills
   ------------------------------------------------------------------ */
.btn { display: inline-block; font-family: var(--mono); font-size: 12.5px; padding: 14px 22px; border-radius: var(--r-pill); border: 1px solid transparent; line-height: 1.2; text-decoration: none; transition: background .18s, border-color .18s, color .18s; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: var(--bg-2); font-weight: 500; }
.btn--primary:hover { background: var(--accent-hover); color: var(--bg-2); }
.btn--outline { border-color: var(--border-3); color: var(--text); }
.btn--outline:hover { border-color: var(--border-hover); background: var(--surface); color: var(--text); }
.btn--outline-accent { border-color: var(--border-3); color: var(--text); }
.btn--outline-accent:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { font-size: 12px; padding: 12px 20px; }
.btn--xs { font-size: 12px; padding: 9px 16px; }
.btn--block { display: block; width: 100%; text-align: center; padding: 15px 22px; }

.chip { display: inline-block; font-family: var(--mono); font-size: 11px; border: 1px solid var(--border-3); color: var(--text-3); padding: 7px 12px; border-radius: var(--r-pill); line-height: 1.2; }
.chip--sm { font-size: 10.5px; padding: 6px 11px; }
a.chip { transition: border-color .18s, color .18s; }
a.chip:hover { border-color: var(--border-hover); color: var(--text); text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--tight { gap: 7px; }

.link-more { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.link-more--sm { font-size: 11.5px; }
.link-back { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }

/* ------------------------------------------------------------------
   7. Header
   ------------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg-blur); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header__inner { padding-top: 16px; padding-bottom: 16px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; gap: 1px; margin-right: auto; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); text-decoration: none; }
.brand__name { font-size: 18px; font-weight: 500; letter-spacing: -0.025em; }
.brand__role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted-2); }
.brand__name--footer { font-size: 19px; font-weight: 400; }

/* Shown only under html.js, and only on phones — see section 20. Without JS the
   nav stays a plain wrapped pill row. */
.nav-toggle { display: none; align-items: center; gap: 9px; min-height: 44px; padding: 10px 16px; font-family: var(--mono); font-size: 12px; color: var(--text-3); background: transparent; border: 1px solid var(--border-3); border-radius: var(--r-pill); transition: border-color .15s, color .15s; }
.nav-toggle:hover { border-color: var(--border-hover); color: var(--text); }
.nav-toggle__bars { position: relative; width: 15px; height: 2px; background: currentColor; border-radius: 2px; transition: background .15s; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 15px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .15s, top .15s; }
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

.site-nav ul { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; }
.site-nav a { display: block; padding: 8px 13px; border-radius: var(--r-pill); color: var(--text-3); transition: background .15s, color .15s; }
.site-nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current_page_parent > a,
.site-nav .is-active > a { color: var(--text); background: var(--surface-3); }

/* ------------------------------------------------------------------
   8. Cards, tiles, panels
   ------------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
a.card, .card--link { transition: border-color .18s, transform .18s; }
a.card:hover, .card--link:hover { border-color: var(--border-hover); text-decoration: none; color: var(--text); }
.card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 11px; }
.card__blurb { font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.card__stack { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--muted-2); margin-top: 2px; }

.shot { background-color: var(--surface-2); background-image: var(--hatch); display: flex; align-items: flex-end; padding: 14px; position: relative; overflow: hidden; }
.shot--card { height: 170px; border-bottom: 1px solid var(--border); }
.shot--hero { height: clamp(220px, 34vw, 420px); border-radius: var(--r-panel); border: 1px solid var(--border); padding: 20px; }
.shot--portrait { height: 420px; border-radius: var(--r-panel); border: 1px solid var(--border); padding: 18px; }
.shot__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted-2); position: relative; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-tile); padding: 22px 24px; display: flex; flex-direction: column; gap: 7px; }
.tile__value { font-size: 18px; letter-spacing: -0.02em; color: var(--text); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 30px 32px; }
.panel--inverse { background: var(--light); color: var(--light-text); border: 0; border-radius: var(--r-panel); padding: 48px 40px; }
/* theme.json emits `h1..h6 { color: var(--text) }` as an element rule, which beats
   the inherited colour above. Restore the dark ink for headings on light panels. */
.panel--inverse :where(h1, h2, h3, h4, h5, h6) { color: var(--light-text); }
.panel--outline { background: transparent; border: 1px solid var(--border); border-radius: var(--r-panel); padding: 52px 40px; }

.row { border: 1px solid var(--border); border-radius: var(--r-row); padding: 16px 20px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; color: var(--text); }
a.row { transition: border-color .18s; }
a.row:hover { border-color: var(--border-hover); text-decoration: none; color: var(--text); }
.row--filled { background: var(--surface); }
.row__title { font-size: 17px; letter-spacing: -0.015em; }

/* ------------------------------------------------------------------
   9. Home
   ------------------------------------------------------------------ */
.hero { padding-top: 76px; }
.status { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface); }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(224,122,60,0.16); }
.status__text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-3); }
.hero__lead { margin-bottom: 36px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 60px; }

.facts { padding-bottom: 20px; display: flex; flex-wrap: wrap; gap: 16px; }
.facts .tile { flex: 1 1 220px; }

.selected-work { padding-top: 52px; }

.capabilities { padding-top: 64px; }
.capabilities .h-section { margin-bottom: 34px; }
.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 34px; }
.cap { display: flex; flex-direction: column; gap: 10px; }
.cap__num { font-family: var(--mono); font-size: 10.5px; color: var(--accent-deep); }
.cap__title { font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; }
.cap__body { font-size: 15px; line-height: 1.6; color: var(--light-text-3); }

.home-split { padding-top: 64px; display: flex; flex-wrap: wrap; gap: 16px; }
.home-split__writing { flex: 1 1 min(100%, 420px); min-width: 0; }
.home-split__stack { flex: 0 1 340px; min-width: min(260px, 100%); }
.home-split .section-head { margin-bottom: 10px; }
.home-split .h-panel { margin-bottom: 0; }
.home-split__stack .h-panel { margin-bottom: 18px; }
.note-list__item { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text); transition: opacity .15s; }
.note-list__item:hover { text-decoration: none; color: var(--text); }
.note-list__title { font-size: 17.5px; letter-spacing: -0.015em; font-weight: 400; line-height: 1.35; margin-bottom: 5px; }

.cta { padding-top: 64px; padding-bottom: 84px; }
.cta__inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.cta__copy { flex: 1 1 380px; min-width: 0; }
.cta__title { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.032em; margin-bottom: 12px; max-width: 22ch; }
.cta__text { font-size: 16.5px; line-height: 1.6; color: var(--muted); }
.cta .btn--primary { padding: 15px 24px; }

/* ------------------------------------------------------------------
   10. Work archive + project
   ------------------------------------------------------------------ */
.page-intro { padding-top: 68px; padding-bottom: 90px; }
.page-intro--flush { padding-bottom: 0; }

.project-card { padding: 28px 30px 30px; gap: 12px; }
.project-card__top { display: flex; align-items: center; justify-content: space-between; }
.project-card__num { font-family: var(--mono); font-size: 10.5px; color: var(--accent); }
.project-card__title { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.18; letter-spacing: -0.028em; }
.project-card .chips { margin-top: 4px; }

.project-head { padding-top: 56px; }
.project-head__cols { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 26px; align-items: flex-start; }
.project-head__main { flex: 1 1 min(100%, 480px); min-width: 0; }
.project-head__meta { flex: 0 1 300px; min-width: min(250px, 100%); padding: 26px 28px; gap: 18px; }
.project-head__meta .card__body { padding: 0; }
.meta-item { display: flex; flex-direction: column; gap: 5px; }
.meta-item__value { font-size: 16px; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }

.project-shot { padding-top: 44px; }

.project-detail { padding-top: 56px; display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: flex-start; }
.project-detail__points { flex: 1 1 min(100%, 420px); min-width: 0; }
.project-detail__stack { flex: 0 1 320px; min-width: min(260px, 100%); }
.points { display: flex; flex-direction: column; gap: 16px; }
.points li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; line-height: 1.62; color: var(--text-2); }
.points li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 9px; }
.stack-text { font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--text-3); }

.project-body { padding-top: 48px; }

.project-next { padding-top: 60px; padding-bottom: 90px; }
.project-next__inner { border-top: 1px solid var(--line); padding-top: 26px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.project-next__title { font-size: 20px; letter-spacing: -0.02em; }

/* ------------------------------------------------------------------
   11. Blog index / archives
   ------------------------------------------------------------------ */
.blog-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 40px; }
.search-form { display: flex; flex: 1 1 260px; gap: 12px; flex-wrap: wrap; }
.search-form__input { flex: 1 1 240px; font-family: var(--mono); font-size: 12.5px; padding: 13px 18px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-pill); transition: border-color .15s; }
.search-form__input:focus { border-color: var(--border-hover); }
.search-form__submit { border: 0; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--border); color: var(--text-3); padding: 9px 14px; border-radius: var(--r-pill); transition: border-color .15s; }
.filter-chip:hover { border-color: var(--border-hover); text-decoration: none; color: var(--text-3); }
.filter-chip.is-active { border-color: var(--border-3); background: var(--surface-3); color: var(--text); }

.post-card { padding: 26px 28px 28px; gap: 10px; }
.post-card__meta { display: flex; gap: 12px; flex-wrap: wrap; }
.post-card__meta .topic { color: var(--accent); }
.post-card__title { font-size: clamp(20px, 2.1vw, 25px); line-height: 1.2; letter-spacing: -0.028em; }
.post-card__excerpt { font-size: 15.5px; line-height: 1.6; color: var(--muted); }

.pagination { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 40px; font-family: var(--mono); font-size: 12px; }
.pagination .page-numbers { display: inline-block; border: 1px solid var(--border); color: var(--text-3); padding: 10px 16px; border-radius: var(--r-pill); line-height: 1.2; transition: border-color .15s, color .15s; }
.pagination a.page-numbers:hover { border-color: var(--border-hover); color: var(--text); text-decoration: none; }
.pagination .page-numbers.current { background: var(--accent); color: var(--bg-2); border-color: var(--accent); }
.pagination .page-numbers.dots { border: 0; color: var(--muted-2); padding: 0 6px; }
.pagination .next, .pagination .prev { padding: 10px 18px; }

.empty { color: var(--muted); font-size: 17px; padding: 40px 0; }

/* ------------------------------------------------------------------
   12. Single post
   ------------------------------------------------------------------ */
.post { padding-top: 60px; padding-bottom: 40px; }
.post__meta { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 22px; }
.post__meta a { color: var(--accent); }
.post__lede { font-family: var(--serif); font-size: 21px; line-height: 1.55; color: var(--text-2); margin: 0 0 40px; padding-left: 20px; border-left: 2px solid var(--accent); }
.post__tags { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 26px; margin-top: 10px; }

.author-card { padding-top: 20px; }
.author-card__inner { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.author-card__avatar { width: 76px; height: 76px; flex: none; border-radius: 50%; background-color: var(--surface-2); background-image: repeating-linear-gradient(135deg, rgba(242,237,230,0.08) 0 1px, transparent 1px 8px); overflow: hidden; }
.author-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-card__text { flex: 1 1 240px; }
.author-card__name { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 8px; }
.author-card__bio { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-bottom: 12px; }

.related { padding-top: 48px; padding-bottom: 90px; }
.related .h-mono { margin-bottom: 14px; }
.related__list { display: flex; flex-direction: column; gap: 10px; }

/* Long-form content (posts, project write-ups, pages) */
/* Fifteen years of posts contain bare URLs, long option strings and pasted
   paths. None of them may widen the page. */
.prose { font-family: var(--serif); color: var(--text-2); overflow-wrap: break-word; }
.prose a { overflow-wrap: anywhere; }
.prose > * + * { margin-top: 18px; }
.prose p, .prose li { font-size: 19px; line-height: 1.72; }
.prose p + p { margin-top: 24px; }
.prose h2, .prose h3, .prose h4 { font-family: var(--sans); color: var(--text); letter-spacing: -0.028em; font-weight: 500; }
.prose h2 { font-size: 27px; margin-top: 40px; margin-bottom: 14px; }
.prose h3 { font-size: 22px; margin-top: 32px; margin-bottom: 10px; }
.prose h4 { font-size: 19px; margin-top: 26px; margin-bottom: 8px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); font-weight: 500; }
.prose blockquote { margin: 26px 0; padding-left: 20px; border-left: 2px solid var(--accent); font-style: italic; }
.prose img, .prose figure { border-radius: 14px; }
.prose figure { margin: 26px 0; }
.prose figcaption { font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin-top: 10px; }
.prose code { font-family: var(--mono); font-size: 15px; background: var(--surface-2); padding: 2px 7px; border-radius: 5px; color: var(--text-2); }
.prose pre { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); padding: 20px 22px; border-radius: 14px; overflow-x: auto; margin: 0 0 26px; }
.prose pre code { background: none; padding: 0; font-size: inherit; }

/* Legacy code blocks: wp-geshi-highlight emits one <pre class="de1"> per LINE,
   wrapped in <ol><li>, so the .prose pre card above would box every single line.
   Make the wrapper the card and flatten the per-line elements. */
.prose .wp-geshi-highlight {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-row);
	padding: 18px 20px;
	margin: 0 0 26px;
	overflow-x: auto;
}
.prose .wp-geshi-highlight ol { margin: 0; padding-left: 2.6em; }
.prose .wp-geshi-highlight li { margin: 0; font-size: 13.5px; color: var(--muted); }
.prose .wp-geshi-highlight pre.de1 {
	font-size: 13.5px;
	line-height: 1.7;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	overflow: visible;
	white-space: pre-wrap;
	word-break: break-word;
}
.prose .wp-geshi-highlight-wrap,
.prose .wp-geshi-highlight-wrap2,
.prose .wp-geshi-highlight-wrap3 { background: none; border: 0; padding: 0; margin: 0; }

/* GeSHi token colours, remapped for the dark code card.

   wp-geshi-highlight also injects a per-language <style> block into the page,
   generated for a light background — black keywords, and `font-weight: bold`
   on half the token classes. The colours are remapped below. The weight is
   normalised here rather than left alone, because the theme ships mono at 400
   and 500 only: a token asking for 700 makes the browser fetch the 500 file
   and then synthesise the rest of the way, which smears the glyphs. Scoping an
   element selector to the injected block is deliberate — the languages each
   generate a different set of token classes, so there is nothing stable to
   enumerate, and inside this container it competes with the plugin's
   stylesheet rather than with the theme's own. */
.prose .wp-geshi-highlight span,
.prose .wp-geshi-highlight li { font-weight: 400; }
.prose .wp-geshi-highlight .kw1,
.prose .wp-geshi-highlight .kw2,
.prose .wp-geshi-highlight .kw3,
.prose .wp-geshi-highlight .kw4,
.prose .wp-geshi-highlight .kw5 { font-weight: 500; }

.prose .wp-geshi-highlight .br0,
.prose .wp-geshi-highlight .sy0,
.prose .wp-geshi-highlight .sy1,
.prose .wp-geshi-highlight .sy2,
.prose .wp-geshi-highlight .sy3,
.prose .wp-geshi-highlight .sy4 { color: var(--code-punct); }
.prose .wp-geshi-highlight .kw1,
.prose .wp-geshi-highlight .kw2,
.prose .wp-geshi-highlight .kw3,
.prose .wp-geshi-highlight .kw4,
.prose .wp-geshi-highlight .kw5 { color: var(--code-kw); }
.prose .wp-geshi-highlight .st0,
.prose .wp-geshi-highlight .st_h,
.prose .wp-geshi-highlight .st1 { color: var(--code-str); }
.prose .wp-geshi-highlight .co0,
.prose .wp-geshi-highlight .co1,
.prose .wp-geshi-highlight .co2,
.prose .wp-geshi-highlight .co3,
.prose .wp-geshi-highlight .co4,
.prose .wp-geshi-highlight .coMULTI { color: var(--code-com); font-style: italic; }
.prose .wp-geshi-highlight .nu0,
.prose .wp-geshi-highlight .nu6,
.prose .wp-geshi-highlight .nu8,
.prose .wp-geshi-highlight .nu12,
.prose .wp-geshi-highlight .nu19 { color: var(--code-num); }
.prose .wp-geshi-highlight .me0,
.prose .wp-geshi-highlight .me1,
.prose .wp-geshi-highlight .me2,
.prose .wp-geshi-highlight .re0,
.prose .wp-geshi-highlight .re1,
.prose .wp-geshi-highlight .re2 { color: var(--code-fn); }
.prose table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 15.5px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
.prose th { color: var(--text); font-weight: 500; background: var(--surface); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.prose .wp-block-image img { width: 100%; }
.prose .alignwide, .prose .alignfull { max-width: none; }
.prose--sans { font-family: var(--sans); }
.prose--sans p, .prose--sans li { font-size: 17.5px; line-height: 1.68; }

/* ------------------------------------------------------------------
   13. Classic-editor + core-block content
   wp-block-library, classic-theme-styles and global-styles are dequeued in
   functions.php, so alignment, captions, galleries, columns and embeds are
   styled here. Fifteen years of posts depend on this block.
   ------------------------------------------------------------------ */
.prose::after { content: ''; display: table; clear: both; }
.prose .alignleft { float: left; margin: 6px 28px 22px 0; max-width: 50%; }
.prose .alignright { float: right; margin: 6px 0 22px 28px; max-width: 50%; }
.prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.prose .aligncenter img { margin-left: auto; margin-right: auto; }
.prose .alignnone { margin: 26px 0; }
.prose img.wp-smiley, .prose img.emoji { display: inline; margin: 0; border-radius: 0; }

/* Captions — classic .wp-caption and block .wp-block-image figcaption. */
.prose .wp-caption { max-width: 100%; margin: 26px 0; }
.prose .wp-caption img { width: 100%; border-radius: 14px; }
.prose .wp-caption-text, .prose .gallery-caption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; line-height: 1.5; color: var(--muted-2); margin-top: 10px; text-align: center; }

/* Classic [gallery]. */
.prose .gallery { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin: 26px 0; }
.prose .gallery-columns-1 { grid-template-columns: 1fr; }
.prose .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.prose .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.prose .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.prose .gallery-columns-6, .prose .gallery-columns-7,
.prose .gallery-columns-8, .prose .gallery-columns-9 { grid-template-columns: repeat(6, 1fr); }
.prose .gallery-item { width: auto; margin: 0; text-align: center; }
.prose .gallery-item img { width: 100%; border: 0; border-radius: 12px; }
.prose .gallery br { display: none; }

/* Block gallery + columns. */
.prose .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0; padding: 0; list-style: none; }
.prose .wp-block-gallery .blocks-gallery-item,
.prose .wp-block-gallery .wp-block-image { flex: 1 1 220px; margin: 0; }
.prose .wp-block-gallery img { width: 100%; border-radius: 12px; }
.prose .wp-block-columns { display: flex; flex-wrap: wrap; gap: 26px; margin: 26px 0; }
.prose .wp-block-column { flex: 1 1 240px; min-width: 0; }

/* Embeds. Fixed-size legacy iframes must not push the page sideways. */
.prose iframe, .prose embed, .prose object, .prose video { max-width: 100%; }
/* Old posts paste raw <iframe width="560" height="315">. Capping the width alone
   letterboxes them, so give the known video hosts their aspect ratio back. */
.prose iframe[src*="youtube.com"], .prose iframe[src*="youtube-nocookie.com"],
.prose iframe[src*="youtu.be"], .prose iframe[src*="vimeo.com"],
.prose iframe[src*="dailymotion.com"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.prose .wp-block-embed { margin: 26px 0; }
.prose .wp-block-embed figcaption { text-align: center; }
.prose .wp-has-aspect-ratio .wp-block-embed__wrapper { position: relative; padding-top: 56.25%; }
.prose .wp-has-aspect-ratio .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Remaining core blocks that lost their stylesheet. */
.prose .wp-block-button__link { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; padding: 12px 22px; border-radius: var(--r-pill); background: var(--accent); color: var(--bg-2); text-decoration: none; }
.prose .wp-block-button__link:hover { background: var(--accent-hover); color: var(--bg-2); text-decoration: none; }
.prose .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 34px auto; }
.prose .wp-block-pullquote { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 26px 0; margin: 34px 0; text-align: center; }
.prose .wp-block-table { margin: 26px 0; overflow-x: auto; }
.prose .wp-block-preformatted { font-family: var(--mono); font-size: 13.5px; white-space: pre-wrap; }
.prose .wp-block-file { font-family: var(--mono); font-size: 13px; }

/* ------------------------------------------------------------------
   14. Comments
   ------------------------------------------------------------------ */
.comments { padding-bottom: 20px; }
.comments > .h-mono { margin-bottom: 20px; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { margin-top: 18px; padding-left: 26px; border-left: 1px solid var(--line); }
.comment-list li { margin: 0 0 18px; }
.comment-body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px 24px; }
.comment-author { display: flex; align-items: center; gap: 12px; }
.comment-author .avatar { width: 34px; height: 34px; border-radius: var(--r-pill); }
.comment-author .fn { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 15px; color: var(--text); }
.comment-author .says { display: none; }
/* .comment-meta is the wrapping <footer> under html5 support; .comment-metadata holds the date. */
.comment-metadata { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin: 10px 0 12px; }
.comment-metadata a { color: inherit; }
.comment-content, .comment-body > p { font-family: var(--sans); font-size: 15.5px; line-height: 1.65; color: var(--text-2); overflow-wrap: break-word; }
.comment-content > * + *, .comment-body > p + p { margin-top: 14px; }
.comment-content a { text-decoration: underline; text-underline-offset: 3px; }
.comment-content ul, .comment-content ol { padding-left: 1.3em; }
.comment-content ul { list-style: disc; }
.comment-content ol { list-style: decimal; }
.comment-content pre, .comment-body > pre { font-family: var(--mono); font-size: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
.comment-content code, .comment-body code { font-family: var(--mono); font-size: 13.5px; background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }
.comment-awaiting-moderation { display: block; font-family: var(--mono); font-size: 11px; color: var(--accent); margin-top: 10px; }
.comment-list .reply { margin-top: 14px; }
.comment-reply-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.comment-reply-link:hover { color: var(--accent); text-decoration: none; }
.comment-list .bypostauthor > .comment-body { border-color: var(--border-3); }
.comment-list .bypostauthor > .comment-body .fn::after { content: '· author'; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-left: 8px; }
.comments .comments-navigation, .comments .comment-navigation { display: flex; gap: 20px; font-family: var(--mono); font-size: 11.5px; margin-bottom: 28px; }

/* Comment form — WP renders its own markup, so this styles by element. */
.comment-respond { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 28px 30px; margin-top: 28px; }
.comment-reply-title { font-family: var(--sans); font-size: 20px; font-weight: 500; color: var(--text); letter-spacing: -0.02em; margin-bottom: 6px; }
.comment-reply-title small { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.04em; margin-left: 10px; }
.comment-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.comment-form p { margin: 0; }
.comment-notes, .comment-form .form-submit { margin: 0; }
.comment-notes, .logged-in-as { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted-2); }
.comment-notes a, .logged-in-as a { color: var(--text-3); }
.comment-form label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.comment-form input[type="text"], .comment-form input[type="email"],
.comment-form input[type="url"], .comment-form textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; padding: 13px 16px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: 12px; transition: border-color .15s;
}
.comment-form textarea { font-size: 15.5px; line-height: 1.6; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--border-hover); }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 10px; }
.comment-form .comment-form-cookies-consent label { margin: 0; text-transform: none; letter-spacing: 0.02em; font-size: 11.5px; }
.comment-form .comment-form-cookies-consent input { accent-color: var(--accent); }

/* ------------------------------------------------------------------
   15. Topics page
   ------------------------------------------------------------------ */
.topics-search { display: flex; gap: 12px; flex-wrap: wrap; max-width: 560px; margin-bottom: 48px; }
.topics-search .search-form__input { padding: 14px 18px; }
.topic-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.topic-card { flex: 1 1 250px; min-width: min(220px, 100%); border-radius: 18px; padding: 24px 26px; gap: 8px; }
.topic-card__count { font-family: var(--mono); font-size: 10.5px; color: var(--accent); }
.topic-card__title { font-size: 21px; letter-spacing: -0.025em; }
.topic-card__desc { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.years { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 24px; }
.years .h-mono { margin-bottom: 16px; }
.years ul { display: flex; flex-wrap: wrap; gap: 8px; }
.years a { display: inline-block; font-family: var(--mono); font-size: 12px; border: 1px solid var(--border); color: var(--text-3); padding: 9px 14px; border-radius: var(--r-pill); transition: border-color .15s, color .15s; }
.years a:hover { border-color: var(--border-hover); color: var(--text); text-decoration: none; }

/* ------------------------------------------------------------------
   16. About
   ------------------------------------------------------------------ */
.about-head { padding-top: 68px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.about-head__text { flex: 1 1 min(100%, 460px); min-width: 0; }
.about-head__text .h-single { margin: 22px 0 26px; }
.about-head__portrait { flex: 0 1 340px; min-width: min(260px, 100%); }

.experience { padding-bottom: 60px; }
.experience__list { display: flex; flex-direction: column; gap: 10px; }
.role { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-tile); padding: 22px 26px; display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }
.role__years { flex: 0 1 180px; font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }
.role__body { flex: 1 1 260px; }
.role__title { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 5px; }
.role__org { font-size: 15.5px; color: var(--muted); }

.skills { padding-bottom: 90px; }
.skills .panel--inverse { padding: 44px 40px; }
.skills__title { font-size: clamp(23px, 2.4vw, 32px); letter-spacing: -0.03em; margin-bottom: 32px; }
.skills__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 30px 40px; }
.skill__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-deep); font-weight: 400; margin-bottom: 10px; }
.skill__items { font-size: 15.5px; line-height: 1.6; color: var(--light-text-2); }
.skills__note { font-family: var(--mono); font-size: 12px; color: var(--light-muted); margin-top: 38px; }

/* ------------------------------------------------------------------
   17. Contact
   ------------------------------------------------------------------ */
.contact { padding-top: 68px; padding-bottom: 100px; display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: flex-start; }
.contact__intro { flex: 1 1 min(100%, 400px); min-width: 0; }
.contact__intro .h-single { margin: 22px 0; }
.contact__intro .lead { font-size: 17.5px; line-height: 1.62; max-width: 44ch; margin-bottom: 34px; }
.contact__rows { display: flex; flex-direction: column; gap: 10px; }
.contact-row { font-family: var(--mono); font-size: 12.5px; }
.contact-row__label { color: var(--muted-2); letter-spacing: 0.09em; text-transform: uppercase; font-size: 10.5px; padding-top: 2px; }
.contact-row__value { color: var(--text); overflow-wrap: anywhere; }
.contact-row__value a { color: var(--text); }
.contact-row__value a:hover { color: var(--accent); }

.contact__form { flex: 1 1 380px; min-width: min(280px, 100%); border-radius: var(--r-panel); padding: 32px; }
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2); }
.field__input { font-family: var(--sans); font-size: 16px; padding: 13px 16px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 12px; transition: border-color .15s; width: 100%; }
.field__input:focus { border-color: var(--border-hover); }
textarea.field__input { resize: vertical; min-height: 150px; }
.form .btn { border: 0; }
.form__notice { font-family: var(--mono); font-size: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border-3); color: var(--text-3); }
.form__notice--ok { border-color: var(--accent); color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------
   18. Generic page + 404
   ------------------------------------------------------------------ */
.page-plain { padding-top: 60px; padding-bottom: 90px; }
.page-plain .h-single { margin-bottom: 34px; }

/* ------------------------------------------------------------------
   19. Footer
   ------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 36px; }
.site-footer__inner { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.site-footer__brand { margin-right: auto; }
.site-footer__brand .brand__role { margin-top: 6px; font-size: 10.5px; letter-spacing: 0.09em; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 12px; }
.site-footer__col a, .site-footer__col li a { color: var(--text-3); }
.site-footer__col a:hover { color: var(--accent); text-decoration: none; }
.site-footer__col ul { display: contents; }
.site-footer__bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted-2); }
.site-footer__bottom a { color: inherit; }
.site-footer__bottom a:hover { color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------------------
   20. Small screens

   Tiers: 900px (tablet), 720px (nav collapses), 640px (phone), 420px (narrow).
   ------------------------------------------------------------------ */

/* Hover states that move or fade an element. A touch tap leaves them stuck on,
   so they are for pointers only. */
@media (hover: hover) {
  a.card:hover, .card--link:hover { transform: translateY(-3px); }
  .note-list__item:hover { opacity: .72; }
}

@media (max-width: 900px) {
  .hero { padding-top: 60px; }
  .hero__actions { margin-bottom: 52px; }
  .selected-work, .capabilities, .home-split, .cta { padding-top: 52px; }
  .cta { padding-bottom: 68px; }
  .page-intro { padding-top: 56px; padding-bottom: 68px; }
  .page-intro--flush { padding-bottom: 0; }
  .project-head { padding-top: 44px; }
  .project-head__cols { gap: 32px; }
  .project-detail { padding-top: 44px; gap: 32px 40px; }
  .project-next { padding-bottom: 68px; }
  .about-head { padding-top: 56px; padding-bottom: 44px; gap: 36px; }
  .skills { padding-bottom: 68px; }
  .contact { padding-top: 56px; padding-bottom: 72px; gap: 36px 40px; }
  .related { padding-bottom: 68px; }
}

/* Phones. The primary nav folds behind a toggle so the sticky header stops
   eating a fifth of the screen. Without JS (no html.js) it stays a wrapped
   pill row, which is why every rule here is scoped to .js. */
@media (max-width: 720px) {
  .site-header__inner { gap: 12px 16px; padding-top: 14px; padding-bottom: 14px; }
  .site-nav { order: 3; width: 100%; }
  .site-nav ul { gap: 2px; }
  .site-nav a { padding: 7px 11px; }

  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); max-height: calc(100dvh - 140px); overflow-y: auto; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; padding-bottom: 4px; font-size: 13px; }
  .js .site-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; }

  /* Touch targets. Google's mobile guidance is a 48x48 CSS-px hit area with 8px
     between neighbours. Most of these are 10-12px of bare text at rest, so the
     box grows around the type instead of the type being enlarged — nothing here
     changes a font size, only the area that answers a thumb. */
  .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }
  .btn--block { display: flex; }
  .brand { min-height: 48px; justify-content: center; }
  .nav-toggle { min-height: 48px; }

  .filter-chip, .pagination .page-numbers, .years a, a.chip {
    min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center;
  }
  .pagination .page-numbers.dots { min-height: 0; min-width: 0; }

  .link-more, .link-back { display: inline-flex; align-items: center; min-height: 48px; }
  /* The 48px box sits low against a baseline-aligned heading. */
  .section-head { align-items: center; }

  .post__meta { gap: 4px 16px; align-items: center; }
  .post__meta a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; }
  .comment-reply-link { display: inline-flex; align-items: center; min-height: 48px; }
  .contact-row__value a { display: inline-flex; align-items: center; min-height: 48px; }

  .site-footer__col { gap: 8px; }
  .site-footer__col a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; }
  .site-footer__bottom { gap: 8px 20px; align-items: center; }
  .site-footer__bottom a { display: inline-flex; align-items: center; min-height: 48px; }

  /* Cookie consent banner (nice-cookie-consent). Not our markup, but it is on
     every page and ships a 15x19 "x", so the hit areas are corrected here.
     Sizing only — the plugin keeps its own colours. The "Learn more" link is
     left alone: it sits inline in a sentence, where a 48px box would stretch
     that line of the paragraph. */
  .cc-window .cc-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .cc-window .cc-close { top: 0; right: 0; width: 48px; height: 48px; padding: 0;
    display: flex; align-items: center; justify-content: center; line-height: 1; }
}

@media (max-width: 640px) {
  .panel--inverse, .panel--outline { padding: 32px 22px; }
  .panel { padding: 24px 22px; }
  .contact__form { padding: 22px; }
  .hero { padding-top: 44px; }
  .shot--portrait { height: 300px; }
  .cap-grid { gap: 26px; }
  .skills .panel--inverse { padding: 32px 22px; }
  .skills__grid { gap: 24px; }
  .site-footer__inner { gap: 28px; }

  .post { padding-top: 44px; }
  .post__lede { font-size: 19px; padding-left: 16px; }
  .prose p, .prose li { font-size: 17.5px; }
  .prose h2 { font-size: 24px; margin-top: 34px; }
  .prose h3 { font-size: 20px; margin-top: 28px; }
  .prose .alignleft, .prose .alignright { float: none; margin: 26px 0; max-width: 100%; }
  .prose .gallery { grid-template-columns: repeat(2, 1fr); }
  /* A wide table from an old post would otherwise stretch the layout viewport
     and leave the whole page scrolling sideways. Let the table scroll instead. */
  .prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }

  .comment-body { padding: 18px; }
  .comment-list .children { padding-left: 14px; }
  .comment-list .children .children { padding-left: 8px; }
  .comment-respond { padding: 22px; }

  /* Under 16px iOS zooms the page when the field takes focus. */
  .search-form__input { font-size: 16px; padding: 12px 18px; min-height: 48px; }
}

@media (max-width: 420px) {
  :root { --gutter: 20px; }
  .card__body { padding: 20px 20px 22px; }
  .post-card { padding: 22px 20px 24px; }
  .project-card { padding: 22px 20px 24px; }
  .tile { padding: 18px 20px; }
  .panel { padding: 22px 18px; }
  .panel--inverse, .panel--outline, .skills .panel--inverse { padding: 28px 18px; }
  .role { padding: 18px 20px; }
  .row { padding: 14px 16px; }
  .contact__form, .comment-respond, .comment-body { padding: 18px; }
  .btn { padding: 13px 18px; }
  .prose pre { padding: 16px; font-size: 13px; }
  .prose .wp-geshi-highlight { padding: 16px; }
  .prose .wp-geshi-highlight ol { padding-left: 2.2em; }
}