/* Timberline — the site layer. Loads after styles.css, which holds the
   foundations tokens and the components the foundations page documents.

   This layer is the published site: its scale, its rhythm, and the way the
   photography is given room. The palette and the typefaces are unchanged —
   what changed is how much air everything gets. */

:root {
  /* horizontal gutter and the measure the whole site aligns to */
  --gutter: clamp(20px, 5.2vw, 76px);
  --measure: 1440px;
  --measure-wide: 1720px;
  --measure-text: 64ch;

  /* vertical rhythm */
  --band: clamp(64px, 9vw, 136px);
  --band-tight: clamp(44px, 6vw, 88px);

  /* fluid type scale */
  --t-hero: clamp(40px, 6vw, 86px);
  --t-display: clamp(30px, 4.4vw, 58px);
  --t-title: clamp(25px, 2.9vw, 38px);
  --t-lede: clamp(16.5px, 1.35vw, 20px);
  --t-body: 15.5px;
  --t-small: 13.5px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hair: 1px solid var(--line-14);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { text-rendering: optimizeLegibility; }

/* ---------- layout primitives ---------- */

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

.wrap-wide { max-width: var(--measure-wide); }
.wrap-text { max-width: calc(var(--measure-text) + var(--gutter) * 2); }

section.band { padding-top: var(--band); padding-bottom: var(--band); }
section.band-tight { padding-top: var(--band-tight); padding-bottom: var(--band-tight); }
.band + .band:not(.band-dark) { padding-top: 0; }
.band-rule { border-top: var(--hair); }
/* A ruled band draws its own full-width hairline, so the marker inside it does
   not draw a second one a few pixels below; and it is given room under the
   rule rather than starting flush against it. */
section.band + section.band.band-rule { padding-top: var(--band-tight); }
.band-rule > .wrap > .marker:first-child { border-top: 0; padding-top: 0; }
/* After the dark band the page needs its full breathing room back: without
   it the next eyebrow sat right on the dark band's edge. */
section.band.band-dark + section.band:not(.band-dark) { padding-top: var(--band); }

/* ---------- editorial type ---------- */

.eyebrow {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-brass-text);
  display: block;
}

.eyebrow-rose { color: var(--c-rosewood); }
.eyebrow-pale { color: var(--c-parch-muted); }

.display-hero {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display-1 {
  font-family: var(--f-display);
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.display-2 {
  font-family: var(--f-display);
  font-size: var(--t-title);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.species {
  font-family: var(--f-species);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 22px);
  color: var(--c-coffee);
}
.species span { font-family: var(--f-ui); font-style: normal; font-size: 0.68em; color: var(--c-muted); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--c-body);
  max-width: 44ch;
  text-wrap: pretty;
}

.prose { font-size: var(--t-body); line-height: 1.75; color: var(--c-body); max-width: 60ch; }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }

.fine { font-size: var(--t-small); line-height: 1.7; color: var(--c-muted); max-width: 56ch; }

/* a hairline that carries a label — the section marker used down the site */
.marker {
  display: flex;
  align-items: baseline;
  gap: 18px;
  border-top: 1px solid var(--line-25);
  padding-top: 14px;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.marker .eyebrow { flex: none; }
.marker-count { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--c-faded-text); }

/* ---------- buttons ---------- */

.btn { transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }

.btn-primary {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 17px 34px;
  font-size: 12px;
  letter-spacing: 0.16em;
}
.btn-primary:hover { background: var(--c-coffee); color: var(--c-paper); }

.btn-ghost {
  display: inline-block;
  border: 1px solid var(--line-25);
  color: var(--c-ink);
  padding: 16px 32px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-ghost:hover { border-color: var(--c-ink); background: rgba(37, 28, 18, 0.04); color: var(--c-ink); }

.btn-pale {
  border-color: rgba(233, 223, 201, 0.45);
  color: var(--c-parchment);
}
.btn-pale:hover { border-color: var(--c-parchment); background: rgba(233, 223, 201, 0.08); color: var(--c-parchment); }

/* an underlined text link with a rule that draws itself on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-rosewood);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(124, 54, 38, 0.32);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.link-arrow:hover { color: var(--c-ink); border-color: var(--c-ink); }
.link-arrow::after { content: '→'; transition: transform 0.25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), padding 0.35s var(--ease);
}

.site-header.is-solid {
  background: rgba(235, 227, 210, 0.93);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom-color: var(--line-14);
  padding-top: 15px;
  padding-bottom: 15px;
}

/* pages that do not open on a photograph start solid */
body.has-hero { padding-top: 0; }
body:not(.has-hero) { padding-top: 74px; }

.site-brand { display: flex; align-items: center; gap: 11px; color: var(--c-ink); text-decoration: none; }
.site-brand:hover { color: var(--c-ink); }
.site-brand svg { flex: none; }

.site-wordmark {
  font-family: var(--f-display);
  font-size: 17px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
}

.site-nav a {
  color: var(--c-coffee);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-nav a:hover { color: var(--c-ink); border-bottom-color: var(--line-25); }
.site-nav a.nav-current { color: var(--c-ink); border-bottom-color: var(--c-ink); }

/* ---------- home hero ---------- */

.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-vellum);
}

.hero-media { position: absolute; inset: 0; }
.hero-media image-slot { position: absolute; inset: 0; height: 100%; }
.hero-media image-slot img { filter: none; }

/* the scrim guarantees the type reads, whatever photograph sits behind it */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(235, 227, 210, 0.95) 0%, rgba(235, 227, 210, 0.78) 26%,
      rgba(235, 227, 210, 0.28) 54%, rgba(235, 227, 210, 0) 76%),
    linear-gradient(0deg, rgba(37, 28, 18, 0.16), rgba(37, 28, 18, 0) 34%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(52px, 8vw, 104px);
}

.hero-copy { max-width: min(640px, 52vw); }
.hero .species { margin-top: 18px; display: block; }
.hero .lede { margin-top: 22px; max-width: 40ch; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 34px; }
.hero-ctas .btn-primary { display: inline-block; }

.hero-foot {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(52px, 8vw, 104px);
  text-align: right;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--c-coffee);
  display: grid;
  gap: 7px;
}

/* On a wide screen the hero splits: words on the paper, photograph beside
   them. Full-bleed, the 1600px photograph was stretched across the whole
   window (soft on any retina screen) and the headline ran over the bed. In
   its own column the photograph is drawn near its real size and nothing
   sits on it. */
@media (min-width: 901px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    min-height: min(84vh, 700px);
    align-items: stretch;
  }
  .hero-media { position: relative; inset: auto; grid-column: 2; grid-row: 1; }
  .hero-media image-slot img { object-position: 54% 60%; }
  .hero-scrim { display: none; }
  .hero-inner {
    grid-column: 1; grid-row: 1;
    align-self: end;
    max-width: none;
    margin: 0;
    padding: 120px clamp(28px, 4vw, 64px) clamp(52px, 7vw, 96px)
      max(var(--gutter), calc((100vw - var(--measure-wide)) / 2 + var(--gutter)));
  }
  .hero-copy { max-width: 620px; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; display: block; }
  .hero-media { position: relative; inset: auto; height: 62vh; min-height: 340px; }
  .hero-scrim { background: linear-gradient(0deg, rgba(235, 227, 210, 0.9), rgba(235, 227, 210, 0) 45%); }
  .hero-inner { padding-top: 34px; padding-bottom: 8px; }
  .hero-copy { max-width: none; }
  .hero-foot { display: none; }
}

/* ---------- registry strip ---------- */

.registry-strip {
  border-top: var(--hair);
  border-bottom: var(--hair);
  background: var(--c-paper);
}

.registry-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 5vw, 64px);
  padding-top: 17px;
  padding-bottom: 17px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--c-muted);
}

/* ---------- the collection grid ---------- */

.collection-grid {
  display: grid;
  /* Three across: eighteen designs fill six full rows, and the home page's
     six fill two. Four across left the last row of the collection half empty. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 46px) clamp(20px, 2.4vw, 36px);
}

.p-card { display: block; text-decoration: none; color: var(--c-ink); }
.p-card:hover { color: var(--c-ink); }

.p-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-vellum);
}

.p-card-media image-slot { position: absolute; inset: 0; height: 100%; }
.p-card-media image-slot img {
  filter: none;
  /* Cards draw plates (scripts/gen-plates.py), already 4:3 with the whole
     piece in frame, so they fill the card edge to edge with nothing cut. */
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.p-card:hover .p-card-media image-slot img { transform: scale(1.045); }
/* With the whole photograph showing, the slot's empty-state stripes and
   caption would show around it; a photographed slot is a plain field. */
.p-card-media image-slot:has(img),
.piece-media image-slot:has(img) { background: var(--c-vellum); }
.p-card-media image-slot:has(img) .slot-placeholder,
.piece-media image-slot:has(img) .slot-placeholder { display: none; }
.p-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(37, 28, 18, 0.07);
  pointer-events: none;
}

.p-card-body { padding-top: 15px; }

.p-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--line-18);
  padding-top: 11px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--c-faded-text);
}
.p-card-tag-villa { color: var(--c-forest); }
.p-card-tag-enquiry { color: var(--c-brass-text); }

.p-card-name {
  font-family: var(--f-display);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.16;
  margin-top: 11px;
}

.p-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
}
.p-card-price { font-family: var(--f-mono); font-size: 13.5px; color: var(--c-ink); }
.p-card-dims { font-size: 12px; color: var(--c-muted); text-align: right; }

/* the first row of the home grid runs larger — an editorial opener */
.collection-featured {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}
.collection-featured > :first-child .p-card-media { aspect-ratio: 4 / 3; }
.collection-featured > :first-child .p-card-name { font-size: clamp(22px, 2.1vw, 30px); }

@media (max-width: 860px) {
  .collection-featured { grid-template-columns: 1fr 1fr; }
  .collection-featured > :first-child { grid-column: 1 / -1; }
  }
@media (max-width: 900px) {
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .collection-featured { grid-template-columns: 1fr; }
  .collection-grid { grid-template-columns: 1fr; }
}

/* ---------- process: three numbered columns on hairlines ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(26px, 3.4vw, 56px);
}

.step { border-top: 1px solid var(--line-25); padding-top: 18px; }
.step-no {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--c-rosewood);
}
.step-title { font-family: var(--f-display); font-size: 22px; margin-top: 12px; }
.step-text { font-size: 14px; line-height: 1.7; color: var(--c-body); margin-top: 10px; }

/* ---------- the villa band (dark, full bleed) ---------- */

.band-dark {
  background: var(--c-ink);
  color: var(--c-parchment);
}
.band-dark .display-1, .band-dark .display-2 { color: var(--c-parchment); }
.band-dark .prose, .band-dark .lede { color: var(--c-parch-body); }
.band-dark .fine { color: var(--c-parch-muted); }
.band-dark a { color: var(--c-parchment); }

.villa {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 5vw, 84px);
  align-items: center;
}

.villa-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #17110B;
}
.villa-media image-slot { position: absolute; inset: 0; height: 100%; }
.villa-media image-slot img { filter: none; }

.villa-facts {
  display: grid;
  gap: 14px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(233, 223, 201, 0.22);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--c-parch-muted);
}

@media (max-width: 820px) {
  .villa { grid-template-columns: 1fr; }
  .villa-media { aspect-ratio: 5 / 4; }
}

/* ---------- the list ---------- */

.signup { max-width: 52ch; }

.signup-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
  align-items: stretch;
}

.signup-form input[type="email"] {
  flex: 1 1 260px;
  font-family: var(--f-ui);
  font-size: 15px;
  color: var(--c-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-25);
  border-radius: 0;
  padding: 14px 2px;
  transition: border-color 0.25s var(--ease);
}
.signup-form input[type="email"]::placeholder { color: var(--c-faded); }
.signup-form input[type="email"]:focus { outline: none; border-bottom-color: var(--c-ink); }
.signup-form .btn-primary { flex: none; border: none; }

.signup-msg {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--c-muted);
  margin-top: 16px;
  min-height: 16px;
}

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

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

.site-footer {
  margin-top: 0;
  border-top: var(--hair);
  background: var(--c-paper);
  padding: clamp(46px, 6vw, 80px) 0 clamp(34px, 4vw, 54px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.footer-mark { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; color: var(--c-ink); text-decoration: none; }
.footer-mark:hover { color: var(--c-ink); }

.footer-about { font-size: 13.5px; line-height: 1.75; color: var(--c-body); max-width: 44ch; }

.footer-col-title {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--c-faded-text);
  margin-bottom: 14px;
}

.footer-links { display: grid; gap: 9px; }
.footer-links a {
  font-size: 13.5px;
  color: var(--c-body);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer-links a:hover { color: var(--c-ink); border-bottom-color: var(--line-25); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 20px;
  border-top: var(--hair);
}

.site-footer .registry-line {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--c-muted);
}

.footer-reset {
  display: none;
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--c-brass-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
body.edit-mode .footer-reset { display: inline-block; }
.footer-reset:hover { color: var(--c-rosewood); }

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- workshop page ---------- */

.workshop-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: end;
}

.workshop-hero-media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--c-vellum);
}
.workshop-hero-media image-slot { position: absolute; inset: 0; height: 100%; }
.workshop-hero-media image-slot img { filter: none; }

.workshop-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.workshop-story p:first-child::first-letter {
  font-family: var(--f-display);
  font-size: 3.4em;
  line-height: 0.82;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--c-ink);
}

.workshop-aside { position: sticky; top: 100px; }
.workshop-aside .prov-card { width: 100%; }

@media (max-width: 900px) {
  .workshop-hero, .workshop-body { grid-template-columns: 1fr; }
  .workshop-aside { position: static; }
}

/* ---------- piece page ---------- */

.piece-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: clamp(30px, 4.5vw, 76px);
  align-items: start;
}

.piece-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-vellum);
}
.piece-media { margin-inline: auto; }
.piece-media image-slot { position: absolute; inset: 0; height: 100%; }
.piece-media image-slot img { object-fit: contain; filter: none; }
.piece-media::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(37, 28, 18, 0.07);
  pointer-events: none;
}
.piece-media.is-portrait { aspect-ratio: 3 / 4; }
.piece-media.is-landscape { aspect-ratio: 5 / 4; }

.piece-rail { position: sticky; top: 100px; }

.piece-title { font-family: var(--f-display); font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.015em; margin-top: 14px; text-wrap: balance; }
.piece-desc { font-size: 15px; line-height: 1.75; color: var(--c-body); margin-top: 20px; max-width: 46ch; }
.piece-price { font-family: var(--f-mono); font-size: clamp(22px, 2.2vw, 28px); margin-top: 26px; }
.piece-price .sold-strike { text-decoration: line-through; color: var(--c-faded); }

.piece-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line-18);
}
.piece-facts .prov-field { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--c-brass-text); }
.piece-facts .prov-value { font-size: 14px; margin-top: 5px; line-height: 1.5; }

.piece-actions { display: grid; gap: 12px; margin-top: 30px; }
.piece-actions .btn { display: block; }
.piece-actions .action-note { font-size: 12.5px; color: var(--c-muted); line-height: 1.6; }

.hold-banner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  background: var(--c-vellum);
  border: 1px solid var(--c-brass);
  border-radius: 2px;
  padding: 13px 15px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--c-coffee);
}
.hold-banner .hold-clock { font-size: 15px; color: var(--c-ink); }

.registrar-note {
  margin-top: 32px;
  border-top: 1px solid var(--line-14);
  padding-top: 20px;
  display: grid;
  gap: 10px;
  max-width: 48ch;
}
.registrar-note .registrar-line { font-size: 12.5px; line-height: 1.7; color: var(--c-muted); }

.placed-note { font-size: 14px; line-height: 1.7; color: var(--c-body); }

.gone-note {
  border: 2px solid var(--c-rosewood);
  color: var(--c-rosewood);
  border-radius: 2px;
  padding: 10px 14px;
  transform: rotate(-2deg);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  display: inline-block;
  margin-top: 8px;
}

.backlink {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--c-muted);
  text-decoration: none;
}
.backlink:hover { color: var(--c-ink); }

.piece-card-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 820px) {
  /* minmax(0,…) so the numbered card's fixed width cannot set the column's
     minimum and push the page wider than the phone. */
  .piece-layout, .piece-card-strip { grid-template-columns: minmax(0, 1fr); }
  .piece-rail { position: static; }
}

/* more from the collection */
.more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}

/* ---------- pay sheet (mock Razorpay) ---------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(37, 28, 18, 0.5);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 90;
}
.sheet-backdrop.open { display: flex; }

.pay-sheet {
  width: 430px;
  max-width: calc(100% - 24px);
  background: var(--c-paper);
  border: 1px solid rgba(37, 28, 18, 0.3);
  border-radius: 3px 3px 0 0;
  padding: 26px 28px calc(30px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 30px rgba(37, 28, 18, 0.28);
}

@media (min-width: 720px) {
  .sheet-backdrop { align-items: center; }
  .pay-sheet { border-radius: 3px; padding-bottom: 30px; }
}

@media (prefers-reduced-motion: no-preference) {
  .sheet-backdrop.open .pay-sheet { animation: sheet-in 0.22s var(--ease); }
  @keyframes sheet-in {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

.sheet-field { display: grid; gap: 6px; margin-top: 16px; }
.sheet-field label { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--c-muted); }
.sheet-field input {
  font-family: var(--f-ui);
  font-size: 14px;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--line-25);
  border-radius: 2px;
  padding: 11px 12px;
}
.sheet-field input:focus { border-color: var(--c-ink); outline: none; }

.pay-sheet .sheet-kicker { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--c-brass-text); }
.pay-sheet .sheet-amount { font-family: var(--f-mono); font-size: 25px; margin-top: 10px; }
.pay-sheet .sheet-piece { font-size: 13px; color: var(--c-muted); margin-top: 5px; }

.pay-methods { display: grid; gap: 9px; margin: 20px 0; }
.pay-method {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--line-25);
  border-radius: 2px;
  padding: 13px 14px;
  font-size: 13.5px;
  cursor: pointer;
  background: transparent;
  font-family: var(--f-ui);
  color: var(--c-ink);
  text-align: left;
}
.pay-method:hover { border-color: var(--c-ink); }
.pay-method.selected { border-color: var(--c-ink); background: var(--c-vellum); }
.pay-method .method-tag { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--c-muted); }

.sheet-fine { font-size: 11px; color: var(--c-muted); line-height: 1.55; margin-top: 14px; }
.sheet-cancel { display: block; margin: 12px auto 0; background: none; border: none; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--c-muted); cursor: pointer; padding: 10px 14px; }
.sheet-cancel:hover { color: var(--c-rosewood); }

/* ---------- policy pages ---------- */

.policy-head { border-bottom: var(--hair); padding-bottom: clamp(24px, 3vw, 40px); margin-bottom: clamp(28px, 3.5vw, 48px); }
.policy-updated { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--c-muted); margin-top: 14px; }

/* ---------- scroll reveal ---------- */

/* Scoped to .js: without scripting nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
  .js [data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
  .js [data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }
}

/* ---------- legacy shells still used by policy pages ---------- */

.site-section { padding: var(--band-tight) var(--gutter) 0; max-width: var(--measure); margin: 0 auto; }
.site-section-title { font-family: var(--f-display); font-size: var(--t-title); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 20px; }

/* ---------- print: the numbered card is the villa tag ---------- */

@media print {
  body { background: #fff; }
  .site-header, .site-footer, .backlink, .piece-media, .piece-actions,
  .registrar-note, .sheet-backdrop, .more-section { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .prov-card { box-shadow: none; page-break-inside: avoid; }
}

/* ---------- additions: section heads and the dense grid ---------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 22px clamp(28px, 4vw, 64px);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head .fine { margin-bottom: 5px; }

@media (max-width: 520px) {
  .collection-grid-dense { grid-template-columns: 1fr 1fr; }
  .collection-grid-dense .p-card-name { font-size: 17px; }
  .collection-grid-dense .p-card-dims { display: none; }
}

/* ---------- catalogue plates ---------- */

/* Every card runs 4:3, the shape the plates are built to
   (scripts/gen-plates.py), with the whole piece in frame. */
.collection-grid-dense .p-card-media { aspect-ratio: 4 / 3; }

/* ---------- header on small screens ---------- */

@media (max-width: 660px) {
  .site-header { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
  .site-header .site-wordmark { display: none; }
  .site-nav { gap: 13px; font-size: 9.5px; letter-spacing: 0.13em; }
  body:not(.has-hero) { padding-top: 56px; }
}

/* The villas link is an anchor on the homepage; on a phone the nav loses it
   rather than running off the edge. */
@media (max-width: 660px) {
  .site-nav .nav-optional { display: none; }
}