/* ==========================================================================
   Timeless Jewels: global stylesheet
   Direction: "The Charm Case" (translated), ivory/marble case interior,
   brass/gold hardware, warm neutral light. Shared across every page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Prata";
  src: url("assets/fonts/prata-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/public-sans-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/public-sans-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Case interior: ivory and marble, warm neutral light */
  --case-ivory: #f8f4ec;
  --case-marble: #efe8da;
  --case-marble-deep: #e2d8c3;
  --case-vein: #d8cbae;

  /* Brass and gold hardware */
  --brass-light: #d9b978;
  --brass: #b3894f;
  --brass-deep: #8a6636;
  --brass-ink: #5c4523;
  --brass-sheen: #c7a568;

  /* Ink */
  --ink: #2c2620;
  --ink-soft: #5a5045;
  --ink-faint: #8c8172;

  /* Glass and shadow */
  --glass-sheen: rgba(255, 255, 255, 0.55);
  --case-shadow: rgba(44, 38, 32, 0.16);
  --case-shadow-soft: rgba(44, 38, 32, 0.08);

  /* Type */
  --font-display: "Prata", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale */
  --step-eyebrow: 0.8125rem;
  --step-body: 1rem;
  --step-body-lg: 1.125rem;
  --step-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-h2: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
  --step-h1: clamp(2.25rem, 1.85rem + 1.9vw, 3.25rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius: a stamped plate has near-square corners, not a soft app radius */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Motion */
  --ease-case: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-open: 420ms;
  --dur-sweep: 620ms;

  --container-max: 72rem;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* Smooth scroll for the Contact nav's #footer jump (and any other in-page
   anchor). Opt-in under no-preference only, rather than smooth-by-default
   with a reduce override, so a reduced-motion visitor gets the browser's
   plain instant jump, never a fallback motion path. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--case-ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Brass button / case CTA slot
   -------------------------------------------------------------------------- */

.brass-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: linear-gradient(165deg, var(--brass-sheen), var(--brass) 75%);
  color: #241a0c;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 8px var(--case-shadow-soft);
  transition:
    transform 180ms var(--ease-case),
    box-shadow 180ms var(--ease-case),
    background 180ms var(--ease-case);
  /* Text weight/spacing never change on hover, that's not the cause of
     the letter jitter reported here. The real culprit: this element
     animates transform alongside a repainted background/box-shadow, so
     the browser re-rasterizes (and re-hints) the label glyphs on every
     frame instead of compositing a stable text layer, which reads as
     individual letters (the "N" in "Now" especially) swimming in place.
     will-change promotes the button to its own layer so the label is
     rasterized once and only translated, not redrawn, while it lifts. */
  will-change: transform;
}

.brass-button:hover,
.brass-button:focus-visible {
  background: linear-gradient(165deg, var(--brass), var(--brass-deep) 75%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 5px 14px var(--case-shadow-soft);
}

.brass-button:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

/* Smart-scroll: hides on scroll down, reappears on scroll up (see
   script.js). Uses --ease-case, the site's general-purpose easing already
   used for hovers, tray sweeps, and card lifts, not --reveal-ease, which
   is scoped to the one-time Home hero entrance specifically; this motion
   recurs constantly during a session, so it takes the site's standing
   default rather than the entrance-only curve. */
.site-header {
  border-bottom: 1px solid var(--case-vein);
  background: var(--case-ivory);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: transform 320ms var(--ease-case);
}

.site-header--hidden {
  transform: translateY(-100%);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

/* Sized from a tightly-cropped variant (logo-header.png, ~3.83:1 content
   aspect, no export padding), not the master transparent export, which
   carried ~24% empty canvas top/bottom and ~11% left/right; sizing the
   padded file made the box look right while the actual mark inside it
   stayed tiny. width leads on desktop, max-height is the real cap once
   the viewport is wide enough for clamp() to hit its ceiling; object-fit:
   contain guarantees the ratio holds either way, never stretched. */
/* ~19% larger than the original clamp (150/230/56px) across the board,
   the logo was reading small against the nav's own visual weight; mobile
   rule below is untouched, that sizing was tuned separately against the
   nav row's real available width at that breakpoint. */
.wordmark__logo {
  display: block;
  width: clamp(178px, 15vw, 275px);
  height: auto;
  max-height: 67px;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav__links {
  display: flex;
  gap: var(--space-5);
}

.site-nav__links a {
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease-case), border-color 160ms var(--ease-case);
}

.site-nav__links a:hover,
.site-nav__links a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

.site-nav__links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--brass-deep);
}

.site-nav__mobile {
  display: none;
}

/* Mobile: nav collapses into a native details/summary compartment, the same
   open affordance the page uses everywhere else, rather than a bespoke
   hamburger pattern. */
@media (max-width: 720px) {
  .site-nav__links {
    display: none;
  }

  .site-nav__mobile {
    display: block;
  }

  .site-nav__mobile summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.9375rem;
    color: var(--ink-soft);
    border: 1px solid var(--case-vein);
    border-radius: var(--radius-sm);
    padding: 0.5em 0.9em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .site-nav__mobile summary::-webkit-details-marker {
    display: none;
  }

  .site-nav__mobile[open] summary {
    border-color: var(--brass);
  }

  .site-nav__mobile-panel {
    position: absolute;
    right: var(--space-5);
    margin-top: var(--space-2);
    background: var(--case-ivory);
    border: 1px solid var(--case-vein);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 28px var(--case-shadow);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 12rem;
  }

  .site-nav__mobile-panel a {
    text-decoration: none;
    color: var(--ink-soft);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
  }

  .site-nav__mobile-panel a[aria-current="page"] {
    color: var(--ink);
    background: var(--case-marble);
  }
}

/* --------------------------------------------------------------------------
   Site footer

   Now doubles as the site's "Contact" destination (nav links here instead
   of a separate page), so it needs real hierarchy rather than three equal
   quiet columns: a brass CTA band leads (the boldest thing here, reusing
   the same material as the Book compartment elsewhere), contact details
   read at real weight, brand blurb and legal recede to the bottom tier.
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--case-marble);
  border-top: 1px solid var(--case-vein);
  margin-top: var(--space-9);
  /* The nav's Contact link jumps here (#footer). Without this, the
     browser's anchor scroll lands the footer's top edge at viewport y:0,
     directly under the sticky header, cutting off the CTA heading, the
     mobile header wraps to two lines at 106.5px, so this clears both. */
  scroll-margin-top: 7rem;
}

.footer-cta {
  background: linear-gradient(155deg, var(--brass-light), var(--brass) 55%, var(--brass-deep));
}

.footer-cta__inner {
  padding-block: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.footer-cta__eyebrow {
  font-size: var(--step-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #3a2a13;
}

.footer-cta h2 {
  margin-top: var(--space-2);
  max-width: 22ch;
  font-size: var(--step-h2);
  color: #241a0c;
}

.footer-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.footer-cta__phone {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #241a0c;
  text-decoration: none;
  border-bottom: 1px solid #3a2a13;
}

.footer-cta__phone:hover,
.footer-cta__phone:focus-visible {
  border-bottom-color: #241a0c;
}

/* Brand row: the logo owns its own full-width row above the three
   columns, rather than competing as a fourth kind of column content.
   Structural fix, not a spacing patch, for a column whose content was
   categorically shorter than Visit/Reach us, not just under-spaced.
   Split into two halves, logo left / description right, vertically
   centered against each other so the row reads as one composed unit. */
.site-footer__brand-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-7) var(--space-6);
  border-bottom: 1px solid var(--case-vein);
}

.site-footer__brand-logo {
  display: flex;
  justify-content: center;
}

.site-footer__brand-tagline {
  color: var(--ink-faint);
  font-size: 0.8125rem;
  line-height: 1.6;
  max-width: 42ch;
}

.site-footer__grid {
  padding-block: var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-6);
}

.site-footer__col h3 {
  font-size: var(--step-h3);
  margin-bottom: var(--space-3);
  color: var(--ink);
}

.site-footer__col address {
  color: var(--ink-soft);
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Address, hours, and the walk-in note are three distinct groups, not one
   continuous block, spaced like paragraphs rather than related lines.
   Hours stay at full ink weight (the primary line a visitor needs); the
   walk-in caveat is real but secondary, demoted below it. */
.site-footer__hours {
  margin-top: var(--space-4);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
}

.site-footer__note {
  margin-top: var(--space-4);
  color: var(--ink-faint);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__links a {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--case-vein);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--brass-deep);
  border-bottom-color: var(--brass);
}

/* Noticeably larger than the header's logo (max-height 56px there); now
   in its own full-width row rather than a grid column, so its size reads
   as a deliberate brand moment, not scaled to fit a column track. */
.site-footer__wordmark {
  display: block;
  width: clamp(190px, 17vw, 270px);
  height: auto;
  max-height: 72px;
  object-fit: contain;
}

.site-footer__bottom {
  border-top: 1px solid var(--case-vein);
  padding-block: var(--space-4);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-footer__bottom-inner p {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin: 0;
}

.site-footer__quicklinks {
  display: flex;
  gap: var(--space-4);
}

.site-footer__quicklinks a {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.site-footer__quicklinks a:hover,
.site-footer__quicklinks a:focus-visible {
  color: var(--brass-deep);
}

/* ==========================================================================
   Services page
   ========================================================================== */

.services-intro {
  padding-block: var(--space-8) var(--space-7);
  border-bottom: 1px solid var(--case-vein);
}

.services-intro__eyebrow {
  font-size: var(--step-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 600;
}

.services-intro h1 {
  font-size: var(--step-h1);
  margin-top: var(--space-3);
  max-width: 22ch;
}

.services-intro__lede {
  margin-top: var(--space-4);
  max-width: 46ch;
  font-size: var(--step-body-lg);
  color: var(--ink-soft);
}

.services-intro__meta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.services-intro__hours {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.services-intro__hours strong {
  color: var(--ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Trays: the case drawers that replace a flat price list.
   Built on native details/summary for keyboard, screen reader, and no-JS
   support; JS only adds the glass-sweep flourish on open.
   -------------------------------------------------------------------------- */

.services-trays {
  padding-block: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.tray {
  background: var(--case-marble);
  border: 1px solid var(--case-vein);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tray__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  position: relative;
  isolation: isolate;
}

.tray__summary::-webkit-details-marker {
  display: none;
}

.tray__number {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: #241a0c;
  background: linear-gradient(155deg, var(--brass-light), var(--brass) 55%, var(--brass-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 2px rgba(0, 0, 0, 0.18);
  /* Hand-pressed honesty: a stamped digit, not a flat vector numeral */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.tray__heading {
  flex: 1 1 auto;
}

.tray__heading h2 {
  font-size: var(--step-h3);
}

.tray__count {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.tray__chevron {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brass-deep);
  transition: transform 320ms var(--ease-case);
}

.tray[open] > .tray__summary .tray__chevron {
  transform: rotate(180deg);
}

/* Glass-sweep: a light reflection crossing the summary bar on open.
   Disabled entirely under prefers-reduced-motion, see below. */
.tray__summary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 0%,
    var(--glass-sheen) 45%,
    transparent 60%
  );
  transform: translateX(-120%);
  opacity: 0;
}

.tray.is-sweeping > .tray__summary::after {
  animation: case-sweep var(--dur-sweep) var(--ease-case);
}

@keyframes case-sweep {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

.tray__content {
  padding: 0 var(--space-5) var(--space-5);
}

.tray__note {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
  max-width: 60ch;
}

.ticket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-4);
}

/* Shared case materials: ivory ground, hairline border, soft elevation.
   Every small card on the site (ticket, review, case slot) is built on
   this, so the case reads as one physical material throughout. */
.case-item {
  background: var(--case-ivory);
  border: 1px solid var(--case-vein);
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 10px var(--case-shadow-soft);
  transition: box-shadow 180ms var(--ease-case), transform 180ms var(--ease-case);
}

.case-item:hover {
  box-shadow: 0 8px 20px var(--case-shadow);
  transform: translateY(-2px);
}

.ticket-card {
  padding: var(--space-4);
}

.ticket-card__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  margin-bottom: var(--space-2);
}

.ticket-card__figures {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-variant-numeric: tabular-nums;
}

.ticket-card__price {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--brass-deep);
}

.ticket-card__duration {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.ticket-card__deposit {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.ticket-card__extra {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--case-vein);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Policies compartment: quieter register, no sweep, no hover lift.
   -------------------------------------------------------------------------- */

.services-policies {
  padding-block: 0 var(--space-8);
}

.policies-card {
  background: var(--case-marble);
  border: 1px solid var(--case-vein);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}

.policies-card h2 {
  font-size: var(--step-h3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* A small flat brass stamp, quieter than the tray numbers, marking this as
   its own compartment without a side-tab accent border. */
.policies-card h2::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--brass);
  transform: rotate(45deg);
}

.policies-card dl {
  display: grid;
  gap: var(--space-4);
}

.policies-card dt {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.policies-card dd {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Closing CTA slot (shared across pages)
   -------------------------------------------------------------------------- */

.closing-cta {
  padding-block: var(--space-8) var(--space-9);
  text-align: center;
  background: var(--case-marble);
  border-top: 1px solid var(--case-vein);
  border-bottom: 1px solid var(--case-vein);
}

.closing-cta h2 {
  font-size: var(--step-h2);
  max-width: 24ch;
  margin-inline: auto;
}

.closing-cta p {
  margin-top: var(--space-3);
  color: var(--ink-soft);
  max-width: 42ch;
  margin-inline: auto;
}

.closing-cta .brass-button {
  margin-top: var(--space-6);
  font-size: 1rem;
  padding: 0.95em 2em;
}

/* ==========================================================================
   Home page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero: asymmetric split, the studio photo carries the brand mark instead
   of a centered logo.

   The source photo itself cuts off "Jewels" at capture (verified against
   the raw file, not a crop artifact), and this box is always wider-per-
   height than the source's narrow portrait shape, so object-fit: cover
   only ever crops vertically here, never horizontally: the full clipped
   width renders at any object-position. The fix is a square frame (enough
   vertical crop range) with the window pushed down past the whole signage
   band, so neither word shows partially. The name is carried by the
   header wordmark and headline type instead.
   -------------------------------------------------------------------------- */

.hero {
  border-bottom: 1px solid var(--case-vein);
}

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-7);
}

.hero__media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 16px 40px var(--case-shadow);
  border: 6px solid var(--case-ivory);
  outline: 1px solid var(--case-vein);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tuned for welding-process.jpg (portrait 3:4): keeps the hands/tool/
     wrist action in frame, crops toward the hijab headroom above and the
     excess forearm/table below. */
  object-position: 50% 60%;
}

.hero__panel {
  padding-block: var(--space-4);
}

.hero__eyebrow {
  font-size: var(--step-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 600;
}

.hero__panel h1 {
  font-size: var(--step-h1);
  margin-top: var(--space-3);
  max-width: none;
}

/* Two-part composition: line two sits lower and shifts right, so it reads
   as a deliberate second beat, not a sentence that wrapped. */
.hero__line {
  display: block;
}

.hero__line--two {
  margin-top: 0.32em;
  padding-left: 2.4em;
}

/* A thin engraved-plate correction mark, brass not red, restrained rather
   than a scribble. Scoped to "clipped on." only, "not" stays intact since
   striking it would reverse the meaning. */
.hero__strike {
  position: relative;
  display: inline-block;
}

.hero__strike::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 55%;
  height: 1px;
  background: var(--brass-deep);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  animation: hero-strike-draw 320ms var(--reveal-ease) 1150ms forwards;
}

.hero__lede {
  margin-top: var(--space-4);
  max-width: 42ch;
  font-size: var(--step-body-lg);
  color: var(--ink-soft);
}

.hero__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Hero-only: larger than the header's Book Now, the primary action on the
   page. Distinct from .closing-cta .brass-button (the bottom banner),
   scoped here so the two never drift together by accident. */
.hero__actions .brass-button {
  padding: 1.05em 2.35em;
  font-size: 1.0625rem;
}

.hero__note {
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Hero load animation (Home only, header included). Plain declarative CSS
   animation, not gated by JS/sessionStorage, so it plays on every real
   load of this page, not just once per browser session, the normal
   pattern for a marketing hero. The .reveal/.reveal-image/.reveal-delay-N
   classes below are only ever applied in index.html's own markup, this
   file is shared, but no other page's HTML carries these classes, so the
   other four pages and the footer are structurally untouched by this,
   not just visually unaffected.
   -------------------------------------------------------------------------- */

:root {
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes reveal-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-image-in {
  from {
    opacity: 0;
    transform: translateX(-16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes hero-strike-draw {
  from {
    transform: translateY(-50%) scaleX(0);
  }
  to {
    transform: translateY(-50%) scaleX(1);
  }
}

.reveal {
  opacity: 0;
  animation: reveal-fade-up 450ms var(--reveal-ease) forwards;
}

.reveal-image {
  opacity: 0;
  animation: reveal-image-in 650ms var(--reveal-ease) forwards;
}

/* header -> image -> eyebrow -> headline (2 pieces) -> lede -> actions,
   independent of the strikethrough. Headline's second piece finishes at
   380 + 420 = 800ms; lede and actions keep their original show times
   (800ms / 900ms) and are no longer sequenced relative to the strike.
   The strikethrough (see .hero__strike::after above) now waits until
   1150ms to draw, a deliberate held pause after the headline lands, so
   it finishes at 1470ms, after the body copy and CTA are already
   visible, that's expected. Total run is now 1470ms. */
.reveal-delay-1 {
  animation-delay: 80ms;
}

.reveal-delay-2 {
  animation-delay: 140ms;
}

.reveal-delay-3 {
  animation-delay: 260ms;
}

.reveal-delay-4 {
  animation-delay: 380ms;
  animation-duration: 420ms;
}

.reveal-delay-5 {
  animation-delay: 800ms;
  animation-duration: 420ms;
}

.reveal-delay-6 {
  animation-delay: 900ms;
  animation-duration: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-image {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__strike::after {
    animation: none;
    transform: translateY(-50%) scaleX(1);
  }
}

/* --------------------------------------------------------------------------
   The Case: four labeled compartments, the establishing shot of the whole
   site's structure. Sized in a deliberate bento hierarchy, not four
   identical boxes.
   -------------------------------------------------------------------------- */

.case-section {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--case-vein);
}

.case-section__heading {
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

.case-section__heading h2 {
  font-size: var(--step-h2);
}

.case-section__heading p {
  margin-top: var(--space-3);
  color: var(--ink-soft);
}

/* Bento hierarchy: Services and Catalog are the real content, sized and
   set larger; About and Book are the secondary tier, both smaller in
   footprint and type scale, not just differently numbered. */
.case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 23rem 11rem;
  grid-template-areas:
    "services services catalog catalog"
    "about about book book";
  gap: var(--space-4);
}

.case-slot {
  grid-area: var(--slot-area);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
}

.case-slot--services {
  --slot-area: services;
  background: var(--case-marble);
}

.case-slot--catalog {
  --slot-area: catalog;
}

.case-slot--about {
  --slot-area: about;
}

.case-slot--book {
  --slot-area: book;
  background: linear-gradient(155deg, var(--brass-light), var(--brass) 55%, var(--brass-deep));
  color: #241a0c;
  justify-content: center;
  align-items: flex-start;
}

.case-slot__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.case-slot__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-slot__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 15, 8, 0.72) 0%, rgba(20, 15, 8, 0.08) 60%);
}

.case-slot--catalog .case-slot__number,
.case-slot--catalog .case-slot__label,
.case-slot--catalog .case-slot__teaser,
.case-slot--about .case-slot__number,
.case-slot--about .case-slot__label,
.case-slot--about .case-slot__teaser {
  color: #f8f4ec;
}

.case-slot__number {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--brass-deep);
}

/* Small tier by default: About and Book. Services and Catalog step up
   below, real type-scale difference, not just a bigger box. */
.case-slot__label {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin-top: var(--space-2);
}

.case-slot__teaser {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  max-width: 32ch;
}

.case-slot--services .case-slot__label,
.case-slot--catalog .case-slot__label {
  font-size: var(--step-h2);
}

.case-slot--services .case-slot__teaser,
.case-slot--catalog .case-slot__teaser {
  font-size: var(--step-body-lg);
  max-width: 34ch;
}

.case-slot--book .case-slot__teaser {
  color: #3a2a13;
}

/* Glass sweep on hover/focus: a pure CSS reveal, no JS needed since this is
   a link, not an open/close state. */
.case-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 0%, var(--glass-sheen) 45%, transparent 60%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

.case-slot:hover::after,
.case-slot:focus-visible::after {
  animation: case-sweep var(--dur-sweep) var(--ease-case);
}

.case-slot:hover,
.case-slot:focus-visible {
  box-shadow: inset 0 0 0 1px var(--brass);
}

/* --------------------------------------------------------------------------
   Proof strip: two real process photos, quiet supporting content.
   -------------------------------------------------------------------------- */

.proof-strip {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--case-vein);
}

.proof-strip__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.proof-strip__photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.proof-strip__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proof-strip__text {
  grid-column: 1 / -1;
  max-width: 60ch;
  margin-top: var(--space-2);
}

.proof-strip__text h2 {
  font-size: var(--step-h2);
}

.proof-strip__text p {
  margin-top: var(--space-3);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   What clients say: a real, cleared anecdote plus honest outbound links.
   No fabricated quotes.
   -------------------------------------------------------------------------- */

.reviews {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--case-vein);
}

.reviews__heading {
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

.reviews__heading h2 {
  font-size: var(--step-h2);
}

.reviews__stat {
  margin-top: var(--space-3);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.reviews__stat-stars {
  color: var(--brass);
  letter-spacing: 0.05em;
  margin-right: var(--space-2);
}

.reviews__all-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brass-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
}

.reviews__all-link:hover,
.reviews__all-link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.case-study {
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.case-study p {
  color: var(--ink-soft);
  max-width: 60ch;
}

.case-study__label {
  font-size: var(--step-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-3);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-7);
}

.testimonial-card {
  position: relative;
}

/* Same brass engraved quote-mark language as the About page's mission
   statement and philosophy-pause quote, no border, no card background,
   the mark itself is the visual signal, not another box on a page that
   already uses bordered cards for tickets, trays, and case slots. */
.testimonial-card__quote {
  margin: 0;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.testimonial-card__quote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 2rem;
  line-height: 0.6;
  color: var(--brass);
  margin-bottom: var(--space-2);
}

.testimonial-card__cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Founder teaser: a quiet line, the full moment lives on About.
   -------------------------------------------------------------------------- */

.founder-teaser {
  padding-block: var(--space-8);
  text-align: center;
}

.founder-teaser__inner {
  max-width: 56ch;
  margin-inline: auto;
}

.founder-teaser p {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  line-height: 1.4;
  color: var(--ink);
}

.founder-teaser a {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  color: var(--brass-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
}

.founder-teaser a:hover,
.founder-teaser a:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}

/* ==========================================================================
   Catalog page
   ========================================================================== */

.catalog-intro {
  padding-block: var(--space-8) var(--space-7);
  border-bottom: 1px solid var(--case-vein);
}

.catalog-intro__eyebrow {
  font-size: var(--step-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 600;
}

.catalog-intro h1 {
  font-size: var(--step-h1);
  margin-top: var(--space-3);
  max-width: 20ch;
}

.catalog-intro__lede {
  margin-top: var(--space-4);
  max-width: 46ch;
  font-size: var(--step-body-lg);
  color: var(--ink-soft);
}

.catalog-intro__meta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.catalog-intro__note {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 32ch;
}

.catalog-trays {
  padding-block: var(--space-8);
}

.catalog-trays .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.catalog-disclaimer {
  padding-block: 0 var(--space-6);
}

.catalog-disclaimer p {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  max-width: 60ch;
}

/* Thumbnail grids: deliberately plain, the photography and the tray/
   lightbox moves carry the distinctiveness, not a broken grid on top of
   them. Square for the studio pieces (their real aspect), a touch wider
   for the worn-jewelry photos (mostly landscape wrist/ankle shots). */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3);
}

.catalog-thumb {
  position: relative;
  isolation: isolate;
  display: block;
  padding: 0;
  border: 1px solid var(--case-vein);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--case-ivory);
  box-shadow: 0 3px 10px var(--case-shadow-soft);
  transition: box-shadow 180ms var(--ease-case), transform 180ms var(--ease-case);
}

.catalog-grid--square .catalog-thumb {
  aspect-ratio: 1 / 1;
}

.catalog-grid--wide .catalog-thumb {
  aspect-ratio: 4 / 3;
}

.catalog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-thumb:hover,
.catalog-thumb:focus-visible {
  box-shadow: 0 8px 20px var(--case-shadow);
  transform: translateY(-2px);
}

/* A quiet "look closer" cue, not the promise of a bigger view sold by a
   flashy expand icon; the glass sweep on hover carries the flourish. */
.catalog-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 0%, var(--glass-sheen) 45%, transparent 60%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

.catalog-thumb:hover::after,
.catalog-thumb:focus-visible::after {
  animation: case-sweep var(--dur-sweep) var(--ease-case);
}

/* --------------------------------------------------------------------------
   Lightbox: tap-to-inspect, the signature interaction for this page.
   Native <dialog> for free focus-trapping, Escape-to-close, and a backdrop.
   Exactly one action lives inside it, booking, never a price or a buy
   affordance.
   -------------------------------------------------------------------------- */

.lightbox {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--case-ivory);
  box-shadow: 0 24px 60px var(--case-shadow);
  max-width: min(90vw, 44rem);
  max-height: 90vh;
}

.lightbox::backdrop {
  background: rgba(20, 15, 8, 0.72);
}

.lightbox[open] {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--space-4);
}

.lightbox__image {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--case-vein);
  background: var(--case-ivory);
  font-size: 1rem;
  cursor: pointer;
}

.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--case-vein);
  background: var(--case-ivory);
  font-size: 1.125rem;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--case-shadow-soft);
}

.lightbox__prev {
  left: var(--space-4);
}

.lightbox__next {
  right: var(--space-4);
}

.lightbox__prev:hover,
.lightbox__next:hover,
.lightbox__close:hover {
  border-color: var(--brass);
}

.lightbox__cta {
  font-size: 0.9375rem;
  padding: 0.75em 1.5em;
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-intro {
  padding-block: var(--space-8) var(--space-7);
}

.about-intro__eyebrow {
  font-size: var(--step-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 600;
}

.about-intro h1 {
  font-size: var(--step-h1);
  margin-top: var(--space-3);
  max-width: 18ch;
}

.about-intro__lede {
  margin-top: var(--space-4);
  max-width: 42ch;
  font-size: var(--step-body-lg);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Philosophy pause: the one structural move on this page. Full-width
   breakout, quiet register. Text-only until the founder portrait exists,
   see the HTML comment in about.html; no placeholder ships to visitors.
   -------------------------------------------------------------------------- */

.philosophy-pause {
  padding-block: var(--space-9);
  background: var(--case-marble);
  border-top: 1px solid var(--case-vein);
  border-bottom: 1px solid var(--case-vein);
}

/* Now a real h2 for the heading outline (was a <p>); font-family and
   line-height reset here so the tag change carries no visual change, the
   base h1-h4 rule would otherwise swap this into the serif display face. */
.philosophy-pause__label {
  font-family: var(--font-body);
  font-size: var(--step-eyebrow);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 600;
}

/* Same brass quotation-mark treatment as the mission statement, so this
   reads as a magazine-style pull-quote (an intentional callout of a line
   that also appears in the bio below) rather than a copy-paste accident. */
.philosophy-pause__quote {
  position: relative;
  margin: var(--space-4) 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-h2);
  line-height: 1.35;
  color: var(--ink);
}

.philosophy-pause__quote::before {
  content: "\201C";
  display: block;
  font-style: normal;
  font-size: 3rem;
  line-height: 0.6;
  color: var(--brass);
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   Full bio: plain, calm, editorial reading column.

   Generous top padding is deliberate: the philosophy-pause quote and its
   matching sentence in the first bio paragraph below must not both land
   in one scroll view, or the intentional pull-quote reads as a repeat
   accident. Combined with philosophy-pause's own space-9 bottom padding,
   this pushes the two well outside a single typical viewport.
   -------------------------------------------------------------------------- */

.about-bio {
  padding-block: var(--space-9) var(--space-8);
}

.about-bio .container {
  max-width: 60ch;
}

/* The intro row (photo + first paragraph) runs wider than the reading
   column below it, so it needs its own max-width, not the 60ch cap. */
.about-bio__intro {
  max-width: 54rem;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-7);
}

.about-bio__photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.about-bio__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.about-bio p {
  color: var(--ink-soft);
  font-size: var(--step-body-lg);
  line-height: 1.75;
}

.about-bio__rest p + p {
  margin-top: var(--space-5);
}

.about-bio__first {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Community & mission: quiet supporting content, real confirmed material.
   -------------------------------------------------------------------------- */

.community-section {
  padding-block: var(--space-8);
  border-top: 1px solid var(--case-vein);
}

/* Scoped to the text+photo row specifically, not every .container in this
   section, the mission block below has its own single-column container. */
.community-section__row {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-7);
  align-items: start;
}

.community-section h2 {
  font-size: var(--step-h2);
}

.community-section__text p {
  margin-top: var(--space-4);
  color: var(--ink-soft);
  line-height: 1.75;
}

.community-section__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.community-section__photos--single {
  grid-template-columns: minmax(0, 20rem);
  justify-content: end;
}

.community-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.community-photo:nth-child(2) {
  margin-top: var(--space-6);
}

.community-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Mission: its own labeled block, separated from the community text above
   it rather than trailing off the end of that paragraph.
   -------------------------------------------------------------------------- */

.community-section__mission-block {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--case-vein);
  max-width: 60ch;
}

/* Now a real h3 (nested under this section's h2 "Beyond the studio") for
   the heading outline, was a <p>; same font-family/line-height reset as
   philosophy-pause__label, for the same reason. */
.community-section__mission-label {
  font-family: var(--font-body);
  font-size: var(--step-eyebrow);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 600;
}

/* A brass engraved quotation mark carries the accent instead of a side-tab
   border, the same tell this file already avoids on the policies card. */
.community-section__mission {
  position: relative;
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-h3);
  line-height: 1.4;
  color: var(--ink);
}

.community-section__mission::before {
  content: "\201C";
  display: block;
  font-style: normal;
  font-size: 2.5rem;
  line-height: 0.6;
  color: var(--brass);
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Hero and the case grid need a mid-width step before the full mobile
   stack, both are two-up layouts that get cramped well above 640px. */
@media (max-width: 900px) {
  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero__media {
    aspect-ratio: 16 / 10;
    max-width: 32rem;
  }

  /* Different box aspect means a different vertical crop range than the
     square desktop frame, recalculated for welding-process.jpg at this
     aspect specifically. */
  .hero__media img {
    object-position: 50% 28%;
  }

  /* Catalog keeps a wider column than About even sharing a row, the
     hierarchy carries through the reflow instead of resetting to equal. */
  .case-grid {
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 15rem 12rem 8rem;
    grid-template-areas:
      "services services"
      "catalog about"
      "book book";
  }

  .proof-strip__grid {
    grid-template-columns: 1fr;
  }

  .proof-strip__photo {
    aspect-ratio: 16 / 10;
  }

  .community-section__row {
    grid-template-columns: 1fr;
  }

  .community-section__photos {
    margin-top: var(--space-6);
  }

  .community-section__photos--single {
    justify-content: start;
  }

  .about-bio__intro {
    grid-template-columns: 1fr;
  }

  .about-bio__photo {
    max-width: 20rem;
  }
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-4);
  }

  /* The nav (Menu control + Book Now) claims a fixed ~208px at this
     breakpoint, so on a 390px viewport there's genuinely only ~126px left
     for the logo before flexbox has to shrink it to avoid wrapping the
     row, floor set to what's actually achievable there, not a number
     flex-shrink would silently override anyway. */
  .wordmark__logo {
    width: clamp(120px, 32vw, 165px);
    max-height: 44px;
  }

  /* Two columns don't have room to breathe at this width, back to a
     single centered stack: logo, then description, matching how the rest
     of the footer already centers on mobile. */
  .site-footer__brand-row {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    text-align: center;
  }

  .site-footer__brand-tagline {
    max-width: none;
    margin-inline: auto;
  }

  .tray__summary {
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .tray__number {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.9375rem;
  }

  .ticket-grid {
    grid-template-columns: 1fr;
  }

  .services-intro__meta,
  .catalog-intro__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .community-section__photos {
    grid-template-columns: 1fr;
  }

  .community-photo:nth-child(2) {
    margin-top: 0;
  }

  .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--space-2);
  }

  /* Arrows sit closer to the image at narrow widths so they never
     overlap the close button; swipe (added in script.js) is the primary
     way through the set here, the buttons stay as a fallback. */
  .lightbox {
    padding: var(--space-5) var(--space-4);
  }

  .lightbox__prev {
    left: var(--space-2);
  }

  .lightbox__next {
    right: var(--space-2);
  }

  /* Compartments reflow to a single column, importance order preserved:
     Services and Catalog (the real content) before About, Book stays last.
     Row heights still step down with importance rather than going uniform. */
  .case-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 14rem 12rem 9rem 8rem;
    grid-template-areas:
      "services"
      "catalog"
      "about"
      "book";
  }
}

/* --------------------------------------------------------------------------
   Motion preference
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tray.is-sweeping > .tray__summary::after,
  .case-slot:hover::after,
  .case-slot:focus-visible::after,
  .catalog-thumb:hover::after,
  .catalog-thumb:focus-visible::after {
    animation: none;
  }

  .tray__chevron,
  .case-item,
  .case-slot,
  .catalog-thumb,
  .brass-button {
    transition: none;
  }

  /* Deliberately not transition: none here, unlike the decorative
     flourishes above: this is a positional show/hide, the header's own
     content (nav, logo, Book Now) would otherwise pop instantly on and
     off screen, which reads as more jarring under reduced motion, not
     less. Kept short and linear instead of removed. */
  .site-header {
    transition-duration: 120ms;
    transition-timing-function: linear;
  }
}