/* ==========================================================================
   jeffersonkline.com — Split Plate
   One dark band holds the identity; the ledger floats on light sheets.
   Public Sans throughout, one muted teal accent, no theme toggle.

   Nothing on this page has a fixed width. The shell caps at a readable
   measure, every column is a fraction, and type/padding scale with clamp().
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   The <link> in index.html is the live source. Drop the variable woff2 into
   ./fonts/ and this rule takes over — it wins on the cascade because a local
   src resolves before the CDN family of the same name is consulted.

   ponytail: @font-face with no file present is a silent no-op, not an error,
   so this can sit here unused until the file exists.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  --band:      #121415;
  --band-hi:   #1b1f21;
  --band-text: #eceeef;
  --band-dim:  #9aa4a9;
  --band-acc:  #a5c8d0;

  /* slate ground — the page is no longer light, so anything sitting directly
     on it needs --on-ground rather than the sheet text colours */
  --ground:    #5f6f76;
  --on-ground: #f1f3f4;
  --sheet-a: #fbfbfa;
  --sheet-b: #f5f5f3;
  --text:    #1d2124;
  --dim:     #575e64;
  /* #8a9196 looked right but measured 2.93:1 on the sheets — the note lines
     and column captions are real content, so this is the darkest value that
     still reads as secondary while clearing 4.5:1 */
  --faint:   #697175;
  --rule:    #dedfdd;
  --row:     #edeeec;
  --acc:     #2f6270;

  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* one knob for the page gutter — the band, sheets, and footer all read it,
     so they can never drift out of alignment with each other */
  --gutter: clamp(1.15rem, 4vw, 2.75rem);

  /* Full-bleed backgrounds, capped content, no wrapper divs. Every section
     spans the window; --pad grows to absorb whatever exceeds the measure, so
     the band and the page ground run edge to edge while the ledger inside
     them stays at a readable width. Below the measure it collapses to
     --gutter. Capping .shell instead is what made the band stop mid-screen. */
  --measure: 1180px;
  --pad: max(var(--gutter), (100% - var(--measure)) / 2);

  /* Four stacked layers: contact, near, mid, ambient — plus a lit top edge.
     Deeper than they were on the old near-white page: a dark shadow loses
     most of its contrast against a mid-dark ground, so the sheets would sit
     flat on the slate without the extra opacity. */
  --lift-1: 0 1px 1px rgba(9, 13, 15, 0.20),
            0 4px 8px -2px rgba(9, 13, 15, 0.20),
            0 16px 26px -12px rgba(9, 13, 15, 0.30),
            0 34px 56px -24px rgba(9, 13, 15, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 0 0 1px rgba(22, 30, 34, 0.05);
  --lift-2: 0 1px 1px rgba(9, 13, 15, 0.20),
            0 6px 12px -2px rgba(9, 13, 15, 0.22),
            0 22px 34px -12px rgba(9, 13, 15, 0.34),
            0 46px 72px -26px rgba(9, 13, 15, 0.48),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 0 0 1px rgba(22, 30, 34, 0.05);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(13.5px, 0.78rem + 0.22vw, 15.5px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* text-wrap: pretty costs nothing and is ignored where unsupported; it stops
   single-word orphans on the wrapped note lines */
p, h1, h2, .note, .who { text-wrap: pretty; }

a { color: var(--acc); text-decoration: none; border-bottom: 1px solid rgba(47, 98, 112, 0.3); }
a:hover { border-bottom-color: var(--acc); }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sheet-a);
  color: var(--text);
  padding: 0.7rem 1rem;
  border: 1px solid var(--rule);
  z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* the shell no longer caps anything — see --pad. It stays as the stacking
   context the band and sheets share. */
.shell { width: 100%; }

/* --------------------------------------------------------------------------
   BAND — identity plate
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  padding: clamp(1.9rem, 4vw, 2.9rem) var(--pad) clamp(3.2rem, 6vw, 4.4rem);
  color: var(--band-text);
  background:
    radial-gradient(90% 130% at 18% -30%, rgba(190, 214, 220, 0.10), transparent 60%),
    linear-gradient(166deg, var(--band-hi), var(--band));
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 1.8rem);
}

/* the sheets cast onto the band rather than merely sitting in front of it */
.band::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 72px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.portrait {
  flex: 0 0 auto;
  width: clamp(92px, 11vw, 138px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: 2px;
  filter: contrast(1.04) saturate(0.96);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.40),
    0 10px 20px -6px rgba(0, 0, 0, 0.50),
    0 30px 52px -22px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(255, 255, 255, 0.09);
}

.identity {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.3rem;
  min-width: 0; /* without this a long word would blow the flex row out */
}

.identity h1 {
  margin: 0;
  font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.5rem);
  font-weight: 600;
  /* proportional face needs less tracking than the mono it replaced */
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.identity .title {
  color: var(--band-dim);
  letter-spacing: 0.09em;
}
.identity nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.35rem;
  margin-top: 0.6rem;
  font-size: 0.82em;
}
.identity nav a {
  color: var(--band-acc);
  border-bottom-color: rgba(165, 200, 208, 0.32);
}
.identity nav a:hover { border-bottom-color: var(--band-acc); }

/* contact line */
.mail { color: var(--band-text); }
.mail::before { content: "jeffersonkline"; }
.mail::after  { content: "\000040" "gmail" "\00002E" "com"; }

/* --------------------------------------------------------------------------
   SUBDOMAINS — top-right menu on the band
   -------------------------------------------------------------------------- */
.subs {
  position: absolute;
  top: clamp(1.9rem, 4vw, 2.9rem);
  right: var(--pad);
  font-size: 0.82em;
  z-index: 2;
}

.subs summary {
  list-style: none;
  cursor: pointer;
  padding: 0.3rem 0.7rem;
  color: var(--band-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(236, 238, 239, 0.16);
  border-radius: 3px;
  user-select: none;
}
.subs summary::-webkit-details-marker { display: none; }
.subs summary::after {
  content: "";
  display: inline-block;
  margin-left: 0.5rem;
  border: 3.5px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}
.subs summary:hover { color: var(--band-text); border-color: rgba(236, 238, 239, 0.34); }
.subs[open] summary { color: var(--band-text); }
.subs[open] summary::after { transform: translateY(-2px) rotate(180deg); }

.subs nav {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  padding: 0.3rem;
  background: var(--band-hi);
  border: 1px solid rgba(236, 238, 239, 0.14);
  border-radius: 4px;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6);
}
.subs nav a {
  padding: 0.45rem 0.6rem;
  border-bottom: 0;
  border-radius: 3px;
  color: var(--band-acc);
}
.subs nav a:hover { background: rgba(165, 200, 208, 0.10); }
.subs nav a span {
  display: block;
  color: var(--band-dim);
  font-size: 0.9em;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   SHEETS — the floating cards
   -------------------------------------------------------------------------- */
main {
  /* the sheets ride up into the band, so they must stack above it —
     .band is positioned, which would otherwise paint over an unpositioned main */
  position: relative;
  z-index: 1;
  margin-top: -1.6rem;
  padding: 0 var(--pad) clamp(2rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

.sheet {
  background: linear-gradient(var(--sheet-a), var(--sheet-b));
  border-radius: 6px;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1rem, 2.4vw, 1.7rem)
           clamp(0.9rem, 2vw, 1.3rem);
  box-shadow: var(--lift-1);
  transition: transform 170ms ease-out, box-shadow 170ms ease-out;
}
.sheet:hover,
.sheet:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
}

/* auto-fit means the two sheets sit side by side when there is room for both
   and stack when there isn't — no breakpoint needed */
.pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

/* --------------------------------------------------------------------------
   LEDGER GRID
   Four columns, identical from the caption down. Every track is a fraction,
   so the ledger reflows continuously instead of snapping at breakpoints.
   minmax(0, …) is what lets a track shrink below its content and wrap;
   a bare 1fr refuses to, and the page scrolls sideways instead.
   Narrow variants override only grid-template-columns so alignment stays a
   single source of truth.
   -------------------------------------------------------------------------- */
.ledger { display: flex; flex-direction: column; }

.cap, .row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr) minmax(0, 2.35fr) minmax(0, 0.52fr) minmax(0, 0.48fr);
  gap: 0 clamp(0.7rem, 1.8vw, 1.4rem);
}

.cap {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
  color: var(--faint);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cap h2 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }

.row {
  align-items: baseline;
  padding: 0.62rem 0.5rem;
  margin: 0 -0.5rem;
  border-bottom: 1px solid var(--row);
  border-radius: 3px;
  transition: background-color 140ms ease-out;
}
.row:hover { background: rgba(47, 98, 112, 0.045); }
.row:last-child { border-bottom: 0; }

.row .what { font-weight: 600; overflow-wrap: break-word; }
.row .who  { color: var(--dim); overflow-wrap: break-word; }
/* tabular figures keep the date columns aligned now that the face is
   proportional — without this 2026-05 and 2024-03 no longer line up */
.row .when { color: var(--faint); font-variant-numeric: tabular-nums; }

.note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.86em;
  color: var(--faint);
}

/* projects carry no link column until real URLs exist, so three columns */
.ledger--proj .cap,
.ledger--proj .row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.6fr) minmax(0, 0.5fr); }

/* narrow two-column ledgers inside .pair */
.ledger--slim .cap,
.ledger--slim .row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.32fr); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
/* the only text that sits on the slate rather than on a sheet — --faint here
   would land around 1.5:1 against the ground */
footer {
  padding: 0 var(--pad) clamp(2rem, 5vw, 3rem);
  color: var(--on-ground);
  font-size: 0.82em;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   Type, padding, and every grid track already scale continuously, so this is
   the one breakpoint left: below ~720px the four columns stop being honest at
   any fraction, and the row has to become a stacked block instead.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .band { flex-direction: column; align-items: flex-start; }

  /* the summary sits alone on the first line; the portrait starts below it so
     the two never collide on a narrow screen. position stays relative — the
     panel is absolutely positioned against .subs, and going static would
     re-anchor it to .band and drop it at the bottom of the header. */
  .subs { position: relative; top: auto; right: auto; align-self: flex-end; order: -1; }
  .subs nav { min-width: 0; width: max-content; max-width: min(88vw, 22rem); }

  /* Captions lose their column labels. The .ledger--* selectors are repeated
     at equal specificity or the base rules keep winning and the page scrolls
     sideways. */
  .cap,
  .ledger--proj .cap,
  .ledger--slim .cap { grid-template-columns: minmax(0, 1fr); }
  .cap span { display: none; }

  /* Two columns so from/to still read as a pair on one line rather than
     stacking into two orphan rows. */
  .row,
  .ledger--proj .row,
  .ledger--slim .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.15rem 0.9rem;
  }
  .row .what,
  .row .who { grid-column: 1 / -1; }
  .row .when { font-size: 0.86em; }
}

/* --------------------------------------------------------------------------
   MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sheet, .row { transition: none; }
  .sheet:hover, .sheet:focus-within { transform: none; }
}

/* --------------------------------------------------------------------------
   PRINT
   The site is the résumé, so Ctrl+P has to produce a clean one. No band, no
   shadows, no colour — just the ledger.
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 13mm; }
  body { background: #fff; font-size: 8.5pt; line-height: 1.45; }
  .shell { max-width: none; }
  .band {
    background: none;
    color: #000;
    padding: 0 0 1rem;
    border-bottom: 1pt solid #000;
  }
  .band::after { display: none; }
  .identity .title, .row .who, .row .when, .note, .cap { color: #333; }
  .identity nav a, a { color: #000; border-bottom: 0; }
  .portrait { display: none; }
  main { margin-top: 1rem; padding: 0; gap: 1rem; }
  .sheet {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    break-inside: avoid;
  }
  .pair { gap: 1rem; }
  .skip, footer, .subs { display: none; }
}