/* Public shell (task 4): C "light and line" tokens, document shell, hero and service tiers.
   Every value traces to DESIGN.md. Component skins for gallery, monthly and contact
   (tasks 5-7) build on the shared primitives defined here: section frame, button, figure.
   De-AI pass (2026-10-25): neutral porcelain paper (the photos' own white satin and lace), one
   treatment per section instead of one stamped frame, open photo layouts instead of card boxes. */
:root {
  --paper: #f4f3f0;
  --paper-raised: #fcfcfa;
  --ink: #171614;
  --ink-muted: #514d48;
  --line: #d6d3cd;
  --line-strong: #b4afa7;
  --copper: #8a513b;
  --copper-hover: #70402f;
  --magnetic-stage: #181715;
  --stage-ink: #f7f2ea;
  --stage-muted: #c9beb2;
  --focus: #1d5f8a;
  --danger: #9b2f2f;
  --success: #32623d;
  --sans: "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --serif: "Noto Serif KR", "Batang", serif;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --step-3: clamp(2.25rem, 1.6rem + 2.4vw, 4rem);
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7.5rem;
  --radius-s: 0.375rem;
  --radius-m: 0.75rem;
  --content-max: 76rem;
  --text-max: 42rem;
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-draw: 480ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Layout aliases (DESIGN.md 4): outer margin and grid gutter. */
  --page-gutter: var(--space-5);
  --grid-gap: var(--space-4);
  --target-min: 2.75rem;
  /* Full-bleed bands keep their content on the same column as the constrained sections. */
  --bleed-inline: max(var(--page-gutter), calc((100% - var(--content-max)) / 2));
}
@media (max-width: 30rem) {
  :root { --page-gutter: var(--space-3); --grid-gap: var(--space-3); }
}

/* ---------- Base ---------- */
html { background: var(--paper); scroll-padding-top: var(--space-3); }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--step-0); line-height: 1.65; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; margin: 0; }
h1 { font-size: var(--step-3); line-height: 1.16; letter-spacing: -0.02em; }
h2 { font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.015em; }
h3 { font-size: var(--step-1); line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }
p, figure, dl, dd { margin: 0; }
a { color: var(--copper); text-underline-offset: 0.2em; transition: color var(--motion-fast) var(--ease-out); }
a:hover { color: var(--copper-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
img, video { display: block; }
.skip-link { z-index: 2; padding: var(--space-1) var(--space-3); background: var(--paper-raised); color: var(--ink); border: 1px solid var(--ink-muted); border-radius: var(--radius-s); }
::selection { background: color-mix(in srgb, var(--copper) 22%, var(--paper-raised)); color: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Button primitive ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); padding: 0 var(--space-3); border: 1px solid var(--ink-muted); border-radius: var(--radius-s); background: var(--paper-raised); color: var(--ink); font: inherit; font-size: var(--step-0); font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
.button:hover { background: var(--paper); color: var(--copper-hover); }
.button:active { background: var(--line); }
.button--primary { background: var(--copper); border-color: var(--copper); color: var(--paper-raised); }
.button--primary:hover { background: var(--copper-hover); border-color: var(--copper-hover); color: var(--paper-raised); }
.button--primary:active { background: var(--copper-hover); }
.button--compact { min-height: var(--target-min); padding: 0 var(--space-2); font-size: var(--step--1); }
.button[disabled], .button[aria-disabled="true"] { cursor: not-allowed; color: var(--ink-muted); background: var(--paper); }

/* ---------- CTA link, text link, text button (cta-human pass, DESIGN.md 5) ----------
   A call to action is a short text link, not a filled box: a resting hairline under the words, a
   2px line that draws from the left on hover or focus, and an arrow that nudges right. The hit area
   is padded to 44px; nothing visible grows. Secondary paths are plain underlined links, and utility
   actions (copy, dialog steps, close, pause) are text buttons. Colours come from three variables so
   the dark stages (hero, magnet band, header) reuse the same primitive. */
.cta-link {
  --cta-ink: var(--ink);
  --cta-base: var(--line-strong);
  --cta-draw: var(--copper);
  --cta-arrow: var(--copper);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--target-min);
  padding-block: var(--space-1);
  box-sizing: border-box;
  color: var(--cta-ink);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.cta-link::before, .cta-link::after { content: ""; position: absolute; inset-inline: 0; bottom: 0.3rem; height: 1px; background: var(--cta-base); pointer-events: none; }
.cta-link::after { height: 2px; bottom: calc(0.3rem - 0.5px); background: var(--cta-draw); transform: scaleX(0); transform-origin: left center; transition: transform var(--motion-draw) var(--ease-out); }
.cta-link:hover, .cta-link:focus-visible { color: var(--cta-ink); }
.cta-link:hover::after, .cta-link:focus-visible::after { transform: scaleX(1); }
.cta-link__arrow { display: inline-block; color: var(--cta-arrow); transition: transform var(--motion-base) var(--ease-out); }
.cta-link:hover .cta-link__arrow, .cta-link:focus-visible .cta-link__arrow { transform: translateX(0.375rem); }
.cta-link:active::after { transform: scaleX(1); background: var(--cta-ink); }
.cta-link--small { font-size: var(--step-0); }
.cta-link--hero { --cta-ink: var(--stage-ink); --cta-base: color-mix(in srgb, var(--stage-ink) 35%, transparent); --cta-draw: var(--hero-gold, var(--stage-ink)); --cta-arrow: var(--hero-gold, var(--stage-ink)); padding-block: var(--space-1) var(--space-2); }
.text-link { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; transition: text-decoration-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
.text-link:hover { color: var(--copper-hover); text-decoration-color: currentColor; }
.text-button {
  --text-button-ink: var(--ink);
  --text-button-line: var(--line-strong);
  --text-button-hover: var(--copper-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-height: var(--target-min);
  min-inline-size: var(--target-min);
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  color: var(--text-button-ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-button-line);
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition: text-decoration-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.text-button:hover { color: var(--text-button-hover); text-decoration-color: currentColor; }
.text-button:active { color: var(--text-button-ink); }
.text-button[disabled] { cursor: not-allowed; color: var(--ink-muted); text-decoration: none; }
.text-button__glyph { font-weight: 400; }
.contact-actions { display: grid; justify-items: start; gap: var(--space-1); }

/* ---------- Document shell ---------- */
.site-header, main > section, .site-footer { width: min(100% - 2 * var(--page-gutter), var(--content-max)); margin-inline: auto; box-sizing: border-box; }
/* Header (owner mockup B): the dark stage of the hero continues into the header, so the poster and the
   bar read as one; the brand is the VELYVELY NAIL wordmark, calling is a quiet text link. */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--stage-ink) 14%, transparent); }
.site-header { width: 100%; padding-inline: var(--bleed-inline); background: var(--magnetic-stage); color: var(--stage-ink); }
.site-header :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--paper-raised); }
.site-header__bar { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; }
.site-header__brand { margin-right: auto; color: var(--stage-ink); text-decoration: none; white-space: nowrap; }
.site-header__wordmark { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.24em; }
.site-header__wordmark-accent { color: var(--hero-gold, var(--stage-muted)); }
.site-header__brand:hover { color: var(--stage-ink); }
.site-header__call { --text-button-ink: var(--stage-ink); justify-content: center; min-inline-size: var(--target-min); gap: 0.3em; white-space: nowrap; color: var(--stage-ink); text-decoration-color: color-mix(in srgb, var(--stage-ink) 40%, transparent); }
.site-header__call:hover { color: var(--hero-gold, var(--stage-muted)); }
.site-header__menu { --text-button-ink: var(--stage-ink); --text-button-line: color-mix(in srgb, var(--stage-ink) 40%, transparent); --text-button-hover: var(--stage-muted); font-size: var(--step-0); white-space: nowrap; }
/* Even 8px padding keeps every link >= 44px wide; the zero column gap keeps the 16px text rhythm in every row layout. */
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) 0; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); min-inline-size: var(--target-min); padding-inline: var(--space-1); box-sizing: border-box; color: var(--stage-ink); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--stage-muted); text-decoration: underline; }
@media (min-width: 64rem) {
  .site-header { display: grid; grid-template-columns: auto 1fr auto; }
  .site-header__bar { display: contents; }
  .site-header__brand { grid-column: 1; grid-row: 1; }
  .site-nav { grid-column: 2; grid-row: 1; justify-self: end; }
  .site-header__call { grid-column: 3; grid-row: 1; }
}
@media (max-width: 63.99rem) {
  .js .site-header__menu { display: inline-flex; }
  .js .site-header:not([data-nav-open]) .site-nav { display: none; }
  .js .site-nav { flex: 1 1 100%; }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav a { justify-content: flex-start; padding-inline: 0; }
  .js .site-nav li + li { border-top: 1px solid color-mix(in srgb, var(--stage-ink) 14%, transparent); }
}
@media (min-width: 64rem) { .site-header__menu { display: none !important; } }
@media (max-width: 30rem) { .site-header__phone { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

main > section { padding-block: var(--space-7); }
main > section > h2 { max-width: var(--text-max); margin-bottom: var(--space-5); }
/* Bands: a section that runs edge to edge (magnet stage, monthly chapter) with content on the page column. */
main > section.monthly, main > section.monthly-video, main > section.service--magnet { width: 100%; padding-inline: var(--bleed-inline); }
/* Hero: hero-poster.css owns the whole hero (owner mockup B). */

/* ---------- Glance: one editorial statement, then a three-part ledger (no side heading) ---------- */
main > section.glance { padding-block: var(--space-5) var(--space-7); }
.glance > h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.glance__summary { max-width: 60rem; font-family: var(--serif); font-size: var(--step-2); line-height: 1.5; letter-spacing: -0.01em; }
.glance__facts { display: grid; gap: var(--space-1) var(--space-4); margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--ink); grid-template-columns: max-content 1fr; }
.glance__facts dt { font-size: var(--step--1); font-weight: 600; color: var(--ink-muted); padding-top: 0.1em; }
.glance__link { display: inline-flex; align-items: center; min-height: var(--target-min); }
/* Phones: one step down so a phrase such as "지하상가(23번 출구 95m)의" still fits one line at 320. */
@media (max-width: 30rem) { .glance__summary { font-size: var(--step-1); line-height: 1.6; } }
@media (min-width: 64rem) {
  .glance__facts { grid-auto-flow: column; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr 2fr; gap: var(--space-1) var(--grid-gap); }
  .glance__facts dt { padding-top: 0; }
}

/* ---------- Service feature: extension (light) then magnet (restricted stage) ---------- */
/* Extension is photo-led on the light page: one full silhouette at its natural proportions and three
   smaller works beside it (never forced square, nail tips stay whole). Magnet is a full-bleed dark band
   with a staggered texture column. The two never share one mirrored template. */
main > section.service { padding-block: var(--space-8) var(--space-7); }
.service { display: grid; gap: var(--space-5) var(--grid-gap); }
.service__text { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.service__text > h2 { font-size: var(--step-3); line-height: 1.16; letter-spacing: -0.02em; }
.service__description { max-width: var(--text-max); }
.service__prices { margin: var(--space-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.service__prices li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); padding-block: var(--space-1); border-bottom: 1px solid var(--line); }
.service__price { font-family: var(--serif); font-size: var(--step-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.service__works { font-size: var(--step--1); }
.service__media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; align-items: start; }
.service__media > li:first-child { grid-column: 1 / -1; }
/* Phone and tablet: the extension section opens on its photographs, then the words. */
@media (max-width: 63.99rem) { .service--extension .service__media { order: -1; } }
.service__media img, .service__media video { width: 100%; height: auto; border-radius: var(--radius-s); }
.service--extension .service__media img { object-fit: contain; }
.service--magnet .service__media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service--magnet .service__media > li:first-child { grid-column: auto; }
.service--magnet .service__media img { aspect-ratio: 1 / 1; object-fit: cover; }
/* The texture column steps down: every second photo starts lower, like prints laid on a table. */
.service--magnet .service__media > li:nth-child(even) { margin-block-start: var(--space-6); }
@media (min-width: 64rem) {
  .service { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  /* A large print with a contact strip of three beside it; 3.5:1 makes the strip (two squares and one
     3:4 portrait) about as tall as the large square print. */
  .service--extension .service__media { grid-column: 1 / 8; grid-row: 1; grid-template-columns: minmax(0, 3.5fr) minmax(0, 1fr); }
  .service--extension .service__media > li:first-child { grid-column: 1; grid-row: 1 / span 3; }
  .service--extension .service__text { grid-column: 8 / -1; padding: var(--space-5) 0 0 var(--space-5); }
  .service--magnet .service__text { grid-column: 1 / 6; padding-top: var(--space-5); }
  .service--magnet .service__media { grid-column: 7 / -1; grid-row: 1; }
}
/* The only dark surface besides the poster: a full-bleed stage for the magnetic material. */
main > section.service--magnet { background: var(--magnetic-stage); color: var(--stage-ink); padding-block: var(--space-8); }
.service--magnet h2 { color: var(--stage-ink); }
.service--magnet .service__works { color: var(--stage-muted); }
.service--magnet a:not(.button, .cta-link) { color: var(--stage-ink); }
.service--magnet a:not(.button, .cta-link):hover { color: var(--stage-muted); }
.service--magnet .cta-link { --cta-ink: var(--stage-ink); --cta-base: color-mix(in srgb, var(--stage-ink) 35%, transparent); --cta-draw: var(--stage-ink); --cta-arrow: var(--stage-ink); }
.service--magnet .text-link { color: var(--stage-ink); text-decoration-color: color-mix(in srgb, var(--stage-ink) 40%, transparent); }
.service--magnet .service__prices, .service--magnet .service__prices li { border-color: var(--ink-muted); }
.service--magnet .service__prices { border-top-color: var(--stage-muted); }
.service--magnet :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--paper-raised); }
@media (max-width: 30rem) { main > section.service--magnet { padding-block: var(--space-7); } main > section.service { padding-block: var(--space-7) var(--space-6); } }

/* ---------- Contact line: the one quiet inquiry path inside a service or the price section ---------- */
/* One arrow link (call) and one quiet link (text message); the label names the section's question. */
.contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); margin-top: var(--space-2); }
.contact-line__label { flex: 1 1 100%; font-size: var(--step--1); font-weight: 600; color: var(--ink-muted); }
.service--magnet .contact-line__label { color: var(--stage-muted); }

/* ---------- Story: a letter. Heading on the left, the owner's own words on the right, her name as the close ---------- */
main > section.story { padding-block: var(--space-8); }
.story > h2 { font-size: var(--step-3); line-height: 1.2; letter-spacing: -0.02em; }
.story > p { max-width: var(--text-max); margin-bottom: var(--space-3); }
.story > h2 + p { font-size: var(--step-1); line-height: 1.6; }
.story__signature { margin-top: var(--space-5); font-family: var(--serif); font-size: var(--step-2); line-height: 1.3; }
.story__meta { font-size: var(--step--1); color: var(--ink-muted); }
@media (min-width: 64rem) {
  .story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .story > h2 { grid-column: 1 / 7; grid-row: 1 / span 12; margin-bottom: 0; }
  .story > p { grid-column: 8 / -1; }
}
/* Reviews (task 8, de-AI pass): the review sentence is the statement; keywords are a ranked ledger, not tiles. */
main > section.reviews { padding-block: var(--space-7) var(--space-6); }
/* The sentence itself names the source, so the section heading stays for screen readers only. */
.reviews > h2, .monthly > h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reviews__summary { max-width: 52rem; font-family: var(--serif); font-size: var(--step-2); line-height: 1.45; }
.price__table caption { text-align: start; }
.reviews h3 { margin: var(--space-6) 0 var(--space-2); font-family: var(--sans); font-size: var(--step--1); font-weight: 600; color: var(--ink-muted); }
.reviews__highlights { display: grid; column-gap: var(--space-6); grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); }
.reviews__highlights li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: var(--target-min); border-bottom: 1px solid var(--line); }
.reviews__highlights .nb { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) { .reviews__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-footer { display: grid; gap: var(--space-1); padding-block: var(--space-6); border-top: 1px solid var(--ink); color: var(--ink-muted); font-size: var(--step--1); }
.site-footer__name { font-family: var(--serif); font-size: var(--step-1); color: var(--ink); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--target-min); }

/* ---------- Shared readable defaults for sibling sections (tasks 5-8 refine) ---------- */
.monthly__boards, .board__photos, .gallery__grid, .monthly-video__list, .visit__links, .board__conditions, .film-card__conditions, .reviews__highlights { list-style: none; margin: 0; padding: 0; }
.monthly__boards, .gallery__grid, .monthly-video__list { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.board, .gallery-card, .film-card { min-width: 0; }
.board__photos img, .gallery-card img, .film-card video { width: 100%; height: auto; border-radius: var(--radius-s); }
.board__photos img { aspect-ratio: 1 / 1; object-fit: cover; }
.gallery-card { display: flex; flex-direction: column; gap: var(--space-1); }
/* Multi-column cards are 188-220px wide at 768 and 1024: the tighter padding lets a 12-character title fit one line. */
.gallery-card__code { font-family: ui-monospace, monospace; font-size: var(--step--1); color: var(--ink-muted); }
/* Price (de-AI pass): a salon menu, not an admin grid. Every row is name, then price on the right, the note
   folded under the name; from 64rem the rows run in two columns. The column headers stay for screen readers
   (explicit table roles in price.html keep row/cell semantics when the display changes). */
.price__table { display: block; width: 100%; border-collapse: collapse; }
.price__table caption { display: block; margin-bottom: var(--space-2); font-size: var(--step--1); color: var(--ink-muted); }
.price__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.price__table tbody { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-6); border-top: 1px solid var(--ink); }
.price__table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--space-3); padding-block: var(--space-2); border-bottom: 1px solid var(--line); }
.price__table tbody th, .price__table tbody td { padding: 0; text-align: left; vertical-align: baseline; }
.price__table tbody th { font-weight: 500; }
.price__table tbody td:not(.price__note-cell) { font-family: var(--serif); font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
.price__table .price__note-cell { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ink-muted); }
.price__table .price__note-cell:empty { display: none; }
main > section.price { padding-block: var(--space-8) var(--space-7); }
.price__note { max-width: 24rem; color: var(--ink-muted); }
@media (min-width: 64rem) {
  .price { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .price > h2 { grid-column: 1 / 4; }
  .price > .price__note { grid-column: 1 / 4; grid-row: 2; }
  .price > .price__table, .price > .contact-line { grid-column: 5 / -1; }
  .price > .price__table { grid-row: 1 / span 3; }
  .price__table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* FAQ: question list beside its heading on wide screens. */
@media (min-width: 64rem) {
  .faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .faq > h2 { grid-column: 1 / 5; grid-row: 1 / span 20; }
  .faq > details { grid-column: 6 / -1; }
  .faq > details:first-of-type { border-top: 1px solid var(--ink); }
}
.faq details { border-bottom: 1px solid var(--line); padding: var(--space-2) 0; }
.faq summary { cursor: pointer; min-height: var(--target-min); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-weight: 500; }
/* display:flex drops the native marker; this chevron restores the open/closed cue (task 8). */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.5em; height: 0.5em; margin-inline-end: var(--space-1); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform var(--motion-fast) var(--ease-out); }
.faq summary:focus-visible { outline-offset: var(--space-1); }
.faq details[open] > summary::after { transform: translateY(0.15em) rotate(-135deg); }
.faq details > p { max-width: var(--text-max); padding-bottom: var(--space-2); color: var(--ink-muted); }
/* Visit: facts on the left; the page's one full contact block (number, channels, QR, links) on the right. */
main > section.visit { padding-block: var(--space-8); }
.visit__reach { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--ink); }
.visit__reach-title { font-family: var(--sans); font-size: var(--step--1); font-weight: 600; color: var(--ink-muted); }
.visit__phone { font-family: var(--serif); font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.02em; }
.visit__phone a { color: var(--ink); text-decoration-thickness: 1px; }
.visit__phone a:hover { color: var(--copper-hover); }
.visit__reach-note { color: var(--ink-muted); }
@media (min-width: 64rem) {
  .visit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .visit > h2, .visit > .visit__facts { grid-column: 1 / 7; }
  .visit > .visit__reach { grid-column: 8 / -1; grid-row: 1 / span 2; }
}
.visit__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); }
.visit__facts dt { grid-column: 1; font-weight: 600; color: var(--ink-muted); }
/* Every dd sits in the value column, so a term with several dd (directions) keeps later rows paired. */
.visit__facts dd { grid-column: 2; }
/* Phone and SMS links are standalone 44px controls; the block margin keeps adjacent targets apart. */
.visit__contact-link { display: inline-flex; align-items: center; min-block-size: var(--target-min); margin-block: var(--space-1); }
.monthly > *, .gallery > *, .monthly-video > * { margin-block-end: var(--space-3); }
.price > *, .visit > * { margin-block-end: var(--space-3); }
.preview-banner { margin: 0; padding: var(--space-2) var(--space-3); background: var(--paper-raised); border: 1px solid var(--danger); color: var(--danger); }
@media (max-width: 30rem) { .visit__facts, .glance__facts { grid-template-columns: 1fr; } .visit__facts dt, .visit__facts dd { grid-column: 1; } .visit__facts dd, .glance__facts dd { margin-bottom: var(--space-1); } }

/* ---------- Gallery (task 5): filter chips, cards, empty state, detail dialog ---------- */
/* Derived roles (DESIGN.md 5, Filter Group / Gallery Detail Dialog): no new palette values. */
:root { --selected-wash: color-mix(in srgb, var(--copper) 12%, var(--paper-raised)); --scrim: color-mix(in srgb, var(--ink) 62%, transparent); }
.gallery__count { font-weight: 600; font-variant-numeric: tabular-nums; }
.gallery__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.gallery__filter-hint { flex: 1 1 100%; font-size: var(--step--1); color: var(--ink-muted); }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; }
.filter-group__label { margin-right: var(--space-1); font-size: var(--step--1); font-weight: 600; color: var(--ink-muted); }
.filter-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); padding: 0 var(--space-2); border: 1px solid var(--ink-muted); border-radius: var(--radius-s); background: var(--paper-raised); color: var(--ink); font: inherit; font-size: var(--step--1); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out); }
.filter-chip:hover { background: var(--paper); }
.filter-chip:active { background: var(--line); }
.filter-chip__count { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.filter-chip[aria-pressed="true"] { background: var(--selected-wash); font-weight: 700; }
/* Check glyph drawn as a rotated corner: selection is never colour alone. */
.filter-chip[aria-pressed="true"]::before { content: ""; flex: none; width: 0.3em; height: 0.65em; margin: -0.2em 0.15em 0 0.1em; border: solid currentColor; border-width: 0 0.14em 0.14em 0; transform: rotate(45deg); }

main > section.gallery { padding-block: var(--space-8) var(--space-7); }
.gallery > h2 { font-size: var(--step-3); line-height: 1.16; letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--grid-gap); }
@media (min-width: 48rem) { .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .gallery__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } }
/* Mobile '더 보기' (owner decision): JS reveals it only under 30rem; the status keeps the match total and a clipped shown-count line for screen readers. */
.gallery__more { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); width: 100%; }
.gallery__more-remaining { font-size: var(--step--1); font-weight: 400; }
.gallery__shown { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gallery-card__trigger { display: flex; flex-direction: column; gap: var(--space-1); color: var(--ink); text-decoration: none; border-radius: var(--radius-s); }
/* Open tiles: each photo keeps its own proportions inside a 4:5 slot, seated on the caption line, with no
   card, mat or border around it. */
.gallery-card__trigger img { aspect-ratio: 4 / 5; object-fit: contain; object-position: 50% 100%; }
.gallery-card__title { font-weight: 600; line-height: 1.45; }
.gallery-card__trigger:hover { color: var(--ink); }
.gallery-card__trigger:hover .gallery-card__title { color: var(--copper-hover); text-decoration: underline; }
.gallery-card__price { font-size: var(--step--1); line-height: 1.55; color: var(--ink-muted); }
/* Cards whose consultation wording the owner removed (2026-10-25) show only this short label. */
.gallery-card__consult { font-weight: 600; }

.empty-state { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-4); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-m); }
.empty-state__icon { grid-row: span 3; width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; }
.empty-state__title { font-weight: 700; }
.empty-state__body { color: var(--ink-muted); }
.empty-state__action { justify-self: start; }
@media (max-width: 30rem) { .empty-state { padding: var(--space-3); } }

/* The document stays the only page scroller; while a modal is open it is locked and the
   dialog body owns scrolling. The gutter stays reserved so nothing shifts sideways. */
html { scrollbar-gutter: stable; }
html[data-vely-dialog-open] { overflow: hidden; }
.detail-dialog { --dialog-pad: var(--space-4); --dialog-max-h: calc(100dvh - 2 * var(--space-3)); width: min(100% - 2 * var(--page-gutter), 64rem); max-width: none; max-height: var(--dialog-max-h); margin: auto; padding: 0; box-sizing: border-box; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--paper-raised); color: var(--ink); opacity: 0; transform: translateY(var(--space-1)); transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), overlay var(--motion-base) allow-discrete, display var(--motion-base) allow-discrete; }
.detail-dialog[open] { opacity: 1; transform: none; }
@starting-style { .detail-dialog[open] { opacity: 0; transform: translateY(var(--space-1)); } }
.detail-dialog::backdrop { background: var(--scrim); }
.detail-dialog__body { display: grid; gap: var(--space-3) var(--grid-gap); max-height: calc(var(--dialog-max-h) - 2px); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--dialog-pad) var(--dialog-pad); box-sizing: border-box; }
.detail-dialog__bar { position: sticky; top: 0; z-index: 1; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-inline: calc(-1 * var(--dialog-pad)); padding: var(--space-2) var(--dialog-pad); background: var(--paper-raised); border-bottom: 1px solid var(--line); }
.detail-dialog__position { margin-right: auto; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.detail-dialog__nav { display: flex; gap: var(--space-2); }
.detail-dialog__figure { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.detail-dialog__image { width: 100%; height: auto; max-height: min(70dvh, 46rem); object-fit: contain; background: var(--paper); border-radius: var(--radius-s); }
.detail-dialog__caption { font-size: var(--step--1); color: var(--ink-muted); }
.detail-dialog__media-error { padding: var(--space-2) var(--space-3); border: 1px solid var(--danger); border-radius: var(--radius-s); color: var(--danger); }
.detail-dialog__info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.detail-dialog__title { font-size: var(--step-2); }
.detail-dialog__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); }
.detail-dialog__facts dt { font-size: var(--step--1); font-weight: 600; color: var(--ink-muted); padding-top: 0.15em; }
.detail-dialog__facts dd { margin: 0; }
.detail-dialog__info .contact-actions { align-self: stretch; }
.detail-dialog__panel { display: grid; justify-items: start; gap: var(--space-2); align-self: stretch; padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-m); }
.detail-dialog__panel img { width: min(100%, 12rem); height: auto; }
@media (min-width: 64rem) {
  .detail-dialog__body { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .detail-dialog__figure { grid-column: 1 / 8; }
  .detail-dialog__info { grid-column: 8 / -1; }
}
@media (max-width: 30rem) {
  .detail-dialog { --dialog-pad: var(--space-3); }
  /* Visible labels shorten to "이전"/"다음"; the accessible names keep "작품". */
  .detail-dialog__noun { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Monthly (task 6): equal square boards, manual photo pager, separate films ---------- */
/* Boards may crop (DESIGN 4: texture and board frames allow cover). No new palette values. */
/* The monthly chapter is a raised full-bleed band (photos, then films) so the season reads as one spread. */
main > section.monthly, main > section.monthly-video { background: var(--paper-raised); }
main > section.monthly { padding-block: var(--space-8) var(--space-6); }
main > section.monthly-video { padding-block: var(--space-5) var(--space-8); }
.monthly__label { font-family: var(--sans); font-size: var(--step-1); font-weight: 600; letter-spacing: 0; }
.monthly__heading { margin: 0 0 var(--space-2); font-family: var(--serif); font-size: var(--step-3); font-weight: 500; line-height: 1.16; letter-spacing: -0.02em; }
.monthly__total { font-family: var(--sans); font-size: var(--step-1); font-weight: 600; color: var(--copper); font-variant-numeric: tabular-nums; }
.monthly__validity { margin: 0 0 var(--space-1); font-weight: 600; }
.monthly__note { max-width: var(--text-max); margin: 0 0 var(--space-4); color: var(--ink-muted); }
.monthly__boards { grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--grid-gap); align-items: start; }
.board { display: flex; flex-direction: column; gap: var(--space-2); container: board / inline-size; }
.board__photos img { border-radius: var(--radius-s); }
.board__photos { display: grid; gap: var(--space-2); }
.board__photos > li { min-width: 0; }
.board__photos img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--paper); }
.board__photos > li[data-vely-photo-error] { display: grid; place-items: center; aspect-ratio: 1 / 1; border: 1px dashed var(--line-strong); border-radius: var(--radius-s); background: var(--paper); color: var(--ink-muted); font-size: var(--step--1); text-align: center; overflow: hidden; }
.board__photos > li[data-vely-photo-error] img { height: auto; aspect-ratio: auto; }
/* JS pager: every photo shares one square cell; only the active one is visible. */
.js .board[data-vely-pager-ready] .board__photos { grid-template-areas: "frame"; }
.js .board[data-vely-pager-ready] .board__photos > li { grid-area: frame; opacity: 0; visibility: hidden; transition: opacity var(--motion-base) var(--ease-out), visibility 0s linear var(--motion-base); }
.js .board[data-vely-pager-ready] .board__photos > li[data-vely-photo-active] { opacity: 1; visibility: visible; transition: opacity var(--motion-base) var(--ease-out), visibility 0s; }
.board__pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); margin: 0; }
.board__position { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board__title { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--ink); font-size: var(--step-1); font-weight: 600; line-height: 1.35; }
.board__price { color: var(--copper); }
.board__meta { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }
/* Narrow 4-column boards (64rem to about 76rem): the pager shows "이전"/"다음" (the accessible name keeps "사진")
   and the price takes its own line, so neither unit splits mid-phrase. */
@container board (max-width: 14rem) {
  .board__pager-noun { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .board__price { display: block; }
}
.board__conditions, .film-card__conditions { display: grid; gap: var(--space-1); font-size: var(--step--1); }
.board__conditions li, .film-card__conditions li { color: var(--ink); }
.board__conditions li::before, .film-card__conditions li::before { content: "\2014\00a0"; color: var(--ink-muted); }
/* One inquiry block closes the monthly chapter (de-AI pass): pick a board, then copy its package or call.
   Boards and films carry no contact row of their own; films link back to their board. */
.monthly__inquiry { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--ink); }
.monthly__inquiry-title { font-family: var(--serif); font-size: var(--step-2); font-weight: 500; line-height: 1.25; }
.board-pick { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.board-pick__legend { flex: 1 1 100%; margin-bottom: var(--space-2); padding: 0; color: var(--ink-muted); }
/* The native radio covers its whole 44px label (the real hit area) and stays transparent; the label draws
   the mark: an empty ring, filled with a copper dot when chosen, plus the selected wash and weight. */
.board-pick__option { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); padding: 0 var(--space-3) 0 var(--space-2); border: 1px solid var(--ink-muted); border-radius: var(--radius-s); background: var(--paper-raised); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out); }
.board-pick__option::before { content: ""; flex: none; inline-size: 1.125rem; block-size: 1.125rem; box-sizing: border-box; border: 1px solid var(--ink-muted); border-radius: 50%; background: var(--paper-raised); }
.board-pick__option:hover { background: var(--paper); }
.board-pick__option:has(input:checked) { background: var(--selected-wash); font-weight: 700; }
.board-pick__option:has(input:checked)::before { border-color: var(--copper); background: radial-gradient(circle, var(--copper) 0 0.3rem, var(--paper-raised) 0.32rem); }
.board-pick__option input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.board-pick__option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.monthly__inquiry .contact-actions { gap: var(--space-2); }
.film-card__board { margin: 0; }
.film-card__board a { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: 600; }
.monthly-video__note { max-width: var(--text-max); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper-raised); }
.monthly-video__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.monthly-video > h2 { font-family: var(--sans); font-size: var(--step-1); font-weight: 600; }
.film-card { display: flex; flex-direction: column; gap: var(--space-2); }
.film-card video { border-radius: var(--radius-s); }
.film-card__figure { display: grid; gap: var(--space-2); margin: 0; }
.film-card__frame { position: relative; }
.film-card__frame .play-button { position: absolute; inset: 0; margin: auto; }
.film-card video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--paper); }
.film-card figcaption { font-weight: 600; line-height: 1.45; }
.film-card__control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; }
.film-card__status:empty { display: none; }
.film-card[data-vely-film-state="rejected"] .film-card__status, .film-card[data-vely-film-state="error"] .film-card__status { color: var(--danger); font-size: var(--step--1); }
.monthly-video__photo-only { max-width: var(--text-max); margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: var(--step--1); }
.monthly-video__photo-only a { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--copper); }
@media (min-width: 36rem) { .monthly__boards, .monthly-video__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .monthly__collection { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end; } .monthly__collection > .monthly__heading { grid-column: 1 / 7; } .monthly__collection > .monthly__validity, .monthly__collection > .monthly__note { grid-column: 8 / -1; } .monthly__collection > .monthly__boards { grid-column: 1 / -1; margin-top: var(--space-5); } }
@media (min-width: 64rem) {
  .monthly__boards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .monthly-video__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Contact (task 7): inquiry package, copy states, channel order, Kakao QR ---------- */
/* Telephone (primary) and SMS lead; Kakao is the quieter secondary channel. No new palette values. */
/* Order: package, copy (text button), one arrow call link, then text and Kakao as quiet links on one line. */
.contact-actions__primary, .contact-actions__more { margin: 0; }
.contact-actions__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); color: var(--ink-muted); }
.contact-actions__copy { margin-inline-start: calc(-1 * var(--space-1)); }
.button--secondary { background: transparent; border-color: var(--line-strong); color: var(--ink-muted); }
.button--secondary:hover { background: var(--paper-raised); color: var(--copper-hover); }
/* On the magnetic dark stage the quieter channel keeps stage text tokens (never ink on #181715). */
.service--magnet .button--secondary { background: transparent; border-color: var(--stage-muted); color: var(--stage-muted); }
.service--magnet .button--secondary:hover { background: transparent; color: var(--stage-ink); }
.contact-package, .kakao-dialog__context { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); font-size: var(--step--1); }
.contact-package { justify-self: stretch; min-width: 0; }
.contact-package__label { margin: 0; font-weight: 600; color: var(--ink-muted); }
.contact-package__text { margin: 0; color: var(--ink); line-height: 1.6; -webkit-user-select: text; user-select: text; }
.contact-package__reach { margin: 0; color: var(--ink-muted); }
.contact-actions__status { flex: 1 1 100%; margin: 0; font-size: var(--step--1); line-height: 1.55; }
.contact-actions__status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-vely-copy-state="copied"] > .contact-actions__status { color: var(--success); }
[data-vely-copy-state="denied"] > .contact-actions__status { color: var(--danger); }
.kakao-dialog { width: min(100% - 2 * var(--page-gutter), 28rem); max-width: none; max-height: calc(100dvh - 2 * var(--space-3)); margin: auto; padding: 0; box-sizing: border-box; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--paper-raised); color: var(--ink); opacity: 0; transform: translateY(var(--space-1)); transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), overlay var(--motion-base) allow-discrete, display var(--motion-base) allow-discrete; }
.kakao-dialog[open] { opacity: 1; transform: none; }
@starting-style { .kakao-dialog[open] { opacity: 0; transform: translateY(var(--space-1)); } }
.kakao-dialog::backdrop { background: var(--scrim); }
.kakao-dialog__body { display: grid; gap: var(--space-3); max-height: calc(100dvh - 2 * var(--space-3) - 2px); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-4) var(--space-4); box-sizing: border-box; }
.kakao-dialog__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-inline: calc(-1 * var(--space-4)); padding: var(--space-2) var(--space-4); background: var(--paper-raised); border-bottom: 1px solid var(--line); }
.kakao-dialog__title { margin: 0; font-size: var(--step-1); }
.kakao-dialog__bar form { margin: 0; }
.kakao-dialog__qr { display: grid; justify-items: center; gap: var(--space-2); margin: 0; text-align: center; font-size: var(--step--1); color: var(--ink-muted); }
.kakao-dialog__qr img, .detail-dialog__panel img { width: min(100%, 12rem); height: auto; border: 1px solid var(--line); border-radius: var(--radius-s); }
.kakao-dialog__context .text-button { justify-self: start; margin-inline-start: calc(-1 * var(--space-1)); }
.kakao-dialog__link { margin: 0; }

.visit__qr { display: grid; justify-items: start; gap: var(--space-1); margin: 0; font-size: var(--step--1); color: var(--ink-muted); }
.visit__qr img { width: 8rem; height: auto; border: 1px solid var(--line); border-radius: var(--radius-s); }
.visit__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.visit__links a { display: inline-flex; align-items: center; min-height: var(--target-min); }
@media (max-width: 30rem) { .kakao-dialog__body { padding: 0 var(--space-3) var(--space-3); } .kakao-dialog__bar { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); } }

/* ---------- Play control (owner request 2026-10-25): one centered button per paused film ---------- */
/* --play-size keeps the circle well over the 44px target; the round shape is reserved for this media control. */
:root { --play-size: 4rem; --play-wash: color-mix(in srgb, var(--magnetic-stage) 72%, transparent); }
.play-button { display: inline-grid; place-items: center; inline-size: var(--play-size); block-size: var(--play-size); padding: 0; border: 1px solid var(--stage-ink); border-radius: 50%; background: var(--play-wash); color: var(--stage-ink); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.play-button:hover { background: var(--magnetic-stage); }
.play-button:active { transform: scale(0.96); }
.play-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--paper-raised); }
.play-button__icon { inline-size: 1.75rem; block-size: 1.75rem; margin-inline-start: 0.2rem; fill: currentColor; }
.play-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Page motion (DESIGN.md 6): scroll reveal, title light line, count-up ---------- */
/* site.js marks only below-the-fold elements and only when motion is allowed; .js scoping means
   no-JS, a failed script and boot.js's no-js fallback always render everything static. */
/* De-AI pass: the copper underline under every heading is gone (one stamped frame on 11 sections), so the
   reveal no longer draws a line; headings rise in with their section. */
:root { --motion-reveal: 640ms; --reveal-rise: var(--space-4); }
.js [data-vely-reveal="pending"] { opacity: 0; transform: translate3d(0, var(--reveal-rise), 0); }
.js [data-vely-reveal="shown"] { transition: opacity var(--motion-reveal) var(--ease-out) var(--reveal-delay, 0ms), transform var(--motion-reveal) var(--ease-out) var(--reveal-delay, 0ms); }
[data-vely-count] { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- Surface motion (DESIGN.md 6, owner request 2026-10-25 #2) ---------- */
/* Glint: a neutral light band, never a colour, reflected on the photo's glass. It follows the pointer
   (fine pointers) or device tilt (after a touch), or sweeps once on entry; site.js sets the state.
   The band element is twice the photo's width, so a translate of (x - 0.5) * 50% centres it at x. */
:root {
  /* Hard-light: the bright core lifts and the faint ink fringes deepen, so the band reads on the
     near-white magnet photos too; both inks are neutral, the nail colour is never tinted. */
  --glint-band: linear-gradient(105deg, transparent 32%, color-mix(in srgb, var(--ink) 14%, transparent) 42%, color-mix(in srgb, var(--stage-ink) 80%, transparent) 50%, color-mix(in srgb, var(--ink) 14%, transparent) 58%, transparent 68%);
  --glint-sweep-duration: 2.4s;
  --tilt-depth: 60rem;
  --cascade-scale: 0.94;
}
.glint, .gallery-card__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-s); }
.glint::after, .gallery-card__media::after {
  content: "";
  position: absolute;
  inset: 0 -50%;
  background: var(--glint-band);
  mix-blend-mode: hard-light;
  opacity: 0;
  transform: translate3d(calc((var(--glint-x, 0.5) - 0.5) * 50%), 0, 0);
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-out);
}
.js .glint[data-vely-glint="follow"]::after { opacity: 1; }
/* The one-time sweep waits for the photo's own reveal to finish, so the light crosses a settled photo. */
.js .glint[data-vely-glint="sweep"]::after { animation: glint-sweep var(--glint-sweep-duration) var(--ease-out) calc(var(--reveal-delay, 0ms) + var(--motion-reveal)) both; }
@keyframes glint-sweep {
  from { opacity: 0; transform: translate3d(-30%, 0, 0); }
  20%, 80% { opacity: 1; }
  to { opacity: 0; transform: translate3d(30%, 0, 0); }
}
/* Gallery cascade: cards rise and settle in a row/column wave (site.js sets each --reveal-delay). */
.js .gallery-card[data-vely-reveal="pending"] { transform: translate3d(0, var(--reveal-rise), 0) scale(var(--cascade-scale)); }
/* Gallery tilt + glint: fine pointers only, under [data-vely-tilt] set by site.js. Keyboard focus gets a
   fixed small tilt. Touch, reduced motion, saveData and no-JS keep flat cards. */
@media (hover: hover) and (pointer: fine) {
  .js [data-vely-tilt] .gallery-card__trigger { transition: transform var(--motion-fast) var(--ease-out); }
  .js [data-vely-tilt] .gallery-card__trigger:is(:hover, :focus-visible) { transform: perspective(var(--tilt-depth)) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); }
  .js [data-vely-tilt] .gallery-card__trigger:focus-visible:not(:hover) { --tilt-x: 3deg; --tilt-y: 2deg; --glint-x: 0.7; }
  .js [data-vely-tilt] .gallery-card__trigger:is(:hover, :focus-visible) .gallery-card__media::after { opacity: 1; }
}

/* ---------- Brand ribbon (DESIGN.md 5 Brand Ribbon) ---------- */
/* One controlled infinite animation: paused by default, running only while site.js reports "playing"
   (visible, tab shown, not paused by the user). Static under no-JS, reduced motion and saveData.
   The track is two identical halves, so -50% loops seamlessly; it clips inside .ribbon__viewport. */
:root { --ribbon-duration: 48s; --ribbon-type: var(--step-1); --ribbon-fade: var(--space-6); --ribbon-control-room: calc(var(--page-gutter) + 7rem); }
.ribbon { position: relative; border-block: 1px solid var(--ink); padding-block: var(--space-2); }
.ribbon__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The text fades out before the control's room on the inline end, so it never runs under the button. */
.ribbon__viewport { overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--ink) var(--ribbon-fade), var(--ink) calc(100% - var(--ribbon-control-room) - var(--ribbon-fade)), transparent calc(100% - var(--ribbon-control-room))); }
.ribbon__track { display: flex; inline-size: max-content; animation: ribbon-flow var(--ribbon-duration) linear infinite; animation-play-state: paused; }
.js .ribbon[data-vely-ribbon="playing"] .ribbon__track { animation-play-state: running; }
.ribbon[data-vely-ribbon="static"] .ribbon__track { animation: none; }
.ribbon__half, .ribbon__group { display: flex; align-items: center; }
.ribbon__group { gap: var(--space-4); padding-inline-end: var(--space-4); font-family: var(--serif); font-size: var(--ribbon-type); font-weight: 500; line-height: 1.2; color: var(--copper); }
.ribbon__item--ink { color: var(--ink); }
.ribbon__dot { color: var(--line-strong); }
.ribbon__toggle { position: absolute; inset-block: 0; inset-inline-end: var(--page-gutter); margin-block: auto; block-size: var(--target-min); min-inline-size: 6rem; background: var(--paper); }
/* Narrow screens: shorter fades and only the control's own width as room keep about half the width readable. */
@media (max-width: 30rem) { .ribbon { --ribbon-fade: var(--space-3); --ribbon-control-room: calc(var(--page-gutter) + 6rem + var(--space-1)); } }
@keyframes ribbon-flow {
  to { transform: translate3d(-50%, 0, 0); }
}
@media print { [data-vely-reveal], [data-vely-reveal]::after { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) { [data-vely-reveal], [data-vely-reveal]::after { opacity: 1 !important; transform: none !important; } .gallery-card__trigger { transform: none !important; } .glint::after, .gallery-card__media::after { display: none; } .ribbon__toggle { display: none; } .cta-link::after { transform: none; } .cta-link__arrow { transform: none !important; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }