/* ==========================================================================
   Alex Sanchez — style.css
   One stylesheet. No JavaScript. No web fonts. No dependencies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --font-body: Georgia, "Times New Roman", Times, serif;

  /* Type scale — ratio ~1.25, fluid where it matters.
     Sized for Georgia, whose x-height is ~8% taller than the default serif
     these values were first tuned against. Text sizes are scaled to match
     the old x-height; the display sizes shrink less, since presence there
     tracks cap-height, which differs by only ~4%. */
  --t-xs:      0.6875rem;
  --t-sm:      0.75rem;
  --t-base:    0.9375rem;
  --t-prose:   1.09375rem;
  --t-md:      1.3125rem;
  --t-lg:      1.6875rem;
  --t-xl:      2.125rem;
  --t-display: clamp(2.375rem, 6.5vw, 4.25rem);

  /* Spacing — 0.25rem base */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* Layout */
  --measure: 34rem;                              /* ~60-65 characters */
  --gutter: clamp(1.5rem, 8vw, 10rem);
  --railbar-h: 3.25rem;

  /* Color — light (default) */
  --bg:        #FBFAF7;
  --bg-rail:   #FBFAF7;
  --ink:       #0B0B0A;
  --ink-soft:  #2A2724;
  --ink-faint: #6E6862;
  --rule:      #DFDAD0;

  --c-resume:   #8C2F39;
  --c-recipes:  #2E5266;
  --c-writing:  #4A6B3A;
  --c-software: #8A6114;
  --c-etc:      #5B5068;

  /* The nav's current-section marker. Aliased to the resume red rather than
     restated, so it follows that token into dark mode; break the alias if
     the two should ever diverge. */
  --c-current: var(--c-resume);

  --accent: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #121110;
    --bg-rail:   #121110;
    --ink:       #F4F1EB;
    --ink-soft:  #D6D1C8;
    --ink-faint: #918A80;
    --rule:      #2C2A27;

    --c-resume:   #E0838C;
    --c-recipes:  #86B6CE;
    --c-writing:  #A3C489;
    --c-software: #E0B558;
    --c-etc:      #B7A6C4;
  }
}

/* Per-section accent. Applied to a nav link (.s-*) or to <body> on a
   section page, so the whole page inherits its color. */
.s-resume,   body.page-resume   { --accent: var(--c-resume); }
.s-recipes,  body.page-recipes  { --accent: var(--c-recipes); }
.s-writing,  body.page-writing  { --accent: var(--c-writing); }
.s-software, body.page-software { --accent: var(--c-software); }
.s-etc,      body.page-etc      { --accent: var(--c-etc); }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  hanging-punctuation: first last;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--t-prose);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, ul, ol, dl, blockquote, figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent); color: var(--bg); }

/* Focus — visible everywhere, and never clipped by the fixed railbar. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Anchors land below the fixed bar rather than under it. */
:target { scroll-margin-top: calc(var(--railbar-h) + var(--s-6)); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  font-size: var(--t-sm);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------------------
   3. Layout shell
   -------------------------------------------------------------------------- */

.shell {
  padding-inline: var(--gutter);
  margin-inline: auto;
  max-width: 78rem;
}

.prose {
  max-width: var(--measure);
  text-wrap: pretty;
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}

.prose > * + * { margin-top: var(--s-6); }

/* A hairline that carries the page's accent at its left end. */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. Wordmark & section links (shared by both navbars)
   -------------------------------------------------------------------------- */

.wordmark {
  display: inline-block;
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
  line-height: 1.05;
}

.sections {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The nav deliberately ignores the per-section accent: the whole list is ink
   and only the current section takes colour. Setting --accent rather than
   color means the underline, focus ring and selection follow it too. The
   .s-* mapping above still tints the rest of a section page via body.page-*. */
.sections a {
  --accent: var(--ink);
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  /* Normal capitalisation. The 0.05em tracking that used to sit here existed
     to keep synthesised small caps from looking cramped; on mixed-case text
     that much air reads as a gap, so it drops to a hair. */
  letter-spacing: 0.01em;
  text-decoration: none;
  text-underline-offset: 0.28em;
  text-decoration-thickness: from-font;
}

/* A small circle between sections. Generated, not marked up, so it stays
   out of the document text and out of copy-and-paste. */
.sections li {
  display: flex;
  align-items: center;
}

.sections li + li::before {
  content: "\2022";
  color: var(--ink-faint);
  font-size: 0.5em;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  translate: 0 -0.05em;
}

.sections a[aria-current="page"] {
  --accent: var(--c-current);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

@media (hover: hover) {
  .sections a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
}

/* --------------------------------------------------------------------------
   5. Masthead — the tall navbar
   -------------------------------------------------------------------------- */

.masthead {
  position: relative;
  z-index: 20;                  /* paints over the sticky bar beneath it */
  margin-top: calc(-1 * var(--railbar-h));
  background: var(--bg);        /* must be opaque, and full-bleed, to hide it */
  padding-block: clamp(var(--s-12), 9vh, var(--s-24)) var(--s-8);
  text-align: center;
}

.masthead-inner { text-align: center; }

.masthead .wordmark {
  font-size: var(--t-display);
  letter-spacing: -0.015em;
}

.masthead .sections {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2) 0;
  margin-top: clamp(var(--s-2), 1vh, var(--s-4));
  font-size: 1.125rem;
}

.masthead .sections li + li::before {
  margin-inline: clamp(0.5rem, 1.2vw, 0.8rem);
}

.masthead .sections a { padding-block: var(--s-2); }

/* --------------------------------------------------------------------------
   6. Railbar — the collapsed navbar
   -------------------------------------------------------------------------- */

/* The compact bar sits at the top of the document and sticks there. The
   masthead is pulled up over it by exactly its own height and painted on
   top, so the bar stays hidden until the masthead scrolls out of the way.
   No animation and no feature detection — just `position: sticky`, which
   every browser has supported for years. */
.railbar {
  position: sticky;
  top: 0;
  z-index: 10;

  height: var(--railbar-h);
  background: var(--bg-rail);
  border-bottom: 1px solid var(--rule);
}

.railbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  height: 100%;
}

.railbar .wordmark {
  font-size: var(--t-base);
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.railbar .sections {
  gap: 0;
  font-size: var(--t-base);
}

.railbar .sections li + li::before {
  margin-inline: clamp(0.7rem, 1.6vw, 1.1rem);
}

/* --------------------------------------------------------------------------
   7. Landing page
   -------------------------------------------------------------------------- */

.intro {
  display: grid;
  gap: var(--s-8);
  padding-block: var(--s-8) var(--s-24);
}

.portrait {
  margin: 0;
  max-width: 20rem;
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

@media (prefers-color-scheme: dark) {
  .portrait img { filter: grayscale(1) contrast(1.05) brightness(0.9); }
}

.portrait figcaption {
  margin-top: var(--s-3);
  color: var(--ink-faint);
  font-size: var(--t-sm);
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
}

/* Raised small caps on the opening words — a drop cap's quieter cousin,
   and safe with unknown font metrics. */
.lede::first-line { font-variant-caps: small-caps; letter-spacing: 0.02em; }

@media (min-width: 56.25rem) {
  .intro {
    grid-template-columns: 20rem minmax(0, var(--measure));
    gap: clamp(var(--s-12), 6vw, var(--s-16));
    align-items: start;
    padding-block: var(--s-12) var(--s-32);
  }
}

/* --------------------------------------------------------------------------
   8. Section pages
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: var(--s-8) var(--s-6);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-12);
}

.page-head h1 {
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.eyebrow {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--accent);
  font-size: var(--t-sm);
  font-variant-caps: small-caps;
  letter-spacing: 0.14em;
}

.page-head .standfirst {
  max-width: var(--measure);
  margin-top: var(--s-4);
  color: var(--ink-faint);
  font-size: var(--t-md);
  line-height: 1.55;
  text-wrap: pretty;
}

main { padding-bottom: var(--s-24); }

h2 {
  font-size: var(--t-lg);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h3 {
  font-size: var(--t-md);
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.section + .section { margin-top: var(--s-16); }
.section > * + * { margin-top: var(--s-6); }
.section > h2 + .entries,
.section > h2 + .prose,
.section > h2 + .linklist { margin-top: var(--s-8); }

/* Body links inside content take the page accent. */
main a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.18em;
}

@media (hover: hover) {
  main a:hover {
    text-decoration-thickness: 2px;
  }
}

/* Dated entries — resume, writing, software.
   Dates sit in the left margin on wide screens, stack above on narrow. */
.entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entries > li + li {
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--rule);
}

.entry-date {
  display: block;
  color: var(--ink-faint);
  font-size: var(--t-sm);
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.entry-body { max-width: var(--measure); }
.entry-body > * + * { margin-top: var(--s-3); }

.entry-meta {
  color: var(--ink-faint);
  font-size: var(--t-base);
  font-style: italic;
}

@media (min-width: 56.25rem) {
  .entries > li {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--s-8);
  }
  .entry-date {
    text-align: right;
    padding-top: 0.35em;   /* optical alignment with the heading's cap line */
  }
}

/* Bulleted detail lists inside entries */
.detail {
  margin: 0;
  padding-left: 1.1em;
  list-style: none;
}
.detail li { position: relative; }
.detail li + li { margin-top: var(--s-2); }
.detail li::before {
  content: "\2014";              /* em dash, not a bullet */
  position: absolute;
  left: -1.1em;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   9. Recipes
   -------------------------------------------------------------------------- */

.recipe {
  max-width: 44rem;
  margin-top: var(--s-12);
  padding-top: var(--s-12);
  border-top: 1px solid var(--rule);
}

.recipe-grid {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-8);
}

@media (min-width: 56.25rem) {
  .recipe-grid {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--s-12);
    align-items: start;
  }
}

.ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-base);
  line-height: 1.55;
  font-variant-numeric: oldstyle-nums;
}

.ingredients li {
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule);
}

.method {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  max-width: var(--measure);
}

.method li {
  counter-increment: step;
  position: relative;
  padding-left: 2.5rem;
}

.method li + li { margin-top: var(--s-4); }

.method li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.75rem;
  text-align: right;
  color: var(--accent);
  font-size: var(--t-base);
  font-variant-numeric: oldstyle-nums;
}

.subhead {
  color: var(--ink-faint);
  font-size: var(--t-sm);
  font-variant-caps: small-caps;
  letter-spacing: 0.12em;
  margin-bottom: var(--s-3);
}

/* --------------------------------------------------------------------------
   10. Etc. — link list & colophon
   -------------------------------------------------------------------------- */

.linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 44rem;
}

.linklist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}

.linklist .note {
  color: var(--ink-faint);
  font-size: var(--t-base);
  font-style: italic;
}

.colophon {
  max-width: var(--measure);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-xs);
  font-variant-caps: small-caps;
  letter-spacing: 0.1em;
}

.swatches li { color: var(--ink-faint); }

.swatches .sw-resume   { --sw: var(--c-resume); }
.swatches .sw-recipes  { --sw: var(--c-recipes); }
.swatches .sw-writing  { --sw: var(--c-writing); }
.swatches .sw-software { --sw: var(--c-software); }
.swatches .sw-etc      { --sw: var(--c-etc); }

.swatches li::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--sw, currentColor);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-8) var(--s-12);
  color: var(--ink-faint);
  font-size: var(--t-sm);
  font-variant-caps: small-caps;
  letter-spacing: 0.1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .site-footer a:hover { color: var(--ink); }
}

/* --------------------------------------------------------------------------
   12. Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 37.5rem) {
  :root {
    --t-prose: 1.0625rem;
    --railbar-h: 3rem;
  }

  .masthead {
    padding-block: var(--s-12) var(--s-6);
  }

  /* The five links wrap here, and a dot leading a wrapped row reads as
     litter — so on narrow screens spacing does the separating instead. */
  .masthead .sections {
    gap: 0 var(--s-3);
    margin-top: var(--s-2);
    font-size: var(--t-base);
  }

  .masthead .sections li + li::before { content: none; }

  /* ≥44px tap targets without visually inflating the type. */
  .masthead .sections a {
    padding-block: var(--s-3);
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }

  .railbar-inner { gap: var(--s-3); }

  .railbar .wordmark {
    font-size: var(--t-xs);
    letter-spacing: 0.04em;
  }

  /* If the five links can't fit, scroll them rather than wrapping
     the fixed bar onto two lines. */
  .railbar nav {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, transparent 0, #000 0.75rem);
  }
  .railbar nav::-webkit-scrollbar { display: none; }

  .railbar .sections {
    gap: 0;
    font-size: var(--t-sm);
    letter-spacing: 0.04em;
    flex-wrap: nowrap;
  }

  .railbar .sections li + li::before { margin-inline: 0.5rem; }
  .railbar .sections a { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   13. Print — resume should print like a document
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --bg: #fff;
    --ink: #000;
    --ink-soft: #111;
    --ink-faint: #444;
    --rule: #bbb;
    --accent: #000;
    --gutter: 0;
  }

  body { font-size: 10.5pt; line-height: 1.5; background: #fff; }

  .railbar, .skip-link, .site-footer, .masthead .sections { display: none; }

  .masthead { margin-top: 0; padding-block: 0 0.25in; text-align: left; }
  .masthead .wordmark { font-size: 19pt; }

  .shell { max-width: none; padding: 0; }

  @page { margin: 0.75in; }

  .entries > li {
    break-inside: avoid;
    border-top-color: #ddd;
  }

  h2, h3 { break-after: avoid; }

  /* Tighten the vertical rhythm for paper — screen spacing is far too
     generous once the page is only 9 inches tall. */
  h2 { font-size: 13.5pt; }
  h3 { font-size: 11pt; }

  main { padding-bottom: 0; }

  .page-head { padding-block: 0 0.14in; margin-bottom: 0.24in; }
  .page-head h1 { font-size: 17pt; }
  .page-head .standfirst { font-size: 10.5pt; margin-top: 0.08in; }

  .section + .section { margin-top: 0.28in; }
  .section > * + * { margin-top: 0.12in; }
  .section > h2 + .entries,
  .section > h2 + .prose { margin-top: 0.14in; }

  .entries > li + li { margin-top: 0.16in; padding-top: 0.16in; }
  .entry-body > * + * { margin-top: 0.06in; }
  .detail li + li { margin-top: 0.05in; }

  main a {
    color: #000;
    text-decoration: none;
  }
}