/*
 * にごりしろ — stylesheet
 * No JavaScript anywhere on this site. Everything here must render correctly
 * with scripting disabled. No absolutely-positioned pseudo-elements are used
 * to build decoration — see _research/LOCK.md §4 for why that is forbidden.
 */

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

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

body {
  margin: 0;
  /* A very slight gradient, not a flat fill — mixed only from the two
     approved surface tokens (ground/plate), same values in both colour
     schemes. In dark mode this keeps the page reading as a body of
     half-frozen water rather than a generic dark-UI panel. */
  background: linear-gradient(
    180deg,
    var(--color-ground) 0%,
    color-mix(in srgb, var(--color-ground) 88%, var(--color-plate) 12%) 100%
  );
  background-repeat: no-repeat;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
  word-break: normal;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.wrap {
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

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

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

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

/* ---------- headings & type ---------- */

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 var(--space-2);
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
}

h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
}

h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-family: var(--font-sans);
  font-weight: 700;
}

p {
  margin: 0 0 var(--space-2);
}

.lede {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
}

.small {
  font-size: 0.875rem;
  color: var(--color-faint);
}

.quote-en {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-faint);
  margin: var(--space-1) 0;
  border-left: 2px solid var(--color-edge);
  padding-left: var(--space-2);
}

cite {
  font-style: normal;
}

hr {
  border: none;
  border-top: 1px solid var(--color-edge);
  margin: var(--space-3) 0;
}

/* ---------- header ---------- */

.site-header {
  padding-block: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-edge);
}

.site-header__mark {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.site-header__name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}

.site-header__tagline {
  margin: 0;
  color: var(--color-faint);
  font-size: 0.85rem;
}

/* ---------- site nav ---------- */

.site-nav {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em 1em;
}

@media (min-width: 640px) {
  .site-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

.site-nav a {
  display: block;
  /* generous tap target on mobile */
  padding: 0.5em 0.1em;
  line-height: 1.4;
}

.site-nav__label {
  display: block;
}

.site-nav__sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-faint);
}

/* ---------- sections ---------- */
/*
 * Vertical rhythm between sections deliberately lives on the .band element's
 * own margin, not on `section` padding. Each section keeps only a small,
 * fixed breathing space of its own — the bulk of the gap is the band's box.
 * If a band is removed from the flow (display:none has no box, no margin),
 * the rhythm between sections visibly collapses. This is the load-bearing
 * test in LOCK §4: the band is not decoration sitting on top of a layout
 * that would look the same without it.
 */

section {
  padding-block: var(--space-3) var(--space-2);
}

section > .wrap > * + * {
  margin-top: 0;
}

.section-kicker {
  display: inline-block;
  font-size: 0.8125rem;
  color: var(--color-faint);
  border: 1px solid var(--color-edge);
  border-radius: 999px;
  padding: 0.12em 0.75em;
  margin-bottom: var(--space-2);
}

.section-body {
  margin-top: var(--space-3);
}

.section-body > * + * {
  margin-top: var(--space-2);
}

/* ---------- cover ---------- */

.cover {
  padding-top: var(--space-4);
}

.cover__open {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  line-height: 1.85;
  max-width: var(--measure);
  margin: 0 0 var(--space-3);
}

.cover__open span {
  display: block;
}

.cover__concept {
  max-width: var(--measure-wide);
  margin-bottom: var(--space-3);
}

.cover__thesis {
  max-width: var(--measure);
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--color-faint);
  margin-bottom: var(--space-2);
}

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

.cover__concept figure {
  max-width: 26rem;
}

.cover__promise {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

/* ---------- section-end wayfinding ---------- */

.section-nav {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-edge);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: 0.9rem;
  max-width: var(--measure-wide);
}

/* ---------- figures ---------- */

figure {
  margin: 0;
}

figure img {
  border: 1px solid var(--color-edge);
}

figcaption {
  /* Promoted a step above the old faint/small treatment — captions carry
     the sentence that explains what the plate shows, so they read as
     content, not as a footnote sitting under a grey block. Separate
     source notes (see .small / .citation-full) stay small on purpose. */
  margin-top: var(--space-2);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 26rem;
}

figcaption .schema-tag,
.src-tag {
  display: inline-block;
  font-size: 0.8125rem;
  color: var(--color-plate);
  background: var(--color-edge);
  border: 1px solid color-mix(in srgb, var(--color-edge) 80%, var(--color-ink) 20%);
  border-radius: 3px;
  padding: 0.05em 0.5em;
  margin-right: 0.5em;
  vertical-align: middle;
}

/* ---------- specimen gallery ---------- */

.specimens {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 640px) {
  .specimens {
    grid-template-columns: repeat(3, 1fr);
  }
}

.specimen__number {
  font-family: var(--font-serif);
  color: color-mix(in srgb, var(--color-nigori) 40%, var(--color-ink) 60%);
  margin-right: 0.5em;
}

@media (prefers-color-scheme: dark) {
  .specimen__number {
    color: color-mix(in srgb, var(--color-nigori) 60%, var(--color-ink) 40%);
  }
}

.specimen-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.specimen-pair figcaption {
  margin-top: var(--space-1);
}

.pair-note {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(
    155deg,
    var(--color-plate) 0%,
    color-mix(in srgb, var(--color-plate) 92%, var(--color-ground) 8%) 100%
  );
  border: 1px solid var(--color-edge);
  border-radius: 4px;
  max-width: var(--measure);
}

.pair-note p {
  margin: 0 0 var(--space-1);
}

.pair-note p:last-child {
  margin-bottom: 0;
}

/* ---------- figure pair (heat flow / freezer) ---------- */

.figure-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 640px) {
  .figure-pair--two {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- process steps (directional freezing, 3 stages) ---------- */

.process-steps {
  list-style: none;
  counter-reset: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.process-step {
  padding: var(--space-3);
  border: 1px solid var(--color-edge);
  background: linear-gradient(
    155deg,
    var(--color-plate) 0%,
    color-mix(in srgb, var(--color-plate) 92%, var(--color-ground) 8%) 100%
  );
  border-radius: 4px;
}

.process-step h3 {
  margin-bottom: var(--space-2);
}

.process-step figure {
  margin: var(--space-2) 0;
  max-width: 26rem;
}

.process-step p {
  margin: var(--space-2) 0 0;
}

.process-overview {
  margin-top: var(--space-3);
  max-width: 26rem;
}

.tool-map,
.recap-figure {
  margin-top: var(--space-3);
  max-width: 26rem;
}

.citation-full {
  max-width: var(--measure);
}

/* ---------- tables ---------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font-size: 0.95rem;
}

.data-table caption {
  text-align: left;
  color: var(--color-faint);
  font-size: 0.85rem;
  margin-bottom: var(--space-1);
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.65em 0.85em;
  border-bottom: 1px solid var(--color-edge);
  vertical-align: top;
}

.data-table th {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-faint);
  font-size: 0.85rem;
}

/*
 * Narrow viewports: stack each table row as a labelled block so column
 * headers are not squeezed into ~30px cells. Labels use ::before in
 * normal inline flow (no position:absolute) per LOCK §4.
 */
@media (max-width: 767px) {
  .data-table {
    display: block;
  }

  .data-table caption {
    display: block;
    width: 100%;
  }

  .data-table thead {
    display: none;
  }

  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table tr {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-1);
    border: 1px solid var(--color-edge);
    background: linear-gradient(
      155deg,
      var(--color-plate) 0%,
      color-mix(in srgb, var(--color-plate) 92%, var(--color-ground) 8%) 100%
    );
    border-radius: 4px;
  }

  .data-table tr:last-child {
    margin-bottom: 0;
  }

  .data-table td {
    padding: 0.55em 0;
    border-bottom: none;
  }

  .data-table td:first-child {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-ink);
    padding-top: 0;
    padding-bottom: 0.65em;
    margin-bottom: 0.35em;
    border-bottom: 1px solid var(--color-edge);
  }

  .data-table td:not(:first-child)::before {
    display: block;
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--color-faint);
    font-size: 0.85rem;
    margin-bottom: 0.2em;
  }

  .data-table:has(thead th:nth-child(4)) td:nth-child(2)::before {
    content: "構造";
  }

  .data-table:has(thead th:nth-child(4)) td:nth-child(3)::before {
    content: "濁りの行き先";
  }

  .data-table:has(thead th:nth-child(4)) td:nth-child(4)::before {
    content: "切り分け";
  }

  .data-table:not(:has(thead th:nth-child(4))) td:nth-child(2)::before {
    content: "公表されている目安";
  }
}

/* ---------- can / cannot list ---------- */

.claims {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 720px) {
  .claims {
    grid-template-columns: 1fr 1fr;
  }
}

.claims__group h3 {
  margin-bottom: var(--space-2);
}

.claims__group ul {
  margin: 0;
  padding-left: 1.2em;
}

.claims__group li {
  margin-bottom: var(--space-1);
}

.claims__group--no li::marker {
  color: var(--color-nigori);
}

/* ---------- tools placeholder (kept for future empty states) ---------- */

.tools-empty {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--color-edge);
  border-radius: 4px;
  max-width: var(--measure);
  color: var(--color-faint);
}

.tools-roles {
  margin-top: var(--space-2);
  padding-left: 1.2em;
}

.tools-roles li {
  margin-bottom: var(--space-1);
}

/* ---------- disclosure ---------- */

.disclosure {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(
    155deg,
    var(--color-plate) 0%,
    color-mix(in srgb, var(--color-plate) 92%, var(--color-ground) 8%) 100%
  );
  border: 1px solid var(--color-edge);
  border-radius: 4px;
  max-width: var(--measure-wide);
  font-size: 0.9rem;
  color: var(--color-faint);
}

.disclosure p {
  margin: 0;
}

/* ---------- process-based product guide ---------- */

.process-guide {
  margin-top: var(--space-3);
  max-width: var(--measure-wide);
}

.process-guide dl {
  margin: var(--space-2) 0 0;
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 720px) {
  .process-guide dl {
    grid-template-columns: repeat(2, 1fr);
  }
}

.process-guide dt {
  font-family: var(--font-serif);
  font-weight: 600;
}

.process-guide dd {
  margin: 0.2em 0 0;
  color: var(--color-faint);
  font-size: 0.9rem;
}

/* ---------- product groups ---------- */

.product-group {
  margin-top: var(--space-4);
}

.product-group__criteria {
  color: var(--color-faint);
}

/* One shared plate per group — a single surface with rows, not a stack of
   separate cards. The specimen plates in §zukan set this visual language
   (bordered plate, no per-item box); the tools follow the same rule so the
   "道具" section reads as more of the same ice, not a product-comparison
   template. */
.product-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-1) var(--space-3);
  max-width: var(--measure-wide);
  background: linear-gradient(
    155deg,
    var(--color-plate) 0%,
    color-mix(in srgb, var(--color-plate) 92%, var(--color-ground) 8%) 100%
  );
  border: 1px solid var(--color-edge);
  border-radius: 4px;
}

.product {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-edge);
}

.product:last-child {
  border-bottom: none;
}

/*
 * Reading order matches the rest of the page's logic: role (where in the
 * process this belongs) comes first and reuses the schema-tag/kicker
 * vocabulary already established for figures. The confirmed structure
 * reads as a plain sentence, same weight as a figcaption. The limitation
 * is a step quieter, same treatment as the small print under a table.
 * The product name + link is styled like the Dao et al. / Alcademics
 * citation lines elsewhere on the page — a reference the paragraph
 * concludes with, not a headline it opens with.
 */

.product__role {
  margin: 0 0 var(--space-1);
}

.product__fact {
  margin: 0 0 var(--space-1);
  max-width: 34rem;
}

.product__limit {
  margin: 0 0 var(--space-1);
  color: var(--color-faint);
  font-size: 0.9rem;
  max-width: 34rem;
}

.product__cite {
  margin: 0;
  font-size: 0.85rem;
}

/* Link is a plain body-weight link, not visually promoted like a heading —
   it still carries the site-wide underline requirement via the base `a`
   rule. No bold, no larger type. */
.product__cite a {
  font-weight: 400;
}

.pr-badge {
  display: inline-block;
  font-size: 0.84375rem;
  color: var(--color-faint);
  border: 1px solid var(--color-edge);
  border-radius: 2px;
  padding: 0 0.4em;
  margin-left: 0.4em;
  text-decoration: none;
  vertical-align: middle;
}

@media (min-width: 1024px) {
  .product {
    display: grid;
    grid-template-columns: 13rem 1fr;
    column-gap: var(--space-3);
    align-items: start;
  }

  .product__role {
    margin-bottom: 0;
  }

  .product__fact,
  .product__limit,
  .product__cite {
    grid-column: 2;
  }

  .product__fact {
    margin-top: 0;
  }
}

/* ---------- desktop secondary type (768px+) ---------- */
/*
 * Captions, citations, table text, manufacturer notes, and product meta
 * were the only layer still reading cramped on desktop. Mobile sizes are
 * intentionally left alone — they already meet the ≥20 chars/line floor.
 */
@media (min-width: 768px) {
  figcaption {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  section .small,
  .site-footer .small {
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .quote-en {
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .data-table {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .data-table caption,
  .data-table th {
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .data-table td {
    line-height: 1.7;
  }

  .product__limit {
    font-size: 0.9375rem;
    line-height: 1.7;
  }
}

/* ---------- にごりしろの帯 (signature band) ---------- */
/*
 * Normal-flow block elements. No position:absolute, no inset:0, no
 * pseudo-elements. Texture is a generated image, not a CSS construction.
 * Density increases as the page descends (LOCK §4).
 */

.band {
  /* Stretched as a single image across the section, not tiled: the
     generated textures' left/right edges do not match, so repeating
     would show a visible seam. Height stays close to the source
     aspect ratio (1536:512) — roughly a fifth to a sixth of the
     viewport width — so the grain doesn't flatten into lines.

     margin-block carries the bulk of the gap between sections (see the
     comment on `section` above). This is not cosmetic spacing: it is the
     band's own box. Remove the band from the flow and this space goes
     with it. */
  display: block;
  height: clamp(3rem, 18vw, 6rem);
  margin-block: var(--space-3) var(--space-4);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border-top: 1px solid var(--color-edge);
  border-bottom: 1px solid var(--color-edge);
}

.band--1 {
  background-image: url("img/band-01-faint.png");
}

.band--2 {
  background-image: url("img/band-02-mid.png");
}

.band--3 {
  background-image: url("img/band-03-dense.png");
}

@media (prefers-color-scheme: dark) {
  .band {
    /* Dark mode: lower the grain band so it stops competing with the
       plate/ink system. Height only — margins and the ~ erosion rules
       stay untouched so removing a band still collapses rhythm and
       narrows prose. */
    height: clamp(2.25rem, 13.5vw, 4.5rem);
    opacity: 0.8;
  }
}

/* ---------- erosion: the band constrains what follows ---------- */
/*
 * The reading column narrows the further the page descends — a direct,
 * measurable consequence of how many bands have already appeared, using a
 * general sibling combinator against the actual band elements (now direct
 * children of <main>, siblings of <section>). This is not a per-section
 * class assigned by hand: it is derived from which .band elements precede
 * a given section in the document.
 *
 * Floor: never below ~26 Japanese characters per line (LOCK requires
 * ≥20). See the measured widths in the comments below.
 */

.band--1 ~ section .prose {
  max-width: 37rem; /* ~34–36 JP characters/line at body size */
}

.band--2 ~ section .prose {
  max-width: 33rem; /* ~30–32 JP characters/line */
}

.band--3 ~ section .prose {
  max-width: 29rem; /* ~26–28 JP characters/line — the floor */
}

/* ---------- footer ---------- */

.site-footer {
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-edge);
  color: var(--color-faint);
  font-size: 0.85rem;
}

.site-footer p {
  margin: 0 0 var(--space-1);
}

.site-footer__nav {
  margin-top: var(--space-2);
}

.site-footer__nav a {
  margin-right: var(--space-2);
}

/* ---------- simple content pages (about / privacy) ---------- */

.page-header {
  padding-block: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-edge);
}

.page-header__back {
  font-size: 0.85rem;
}

.page {
  padding-block: var(--space-4) var(--space-5);
}

.page h1 {
  margin-bottom: var(--space-3);
}

.page h2 {
  margin-top: var(--space-4);
}

.page .prose > * + * {
  margin-top: var(--space-2);
}

/* ---------- narrow-viewport padding correction ---------- */
/*
 * These surfaces sit inside .wrap, which already carries its own
 * padding-inline (var(--space-3) = 28px each side). Below 480px their own
 * var(--space-3) inline padding doubled up with .wrap's and pushed body
 * text under 20 JP characters/line. Keep enough padding that the box still
 * reads as a distinct plate (the border/background do most of that work),
 * but stop stacking two full gutters on a 390px screen.
 */
@media (max-width: 480px) {
  .pair-note,
  .disclosure,
  .process-step,
  .product-list,
  .tools-empty {
    padding-inline: 0.25rem;
  }

  .claims__group ul,
  .tools-roles {
    padding-left: 0.8em;
  }
}