/* fjellsten.com — page layout on the Industry design system.
   Every color, font, radius and shadow is a token from styles.css; this file
   carries only the page's layout, scale and rhythm, re-derived from the
   system's landing template: a 24px leading unit (16px Barlow at 1.5) with a
   12px half-step, heads cap-trimmed, the steel accent as the single color,
   drawn structure (hairline rules and framed plates) instead of filled
   boxes, and photographs duotoned like screen prints. The design system's
   "+" registration marks are retired on this page: the frames stand alone.

   Type and the leading unit are in rem, so a visitor's text-size preference
   scales the page; drawn geometry (gutters, hairlines) stays in px. */
:root {
  --leading: 1.5rem;   /* 24px at the default root size */
  --half: 0.75rem;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 60ch;
  --ink-55: color-mix(in srgb, var(--color-text) 55%, transparent); /* furniture — a large-text value (3.6:1) */
  --ink-70: color-mix(in srgb, var(--color-text) 70%, transparent); /* small text — 5.8:1 on the paper ground */
  --ink-78: color-mix(in srgb, var(--color-text) 78%, transparent); /* secondary body copy */
  --rule-faint: color-mix(in srgb, var(--color-text) 8%, transparent);

  /* Semantic roles the page adds on top of the token sheet. Accent-colored
     text takes the deep ramp step: the base steel (#5980a6) measures 3.7:1
     on paper, a large-text value; the 700 step measures 5.8:1 and reads as
     the same steel at small sizes. The dark theme below remaps only these
     and the four base roles. */
  --accent-text: var(--color-accent-700);
  --accent-text-hover: var(--color-accent-800);
  --fill-primary: var(--color-accent-700);
  --fill-primary-hover: var(--color-accent-800);
  --fill-primary-active: var(--color-accent-900);
  --on-primary: var(--color-bg);
  --edge-control: var(--color-neutral-600);       /* 3.8:1 — the divider's 16% ink is below the 3:1 a control boundary needs */
  --edge-control-hover: var(--color-neutral-800);
  --wash: var(--color-accent);                    /* the duotone print */
  --brand-ink: var(--color-brand);                /* the mountain mark */
  --color-brand: #235784;                         /* the logo's own blue — a brand commitment, not a ramp step (design/brand/) */
  color-scheme: light;
}

/* — dark theme: the system's own dark field ("steel as ground, type reversed
   to paper" — readme.md), composed as a theme rather than inverted. Steel-900
   ground, accent-800 surfaces, paper ink; the accent rises to its 400 step
   for the focus ring and brand mark (7.1:1) and to 300 for small text
   (9.6:1); the solid object flips to light steel with a steel-900 label
   (7.1:1); hairlines take a little more ink; the photograph keeps its
   steel print. Measured pairs are listed in docs/audit.md. — */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg: var(--color-accent-900);
    --color-surface: var(--color-accent-800);
    --color-text: var(--color-neutral-100);
    --color-accent: var(--color-accent-400);
    --color-divider: color-mix(in srgb, var(--color-text) 22%, transparent);
    --accent-text: var(--color-accent-300);
    --accent-text-hover: var(--color-accent-200);
    --fill-primary: var(--color-accent-400);
    --fill-primary-hover: var(--color-accent-300);
    --fill-primary-active: var(--color-accent-200);
    --on-primary: var(--color-accent-900);
    --edge-control: color-mix(in srgb, var(--color-text) 45%, transparent);  /* 3.9:1 on the ground, 3.2:1 on the input fill */
    --edge-control-hover: color-mix(in srgb, var(--color-text) 70%, transparent);
    --wash: var(--color-accent-600);
    --brand-ink: var(--color-text);                /* the mark reverses to paper with the type */
  }
}
.duotone::after { background: var(--wash); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100dvh; display: flex; flex-direction: column; font-size: 1rem; line-height: var(--leading); text-wrap: pretty; }
main { flex: 1 0 auto; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }

a { color: var(--accent-text); }
a:hover { color: var(--accent-text-hover); }
.skip { position: absolute; top: var(--half); left: var(--edge); z-index: 10; padding: var(--space-2) var(--space-3); background: var(--color-bg); border: 1px solid var(--color-divider); transform: translateY(calc(-100% - 2 * var(--half))); }
.skip:focus-visible { transform: none; }

/* — buttons at landing scale — one control height floor on every control
   (44px on touch screens, below). The solid primary is the one filled object
   on the board. — */
.btn { min-height: 2.5rem; padding-inline: var(--space-6); font-size: 0.9375rem; }
.btn-primary { background: var(--fill-primary); border-color: var(--fill-primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--fill-primary-hover); border-color: var(--fill-primary-hover); color: var(--on-primary); }
.btn-primary:active { background: var(--fill-primary-active); border-color: var(--fill-primary-active); color: var(--on-primary); }
.btn-ghost { color: var(--accent-text); }
.btn-ghost:hover { color: var(--accent-text-hover); }
.btn-ghost:active { color: var(--accent-text-hover); }

/* — masthead: the component demo pads itself; on the page the contents take
   the gutter and sit on the wrap's text axis — */
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); padding-block: var(--half); gap: var(--space-6); }
.nav-brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.nav a.nav-brand { font-size: 1.125rem; text-decoration: none; min-height: 0; padding: 0; } /* the brand as a link on inner pages keeps the brand's own size */
.brand-mark { width: 50px; height: 24px; color: var(--brand-ink); flex: none; display: block; }
.nav a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 2.5rem; }
.nav a:not(.btn) { padding: 0 var(--space-1); }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current='location'] { color: var(--accent-text); }
.nav a.btn-primary, .nav a.btn-primary:hover { color: var(--on-primary); } /* .nav a's inherited ink would otherwise beat the component's reversed label */

/* — hero — */
.hero { padding: calc(3 * var(--leading)) 0 0; }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(3rem, 7.2vw, 6rem); line-height: 1.04; /* uppercase condensed carries no descenders to clear */
  letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 0 -0.052em; /* optical left alignment, the deck's measured Condensed 600 value */
  max-width: 14ch; text-wrap: balance; text-box: trim-both cap alphabetic;
}
.hero .sub { font-size: 1.0625rem; line-height: var(--leading); max-width: var(--measure); margin: calc(1.5 * var(--leading) - 1cap) 0 0; text-box: trim-both cap alphabetic; }
.hero .row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: calc(1.5 * var(--leading)); }

/* — the photograph: a duotone screen print inside a hairline frame
   (.blueprint owns the frame); the image cover-crops to a drawing-sheet
   ratio on wide screens and relaxes toward the photograph's own on phones.
   The crop sits a little below center to keep the horizon and the tracks. — */
.banner { margin: calc(2.5 * var(--leading)) 0 0; }
.banner img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 58%; }

/* — drawn plates (the areas sheet, the contact form): the hairline frame
   every major object in this system wears — */
.plate { position: relative; border: 1px solid var(--color-divider); }

/* — the areas sheet: an engineering title block over numbered rows — */
.sheet { padding: calc(3 * var(--leading)) 0 0; }
.title-block { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--color-divider); }
.title-block > * { margin: 0; padding: var(--half) var(--leading); font-family: var(--font-body); font-size: 0.8125rem; line-height: var(--leading); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; font-feature-settings: "tnum" 1; }
.tb-title { flex: 1; min-width: 16ch; font-size: 0.9375rem; color: var(--color-text); } /* the sheet's heading: one step above its register cells */
.tb-cell { border-left: 1px solid var(--color-divider); white-space: nowrap; color: var(--ink-70); }
.spec { table-layout: fixed; }
.spec col.c-num { width: calc(3 * var(--leading)); }
.spec col.c-area { width: 42%; }
.spec th, .spec td { padding: var(--half) var(--leading) var(--half) 0; vertical-align: middle; }
.spec th:first-child, .spec td:first-child { padding-left: var(--leading); }
.spec thead th { font-size: 0.8125rem; line-height: var(--half); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-70); }
.spec td, .spec tbody th { font-size: 1rem; line-height: var(--leading); font-weight: 400; text-align: left; }
.spec .s-num { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--accent-text); font-feature-settings: "tnum" 1; }
.spec .s-area { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 1.5rem; line-height: var(--leading); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text); }
.spec .s-rem { color: var(--ink-78); }
.spec tbody tr:last-child td, .spec tbody tr:last-child th { border-bottom: 0; }
.spec tbody tr:hover { background: none; } /* a printed sheet, not an interactive grid */

/* — contact: copy on the left, the form drawn as a sheet on the right — */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(2 * var(--leading)) clamp(24px, 5vw, 96px); align-items: start; padding: calc(3.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.kicker { display: block; font-size: 0.8125rem; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--accent-text); font-feature-settings: "tnum" 1; margin: 0 0 var(--half); }
.caption-rule { height: 1px; border: 0; margin: 0 0 calc(var(--leading) - var(--half)); background: var(--color-divider); }
.contact h2 { font-size: 2rem; line-height: calc(1.5 * var(--leading)); letter-spacing: 0.02em; text-transform: uppercase; margin: 0; text-box: trim-both cap alphabetic; }
.contact .note { font-size: 1rem; line-height: var(--leading); color: var(--ink-78); margin: calc(var(--leading) - 1cap) 0 0; max-width: 40ch; text-box: trim-both cap alphabetic; }
.contact-form { padding: var(--leading); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--leading); }
.form-grid > .full { grid-column: 1 / -1; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, .choices > legend { display: block; padding: 0; margin: 0 0 var(--space-1); font-size: 0.8125rem; line-height: var(--leading); color: var(--ink-70); }
.input { min-height: 2.5rem; border-color: var(--edge-control); }
.input:hover { border-color: var(--edge-control-hover); }
textarea.input { min-height: calc(6 * var(--leading)); }
.field.has-error .input { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }
.field-error { display: flex; align-items: center; gap: 6px; margin: var(--space-1) 0 0; font-size: 0.8125rem; line-height: var(--leading); font-weight: 500; color: var(--color-text); }
.field-error[hidden] { display: none; }
.field-error svg { flex: none; }
.choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 2.5rem; padding: 0 var(--space-4); border: 1px solid var(--edge-control); font-size: 0.875rem; cursor: pointer; user-select: none; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.choice svg { display: none; }
.choice:has(input:checked) { background: var(--fill-primary); border-color: var(--fill-primary); color: var(--on-primary); }
.choice:has(input:checked) svg { display: block; }
.choice:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* spam trap — people never see it, form-fillers do */
.actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.fine { font-size: 0.8125rem; color: var(--ink-70); }
.form-status { margin: 0; font-size: 0.9375rem; line-height: var(--leading); font-weight: 500; }
.form-status:empty { display: none; }

/* — a plain page (404, thanks) — */
.simple { padding: calc(4 * var(--leading)) 0; max-width: var(--measure); }
.simple h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 0 -0.052em; text-box: trim-both cap alphabetic; }
.simple p { margin: calc(1.5 * var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic; }
.simple .row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: calc(1.5 * var(--leading)); }

/* — footer — */
.site-footer { padding: calc(2 * var(--leading)) 0 calc(1.5 * var(--leading)); font-size: 0.8125rem; line-height: var(--leading); color: var(--ink-70); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--leading) calc(2 * var(--leading)); justify-content: space-between; }
.foot-col { display: grid; gap: 0; }
.site-footer a { color: inherit; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--accent-text); }
/* the long-form privacy page */
.prose { padding: calc(3 * var(--leading)) 0 calc(4 * var(--leading)); max-width: var(--measure); }
.prose h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; margin: 0 0 var(--leading) -0.052em; }
.prose h2 { font-size: 1.25rem; line-height: var(--leading); letter-spacing: 0.02em; text-transform: uppercase; margin: calc(2 * var(--leading)) 0 var(--half); }
.prose p, .prose li { font-size: 1rem; line-height: var(--leading); margin: 0 0 var(--half); }
.prose ul { margin: 0 0 var(--half); padding-left: 1.2em; }
.prose .meta { color: var(--ink-70); font-size: 0.8125rem; }

/* — responsive collapse — */
@media (max-width: 880px) {
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2 * var(--leading)); }
  .banner img { aspect-ratio: 3 / 2; }
  /* the sheet re-stacks: the title block drops its register cells to a
     second ruled row, and each table row becomes its own small plate —
     No. and area on the register line, the remark beneath. The ARIA table
     roles in the markup keep the table semantics the display change drops. */
  .tb-title { flex-basis: 100%; border-bottom: 1px solid var(--color-divider); }
  .title-block > .tb-cell { padding-inline: var(--half); flex: 1 0 auto; }
  .tb-title + .tb-cell { border-left: 0; padding-left: var(--leading); }
  .spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .spec, .spec tbody, .spec td, .spec th { display: block; }
  .spec tr { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--half); row-gap: var(--space-1); align-items: baseline; padding: var(--leading); border-bottom: 1px solid var(--rule-faint); }
  .spec tr:last-child { border-bottom: 0; }
  .spec th, .spec td { padding: 0; border: 0; }
  .spec th:first-child, .spec td:first-child { padding-left: 0; }
  .spec .s-num { grid-column: 1; }
  .spec .s-area { grid-column: 2; }
  .spec .s-rem { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  /* phone width: the masthead keeps brand + the one action on its first
     row and seats the two section links on a second — nothing is hidden */
  .nav { flex-wrap: wrap; row-gap: 0; }
  .nav::after { content: ""; flex-basis: 100%; height: 0; order: 2; }
  .nav > .btn { order: 1; }
  .nav > a:not(.btn) { order: 3; padding: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-form { padding: var(--leading) var(--space-4); }
}
@media (max-width: 360px) {
  .title-block { display: grid; grid-template-columns: 1fr 1fr; }
  .tb-title { grid-column: 1 / -1; border-bottom: 0; }
  .title-block > .tb-cell { border-left: 0; border-top: 1px solid var(--color-divider); padding-left: var(--leading); }
  .tb-title + .tb-cell + .tb-cell { border-left: 1px solid var(--color-divider); padding-left: var(--half); }
  .tb-cell:last-child { grid-column: 1 / -1; }
}
/* touch screens: every control reaches the 44px target floor */
@media (pointer: coarse) {
  .btn, .input, .choice, .nav a { min-height: 44px; }
}