/* ============================== KOMPAS ==============================
   THE STRUCTURAL MOVE: the page is a narrow measure and almost nothing else.
   A deliberately quiet left-set photograph opens it — no stage, no slides —
   and from the dated rail downward the whole thing sits inside a contained
   column that never widens again except TWICE: the gapless region quad, four
   photographs butted hard against each other and against the window edges,
   and the contact band at the foot. The catalogue is not a grid either; it is
   six full-width rows, sheet on the left, words on the right, separated by a
   single hairline, which is why no price appears until the page is nearly
   over. Survey blue is spent three times only — the neatline under every
   heading, the small tracked labels, and the rand figure. Nothing in here
   moves, orders, stacks or positions a single item inside the header. */
body.t-kompas {
  background: #f4efe6;
  color: #3a352d;
  --km-blue: #29527a;
  --bg-flat: #f4efe6;
  --header-bg: #f4efe6;
  --surface: #f4efe6;
  --surface-2: #ece5d8;
  --line: #ded4c2;
  --line-strong: #c3b69f;
  --heading: #1c1a17;
  --text: #3a352d;
  --muted: #8a8172;
  --radius: 0;
  --shadow: none;
}

/* the cartridge paper runs under the bar and the footer too, so the sheet
   reads as one continuous piece of stock. Type and colour only. */
body.t-kompas .sf-head, body.t-kompas .sf-header,
body.t-kompas .sf-foot, body.t-kompas .sf-footer, body.t-kompas .sf-cats {
  background: #f4efe6; border-color: #ded4c2;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kompas .sf-name, body.t-kompas .sf-navlink { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11.5px; font-weight: 600; }

/* every control is a flat slab of map ink with no edge on it */
body.t-kompas .btn.brand { background: var(--km-blue); border: 0; box-shadow: none; color: #f7f3ea; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 15px 32px; }
body.t-kompas .btn.brand:hover { background: #1d3c5c; color: #ffffff; }

/* typography does the work here, so everything that speaks is set in the serif
   and nothing shouts in caps except the labels */
body.t-kompas .sc-hero h1, body.t-kompas .sc-h2, body.t-kompas .sc-show-t,
body.t-kompas .sc-show-price, body.t-kompas .sc-strip:has(.sc-h2) .sc-strip-label {
  font-family: var(--sf-serif); font-weight: 400; letter-spacing: 0; text-transform: none;
}

/* the quietest hero on the platform: one still photograph, copy hard left in
   the lower third, and no stage height at all */
body.t-kompas .sc-hero { min-height: 68vh; padding: 96px 20px 13vh; align-items: flex-end; }
body.t-kompas .sc-hero h1 { font-size: clamp(27px, 3.6vw, 44px); line-height: 1.22; }

/* BLUE 1 of 3 — a full-measure neatline under every heading, exactly the way a
   printed sheet carries a rule under its title block */
body.t-kompas .sc-h2 { font-size: clamp(22px, 2.6vw, 30px); color: var(--heading); margin-bottom: 34px; }
body.t-kompas .sc-h2::after { content: ''; display: block; height: 1px; background: var(--km-blue); margin: 17px 0 0; }

/* THE MEASURE — the page collapses here and stays collapsed to the foot */
body.t-kompas .sc-richtext { max-width: 620px; padding: 112px 20px 108px; }
body.t-kompas .sc-richtext p, body.t-kompas .sc-about-copy p { color: var(--text); font-size: 17px; line-height: 1.95; }
body.t-kompas .sc-about-split { max-width: 980px; padding: 100px 20px 104px; gap: 56px; }

/* the dated rail, contained and gapped, three across in two rows that fill —
   dateline and headline set in the serif at reading size under each frame */
body.t-kompas .sc-strip { padding: 92px 20px 96px; }
body.t-kompas .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 28px; }
body.t-kompas .sc-strip-img { border: 0; border-radius: 0; aspect-ratio: 3 / 2; background: var(--surface-2); }
body.t-kompas .sc-strip:has(.sc-h2) .sc-strip-label { margin-top: 15px; font-size: 16px; line-height: 1.5; color: var(--heading); text-align: left; }

/* WIDE, ONCE — the headingless rail is the only image-led moment on the page:
   four photographs with no gutter between them and none at the window either,
   each carrying its region name inked into the corner the way a sheet carries
   its own title. Headingless is also what tells it from the rail above.
   BLUE 2 of 3. */
body.t-kompas .sc-strip:not(:has(.sc-h2)) { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-kompas .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
body.t-kompas .sc-strip:not(:has(.sc-h2)) .sc-strip-card { position: relative; }
body.t-kompas .sc-strip:not(:has(.sc-h2)) .sc-strip-label { position: absolute; left: 18px; bottom: 16px; margin: 0; padding: 6px 12px; background: var(--bg-flat); color: var(--km-blue); text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px; font-weight: 700; }

/* the catalogue is six stacked rows and not a grid: sheet on the left at a
   little under half the row, title, price and control on the right, a hairline
   between each. BLUE 3 of 3 is the rand figure, and the category above it. */
body.t-kompas .sc-showcase > .container { max-width: 640px; padding-top: 106px; padding-bottom: 6px; }
body.t-kompas .sc-show-grid { max-width: 1000px; margin: 0 auto; padding: 0 20px; grid-template-columns: minmax(0, 1fr); }
body.t-kompas .sc-show-item { background: transparent; border-top: 1px solid var(--line); }
body.t-kompas .sc-show-inner { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: 48px; align-items: start; text-align: left; min-height: 0; padding: 46px 0 52px; }
body.t-kompas .sc-show-media { grid-column: 1; grid-row: 1 / span 5; padding: 0; }
body.t-kompas .sc-show-media img { width: 100%; max-width: 100%; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; }
body.t-kompas .sc-show-cat { color: var(--km-blue); letter-spacing: 0.22em; font-size: 10.5px; }
body.t-kompas .sc-show-t { margin: 14px 0 0; font-size: clamp(19px, 2.1vw, 25px); }
body.t-kompas .sc-show-price { color: var(--km-blue); font-size: 24px; margin: 16px 0 20px; }

@media (max-width: 900px) {
  body.t-kompas .sc-hero { min-height: 56vh; padding: 80px 20px 10vh; }
  body.t-kompas .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kompas .sc-show-inner { grid-template-columns: minmax(0, 1fr); padding: 38px 0 44px; }
  body.t-kompas .sc-show-media { grid-column: 1; grid-row: auto; padding: 16px 0 6px; }
}

/* NIGHT — the paper goes to a dark drafting-room brown-black and the survey
   blue is lifted two stops so the neatlines, the corner labels and the rand
   figures stay legible against it. The control keeps the blue slab and takes
   dark type instead of cream, which is the only thing the tokens cannot do. */
html[data-theme="dark"] body.t-kompas {
  background: #14130f;
  color: #c3bcae;
  --km-blue: #7ba6d0;
  --bg-flat: #14130f;
  --header-bg: #14130f;
  --surface: #14130f;
  --surface-2: #1c1a15;
  --line: #2c2921;
  --line-strong: #3e3931;
  --heading: #efe8da;
  --text: #c3bcae;
  --muted: #847d70;
}
html[data-theme="dark"] body.t-kompas .sf-head, html[data-theme="dark"] body.t-kompas .sf-header,
html[data-theme="dark"] body.t-kompas .sf-foot, html[data-theme="dark"] body.t-kompas .sf-footer,
html[data-theme="dark"] body.t-kompas .sf-cats { background: #14130f; border-color: #2c2921; }
html[data-theme="dark"] body.t-kompas .btn.brand { color: #12110d; }
html[data-theme="dark"] body.t-kompas .btn.brand:hover { background: #9dbfe0; color: #12110d; }