/* Pyrite Research.
   Document of record: Caslon and typewriter, no ornament.
   No build step, no framework, nothing here can rot.

   HARD RULE: no em dashes anywhere in copy. Use commas, colons, or a
   full stop. */

:root {
  --ground:      #0c0c0e;
  --ground-2:    #141419;
  --rule:        #2a2a32;
  --rule-soft:   #1c1c22;
  --ink:         #e9e7e2;
  --ink-dim:     #a09c93;
  --ink-faint:   #86837c;
  --pyrite:      #c9a227;
  --pyrite-lit:  #e0bd45;
  --pyrite-deep: #a8871f;

  /* Tarnish. Oxidised pyrite runs gold into teal into violet, and the
     copper sulfides it grows with are called peacock ore. The palette is
     in the mineral, not invented. */
  --patina:      #4bb3a6;
  --patina-deep: #2f7d74;
  --violet:      #8f7fd4;
  --oxide:       #d4643f;

  --display: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --serif:   "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --mono:    "Courier Prime", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 33rem;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:    #f6f4ef;
    --ground-2:  #edeae3;
    --rule:      #cdc8bc;
    --rule-soft: #e2ded5;
    --ink:       #16161a;
    --ink-dim:   #52504a;
    --ink-faint: #6e6a62;
    --pyrite:      #7a6116;
    --pyrite-lit:  #5c4910;
    --pyrite-deep: #6b5410;
    --patina:      #17655c;
    --patina-deep: #0f4a43;
    --violet:      #53439b;
    --oxide:       #a1381c;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: var(--ink); }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.68;
}

/* ── Tarnish ──────────────────────────────────────────────────
   Oxidised pyrite runs gold into teal into violet. The page does the same
   as it descends: gold at the masthead, patina through the middle, violet
   toward the foot, a trace of oxide at the very bottom.

   Absolute rather than fixed, so it spans the document and the progression
   is tied to position on the page rather than position in the viewport.
   Two blooms pinned to the top of the viewport were why everything below
   the fold was flat cream. z-index -1 and pointer-events none: this must
   never sit in front of content. */
body { position: relative; }

body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* One bloom only, behind the specimen, where the mark justifies it.
       Seven overlapping radials read as blotches: each lobe has an edge, and
       alternating them left and right down the page makes those edges into a
       pattern you notice while scrolling. */
    radial-gradient(56rem 36rem at 82% 3%, color-mix(in srgb, var(--pyrite) 8%, transparent), transparent 72%),
    /* The drift does the work. A vertical gradient cannot be blotchy: it has
       no lobes and no edges, only a continuous shift from gold through patina
       to violet, which is the tarnish sequence. Alphas are roughly half what
       they were. */
    linear-gradient(to bottom,
      transparent 0%,
      color-mix(in srgb, var(--patina) 4%, transparent) 18%,
      color-mix(in srgb, var(--patina) 6%, transparent) 36%,
      color-mix(in srgb, var(--patina) 5%, transparent) 50%,
      color-mix(in srgb, var(--violet) 6%, transparent) 66%,
      color-mix(in srgb, var(--violet) 5%, transparent) 84%,
      color-mix(in srgb, var(--oxide)  3%, transparent) 100%);
}

.wrap {
  max-width: 58rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem) 4rem;
}

/* ── Masthead ─────────────────────────────────────────────── */

/* align-items must be center, not baseline. The wordmark is a flex container
   whose first item is the SVG mark, and an SVG has no baseline, so the browser
   synthesises one from the mark's bottom edge. Aligning the nav's text baseline
   to that dropped the nav 16.5px below the wordmark. */
.masthead {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  margin: 0;
}

/* The mark: the specimen cube, striated, at three grooves per face instead
   of seven so they still read at this size.

   NOTE: no vector-effect here. non-scaling-stroke makes stroke-width mean
   CSS pixels rather than viewBox units, so a width of 6 on a 22px icon
   painted 6px of stroke and the whole thing filled in solid. Widths are in
   viewBox units and scale with the mark. */
.mark { width: 2.15rem; height: 2.15rem; flex: none; }

.mark .edge {
  fill: none;
  stroke: var(--pyrite);
  stroke-width: 3;
  stroke-linejoin: round;
}

.mark .groove {
  fill: none;
  stroke: var(--pyrite);
  stroke-width: 2.2;
  opacity: 0.68;
}

.mark .face-t { fill: var(--pyrite); opacity: 0.12; }
.mark .face-r { fill: var(--patina); opacity: 0.10; }
.mark .face-l { fill: var(--violet); opacity: 0.09; }

.wordmark:hover .mark .edge,
.wordmark:hover .mark .groove { stroke: var(--patina); transition: stroke 200ms ease; }

.wordmark span { color: var(--pyrite); }

.masthead nav {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
}

.masthead nav a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}

.masthead nav a:hover,
.masthead nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--pyrite);
}

/* The mark costs about 30px of header width, which is enough to push the
   nav out of the box on a 375px screen. Let it wrap instead of clipping. */
@media (max-width: 26rem) {
  .masthead { flex-wrap: wrap; gap: 0.85rem 1rem; }
  .masthead nav { margin-left: 0; width: 100%; gap: 1.25rem; }
  .wordmark { letter-spacing: 0.12em; }
}

/* ── Hero ─────────────────────────────────────────────────── */

.hero {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(3rem, 10vw, 6.5rem) 0 clamp(2.5rem, 7vw, 4.5rem);
}

@media (min-width: 54rem) {
  .hero { grid-template-columns: minmax(0, 1fr) 17rem; align-items: center; }
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 em { font-style: italic; color: var(--pyrite); }

.standfirst {
  max-width: var(--measure);
  margin: 1.65rem 0 0;
  color: var(--ink-dim);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}

/* ── Specimen ─────────────────────────────────────────────── */

.specimen { justify-self: center; width: min(17rem, 74vw); height: auto; overflow: visible; }

.specimen .edge {
  fill: none;
  stroke: url(#tarnish);
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.specimen .twin { opacity: 0.42; }

/* The far crystal sits behind both. Lower opacity and a lighter stroke, since
   non-scaling-stroke would otherwise paint the same 1.4px on a third of the
   size and make the smallest cube the heaviest drawn thing on the page. */
.specimen .twin.far { opacity: 0.26; }
.specimen .twin.far .edge { stroke-width: 1.1; }

/* Striations: pyrite's identifying surface texture, running at ninety
   degrees between adjacent faces. */
.specimen .striation {
  stroke: url(#tarnish);
  stroke-width: 0.9;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

.specimen .face-top   { fill: var(--pyrite);  opacity: 0.13; }
.specimen .face-right { fill: var(--patina);  opacity: 0.10; }
.specimen .face-left  { fill: var(--violet);  opacity: 0.09; }

@media (prefers-reduced-motion: no-preference) {
  .specimen { animation: drift 22s ease-in-out infinite; transform-origin: 50% 55%; }
  @keyframes drift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(-1.8deg); }
  }
  .specimen .striation { animation: glint 9s ease-in-out infinite; }
  @keyframes glint {
    0%, 100% { opacity: 0.34; }
    50%      { opacity: 0.62; }
  }
}

/* ── Rhythm: tinted full-bleed bands ──────────────────────────
   Five sections of identical shape read as one wall. Alternating the
   ground breaks the scroll into chapters without adding a word. */

.band {
  /* A neutral scrim, not a cream one. --ground-2 is a warm cream, and laying
     it over the tarnish turned the whole middle of the page back to gold.
     Darkening with ink keeps whatever hue is behind it. */
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  margin: 0 calc(50% - 50vw);
  padding: clamp(2.5rem, 6vw, 4rem) calc(50vw - 50%);
}
.band > section { border-top: 0; }

/* A single line at display size, used to interrupt a run of paragraphs. */
.statement {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.22;
  font-weight: 400;
  color: var(--ink);
  max-width: 26ch;
  margin: 0 0 1.5rem;
}
.statement em { color: var(--pyrite); font-style: italic; }

/* ── The five checks, as a grid with drawn glyphs ─────────────
   Diagrammatic, built from the same geometry as the mark. Never stock
   icons: a forensic practice cannot afford to look like a template. */

.checkgrid { display: grid; gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft);
             backdrop-filter: saturate(1.05); }

@media (min-width: 40rem)  { .checkgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 58rem)  { .checkgrid { grid-template-columns: 1fr 1fr 1fr; } }

.check {
  background: color-mix(in srgb, var(--accent, var(--pyrite)) 4%, var(--ground));
  padding: 1.6rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
}

.check .glyph { width: 46px; height: 46px; margin-bottom: 1.05rem; }
.check .glyph .g-line  { fill: none; stroke: var(--ink-faint); stroke-width: 1.6; }
.check .glyph .g-key   { fill: none; stroke: var(--accent, var(--pyrite)); stroke-width: 1.9; }
.check .glyph .g-fill  { fill: var(--accent, var(--pyrite)); opacity: 0.14; }

.check .idx {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}
.check h3 {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.check p { color: var(--ink-dim); font-size: 0.9375rem; line-height: 1.5; margin: 0; max-width: none; }

/* Each check owns a colour, so the palette is actually used. */
.check:nth-child(1) { --accent: var(--pyrite); }
.check:nth-child(2) { --accent: var(--patina); }
.check:nth-child(3) { --accent: var(--violet); }
.check:nth-child(4) { --accent: var(--oxide); }
.check:nth-child(5) { --accent: var(--patina-deep); }

/* ── The three readings, drawn as a descent ───────────────────
   The strongest thing on the page was three numbers in boxes. Drawing
   the fall makes the point before anyone reads a word. */

.descent { margin: 1.5rem 0 1.75rem; }
.descent svg { width: 100%; height: auto; display: block; overflow: visible; }
.d-axis  { stroke: var(--rule); stroke-width: 1; }
.d-path  { fill: none; stroke: var(--pyrite); stroke-width: 2.2; stroke-linejoin: round; }
.d-dot   { stroke: var(--ground); stroke-width: 3; }
.d-label { font-family: var(--mono); font-size: 7px; letter-spacing: 0.1em; fill: var(--ink-faint); text-transform: uppercase; }
.d-value { font-family: var(--display); font-size: 17px; fill: var(--ink); }
.d-value tspan { font-size: 9px; fill: var(--ink-faint); }

/* ── FAQ ──────────────────────────────────────────────────────
   Visible, because the page carries FAQPage structured data and marking
   up content that is not on the page is both a policy violation and the
   sort of thing this practice is paid to catch. */

.faq { border-top: 1px solid var(--rule-soft); }

.faq details {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0;
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.2rem 1.15rem 0;
  position: relative;
  font-family: var(--display);
  font-size: 1.0625rem;
  color: var(--ink);
  transition: color 150ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--pyrite); }

/* Plus that becomes a minus. Drawn, so it inherits colour. */
.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  background: var(--pyrite);
  transition: transform 180ms ease, opacity 180ms ease;
}
.faq summary::after  { width: 11px; height: 1.5px; margin-top: -0.75px; }
.faq summary::before { width: 1.5px; height: 11px; margin-top: -5.5px; right: 8.75px; }
.faq details[open] summary::before { transform: rotate(90deg); opacity: 0; }

.faq details > p {
  color: var(--ink-dim);
  margin: 0 0 1.25rem;
  max-width: var(--measure);
}

/* ── Process strip ────────────────────────────────────────────
   Four steps read as a sequence rather than a numbered paragraph list. */

.flow { display: grid; gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); margin: 1.5rem 0 0; }
@media (min-width: 46rem) { .flow { grid-template-columns: repeat(4, 1fr); } }

.flow > div { background: var(--ground); padding: 1.4rem 1.35rem 1.5rem; }
.flow .n {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--pyrite);
  display: block;
  margin-bottom: 0.55rem;
}
.flow h3 { font-family: var(--display); font-size: 1.0625rem; font-weight: 400; margin: 0 0 0.4rem; }
.flow p { font-size: 0.9rem; color: var(--ink-dim); margin: 0; max-width: none; line-height: 1.48; }

/* ── Long-form relief ─────────────────────────────────────────
   The article runs 1,681 words with a seven-paragraph unbroken stretch.
   These break it without cutting anything. */

.prose .statement { margin: 2.25rem 0 1.75rem; max-width: 22ch; }

.prose figure {
  margin: 2.5rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.prose figure svg { width: 100%; max-width: 30rem; height: auto; display: block; margin: 0 auto; overflow: visible; }
.prose figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-top: 1rem;
  text-transform: uppercase;
}

/* ── Post list ────────────────────────────────────────────────
   One post should not look like an empty shelf. */

.postlist a { display: block; padding: 1.75rem 0; }
.postlist .date { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--ink-faint); text-transform: uppercase; }
.postlist h3 { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 400; margin: 0.5rem 0 0.6rem; color: var(--ink); }
.postlist p { color: var(--ink-dim); margin: 0; }
.postlist .more { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pyrite); display: inline-block; margin-top: 0.9rem; }

/* ── Sections ─────────────────────────────────────────────── */

section { padding: clamp(2.25rem, 5vw, 3.25rem) 0; border-top: 1px solid var(--rule-soft); }

h2 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pyrite);
  margin: 0 0 1.4rem;
}

h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.15;
  margin: 0;
}

p { max-width: var(--measure); margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.125rem; }

/* Breaks a run of body copy so the eye gets a rest, and lifts the one
   sentence worth remembering out of the paragraph it was buried in. */
.aside {
  font-family: var(--display);
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.32;
  color: var(--ink);
  max-width: 30rem;
  margin: 1.9rem 0;
  padding-left: 1.35rem;
  border-left: 2px solid var(--pyrite);
  text-wrap: balance;
}

/* ── Numbered checks ──────────────────────────────────────── */

.checks { list-style: none; margin: 0; padding: 0; }

.checks li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}

.checks li:first-child { border-top: 1px solid var(--rule-soft); }

.checks .idx {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--pyrite-deep);
}

.checks strong { font-weight: 700; display: block; }

.checks .note {
  display: block;
  color: var(--ink-dim);
  font-size: 0.9375rem;
  margin-top: 0.25rem;
  max-width: var(--measure);
}

/* ── Assay strip: one number, measured three times ────────── */

.assay { border-top: 1px solid var(--rule); }

.readings {
  display: grid;
  gap: 1.75rem 1rem;
  margin: 0.5rem 0 1.75rem;
}

@media (min-width: 40rem) {
  .readings { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.reading { position: relative; padding-top: 1.25rem; }

.reading::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.55;
}

.reading .label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}

.reading .figure {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.8rem + 3.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.reading .figure i { font-style: normal; font-size: 0.42em; letter-spacing: 0.02em; }

.reading.claim { color: var(--pyrite-lit); }
.reading.mid   { color: var(--patina); }
.reading.real  { color: var(--oxide); }

.reading.claim .figure { color: var(--pyrite-lit); }
.reading.mid .figure   { color: var(--patina); }
.reading.real .figure  { color: var(--oxide); }

.assay .verdict { max-width: 34rem; color: var(--ink-dim); }
.assay .verdict strong { color: var(--ink); font-weight: 700; }

/* ── Pull quote ───────────────────────────────────────────── */

.pull {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6875rem);
  line-height: 1.36;
  max-width: 31rem;
  text-wrap: balance;
}

.pull .lede { color: var(--pyrite); font-style: italic; }

/* ── Pricing ──────────────────────────────────────────────── */

.tiers { display: grid; gap: 1.25rem; }

@media (min-width: 46rem) {
  /* stretch, not start: unequal card bottoms read as unfinished when the
     two tiers sit side by side for comparison. */
  .tiers { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.tier {
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--ground-2);
}

.tier.feature {
  border-color: var(--pyrite-deep);
  position: relative;
}

.tier.feature::before {
  /* Tarnish band: the same gold-to-teal-to-violet run as the specimen. */
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--pyrite-lit), var(--patina) 62%, var(--violet));
}

.tag {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--patina);
  display: block;
  margin-bottom: 0.5rem;
}

.tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.price {
  font-family: var(--mono);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--pyrite);
  white-space: nowrap;
}

.turnaround {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.25rem;
}

.tier p { max-width: none; }

.tier ul { list-style: none; margin: 1.1rem 0 0; padding: 0; }

.tier li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.55rem;
  color: var(--ink-dim);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--pyrite);
  transform: rotate(45deg);
}

/* ── Calls to action ──────────────────────────────────────── */

/* The tiers stretch to equal height for comparison, so their buttons have to
   land on the same line. Column flex plus margin-top auto does that without
   anyone having to pick a fixed height. The list keeps a margin-bottom so the
   button never crowds it when the card is short. */
.tier { display: flex; flex-direction: column; }
.tier ul { margin-bottom: 1.9rem; }
.tier .cta { margin-top: auto; }

.cta {
  display: block;
  padding: 0.9rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--pyrite);
  color: var(--pyrite);
  background: transparent;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.cta:hover, .cta:focus-visible {
  background: var(--pyrite);
  color: var(--ground);
}

.cta.solid { background: var(--pyrite); color: var(--ground); }

.cta.solid:hover, .cta.solid:focus-visible {
  background: var(--patina);
  border-color: var(--patina);
  color: var(--ground);
}

/* The steer above each price. Teal on the feature card, quiet on the other,
   so the pair reads as two answers rather than one recommendation. */
.tag.alt { color: var(--ink-faint); }

.decider {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--patina);
  padding: clamp(1.35rem, 4vw, 1.9rem);
  margin-top: 1.25rem;
  background: var(--ground-2);
}

.decider h3 {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.85rem;
}

.decider p { color: var(--ink-dim); margin: 0 0 0.85rem; }
.decider strong { color: var(--ink); }
.decider .cta { max-width: 22rem; margin-top: 1.35rem; }

/* ── Process ──────────────────────────────────────────────── */

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }

.steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 1.1rem 3rem;
  max-width: var(--measure);
}

.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--pyrite-deep);
}

/* ── Notice ───────────────────────────────────────────────── */

.notice {
  border-left: 2px solid var(--pyrite);
  padding: 0.15rem 0 0.15rem 1.25rem;
  margin: 1.75rem 0 0;
  color: var(--ink-dim);
  max-width: var(--measure);
}

.notice strong { color: var(--ink); font-weight: 700; }

.contact-act { margin-bottom: 0.9rem; }
.contact-act .cta { display: inline-block; min-width: 16rem; }
.contact-alt { color: var(--ink-faint); font-size: 0.9375rem; }

/* ── Enquiry dialog ───────────────────────────────────────── */

/* A native <dialog>, so Escape, focus trapping, and inertness of the page
   behind come from the browser rather than from code that has to be kept
   right. Every trigger stays a real mailto link underneath. */
dialog.enquiry {
  /* No viewport units here on purpose. The UA stylesheet already gives a
     modal dialog max-width and max-height of calc(100% - 6px - 2em) against
     the viewport, which caps this on small screens without vw or dvh. Some
     embedded browsers resolve those units to 0 and collapse the dialog to
     nothing, and a contact form that vanishes is worse than one that is a
     little too wide. */
  width: 36rem;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--ground-2);
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}

dialog.enquiry::backdrop {
  background: rgba(6, 6, 8, 0.74);
  backdrop-filter: blur(3px);
}

.enq-body { padding: clamp(1.5rem, 5vw, 2.5rem); }

.enq-close-form { position: sticky; top: 0; height: 0; text-align: right; z-index: 1; }

.enq-close {
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
}

.enq-close:hover { color: var(--ink); }

/* Focused programmatically on open, so it must not draw a ring. */
#enq-title:focus { outline: none; }

dialog.enquiry h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.enq-intro { color: var(--ink-dim); font-size: 0.9375rem; margin: 0 0 1.75rem; max-width: none; }

.enq-row { margin-bottom: 1.1rem; }

@media (min-width: 34rem) {
  .enq-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
}

.enq-form label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.enq-opt {
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: lowercase;
}

.enq-hint {
  display: block;
  font-family: var(--serif);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  margin-top: 0.3rem;
  line-height: 1.45;
}

.enq-form input,
.enq-form select,
.enq-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.6rem 0.7rem;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* appearance: none strips the native arrow, so draw one back. */
.enq-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
                    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.enq-form textarea { resize: vertical; line-height: 1.5; }

.enq-form input:focus-visible,
.enq-form select:focus-visible,
.enq-form textarea:focus-visible {
  outline: 2px solid var(--pyrite);
  outline-offset: 1px;
  border-color: var(--pyrite);
}

.enq-form input::placeholder,
.enq-form textarea::placeholder { color: var(--ink-faint); opacity: 0.75; }

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.enq-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enq-error {
  border-left: 2px solid var(--oxide);
  padding: 0.45rem 0 0.45rem 0.9rem;
  margin: 0 0 1.1rem;
  color: var(--ink);
  font-size: 0.9375rem;
  max-width: none;
}

.enq-error a { color: var(--pyrite); }

.enq-submit { width: 100%; margin-top: 0.4rem; cursor: pointer; }
.enq-submit[disabled] { opacity: 0.6; cursor: default; }

.enq-foot {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  margin: 0.9rem 0 0;
  max-width: none;
}

.enq-done h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.enq-done p { color: var(--ink-dim); max-width: none; margin: 0 0 1.5rem; }
.enq-done .cta { cursor: pointer; }

/* ── Long-form ────────────────────────────────────────────── */

.prose { padding: clamp(2.5rem, 8vw, 4.5rem) 0 0; }

.prose .kicker {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.25rem;
}

.prose h1 { max-width: 20rem; }

.prose .standfirst { margin-bottom: 2.75rem; }

.prose h2 {
  font-family: var(--display);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  font-weight: 400;
  /* Was inheriting the body's 1.68, which opened a chasm between wrapped
     heading lines. */
  line-height: 1.18;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin: 2.9rem 0 1.15rem;
  max-width: 30rem;
  text-wrap: balance;
}

.prose p { max-width: 34rem; margin-bottom: 1.35rem; }

.prose strong { font-weight: 700; }

.prose .readings { margin: 2.25rem 0 2.5rem; }

.prose table {
  border-collapse: collapse;
  margin: 1.9rem 0;
  width: 100%;
  max-width: 32rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.prose th {
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding: 0 1rem 0.55rem 0;
}

.prose td {
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-dim);
}

.prose tr.hot td { color: var(--pyrite); font-weight: 700; }

.prose .signoff {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-dim);
}

/* Body links: ink text, gold underline. Shared between long-form prose and
   the contact sections so a link inside a sentence reads the same wherever it
   sits. text-decoration rather than the email link's border-bottom, because
   this one can wrap across lines.

   The .contact block previously styled only a.email, so a plain link next to
   it fell through to the browser's blue. */
.prose a,
.contact a:not(.cta):not(.email) {
  color: var(--ink);
  text-decoration-color: var(--pyrite);
  text-underline-offset: 0.2em;
}

.prose a:hover,
.contact a:not(.cta):not(.email):hover,
.contact a:not(.cta):not(.email):focus-visible { color: var(--pyrite); }

/* ── Post index ───────────────────────────────────────────── */

.postlist { list-style: none; margin: 0; padding: 0; }

/* No border-top on the first item: the enclosing section already draws one,
   and the pair rendered as a double rule with dead space between them. */
.postlist li { border-bottom: 1px solid var(--rule-soft); }

.postlist a {
  display: block;
  padding: 0 0 1.5rem;
  text-decoration: none;
  color: inherit;
}

.postlist li + li a { padding-top: 1.5rem; }

.postlist a:hover h3 { color: var(--pyrite); }

.postlist h3 { transition: color 150ms ease; margin-bottom: 0.4rem; }

.postlist .date {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.5rem;
}

.postlist p { color: var(--ink-dim); margin: 0; }

/* ── Contact ──────────────────────────────────────────────── */

.contact a.email {
  font-family: var(--mono);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1875rem);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pyrite);
  padding-bottom: 0.15rem;
  transition: color 150ms ease, border-color 150ms ease;
}

.contact a.email:hover, .contact a.email:focus-visible {
  color: var(--pyrite-lit);
  border-color: var(--pyrite-lit);
}

footer {
  margin-top: clamp(2.5rem, 7vw, 4rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}

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

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); animation: rise 800ms cubic-bezier(.2,.7,.3,1) forwards; }
  .reveal:nth-child(1) { animation-delay: 50ms; }
  .reveal:nth-child(2) { animation-delay: 140ms; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}