/* =========================================================
   HOUSE OF YUB
   assets/css/style.css
   ---------------------------------------------------------
   1.  Tokens
   2.  Reset and base
   3.  Typography primitives
   4.  Buttons and links
   5.  Header and navigation
   6.  The Gate
   7.  Hero
   8.  Carrying (The Monaco)
   9.  Philosophy
   10. Our Houses (home preview)
   11. Journal
   12. Inquire strip
   13. Footer
   14. Our Houses page
   15. Inquiry form
   16. Motion and utilities
   17. Responsive
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------- */
:root {
  /* Surfaces */
  --void:      #0A0705;
  --ink:       #141009;
  --ink-2:     #1E1811;
  --ink-3:     #2A2118;

  /* Light surfaces */
  --cream:     #EDE4D2;
  --cream-2:   #E3D8C2;
  --cream-ink: #191309;

  /* Brand gold */
  --gold:      #C9A65C;
  --gold-lt:   #E4CC8F;
  --gold-dk:   #9E7C34;

  /* ground behind cut out product shots */
  --plinth:    #1E1811;

  /* Text on dark */
  --bone:      #E8DFD0;
  --dim:       #9A8E7C;
  --dim-2:     #6F655A;

  /* Rules */
  --rule:      rgba(201, 166, 92, 0.30);
  --rule-soft: rgba(232, 223, 208, 0.14);

  /* Type */
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --maxw: 1500px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 1.1s;
}

/* ---------------------------------------------------------
   2. RESET AND BASE
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Locked while the Gate is showing */
body.is-gated { overflow: hidden; height: 100vh; }

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

a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  z-index: 999;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------
   3. TYPOGRAPHY PRIMITIVES
   --------------------------------------------------------- */

/* Small tracked label. Used for eyebrows, nav, buttons, meta. */
.eyebrow {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.62rem, 0.55rem + 0.2vw, 0.75rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.5rem;
  line-height: 1.6;
}
.eyebrow--dim { color: var(--dim); }

/* Display headings */
.display {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.22;
  margin: 0;
}
.display--xl { font-size: clamp(1.9rem, 1.1rem + 3.4vw, 4.1rem); letter-spacing: 0.1em; }
.display--lg { font-size: clamp(1.6rem, 1.05rem + 2.2vw, 3rem); }
.display--md { font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); }
.display--sm { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem); letter-spacing: 0.2em; }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.8;
  color: var(--bone);
  max-width: 40ch;
  margin: 0 0 1.5rem;
}

.prose p { margin: 0 0 1.4rem; max-width: 46ch; }
.prose p:last-child { margin-bottom: 0; }

/* Short gold rule used under headings */
.rule {
  width: 3.5rem;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: 1.5rem 0 2rem;
  opacity: 0.85;
}
.rule--center { margin-inline: auto; }

.center { text-align: center; }

/* ---------------------------------------------------------
   4. BUTTONS AND LINKS
   --------------------------------------------------------- */

/* Underlined text action with arrow */
.action {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.action:hover { color: var(--gold-lt); border-bottom-color: var(--gold); }
.action .arrow { transition: transform 0.4s var(--ease); }
.action:hover .arrow { transform: translateX(5px); }

/* Framed button */
button.btn { -webkit-appearance: none; appearance: none; }
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  padding: 1rem 2.6rem;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  transition: background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.btn:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

.btn--dark {
  color: var(--cream-ink);
  border-color: rgba(25, 19, 9, 0.35);
}
.btn--dark:hover { background: var(--cream-ink); color: var(--cream); border-color: var(--cream-ink); }

/* ---------------------------------------------------------
   5. HEADER AND NAVIGATION
   --------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.35rem var(--gutter);
  background: linear-gradient(to bottom, rgba(10, 7, 5, 0.82), rgba(10, 7, 5, 0));
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), background 0.5s var(--ease);
  pointer-events: none;
}
.site-header.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.site-header.is-solid { background: rgba(10, 7, 5, 0.94); backdrop-filter: blur(10px); }
/* On phones the menu lives inside the header, and backdrop-filter makes
   the header a containing block for it. The menu then measures itself
   against the header rather than the screen, so translateY(-100%) only
   lifts it by the header's height and it hangs into view on scroll.
   Sizing it to the viewport explicitly makes it immune to that. */
@media (max-width: 860px) {
  .site-header.is-solid { backdrop-filter: none; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--bone);
}
.brand img { width: 26px; height: auto; }
/* YUB is short for Your Uncommon Brand, so the expansion sits under the
   name rather than being a separate claim elsewhere on the page. */
.brand__lock { display: flex; flex-direction: column; gap: 0.22rem; }
.brand__name {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.brand__expand {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.9rem); }
.nav a {
  font-family: var(--serif);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--bone);
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  margin: 6px 0;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------
   6. THE GATE
   --------------------------------------------------------- */
/* The film is 3:2 and carries its own monogram, wordmark and a drawn
   ENTER box. We never crop it. The frame is always 3:2, so the real
   button can be placed on the drawn box by percentage alone, with no
   measuring script and no drift between viewports. */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--void);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  transition: opacity 1.4s var(--ease), visibility 1.4s;

  --frame-w: min(100vw, 150vh);
  --frame-h: calc(var(--frame-w) / 1.5);
}
.gate.is-open { opacity: 0; visibility: hidden; }

.gate__frame {
  position: relative;
  width: var(--frame-w);
  height: var(--frame-h);
  flex: 0 0 auto;
}

.gate__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Edge vignette only, so the plate sits in the dark rather than
   floating on it. Nothing over the centre of the film. */
.gate__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 7, 5, 0) 55%, rgba(10, 7, 5, 0.5) 100%);
  pointer-events: none;
}

/* The real control sits exactly on the ENTER box drawn into the film:
   centre 50.1% / 55.4%, width 14.6% of the frame, height 6.0%. */
.gate__enter {
  position: absolute;
  left: calc(50vw + var(--frame-w) * 0.001);
  top: calc(50vh + var(--frame-h) * 0.054);
  transform: translate(-50%, -50%);
  width: calc(var(--frame-w) * 0.146);
  height: calc(var(--frame-h) * 0.060);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: transparent;
  transition: border-color 0.6s var(--ease), background 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.gate__enter:hover,
.gate__enter:focus-visible {
  border-color: var(--gold);
  background: rgba(10, 7, 5, 0.28);
  box-shadow: 0 0 26px rgba(201, 166, 92, 0.25);
  outline: none;
}

/* On narrow screens the plate is small, so the film's own lettering is
   too fine to act as a control. A crisp mark and a real button take over. */
.gate__fallback { display: none; text-align: center; }
.gate__fallback img { width: 40px; margin: 0 auto 1rem; }
.gate__fallback .gate__word {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 0.6rem;
}
.gate__fallback p:last-child {
  font-size: 0.95rem;
  color: var(--dim);
  margin: 0;
  line-height: 1.7;
}

.gate.is-entering .gate__enter,
.gate.is-entering .gate__fallback {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}

.gate__hint {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin: 0;
}

/* ---------------------------------------------------------
   7. HERO
   --------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--void);
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding: 8rem var(--gutter) 5rem;
  max-width: 60rem;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.55rem, 0.9rem + 2.9vw, 3.4rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.42;
  margin: 0;
  color: var(--cream);
}
.hero__scroll {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 34px;
  margin: 0.8rem auto 0;
  background: linear-gradient(to bottom, var(--gold), transparent);
}

/* ---------------------------------------------------------
   8. CARRYING (THE MONACO)
   --------------------------------------------------------- */
.carrying {
  background: var(--ink);
  padding: var(--section-y) 0 0;
  text-align: center;
}
.carrying__title { margin-bottom: 1.4rem; }
.carrying__line {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  color: var(--dim);
  margin: 0 auto 2.2rem;
  max-width: 34ch;
  font-style: italic;
}

.plate-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.plate {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ink-2);
}
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease), filter 1.6s var(--ease);
  filter: saturate(0.85);
}
.plate:hover img { transform: scale(1.05); filter: saturate(1); }
.plate--tall { aspect-ratio: 3 / 4; }

/* ---------------------------------------------------------
   9. PHILOSOPHY
   --------------------------------------------------------- */
.philosophy {
  background: var(--cream);
  color: var(--cream-ink);
  padding: var(--section-y) 0;
  text-align: center;
}
.philosophy .eyebrow { color: var(--gold-dk); }
.philosophy .rule { background: var(--gold-dk); }
.philosophy__body {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.9;
  max-width: 46ch;
  margin: 0 auto 2.5rem;
  color: var(--cream-ink);
}
.philosophy .action { color: var(--gold-dk); border-bottom-color: rgba(158, 124, 52, 0.4); }
.philosophy .action:hover { color: var(--cream-ink); border-bottom-color: var(--cream-ink); }

/* ---------------------------------------------------------
   10. OUR HOUSES (HOME PREVIEW)
   --------------------------------------------------------- */
.houses {
  background: var(--ink);
  padding: var(--section-y) 0;
}
.houses__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.houses__intro { max-width: 44ch; }
.houses__intro .eyebrow { margin-bottom: 0.9rem; }
.houses__intro p { margin: 0; color: var(--dim); }

.house-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}
.house-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  text-decoration: none;
  background: var(--ink-2);
}
.house-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.8);
  transition: transform 1.6s var(--ease), filter 1.6s var(--ease);
}
.house-card:hover img { transform: scale(1.06); filter: brightness(0.78) saturate(0.95); }
.house-card__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.1rem 1rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
  background: linear-gradient(to top, rgba(10, 7, 5, 0.85), rgba(10, 7, 5, 0));
}
.house-card__label small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}

/* The "more arriving" tile */
.house-card--pending {
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-soft);
  background: var(--ink-2);
  text-align: center;
  padding: 1.5rem;
}
.house-card--pending .house-card__pendinglabel {
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 2;
}

.houses__foot { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* ---------------------------------------------------------
   11. JOURNAL
   --------------------------------------------------------- */
.journal {
  background: var(--void);
  padding: var(--section-y) 0;
}
.journal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* auto-fill rather than auto-fit, so a single post stays the size of a
   card instead of stretching across the whole row */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 24vw, 320px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
.journal-card__media { aspect-ratio: 4 / 3; }
.journal-card { text-decoration: none; display: block; }
.journal-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
  margin-bottom: 1.1rem;
}
.journal-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.85);
  transition: transform 1.6s var(--ease), filter 1.6s var(--ease);
}
.journal-card:hover .journal-card__media img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.journal-card__meta {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
}
.journal-card__title {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
  color: var(--bone);
  transition: color 0.4s var(--ease);
}
.journal-card:hover .journal-card__title { color: var(--gold-lt); }

/* ---------------------------------------------------------
   12. INQUIRE STRIP
   --------------------------------------------------------- */
.inquire-strip {
  background: var(--cream);
  color: var(--cream-ink);
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align: center;
}
.inquire-strip p {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  margin: 0 auto 2rem;
  max-width: 42ch;
  line-height: 1.85;
}

/* ---------------------------------------------------------
   13. FOOTER
   --------------------------------------------------------- */
.site-footer {
  background: var(--void);
  border-top: 1px solid var(--rule-soft);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}
.footer-values {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule-soft);
}
.footer-brand img { width: 42px; margin-bottom: 1.1rem; }
.footer-brand p.footer-brand__name {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  color: var(--bone);
}
.footer-brand p {
  font-size: 0.92rem;
  color: var(--dim);
  margin: 0;
  line-height: 1.8;
}
/* Keep the value columns visually aligned with the brand text in the footer. */
.footer-value { padding-top: 6.5rem; }

.footer-value__title {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.85rem;
}
.footer-value p {
  font-size: 0.92rem;
  color: var(--dim);
  margin: 0;
  line-height: 1.8;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.footer-col h3 {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a, .footer-col address {
  font-size: 0.92rem;
  color: var(--dim);
  text-decoration: none;
  font-style: normal;
  line-height: 1.8;
  transition: color 0.4s var(--ease);
}
.footer-col a:hover { color: var(--gold-lt); }

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim-2);
}

/* ---------------------------------------------------------
   14. OUR HOUSES PAGE
   --------------------------------------------------------- */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--void);
  padding: 9rem var(--gutter) 4rem;
}
.page-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.page-hero__inner { position: relative; z-index: 2; max-width: 46rem; }
.page-hero p { color: var(--dim); margin: 0 auto; max-width: 44ch; }

.filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}
.filter {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--rule-soft);
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.filter:hover { color: var(--bone); border-color: var(--rule); }
.filter[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }

/* A House card is styled as a brass door plaque */
.plaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0 var(--section-y);
}
.plaque {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  border: 1px solid var(--rule-soft);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
  transition: border-color 0.6s var(--ease), transform 0.6s var(--ease);
}
.plaque:hover { border-color: var(--rule); transform: translateY(-3px); }
.plaque[hidden] { display: none; }

/* Two screw marks, the detail that makes it read as a plaque */
.plaque::before, .plaque::after {
  content: "";
  position: absolute;
  top: 0.9rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
}
.plaque::before { left: 0.9rem; }
.plaque::after { right: 0.9rem; }

.plaque__city {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}
.plaque__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
  letter-spacing: 0.06em;
  line-height: 1.35;
  margin: 0 0 1rem;
  color: var(--bone);
}
.plaque__desc {
  font-size: 0.96rem;
  color: var(--dim);
  line-height: 1.8;
  margin: 0 0 1.5rem;
}
.plaque__meta {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
}
.plaque__meta li {
  display: flex;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.88rem;
  color: var(--dim);
}
.plaque__meta dt, .plaque__meta .k {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim-2);
  min-width: 6.5rem;
  flex-shrink: 0;
  padding-top: 0.25rem;
}
.plaque__actions { margin-top: auto; display: flex; gap: 1.75rem; flex-wrap: wrap; }

.plaque--soon { background: transparent; border-style: dashed; }
.plaque--soon .plaque__name { color: var(--dim); }

/* Become a House block */
.partner {
  background: var(--cream);
  color: var(--cream-ink);
  padding: var(--section-y) 0;
}
.partner__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.partner .eyebrow { color: var(--gold-dk); }
.partner .rule { background: var(--gold-dk); }
.partner p { max-width: 46ch; line-height: 1.85; }

/* ---------------------------------------------------------
   15. INQUIRY FORM
   --------------------------------------------------------- */
.inquiry { background: var(--ink); padding: var(--section-y) 0; }
.inquiry__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
}
.form-field { margin-bottom: 1.6rem; }
.form-field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.65rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 1.02rem;
  padding: 0.7rem 0;
  transition: border-color 0.4s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 6.5rem; }
.form-field select option { background: var(--ink-2); color: var(--bone); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.form-consent {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--dim);
  margin-bottom: 2rem;
  line-height: 1.7;
}
.form-consent input { margin-top: 0.35rem; accent-color: var(--gold); }
.form-consent a { color: var(--gold); }
.hp { position: absolute; left: -9999px; }

.form-note {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin: 1.5rem 0 0;
}

/* ---------------------------------------------------------
   16. MOTION AND UTILITIES
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   17. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer-value { padding-top: 0; }
  .footer-values { grid-template-columns: 1fr 1fr; }
  .inquiry__grid { grid-template-columns: 1fr; }
  .partner__grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; z-index: 70; }

  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: rgba(10, 7, 5, 0.98);
    transform: translateY(-100%);
    transition: transform 0.7s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav a { font-size: 1.1rem; letter-spacing: 0.26em; }

  .plate-row { grid-template-columns: 1fr; }
  .plate, .plate--tall { aspect-ratio: 4 / 5; }

  .footer-values { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* The plate is small on portrait, so the film's own lettering stops
     being a usable control. A crisp mark and a real button take over. */
  .gate { justify-content: center; }
  .gate__fallback { display: block; }
  .gate__enter {
    position: static;
    transform: none;
    width: min(260px, 66vw);
    height: 56px;
    border-color: var(--rule);
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 0.34em;
  }
  .gate__hint { display: none; }
}

@media (max-width: 520px) {
  .house-strip { grid-template-columns: 1fr 1fr; }
  .plaques { grid-template-columns: 1fr; }
}

/* =========================================================
   18. THE ARCHIVE
   WestCord carries earlier pieces and jewellery, not the
   current editions. It is listed apart so nobody travels
   there expecting a Monaco.
   ========================================================= */
.archive {
  background: var(--ink-2);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding: var(--section-y) 0;
}
.archive__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.archive__note {
  font-size: 0.88rem;
  color: var(--dim-2);
  border-left: 1px solid var(--rule);
  padding-left: 1.1rem;
  margin: 1.75rem 0 0;
  line-height: 1.8;
}
.plaque--archive { background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); }

/* =========================================================
   19. THE MONACO
   ========================================================= */
.piece-hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  background: var(--ink);
  padding: 9rem 0 var(--section-y);
}
.piece-hero__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-2);
}
.piece-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.piece-hero p { color: var(--dim); max-width: 42ch; }

/* Expressions band */
.expressions {
  background: var(--cream);
  color: var(--cream-ink);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  text-align: center;
}
.expressions .eyebrow { color: var(--gold-dk); }
.expressions__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.expression {
  text-decoration: none;
  color: inherit;
  display: block;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(25, 19, 9, 0.2);
}
.expression__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream-2);
  margin-bottom: 1rem;
}
.expression__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.expression:hover .expression__media img { transform: scale(1.06); }
.expression__name {
  font-family: var(--sans);
  font-size: 0.63rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.9;
}
.expression__name small {
  display: block;
  color: var(--gold-dk);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
}

/* Alternating edition panels */
.edition {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: var(--section-y) 0;
  border-top: 1px solid var(--rule-soft);
}
.edition--flip .edition__media { order: -1; }
.edition__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
}
.edition__media img { width: 100%; height: 100%; object-fit: cover; }
.edition p { color: var(--dim); max-width: 40ch; }
.edition__tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--rule);
  padding: 0.45rem 1rem;
  margin-bottom: 1.75rem;
}

/* Specification accordion, native details element */
.specs { max-width: 62rem; margin-inline: auto; padding: var(--section-y) 0 0; }
.spec { border-bottom: 1px solid var(--rule-soft); }
.spec:first-of-type { border-top: 1px solid var(--rule-soft); }
.spec > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone);
  transition: color 0.4s var(--ease);
}
.spec > summary::-webkit-details-marker { display: none; }
.spec > summary:hover { color: var(--gold); }
.spec > summary::after {
  content: "+";
  font-size: 1.1rem;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}
.spec[open] > summary::after { content: "\2212"; }
.spec__body { padding: 0 0 1.75rem; color: var(--dim); max-width: 60ch; }
.spec__body p { margin: 0 0 1rem; }
.spec__body p:last-child { margin-bottom: 0; }

@media (max-width: 1080px) {
  .footer-value { padding-top: 0; }
  .archive__grid { grid-template-columns: 1fr; }
  .piece-hero { grid-template-columns: 1fr; padding-top: 7rem; }
  .edition { grid-template-columns: 1fr; }
  .edition--flip .edition__media { order: 0; }
}

/* Edition tiles come off one studio ground, so the card matches it and
   the four read as a single shoot rather than four sourced images. */
.expression__media { background: #241A10; }
.expression__media img { object-fit: contain; }

/* =========================================================
   20. HOUSE PLAQUES ON THE HOMEPAGE
   No invented hotel photography. Until real interiors exist,
   these read as brass plates rather than as pictures of
   buildings that are not the buildings.
   ========================================================= */
.house-strip--plaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}
.house-plaque {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.5rem, 2.5vw, 2.1rem);
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  border: 1px solid var(--rule-soft);
  text-decoration: none;
  min-height: 11rem;
  transition: border-color 0.6s var(--ease), transform 0.6s var(--ease);
}
.house-plaque:hover { border-color: var(--rule); transform: translateY(-3px); }
.house-plaque::before, .house-plaque::after {
  content: ""; position: absolute; top: 0.8rem;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); opacity: 0.4;
}
.house-plaque::before { left: 0.8rem; }
.house-plaque::after { right: 0.8rem; }
.house-plaque__city {
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold);
}
.house-plaque__name {
  font-family: var(--serif); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  letter-spacing: 0.05em; color: var(--bone); line-height: 1.35;
}
.house-plaque__find {
  font-size: 0.88rem; color: var(--dim); margin-top: auto; line-height: 1.7;
}
.house-plaque--pending { border-style: dashed; background: transparent; justify-content: center; }
.house-plaque--pending .house-plaque__name { color: var(--dim); }
.house-plaque--pending::before, .house-plaque--pending::after { display: none; }

/* Product shots sit on their own white ground */
/* Cut out product shots sit on the house colour, not on studio paper. */
.expression__media { background: var(--plinth); }
.expression__media img { object-fit: contain; padding: 7%; }
.edition__media--product { background: var(--plinth); }
.edition__media--product img { object-fit: contain; padding: 8%; }
.piece-hero__media--product { background: var(--plinth); aspect-ratio: 1 / 1; }
.piece-hero__media--product img { object-fit: contain; padding: 9%; }

/* =========================================================
   21. THE ATELIER BAND
   ========================================================= */
.craft {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 9rem) 0;
  text-align: center;
  background: var(--void);
}
.craft__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.42;
}
.craft__scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(10,7,5,0.15) 30%, rgba(10,7,5,0.8) 100%);
}
.craft__inner { position: relative; z-index: 2; }
.craft__inner p { color: var(--bone); max-width: 40ch; margin: 0 auto; }

/* =========================================================
   22. DETAIL STRIPS
   Close work sits under the edition it belongs to, small,
   so the panel still leads with the piece itself.
   ========================================================= */
.details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 2rem 0 0;
  max-width: 26rem;
}
.details figure { margin: 0; flex: 0 0 clamp(96px, 8.5vw, 132px); }
.details img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--plinth);
  filter: saturate(0.92);
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.details figure:hover img { transform: scale(1.05); filter: saturate(1); }
/* .edition p sets a 40ch max-width and outranks a single class, so the
   label needs two classes to take a full row of its own. */
.details .details__label {
  flex: 0 0 100%;
  max-width: none;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin: 0 0 0.25rem;
}

/* =========================================================
   23. ASSOCIATION LINE
   Wording only, no crossed keys mark. The emblem is
   trademarked and needs written permission before it is used.
   ========================================================= */
.footer-affil { color: var(--dim); }
.affil {
  font-size: 0.92rem;
  line-height: 1.8;
  padding-left: 1.1rem;
  border-left: 1px solid var(--gold-dk);
  max-width: 44ch;
}


/* =========================================================
   24. THE EXPANDED WORDMARK
   ========================================================= */
.footer-brand p.footer-brand__expand {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: -0.7rem 0 1.1rem;
}
.gate__expand {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: -0.3rem 0 0.9rem;
}

@media (max-width: 420px) {
  /* the header gets tight before the expansion is legible */
  .brand__expand { display: none; }
}

/* =========================================================
   25. THE GALLERY
   No cart means nobody can inspect a piece by buying it, so
   every edition opens into a viewer instead.
   ========================================================= */
[data-gallery] .edition__media img,
[data-gallery] .piece-hero__media img,
[data-gallery] .details img { cursor: zoom-in; }

.gallery-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin: 1rem 0 0;
}
.gallery-cue::before {
  content: "";
  width: 11px; height: 11px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 3px 3px 0 -2px currentColor;
}

.lightbox {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--void);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem var(--gutter);
  flex: 0 0 auto;
}
.lightbox__title {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.lightbox__count {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--dim);
  margin: 0;
}
.lightbox__close {
  background: none;
  border: 0;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.3s var(--ease);
}
.lightbox__close:hover { color: var(--gold); }

/* The photograph is positioned against the stage rather than sized by a
   percentage of it. A percentage height inside a flex or grid track can
   resolve as indeterminate, in which case the image keeps its natural
   size and gets cropped instead of scaling down. Absolute inset plus
   object-fit contain always fits, at every viewport. */
.lightbox__stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
}
.lightbox__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0 clamp(3.25rem, 8vw, 6rem);
  box-sizing: border-box;
  /* the element covers the whole stage, so it must not swallow clicks
     meant for the arrows or for the backdrop */
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.lightbox__img.is-ready { opacity: 1; }

.lightbox__nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(2.5rem, 5vw, 3.5rem);
  height: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--rule-soft);
  background: transparent;
  color: var(--bone);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.lightbox__nav:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,166,92,0.08); }
.lightbox__nav[disabled] { opacity: 0.25; cursor: default; }
.lightbox__nav--prev { left: clamp(0.75rem, 2vw, 1.75rem); }
.lightbox__nav--next { right: clamp(0.75rem, 2vw, 1.75rem); }

.lightbox__caption {
  text-align: center;
  color: var(--dim);
  font-size: 0.92rem;
  margin: 0 auto;
  padding: 1rem var(--gutter) 0;
  max-width: 52ch;
  flex: 0 0 auto;
}

.lightbox__thumbs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1rem var(--gutter) 1.75rem;
  flex: 0 0 auto;
}
.lightbox__thumb {
  width: 58px; height: 58px;
  padding: 0;
  border: 1px solid transparent;
  background: var(--plinth);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: contain; }
.lightbox__thumb:hover { opacity: 0.85; }
.lightbox__thumb[aria-current="true"] { opacity: 1; border-color: var(--gold); }

@media (max-width: 640px) {
  .lightbox__img { padding: 0 0.75rem; }
  .lightbox__nav { width: 2.4rem; height: 2.4rem; }
  .lightbox__thumb { width: 46px; height: 46px; }
  .lightbox__caption { font-size: 0.86rem; }
}

/* =========================================================
   26. DOCUMENT PAGES
   Policy and legal pages. Long prose, narrow measure.
   ========================================================= */
.doc {
  background: var(--ink);
  padding: 8.5rem 0 var(--section-y);
}
.doc__inner { max-width: 46rem; margin-inline: auto; }
.doc__updated {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin: 0 0 2.5rem;
}
.doc h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
  letter-spacing: 0.1em;
  color: var(--bone);
  margin: 3rem 0 1rem;
}
.doc h2:first-of-type { margin-top: 2rem; }
.doc p { color: var(--dim); line-height: 1.9; margin: 0 0 1.25rem; }
.doc strong { color: var(--bone); font-weight: 400; }
.doc a { color: var(--gold); }

.doc__table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-size: 0.94rem;
}
.doc__table th {
  text-align: left;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0 1rem 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.doc__table td {
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--dim);
  vertical-align: top;
  line-height: 1.7;
}
.doc__table td:first-child { color: var(--bone); white-space: nowrap; }

.doc__note {
  border-left: 1px solid var(--gold);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 2rem 0;
}
.doc__note p { color: var(--bone); margin: 0; }

.doc__list { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.doc__list li {
  color: var(--dim);
  line-height: 1.8;
  padding: 0.55rem 0 0.55rem 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.doc__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.35rem;
  width: 6px; height: 1px;
  background: var(--gold);
}

/* =========================================================
   27. AI DISCLOSURE LABELS
   The transparency page promises that materially generated or
   altered images are disclosed where they appear. This is the
   mechanism that keeps that promise. Add data-ai to an <img>
   and the label is placed for you.
   ========================================================= */
.ai-host { position: relative; }
.ai-tag {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 3;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10, 7, 5, 0.72);
  border: 1px solid rgba(232, 223, 208, 0.22);
  padding: 0.3rem 0.55rem;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.ai-tag--light {
  color: var(--cream-ink);
  background: rgba(237, 228, 210, 0.82);
  border-color: rgba(25, 19, 9, 0.25);
}
.lightbox .ai-tag { right: auto; left: 50%; transform: translateX(-50%); bottom: 0.75rem; }

.lightbox__caption .ai-note {
  display: block;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.6rem;
}

@media (max-width: 520px) {
  .ai-tag { font-size: 0.48rem; padding: 0.25rem 0.4rem; }
}

/* =========================================================
   28. DOCUMENT MODAL
   Policy pages open over the page rather than taking the
   visitor away from it. The pages still exist on their own
   URLs for direct links and for search.
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vh, 3rem) var(--gutter);
  background: rgba(10, 7, 5, 0.88);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__panel {
  position: relative;
  width: min(46rem, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border: 1px solid var(--rule-soft);
  transform: translateY(14px);
  transition: transform 0.5s var(--ease);
}
.modal.is-open .modal__panel { transform: none; }

.modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1.25rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule-soft);
  flex: 0 0 auto;
  background: var(--ink);
}
.modal__label {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.modal__close {
  background: none;
  border: 0;
  color: var(--bone);
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.3s var(--ease);
}
.modal__close:hover { color: var(--gold); }

.modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
  flex: 1 1 auto;
}
.modal__body .doc__inner { max-width: none; }
.modal__body h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.modal__body h2:first-of-type { margin-top: 1.5rem; }
.modal__body .action { display: none; }
.modal__body .doc__updated { margin-bottom: 1.75rem; }

.modal__foot {
  flex: 0 0 auto;
  padding: 0.9rem clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.modal__foot a { color: var(--dim); text-decoration: none; }
.modal__foot a:hover { color: var(--gold); }

/* Journal post imagery inside the document layout */
.doc__figure { margin: 2.25rem 0; }
.doc__figure img { width: 100%; height: auto; display: block; }
.doc__figure figcaption {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim-2);
  margin-top: 0.75rem;
}

/* =========================================================
   29. PHONES
   Measured on a 390px viewport. Two things needed changing:
   links were too small to hit with a thumb, and several
   tracked labels fell below eleven pixels, which is where
   uppercase letterspacing stops being readable and starts
   being decoration.
   ========================================================= */
@media (max-width: 640px) {

  /* Tap targets. The guideline is 44px and almost nothing met it. */
  .footer-col li { margin-bottom: 0; }
  .footer-col li a {
    display: block;
    padding: 0.7rem 0;
    min-height: 44px;
    line-height: 1.6;
  }
  .footer-col address a { display: inline-block; padding: 0.6rem 0; }

  .action {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    min-height: 44px;
  }
  .journal-card__title { padding-bottom: 0.5rem; }

  .plaque__meta li a,
  .doc a { padding: 0.15rem 0; }

  /* Legibility. Nothing tracked in uppercase below 11px. */
  .brand__expand { font-size: 0.66rem; letter-spacing: 0.22em; }
  .footer-brand p.footer-brand__expand { font-size: 0.7rem; }
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.26em; }
  .gallery-cue { font-size: 0.7rem; }
  .edition__tag { font-size: 0.68rem; letter-spacing: 0.2em; }
  .expression__name { font-size: 0.72rem; }
  .expression__name small { font-size: 0.66rem; }
  .form-note { font-size: 0.72rem; }
  .footer-base { font-size: 0.7rem; gap: 0.6rem; line-height: 1.8; }
  .footer-affil { font-size: 0.7rem; }
  .journal-card__meta { font-size: 0.68rem; }
  .plaque__city { font-size: 0.7rem; }
  .plaque__meta .k { font-size: 0.68rem; min-width: 5.5rem; }
  .details__label { font-size: 0.68rem; }
  .doc__updated { font-size: 0.7rem; }
  .lightbox__title, .lightbox__count, .lightbox__close { font-size: 0.7rem; }
  .modal__label, .modal__close { font-size: 0.7rem; }
  .filter { font-size: 0.72rem; padding: 0.85rem 1.3rem; }

  .gate__expand { font-size: 0.7rem; letter-spacing: 0.24em; }
  .gate__hint { font-size: 0.7rem; }
  .house-plaque__city { font-size: 0.7rem; letter-spacing: 0.22em; }

  /* a phone number on a phone should be easy to tap */
  .plaque__meta a { display: inline-block; padding: 0.55rem 0; }
  .form-consent a { display: inline-block; padding: 0.2rem 0; }

  /* The footer stacks, so it can breathe */
  .footer-cols { gap: 2rem; }
  .footer-base { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   30. THE HUMAN CHECK
   Netlify serves a reCAPTCHA 2 widget into this container and
   validates it server side. Its presence also switches off
   Akismet, which is what was quietly binning real enquiries.
   The widget itself is Google's and cannot be restyled, so it
   is given a labelled frame instead of being left bare.
   ========================================================= */
.captcha {
  margin: 0 0 2rem;
  padding: 1.25rem;
  border: 1px solid var(--rule-soft);
  background: rgba(232, 223, 208, 0.02);
}
.captcha__label {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 0.9rem;
}
.captcha > div { display: inline-block; max-width: 100%; }
.captcha iframe { max-width: 100%; }

@media (max-width: 420px) {
  /* the widget is 304px wide and will not shrink, so let it scroll
     rather than push the page sideways */
  .captcha { overflow-x: auto; }
}