/* Benson — stone and bronze. Animations use transform + opacity only. */

:root {
  /* Ivory & oxblood: warm ivory #F6F3ED ground, espresso #30241F type, logo and dark bands,
     oxblood #742C3D for main buttons, selected states and key links, stone #D8D0C5 for dividers and
     secondary grounds, muted olive #62674B for small editorial accents (eyebrows, makers).
     "ink" is the text colour; "on-ink" is the text on ink-coloured fills. */
  --paper: #f6f3ed;
  --white: #eee9e1;
  --ink: #30241f;
  --ink-2: #4a3c35;
  --mute: #6b5f57;
  --line: #d8d0c5;
  --on-ink: #f6f3ed;
  --gold: #62674b;
  --accent: #742c3d;
  --on-accent: #f6f3ed;
  --link: #742c3d;
  --night: #30241f;
  --night-2: #30241f;
  --night-line: rgba(246, 243, 237, .24);
  --night-mute: #d8d0c5;

  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --text: "Newsreader", "Iowan Old Style", Georgia, serif;   /* reading: notes, descriptions, the founder's text */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 80px);
  --max: 1320px;
  --header: 68px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure, address, fieldset, legend { margin: 0; padding: 0; border: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; line-height: 1.08; }
em { font-style: italic; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.dark :focus-visible, .hero :focus-visible { outline-color: var(--ink); }
::selection { background: var(--gold); color: var(--on-ink); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 12px 18px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.eyebrow--light, .dark .eyebrow { color: var(--gold); }

/* -------------------------------------------------------------- buttons & links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  min-height: 50px; padding: 0 1.7rem; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-align: center;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--sm { min-height: 44px; padding: 0 1.2rem; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--light { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn--outline-light { background: transparent; color: var(--ink); border-color: rgba(246, 243, 237, .6); }
.arr { display: inline-block; transition: transform .35s var(--ease); }
@media (hover: hover) {
  .btn:hover { background: transparent; color: var(--accent); }
  .btn--ghost:hover { background: var(--ink); color: var(--on-ink); }
  .btn--light:hover { background: transparent; color: var(--ink); }
  .btn--outline-light:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  .btn:hover .arr, .link:hover .arr, .edit-list a:hover .arr { transform: translateX(6px); }
}
.link {
  display: inline-flex; align-items: center; gap: .6em; padding-block: 4px;
  font-size: .95rem; letter-spacing: .01em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .4s var(--ease);
}
@media (hover: hover) { .link:hover { background-size: 0 1px; background-position: 100% 100%; } }
address + .link, p .link { text-transform: none; letter-spacing: .02em; font-size: 1rem; }

/* -------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; height: var(--header); }
.nav { display: none; }
.brand { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .34em; text-transform: uppercase; padding-left: .34em; }
.brand--lg { font-size: 1.7rem; }
.menu-btn { border: 0; background: none; min-height: 44px; padding: 0 2px; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; }
.menu {
  position: fixed; inset: var(--header) 0 0 0; z-index: 40; background: var(--paper); overflow-y: auto; padding-block: 32px 48px;
}
.menu[hidden] { display: none; }
.menu:not([hidden]) { animation: fade .3s var(--ease); }
.menu nav { display: flex; flex-direction: column; }
.menu a { font-family: var(--serif); font-size: clamp(2rem, 9vw, 3rem); padding: 14px 0; border-bottom: 1px solid var(--line); }
.menu a[aria-current] { font-style: italic; }
body.menu-open { overflow: hidden; }

/* full navigation only where all six links fit beside the wordmark; the Menu button below that */
@media (min-width: 1120px) {
  .bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav { display: flex; align-items: center; gap: 1.8rem; white-space: nowrap; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; }
  .nav--r { justify-content: flex-end; }
  .nav a:not(.btn) { position: relative; padding-block: 8px; }
  .nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
  .nav a[aria-current]::after, .nav a:hover::after { transform: scaleX(1); }
  .menu-btn, .menu { display: none !important; }
  .nav .nav__cta { color: var(--accent); }
  .nav .nav__cta::after { transform: scaleX(1); }
  .nav .nav__cta:hover { color: var(--ink); }
}

/* -------------------------------------------------------------- sections */
.section { padding-block: clamp(72px, 10vw, 150px); }
.section--tight { padding-block: clamp(40px, 6vw, 88px); }
.dark, .hero, .site-footer { --ink: #f6f3ed; --ink-2: #eee9e1; --mute: #d8d0c5; --gold: #d8d0c5; --on-ink: #30241f; --link: #f6f3ed; --line: rgba(246, 243, 237, .24); }
.dark { background: var(--night); color: var(--ink); }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 56px); }
.section__head h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); margin-top: 10px; letter-spacing: -.02em; }

.page-head { padding-block: clamp(56px, 9vw, 130px) clamp(24px, 4vw, 56px); }
.page-head h1 { font-size: clamp(2.8rem, 7.6vw, 6.6rem); max-width: 16ch; margin-top: 14px; letter-spacing: -.022em; line-height: 1.02; }
.page-head--curates h1 { max-width: 20ch; }
.page-head__lede { max-width: 56ch; margin-top: 24px; color: var(--mute); font-size: 1.05rem; }
.page-head__byline { margin-top: 18px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

/* -------------------------------------------------------------- hero */
.hero { background: var(--night); color: var(--ink); position: relative; overflow: hidden; }
.hero__grid { display: grid; gap: 40px; align-items: center; padding-block: 48px 40px; min-height: calc(100svh - var(--header) - 56px); }
.hero__eyebrow { margin-bottom: 26px; }
.hero h1 { font-size: clamp(3.2rem, 11vw, 7.6rem); line-height: 1; }
.hero h1 .l { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.06em; }
.hero h1 .l > span { display: block; }
.hero__lede { max-width: 46ch; margin-top: 28px; color: var(--night-mute); font-size: 1.05rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__watch { position: relative; justify-self: center; width: min(420px, 74vw); }
.hero__watch::before, .hero__watch::after, .hero__orbit { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
/* rings are true circles centred on the watch: width in %, height via aspect-ratio */
.hero__watch::before, .hero__watch::after, .hero__orbit { left: 50%; top: 50%; aspect-ratio: 1; }
.hero__watch::before { width: 104%; margin: -52% 0 0 -52%; border: 1px solid var(--night-line); }
.hero__watch::after { width: 150%; margin: -75% 0 0 -75%; border: 1px solid rgba(246, 243, 237, .12); }
.hero__orbit { width: 104%; margin: -52% 0 0 -52%; }
.hero__orbit::after { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; }
.hero-svg { width: 100%; height: auto; }
.hero__foot { display: flex; justify-content: space-between; padding-block: 0 24px; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--night-mute); }
.hero__foot time { margin-left: .8em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* entrance choreography (CSS only, so text paints immediately) */
.hero h1 .l > span { transform: translateY(105%); animation: rise 1.05s var(--ease) forwards; animation-delay: calc(.1s + var(--i) * .14s); }
.hero__eyebrow, .hero__lede, .hero__cta { opacity: 0; animation: up .9s var(--ease) forwards; }
.hero__eyebrow { animation-delay: .05s; }
.hero__lede { animation-delay: .45s; }
.hero__cta { animation-delay: .6s; }
.hero__watch { opacity: 0; animation: watchin 1.5s var(--ease) .25s forwards; }
@keyframes rise { to { transform: none; } }
@keyframes up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes watchin { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

/* live watch hands (delay set from JS to match London time) */
/* origin only where the animation/inline transform replaces the SVG attribute (which already carries its own centre) */
.js .hero .hand { transform-origin: 160px 240px; }
.js .hero .hand, .js .hero__orbit { animation: spin linear infinite paused; }
.js .hero .hand[data-hand="s"], .js .hero__orbit { animation-duration: 60s; }
.js .hero .hand[data-hand="m"] { animation-duration: 3600s; }
.js .hero .hand[data-hand="h"] { animation-duration: 43200s; }
.js .hero.live .hand, .js .hero.live .hero__orbit { animation-play-state: running; }

/* Big Ben: a tall tower instead of a round watch — no rings, sized by height, fading into the street */
.hero__watch--tower { width: auto; height: min(78svh, 660px); aspect-ratio: 200 / 560; }
.hero__watch--tower::before, .hero__watch--tower::after { display: none; }
.hero__watch--tower .hero__watch-inner, .hero__watch--tower .hero-svg { height: 100%; }
.hero__watch--tower .hero-svg { width: 100%; overflow: visible; }
.js .hero .bb .hand { transform-origin: 100px 296px; }
.bb-glow { animation: bbglow 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bbglow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

@supports (animation-timeline: scroll()) {
  .hero__watch-inner { animation: heroout linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  @keyframes heroout { to { transform: translateY(48px) scale(.94); opacity: .35; } }
}
.spark { transform-box: fill-box; transform-origin: center; animation: twinkle 3.4s ease-in-out infinite; }

/* phones: watch first (smaller), stacked full-width buttons */
@media (max-width: 899px) {
  .hero__grid { gap: 28px; padding-block: 32px 24px; min-height: 0; }
  .hero__watch { order: -1; width: clamp(230px, 50vw, 360px); margin-top: 8px; }
  /* phones: show the top of the tower (spire to clock), cropped and faded below the dial */
  .hero__watch--tower { width: clamp(150px, 42vw, 210px); height: auto; aspect-ratio: 200 / 400; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  .hero__watch--tower .hero__watch-inner, .hero__watch--tower .hero-svg { height: auto; }
  .hero__cta .btn { flex: 1 1 100%; }
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 64px; }
  .hero__watch { width: min(460px, 100%); }
}

/* -------------------------------------------------------------- statement */
.statement__text { font-family: var(--serif); font-size: clamp(1.7rem, 4.2vw, 3.4rem); line-height: 1.22; letter-spacing: -.01em; max-width: 26ch; margin-bottom: 36px; }
@media (min-width: 900px) { .statement__text { max-width: 30ch; } }

/* -------------------------------------------------------------- cards & grids */
.grid { display: grid; gap: clamp(28px, 3.2vw, 44px) clamp(16px, 2vw, 28px); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.grid--edit { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .grid--3 { grid-template-columns: 1fr; } }

/* horizontal snap rail on phones, 4-up grid on desktop */
.grid--rail { grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.grid--rail::-webkit-scrollbar { display: none; }
.grid--rail > * { scroll-snap-align: start; }
@media (min-width: 640px) { .grid--rail { grid-auto-columns: 38%; } }
@media (min-width: 1000px) { .grid--rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; } }

.card { display: block; }
.tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(62% 46% at 50% 54%, #f2eee7 0, #e6dfd5 100%); }
.tile--dark { background: radial-gradient(120% 90% at 50% 35%, #4a3a33 0, #30241f 62%, #241b17 100%); }
.tile svg, .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.card__cap { padding-top: 16px; }
.card__maker { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.card__name { font-size: 1.5rem; margin-top: 6px; }
.card__meta { font-size: .85rem; color: var(--mute); margin-top: 6px; }

/* filters */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem; border: 1px solid var(--line); background: transparent; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }
.no-js .filters .chip[data-filter] { display: none; }
.filters__count { margin-left: auto; font-size: .78rem; color: var(--mute); letter-spacing: .06em; }
.card.is-hidden { display: none; }
.grid.filtering .card { animation: up .6s var(--ease) both; }

/* -------------------------------------------------------------- teaser (home) */
.teaser__grid { display: grid; gap: clamp(40px, 6vw, 96px); }
/* the concierge sketch: a print laid on the bronze band */
.teaser__fig { margin: 0 0 clamp(28px, 4vw, 44px); max-width: 640px; }
.teaser__fig img { width: 100%; height: auto; display: block; box-shadow: 0 1px 0 rgba(246, 243, 237, .35), 0 22px 44px rgba(36, 27, 23, .38), 0 4px 10px rgba(36, 27, 23, .25); }
.teaser__head h2 { font-size: clamp(2.2rem, 5vw, 4rem); margin: 16px 0 24px; }
.teaser__head em { color: var(--night-mute); }
.teaser__p { color: var(--night-mute); max-width: 42ch; margin-bottom: 32px; }
.edit-list a { display: grid; grid-template-columns: auto 1fr auto; column-gap: 20px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--night-line); transition: padding-left .5s var(--ease); }
.edit-list li:last-child a { border-bottom: 1px solid var(--night-line); }
.edit-list .n { font-size: .78rem; letter-spacing: .2em; color: var(--night-mute); }
.edit-list .t { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.1rem); }
.edit-list .m { grid-column: 2; font-size: .85rem; color: var(--night-mute); margin-top: 4px; }
.edit-list .arr { grid-row: 1; grid-column: 3; }
@media (hover: hover) { .edit-list a:hover { padding-left: 14px; } }
@media (min-width: 900px) { .teaser__grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }

/* -------------------------------------------------------------- promises */
.promises { display: grid; gap: 40px; border-top: 1px solid var(--line); padding-top: 40px; }
.promise__n { font-size: .78rem; letter-spacing: .2em; color: var(--mute); margin-bottom: 20px; }
.promise h3 { font-size: 1.7rem; margin-bottom: 12px; }
.promise p:last-child { color: var(--mute); max-width: 34ch; }
@media (min-width: 800px) { .promises { grid-template-columns: repeat(3, 1fr); gap: 56px; } }

/* -------------------------------------------------------------- visit band / info */
.visit-band { border-top: 1px solid var(--line); }
.visit-band__grid { display: grid; gap: 40px; }
.visit-band h2 { font-size: clamp(2.2rem, 5vw, 4rem); margin-top: 12px; }
.visit-band address, .visit-info address { font-size: 1.15rem; line-height: 1.6; margin-bottom: 24px; }
.hours { display: grid; gap: 6px; margin-bottom: 32px; font-size: .95rem; }
.hours div { display: flex; justify-content: space-between; gap: 24px; max-width: 380px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.hours dt { color: var(--mute); }
@media (min-width: 900px) { .visit-band__grid { grid-template-columns: 1fr 1fr; align-items: end; } }

/* -------------------------------------------------------------- CTA band */
.cta-band__inner { max-width: 760px; }
.cta-band h2 { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 18px; }
.cta-band p { color: var(--night-mute); margin-bottom: 32px; max-width: 48ch; }

/* -------------------------------------------------------------- Benson Curates */
.jump { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 40px; }
.jump .chip { border: 0; padding: 0; min-height: 44px; font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0; text-transform: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat; transition: background-size .4s var(--ease); }
@media (hover: hover) { .jump .chip:hover { background-size: 100% 1px; } }
.edit { border-top: 1px solid var(--line); padding-block: clamp(48px, 8vw, 110px); }
.edit:nth-of-type(odd) { background: var(--paper); }
.edit__grid { display: grid; gap: 32px; }
.edit__no { font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.edit h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); margin: 12px 0 8px; }
.edit__moment { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 24px; }
.edit__note { margin-bottom: 28px; max-width: 44ch; }
.edit__note p + p { margin-top: 12px; }
.edit__note p { font-family: var(--text); font-size: 1.22rem; line-height: 1.55; }
.edit__sig { font-style: italic; color: var(--mute); }

/* venue cards: text-only tiles for Benson Curates' concierge categories (no photos) */
.venues { display: grid; gap: 28px clamp(24px, 3vw, 48px); grid-template-columns: 1fr; }
.venue { padding: 22px 0 8px; border-top: 1px solid var(--line); }
.venue__area { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.venue__name { font-size: 1.4rem; margin: 8px 0 10px; line-height: 1.25; }
.venue__note { color: var(--mute); font-size: .92rem; }
.venue__occasion { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .74rem; letter-spacing: .02em; color: var(--ink-2); }
@media (min-width: 560px) { .venues { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .edit__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .edit__head { position: sticky; top: calc(var(--header) + 40px); }
  .edit:nth-of-type(even) .edit__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
  .edit:nth-of-type(even) .edit__head { order: 2; }
  .venues { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------- piece page */
.crumbs { display: flex; gap: 10px; padding-block: 24px; font-size: .95rem; color: var(--mute); }
.piece__grid { display: grid; gap: 32px; padding-bottom: clamp(40px, 6vw, 88px); }
.tile--large { aspect-ratio: 3 / 4; }
.piece__visual { display: grid; gap: 12px; }
.piece__info h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); margin: 12px 0 8px; letter-spacing: -.02em; line-height: 1.02; }
.piece__price { margin: 0 0 24px; font-family: var(--text); font-size: clamp(1.45rem, 2.2vw, 1.85rem); font-variant-numeric: lining-nums tabular-nums; }
.piece__price--request { font-style: italic; color: var(--ink-2); }
.piece__desc { max-width: 46ch; color: var(--ink-2); font-family: var(--text); font-size: 1.18rem; line-height: 1.55; }
.piece__desc p + p { margin-top: 12px; }
.specs { margin: 32px 0; border-top: 1px solid var(--line); }
.specs div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.specs dt { color: var(--mute); }
.specs dd { text-align: right; }
.piece__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .piece__grid { grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
  .piece__visual { position: sticky; top: calc(var(--header) + 24px); }
  /* several photos: the pictures scroll, the details stay in view */
  .piece--gallery .piece__visual { position: static; }
  .piece--gallery .piece__info { position: sticky; top: calc(var(--header) + 24px); }
}

/* -------------------------------------------------------------- house page */
.prose-grid { display: grid; gap: 40px; }
.prose p { font-family: var(--text); font-size: clamp(1.22rem, 1.9vw, 1.5rem); line-height: 1.6; font-variant-numeric: oldstyle-nums; }
.prose p + p { margin-top: 20px; }
.pull-quote { margin: clamp(36px, 5vw, 64px) 0; padding-left: 24px; border-left: 1px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.4; }
.pull-quote cite { display: block; margin-top: 14px; font-family: var(--sans); font-style: normal; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.house-fig .tile { max-width: 460px; }
/* the founder's portrait: first on phones, and it stays beside the bio while it is read on desktop */
.founder-fig { order: -1; max-width: 420px; margin: 0; }
.founder-fig img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: var(--white); }
.founder-fig figcaption { margin-top: 14px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 899px) { .founder-fig { width: min(78vw, 360px); } }
@media (min-width: 900px) {
  .prose-grid { grid-template-columns: 1.1fr .9fr; gap: 96px; align-items: center; } .house-fig { justify-self: end; width: 100%; }
  .prose-grid:has(.founder-fig) { align-items: start; }
  .founder-fig { order: 0; position: sticky; top: calc(var(--header) + 32px); }
}

/* -------------------------------------------------------------- visit / contact */
.visit-grid { display: grid; gap: 56px; }
.visit-info .eyebrow { margin-bottom: 12px; }
.visit-info p:not(.eyebrow) { margin-bottom: 32px; }
.contact__title { font-size: 2rem; margin-bottom: 24px; }
.contact__about { margin-bottom: 20px; color: var(--mute); }
.contact__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.contact__opt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.contact__opt .eyebrow, .contact__val { grid-column: 1; }
.contact__val { font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 1.7rem); overflow-wrap: anywhere; }
.contact__opt .arr { grid-column: 2; grid-row: 1 / span 2; }
@media (hover: hover) { .contact__opt:hover .arr { transform: translateX(6px); } }
.contact__note { margin-top: 20px; font-size: .9rem; color: var(--mute); }
@media (min-width: 900px) { .visit-grid { grid-template-columns: .8fr 1.2fr; gap: 96px; } }

/* -------------------------------------------------------------- footer */
.site-footer { background: var(--night); color: var(--ink); padding-top: clamp(56px, 8vw, 100px); }
.foot { display: grid; gap: 40px; }
.foot__tag { color: var(--night-mute); margin-top: 8px; }
.foot__nav { display: grid; gap: 4px; align-content: start; }
.foot__nav a { display: inline-block; padding-block: 6px; font-size: .95rem; }
.site-footer .eyebrow { margin-bottom: 14px; }
.site-footer address { color: var(--night-mute); line-height: 1.7; margin-bottom: 16px; }
.site-footer .hours div { border-color: var(--night-line); }
.site-footer .hours dt { color: var(--night-mute); }
.site-footer .hours { font-size: .85rem; margin-bottom: 0; }
.foot__contact p + p { margin-top: 12px; }
.foot__base { display: flex; justify-content: space-between; margin-top: 56px; padding-block: 24px; border-top: 1px solid var(--night-line); font-size: .78rem; color: var(--night-mute); }
@media (min-width: 900px) { .foot { grid-template-columns: 1.3fr .8fr 1.2fr 1fr; } }

/* -------------------------------------------------------------- 404 */
.notfound { min-height: 60vh; }

/* -------------------------------------------------------------- home: taste promo band */
.taste-promo__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.taste-promo h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 10px; max-width: 26ch; }
.taste-promo em { color: var(--night-mute); }

/* -------------------------------------------------------------- Discover Your Taste quiz */
.quiz-noscript { max-width: 52ch; padding-block: 24px; color: var(--mute); }
.quiz[hidden], .result__profile[hidden], .result__next[hidden], .rec-note[hidden] { display: none; }
.quiz { max-width: 640px; }
.quiz__progress { margin-bottom: clamp(32px, 5vw, 56px); }
.quiz__bar { position: relative; height: 2px; background: var(--line); }
.quiz__fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--ink); transition: width .5s var(--ease); }
.quiz__count { margin-top: 12px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.quiz__form { position: relative; }
.q { display: grid; gap: clamp(24px, 4vw, 40px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.q[hidden] { display: none; }
.q--out { opacity: 0; transform: translateX(-14px); }
.q--in { animation: q-in .4s var(--ease); }
@keyframes q-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.q__prompt { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1.25; max-width: 20ch; margin-bottom: clamp(20px, 3vw, 32px); }
.q__options { display: grid; gap: 12px; }
.option { position: relative; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 16px 20px; border: 1px solid var(--line); cursor: pointer; transition: border-color .3s var(--ease), background .3s var(--ease); }
.option input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; }
.option__dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); position: relative; transition: border-color .3s var(--ease); }
.option__dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .25s var(--ease); }
.option__label { font-size: 1rem; line-height: 1.4; }
.option:has(input:checked) { border-color: var(--accent); background: var(--white); }
.option:has(input:checked) .option__dot { border-color: var(--accent); }
.option:has(input:checked) .option__dot::after { transform: scale(1); }
.option:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) { .option:hover { border-color: var(--ink); } }
.q__hint { margin-top: calc(10px - clamp(20px, 3vw, 32px)); font-size: .85rem; color: var(--mute); }
.q__optional { display: inline-block; margin-left: .6em; vertical-align: middle; font-family: var(--sans, inherit); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.q__options--grouped { gap: 10px; }
.q__group { margin-top: 18px; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.q__group:first-child { margin-top: 0; }
.option--checkbox .option__dot, .option--checkbox .option__dot::after { border-radius: 2px; }
.option--off { opacity: .4; cursor: not-allowed; }
.quiz__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: clamp(32px, 5vw, 56px); }
.quiz__nav .btn:disabled { opacity: .3; cursor: not-allowed; }
@media (hover: hover) { .quiz__nav .btn:disabled:hover { background: var(--ink); color: var(--on-ink); } }
.quiz__privacy { margin-top: 36px; font-size: .8rem; color: var(--mute); max-width: 46ch; }

/* details step: name + email/phone, posted to Netlify Forms */
.details[hidden] { display: none; }
.details { max-width: 640px; }
.details__title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.2; margin: 12px 0 14px; }
.details__lede { color: var(--ink-2); margin-bottom: 32px; max-width: 48ch; }
.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; }
.q__text { display: block; }
.q__text textarea { width: 100%; min-height: 120px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 0; background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5; resize: vertical; }
.q__text textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.q__set { display: contents; }
.q__set[hidden] { display: none; }
.field { display: grid; gap: 6px; margin-bottom: 22px; }
.field label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.field label span { text-transform: none; letter-spacing: 0; }
.field input { width: 100%; min-height: 48px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; font-size: 1rem; }
.field input:focus-visible { outline: 0; border-bottom-width: 2px; padding-bottom: 9px; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.details__note { font-size: .82rem; color: var(--mute); max-width: 52ch; }
.details__status { min-height: 1.5em; margin-top: 12px; font-size: .9rem; color: var(--ink-2); }
.details .quiz__nav { margin-top: 20px; }
.result__thanks { margin: 8px 0 8px; padding: 24px 28px; border: 1px solid var(--ink); max-width: 720px; }
.result__thanks .result__h { margin-top: 0; }
.result__thanks-text { margin-top: 10px; color: var(--ink-2); max-width: 56ch; }
.result__h--sm { font-size: clamp(1.15rem, 2vw, 1.35rem); margin-bottom: 20px; }
.result__fallback[hidden] { display: none; }

/* result: reuses .grid/.grid--3/.card from the collection styles above */
.result__tagline { font-family: var(--text); font-style: italic; font-size: 1.3rem; margin: 14px 0 24px; color: var(--ink-2); }
.result__desc { max-width: 52ch; color: var(--ink-2); }
.result__desc p + p { margin-top: 12px; }
.result__pieces { margin: clamp(32px, 5vw, 56px) 0; max-width: 720px; }
.result__exp { margin-bottom: 32px; }
.result__profile:focus { outline: none; }
.result__kicker { margin-top: 18px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.result__profile h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 6px 0 20px; }
.result__h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-top: clamp(40px, 6vw, 64px); }
.result__profile .result__pieces { margin: 24px 0 clamp(28px, 4vw, 40px); max-width: none; }
.rec__role { margin-bottom: 12px; color: var(--ink); }
.result__extras { display: grid; gap: 24px; max-width: 900px; }
@media (min-width: 800px) { .result__extras { grid-template-columns: 1fr 1fr; gap: 40px; } }
.rec-note { padding-top: 18px; border-top: 1px solid var(--line); }
.rec-note .eyebrow { margin-bottom: 8px; }
.rec-note p:not(.eyebrow) { color: var(--ink-2); max-width: 44ch; }
.rec-note__name { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.rec-note a.rec-note__name { text-transform: none; letter-spacing: 0; }
.result__nexttext { max-width: 56ch; margin: 12px 0 28px; color: var(--ink-2); }
.result__alt { margin-top: 20px; font-size: .9rem; color: var(--mute); max-width: 60ch; }
.result__alt .link { font-size: inherit; }
.result__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* -------------------------------------------------------------- reveal on scroll */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* smooth cross-page fades (Chromium/Safari; ignored elsewhere) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
.site-header { view-transition-name: site-header; }

/* -------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero h1 .l > span, .hero__eyebrow, .hero__lede, .hero__cta, .hero__watch { opacity: 1; transform: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__orbit { display: none; }
}

/* -------------------------------------------------------------- privacy policy */
.policy { max-width: 72ch; }
.policy__sec + .policy__sec { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
.policy h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 14px; }
.policy p, .policy li { color: var(--ink-2); }
.policy p + p, .policy ul + p { margin-top: 12px; }
.policy ul { margin: 12px 0 0; padding-left: 1.2em; list-style: disc; }
.policy li + li { margin-top: 8px; }
.policy strong { color: var(--ink); font-weight: 500; }
.foot__base a { text-decoration: underline; text-underline-offset: 3px; }
.foot__legal { padding-bottom: 28px; font-size: .72rem; line-height: 1.6; color: var(--night-mute); }

/* -------------------------------------------------------------- founder + private sourcing (home) */
.founder__grid { display: grid; gap: 48px; }
.founder__intro h2 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0 0 24px; letter-spacing: -.02em; }
.founder__intro p:not(.eyebrow) { color: var(--ink-2); max-width: 46ch; margin-bottom: 24px; }
.founder__sourcing { border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 44px); }
.founder__sourcing h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 12px 0 14px; }
.founder__sourcing p:not(.eyebrow) { color: var(--ink-2); margin-bottom: 28px; max-width: 44ch; }
@media (min-width: 900px) { .founder__grid { grid-template-columns: 1fr 1fr; gap: clamp(56px, 7vw, 110px); align-items: center; } }
.taste-promo__p { color: var(--night-mute); margin-top: 12px; max-width: 48ch; }
.taste-benefit { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; margin-top: 24px; max-width: 30ch; }

/* -------------------------------------------------------------- watch page: before you buy */
.piece__alt { margin-top: 16px; font-size: .9rem; color: var(--mute); }
.buying { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.buying__h { font-size: 1.4rem; margin-bottom: 16px; }
.buying__list div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.buying__list dt { font-weight: 500; margin-bottom: 4px; }
.buying__list dd { color: var(--ink-2); font-size: .92rem; max-width: 48ch; }

/* ============================================================== hero: into the movement (scroll-craft)
   One pinned act on the site's bronze. A real movement photograph comes forward, then the camera
   travels into it (a zoom on the photograph itself, so the calibre is never altered), and the
   frame hands over to the cream page below. hero.js drives the planes from one scroll value. */
.hx { position: relative; height: 320vh; background: #3d2f29; color: #f6f3ed; }
.hx__stage { position: sticky; top: var(--header); height: calc(100svh - var(--header)); overflow: clip; isolation: isolate;
  background: radial-gradient(120% 95% at 66% 48%, #4a3a33 0%, #30241f 34%, #2a1f1b 70%, #30241f 100%); }
.hx__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
  background: radial-gradient(38% 46% at var(--gx, 66%) 48%, rgba(246, 243, 237, .22), rgba(246, 243, 237, 0) 70%); }
.hx__disc { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 50% 50%; will-change: transform;
  filter: drop-shadow(0 24px 40px rgba(36, 27, 23, .5)) drop-shadow(0 4px 10px rgba(36, 27, 23, .35)); }
.hx__disc img { width: 100%; height: auto; max-width: none; border-radius: 50%; }
.hx__loupe { position: absolute; width: 180px; height: 180px; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  opacity: 0; transition: opacity .25s ease; background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(246, 243, 237, .8), 0 0 0 7px rgba(48, 36, 31, .5), 0 14px 30px rgba(36, 27, 23, .5); }
.hx__loupe.is-on { opacity: 1; }
/* the hand-over: cream rises from the bottom as the act ends, so the stage leaves on the page colour */
.hx__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, #f6f3ed 0%, rgba(246, 243, 237, .85) 30%, rgba(246, 243, 237, 0) 100%); }

.hx__copy { position: absolute; z-index: 5; }
.hx__copy--a { inset: 0; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--hx-top, 0px) + 40px) 40px; pointer-events: none; }
.hx__copy--a > * { max-width: 36rem; width: fit-content; pointer-events: auto; } /* boxes hug their text, so the movement can use the rest */
.hx__eyebrow { color: #d8d0c5; margin-bottom: 22px; }
.hx h1 { font-size: clamp(3rem, 8.4vw, 7rem); line-height: 1; color: #f6f3ed; }
.hx h1 span, .hx h1 em { display: block; }
.hx__lede { margin-top: 24px; font-size: 1.05rem; color: #eee9e1; max-width: 34rem; }
.hx__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hx__cta .btn--light { background: #f6f3ed; color: #30241f; border-color: #f6f3ed; }
.hx__cta .btn--light:hover { background: transparent; color: #f6f3ed; }
.hx__cta .btn--outline-light { color: #f6f3ed; border-color: rgba(246, 243, 237, .6); }
.hx__cta .btn--outline-light:hover { background: #f6f3ed; color: #30241f; }
.hx__time { margin-top: 28px; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: #d8d0c5; }
.hx__time time { margin-left: .8em; font-variant-numeric: tabular-nums; color: #f6f3ed; }
.hx__copy--b { left: 0; right: 0; top: 10%; text-align: center; opacity: 0; font-family: var(--serif); font-style: italic;
  font-size: clamp(2.2rem, 5.2vw, 4.2rem); color: #f6f3ed; text-shadow: 0 2px 18px rgba(36, 27, 23, .6); pointer-events: none; }
.hx__copy--c { left: 0; right: 0; top: 0; bottom: 0; margin: 0 auto; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; pointer-events: none; }
.hx__copy--c::before { content: ""; position: absolute; z-index: -1; left: -50vw; width: 120vw; top: 20%; height: 60%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(48, 36, 31, .7), rgba(48, 36, 31, 0)); }
.hx__copy--c.is-live > * { pointer-events: auto; }
.hx__say { font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.08; max-width: 18ch; margin-bottom: 28px; color: #f6f3ed; text-shadow: 0 2px 16px rgba(36, 27, 23, .5); }
.hx__say em { display: block; }
.hx__copy--c .btn--light { background: #f6f3ed; color: #30241f; border-color: #f6f3ed; align-self: flex-start; }

/* mid-size landscape (small laptops, tablets sideways): a narrower copy column leaves the
   movement more room beside it */
@media (min-width: 700px) and (max-width: 1199px) and (orientation: landscape) {
  .hx h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); }
  .hx__lede { max-width: 36vw; }
  .hx__cta { flex-direction: column; align-items: flex-start; }
}
/* tablets upright: copy at the top, the movement fills the space below */
@media (min-width: 700px) and (orientation: portrait) {
  .hx__copy--a { justify-content: flex-start; padding-top: calc(var(--hx-top, 0px) + 56px); }
}
@media (max-width: 699px) {
  .hx { height: 280vh; }
  .hx__stage { background: radial-gradient(140% 80% at 50% 78%, #4a3a33 0%, #30241f 36%, #2a1f1b 72%, #30241f 100%); }
  .hx__copy--a { justify-content: flex-start; padding-top: calc(var(--hx-top, 0px) + 28px); }
  .hx h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .hx__lede { font-size: .98rem; margin-top: 16px; }
  .hx__cta { margin-top: 22px; }
  .hx__cta .btn { flex: 1 1 100%; }
  .hx__time { display: none; }
}

/* short phones (iPhone SE and similar): tighter copy so the movement keeps its size */
@media (max-width: 699px) and (max-height: 740px) {
  .hx h1 { font-size: 2.35rem; }
  .hx__eyebrow { margin-bottom: 12px; }
  .hx__lede { font-size: .92rem; margin-top: 10px; line-height: 1.5; }
  .hx__cta { margin-top: 14px; gap: 8px; }
  .hx__copy--a { padding-top: calc(var(--hx-top, 0px) + 18px); }
}
/* phones held sideways: very little height, so the copy is compact and sits beside the movement */
@media (max-height: 500px) and (orientation: landscape) {
  .hx__copy--a { justify-content: center; padding-block: calc(var(--hx-top, 0px) + 8px) 12px; }
  .hx h1 { font-size: clamp(1.9rem, 4.6vw, 2.5rem); }
  .hx__eyebrow { margin-bottom: 8px; }
  .hx__lede { font-size: .88rem; margin-top: 8px; max-width: 44vw; line-height: 1.45; }
  .hx__cta { margin-top: 12px; gap: 8px; flex-direction: row; }
  .hx__cta .btn { flex: 0 0 auto; padding-inline: 16px; }
  .hx__time { display: none; }
}
/* reduced motion: a complete still composition, no pinned scroll */
@media (prefers-reduced-motion: reduce) {
  .hx { height: auto; }
  .hx__stage { position: relative; top: 0; }
  .hx__copy--b, .hx__copy--c, .hx__fade { display: none; }
}
/* without JavaScript the planes do not move: park the movement beside the copy */
.no-js .hx { height: auto; }
.no-js .hx__disc { left: auto; right: 6%; top: 50%; width: min(34vw, 66vh); transform: translateY(-50%); }
@media (max-width: 699px) { .no-js .hx__disc { right: 10%; top: auto; bottom: 4%; width: 80vw; transform: none; } }

/* -------------------------------------------------------------- home: Discover Your Taste in three steps
   Hand-drawn sketches on the page's own cream; multiply lets their paper disappear into it. */
.taste-steps__head { text-align: center; max-width: 46rem; margin: 0 auto; }
.taste-steps__head h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-top: 14px; }
.taste-steps__p { margin-top: 16px; color: var(--ink-2); }
.taste-steps__list { list-style: none; margin: clamp(40px, 6vw, 64px) 0 0; padding: 0; display: grid; gap: 48px; counter-reset: none; }
.taste-step { text-align: center; position: relative; }
.taste-step img { width: 100%; max-width: 380px; height: auto; margin: 0 auto 22px; mix-blend-mode: multiply; }
.taste-step__n { font-family: var(--serif); font-size: 1.15rem; color: var(--mute); }
.taste-step__n::after { content: ""; display: block; width: 18px; height: 1px; margin: 10px auto 14px; background: var(--mute); }
.taste-step__t { font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; }
.taste-step__d { margin-top: 8px; font-family: var(--text); font-style: italic; font-size: 1.05rem; color: var(--ink-2); }
.taste-steps__cta { text-align: center; margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 800px) {
  .taste-steps__list { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
  /* the arrows between steps, drawn in CSS so the sketches stay clean */
  .taste-step:not(:last-child)::after { content: "→"; position: absolute; right: calc(clamp(20px, 3vw, 44px) / -2); top: 34%; transform: translateX(50%); color: var(--mute); font-size: 1.3rem; }
}
@media (max-width: 799px) { .taste-step img { max-width: 300px; } }

/* -------------------------------------------------------------- house-style sketches
   Paper whitened at export, so multiply takes on the section colour exactly. */
/* the sketch carries its section's colour itself, so it still blends inside pinned (sticky)
   or animated containers, which would otherwise hide the page colour from the blend */
.sketch { margin: 0; background: var(--sketch-bg, var(--paper)); isolation: isolate; }
.sketch img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.edit__art { max-width: 520px; margin: 0 0 24px -3%; }
.promise__art { max-width: 340px; margin: 0 0 18px -4%; }
.visit__art { max-width: 460px; margin: 0 0 28px -3%; }
.notfound__art { max-width: 460px; margin: 28px 0 8px -3%; }

/* -------------------------------------------------------------- Discover Your Taste: sketches
   One sketch per question beside the questions (quiz.js swaps it), one per collector profile. */
.quiz__art { display: none; }
.quiz__art img { transition: opacity .25s var(--ease); }
.quiz__art img.is-out { opacity: 0; }
@media (min-width: 1000px) {
  .quiz { max-width: none; display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 110px); align-items: start; }
  .quiz > :not(.quiz__art) { grid-column: 1; }
  .quiz__art { display: block; grid-column: 2; grid-row: 1 / span 4; position: sticky; top: calc(var(--header) + 32px); max-width: 440px; justify-self: center; width: 100%; }
}
@media (max-width: 999px) {
  /* phones and tablets: a small sketch above the question */
  .quiz__art { display: block; order: -1; margin: 0 auto 20px; width: min(42vw, 190px); }
  .quiz { display: flex; flex-direction: column; }
  .quiz__progress { order: -2; }
}
.result__art { max-width: 620px; margin: 4px 0 28px -2%; }

/* ============================================================== The Selection: the weekly edit
   A masthead, the curator's letter beside the contents, then ten numbered pieces in the rhythm of a
   printed edit: a full-width feature, then a staggered pair, the features alternating sides. */
.mast { padding-block: clamp(56px, 9vw, 130px) clamp(28px, 4vw, 56px); text-align: center; }
.mast h1 { font-size: clamp(4.2rem, 14vw, 11.5rem); line-height: .9; letter-spacing: -.035em; margin-top: 20px; }
.mast__issue { display: flex; flex-wrap: wrap; justify-content: center; max-width: 820px; margin: clamp(28px, 4vw, 44px) auto 0; padding-block: 15px;
  border-block: 1px solid var(--line); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.mast__issue span + span::before { content: "\00b7"; margin-inline: 1.2em; color: var(--mute); }
@media (max-width: 639px) {
  .mast__issue { flex-direction: column; gap: 6px; }
  .mast__issue span + span::before { content: none; }
}

.letter-band { padding-block: clamp(40px, 6vw, 96px) clamp(80px, 11vw, 160px); }
.letter-band__grid { display: grid; gap: clamp(56px, 7vw, 120px); }
@media (min-width: 960px) { .letter-band__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; } }
.letter { max-width: 38rem; }
.letter__body { margin-top: 24px; }
.letter__body p { font-family: var(--text); font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.6; }
.letter__body p + p { margin-top: 1em; }
.letter__sign { font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; margin-top: 36px; }
.letter__role { margin-top: 10px; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }

.contents { border-top: 1px solid var(--ink); padding-top: 18px; }
.contents ol { list-style: none; margin: 14px 0 0; padding: 0; }
.contents a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contents .n { flex: none; min-width: 1.7em; font-family: var(--serif); font-style: italic; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.contents .t { font-family: var(--serif); font-size: 1.14rem; line-height: 1.3; transition: color .3s var(--ease); }
.contents .m { display: block; margin-top: 3px; font-family: var(--sans); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.contents .dots { flex: 1 1 24px; min-width: 24px; border-bottom: 1px dotted currentColor; color: var(--mute); opacity: .55; transform: translateY(-.3em); }
.contents .p { flex: none; font-family: var(--text); font-size: 1.02rem; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-2); }
@media (hover: hover) { .contents a:hover .t { color: var(--accent); } }
.contents__note { margin-top: 18px; font-size: .88rem; color: var(--mute); }

.lots { padding-bottom: clamp(80px, 11vw, 160px); }
.lots > .wrap, .lot-pair { display: grid; gap: clamp(88px, 12vw, 180px); }
.lot { scroll-margin-top: calc(var(--header) + 24px); }
.lot__media { display: block; width: 100%; aspect-ratio: 3 / 4; }
.lot__text { margin-top: 28px; }
.lot__no { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--accent); font-variant-numeric: lining-nums; }
.lot__maker { margin-top: 16px; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.lot__name { margin-top: 10px; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -.02em; }
.lot__ref { margin-top: 8px; color: var(--mute); font-size: .9rem; font-variant-numeric: tabular-nums; }
.lot__why { max-width: 32ch; margin-top: 16px; font-family: var(--text); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--ink-2); }
.lot__price { max-width: 24rem; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--text); font-size: clamp(1.35rem, 1.9vw, 1.6rem); letter-spacing: .01em; font-variant-numeric: lining-nums tabular-nums; }
.lot__price--request { font-style: italic; color: var(--ink-2); }
.lot__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: 14px; }
.lot__more { display: inline-flex; align-items: center; min-height: 44px; font-size: .95rem; color: var(--mute); transition: color .3s var(--ease); }
@media (hover: hover) { .lot__more:hover { color: var(--ink); } }
@media (min-width: 800px) {
  .lot--feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(48px, 8vw, 140px); align-items: center; }
  .lot--feature .lot__media { height: min(86vh, 900px); width: auto; max-width: 100%; justify-self: end; }
  .lot--feature.lot--flip .lot__media { order: 2; justify-self: start; }
  .lot--feature .lot__text { margin-top: 0; }
  .lot--feature .lot__no { font-size: clamp(1.5rem, 2.1vw, 1.9rem); }
  .lot--feature .lot__name { font-size: clamp(2.7rem, 4.8vw, 4.4rem); }
  .lot-pair { grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 140px); align-items: start; padding-inline: clamp(0px, 5vw, 96px); }
  .lot-pair .lot:nth-child(2) { margin-top: clamp(96px, 16vw, 240px); }   /* staggered, as on a printed spread */
}

.also { padding-bottom: clamp(80px, 11vw, 160px); }
.also__head { margin-bottom: clamp(28px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--line); }

.card__price { margin-top: 12px; font-family: var(--text); font-size: 1.08rem; font-variant-numeric: lining-nums tabular-nums; }
.card__price--request { font-style: italic; color: var(--mute); }
@media (min-width: 800px) { .card--lead { grid-column: span 2; } .card--lead .tile { aspect-ratio: 8 / 5; } }
.card__ref { font-size: .8rem; color: var(--mute); margin-top: 2px; font-variant-numeric: tabular-nums; }
.card__why { font-family: var(--text); font-style: italic; font-size: 1.08rem; color: var(--ink-2); line-height: 1.45; margin-top: 10px; }
.piece__ref { color: var(--mute); margin-bottom: 20px; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- touch targets (UX audit)
   Text links keep their look but get a 44px-tall tap area; footer contact links grow to 44px. */
.link { position: relative; }
.link::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.foot__nav a, .foot__contact a, .site-footer .link { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.prose { max-width: 46rem; }
/* experiences in the Selection: the house sketches, on paper rather than in a photo tile */
.tile--sketch { background: var(--paper); isolation: isolate; }
.tile--sketch img { object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.card--exp .tile--sketch { background: var(--paper); isolation: isolate; }

/* ivory & oxblood: key links and the current menu item in oxblood */
.link { color: var(--link); }
.nav a[aria-current] { color: var(--accent); }
.option__dot::after { background: var(--accent); }
.quiz__fill { background: var(--accent); }

/* ============================================================== luxury pass (2026-10-12)
   Rooms in the Selection, the piece that turns on hover, the loupe on piece pages, a header that
   lets the hero breathe, a faint paper grain, and the House page's sketch and drop cap. */

/* ---- the Selection: one room per piece, alternating sides, never a grid */
.room { display: grid; gap: 28px; align-items: center; }
.room__media { display: block; width: 100%; }
.room__maker { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.room__name { font-size: clamp(2.3rem, 4.4vw, 3.9rem); line-height: 1.04; letter-spacing: -.02em; margin: 14px 0 10px; }
.room__ref { color: var(--mute); font-size: .9rem; font-variant-numeric: tabular-nums; }
.room__why { font-family: var(--text); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.5; color: var(--ink-2); max-width: 30ch; margin: 18px 0 28px; }
@media (min-width: 800px) {
  .room { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(48px, 8vw, 140px); }
  .room__media { height: min(84vh, 880px); width: auto; max-width: 100%; aspect-ratio: 3 / 4; justify-self: end; }
  .room--flip .room__media { order: 2; justify-self: start; }
  .room--wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); }
  .room--wide.room--flip { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); }
  .room--wide .room__media { height: auto; width: 100%; aspect-ratio: 16 / 10; }
}
.room--wide .room__media.tile--sketch { background: var(--paper); isolation: isolate; }
.room--wide .room__media img { padding: 0; }
@media (max-width: 799px) { .room--wide .room__media { aspect-ratio: 16 / 10; } }

/* ---- the piece turns: its other view fades in on hover (no zoom) */
.tile__alt { opacity: 0; transition: opacity 1s var(--ease); }
@media (hover: hover) {
  .card:hover .tile__alt, .lot:hover .tile__alt { opacity: 1; }
}

/* ---- the loupe on piece pages: the jeweller's glass from the hero, over the full-resolution photo */
.loupe { position: absolute; left: 0; top: 0; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .3s var(--ease); background-repeat: no-repeat; background-color: #e6dfd5;
  box-shadow: 0 0 0 1px rgba(246, 243, 237, .9), 0 0 0 6px rgba(48, 36, 31, .35), 0 18px 40px rgba(36, 27, 23, .35); }
.loupe.is-on { opacity: 1; }
[data-loupe].is-looking { cursor: none; }

/* ---- the header: see-through over the homepage hero, settling to ivory once the hero has passed */
.js .page-home { --hx-top: var(--header); }
.js .page-home .hx__stage { top: 0; height: 100svh; }
.js .site-header--over { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; color: #f6f3ed;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.js .site-header--over::before { content: ""; position: absolute; inset: 0 0 -48px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(36, 27, 23, .55), rgba(36, 27, 23, 0)); transition: opacity .5s var(--ease); }
.js .site-header--over .nav .nav__cta, .js .site-header--over .nav a[aria-current] { color: inherit; }
.js .site-header--over.is-solid, .js body.menu-open .site-header--over { background: var(--paper); color: var(--ink); border-bottom-color: var(--line); }
.js .site-header--over.is-solid::before, .js body.menu-open .site-header--over::before { opacity: 0; }
.js .site-header--over.is-solid .nav .nav__cta { color: var(--accent); }
.js .site-header--over :focus-visible { outline-color: currentColor; }
.js .site-header--over.is-init, .js .site-header--over.is-init::before { transition: none; }

/* ---- paper grain: a faint, fixed texture over the whole page, like a printed page */
body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: url("../img/grain.png") repeat; background-size: 160px 160px; }
@media print { body::after { display: none; } }

/* ---- the House: its sketch, a drop cap, and room to read */
.house__art { max-width: 1100px; margin: 0 auto; --sketch-bg: var(--paper); }
.prose--house { margin-inline: auto; }
.dropcap { float: left; font-family: var(--serif); font-size: 3.6em; line-height: .84; padding: .06em .12em 0 0; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- sourced to order: an illustration, captioned as one, in place of a photograph of stock */
.tile__label { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 5px 9px; background: rgba(246, 243, 237, .86);
  color: var(--ink-2); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; pointer-events: none; }
.lot__media.tile--sketch img, .card .tile--sketch img { padding: 4%; }