/* ==========================================================================
   Edward Cates — résumé · v2
   Full-width tiles. Mobile, desktop, PDF — all stack the same way.
   ========================================================================== */

:root {
  --paper:    #f4efe6;
  --tile:     #fbf8f1;
  --tile-2:   #f0ead9;
  --ink:      #18171a;
  --ink-soft: #3f3b37;
  --ink-mute: #7a736a;
  --rule:     #ddd3bf;
  --rule-soft:#e8e0cc;
  --accent:   #a23a1f;

  --maxw: 760px;
  --gutter: clamp(16px, 4vw, 32px);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color .15s, border-color .15s;
}
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.mono { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.02em; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(244, 239, 230, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mark { font-weight: 600; letter-spacing: 0.1em; }
.mark .dot { color: var(--accent); }
.topbar__label { color: var(--ink-mute); }
.pdf-btn {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  transition: background .15s;
}
.pdf-btn:hover { background: var(--accent); }

/* ---------- page (the stack of tiles) ---------- */
.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px) var(--gutter) clamp(24px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 18px);
}

/* ---------- tile (the universal building block) ---------- */
.tile {
  background: var(--tile);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: clamp(22px, 4vw, 36px);
  position: relative;
}

.kicker {
  display: block;
  color: var(--accent);
  margin-bottom: 14px;
  text-transform: lowercase;
  letter-spacing: 0.06em;
}

.tile__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  font-variation-settings: "opsz" 48;
}

.tile p {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}
.tile p:last-child { margin-bottom: 0; }
.tile p strong { color: var(--ink); font-weight: 600; }

/* ---------- 1 · identity ---------- */
.tile--identity { padding-bottom: clamp(26px, 4.5vw, 40px); }
.name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  font-variation-settings: "opsz" 144;
}
.role {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--ink-soft);
  margin: 0 0 14px;
  font-variation-settings: "opsz" 36;
}
.meta {
  color: var(--ink-mute);
  margin: 0 0 22px !important;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
}
.bio {
  max-width: 60ch;
  font-size: clamp(15px, 1.2vw, 17px) !important;
  line-height: 1.6 !important;
  color: var(--ink-soft);
  margin: 0 0 22px !important;
}
.actions {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  color: var(--ink-mute);
}
.actions a, .actions .link-btn {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  background: none; padding: 0; cursor: pointer;
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.02em;
}
.actions a:hover, .actions .link-btn:hover {
  color: var(--accent); border-bottom-color: var(--accent);
}

.pulse {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(162, 58, 31, 0.7);
  animation: pulse 2.4s infinite;
  vertical-align: 1px;
  margin-right: 2px;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(162, 58, 31, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(162, 58, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(162, 58, 31, 0); }
}

/* ---------- 2 · looking for ---------- */
.lede {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 22px) !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  font-variation-settings: "opsz" 24;
}
.lede strong { color: var(--accent); font-weight: 500; }

/* ---------- generic tile intro line ---------- */
.tile__intro {
  color: var(--ink-mute) !important;
  font-size: 0.88rem !important;
  margin-bottom: 18px !important;
  font-style: italic;
}

/* ---------- 3 · in their words ---------- */
.quotes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.quotes li {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--ink);
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--accent);
  font-variation-settings: "opsz" 24;
}
.quotes li em { font-style: normal; font-weight: 500; color: var(--accent); }

/* ---------- 4 · leading (accented) ---------- */
.tile--accent {
  background: var(--tile-2);
  border-color: var(--rule);
  position: relative;
}
.tile--accent::before {
  content: "";
  position: absolute;
  top: 18px; bottom: 18px; left: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.tile--accent .aside {
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  font-style: italic;
  color: var(--ink) !important;
  margin-top: 16px !important;
}
.leadstat {
  color: var(--ink-mute) !important;
  font-size: 0.8rem !important;
  margin-top: 8px !important;
  text-transform: lowercase;
}

/* ---------- 5/6 · experience & projects ---------- */
.job { padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.job:first-of-type { border-top: none; padding-top: 4px; }
.job:last-of-type { padding-bottom: 0; }

.job header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin-bottom: 8px;
}
.job h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.2;
  margin: 0;
  font-variation-settings: "opsz" 36;
}
.job__co { color: var(--ink-mute); }

/* project groups (segmented by company) */
.projgroup + .projgroup { margin-top: 24px; }
.projgroup__h {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-variation-settings: "opsz" 36;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
}
.projgroup__h .mono { color: var(--ink-mute); font-weight: 400; }

.proj { padding: 12px 0; border-top: 1px dashed var(--rule-soft); }
.proj:first-of-type { border-top: none; padding-top: 10px; }
.proj:last-of-type { padding-bottom: 0; }

.proj header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin-bottom: 4px;
}
.proj h4 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
  font-variation-settings: "opsz" 24;
}
.proj__co { color: var(--ink-mute); }
.proj p { font-size: 0.94rem !important; margin: 0 !important; line-height: 1.55 !important; }

.proj__more {
  margin: 16px 0 0 !important;
  padding: 10px 12px !important;
  font-size: 0.78rem !important;
  color: var(--ink-mute) !important;
  background: var(--paper);
  border-radius: 4px;
  line-height: 1.55 !important;
  border: 1px dashed var(--rule-soft);
}
.proj__more strong { color: var(--ink) !important; font-weight: 500; }

/* ---------- 7 · skills ---------- */
.skills { list-style: none; padding: 0; margin: 0; }
.skills li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}
.skills li:first-child { border-top: none; padding-top: 0; }
.skills li:last-child { padding-bottom: 0; }
.skills__k {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-transform: lowercase;
}
.skills li > span:last-child {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 480px) {
  .skills li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- 8 · education ---------- */
.edu { list-style: none; padding: 0; margin: 0; }
.edu li {
  padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
}
.edu li:first-child { border-top: none; padding-top: 0; }
.edu li:last-child { padding-bottom: 0; }
.edu strong { color: var(--ink); font-weight: 600; }
.edu .mono { color: var(--ink-mute); }
.edu em { width: 100%; color: var(--ink-mute); font-style: italic; font-size: 0.88rem; }

/* ---------- 7 · on camera ---------- */
.videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 20px;
}
@media (min-width: 720px) {
  .videos { grid-template-columns: 1fr 1fr; gap: 22px; }
}

.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--rule);
}
.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video__h {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 17px);
  margin: 0 0 6px;
  line-height: 1.25;
  color: var(--ink);
  font-variation-settings: "opsz" 24;
}
.video__c {
  font-size: 0.9rem !important;
  color: var(--ink-soft);
  line-height: 1.5 !important;
  margin: 0 0 6px !important;
}
.video__link {
  margin: 0 !important;
  font-size: 0.72rem !important;
  color: var(--ink-mute) !important;
}
.video__link a { color: var(--ink-mute); border-bottom-color: var(--rule-soft); }
.video__link a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.links { list-style: none; padding: 0; margin: 0; }
.links li {
  padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
}
.links li:first-child { border-top: none; padding-top: 0; }
.links li:last-child { padding-bottom: 0; }
.links strong { color: var(--ink); font-weight: 600; }
.links .mono { color: var(--ink-mute); }
.links--tail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.links--tail li:first-child { border-top: none !important; }

/* ---------- 10 · contact (closing cta) ---------- */
.tile--cta { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tile--cta .kicker { color: #d28a72; }
.tile__title--big {
  font-size: clamp(40px, 7vw, 64px) !important;
  color: var(--paper);
  font-variation-settings: "opsz" 144;
  margin-bottom: 22px !important;
}
.contact { list-style: none; padding: 0; margin: 0; }
.contact li {
  display: grid;
  grid-template-columns: 90px 1fr;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  gap: 16px;
  align-items: baseline;
}
.contact li:first-child { border-top: none; padding-top: 0; }
.contact li:last-child { padding-bottom: 0; }
.contact li > span:first-child { color: rgba(255,255,255,0.5); text-transform: lowercase; }
.contact a {
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 500;
}
.contact a:hover { color: #f5b69d; border-bottom-color: #f5b69d; }

/* ---------- footer ---------- */
.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--gutter) 32px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  color: var(--ink-mute);
}

/* ==========================================================================
   PRINT — polished traditional résumé from the tile stack
   ========================================================================== */
@media print {
  @page { size: letter; margin: 0.5in 0.55in; }

  :root, body {
    --print-ink:    #1a1a1a;
    --print-soft:   #3a3633;
    --print-mute:   #6a635a;
    --print-rule:   #c9c0a8;
    --print-line:   #b5a890;
    --print-accent: #a23a1f;
  }

  body {
    background: white !important;
    color: #1a1a1a !important;
    font-size: 10pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* hide screen-only chrome */
  .topbar, .footer, .pdf-btn, .actions .link-btn, .pulse, .video__frame { display: none !important; }

  /* page = simple stack */
  .page {
    max-width: none !important;
    padding: 0 !important;
    gap: 0 !important;
    display: block !important;
  }

  /* tile = a section. flat, accent-rule on top */
  .tile {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10pt 0 8pt !important;
    border-top: 0.5pt solid #c9c0a8 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .tile--identity { border-top: none !important; padding-top: 0 !important; padding-bottom: 10pt !important; }

  /* kicker — keep rust accent, small */
  .kicker {
    color: #a23a1f !important;
    font-size: 7pt !important;
    margin-bottom: 5pt !important;
    letter-spacing: 0.12em !important;
    font-weight: 500;
    text-transform: lowercase;
  }

  /* identity: name, role, contact strip */
  .name {
    color: #1a1a1a !important;
    font-size: 26pt !important;
    margin: 0 0 1pt !important;
    line-height: 1 !important;
    font-variation-settings: "opsz" 96 !important;
    letter-spacing: -0.01em !important;
  }
  .role {
    font-size: 11.5pt !important;
    color: #3a3633 !important;
    margin: 0 0 4pt !important;
    font-style: italic;
    font-variation-settings: "opsz" 24 !important;
  }
  .meta {
    font-size: 8pt !important;
    color: #6a635a !important;
    margin: 0 0 6pt !important;
  }
  .actions {
    font-size: 9pt !important;
    gap: 2pt 14pt !important;
    color: #3a3633 !important;
  }
  .actions a {
    color: #1a1a1a !important;
    border-bottom: 0.4pt solid #b5a890 !important;
    padding-bottom: 0.5pt !important;
  }

  /* tile intro/lede helpers */
  .tile__intro {
    font-size: 8.5pt !important;
    margin: 0 0 4pt !important;
    color: #6a635a !important;
    font-style: italic;
  }

  /* quotes — italic serif, rust left rule */
  .quotes { gap: 5pt !important; margin: 4pt 0 0 !important; padding: 0 !important; }
  .quotes li {
    font-family: var(--f-display) !important;
    font-style: italic !important;
    font-size: 9pt !important;
    padding: 1pt 0 1pt 9pt !important;
    border-left: 1pt solid #a23a1f !important;
    color: #2a2624 !important;
    line-height: 1.4 !important;
    font-variation-settings: "opsz" 18 !important;
  }
  .quotes li em { color: #a23a1f !important; font-weight: 500 !important; font-style: italic !important; }

  /* experience jobs */
  .job { padding: 4pt 0 !important; border-top: 0.25pt dotted #c9c0a8 !important; break-inside: avoid; }
  .job:first-of-type { border-top: none !important; padding-top: 1pt !important; }
  .job header { margin-bottom: 1pt !important; gap: 2pt 10pt !important; }
  .job h3 {
    font-family: var(--f-display) !important;
    font-size: 11pt !important;
    margin: 0 !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    font-variation-settings: "opsz" 24 !important;
  }
  .job__co { font-size: 8pt !important; color: #6a635a !important; }
  .job p { font-size: 9.5pt !important; color: #2a2624 !important; margin: 1pt 0 0 !important; line-height: 1.4 !important; }

  /* project groups — rust underline */
  .projgroup + .projgroup { margin-top: 7pt !important; }
  .projgroup__h {
    font-family: var(--f-display) !important;
    font-size: 11.5pt !important;
    padding: 0 0 1pt !important;
    margin: 0 0 3pt !important;
    border-bottom: 0.5pt solid #a23a1f !important;
    color: #1a1a1a !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6pt !important;
    font-weight: 500 !important;
    font-variation-settings: "opsz" 24 !important;
  }
  .projgroup__h .mono { font-size: 7.5pt !important; color: #6a635a !important; font-weight: 400 !important; }

  .proj { padding: 2.5pt 0 !important; border-top: 0.25pt dotted #ddd5bf !important; break-inside: avoid; }
  .proj:first-of-type { border-top: none !important; padding-top: 2pt !important; }
  .proj header { margin-bottom: 0 !important; gap: 1pt 10pt !important; }
  .proj h4 {
    font-family: var(--f-display) !important;
    font-size: 10pt !important;
    margin: 0 !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    font-variation-settings: "opsz" 18 !important;
  }
  .proj__co { font-size: 7.5pt !important; color: #6a635a !important; }
  .proj p { font-size: 9pt !important; margin: 1pt 0 0 !important; line-height: 1.4 !important; color: #2a2624 !important; }

  .proj__more {
    background: none !important;
    border: none !important;
    padding: 3pt 0 0 !important;
    margin: 4pt 0 0 !important;
    font-size: 8pt !important;
    color: #6a635a !important;
    line-height: 1.45 !important;
  }
  .proj__more strong { color: #1a1a1a !important; font-weight: 500 !important; }

  /* generic tile paragraphs */
  .tile p {
    font-size: 9.5pt !important;
    color: #2a2624 !important;
    margin-bottom: 4pt !important;
    line-height: 1.4 !important;
  }

  /* skills */
  .skills li {
    grid-template-columns: 64pt 1fr !important;
    padding: 2pt 0 !important;
    border-top: 0.25pt dotted #ddd5bf !important;
    gap: 10pt !important;
  }
  .skills li:first-child { border-top: none !important; padding-top: 0 !important; }
  .skills__k {
    font-size: 7.5pt !important;
    color: #a23a1f !important;
    letter-spacing: 0.05em !important;
  }
  .skills li > span:last-child { font-size: 9pt !important; color: #2a2624 !important; line-height: 1.4 !important; }

  /* education / links */
  .edu li, .links li {
    padding: 2pt 0 !important;
    border-top: 0.25pt dotted #ddd5bf !important;
    font-size: 9.5pt !important;
    color: #2a2624 !important;
  }
  .edu li:first-child, .links li:first-child { border-top: none !important; padding-top: 0 !important; }
  .edu strong, .links strong { color: #1a1a1a !important; font-weight: 600 !important; }
  .edu .mono, .links .mono { color: #6a635a !important; font-size: 7.5pt !important; }
  .edu em { font-size: 8pt !important; color: #6a635a !important; }

  /* videos — print as text rows with clickable URLs */
  .videos { display: block !important; margin: 4pt 0 0 !important; }
  .video {
    padding: 3pt 0 !important;
    border-top: 0.25pt dotted #ddd5bf !important;
    break-inside: avoid;
  }
  .video:first-child { border-top: none !important; padding-top: 0 !important; }
  .video__h {
    font-family: var(--f-display) !important;
    font-size: 10pt !important;
    margin: 0 0 1pt !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    font-variation-settings: "opsz" 18 !important;
  }
  .video__c {
    font-size: 8.5pt !important;
    color: #2a2624 !important;
    line-height: 1.4 !important;
    margin: 0 0 1pt !important;
  }
  .video__link {
    font-family: var(--f-mono) !important;
    font-size: 8pt !important;
    color: #6a635a !important;
    margin: 0 !important;
  }
  .video__link a {
    color: #a23a1f !important;
    border-bottom: 0.4pt solid #d3a08e !important;
    padding-bottom: 0.5pt !important;
  }

  .links--tail { border-top: 0.25pt solid #c9c0a8 !important; margin-top: 5pt !important; padding-top: 4pt !important; }

  /* contact (the closing dark tile) — flatten */
  .tile--cta {
    background: none !important;
    color: #1a1a1a !important;
    border-color: transparent !important;
    border-top: 0.5pt solid #c9c0a8 !important;
  }
  .tile--cta .kicker { color: #a23a1f !important; }
  .tile--cta .tile__title--big {
    color: #1a1a1a !important;
    font-size: 16pt !important;
    margin: 0 0 4pt !important;
    font-variation-settings: "opsz" 48 !important;
  }
  .contact { font-size: 9.5pt !important; }
  .contact li {
    grid-template-columns: 56pt 1fr !important;
    padding: 2pt 0 !important;
    border-top: 0.25pt dotted #ddd5bf !important;
    gap: 10pt !important;
  }
  .contact li:first-child { border-top: none !important; padding-top: 0 !important; }
  .contact li > span:first-child { color: #6a635a !important; font-size: 7.5pt !important; }
  .contact a {
    color: #1a1a1a !important;
    border-bottom: 0.4pt solid #b5a890 !important;
    font-weight: 500 !important;
  }

  /* default link rule — visible underline, ink color */
  a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    border-bottom: 0.4pt solid #b5a890 !important;
  }
}