/* =========================================================
   Glow Ritual · inner-2026.css  (inner-page components)
   Loads after site-2026.css (tokens + forms kit) and home-2026.css (shared parts: .stack .chips .rows .tray
   .steps .prod .people .pull .start .mobile-bar).  Colours: --clay, --clay-hover, --clay-tint, --clay-on-dark.
   Per-page compositions:
     treatments  hero + sticky concern index and tray beside ledger groups, signature band, price table
     treatment   portrait hero, facts strip, five-step ledger, in/out pair, three ways to start
     about       still-life hero, text + photo, founder band, two profiles, room ledger
     book        sticky live summary beside a five-step wizard (radio rows, day/time pickers, details form)
     contact     form beside a sticky studio column, "before you visit" ledger
     crm         studio desk: tabs, counts, tables, calendar            guide  interface guide (static specimens)
     journal     feature + two full notes     journal-post  single-column article     product  tile + info panel
     shop        filters, formula ledger, set tiles, real basket + checkout

   NO MOTION: no transitions, keyframes, reveals, hover lifts or smooth scrolling anywhere. State changes are instant.
   ========================================================= */

/* ---------- shared inner-page bits ---------- */
.pg-hero { overflow: clip; padding-block: var(--s-5) var(--s-7); }
.pg-hero-grid { display: grid; gap: var(--s-6); }
.pg-copy { display: grid; gap: var(--s-5); align-content: center; min-width: 0; }
.pg-copy .eyebrow { justify-self: start; margin-bottom: calc(-1 * var(--s-2)); }
.pg-copy .display { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.5rem); max-width: 13ch; }
.pg-photo { position: relative; margin: 0 calc(-1 * var(--margin)); inline-size: calc(100% + 2 * var(--margin)); aspect-ratio: 3 / 2;
  --fade-t: 0; --fade-r: 0; --fade-l: 0; --fade-b: 1; --fade-y: clamp(56px, 18vw, 160px); --fade-x: clamp(48px, 9vw, 140px); --vig: .12; --ring: transparent; }
.pg-photo picture, .ph picture { position: absolute; inset: 0; }
.pg-photo img, .ph img { width: 100%; height: 100%; object-fit: cover; }
.ph { position: relative; aspect-ratio: var(--ar, 4 / 3); }
@media (min-width: 1000px) {
  .pg-hero { padding-block: 0 var(--s-8); }
  .pg-hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .pg-copy { grid-column: 1 / 7; padding-block: var(--s-5); }
  .pg-photo { grid-column: 7 / 13; margin: 0 calc(-1 * var(--bleed)) 0 0; inline-size: calc(100% + var(--bleed)); aspect-ratio: 5 / 4;
    --fade-b: 0; --fade-l: 1; --fade-y: clamp(72px, 9vw, 160px); --fade-x: clamp(72px, 9vw, 160px); }
}

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); margin: 0 0 var(--s-2); font-size: var(--t-small); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--control-line); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); text-underline-offset: 4px; }
.crumbs a:hover { color: var(--clay); }

.sec { padding-block: var(--section); }
.sec--tight { padding-block: var(--s-8); }
.band { background: var(--surface-2); }
.notice { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-6); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--clay); border-radius: var(--r-card); max-width: 72ch; }
.notice p { color: var(--ink-soft); }
.link-arrow { min-height: 44px; }

/* ---------- treatments ---------- */
.tx-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); padding: var(--s-4) 0 0; margin: 0; list-style: none; border-top: 1px solid var(--line-strong); font-size: var(--t-small); color: var(--muted); }
.tx-facts strong { font: 400 1.5rem/1.1 var(--font-display); font-variation-settings: "opsz" 72; color: var(--ink); margin-right: var(--s-1); }
.tx-photo img { object-position: 50% 42%; }
.tx-main { padding-block: var(--s-6) var(--s-9); }
.tx-grid { display: grid; gap: var(--s-6); }
.tx-aside { display: grid; gap: var(--s-5); align-content: start; }
.tx-aside .meta { margin-bottom: var(--s-3); }
.tx-toc { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tx-toc a { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--field-line); border-radius: 999px; text-decoration: none; font-size: var(--t-small); color: var(--ink); }
.tx-toc a:hover { border-color: var(--field-line-hover); background: var(--surface); }
.tx-toc .num { color: var(--muted); }
.tx-list { display: grid; gap: var(--s-8); min-width: 0; }
.tx-group { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.tx-group-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-4); align-items: end; padding-bottom: var(--s-4); }
.tx-group-head > .meta { grid-column: 1 / -1; }
.tx-n { font: italic 400 2.5rem/1 var(--font-display); color: var(--clay); font-variant-numeric: lining-nums; }
.tx-group-head .h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.tx-feel { color: var(--muted); font-size: var(--t-small); }
.tx-row { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.tx-row .link-arrow { justify-self: start; }
.tx-sig { background: var(--surface-2); padding-block: var(--s-8); overflow: clip; }
.tx-sig-grid { display: grid; gap: var(--s-6); align-items: center; }
.tx-sig-photo { position: relative; margin: 0 calc(-1 * var(--margin)); aspect-ratio: 16 / 10; --fade-t: 0; --fade-l: 0; --fade-r: 0; --fade-b: 1; --fade-y: clamp(56px, 16vw, 120px); --vig: .1; --ring: transparent; --img-ph: var(--line); }
.tx-sig-photo picture { position: absolute; inset: 0; }
.tx-sig-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.tx-sig-meta { font: 400 1.25rem/1.2 var(--font-display); color: var(--ink); }
.tx-guide { padding-block: var(--section); }
.tx-guide-grid { display: grid; gap: var(--s-6); align-items: start; }
.ptable { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.ptable thead th { text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0; font: 500 var(--t-meta)/1.4 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-strong); }
.ptable tbody th, .ptable td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.ptable tbody th { font: 500 1.0625rem/1.3 var(--font-display); }
.ptable tbody th a { display: inline-block; padding-block: var(--s-3); margin-block: calc(-1 * var(--s-3)); min-height: 44px; text-decoration: none; }
.ptable tbody tr:hover { background: var(--surface); }
.ptable tbody th a:hover { color: var(--clay); }
.ptable :is(th, td):last-child { text-align: right; padding-right: 0; font-weight: 600; color: var(--ink); }
.ptable :is(th, td):nth-child(3) { text-align: right; padding-right: var(--s-5); }
@media (max-width: 639px) {
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ptable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
  .ptable tbody th { grid-column: 1 / -1; border: 0; padding-block: 0; }
  .ptable tbody td { border: 0; padding: 0; color: var(--muted); }
  .ptable tbody td:nth-child(3) { text-align: left; padding: 0; }
  .ptable tbody td:last-child { color: var(--ink); }
}
.tx-guide .notice { margin-top: var(--s-5); }
@media (min-width: 720px) { .tx-toc a { padding-inline: var(--s-5); } }
@media (min-width: 1000px) {
  .tx-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .tx-aside { grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; }
  .tx-toc { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
  .tx-toc a { display: flex; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; justify-content: space-between; padding: 0 var(--s-1); min-height: 48px; }
  .tx-toc a:hover { background: transparent; color: var(--clay); border-bottom-color: var(--clay); }
  .tx-list { grid-column: 5 / 13; }
  .tx-group-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tx-group-head > .meta { grid-column: auto; padding-bottom: var(--s-2); }
  .tx-sig { padding-block: 0; }
  .tx-sig-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: stretch; }
  .tx-sig-photo { grid-column: 1 / 7; margin: 0 0 0 calc(-1 * var(--bleed)); inline-size: calc(100% + var(--bleed)); aspect-ratio: auto; min-height: 460px; --fade-b: 0; --fade-r: 1; --fade-x: clamp(72px, 9vw, 160px); }
  .tx-sig-copy { grid-column: 8 / 13; padding-block: var(--s-9); align-content: center; }
  .tx-guide-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .tx-guide-grid > .stack { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .tx-guide-grid > .ptable { grid-column: 6 / 13; }
}

/* ---------- treatment (single) ---------- */
.tr-photo { aspect-ratio: 4 / 5; }
.tr-photo img { object-position: 50% 30%; }
@media (min-width: 640px) and (max-width: 999px) { .tr-photo { aspect-ratio: 16 / 10; } .tr-photo img { object-position: 50% 24%; } }
@media (min-width: 1000px) { .tr-photo { aspect-ratio: 6 / 7; grid-column: 8 / 13; } .tr-hero .pg-copy { grid-column: 1 / 8; } }
.tr-facts-sec { padding-block: 0 var(--s-8); }
.tr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-strong); }
.tr-facts > div { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); }
.tr-facts dd { margin: 0; font: 400 clamp(1.375rem, 1.1rem + 1.2vw, 2rem)/1.15 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -.02em; color: var(--ink); }
@media (min-width: 900px) { .tr-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tr-facts > div { border-bottom: 0; padding-block: var(--s-5) 0; } }
.tr-room { background: var(--surface-2); padding-block: var(--section); }
.tr-room-grid { display: grid; gap: var(--s-6); align-items: start; }
.tr-room .step { padding-block: var(--s-4); align-items: center; }
.tr-room .step .h3 { margin: 0; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem); }
.tr-room .steps { border-bottom: 1px solid var(--control-line); }
.tr-know { padding-block: var(--section); }
.tr-know-grid { display: grid; gap: var(--s-5); }
.tr-card { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border-radius: var(--r-card); }
.tr-card--in { background: var(--surface); border: 1px solid var(--line); }
.tr-card--out { border: 1px dashed var(--control-line); }
.tr-card p { color: var(--ink-soft); }
.tr-list { display: grid; gap: var(--s-3); }
.tr-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.tr-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--clay); }
.tr-list .dash { width: 12px; height: 2px; margin: 11px 4px 0; background: var(--muted); }
.tr-more { padding-block: 0 var(--section); }
.tr-more-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-6); }
.tr-more-list { display: grid; border-top: 1px solid var(--line-strong); }
.tr-more-list li { border-bottom: 1px solid var(--line); }
.tr-more-list a { display: grid; gap: var(--s-2); padding: var(--s-5) 0; text-decoration: none; height: 100%; align-content: start; }
.tr-more-list .h3 { color: var(--ink); }
.tr-more-list .num { color: var(--ink-soft); font-size: var(--t-small); }
.tr-more-p { color: var(--muted); font-size: var(--t-small); line-height: var(--lh-small); max-width: 36ch; }
.tr-more-list a:hover .h3 { color: var(--clay); }
@media (min-width: 900px) {
  .tr-know-grid { grid-template-columns: 7fr 5fr; gap: var(--s-6); }
  .tr-more-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tr-more-list li { border-bottom: 0; padding-inline: var(--s-5); border-left: 1px solid var(--line); }
  .tr-more-list li:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 1000px) {
  .tr-room-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .tr-room-grid > .stack { grid-column: 1 / 6; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .tr-room-grid > .steps { grid-column: 7 / 13; }
}

/* ---------- about ---------- */
.ab-hero { padding-block: var(--s-5) 0; overflow: clip; }
.ab-hero-grid { display: grid; gap: var(--s-5); padding-bottom: var(--s-6); align-items: end; }
.ab-hero .display { font-size: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem); max-width: 11ch; }
.ab-banner { position: relative; aspect-ratio: 16 / 10; --fade-t: 0; --fade-r: 0; --fade-l: 0; --fade-b: 1; --fade-y: clamp(64px, 14vw, 200px); --vig: .08; --ring: transparent; max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; }
.ab-banner picture { position: absolute; inset: 0; }
.ab-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
@media (min-width: 720px) { .ab-banner { aspect-ratio: 21 / 8; --fade-l: 1; --fade-r: 1; --fade-x: clamp(48px, 10vw, 200px); } }
@media (min-width: 1000px) {
  .ab-hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-bottom: var(--s-7); }
  .ab-hero-grid > .stack { grid-column: 1 / 9; }
  .ab-hero-grid > .lede { grid-column: 9 / 13; padding-bottom: var(--s-3); }
}
.ab-why { padding-block: var(--section); }
.ab-why-grid { display: grid; gap: var(--s-6); align-items: start; }
.ab-why-copy { display: grid; gap: var(--s-5); }
.ab-big { font: 400 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.3 var(--font-display); font-variation-settings: "opsz" 48; letter-spacing: -.015em; color: var(--ink); max-width: 30ch; }
.ab-why-copy p:not(.ab-big) { color: var(--ink-soft); font-size: var(--t-lede); }
@media (min-width: 1000px) {
  .ab-why-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .ab-why-grid > .stack { grid-column: 1 / 5; }
  .ab-why-copy { grid-column: 6 / 13; }
}
.ab-founder { padding-block: var(--section); }
.ab-founder-grid { display: grid; gap: var(--s-7); align-items: center; }
.ab-founder-copy { display: grid; gap: var(--s-6); align-content: start; }
.ab-founder-copy .eyebrow { justify-self: start; }
.ab-pull { padding-left: var(--s-5); border-left: 2px solid var(--clay); display: grid; gap: var(--s-3); }
.ab-pull p { font: italic 400 clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem)/1.3 var(--font-display); font-variation-settings: "opsz" 72; color: var(--ink); }
.ab-creds { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--ink-soft); font-size: var(--t-small); }
.ab-creds li { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; }
.ab-creds svg { width: 16px; height: 16px; color: var(--clay); flex: none; }
.ab-founder-photo { display: grid; gap: var(--s-3); max-width: 420px; }
.ab-founder-photo picture { aspect-ratio: 4 / 5; --img-ph: var(--line); }
.ab-founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@media (min-width: 1000px) {
  .ab-founder-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .ab-founder-copy { grid-column: 1 / 8; }
  .ab-founder-photo { grid-column: 9 / 13; max-width: none; }
}
.ab-team { padding-block: var(--section); }
.ab-team-head { display: grid; gap: var(--s-4); justify-items: start; margin-bottom: var(--s-7); }
.ab-team-head .h2 { max-width: 20ch; }
.ab-team-list { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.ab-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-6); border-bottom: 1px solid var(--line); align-items: start; }
.ab-face { display: grid; gap: var(--s-1); }
.ab-face picture { aspect-ratio: 4 / 5; --img-ph: var(--line); }
.ab-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.ab-face .fine { font-size: var(--t-meta); }
.ab-person .stack { gap: var(--s-2); }
.ab-person p:not(.meta) { color: var(--ink-soft); }
@media (min-width: 720px) {
  .ab-team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); border-bottom: 1px solid var(--line); }
  .ab-person { grid-template-columns: 144px minmax(0, 1fr); border-bottom: 0; }
}
.ab-room { padding-block: var(--section); }
.ab-room-grid { display: grid; gap: var(--s-7); align-items: start; }
.ab-room .stack > div { margin-top: var(--s-2); }
.ab-room-list { display: grid; margin: 0; border-top: 1px solid var(--line-strong); }
.ab-room-list > div { display: grid; gap: var(--s-1) var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--control-line); }
.ab-room-list dd { margin: 0; font: 400 clamp(1.25rem, 1.05rem + .8vw, 1.625rem)/1.25 var(--font-display); font-variation-settings: "opsz" 48; color: var(--ink); }
@media (min-width: 720px) { .ab-room-list > div { grid-template-columns: 160px minmax(0, 1fr); align-items: baseline; } }
@media (min-width: 1000px) {
  .ab-room-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .ab-room-grid > .stack { grid-column: 1 / 6; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .ab-room-list { grid-column: 7 / 13; }
}

/* ---------- journal ---------- */
.jn-hero { padding-block: var(--s-5) var(--s-7); }
.jn-hero-grid { display: grid; gap: var(--s-5); align-items: end; }
.jn-hero .display { font-size: clamp(2.5rem, 1.2rem + 5vw, 5rem); max-width: 14ch; }
@media (min-width: 1000px) { .jn-hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } .jn-hero .display { grid-column: 1 / 9; } .jn-hero .lede { grid-column: 9 / 13; padding-bottom: var(--s-3); } }
.jn-body { padding-block: 0 var(--section); }
.jn-grid { display: grid; gap: var(--s-8); align-items: start; }
.jn-feature { display: grid; gap: var(--s-5); text-decoration: none; align-content: start; }
.jn-photo { position: relative; margin: 0 calc(-1 * var(--margin)); aspect-ratio: 3 / 2; --fade-t: 0; --fade-l: 0; --fade-r: 0; --fade-b: 1; --fade-y: clamp(48px, 14vw, 120px); --vig: .1; --ring: transparent; }
.jn-photo picture { position: absolute; inset: 0; }
.jn-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.jn-feature .h2 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); max-width: 18ch; }
.jn-feature:hover .h2 { color: var(--clay); }
.jn-n-inline { color: var(--clay); font-family: var(--font-display); font-style: italic; font-size: 1.25rem; text-transform: none; letter-spacing: 0; margin-right: var(--s-2); }
.jn-notes { display: grid; border-top: 1px solid var(--line-strong); }
.jn-note { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-6); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.jn-n { font: italic 400 3rem/1 var(--font-display); color: var(--clay); letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.jn-note p:not(.meta) { color: var(--ink-soft); font-size: var(--t-lede); max-width: 44ch; }
@media (min-width: 1000px) {
  .jn-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .jn-feature { grid-column: 1 / 8; }
  .jn-photo { margin: 0 0 0 calc(-1 * var(--bleed)); inline-size: calc(100% + var(--bleed)); --fade-l: 0; --fade-r: 1; --fade-b: 0; --fade-x: clamp(72px, 9vw, 140px); aspect-ratio: 4 / 3; }
  .jn-notes { grid-column: 9 / 13; }
}

/* ---------- journal post ---------- */
.ar-wrap { max-width: calc(780px + var(--margin) * 2); }
.ar-head { padding-block: var(--s-5) 0; overflow: clip; }
.ar-head .wrap { display: grid; gap: var(--s-5); padding-bottom: var(--s-6); }
.ar-head .eyebrow { justify-self: start; margin-bottom: calc(-1 * var(--s-2)); }
.ar-head .display { font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.25rem); max-width: 16ch; }
.ar-photo { position: relative; aspect-ratio: 16 / 9; max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; --fade-t: 0; --fade-b: 1; --fade-l: 1; --fade-r: 1; --fade-y: clamp(48px, 10vw, 120px); --fade-x: clamp(24px, 8vw, 160px); --vig: .08; --ring: transparent; }
.ar-photo picture { position: absolute; inset: 0; }
.ar-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.ar-body { display: grid; gap: var(--s-7); padding-block: var(--s-7) var(--s-8); }
.ar-sec { position: relative; display: grid; gap: var(--s-3); }
.ar-sec .h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); }
.ar-sec p { font-size: var(--t-lede); color: var(--ink-soft); line-height: 1.65; max-width: 58ch; }
.ar-sec a, .ar-close a { color: var(--clay); text-underline-offset: 4px; font-weight: 500; }
.ar-n { font: italic 400 4rem/.8 var(--font-display); color: var(--clay); font-variant-numeric: lining-nums; letter-spacing: -.04em; }
.ar-pull { padding: var(--s-6) 0 var(--s-6) var(--s-5); border-left: 2px solid var(--clay); }
.ar-pull p { font: italic 400 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.25 var(--font-display); font-variation-settings: "opsz" 72; color: var(--ink); max-width: 30ch; }
.ar-close { font-size: var(--t-lede); color: var(--ink-soft); max-width: 52ch; padding-top: var(--s-5); border-top: 1px solid var(--line-strong); }
.ar-next { padding-block: var(--s-7) var(--s-9); background: var(--surface-2); }
.ar-next .wrap { display: grid; gap: var(--s-5); }
@media (min-width: 1200px) {
  .ar-n { position: absolute; left: -112px; top: 0; width: 80px; text-align: right; font-size: 5.5rem; }
}
.ar-photo { }
@media (min-width: 1000px) { .ar-photo { aspect-ratio: 21 / 9; } }
.flip { rotate: 180deg; }

/* ---------- shop ---------- */
.sh-tile { --g-body: var(--surface); --g-line: var(--ink); --g-solid: var(--ink); --g-label: var(--clay-tint); --tile: var(--surface-2);
  position: relative; display: grid; place-items: center; background: var(--tile); border-radius: var(--r-card); aspect-ratio: 1; overflow: hidden; }
.sh-tile--peach { --tile: var(--tint-peach); }
.sh-tile--sage { --tile: var(--tint-sage); }
.sh-tile--sand { --tile: var(--tint-sand); }
.sh-tile--moss { --tile: var(--moss-2); --g-body: var(--moss-3); --g-line: var(--clay-tint); --g-solid: var(--clay-tint); --g-label: var(--moss); }
.sh-tile .glyph { height: 72%; }
.sh-tile .prod-tag { top: var(--s-2); left: var(--s-2); }
.sh-photo { aspect-ratio: 3 / 2; }
.sh-photo img { object-position: 50% 45%; }
@media (min-width: 1000px) {
  .sh-hero .pg-photo { grid-column: 1 / 7; grid-row: 1; margin: 0 0 0 calc(-1 * var(--bleed)); inline-size: calc(100% + var(--bleed)); --fade-l: 0; --fade-r: 1; --fade-b: 0; aspect-ratio: 5 / 4; }
  .sh-hero .pg-copy { grid-column: 8 / 13; grid-row: 1; }
  .sh-hero .display { max-width: 10ch; }
}
.sh-shelf { padding-block: var(--s-6) var(--section); }
.sh-shelf-head { display: grid; gap: var(--s-5); padding-bottom: var(--s-6); align-items: end; }
.sh-filter { display: grid; gap: var(--s-3); }
.sh-filter[hidden] { display: none; }
.sh-group { display: grid; gap: var(--s-4); }
.sh-group[hidden] { display: none; }
.sh-group + .sh-group { margin-top: var(--s-8); }
.sh-group-t { padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-strong); }
.sh-list { display: grid; }
.sh-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--s-5)); align-items: start; }
.sh-item[hidden] { display: none; }
.sh-item .sh-tile { border-radius: var(--r-control); }
.sh-item .sh-tile .prod-tag { display: none; }
.sh-main { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.sh-use { color: var(--ink); font-size: var(--t-body); }
.sh-ing { color: var(--muted); font-size: var(--t-small); line-height: var(--lh-small); }
.sh-ing .meta { margin-right: var(--s-2); }
.sh-types { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-top: var(--s-1); }
.sh-types li { font-size: var(--t-meta); color: var(--ink-soft); padding: 2px var(--s-2); border: 1px solid var(--line-strong); border-radius: 999px; }
.sh-buy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.sh-buy .prod-price { margin-right: auto; }
.sh-buy .link-arrow { flex-basis: 100%; }
.sh-foot { margin-top: var(--s-6); }
.sh-sets { display: grid; gap: var(--s-5); }
.sh-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); background: var(--moss); border: 0; border-radius: var(--r-card); color: var(--moss-dim); }
.sh-set .sh-tile { aspect-ratio: 16 / 9; border-radius: var(--r-control); }
.sh-set .sh-tile .prod-tag { display: block; }
.sh-set .sh-tile .glyph { height: 82%; }
.sh-set .h3, .sh-set .prod-price { color: #fff; }
.sh-set .sh-use { color: #fff; }
.sh-set .sh-ing { color: var(--moss-dim); }
.sh-set .sh-types li { color: var(--moss-dim); border-color: var(--moss-edge); }
.sh-set .prod-price span { color: var(--moss-dim); }
.sh-set .sh-buy { grid-column: auto; }
@media (min-width: 640px) {
  .sh-item { grid-template-columns: 128px minmax(0, 1fr) auto; }
  .sh-buy { grid-column: auto; display: grid; justify-items: end; gap: var(--s-3); min-width: 200px; }
  .sh-buy .prod-price { margin: 0; justify-items: end; text-align: right; }
  .sh-buy .link-arrow { flex-basis: auto; }
  .sh-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-set { grid-template-columns: minmax(0, 1fr); }
  .sh-set .sh-buy { display: flex; justify-items: initial; justify-content: space-between; }
  .sh-set .sh-buy .prod-price { text-align: left; justify-items: start; }
}
@media (min-width: 1000px) {
  .sh-shelf-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .sh-shelf-head > .stack { grid-column: 1 / 7; }
  .sh-filter { grid-column: 8 / 13; }
  .sh-item { grid-template-columns: 160px minmax(0, 1fr) 220px; gap: var(--s-6); padding-block: var(--s-6); }
}
.sh-basket { padding-block: var(--section); scroll-margin-top: var(--header-h); }
.sh-basket-grid { display: grid; gap: var(--s-6); align-items: start; }
.sh-basket-main { display: grid; gap: var(--s-5); min-width: 0; }
.sh-empty { padding: var(--s-6); border: 1px dashed var(--control-line); border-radius: var(--r-card); color: var(--ink-soft); }
.sh-empty[hidden], .sh-lines[hidden], .sh-total[hidden], .sh-checkout[hidden], .sh-done[hidden] { display: none; }
.sh-lines { display: grid; border-top: 1px solid var(--line-strong); }
.sh-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "tile name total" "tile qty qty"; gap: var(--s-2) var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line); align-items: center; }
.sh-line .sh-tile { grid-area: tile; border-radius: var(--r-control); width: 64px; }
.sh-line-name { grid-area: name; display: grid; gap: 2px; }
.sh-line-name strong { font: 500 1.125rem/1.25 var(--font-display); font-variation-settings: "opsz" 36; }
.sh-line-name span { font-size: var(--t-small); color: var(--muted); }
.sh-line-total { grid-area: total; font-weight: 600; }
.sh-qty { grid-area: qty; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sh-qty button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ctl-line); border-radius: var(--r-field); background: transparent; color: var(--ink); }
.sh-qty button:hover { border-color: var(--field-line-hover); background: var(--surface); }
.sh-qty button svg { width: 16px; height: 16px; }
.sh-qty output { min-width: 2ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-qty .sh-remove { width: auto; padding: 0 var(--s-3); font-size: var(--t-small); margin-left: var(--s-2); color: var(--ink-soft); }
.sh-total { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--s-3); font-size: var(--t-body); }
.sh-total strong { font: 400 1.75rem/1 var(--font-display); }
.sh-checkout { display: grid; gap: var(--s-4); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.sh-checkout .btn { justify-self: start; }
.sh-done { padding: var(--s-5) var(--s-6); background: var(--surface); border: 1px solid var(--success); border-left-width: 3px; border-radius: var(--r-card); }
.sh-done a, .sh-basket a:not(.btn) { color: var(--clay); text-underline-offset: 4px; font-weight: 500; }
@media (min-width: 720px) {
  .sh-line { grid-template-columns: 72px minmax(0, 1fr) auto auto; grid-template-areas: "tile name qty total"; }
  .sh-line .sh-tile { width: 72px; }
  .sh-line-total { min-width: 6ch; text-align: right; }
}
@media (min-width: 1000px) {
  .sh-basket-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .sh-basket-intro { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .sh-basket-main { grid-column: 6 / 13; }
}

/* ---------- product ---------- */
.pd-hero { padding-block: var(--s-5) var(--s-8); }
.pd-grid { display: grid; gap: var(--s-6); align-items: center; }
.pd-tile { aspect-ratio: 5 / 4; }
.pd-tile .glyph { height: 84%; }
.pd-tile .prod-tag { top: var(--s-4); left: var(--s-4); }
.pd-info { gap: var(--s-5); align-content: center; }
.pd-info .eyebrow { justify-self: start; }
.pd-info .display { font-size: clamp(2.5rem, 1.4rem + 4vw, 4.25rem); max-width: 10ch; }
.pd-ings { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pd-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding-block: var(--s-4); border-block: 1px solid var(--line-strong); }
.pd-buy .prod-price strong { font-size: 2.25rem; }
.pop { max-width: min(420px, calc(100vw - 2 * var(--margin))); padding: var(--s-6); border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-overlay); }
.pop:popover-open { display: grid; gap: var(--s-4); }
.pop::backdrop { background: rgb(27 42 35 / .35); }
.pd-use { padding-block: var(--section); }
.pd-use-grid { display: grid; gap: var(--s-6); align-items: center; }
.pd-photo picture { aspect-ratio: 4 / 3; }
.pd-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.pd-use-copy { display: grid; gap: var(--s-5); }
.pd-use-copy .eyebrow { justify-self: start; }
.pd-use .step .h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 400; margin: 0; }
.pd-for { padding-block: var(--section); }
.pd-for-grid { display: grid; gap: var(--s-6); align-items: start; }
.pd-sets-list { display: grid; border-top: 1px solid var(--line-strong); margin-top: var(--s-3); }
.pd-sets-list li { border-bottom: 1px solid var(--control-line); }
.pd-sets-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); padding-block: var(--s-4); text-decoration: none; min-height: 44px; align-items: baseline; }
.pd-sets-list a:hover .h3 { color: var(--clay); }
.pd-sets-p { grid-column: 1 / -1; color: var(--muted); font-size: var(--t-small); }
@media (min-width: 1000px) {
  .pd-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .pd-tile { grid-column: 1 / 7; aspect-ratio: 1; }
  .pd-info { grid-column: 8 / 13; }
  .pd-use-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .pd-use-copy { grid-column: 4 / 11; }
  .pd-for-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .pd-for-grid > .stack { grid-column: 1 / 7; }
  .pd-sets { grid-column: 8 / 13; }
}

/* =========================================================
   BOOK
   ========================================================= */
.bk-head { padding-block: var(--s-5) var(--s-6); }
.bk-head-grid, .ct-head-grid { display: grid; gap: var(--s-4); align-items: end; }
.bk-head .display, .ct-head .display { font-size: clamp(2.25rem, 1.3rem + 3.8vw, 4rem); max-width: 16ch; }
.bk-head .lede a, .ct-form a, .bk-sum a, .bk-done a:not(.btn) { color: var(--ink); text-underline-offset: 3px; }
.bk-head .lede a:hover { color: var(--clay); }
.bk-body { padding-block: 0 var(--section); }
.bk-grid { display: grid; gap: var(--s-7); align-items: start; }
.bk-main { display: grid; gap: var(--s-6); min-width: 0; }

.bk-steps { display: flex; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--control-line); }
.bk-steps[hidden] { display: none; }
.bk-steps li { flex: 1 1 0; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-2) var(--s-3) 0; color: var(--muted); border-top: 3px solid transparent; margin-top: -2px; min-width: 0; }
.bk-s-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--control-line); font-size: var(--t-small); font-variant-numeric: tabular-nums; flex: none; }
.bk-s-t { font-size: var(--t-small); font-weight: 500; line-height: 1.2; }
.bk-steps li.is-done { color: var(--ink-soft); border-top-color: var(--ink); }
.bk-steps li.is-done .bk-s-n { background: var(--ink); border-color: var(--ink); color: var(--on-ink-accent); }
.bk-steps li[aria-current="step"] { color: var(--ink); border-top-color: var(--clay); }
.bk-steps li[aria-current="step"] .bk-s-n { border-color: var(--clay); background: var(--clay); color: #fff; }
.bk-steps li[aria-current="step"] .bk-s-t { font-weight: 600; }

.bk-form { display: grid; gap: var(--s-6); }
.bk-panel { display: grid; gap: var(--s-4); align-content: start; }
.bk-panel[hidden] { display: none; }
.bk-panel + .bk-panel { padding-top: var(--s-6); border-top: 1px solid var(--line); }
.bk-panel > .h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.bk-panel > .h2:focus { outline: none; }
.bk-panel > .h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.bk-panel .fine { margin: 0; }
.bk-opts { display: grid; gap: var(--s-2); }
.bk-opt { align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--field-line); border-radius: var(--r-field); background: var(--surface); min-height: 64px; }
.bk-opt:hover { border-color: var(--field-line-hover); }
.bk-opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface-2); }
.bk-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.bk-opt-main { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.bk-opt-main strong { font-weight: 600; }
.bk-opt-p { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.4; }
.bk-opt-meta { flex: none; text-align: right; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.35; }
.bk-note { margin: 0; min-height: 0; padding: 0; color: var(--ink-soft); font-size: var(--t-small); }
.bk-note:not(:empty) { padding: var(--s-3) var(--s-4); background: var(--clay-tint); border-radius: var(--r-control); color: var(--ink); }
.bk-avoid { display: grid; gap: var(--s-2); padding-top: var(--s-4); }
.bk-avoid .h3 { font-size: var(--t-body); font-family: var(--font-text); font-weight: 600; letter-spacing: 0; }
.bk-checks { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-6); }
.bk-group { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.bk-group:first-child { margin-top: 0; }
.bk-group-t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-1); }
.bk-face { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; position: relative; background: var(--tint-sand); display: grid; place-items: center; }
.bk-face picture, .bk-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk-face--any svg { width: 28px; height: 28px; color: var(--clay); }
.bk-when { display: grid; gap: var(--s-5); }
.bk-when > div { display: grid; gap: var(--s-2); }
.bk-picks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pick { position: relative; display: block; }
.pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.pick span { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 76px; padding: 0 var(--s-4); border: 1px solid var(--field-line); border-radius: var(--r-field); background: var(--surface); font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.pick:hover span { border-color: var(--field-line-hover); }
.pick input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-ink-accent); font-weight: 600; }
.pick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.bk-err { margin: 0; color: var(--danger); font-size: var(--t-small); font-weight: 500; }
.bk-err[hidden] { display: none; }
.bk-fields { display: grid; gap: var(--s-4); }
.bk-nav { display: flex; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.bk-nav[hidden] { display: none; }
.bk-nav [hidden] { display: none; }
.bk-nav [data-next] { margin-left: auto; }
.bk-done { display: grid; gap: var(--s-4); padding: var(--s-7) var(--s-5); background: var(--surface-2); border-radius: var(--r-card); }
.bk-done[hidden] { display: none; }
.bk-done:focus { outline: none; }
.bk-done:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.bk-sum { display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--surface-2); border-radius: var(--r-card); }
.bk-sum-list { display: grid; margin: 0; }
.bk-sum-list > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-3); border-top: 1px solid var(--line-strong); }
.bk-sum-list dt { font-size: var(--t-small); color: var(--ink-soft); }
.bk-sum-list dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.bk-sum-list dd .num { font-weight: 400; color: var(--ink-soft); }
.bk-sum-foot { display: grid; gap: var(--s-2); border-top: 1px solid var(--line-strong); padding-top: var(--s-4); }
.bk-sum-foot p { margin: 0; }

@media (min-width: 640px) {
  .bk-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-wide { grid-column: 1 / -1; }
  .bk-opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .bk-steps li { padding-right: 0; justify-content: center; }
  .bk-steps li:not([aria-current="step"]) .bk-s-t { display: none; }
  .bk-steps li[aria-current="step"] { flex: 3 1 0; justify-content: flex-start; }
  .bk-opt { padding-inline: var(--s-3); gap: var(--s-3); }
  .bk-nav .btn { flex: 1 1 0; }
  .bk-sum { padding: var(--s-4); }
  .bk-sum-list > div { grid-template-columns: 84px minmax(0, 1fr); padding-block: var(--s-2); }
}
@media (min-width: 640px) { .bk-head-grid, .ct-head-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); } }
@media (min-width: 1000px) {
  .bk-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-9); }
  .bk-sum { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .bk-panel > .h2 { max-width: 20ch; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.ct-head { padding-block: var(--s-5) var(--s-6); }
.ct-body { padding-block: var(--s-4) var(--section); }
.ct-grid { display: grid; gap: var(--s-7); align-items: start; }
.ct-form { display: grid; gap: var(--s-5); min-width: 0; }
.ct-form form { display: grid; gap: var(--s-4); max-width: 640px; }
.ct-form .fine { margin: 0; }
.ct-form .btn { justify-self: start; }
.ct-done { margin: 0; padding: var(--s-5); background: var(--clay-tint); border-radius: var(--r-card); font-weight: 500; max-width: 640px; }
.ct-done[hidden] { display: none; }
.ct-done:focus { outline: none; }
.ct-done:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.ct-studio { display: grid; gap: var(--s-4); padding: var(--s-6); background: var(--moss); color: var(--moss-dim); border-radius: var(--r-card); align-content: start; }
.ct-studio .h3 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.ct-studio address { font-style: normal; color: #fff; font-size: var(--t-lede); line-height: 1.4; }
.ct-studio .status { color: var(--moss-dim); font-size: var(--t-small); }
.ct-studio a:not(.btn) { color: #fff; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.ct-list { display: grid; margin: 0; }
.ct-list > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding-block: var(--s-1); border-top: 1px solid var(--moss-line); min-height: 48px; }
.ct-list dt { color: var(--moss-dim); }
.ct-list dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
.ct-studio .btn-line { color: #fff; border-color: var(--moss-edge); justify-self: start; }
.ct-studio .btn-line:hover { background: var(--moss-2); }
.ct-before { padding-block: var(--section); }
.ct-before-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s-9); }
  .ct-studio { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .ct-before-grid { grid-template-columns: 5fr 7fr; gap: var(--s-9); align-items: start; }
  .ct-before-grid > .stack { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.tag[hidden] { display: none; }
.bk-steps:not([hidden]) + .bk-form .bk-panel + .bk-panel { border-top: 0; padding-top: 0; }
.bk-form[hidden] { display: none; }
.bk-picks[data-days] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-picks[data-days] .pick span, .bk-picks .pick span { width: 100%; }
.bk-picks:not([data-days]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 560px) {
  .bk-picks[data-days] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-picks:not([data-days]) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* =========================================================
   STUDIO DESK (crm)
   ========================================================= */
.dk-head, .gd-head { padding-block: var(--s-5) var(--s-6); }
.dk-head .display, .gd-head .display { font-size: clamp(2.25rem, 1.3rem + 3.8vw, 4rem); max-width: 16ch; }
.dk-head-grid { display: grid; gap: var(--s-4); align-items: end; }
@media (min-width: 640px) { .dk-head-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); } }
.dk-body { padding-block: var(--s-4) var(--section); }
.dk-grid { display: grid; gap: var(--s-6); align-items: start; }
.dk-nav { display: grid; gap: var(--s-4); }
.dk-nav[hidden] { display: none; }
.dk-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dk-tabs button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--field-line); border-radius: var(--r-field); background: var(--surface); color: var(--ink); font: 500 var(--t-small)/1.2 var(--font-text); cursor: pointer; }
.dk-tabs button:hover { border-color: var(--field-line-hover); }
.dk-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink-accent); font-weight: 600; }
.dk-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dk-count { font-size: var(--t-meta); color: var(--ink-soft); background: var(--surface-2); border-radius: 999px; min-width: 28px; padding: 2px 8px; text-align: center; }
.dk-count:empty, .dk-count[hidden] { display: none; }
.dk-tabs button[aria-selected="true"] .dk-count { background: var(--moss-2); color: var(--on-ink-accent); }
.dk-panels { min-width: 0; }
.dk-panel { display: grid; gap: var(--s-5); align-content: start; }
.dk-panel[hidden] { display: none; }
.dk-panel:focus { outline: none; }
.dk-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.dk-ph { display: grid; gap: var(--s-2); }
.dk-ph .h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.dk-ph .fine { margin: 0; }
.dk-link { display: inline; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dk-link:hover { color: var(--clay); }
.dk-tablewrap { border-top: 1px solid var(--control-line); }
.dk-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.dk-table thead th { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; font: 500 var(--t-meta)/1.3 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-strong); }
.dk-table td { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.dk-table td strong { display: block; font-weight: 600; }
.dk-sub { display: block; color: var(--ink-soft); font-size: var(--t-small); margin-top: 2px; }
.dk-badge { display: inline-flex; justify-self: start; width: fit-content; align-items: center; padding: 2px 10px; min-height: 28px; border-radius: 999px; font: 500 var(--t-meta)/1.2 var(--font-text); background: var(--surface-3); color: var(--ink); }
.dk-badge[data-s="requested"] { background: var(--clay-tint); color: var(--clay); }
.dk-badge[data-s="confirmed"], .dk-badge[data-s="paid"] { background: var(--tint-sage); color: var(--success); }
.dk-badge[data-s="packing"] { background: var(--tint-sand); color: var(--ink); }
.dk-badge[data-s="cancelled"] { background: #f6dfe5; color: var(--danger); }
.gd-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.dk-clients { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--control-line); }
.dk-client { display: grid; gap: var(--s-3); padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.dk-client .h3 { margin: 0; }
.dk-client p { margin: 0; }
.dk-hist { display: grid; gap: var(--s-1); margin: var(--s-3) 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: var(--t-small); }
.dk-hist .num { color: var(--muted); }
.dk-cal-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); max-width: 560px; }
.dk-cal-bar .h3 { margin: 0; }
.dk-cal-bar .btn { min-width: 48px; padding: 0 var(--s-3); font-size: 1.5rem; }
.dk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 560px; }
.dk-dow { text-align: center; font: 500 var(--t-meta)/1.3 var(--font-text); color: var(--muted); padding-block: var(--s-2); }
.dk-day { position: relative; display: grid; place-items: center; min-height: 56px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: 500 var(--t-small)/1 var(--font-text); cursor: pointer; }
.dk-day:hover { border-color: var(--ink); }
.dk-day.closed { background: transparent; color: var(--muted); border-color: var(--line); }
.dk-day.has { background: var(--clay-tint); border-color: var(--clay); color: var(--ink); font-weight: 600; }
.dk-day.today { box-shadow: inset 0 0 0 2px var(--ink); }
.dk-day[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink-accent); }
.dk-day:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dk-day.has::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); }
.dk-day[aria-pressed="true"]::after { background: var(--on-ink-accent); }
@media (max-width: 799px) {
  .dk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dk-table, .dk-table tbody, .dk-table tr { display: block; }
  .dk-table tr { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
  .dk-table td { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-1) 0; border: 0; }
  .dk-table td[data-l]::before { content: attr(data-l); font: 500 var(--t-meta)/1.5 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
  .dk-table td[colspan] { display: block; }
  .dk-table td strong, .dk-table td .dk-sub { grid-column: 2; }
}
@media (min-width: 800px) { .dk-client { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-6); } }
@media (min-width: 1000px) {
  .dk-grid { grid-template-columns: 252px minmax(0, 1fr); gap: var(--s-8); }
  .dk-nav { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .dk-tabs { flex-direction: column; gap: var(--s-1); }
  .dk-tabs button { border-color: transparent; background: transparent; border-radius: var(--r-control); min-height: 52px; }
  .dk-tabs button:hover { background: var(--surface-2); border-color: transparent; }
  .dk-tabs button[aria-selected="true"] { background: var(--ink); }
}

/* =========================================================
   INTERFACE GUIDE
   ========================================================= */
.gd-body { padding-block: var(--s-4) var(--section); }
.gd-grid { display: grid; gap: var(--s-6); align-items: start; }
.gd-toc { display: grid; gap: var(--s-2); }
.gd-toc ol { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; padding: 0; list-style: none; }
.gd-toc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-underline-offset: 4px; }
.gd-toc a:hover { color: var(--clay); text-decoration: underline; }
.gd-main { display: grid; gap: var(--s-8); min-width: 0; }
.gd-sec { display: grid; gap: var(--s-5); align-content: start; scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.gd-sec > .h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); padding-top: var(--s-5); border-top: 1px solid var(--control-line); }
.gd-sec .lede { margin: 0; }
.gd-sec code { font: 500 var(--t-small)/1.3 var(--font-text); background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
.gd-sec kbd { font: 500 var(--t-small)/1 var(--font-text); padding: 2px 6px; border: 1px solid var(--control-line); border-radius: 6px; background: var(--surface); }
.gd-sws { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.gd-sw { display: grid; gap: var(--s-2); }
.gd-chip { display: flex; align-items: flex-end; min-height: 72px; padding: var(--s-2) var(--s-3); border-radius: var(--r-control); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--t-small); }
.gd-sw-n { display: grid; gap: 2px; }
.gd-sw-n .fine { margin: 0; }
.gd-tablewrap { border-top: 1px solid var(--control-line); }
.gd-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.gd-table caption { text-align: left; padding-block: var(--s-3); caption-side: bottom; }
.gd-table th, .gd-table td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: middle; font-weight: 400; }
.gd-table thead th { font: 500 var(--t-meta)/1.3 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-strong); }
.gd-table tbody th { font-weight: 500; }
.gd-table th .fine { display: block; margin: 0; }
.gd-pair { display: inline-grid; place-items: center; width: 64px; height: 40px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 var(--t-body)/1 var(--font-display); }
.gd-type { display: grid; margin: 0; border-top: 1px solid var(--control-line); }
.gd-type > div { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-bottom: 1px solid var(--line); align-items: baseline; }
.gd-type dt .fine { display: block; margin: 2px 0 0; text-transform: none; letter-spacing: 0; }
.gd-type dd { margin: 0; }
.gd-type dd.display { font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); }
.gd-spec { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.gd-spec > .meta, .gd-spec > div > .meta { margin: 0; }
.gd-two { gap: var(--s-6); }
.gd-two > div { display: grid; gap: var(--s-3); align-content: start; }
.gd-dark { padding: var(--s-5); background: var(--moss); border-radius: var(--r-control); }
.gd-checks { display: grid; gap: var(--s-1); }
.gd-picks { display: flex; flex-wrap: wrap; }
.gd-list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
.gd-list li { padding-left: var(--s-5); position: relative; color: var(--ink-soft); }
.gd-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 2px; background: var(--clay); }
.gd-list strong { color: var(--ink); }
.gd-min { display: grid; gap: var(--s-4); margin: 0; }
.gd-min > div { display: grid; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--control-line); }
.gd-min dt { font: italic 400 3rem/1 var(--font-display); color: var(--clay); letter-spacing: -.03em; }
.gd-min dd { margin: 0; color: var(--ink-soft); }
@media (min-width: 640px) { .gd-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-min { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-type > div { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-6); } }
@media (min-width: 1000px) {
  .gd-grid { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-8); }
  .gd-toc { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .gd-toc ol { flex-direction: column; gap: 0; }
  .gd-min { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gd-sw-n { justify-items: start; }
.crumbs a { padding-inline: var(--s-1); margin-inline: calc(-1 * var(--s-1)); min-width: 44px; justify-content: center; }
.gd-toc a { min-width: 44px; }
.pd-use { padding-block: 0 var(--section); }
.pd-photo { position: relative; aspect-ratio: 3 / 2; margin: 0 0 var(--s-6); --fade-t: 0; --fade-b: 1; --fade-l: 0; --fade-r: 0; --fade-y: clamp(56px, 14vw, 180px); --vig: .06; --ring: transparent; }
.pd-photo picture { aspect-ratio: auto; }
@media (min-width: 1000px) { .pd-photo { aspect-ratio: 21 / 8; margin-bottom: var(--s-5); } }
@media (max-width: 599px) { .tx-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--s-2); } .tx-facts strong { display: block; margin: 0 0 2px; font-size: 1.375rem; } }

/* ---------- credits (credits.html) ----------
   One row per photograph: a small crop, what it shows and where it is used, then author, licence and source links.
   Links are block-level with a 44px row so every target is comfortable to tap. */
.cr-hero .pg-copy { grid-column: 1 / -1; }
.cr-hero .display { max-width: 16ch; }
.cr-main { padding-block: 0 var(--s-8); }
.cr-intro { max-width: 72ch; margin-bottom: var(--s-6); }
.cr-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.cr-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--line); }
.cr-thumb { margin: 0; width: 88px; aspect-ratio: 1; border-radius: var(--r-control); overflow: hidden; background: var(--surface); }
.cr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-body { display: grid; gap: var(--s-3); min-width: 0; }
.cr-body .h3 { margin: 0; }
.cr-file { margin: 0; font-size: var(--t-small); color: var(--muted); overflow-wrap: anywhere; }
.cr-facts { display: grid; gap: var(--s-2) var(--s-5); margin: 0; }
.cr-facts div { display: grid; gap: 2px; min-width: 0; }
.cr-facts dt { font: 500 var(--t-meta)/1.4 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.cr-facts dd { margin: 0; overflow-wrap: anywhere; }
.cr-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.cr-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.cr-links a:hover { text-decoration-color: var(--clay); }
.cr-facts dd a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink); }
.cr-other { display: grid; gap: var(--s-4); max-width: 72ch; margin-top: var(--s-7); }
@media (min-width: 720px) {
  .cr-item { grid-template-columns: 168px minmax(0, 1fr); gap: var(--s-6); }
  .cr-thumb { width: 168px; }
  .cr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .cr-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}