/* Hallmark · shape: Long Document · genre: modern-minimal · theme: by request, navy and gold with Newsreader heads on flat ruled surfaces (dealt Coral, its cards and desk removed by the owner) (deal 1/3, seed legacy-doug-skaff-west-8f98·876fd664·2026-11-10·r0) · redesign: full
 * hero: Poster · nav: edge-aligned · footer: letter close · imagery: the family's own portrait · signature: his portrait beside his name, then his sister's words set large with the Mountaineer chant in gold
 * axes: light/serif/navy-gold · posture: restrained · contrast: pass · fold: pass · draw: 95ac48 · job: join · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, eight sections of facts could flatten; gave each a different object (letter, index, table, cards, rows, board, form) */
/* Hallmark · waive 42 · wordmark left, six section links right, named in the stamp · the masthead the draw dealt would repeat the name Doug Skaff Jr. directly above the same headline */
/* Hallmark · dropped "In loving memory" label, birth and death dates in the hero · the owner asked that the page not read as an obituary */
/* Hallmark · answered F4 · the gold button is the one primary; the outlined button is the quiet control for sharing a memory */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --nav-h: 64px;
  --text-statement: clamp(1.5625rem, 2vw + 1rem, 2.441rem);
  --text-poster: clamp(3.5rem, 6vw + 1rem, 6.5rem);
  --cast-board: 8px 8px 16px -8px oklch(var(--deep) / 0.6);
  --rule-board: oklch(97.5% 0.008 85 / 0.2);
  --press-light: 0.5px 0.75px 0 var(--color-cotton);
  --press-dark: 0 -0.75px 0 var(--color-ink);
  --ruled: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--color-rule) 31px, var(--color-rule) 32px);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-lg)); }

/* A way past the nav */
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-board); color: var(--color-board-type); border-radius: var(--radius-input); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* Nav */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav > .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.nav a { text-decoration: none; white-space: nowrap; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.nav__mark { font-weight: 600; letter-spacing: var(--tracking-display); font-size: var(--text-lg); }
.nav__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); overflow-x: auto; scrollbar-width: none; }

/* Stationery */
.desk { background: var(--color-paper-2); }
.stock { color: var(--color-ink); }

/* Controls: letterpress cards */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-input); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn--ink { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn:hover { transform: translateY(-1px); }
.btn--quiet:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover, .btn:active { transform: none; } html { scroll-behavior: auto; } }

/* Hero: Poster on the desk */
.hero { min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center; padding-block: var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.hero h1 { font-size: var(--text-poster); line-height: 0.98; max-width: 9ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 30ch; color: var(--color-ink-2); }
.hero__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.portrait { margin: 0; justify-self: end; width: 100%; max-width: 30rem; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--nav-h) - var(--space-4xl)); overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }

/* His sister's words, as a statement */
.quote-card { margin: 0; max-width: 62rem; }
.quote-card blockquote { margin: 0; }
.quote-card p { font-family: var(--font-display); font-size: var(--text-statement); line-height: 1.25; letter-spacing: var(--tracking-display); max-width: none; }
.pressed { display: block; margin-block: var(--space-xs); font-size: 1.15em; font-weight: 500; font-style: italic; line-height: 1.1; color: var(--color-paid); }
.quote-card figcaption { margin-top: var(--space-lg); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }

/* Sections */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.section--l { padding-block: var(--section-gap-l); }
.section--well { background: var(--color-paper-2); }
.section--ruled > .container > :first-child { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-2xl); }
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); }
.head h2 { grid-column: 1 / span 6; }
.head .lead { grid-column: 8 / span 5; color: var(--color-ink-2); }
.note { margin-top: var(--space-xl); font-size: var(--text-lead); font-weight: 500; max-width: 52ch; }

/* His story: a letter on cotton */
.story__head { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--space-2xl)); }
.letter { grid-column: 7 / span 6; }
.letter p { font-size: var(--text-lg); line-height: 1.6; max-width: 34em; }
.letter p + p { margin-top: var(--space-lg); }
.letter .note { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-lg); }

/* Mountaineer: an index */
.index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: 0; }
.index > div { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.index dt { font-size: var(--text-title); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.2; }
.index dd { margin: var(--space-xs) 0 0; color: var(--color-ink-2); max-width: 32ch; }

/* Public servant: a table of years */
.record { width: 100%; border-collapse: collapse; }
.record th, .record td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; text-align: left; vertical-align: baseline; border-top: var(--rule-hair) solid var(--color-rule-2); }
.record thead th { border-top: 0; padding-block: 0 var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.record tbody th { font-size: var(--text-title); font-weight: 600; letter-spacing: var(--tracking-display); }
.record .fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; color: var(--color-ink-2); white-space: nowrap; }
.record td:last-child { color: var(--color-ink-2); }

/* Entrepreneur: index cards on the desk */
.works { grid-column: 1 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); align-items: start; }
.works, .rows { margin: 0; padding: 0; list-style: none; }
.work { padding-block: var(--space-lg) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule-2); display: grid; gap: var(--space-xs); align-content: start; }
.work p { color: var(--color-ink-2); }
.works__head { grid-column: 9 / span 4; align-self: center; }
.works__head .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }

/* Giving back: rows */
.giving__head { grid-column: 1 / span 4; }
.giving__head .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.rows { grid-column: 5 / span 8; }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.rows li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.rows p { color: var(--color-ink-2); }

/* The scholarship: the board */
.board { background: var(--color-board); color: var(--color-board-type); border-radius: var(--radius-card); padding: var(--space-3xl) var(--space-2xl); }
.board h2 { grid-column: 1 / span 7; font-size: var(--text-display-s); max-width: 16ch; }
.board__text { grid-column: 1 / span 6; display: grid; gap: var(--space-md); align-content: start; }
.board__text p { font-size: var(--text-lead); line-height: 1.5; max-width: 34em; }
.gift { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: center; display: grid; gap: var(--space-md); justify-items: start; color: var(--color-board-type); }
.gift p { font-size: var(--text-md); color: var(--color-board-type); max-width: 45ch; }
.gift p b { font-weight: 600; }
.dean { grid-column: 1 / -1; margin: var(--space-xl) 0 0; padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--rule-board); }
.dean p { font-size: var(--text-xl); line-height: 1.4; max-width: 34em; }
.dean footer { margin-top: var(--space-md); font-size: var(--text-sm); }

/* Memories: the form on a blank card */
.wall__head { grid-column: 1 / span 5; align-self: start; }
.wall__head .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.wall__empty { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.wall { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.wall__item { margin: 0; min-height: 14rem; transition: opacity var(--dur-short) var(--ease-out); }
.wall__item.is-out { opacity: 0; }
.wall__item blockquote { margin: 0; }
.wall__photo { width: 100%; max-width: 16rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); margin-bottom: var(--space-md); }
.wall__item p { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.35; letter-spacing: var(--tracking-display); white-space: pre-line; overflow-wrap: break-word; max-width: 30em; }
.wall__item figcaption { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.wall__controls { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
.link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; cursor: pointer; }
.link:hover { text-decoration-color: var(--color-accent-2); }
.link:active { color: var(--color-ink-2); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.link:disabled { opacity: 0.55; cursor: not-allowed; }
.memory { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.memory h3 { grid-column: 1 / -1; }
.field { display: grid; gap: var(--space-xs); align-content: start; font-size: var(--text-sm); font-weight: 500; }
.field--full { grid-column: 1 / -1; }
.field small { font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.field textarea { min-height: 10rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid], .field textarea[aria-invalid] { border-color: var(--color-error); }
.field input:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.memory__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.memory__foot p { font-size: var(--text-sm); color: var(--color-muted); }
#form-note { grid-column: 1 / -1; min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }

/* Titles outside h1 to h3 take the display face too */
.nav__mark, .index dt, .record tbody th, .pressed, .close p:first-child { font-family: var(--font-display); font-weight: var(--display-weight); }

/* In the news: ruled rows that link out */
.press { margin: 0; padding: 0; list-style: none; }
.press li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); column-gap: var(--gap-columns); row-gap: var(--space-xs); align-items: baseline; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.press li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.press time, .press span { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.press a { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.2; text-decoration: none; overflow-wrap: break-word; }
.press a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.press a:active { color: var(--color-ink-2); }
.press p { grid-column: 2; color: var(--color-ink-2); }
#press-more { margin-top: var(--space-md); }

/* Footer: a letter close */
.close { padding-block: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.close p:first-child { font-size: var(--text-title); font-weight: 600; letter-spacing: var(--tracking-display); }
.close p + p { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .head h2, .head .lead, .story__head, .letter, .works, .works__head, .giving__head, .rows, .board h2, .board__text, .gift, .wall__head, .memory { grid-column: 1 / -1; }
  .story__head { position: static; }
  .gift { grid-row: auto; }
  .portrait { justify-self: start; max-height: none; }
  .works__head { order: -1; }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board { padding: var(--space-2xl) var(--space-lg); }
  .nav__mark { font-size: var(--text-md); }
}
@media (max-width: 40rem) {
  .index, .works, .memory, .rows li, .press li { grid-template-columns: minmax(0, 1fr); }
  .press p { grid-column: 1; }
  .record thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .record tr { display: grid; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); }
  .record th, .record td { padding: 0; border: 0; }
}