/* @heirloom/design/public-dusk: Direction C public roles (--pd-*) and the dusk art palette (--art-*, pictures only). */
:root {
  --pd-ground: #FAF7F5;
  --pd-ground-alt: #F2EBEC;
  --pd-card: #FFFFFF;
  --pd-ink: #16071E;
  --pd-ink-muted: #62566C;
  --pd-hairline: #DED3D8;
  --pd-boundary: #796984;
  --pd-band: #3A0E4A;
  --pd-band-line: #5A2E6B;
  --pd-band-ink: #F3F0F5;
  --pd-band-ink-muted: #B3A9C4;
  --pd-hero: #16071E;
  --pd-press: #1F5FC4;
  --pd-press-label: #FFFFFF;
  --pd-press-ink: #1F5FC4;
  --pd-press-on-dark: #5A9BFF;
  --pd-press-on-dark-label: #16071E;
  --pd-value-on-dark: #D7AE4A;
  --pd-value-on-light: #7A5A1E;
  --pd-value-fill: #8F6B24;
  --pd-focus: #1F5FC4;
  --pd-focus-on-dark: #5A9BFF;
  --pd-card-shadow: 0 30px 60px -30px rgba(22, 7, 30, 0.38), 0 2px 8px rgba(22, 7, 30, 0.05);
  --pd-chip: rgba(22, 7, 30, 0.62);
  --pd-chip-line: rgba(243, 240, 245, 0.28);
  --pd-sheen: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0) 70%);
  --pd-hero-veil: linear-gradient(90deg, rgba(22, 7, 30, 0.72) 0%, rgba(22, 7, 30, 0.46) 38%, rgba(22, 7, 30, 0) 64%);
  --pd-hero-veil-top: linear-gradient(180deg, rgba(22, 7, 30, 0.8) 0%, rgba(22, 7, 30, 0.5) 34%, rgba(22, 7, 30, 0) 64%);
  --art-sky-0: #16071E;
  --art-sky-1: #1C1030;
  --art-sky-2: #2A1838;
  --art-sky-3: #3F1F30;
  --art-sky-4: #793A4C;
  --art-sky-5: #A95969;
  --art-sky-6: #CA8291;
  --art-sky-7: #E2B0BF;
  --art-sky-8: #8393E1;
  --art-sky-9: #4A3E92;
  --art-glow: #FFDAE6;
  --art-rose: #D78799;
  --art-blush: #E2B0BF;
  --art-periwinkle: #8393E1;
  --art-lamp: #FFC46B;
  --art-star: #F3F0F5;
  --art-ridge: #4A3E92;
  --art-hill: #2A1838;
  --art-tree: #22132F;
  --art-ground: #35202F;
  --art-ground-line: #4E2D3E;
  --art-mound: #28161F;
  --art-post: #1B1026;
  --art-roof: #0E0916;
  --art-wall: #120B1A;
  --art-near: #120A19;
  --art-deep: #0B0612;
  --art-glass: #2E2458;
  --art-wine: #6E3253;
  --art-gold: #D7AE4A;
  --art-brass: #7A5A1E;
  --art-shade: #16071E;
}


:root {
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.site {
  margin: 0;
  background: var(--pd-ground);
  color: var(--pd-ink);
  font: 400 17px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p { margin: 0 0 1em; }
.site svg { display: block; }
.site a { color: var(--pd-press-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.site :focus-visible { outline: 2px solid var(--pd-focus); outline-offset: 2px; }
.site .on-dark :focus-visible { outline-color: var(--pd-focus-on-dark); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 8px; top: -80px; z-index: 10; background: var(--pd-card); color: var(--pd-press-ink); padding: 12px 16px; border-radius: 6px; }
.skip:focus { top: 8px; }
.draft-strip { margin: 0; padding: 10px var(--gutter); background: var(--pd-ground-alt); color: var(--pd-ink); border-bottom: 2px solid var(--pd-value-fill); font: 600 15px/1.4 var(--font-sans); }

/* Header: the wordmark and four labeled links. Two rows below 640px. */
.site-header { background: var(--pd-ground); border-bottom: 1px solid var(--pd-hairline); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; padding-top: 8px; padding-bottom: 4px; }
.site .wordmark { display: inline-flex; align-items: center; min-height: 44px; color: var(--pd-ink); font: 600 20px/1 var(--font-sans); letter-spacing: -0.01em; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; width: 100%; margin-left: -9px; }
.site .site-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 9px; color: var(--pd-ink); font: 500 16px/1 var(--font-sans); text-decoration: none; }
.site .site-nav a:hover { text-decoration: underline; }
.site .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--pd-value-fill); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.site-home .site-header { position: absolute; left: 0; right: 0; z-index: 2; background: none; border-bottom: 0; }
.site-home .wordmark, .site .site-home .site-nav a, .site-home .site-nav a { color: var(--pd-band-ink); }
.site-home .site-nav a[aria-current="page"] { text-decoration-color: var(--pd-value-on-dark); }
/* The four links stay on one row down to 320px, so none drops onto the
   bright horizon of the home hero (review cure, 2026-09-27: at 320px "About"
   wrapped and "Worksheets" and "Questions" sat on the glow at 3.9:1). */
@media (max-width: 399px) {
  .site-nav { flex-wrap: nowrap; margin-left: -6px; }
  .site .site-nav a { padding: 0 6px; font-size: 15px; }
}
@media (min-width: 640px) {
  .header-row { flex-wrap: nowrap; padding-top: 14px; padding-bottom: 14px; }
  .site-nav { width: auto; margin-left: auto; margin-right: -12px; }
  .site .site-nav a { padding: 0 12px; }
}

/* Breadcrumb */
.crumbs { padding-top: 16px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; font-size: 14px; color: var(--pd-ink-muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--pd-boundary); }
.site .crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--pd-ink-muted); }

/* The hero (Direction C). Stacked below 1024px in portrait: the scene is a
   band at the top of the page under the header, cropped to its must-see zone
   (x 700 to 1600, y 380 to 900; Scene-Art-Direction 4.2), so the landing,
   the town, the road and its reeds are in the first view on every phone and
   on the folded foldable. Then the copy on aubergine, then the pause control
   as a quiet text control under the copy, never over the scene (review
   cure, 2026-09-27). */
.hero { position: relative; display: flex; flex-direction: column; background: var(--pd-hero); color: var(--pd-band-ink); overflow: hidden; isolation: isolate; }
.hero > .wrap { order: 1; width: 100%; }
.hero-copy { max-width: 640px; padding: 20px 0 8px; }
.hero-eyebrow { margin: 0 0 16px; max-width: 30em; color: var(--pd-band-ink-muted); font: 500 15px/1.5 var(--font-sans); }
.hero h1 { margin: 0; font: 400 clamp(42px, 3.6vw + 28px, 68px)/1.08 var(--font-serif); letter-spacing: -0.011em; text-wrap: balance; }
.stress { text-decoration: underline; text-decoration-color: var(--pd-value-on-dark); text-decoration-thickness: 0.07em; text-underline-offset: 0.16em; text-decoration-skip-ink: auto; }
.hero-lede { margin: 24px 0 30px; max-width: 30em; font-size: clamp(18px, 0.4vw + 16.5px, 20px); line-height: 1.5; }
.hero-facts { margin: 20px 0 0; max-width: 31em; font-size: 15px; line-height: 1.6; }
.hero-art { position: relative; order: 0; aspect-ratio: 900 / 520; overflow: hidden; }
.hero-art .hero-svg { position: absolute; right: 0; bottom: 0; width: 177.78%; height: auto; }
.hero-veil { position: absolute; inset: 0; background: var(--pd-hero-veil-top); }
/* The narrowest phones: the header's links sit lowest over the sky, so the
   top veil is laid twice (review cure, 2026-09-27; measured at 320px). */
@media (max-width: 399px) { .hero-veil { background: var(--pd-hero-veil-top), var(--pd-hero-veil-top); } }
.motion-toggle { order: 2; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter) 28px; }
.motion-toggle summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--pd-band-ink-muted); font: 500 15px/1 var(--font-sans); text-decoration: underline; text-decoration-color: var(--pd-chip-line); text-underline-offset: 5px; list-style: none; cursor: pointer; }
.motion-toggle summary::-webkit-details-marker { display: none; }
.motion-toggle .when-open { display: none; }
.motion-toggle[open] .when-open { display: inline; }
.motion-toggle[open] .when-closed { display: none; }
/* Full bleed from 1024px, and on short wide screens from 768px (the open
   foldable at 890 x 626), so the scene is in the first view there too. On
   very wide screens the hero grows with the width (up to the screen's own
   height), so the scene is never scaled up behind a copy block that stays
   put: the copy keeps to the upper, darker sky instead of drifting down into
   the afterglow near the horizon (review cure, 2026-09-27). */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .hero { display: block; min-height: max(clamp(640px, 60vw, 900px), min(45vw, 100svh)); }
  /* The art never runs taller than the screen: when the copy makes the hero
     taller than the first view (the open foldable, a 900px laptop), the
     scene's shore and town still end at the bottom of the screen instead of
     below it (review cure, 2026-09-27). */
  .hero-art { position: absolute; inset: 0; bottom: auto; height: min(100%, 100svh); aspect-ratio: auto; z-index: -1; }
  .hero-art .hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-veil { background: var(--pd-hero-veil); }
  .hero .wrap { position: relative; }
  .hero-copy { padding: 136px 0 88px; }
  /* Over the dark near bank, bottom left, as a quiet chip. */
  .motion-toggle { position: absolute; left: var(--gutter); bottom: 22px; z-index: 3; width: auto; max-width: none; margin: 0; padding: 0; }
  .motion-toggle summary { padding: 0 16px; border-radius: 22px; background: var(--pd-chip); border: 1px solid var(--pd-chip-line); color: var(--pd-band-ink); font-size: 14px; text-decoration: none; }
}
@media (min-width: 1024px) and (max-width: 1279px), (min-width: 768px) and (max-width: 1279px) and (orientation: landscape) {
  .hero-copy { max-width: 520px; }
  .hero h1 { font-size: 54px; }
}
/* 768 to 1023px in landscape (the open foldable): the copy column reaches
   past the side veil's reach into the rose glow, so the veil is laid twice
   (review cure, 2026-09-27: text links measured 4.15 and 4.32 to 1 there). */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .hero-veil { background: var(--pd-hero-veil), var(--pd-hero-veil); }
}

/* Short wide screens (the open foldable, landscape tablets, 1024 x 768,
   laptops up to 800px tall): a tighter copy block, so the copy ends above
   the horizon and the scene's shore and road are in the first view. */
@media (min-width: 768px) and (max-width: 1439px) and (max-height: 800px) and (orientation: landscape) {
  .hero-copy { max-width: 560px; padding-top: 92px; padding-bottom: 96px; }
  .hero h1 { font-size: 44px; }
  .hero-eyebrow { margin-bottom: 10px; }
  .hero-lede { margin: 14px 0 20px; font-size: 17px; }
  .hero-facts { margin-top: 12px; font-size: 14px; }
}

/* Actions: one solid button, at most one text link beside it. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.site .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border-radius: 6px; font: 600 17px/1.25 var(--font-sans); text-align: center; text-decoration: none; }
.site .btn-dark { background: var(--pd-press-on-dark); color: var(--pd-press-on-dark-label); }
.site .btn-light { background: var(--pd-press); color: var(--pd-press-label); }
/* The note under a solid booking button: the new tab, said in words. It
   takes its own row in the actions, under the button and its text link, and
   on a phone straight under the full-width button. */
.site .actions .btn-note { flex: 0 0 100%; max-width: none; order: 3; margin: -4px 0 0; color: var(--pd-band-ink-muted); font-size: 14px; line-height: 1.4; }
.hero .btn::after { content: ""; position: absolute; inset: 0; background: var(--pd-sheen); transform: translateX(-110%); animation: k-sheen 7.5s cubic-bezier(0.45, 0, 0.55, 1) 2.5s infinite; pointer-events: none; }
@keyframes k-sheen { 0%, 72% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
.site .text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.site .text-link-dark { color: var(--pd-press-on-dark); }
.site .text-link-light { color: var(--pd-press-ink); }
/* Short phones and the folded foldable (466 x 678): a slightly lower scene
   band, one step down for the headline and tighter spacing in the stacked
   hero, so the solid button stays in the first view under the longest of
   the ten headlines (System-Spec 10: the button above the fold at every
   size 600 px tall or more). */
@media (max-width: 639px) and (max-height: 760px) {
  .hero-art { aspect-ratio: 900 / 480; }
  .hero-copy { padding-top: 16px; }
  .hero-eyebrow { margin-bottom: 10px; }
  .hero h1 { font-size: 36px; }
  .hero-lede { margin: 14px 0 20px; }
}
@media (max-width: 639px) {
  .hero .btn { width: 100%; }
  .site .actions .btn-note { order: 1; }
  .site .actions .text-link { order: 2; }
  /* The page's own title is the h1 right below; keep the trail to one line. */
  .crumbs li[aria-current="page"] { display: none; }
}

/* Sections */
.section { padding: 64px 0; }
.section-alt { background: var(--pd-ground-alt); }
.section h2, .band-title { margin: 0 0 18px; font: 400 clamp(30px, 1.1vw + 25px, 40px)/1.12 var(--font-serif); letter-spacing: -0.005em; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.lede { max-width: 34em; color: var(--pd-ink-muted); font-size: 18px; line-height: 1.55; }
.plain { max-width: 34em; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; }
}
@media (min-width: 1024px) {
  .section { padding: 96px 0; }
}

/* Vignettes: fixed 3:2 boxes, so nothing shifts as they arrive. */
.vignette { margin: 0; width: 100%; max-width: 520px; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: var(--pd-hero); }
.vignette svg { width: 100%; height: 100%; }
/* Generated scroll clips (RECIPE.md 6.2): the video fills the box and holds
   its last frame; under reduced motion the final-frame still takes its
   place and the video, which has no source there, is not shown. */
.clip-video, .clip-still { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip-still { display: none; }
.clip-video::-webkit-media-controls { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .clip-video { display: none; }
  .clip-still { display: block; }
}

/* The worksheet sample card (Direction C): the whole card opens the
   worksheet; its steps are numbered as on the sheet. */
.featured { align-items: center; }
.site .sample-card { display: block; margin: 0; padding: 26px 28px 22px; background: var(--pd-card); border-radius: 16px; box-shadow: var(--pd-card-shadow); color: var(--pd-ink); text-decoration: none; }
.sc-label { margin: 0 0 6px; color: var(--pd-ink-muted); font: 500 13px/1.4 var(--font-sans); }
.sc-list { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.sc-list li { counter-increment: step; display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--pd-hairline); font-size: 16px; line-height: 1.5; }
.sc-list li::before { content: counter(step); flex: none; min-width: 1.2em; color: var(--pd-ink-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-open { margin: 12px 0 0; padding-top: 14px; border-top: 1px solid var(--pd-hairline); color: var(--pd-press-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.site .sample-card:hover .sc-open { text-decoration-thickness: 2px; }

/* Guides and questions on the home page. */
.hub-list, .article-list, .plain-list, .reading-path { list-style: none; margin: 0; padding: 0; }
.hub { padding: 20px 0 8px; border-top: 1px solid var(--pd-hairline); }
.hub h3 { margin: 0 0 2px; font: 600 22px/1.3 var(--font-sans); }
.site .hub h3 a { color: var(--pd-ink); text-decoration: none; }
.site .hub h3 a:hover { text-decoration: underline; }
.hub-dek { color: var(--pd-ink-muted); }
.article-list li, .reading-path li, .plain-list li { padding: 6px 0 12px; border-top: 1px solid var(--pd-hairline); }
.article-list a, .reading-path a, .plain-list a { font-weight: 600; font-size: 18px; }
/* Standalone links in lists and hub headings are 44px targets (System-Spec 7.3). */
.site .hub h3 a, .site .hub h2 a, .site .article-list a, .site .reading-path a, .site .plain-list a { display: inline-flex; align-items: center; min-height: 44px; }
.article-list p, .reading-path p, .plain-list p { margin: 0; color: var(--pd-ink-muted); }
.qa-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 48px; margin-bottom: 16px; }
.qa h3 { margin: 24px 0 8px; font: 600 19px/1.35 var(--font-sans); }
@media (min-width: 900px) { .qa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Inner pages */
.page-head { padding-top: 32px; padding-bottom: 8px; }
.page-head h1 { margin: 0 0 16px; max-width: 18em; font: 400 clamp(36px, 2.1vw + 28px, 56px)/1.1 var(--font-serif); letter-spacing: -0.008em; text-wrap: balance; }
.page-head .dek { max-width: 34em; color: var(--pd-ink-muted); font-size: clamp(18px, 0.4vw + 16.5px, 20px); line-height: 1.5; }
.byline, .dateline, .print-note { color: var(--pd-ink-muted); font-size: 15px; }
.byline p { margin: 0 0 4px; }
.byline { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pd-hairline); max-width: 680px; }
.page-body { padding-top: 16px; }
.page .prose { padding-bottom: 8px; }
.prose { max-width: 680px; }
/* A source cited by its full address wraps inside the column on a phone
   instead of pushing the page sideways. */
.prose a { overflow-wrap: anywhere; }
.prose p, .prose li { font-size: 17px; line-height: 1.7; }
.prose h2 { margin: 44px 0 14px; font: 400 clamp(26px, 0.6vw + 22px, 32px)/1.2 var(--font-serif); }
.prose h3 { margin: 28px 0 8px; font: 600 20px/1.35 var(--font-sans); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 6px 0; }
.prose .vignette { margin: 40px 0; }
.qa { padding-bottom: 8px; border-bottom: 1px solid var(--pd-hairline); }
.page-questions .qa h2 { font: 600 21px/1.35 var(--font-sans); margin: 32px 0 10px; }
.end-block { max-width: 680px; margin: 48px 0 72px; padding: 24px 26px; background: var(--pd-ground-alt); border-radius: 12px; }
.end-block .actions { margin-top: 16px; }
@media (min-width: 1024px) {
  .prose p, .prose li { font-size: 18px; }
  .page-head { padding-top: 48px; }
}

/* Tables: numbers in real tables; a wide one scrolls inside its own box. */
.table-scroll { margin: 24px 0; overflow-x: auto; border: 1px solid var(--pd-hairline); border-radius: 10px; background: var(--pd-card); }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.table-scroll th, .table-scroll td { padding: 10px 14px; border-bottom: 1px solid var(--pd-hairline); text-align: left; vertical-align: top; }
.table-scroll th { background: var(--pd-ground-alt); font-weight: 600; }
.table-scroll tr:last-child td { border-bottom: 0; }
.table-scroll td.num { text-align: right; white-space: nowrap; }

/* A worksheet: boxes to tick, lines to fill. */
.sheet ul { list-style: none; padding-left: 0; }
.sheet ul li { position: relative; padding-left: 32px; }
.sheet ul li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 16px; height: 16px; border: 1.5px solid var(--pd-boundary); border-radius: 3px; }

/* The plum closing band. */
.band { padding: 64px 0; background: var(--pd-band); color: var(--pd-band-ink); }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.band-copy p { max-width: 32em; font-size: 17px; line-height: 1.6; }
.band .actions { margin-top: 8px; }
/* On narrow screens the booking clip comes before the band's words, so the
   last thing above the footer is the call to action, not a moving picture
   (review cure, 2026-09-27). */
@media (max-width: 899px) { .band-grid > .vignette { order: -1; } }
@media (min-width: 900px) {
  .band-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; }
  .band-grid.band-solo { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) { .band { padding: 96px 0; } }

/* Footer, on blush. */
.site-footer { padding: 24px 0 28px; background: var(--pd-ground-alt); color: var(--pd-ink-muted); font-size: 15px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px; }
.footer-row p { margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; column-gap: 20px; }
.site .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pd-press-ink); }

/* Print: the sheet only, ink on white. */
@media print {
  .site-header, .site-footer, .band, .crumbs, .end-block, .skip, .draft-strip, .vignette, .hero-art, .motion-toggle, .sprite { display: none !important; }
  body.site { background: var(--pd-card); color: var(--pd-ink); }
  .prose { max-width: none; }
  .table-scroll { overflow: visible; border-color: var(--pd-boundary); }
  .site a { color: var(--pd-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .btn::after { animation: none; display: none; }
}

/* Art color classes: pictures only (--art-* from @heirloom/design/public-dusk). */
.f-sky0 { fill: var(--art-sky-0); } .s-sky0 { stroke: var(--art-sky-0); fill: none; } .c-sky0 { stop-color: var(--art-sky-0); }
.f-sky1 { fill: var(--art-sky-1); } .s-sky1 { stroke: var(--art-sky-1); fill: none; } .c-sky1 { stop-color: var(--art-sky-1); }
.f-sky2 { fill: var(--art-sky-2); } .s-sky2 { stroke: var(--art-sky-2); fill: none; } .c-sky2 { stop-color: var(--art-sky-2); }
.f-sky3 { fill: var(--art-sky-3); } .s-sky3 { stroke: var(--art-sky-3); fill: none; } .c-sky3 { stop-color: var(--art-sky-3); }
.f-sky4 { fill: var(--art-sky-4); } .s-sky4 { stroke: var(--art-sky-4); fill: none; } .c-sky4 { stop-color: var(--art-sky-4); }
.f-sky5 { fill: var(--art-sky-5); } .s-sky5 { stroke: var(--art-sky-5); fill: none; } .c-sky5 { stop-color: var(--art-sky-5); }
.f-sky6 { fill: var(--art-sky-6); } .s-sky6 { stroke: var(--art-sky-6); fill: none; } .c-sky6 { stop-color: var(--art-sky-6); }
.f-sky7 { fill: var(--art-sky-7); } .s-sky7 { stroke: var(--art-sky-7); fill: none; } .c-sky7 { stop-color: var(--art-sky-7); }
.f-sky8 { fill: var(--art-sky-8); } .s-sky8 { stroke: var(--art-sky-8); fill: none; } .c-sky8 { stop-color: var(--art-sky-8); }
.f-sky9 { fill: var(--art-sky-9); } .s-sky9 { stroke: var(--art-sky-9); fill: none; } .c-sky9 { stop-color: var(--art-sky-9); }
.f-glow { fill: var(--art-glow); } .s-glow { stroke: var(--art-glow); fill: none; } .c-glow { stop-color: var(--art-glow); }
.f-rose { fill: var(--art-rose); } .s-rose { stroke: var(--art-rose); fill: none; } .c-rose { stop-color: var(--art-rose); }
.f-blush { fill: var(--art-blush); } .s-blush { stroke: var(--art-blush); fill: none; } .c-blush { stop-color: var(--art-blush); }
.f-periwinkle { fill: var(--art-periwinkle); } .s-periwinkle { stroke: var(--art-periwinkle); fill: none; } .c-periwinkle { stop-color: var(--art-periwinkle); }
.f-lamp { fill: var(--art-lamp); } .s-lamp { stroke: var(--art-lamp); fill: none; } .c-lamp { stop-color: var(--art-lamp); }
.f-star { fill: var(--art-star); } .s-star { stroke: var(--art-star); fill: none; } .c-star { stop-color: var(--art-star); }
.f-ridge { fill: var(--art-ridge); } .s-ridge { stroke: var(--art-ridge); fill: none; } .c-ridge { stop-color: var(--art-ridge); }
.f-hill { fill: var(--art-hill); } .s-hill { stroke: var(--art-hill); fill: none; } .c-hill { stop-color: var(--art-hill); }
.f-tree { fill: var(--art-tree); } .s-tree { stroke: var(--art-tree); fill: none; } .c-tree { stop-color: var(--art-tree); }
.f-ground { fill: var(--art-ground); } .s-ground { stroke: var(--art-ground); fill: none; } .c-ground { stop-color: var(--art-ground); }
.f-ground-line { fill: var(--art-ground-line); } .s-ground-line { stroke: var(--art-ground-line); fill: none; } .c-ground-line { stop-color: var(--art-ground-line); }
.f-mound { fill: var(--art-mound); } .s-mound { stroke: var(--art-mound); fill: none; } .c-mound { stop-color: var(--art-mound); }
.f-post { fill: var(--art-post); } .s-post { stroke: var(--art-post); fill: none; } .c-post { stop-color: var(--art-post); }
.f-roof { fill: var(--art-roof); } .s-roof { stroke: var(--art-roof); fill: none; } .c-roof { stop-color: var(--art-roof); }
.f-wall { fill: var(--art-wall); } .s-wall { stroke: var(--art-wall); fill: none; } .c-wall { stop-color: var(--art-wall); }
.f-near { fill: var(--art-near); } .s-near { stroke: var(--art-near); fill: none; } .c-near { stop-color: var(--art-near); }
.f-deep { fill: var(--art-deep); } .s-deep { stroke: var(--art-deep); fill: none; } .c-deep { stop-color: var(--art-deep); }
.f-glass { fill: var(--art-glass); } .s-glass { stroke: var(--art-glass); fill: none; } .c-glass { stop-color: var(--art-glass); }
.f-wine { fill: var(--art-wine); } .s-wine { stroke: var(--art-wine); fill: none; } .c-wine { stop-color: var(--art-wine); }
.f-gold { fill: var(--art-gold); } .s-gold { stroke: var(--art-gold); fill: none; } .c-gold { stop-color: var(--art-gold); }
.f-brass { fill: var(--art-brass); } .s-brass { stroke: var(--art-brass); fill: none; } .c-brass { stop-color: var(--art-brass); }
.f-shade { fill: var(--art-shade); } .s-shade { stroke: var(--art-shade); fill: none; } .c-shade { stop-color: var(--art-shade); }
@property --seen { syntax: '<integer>'; inherits: true; initial-value: 1; }
@keyframes k-seen { from { --seen: 0; } to { --seen: 1; } }
.hero:has(.motion-toggle[open]) .hero-art *, .hero:has(.motion-toggle[open]) .btn::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-art, .hero-art *, .vignette, .vignette * { animation: none !important; transition: none !important; }
  .motion-toggle { display: none; }
}
@media print {
  .hero-art, .vignette, .motion-toggle { display: none !important; }
}
@keyframes k-lb-w1 { 0% { transform: translate(-75px, -4.2px); opacity: 0; } 6% { transform: translate(-66px, -3.7px); opacity: 1; } 94% { transform: translate(66px, 3.7px); opacity: 1; } 100% { transform: translate(75px, 4.2px); opacity: 0; } }
.hero-lb .lb-w1 { animation: k-lb-w1 30s linear -15s infinite normal both; }
@keyframes k-lb-w2 { 0% { transform: translate(-75px, -4.2px); opacity: 0; } 6% { transform: translate(-66px, -3.7px); opacity: 1; } 94% { transform: translate(66px, 3.7px); opacity: 1; } 100% { transform: translate(75px, 4.2px); opacity: 0; } }
.hero-lb .lb-w2 { animation: k-lb-w2 30s linear -5s infinite normal both; }
@keyframes k-lb-w3 { 0% { transform: translate(-78px, -4.4px); opacity: 0; } 6% { transform: translate(-68.6px, -3.8px); opacity: 1; } 94% { transform: translate(68.6px, 3.8px); opacity: 1; } 100% { transform: translate(78px, 4.4px); opacity: 0; } }
.hero-lb .lb-w3 { animation: k-lb-w3 30s linear -25s infinite normal both; }
@keyframes k-lb-halo { 0% { opacity: 0.9; } 50% { opacity: 1; } 100% { opacity: 0.9; } }
.hero-lb .lb-halo { animation: k-lb-halo 7.5s cubic-bezier(0.45, 0, 0.55, 1) -2s infinite normal both; }
@keyframes k-lb-gl1 { 0% { opacity: 0.55; } 50% { opacity: 1; } 100% { opacity: 0.55; } }
.hero-lb .lb-gl1 { animation: k-lb-gl1 5s cubic-bezier(0.45, 0, 0.55, 1) 0s infinite normal both; }
@keyframes k-lb-gl2 { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
.hero-lb .lb-gl2 { animation: k-lb-gl2 7.5s cubic-bezier(0.45, 0, 0.55, 1) -3s infinite normal both; }
@keyframes k-lb-gl3 { 0% { opacity: 0.45; } 50% { opacity: 1; } 100% { opacity: 0.45; } }
.hero-lb .lb-gl3 { animation: k-lb-gl3 5s cubic-bezier(0.45, 0, 0.55, 1) -2.5s infinite normal both; }
@keyframes k-lb-gl4 { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }
.hero-lb .lb-gl4 { animation: k-lb-gl4 7.5s cubic-bezier(0.45, 0, 0.55, 1) -6s infinite normal both; }
@keyframes k-lb-tw1 { 0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; } }
.hero-lb .lb-tw1 { animation: k-lb-tw1 5s cubic-bezier(0.45, 0, 0.55, 1) -1s infinite normal both; }
@keyframes k-lb-tw2 { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
.hero-lb .lb-tw2 { animation: k-lb-tw2 6s cubic-bezier(0.45, 0, 0.55, 1) -4s infinite normal both; }
@keyframes k-lb-tw3 { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
.hero-lb .lb-tw3 { animation: k-lb-tw3 10s cubic-bezier(0.45, 0, 0.55, 1) -7s infinite normal both; }
@keyframes k-lb-tw4 { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
.hero-lb .lb-tw4 { animation: k-lb-tw4 5s cubic-bezier(0.45, 0, 0.55, 1) -3s infinite normal both; }
@keyframes k-lb-tw5 { 0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; } }
.hero-lb .lb-tw5 { animation: k-lb-tw5 6s cubic-bezier(0.45, 0, 0.55, 1) -1.5s infinite normal both; }
@keyframes k-lb-tw6 { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
.hero-lb .lb-tw6 { animation: k-lb-tw6 10s cubic-bezier(0.45, 0, 0.55, 1) -2s infinite normal both; }