/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   Most layout here is intrinsically responsive already (auto-fit
   grids, clamp type). This file handles the structural switches
   — chiefly the navigation — and the mobile-first details that
   matter for QR traffic arriving on a phone.
   ============================================================ */

/* ---- Navigation ----
   The shop links (Shop Jewelry, Shop Keepsakes, Fragrances...) show
   in the header from laptop width; below that the panel menu lists
   them first. The menu button stays at every width, because it also
   holds everything that is not in the header (2026-10-10). */
.menu-btn { display: grid; }

@media (max-width: 1099px) {
  .nav { display: none; }
}

/* (laptop tightening lives at the end of this file so it wins) */

/* ---- Tablet ---- */
@media (max-width: 900px) {
  :root { --track-house: 0.2em; }

  .stage::after { display: none; }   /* connector only makes sense in a row */
  .stage { padding-top: 2.2rem; }

  .footer-top { grid-template-columns: repeat(auto-fit, minmax(min(150px, 45%), 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- Phone ---- */
@media (max-width: 640px) {
  :root {
    --space-room: 3.4rem;
    --shell: 92vw;
  }

  .hero__inner { padding-top: 6rem; padding-bottom: 6rem; }

  /* Buttons go full width so they're easy to hit one-handed. */
  .btn-row .btn { width: 100%; }
  .btn-row { gap: 0.6rem; }
  .btn-row--keep-inline .btn { width: auto; }

  .page-head { padding-top: 6.5rem; }

  /* Detail page: leave room for the sticky buy bar. */
  .detail { padding-bottom: 5rem; }

  .feature__media { aspect-ratio: 4 / 4.4; }

  .facts__row { grid-template-columns: 1fr; gap: 0.15rem; }

  .receipt .r-row { grid-template-columns: 1fr; gap: 0.1rem; }

  .footer-base { flex-direction: column; align-items: flex-start; }

  /* Two doors per row is too tight on a phone — stack them. */
  .doors { grid-template-columns: 1fr; }

  .modal { width: 94vw; max-height: 90vh; }

  .drawer { width: 100%; }
}

/* ---- Very small ---- */
@media (max-width: 380px) {
  .mark-glyph    { height: 28px; }
  .mark-wordmark { height: 17px; }
  .header-inner  { gap: 0.4rem; }
  .header-tools  { gap: 0; }
  .gallery__thumbs button { width: 62px; height: 74px; }
}

/* ---- Short viewports (landscape phones) ---- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 5rem 3rem; }
  .hero__cue { display: none; }
  .hero-spiral { width: 92px; }
}

/* ---- Wide screens: stop lines getting too long ---- */
@media (min-width: 1700px) {
  :root { --shell: 1500px; }
}

/* ---- Devices without hover (phones, tablets) ----
   Hover-only affordances would otherwise be invisible or stuck. */
@media (hover: none) {
  .piece__media .alt-shot { display: none; }
  .piece:hover .piece__media img { transform: none; }
  .piece__media::after { border-color: var(--gold-whisper); }
  .btn--text::after { transform: scaleX(1); opacity: 1; }
}

/* ---- High contrast ---- */
@media (prefers-contrast: more) {
  :root {
    --gold-whisper: rgba(200, 154, 60, 0.55);
    --ink-light-soft: #ddd6ca;
    --ink-soft: #2e2822;
  }
  .btn--line, .btn--quiet { border-width: 2px; }
  .piece__media::after { border-color: var(--gold); }
}

/* ---- Forced colors (Windows high contrast) ---- */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .piece__media::after, .frame--ringed::after { border-color: CanvasText; }
  .flow__dot::after { background: Highlight; }
}

/* ============================================================
   READABILITY & RHYTHM PASS
   ------------------------------------------------------------
   This final layer is intentionally shared by every page. It
   preserves the House's quiet visual language while making all
   labels, controls, supporting copy and content boundaries easy
   to read at a glance.
   ============================================================ */

/* Small caps are decorative in voice, but still need to be readable. */
body :where(p, a, button, label, li, dt, dd, span, input, select, textarea, figcaption) {
  font-size: max(0.8125rem, 1em, 13px) !important;
}

body h3 { font-size: max(1rem, 1em) !important; }

:where(
  .house-label, .signoff, .nav a, .mobile-menu .more-list a,
  .footer-col h3, .footer-base, .motion-toggle, .powered,
  .btn, .btn--sm, .badge, .pill, .crumbs,
  .field label, .choice__label, .feature__specs dt,
  .scent-card__journey dt, .receipt dt,
  .desk-tab, .desk-stat__label, .entry__meta, .interest__n
) {
  font-size: max(0.82rem, 13px) !important;
  line-height: 1.45;
}

/* Product metadata and helper copy should never drop into fine print. */
:where(
  .piece__status, .piece__meta, .piece__price, .piece__note,
  .feature__specs dd, .detail__meta, .gallery__count,
  .scent-card__meta, .scent-card__journey dd,
  .hand-step p, .field-help, .check-row .sub,
  .receipt dd, .entry__what, .desk-notice
) {
  font-size: max(0.9rem, 14px) !important;
  line-height: 1.6;
}

/* Comfortable, consistent targets for every compact control. */
:where(.icon-btn, .pill, .motion-toggle, .btn--sm) {
  min-width: 44px;
  min-height: 44px;
}

.nav a {
  padding-block: 0.75rem;
  letter-spacing: 0.14em;
}

.footer-base a,
.crumbs a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Footer column links stack one per line (inline-flex let short
   ones pair up: "Our StoryFrom the House"). */
.footer-col a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.btn,
.pill,
.badge {
  letter-spacing: 0.12em;
}

.btn--sm {
  padding: 0.78rem 1.35rem;
}

/* Stronger surfaces stop text and sections disappearing into washes. */
.panel,
.letters,
.modal,
.drawer {
  border-color: var(--edge, var(--gold-whisper));
  box-shadow: var(--lift-sm);
}

.lit-night .panel,
.lit-night .letters {
  background-color: #100e0c;
}

.room {
  isolation: isolate;
}

.room + .room {
  border-top: 1px solid var(--edge, var(--gold-whisper));
}

.room > .shell,
.page-head > .shell {
  position: relative;
  z-index: 2;
}

.lede,
.prose,
.note,
.acc-panel .inner,
.empty,
.status {
  opacity: 1;
}

/* Keep content spacing coherent within common text groups. */
:where(.split__body, .feature__body, .detail__buy, .panel) > :where(h1, h2, h3) + :where(p, .lede, .prose) {
  margin-top: 0.85rem;
}

:where(.split__body, .feature__body, .detail__buy) > * + * {
  margin-top: 1.15rem;
}

@media (max-width: 640px) {
  :root {
    --space-room: 4rem;
    --space-md: 1.25rem;
  }

  body { line-height: 1.7; }

  .shell,
  .shell--narrow,
  .shell--read { width: min(90vw, 100% - 2rem); }

  .mark-glyph    { height: 34px; }
  .mark-wordmark { height: 24px; }
  .mark-lockup   { width: 112px; }

  .mobile-menu .rooms-list a { min-height: 56px; }
  .mobile-menu .more-list a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .page-head { padding-bottom: 2.5rem; }
  .room + .room { border-top-color: var(--edge, var(--gold-whisper)); }
}

/* ---- Laptop widths: six nav links + three header icons ----
   Last in the file so it out-ranks the touch-target nav rule above. */
@media (min-width: 1100px) and (max-width: 1399px) {
  .site-header .nav { gap: 1.05rem; }
  /* (!important: the readability layer above sets a 1em floor with !important) */
  .site-header .nav a { font-size: 13px !important; letter-spacing: 0.1em; }
}

/* ---- The smallest phones (320px): the moon glyph alone carries the
   mark; the link keeps the House name for screen readers. ---- */
@media (max-width: 340px) {
  .site-header .mark-wordmark { display: none; }
}

/* ---- Readable gold on light backgrounds (accessibility, 2026-10-08) ----
   Pale --gold text on ivory measured about 1.9:1, far below the 4.5:1
   that small text needs. Where the nearest background is light, gold
   TEXT uses the deeper burnished gold from the same palette. @scope stops
   at anything dark inside a light page (photo banners, night sections,
   drawers, the footer), so gold there is untouched. Gold buttons and
   fills keep their colour; only lettering changes. */
@scope (.lit-day, .lit-dawn) to (.lit-night, .room-banner, .letters, .drawer, .site-footer, .mobile-menu, .buy-bar, .modal, .piece__media) {
  .house-label,
  .signoff,
  .btn--text,
  .btn--line:not(:hover):not(:focus-visible) { color: var(--gold-burnished); }
  .btn--line:not(:hover):not(:focus-visible) { border-color: var(--gold-burnished); }
  .house-label--ruled::before { background: linear-gradient(90deg, transparent, var(--gold-burnished)); }
  .status--available { color: #4f6b42; }
}

/* "One of a kind" sits on a dark glass pill over the photograph in every
   room, so it keeps the light champagne gold even on daylit pages. */
.piece__flags .badge--ooak { color: var(--gold-champagne); }