/* 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:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Source Serif 4",Georgia,serif;
  --font-ui:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --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 ---- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px var(--page-pad);border-bottom:var(--rule-heavy);background:var(--bg-page)}
.wordmark{font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:var(--tracking-display);color:var(--text-primary);text-decoration:none}
.masthead nav{display:flex;gap:28px;align-items:center}
.masthead nav a{font-family:var(--font-ui);font-weight:500;font-size:15px;color:var(--text-secondary);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.masthead nav a:hover{color:var(--text-primary)}
.masthead nav a.active{font-weight:700;color:var(--text-primary);border-bottom-color:var(--accent)}
.theme-toggle{font-family:var(--font-mono);font-size:12px;padding:4px 10px;border:1px solid var(--border-default);background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:0}
.theme-toggle:hover{color:var(--text-primary);border-color:var(--border-strong)}

/* ---- 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}
.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}

/* ---- Responsive ---- */
@media (max-width:760px){
  .card-grid{grid-template-columns:1fr}
  .hero{padding:var(--space-8) 0 var(--space-7)}
}
@media (max-width:600px){
  .masthead nav{gap:18px}
  .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}
}