/* Dabbistic — maison editorial. Dark, vintage, asymmetric 12-col plate grid.
   Two voices: Anton (display + wordmark) and Newsreader (labels + body prose).
   Small labels are Newsreader tracked caps, never shrunken Anton — Anton muds out small.
   The script marks are artwork, framed inside plates — never a typeface. */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400;1,6..72,500&display=swap");

/* Anton — SIL OFL, self-hosted. Single weight; carries display + wordmark only. */
@font-face {
  font-family: "Anton";
  src: url("assets/fonts/Anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2191, U+2193, U+2212, U+2215, U+FFFD;
}
@font-face {
  font-family: "Anton";
  src: url("assets/fonts/Anton-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink-950: #15130f;
  --ink-975: #100e0b;
  --ink-900: #1c1a15;
  --ink-700: #3a362c;
  --stone-600: #968c78;
  --stone-400: #b3a992;
  --stone-300: #cdc4ac;
  --stone-200: #e2dac2;
  --bone-100: #eee7d6;
  --bone-50: #f6f1e6;
  --paper-0: #fbf8f1;
  --white: #ffffff;
  --champagne: #ffe3a5;
  --red-600: #fc0000;
  --red-700: #c81a1a;

  --hairline: 1px solid var(--ink-700);

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-ui: "Newsreader", Georgia, serif;
  --font-body: "Newsreader", Georgia, serif;

  /* Anton runs taller + heavier than Coolvetica — trimmed a step so the plate holds it */
  --text-display-1: clamp(58px, 9.6vw, 88px);
  --text-display-2: clamp(38px, 5.4vw, 72px);
  --text-h3: clamp(32px, 4vw, 52px);
  --text-body-lg: clamp(19px, 2vw, 22px);
  --text-label: 14px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --shell-max: 1360px;
  --shell-pad: clamp(20px, 5vw, 72px);
  --gutter: clamp(16px, 2vw, 24px);

  --measure: 62ch;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  overflow-x: clip;
  background: var(--ink-950);
  color: var(--bone-50);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--bone-50); color: var(--ink-950); }

/* Film grain — the vintage veil */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Soft vignette — kills the flat-CSS void without any image */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 20%, transparent 55%, rgba(8, 7, 4, 0.55) 100%);
}

/* ---------- Shell: the 12-column grid every fold shares ---------- */

.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--shell-pad);
  color: var(--bone-50);
  transition: background 250ms var(--ease);
}
.nav.scrolled {
  background: color-mix(in srgb, var(--ink-975) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: var(--hairline);
}

.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-brand img { height: 34px; width: 34px; }
.nav-brand span { font-family: var(--font-display); font-size: 21px; letter-spacing: 0.08em; }

.nav-links { display: flex; gap: clamp(16px, 3vw, 40px); }
.nav-links a {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  padding: 12px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: currentColor; }
.nav-links a:focus-visible, .nav-brand:focus-visible, .button:focus-visible,
.scene-floor a:focus-visible, .plate-enquire:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .nav { padding: 12px 16px; }
  .nav-brand span { display: none; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 12px; letter-spacing: 0.16em; }
}

/* ---------- Section floor: every fold ends on a rule, an index, a cue ---------- */

.scene-floor {
  grid-column: 1 / -1;
  margin-top: clamp(40px, 6vh, 72px);
  padding-top: var(--space-2);
  border-top: var(--hairline);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--stone-600);
}
.scene-floor .floor-index { color: var(--stone-400); }
.scene-floor a { text-decoration: none; padding: 8px 0; color: var(--stone-400); }
.scene-floor a:hover { color: var(--bone-50); }

/* ---------- Hero ---------- */

.hero {
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding-top: var(--space-8);
  padding-bottom: var(--space-3);
}
.hero .grid-12 { align-items: end; row-gap: var(--space-4); }

.hero-text { grid-column: 1 / span 8; }
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-1);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.9;
  text-wrap: balance;
}
.hero .hero-line {
  margin-top: var(--space-3);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--stone-300);
  max-width: 38ch;
}

.hero-plate {
  grid-column: 9 / -1;
  align-self: end;
}

.hero .scene-floor { margin-top: clamp(32px, 5vh, 56px); }

@media (max-width: 800px) {
  .hero-text { grid-column: 1 / -1; }
  .hero-plate { grid-column: 4 / 10; }
}

/* ---------- The plate: a contained object on the black, never a background ---------- */

.plate-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(85% 70% at 50% 42%, rgba(255, 227, 165, 0.07), transparent 70%),
    var(--ink-975);
  border: var(--hairline);
  display: grid;
  place-items: center;
}
.plate-media.plate-square { aspect-ratio: 1 / 1; }

/* the eventual photograph: fills the plate, parallaxes inside it */
.plate-media img.mockup {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  filter: sepia(0.25) contrast(0.94) brightness(0.78) saturate(0.82);
  will-change: transform;
}
/* the mark artwork: shown until the photograph exists */
.plate-media .plate-mark {
  max-width: 68%;
  max-height: 58%;
  width: auto;
  object-fit: contain;
}
.plate-media.has-photo .plate-mark { display: none; }
.plate-media:not(.has-photo) img.mockup { display: none; }

/* small caption riding the plate's bottom edge, archive style */
.plate-folio {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--stone-600);
}

/* ---------- Scenes: caption cols 1–5, plate cols 7–12, shared baseline ---------- */

.scene { padding-block: clamp(64px, 10vh, 112px); }
.scene .grid-12 { align-items: end; row-gap: var(--space-5); }

.scene-media { grid-column: 7 / -1; grid-row: 1; }
.scene-caption {
  grid-column: 1 / span 5;
  grid-row: 1;
  padding-bottom: var(--space-1);
}
.scene.flip .scene-media { grid-column: 1 / span 6; }
.scene.flip .scene-caption { grid-column: 8 / -1; }
.scene .scene-floor { grid-row: 2; }

.scene-caption h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.98;
  text-wrap: balance;
}
.scene-caption p {
  margin-top: var(--space-2);
  font-size: var(--text-body-lg);
  font-style: italic;
  line-height: 1.55;
  color: var(--stone-300);
  max-width: 38ch;
}
.scene-caption .plate-enquire { margin-top: var(--space-3); }

@media (max-width: 800px) {
  .scene .grid-12 { row-gap: var(--space-4); }
  .scene-media, .scene.flip .scene-media { grid-column: 1 / -1; grid-row: 1; }
  .scene-caption, .scene.flip .scene-caption { grid-column: 1 / -1; grid-row: 2; }
  .scene .scene-floor { grid-row: 3; }
}

/* ---------- Deep sections (creed, maison, prose) ---------- */

section.section-deep, section.section-prose { padding-block: var(--space-8); }
@media (max-width: 720px) {
  section.section-deep, section.section-prose { padding-block: var(--space-7); }
}
.section-deep { background: var(--ink-975); }

/* prose anchored to the grid: text cols 1–8, not centered in the void */
.prose-cols { grid-column: 1 / span 8; max-width: var(--measure); }
@media (max-width: 800px) { .prose-cols { grid-column: 1 / -1; } }

.prose { max-width: var(--measure); }
.prose-lg { font-size: var(--text-body-lg); line-height: 1.6; }
.prose p + p { margin-top: 1.2em; }

h2.title {
  font-family: var(--font-display);
  font-size: var(--text-display-2);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.98;
  text-wrap: balance;
  margin-bottom: var(--space-5);
}

.rule { border: 0; border-top: var(--hairline); margin: var(--space-6) 0; }

.muted { color: var(--stone-400); }

/* ---------- Links & buttons ---------- */

.plate-enquire {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bone-50);
  text-decoration: none;
  border-bottom: 1px solid var(--stone-400);
  padding-bottom: 3px;
}
.plate-enquire:hover { color: var(--champagne); border-bottom-color: var(--champagne); }
.link-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }

.button {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  padding: 16px 40px;
  border: 1px solid currentColor;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.button:hover { background: var(--bone-50); color: var(--ink-950); }

/* ---------- Enquire ---------- */

.enquire { padding-block: var(--space-8); }
.enquire .grid-12 { align-items: end; row-gap: var(--space-5); }
.enquire-text { grid-column: 1 / span 7; }
.enquire-action { grid-column: 9 / -1; justify-self: end; padding-bottom: var(--space-1); }
@media (max-width: 800px) {
  .enquire-text, .enquire-action { grid-column: 1 / -1; justify-self: start; }
}
.enquire .prose-lg { max-width: 44ch; }

.enquire-text { grid-column: 1 / span 5; align-self: start; }
.enquire-alt {
  margin-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--stone-600);
}
.enquire-alt a { color: var(--stone-400); text-decoration: none; border-bottom: 1px solid var(--ink-700); padding-bottom: 2px; }
.enquire-alt a:hover { color: var(--champagne); border-bottom-color: var(--champagne); }

.enquire-form {
  grid-column: 7 / -1;
  display: grid;
  gap: var(--space-4);
}
@media (max-width: 800px) {
  .enquire-text, .enquire-form { grid-column: 1 / -1; }
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 6px; }
.field > span {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--stone-600);
}
.field input,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-700);
  border-radius: 0;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  color: var(--bone-50);
  caret-color: var(--champagne);
  transition: border-color 150ms var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--champagne);
}

/* Honeypot — off-canvas, never shown to humans */
.field-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquire-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.enquire-foot .button {
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.enquire-foot .button:hover { background: var(--bone-50); color: var(--ink-950); }
.enquire-foot .button:disabled { opacity: 0.5; cursor: default; background: transparent; color: inherit; }

.form-note {
  font-style: italic;
  font-size: 16px;
  color: var(--stone-300);
  max-width: 34ch;
}
.form-note.error { color: #dd8873; }

/* ---------- Footer ---------- */

footer {
  background: var(--ink-975);
  border-top: var(--hairline);
  color: var(--stone-400);
  padding: var(--space-6) var(--shell-pad);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
footer a { text-decoration: none; padding: 8px 0; }
footer a:hover { color: var(--bone-50); }
footer .foot-brand { display: flex; align-items: center; gap: 10px; color: var(--bone-50); }
footer .foot-brand span { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.08em; }
footer .foot-brand img { height: 26px; }
footer .foot-red { color: var(--red-600); }

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

/* Hidden entrance states are applied by script.js (inline styles), so content
   is always visible without JS. These rules only define the transition. */
@media (prefers-reduced-motion: no-preference) {
  .reveal, .scene-caption, .scene-media { transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
}