/* ==========================================================================
   SPARSKEY — SITE LAYER
   Loads AFTER tokens.css. Two jobs, nothing else:

     A. INTEGRATION — the few rules the prototype expressed as per-screen
        scoped CSS (#screen-home, .gal-head, .ad-header) which the production
        templates need as real, reusable classes: the document ground, the
        skip link, the nav chrome, the action row, the card detail lines.
     B. PAGE OVERRIDES — placement only, ported from the approved
        prototype/screen-home.html <style> block, re-scoped from #screen-home
        to .page-home. Placement is layer 6 of VISUAL-SYSTEM §11.

   No token is redefined here and no component is restyled. Every value is a
   token, a ratio, or a ch/percentage measure — no raw colours, no magic px.
   ========================================================================== */


/* ==========================================================================
   A · INTEGRATION
   ========================================================================== */

/* The prototype mounted .sk inside a frame that already had a ground and no
   body margin. A real document has neither. */
html { background: var(--canvas, #F3EFE8); }
body.sk { margin: 0; min-height: 100vh; }

/* Skip link — the nav overlays a hero on the homepage, so a keyboard user
   needs a way past it. Visible only on focus. */
.sk-skip { position: absolute; left: -9999px; top: 0; z-index: 20; }
.sk-skip:focus { left: var(--gutter); top: var(--s3);
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s4); background: var(--ink); color: var(--on-dark); }

/* --------------------------------------------------------------------------
   NAV CHROME — one nav, two grounds (VISUAL-SYSTEM §3.2 / OPEN-43).
   `band`    the inner-page treatment: light ground, hairline beneath.
   `overlay` the homepage treatment: the same nav lifted over the hero.

   .sk carries container-type: inline-size, which brings layout containment
   with it, so <body> is already the containing block for this absolute box —
   no position:relative needed, and none added.
   -------------------------------------------------------------------------- */
.sk-chrome--band { border-bottom: 1px solid var(--line); }
.sk-chrome--overlay { position: absolute; inset: 0 0 auto 0; z-index: 3; }

/* PORT FINDING — nav overflow between the two comped frames.
   The comps specify the nav at 1440 and at 390, and tokens.css collapses it to
   the burger at 900. Between 901px and roughly 1350px the seven items, three
   text utilities and the ghost button do not fit on one line, and .sk-nav is
   nowrap — so the page scrolled sideways: 1315px of content in a 1280px
   window, measured, and 1280 is the commonest desktop width there is.
   Wrapping to a second row is the containment that invents the least: nothing
   is hidden, and no new burger threshold is chosen on the design owner's
   behalf. The real answer belongs to OPEN-43. Nothing in tokens.css changes. */
@container screen (min-width: 901px) and (max-width: 1360px) {
  .sk-nav { flex-wrap: wrap; row-gap: var(--s3); }
  .sk-nav__list { flex-wrap: wrap; }
  .sk-nav__util { row-gap: var(--s3); }
}

/* --------------------------------------------------------------------------
   ACTION ROW — a button pair. From #screen-home .sk-actions, unchanged.
   -------------------------------------------------------------------------- */
.sk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* --------------------------------------------------------------------------
   CARD DETAIL — the description and the "go" affordance of a project card.
   The prototype held these as #screen-projects .prj-card__*; they belong to
   the card component, so they are named for it here. Values unchanged.
   -------------------------------------------------------------------------- */
.sk-card__desc { margin-top: var(--s3); max-width: 38ch; font-size: var(--t-sm);
  color: var(--muted); line-height: 1.5; }
.sk-card__go { display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4); padding-bottom: var(--s1); font-size: var(--t-sm);
  font-weight: 500; color: var(--accent-text); border-bottom: 1px solid var(--accent-line);
  transition: gap 250ms var(--ease), border-color 250ms var(--ease); }
.sk-card:hover .sk-card__go { gap: var(--s3); border-bottom-color: var(--ink); }
/* The gallery card's category + arrow pair. */
.sk-card__cat { font-size: var(--t-label); text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); }
.sk-card__arrow { color: var(--accent-text); }
.sk-card:hover .sk-card__arrow { color: var(--text); }

/* --------------------------------------------------------------------------
   FOOTER DETAIL — from #screen-home. Site-wide, so not page-scoped.
   -------------------------------------------------------------------------- */
.sk-footer__brand > * + * { margin-top: var(--s5); }
.sk-foot-note { font-size: var(--t-sm); color: var(--on-dark-muted); max-width: 34ch; }
.sk-foot-social { display: flex; flex-wrap: wrap; gap: var(--s5);
  font-size: var(--t-sm); color: var(--on-dark-muted); }
.sk-foot-social a { border-bottom: 1px solid transparent; }
.sk-foot-social a:hover { border-bottom-color: var(--accent-dark); }

/* --------------------------------------------------------------------------
   PRICE + SPEC detail used by the artwork partials.
   -------------------------------------------------------------------------- */
.sk-price__notes { margin-top: var(--s3); font-size: var(--t-xs); color: var(--muted);
  line-height: 1.6; }
.sk-price__notes li + li { margin-top: var(--s1); }
.sk-spec__head { margin-bottom: var(--s4); }
.sk-acc__body p { font-size: var(--t-sm); color: var(--muted); max-width: 56ch; }
.sk-acc__body > * + * { margin-top: var(--s3); }

/* --------------------------------------------------------------------------
   FILTER BAR count line.
   -------------------------------------------------------------------------- */
.sk-filters__count { margin-top: var(--s4); font-size: var(--t-sm); color: var(--muted); }

/* --------------------------------------------------------------------------
   EDITORIAL BLOCK rhythm — the block is a stack, spaced on the scale.
   -------------------------------------------------------------------------- */
.sk-editorial > * + * { margin-top: var(--s5); }
.sk-editorial > .sk-h2, .sk-editorial > .sk-h3 { margin-top: var(--s3); }
.sk-editorial p { max-width: 40ch; }

/* --------------------------------------------------------------------------
   CTA BAND rhythm.
   -------------------------------------------------------------------------- */
.sk-cta > div > * + * { margin-top: var(--s4); }
.sk-cta > div > .sk-btn, .sk-cta > div > .sk-actions { margin-top: var(--s6); }
.sk-cta img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* --------------------------------------------------------------------------
   PULL QUOTE — the component is .sk-quote in tokens.css; it wraps its text in
   a <p>, which the reset has already zeroed.
   -------------------------------------------------------------------------- */
.sk-quote p + p { margin-top: var(--s4); }


/* ==========================================================================
   B · PAGE OVERRIDES — HOMEPAGE
   Ported from prototype/screen-home.html. Placement only: nothing here
   redefines a component or a token.
   Band sequence (no two neighbours share a pattern):
     1 full-bleed hero overlay
     2 split 56/44, media left
     3 dark 12-col three-zone, artwork bleeds right
     4 split 56/44, media left, pull-quote treatment
     5 contained two-column editorial on sink, hairline divider
     6 split flipped — panel left, media right
     7 full-bleed contained image CTA
   ========================================================================== */

/* ---- 1 · HERO ---- */
/* The prototype nested the nav inside the hero, so it occupied a band at the
   top. Here the layout renders the nav above <main> and .sk-chrome--overlay
   lifts it out of flow, so the hero has to reserve that band itself. On the
   desktop hero the body is bottom-aligned and never reaches it; on a narrow
   frame the hero is only as tall as its content, and without this the eyebrow
   and the headline slide under the wordmark. --s9 matches the nav's height:
   a 48px control plus var(--s5) of padding above and below. */
.page-home .sk-hero--full { padding-top: var(--s9); }
.page-home .sk-nav { gap: var(--s5); }
.page-home .sk-nav__util { gap: var(--s4); }
.page-home .sk-hero__img { object-position: 50% 34%; }
.page-home .sk-hero__body { padding-bottom: var(--s7); }
.page-home .sk-hero__body > * + * { margin-top: var(--s5); }
.page-home .sk-hero__body > .sk-hero-title { margin-top: var(--s4); max-width: 13ch; }
.page-home .sk-hero__body > .sk-actions { margin-top: var(--s6); }

/* ---- 2 + 4 + 6 · SPLIT ---- */
.page-home .sk-split__over { padding-top: var(--s10);
  background: var(--scrim-soft), var(--scrim-soft); }
.page-home .sk-split__over > * + * { margin-top: var(--s4); }
.page-home .sk-split__over > .sk-link { margin-top: var(--s5); }
.page-home .sk-split__over .sk-h2 { max-width: 20ch; }
.page-home .sk-split__over .sk-h3 { max-width: 42ch; }
.page-home .sk-split__over cite { display: block; font-style: normal; margin-top: var(--s4); }
.page-home .sk-split__panel > .sk-h2 { margin-top: var(--s3); }
.page-home .sk-split__panel > p:not([class]) { max-width: 38ch; }

/* ---- 3 · PROCESS ---- */
.page-home .sk-process { overflow: hidden; }
.page-home .sk-proc { display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--s5); align-items: center;
  padding-left: var(--gutter); padding-block: var(--s9); }
.page-home .sk-proc > * { min-width: 0; }
.page-home .sk-proc > .sk-editorial { grid-column: 1 / span 4; }
.page-home .sk-proc > .sk-steps { grid-column: 5 / span 5; }
.page-home .sk-proc > .sk-steps > li { padding-inline: var(--s4); }
.page-home .sk-proc > .sk-steps > li:first-child { padding-inline-start: 0; }
.page-home .sk-proc__art { grid-column: 10 / span 3; position: relative;
  align-self: stretch; margin-block: calc(var(--s9) * -1); overflow: hidden; }
.page-home .sk-proc__art img { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 56% 36%; }
.page-home .sk-proc__art::after { content: ""; position: absolute; inset: 0;
  background: var(--scrim-soft); }
.page-home .sk-proc__label { position: absolute; z-index: 2;
  right: var(--s5); bottom: var(--s5); }

/* ---- 5 · PROFESSIONALS + VRAAG ---- */
.page-home .sk-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.page-home .sk-duo > * { min-width: 0; }
.page-home .sk-duo > .sk-editorial + .sk-editorial { padding-left: var(--s8);
  border-left: 1px solid var(--line); }

/* ---- 6 · SIGNATURE STYLES ----
   mchen is 4:5 portrait; left free it would set a 1000px band. Taking the
   image out of flow lets the panel set the height and the frame crop. */
.page-home .sk-styles .sk-split__media img { position: absolute; inset: 0;
  object-position: 50% 18%; }

/* ---- 7 · FINAL CTA ---- */
.page-home .sk-close .sk-hero__img { object-position: 50% 6%; }
.page-home .sk-close .sk-hero__body { margin-block: auto; }
.page-home .sk-close .sk-hero__body > * + * { margin-top: var(--s6); }
.page-home .sk-close .sk-h2 { max-width: 15ch; }

/* ==========================================================================
   MOBILE — the drama comes from scale and imagery, not layout.
   Container queries against .sk, exactly as the prototype.
   ========================================================================== */
@container screen (max-width: 900px) {
  /* tokens.css pins the mobile hero to a 4:5 floor; keep it a FLOOR, not a
     cage, so the second CTA and the metadata foot are not clipped. */
  .page-home .sk-hero--full { aspect-ratio: auto; height: auto; min-height: 125cqw; }
  .page-home .sk-hero__body > .sk-hero-title { max-width: none; }
  /* art-directed mobile crop (§6): the mural sits left of centre in the
     source, so a centred crop would show the bar and lose the artwork. */
  .page-home .sk-hero__img { object-position: 8% 40%; }
  .page-home .sk-hero__foot { flex-wrap: wrap; }
  .page-home .sk-hero__foot .sk-scroll { display: none; }
  .page-home .sk-hero__foot .sk-meta { margin-left: auto; }
  .page-home .sk-proc { grid-template-columns: 1fr; gap: var(--s7);
    padding-inline: var(--gutter); padding-block: var(--s8); }
  .page-home .sk-proc > .sk-editorial,
  .page-home .sk-proc > .sk-steps { grid-column: auto; }
  .page-home .sk-proc > .sk-steps > li { padding-inline: 0; }
  .page-home .sk-proc__art { display: none; }
  .page-home .sk-duo { grid-template-columns: 1fr; gap: var(--s7); }
  .page-home .sk-duo > .sk-editorial + .sk-editorial { padding-left: 0; border-left: 0;
    padding-top: var(--s7); border-top: 1px solid var(--line); }
  .page-home .sk-close .sk-h2 { max-width: none; }
  .sk-cta img { aspect-ratio: 4 / 3; }
}


/* ---------------------------------------------------------------------------
   Brand mark
   Two assets, not one filtered: a CSS filter that lightens the navy also
   desaturates it, and the logo's navy (#011F4D) is already a different hue
   from --ink. See docs/BRAND.md 5.4 and OPEN-50.
   --------------------------------------------------------------------------- */
.sk-nav__mark { display: inline-flex; align-items: center; min-height: 44px; }
.sk-nav__logo { display: block; width: auto; height: 30px; }
.sk-nav__logo--dark { display: none; }

/* Over artwork or on a Midnight Navy band, the ivory lockup takes over. */
.on-dark .sk-nav__logo--light,
.sk-chrome--overlay .sk-nav__logo--light { display: none; }
.on-dark .sk-nav__logo--dark,
.sk-chrome--overlay .sk-nav__logo--dark { display: block; }

@media (max-width: 600px) {
  .sk-nav__logo { height: 26px; }
}

@media print {
  .sk-nav__logo--dark { display: none; }
  .sk-nav__logo--light { display: block; }
}


/* ==========================================================================
   C · PAGE OVERRIDES — CATALOGUE
   The four public catalogue templates: /collecties, /werk/{slug}, /projecten
   and /projecten/{slug}. Ported from the approved prototype screens
   (screen-gallery, screen-artwork, screen-projects, screen-case), re-scoped
   from the per-screen ids to real classes. Placement only — layer 6 of
   VISUAL-SYSTEM §11. No token is redefined here and no component is restyled;
   every value is a token, a ratio, or a ch/percentage measure.

   Two of these blocks exist because of measured overflow, not taste: grid and
   flex children default to min-width:auto, and a thumbnail rail, a spec value
   or a five-cell fact bar will otherwise force a track past a 320px frame.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED — the inner-page hero band and the index intro.
   -------------------------------------------------------------------------- */

/* Inner pages take the CONTAINED hero, inside the container gutter
   (VISUAL-SYSTEM §5). The component height is treated as a floor rather than
   a cage: `height` plus `overflow: hidden` clipped the lead at 320px, which is
   the same defect already fixed on the homepage full hero. */
.sk-page-hero { padding-top: var(--s7); }
.sk-page-hero .sk-hero--contained { height: auto; min-height: 340px; }
.sk-page-hero .sk-hero__body { padding-block: var(--s7) var(--s5); }
.sk-page-hero .sk-hero__body > * + * { margin-top: var(--s4); }
.sk-page-hero .sk-hero__body .sk-lead { max-width: 42ch; }
/* The credit line sits in the corner where the scrim bottom lift is
   strongest; anywhere else it lands on the lit part of the photograph. */
.sk-page-hero .sk-hero__foot { justify-content: flex-end; padding-block: 0 var(--s6); }
.sk-page-hero .sk-hero__foot .sk-meta { max-width: 52ch; text-align: right; line-height: 1.5; }

/* The three-part intro of an index page: eyebrow + H2 / body / rule + link.
   4 / 5 / 3, so these are three columns of UNEQUAL width — not the equal-width
   card row VISUAL-SYSTEM §3.5 calls the AI-template tell. */
.sk-index-intro { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: var(--s8);
  align-items: start; }
.sk-index-intro > * { min-width: 0; }
.sk-index-intro > :last-child { border-left: 1px solid var(--line); padding-left: var(--s7); }

/* The visible "not verified" note. Copy, not decoration: UX-SPEC §14 and
   BRAND.md §10 forbid inferring a client name from a folder name, so the page
   says which values are still placeholders. */
.sk-note { margin-top: var(--s5); max-width: 92ch; padding: var(--s4) var(--s5);
  border-left: 2px solid var(--accent-line); background: var(--canvas-sink);
  font-size: var(--t-sm); color: var(--muted); }
.sk-note b { color: var(--text); font-weight: 600; }

/* A heading above a catalogue grid. */
.sk-section-head { margin-bottom: var(--s6); }
.sk-section-head--split { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s4);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   ARTWORK DETAIL — /werk/{slug}. Media 48 / information 52 (VISUAL-SYSTEM §5).
   -------------------------------------------------------------------------- */
.sk-crumb { padding-top: var(--s5); }
.sk-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); color: var(--muted); }
/* WCAG 2.2 SC 2.5.8 puts a 24px floor under a target; the crumb links measured 22. */
.sk-crumb a { display: inline-flex; align-items: center; min-height: 24px;
  border-bottom: 1px solid transparent; }
.sk-crumb a:hover { border-bottom-color: var(--accent-line); }
.sk-crumb li[aria-current] { color: var(--text); }
.sk-crumb__sep { color: var(--line-strong); }

.sk-detail { display: grid; grid-template-columns: 48fr 52fr; gap: var(--s7);
  align-items: start; }
.sk-detail > * { min-width: 0; }

.sk-detail__frame { background: var(--canvas-sink); }
.sk-detail__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 40%; }
/* The rail is four 86px thumbnails: 380px of content, which forced this column
   41px past a 390px frame before it was allowed to scroll inside its own box. */
.sk-detail__rail { display: flex; gap: var(--s3); margin-top: var(--s3);
  padding-bottom: var(--s2); overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; }
.sk-detail__rail > li { flex: 0 0 86px; }
.sk-detail__view { padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.sk-detail__view img { width: 86px; height: 86px; object-fit: cover;
  background: var(--canvas-sink); }
.sk-detail__label { margin-top: var(--s2); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: .12em; line-height: 1.4; color: var(--muted); }
/* STATE, not colour: a heavier rule and the words "In beeld" carry it. */
.sk-detail__view--current { padding-bottom: calc(var(--s2) - 1px);
  border-bottom: 2px solid var(--accent-line); }
.sk-detail__view--current .sk-detail__label { color: var(--text); font-weight: 600; }
.sk-detail__state { display: block; color: var(--accent-text); font-weight: 600; }
.sk-detail__note { margin-top: var(--s3); font-size: var(--t-xs); color: var(--muted); }

.sk-detail__info > * + * { margin-top: var(--s5); }
.sk-detail__info .sk-h1 { margin-top: var(--s3); }
.sk-detail__story { color: var(--muted); max-width: 46ch; }
.sk-detail__buy { padding-top: var(--s6); border-top: 1px solid var(--line); }
.sk-detail__buy .sk-btn { margin-top: var(--s6); }
.sk-detail__buy .sk-link { margin-top: var(--s4); }
.sk-detail__info .sk-icons { margin-top: var(--s7); }
.sk-detail__specs { margin-top: var(--s8); }
/* A specification value is a single unbroken token often enough to matter. */
.sk-detail__specs .sk-spec td { overflow-wrap: anywhere; }
.sk-detail__acc { margin-top: var(--s6); }

/* --------------------------------------------------------------------------
   CASE STUDY — /projecten/{slug}.
   -------------------------------------------------------------------------- */

/* The five-cell fact rail reads as the base of the hero, but it is a sibling
   of it rather than a child: the hero clips, and five cells of project facts
   do not fit inside a 240px band on a narrow frame. Flush, on the same ground. */
.sk-case-hero__facts { padding: 0 var(--s7) var(--s5); }

.page-case .sk-note { margin-top: 0; margin-bottom: var(--s8); }

.sk-case-story { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s7) var(--s9);
  align-items: start; }
.sk-case-story > * { min-width: 0; }
.sk-case-story .sk-editorial p { max-width: 60ch; color: var(--muted); }
.sk-case-story__aside { padding-top: var(--s6); }
.sk-flag { display: inline-block; margin-bottom: var(--s5); padding: var(--s1) var(--s3);
  font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; color: var(--text); background: var(--canvas-sink);
  border: 1px solid var(--line-strong); }

.sk-case-frame { margin-top: var(--s5); background: var(--canvas-sink); }
.sk-case-frame img { width: 100%; aspect-ratio: 1400 / 751; object-fit: cover;
  object-position: 50% 42%; }
.sk-case-frame__cap { margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--muted); }
.sk-case-frame__note { margin-top: var(--s3); font-size: var(--t-xs); color: var(--muted); }

.sk-case-art__head { max-width: 34ch; margin-bottom: var(--s8); }
.sk-case-art__plate { width: 78%; margin-inline-start: 14%; }
.sk-case-art__cap { width: 46%; margin-inline-start: 14%; margin-top: var(--s6); }
.sk-case-art__cap p { font-size: var(--t-sm); color: var(--on-dark-muted); }
.sk-case-art__cap p + p { margin-top: var(--s4); }
.sk-case-art__cap .sk-link { margin-top: var(--s5); }

.sk-case-det { display: grid; grid-template-columns: 4fr 8fr; gap: var(--s7) var(--s9);
  align-items: start; }
.sk-case-det > * { min-width: 0; }
.sk-case-det__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5);
  align-items: start; }
.sk-case-det__pair > * { min-width: 0; }
.sk-case-det__pair > figure:last-child { margin-top: var(--s7); }
.sk-case-det__pair img { width: 100%; aspect-ratio: 1200 / 569; object-fit: cover; }
.sk-case-det__pair figcaption { margin-top: var(--s3); font-size: var(--t-xs);
  color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   CATALOGUE — MOBILE. Every irregular composition becomes simple and
   predictable; container queries, so the collapse tracks .sk.
   ========================================================================== */
@container screen (max-width: 900px) {
  .sk-page-hero { padding-top: var(--s5); }
  .sk-page-hero .sk-hero--contained { min-height: 240px; }
  .sk-page-hero .sk-hero__body { padding-block: var(--s6) var(--s4); }
  .sk-page-hero .sk-hero__foot .sk-meta { max-width: none; letter-spacing: .08em; }

  .sk-index-intro { grid-template-columns: 1fr; gap: var(--s5); }
  .sk-index-intro > :last-child { border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: var(--s5); }

  .sk-detail { grid-template-columns: 1fr; gap: var(--s6); }
  .sk-detail__specs { margin-top: var(--s7); }
  .sk-detail__info .sk-icons { margin-top: var(--s6); }

  .sk-case-hero__facts { padding: 0 var(--s5) var(--s4); }
  .sk-case-story, .sk-case-det { grid-template-columns: 1fr; gap: var(--s7); }
  .sk-case-story__aside { padding-top: 0; }
  .sk-case-art__head { max-width: none; }
  .sk-case-art__plate, .sk-case-art__cap { width: 100%; margin-inline-start: 0; }
  .sk-case-det__pair { grid-template-columns: 1fr; gap: var(--s6); }
  .sk-case-det__pair > figure:last-child { margin-top: 0; }

  .sk-card__desc { max-width: none; }
}
