@import url('fonts.css');

/* ==========================================================================
   TYRAEL VISUALS — "The Sales Register"
   A New Zealand property sale's paper trail, rebuilt as a marketing site.
   Ground: cool bond paper. Ink: petrol black. Structure: archival green.
   Colour: reserved for the photographs. One live accent: lamp amber.
   ========================================================================== */

:root {
  /* ground */
  --paper:      #e9ecee;
  --paper-2:    #e0e5e7;   /* ruled band, recessed panel */
  --paper-3:    #f2f4f5;   /* raised sheet, form field */

  /* ink */
  --ink:        #111a20;
  --ink-2:      #3c4a52;
  --ink-3:      #56656d;

  /* rules */
  --rule:       #c3ccd0;
  --rule-soft:  #d7dcdf;
  --guide:      rgba(17, 26, 32, 0.055);

  /* structure */
  --seal:       #17563f;
  --seal-deep:  #0f3f2e;

  /* the one live accent */
  --live:       #b06a10;    /* 3.6:1 on paper — marks and rules only */
  --live-lit:   #e5a544;    /* 6.0:1 on ink  — the lit state */

  /* inverted band */
  --band:       #111a20;
  --band-dim:   #9aa8b0;
  --band-rule:  #2c383f;

  /* type */
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;

  /* measure */
  --pad: clamp(1.25rem, 4.4vw, 4.5rem);
  --gap: clamp(1rem, 1.9vw, 1.75rem);
  --sheet-max: 1560px;
  --measure: 68ch;

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* the masthead is sticky: an anchor jump must land below it, not under it */
[id] { scroll-margin-top: 5.5rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.0625rem);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --- browser surfaces: the parts you did not draw still carry the design -- */
::selection { background: var(--seal); color: var(--paper); }
body { caret-color: var(--seal); }
* { scrollbar-color: var(--rule) var(--paper); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 1px; }
::placeholder { color: var(--ink-3); opacity: 1; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

/* --- typography ------------------------------------------------------- */
.display-xl {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.036em;
  text-wrap: balance;
  margin: 0;
}
.display-l {
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0;
}
.display-m {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0;
}
.lede {
  font-size: clamp(1.05rem, 0.98rem + 0.42vw, 1.3rem);
  line-height: 1.52;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0;
}
.prose { max-width: var(--measure); color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose strong { color: var(--ink); font-weight: 600; }

/* A link inside running copy has to look like a link: the global rule sets
   links to inherit their colour, which leaves body links indistinguishable
   from the words around them. These get the ink and an underline that
   carries the rule colour, so the underline does the work on its own. */
.prose a,
.lede a,
.spec__v a,
.panel a,
.qa__a a,
.ledger a,
.mono a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}
.prose a:hover,
.lede a:hover,
.spec__v a:hover,
.panel a:hover,
.qa__a a:hover,
.ledger a:hover,
.mono a:hover {
  color: var(--seal);
  text-decoration-color: var(--seal);
}

.mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.mono-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.mono-strong { font-family: var(--mono); font-weight: 500; font-size: 0.8125rem; color: var(--ink); letter-spacing: 0.01em; }

/* --- structure -------------------------------------------------------- */
.sheet {
  position: relative;
  max-width: var(--sheet-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
/* the faint printed column grid, aligned to the content columns */
.guides {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pad); right: var(--pad);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  pointer-events: none;
  z-index: 0;
}
.guides span { border-left: 1px solid var(--guide); }

/* --- section splits ------------------------------------------------------
   Every section below the hero is a ruled pair: a head column and a body
   column, with one gutter column left empty. The placement lives in the
   stylesheet rather than in inline styles so the narrow layouts can
   collapse both columns into one — inline placement cannot be overridden
   by a media query, which is what pinned the copy into a 167px column
   on a phone.                                                            */
.split__head { grid-column: 1 / span 5; }
.split__body { grid-column: 7 / span 6; }
.split--wide-head  .split__head { grid-column: 1 / span 6; }
.split--wide-head  .split__body { grid-column: 8 / span 5; }
.split--narrow-head .split__head { grid-column: 1 / span 4; }
.split--narrow-head .split__body { grid-column: 6 / span 7; }
/* the sub-page head: a wide statement column with a narrow docket column */
.split--page-head .split__head { grid-column: 1 / span 7; }
.split--page-head .split__body { grid-column: 9 / span 4; }

.section { padding-block: clamp(3.5rem, 7vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); }
.section--band { background: var(--band); color: var(--paper); }
.section--band .lede,
.section--band .prose { color: var(--band-dim); }
.section--band .mono { color: var(--band-dim); }
.section--band .mono-label { color: #7f8d95; }
.section--band .rule { background: var(--band-rule); }
.section--band :focus-visible { outline-color: var(--live-lit); }
/* the stage strip is drawn for paper: on the inverted band its greys have to
   be re-tinted, or the labels sit at 1.9:1 against the ink */
.section--band .stage { border-top-color: var(--band-rule); }
.section--band .stage__item { border-right-color: var(--band-rule); }
.section--band .stage__num { color: #7f8d95; }
.section--band .stage__name { color: var(--band-dim); }
.section--band .stage__item:hover .stage__name,
.section--band .stage__item:focus-visible .stage__name,
.section--band .stage__item[aria-selected="true"] .stage__name { color: var(--paper); }
.section--band .stage__item:hover .stage__num,
.section--band .stage__item:focus-visible .stage__num,
.section--band .stage__item[aria-selected="true"] .stage__num { color: var(--band-dim); }
.section--band .stage__detail { color: var(--band-dim); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule--ink { background: var(--ink); height: 2px; }

.section__head { margin-bottom: clamp(1.75rem, 3vw, 3rem); }
.section__head .mono-label { display: block; margin-bottom: 0.7rem; }

/* --- masthead --------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 62px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.022em;
  white-space: nowrap;
}
.brand__seal {
  width: 11px; height: 11px;
  background: var(--seal);
  flex: none;
}
.brand span { font-weight: 400; color: var(--ink-2); }
.nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.9rem);
  margin: 0; padding: 0;
}
.nav__link {
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  padding-block: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 160ms var(--ease);
}
.nav__link::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--live);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::before { opacity: 1; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  z-index: 100;
  font-size: 0.9rem;
}
.skip:focus { left: 0; }

/* --- the docket (hero side column) ------------------------------------ */
.docket { display: flex; flex-direction: column; gap: clamp(0.85rem, 1.4vw, 1.1rem); }
.docket__title { margin: 0; }
.docket__lede { margin: 0; }

.record {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1.2rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: 0.7rem;
}
.record dt { font-family: var(--mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.record dd { margin: 0; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- stage strip: the spine of the site -------------------------------- */
.stage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.stage__item {
  position: relative;
  padding: 0.85rem 0.6rem 0.85rem 0;
  /* the stage strip is drawn, not pressed: the button chrome has to go,
     or it shows as a bevel on paper and a slab of grey on the inverted band */
  border: 0;
  border-right: 1px solid var(--rule-soft);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.stage__item:last-child { border-right: 0; }
.stage__num {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 220ms var(--ease);
}
.stage__name {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-3);
  transition: color 220ms var(--ease);
}
.stage__dot {
  position: absolute;
  top: -1px; left: 0;
  width: 22px; height: 3px;
  background: var(--rule);
  transition: background-color 260ms var(--ease), width 380ms var(--ease);
}
.stage__item:hover .stage__dot,
.stage__item:focus-visible .stage__dot,
.stage__item[aria-selected="true"] .stage__dot { background: var(--live); width: 40px; }
.stage__item:hover .stage__name,
.stage__item:focus-visible .stage__name,
.stage__item[aria-selected="true"] .stage__name { color: var(--ink); }
.stage__item:hover .stage__num,
.stage__item:focus-visible .stage__num,
.stage__item[aria-selected="true"] .stage__num { color: var(--ink-2); }
.stage__detail {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  min-height: 3.2em;
}

/* --- actions ----------------------------------------------------------- */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--seal);
  color: var(--paper);
  border: 0;
  padding: 0.95rem 1.5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(17, 26, 32, 0.22), 0 8px 18px -12px rgba(17, 26, 32, 0.55);
  transition: background-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.stamp:hover { background: var(--seal-deep); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(17,26,32,.25), 0 14px 24px -14px rgba(17,26,32,.6); }
.stamp:active { transform: translateY(0); }
.stamp svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.stamp--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.stamp--ghost:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.section--band .stamp { background: var(--live-lit); color: #2a1c07; }
.section--band .stamp:hover { background: #f0b755; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: gap 200ms var(--ease), color 200ms var(--ease);
}
.link-arrow:hover { gap: 0.85rem; color: var(--seal); border-color: var(--seal); }
.link-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* --- hero -------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(0.75rem, 1.4vw, 1.25rem); }
.hero__plate {
  grid-column: 1 / span 8;
  margin-left: calc(var(--pad) * -1);
  margin-top: 0;
  position: relative;
  z-index: 1;
  min-height: clamp(380px, 62vh, 760px);
  overflow: hidden;
  background: var(--paper-2);
}
.hero__plate img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: 38% 26%;
  animation: rack 1200ms var(--ease) both;
}
@keyframes rack {
  from { filter: blur(10px); transform: scale(1.035); }
  to   { filter: blur(0);    transform: scale(1); }
}
.hero__docket { grid-column: 9 / span 4; z-index: 1; }
.hero__foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap);
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
}

/* --- plates (the gallery) ---------------------------------------------- */
.plate { margin: 0; position: relative; z-index: 1; }
.plate--inset { margin-top: clamp(2.25rem, 4vw, 3.5rem); }
.plate__frame { overflow: hidden; background: var(--paper-2); }
.plate__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.plate:hover .plate__frame img { transform: scale(1.025); }
.plate__cap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.9rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.6rem;
}
/* the caption is a description list: the code and the title are a pair, and
   the note under them runs in the second column. The list box is dropped so
   the pair sits in the caption's own grid. */
.plate__cap dl { display: contents; }
.plate__cap dt {
  font-family: var(--mono); font-weight: 500; font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  padding-top: 0.15rem;
}
.plate__cap dd { margin: 0; font-size: 0.9375rem; color: var(--ink); font-weight: 500; }
.plate__cap p { grid-column: 2; margin: 0; font-size: 0.875rem; color: var(--ink-2); }

/* asymmetric catalogue grid */
.gallery > * + * { margin-top: clamp(2.5rem, 5vw, 5rem); }
.gallery--spaced { margin-top: clamp(2.5rem, 5vw, 4rem); }
.g-a { grid-column: 1 / span 7; }
.g-b { grid-column: 9 / span 4; margin-top: clamp(2rem, 8vw, 9rem) !important; }
.g-c { grid-column: 2 / span 5; margin-top: 0 !important; }
.g-d { grid-column: 8 / span 5; }
.g-e { grid-column: 1 / span 4; }
.g-f { grid-column: 6 / span 7; margin-top: clamp(2rem, 7vw, 8rem) !important; }
.g-g { grid-column: 3 / span 8; }
.g-h { grid-column: 1 / span 8; }
.g-i { grid-column: 6 / span 7; margin-top: clamp(2rem, 6vw, 6rem) !important; }
.ratio-wide { aspect-ratio: 16 / 10; }
.ratio-tall { aspect-ratio: 3 / 4; }
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-book { aspect-ratio: 4 / 5; }

/* --- manifest (ruled rows, not cards) ---------------------------------- */
.manifest { border-top: 2px solid var(--ink); }
.manifest__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(8.5rem, 0.95fr) 1.55fr;
  gap: 0.4rem var(--gap);
  padding-block: clamp(1.05rem, 1.8vw, 1.45rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.manifest__row:hover { background: color-mix(in srgb, var(--paper-3) 70%, transparent); }
.manifest__key { font-family: var(--mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.28rem; }
.manifest__name { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 600; letter-spacing: -0.016em; line-height: 1.2; }
.manifest__desc { color: var(--ink-2); font-size: 0.9375rem; max-width: 52ch; }
.manifest__meta { grid-column: 2 / -1; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0.04em; }

/* --- register index ---------------------------------------------------- */
.index { border-top: 2px solid var(--ink); }
.index__row {
  display: grid;
  grid-template-columns: 7rem 1fr 9rem 7rem;
  gap: var(--gap);
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition: background-color 180ms var(--ease);
}
.index__row:hover { background: var(--paper-3); }
.index__code { font-family: var(--mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.index__name { font-size: 1rem; font-weight: 500; letter-spacing: -0.012em; }
.index__place { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }
.index__state { font-family: var(--mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); justify-self: end; }
.index__row[data-state="live"] .index__state { color: var(--ink); }
.index__row[data-state="live"] .index__state::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 3px;
  background: var(--live);
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* --- the questions (a register of queries) -------------------------------
   Answers stay open. A register you have to interrogate is a worse register,
   and the questions have to be legible to the people asking them. */
.qa { border-top: 2px solid var(--ink); }
.qa__row {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.35rem var(--gap);
  padding-block: clamp(1.05rem, 1.8vw, 1.4rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.qa__row:hover { background: color-mix(in srgb, var(--paper-3) 70%, transparent); }
.qa__k {
  font-family: var(--mono); font-weight: 500; font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  /* the code is a data field, not a paragraph: its margin is reset so the
     cap line sits level with the question it numbers */
  margin: 0;
  padding-top: 0.08rem;
}
.qa__q {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.3;
  text-wrap: balance;
}
.qa__a {
  margin: 0.5rem 0 0;
  color: var(--ink-2);
  max-width: 62ch;
}

/* --- film (the screening room) ----------------------------------------- */
.film { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
.film__screen { grid-column: 1 / span 8; position: relative; background: #000; }
.film__screen video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.film__aside { grid-column: 9 / span 4; }
.film__controls { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.film__btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: transparent; color: var(--paper); border: 0;
  padding: 0.5rem 0; cursor: pointer;
  font-family: var(--mono); font-weight: 500; font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.film__btn svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.film__btn:hover { color: var(--live-lit); }
.film__time { font-family: var(--mono); font-size: 0.75rem; color: var(--band-dim); font-variant-numeric: tabular-nums; }

/* --- form -------------------------------------------------------------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--seal);
  box-shadow: inset 0 0 0 1px var(--seal);
}
.field__error { font-family: var(--mono); font-size: 0.75rem; color: #9b2c22; min-height: 1.2em; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-color: #9b2c22; box-shadow: inset 0 0 0 1px #9b2c22; }
.form__status {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 0.8125rem;
  border-left: 2px solid var(--seal);
  padding-left: 0.9rem;
  color: var(--ink-2);
  min-height: 1.4em;
}
.form__status[data-tone="error"] { border-color: #9b2c22; color: #9b2c22; }

/* --- footer ------------------------------------------------------------ */
.footer { background: var(--band); color: var(--paper); padding-block: clamp(3rem, 5vw, 5rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap) var(--gap); }
.footer__brand { grid-column: 1 / span 5; }
.footer__brand .brand span { color: var(--band-dim); }
.footer__brand .brand__seal { background: var(--live-lit); }
.footer__note { grid-column: 7 / span 6; }
.footer__bottom {
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--band-rule);
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}
.footer .mono { color: var(--band-dim); }
.footer .mono-label { color: #7f8d95; }
.footer a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--band-rule); }
.footer a:hover { border-color: var(--live-lit); color: var(--live-lit); }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer__list a { font-size: 0.9375rem; }

/* --- the docket header ----------------------------------------------------
   The sheet's reference line: a document header, not a kicker. It runs the
   full width of the sheet, is ruled under in ink, and carries the file
   number, the name of the sheet and the year — so nothing about it sits
   on top of a headline.                                                  */
.docket__code {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0 0 clamp(1rem, 1.6vw, 1.5rem);
  padding: 0 0 0.6rem;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.docket__id { color: var(--ink); letter-spacing: 0.1em; }
.docket__meta { color: var(--ink-3); }
.docket__year { margin-left: auto; color: var(--ink-3); }

/* The docket line doubles as the site's breadcrumb. The register is the root
   of the hierarchy; the sheet in hand is the current page. The line keeps its
   printed form — the numbers still read left to right — but the two sheets
   are now links and a landmark, not decoration. */
.docket__code nav ol {
  display: flex;
  align-items: baseline;
  list-style: none;
  margin: 0;
  padding: 0;
}
.docket__code nav li + li::before {
  content: "/";
  padding-inline: 0.55rem;
  color: var(--rule);
}
.docket__crumb { color: var(--ink-3); }
.docket__crumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.docket__crumb a:hover { color: var(--ink); border-color: var(--seal); }

/* --- the ledger (a register you can read across) ------------------------ */
.ledger { border-top: 2px solid var(--ink); table-layout: fixed; }
.ledger caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
  padding-bottom: 1rem;
  max-width: 58ch;
}
.ledger th, .ledger td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.2rem 1rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink-2);
}
.ledger thead th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--ink);
  padding-block: 0.6rem;
}
.ledger tbody th {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.ledger tbody tr:hover { background: var(--paper-3); }
.ledger__code {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.35rem;
}
/* the live row is marked with the same amber bar the stage strip uses, not
   with amber type — the amber is a mark, and as type it would sit at 3.6:1 */
.ledger tbody tr[data-state="live"] .ledger__code { color: var(--ink); }
.ledger tbody tr[data-state="live"] .ledger__code::before {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  background: var(--live);
  margin-bottom: 0.45rem;
}

/* --- the spec list ------------------------------------------------------- */
.spec { border-top: 1px solid var(--rule); margin-top: clamp(1.4rem, 2.4vw, 2rem); }
.spec__row {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 0.3rem var(--gap);
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--rule);
}
.spec__k {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.2rem;
}
.spec__v { margin: 0; font-size: 0.9375rem; color: var(--ink-2); max-width: 52ch; }

/* --- the regions (coverage) ----------------------------------------------- */
.regions { border-top: 2px solid var(--ink); }
.regions__group { padding-block: 1.1rem 0.5rem; border-bottom: 1px solid var(--rule); }
.regions__title { margin: 0 0 0.9rem; }
.regions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--gap);
}
.regions__list li {
  break-inside: avoid;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* --- the claims table (what is and is not published) ---------------------- */
.claims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  border-top: 2px solid var(--ink);
  padding-top: 1.1rem;
}
.claims__k {
  margin: 0 0 0.9rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.claims__list { list-style: none; margin: 0; padding: 0; }
.claims__list li {
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.claims__list li:last-child { border-bottom: 0; }

/* --- the recessed panel --------------------------------------------------- */
.panel {
  background: var(--paper-2);
  border-top: 2px solid var(--ink);
  padding: clamp(1.15rem, 2.2vw, 1.8rem);
}
.panel__title { margin: 0 0 0.8rem; }
.panel p:last-child { margin-bottom: 0; }

.record dd a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.record dd a:hover { color: var(--seal); border-color: var(--seal); }

/* --- utility ----------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack { display: grid; gap: var(--gap); }
.stack-sm { display: grid; gap: 0.6rem; }
.mt-l { margin-top: clamp(2rem, 4vw, 4rem); }
.nowrap { white-space: nowrap; }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__plate { grid-column: 1 / -1; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); min-height: 52vh; }
  .hero__docket { grid-column: 1 / -1; }
  .g-a, .g-b, .g-c, .g-d, .g-e, .g-f, .g-g, .g-h, .g-i { grid-column: 1 / -1; margin-top: 0 !important; }
  .gallery > * + * { margin-top: clamp(2rem, 6vw, 3rem); }
  .film__screen, .film__aside { grid-column: 1 / -1; }
  .footer__brand, .footer__note { grid-column: 1 / -1; }
}

/* Below 860 the body column falls under 45 characters — the measure floor —
   and the head column under 310px, so both collapse to one column and the
   copy returns to its own measure instead of running down a narrow gutter. */
@media (max-width: 860px) {
  .split .split__head,
  .split .split__body { grid-column: 1 / -1; }
  .split .split__body { margin-top: clamp(1.75rem, 4vw, 3rem); }
  .claims { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage__item:nth-child(2) { border-right: 0; }
  .stage__item:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
  .manifest__row { grid-template-columns: 1fr; gap: 0.3rem; }
  .manifest__meta { grid-column: 1; }
  .qa__row { grid-template-columns: 1fr; gap: 0.3rem; }
  .qa__k { padding-top: 0; }
  .index__row { grid-template-columns: 1fr auto; gap: 0.3rem var(--gap); }
  .index__code { grid-column: 1 / -1; }
  .index__place { grid-column: 1; }
  .index__state { grid-column: 2; grid-row: 2; }
  .form { grid-template-columns: 1fr; }
  .record { grid-template-columns: 1fr; gap: 0.1rem; }
  .record dd { margin-bottom: 0.45rem; }
  .plate__cap { grid-template-columns: 1fr; }
  .plate__cap p { grid-column: 1; }
  .spec__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .spec__v { margin-bottom: 0.35rem; }
  .regions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the ledger stops being a table and becomes a stack of labelled fields:
     four columns of prose across a phone is not a table, it is a bad table */
  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; width: auto; }
  .ledger thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ledger tbody tr { border-bottom: 1px solid var(--rule); padding-block: 0.9rem; }
  .ledger tbody th, .ledger td { border: 0; padding: 0.2rem 0; }
  .ledger tbody th { margin-bottom: 0.5rem; }
  .ledger td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.2rem;
  }
  .ledger td { margin-bottom: 0.55rem; }
  .ledger td:last-child { margin-bottom: 0; }
  /* the nav takes its own full-width row on a phone, spread edge to edge,
     with tap targets grown to 44px */
  .masthead__inner { min-height: 0; padding-block: 0.5rem 0; gap: 0 var(--gap); }
  .nav { width: 100%; }
  .nav ul { gap: 0.4rem; justify-content: space-between; }
  .nav__link { font-size: 0.8125rem; padding-block: 0.72rem; }
  .film__btn { padding-block: 0.85rem; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

@media (max-width: 420px) {
  .stage { grid-template-columns: 1fr; }
  .stage__item { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .stage__item:last-child { border-bottom: 0; }
  .regions__list { grid-template-columns: 1fr; }
  .docket__code { flex-wrap: wrap; row-gap: 0.2rem; }
}

/* Below 350 the five nav items cannot share one row, and a flex wrap
   strands the last one alone. Three columns make it a deliberate 3 + 2. */
@media (max-width: 350px) {
  .nav ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.15rem 0.3rem;
  }
  .nav__link { justify-content: flex-start; }
}

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

@media print {
  .masthead, .footer, .nav, .stamp { display: none; }
  body { background: #fff; }
}