/* Hallmark · shape: Feature Stack · genre: editorial · theme: brand · redesign: full · draw: e2b816 · job: book (a free demo on location)
 * paper: oklch(97% 0.012 96) · accent: oklch(85% 0.17 96) · display: Kanit 800 caps · body: Kanit 300 · hero: Stage · nav: slab · footer: statement · signature: the display's own screen, built with the collection on it
 * axes: light/display-heavy/chromatic-yellow · posture: committed (the yellow field carries the demo request) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: S, a touchscreen could be anyone's; the screens show the four uses the old page named and one in another house style */
/* Hallmark · swap: hero Counter to Stage · the action is a demo visit, not a time to pick; the mail block closes the page instead */
/* Hallmark · swap: draw's menu Switcher and free times to the feature stack and rows · a display has no menu or times; its screens and its five reasons are the content */
/* Hallmark · dropped ../unpkg.com/vue@2.7.16/dist/vue.js, ../unpkg.com/buefy@3.1.0/dist/buefy.min.js · both paths were dead, the rotating word is now the full list in the lead */
/* Hallmark · dropped csrfmiddlewaretoken, form_plugin_id, language, #id_language, #id_form_plugin_id · the Django CMS backend they fed is gone; the page now closes on a mail link */
/* Hallmark · dropped emailfield_1, textfield_1 · the owner chose a plain mail link over a form; the address, a prefilled subject and a copy button carry the contact */
/* Hallmark · dropped cms-form · the form itself is gone at the owner's request, mail replaces it */
@import url("./fonts.css");
@import url("./tokens.css");
@import url("./base.css");

/* Page */
h1, h2 { text-transform: uppercase; line-height: 1.02; }
h3 { font-weight: 500; }
strong, b, dt { font-weight: 500; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); 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: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

.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-accent); color: var(--color-accent-ink); }
.skip:focus-visible { top: var(--space-md); }

/* Nav: an ink slab, the white logo as it was drawn */
.slab { background: var(--color-ink); color: var(--color-paper); }
.slab__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 80px; }
.slab__logo { display: block; flex-shrink: 0; }
.slab__logo img { width: 132px; height: auto; }
.slab__logo:focus-visible, .slab__links a:focus-visible { outline-color: var(--color-accent); }
.slab__links { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.slab__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-paper); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.slab__links a:hover { color: var(--color-accent); }
.slab__links a:active { color: var(--color-paper-3); }
.slab__links .slab__act { color: var(--color-accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
@media (max-width: 40rem) { .slab__links li:not(:last-child) { display: none; } }

/* Hero: Stage, text on five, the screen on seven */
.hero { padding-block: var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: calc(100svh - 80px - 2 * var(--space-2xl)); }
.hero h1 { font-size: clamp(3rem, 6vw + 0.5rem, 6rem); max-width: 8ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 30ch; color: var(--color-ink-2); }
.hero__act { margin-top: var(--space-xl); }
@media (max-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; } }

/* The display's screen, built: a product sample the owner's capture replaces */
.screen { margin: 0; border-radius: var(--radius-card); background: var(--color-screen); color: var(--color-screen-ink); aspect-ratio: 4 / 3; min-height: 440px; padding: var(--space-lg); display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--space-md); }
.screen__bar { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-screen-2); color: var(--color-screen-muted); font-size: var(--text-md); }
.screen__bar svg { width: 20px; height: 20px; flex-shrink: 0; }
.screen__bar b { color: var(--color-screen-ink); font-weight: 300; }
.screen__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.screen__chips li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-screen-2); }
.screen__chips .is-on { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 500; }
.screen__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; min-height: 0; }
.screen__grid li { position: relative; overflow: hidden; border-radius: var(--space-2xs); background: var(--color-screen-2); min-height: 0; }
.screen__grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen__grid span { position: absolute; left: var(--space-xs); bottom: var(--space-xs); z-index: var(--z-raised); padding: var(--space-3xs) var(--space-xs); border-radius: var(--space-2xs); background: var(--color-screen); color: var(--color-screen-ink); font-size: var(--text-xs); }
.screen__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.screen--brand { --color-accent: var(--color-sample-brand); --color-accent-ink: var(--color-sample-brand-ink); }
.screen__mark { font: 800 var(--text-lg)/1 var(--font-display); text-transform: uppercase; color: var(--color-sample-brand); }
@media (max-width: 40rem) { .screen { aspect-ratio: auto; min-height: 0; padding: var(--space-md); } .screen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; } .screen__grid li:nth-child(n + 5) { display: none; } }

/* Feature stack: the paragraph pinned, three screens scroll past */
.stack { padding-block: var(--section-gap); border-top: 1px solid var(--color-rule); }
.stack__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); }
.stack__pane { position: sticky; top: var(--space-xl); align-self: start; z-index: var(--z-sticky); }
.stack__pane p { margin-top: var(--space-lg); max-width: 48ch; color: var(--color-ink-2); }
.stack__scroll { display: grid; gap: var(--space-3xl); }
.stack__scroll figure { margin: 0; }
.stack__scroll figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.stack__scroll figcaption b { color: var(--color-ink); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .stack__scroll figure { animation: fig-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes fig-in { from { opacity: 0.3; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  }
}
@media (max-width: 60rem) { .stack__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .stack__pane { position: static; } }

/* Rows: the five reasons, kept as written */
.reasons { padding-block: var(--section-gap-l) var(--section-gap); background: var(--color-paper-2); }
.reasons h2 { max-width: 16ch; }
.reasons__list { margin: var(--space-2xl) 0 0; padding: 0; }
.reasons__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.reasons__row:last-child { border-bottom: 1px solid var(--color-rule); }
.reasons__row dt { font-size: var(--text-title); line-height: 1.2; }
.reasons__row dd { margin: 0; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 40ch; }
@media (max-width: 40rem) { .reasons__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } }

/* The room, full bleed, the owner's own photograph */
.room { margin: 0; aspect-ratio: 12 / 5; max-height: 800px; width: 100%; }
.room > img { object-position: 50% 45%; }
@media (max-width: 40rem) { .room { aspect-ratio: 4 / 3; } }

/* Questions: the head on four columns, the answers on eight */
.faq { padding-block: var(--section-gap); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.faq h2 { max-width: 10ch; }
.faq__list { margin: 0; }
.faq__list div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.faq__list div:last-child { border-bottom: 1px solid var(--color-rule); }
.faq__list dt { font-size: var(--text-lg); line-height: 1.3; }
.faq__list dd { margin: 0; color: var(--color-ink-2); max-width: 52ch; }
@media (max-width: 60rem) { .faq__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } }
@media (max-width: 40rem) { .faq__list div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } }

/* Contact: the yellow field, the demo request */
.contact { padding-block: var(--section-gap); background: var(--color-field); color: var(--color-accent-ink); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; }
.contact .lead { margin-top: var(--space-lg); max-width: 34ch; }
.contact__grid { align-items: end; }
.mail { display: grid; gap: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); }
.mail__label { font-size: var(--text-sm); font-weight: 500; }
.mail__addr { display: block; margin-top: calc(-1 * var(--space-sm)); font: 500 clamp(1.375rem, 1.6vw + 0.75rem, 2.25rem)/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--color-accent-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; overflow-wrap: break-word; min-width: 0; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.mail__addr:hover { text-decoration-color: transparent; }
.mail__addr:active { color: var(--color-ink-2); }
.mail__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--quiet:hover { background: color-mix(in oklab, var(--color-ink) 8%, transparent); }
.mail__status { min-height: 1lh; font-size: var(--text-sm); }
.mail__status:empty { display: none; }
.mail__list { display: grid; gap: var(--space-2xs); margin: var(--space-xs) 0 0; }
.mail__list dt { font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-2xs); }
.mail__list dd { margin: 0; padding-left: var(--space-md); position: relative; }
.mail__list dd::before { content: ""; position: absolute; left: 0; top: 0.75em; width: var(--space-xs); height: 1px; background: var(--color-ink); }
@media (max-width: 60rem) { .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: start; } }

/* Footer: one closing sentence, the links, the legal line */
.foot { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-ink); color: var(--color-paper); }
.foot__line { max-width: 18ch; font: 800 var(--text-section)/1.02 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); text-wrap: balance; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: var(--space-2xl) 0 0; padding: var(--space-lg) 0 0; border-top: 1px solid var(--color-ink-2); list-style: none; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-paper); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.foot__links a:hover { color: var(--color-accent); }
.foot__links a:focus-visible { outline-color: var(--color-accent); }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-paper-3); }
.foot__legal a { color: var(--color-paper-3); }
.foot__legal a:focus-visible { outline-color: var(--color-accent); }
.foot__legal p { max-width: 72ch; }
.foot__credits { font-size: var(--text-xs); color: var(--color-muted-on-ink); }