/* Hallmark · shape: Feature Stack · genre: modern-minimal · theme: Coral (dealt 1/3, seed industrial-waste-environmental-management-7f7b·7071fffd·2026-10-29·r0; accent converted to brand red) · brand: KPT (spec 2026-10-29) · redesign: full
 * draw: ad1c2a · paper: oklch(97% 0.006 55) · accent: oklch(55% 0.2 28) · display: General Sans · body: General Sans · hero: Stage (/), Settled (/about-kpt, /products, /education-a-event, /career, /contact-us) · nav: edge-aligned (swapped for the draw's search-led bar: the site has no search) · footer: colophon block · signature: the three words pressed into the board, Recycling in brand red · imagery: the company's own photographs, muted daylight · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P8 H7 E8 S8 R8 V8 · weakest: H, a Stage hero sits close to the corporate split — answered by the pressed date stamp on the photo sheet and the board mast one scroll down */
/* Hallmark · waive 44c · Settled sub-page banners end near two thirds of the viewport · the photographs live in the sections below and a full-bleed banner would invent imagery the brand never supplied */
/* Hallmark · waive 79 · the gap under each Settled banner is one rhythm step above the next heading · growing the display head past the board mast would shout against the restraint the brand asked for */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- surfaces ---------- */
body { background-image: url("/assets/cotton.svg"); background-size: 360px 360px; }
.band-board { background-color: var(--color-board); background-image: url("/assets/felt.svg"); background-size: 360px 360px; color: var(--color-board-type); }
.band-board :focus-visible { outline-color: var(--color-cotton); }
.band-desk { background-color: var(--color-desk); }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: var(--z-sticky-nav); background-color: var(--color-cotton); border-bottom: 1px solid var(--color-rule); }
.site-head__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 76px; padding-block: var(--space-sm); }
.logo { display: block; flex: none; }
.logo img { height: 40px; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }
.site-nav a:not(.btn) { font-size: var(--text-sm); color: var(--color-ink-2); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); text-decoration: none; transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.site-nav a:not(.btn):hover { color: var(--color-accent-2); background-color: var(--color-paper-2); }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--color-ink); font-weight: 600; }
.site-nav a.btn { padding-inline: var(--space-lg); }

/* ---------- controls: the letterpress card ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding-inline: var(--space-lg); border: 0; border-radius: var(--radius-stock); font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.btn--ink { background-color: var(--color-board); color: var(--color-board-type); box-shadow: var(--edge-stock), var(--cast-stock); }
.btn--ink:hover { transform: translateY(-1px); background-color: var(--btn-ink-hover); }
.btn--ink:active { transform: translateY(1px); background-color: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--edge-stock); }
.btn--ghost { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule-2); }
.btn--ghost:hover { color: var(--color-accent-2); box-shadow: inset 0 0 0 1px var(--color-accent-2); }
.btn--ghost:active { transform: translateY(1px); background-color: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 1px 2px oklch(var(--deep) / 0.18); }
.textlink { color: var(--color-accent-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.textlink:hover { color: var(--color-accent); }

/* ---------- hero: the Stage ---------- */
.hero { padding-block: var(--space-3xl) var(--section-gap-s); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl) var(--gap-columns); align-items: center; }
.hero h1 { max-width: 12ch; font-size: var(--text-display); font-weight: var(--display-weight); }
.hero .lead { margin-block-start: var(--space-lg); color: var(--color-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-xl); }
.hero__sheet { position: relative; margin: 0; padding: var(--space-sm); background-color: var(--color-cotton); border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.hero__sheet img { width: 100%; border-radius: 4px; }
.datestamp { position: absolute; inset-inline-end: var(--space-lg); inset-block-end: var(--space-lg); font-family: var(--font-outlier); font-size: var(--text-xs); letter-spacing: 0.02em; color: var(--color-ink-2); background-color: var(--stamp-veil); border: 1px solid var(--color-rule-2); border-radius: 4px; padding: var(--space-xs) var(--space-sm); }
.photo img { filter: saturate(0.82) contrast(0.98) brightness(1.01); }

/* ---------- the board mast: signature ---------- */
.mast { padding-block: var(--space-3xl); }
.mast__head { font-size: var(--text-display-s); font-weight: 600; line-height: 1.08; max-width: 22ch; }
.mast__head .pressed { color: var(--color-accent); }
.mast__note { margin-block-start: var(--space-lg); max-width: 56ch; color: color-mix(in oklab, var(--color-board-type) 76%, transparent); }

/* ---------- sections ---------- */
.section { margin-block-start: var(--section-gap); }
.section h2 { font-size: var(--text-section); font-weight: 600; }
.section__lede { margin-block-start: var(--space-md); max-width: 60ch; color: var(--color-ink-2); }

/* one-stop sheet */
.sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; margin-block-start: var(--space-xl); padding: var(--space-2xl); background-color: var(--color-cotton); border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock); }
.sheet h2 { font-size: var(--text-section); }
.sheet p { margin-block-start: var(--space-md); color: var(--color-ink-2); }
.sheet img { width: 100%; border-radius: 4px; }

/* guides */
.guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); margin-block-start: var(--space-xl); }
.guide { display: flex; flex-direction: column; background-color: var(--color-cotton); border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock); overflow: hidden; }
.guide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.guide__body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); flex: 1; }
.guide h3 { font-size: var(--text-title); font-weight: 600; }
.guide p { color: var(--color-ink-2); flex: 1; }
.guide a { align-self: flex-start; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; white-space: nowrap; }
.guide a:hover { color: var(--color-accent); }

/* ledger: the companies we keep */
.ledger { margin-block-start: var(--space-xl); border-block-start: 1px solid var(--color-rule); }
.ledger__row { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: var(--space-2xl); align-items: center; padding-block: var(--space-lg); border-block-end: 1px solid var(--color-rule); }
.ledger__row img { width: 132px; height: 84px; object-fit: cover; border-radius: 4px; }
.ledger__row h3 { font-size: var(--text-title); font-weight: 600; }
.ledger__row .reg { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); }

/* page hero: Settled */
.page-hero { min-height: 56svh; display: grid; align-content: center; padding-block: var(--space-3xl) var(--space-xl); }
.page-hero h1 { font-size: var(--text-display-s); font-weight: var(--display-weight); }
.page-hero .lead { margin-block-start: var(--space-md); color: var(--color-ink-2); }

/* about plates */
.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-2xl); }
.plate { padding: var(--space-xl); background-color: var(--color-cotton); border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock); }
.plate h3 { font-size: var(--text-title); font-weight: 600; }
.plate p { margin-block-start: var(--space-sm); color: var(--color-ink-2); }
.pull { margin-block-start: var(--space-xl); padding: var(--space-xl) var(--space-2xl); background-color: var(--color-paper-2); border-inline-start: var(--rule-bar) solid var(--color-accent); font-size: var(--text-xl); font-weight: 600; line-height: 1.3; }

/* product entries */
.entry { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--space-xl); align-items: center; padding-block: var(--space-xl); border-block-end: 1px solid var(--color-rule); scroll-margin-block-start: var(--space-3xl); }
.entry figure { margin: 0; }
.entry img { width: 100%; border-radius: 4px; }
.entry h3 { font-size: var(--text-title); font-weight: 600; }
.entry .reg { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); }
.entry p { margin-block-start: var(--space-sm); color: var(--color-ink-2); }

/* education blocks */
#mission-vision { margin-block-start: var(--section-gap-l); }
.guide-doc { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; padding-block: var(--section-gap); border-block-end: 1px solid var(--color-rule); scroll-margin-block-start: var(--space-3xl); }
.guide-doc h2 { font-size: var(--text-section); }
.guide-doc p { margin-block-start: var(--space-sm); color: var(--color-ink-2); }
.guide-doc figure { margin: 0; }
.guide-doc figure img { width: 100%; border-radius: 4px; }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-2xl); margin-block-start: var(--space-xl); }
.contact-card { padding: var(--space-xl); background-color: var(--color-cotton); border-radius: var(--radius-card); box-shadow: var(--edge-stock), var(--cast-stock); }
.contact-card h3 { font-size: var(--text-title); font-weight: 600; }
.contact-card dl { display: grid; gap: var(--space-md); margin-block-start: var(--space-md); }
.contact-card dt { font-size: var(--text-sm); color: var(--color-muted); }
.contact-card dd { margin: 0; font-size: var(--text-md); line-height: 1.6; }

/* footer colophon */
.site-foot { margin-block-start: var(--space-hero); padding-block: var(--space-3xl) var(--space-xl); }
.site-foot .logo img { height: 56px; }
.site-foot__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-2xl); }
.site-foot address { font-style: normal; color: color-mix(in oklab, var(--color-board-type) 78%, transparent); line-height: 1.7; }
.site-foot nav { display: grid; gap: var(--space-xs); align-content: start; }
.site-foot nav a { color: var(--color-board-type); text-decoration: none; justify-self: start; }
.site-foot nav a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.18em; }
.fine { margin-block-start: var(--space-2xl); color: color-mix(in oklab, var(--color-board-type) 62%, transparent); font-size: var(--text-xs); }
.colophon-label { font-size: var(--text-sm); color: color-mix(in oklab, var(--color-board-type) 72%, transparent); margin-block-end: var(--space-md); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .hero { padding-block: var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .guide-doc { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .sheet, .entry { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .site-foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .ledger__row { grid-template-columns: 96px minmax(0, 1fr); }
  .ledger__row img { width: 96px; height: 64px; }
  .ledger__row .reg { grid-column: 2; }
}
@media (max-width: 40rem) {
  .site-head__row { flex-direction: column; align-items: stretch; gap: var(--space-xs); padding-block: var(--space-sm); }
  .site-nav { justify-content: flex-start; }
  .mast { padding-block: var(--space-2xl); }
  .sheet { padding: var(--space-lg); }
  .plate, .contact-card { padding: var(--space-lg); }
}