/* ============================================================
   SHARED STYLESHEET — used by every page on the site.
   Edit colors, fonts, or spacing here ONCE and it updates
   every page. Do not duplicate this file per page.
   ============================================================ */

:root{
  --ink:#10141C;
  --ink-2:#161C27;
  --paper:#F1EEE6;
  --paper-dim:#E6E2D6;
  --brass:#B08D3E;
  --brass-light:#D9C48F;
  --teal:#2E6E58;
  --rust:#A34A34;
  --slate:#8B93A1;
  --slate-dark:#454C58;
  --hair: rgba(241,238,230,0.14);
  --hair-dark: rgba(16,20,28,0.14);
  --serif:'Source Serif 4', serif;
  --sans:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}

/* ===== nav (same on every page) ===== */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 56px; border-bottom:1px solid var(--hair-dark);
  background:var(--paper);
}
.nav-name{ font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.01em;}
.nav-name span{ color:var(--brass); }
.nav-links{ display:flex; gap:36px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--slate-dark);}
.nav-links a:hover{ color:var(--brass); }
.nav-links a.current{ color:var(--brass); }

/* ===== home hero ===== */
.hero{ background:var(--ink); color:var(--paper); padding:88px 56px 64px; position:relative; }
.hero-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-light); margin-bottom:22px; }
.hero h1{ font-family:var(--serif); font-weight:500; font-size:52px; line-height:1.12; max-width:760px; letter-spacing:-.01em; }
.hero h1 em{ font-style:italic; color:var(--brass-light); }
.hero p{ font-size:16px; color:var(--slate); max-width:480px; margin-top:22px; line-height:1.65; }
.hero-ctas{ display:flex; gap:14px; margin-top:34px; }
.btn{ font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; padding:12px 22px; border:1px solid var(--brass); cursor:pointer; display:inline-block;}
.btn-fill{ background:var(--brass); color:var(--ink); font-weight:500;}
.btn-outline{ background:transparent; color:var(--paper); border-color:var(--slate);}

.ticker{ display:flex; border-top:1px solid var(--hair); margin-top:56px; font-family:var(--mono); font-size:12.5px; }
.ticker div{ flex:1; padding:16px 0 0; border-right:1px solid var(--hair); }
.ticker div:last-child{ border-right:none; }
.ticker .t-label{ color:var(--slate); font-size:11px; text-transform:uppercase; letter-spacing:.08em;}
.ticker .t-val{ font-size:16px; margin-top:6px; color:var(--paper); font-weight:500;}
.ticker .t-val.up{ color:#7BC9A8; }

.section{ padding:64px 56px; }
.section-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:34px;}
.section-head h2{ font-family:var(--serif); font-size:26px; font-weight:500; }
.section-head a{ font-family:var(--mono); font-size:12px; color:var(--brass); border-bottom:1px solid var(--brass); padding-bottom:2px;}

.skill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:60px;}
.chip{ font-family:var(--mono); font-size:12px; padding:7px 14px; border:1px solid var(--ink); color:var(--ink); letter-spacing:.02em;}

.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* ===== tombstone project card (used on home + grid) ===== */
.tombstone{ border:1px solid var(--ink); padding:26px 22px 22px; background:var(--paper); position:relative; transition:border-color .15s;}
.tombstone:before, .tombstone:after{ content:""; position:absolute; left:10px; right:10px; height:1px; background:var(--ink);}
.tombstone:before{ top:6px; }
.tombstone:after{ bottom:6px; }
.tombstone:hover{ border-color:var(--brass); }
.tombstone .kicker{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--brass); margin:8px 0 14px;}
.tombstone h3{ font-family:var(--serif); font-size:20px; font-weight:500; margin-bottom:10px; line-height:1.3;}
.tombstone .result{ font-family:var(--mono); font-size:13px; color:var(--teal); margin-bottom:16px;}
.tombstone .tags{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 0;}
.tombstone .tag{ font-size:10.5px; font-family:var(--mono); color:var(--slate-dark); border:1px solid var(--hair-dark); padding:3px 8px;}
.tombstone .view{ display:block; margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--ink); border-top:1px solid var(--hair-dark); padding-top:12px;}
.tombstone .view:hover{ color:var(--brass); }

.about-strip{ background:var(--ink-2); color:var(--paper); padding:56px; display:flex; gap:56px; align-items:flex-start; flex-wrap:wrap;}
.about-strip .avatar{ width:96px; height:96px; border:1px solid var(--brass); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:30px; color:var(--brass-light);}
.about-strip p{ color:var(--slate); max-width:620px; line-height:1.7; font-size:15px;}
.about-strip strong{ color:var(--paper); font-weight:500;}

.footer{ padding:30px 56px; border-top:1px solid var(--hair-dark); display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px; color:var(--slate-dark); flex-wrap:wrap; gap:8px;}

/* ===== project detail page ===== */
.breadcrumb{ padding:18px 56px 0; font-family:var(--mono); font-size:12px; color:var(--slate-dark);}
.breadcrumb a{ color:var(--brass); }

.p-header{ padding:26px 56px 40px; border-bottom:1px solid var(--hair-dark); }
.p-kicker{ font-family:var(--mono); font-size:12px; color:var(--brass); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px;}
.p-header h1{ font-family:var(--serif); font-size:38px; font-weight:500; max-width:720px; line-height:1.2;}
.p-header .summary{ font-size:16px; color:var(--slate-dark); max-width:600px; margin-top:16px; line-height:1.6;}
.p-meta{ display:flex; gap:34px; margin-top:28px; font-family:var(--mono); font-size:12px; color:var(--slate-dark); flex-wrap:wrap;}
.p-meta b{ display:block; color:var(--ink); font-size:13px; margin-top:4px; font-weight:500;}

.p-body{ padding:48px 56px; display:grid; grid-template-columns:1.4fr 1fr; gap:56px; max-width:1200px;}
.p-block{ margin-bottom:44px; }
.p-block h2{ font-family:var(--serif); font-size:19px; font-weight:500; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--hair-dark);}
.p-block p{ font-size:14.5px; color:var(--slate-dark); line-height:1.75;}

.ledger{ width:100%; border-collapse:collapse; font-size:13.5px;}
.ledger tr{ border-bottom:1px solid var(--hair-dark); }
.ledger td{ padding:11px 4px; }
.ledger td:first-child{ color:var(--slate-dark); }
.ledger td:last-child{ text-align:right; font-family:var(--mono); font-weight:500;}

.output-card{ background:var(--ink); color:var(--paper); padding:28px; margin-bottom:20px;}
.output-card .label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--slate); margin-bottom:10px;}
.output-card .num{ font-family:var(--mono); font-size:38px; color:var(--brass-light); font-weight:500;}
.output-card .sub{ font-size:13px; color:var(--slate); margin-top:6px;}

.sens-table{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px; margin-top:16px;}
.sens-table th{ background:var(--paper-dim); padding:8px; font-weight:500; text-align:center; border:1px solid var(--hair-dark);}
.sens-table td{ padding:8px; text-align:center; border:1px solid var(--hair-dark); }
.sens-table td.mid{ background:var(--brass); color:var(--ink); font-weight:500;}

.downloads{ display:flex; gap:12px; margin-bottom:44px; flex-wrap:wrap;}
.dl-btn{ border:1px solid var(--ink); padding:12px 18px; font-family:var(--mono); font-size:12.5px; display:flex; align-items:center; gap:8px;}
.dl-btn:hover{ border-color:var(--brass); color:var(--brass); }

.critique{ border-left:2px solid var(--brass); padding:16px 20px; background:var(--paper-dim); font-size:14px; color:var(--slate-dark); line-height:1.7; font-style:italic;}

.skills-used{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}

.side-nav{ font-family:var(--mono); font-size:12px; }
.side-nav a{ display:block; padding:9px 0; color:var(--slate-dark); border-bottom:1px solid var(--hair-dark);}
.side-nav a:hover{ color:var(--brass); }

/* ===== projects grid page ===== */
.grid-header{ padding:40px 56px 0; }
.grid-header .p-kicker{ margin-bottom:10px; }
.grid-header h1{ font-family:var(--serif); font-size:32px; font-weight:500; }

.filter-bar{ padding:26px 56px; border-bottom:1px solid var(--hair-dark); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.filter-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.f-chip{ font-family:var(--mono); font-size:12px; padding:8px 14px; border:1px solid var(--hair-dark); color:var(--slate-dark); cursor:pointer;}
.f-chip.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.result-count{ font-family:var(--mono); font-size:12px; color:var(--slate-dark); }

.grid-body{ padding:44px 56px 64px; }
.grid9{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid9 .tombstone h3{ font-size:17px; min-height:44px; }
.grid9 .tombstone .result{ font-size:12px; }

/* ===== simple content pages (about / resume / contact) ===== */
.simple-page{ padding:64px 56px; max-width:760px; }
.simple-page h1{ font-family:var(--serif); font-size:34px; font-weight:500; margin-bottom:22px;}
.simple-page p{ font-size:15px; color:var(--slate-dark); line-height:1.8; margin-bottom:18px;}
.contact-list{ margin-top:24px; font-family:var(--mono); font-size:14px; }
.contact-list div{ padding:12px 0; border-bottom:1px solid var(--hair-dark); display:flex; justify-content:space-between;}
.contact-list a{ color:var(--brass); }

@media(max-width:900px){
  .grid3, .grid9{ grid-template-columns:1fr; }
  .p-body{ grid-template-columns:1fr; }
  .hero h1{ font-size:36px; }
  .nav, .hero, .section, .p-header, .p-body, .about-strip, .footer, .grid-header, .filter-bar, .grid-body, .simple-page{ padding-left:24px; padding-right:24px;}
}