/* ==========================================================================
   CHRONO TIMEPIECES — brand stylesheet
   Palette and type are derived from the logo: charcoal brushwork, a black
   stopwatch, letterspaced serif. Everything else stays out of the way.
   ========================================================================== */

/* --- 0. Fonts (self-hosted — no third-party request, faster on slow data) - */
/* Syne carries the whole page: navigation, product names, prices, body copy,
   and the big statement headlines. Instrument Serif Italic exists only to
   accent one to four words inside a headline — never a button, a price, a
   nav item or a paragraph. It should feel rare. */
@font-face {
  font-family: "Syne"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/syne-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Syne"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../assets/fonts/syne-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Syne"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../assets/fonts/syne-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Syne"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../assets/fonts/syne-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Surfaces */
  --bone:        #F7F4EF;   /* page ground — warm, not white */
  --bone-deep:   #EFEAE2;   /* alternating band */
  --paper:       #FFFFFF;   /* cards, plates */
  --ink:         #141312;   /* near-black, from the stopwatch */
  --ink-soft:    #1F1D1B;

  /* Ink on bone */
  --text:        #2B2926;
  --text-muted:  #6E6960;
  --text-faint:  #9A948A;

  /* Accent — used sparingly. Brass, never gold-plated. */
  --brass:       #A8834F;
  --brass-soft:  #C8AA7E;

  /* Lines */
  --rule:        rgba(20, 19, 18, 0.14);
  --rule-soft:   rgba(20, 19, 18, 0.08);
  --rule-light:  rgba(247, 244, 239, 0.18);

  /* Type */
  --sans:   "Syne", "Helvetica Neue", Arial, sans-serif;
  --accent: "Instrument Serif", "Times New Roman", Georgia, serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 1320px;
  --section-y: clamp(5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- 2. Base ------------------------------------------------------------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.005em;
  /* Syne draws its figures at x-height by default — charming in prose,
     wrong next to uppercase. Lining figures throughout. */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--brass); color: var(--bone); }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* --- 3. Typography ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

/* Hero sits at 70–110px on desktop; section heads at 40–60px. */
.display-xl { font-size: clamp(2.875rem, 7.6vw, 6.875rem); }
.display-l  { font-size: clamp(2.125rem, 4.4vw, 3.75rem); }
.display-m  { font-size: clamp(1.375rem, 2.4vw, 2rem); letter-spacing: -0.025em; }

/* The art director's flourish. One to four words, never more, and never
   outside a headline. */
em, .italic {
  font-family: var(--accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -0.012em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--brass);
  flex: none;
}
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--brass);
  flex: none;
}

.lede {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.85;
  color: var(--text-muted);
  font-weight: 400;
  max-width: 52ch;
  text-wrap: pretty;
}

/* --- 4. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.0625rem 2.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
  white-space: nowrap;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.55s var(--ease);
  z-index: -1;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--bone); }
.btn:hover::after { transform: scaleX(1); transform-origin: left center; }

.btn--solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--solid::after { background: var(--brass); }
.btn--solid:hover { color: var(--bone); border-color: var(--brass); }

.btn--light { border-color: rgba(247,244,239,0.4); color: var(--bone); }
.btn--light::after { background: var(--bone); }
.btn--light:hover { color: var(--ink); border-color: var(--bone); }

.btn--sm { padding: 0.8125rem 1.5rem; font-size: 0.5625rem; }

.link-under {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  color: var(--ink);
}
.link-under::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.link-under:hover::after { transform: scaleX(0); transform-origin: left; }

/* --- 5. Header ----------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding-block: clamp(1rem, 2.4vw, 1.75rem);
  transition: background 0.45s var(--ease), padding 0.45s var(--ease),
              box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
  border-bottom: 1px solid transparent;
}
/* The blur lives on a pseudo-element on purpose: putting backdrop-filter on
   the header itself would make it the containing block for the fixed mobile
   nav inside it, and the drawer would open inside the header bar. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(247, 244, 239, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.site-header.is-stuck::before { opacity: 1; }
.site-header.is-stuck {
  border-bottom-color: var(--rule-soft);
  padding-block: 0.75rem;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand img {
  height: clamp(34px, 4.4vw, 52px);
  width: auto;
  transition: height 0.45s var(--ease);
}
.site-header.is-stuck .brand img { height: clamp(30px, 3.4vw, 40px); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.8vw, 2.75rem);
}
.nav a {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  position: relative;
  padding-block: 0.35rem;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav a:hover::after,
.nav a.is-active::after { transform: scaleX(1); }

/* Above the mobile drawer, which is a child of the header. */
.brand, .menu-toggle { position: relative; z-index: 96; }

.nav a.header-cta::after { display: none; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
}
.menu-toggle span {
  display: block;
  width: 24px; height: 1px;
  background: var(--ink);
  position: relative;
  transition: background 0.3s var(--ease);
}
.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px; height: 1px;
  background: var(--ink);
  transition: transform 0.4s var(--ease);
}
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after  { top: 7px; }
body.nav-open .menu-toggle span { background: transparent; }
body.nav-open .menu-toggle span::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .menu-toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- 6. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 9rem 4rem;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, #FFFFFF 0%, var(--bone) 46%, var(--bone-deep) 100%);
}

.hero-mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  width: min(52vh, 460px);
  opacity: 0.038;
  pointer-events: none;
  filter: grayscale(1);
}

.hero-dial {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -52%;
  width: min(86vh, 800px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.5;
}
.hero-dial circle { fill: none; stroke: var(--rule-soft); }
/* A single point tracing the outer ring — a minute hand without the scratch
   across the headline. */
.hero-dial .hand {
  transform-origin: 200px 200px;
  animation: sweep 60s linear infinite;
  fill: var(--brass);
  opacity: 0.6;
}
@keyframes sweep { to { transform: rotate(360deg); } }

.hero-content { position: relative; z-index: 2; }

.hero h1 { margin-bottom: 1.75rem; }
/* The serif runs on a different optical baseline to Syne — it needs its own
   leading, and room for the descenders. */
.hero h1 .thin {
  display: block;
  color: var(--ink);
  line-height: 1.02;
  padding-bottom: 0.06em;
}

.hero .lede { margin-inline: auto; text-align: center; }

.hero-actions {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.scroll-cue {
  position: absolute;
  bottom: 2.25rem; left: 50%;
  translate: -50% 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.scroll-cue i {
  display: block;
  width: 1px; height: 54px;
  background: linear-gradient(var(--rule), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px; height: 18px;
  background: var(--brass);
  animation: drop 2.6s var(--ease) infinite;
}
@keyframes drop {
  0%   { transform: translateY(-20px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(54px); opacity: 0; }
}

/* --- 7. Marquee band ----------------------------------------------------- */
.band {
  background: var(--ink);
  color: var(--bone);
  padding-block: 1.15rem;
  overflow: hidden;
}
.band-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: slide 42s linear infinite;
}
.band-track span {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 3.5rem;
  white-space: nowrap;
}
.band-track span::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brass);
  flex: none;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* --- 8. Sections --------------------------------------------------------- */
.section { padding-block: var(--section-y); position: relative; }
.section--paper { background: var(--paper); }
.section--deep  { background: var(--bone-deep); }
.section--ink   { background: var(--ink); color: rgba(247,244,239,0.78); }
.section--ink h2, .section--ink h3 { color: var(--bone); }
.section--ink .eyebrow { color: rgba(247,244,239,0.5); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head.centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-head p.lede { margin-bottom: 0; }

/* --- 9. Filters ---------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.75rem;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding-block: 1rem;
  justify-content: center;
}
.filter {
  padding: 0.55rem 1.25rem;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
              background 0.35s var(--ease);
}
.filter:hover { color: var(--ink); }
.filter.is-active {
  color: var(--ink);
  border-color: var(--rule);
  background: var(--paper);
}
.filter .count {
  font-size: 0.5625rem;
  color: var(--text-faint);
  margin-left: 0.45rem;
  letter-spacing: 0.1em;
}

/* --- 10. Product grid ---------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  text-align: left;
  position: relative;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
  width: 100%;
}
.card:hover {
  border-color: var(--rule);
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -32px rgba(20,19,18,0.35);
}

.card-plate {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 12%;
  background:
    radial-gradient(80% 70% at 50% 34%, #FFFFFF 0%, #F4F1EB 68%, #EBE6DD 100%);
  overflow: hidden;
}
.card-plate svg {
  width: 100%; height: 100%;
  color: var(--ink);
  transition: transform 0.75s var(--ease);
}
.card:hover .card-plate svg { transform: scale(1.045); }

.card-badge {
  position: absolute;
  top: 0.875rem; left: 0.875rem;
  background: var(--ink);
  color: var(--bone);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  font-weight: 500;
}
.card-badge--brass { background: var(--brass); }

.card-body {
  padding: 1.35rem 1.35rem 1.5rem;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.card-cat {
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.card-name {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.card-price {
  margin-top: auto;
  padding-top: 0.85rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--text);
}
.card-price .amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-price .view {
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.card:hover .card-price .view { opacity: 1; transform: none; }

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding-block: 4rem;
  color: var(--text-faint);
  font-size: 0.8125rem;
}

/* --- 11. Quick view modal ------------------------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.modal.is-open { visibility: visible; opacity: 1; }
.modal-veil {
  position: absolute;
  inset: 0;
  background: rgba(20, 19, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-panel {
  position: relative;
  background: var(--paper);
  width: min(960px, 100%);
  max-height: min(88svh, 700px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  transform: translateY(18px) scale(0.985);
  transition: transform 0.5s var(--ease);
}
.modal.is-open .modal-panel { transform: none; }

.modal-plate {
  background: radial-gradient(80% 70% at 50% 40%, #FFFFFF 0%, #F4F1EB 66%, #E9E4DA 100%);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-right: 1px solid var(--rule-soft);
}
.modal-plate svg { width: 100%; max-width: 320px; color: var(--ink); }

.modal-body { padding: clamp(1.75rem, 3.4vw, 3rem); }
.modal-body h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 0.5rem; }
.modal-price {
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.125rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin: 1rem 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-soft);
}
.modal-blurb { color: var(--text-muted); font-weight: 400; font-size: 0.875rem; line-height: 1.8; }

.spec-list {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  font-size: 0.8125rem;
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
}
.spec-list dt, .spec-list .k {
  color: var(--text-faint);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.spec-list .v { color: var(--text); text-align: right; font-variant-numeric: lining-nums tabular-nums; }

.modal-close {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  z-index: 3;
  transition: color 0.3s var(--ease), transform 0.4s var(--ease);
}
.modal-close:hover { color: var(--ink); transform: rotate(90deg); }

/* --- 12. Services (dark band) -------------------------------------------- */
.service-list { border-top: 1px solid var(--rule-light); }
.service {
  display: grid;
  grid-template-columns: 4rem 1fr 1.15fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule-light);
  transition: background 0.5s var(--ease);
}
.service:hover { background: rgba(247,244,239,0.03); }
.service .num {
  font-family: var(--sans);
  font-size: 0.6875rem;
  color: var(--brass-soft);
  letter-spacing: 0.18em;
}
.service h3 { font-size: clamp(1.125rem, 1.8vw, 1.4375rem); }
.service p { margin: 0; font-size: 0.875rem; font-weight: 400; line-height: 1.8; }

/* --- 13. The Edit — editorial type spread -------------------------------- */
/* Four lines set as large as the page allows, stacked with negative leading
   so ascenders and descenders interlock, and ragged on purpose — the rag is
   composed, not justified. The watch is threaded through the stack: two lines
   sit behind it, one runs in front. Layer order is the whole idea, so the
   z-index values below are load-bearing, not decoration. */
.edit-stage {
  position: relative;
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3.5rem, 8vw, 7rem);
  isolation: isolate;
}

.edit-type {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(3.25rem, 14vw, 12.5rem);
  line-height: 0.79;
  letter-spacing: -0.055em;
  color: var(--ink);
}

.edit-line {
  position: relative;
  display: block;
  white-space: nowrap;
  z-index: 1;
}
.el-1 { margin-left: 1%;  }
.el-2 { margin-left: 24%; }   /* the italic — pushed right, off the stack */
.el-3 { margin-left: 6%;  }
.el-4 { margin-left: 15%; z-index: 3; }   /* runs IN FRONT of the watch */

/* Instrument Serif sits on a different optical baseline and carries real
   descenders; it needs its own leading or it collides with "for". */
.edit-type .el-2 {
  font-size: 1.06em;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-block: -0.04em -0.02em;
}

.edit-object {
  position: absolute;
  z-index: 2;
  left: 51%;
  top: 24%;
  width: clamp(120px, 26%, 350px);
  margin: 0;
  color: var(--ink);
  /* The drawing carries its own opaque body (see silhouette() in art.js), so
     the shadow traces the watch rather than fogging the letters around it. */
  filter: drop-shadow(0 20px 34px rgba(20, 19, 18, 0.13));
}
.edit-object svg, .edit-object img { width: 100%; height: auto; display: block; }

/* Tucked into the one genuinely empty pocket the composition leaves: right of
   "no one.", below the watch. Move the type and this has to move with it. */
.edit-note {
  position: absolute;
  z-index: 4;
  left: 76%;
  top: 66%;
  max-width: 18ch;
}
.edit-note-head {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.75rem;
}
.edit-note-body {
  font-size: 0.6875rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

/* The spread assembles rather than fades: lines rise in reading order, the
   watch settles last. */
.edit-stage.reveal { opacity: 1; transform: none; }
.edit-stage .edit-line,
.edit-stage .edit-object,
.edit-stage .edit-note {
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
.edit-stage .edit-object { transform: translateY(1.5rem) scale(0.97); }
.edit-stage.is-in .edit-line,
.edit-stage.is-in .edit-object,
.edit-stage.is-in .edit-note { opacity: 1; transform: none; }
.edit-stage.is-in .el-2       { transition-delay: 0.09s; }
.edit-stage.is-in .el-3       { transition-delay: 0.18s; }
.edit-stage.is-in .el-4       { transition-delay: 0.27s; }
.edit-stage.is-in .edit-object { transition-delay: 0.4s; }
.edit-stage.is-in .edit-note   { transition-delay: 0.55s; }

/* --- 13b. Story ---------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.story-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: start;
  padding-top: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--rule-soft);
}
.story-copy .display-l { font-size: clamp(1.625rem, 3vw, 2.625rem); }
.story-copy .lede + .lede { margin-top: 1.25rem; }

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-soft);
}
.stat .n {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: 2rem;
  color: var(--ink);
  line-height: 1;
  display: block;
}
.stat .l {
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.6rem;
  display: block;
}

/* --- 14. Visit ----------------------------------------------------------- */
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.detail-block { margin-bottom: 2.25rem; }
.detail-block h4 {
  font-family: var(--sans);
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.75rem;
  font-weight: 400;
}
.detail-block p, .detail-block a { font-size: 0.9375rem; font-weight: 400; line-height: 1.9; margin: 0; }
.detail-block a:hover { color: var(--brass); }

.hours { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; font-weight: 400; }
.hours li { font-variant-numeric: lining-nums tabular-nums; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--rule-soft);
}
.hours .day { color: var(--text-muted); }

.map-card {
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  min-height: 320px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  overflow: hidden;
}
.map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.85;
}
.map-card::after {
  content: "";
  position: absolute;
  top: 42%; left: 50%;
  width: 14px; height: 14px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 8px rgba(168,131,79,0.16), 0 0 0 18px rgba(168,131,79,0.08);
}
.map-card > * { position: relative; }
/* Cormorant defaults to old-style figures — lovely in a headline, confusing
   in a street address. Force lining figures here. */
.map-card h3 { font-variant-numeric: lining-nums; }

/* --- 15. Footer ---------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(247,244,239,0.62);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  font-size: 0.8125rem;
  font-weight: 400;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--rule-light);
}
.site-footer img.footer-logo { width: 210px; margin-bottom: 1.5rem; }
.site-footer h5 {
  font-family: var(--sans);
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247,244,239,0.45);
  margin: 0 0 1.25rem;
  font-weight: 400;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer-links a:hover { color: var(--bone); }
.footer-bottom {
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: rgba(247,244,239,0.4);
}

/* --- 16. Floating WhatsApp ---------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(247,244,239,0.24), 0 14px 34px -14px rgba(20,19,18,0.6);
  transition: transform 0.45s var(--ease), background 0.45s var(--ease);
  opacity: 0;
  pointer-events: none;
}
.wa-float.is-shown { opacity: 1; pointer-events: auto; }
.wa-float:hover { transform: translateY(-3px); background: var(--brass); }
.wa-float svg { width: 24px; height: 24px; }

/* --- 17. Reveal ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

/* --- 18. Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .split, .visit-grid { grid-template-columns: 1fr; }
  .modal-panel { grid-template-columns: 1fr; max-height: 88svh; }
  .modal-plate { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .modal-plate svg { max-width: 210px; }
  .service { grid-template-columns: 2.5rem 1fr; }
  .service p { grid-column: 2; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .story-copy { grid-template-columns: 1fr; }
  .edit-note { left: 72%; top: 68%; max-width: 16ch; }
}

@media (max-width: 760px) {
  .menu-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2.25rem;
    background: var(--bone);
    transform: translateY(-100%);
    transition: transform 0.6s var(--ease);
    z-index: 95;
  }
  body.nav-open .nav { transform: none; }
  .nav a { font-size: 0.75rem; letter-spacing: 0.24em; }
  .site-header { z-index: 100; }
  body.nav-open { overflow: hidden; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 0.875rem; }
  .card-body { padding: 0.9rem 0.9rem 1.05rem; }
  .card-name { font-size: 0.9375rem; }

  /* The overlap is a desktop composition. On a phone the lines still stack
     tight and stay ragged, but the watch steps out of the way and the note
     drops into normal flow underneath. */
  .edit-type { font-size: clamp(3rem, 17vw, 4.75rem); line-height: 0.84; }
  .el-1 { margin-left: 0; }
  .el-2 { margin-left: 16%; }
  .el-3 { margin-left: 4%; }
  .el-4 { margin-left: 9%; }
  .edit-object { left: auto; right: 0; top: 3%; width: 38%; }
  .edit-note {
    position: static;
    max-width: none;
    margin-top: 2.5rem;
    padding-left: 0;
  }
  .edit-note-body { max-width: 34ch; }
  .card-price { font-size: 0.75rem; padding-top: 0.7rem; }
  .card-price .view { display: none; }
  .filters { gap: 0.25rem; padding-block: 0.75rem; }
  .filter { padding: 0.5rem 0.85rem; letter-spacing: 0.16em; }
  .footer-top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .edit-stage .edit-line,
  .edit-stage .edit-object,
  .edit-stage .edit-note { opacity: 1; transform: none; }
}