/* DESIGN DNA — Studio Chaukhat (architecture practice, Ahmedabad, est. 2014)
   Direction: Big Type, No Pictures — typography IS the structure. The direction
              governs the LAYOUT LANGUAGE only: this site still ships 14 real
              photographs and the hero carries one.
   Palette:   bone #F4F3EF · ink #1A0E0A (warm near-black, derived from the
              vermillion family — never neutral, never #000) · vermillion
              #E2452F (the sole chromatic voice) · slate #55606B (muted)
   Type:      Anton (condensed caps display) / Source Serif 4 (serif body).
              A serif body under a condensed-caps display is deliberate.
   Hero pattern: Stacked Wordmark — STUDIO / CHAUKHAT / AHMEDABAD across three
              lines, each a different width treatment of the same family;
              practice details live in the gaps. Type is the image; the
              photograph is present but subordinate, beside the type, never
              behind it.
   Signature: The Threshold Line — a doorframe rule (left, top, right; open at
              the bottom, exactly like a chaukhat) framing every photograph.
   First-timers: (1) a scroll-driven doorframe mask — each aperture opens from
              a narrow centre slot as the plate enters view, with the jambs
              drawing in; (2) a scroll-scrubbed orthographic PLAN → ELEVATION →
              SECTION projection morph in inline SVG, the same doorway marked
              vermillion in all three drawings.
   Corner language: SHARP. 0px radius everywhere, buttons and inputs included.
   Elevation: ONE inverted shadow, lifting from below. No downward drop shadow
              anywhere on this site.
   Banned here: every ledger entry (Fraunces/Manrope, Bodoni Moda, Big Shoulders,
              Rozha One, Unbounded, Yeseva One as display; warm ivory/mahogany,
              cream/charcoal/amber, obsidian/platinum/champagne,
              graphite/safety-orange/blueprint-cyan, paper/ink/electric-cobalt,
              espresso/gold); centred hero + 2 buttons + blob; three equal icon
              cards; alternating background bands; decorative hairline grids
              (both sibling sites already occupy that territory); rounded cards;
              Inter/Poppins/Montserrat/Roboto as display.
   Referenced: refero/jeton — at roughly 20%, for reasoning only: tight display
              leading, whitespace-only section separation, generous section
              gaps, accent-family warm ink, hierarchy through size not weight,
              single chromatic voice, and the inverted shadow. None of its
              identity: not its orange, not its rounded language, not its
              pastel category washes, not its sans-only type system.
*/

/* ─────────────────────────────────────────────────────────────────────
   1 · TOKENS
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Palette */
  --color-bg:         #F4F3EF;
  --color-surface:    #EAE8E1;
  --color-primary:    #1A0E0A;
  --color-accent:     #E2452F;
  --color-text:       #1A0E0A;
  --color-text-muted: #55606B;
  --color-border:     rgba(26, 14, 10, 0.18);
  --color-rule:       rgba(26, 14, 10, 0.90);
  --color-hair:       rgba(26, 14, 10, 0.10);
  --color-on-dark:    #F4F3EF;

  /* Typography */
  --font-display: 'Anton', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --font-body:    'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* Fluid type scale */
  --text-xs:   clamp(0.6875rem, 0.9vw,  0.75rem);
  --text-sm:   clamp(0.8125rem, 1.1vw,  0.9375rem);
  --text-base: clamp(1.0625rem, 1.3vw,  1.1875rem);
  --text-lg:   clamp(1.1875rem, 1.9vw,  1.4375rem);
  --text-xl:   clamp(1.5rem,    2.8vw,  2rem);
  --text-2xl:  clamp(2rem,      5vw,    3rem);
  --text-3xl:  clamp(2.5rem,    7vw,    4.5rem);
  --text-hero: clamp(3.4rem,   18.5vw,  5rem);

  /* Stacked-wordmark sizes (re-tuned per breakpoint in responsive.css) */
  --word-one:   clamp(2.5rem, 13vw,   3.4rem);
  --word-two:   clamp(3.4rem, 18.5vw, 5rem);
  --word-three: clamp(2.2rem, 12vw,   3.2rem);

  /* Display leading — the single most important Jeton borrow.
     Nothing at display size ever goes above 1.0. */
  --lead-display: 0.90;
  --lead-title:   0.94;
  --lead-body:    1.62;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Section separation is whitespace only — the canvas never changes colour. */
  --gap-section: clamp(4.5rem, 11vw, 9.5rem);
  --gap-block:   clamp(2rem, 5vw, 3.5rem);

  /* Shape — SHARP. An architecture practice earns square corners. */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-full: 0;

  /* Elevation — inverted only. Light lifts a surface from BELOW.
     There is no downward drop shadow anywhere in this stylesheet. */
  --shadow-sm: rgba(0, 0, 0, 0.04) 0 -2px 10px 0;
  --shadow-md: rgba(0, 0, 0, 0.05) 0 -4px 16px 0;
  --shadow-lg: rgba(0, 0, 0, 0.06) 0 -8px 28px 0;

  /* Motion — one curve for interface, one for the threshold */
  --transition: 0.34s cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-door:  cubic-bezier(0.16, 0.84, 0.32, 1);

  /* The doorframe */
  --jamb:      10px;
  --jamb-rule: 1px;

  /* Layout */
  --container: 1280px;
  --gutter:    1.25rem;
}

/* ─────────────────────────────────────────────────────────────────────
   2 · RESET
   ───────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lead-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; border: 0; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border-radius: var(--radius-sm);
}

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--color-accent); color: var(--color-bg); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--color-primary);
  color: var(--color-on-dark);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ─────────────────────────────────────────────────────────────────────
   3 · LAYOUT
   ───────────────────────────────────────────────────────────────────── */

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

/* Sections are separated by whitespace alone — the canvas never changes
   colour. One gap between two sections, not two stacked gaps. */
main > section { padding-block: 0 var(--gap-section); }
main > section:first-child { padding-block-start: clamp(2rem, 6vw, 3.5rem); }
main > section:last-child { padding-block-end: calc(var(--gap-section) * 0.75); }

/* ─────────────────────────────────────────────────────────────────────
   4 · TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.head { margin-bottom: var(--gap-block); }

.head__title,
.enquiry__title,
.opening__title,
.errorpage__title,
.enquire__title,
.idxhead__title,
.entry__name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lead-display);
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.head__title { font-size: var(--text-3xl); }

.head__note {
  max-width: 46ch;
  margin-top: var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

/* Emphasis is carried by SIZE, never by a heavier weight — Anton has one. */
strong, b { font-weight: 600; }
em { font-style: italic; }

.link-draw {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--text-sm);
  border-bottom: var(--jamb-rule) solid var(--color-border);
  padding-bottom: 3px;
  transition: border-color var(--transition), color var(--transition);
}
.link-draw:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ─────────────────────────────────────────────────────────────────────
   5 · BUTTONS — sharp, no radius, no drop shadow
   ───────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  padding: 1rem 1.6rem 0.9rem;
  border: var(--jamb-rule) solid var(--color-primary);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn--solid {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.btn--solid:hover,
.btn--solid:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--line { background: transparent; color: var(--color-text); }
.btn--line:hover,
.btn--line:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
.btn--wide { display: block; width: 100%; text-align: center; }

/* ─────────────────────────────────────────────────────────────────────
   6 · MASTHEAD + NAV
   ───────────────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-bg);
  border-bottom: var(--jamb-rule) solid var(--color-hair);
}

.masthead__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  flex-wrap: wrap;               /* lets the no-JS nav drop to its own row */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem var(--space-md);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1rem, 3.6vw, 1.25rem);
  letter-spacing: 0.02em;
}
.brand__word--two { color: var(--color-accent); }

/* The menu button only exists when JS can operate the panel. With no JS the
   nav renders inline and stays reachable — no button, no trap. */
.menu-btn { display: none; }
html.js .menu-btn { display: block; }

.menu-btn {
  position: relative;
  background: none;
  border: 0;
  padding: 0.5rem 0 0.5rem 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.menu-btn__jamb {
  display: block;
  width: 100%;
  height: var(--jamb-rule);
  background: var(--color-primary);
  margin-top: 4px;
}

/* No-JS / pre-JS baseline: a plain inline index under the wordmark. */
.nav { width: 100%; }
.nav__list { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.nav__link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 0.4rem 0;
  position: relative;
}
/* The threshold rule, at nav scale: a jamb that grows from the top. */
.nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__link:hover::before,
.nav__link.is-current::before { transform: scaleX(1); }
.nav__link.is-current { color: var(--color-accent); }

.nav__foot { display: none; }

/* ─────────────────────────────────────────────────────────────────────
   7 · THE THRESHOLD — signature element and the site's one image treatment
   Left, top and right rule; open at the bottom, like a chaukhat.
   ───────────────────────────────────────────────────────────────────── */

.threshold {
  position: relative;
  padding: var(--jamb) var(--jamb) 0;
}
.threshold__frame {
  position: absolute;
  inset: 0 0 var(--jamb) 0;
  border: var(--jamb-rule) solid var(--color-rule);
  border-bottom: 0;
  pointer-events: none;
  z-index: 2;
}
.threshold__pane {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.threshold__pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* One treatment rule, sitewide: a slight desaturation so every photograph
     belongs to the same bone-and-ink world. Nothing dated, no duotone. */
  filter: saturate(0.86) contrast(1.03);
}
.threshold--portrait .threshold__pane { aspect-ratio: 4 / 5; }
.threshold--wide     .threshold__pane { aspect-ratio: 3 / 2; }

.threshold__caption {
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  max-width: 42ch;
}

/* ─────────────────────────────────────────────────────────────────────
   8 · HERO — STACKED WORDMARK
   ───────────────────────────────────────────────────────────────────── */

.hero__grid { display: grid; gap: var(--gap-block); }

.hero__stack { display: block; }

.hero__wordmark {
  display: block;
  margin: 0;
  font-weight: 400;
  font-size: inherit;
}

.hero__line {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lead-display);
  color: var(--color-text);
}
/* Three different width treatments of one family. */
.hero__line--one   { font-size: var(--word-one);   letter-spacing: 0.085em; }
.hero__line--two   { font-size: var(--word-two);   letter-spacing: -0.018em; }
.hero__line--three {
  font-size: var(--word-three);
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-rule);
  margin-left: 0.06em;
}

.hero__gap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  padding-block: 0.7rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero__gap--one { border-block: var(--jamb-rule) solid var(--color-hair); }

.hero__read {
  max-width: 44ch;
  margin-top: var(--space-md);
  font-size: var(--text-lg);
}

.hero__act {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-md);
}

/* ─────────────────────────────────────────────────────────────────────
   9 · STATEMENT
   ───────────────────────────────────────────────────────────────────── */

.statement__lead {
  font-size: var(--text-2xl);
  line-height: 1.14;
  max-width: 24ch;
  margin-bottom: var(--gap-block);
}
.statement__cols { display: grid; gap: var(--space-md); max-width: 74ch; }
.statement__cols p { color: var(--color-text-muted); }

.statement__facts {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--gap-block);
  padding-top: var(--space-md);
  border-top: var(--jamb-rule) solid var(--color-rule);
}
.statement__facts li { display: flex; align-items: baseline; gap: 0.8rem; }
.fact__n {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-accent);
}
.fact__l { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ─────────────────────────────────────────────────────────────────────
   10 · SELECTED WORK — plates
   ───────────────────────────────────────────────────────────────────── */

.plates { display: grid; gap: var(--gap-block); }

.plate__body { margin-top: var(--space-md); }
.plate__ref {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--color-accent);
}
.plate__name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--text-xl);
  line-height: var(--lead-title);
  margin-block: 0.2rem 0.9rem;
}

.tomb { display: grid; gap: 0.35rem; font-size: var(--text-sm); }
.tomb__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.5rem;
  padding-block: 0.35rem;
  border-top: var(--jamb-rule) solid var(--color-hair);
}
.tomb__row dt {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-top: 0.15em;
}
.tomb__row dd { margin: 0; }

.selected__more { margin-top: var(--gap-block); }

/* ─────────────────────────────────────────────────────────────────────
   11 · THE PROJECTION SET (first-timer 2)
   Base state — no JS, or reduced motion: three complete drawings, side by
   side, fully legible. JS + motion turns this into one scrubbed stage.
   ───────────────────────────────────────────────────────────────────── */

.projection__grid { display: grid; gap: var(--gap-block); }
.projection__text p { color: var(--color-text-muted); max-width: 52ch; }
.projection__text p + p { margin-top: var(--space-sm); }
.projection__text .head__title { margin-bottom: var(--space-md); }
.projection__hint {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--text-xs);
  color: var(--color-accent);
  margin-top: var(--space-md);
}
.projection__hint-desk { display: none; }

.proj__stage { display: grid; gap: var(--space-md); }

.proj__layer {
  border-top: var(--jamb-rule) solid var(--color-rule);
  padding-top: 0.75rem;
}
.proj__tag {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.proj__sub {
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.proj__draw { width: 100%; height: auto; }
.proj__poche  { fill: var(--color-primary); stroke: none; }
.proj__line   { fill: none; stroke: var(--color-primary); stroke-width: 2.2; }
.proj__thin   { fill: none; stroke: var(--color-primary); stroke-width: 1; opacity: 0.75; }
.proj__ground { fill: none; stroke: var(--color-primary); stroke-width: 1.4; }
.proj__note   { fill: var(--color-text-muted); }
.proj__mark   { fill: none; stroke: var(--color-accent); stroke-width: 2.6; }
.proj__swing  { stroke-width: 1.2; stroke-dasharray: 4 3; }
.proj__rain   { stroke-dasharray: 3 4; }
.proj__lbl {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.proj__lbl--mark { fill: var(--color-accent); }

.proj__index {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.proj__index-item { display: flex; align-items: center; gap: 0.5rem; }
.proj__index-rule {
  display: block;
  width: 1.6rem;
  height: var(--jamb-rule);
  background: var(--color-border);
  transition: background var(--transition);
}
.proj__index-item.is-on { color: var(--color-accent); }
.proj__index-item.is-on .proj__index-rule { background: var(--color-accent); }

/* ─────────────────────────────────────────────────────────────────────
   12 · METHOD — the steps ledger
   ───────────────────────────────────────────────────────────────────── */

.steps { display: grid; }

.step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-top: var(--jamb-rule) solid var(--color-hair);
}
.steps .step:last-child { border-bottom: var(--jamb-rule) solid var(--color-hair); }

.step__n {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-accent);
  padding-top: 0.2em;
}
.step__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--text-lg);
  line-height: var(--lead-title);
  margin-bottom: 0.5rem;
}
.step__body p { color: var(--color-text-muted); max-width: 58ch; }
.step__body p + p { margin-top: 0.5rem; }
.step__meta {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-xs);
  color: var(--color-text) !important;
  margin-top: 0.75rem !important;
}

.strip { display: grid; gap: var(--gap-block); margin-top: var(--gap-block); }

/* ─────────────────────────────────────────────────────────────────────
   13 · FEES — the ledger tables
   ───────────────────────────────────────────────────────────────────── */

.fees__grid { display: grid; gap: var(--gap-block); }
.fees__text p { color: var(--color-text-muted); max-width: 54ch; }
.fees__text p + p { margin-top: var(--space-sm); }
.fees__text .head__title { margin-bottom: var(--space-md); }
/* ── Emphasis blocks ────────────────────────────────────────────────
   A block that needs weight is framed by the signature itself — a
   threshold rule: left, top and right, open at the bottom, exactly like
   the photographic apertures. A short vermillion lintel mark sits inside
   the head of the frame. There is no thick coloured border on one edge of
   anything on this site.                                                */
.fees__min,
.named__meaning,
.enquiry__free,
.next__hon {
  border: var(--jamb-rule) solid var(--color-rule);
  border-bottom: 0;
  padding: var(--space-sm) var(--space-sm) calc(var(--space-sm) - 0.15rem);
  color: var(--color-text) !important;
}
.fees__min::before,
.named__meaning::before,
.enquiry__free::before,
.next__hon::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: 0.65rem;
}

.fees__tables { display: grid; gap: var(--gap-block); align-content: start; }

.ledger caption {
  text-align: left;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-bottom: 0.6rem;
  border-bottom: var(--jamb-rule) solid var(--color-rule);
}
.ledger th,
.ledger td {
  text-align: left;
  padding: 0.85rem 0;
  border-bottom: var(--jamb-rule) solid var(--color-hair);
  font-weight: 400;
  vertical-align: baseline;
}
.ledger th { padding-right: var(--space-sm); font-size: var(--text-sm); }
.ledger td {
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
  white-space: nowrap;
}
.ledger--stages td { color: var(--color-accent); }

/* ─────────────────────────────────────────────────────────────────────
   14 · ENQUIRE BLOCKS
   ───────────────────────────────────────────────────────────────────── */

.enquire__grid { display: grid; gap: var(--gap-block); }
.enquire__title { font-size: var(--text-3xl); }
.enquire__text p,
.enquire__sub {
  max-width: 50ch;
  margin-top: var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}
.enquire__act {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-md);
}
.enquire--slim { border-top: var(--jamb-rule) solid var(--color-rule); }

/* ─────────────────────────────────────────────────────────────────────
   15 · WORK PAGE
   ───────────────────────────────────────────────────────────────────── */

.idxhead__grid { display: grid; gap: var(--space-md); }
.idxhead__title { font-size: var(--text-3xl); }
.idxhead__count {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-lg);
  line-height: var(--lead-title);
  color: var(--color-accent);
}
.idxhead__count span { color: var(--color-text-muted); letter-spacing: 0.1em; font-size: var(--text-xs); }
.idxhead__note { max-width: 48ch; color: var(--color-text-muted); }

.worklist .entry {
  display: grid;
  gap: var(--gap-block);
  padding-block: var(--gap-block);
  border-top: var(--jamb-rule) solid var(--color-rule);
}
.worklist .entry:last-child { border-bottom: var(--jamb-rule) solid var(--color-rule); }

.entry__ref {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--text-xs);
  color: var(--color-accent);
}
.entry__name { font-size: var(--text-2xl); margin-block: 0.25rem 0.3rem; }
.entry__prog {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-md);
}
.entry__note { max-width: 58ch; }
.entry__detail {
  max-width: 58ch;
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.entry__body .tomb { margin-top: var(--space-md); }

.current__grid { display: grid; gap: var(--gap-block); }
.current__text p { color: var(--color-text-muted); max-width: 52ch; }
.current__text p + p { margin-top: var(--space-sm); }
.current__text .head__title { margin-bottom: var(--space-md); }

/* ─────────────────────────────────────────────────────────────────────
   16 · STUDIO PAGE
   ───────────────────────────────────────────────────────────────────── */

.opening__title {
  font-size: var(--text-3xl);
  max-width: 18ch;
  margin-bottom: var(--gap-block);
}
.opening__cols { display: grid; gap: var(--space-md); max-width: 76ch; }
.opening__cols p { color: var(--color-text-muted); }

.named__grid { display: grid; gap: var(--gap-block); }
.named__text p { color: var(--color-text-muted); max-width: 50ch; }
.named__text p + p { margin-top: var(--space-sm); }
.named__text .head__title { margin-bottom: var(--space-md); }
.named__meaning { font-style: italic; }

.roster { display: grid; }
.roster__row {
  display: grid;
  gap: 0.5rem;
  padding-block: var(--space-md);
  border-top: var(--jamb-rule) solid var(--color-hair);
}
.roster:last-of-type .roster__row:last-child { border-bottom: var(--jamb-rule) solid var(--color-hair); }
.roster__name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--text-lg);
  line-height: var(--lead-title);
}
.roster__role { font-size: var(--text-sm); color: var(--color-accent); font-style: italic; }
.roster__since {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.roster__note { color: var(--color-text-muted); max-width: 52ch; }

/* ─────────────────────────────────────────────────────────────────────
   17 · CONTACT PAGE
   ───────────────────────────────────────────────────────────────────── */

.enquiry__grid { display: grid; gap: var(--gap-block); }
.enquiry__title { font-size: var(--text-3xl); }
.enquiry__lead {
  max-width: 40ch;
  margin-top: var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.direct {
  margin-top: var(--gap-block);
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.4rem 1rem;
  font-size: var(--text-sm);
}
.direct dt {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-top: 0.2em;
}
.direct dd { margin: 0; }
.direct a { border-bottom: var(--jamb-rule) solid var(--color-border); transition: border-color var(--transition), color var(--transition); }
.direct a:hover { border-color: var(--color-accent); color: var(--color-accent); }

.enquiry__free {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  font-style: italic;
}

/* Flash notices carry their state in a full-perimeter key-line and a small
   vermillion marker — never a fat bar down one side. */
.notice {
  padding: 0.95rem 1.15rem 1rem;
  margin-bottom: var(--space-md);
  border: var(--jamb-rule) solid var(--color-border);
  font-size: var(--text-sm);
}
.notice::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: 0.6rem;
}
.notice--ok  { border-color: var(--color-rule); }
.notice--bad { border-color: var(--color-accent); }

.form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: 0.4rem; }
.field-pair { display: grid; gap: var(--space-md); }

.field label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.req { color: var(--color-accent); letter-spacing: 0.14em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--color-bg);
  border: var(--jamb-rule) solid var(--color-border);
  border-radius: 0;              /* sharp, inputs included */
  padding: 0.85rem 0.9rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);  /* lifts from below — the only elevation */
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-muted); opacity: 0.7; }

/* honeypot — off-screen, never shown, never announced */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { font-size: var(--text-sm); color: var(--color-text-muted); }
.form__foot a { border-bottom: var(--jamb-rule) solid var(--color-accent); }

.next__grid { display: grid; gap: var(--gap-block); }
.next__list { display: grid; gap: var(--space-sm); margin-top: var(--space-md); max-width: 52ch; }
.next__list li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; color: var(--color-text-muted); }
.next__list span {
  font-family: var(--font-display);
  color: var(--color-accent);
  font-size: var(--text-lg);
  line-height: 1.1;
}
.next__hon {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}

.finding__map {
  margin-top: var(--gap-block);
  border: var(--jamb-rule) solid var(--color-rule);
  border-bottom: 0;
  padding: var(--jamb) var(--jamb) 0;
}
/* The map is desaturated into the bone-and-ink world and sits inside the
   same threshold frame as every photograph — never default Google styling. */
.finding__map iframe {
  width: 100%;
  border: 0;
  filter: saturate(0.2) contrast(1.05);
}
.finding__act { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-md); }

/* ─────────────────────────────────────────────────────────────────────
   18 · ERROR PAGES
   ───────────────────────────────────────────────────────────────────── */

.errorpage__code {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-accent);
  letter-spacing: 0.2em;
}
.errorpage__title { font-size: var(--text-3xl); margin-block: var(--space-sm) var(--space-md); }
.errorpage__note { max-width: 46ch; color: var(--color-text-muted); font-size: var(--text-lg); }
.errorpage__act { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-md); }
.errorpage__aside {
  margin-top: var(--gap-block);
  padding-top: var(--space-md);
  border-top: var(--jamb-rule) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 46ch;
}

/* ─────────────────────────────────────────────────────────────────────
   19 · COLOPHON
   The canvas stays bone right to the bottom edge — no dark band, no
   alternating ground anywhere on this site.
   ───────────────────────────────────────────────────────────────────── */

.colophon {
  border-top: 2px solid var(--color-rule);
  padding-block: var(--gap-block) 0;
  overflow: hidden;
}
.colophon__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.colophon__record { display: grid; gap: var(--space-md); }
.record__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--text-xs);
  color: var(--color-accent);
  margin-bottom: 0.4rem;
}
.record__body { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; }
.record__body a { border-bottom: var(--jamb-rule) solid var(--color-border); }
.record__body a:hover { border-color: var(--color-accent); color: var(--color-accent); }

.colophon__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--gap-block);
  padding-top: var(--space-md);
  border-top: var(--jamb-rule) solid var(--color-hair);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-sm);
}
.colophon__nav a { transition: color var(--transition); }
.colophon__nav a:hover { color: var(--color-accent); }

.colophon__meaning {
  margin-top: var(--space-md);
  max-width: 46ch;
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.colophon__wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(4rem, 22vw, 17rem);
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-border);
  margin-top: var(--space-md);
  margin-bottom: -0.14em;       /* cut off by the page edge — the last threshold */
  white-space: nowrap;
  user-select: none;
}

.colophon__legal {
  border-top: var(--jamb-rule) solid var(--color-hair);
  padding-block: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.colophon__credit a { border-bottom: var(--jamb-rule) solid var(--color-accent); }

/* ─────────────────────────────────────────────────────────────────────
   20 · STICKY ACTION BAR (mobile)
   ───────────────────────────────────────────────────────────────────── */

.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-primary);
  box-shadow: var(--shadow-lg);   /* lifts from below, no downward cast */
}
.actionbar__item {
  padding: 0.95rem 0.5rem 0.85rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--color-on-dark);
  border-left: var(--jamb-rule) solid rgba(244, 243, 239, 0.22);
}
.actionbar__item:first-child { border-left: 0; }
.actionbar__item--accent { background: var(--color-accent); }

body { padding-bottom: 3.4rem; }   /* clearance for the bar; removed at 768+ */