/* Hallmark · shape: a lookbook of three designs, one per row · genre: editorial · theme: custom · job: choose · idea: "the client sees each design as the guest will: the card, the video and the live page side by side, then picks one" · vibe: "quiet, warm, lets the designs speak"
 * paper: oklch(98.4% 0.006 20) · accent: oklch(30% 0.09 15) · display: Marcellus · body: Figtree · hero: the couple's names, one sentence and the way down to the designs · nav: none · footer: the maker's credit · imagery: the three cards, three videos and phone captures of the three live pages · signature: each design's card, video and live page side by side
 * axes: light/roman-serif/warm · posture: restrained colour, centred canvas hero · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R5 V3 · weakest: V, a lookbook is a known shape; it is the right one for choosing between three designs, so the designs carry the page */
/* Hallmark · waive 23 · posture: restrained colour, the maroon counted is inside the card pictures · the pitch shows each wedding card as the guest sees it */
/* Hallmark · waive 83 · guard: each row shows one design three ways, nothing decorative · the pictures are the product on a lookbook for choosing between three designs */
/* Hallmark · dismissed 58 · the window holds the last design's short blurb and six two-to-six-word confirm items */
@import url("./tokens.css");
@import url("./base.css");

html { scroll-behavior: smooth; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-accent-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

.hero { display: grid; justify-items: center; align-content: center; gap: var(--space-md); padding: var(--space-4xl) var(--gutter) var(--space-xl); text-align: center; background: var(--color-paper-2); }
.hero__cross { width: 72px; height: auto; }
.hero h1 { font: 400 var(--text-display)/1.05 var(--font-display); color: var(--color-ink); }
.hero__lede { max-width: 34ch; margin-bottom: var(--space-sm); font-size: var(--text-lead); color: var(--color-ink-2); }

/* card is 2:3, video and live 9:16: columns in 32:27:27 give all three the same height, so tops and captions line up */
.look { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head head" "card card" "video live" "act act"; gap: var(--space-lg) var(--space-md); align-items: start; max-width: var(--container); margin-inline: auto; padding: var(--section-gap-s) var(--gutter) 0; }
.look__head { grid-area: head; display: grid; justify-items: start; gap: var(--space-sm); }
.look__card { grid-area: card; }
.look__video { grid-area: video; }
.look__live { grid-area: live; }
.look__actions { grid-area: act; display: grid; justify-items: start; gap: var(--space-xs); }
.look h2 { font: 400 var(--text-section)/1.1 var(--font-display); color: var(--color-ink); }
.look__feel { max-width: 40ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.look__files { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.look__files a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); text-underline-offset: 0.2em; }
.look__files a:hover { color: var(--color-ink-2); }
.look figure { margin: 0; }
.look img, .look video { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: 0 18px 40px -24px color-mix(in oklab, var(--color-ink) 45%, transparent); }
.look video, .look__live img { aspect-ratio: 9 / 16; }
.look__open { display: block; border-radius: var(--radius-card); text-decoration: none; }
.look__open-label { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-xs); padding: 0 var(--space-md); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.look__open:hover .look__open-label { background: var(--color-ink); color: var(--color-accent-ink); }
.look__open:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .look__open-label { transition: none; } }
.look figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 60rem) { .look { grid-template-columns: minmax(0, 32fr) minmax(0, 27fr) minmax(0, 27fr); grid-template-areas: "head head act" "card video live"; align-items: end; gap: var(--space-xl) var(--space-lg); padding-top: var(--section-gap); } .look figure { align-self: start; } }

.next { max-width: var(--container); margin-inline: auto; padding: var(--section-gap) var(--gutter); }
.next h2 { font: 400 var(--text-section)/1.1 var(--font-display); color: var(--color-ink); }
.next > p { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); }
.next__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-2xl); margin: var(--space-lg) 0 0; padding: 0; list-style: none; color: var(--color-ink); font-size: var(--text-lead); }
.next__list li { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
@media (min-width: 48rem) { .next__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.next__note { max-width: 62ch; margin-top: var(--space-xl) !important; font-size: var(--text-md) !important; color: var(--color-muted) !important; }

.foot { padding: var(--space-xl) var(--gutter) var(--space-2xl); text-align: center; font-size: var(--text-sm); color: var(--color-muted); background: var(--color-paper-2); }
.foot p { margin-inline: auto; }
main > .look:first-child { padding-top: var(--space-2xl); }