/* Web fonts, matching the Skerra brand system: Archivo (width axis, set at 112%)
   for headings, Schibsted Grotesk for body and UI, IBM Plex Mono for labels and
   numbers. Archivo needs the wdth axis or headings lose their broad stance. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Schibsted+Grotesk:ital,wght@0,400..700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');
/* Skerra tokens. The foundation is the "Skerra Who We Are" print document
   (Claude Design project "Skerra brand identity system", 96da154a...): dark
   grounds, Fog type, Slate rules, one amber index per page. Light (Fog) values
   come from the Brand System v1.0 page. Read 2026-10-26. Values marked
   "derived" are hover steps, focus, or status colors the brand doesn't define.
   Do not invent hexes. */

:root, .sk-theme-stone, .sk-theme-deep, .sk-theme-sea {
  /* Palette */
  --sk-stone-900: #16191B;    /* Deep: covers, photo pages, the darkest ground */
  --sk-stone: #1F2326;        /* Stone: text pages, the default ground; ink on Fog */
  --sk-stone-800: #262B2F;    /* lit face of the stone (illustration) */
  --sk-stone-700: #2E3439;    /* row dividers on dark */
  --sk-slate: #5B6670;        /* rules on dark; secondary text on Fog */
  --sk-mist: #A3ACB3;         /* labels and secondary text on dark */
  --sk-fog-200: #D5DAD7;      /* supporting body text on dark; hairlines on Fog */
  --sk-fog: #EEF0EE;          /* type on dark; the light page */
  --sk-paper: #F7F8F7;        /* raised surfaces on Fog */
  --sk-sea: #1B3A4B;          /* Deep Sea: feature grounds, links on Fog */
  --sk-sea-700: #2E4F61;      /* lines on Sea */
  --sk-beacon: #E8A33D;       /* the light. One per view */
  --sk-beacon-hover: #F0B457; /* website CTA hover */

  /* Status (derived; the brand has none). Never amber: amber is the light, not a signal. */
  --sk-green: #2E6B52;  --sk-green-tint: #E3EDE7;  --sk-green-on-dark: #7DB89C;
  --sk-ochre: #8A5A14;  --sk-ochre-tint: #F3EADB;  --sk-ochre-on-dark: #D2A86A;
  --sk-red: #A23B2C;    --sk-red-tint: #F5E3DF;    --sk-red-on-dark: #E08A7C;

  /* Type */
  --sk-font-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sk-font-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --sk-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --sk-display-stretch: 112%; /* Archivo is always set slightly expanded */
  --sk-text-display: 76px;    /* cover title, 0.98 leading, -2% */
  --sk-text-h1: 48px;         /* page titles over photos, 1.04 */
  --sk-text-h2: 36px;         /* page headings, 1.1 */
  --sk-text-h3: 21px;         /* card and pillar titles */
  --sk-text-statement: 46px;  /* the WHY statement, 1.08 */
  --sk-text-lead: 17px;       /* intro under a heading */
  --sk-text-body: 15px;       /* document body, 1.62 */
  --sk-text-small: 14px;
  --sk-text-label: 10.5px;    /* Plex Mono, uppercase, +16% */
  --sk-tracking-label: 0.16em;

  /* Space */
  --sk-space-1: 4px;  --sk-space-2: 8px;  --sk-space-3: 12px; --sk-space-4: 16px;
  --sk-space-5: 24px; --sk-space-6: 32px; --sk-space-7: 44px; --sk-space-8: 56px;
  --sk-space-9: 96px; --sk-space-10: 120px;
  --sk-page-pad: 56px;                        /* print page margin */
  /* screen side padding */
  --sk-gutter: clamp(20px, 5vw, 56px); /* @kind spacing */
  --sk-max: 1200px;

  /* Radius: square-shouldered, nothing pill-shaped */
  --sk-radius-sm: 3px;        /* buttons, inputs, tags */
  --sk-radius: 4px;           /* cards, photo frames */
  --sk-radius-lg: 6px;

  --sk-shadow-lift: 0 1px 2px rgba(22, 25, 27, 0.2), 0 12px 32px rgba(22, 25, 27, 0.18);

  /* Photo washes (Who We Are) */
  --sk-overlay-cover: linear-gradient(180deg, rgba(22,25,27,0.55) 0%, rgba(22,25,27,0) 30%, rgba(22,25,27,0.1) 50%, rgba(22,25,27,0.92) 82%, #16191B 100%); /* @kind other */
  --sk-overlay-top: linear-gradient(180deg, rgba(22,25,27,0.5) 0%, rgba(22,25,27,0) 35%, rgba(22,25,27,0) 55%, #16191B 100%); /* @kind other */
  --sk-overlay-band: linear-gradient(180deg, rgba(22,25,27,0.85) 0%, rgba(22,25,27,0.2) 45%, rgba(22,25,27,0.2) 70%, rgba(22,25,27,0.85) 100%); /* @kind other */
  --sk-overlay-left: linear-gradient(90deg, rgba(22,25,27,0.82) 0%, rgba(22,25,27,0.55) 40%, rgba(22,25,27,0) 75%); /* @kind other */

  /* Roles: Stone theme (default). Components read these, not the palette. */
  --sk-bg: var(--sk-stone);
  --sk-surface: var(--sk-stone-900);  /* panels sit one step darker */
  --sk-fg: var(--sk-fog);
  --sk-fg-body: var(--sk-fog);
  --sk-fg-soft: var(--sk-fog-200);    /* supporting paragraph */
  --sk-fg-muted: var(--sk-mist);
  --sk-rule-strong: var(--sk-fog);    /* 2px section rules */
  --sk-rule: var(--sk-slate);         /* 1px rules above labels and lists */
  --sk-line: var(--sk-stone-700);     /* row dividers */
  --sk-card-border: transparent;
  --sk-field-border: var(--sk-slate);
  --sk-link: var(--sk-fog);
  --sk-focus: var(--sk-fog);          /* derived */
  --sk-accent: var(--sk-beacon);
  --sk-on-accent: var(--sk-stone);
  --sk-btn-bg: var(--sk-fog);
  --sk-btn-fg: var(--sk-stone);
  --sk-btn-hover: var(--sk-paper);
  --sk-btn-hover-fg: var(--sk-stone);
  --sk-info: var(--sk-mist);
  --sk-status-green: var(--sk-green-on-dark);
  --sk-status-ochre: var(--sk-ochre-on-dark);
  --sk-status-red: var(--sk-red-on-dark);
  --sk-tint-green: rgba(125, 184, 156, 0.1);
  --sk-tint-ochre: rgba(210, 168, 106, 0.1);
  --sk-tint-red: rgba(224, 138, 124, 0.1);
}

/* Deep: covers and photo pages (#16191B). Panels lift to Stone. */
.sk-theme-deep {
  --sk-bg: var(--sk-stone-900);
  --sk-surface: var(--sk-stone);
}

/* Sea: Deep Sea feature bands */
.sk-theme-sea {
  --sk-bg: var(--sk-sea);
  --sk-surface: var(--sk-stone-900);
  --sk-line: var(--sk-sea-700);
}

/* Fog: the light page, for forms, app screens and long reading on screen */
.sk-theme-fog {
  --sk-bg: var(--sk-fog);
  --sk-surface: var(--sk-paper);
  --sk-fg: var(--sk-stone);
  --sk-fg-body: var(--sk-stone);
  --sk-fg-soft: var(--sk-stone);
  --sk-fg-muted: var(--sk-slate);
  --sk-rule-strong: var(--sk-stone);
  --sk-rule: var(--sk-fog-200);
  --sk-line: var(--sk-fog-200);
  --sk-card-border: var(--sk-fog-200);
  --sk-field-border: var(--sk-fog-200);
  --sk-link: var(--sk-sea);
  --sk-focus: var(--sk-sea);
  --sk-btn-bg: var(--sk-stone);
  --sk-btn-fg: var(--sk-fog);
  --sk-btn-hover: var(--sk-sea);
  --sk-btn-hover-fg: var(--sk-fog);
  --sk-info: var(--sk-sea);
  --sk-status-green: var(--sk-green);
  --sk-status-ochre: var(--sk-ochre);
  --sk-status-red: var(--sk-red);
  --sk-tint-green: var(--sk-green-tint);
  --sk-tint-ochre: var(--sk-ochre-tint);
  --sk-tint-red: var(--sk-red-tint);
}
/* Skerra component styles. Every class is prefixed sk-. Components read the
   role tokens (--sk-fg, --sk-surface, --sk-rule ...), so the same markup works
   on Stone, Deep, Sea and Fog. Measurements come from the Who We Are print
   document unless marked otherwise. */

/* Root */
.sk-root {
  font-family: var(--sk-font-sans);
  font-size: var(--sk-text-body);
  line-height: 1.62;
  color: var(--sk-fg-body);
  background: var(--sk-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sk-root *, .sk-root *::before, .sk-root *::after { box-sizing: border-box; }
.sk-root a { color: var(--sk-link); text-underline-offset: 3px; }
.sk-root a:hover { color: var(--sk-fg); }
.sk-root a:has(> .sk-logo) { text-decoration: none; }
.sk-root :focus-visible { outline: 2px solid var(--sk-focus); outline-offset: 2px; }
.sk-root b, .sk-root strong { font-weight: 600; }
.sk-root p { text-wrap: pretty; }

/* Text helpers. Headings are Archivo 600 at 112% width, never another weight. */
.sk-display, .sk-h1, .sk-h2, .sk-h3, .sk-h4, .sk-statement {
  font-family: var(--sk-font-display); font-stretch: var(--sk-display-stretch); font-weight: 600;
  color: var(--sk-fg); margin: 0; text-wrap: balance;
}
.sk-display { font-size: clamp(44px, 7vw, var(--sk-text-display)); line-height: 0.98; letter-spacing: -0.02em; }
.sk-h1 { font-size: clamp(32px, 4.4vw, var(--sk-text-h1)); line-height: 1.04; letter-spacing: -0.015em; }
.sk-h2 { font-size: clamp(28px, 3.4vw, var(--sk-text-h2)); line-height: 1.1; letter-spacing: -0.01em; }
.sk-h3 { font-size: var(--sk-text-h3); line-height: 1.2; }
.sk-h4 { font-size: 19px; line-height: 1.25; }
.sk-statement { font-size: clamp(30px, 4vw, var(--sk-text-statement)); line-height: 1.08; letter-spacing: -0.015em; }
.sk-lead { font-size: var(--sk-text-lead); line-height: 1.55; color: var(--sk-fg-soft); margin: 0; max-width: 540px; }
.sk-body { font-size: var(--sk-text-body); line-height: 1.62; margin: 0; }
.sk-soft { color: var(--sk-fg-soft); }
.sk-small { font-size: var(--sk-text-small); line-height: 1.55; color: var(--sk-fg-muted); }
.sk-muted { color: var(--sk-fg-muted); }
.sk-label {
  font: 500 var(--sk-text-label)/1.4 var(--sk-font-mono); letter-spacing: var(--sk-tracking-label);
  text-transform: uppercase; color: var(--sk-fg-muted);
}
.sk-num { font-family: var(--sk-font-mono); font-variant-numeric: tabular-nums; }

/* Logo */
.sk-logo { display: inline-flex; align-items: center; line-height: 1; }
.sk-logo--stacked { flex-direction: column; }
.sk-logo svg { display: block; flex: none; }
.sk-logo__word {
  font-family: var(--sk-font-display); font-stretch: 118%; font-weight: 600;
  letter-spacing: 0.34em; margin-right: -0.34em; white-space: nowrap;
}

/* Icon */
.sk-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.sk-spin { animation: sk-spin 0.9s linear infinite; }
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* Label: mono running head, amber index ("01  Why we exist") */
.sk-eyebrow { display: inline-flex; align-items: baseline; gap: 0.9em; }
.sk-eyebrow__index { color: var(--sk-accent); }
.sk-eyebrow--plain .sk-eyebrow__index { color: var(--sk-fg); }
.sk-label--ruled { display: block; border-top: 1px solid var(--sk-rule); padding-top: 14px; }

/* Button: square-shouldered, Schibsted 600 15/20, 3px corners */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 20px; min-height: 44px;
  font: 600 15px/20px var(--sk-font-sans);
  border-radius: var(--sk-radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.sk-root a.sk-btn { text-decoration: none; }
.sk-btn--primary, .sk-root a.sk-btn--primary { background: var(--sk-btn-bg); color: var(--sk-btn-fg); }
.sk-btn--primary:hover, .sk-root a.sk-btn--primary:hover { background: var(--sk-btn-hover); color: var(--sk-btn-hover-fg); }
.sk-btn--beacon, .sk-root a.sk-btn--beacon { background: var(--sk-beacon); color: var(--sk-stone); font-size: 16px; padding: 16px 26px; }
.sk-btn--beacon:hover, .sk-root a.sk-btn--beacon:hover { background: var(--sk-beacon-hover); color: var(--sk-stone); }
.sk-btn--secondary, .sk-root a.sk-btn--secondary { background: transparent; color: var(--sk-fg); border-color: var(--sk-fg); padding: 11px 19px; }
.sk-btn--secondary:hover, .sk-root a.sk-btn--secondary:hover { background: var(--sk-fg); color: var(--sk-bg); }
.sk-btn--quiet, .sk-root a.sk-btn--quiet { background: transparent; color: var(--sk-fg); border-color: var(--sk-mist); font-weight: 500; padding: 9px 16px; min-height: 0; }
.sk-btn--quiet:hover { border-color: var(--sk-fg); }
.sk-btn--link, .sk-root a.sk-btn--link {
  background: none; border: 0; padding: 0; min-height: 0; font-weight: 500; font-size: 16px;
  color: var(--sk-fg); text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: var(--sk-fg-muted);
}
.sk-btn--link:hover { text-decoration-color: var(--sk-fg); }
.sk-btn--danger, .sk-root a.sk-btn--danger { background: var(--sk-red); color: var(--sk-fog); }
.sk-btn--danger:hover { background: #8A2F22; }
.sk-btn--sm { padding: 8px 14px; min-height: 36px; font-size: 14px; gap: 8px; }
.sk-btn--secondary.sk-btn--sm { padding: 7px 13px; }
.sk-btn--block { display: flex; width: 100%; }
.sk-btn:disabled, .sk-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.sk-btn__arrow { font-family: var(--sk-font-mono); font-weight: 400; }

/* Badge: mono tag, 3px corners */
.sk-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px;
  font: 500 10.5px/1 var(--sk-font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: var(--sk-radius-sm); border: 1px solid var(--sk-rule);
  color: var(--sk-fg-muted); background: transparent; white-space: nowrap;
}
.sk-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sk-badge--solid { background: var(--sk-fg); color: var(--sk-bg); border-color: var(--sk-fg); }
.sk-badge--sea { background: var(--sk-sea); color: var(--sk-fog); border-color: var(--sk-sea); }
.sk-badge--green { color: var(--sk-status-green); background: var(--sk-tint-green); border-color: transparent; }
.sk-badge--ochre { color: var(--sk-status-ochre); background: var(--sk-tint-ochre); border-color: transparent; }
.sk-badge--red { color: var(--sk-status-red); background: var(--sk-tint-red); border-color: transparent; }

/* Card: one step darker than the ground, 4px corners, flat (the pillar cards) */
.sk-card {
  background: var(--sk-surface); border: 1px solid var(--sk-card-border); border-radius: var(--sk-radius);
  padding: 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--sk-fg-body);
}
.sk-card--compact { padding: 22px 20px 24px; }
.sk-card--dark { background: var(--sk-stone); border-color: transparent; } /* Card adds sk-theme-stone for the dark roles */
.sk-card--lift { box-shadow: var(--sk-shadow-lift); border-color: transparent; }
.sk-card--flush { padding: 0; overflow: hidden; }
.sk-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sk-card__title { font-family: var(--sk-font-display); font-stretch: var(--sk-display-stretch); font-weight: 600; font-size: var(--sk-text-h3); line-height: 1.2; color: var(--sk-fg); margin: 0; }
.sk-card__sub { margin: 4px 0 0; font-size: var(--sk-text-small); color: var(--sk-fg-muted); }
.sk-card__body { font-size: 14px; line-height: 1.55; }
.sk-card__note {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sk-line);
  font-size: 13.5px; line-height: 1.55; color: var(--sk-fg-muted);
}

/* SectionHead: 2px rule, amber index + label on the left, muted note on the right */
.sk-section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap;
  border-top: 2px solid var(--sk-rule-strong); padding-top: 16px;
}
.sk-section-head__intro { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sk-fg-muted); max-width: 340px; text-align: right; }
.sk-section-head--title { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px 40px; align-items: start; }
.sk-section-head--title .sk-section-head__intro { text-align: left; max-width: 540px; font-size: 15px; line-height: 1.62; }
@media (max-width: 620px) { .sk-section-head__intro { text-align: left; } }

/* Statement: WHY label, big Archivo line, supporting paragraph */
.sk-statement-block { display: flex; flex-direction: column; gap: 28px; }

/* MethodSteps: Chart. Build. Hold. under a 2px rule */
.sk-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 2px solid var(--sk-rule-strong); padding: 20px 0 0; margin: 0; list-style: none; }
.sk-step { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-step__index { font: 500 var(--sk-text-label)/1.4 var(--sk-font-mono); letter-spacing: 0.14em; color: var(--sk-fg-muted); }
.sk-step__name { font-family: var(--sk-font-display); font-stretch: var(--sk-display-stretch); font-weight: 600; font-size: 28px; line-height: 1.15; color: var(--sk-fg); margin: 0; }
.sk-step__text { margin: 0; font-size: 15px; line-height: 1.55; max-width: 320px; }
.sk-steps--lg .sk-step__name { font-size: 34px; }
.sk-steps--lg .sk-step__text { font-size: 17px; line-height: 1.65; }
@media (max-width: 620px) { .sk-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* RuleList: rows on hairlines (Old Norse, approved lines, boilerplate) */
.sk-rules { display: flex; flex-direction: column; border-top: 1px solid var(--sk-rule); margin: 0; }
.sk-rules--strong { border-top: 2px solid var(--sk-rule-strong); }
.sk-rules__row {
  display: grid; grid-template-columns: var(--sk-rules-key, 90px) minmax(0, 1fr); gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--sk-line); align-items: baseline;
}
.sk-rules__row:last-child { border-bottom: 0; }
.sk-rules__key { font: 500 10px/1.5 var(--sk-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-fg-muted); padding-top: 3px; }
.sk-rules__value { font-size: 14px; line-height: 1.6; min-width: 0; margin: 0; }
.sk-rules--term .sk-rules__row { padding: 6px 0; gap: 10px; }
.sk-rules--term .sk-rules__key { font: 600 13.5px/1.5 var(--sk-font-display); font-stretch: var(--sk-display-stretch); letter-spacing: 0; text-transform: none; color: var(--sk-fg); padding-top: 0; }
.sk-rules--term .sk-rules__value { font-size: 13.5px; color: var(--sk-fg-soft); }
.sk-rules--lines .sk-rules__row { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 13px 0; }
.sk-rules--lines .sk-rules__value { order: -1; font: 600 22px/1.25 var(--sk-font-display); font-stretch: var(--sk-display-stretch); color: var(--sk-fg); }
.sk-rules--lines .sk-rules__key { text-align: right; letter-spacing: 0.12em; }
@media (max-width: 520px) {
  .sk-rules__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sk-rules--lines .sk-rules__key { text-align: left; order: 1; }
}

/* CompareTable: trait / we write / we don't write */
.sk-compare { display: flex; flex-direction: column; }
.sk-compare__row { display: grid; grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--sk-line); font-size: 14px; line-height: 1.55; }
.sk-compare__row--head { padding: 0 0 10px; border-bottom: 1.5px solid var(--sk-rule-strong); font: 500 10px/1.4 var(--sk-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-fg-muted); }
.sk-compare__trait { font: 600 16px/1.4 var(--sk-font-display); font-stretch: var(--sk-display-stretch); color: var(--sk-fg); }
.sk-compare__bad { color: var(--sk-fg-muted); text-decoration: line-through; text-decoration-color: var(--sk-slate); }
@media (max-width: 620px) {
  .sk-compare__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sk-compare__row--head { display: none; }
}

/* Page: a letter-size print page (816 x 1056 at 96dpi), with running head */
.sk-page {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  width: 100%; max-width: 816px; min-height: 1056px; background: var(--sk-bg); color: var(--sk-fg-body);
}
.sk-page--auto { max-width: none; min-height: 0; }
.sk-page__head { display: flex; justify-content: space-between; gap: 16px; }
.sk-page__body { flex: 1; display: flex; flex-direction: column; padding: var(--sk-page-pad); gap: 28px; min-width: 0; }
.sk-page__media { position: relative; overflow: hidden; background: var(--sk-stone-900); }
.sk-page__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-page__wash { position: absolute; inset: 0; pointer-events: none; }
.sk-page__media-head { position: absolute; left: var(--sk-page-pad); right: var(--sk-page-pad); top: var(--sk-page-pad); z-index: 2; color: var(--sk-fog); }
.sk-page__media-head .sk-label { color: var(--sk-fog); }
.sk-page__media-title { position: absolute; left: var(--sk-page-pad); right: var(--sk-page-pad); bottom: 8px; z-index: 2; max-width: 600px; }
.sk-page__media + .sk-page__body { padding-top: 28px; }
.sk-page--cover .sk-page__body { position: relative; z-index: 2; justify-content: space-between; }
.sk-page__cover-media { position: absolute; inset: 0; }
.sk-page__cover-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-photo-empty { position: absolute; inset: 0; background: linear-gradient(180deg, #2A3238 0%, #3B4A55 46%, #1B3A4B 62%, #16191B 100%); }
@media (max-width: 700px) {
  .sk-page { min-height: 0; --sk-page-pad: 24px; }
  .sk-page--cover { min-height: 640px; }
}
@media print {
  .sk-page { width: 8.5in; max-width: none; height: 11in; min-height: 0; break-after: page; }
}

/* Hero: full-bleed photo for the website */
.sk-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--sk-stone-900); color: var(--sk-fog); }
.sk-hero__media { position: absolute; inset: 0; }
.sk-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-hero__overlay { position: absolute; inset: 0; pointer-events: none; }
.sk-hero__top { position: relative; z-index: 2; }
.sk-hero__content {
  position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 24px; padding: 48px var(--sk-gutter) 96px; max-width: 760px;
}
.sk-hero--bottom .sk-hero__content { justify-content: flex-end; padding-bottom: 56px; }
.sk-hero__text { margin: 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; color: var(--sk-fog); max-width: 520px; }
.sk-hero__actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.sk-hero__credit { position: absolute; right: 12px; bottom: 10px; z-index: 2; font: 400 10px/1.4 var(--sk-font-mono); letter-spacing: 0.06em; color: var(--sk-mist); }
.sk-hero__credit a { color: var(--sk-mist); }

/* Figure: photo frame + mono caption */
.sk-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sk-figure__frame { border-radius: var(--sk-radius); overflow: hidden; background: var(--sk-stone-900); position: relative; }
.sk-figure__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-figure__caption { font: 400 12px/1.6 var(--sk-font-mono); letter-spacing: 0.08em; color: var(--sk-fg-muted); }

/* Passage: amber top rule, Archivo 500 lines */
.sk-passage { display: flex; flex-direction: column; gap: 14px; border-top: 2px solid var(--sk-accent); padding-top: 24px; margin: 0; }
.sk-passage__line { font-family: var(--sk-font-display); font-stretch: 106%; font-weight: 500; font-size: clamp(19px, 2vw, 24px); line-height: 1.45; color: var(--sk-fg); }
.sk-passage__cite { font: 400 12px/1.6 var(--sk-font-mono); letter-spacing: 0.08em; color: var(--sk-fg-muted); font-style: normal; }

/* Stat (derived): Plex Mono figure under a 1px rule */
.sk-stat { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--sk-rule); padding-top: 14px; min-width: 0; }
.sk-stat__value { font: 500 40px/1 var(--sk-font-mono); letter-spacing: -0.03em; color: var(--sk-fg); font-variant-numeric: tabular-nums; }
.sk-stat__unit { font-size: 0.5em; letter-spacing: 0; color: var(--sk-fg-muted); margin-left: 4px; }
.sk-stat__label { font: 500 var(--sk-text-label)/1.4 var(--sk-font-mono); letter-spacing: var(--sk-tracking-label); text-transform: uppercase; color: var(--sk-fg-muted); }
.sk-stat__note { font-size: var(--sk-text-small); color: var(--sk-fg-muted); }

/* TextField */
.sk-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sk-field__label { font: 500 var(--sk-text-label)/1.4 var(--sk-font-mono); letter-spacing: var(--sk-tracking-label); text-transform: uppercase; color: var(--sk-fg-muted); }
.sk-field__input {
  font: 400 15px/1.5 var(--sk-font-sans); color: var(--sk-fg);
  background: var(--sk-surface); border: 1px solid var(--sk-field-border); border-radius: var(--sk-radius-sm);
  padding: 11px 14px; width: 100%; transition: border-color 140ms ease;
}
.sk-field__input::placeholder { color: var(--sk-fg-muted); opacity: 0.8; }
.sk-field__input:hover { border-color: var(--sk-fg-muted); }
.sk-field__input:focus { outline: none; border-color: var(--sk-focus); box-shadow: 0 0 0 1px var(--sk-focus); }
.sk-field__input:disabled { opacity: 0.5; cursor: not-allowed; }
textarea.sk-field__input { resize: vertical; min-height: 96px; }
.sk-field__hint { font-size: 13px; color: var(--sk-fg-muted); }
.sk-field--error .sk-field__input { border-color: var(--sk-status-red); }
.sk-field--error .sk-field__hint { color: var(--sk-status-red); }

/* Alert: left rule, plain statement */
.sk-alert {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border-radius: var(--sk-radius); border-left: 3px solid currentColor; background: var(--sk-surface);
}
.sk-alert__icon { margin-top: 2px; }
.sk-alert__title { margin: 0; font-weight: 600; font-size: 15px; color: var(--sk-fg); }
.sk-alert__body { margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: var(--sk-fg-soft); }
.sk-alert__action { margin-left: auto; flex: none; }
.sk-alert--info { color: var(--sk-info); }
.sk-alert--success { color: var(--sk-status-green); background: var(--sk-tint-green); }
.sk-alert--warning { color: var(--sk-status-ochre); background: var(--sk-tint-ochre); }
.sk-alert--error { color: var(--sk-status-red); background: var(--sk-tint-red); }

/* SiteHeader */
.sk-header {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 28px var(--sk-gutter); width: 100%; max-width: 1280px; margin: 0 auto;
}
.sk-header__nav { display: flex; gap: clamp(16px, 3vw, 36px); align-items: center; flex-wrap: wrap; font-size: 15px; font-weight: 500; }
.sk-root .sk-header__link { color: var(--sk-fg); text-decoration: none; }
.sk-root .sk-header__link:hover { color: var(--sk-fg); text-decoration: underline; text-underline-offset: 5px; }

/* PhotoCredits: the CC BY-SA attribution line (website footer) */
.sk-credits { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--sk-line); padding-top: 20px; font-size: 12.5px; line-height: 1.7; color: var(--sk-fg-muted); }
.sk-root .sk-credits a { color: var(--sk-fg-muted); }