/* Loaded after reset.css, and deliberately unlayered: styles outside a cascade
   layer beat styles inside one, so wrapping these in @layer would hand every
   conflict back to the reset. */

/* ---------------------------------------------------------------------------
   Fonts

   Self-hosted because font-src is locked to 'self' by the CSP. Both are SIL OFL
   (licences sit beside the files). Rokkitt is a slab in the tradition of American
   mill and feed-sack printing; Public Sans is the US Web Design System's typeface,
   drawn for legibility first.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-5.3.0.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-italic-5.3.0.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Rokkitt";
  src: url("fonts/rokkitt-5.3.0.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   Design tokens

   The page is chambray and white, like workwear. Colour is reserved for claim
   state, and each state takes one of the historic American natural dyes: indigo
   for a sourced claim, goldenrod for one that still needs a source, madder for a
   claim a source contradicts. Every text pairing below clears WCAG AA in both
   themes; the goldenrod line colour is only ever used for non-text marks.
   --------------------------------------------------------------------------- */
:root {
  --font-display: "Rokkitt", Rockwell, "Roboto Slab", "DejaVu Serif", Georgia, serif;
  --font-body: "Public Sans", system-ui, "Segoe UI", Roboto, sans-serif;

  --paper: #e8edf3;
  --surface: #ffffff;
  --ink: #182033;
  --ink-soft: #4a5468;
  --line: #cdd5e0;
  --control: #77829a;

  --indigo: #2e3f9e;
  --indigo-wash: #e1e6f8;
  --on-indigo: #ffffff;
  --gold: #7a5800;
  --gold-line: #a67c00;
  --madder: #a1302a;
  --unknown: #5b6475;

  --measure: 40rem;
  --page: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1522;
    --surface: #182031;
    --ink: #e7ebf3;
    --ink-soft: #aeb7c8;
    --line: #2c364b;
    --control: #7d89a3;

    --indigo: #9fb1ff;
    --indigo-wash: #222d4d;
    --on-indigo: #0f1522;
    --gold: #e8bd52;
    --gold-line: #c99a2e;
    --madder: #f2968b;
    --unknown: #9aa4b6;
  }
}

[x-cloak] { display: none !important; }

/* --- Base ---------------------------------------------------------------- */

html {
  background: var(--paper);
  color: var(--ink);
  color-scheme: light dark;
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 1.125rem;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}

p { text-wrap: pretty; }

strong { font-weight: 700; }

a {
  color: var(--indigo);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }

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

.visually-hidden {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Frame --------------------------------------------------------------- */

.skip-link {
  background: var(--indigo);
  border-radius: 0 0 6px 0;
  color: var(--on-indigo);
  font-weight: 600;
  left: 0;
  padding: 0.75rem 1.25rem;
  position: absolute;
  top: 0;
  transform: translateY(-150%);
  z-index: 10;
}

.skip-link:focus { transform: none; }

/* The header's bottom edge is a selvedge: the red identification thread woven
   into the edge of American-made denim. */
body > header {
  background: var(--surface);
  border-bottom: 2px solid var(--madder);
  box-shadow: 0 2px 0 var(--surface), 0 3px 0 var(--line);
  padding: 1rem max(var(--gutter), (100% - var(--page)) / 2);
}

body > header a {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  text-decoration: none;
}

main {
  display: block;
  margin: 0 auto;
  max-width: calc(var(--page) + 2 * var(--gutter));
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 0;
}

body > footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  margin-top: 6rem;
  padding: 2rem max(var(--gutter), (100% - var(--page)) / 2);
}

body > footer a { font-weight: 600; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.breadcrumb a:not(:last-child)::after {
  color: var(--ink-soft);
  content: "/";
  display: inline-block;
  margin-left: 0.5rem;
}

/* --- Claim marks: the site's signature ------------------------------------

   Each mark is a tiny sewn-in label. A sourced claim is the whole label: indigo
   cloth with a check. A claim that needs a source is only the stitching, with no
   cloth inside it. State is carried by shape as well as colour.

   Marks are wider than they are tall, like a garment label, so they never read
   as checkboxes sitting under the real ones in the filter panel. */

.claim-mark {
  block-size: 1.125rem;
  border: 2px solid transparent;
  border-radius: 2px;
  display: inline-grid;
  flex-shrink: 0;
  inline-size: 1.75rem;
  place-items: center;
  position: relative;
}

.claim-mark-yes {
  background: var(--indigo);
  border-color: var(--indigo);
}

.claim-mark-yes::after {
  block-size: 0.55rem;
  border: solid var(--on-indigo);
  border-width: 0 2.5px 2.5px 0;
  content: "";
  inline-size: 0.3rem;
  transform: translateY(-1px) rotate(45deg);
}

/* Cloth has stitching: a dashed seam just inside the edge. */
.claim-mark-yes::before {
  border-inline: 1px dashed color-mix(in srgb, var(--on-indigo) 70%, transparent);
  content: "";
  inset: 1px 2px;
  position: absolute;
}

.claim-mark-unsourced {
  border: 2px dashed var(--gold-line);
}

.claim-mark-no {
  border-color: var(--madder);
  color: var(--madder);
}

.claim-mark-no::before,
.claim-mark-no::after {
  border-top: 2px solid currentColor;
  content: "";
  inline-size: 0.7rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.claim-mark-no::before { transform: translate(-50%, -50%) rotate(-45deg); }

.claim-mark-unknown {
  border: 2px dotted var(--unknown);
  color: var(--unknown);
}

.claim-mark-unknown::after {
  content: "?";
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

@media (forced-colors: active) {
  .claim-mark-yes::after { border-color: CanvasText; }
}

.claim-key {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem 1.5rem 1.5rem;
}

.claim-key h2,
.claim-key summary {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 1rem;
}

details.claim-key { padding-block: 0; }

details.claim-key[open] { padding-bottom: 1.5rem; }

.claim-key summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  min-block-size: 3.25rem;
}

.claim-key summary::-webkit-details-marker { display: none; }

/* A chevron that turns when the key opens. */
.claim-key summary::before {
  block-size: 0.5rem;
  border: solid var(--indigo);
  border-width: 0 2.5px 2.5px 0;
  content: "";
  inline-size: 0.5rem;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}

.claim-key[open] summary::before { transform: translateY(1px) rotate(-135deg); }

.claim-key[open] summary { margin-bottom: 0.5rem; }

.claim-key ul {
  display: grid;
  gap: 0.75rem;
}

.claim-key li {
  align-items: flex-start;
  display: flex;
  font-size: 1rem;
  gap: 0.75rem;
  line-height: 1.45;
}

.claim-key .claim-mark { margin-top: 0.05rem; }

/* --- Hero and listing headers -------------------------------------------- */

.hero,
.facet-header {
  align-items: end;
  display: grid;
  gap: 2.5rem 4rem;
  margin-bottom: 3rem;
}

@media (min-width: 60rem) {
  .hero,
  .facet-header {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }
}

.hero h1 {
  font-size: clamp(2.25rem, 1rem + 5vw, 4.75rem);
  font-weight: 750;
  line-height: 0.95;
}

.hero-lede {
  color: var(--ink-soft);
  font-size: 1.3125rem;
  line-height: 1.55;
  margin-top: 1.5rem;
  max-width: 36rem;
}

.hero-links {
  font-weight: 600;
  margin-top: 1.25rem;
}

.facet-header h1 { font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4rem); }

.facet-description {
  color: var(--ink-soft);
  font-size: 1.25rem;
  margin-top: 1rem;
  max-width: 36rem;
}

.facet-count {
  color: var(--ink-soft);
  margin-top: 0.75rem;
}

/* --- Filters ------------------------------------------------------------- */

.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 2rem;
  padding: 1.5rem;
}

.filter-row {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.filter-row label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.filter-row label > span,
.filter-claims legend {
  font-size: 1rem;
  font-weight: 600;
}

.filters input[type="search"],
.filters select {
  background-color: var(--surface);
  border: 1px solid var(--control);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  min-block-size: 2.875rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
}

.filters input[type="search"]::placeholder { color: var(--ink-soft); }

.filters input[type="search"]:hover,
.filters select:hover { border-color: var(--ink); }

.filter-claims {
  border: 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
}

.filter-claims legend {
  float: left;
  inline-size: 100%;
  margin-bottom: 0.25rem;
  padding: 0;
}

.filter-claim {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  gap: 0.625rem;
  min-block-size: 2.75rem;
}

.filter-claim input {
  accent-color: var(--indigo);
  block-size: 1.25rem;
  inline-size: 1.25rem;
  margin: 0;
}

.filter-status {
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.75rem;
}

.filter-status button,
.no-results button {
  background: none;
  border: 0;
  color: var(--indigo);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  min-block-size: 2.75rem;
  padding: 0 0.25rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.no-results {
  color: var(--ink-soft);
  font-size: 1.25rem;
  padding: 3rem 0;
  text-align: center;
}

/* --- Yarn cards ---------------------------------------------------------- */

.yarn-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.yarn-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  padding: 1.375rem 1.5rem 1.25rem;
}

.yarn-card.is-hidden { display: none; }

.yarn-card-title { font-size: 1.75rem; }

.yarn-card-title a {
  color: var(--ink);
  text-decoration: none;
}

.yarn-card-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.yarn-card-brand {
  font-size: 1rem;
  margin-top: 0.25rem;
}

.yarn-card-brand a { color: var(--ink-soft); }

.yarn-card-specs {
  display: grid;
  gap: 0.25rem;
  margin: 1rem 0 0;
}

.yarn-card-specs > div {
  display: flex;
  font-size: 1rem;
  gap: 1rem;
  justify-content: space-between;
}

.yarn-card-specs dt { color: var(--ink-soft); }

.yarn-card-specs dd {
  font-variant-numeric: tabular-nums;
  margin: 0;
  text-align: right;
}

.claim-strip {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
}

/* margin-top: auto pins the strip to the bottom of the card; whatever sits just
   above it keeps a minimum gap. */
.yarn-card > :nth-last-child(2) { margin-bottom: 1.125rem; }

.claim-row {
  align-items: center;
  display: flex;
  font-size: 1rem;
  gap: 0.625rem;
  line-height: 1.3;
}

/* --- Yarn detail --------------------------------------------------------- */

@media (min-width: 60rem) {
  .yarn-detail {
    column-gap: 4rem;
    display: grid;
    grid-template-areas:
      "crumb crumb"
      "head  head"
      "claims specs"
      "refs  specs"
      "more  more"
      "note  note";
    grid-template-columns: minmax(0, 1fr) 24rem;
    grid-template-rows: auto auto auto 1fr auto auto;
  }

  .yarn-detail > .breadcrumb { grid-area: crumb; }
  .yarn-detail > .yarn-header { grid-area: head; }
  .yarn-detail > .claims { grid-area: claims; }
  .yarn-detail > .yarn-specs { align-self: start; grid-area: specs; }
  .yarn-detail > .references { grid-area: refs; }
  .yarn-detail > .more-from-brand { grid-area: more; }
  .yarn-detail > .correction-note { grid-area: note; }
}

.yarn-header { margin-bottom: 2.5rem; }

.yarn-header h1 {
  font-size: clamp(3rem, 1.75rem + 4.5vw, 4.75rem);
  font-weight: 750;
  line-height: 0.95;
}

.yarn-brand {
  color: var(--ink-soft);
  font-size: 1.3125rem;
  margin-top: 0.5rem;
}

/* The one full-size label: indigo cloth, with its stitching drawn inside. */
.fully-us-badge {
  background: var(--indigo);
  border-radius: 3px;
  color: var(--on-indigo);
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 1.25rem;
  padding: 0.5rem 1.125rem;
  position: relative;
}

.fully-us-badge::before {
  border: 1.5px dashed color-mix(in srgb, var(--on-indigo) 65%, transparent);
  border-radius: 2px;
  content: "";
  inset: 4px;
  pointer-events: none;
  position: absolute;
}

@media (forced-colors: active) {
  .fully-us-badge { border: 2px solid CanvasText; }
}

.claims,
.references,
.more-from-brand {
  margin-top: 3rem;
}

.claims { margin-top: 0; }

.claims h2,
.yarn-specs h2,
.references h2,
.more-from-brand h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.claims-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0;
}

.claim {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.claim:last-child { border-bottom: 0; }

.claim dt {
  align-items: center;
  display: flex;
  font-size: 1.1875rem;
  font-weight: 600;
  gap: 0.75rem;
}

.claim dd {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.claim-state { font-weight: 700; }

.claim-yes .claim-state { color: var(--indigo); }
.claim-yes:has(.claim-unsourced) .claim-state { color: var(--gold); }
.claim-no .claim-state { color: var(--madder); }
.claim-unknown .claim-state { color: var(--unknown); }

.claim-refs {
  display: flex;
  gap: 0.375rem;
}

/* Footnote markers are real targets, not superscript specks. */
.ref {
  align-items: center;
  background: var(--indigo-wash);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  justify-content: center;
  min-block-size: 2rem;
  min-inline-size: 2.5rem;
  padding: 0 0.5rem;
  text-decoration: none;
}

.ref:hover {
  background: var(--indigo);
  color: var(--on-indigo);
}

.ref sup {
  font-size: inherit;
  vertical-align: baseline;
}

.claim-unsourced {
  border: 2px dashed var(--gold-line);
  border-radius: 4px;
  color: var(--gold);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
}

.yarn-specs {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 3rem;
  padding: 1.5rem;
}

@media (min-width: 60rem) {
  .yarn-specs { margin-top: 0; }
}

.yarn-specs h2 { font-size: 1.625rem; }

.spec-list { margin: 0; }

.spec-list > div {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  padding: 0.625rem 0;
}

.spec-list > div:last-child { border-bottom: 0; }

.spec-list dt {
  color: var(--ink-soft);
  font-size: 1rem;
}

.spec-list dd {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  gap: 0.5rem;
  justify-content: flex-end;
  margin: 0 0 0 auto;
  text-align: right;
}

.cyc {
  border: 1px solid var(--control);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0 0.5rem;
}

.field-group { margin-top: 1.5rem; }

.field-group h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.product-link {
  font-weight: 600;
  margin-top: 1.25rem;
}

/* --- References ---------------------------------------------------------- */

.reference-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  list-style: decimal;
  padding-left: 2rem;
}

.reference {
  border-radius: 6px;
  font-size: 1.0625rem;
  padding-left: 0.5rem;
  scroll-margin-top: 2rem;
}

.reference::marker {
  color: var(--indigo);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.reference > a:first-child { font-weight: 600; }

.reference.is-highlighted {
  background: var(--indigo-wash);
  box-shadow: 0 0 0 0.5rem var(--indigo-wash);
}

.reference-publisher,
.reference-accessed {
  color: var(--ink-soft);
  display: block;
  font-size: 1rem;
}

.reference-quote {
  border-left: 3px solid var(--indigo-wash);
  color: var(--ink-soft);
  margin: 0.625rem 0 0;
  padding: 0.25rem 0 0.25rem 1rem;
}

.reference-quote::before { content: "\201C"; }
.reference-quote::after { content: "\201D"; }

.reference-archive {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.correction-note {
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  margin-top: 3rem;
  padding-top: 1.5rem;
}

/* --- Browse -------------------------------------------------------------- */

.browse {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-top: 5rem;
}

.browse > h2 {
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  grid-column: 1 / -1;
}

.browse-group h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.browse-group li {
  border-bottom: 1px solid var(--line);
  display: flex;
  font-size: 1.0625rem;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.browse-group a {
  color: var(--ink);
  text-decoration: none;
}

.browse-group a:hover {
  color: var(--indigo);
  text-decoration: underline;
}

.count {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Prose (methodology) and not-found ----------------------------------- */

.prose,
.not-found { max-width: var(--measure); }

.prose h1,
.not-found h1 {
  font-size: clamp(2.75rem, 1.75rem + 3.5vw, 4.25rem);
  font-weight: 750;
  line-height: 0.95;
  margin-bottom: 2rem;
}

.prose h2 {
  font-size: 2rem;
  margin: 3rem 0 0.25rem;
}

.prose p,
.prose li,
.not-found p {
  line-height: 1.7;
  margin: 1rem 0;
}

.prose ul,
.prose ol { padding-left: 1.5rem; }

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li::marker { color: var(--indigo); }