/* JW-1. Field manual. Self-hosted type, no CDNs. */
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Cond"; src: url("/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #f3efe6; --ink: #1c1b17; --soft: #57534a; --rule: #c9c1ae; --hair: #ddd6c6;
  --od: #3d4a1c;           /* olive drab, links and section numbers */
  --od-ink: #f3efe6;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --cond: "Plex Cond", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --margin: 9.5rem; --measure: 38rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #14130f; --ink: #e6e0d2; --soft: #a59f90; --rule: #3a372f; --hair: #2a2822; --od: #b9c47f; --od-ink: #14130f; color-scheme: dark; }
}
/* Red lens: what you'd see under a red-filtered flashlight. Toggled by an old code. */
:root[data-lens="red"] { --paper: #0c0000; --ink: #ff5a4a; --soft: #e24c3e; --rule: #4a0d08; --hair: #2b0603; --od: #ff7a6b; --od-ink: #0c0000; color-scheme: dark; }
:root[data-lens="red"] img { filter: grayscale(1) sepia(1) hue-rotate(-50deg) saturate(4) brightness(.55); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--serif); font-kerning: normal; font-variant-numeric: oldstyle-nums proportional-nums; }
a { color: var(--od); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--od); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 .9em; }
.skip { position: absolute; left: -9999px; top: .5rem; background: var(--ink); color: var(--paper); padding: .4rem .7rem; z-index: 9; }
.skip:focus { left: .5rem; }

/* Running header, like the top of a manual page */
.runner { display: flex; justify-content: space-between; gap: 1rem; max-width: 70rem; margin: 0 auto; padding: .9rem 1.5rem .6rem; border-bottom: 1px solid var(--ink); font: 400 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }

main { max-width: 70rem; margin: 0 auto; padding: 0 1.5rem; }

/* Masthead: asymmetric. Text sits in the main column, photo hangs right. */
.masthead { display: grid; grid-template-columns: var(--margin) minmax(0, var(--measure)) 1fr; column-gap: 2.5rem; padding: 4.5rem 0 3.5rem; border-bottom: 1px solid var(--rule); }
.mast-text { grid-column: 2; }
h1 { font: 600 clamp(2.6rem, 6.5vw, 4.4rem)/.95 var(--serif); letter-spacing: -.025em; margin: 0 0 .6rem; }
.role { font: 600 .95rem/1.2 var(--cond); text-transform: uppercase; letter-spacing: .12em; color: var(--od); margin: 0 0 1.6rem; }
.lede { font-size: 1.28rem; line-height: 1.5; max-width: 32rem; }
.act { display: flex; flex-wrap: wrap; gap: .6rem .8rem; margin: 1.5rem 0 0; }
.act-a { font: 600 .9rem/1 var(--cond); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; padding: .7rem 1rem; min-height: 2.75rem; box-sizing: border-box; display: inline-block; padding-top: .9rem; padding-bottom: .85rem; border: 1px solid var(--od); color: var(--od); }
.act-a:hover { background: var(--hair); }
.act-pri { background: var(--od); color: var(--od-ink); }
.act-pri:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.act-a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.plate { margin: 1rem 0 0; font: 400 .78rem/1.5 var(--mono); color: var(--soft); }
.plate-h { text-transform: uppercase; letter-spacing: .1em; margin-right: .4rem; }
.plate a { color: var(--soft); }
#skills-cert { scroll-margin-top: 2rem; }
.contents { margin-top: 2.2rem; border-top: 1px solid var(--rule); padding-top: .9rem; }
.contents-h { font: 400 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--soft); margin: 0 0 .6rem; }
.contents ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
.contents a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.contents a:hover { border-color: var(--ink); }
.n { font: 400 .8rem var(--mono); color: var(--od); margin-right: .25rem; }
.fig { grid-column: 3; margin: .4rem 0 0; max-width: 17rem; justify-self: end; }
.fig img { border: 1px solid var(--ink); filter: grayscale(.25) contrast(1.02); }
.fig figcaption { font: 400 .78rem/1.4 var(--mono); color: var(--soft); margin-top: .5rem; }
.fig-n { color: var(--ink); margin-right: .3rem; }

/* Sections: number and heading in the margin column, text in the measure */
.sec { display: grid; grid-template-columns: var(--margin) minmax(0, var(--measure)) 1fr; column-gap: 2.5rem; padding: 3.2rem 0 2.6rem; border-bottom: 1px solid var(--rule); }
.sec > h2 { grid-column: 1; margin: .15rem 0 1rem; font: 600 1.05rem/1.2 var(--cond); text-transform: uppercase; letter-spacing: .14em; position: sticky; top: 1rem; align-self: start; }
.sec-n { display: block; font: 400 2.4rem/1 var(--mono); letter-spacing: 0; color: var(--od); margin-bottom: .35rem; }
.body { grid-column: 2; }
.runin { font: 600 .82rem/1 var(--cond); text-transform: uppercase; letter-spacing: .1em; margin-right: .35rem; }
.stack { display: block; font: 400 .8rem/1.5 var(--mono); color: var(--soft); margin-top: .3rem; }

/* The note on the domain hangs in the right margin on wide screens */
.aside-note { font-size: .95rem; line-height: 1.5; color: var(--soft); border-left: 2px solid var(--od); padding-left: .9rem; }
.note-h { display: block; font: 600 .78rem/1.3 var(--cond); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); margin-bottom: .2rem; }
@media (min-width: 72rem) {
  #about .body { display: contents; }
  #about .body > p:not(.aside-note) { grid-column: 2; }
  #about .aside-note { grid-column: 3; grid-row: 1 / span 3; align-self: start; max-width: 16rem; margin-top: .3rem; }
}

/* CV: dense, dates in the margin, phases as structure */
.cv-intro { font-style: italic; color: var(--soft); }
.cv { font-size: 1rem; line-height: 1.5; }
.phase { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 2.1rem 0 .9rem; padding-bottom: .3rem; border-bottom: 1px solid var(--ink); font: 600 .85rem/1.2 var(--cond); text-transform: uppercase; letter-spacing: .14em; }
.phase-when { font: 400 .75rem var(--mono); letter-spacing: .04em; text-transform: none; color: var(--soft); }
.job { position: relative; margin: 0 0 1.25rem; }
.when { font: 400 .78rem/1.5 var(--mono); color: var(--soft); margin: 0 0 .15rem; font-variant-numeric: tabular-nums; }
@media (min-width: 52rem) {
  .job { display: grid; grid-template-columns: calc(var(--margin) + 2.5rem) minmax(0, 1fr); margin-left: calc(-1 * (var(--margin) + 2.5rem)); }
  .when { text-align: right; padding-right: 2.5rem; padding-top: .2rem; }
}
.job h4 { font: 600 1.06rem/1.35 var(--serif); margin: 0 0 .35rem; }
.org { font-weight: 400; font-style: italic; color: var(--soft); }
.job ul { margin: 0; padding: 0 0 0 1.1rem; list-style: none; }
.job li { position: relative; margin: 0 0 .3rem; }
.job li::before { content: "–"; position: absolute; left: -1.1rem; color: var(--soft); }
.kit { display: grid; grid-template-columns: 7.5rem 1fr; gap: .35rem 1rem; margin: 0 0 1.2rem; }
.kit dt { font: 600 .78rem/1.6 var(--cond); text-transform: uppercase; letter-spacing: .1em; }
.kit dd { margin: 0; }
.cv-foot { font-style: italic; color: var(--soft); font-size: .95rem; }

/* Road */
.fix { font: 400 .9rem/1.5 var(--mono); border: 1px solid var(--ink); padding: .7rem .9rem; display: grid; gap: .1rem; max-width: 30rem; }
.fix-label { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--soft); }
.now-place { font-family: var(--serif); font-size: 1.1rem; }
.now-meta { color: var(--soft); font-size: .78rem; }
.now-meta:empty { display: none; }

/* Contact */
.mail { font: 600 clamp(1.25rem, 3.2vw, 1.75rem)/1.2 var(--serif); word-break: break-word; }

/* Colophon */
.colophon { max-width: 70rem; margin: 0 auto; padding: 1.4rem 1.5rem 3rem; font: 400 .75rem/1.6 var(--mono); color: var(--soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem; }
.colophon p { margin: 0; }
.print-only { display: none; }

/* Things that aren't on the page */
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--ink); color: var(--paper); font: 400 .85rem/1.4 var(--mono); padding: .55rem .9rem; max-width: min(90vw, 30rem); opacity: 0; pointer-events: none; transition: opacity .2s; }
.toast.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
dialog.index { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 1.4rem 1.6rem; max-width: 30rem; font-size: .95rem; }
dialog.index::backdrop { background: rgba(0,0,0,.45); }
dialog.index h2 { font: 600 .9rem/1.3 var(--cond); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 1rem; }
dialog.index dl { display: grid; grid-template-columns: 4.5rem 1fr; gap: .4rem .9rem; margin: 0 0 1rem; }
dialog.index dt { font: 400 .8rem/1.6 var(--mono); color: var(--soft); }
dialog.index dd { margin: 0; }
kbd, code { font: 400 .85em var(--mono); }
kbd { border: 1px solid var(--rule); padding: 0 .3em; }
.keys-off { font-size: .85rem; color: var(--soft); }
dialog.index button { font: 600 .78rem var(--cond); text-transform: uppercase; letter-spacing: .12em; background: var(--ink); color: var(--paper); border: 0; padding: .5rem .9rem; cursor: pointer; }

/* Narrow screens: the margin column folds in */
@media (max-width: 52rem) {
  :root { --margin: 0; }
  .masthead, .sec { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .mast-text, .fig, .body, .sec > h2 { grid-column: 1; }
  .masthead { padding-top: 2.5rem; }
  .fig { justify-self: start; max-width: 12rem; margin-top: 2rem; grid-row: 2; }
  .sec > h2 { position: static; display: flex; align-items: baseline; gap: .6rem; }
  .sec-n { display: inline; font-size: 1.3rem; margin: 0; }
  .runner span:nth-child(2) { display: none; }
  .kit { grid-template-columns: 1fr; gap: 0 0; }
  .kit dd { margin-bottom: .5rem; }
}

/* Paper copy */
@media print {
  :root { --paper: #fff; --ink: #000; --soft: #333; --rule: #999; --od: #000; }
  /* Red lens is a screen thing: print in black on white even when it is on. */
  :root[data-lens="red"] { --paper: #fff; --ink: #000; --soft: #333; --rule: #999; --hair: #ddd; --od: #000; --od-ink: #fff; color-scheme: light; }
  :root[data-lens="red"] img { filter: none; }
  body { font-size: 10pt; }
  .runner, .contents, .fig, .skip, #road, .toast, dialog, .act { display: none !important; }
  .masthead, .sec { padding: 1rem 0; grid-template-columns: 7rem 1fr; column-gap: 1.2rem; }
  .mast-text, .body { grid-column: 2; }
  .sec > h2 { position: static; }
  .job { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .print-only { display: block; font-style: italic; margin-top: .6rem; }
  a.book::after { content: " (" attr(href) ")"; font: 400 .85em var(--mono); word-break: break-all; }
  .colophon { display: block; }
}

/* Outside the office: field-notes entries, labels in the margin like the CV dates */
.entry { margin: 0 0 1.3rem; }
.entry h3 { font: 600 1.06rem/1.35 var(--serif); margin: 0 0 .3rem; }
.entry p:last-child { margin-bottom: 0; }
.entry .when { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
@media (min-width: 52rem) {
  .entry { display: grid; grid-template-columns: calc(var(--margin) + 2.5rem) minmax(0, 1fr); margin-left: calc(-1 * (var(--margin) + 2.5rem)); }
  .entry .when { text-align: right; padding-right: 2.5rem; padding-top: .3rem; }
}
/* Fig. 2 (Sasha swimming) hangs right on wide screens, like Fig. 1; inline above the notes otherwise. */
.fig-side { grid-column: 2; grid-row: 1; justify-self: start; max-width: 14rem; margin: .3rem 0 1.6rem; }
.fig-side + .body { grid-row: 2; }
@media (min-width: 72rem) {
  .fig-side { grid-column: 3; grid-row: 1; justify-self: end; max-width: 16rem; margin: .3rem 0 0; }
  .fig-side + .body { grid-row: 1; }
}
@media (max-width: 52rem) {
  .fig-side { grid-column: 1; grid-row: auto; max-width: 12rem; margin: 0 0 1.4rem; }
  .fig-side + .body { grid-row: auto; }
}
@media print {
  #outside { display: none !important; }
}

/* Contact landing: the "say hello" jump should put Contact near the top of the window, not pinned to the bottom edge.
   The section gets enough height (with the colophon under it) that the page can scroll it up into view. */
.sec { scroll-margin-top: 1.5rem; }
#contact { min-height: calc(100vh - 14rem); min-height: calc(100svh - 14rem); grid-template-rows: auto 1fr; }
#contact > h2 { padding-bottom: .6rem; }
.eod { grid-column: 2; align-self: end; margin: 2.5rem 0 0; font: 400 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
@media (max-width: 52rem) { #contact > h2 { position: relative; margin-bottom: 1.4rem; } }  /* sticky already positions it on wide screens */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Arrival cue: a short olive rule draws under the heading, then fades. */
  #contact:target > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 2px; background: var(--od); transform-origin: left; animation: jw-arrive 2.2s ease-out .35s both; }
}
@keyframes jw-arrive {
  0% { transform: scaleX(0); opacity: 1; }
  30% { transform: scaleX(1); opacity: 1; }
  75% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media print {
  #contact { min-height: 0; }
  .eod { display: none; }
  #contact > h2::after { content: none; }
}

/* Sections with labels in the margin: the heading stays put so it never slides over the labels. */
#work > h2, #outside > h2 { position: static; }
#outside > h2 { max-width: 6.5rem; }
@media (max-width: 52rem) {
  #contact { grid-template-rows: auto auto 1fr; }
  .eod { grid-column: 1; }
  #outside > h2 { max-width: none; }
}

/* Figs. 3-5 (paddleboard, trail, ridge): set into the notes like an entry, caption in the margin where the labels go. */
.entry-fig { margin-top: .2rem; margin-bottom: 1.6rem; }
.entry-fig picture { display: block; max-width: 22rem; }
.entry-fig img, .fig-side img { border: 1px solid var(--ink); filter: grayscale(.25) contrast(1.02); background: var(--hair); }
.entry.entry-fig figcaption.when { font: 400 .78rem/1.4 var(--mono); color: var(--soft); text-transform: none; letter-spacing: 0; }
@media (min-width: 52rem) { .entry.entry-fig figcaption.when { align-self: end; padding-bottom: .2rem; } }
@media (max-width: 52rem) { .entry-fig { display: flex; flex-direction: column; } .entry.entry-fig figcaption.when { order: 2; margin-top: .5rem; } }
.nowrap { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Oct 13: case studies, field notes, /now/ (appended by build-v3.py) ---------- */
.case, .fnote { margin: 0 0 1.4rem; }
.case h3, .fnote h3 { margin: 1.2rem 0 .4rem; font-size: 1.1rem; }
.fn-date { font-family: var(--mono); font-size: .8rem; margin: 0 0 .6rem; }
.now-back { font-family: var(--mono); font-size: .85rem; padding: 1rem 0 0; }
.cta-row { margin: 1rem 0 .4rem; }
.cta-row .act-a { display: inline-block; }
.cta-alt { margin-top: 0; }