/* Page layout for the Bergmen landing page.
   Every colour, font, radius and shadow comes from modernist.css. This sheet
   adds only the page's own rhythm and the three-line brand override.

   THE RHYTHM: a 28px leading unit with a 14px half-step. Line-heights and block
   margins are multiples of these. Display headings sit deliberately outside the
   grid at a ~1.06 ratio, because Archivo 800 is tight and all-cap-height. */

:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;

  /* Brand override — the orange sampled from the Bergmen logo mark. Kept here
     rather than in modernist.css so the system sheet stays untouched. The 600
     and 700 steps preserve the original ramp's lightness ratios at the new hue. */
  --color-accent: #f26536;
  --color-accent-600: #f15521;
  --color-accent-700: #be390c;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }

/* — skip link: visible only once focused — */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; padding: var(--space-2) var(--space-3); text-decoration: none;
}
.skip-link:focus { left: 0; }

/* — masthead: contents sit on the 1200px text axis while the rule stays full-bleed — */
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
/* 'location', not 'page': these are in-page anchors. Set by nav.js against the
   section actually in view; without JavaScript no link is marked, which is honest. */
.nav a[aria-current='location'] { color: var(--color-accent); }
.nav-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.nav-brand img { height: 46px; width: auto; display: block; }
/* Phone width: keep the brand and the one action. The full link row's min-content
   crosses narrow-phone widths. A real disclosure menu is outstanding design work. */
/* Direct children only: the brand's home link is nested inside .nav-brand and
   must survive. */
@media (max-width: 480px) { .nav > a:not(.btn) { display: none; } }

/* — drawn structure: the 2px rule is the section seam, solid, never faded — */
.rule2 { height: 2px; border: 0; margin: 0; background: var(--color-divider); }

/* — kicker: uppercase, tabular, accent — */
.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  /* Accent-coloured small text takes the deep step: 6.4:1, where the base accent
     measures 3.8:1 — a large-text value only. */
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — hero — */
.hero { padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 6.2vw, 84px);
  line-height: clamp(44.5px, 6.57vw, 89px);
  letter-spacing: -0.02em; margin: 0;
  margin-left: -0.058em; /* optical left alignment, measured for Archivo 800 */
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; } /* display headers break per sentence */
.hero .sub,
.error .sub {
  font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic;
}
/* Second and later paragraphs sit one leading unit below the previous one,
   not the full display gap the first paragraph takes. */
.hero .sub + .sub,
.error .sub + .sub { margin-top: var(--leading); }
.hero .row,
.error .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* — feature rows: ruled seams, accent squares hanging at the numbers — */
.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.features + .features { padding-top: 0; }
.feature {
  display: grid;
  grid-template-columns: minmax(64px, 120px) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.5 * var(--leading)) 0;
}
.feature + .feature { border-top: 2px solid var(--color-divider); }
/* First child of its own section, so the sibling selector above cannot fire. */
.feature-first { border-top: 2px solid var(--color-divider); }
.f-num {
  position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: var(--leading); color: var(--color-text);
  font-feature-settings: "tnum" 1; margin: 0; text-box: trim-both cap alphabetic;
}
/* The 10px accent square hanging left of the number's axis. A Modernist
   signature: its marks are squares, never dashes. */
.f-num::before {
  content: ""; position: absolute; left: -24px; top: calc(0.5cap - 5px);
  width: 10px; height: 10px; background: var(--color-accent);
}
@media (max-width: 1280px) { .f-num::before { display: none; } }
.f-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: 0; text-box: trim-both cap alphabetic;
}
.f-copy { max-width: 52ch; }
.f-copy p {
  font-size: 15.5px; line-height: 1.6; margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-box: trim-both cap alphabetic;
}
.f-copy p + p { margin-top: var(--leading); }

/* — the close banner: the accent's one field moment, type reversed to paper.
   Deepened from accent-600 to accent-700 so the supporting sentence clears the
   4.5:1 body-copy bar: paper on this field now measures ~5:1 (it was ~3.3:1). — */
.close { background: var(--color-accent-700); color: var(--color-bg); }
.close .wrap { padding-top: calc(3 * var(--leading)); padding-bottom: calc(3 * var(--leading)); }
.close h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.2vw, 56px); line-height: clamp(36px, 4.45vw, 59.4px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em;
  text-box: trim-both cap alphabetic;
}
.close h3 .line { display: block; }
.close-copy {
  font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: var(--leading) 0 0; text-box: trim-both cap alphabetic;
}
.close .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); }
.close .btn-ghost { color: var(--color-bg); border-color: var(--color-bg); padding-inline: var(--space-3); }
.close .btn-ghost:hover { background: color-mix(in srgb, var(--color-bg) 14%, transparent); }
.close .btn-ghost:active { background: color-mix(in srgb, var(--color-bg) 22%, transparent); }
/* The default focus ring is accent-on-accent here, which all but disappears. */
.close a:focus-visible { outline-color: var(--color-bg); }

/* — footer — */
footer {
  padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
footer a { color: inherit; text-decoration: underline; }
footer a:hover { color: var(--color-accent-700); }
.footer-legal { margin: 0; max-width: var(--measure); }
/* Statutory disclosures run as separate paragraphs; a half-step keeps them
   distinct without breaking the 28px rhythm. */
.footer-legal + .footer-legal { margin-top: var(--half); }

/* — legal pages — */
.legal { padding: calc(2 * var(--leading)) 0 calc(4 * var(--leading)); }
.legal-meta {
  font-size: 13px; line-height: var(--leading); margin: var(--leading) 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
/* Section headings step down from the display h1 but stay on the 28px grid. */
.legal h2 {
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: calc(2 * var(--leading)) 0 0;
}
.legal h3 { font-size: 17px; line-height: var(--leading); margin: var(--leading) 0 0; }
.legal p, .legal ul { font-size: 15.5px; line-height: 1.6; max-width: var(--measure); margin: var(--half) 0 0; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: var(--space-1); }
/* The base accent measures 3.8:1 — a large-text value. Body-copy links take the
   deep step, as the kicker does. */
.legal a { color: var(--color-accent-700); }

/* Unresolved copy, deliberately loud. Nothing wearing this may reach production. */
.todo { background: var(--color-accent-700); color: var(--color-bg); padding: 0 var(--space-1); font-weight: 800; }

/* The processor table is the one wide element here; it scrolls in its own box
   rather than pushing the page sideways on a phone. */
.table-scroll { overflow-x: auto; margin-top: var(--leading); }
.legal-table { border-collapse: collapse; font-size: 14px; line-height: var(--leading); min-width: 480px; }
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top;
  padding: var(--space-2) var(--space-6) var(--space-2) 0;
  border-bottom: 2px solid var(--color-divider);
}
.legal-table th { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

/* — error page — */
.error { padding: calc(4 * var(--leading)) 0 calc(5 * var(--leading)); }

/* — responsive collapse — */
/* The feature grid's fixed-max columns crush the copy column in the tablet
   band, so it collapses earlier than the page does. */
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; gap: var(--half); }
  .f-copy { max-width: var(--measure); }
  .f-spacer { display: none; }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2.5 * var(--leading)); }
}