/* ═════════════════════════════════════════════════════════════════════════
   RESUME · v2 EDITORIAL · Lucas Liberatore · 2026-05-16
   Shared stylesheet across /resume (Operator default) + 3 variants.
   Inspired by evbowdsgn.com — editorial restraint, magazine typography.
   ═════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Inter'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('/fonts/Inter.var.woff2') format('woff2-variations'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-style: italic; font-display: swap;
  src: url('/fonts/Cormorant-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/fonts/Cormorant-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('/fonts/Cormorant-500-normal.woff2') format('woff2'); }

:root {
  --ink: #0E120E;
  --ink-soft: #1a1f1a;
  --paper: #FAF7F2;
  --paper-2: #F4EFE6;
  --taupe: #6B6557;
  --taupe-soft: #9C9686;
  --gold: #C9941F;
  --gold-soft: #E3B85F;
  --hairline: rgba(14, 18, 14, 0.10);
  --hairline-strong: rgba(14, 18, 14, 0.22);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --sheet-max: 1180px;
  --gutter: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { cursor: default; background: var(--paper); }
body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11", "kern";
}
a { color: inherit; text-decoration: none; cursor: pointer; }
img { display: block; max-width: 100%; }

/* TOP BAR */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.topbar__inner {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
}
.topbar__brand {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 22px; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.topbar__brand:hover { color: var(--gold); }
.topbar__brand .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); display: inline-block;
}
.topbar__nav {
  display: flex; align-items: center; gap: var(--s5);
  font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--taupe);
}
.topbar__nav a { transition: color 160ms; padding: 8px 0; }
.topbar__nav a:hover, .topbar__nav a:focus-visible { color: var(--ink); outline: none; }
.topbar__nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--gold); }
.topbar__nav .sep { color: var(--hairline-strong); }
.topbar__actions { display: flex; gap: var(--s4); align-items: center; }
.topbar__btn {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  transition: all 200ms;
  display: inline-flex; align-items: center; gap: 8px;
}
.topbar__btn:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.topbar__btn--gold { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.topbar__btn--gold:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
@media (max-width: 720px) { .topbar__nav { display: none; } }

/* VARIANT SWITCHER */
.variant-bar {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: var(--s5) var(--gutter) 0;
  display: flex; gap: var(--s2); flex-wrap: wrap;
}
.variant-pill {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--taupe);
  transition: all 180ms;
}
.variant-pill:hover { color: var(--ink); border-color: var(--hairline-strong); }
.variant-pill[aria-current="page"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* SHEET */
.sheet { max-width: var(--sheet-max); margin: var(--s7) auto var(--s9); padding: 0 var(--gutter); }

/* COVER */
.cover {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s7);
  padding-bottom: var(--s7);
  border-bottom: 1px solid var(--hairline-strong);
  margin-bottom: var(--s8);
}
.cover__overline {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: var(--s4);
  display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
}
.cover__overline .badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--ink);
}
.cover__overline .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.cover h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 9vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--s5);
}
.cover h1 em { font-style: italic; color: var(--ink); font-weight: 400; }
.cover h1 .accent { color: var(--gold); font-style: italic; }
.cover__lede {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 56ch;
}
.cover__lede em { color: var(--gold); font-style: italic; }
.cover__meta {
  text-align: right;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--taupe);
  line-height: 2;
  white-space: nowrap;
}
.cover__meta a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color 180ms; }
.cover__meta a:hover { border-bottom-color: var(--gold); }
.cover__meta .killer {
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: 16px; letter-spacing: 0; text-transform: none;
  color: var(--gold);
  margin-top: var(--s4);
  max-width: 30ch;
  white-space: normal;
  line-height: 1.3;
}
@media (max-width: 880px) {
  .cover { grid-template-columns: 1fr; gap: var(--s5); }
  .cover__meta { text-align: left; }
  .cover__meta .killer { max-width: 100%; }
}

/* SECTION */
.section { margin-bottom: var(--s9); }
.section__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s6);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--hairline);
  gap: var(--s4); flex-wrap: wrap;
}
.section__label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink);
}
.section__label .num { color: var(--gold); margin-right: 12px; }
.section__sub {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--taupe);
}

/* PANTHEON */
.pantheon { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.product {
  position: relative;
  padding: var(--s6);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  transition: border-color 260ms, transform 260ms;
}
.product:hover { border-color: var(--gold); transform: translateY(-2px); }
.product__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s4); }
.product__name { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1; letter-spacing: -0.015em; }
.product__name em { font-style: italic; color: var(--gold); }
.product__tagline { font-family: var(--sans); font-size: 13px; color: var(--taupe); margin-top: 6px; letter-spacing: 0.01em; }
.product__status {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  white-space: nowrap;
}
.product__status--live { background: var(--ink); color: var(--paper); }
.product__status--stealth { background: var(--paper-2); color: var(--taupe); }
.product__metrics { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s4) 0; }
.product__metric {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--taupe);
  padding: 4px 9px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
}
.product__lede {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; line-height: 1.45;
  color: var(--ink-soft);
  margin: var(--s4) 0;
  max-width: 50ch;
}
.product__bullets { list-style: none; padding-top: var(--s3); border-top: 1px solid var(--hairline); }
.product__bullets li {
  font-size: 13.5px; font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  padding: 6px 0 6px 18px;
  position: relative;
}
.product__bullets li::before {
  content: ''; position: absolute; left: 0; top: 14px;
  width: 8px; height: 1px; background: var(--gold);
}
.product__url {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s4);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--taupe);
  transition: color 180ms;
}
.product__url:hover { color: var(--gold); }
@media (max-width: 880px) {
  .pantheon { grid-template-columns: 1fr; }
  .product__name { font-size: 28px; }
}

/* SIGNATURE */
.signature {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  background: var(--ink); color: var(--paper);
  padding: var(--s7);
  border-radius: 4px;
}
.signature__overline { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: var(--s4); }
.signature__title { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: 1; letter-spacing: -0.015em; margin-bottom: var(--s4); }
.signature__title em { font-style: italic; color: var(--gold-soft); }
.signature__tagline { font-family: var(--serif); font-style: italic; font-size: 18px; color: rgba(250, 247, 242, 0.78); }
.signature__lede { font-size: 14px; line-height: 1.6; color: rgba(250, 247, 242, 0.85); margin-bottom: var(--s4); }
.signature__bullets { list-style: none; }
.signature__bullets li { font-size: 13px; line-height: 1.6; color: rgba(250, 247, 242, 0.78); padding: 6px 0 6px 18px; position: relative; }
.signature__bullets li::before { content: '→'; position: absolute; left: 0; color: var(--gold-soft); font-family: var(--mono); font-size: 12px; top: 8px; }
@media (max-width: 880px) { .signature { grid-template-columns: 1fr; padding: var(--s5); } }

/* EXPERIENCE */
.experience .row {
  display: grid; grid-template-columns: 180px 1fr;
  gap: var(--s5);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--hairline);
}
.experience .row:last-child { border-bottom: none; }
.experience .row__dates { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); padding-top: 4px; }
.experience .row__title { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -0.005em; }
.experience .row__title em { font-style: italic; color: var(--gold); }
.experience .row__where { font-family: var(--sans); font-size: 13px; color: var(--taupe); margin-top: 4px; letter-spacing: 0.01em; }
.experience .row__bullets { list-style: none; margin-top: var(--s3); }
.experience .row__bullets li { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-soft); padding: 4px 0 4px 18px; position: relative; }
.experience .row__bullets li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background: var(--gold); }
@media (max-width: 720px) { .experience .row { grid-template-columns: 1fr; gap: var(--s3); } }

/* STACK */
.stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s7); }
.stack__group .stack__name { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--hairline); }
.stack__group ul { list-style: none; }
.stack__group li { font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 880px) { .stack { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stack { grid-template-columns: 1fr; } }

/* EDUCATION + CERTS */
.education-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); }
.education-grid .ed-block { padding: var(--s5); background: var(--paper-2); border-radius: 4px; }
.education-grid .ed-block .ed__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s3); }
.education-grid .ed-block .ed__title { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; }
.education-grid .ed-block .ed__sub { font-size: 13px; color: var(--taupe); margin-top: 4px; }
.education-grid .ed-block .ed__dates { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); margin-top: var(--s2); }
.education-grid .certs-list { list-style: none; margin-top: var(--s3); }
.education-grid .certs-list li { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); padding: 4px 0 4px 18px; position: relative; }
.education-grid .certs-list li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-family: var(--mono); font-size: 12px; }
@media (max-width: 720px) { .education-grid { grid-template-columns: 1fr; } }

/* FOOTER */
.footer { background: var(--ink); color: rgba(250, 247, 242, 0.78); padding: var(--s8) var(--gutter); text-align: center; }
.footer__line { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); color: var(--paper); margin-bottom: 10px; letter-spacing: -0.01em; }
.footer__sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(250, 247, 242, 0.42); }
.footer__actions { margin-top: var(--s5); display: flex; gap: var(--s5); justify-content: center; flex-wrap: wrap; }
.footer__actions a {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(250, 247, 242, 0.78);
  padding: 10px 18px;
  border: 1px solid rgba(250, 247, 242, 0.18);
  border-radius: 999px;
  transition: all 180ms;
}
.footer__actions a:hover { color: var(--paper); border-color: var(--gold-soft); transform: translateY(-1px); }

/* PRINT */
@media print {
  body { background: #fff; }
  .topbar, .variant-bar, .footer { display: none !important; }
  .sheet { margin: 0; padding: 24px; max-width: 100%; }
  .cover { gap: var(--s4); padding-bottom: var(--s4); margin-bottom: var(--s5); }
  .cover h1 { font-size: 48px !important; }
  .cover__lede { font-size: 14px !important; }
  .cover__meta { font-size: 9px; line-height: 1.6; }
  .cover__meta .killer { font-size: 12px !important; }
  .section { margin-bottom: var(--s5); page-break-inside: avoid; }
  .section__head { margin-bottom: var(--s3); padding-bottom: var(--s2); }
  .pantheon { gap: var(--s3); }
  .product { padding: var(--s4); page-break-inside: avoid; border-color: #ccc; }
  .product__name { font-size: 22px; }
  .product__tagline { font-size: 11px; }
  .product__lede { font-size: 13px; margin: var(--s2) 0; }
  .product__bullets li { font-size: 11px; line-height: 1.4; padding: 3px 0 3px 14px; }
  .product__status, .product__metric, .product__url { font-size: 8.5px; }
  .signature { padding: var(--s4); background: #1a1a1a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .signature__title { font-size: 26px; }
  .signature__lede, .signature__bullets li { font-size: 11px; line-height: 1.45; }
  .experience .row { padding: var(--s3) 0; grid-template-columns: 130px 1fr; gap: var(--s4); page-break-inside: avoid; }
  .experience .row__title { font-size: 16px; }
  .experience .row__where, .experience .row__bullets li { font-size: 11px; line-height: 1.45; }
  .stack { gap: var(--s3); }
  .stack__group li { font-size: 11px; line-height: 1.45; }
  .education-grid { gap: var(--s4); }
  .education-grid .ed-block { padding: var(--s4); background: #f4efe6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .education-grid .ed-block .ed__title { font-size: 14px; }
  .education-grid .ed-block .ed__sub { font-size: 11px; }
  .education-grid .certs-list li { font-size: 11px; padding: 2px 0 2px 14px; }
  a { color: inherit !important; text-decoration: none !important; }
  @page { size: letter; margin: 0.35in; }
}

/* Watermark */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url('/img/renders/hero-cube-final.png?v=27');
  background-size: 80% auto;
  background-position: 120% 60%;
  background-repeat: no-repeat;
  opacity: 0.03;
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }
@media print { body::before { display: none; } }