/* Hallmark · shape: a magazine profile, cover first, then the spreads its cover lines promise · genre: editorial · theme: custom · job: hire · idea: "David's site is the issue with David on the cover: his name as the masthead over Vancouver, cover lines for the record, the BBS and the Airstream, then the spreads they promise." · vibe: "confident founder profile, a cover story"
 * paper: oklch(97.8% 0.007 300) · accent: oklch(36.7% 0.116 315) · display: Clash Grotesk 600 · body: Onest 400/600 · outlier: Antonio 700, the masthead only · hero: a magazine cover, the skyline full-bleed, DAVID WARD across the sky as the masthead, the cover story bottom left and four cover lines that navigate the issue · nav: the cover lines, then a sticky masthead bar · footer: a signed note on navy, the place and the credits · imagery: photographs, library 2 natural colour, the user's Airstream and family photographs as uncropped prints · signature: the masthead across the Vancouver sky with the cover lines under it
 * axes: light/grotesk-sans/chromatic-purple · posture: full palette (lavender paper, navy ink as the close field, Meticulosity purple #552768 for the flash, the BBS spread, the years and the actions; brand values read from meticulosity.com, by request) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: H, the cover carries masthead, story and four lines; the lines are set a size under the story and sit on their own column so the head still wins the squint */
/* Hallmark · waive 55b · one line, white-space nowrap, sized in vw so it cannot wrap at 320 · the DAVID WARD masthead sits tight on its dateline rule the way a printed cover sets it */
/* Hallmark · dismissed 58 · the journey intro is worded by David and kept whole, so the windows at y 650 and y 4100 run a little over 80 words */
/* Hallmark · answered F4 · the cover and the coffee close are dark, so the one primary swaps to its paired light fill there, same shape and label weight */
/* Hallmark · dismissed 23 · the year numerals carry the purple role of the full-palette posture declared above, one per record entry */
/* Hallmark · answered F8 · two scroll patterns by request (the masthead handing off to the bar, the BBS wipe), each behind @supports and reduced-motion no-preference so the page reads complete without them */
/* Hallmark · dismissed 25 · each flagged measure holds one or two sentences in a narrow column, a lede or caption length */
/* Hallmark · waive 77 · .schools only · the alma maters and programs bands are logo strips by request, kept quiet on purpose under the shelf */
/* Hallmark · dismissed 59 · ten sections counts the alma maters band, a short credit strip added by request rather than a spread */
@import url("./tokens.css");
@import url("./base.css");

:root { --bar-h: 60px; --shadow-print: 0 1px 2px oklch(20% 0.01 258 / 0.05); --shadow-lift: 0 18px 40px -12px oklch(22% 0.065 274 / 0.35); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-modal); background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); }
.skip:focus-visible { top: var(--space-md); outline-color: var(--color-accent); }
.num { font-variant-numeric: tabular-nums lining-nums; }

h2 { font-size: var(--text-section); font-weight: 600; line-height: 1.02; letter-spacing: var(--tracking-display); max-width: 16ch; }
h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }

/* controls */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 2px solid transparent; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 82%, var(--color-ink)); border-color: color-mix(in oklab, var(--color-accent) 82%, var(--color-ink)); }
.btn--ghost { background: transparent; border-color: var(--color-accent-ink); color: var(--color-accent-ink); }
.btn--ghost:hover { background: var(--color-accent-ink); color: var(--color-ink); }
.btn--big { min-height: 52px; padding: 0 var(--space-xl); font-size: var(--text-lg); }
.go { display: inline-block; margin-top: var(--space-sm); font-weight: 600; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.28em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.go:hover { text-decoration-color: var(--color-ink); }

/* the cover */
.cover { position: relative; isolation: isolate; color: var(--color-accent-ink); margin-top: calc(-1 * (var(--bar-h) + 2 * var(--rule-hair))); }
.cover__photo { position: absolute; inset: 0; z-index: 0; }
.cover__photo > img { object-position: 62% 40%; }
.cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, var(--color-ink) 86%, transparent) 0%, color-mix(in oklab, var(--color-ink) 58%, transparent) 30%, transparent 60%); }
.cover__inner { position: relative; z-index: 2; min-height: max(36rem, 100svh); max-height: none; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2xl); padding-block: calc(var(--bar-h) + var(--space-md)) var(--space-2xl); }
.masthead { display: block; font-family: var(--font-outlier); font-weight: 700; text-transform: uppercase; font-size: clamp(3.5rem, 21vw, 19rem); line-height: 0.88; letter-spacing: -0.01em; color: var(--color-ink); text-decoration: none; white-space: nowrap; margin-left: -0.03em; padding-bottom: 0.06em; }
.cover__dateline { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 2px solid var(--color-ink); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.cover__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: end; }
.cover h1 { font-size: var(--text-display); font-weight: 600; line-height: 0.98; letter-spacing: var(--tracking-display); max-width: 13ch; }
.cover__lead { margin-top: var(--space-md); font-size: var(--text-lead); max-width: 36ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.cover :focus-visible { outline-color: var(--color-accent-ink); }
.cover .masthead:focus-visible { outline-color: var(--color-ink); }
.cover .btn--primary, .coffee .btn--primary { background: var(--color-accent-ink); border-color: var(--color-accent-ink); color: var(--color-accent); }
.cover .btn--primary:hover, .coffee .btn--primary:hover { background: var(--color-paper-3); border-color: var(--color-paper-3); }
.lines { display: grid; }
.lines a { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-top: 1px solid color-mix(in oklab, var(--color-accent-ink) 45%, transparent); text-decoration: none; }
.lines strong { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: var(--text-2xl); line-height: 1.05; }
.lines span { font-size: var(--text-sm); }
.lines a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.lines .lines__flash { background: var(--color-flash); color: var(--color-flash-ink); border: 0; padding-inline: var(--space-md); margin-top: var(--space-xs); }

/* the masthead bar */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 2px solid var(--color-ink); }
.bar__inner { height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.bar__mark { font-family: var(--font-outlier); font-weight: 700; text-transform: uppercase; font-size: var(--text-xl); line-height: 1; text-decoration: none; white-space: nowrap; }
.bar__links { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.bar__links a { text-decoration: none; white-space: nowrap; padding-block: var(--space-xs); }
.bar__links a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* now: the feature spread */
.about { padding-block: var(--section-gap-l) 0; }
.about + .now { padding-top: calc((var(--section-gap) + var(--section-gap-l)) / 2); }
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--gap-columns); align-items: center; }
.about__photo { aspect-ratio: 1; width: 100%; max-width: 28rem; }
.about h2 { font-size: var(--text-section); line-height: 1; }
.about__text p { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 46ch; }
.about__text h2 + p { margin-top: var(--space-lg); }
.now { padding-block: var(--section-gap-l) var(--section-gap); }
.now__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.now h2 { grid-column: 1 / 9; font-size: var(--text-display); line-height: 0.98; max-width: 11ch; }
.now__co--a { grid-column: 1 / 5; }
.now__co--b { grid-column: 5 / 9; }
.now__since { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }
.now__co h3 { margin-top: var(--space-xs); font-size: var(--text-3xl); display: flex; align-items: center; min-height: 4rem; }
.now__co p:not(.now__since) { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 40ch; }
.now__side { grid-column: 9 / 13; grid-row: 1 / 3; align-self: stretch; display: grid; align-content: end; gap: var(--space-xl); background: var(--color-paper-2); padding: var(--space-xl); }
.now__side .now__powered { margin-top: 0; font-size: calc(var(--text-sm) * 2); line-height: 1.1; font-weight: 600; color: var(--color-accent); }
.now__side h3 { font-size: var(--text-xl); }
.logo { display: block; height: var(--logo-h, 2.75rem); aspect-ratio: var(--ar); max-width: 100%; background: var(--color-ink); mask: var(--src) no-repeat left center / contain; -webkit-mask: var(--src) no-repeat left center / contain; }
.now__side .logo { --logo-h: 1.75rem; }
.logo--color { width: auto; background: none; mask: none; -webkit-mask: none; }
.now__side p { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.now__next h3, .now__next p { color: var(--color-muted); }

/* where it started: the purple spread */
.start { background: var(--color-accent); color: var(--color-accent-ink); padding-block: var(--section-gap-l); }
.start :focus-visible { outline-color: var(--color-accent-ink); }
.start__quote { margin: 0; }
.start__line { position: relative; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 5.2vw + 0.5rem, 6.5rem); line-height: 1.02; letter-spacing: var(--tracking-display); max-width: 17ch; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.start__line::before { content: "\201C"; position: absolute; right: 100%; padding-right: 0.06em; }
.start__by { margin-top: var(--space-xl); font-size: var(--text-lead); max-width: 44ch; }

/* the record */
.record { padding-block: var(--section-gap); }
.record__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.record__head p { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 32ch; }
.years { list-style: none; margin: var(--space-3xl) 0 calc(-1 * var(--space-3xl)); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap-columns); }
.year { border-top: 2px solid var(--color-ink); padding-top: var(--space-md); display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin-bottom: var(--space-3xl); }
.year__num { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.04em; font-size: clamp(3.5rem, 6.5vw, 7rem); line-height: 0.9; color: var(--color-accent); }
.year h3 { margin-top: var(--space-md); font-size: var(--text-2xl); }
.year__what { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 36ch; }
.year__meta { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* off the clock: the photo essay */
.life__band { position: relative; isolation: isolate; color: var(--color-accent-ink); }
.life__photo { aspect-ratio: 21 / 9; max-height: 46rem; width: 100%; z-index: 0; }
.reel { position: relative; overflow: hidden; background: var(--color-ink); }
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.life__band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, var(--color-ink) 70%, transparent) 0%, transparent 45%); }
.life__title { position: absolute; inset-inline: 0; bottom: var(--space-xl); z-index: 2; }
.life__title h2 { font-size: var(--text-display); line-height: 0.98; }
.facts { list-style: none; margin: 0; padding: calc(var(--section-gap) / 2) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.facts li { border-top: 2px solid var(--color-accent); padding-top: var(--space-md); }
.facts__big { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: var(--text-3xl); line-height: 1.02; }
.facts li p:not(.facts__big) { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 34ch; }

/* the album */
.album { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.album--journey { padding-block: calc(var(--section-gap-s) / 2) 0; }
.album:not(.album--journey) { padding-bottom: calc(var(--section-gap-s) / 2); }
.prints--native .print { width: auto; }
.prints--native .print figure { width: min-content; }
.prints--native { align-items: flex-start; }
.journey__lead { margin-top: var(--space-lg); max-width: 58ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.prints--native .print__photo { aspect-ratio: auto; }
.prints--native .print__photo > img { position: static; width: auto; max-width: none; height: clamp(9rem, (100vw - 2 * var(--gutter) - 7.5rem) / 6.3, 12rem); }
.prints--people .print__photo > img { height: clamp(9rem, (100vw - 2 * var(--gutter) - 8rem) / 5.1, 15rem); }

.prints { list-style: none; margin: var(--space-2xl) 0 0; padding: 0 var(--space-xs); display: flex; flex-wrap: wrap; justify-content: space-evenly; }
.print { width: 17.5rem; margin: var(--space-xs) calc(-1 * var(--space-xs)); transform: rotate(var(--tilt, 0deg)); background: var(--color-paper); padding: var(--space-sm) var(--space-sm) var(--space-md); box-shadow: var(--shadow-print); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); }
.print { position: relative; transition: transform var(--dur-long) var(--ease-out); }
.print::after { content: ""; position: absolute; inset: 0; box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none; transition: opacity var(--dur-long) var(--ease-out); }
@media (hover: hover) { .print:hover { transform: translateY(-0.5rem) scale(1.08); z-index: var(--z-raised); } .print:hover::after { opacity: 1; } }
@media (hover: none) { .print:active { transform: translateY(-0.5rem) scale(1.06); z-index: var(--z-raised); } .print:active::after { opacity: 1; } }
.print figure { margin: 0; }
.print__photo { aspect-ratio: 4 / 5; }
.print figcaption { margin-top: var(--space-sm); text-align: center; font-size: var(--text-sm); color: var(--color-ink-2); }

/* the shelf */
.shelf { padding-block: calc(var(--section-gap) / 2); }
.shelf__list { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.shelf__list li { border-top: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-md); }
.shelf h3 { font-size: var(--text-xl); }
.shelf__list p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.shelf__img { aspect-ratio: 1.85 / 1; margin-bottom: var(--space-md); overflow: hidden; background: var(--color-paper-2); }
.shelf__img img { width: 100%; height: 100%; object-fit: cover; }
.shelf__img--plate { display: grid; place-items: center; padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); }
.shelf__img--plate img { object-fit: contain; mix-blend-mode: multiply; }

.schools { padding-block: calc(var(--section-gap-s) / 2); border-top: var(--rule-hair) solid var(--color-rule); }
.schools__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
.schools h2 { font-size: var(--text-xl); }
.schools__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-xl) var(--space-3xl); }
.schools__list img { width: auto; }
.schools__list li { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.schools__list p { font-size: var(--text-sm); color: var(--color-ink-2); }
.schools__list li:first-child img { height: 4.125rem; }
.schools__list li:last-child img { height: 2.25rem; margin-block: calc((4.125rem - 2.25rem) / 2); }
.schools:not(.schools--programs) .schools__list { justify-content: center; }
@media (max-width: 40rem) { .schools__list li:last-child img { margin-block: 0; } }
.schools--programs .schools__list { align-items: center; justify-content: space-between; gap: var(--space-lg) var(--space-lg); }
.schools--programs .schools__list a { display: block; border-radius: 2px; transition: opacity var(--dur-short) var(--ease-out); }
.schools--programs .schools__list a:hover { opacity: 0.75; }
.schools--programs .schools__list img, .schools--programs .schools__list li:first-child img, .schools--programs .schools__list li:last-child img { height: var(--logo-h); margin-block: 0; }
@media (max-width: 75rem) and (min-width: 60.01rem) { .schools--programs .schools__list img, .schools--programs .schools__list li:first-child img, .schools--programs .schools__list li:last-child img { height: calc(var(--logo-h) * 0.75); } }
@media (max-width: 66rem) and (min-width: 60.01rem) { .schools--programs .schools__list img, .schools--programs .schools__list li:first-child img, .schools--programs .schools__list li:last-child img { height: calc(var(--logo-h) * 0.65); } }
@media (max-width: 40rem) { .schools--programs .schools__list { justify-content: flex-start; gap: var(--space-lg) var(--space-xl); } }

/* the close */
.coffee { background: var(--color-ink); color: var(--color-accent-ink); padding-block: var(--section-gap-l); }
.coffee :focus-visible { outline-color: var(--color-accent-ink); }
.coffee__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.coffee h2 { font-size: clamp(3rem, 6.6vw + 0.5rem, 8rem); line-height: 0.95; max-width: 8ch; }
.coffee__lead { font-size: var(--text-lead); max-width: 30ch; margin-bottom: var(--space-xl); }
.coffee__more { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.coffee__more a { overflow-wrap: anywhere; }

.close { background: var(--color-ink); color: var(--color-paper-3); padding-block: var(--space-2xl); border-top: 1px solid color-mix(in oklab, var(--color-accent-ink) 18%, transparent); }
.close :focus-visible { outline-color: var(--color-accent-ink); }
.close__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.close__sign { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.15; color: var(--color-accent-ink); }
.close__meta, .close__credits { font-size: var(--text-sm); }

/* motion: the cover settles once; the masthead hands off to the bar; the BBS line wipes */
@media (prefers-reduced-motion: no-preference) {
  .masthead { animation: settle 0.7s var(--ease-out) both; }
  .cover__foot { animation: settle 0.7s var(--ease-out) 0.1s both; }
}
@keyframes settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .start__line { animation: head-wipe linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    @keyframes head-wipe { from { clip-path: inset(0 100% 0 0); transform: translateX(-0.25em); } to { clip-path: inset(0 0 0 0); transform: none; } }
  }
  @media (prefers-reduced-motion: no-preference) {
    .bar { background: transparent; border-bottom-color: transparent; }
    .bar::before { content: ""; position: absolute; inset: 0 0 -2px; z-index: -1; background: var(--color-paper); border-bottom: 2px solid var(--color-ink); animation: fade-in linear both; animation-timeline: scroll(root); animation-range: 10rem 20rem; }
    .bar__mark { animation: mark-in linear both; animation-timeline: scroll(root); animation-range: 12rem 20rem; }
    .cover__top { transform-origin: left top; animation: mast-out linear both; animation-timeline: scroll(root); animation-range: 0rem 20rem; }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes mark-in { from { opacity: 0; visibility: hidden; transform: translateY(0.75em); } to { opacity: 1; visibility: visible; transform: none; } }
    @keyframes mast-out { to { opacity: 0; transform: translateY(-1.5rem) scale(0.25); } }

  }
}

@media (max-width: 60rem) {
  .cover__foot, .record__head, .coffee__grid, .close__grid, .schools__grid, .about__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .lines { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); }
  .now__grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .years, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .life__photo { aspect-ratio: 16 / 9; }
  .start__line::before { position: static; padding-right: 0; }
}
@media (max-width: 40rem) {
  .bar__hide-s { display: none; }
  .bar__links { gap: var(--space-md); }
  .cover::after { background: linear-gradient(to top, color-mix(in oklab, var(--color-ink) 90%, transparent) 0%, color-mix(in oklab, var(--color-ink) 72%, transparent) 55%, transparent 78%); }
  .lines { grid-template-columns: minmax(0, 1fr); }
  .years, .facts, .shelf__list { grid-template-columns: minmax(0, 1fr); }
  .life__photo { aspect-ratio: 4 / 3; }
  .prints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); padding-inline: var(--space-sm); }
  .print { width: auto; margin: 0; }
  .prints--native { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-xl); }
  .prints--native .print { width: auto; }
  .prints--native .print figure { width: auto; }
  .prints--native .print__photo > img { width: 100%; height: auto; }
}

/* modals: the booking page and the email form open over the page */
.modal { width: min(36rem, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--gutter)); padding: 0; border: 0; background: var(--color-paper); color: var(--color-ink); box-shadow: 0 24px 64px color-mix(in oklab, var(--color-ink) 35%, transparent); }
.modal--wide { width: min(64rem, calc(100% - 2 * var(--gutter))); }
.modal::backdrop { background: color-mix(in oklab, var(--color-ink) 70%, transparent); }
.modal[open] { display: flex; flex-direction: column; animation: modal-in var(--dur-short) var(--ease-out); }
.modal__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.modal__bar h2 { font-size: var(--text-xl); }
.modal__close { padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); background: transparent; color: var(--color-ink); font-weight: 600; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.modal__close:hover { background: var(--color-paper-2); }
.modal__close:active { transform: translateY(1px); }
.modal__frame { display: block; width: 100%; height: min(44rem, calc(100dvh - 2 * var(--gutter) - 4rem)); border: 0; background: var(--color-paper); }
.mail { display: grid; gap: var(--space-md); padding: var(--space-lg); overflow-y: auto; }
.mail__field { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; }
.mail__field input, .mail__field textarea { width: 100%; min-height: 48px; padding: var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); font-weight: 400; transition: border-color var(--dur-short) var(--ease-out); }
.mail__field textarea { resize: vertical; min-height: 8rem; }
.mail__field input:hover, .mail__field textarea:hover { border-color: var(--color-ink); }
.mail__field input:focus-visible, .mail__field textarea:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.mail__field input:user-invalid, .mail__field textarea:user-invalid { border-color: var(--color-error); }
.mail__trap { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.mail__captcha:empty { display: none; }
.mail__status:empty { display: none; }
.mail__status { font-size: var(--text-sm); font-weight: 600; }
.mail__status[data-state="ok"] { color: var(--color-success); }
.mail__status[data-state="error"] { color: var(--color-error); }
.mail .btn { justify-self: start; cursor: pointer; }
.btn:disabled { opacity: 0.6; cursor: progress; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }