/* =========================================================================
   Sleep Shop — Melbourne
   Palette and type follow the brand plan: cocoa, rose, powder, cream and
   a cream-on-cream stripe. Playfair for display, Cormorant italic as a single
   script accent, Inter tracked wide and small for utility labels.

   1. Tokens     2. Reset      3. Type       4. Buttons
   5. Header     6. Hero       7. Tiles      8. Sections
   9. Product   10. Cart      11. Forms     12. Footer
  13. Utilities 14. Responsive
   ========================================================================= */

/* ------------------------------------------------------------- 1. Tokens */
:root {
  color-scheme: light;

  --cocoa: #3b2318;
  --rose: #7a4a52;
  --powder: #afc9df;
  --cream: #f2e9dc;
  --linen: #fbf7f1;

  --bg: var(--linen);
  --bg-alt: var(--cream);
  --surface: #ffffff;
  --ink: #2a1810;
  --ink-soft: #5a463a;
  --mute: #8b7a6e;
  --line: #e2d6c7;
  --line-strong: #cdbba7;

  --accent: var(--cocoa);
  --accent-hover: #4d3122;
  --accent-ink: var(--cream);
  --mark: var(--rose);

  --radius: 3px;
  --radius-lg: 4px;
  --shadow-sm: 0 1px 2px rgba(59, 35, 24, .06);
  --shadow: 0 14px 40px rgba(59, 35, 24, .12);
  --shadow-lg: 0 30px 70px rgba(42, 24, 16, .28);

  --wrap: 1100px;
  --step: clamp(3.5rem, 8vw, 6.5rem);

  --display: "Playfair Display", Didot, "Times New Roman", serif;
  --script: "Cormorant Garamond", Didot, Georgia, serif;
  --util: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Dark mode is cocoa-grounded — it stays inside the brand palette rather than
   inventing a second one. */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #2a1810;
  --bg-alt: #352015;
  --surface: #3b2318;
  --ink: #f2e9dc;
  --ink-soft: #d3c1b0;
  --mute: #a08e80;
  --line: #4d3122;
  --line-strong: #6a4632;

  --accent: var(--cream);
  --accent-hover: #ffffff;
  --accent-ink: #2a1810;
  --mark: #e8c3c0;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 14px 40px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .6);
}

/* Three states, not two: an explicit choice stamps data-theme, and the default
   "system" setting stamps nothing — so the same tokens are declared again
   behind the media query, guarded so an explicit light choice still wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #2a1810;
    --bg-alt: #352015;
    --surface: #3b2318;
    --ink: #f2e9dc;
    --ink-soft: #d3c1b0;
    --mute: #a08e80;
    --line: #4d3122;
    --line-strong: #6a4632;

    --accent: var(--cream);
    --accent-hover: #ffffff;
    --accent-ink: #2a1810;
    --mark: #e8c3c0;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 14px 40px rgba(0, 0, 0, .45);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, .6);
  }
}

/* -------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--util);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* A photograph drops into exactly the same box the illustration occupied. */
img.art { width: 100%; height: 100%; object-fit: cover; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}
[data-theme="dark"] :focus-visible { outline-color: var(--powder); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------- 3. Type */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.16;
  margin: 0 0 .45em;
  letter-spacing: .005em;
}

/* Sentence case, never all caps at large size. */
h1 { font-size: clamp(2.8rem, 6.5vw, 5.2rem); line-height: .98; letter-spacing: -.025em; text-wrap: balance; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* The script accent — one phrase at a time, never a whole paragraph. */
.script {
  font-family: var(--script);
  font-style: italic;
  font-weight: 300;
  font-size: 1.35em;
  line-height: 1.25;
}

.eyebrow {
  font-family: var(--util);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 .9rem;
}

.lede {
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  color: var(--ink-soft);
  max-width: 60ch;
}

.muted { color: var(--ink-soft); }
.small { font-size: 13.5px; }
.tiny { font-size: 12px; }

.label {
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
}
.label--mark { color: var(--mark); }

/* ------------------------------------------------------------ 4. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .95rem 1.6rem;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--util);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

.btn--quiet {
  padding: .3rem 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  letter-spacing: .1em;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn--quiet:hover { background: none; color: var(--ink); }

.btn--block { width: 100%; }
.btn--lg { min-height: 54px; padding: 1.05rem 2rem; font-size: 11.5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 38px;
  height: 38px;
  padding: 0 .6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: border-color .18s ease;
}
.icon-btn:hover { border-color: var(--line-strong); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }

.count {
  font-size: 10px;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.count[hidden] { display: none; }

/* ------------------------------------------------------------- 5. Header */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .8rem 1.2rem;
  background: var(--cocoa);
  color: var(--cream);
}
.skip-link:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 780px); margin-inline: auto; }

.announce {
  background: var(--cocoa);
  color: var(--cream);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  padding: .65rem 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 74px;
}

/* The logo: the wordmark alone, no icon, with one thin accent rule beneath
   it standing in for everything a mark would otherwise carry. */
.brand {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
}
.brand strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: .01em;
}
.brand__rule {
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 7px;
  background: var(--mark);
}

.nav { display: flex; align-items: center; gap: 1.6rem; margin-inline: auto; }
.nav__link {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav__link:hover { color: var(--ink); border-color: var(--line-strong); }
.nav__link[aria-current="page"] { color: var(--ink); border-color: var(--ink); }

.header__actions { display: flex; align-items: center; gap: .4rem; }
.menu-toggle { display: none; }

.mobile-nav { display: none; border-top: 1px solid var(--line); padding: .4rem 0 1rem; }
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block;
  padding: .8rem .1rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mobile-nav a:last-child { border-bottom: 0; }

/* --------------------------------------------------------------- 6. Hero
   The home page has its own editorial system, section 16 at the end. */

/* -------------------------------------------------------------- 7. Tiles */
.section { padding-block: var(--step); }
.section--tight { padding-block: calc(var(--step) * .55); }
.section--alt { background: var(--bg-alt); }
.section--cocoa { background: var(--cocoa); color: var(--cream); }
.section--cocoa .eyebrow, .section--cocoa .muted { color: #c9b6a6; }
.section--cocoa .btn--ghost { color: var(--cream); border-color: rgba(242, 233, 220, .35); }
.section--cocoa .btn--ghost:hover { border-color: var(--cream); color: var(--cream); }

/* Powder blue belongs to the rituals — the sleep and editorial colour, used as
   an accent section rather than a whole-page wash. Ink is fixed against the
   fixed ground, so it reads the same in both themes. */
.section--powder { background: var(--powder); color: #2e4257; }
.section--powder .eyebrow { color: #46617c; }
.section--powder h2, .section--powder .lede { color: #22344a; }
.section--powder .script { color: #46617c; }
.section--powder .btn {
  background: #22344a;
  border-color: #22344a;
  color: #eaf1f8;
}
.section--powder .btn--quiet {
  background: transparent;
  color: #22344a;
  border-color: rgba(34, 52, 74, .35);
}
.section--powder .btn--quiet:hover { border-color: #22344a; }

.page-head--powder {
  background: var(--powder);
  border-bottom-color: rgba(34, 52, 74, .18);
}
.page-head--powder h1, .page-head--powder .lede { color: #22344a; }
.page-head--powder .breadcrumbs, .page-head--powder .breadcrumbs a { color: #46617c; }

.ritual__shop { border-top: 1px solid var(--line); padding-top: 1.4rem; }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.6rem;
}
.section__head p { margin: 0; }

.grid { display: grid; gap: 1.4rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2vw; row-gap: 3rem; }
.grid--tight { gap: 3px; }

.card {
  border-top: 1px solid var(--line-strong);
  padding: 1.3rem 0 0;
}
.card h3 { font-size: 1.45rem; letter-spacing: -.01em; }


/* Instagram-style square grid, used on the home page */
.tilegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
/* The five grounds are brand constants, not theme colours, so on a cocoa page
   the cocoa tiles need an edge to sit against. */
[data-theme="dark"] .tilegrid > * { outline: 1px solid rgba(242, 233, 220, .09); outline-offset: -1px; }
.tilegrid .art { aspect-ratio: 1 / 1; width: 100%; }

.steps { counter-reset: step; display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; padding-left: 3.2rem; }
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1rem;
  font-family: var(--util);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--mark);
  padding-top: .35rem;
}
.steps strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.15; display: block; margin-bottom: .25rem; }
.steps span { color: var(--ink-soft); font-size: 13.5px; }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split__art .art { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--radius); }

/* ----------------------------------------------------------- 8. Sections */
.page-head {
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.4rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.page-head h1 {
  font-size: clamp(3.2rem, 8.5vw, 6.75rem);
  line-height: .95;
  max-width: 14ch;
  margin: 1rem 0 1.4rem;
}
.page-head .lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 1.1rem;
}
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.prose { color: var(--ink-soft); }
.prose h2, .prose h3 { color: var(--ink); }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul { padding-left: 1.1rem; }
.prose li { margin-bottom: .5rem; }

.callout {
  border-left: 2px solid var(--rose);
  background: color-mix(in srgb, var(--rose) 6%, transparent);
  padding: 1rem 1.2rem;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------ 9. Product */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.pdp__media { position: sticky; top: 96px; display: grid; gap: 3px; }
.pdp__media .art { aspect-ratio: 1 / 1; width: 100%; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.pdp__thumbs button { border: 0; padding: 0; background: none; cursor: pointer; }
.pdp__thumbs .art { aspect-ratio: 1 / 1; }
.pdp__thumbs button[aria-pressed="true"] .art { outline: 2px solid var(--ink); outline-offset: -2px; }

.pdp__price { font-family: var(--display); font-size: 1.6rem; margin: .6rem 0 0; }
.pdp__price small { font-family: var(--util); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-left: .6rem; }

.field-group { margin-top: 2rem; }
.field-group > .label { display: block; margin-bottom: .7rem; }

.ribbons { display: flex; flex-wrap: wrap; gap: .6rem; border: 0; padding: 0; margin: 0; }
.ribbons button {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.ribbons button[aria-pressed="true"] { border-color: var(--ink); }
.ribbons i { width: 12px; height: 12px; border-radius: 50%; display: block; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
}
.qty button { width: 36px; height: 38px; border: 0; background: transparent; cursor: pointer; font-size: 1rem; }
.qty button:hover { background: var(--bg-alt); }
.qty span { min-width: 2rem; text-align: center; font-variant-numeric: tabular-nums; }

.msg-field { display: grid; gap: .4rem; }
.msg-field textarea { min-height: 96px; }
.msg-count { font-size: 11px; color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; }
.msg-count.is-full { color: var(--rose); }

.buy-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.8rem; }
.buy-row .btn { flex: 1; min-width: 200px; white-space: nowrap; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec-table th, .spec-table td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { font-weight: 400; color: var(--mute); width: 40%; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; padding-top: .95rem; }

details.accordion { border-bottom: 1px solid var(--line); }
details.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
details.accordion summary::-webkit-details-marker { display: none; }
details.accordion summary::after { content: "+"; font-size: 1.1rem; color: var(--mute); }
details.accordion[open] summary::after { content: "–"; }
details.accordion .accordion__body { padding-bottom: 1.2rem; color: var(--ink-soft); font-size: 14px; }

/* --------------------------------------------------------------- 10. Cart */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(42, 24, 16, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.drawer[hidden], .scrim[hidden] { display: none; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  transform: translateX(102%);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}
.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.drawer__head h2 { margin: 0; font-size: 1.15rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; }
.drawer__foot { border-top: 1px solid var(--line); padding: 1.2rem 1.4rem 1.5rem; }

.line-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.line-item:first-child { border-top: 0; padding-top: 0; }
.line-item__media { align-self: start; }
.line-item__media .art { aspect-ratio: 1 / 1; width: 100%; }
.line-item__title { font-family: var(--display); font-size: 1rem; }
.line-item__meta { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.line-item__row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .6rem; }
.line-item .qty button { width: 30px; height: 30px; }
.line-item .qty span { min-width: 1.6rem; font-size: 13px; }

/* The handwritten message, shown as it will be written */
.written {
  font-family: var(--script);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--ink);
  background: color-mix(in srgb, var(--powder) 22%, transparent);
  border-left: 2px solid var(--powder);
  padding: .55rem .8rem;
  margin-top: .5rem;
}
[data-theme="dark"] .written { background: rgba(175, 201, 223, .12); }

.link-quiet {
  border: 0;
  background: none;
  padding: 0;
  color: var(--mute);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.link-quiet:hover { color: var(--rose); }

.totals { display: grid; gap: .5rem; font-size: 13.5px; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; }
.totals .totals__grand {
  border-top: 1px solid var(--line);
  margin-top: .4rem;
  padding-top: .7rem;
  font-family: var(--display);
  font-size: 1.15rem;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.cart-summary { position: sticky; top: 96px; }

.promo-row { display: flex; gap: .5rem; margin: 1.2rem 0; }
.promo-row input { flex: 1; min-width: 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 80;
  transform: translate(-50%, 130%);
  opacity: 0;
  pointer-events: none;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  background: var(--cocoa);
  color: var(--cream);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: var(--shadow);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
}
.toast.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

.empty {
  padding: 3rem 1rem;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------ 11. Forms */
input[type="text"], input[type="email"], input[type="search"], select, textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
textarea { min-height: 120px; resize: vertical; font-family: var(--util); }
select { cursor: pointer; }

.form-grid { display: grid; gap: 1.1rem; }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-field { display: grid; gap: .35rem; }
.form-field > label {
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
}
.form-field .hint { font-size: 12px; color: var(--mute); }
.form-error { color: var(--rose); font-size: 12px; min-height: 1em; }
[data-theme="dark"] .form-error { color: #e8c3c0; }

.choice-row { display: grid; gap: .6rem; }
.choice-row label {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13.5px;
}
.choice-row label:has(input:checked) { border-color: var(--ink); }
.choice-row input { margin-top: .25rem; accent-color: var(--cocoa); }
.choice-row strong { font-weight: 400; font-family: var(--display); font-size: 1rem; display: block; }
.choice-row span { color: var(--ink-soft); }


/* ----------------------------------------------------------- 12. Footer */
.site-footer {
  background: var(--cocoa);
  color: var(--cream);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.site-footer .brand span { color: #a68d7c; }
.site-footer h3 {
  font-family: var(--util);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #a68d7c;
  margin-bottom: 1rem;
}
.site-footer a { color: #ece0d2; text-decoration: none; font-size: 13.5px; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 2.5rem; }
.footer__links { display: grid; gap: .55rem; }
.footer__brand p { color: #bda897; font-size: 13.5px; max-width: 34ch; margin-top: 1rem; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(242, 233, 220, .16);
  font-size: 11px;
  letter-spacing: .1em;
  color: #a68d7c;
}

/* -------------------------------------------------------- 13. Utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.cluster { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.stack > * + * { margin-top: var(--gap, 1rem); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.measure { max-width: 62ch; }

.noscript {
  padding: 1rem;
  background: var(--powder);
  color: #2e4257;
  text-align: center;
  font-size: 13px;
}

/* ------------------------------------------------------- 14. Responsive */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header__actions { margin-left: auto; }
  .pdp { grid-template-columns: 1fr; }
  .pdp__media { position: static; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .split { grid-template-columns: 1fr; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

@media (max-width: 640px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: 1fr; }
  .form-grid--2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 420px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

@media print {
  .site-header, .site-footer, .drawer, .scrim, .announce, .toast { display: none !important; }
}

/* ------------------------------------------- 15. Atmosphere and motion
   The "unreal" layer: grain, depth, light and one well-orchestrated reveal.
   All of it is decoration over a page that works without it: nothing here is
   load-bearing, JavaScript only ever removes the veil, and reduced motion
   turns the whole layer off. */

/* Film grain over everything, at a level you feel rather than see. It is what
   stops flat digital colour looking flat. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { opacity: .05; }

/* The box floats in a pool of lamp light. */
.h-hero__art { position: relative; overflow: hidden; }
.h-hero__art::before {
  /* Lamp light: a warm pool behind the box, breathing very slowly. */
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(closest-side at 50% 42%, rgba(255, 244, 224, .5), rgba(255, 244, 224, 0) 70%);
  animation: lamp 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.h-hero__art .art { position: relative; }
.h-hero__art svg.art { animation: drift 8s ease-in-out infinite; }
@keyframes lamp {
  0%, 100% { opacity: .55; }
  50% { opacity: .9; }
}
@keyframes drift {
  0%, 100% { transform: translateY(0) scale(1.02); }
  50% { transform: translateY(-10px) scale(1.02); }
}

/* Entrance: the hero introduces itself one line at a time. Runs once, on
   load, CSS only. */
.js .h-hero__copy > * {
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) both;
}
.js .h-hero__copy > *:nth-child(1) { animation-delay: .05s; }
.js .h-hero__copy > *:nth-child(2) { animation-delay: .15s; }
.js .h-hero__copy > *:nth-child(3) { animation-delay: .3s; }
.js .h-hero__copy > *:nth-child(4) { animation-delay: .45s; }
.js .h-hero__copy > *:nth-child(5) { animation-delay: .6s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal: sections surface as you reach them. The .js guard means a
   browser without JavaScript sees everything, immediately. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal.in-view { opacity: 1; transform: none; }

.tilegrid > * { transition: transform .5s ease; }
.tilegrid > *:hover { transform: scale(1.015); }

.btn { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .25s ease, box-shadow .25s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(59, 35, 24, .18); }
.btn--quiet:hover { transform: none; box-shadow: none; }

/* The closing cocoa sections get the lamp treatment too: a faint warm centre
   so the dark reads as evening, not as a slab. */
.section--cocoa { position: relative; overflow: hidden; }
.section--cocoa > * { position: relative; z-index: 1; }
.section--cocoa::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 50% 0%, rgba(242, 233, 220, .08), transparent 60%);
  pointer-events: none;
}

/* Section headings at poster scale, matching the home page. */
h2 { font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }

/* The whole layer stands down for anyone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .h-hero__art::before, .h-hero__art svg.art { animation: none; }
  .js .h-hero__copy > * { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------- 16. Home
   The home page as an editorial spread, after the Figma direction: type at
   poster scale, full-bleed grounds, an asymmetric rail. Brand faces and
   palette throughout. Powder is the page's one powder ground and clay rose
   is only ever a mark, the same discipline the rest of the site keeps. */
.home {
  /* Generous at every width, but the content never runs wider than 1400px. */
  --h-pad: max(clamp(1.25rem, 6vw, 6rem), calc((100% - 1400px) / 2));
}
.home > section { padding-inline: var(--h-pad); }

.h-eyebrow {
  font: 400 10px/1.4 var(--util);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 1.1rem;
}
.h-label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 1rem;
}
.h-title {
  font-size: clamp(2.6rem, 9vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

.h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(100%, 340px);
  min-height: 54px;
  padding: 0 1.2rem 0 1.4rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  font: 500 11px/1 var(--util);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .18s ease, transform .25s ease;
}
.h-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-2px); }
.h-link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid currentColor;
  font: 400 11px/1 var(--util);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.h-btn svg, .h-link svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform .25s ease;
}
.h-btn:hover svg, .h-link:hover svg { transform: translateX(4px); }

/* The drawings sit on the same ground as their section, so feather their
   square edge away rather than let the lamp glow draw a faint box. */
.h-hero__art .art, .h-ritual__art .art {
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
}

/* Hero: powder, poster type, the box in lamp light. Fixed colours, since the
   box is always shot on powder whichever theme the reader prefers. */
.h-hero { background: var(--powder); color: #22344a; padding-top: clamp(3rem, 9vw, 5rem); }
.h-hero .h-eyebrow { color: #46617c; }
.h-hero h1 {
  font-size: clamp(3.3rem, 14vw, 7rem);
  line-height: .94;
  letter-spacing: -.025em;
  margin: 0;
  color: #22344a;
}
.h-hero h1 .script {
  display: block;
  font-size: 1.12em;
  line-height: .95;
  padding-left: .55em;
  color: var(--rose);
}
.h-hero__note { font-size: 15px; line-height: 1.55; color: #2e4257; max-width: 34ch; margin: 1.6rem 0 1.8rem; }
.h-hero .h-btn { background: var(--cocoa); border-color: var(--cocoa); color: var(--cream); }
.h-hero .h-btn:hover { background: #4d3122; border-color: #4d3122; }
.h-micro { font-size: 11.5px; letter-spacing: .03em; color: #46617c; margin: .9rem 0 0; }
.h-hero__art { aspect-ratio: 1 / 1; margin: 2rem calc(-1 * var(--h-pad)) 0 2.5rem; }
.h-hero__art .art { width: 100%; height: 100%; }

/* "Instead of flowers", at the size of a shop window. */
.h-manifesto {
  position: relative;
  overflow: hidden;
  background: var(--cocoa);
  color: var(--cream);
  padding-block: clamp(4.5rem, 11vw, 8rem);
}
.h-manifesto::before, .h-ritual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 30% 0%, rgba(242, 233, 220, .08), transparent 60%);
  pointer-events: none;
}
.h-manifesto > *, .h-ritual > * { position: relative; }
.h-manifesto .h-eyebrow, .h-ritual .h-eyebrow { color: #c9b6a6; }
.h-giant {
  font-size: clamp(4.2rem, 19vw, 11rem);
  line-height: .88;
  letter-spacing: -.035em;
  max-width: 10ch;
  margin: 0;
  color: var(--cream);
}
.h-giant .script { display: block; font-size: 1.14em; line-height: .9; color: #e8c3c0; padding-left: .4em; }
.h-manifesto__note {
  max-width: 30ch;
  margin: 2.6rem 0 0 auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(242, 233, 220, .3);
  font-size: 15px;
  line-height: 1.55;
  color: #e7dccd;
}

/* The box: a big image beside what is in it. */
.h-box { background: var(--bg); padding-block: clamp(4.5rem, 10vw, 7.5rem); }
.h-box__head { margin-bottom: 2.2rem; }
.h-box__art { aspect-ratio: 1 / 1; overflow: hidden; margin-inline: calc(-1 * var(--h-pad)); }
.h-box__art .art { width: 100%; height: 100%; }
.h-box__list { padding-top: 2.4rem; }
.h-box__list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.h-box__list li { display: grid; gap: .2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.h-box__list strong { font: 400 1.3rem/1.2 var(--display); }
.h-box__list li span { font-size: 12.5px; color: var(--ink-soft); }
.h-box__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin: 2rem 0 1.6rem; }
.h-box__buy .h-btn { width: auto; flex: 1 1 200px; }
.h-price { font: 400 2.6rem/1 var(--display); }

/* The pieces: a swipeable rail on a phone, a staggered spread on a desk. */
.h-pieces { background: var(--bg); padding-block: clamp(4.5rem, 10vw, 7.5rem); }
.h-pieces__note { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); max-width: 44ch; margin: 1.2rem 0 0; }
.h-swipe { margin: 2rem 0 0; }
.h-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--h-pad);
  scrollbar-width: none;
  margin: 1rem calc(-1 * var(--h-pad)) 2.4rem;
  padding: 0 var(--h-pad) .5rem;
}
.h-rail::-webkit-scrollbar { display: none; }
.h-piece { flex: 0 0 78%; scroll-snap-align: start; }
.h-piece__art { aspect-ratio: 4 / 5; overflow: hidden; }
.h-piece__art .art { width: 100%; height: 100%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.h-piece:hover .h-piece__art .art { transform: scale(1.04); }
.h-piece__copy { display: grid; gap: .25rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line-strong); }
.h-piece__copy h3 { font-size: 1.45rem; margin: 0; }
.h-piece__copy p { font-size: 12px; color: var(--ink-soft); margin: 0; }
.h-piece__buy { display: flex; align-items: center; justify-content: space-between; margin-top: .7rem; }
.h-price-sm { font: 400 1.15rem/1 var(--display); }

/* Delivery, said once and plainly. */
.h-dispatch {
  display: grid;
  gap: 1.6rem;
  background: var(--bg-alt);
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
.h-dispatch .h-title { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.h-copy { font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; margin: 1rem 0 0; }
.h-dispatch .h-link { justify-self: start; }

/* The night reset: each step a little dimmer than the last, the way the
   lights go down, then goodnight. */
.h-ritual {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 2.5rem;
  background: var(--cocoa);
  color: var(--cream);
  padding-block: clamp(4.5rem, 10vw, 7.5rem);
}
.h-ritual__art { aspect-ratio: 1 / 1; width: min(100%, 520px); }
.h-ritual__art .art { width: 100%; height: 100%; }
.h-steps { list-style: none; margin: 0; padding: 0; }
.h-steps li {
  font: 400 clamp(1.9rem, 7.2vw, 3.4rem)/1.08 var(--display);
  letter-spacing: -.015em;
  margin-bottom: .4em;
  text-wrap: balance;
}
.h-steps li:nth-child(2) { opacity: .84; }
.h-steps li:nth-child(3) { opacity: .7; }
.h-steps li:nth-child(4) { opacity: .58; }
.h-goodnight { margin: .4rem 0 2.6rem; }
.h-goodnight .script { font-size: clamp(2.8rem, 10vw, 5rem); line-height: 1; color: #e8c3c0; }
.h-ritual__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; }
.h-ritual .h-btn { background: var(--cream); border-color: var(--cream); color: var(--cocoa); }
.h-ritual .h-btn:hover { background: var(--linen); border-color: var(--linen); }
.h-ritual .h-link { color: var(--cream); }

@media (min-width: 800px) {
  .h-hero {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    min-height: min(860px, calc(100vh - 110px));
    padding-top: 0;
    padding-right: 0;
  }
  .h-hero__copy { align-self: center; padding-block: 4rem; }
  .h-hero__art { aspect-ratio: auto; margin: 0; }
  .h-hero h1 { font-size: clamp(4rem, 5.6vw, 6.25rem); }

  .h-manifesto { min-height: 600px; }
  .h-manifesto__note { margin-top: -4rem; }

  .h-box { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); column-gap: 5vw; }
  .h-box__head { grid-column: 1 / -1; margin-bottom: 3.5rem; }
  .h-box__art { margin: 0; aspect-ratio: 5 / 4; }
  .h-box__list { align-self: end; padding-top: 0; }

  .h-pieces__intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; }
  .h-pieces__note { justify-self: end; margin: 0; }
  .h-swipe { display: none; }
  .h-rail {
    display: grid;
    grid-template-columns: 1.2fr .9fr 1.1fr .85fr;
    gap: 2vw;
    align-items: start;
    overflow: visible;
    margin: 4rem 0 3.5rem;
    padding: 0;
  }
  /* The staggered drop belongs to a full row of four; a pair stays level. */
  .h-rail > .h-piece:nth-child(2), .grid--4 > .h-piece:nth-child(2) { padding-top: 7rem; }
  .h-rail > .h-piece:nth-child(3), .grid--4 > .h-piece:nth-child(3) { padding-top: 2.5rem; }
  .h-rail > .h-piece:nth-child(4), .grid--4 > .h-piece:nth-child(4) { padding-top: 9rem; }

  .h-dispatch { grid-template-columns: .6fr 1.5fr .6fr; gap: 5vw; align-items: start; }
  .h-dispatch .h-link { align-self: end; }

  .h-ritual { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; column-gap: 6vw; }
  .h-ritual__art { order: 2; width: 100%; }
}

.h-ship { font-size: 11px; letter-spacing: .03em; color: var(--mute); margin: .55rem 0 0; }
.h-piece__blurb { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: .2rem 0 0; }