/* jorgelaurel.com — single stylesheet. Design: "Jorge Laurel Design System"
   (Archivo / Source Serif 4 / IBM Plex Mono, amber-on-slate, editorial-brutalist). */

/* ---- Tokens: colors ---- */
:root{
  --slate-0:#ffffff;--slate-50:#f6f8fa;--slate-100:#eceff3;--slate-200:#dde2e9;--slate-300:#c2cad4;--slate-400:#94a0ae;--slate-500:#677585;--slate-600:#4b5766;--slate-700:#37414d;--slate-800:#242c36;--slate-900:#141a21;--slate-950:#0b0f14;
  --amber-200:#fcd39a;--amber-300:#f5b04a;--amber-400:#f5b04a;--amber-500:#e8930c;--amber-600:#c77607;--amber-700:#95580a;
  --bg-page:var(--slate-0);--bg-subtle:var(--slate-50);--bg-inset:var(--slate-100);--bg-inverse:var(--slate-950);
  --text-primary:var(--slate-950);--text-secondary:var(--slate-600);--text-muted:var(--slate-400);--text-inverse:#ffffff;
  --accent:var(--amber-600);--accent-hover:var(--amber-700);--accent-soft:#fdf3e2;--accent-text:#141a21;--accent-fill:var(--amber-500);
  --border-strong:var(--slate-950);--border-default:var(--slate-200);--border-subtle:var(--slate-100);
  --surface-card:var(--slate-0);--code-bg:var(--slate-100);--selection:#fbe3bb;
  --ok:#0f8a4c;--warn:#b1720a;--danger:#c92f2f;
}
[data-theme="dark"]{
  --bg-page:var(--slate-950);--bg-subtle:var(--slate-900);--bg-inset:var(--slate-800);--bg-inverse:#ffffff;
  --text-primary:#f2f5f8;--text-secondary:var(--slate-300);--text-muted:var(--slate-500);--text-inverse:var(--slate-950);
  --accent:var(--amber-400);--accent-hover:var(--amber-300);--accent-soft:#3a2a10;--accent-text:#141a21;--accent-fill:var(--amber-500);
  --border-strong:#f2f5f8;--border-default:var(--slate-700);--border-subtle:var(--slate-800);
  --surface-card:var(--slate-900);--code-bg:var(--slate-800);--selection:#6d4a10;
  --ok:#3ecf8e;--warn:#e8a13c;--danger:#f26d6d;
}

/* ---- Tokens: type + space ---- */
:root{
  --font-display:"Sora",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-ui:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* Dark-band palette (from redesign mockup) */
  --ink:#0D1117;--ink-2:#161B22;--line-dark:#2A3038;--amber-bright:#E8A21D;--muted-light:#8B93A0;--ink-lede:#B4BCC6;
  --text-hero:clamp(48px,8vw,96px);--text-h1:56px;--text-h2:36px;--text-h3:24px;--text-h4:18px;
  --text-body-lg:21px;--text-body:18px;--text-sm:15px;--text-xs:13px;--text-micro:11px;
  --leading-display:0.98;--leading-tight:1.15;--leading-body:1.65;--leading-ui:1.4;
  --tracking-display:-0.015em;--tracking-tight:-0.01em;--tracking-caps:0.12em;
  --weight-black:900;--weight-bold:700;--weight-medium:500;--weight-regular:400;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --measure:680px;--page-max:1200px;--page-pad:clamp(20px,5vw,24px);
  --radius-pill:999px;--border-w-heavy:2px;--rule-heavy:3px solid var(--border-strong);
  --shadow-pop:6px 6px 0 var(--border-strong);
  --ease-out:cubic-bezier(.2,.8,.2,1);--dur-fast:120ms;--dur-base:200ms;
}

/* ---- Base ---- */
::selection{background:var(--selection)}
*{box-sizing:border-box}
body{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);margin:0;min-height:100vh;-webkit-font-smoothing:antialiased;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
code,pre,kbd{font-family:var(--font-mono)}
time,.tnum{font-variant-numeric:tabular-nums}
main{display:block}

.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.wrap-measure{max-width:var(--measure);margin:0 auto;padding:0 var(--page-pad)}

/* ---- Masthead (dark sticky nav, mockup) ---- */
.masthead{position:sticky;top:0;z-index:50;background:rgba(13,17,23,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-dark)}
.masthead-inner{max-width:var(--page-max);margin:0 auto;height:64px;padding:0 var(--page-pad);display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--amber-bright);text-decoration:none}
.masthead nav{display:flex;gap:4px;align-items:center}
.masthead nav a{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-light);text-decoration:none;padding:8px 14px;border-radius:4px;transition:color .2s,background .2s}
.masthead nav a:hover{color:#fff}
.masthead nav a.active{color:var(--amber-bright);background:rgba(232,162,29,.08)}
.theme-toggle{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;margin-left:8px;border:1px solid var(--line-dark);background:transparent;color:var(--muted-light);cursor:pointer;border-radius:4px;transition:color .2s,border-color .2s}
.theme-toggle:hover{color:#fff;border-color:var(--muted-light)}

/* ---- Footer (inverse) ---- */
.site-footer{background:var(--bg-inverse);color:var(--text-inverse);padding:var(--space-7) var(--page-pad);margin-top:var(--space-9)}
.site-footer .inner{max-width:var(--page-max);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.site-footer .fw{font-family:var(--font-display);font-weight:900;font-size:28px;letter-spacing:var(--tracking-display);margin-bottom:8px;color:var(--amber-bright)}
.site-footer .ftag{font-family:var(--font-mono);font-size:13px;color:var(--slate-500)}
.site-footer nav{display:flex;gap:24px;flex-wrap:wrap}
.site-footer nav a{font-family:var(--font-mono);font-size:13px;color:var(--slate-400);text-decoration:none}
.site-footer nav a:hover{color:var(--text-inverse)}

/* ---- Buttons ---- */
.btn{font-family:var(--font-ui);font-weight:700;font-size:15px;padding:10px 20px;border-radius:0;cursor:pointer;letter-spacing:-0.01em;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.btn-lg{padding:14px 28px;font-size:17px}
.btn-primary{background:var(--bg-inverse);color:var(--text-inverse);border:2px solid var(--border-strong)}
.btn-primary:hover{background:transparent;color:var(--text-primary)}
.btn-secondary{background:transparent;color:var(--text-primary);border:2px solid var(--border-strong)}
.btn-secondary:hover{background:var(--bg-inverse);color:var(--text-inverse)}
.btn-accent{background:var(--accent-fill);color:var(--accent-text);border:2px solid var(--accent-fill)}
.btn-accent:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- Hero ---- */
.hero{padding:var(--space-9) 0 var(--space-8)}
.kicker{font-family:var(--font-ui);font-weight:700;font-size:13px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.hero h1{font-family:var(--font-display);font-weight:900;font-size:var(--text-hero);line-height:var(--leading-display);letter-spacing:var(--tracking-display);margin:0 0 24px;max-width:900px}
.hero .lede{font-family:var(--font-body);font-size:var(--text-body-lg);color:var(--text-secondary);max-width:var(--measure);margin:0 0 32px;text-wrap:pretty}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---- Section header ---- */
.section-header{border-bottom:var(--rule-heavy);padding-bottom:12px;margin-bottom:var(--space-6);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.section-header .kicker{margin-bottom:6px;font-size:12px}
.section-header h2{font-family:var(--font-display);font-weight:900;font-size:var(--text-h2);line-height:1;letter-spacing:var(--tracking-display);margin:0}
.section-header .action{font-family:var(--font-ui);font-weight:700;font-size:15px;white-space:nowrap}

/* ---- Cards (home Latest) ---- */
.card-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
.card-col{display:grid;gap:24px}
.card{display:block;text-decoration:none;color:var(--text-primary);border:1px solid var(--border-strong);background:var(--surface-card);padding:24px;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-pop)}
.card.featured{padding:32px}
.card .idx{font-family:var(--font-mono);font-size:13px;color:var(--accent);margin-bottom:12px}
.card h3{font-family:var(--font-display);font-weight:900;font-size:24px;line-height:1.05;letter-spacing:var(--tracking-display);margin:0 0 12px}
.card.featured h3{font-size:36px}
.card .excerpt{font-family:var(--font-body);font-size:16px;line-height:1.55;color:var(--text-secondary);margin:0 0 16px;text-wrap:pretty}
.card-banner{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;border:1px solid var(--border-strong);margin-bottom:16px}

/* ---- Meta line ---- */
.meta{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.meta .sep{color:var(--text-muted)}
.meta .author{color:var(--text-secondary)}

/* ---- Article index (Writing list) ---- */
.archive-link{margin:var(--space-7) 0 0;font-family:var(--font-ui);font-weight:700;font-size:15px}
.article-index{display:grid}
.article-index a{display:grid;grid-template-columns:52px 72px 1fr auto;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--border-default);text-decoration:none;color:var(--text-primary)}
.article-index a.no-thumb{grid-template-columns:52px 1fr auto}
.article-index .num{font-family:var(--font-mono);font-size:14px;color:var(--accent)}
.article-index .thumb{width:72px;height:72px;object-fit:cover;border:1px solid var(--border-strong);display:block}
.article-index .title{font-family:var(--font-display);font-weight:900;font-size:26px;letter-spacing:var(--tracking-display);line-height:1.1}
.article-index a:hover .title{color:var(--accent)}
.article-index .when{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);white-space:nowrap;text-align:right}

/* ---- Generic page head (Writing/Archive/section intros) ---- */
.page-head{padding:var(--space-8) 0 0}
.page-head h1{font-family:var(--font-display);font-weight:900;font-size:var(--text-h1);letter-spacing:var(--tracking-display);line-height:1;margin:0 0 16px}
.page-head p{font-family:var(--font-body);font-size:var(--text-body);color:var(--text-secondary);max-width:var(--measure);margin:0;text-wrap:pretty}

/* ---- Article (single) ---- */
.article{padding:var(--space-8) 0}
.article h1{font-family:var(--font-display);font-weight:900;font-size:var(--text-h1);line-height:1.02;letter-spacing:var(--tracking-display);margin:0 0 20px;text-wrap:pretty}
.article .meta-rule{padding-bottom:24px;border-bottom:var(--rule-heavy);margin-bottom:32px}
.prose{font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-primary)}
.prose p{margin:0 0 24px;text-wrap:pretty}
.prose h2{font-family:var(--font-display);font-weight:900;font-size:var(--text-h2);letter-spacing:var(--tracking-display);line-height:1.05;margin:40px 0 16px}
.prose h3{font-family:var(--font-display);font-weight:900;font-size:var(--text-h3);letter-spacing:var(--tracking-display);line-height:1.1;margin:32px 0 12px}
.prose blockquote{border-left:3px solid var(--border-strong);margin:0 0 24px;padding:4px 0 4px 24px;font-style:italic;font-size:var(--text-body-lg)}
.prose blockquote p{margin:0}
.prose pre{background:var(--code-bg);padding:20px;font-size:14px;line-height:1.6;overflow-x:auto;margin:0 0 24px}
.prose code{background:var(--code-bg);padding:2px 6px;font-size:15px}
.prose pre code{background:none;padding:0;font-size:14px}
.prose img{max-width:100%;height:auto}
.prose ul,.prose ol{margin:0 0 24px;padding-left:28px}
.prose li{margin-bottom:8px}
.article-footer{margin-top:var(--space-7)}
.attribution{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);margin:0}
.article-nav{margin-top:24px;padding-top:24px;border-top:1px solid var(--border-default);display:flex;justify-content:space-between;gap:16px;font-family:var(--font-ui);font-weight:700;font-size:15px}

/* ---- Archive (FWU) ---- */
.year-group{margin-top:var(--space-7)}
.year-group h2{font-family:var(--font-display);font-weight:900;font-size:var(--text-h3);letter-spacing:var(--tracking-display);margin:0 0 4px;padding-bottom:12px;border-bottom:var(--border-w-heavy) solid var(--border-strong);display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.year-group h2 .count{font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--text-muted)}
.issue-list{display:grid}
.issue-row{display:grid;grid-template-columns:52px 88px 1fr;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border-default);color:var(--text-primary);text-decoration:none;font-family:var(--font-body);font-size:16px}
.issue-row:hover{color:var(--accent)}
.issue-row .num{font-family:var(--font-mono);color:var(--accent);font-size:13px}
.issue-row time{font-family:var(--font-mono);color:var(--text-muted);font-size:13px}
.issue-row .title{line-height:1.4}

/* ================= Staging layout (spec) ================= */

/* Hero: abstract mark + credential strip */
.hero-head{display:flex;align-items:center;gap:22px}
.hero-mark{flex:0 0 auto;width:72px;height:72px;border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:26px;letter-spacing:-.02em;color:var(--accent)}

/* Section label + rule (not a heading box) */
.latest-head{margin:var(--space-8) 0 var(--space-5)}
.latest-head .kicker{margin:0 0 8px}
.latest-head .rule{height:2px;background:var(--accent);width:100%}

/* Topic chips */
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-6)}
.chip{font-family:var(--font-ui);font-size:13px;font-weight:500;padding:5px 14px;border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-secondary);text-decoration:none;transition:all var(--dur-fast) var(--ease-out)}
.chip:hover{border-color:var(--border-strong);color:var(--text-primary)}
.chip.active{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-text);font-weight:700}

/* Latest: feature card + compact 2-col */
.feature-card{display:block;text-decoration:none;color:var(--text-primary);border:1px solid var(--border-strong);background:var(--surface-card);padding:28px;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.feature-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-pop)}
.feature-card h3{font-family:var(--font-display);font-weight:900;font-size:32px;line-height:1.05;letter-spacing:var(--tracking-display);margin:0 0 14px}
.feature-card .excerpt{font-family:var(--font-body);font-size:17px;line-height:1.55;color:var(--text-secondary);margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feature-card .meta{font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}
.compact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-6);margin-top:var(--space-5)}
.compact{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--border-default);text-decoration:none;color:var(--text-primary)}
.compact .ct{font-family:var(--font-display);font-weight:900;font-size:19px;line-height:1.15;letter-spacing:var(--tracking-display)}
.compact:hover .ct{color:var(--accent)}
.compact .cm{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}

/* Quiet subscribe */
.subscribe{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border-default)}
.sub-copy{font-family:var(--font-body);font-size:16px;color:var(--text-secondary)}
.sub-rss{font-family:var(--font-ui);font-weight:700;font-size:14px;white-space:nowrap}
.all-writing{margin-top:var(--space-5);font-family:var(--font-ui);font-weight:700;font-size:15px}

/* Projects strip */
.projects{margin-top:var(--space-5)}
.projects-strip{display:grid;grid-template-columns:minmax(0,560px);gap:16px}
.project-card{display:block;text-decoration:none;color:var(--text-primary);border:1px solid var(--border-strong);background:var(--surface-card);padding:22px;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.project-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-pop)}
.project-card h3{font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:var(--tracking-display);margin:0 0 8px}
.project-card p{font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--text-secondary);margin:0}
.project-card.more{background:transparent}

/* Writing index: year dividers, hairline entries, generous rhythm */
.topic-title{font-family:var(--font-display);font-weight:900;font-size:var(--text-h1);letter-spacing:var(--tracking-display);line-height:1;margin:0 0 var(--space-5)}
.page-sub{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);margin:0 0 var(--space-6)}
.page-lead{margin-bottom:var(--space-6)}
.wl-group{margin-top:var(--space-8)}
.wl-year{font-family:var(--font-display);font-weight:900;font-size:var(--text-h2);letter-spacing:var(--tracking-display);line-height:1;margin:0 0 var(--space-4);padding-bottom:12px;border-bottom:var(--rule-heavy)}
.wl-list{display:grid}
.wl-entry{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid var(--border-default);text-decoration:none;color:var(--text-primary)}
.wl-title{font-family:var(--font-display);font-weight:900;font-size:24px;line-height:1.15;letter-spacing:var(--tracking-display)}
.wl-entry:hover .wl-title{color:var(--accent)}
.wl-meta{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);white-space:nowrap}

/* Author card + FAQ (GEO) */
.author-card{border:1px solid var(--border-default);background:var(--bg-subtle);padding:20px;margin-bottom:var(--space-6)}
.author-card .author-name{font-family:var(--font-display);font-weight:900;font-size:18px;letter-spacing:var(--tracking-display);margin-bottom:6px}
.author-card .author-bio{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--text-secondary);margin:0}
.faq{margin-top:var(--space-7)}
.faq h2{font-family:var(--font-display);font-weight:900;font-size:var(--text-h3);letter-spacing:var(--tracking-display);margin:0 0 var(--space-4)}
.faq dt{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:var(--tracking-display);line-height:1.2;margin:var(--space-4) 0 6px}
.faq dd{margin:0;font-family:var(--font-body);font-size:16px;color:var(--text-secondary);line-height:1.6}

/* ================= Dark hero + About layout (mockup) ================= */
.eyebrow{display:block;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-bright);margin-bottom:16px}

/* Dark hero band (home) */
.hero-dark{background:var(--ink);color:#fff;border-bottom:1px solid var(--line-dark);margin-bottom:var(--space-8)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;padding:96px 0 88px;align-items:start}
.hero-dark h1{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5.4vw,64px);letter-spacing:-.02em;line-height:1.15;margin:20px 0 24px}
.hero-dark h1 em{font-style:normal;color:var(--amber-bright)}
.hero-dark .lede{font-family:var(--font-body);font-size:19px;line-height:1.6;color:var(--ink-lede);max-width:52ch;margin:0}

/* Dark band (About intro / stats / page heads) */
.dark-band{background:var(--ink);color:#fff;padding:var(--space-8) 0}
.dark-band h1,.dark-band h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;color:#fff;font-size:clamp(30px,4vw,48px);line-height:1.15;margin:0}
.dark-band p{font-family:var(--font-body);font-size:17px;line-height:1.65;color:var(--ink-lede);max-width:66ch;margin:16px 0 0}

/* Stats strip */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:8px;overflow:hidden;margin-top:var(--space-6)}
.stat{background:var(--ink-2);padding:28px 24px}
.stat .n{font-family:var(--font-display);font-size:36px;font-weight:800;color:var(--amber-bright);line-height:1}
.stat .l{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light);margin-top:8px}

/* Timeline */
.about-section{padding:var(--space-8) 0}
.about-section h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin:0 0 var(--space-6)}
.timeline{border-left:2px solid var(--border-default);margin-left:8px;padding-left:36px;max-width:720px}
.tl-item{position:relative;padding-bottom:40px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-45px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--bg-page);border:3px solid var(--amber-bright)}
.tl-item .range{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase}
.tl-item h3{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;margin:8px 0}
.tl-item p{font-family:var(--font-body);font-size:15px;color:var(--text-secondary);max-width:60ch;margin:0;line-height:1.6}

/* Off-duty / info cards */
.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:var(--space-4)}
.info-card{border:1px solid var(--border-default);border-radius:8px;padding:26px;background:var(--surface-card);text-decoration:none;color:var(--text-primary);transition:transform .2s,box-shadow .2s}
.info-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(13,17,23,.08)}
.info-card .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-bright);font-weight:600}
.info-card h3{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;margin:12px 0 10px}
.info-card p{font-family:var(--font-body);font-size:14.5px;color:var(--text-secondary);margin:0;line-height:1.6}

/* ---- Responsive ---- */
@media (max-width:760px){
  .card-grid{grid-template-columns:1fr}
  .hero{padding:var(--space-8) 0 var(--space-7)}
  .compact-grid{grid-template-columns:1fr}
  .projects-strip{grid-template-columns:1fr}
  .hero-head{gap:16px}
  .hero-mark{width:56px;height:56px;font-size:20px}
}
@media (max-width:600px){
  .masthead-inner{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .masthead nav{flex-wrap:wrap;gap:2px}
  .masthead nav a{padding:6px 10px}
  .article-index a,.article-index a.no-thumb{grid-template-columns:40px 1fr;gap:12px;align-items:baseline}
  .article-index .thumb{display:none}
  .article-index .when{grid-column:2;text-align:left;margin-top:4px}
  .issue-row{grid-template-columns:44px 1fr;row-gap:2px}
  .issue-row time{grid-column:2}
  .wl-entry{flex-direction:column;gap:4px}
  .subscribe{flex-direction:column;gap:6px}
}
@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .info-cards{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:48px;padding:64px 0}
}