/* =========================================================
   Valle Kraft Paper
   Built to "Brand and interface specification" v1.0, August 2026.
   Section numbers in comments refer to that document.

   Two rules that govern everything below, from Section 03:
   no gradients, and no colour used as the sole carrier of meaning.
   ========================================================= */

/* ---------- Section 04/05: self-hosted fonts ----------
   Self-hosted rather than linked, because Valle Kraft sells into the EU
   and serving fonts from a third-party CDN transmits visitor IP addresses.
   All three are SIL OFL 1.1; see /fonts/OFL.txt. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/sourceserif4-var.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibmplexmono-regular.woff2") format("woff2");
  font-weight: 400;
  /* swap, deliberately, and do not change it to optional. Lighthouse reports
     this face as a chained request behind this stylesheet. It is not render
     blocking under swap, and the register pages carry 38 method codes each in
     mono, which optional would leave in the fallback for the whole of a first
     visit. The separable method column is worth more than the diagnostic. */
  font-display: swap;
}

:root {
  /* ---------- Section 02: colour tokens ----------
     Ratios are against --vk-paper unless noted. */
  --vk-ink-900:     #1B1815;   /* 15.95 AAA  body text, dark section field */
  --vk-ink-700:     #3A342C;   /* 11.10 AAA  secondary prose, table values */
  --vk-ink-500:     #6B6153;   /*  5.48 AA   captions, units, eyebrow labels */
  --vk-paper:       #F6F3EC;   /* page field */
  --vk-surface-2:   #EDE8DE;   /* card fill, table fill, quiet blocks */
  --vk-rule:        #B9AE99;   /* header rule, section hairline */
  --vk-rule-light:  #DCD5C7;   /* table row hairline */

  /* Kraft ramp. Carries the grade structure; see Section 03. The ramp keyed
     to basis weight bands until the register moved to grades; it now keys to
     the three grade families, light to dark. */
  --vk-kraft-200:   #E3CBAA;   /* spare. Held for a fourth family. */
  --vk-kraft-300:   #CFA878;   /* MG kraft */
  --vk-kraft-500:   #A56A34;   /* Sack kraft. 4.02, large text only */
  --vk-kraft-700:   #6E4420;   /* Containerboard. 7.55 AAA at body size */

  --vk-pacific-800: #0E4B52;   /*  8.83 AAA  links, primary button, focus */
  --vk-pacific-900: #0A3B41;   /* hover / active */
  --vk-teal-300:    #5FB8B8;   /*  7.60 AAA against ink-900. Dark only. */

  /* Section 04: the mono stack terminates in Archivo, not in a generic
     monospace, because IBM Plex Mono Regular has no U+0394. */
  --vk-sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --vk-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --vk-mono:  "IBM Plex Mono", "Archivo", ui-monospace, monospace;

  /* Section 06: 8px base with a 4px half-step */
  --vk-space-1:   4px;
  --vk-space-2:   8px;
  --vk-space-3:  12px;
  --vk-space-4:  16px;
  --vk-space-5:  32px;
  --vk-space-6:  48px;
  --vk-space-7:  72px;
  --vk-space-8: 112px;   /* section separation */

  --vk-wrap: 1160px;
  --vk-measure: 66ch;
  --vk-pad: 48px;

  /* Section 06: 4px on buttons and inputs, 8px on cards,
     0 on tables and on anything with a single-sided accent border. */
  --vk-radius-control: 4px;
  --vk-radius-card: 8px;
}

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

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

body {
  margin: 0;
  font-family: var(--vk-serif);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: 19px;
  line-height: 1.62;
  color: var(--vk-ink-700);
  background: var(--vk-paper);
}

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

/* ---------- Section 05: type scale ----------
   Archivo's variable file defaults to wght 600, so every rule that uses it
   sets font-weight explicitly. Unset weight produces semibold body text. */

h1, h2, h3, h4,
nav, button, th, td,
.eyebrow, .caption, figcaption {
  font-family: var(--vk-sans);
  font-weight: 600;
  font-variation-settings: "wdth" 100;
}

h1, h2, h3, h4 {
  color: var(--vk-ink-900);
  margin: 0 0 var(--vk-space-4);
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 5vw, 54px);   line-height: 1.06; letter-spacing: -0.022em; }
h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.14; letter-spacing: -0.016em; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 17px; line-height: 1.3;  letter-spacing: -0.005em; }

p { margin: 0 0 1.1em; max-width: var(--vk-measure); }

.lead, .hero-lede {
  font-size: 22px;
  line-height: 1.5;
  color: var(--vk-ink-700);
}

/* Links carry an underline in prose. Colour alone is not sufficient:
   see Section 12 on deutan prevalence in this buyer population. */
a {
  color: var(--vk-pacific-800);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease-out;
}
a:hover { color: var(--vk-pacific-900); }

/* Section 12: visible focus ring on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--vk-pacific-800);
  outline-offset: 2px;
  border-radius: 2px;
}

table, .figure-value, .hero-stats {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Section 06: layout ---------- */

.wrap {
  max-width: var(--vk-wrap);
  margin-inline: auto;
  padding-inline: var(--vk-pad);
}
.narrow { max-width: 820px; }

section { padding-block: var(--vk-space-8); }

/* Section rule: 2px kraft, 26mm wide, above the h2. */
.section-rule::before,
.rule-above::before {
  content: "";
  display: block;
  width: 98px;
  height: 2px;
  background: var(--vk-kraft-500);
  margin-bottom: var(--vk-space-5);
}

.grid { display: grid; gap: var(--vk-space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--vk-space-7);
  align-items: start;
}

.section-alt {
  background: var(--vk-surface-2);
  border-block: 1px solid var(--vk-rule-light);
}

/* ---------- Section 03: dark sections ----------
   ink-900 field, surface-2 text at 14.48, kraft-200/300 accents,
   teal-300 for links. pacific-800 fails on dark and is never used here. */

.section-dark, .on-dark {
  background: var(--vk-ink-900);
  color: var(--vk-surface-2);
}
.section-dark h1, .section-dark h2,
.section-dark h3, .section-dark h4 { color: var(--vk-surface-2); }
.section-dark p { color: var(--vk-surface-2); }
.section-dark a { color: var(--vk-teal-300); }
.section-dark a:hover { color: #8FD0D0; }
.section-dark .eyebrow, .eyebrow--light { color: var(--vk-kraft-300); }
.section-dark .section-rule::before { background: var(--vk-kraft-300); }
.section-dark :focus-visible { outline-color: var(--vk-teal-300); }

/* ---------- Section 08: eyebrow labels ---------- */

.eyebrow {
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-ink-500);
  margin: 0 0 var(--vk-space-4);
}
/* Where a number prefix appears, the separator is kraft and the rest ink-500. */
.eyebrow .sep { color: var(--vk-kraft-500); }

/* ---------- Section 08: buttons ----------
   Height 48, padding 24, radius 4, Archivo 500 at 16.
   Never width-fixed; see the bilingual constraint in Section 06. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vk-space-2);
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: var(--vk-radius-control);
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.btn:active { transform: scale(0.99); }

.btn-primary {
  background: var(--vk-pacific-800);
  color: var(--vk-paper);
}
.btn-primary:hover {
  background: var(--vk-pacific-900);
  color: var(--vk-paper);
}

/* Secondary: 1px ink-900 outline on transparent. */
.btn-ghost, .btn-secondary {
  background: transparent;
  color: var(--vk-ink-900);
  box-shadow: inset 0 0 0 1px var(--vk-ink-900);
}
.btn-ghost:hover, .btn-secondary:hover {
  background: var(--vk-ink-900);
  color: var(--vk-paper);
}

/* On an ink-900 band the CTA inverts: paper fill, ink text, no border. */
.btn-dark,
.section-dark .btn-primary,
.on-dark .btn-primary {
  background: var(--vk-paper);
  color: var(--vk-ink-900);
  box-shadow: none;
}
.btn-dark:hover,
.section-dark .btn-primary:hover,
.on-dark .btn-primary:hover {
  background: var(--vk-surface-2);
  color: var(--vk-ink-900);
}
.section-dark .btn-ghost, .on-dark .btn-ghost {
  color: var(--vk-surface-2);
  box-shadow: inset 0 0 0 1px var(--vk-surface-2);
}
.section-dark .btn-ghost:hover, .on-dark .btn-ghost:hover {
  background: var(--vk-surface-2);
  color: var(--vk-ink-900);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--vk-ink-900);
  border-bottom: 1px solid rgba(237, 232, 222, 0.16);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vk-space-5);
  min-height: 72px;
}

/* Section 10: wordmark. "Valle Kraft" at 600, "Paper" lighter.
   Legal as display type. The locality descriptor is a separate line
   because it has to disappear on a favicon and on a reel label. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--vk-space-3);
  text-decoration: none;
  font-family: var(--vk-sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--vk-surface-2);
}
.brand:hover { color: var(--vk-surface-2); }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand .brand-paper { font-weight: 400; color: var(--vk-kraft-300); }
.brand small {
  display: block;
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-ink-500);
  margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: var(--vk-space-5); }
.nav a {
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--vk-surface-2);
  text-decoration: none;
  padding: var(--vk-space-2) 0;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--vk-surface-2);
  border-bottom-color: var(--vk-kraft-300);
}
/* .nav a would otherwise strip the button's horizontal padding and drop it to
   15px, since it outranks .btn. Restore both. Still no fixed width. */
.nav .btn {
  border-bottom: 0;
  padding: 0 24px;
  font-size: 16px;
}

/* Language switcher. Set as a label rather than a nav destination, so it reads
   as a change of state and not as a sixth section. Section 06: never
   width-fixed, since the two labels differ in length. */
.nav .nav-lang {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-kraft-300);
  padding-left: var(--vk-space-5);
  border-left: 1px solid rgba(237, 232, 222, 0.22);
  border-bottom: 0;
}
.nav .nav-lang:hover {
  color: var(--vk-surface-2);
  border-bottom: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(237, 232, 222, 0.3);
  color: var(--vk-surface-2);
  width: 44px;
  height: 44px;
  border-radius: var(--vk-radius-control);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* ---------- hero ---------- */

.hero {
  background: var(--vk-ink-900);
  color: var(--vk-surface-2);
  position: relative;
  isolation: isolate;
}
.hero .wrap { position: relative; padding-block: var(--vk-space-8) var(--vk-space-7); }
.hero h1 { color: var(--vk-surface-2); max-width: 20ch; }
/* Emphasis inside the hero headline. kraft-300 on ink-900 is 8.02. */
.hero h1 em { font-style: normal; color: var(--vk-kraft-300); }
.hero-lede { color: var(--vk-surface-2); max-width: 62ch; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vk-space-4);
  margin-top: var(--vk-space-6);
}

/* Photographic hero. Section 03 forbids gradients, so the scrim is a flat
   ink-900 wash rather than a linear-gradient. */
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--vk-ink-900);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center 42%;
  opacity: 0.86;
}

/* ---------- Section 08: statistic row ----------
   The most typographically confident thing above the fold. */

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(237, 232, 222, 0.16);
  margin-top: var(--vk-space-7);
}
/* Left padding clears the preceding cell's rule. The first cell in each row
   stays flush so the row aligns with the headline above it. */
.hero-stats div {
  padding: var(--vk-space-5);
  border-right: 1px solid rgba(237, 232, 222, 0.16);
  min-width: 0;
}
.hero-stats div:first-child { padding-left: 0; }
.hero-stats div:last-child { border-right: 0; padding-right: 0; }
.hero-stats b {
  display: block;
  font-family: var(--vk-sans);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--vk-surface-2);
}
.hero-stats span {
  display: block;
  margin-top: var(--vk-space-2);
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vk-kraft-300);
  text-wrap: balance;
}

/* ---------- interior page header ---------- */

.page-head {
  background: var(--vk-ink-900);
  color: var(--vk-surface-2);
  padding-block: var(--vk-space-7);
  position: relative;
  overflow: hidden;
}
.page-head > .wrap { position: relative; z-index: 1; }
.page-head h1 { color: var(--vk-surface-2); margin-bottom: var(--vk-space-3); }
.page-head p { color: var(--vk-surface-2); max-width: 62ch; margin: 0; }
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--vk-ink-900);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  opacity: 0.88;
}

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

.card {
  background: var(--vk-surface-2);
  border-radius: var(--vk-radius-card);
  padding: 24px;
}
.card h3, .card h4 { margin-bottom: var(--vk-space-3); }
.card p:last-child { margin-bottom: 0; }
.card p { font-size: 17px; }
.section-dark .card {
  background: rgba(237, 232, 222, 0.06);
  color: var(--vk-surface-2);
}

/* ---------- Section 03/08: grade cards ----------
   The ramp is a 4px top border. It always sits beside a written gsm range,
   so colour is never the sole carrier of meaning. Radius 0 on the accent
   edge is wrong here: the spec asks for 8px cards, so the border is
   squared only where it meets the corner. */

.grade {
  display: flex;
  flex-direction: column;
  background: var(--vk-surface-2);
  border-radius: var(--vk-radius-card);
  border-top: 4px solid var(--vk-kraft-500);
  padding: 24px;
}
.g1 { border-top-color: var(--vk-kraft-200); }
.g2 { border-top-color: var(--vk-kraft-300); }
.g3 { border-top-color: var(--vk-kraft-500); }
.g4 { border-top-color: var(--vk-kraft-700); }

.grade-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--vk-space-3);
  margin-bottom: var(--vk-space-4);
}
.grade-band strong {
  font-family: var(--vk-sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--vk-ink-900);
}
.grade-band span {
  font-family: var(--vk-sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--vk-ink-900);
}
.grade-body { flex: 1; padding: 0; }
.grade-body ul {
  margin: 0;
  padding-left: 1.1rem;
  font-family: var(--vk-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--vk-ink-700);
}
.grade-body li { margin-bottom: var(--vk-space-2); }

/* Grade marker for use beside a grade name in prose or a form option. */
.grade-marker {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: none;
  margin-right: var(--vk-space-2);
  background: var(--vk-kraft-500);
  vertical-align: baseline;
}
.grade-marker.g1 { background: var(--vk-kraft-200); border-top: 0; }
.grade-marker.g2 { background: var(--vk-kraft-300); border-top: 0; }
.grade-marker.g3 { background: var(--vk-kraft-500); border-top: 0; }
.grade-marker.g4 { background: var(--vk-kraft-700); border-top: 0; }

/* Core-grade chip. kraft-500 at 3.97 is legal only because the chip text is
   bold and small; kraft-700 is used instead wherever there is any doubt. */
.chip, .flag {
  display: inline-block;
  font-family: var(--vk-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--vk-kraft-700);
  color: var(--vk-paper);
  padding: 4px 8px;
  border-radius: 2px;
}

/* ---------- Section 08: process steps ----------
   Numeric prefix in ink-500, step label in kraft, connected by a hairline
   rather than by arrows or icons. */

.steps { list-style: none; margin: 0; padding: 0; }
.step, .card.step { position: relative; }
.card .num, .step-num {
  display: block;
  font-family: var(--vk-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--vk-ink-500);
  margin-bottom: var(--vk-space-3);
}
.card .num .label, .step-num .label { color: var(--vk-kraft-700); }
.section-dark .card .num { color: var(--vk-kraft-300); }
.section-dark .card .num .label { color: var(--vk-kraft-200); }

/* The connecting line between steps in a horizontal run. The cards are
   opaque, so the rule shows only in the gaps between them. It sits on the
   number's optical line. */
.steps-row { position: relative; }
.steps-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 32px;
  height: 1px;
  background: var(--vk-rule-light);
  z-index: 0;
}
.steps-row > * { position: relative; z-index: 1; }
.section-dark .steps-row::before { background: rgba(237, 232, 222, 0.18); }

/* ---------- Section 07: specification tables ----------
   The grades page is where the sale is decided.
   Horizontal hairlines only. No vertical rules. No zebra striping. */

/* The wrapper scrolls, but only a table that is genuinely wider than the
   viewport gets a min-width. A two-column property/value table fits a phone
   unaided and must not be forced into a scroller. Multi-column grade tables
   take .table-scroll--wide. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Fade affordance on the right edge, applied by main.js only while there is
   something further to scroll to, so it never implies more table than exists.
   Without JavaScript the table still scrolls; it just loses the hint. */
.table-scroll[data-overflowing] {
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.spec-table, .data-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0;
  font-family: var(--vk-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
}

.spec-table caption, .data-table caption {
  text-align: left;
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-ink-500);
  padding-bottom: var(--vk-space-4);
}

.spec-table thead th, .data-table thead th {
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vk-ink-500);
  text-align: left;
  background: var(--vk-paper);
  border-bottom: 1px solid var(--vk-rule);
  padding: var(--vk-space-3) var(--vk-space-4) var(--vk-space-3) 0;
  vertical-align: bottom;
}
/* Numeric columns right-aligned so decimal positions stack down the column. */
.spec-table thead th + th,
.data-table thead th + th,
.spec-table td.num, .data-table td.num,
.spec-table tbody td:not(:first-child),
.data-table tbody td:not(:first-child) { text-align: right; }

.spec-table th, .spec-table td,
.data-table th, .data-table td {
  padding: var(--vk-space-3) var(--vk-space-4) var(--vk-space-3) 0;
  border-bottom: 1px solid var(--vk-rule-light);
  vertical-align: top;
}
.spec-table td:last-child, .data-table td:last-child,
.spec-table th:last-child, .data-table th:last-child { padding-right: 0; }

/* Property names left-aligned, at body weight, in the darker ink. */
.spec-table tbody th, .data-table tbody th {
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--vk-ink-900);
}
.spec-table tbody td, .data-table tbody td { color: var(--vk-ink-700); }

/* The final row carries no bottom rule. */
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td,
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }

/* Tolerances at the same size in ink-500, so the nominal reads first. */
.tol { color: var(--vk-ink-500); }

/* Method column: mono at 13px, ink-500. Keeping mono off the values makes
   the method column separable at a glance. */
.method, td.method, .spec-table .method {
  font-family: var(--vk-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--vk-ink-500);
  text-align: left;
}

/* Identifiers: lot numbers, reel numbers, certificate references. */
.identifier {
  font-family: var(--vk-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
}

/* Sticky header for any table over eight rows. */
.table-scroll--sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.section-dark .spec-table thead th,
.section-dark .data-table thead th {
  background: var(--vk-ink-900);
  color: var(--vk-kraft-300);
  border-bottom-color: var(--vk-ink-500);
}
.section-dark .spec-table tbody th,
.section-dark .data-table tbody th { color: var(--vk-surface-2); }
.section-dark .spec-table tbody td,
.section-dark .data-table tbody td { color: var(--vk-surface-2); }
.section-dark .spec-table th, .section-dark .spec-table td,
.section-dark .data-table th, .section-dark .data-table td {
  border-bottom-color: rgba(237, 232, 222, 0.18);
}
.section-dark .method, .section-dark .tol { color: var(--vk-kraft-300); }

/* ---------- feature list ---------- */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: var(--vk-space-5);
  margin-bottom: var(--vk-space-3);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--vk-kraft-500);
}
.section-dark .ticks li::before { background: var(--vk-kraft-300); }

/* ---------- typical applications ---------- */

.applications {
  margin-top: var(--vk-space-5);
  padding-top: var(--vk-space-4);
  border-top: 1px solid var(--vk-rule-light);
  max-width: 80ch;
}
.applications h4 {
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-ink-500);
  margin: 0 0 var(--vk-space-3);
}
.applications ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vk-space-2) var(--vk-space-5);
  font-family: var(--vk-sans);
  font-weight: 400;
  font-size: 15px;
}
.applications li { color: var(--vk-ink-700); }

/* ---------- callout strip ---------- */

.strip {
  background: var(--vk-ink-900);
  color: var(--vk-surface-2);
  padding-block: var(--vk-space-7);
}
.strip .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vk-space-5);
}
.strip h2 { margin: 0; color: var(--vk-surface-2); max-width: 24ch; }
.strip p { color: var(--vk-surface-2); margin: var(--vk-space-2) 0 0; }
.strip a { color: var(--vk-teal-300); }

/* ---------- Section 08: forms ----------
   The quote form is a commercial instrument. */

.form-card {
  background: var(--vk-surface-2);
  border-radius: var(--vk-radius-card);
  padding: var(--vk-space-6);
}
.field { margin-bottom: var(--vk-space-5); }
.field label {
  display: block;
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vk-ink-900);
  margin-bottom: var(--vk-space-2);
}
.field label .req { color: var(--vk-kraft-700); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--vk-space-3) var(--vk-space-4);
  font-family: var(--vk-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--vk-ink-900);
  background: var(--vk-paper);
  border: 1px solid var(--vk-rule);
  border-radius: var(--vk-radius-control);
}
.field input::placeholder, .field textarea::placeholder { color: var(--vk-ink-500); }
.field textarea { min-height: 130px; resize: vertical; padding-top: var(--vk-space-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vk-space-5); }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: 15px; color: var(--vk-ink-500); }

/* ---------- contact blocks ---------- */

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  padding: var(--vk-space-4) 0;
  border-bottom: 1px solid rgba(237, 232, 222, 0.18);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list span {
  display: block;
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-kraft-300);
  margin-bottom: var(--vk-space-1);
}
.contact-list a, .contact-list strong {
  color: var(--vk-surface-2);
  font-family: var(--vk-sans);
  font-weight: 500;
  text-decoration: none;
}
.contact-list a:hover { color: var(--vk-teal-300); }

/* ---------- Section 09: figures and captions ----------
   Captions state what the image shows rather than what it means. */

.figure { margin: 0; }
.figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  border-radius: var(--vk-radius-card);
}
.figure figcaption, .caption {
  font-family: var(--vk-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vk-ink-500);
  padding-top: var(--vk-space-3);
}
.section-dark .figure figcaption, .section-dark .caption { color: var(--vk-kraft-300); }
.figure--tall img { aspect-ratio: 4 / 5; }
.figure--square img { aspect-ratio: 1 / 1; }

/* Full-bleed image band. Flat wash, no gradient. */
.band {
  height: clamp(200px, 30vw, 380px);
  background-size: cover;
  background-position: center 55%;
  position: relative;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vk-ink-900);
  opacity: 0.55;
}
.band-label {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  padding: var(--vk-pad);
  max-width: 42ch;
  color: var(--vk-surface-2);
}
.band-label p {
  margin: 0;
  font-family: var(--vk-sans);
  font-weight: 600;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--vk-surface-2);
}

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

.site-footer {
  background: var(--vk-ink-900);
  color: var(--vk-surface-2);
  padding-block: var(--vk-space-7) var(--vk-space-5);
  font-size: 16px;
}
.site-footer .brand { margin-bottom: var(--vk-space-4); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--vk-space-7);
  padding-bottom: var(--vk-space-6);
  border-bottom: 1px solid rgba(237, 232, 222, 0.18);
}
.site-footer p { color: var(--vk-surface-2); }
.site-footer h4 {
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-kraft-300);
  margin-bottom: var(--vk-space-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li {
  margin-bottom: var(--vk-space-3);
  font-family: var(--vk-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--vk-surface-2);
  /* The sales address is one unbreakable 150px string. On a narrow phone it
     is the only thing here that can overrun its column. */
  overflow-wrap: break-word;
}
.site-footer a { color: var(--vk-surface-2); text-decoration: none; }
.site-footer a:hover { color: var(--vk-teal-300); text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--vk-space-4);
  padding-top: var(--vk-space-5);
  font-family: var(--vk-sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--vk-ink-500);
}

/* ---------- Section 09: photography hooks ----------
   The images themselves are chosen elsewhere. This file only supplies the
   flat ink-900 wash that keeps type legible over them. Section 03 forbids
   gradients, so these are multiply blends at fixed opacity, not scrims. */

.hero--photo::before { background-image: url("/assets/img/andes-valley.jpg"); }
.page-head--kraft::before  { background-image: url("/assets/img/kraft-texture.jpg"); }
.page-head--reels::before  { background-image: url("/assets/img/kraft-reels-warehouse.jpg"); }
.page-head--port::before   { background-image: url("/assets/img/containers-port.jpg"); }
.page-head--valley::before { background-image: url("/assets/img/sugarcane-valley.jpg"); }
.page-head--andes::before  { background-image: url("/assets/img/andes-valley.jpg"); }
.band--bales { background-image: url("/assets/img/recovered-fibre-bales.jpg"); }

/* ---------- utilities ---------- */

.muted { color: var(--vk-ink-500); }
.mono-note { font-family: var(--vk-mono); font-size: 13px; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Section 06: breakpoints ----------
   768 to 1279: fluid, 48px padding. Below 768: fluid, 20px padding.
   Below 480: the stat row goes one to a line. */

@media (max-width: 1279px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats div:nth-child(even) { border-right: 0; padding-right: 0; }
  .hero-stats div:nth-child(odd) { padding-left: 0; }
  .hero-stats div:nth-child(-n+2) { border-bottom: 1px solid rgba(237, 232, 222, 0.16); }
  .split { grid-template-columns: 1fr; gap: var(--vk-space-6); }
}

@media (max-width: 767px) {
  :root { --vk-pad: 20px; --vk-space-8: 72px; }
  body { font-size: 17px; }
  p, .lead, .hero-lede { max-width: none; }
  .lead, .hero-lede { font-size: 19px; }

  .grid-2, .grid-3, .grid-4, .field-row { grid-template-columns: 1fr; }
  .steps-row::before { display: none; }

  /* The footer tracks are plain fr, not minmax(0, 1fr) like the rest of the
     sheet, so their min-content floor holds the whole document open below
     about 560px and every section above inherits the overflow. Stack them. */
  .footer-grid { grid-template-columns: 1fr; gap: var(--vk-space-6); }

  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--vk-ink-900);
    border-bottom: 1px solid rgba(237, 232, 222, 0.16);
    padding: var(--vk-space-2) var(--vk-pad) var(--vk-space-5);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a {
    padding: var(--vk-space-4) 0;
    border-bottom: 1px solid rgba(237, 232, 222, 0.16);
  }
  .nav .btn { margin-top: var(--vk-space-4); }

  /* Stacked, the switcher's left rule and indent read as a mistake. */
  .nav .nav-lang {
    padding-left: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(237, 232, 222, 0.16);
  }

  .strip .wrap { flex-direction: column; align-items: flex-start; }

  /* Section 07, mobile. A buyer checking a specification on a phone inside a
     plant must keep the property name visible while the figures scroll,
     otherwise the figures are meaningless. Applies to wide tables only. */
  .table-scroll--wide .spec-table,
  .table-scroll--wide .data-table { min-width: 560px; }
  .table-scroll--wide tbody th {
    position: sticky;
    left: 0;
    background: var(--vk-paper);
    z-index: 1;
  }
  .table-scroll--wide thead th:first-child {
    position: sticky;
    left: 0;
    background: var(--vk-paper);
    z-index: 3;
  }
  .section-dark .table-scroll--wide tbody th,
  .section-dark .table-scroll--wide thead th:first-child { background: var(--vk-ink-900); }
  .section-alt .table-scroll--wide tbody th,
  .section-alt .table-scroll--wide thead th:first-child { background: var(--vk-surface-2); }

  /* Two-column property/value tables get a little more room instead, since
     the value column carries the longer strings. */
  .spec-table tbody th { padding-right: var(--vk-space-3); }
}

@media (max-width: 479px) {
  /* Two to a row leaves each figure about 135px of usable width, which is
     tight in English and crowded in Spanish, where the labels run longer.
     One to a row, separated by rules rather than columns. */
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats div {
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(237, 232, 222, 0.16);
  }
  .hero-stats div:last-child { border-bottom: 0; }
}

/* ---------- Section 06: motion ----------
   Almost none. A buyer checking a tensile figure does not want the number
   to animate into place. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}

/* ---------- Section 12: print ----------
   The grades page must print legibly in black and white on A4 and Letter. */

@media print {
  .site-header, .nav, .nav-toggle, .hero-actions,
  .site-footer, .band, .strip { display: none !important; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.4;
  }
  .hero, .page-head, .section-dark, .on-dark {
    background: #fff !important;
    color: #000 !important;
  }
  .hero h1, .page-head h1, .section-dark h2,
  .section-dark h3, .section-dark p,
  .hero-stats b, .hero-stats span { color: #000 !important; }
  .hero--photo::before, .page-head::before { display: none; }

  section { padding-block: 12pt; }
  .wrap { max-width: none; padding-inline: 0; }

  .spec-table, .data-table { font-size: 9.5pt; }
  .spec-table thead th, .data-table thead th {
    color: #000;
    background: #fff;
    border-bottom: 1pt solid #000;
  }
  .spec-table th, .spec-table td,
  .data-table th, .data-table td { border-bottom: 0.5pt solid #666; }
  .method, .tol { color: #333 !important; }

  /* Keep a table and its caption on one page where the paper allows. */
  table, .figure, .grade, .card { break-inside: avoid; }
  h2, h3 { break-after: avoid; }

  a { color: #000; text-decoration: underline; }
  /* Print the destination of content links, but not of nav or button links. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }

  .table-scroll { overflow: visible; mask-image: none; }
  .table-scroll .spec-table, .table-scroll .data-table { min-width: 0; }
}

/* ---------- Section 13: the grade register ----------
   Markup is generated by tools/build-grade-register.mjs from
   data/grade-standards.json. Do not edit a block between the GRADE-STANDARD
   markers: the next run overwrites it.

   Replaces the Tier 1 summary card component. The register publishes the
   qualification bar for each grade, so the unit of presentation is a table of
   requirements rather than a row of headline cards.

   Tables reuse .spec-table and .table-scroll from Section 07. Only the frame
   around them is new. Every Archivo rule sets font-weight explicitly, because
   the variable file defaults to 600. */

.grade-std {
  border-top: 4px solid var(--vk-ramp, var(--vk-kraft-500));
  padding-top: var(--vk-space-4);
  margin-bottom: var(--vk-space-7);
}
.grade-std:last-child { margin-bottom: 0; }

/* The document code is an identifier, so it takes the mono stack. It sits
   above the title because a buyer quoting a grade quotes the code. */
.grade-std__code {
  font-family: var(--vk-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--vk-ink-500);
  margin: 0 0 var(--vk-space-1);
}

.grade-std__title {
  font-family: var(--vk-sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--vk-ink-900);
  margin: 0 0 var(--vk-space-3);
}

.grade-std__prose {
  font-family: var(--vk-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--vk-ink-700);
  max-width: 62ch;
  margin: 0 0 var(--vk-space-4);
}

/* Scope and applications. Label above value on a phone, label beside value
   from 640px, where there is room for a fixed measure without squeezing the
   Spanish strings, which run 15 to 25 percent longer. */
.grade-std__meta {
  margin: 0 0 var(--vk-space-5);
  padding: 0;
  border-top: 1px solid var(--vk-rule-light);
}
.grade-std__meta dt {
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vk-ink-500);
  padding-top: var(--vk-space-3);
}
.grade-std__meta dd {
  font-family: var(--vk-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--vk-ink-700);
  margin: 0 0 var(--vk-space-3);
  padding-bottom: var(--vk-space-3);
  border-bottom: 1px solid var(--vk-rule-light);
}
.grade-std__meta dd:last-child { margin-bottom: 0; }

@media (min-width: 640px) {
  .grade-std__meta {
    display: grid;
    grid-template-columns: 14rem 1fr;
    column-gap: var(--vk-space-4);
  }
  .grade-std__meta dt {
    padding-bottom: var(--vk-space-3);
    border-bottom: 1px solid var(--vk-rule-light);
    margin-bottom: 0;
  }
  .grade-std__meta dd { padding-top: var(--vk-space-3); margin-bottom: 0; }
}

/* The bar. Tabular figures so the decimal points stack down the column, and
   the darker ink so the requirement reads before the method beside it. */
.grade-std__bar {
  font-family: var(--vk-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--vk-ink-900);
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}

.grade-std__cta { margin: var(--vk-space-5) 0 0; }
.grade-std__cta a:focus-visible {
  outline: 2px solid var(--vk-pacific-800);
  outline-offset: 2px;
}

/* The legend explaining the two operators. Sits once per page above the
   register, not once per grade. */
.grade-std-legend {
  font-family: var(--vk-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--vk-ink-700);
  background: var(--vk-surface-2);
  border-left: 3px solid var(--vk-kraft-500);
  padding: var(--vk-space-4);
  margin: 0 0 var(--vk-space-6);
  max-width: 62ch;
}
.grade-std-legend b {
  font-family: var(--vk-sans);
  font-weight: 600;
  color: var(--vk-ink-900);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

@media (max-width: 639px) {
  .grade-std__title { font-size: 20px; }
  .grade-std__prose { font-size: 16px; }
}

@media print {
  .grade-std { break-inside: avoid; border-top-color: #000; }
  .grade-std__title { break-after: avoid; }
  .grade-std__cta { display: none; }
  .grade-std-legend { background: none; border-left: 1pt solid #000; }
  .grade-std__code, .grade-std__bar { color: #000; }
}