/* 06 · Lune Lookbook: soft editorial nail atelier.
   Token values only (no new token names), then variant rules. Contrast ratios in notes.md. */

:root {
  color-scheme: light;
  --bg-primary: #FBF7F3;      /* warm cream paper */
  --bg-secondary: #F5E7E2;    /* blush wash */
  --bg-elevated: #FFFDFB;
  --text-primary: #3B1F2C;    /* plum ink, 13.89:1 */
  --text-secondary: #6B5260;  /* 6.56:1 */
  --border-color: #E6D3CD;    /* decorative hairline */
  --primary-color: #7D2E4F;   /* berry, 8.29:1 */
  --primary-contrast: #FFFFFF;
  --secondary-color: #EBC7C4; /* blush ornament, never text */
  --accent-color: #A8486A;    /* rose: price numerals, 5.18:1 */
  --glow-color: #E9B8B4;
  --focus-ring: #7D2E4F;

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "DM Sans", "Segoe UI", system-ui, sans-serif; /* eyebrows are spaced caps sans */
  --tracking-mono: 0.16em;
  --text-display: clamp(2.75rem, 1.6rem + 5vw, 5.75rem);
  --leading-tight: 1.02;

  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgb(59 31 44 / 0.05);
  --shadow-md: 0 12px 28px -14px rgb(59 31 44 / 0.18);
  --shadow-lg: 0 28px 56px -24px rgb(59 31 44 / 0.22);
  --shadow-glow: 0 0 0 1px rgb(233 184 180 / 0.6), 0 10px 24px -10px rgb(125 46 79 / 0.35);

  --art-placeholder-from: #F8EEEA;
  --art-placeholder-to: #EBC7C4;
  --art-silhouette: rgb(59 31 44 / 0.10);

  /* variant-local state values */
  --chip-outline: #A07A88;    /* 3.5:1 non-text */
  --chip-selected-bg: #F3E1E4;
  --chip-selected-fg: var(--primary-color);
  --btn-hover: #64223F;
  --band-bg: #3B1F2C;
  --band-text: #F6ECE8;
  --band-muted: #E8C3C9;
  --band-btn: #F0B7C3;
  --band-btn-text: #3B1F2C;
  --band-btn-hover: #F7CDD5;
  --band-rule: rgb(240 183 195 / 0.25);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #1A1316;
  --bg-secondary: #241A1F;
  --bg-elevated: #2E2228;
  --text-primary: #F6ECE8;
  --text-secondary: #C9B2B9;
  --border-color: #3A2830;
  --primary-color: #F0B7C3;
  --primary-contrast: #2A1420;
  --secondary-color: #6E4A58;
  --accent-color: #E395AB;
  --glow-color: #F0B7C3;
  --focus-ring: #F5C9D2;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 12px 28px -14px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 28px 56px -24px rgb(0 0 0 / 0.7);
  --shadow-glow: 0 0 0 1px rgb(240 183 195 / 0.35), 0 10px 24px -10px rgb(240 183 195 / 0.25);
  --art-placeholder-from: #241A1F;
  --art-placeholder-to: #3E2A33;
  --art-silhouette: rgb(240 183 195 / 0.12);
  --chip-outline: #7A5E68;
  --chip-selected-bg: #F0B7C3;
  --chip-selected-fg: #2A1420;
  --btn-hover: #F7CDD5;
  --band-bg: #2E2228;
  --band-text: #F6ECE8;
  --band-muted: #C9B2B9;
  --band-btn: #F0B7C3;
  --band-btn-text: #2A1420;
  --band-btn-hover: #F7CDD5;
  --band-rule: rgb(240 183 195 / 0.25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-primary: #1A1316;
    --bg-secondary: #241A1F;
    --bg-elevated: #2E2228;
    --text-primary: #F6ECE8;
    --text-secondary: #C9B2B9;
    --border-color: #3A2830;
    --primary-color: #F0B7C3;
    --primary-contrast: #2A1420;
    --secondary-color: #6E4A58;
    --accent-color: #E395AB;
    --glow-color: #F0B7C3;
    --focus-ring: #F5C9D2;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 12px 28px -14px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 28px 56px -24px rgb(0 0 0 / 0.7);
    --shadow-glow: 0 0 0 1px rgb(240 183 195 / 0.35), 0 10px 24px -10px rgb(240 183 195 / 0.25);
    --art-placeholder-from: #241A1F;
    --art-placeholder-to: #3E2A33;
    --art-silhouette: rgb(240 183 195 / 0.12);
    --chip-outline: #7A5E68;
    --chip-selected-bg: #F0B7C3;
    --chip-selected-fg: #2A1420;
    --btn-hover: #F7CDD5;
    --band-bg: #2E2228;
    --band-text: #F6ECE8;
    --band-muted: #C9B2B9;
    --band-btn: #F0B7C3;
    --band-btn-text: #2A1420;
    --band-btn-hover: #F7CDD5;
    --band-rule: rgb(240 183 195 / 0.25);
  }
}

/* ---------- Base tweaks ---------- */
body { background: var(--bg-primary); }
section[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
h1, h2 { font-weight: 500; letter-spacing: -0.015em; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.08; }
::selection { background: var(--secondary-color); color: var(--text-primary); }

.eyebrow--berry { color: var(--primary-color); }
.text-link {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  color: var(--primary-color); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}

/* Brand */
.brand { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-2xl); letter-spacing: 0; }
.brand__mark { width: 1.25rem; height: 1.25rem; color: var(--primary-color); }

/* Buttons: pills */
.btn { border-radius: var(--radius-pill); min-height: 48px; padding: 14px 28px; font-size: var(--text-sm); letter-spacing: 0.04em; }
.btn--primary:hover { background: var(--btn-hover); }
.site-header .btn { min-height: 44px; padding: 10px 22px; }

/* Art frames: photo ratios + cover fit, and a quiet placeholder (no samurai) */
.art-frame--4x5 { aspect-ratio: 4 / 5; }
.art-frame--1x1 { aspect-ratio: 1; }
.art-frame--3x2 { aspect-ratio: 3 / 2; }
.art-frame { border-radius: var(--radius-sm); }
.art-frame > img { object-fit: cover; object-position: 50% 55%; }
.art-frame.is-missing::before {
  background:
    radial-gradient(closest-side, var(--art-silhouette) 96%, transparent) 50% 52% / 34% 27% no-repeat,
    repeating-linear-gradient(135deg, transparent 0 15px, var(--art-silhouette) 15px 16px);
  opacity: 0.7;
}
.art-frame.is-missing::after { font-family: var(--font-body); border-radius: var(--radius-pill); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-10) var(--space-16); }
.hero__grid { display: grid; gap: var(--space-10); }
.hero__copy { display: grid; gap: var(--space-5); justify-items: start; }
.hero h1 { max-width: 12ch; }
.hero .lead { max-width: 46ch; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__meta { font-size: var(--text-sm); color: var(--text-secondary); }
.hero__figure { position: relative; margin: 0; width: 100%; max-width: 28rem; justify-self: center; }
.hero__arch {
  border-radius: 999px 999px var(--radius-sm) var(--radius-sm);
  outline: 1px solid var(--secondary-color);
  outline-offset: 12px;
  overflow: hidden;
}
/* outline-offset escapes the frame; keep it inside the gutter on narrow screens */
@media (max-width: 479px) { .hero__arch { outline-offset: 6px; } }
.hero__credit {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
  font-family: var(--font-display); font-style: italic; font-size: var(--text-lg);
  color: var(--text-secondary);
}
.hero__credit a { color: var(--primary-color); }
.hero__issue { display: none; }

@media (min-width: 1024px) {
  .hero { padding-block: var(--space-12) var(--space-16); }
  .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); align-items: end; }
  .hero__copy { padding-bottom: var(--space-16); }
  .hero__figure { max-width: 30rem; justify-self: end; }
  .hero__issue {
    display: block; position: absolute; left: calc(-1 * var(--space-10)); top: 40%;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-secondary);
  }
}
@media (min-width: 1280px) {
  .hero__figure { max-width: 32rem; }
}

/* Load-in (once) */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > *, .hero__figure { animation: lune-rise 600ms var(--ease-out) both; }
  .hero__copy > :nth-child(2) { animation-delay: 80ms; }
  .hero__copy > :nth-child(3) { animation-delay: 160ms; }
  .hero__copy > :nth-child(n+4) { animation-delay: 240ms; }
  .hero__figure { animation-delay: 120ms; }
}
@keyframes lune-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Section heads ---------- */
.section-head { display: grid; gap: var(--space-3); justify-items: start; margin-bottom: var(--space-10); max-width: 40rem; }

/* ---------- Lookbook ---------- */
.lookbook { padding-top: var(--space-12); }
.lookbook .section-head { margin-bottom: var(--space-8); }

.look-filters, .look-count { display: none; }
.has-js .look-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.has-js .look-count { display: block; }
.look-count { margin: var(--space-4) 0 var(--space-8); font-size: var(--text-sm); color: var(--text-secondary); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 18px;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--chip-outline); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.chip:hover { color: var(--primary-color); border-color: var(--primary-color); background: var(--bg-secondary); }
.chip__count { font-size: 0.85em; color: var(--accent-color); letter-spacing: 0.04em; }
.chip[aria-pressed="true"] { background: var(--chip-selected-bg); color: var(--chip-selected-fg); border-color: var(--primary-color); }
.chip[aria-pressed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip[aria-pressed="true"] .chip__count { color: inherit; }

.lookbook__grid { columns: 2; column-gap: var(--space-3); padding: 0; margin: 0; list-style: none; }
.look { display: block; break-inside: avoid; margin-bottom: var(--space-8); }
.look[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .look { animation: lune-fade 200ms ease both; }
}
@keyframes lune-fade { from { opacity: 0; } }

.look__figure { margin: 0; }
.look__figure .art-frame { background-color: var(--bg-secondary); }
.look__figure .art-frame > img { transition: transform 400ms var(--ease-out); }
.look:hover .art-frame > img, .look:focus-within .art-frame > img { transform: scale(1.03); }
.look:hover .art-frame, .look:focus-within .art-frame { outline: 1px solid var(--secondary-color); outline-offset: -1px; }
.look__caption { display: grid; gap: var(--space-1); padding-top: var(--space-3); }
.look__tag { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-secondary); }
.look__name { font-size: var(--text-xl); font-weight: 500; line-height: 1.15; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.look__meta { display: none; font-size: var(--text-sm); color: var(--text-secondary); }
.look__price { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums lining-nums; }
.look__price data { color: var(--accent-color); font-weight: 600; }
.look__book {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--primary-color); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.look__arrow { display: inline-block; transition: transform var(--duration-base) var(--ease-out); }
.look__book:hover .look__arrow { transform: translateX(3px); }

.lookbook__foot { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--border-color); }
.lookbook__note { font-size: var(--text-xs); color: var(--text-secondary); }

@media (min-width: 640px) {
  .lookbook__grid { column-gap: var(--space-4); }
  .look__name { font-size: var(--text-2xl); }
  .look__meta { display: block; }
  .look__book { font-size: var(--text-sm); }
}
@media (min-width: 768px) {
  .lookbook__grid { columns: 3; column-gap: var(--space-6); }
}
@media (min-width: 1280px) {
  .lookbook__grid { columns: 4; }
}

/* ---------- Services menu ---------- */
.menu { display: grid; gap: var(--space-10); }
.menu__col { display: grid; gap: var(--space-10); align-content: start; justify-items: start; }
.menu__group { width: 100%; }
.menu__title { font-style: italic; font-weight: 500; font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.menu__list { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--border-color); }
.menu__row {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-4); row-gap: var(--space-1);
  padding-block: var(--space-5); border-bottom: 1px solid var(--border-color);
}
.menu__name { display: grid; gap: 2px; font-weight: 500; }
.menu__note { font-size: var(--text-sm); font-weight: 400; color: var(--text-secondary); }
.menu__time { grid-column: 1; font-size: var(--text-sm); color: var(--text-secondary); }
.menu__price { grid-column: 2; grid-row: 1; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.menu__foot { font-size: var(--text-sm); color: var(--text-secondary); }

@media (min-width: 640px) {
  .menu__row { grid-template-columns: auto 1fr auto auto; align-items: baseline; }
  .menu__row::after { content: ""; grid-column: 2; grid-row: 1; border-bottom: 1px dotted var(--chip-outline); transform: translateY(-4px); }
  .menu__time { grid-column: 3; grid-row: 1; }
  .menu__price { grid-column: 4; min-width: 5.5rem; }
}
@media (min-width: 1024px) {
  .menu { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}

/* ---------- Studio ---------- */
.studio__grid { display: grid; gap: var(--space-10); }
.studio__copy { display: grid; gap: var(--space-5); justify-items: start; align-content: center; }
.studio__copy > p:not(.eyebrow) { max-width: 52ch; color: var(--text-secondary); }
.studio__facts { padding: 0; margin: 0; list-style: none; display: grid; width: 100%; }
.studio__facts li { padding-block: var(--space-3); border-bottom: 1px solid var(--border-color); font-size: var(--text-sm); }
.studio__facts li:first-child { border-top: 1px solid var(--border-color); }
@media (min-width: 640px) {
  .studio__facts { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  .studio__facts li:nth-child(2) { border-top: 1px solid var(--border-color); }
}
@media (min-width: 1024px) {
  .studio__grid { grid-template-columns: 7fr 5fr; gap: var(--space-12); align-items: center; }
}

/* ---------- Reviews ---------- */
.reviews__summary { font-size: var(--text-sm); color: var(--text-secondary); }
.stars { color: var(--accent-color); letter-spacing: 0.1em; }
.reviews__grid { display: grid; gap: var(--space-6); }
.review {
  margin: 0; display: grid; gap: var(--space-5); align-content: start;
  padding: var(--space-8); background: var(--bg-elevated);
  border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.review blockquote { margin: 0; }
.review blockquote p { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); line-height: 1.3; }
.review blockquote::before { content: "“"; display: block; height: 0.5em; font-family: var(--font-display); font-size: 3.5rem; line-height: 1; color: var(--secondary-color); }
.review figcaption { font-size: var(--text-sm); font-weight: 500; }
.review figcaption span { color: var(--text-secondary); font-weight: 400; }
@media (min-width: 768px) {
  .reviews__grid { grid-template-columns: 1fr 1fr; }
  .review:last-child { grid-column: 1 / -1; }
  .review blockquote p { font-size: var(--text-2xl); }
}
@media (min-width: 1024px) {
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
  .review:last-child { grid-column: auto; }
}

/* ---------- Booking band ---------- */
.book { position: relative; overflow: hidden; background: var(--band-bg); color: var(--band-text); }
.book::before { /* the lune arch, as a quiet ornament */
  content: ""; position: absolute; right: -12rem; top: 10%;
  width: 22rem; height: 30rem; border: 1px solid var(--band-btn); border-radius: 999px 999px 0 0;
  opacity: 0.25; pointer-events: none;
}
.book__inner { position: relative; display: grid; gap: var(--space-10); }
.book__copy { display: grid; gap: var(--space-4); justify-items: start; }
.book .eyebrow { color: var(--band-muted); }
.book h2 { color: var(--band-text); }
.book h2:focus-visible { outline-color: var(--band-btn); }
.book__lead { color: var(--band-muted); max-width: 46ch; }
.book__look { max-width: 46ch; padding: var(--space-3) var(--space-4); border-left: 2px solid var(--band-btn); color: var(--band-text); }
.book__look:empty { display: none; }
.book__look a { color: var(--band-btn); }
.book__side { display: grid; gap: var(--space-8); align-content: start; }
.book .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.book .btn--primary { background: var(--band-btn); color: var(--band-btn-text); }
.book .btn--primary:hover { background: var(--band-btn-hover); }
.book .btn--secondary { color: var(--band-text); border-color: var(--band-text); }
.book .btn--secondary:hover { background: var(--band-text); color: var(--band-bg); }
.book :focus-visible { outline-color: var(--band-btn); }
.book__hours { display: grid; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.book__hours div { display: flex; justify-content: space-between; gap: var(--space-6); padding-bottom: var(--space-2); border-bottom: 1px solid var(--band-rule); max-width: 20rem; }
.book__hours dt { color: var(--band-muted); }
.book__hours dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .book__inner { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-16); }
}

/* ---------- Sticky mobile Book bar ---------- */
.book-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--gutter) max(var(--space-3), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}
.book-bar[hidden] { display: none; }
.book-bar__text { font-size: var(--text-sm); color: var(--text-secondary); }
.book-bar__text strong { color: var(--text-primary); }
.book-bar .btn { min-height: 44px; padding: 10px 28px; }
body.has-book-bar { padding-bottom: 76px; }
html:has(body.has-book-bar) { scroll-padding-bottom: 80px; }
@media (min-width: 1024px) { .book-bar { display: none !important; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-secondary); border-top: 1px solid var(--secondary-color); padding-block: var(--space-12) var(--space-8); font-size: var(--text-sm); }
.footer__grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; display: grid; gap: var(--space-2); justify-items: start; }
.footer__brand p + p { margin-top: 0; }
.footer__h { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-2); }
.site-footer ul { padding: 0; margin: 0; list-style: none; }
.site-footer ul a { display: inline-flex; min-height: 44px; align-items: center; color: var(--text-primary); text-decoration: none; }
.site-footer ul a:hover { color: var(--primary-color); }
.footer__legal { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-color); color: var(--text-secondary); }
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr repeat(3, 1fr); }
  .footer__brand { grid-column: auto; align-content: start; }
}

/* ---------- Reduced motion: no transforms ---------- */
@media (prefers-reduced-motion: reduce) {
  .look:hover .art-frame > img, .look:focus-within .art-frame > img,
  .look__book:hover .look__arrow { transform: none; }
}