/* =========================================================================
   Shared design system — used by the secondary pages (connect, resume, 404).
   Tokens and components mirror index.html so every page reads as one site.
   index.html keeps its own inline copy; this file is the multi-page baseline.
   ========================================================================= */
:root{
  --paper:   #FAF7F2;
  --paper-2: #F0ECE3;
  --paper-3: #E8E2D6;
  --ink:     #1F1D1B;
  --ink-2:   #3B3733;
  --muted:   #756F67;   /* WCAG AA: 4.65:1 on paper (was #847D74 @ 3.8:1) */
  --sage:    #6B7A5C;
  --sage-2:  #5A6A4D;
  --sage-3:  #3E4A34;
  --sage-bg: #EEF0E7;
  --hair:    #E5DFD5;

  --dark:      #20261E;
  --dark-2:    #2A3226;
  --dark-line: #3A4436;
  --dark-tx:   #ECE9E0;
  --dark-tx-2: #B7BDAE;
  --dark-sage: #B7C6A6;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
a:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; border-radius:2px }

.skip-link{
  position:absolute; top:-100px; left:16px; z-index:100;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:6px; font-size:14px; font-weight:500; transition:top .15s ease;
}
.skip-link:focus{ top:16px }

.frame{ max-width:1180px; margin:0 auto; padding:0 40px }
@media (max-width:680px){ .frame{ padding:0 24px } }

.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--sage-3);
}

/* Topbar ----------------------------------------------------------------- */
.topbar{ position:sticky; top:0; z-index:50; background:rgba(250,247,242,.9);
  -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hair); }
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; font-size:14px; padding:16px 0 }
.nav__brand{ display:inline-flex; align-items:center; gap:8px; font-weight:600; letter-spacing:-.005em; color:var(--ink); line-height:1 }
.nav__brand .dot{ display:block; width:7px; height:7px; background:var(--sage-3); border-radius:50% }
.nav__back{ color:var(--muted); font-size:14px; transition:color .15s ease }
.nav__back:hover{ color:var(--ink) }

/* Page header ------------------------------------------------------------ */
.page-head{ padding:64px 0 40px }
@media (max-width:680px){ .page-head{ padding:44px 0 28px } }
.page-head .eyebrow{ display:block; margin:0 0 16px }
.page-head h1{
  font-size:clamp(38px,5.4vw,66px); font-weight:600; line-height:1.0; letter-spacing:-.03em; color:var(--ink); margin:0 0 20px;
}
.page-head h1 em{ font-style:italic; font-weight:500; color:var(--sage-3) }
.page-head .lead{ font-size:19px; line-height:1.55; color:var(--ink-2); max-width:54ch; margin:0 }
.page-head .lead b{ color:var(--ink); font-weight:600 }

/* Sections --------------------------------------------------------------- */
.band{ padding:56px 0; border-top:1px solid var(--hair) }
.band:nth-of-type(even){ background:var(--paper-2); border-top-color:transparent }
.band__head{ margin:0 0 28px }
.band__head .eyebrow{ display:block; margin:0 0 12px }
.band__head h2{ font-size:clamp(26px,3vw,38px); font-weight:600; letter-spacing:-.025em; line-height:1.05; color:var(--ink); margin:0 }
.band__head h2 em{ font-style:italic; font-weight:500; color:var(--sage-3) }
/* #6C665F: AA on both paper (5.31:1) and paper-2 (4.81:1) band surfaces */
.note{ font-size:14.5px; color:#6C665F; line-height:1.6 }
.band__head .note{ font-size:15px; margin:10px 0 0; max-width:48ch }

/* Buttons ---------------------------------------------------------------- */
.btn-row{ display:flex; flex-wrap:wrap; gap:10px }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px; font-size:14px; font-weight:500; letter-spacing:-.005em;
  border-radius:10px; border:1px solid var(--hair); color:var(--ink-2); background:var(--paper);
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; cursor:pointer;
}
.btn:hover{ border-color:var(--sage); background:var(--sage-bg); color:var(--ink); transform:translateY(-1px) }
.btn svg{ width:15px; height:15px; opacity:.9 }
.btn--primary{ background:var(--sage-3); border-color:var(--sage-3); color:var(--paper); font-weight:600 }
.btn--primary:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper) }

/* Recommendation / quote cards ------------------------------------------ */
.rec-grid{ list-style:none; padding:0; margin:0; display:grid; gap:18px }
@media (min-width:860px){ .rec-grid{ grid-template-columns:1fr 1fr } }
.rec{
  border:1px solid var(--hair); border-left:3px solid var(--sage-3); border-radius:14px;
  padding:24px 26px; background:var(--paper); transition:transform .2s ease, box-shadow .2s ease;
}
.band:nth-of-type(even) .rec{ background:var(--paper) }
.rec:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(31,29,27,.08) }
.rec__text{ font-size:16px; line-height:1.6; color:var(--ink); margin:0 0 14px; letter-spacing:-.005em }
.rec__attr{ font-size:13px; color:#6C665F; margin:0 }  /* small label: AA on both papers */
.rec__attr b{ color:var(--ink); font-weight:600 }

/* Embedded-post slot ----------------------------------------------------- */
.embed-grid{ display:grid; gap:20px }
@media (min-width:860px){ .embed-grid{ grid-template-columns:1fr 1fr } }
.embed-card iframe{ width:100%; border:1px solid var(--hair); border-radius:12px; background:var(--paper) }

/* Résumé viewer ---------------------------------------------------------- */
.doc-frame{ width:100%; height:82vh; min-height:560px; border:1px solid var(--hair); border-radius:14px; background:var(--paper-2) }
.doc-fallback{ font-size:15px; color:var(--muted); margin:16px 0 0 }

/* Footer ----------------------------------------------------------------- */
footer{ padding:36px 0 48px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; background:var(--dark) }
footer, footer a{ color:var(--dark-tx-2) }
footer a:hover{ color:var(--dark-tx) }
footer .dot{ color:#4a5443; margin:0 8px }

/* 404 -------------------------------------------------------------------- */
.notfound{ min-height:70vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:8px }
.notfound .code{ font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-3) }
.notfound h1{ font-size:clamp(40px,6vw,72px); font-weight:600; letter-spacing:-.03em; line-height:1; margin:6px 0 14px; color:var(--ink) }
.notfound p{ font-size:18px; color:var(--ink-2); max-width:46ch; margin:0 0 26px }

/* Cross-document page transitions — smooth crossfade between pages in
   supporting browsers (View Transitions API); older browsers just navigate. */
@view-transition{ navigation: auto }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ transition-duration:.01ms !important }
  @view-transition{ navigation: none }
}

@media print{
  .topbar, .skip-link, .btn-row{ display:none !important }
  body{ background:#fff; color:#000 } footer{ background:#fff !important }
  footer, footer a{ color:#555 !important }
}