/* ============================================================
   Base — Modernist design-system tokens & components
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  /* Light theme (default) */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #d97757;
  --color-accent-2: #d97757;
  --color-on-accent: #191817;
  --color-divider: color-mix(in srgb, #201e1d 15%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fdf1ec;
  --color-accent-200: #fbe0d2;
  --color-accent-300: #f4c3ab;
  --color-accent-400: #e89c74;
  --color-accent-500: #d97757;
  --color-accent-600: #bf5f3f;
  --color-accent-700: #96432a;
  --color-accent-800: #6b2f1c;
  --color-accent-900: #3f1c10;

  --font-heading: "Source Serif 4", Georgia, serif;
  --font-heading-weight: 400;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); transition: background-color .3s ease, color .3s ease; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); }
h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); }
.btn svg { display: block; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }

.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-divider); }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.grayscale { filter: grayscale(1) contrast(1.08); }

/* ============================================================
   Page theme — dark "poster" direction (opt-in via toggle)
   ============================================================ */
:root[data-theme="dark"]{
  --color-bg:#191817;
  --color-surface:#232220;
  --color-text:#f0eee6;
  --color-divider:rgba(240,238,230,.20);
  --color-accent:#d97757;
  --color-accent-2:#d97757;
  --color-on-accent:#191817;
  --color-neutral-100:#232220;--color-neutral-200:#2c2b28;--color-neutral-300:#38362f;--color-neutral-400:#4a473f;--color-neutral-500:#6b675d;
  --color-neutral-600:#918b7f;--color-neutral-700:#b3ada0;--color-neutral-800:#d3cec1;
  --color-neutral-900:#f0eee6;
  --color-accent-100:#33211a;--color-accent-200:#452a20;--color-accent-300:#5f3927;
  --color-accent-400:#9c5b41;--color-accent-500:#d97757;--color-accent-600:#e08e70;
  --color-accent-700:#eda98c;--color-accent-800:#f6cdb9;--color-accent-900:#fbe7dc;
  --font-heading:"Source Serif 4",Georgia,serif;
  --font-heading-weight:400;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 6px 22px rgba(0,0,0,.45);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
}
h1,h2,h3,h4{letter-spacing:-.015em}
.btn,.nav a,.tag,h6,.mono{font-family:"Archivo",system-ui,sans-serif}
.btn{font-weight:600}
a{color:var(--color-accent-700);text-decoration:none}
a:hover{color:var(--color-accent)}
::selection{background:rgba(217,119,87,.35)}

@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes cellpop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.rv{opacity:0}
.rv.in{animation:rise .72s cubic-bezier(.22,.75,.25,1) both}
.hero-el{animation:rise .8s cubic-bezier(.22,.75,.25,1) both}
.cell{animation:cellpop .5s ease both}
.nav a:not(.btn){position:relative;padding-bottom:2px}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,.75,.25,1)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.bul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.bul li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:var(--color-neutral-800);max-width:80ch;text-wrap:pretty}
.bul li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--color-accent);transition:transform .2s}
.bul li:hover::before{transform:rotate(45deg)}
.bul b{color:var(--color-text);font-weight:600}
.bul em{font-style:normal;color:var(--color-accent-700);font-weight:600}
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--color-accent);z-index:50;transition:width .12s linear}
.nav{background:color-mix(in srgb, var(--color-bg) 72%, transparent)!important;backdrop-filter:blur(14px) saturate(1.2)}
.btn-primary{position:relative;transition:box-shadow .3s,transform .2s}
.btn-primary:hover{box-shadow:0 0 0 1px var(--color-accent),0 8px 30px rgba(217,119,87,.35);transform:translateY(-1px)}
.exp-row{transition:transform .3s cubic-bezier(.22,.75,.25,1)}
.exp-row:hover{transform:translateX(4px)}
.cell{transition:transform .18s,box-shadow .18s}
.cell:hover{transform:scale(1.9);box-shadow:0 0 14px rgba(217,119,87,.6)}
@media (prefers-reduced-motion:reduce){.rv,.hero-el,.cell{animation:none!important;opacity:1!important}}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.sechd{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid var(--color-divider);padding-bottom:12px;margin-bottom:28px}
.sechd h2{margin:0;font-size:30px;letter-spacing:-.02em}
.sechd .n{font:600 11px/1 ui-monospace,Menlo,monospace;color:var(--color-accent-700);letter-spacing:.14em}
.sechd .r{margin-left:auto;font-size:12px;color:var(--color-neutral-700)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.fcard{border:2px solid var(--color-divider);background:var(--color-surface);display:flex;flex-direction:column;transition:border-color .18s,transform .18s,box-shadow .18s}
.fcard:hover{border-color:var(--color-accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.scard{border:1px solid var(--color-divider);padding:18px;display:flex;flex-direction:column;gap:10px;background:var(--color-bg);transition:background .18s,border-color .18s;text-decoration:none;color:var(--color-text)}
.scard:hover{background:var(--color-surface);border-color:var(--color-accent)}
.archbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.archnode{border:1px solid var(--color-neutral-500);padding:5px 9px;font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--color-neutral-800);background:var(--color-bg)}
.archarrow{font:600 11px/1 ui-monospace,Menlo,monospace;color:var(--color-accent)}
.exp-row:hover .exp-bar{background:var(--color-accent)}
.wr{display:grid;gap:20px;padding:18px 14px;border-bottom:1px solid var(--color-divider);transition:background .18s;color:var(--color-text);text-decoration:none}
.wr:hover{background:var(--color-surface)}
.gif{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:0;transition:opacity .35s}
.media:hover .gif.active,.media.touched .gif.active{opacity:1}
.media:hover .archbox,.media:hover .mono,.media.touched .archbox,.media.touched .mono{opacity:0;transition:opacity .3s}
.media.has-gif{cursor:pointer}
.gif-tabs{position:absolute;left:0;right:0;bottom:0;display:flex;gap:1px;z-index:2;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.gif-tab{flex:1;padding:6px 0;border:0;border-top:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.65);font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.gif-tab:hover{color:#fff}
.gif-tab.active{background:var(--color-accent);color:var(--color-on-accent)}
.chip{font-family:Archivo,system-ui,sans-serif;font-size:12.5px;font-weight:600;padding:7px 13px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--color-accent)!important;color:var(--color-accent-700)!important}

/* case study panel */
.case-study{display:none;border-top:2px solid var(--color-divider)}
.case-study.open{display:grid;animation:rise .5s cubic-bezier(.22,.75,.25,1) both}

/* experience details toggle — mobile only, desktop always shows full bullets */
.exp-toggle{display:none;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;cursor:pointer;background:var(--color-accent);color:var(--color-on-accent);border:0;margin-bottom:10px}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px){
  .wrap{padding:0 22px}
  .hero-grid{grid-template-columns:1fr!important}
  .hero-grid h1{font-size:44px!important}
  .hero-side{order:-1;max-width:260px}
  .feat-grid{grid-template-columns:1fr!important}
  .feat-media{border-left:0!important;border-top:2px solid var(--color-divider)}
  .media{min-height:200px!important}
  .exp-toggle{display:inline-block}
  .exp-row .bul{display:none}
  .exp-row .bul.open{display:flex}
  .rest-grid{grid-template-columns:1fr 1fr!important}
  .case-study.open{grid-template-columns:1fr 1fr!important}
  .stack-grid{grid-template-columns:1fr 1fr!important}
  .edu-grid{grid-template-columns:1fr!important;gap:24px!important}
  .activity-stats{grid-template-columns:1fr 1fr!important}
  .writing-row{grid-template-columns:1fr!important;gap:6px!important}
  .writing-row .wr-meta{order:2}
  .writing-row .wr-cta{order:3;text-align:left!important}
  .exp-row{grid-template-columns:96px 4px 1fr!important;gap:12px!important}
  .nav-row{flex-wrap:wrap;row-gap:8px}
  .nav-row .nav-brand{width:100%;margin-right:0;font-size:15px!important}
  .announce{flex-wrap:wrap;row-gap:6px}
  .announce-text{flex:1 1 100%;min-width:0}
  .announce-cta{margin-left:0!important}
  footer h2{font-size:34px!important}
}
@media (max-width: 620px){
  .rest-grid{grid-template-columns:1fr!important}
  .stack-grid{grid-template-columns:1fr!important}
  .case-study.open{grid-template-columns:1fr!important}
  .activity-stats{grid-template-columns:1fr!important}
  .announce{flex-wrap:wrap}
}