/* ---------------------------------------------------------------------
   The sample full audit — docs/design/public-site.md §5.8.

   Shingan's own brand, read from nothing of NinePocke's: the tokens are the
   house report's (api/src/shingan/house/house.css) and the homepage band's
   (§5.7), and like that band the page is IDENTICAL in both themes. Dark is
   Shingan's primary colourway; it does not invert with the system theme, so
   there is no light block to keep in step. The one exception is the footer
   pointer, which keeps NinePocke's own paper colourway, as the house report's
   pointer block does: it is the other brand's one piece of the page.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* The site's own self-hosted Barlow subsets (§2.1). Marcellus is not served. */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../../fonts/Barlow-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("../../fonts/BarlowCondensed-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../../fonts/BarlowCondensed-600-latin.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --ground:  #0E1211;
  --surface: #151B19;
  --ink:     #E9EEEC;   /* 16.08:1 on the ground */
  --dim:     #9FB0AA;   /*  8.32:1 */
  --jade:    #5CC0A0;   /*  8.54:1 */
  --line:    #26302D;
  --rest:    #3A4844;
  /* NinePocke's paper colourway, for the footer pointer only. */
  --np-paper:      #F4F2ED;
  --np-ink:        #3A332C;   /* 11.11:1 on the paper */
  --np-ink-strong: #1C1917;   /* 15.63:1 */
  --body:    "Barlow", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --label:   "Barlow Condensed", "Arial Narrow", sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

.wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 600px) { .wrap { padding-inline: 24px; } }
@media (min-width: 900px) { .wrap { padding-inline: 32px; } }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Links: always underlined; hover thickens the rule, never shifts colour. */
a {
  color: var(--jade);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 160ms ease-out;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; border-radius: 2px; }

/* ---- masthead: the house report's, with its 4px jade rule on top ---- */
.mast {
  border-top: 4px solid var(--jade);
  padding-block: 28px 40px;
}
@media (min-width: 900px) { .mast { padding-block: 36px 56px; } }

.brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lockup { width: clamp(150px, 34vw, 220px); }
.doc {
  font: 600 12px/1.3 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: right;
}

/* The label is a tag on a specimen, not an eyebrow: boxed, in jade, so it is
   the first thing read and cannot be mistaken for a heading's decoration. */
.example-label {
  display: inline-block;
  margin-top: 40px;
  padding: 7px 12px 6px;
  border: 1px solid var(--jade);
  border-radius: 3px;
  font: 600 13px/1.35 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jade);
  text-wrap: balance;
}

h1 {
  margin-top: 20px;
  font: 600 clamp(44px, 8vw, 76px)/1 var(--label);
  letter-spacing: .005em;
  text-wrap: balance;
}
h1 .num { color: var(--dim); font-weight: 500; font-variant-numeric: tabular-nums; }

.setline {
  margin-top: 12px;
  font: 500 18px/1.4 var(--label);
  letter-spacing: .03em;
  color: var(--dim);
}

.lede {
  margin-top: 24px;
  max-width: 60ch;
  font-size: 18px;
}

/* ---- sections: rules, not boxes ---- */
section { padding-block: 48px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { section { padding-block: 64px; } }

section h2 {
  font: 600 30px/1.1 var(--label);
  letter-spacing: .01em;
}
.intro { margin-top: 10px; max-width: 60ch; color: var(--dim); }

/* ---- the specimen: the card beside its potential ---- */
.specimen-layout { display: grid; gap: 40px; }
@media (min-width: 860px) {
  .specimen-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
}

.hero-photo img {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
figcaption {
  margin-top: 8px;
  font: 500 13px/1.3 var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The label leads: "Consensus grade potential" is set as the heading and the
   figure follows it at a smaller size, so the figure never reads as a grade on
   its own. */
.potential h2 { display: grid; gap: 6px; }
.potential h2 .k {
  font: 600 clamp(28px, 3.4vw, 34px)/1.1 var(--label);
  letter-spacing: .005em;
  color: var(--ink);
}
.range {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 2px;
}
.range .rung { white-space: nowrap; }
.range .n {
  font: 600 clamp(26px, 3vw, 30px)/1 var(--label);
  font-variant-numeric: tabular-nums;
  color: var(--jade);
}
.range .w {
  font: 600 clamp(17px, 1.9vw, 19px)/1 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-left: 4px;
}
.range .to {
  font: 500 18px/1 var(--label);
  letter-spacing: .06em;
  color: var(--dim);
}

.potential-text { margin-top: 16px; max-width: 52ch; }

/* The ladder: all ten rungs, the range bracketed by one jade rule down its
   left side, the most supported rung carrying the jade figure. */
.ladder { margin-top: 28px; border-top: 1px solid var(--line); }
.ladder li {
  display: grid;
  grid-template-columns: 2.4ch minmax(7.5em, auto) 1fr;
  align-items: baseline;
  column-gap: 14px;
  padding: 7px 0 7px 14px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  color: var(--dim);
}
.ladder .n {
  font: 600 20px/1 var(--label);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ladder .w {
  font: 500 13px/1 var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ladder .note {
  font: 500 14px/1.2 var(--label);
  letter-spacing: .02em;
  text-align: right;
}
.ladder li.in { border-left-color: var(--jade); color: var(--ink); }
.ladder li.most .n { color: var(--jade); }
.ladder li.most .note { color: var(--jade); }
.ladder li[data-rung="10"] .note { color: var(--dim); }

.potential-sub {
  margin-top: 10px;
  font: 500 17px/1.4 var(--label);
  letter-spacing: .03em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ---- two reads, one consensus: three columns joined by one rule, the
   consensus carrying the jade rule because it is what the page reports ---- */
.read-list {
  display: grid;
  gap: 32px;
  margin-top: 28px;
}
@media (min-width: 860px) { .read-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.read-list li {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.read-list li.consensus { border-top: 2px solid var(--jade); padding-top: 17px; }
.read-k {
  font: 600 13px/1.2 var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.read-list li.consensus .read-k { color: var(--jade); }
.read-v {
  margin-top: 8px;
  font: 600 24px/1.15 var(--label);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.read-list li > p:last-child { margin-top: 10px; font-size: 16px; color: var(--dim); }

/* ---- the six criteria ---- */
.crit { margin-top: 28px; border-top: 1px solid var(--line); }
.crit > div {
  display: grid;
  gap: 6px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .crit > div { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
}
.crit dt {
  font: 600 15px/1.5 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.crit dd { max-width: 64ch; color: var(--dim); }
/* Where the finding came from: a label, not a badge. Jade only when the hand
   supplied it. */
.crit .src {
  display: block;
  margin-top: 2px;
  font: 500 13px/1.3 var(--label);
  letter-spacing: .06em;
  text-transform: none;
  color: var(--dim);
}
.crit dt .src.hand { color: var(--jade); }

/* ---- centering ---- */
.centering-text { display: grid; gap: 14px; margin-top: 16px; max-width: 64ch; }
.centering-text p + p { color: var(--dim); }

.measure {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}
.measure caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font: 500 13px/1.3 var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.measure th, .measure td {
  text-align: left;
  vertical-align: top;
  padding: 12px 12px 12px 0;
  border-top: 1px solid var(--line);
}
.measure thead th {
  font: 600 13px/1.3 var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  border-top: 0;
}
.measure tbody th {
  width: 30%;
  font: 600 15px/1.45 var(--label);
  letter-spacing: .03em;
}
.measure td { color: var(--dim); font-variant-numeric: tabular-nums; }
.measure td:last-child { color: var(--ink); padding-right: 0; }
.measure tr.disputed td:first-of-type { color: var(--ink); }
.measure tr.disputed th { box-shadow: inset 3px 0 0 var(--jade); padding-left: 12px; }
.measure tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
@media (max-width: 520px) {
  .measure { font-size: 14px; }
  .measure tbody th { font-size: 14px; }
}

/* ---- photos ---- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  margin-top: 28px;
}
@media (min-width: 860px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}

/* ---- limits and status ---- */
.limit-cols { display: grid; gap: 40px; margin-top: 28px; }
@media (min-width: 860px) { .limit-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
.limit-cols h3 {
  font: 600 20px/1.2 var(--label);
  letter-spacing: .01em;
}
.limit-lede { margin-top: 4px; font-size: 15px; color: var(--dim); }
.limit-list { margin-top: 16px; border-top: 1px solid var(--line); max-width: 72ch; }
.limit-list li {
  position: relative;
  padding: 14px 0 14px 22px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
}
/* A step-cut corner in jade: the mark's own chamfer, as a list marker. */
.limit-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(14px + .62em);
  width: 8px;
  height: 8px;
  background: var(--jade);
  clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
}

.status {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 2px solid var(--jade);
  font: 500 18px/1.4 var(--label);
  letter-spacing: .03em;
}

/* ---- footer: NinePocke's one pointer, in its own paper colourway ---- */
footer { padding-block: 8px 56px; }
.pointer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--np-paper);
  color: var(--np-ink);
}
.pointer img { width: 32px; height: 32px; flex: none; }
.pointer p {
  font: 400 14px/1.5 ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
}
.pointer a { color: var(--np-ink-strong); white-space: nowrap; }
.pointer a:focus-visible { outline-color: var(--np-ink-strong); }

.nw { white-space: nowrap; }