/* Hallmark · shape: Statement · genre: editorial · theme: Formwork (deal 1/3, seed waste-recycling-environmental-management-3e63·6a0bd75b·2026-10-29·r0) · job: contact
 * hero: Poster · nav: edge-aligned · footer: mast · imagery: the company's own photographs, hard black and white · signature: reducing, reusing, recycling cast huge on the ink band · formwork: cast
 * axes: mid/display-condensed/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P8 the archive gave us text, not new photography, so the company's own images carry the page in black and white. E58 guide copy trimmed to one line per card, full text lives on the education sheet. S3 the 2008 founding year is the only number we own. R4 no motion beyond the control press. V4 foreman voice kept from the original copy. · weakest: E58, guides restated in full only once, on their own sheet */
@import url("./tokens.css");
@import url("./base.css");

/* grain: the pour */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  pointer-events: none;
  opacity: var(--texture-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 720px) { .container { --gutter: var(--space-lg); } }

/* nav */
.site-head {
  border-block-start: var(--rule-bar) solid var(--color-ink);
  border-block-end: var(--rule-hair) solid var(--color-paper-3);
  background: var(--color-paper);
}
.site-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  text-decoration: none;
  color: var(--color-ink);
}
.wordmark em { font-style: normal; color: var(--color-accent-deep); }
.site-nav { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.site-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; color: var(--color-accent-deep); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
.site-nav .btn { margin-inline-start: var(--space-xs); }

/* buttons */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: var(--space-sm) var(--space-xl);
  border: 2px solid var(--color-ink);
}
.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: 0 3px 0 var(--color-accent-deep);
  transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.btn--primary:active { translate: 0 3px; box-shadow: 0 0 0 var(--color-accent-deep); }
.btn--secondary {
  background: var(--color-paper-2);
  color: var(--color-ink);
  box-shadow: inset 0 2px 3px color-mix(in oklab, var(--color-ink) 30%, transparent);
}

/* hero */
.hero { padding-block: var(--space-3xl) var(--space-2xl); }
.hero__kicker { display: none; }
.hero h1 { font-size: clamp(3.25rem, 8.5vw + 0.5rem, 8.25rem); line-height: 0.98; max-width: 12ch; }
.hero .lead { margin-block-start: var(--space-lg); color: var(--color-ink-2); }
.hero__actions { display: flex; gap: var(--space-md); margin-block-start: var(--space-xl); flex-wrap: wrap; }

/* ink statement band */
.statement {
  background: var(--color-ink);
  color: var(--color-plate-ink);
  padding-block: var(--space-2xl);
}
.statement p {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 7vw, 6.5rem);
  line-height: 1.0;
  letter-spacing: var(--tracking-display);
}
.statement p span { color: var(--color-accent); }
.statement .caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: none;
  margin-block-start: var(--space-lg);
  color: var(--color-plate-ink);
}

/* sections */
.section { padding-block: var(--section-gap); }
.section--tight { padding-block: var(--section-gap-s); }
.section__bar { border-block-start: var(--rule-bar) solid var(--color-ink); padding-block-start: var(--space-lg); }
.section h2 { margin-block-end: var(--space-xl); }

/* about split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap-columns);
  align-items: start;
}
.split p { color: var(--color-ink-2); max-width: 60ch; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* photo treatment: hard black and white, square ink frame */
.photo { outline: 2px solid var(--color-ink); outline-offset: -2px; background: var(--color-plate); }
.photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.15) brightness(1.03);
}

/* guide cards */
.guides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-columns);
}
@media (max-width: 860px) { .guides { grid-template-columns: minmax(0, 1fr); } }
.guide {
  background: var(--color-plate);
  border: var(--rule-bar) solid var(--color-ink);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.guide img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(1.03); }
.guide__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.guide h3 { font-size: var(--text-title); }
.guide p { color: var(--color-ink-2); font-size: var(--text-sm); }
.guide a { margin-block-start: auto; color: var(--color-accent-deep); font-weight: 500; font-size: var(--text-sm); }
@media (max-width: 560px) { .guide { grid-template-columns: minmax(0, 1fr); } }

/* company rows */
.companies { display: grid; gap: 0; }
.company {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: var(--gap-columns);
  align-items: center;
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-paper-3);
}
.company:first-child { border-block-start: var(--rule-hair) solid var(--color-paper-3); }
.company .reg { font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-muted); font-size: var(--text-sm); }
.company h3 { font-size: var(--text-title); }
.company .photo { max-width: 220px; }
@media (max-width: 860px) { .company { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .company .photo { max-width: 100%; } }

/* mission plates */
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
@media (max-width: 860px) { .plates { grid-template-columns: minmax(0, 1fr); } }
.plate {
  background: var(--color-plate);
  border: var(--rule-bar) solid var(--color-ink);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
}
.plate h2 { margin-block-end: var(--space-md); font-size: var(--text-title); max-width: 40ch; line-height: 1.2; }
.plate h3 { margin-block-end: var(--space-md); }
.plate ul { margin: 0; padding-inline-start: var(--space-lg); color: var(--color-ink-2); display: grid; gap: var(--space-sm); }

/* contact sheet */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-columns);
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-grid h2 { font-size: var(--text-title); line-height: 1.2; max-width: 40ch; }
.contact-grid dl { display: grid; gap: var(--space-xs); }
.contact-grid dt { font-weight: 500; font-size: var(--text-sm); }
.contact-grid dd { margin: 0 0 var(--space-md) 0; }
.contact-grid a { color: var(--color-accent-deep); }
address { font-style: normal; line-height: 1.6; }

/* footer mast */
.site-foot {
  background: var(--color-ink);
  color: var(--color-plate-ink);
  padding-block: var(--space-2xl) var(--space-xl);
  margin-block-start: var(--section-gap);
}
.site-foot .wordmark { color: var(--color-plate-ink); display: inline-block; }
.site-foot__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap-columns);
  align-items: start;
}
.site-foot nav { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.site-foot a { color: var(--color-plate-ink); font-size: var(--text-sm); text-decoration: none; }
.site-foot a:hover { color: var(--color-accent); text-decoration: underline; }
.site-foot .fine { margin-block-start: var(--space-xl); color: var(--color-paper-3); font-size: var(--text-xs); }
@media (max-width: 860px) { .site-foot__row { grid-template-columns: minmax(0, 1fr); } }

/* sub-page hero */
.page-hero { padding-block: var(--space-2xl) var(--space-xl); }
.page-hero h1 { font-size: var(--text-display); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn--primary, .btn--primary:active { transition: none; translate: none; }
}