/* CARTONNAGE — a kraft-toned design for a packaging range.
   Distinct from both the dark machining families and the pale garden one: a mid-tone kraft ground,
   heavy sans headings with tight tracking, and rules used as structure rather than as dividers. */

:root {
  color-scheme: light;
  --kraft: #d9c4a3;
  --kraft-2: #cdb392;
  --sheet: #f3ead9;
  --ink: #2a2118;
  --ink-2: #5d4d3c;
  --ink-3: #8a7660;
  --rule: #b39c7c;
  --accent: #b4551f;
  --accent-ink: #fdf6ea;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --shell: 1180px;
}

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

body {
  margin: 0;
  background: var(--kraft);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.shell { width: min(100% - 2.2rem, var(--shell)); margin-inline: auto; }

/* ---------------------------------------------------------------- masthead */

/* The shared motion layer makes the sticky header take the body's background so that content
   scrolling beneath it is hidden. This masthead is therefore designed as part of the body surface
   rather than as a dark bar: the same colours apply whether or not the script runs. */
.masthead { background: var(--kraft); color: var(--ink); border-bottom: 3px solid var(--ink); }
.masthead-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; padding: 1rem 0; }
.brand { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; }
.brand strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); }
.brand span { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.15rem; margin-inline-start: auto; }
.site-nav a { color: var(--ink-2); font-size: 0.86rem; font-weight: 700; padding: 0.25rem 0; border-bottom: 3px solid transparent; }
.site-nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------- headings */

h1, h2, h3 { font-weight: 800; line-height: 1.08; margin: 0 0 0.6rem; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem); text-transform: uppercase; }
h2 { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; color: var(--ink-2); }
p.lead { font-size: 1.1rem; color: var(--ink); max-width: 60ch; }

.eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 0.7rem; }

.breadcrumb { font-size: 0.8rem; color: var(--ink-3); margin: 0 0 1.1rem; font-weight: 600; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin-inline: 0.4rem; }

/* ---------------------------------------------------------------- sections */

.section { padding: clamp(2.2rem, 1.3rem + 3vw, 3.8rem) 0; }
.section + .section { border-top: 2px solid var(--rule); }
.section-head { max-width: 64ch; margin-bottom: 1.6rem; }
.section-head.spaced { margin-top: 2.2rem; }

.hero { padding: clamp(2.4rem, 1.4rem + 4vw, 4.4rem) 0 clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.hero-grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 920px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: center; } }

.hero-figure { margin: 0; background: var(--sheet); border: 2px solid var(--ink); }
.hero-figure img { width: 100%; }
.hero-figure figcaption { font-size: 0.78rem; color: var(--ink-3); padding: 0.6rem 0.9rem; border-top: 2px solid var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- grids */

.grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.card { background: var(--sheet); border: 2px solid var(--ink); padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.45rem; }
.card h3 { margin: 0; }
.card p { margin: 0; font-size: 0.94rem; }
.card .tag { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.card a.more { font-size: 0.88rem; font-weight: 700; margin-top: auto; }

.product-card { background: var(--sheet); border: 2px solid var(--ink); display: flex; flex-direction: column; }
.product-card img { border-bottom: 2px solid var(--ink); }
.product-card .body { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; }
.product-card h3 { margin: 0; }
.product-card .body p { margin: 0; font-size: 0.93rem; }
.product-card .body a.more { margin-top: 0.45rem; font-size: 0.88rem; font-weight: 700; }

/* ---------------------------------------------------------------- data */

.spec-list { margin: 0 0 1.3rem; border-top: 2px solid var(--ink); }
.spec-list > div { padding: 0.75rem 0; border-bottom: 2px solid var(--rule); display: grid; gap: 0.2rem 1.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .spec-list > div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); } }
.spec-list dt { font-weight: 800; font-size: 0.95rem; color: var(--ink); margin: 0; text-transform: uppercase; letter-spacing: 0.02em; }
.spec-list dd { margin: 0; color: var(--ink-2); font-size: 0.95rem; }

.table-scroll { overflow-x: auto; margin: 0 0 1.3rem; border: 2px solid var(--ink); background: var(--sheet); }
table { border-collapse: collapse; width: 100%; min-width: 32rem; }
caption { text-align: left; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; padding: 0.7rem 0.9rem; border-bottom: 2px solid var(--ink); }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule); font-size: 0.93rem; }
thead th { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }
tbody th { color: var(--ink); font-weight: 700; }
tbody td { color: var(--ink-2); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- notes */

details { background: var(--sheet); border: 2px solid var(--ink); padding: 0.9rem 1.1rem; margin: 0 0 0.75rem; }
summary { cursor: pointer; font-weight: 800; font-size: 0.98rem; color: var(--ink); }
summary::marker { color: var(--accent); }
details p { margin: 0.65rem 0 0; font-size: 0.94rem; }

.note { font-size: 0.88rem; color: var(--ink-2); background: var(--kraft-2); border-left: 5px solid var(--accent); padding: 0.7rem 1rem; margin: 0 0 1.3rem; font-weight: 600; }

.demo-band { background: var(--ink); color: var(--sheet); padding: 0.75rem 1.1rem; font-size: 0.86rem; font-weight: 600; margin: 0 0 1.4rem; }
.demo-band strong { color: var(--kraft); letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- links */

.link-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }
.link-row a { font-size: 0.92rem; font-weight: 700; border: 2px solid var(--ink); padding: 0.6rem 1.1rem; color: var(--ink); background: var(--sheet); text-transform: uppercase; letter-spacing: 0.03em; }
.link-row a:hover { background: var(--ink); color: var(--sheet); text-decoration: none; }
.link-row a.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.link-row a.primary:hover { background: #943f14; border-color: #943f14; color: var(--accent-ink); }

.next-links { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); margin-top: 1.3rem; }
.next-links a { background: var(--sheet); border: 2px solid var(--ink); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.next-links a span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.next-links a b { font-weight: 800; font-size: 1rem; color: var(--ink); letter-spacing: -0.01em; }
.next-links a:hover { background: var(--ink); text-decoration: none; }
.next-links a:hover b { color: var(--sheet); }

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

.site-foot { border-top: 2px solid var(--ink); background: var(--kraft-2); margin-top: 2.2rem; padding: 1.8rem 0 2.8rem; }
.site-foot p { font-size: 0.86rem; color: var(--ink-2); }
.site-foot .links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin-bottom: 0.9rem; }
.site-foot .links a { font-size: 0.86rem; color: var(--ink); font-weight: 700; }

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

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 0.7rem 1.1rem; z-index: 40; font-weight: 700; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
main:focus { outline: none; }