/* ==========================================================================
   The Craft (P-05) page styles       Builder A, S-003
   Page-only presentation on top of tokens.css / shell.css / components.css.
   Nothing here restyles a shared class globally: every rule is scoped by a
   .craft-* class or by the .craft-* section that contains it.
   ========================================================================== */

/* ---------- hero: atelier photography + making-order index ---------- */
/* Placeholder styling stays scoped for any future missing hero shot. */
.craft-hero .c-placeholder { place-items: center end; padding-inline: var(--gutter); padding-block: 96px 120px; }
.craft-hero .c-placeholder > span {
  justify-items: center; text-align: center; color: var(--wit); max-width: 30ch;
  background: rgba(16, 15, 13, .82); border: 1px dashed rgba(239, 236, 236, .35); border-radius: 4px; padding: 14px 18px;
}
@media (max-width: 900px) {
  .craft-hero .c-placeholder { place-items: start center; padding-block: 24px 0; }
  .craft-hero .c-placeholder > span { max-width: 26ch; }
}
.craft-hero__media::after {                       /* faint belly-scale grid: quiet, static */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: linear-gradient(var(--lijn-d) 1px, transparent 1px), linear-gradient(90deg, var(--lijn-d) 1px, transparent 1px);
  background-size: 72px 54px;
  -webkit-mask-image: radial-gradient(ellipse at 85% 30%, #000 0%, transparent 62%);
          mask-image: radial-gradient(ellipse at 85% 30%, #000 0%, transparent 62%);
}
.craft-hero .c-placeholder { z-index: 1; }

.craft-order ol { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 3vw, 40px); border-top: 1px solid var(--lijn-d); }
.craft-order li { flex: none; }
.craft-order a {
  display: inline-flex; align-items: center; gap: 12px; min-height: var(--doel); padding-block: 8px;
  font-size: 14px; font-weight: 600; text-decoration: none; color: #DAD5CB; position: relative;
  transition: color var(--dur-micro);
}
.craft-order a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--oker-licht); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-enter); }
.craft-order a:hover { color: var(--wit); }
.craft-order a:hover::after { transform: scaleX(1); }
.craft-order small { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--oker-licht); }
@media (max-width: 560px) {
  .craft-order ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .craft-order a { font-size: 13.5px; }
}

/* The route stays in view without changing native scrolling. */
.craft-route { position: sticky; top: var(--kop-h); z-index: 25; background: rgba(16, 15, 13, .96); color: var(--wit); border-bottom: 1px solid rgba(205, 180, 135, .25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.craft-route__inner { min-height: 76px; display: grid; grid-template-columns: 154px minmax(0, 1fr); align-items: center; gap: clamp(18px, 3vw, 48px); position: relative; }
.craft-route__intro { display: grid; gap: 3px; line-height: 1.2; }
.craft-route__intro small { color: var(--oker-licht); font-size: 10px; letter-spacing: .18em; font-weight: 700; }
.craft-route__intro strong { font-family: var(--display); font-size: 16px; font-weight: 600; }
.craft-route ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.craft-route li { min-width: 0; }
.craft-route a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 7px 6px; text-decoration: none; color: var(--mist); font-size: 12px; font-weight: 650; transition: color .2s ease; }
.craft-route a:hover, .craft-route a[aria-current="step"] { color: var(--wit); }
.craft-route a span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid rgba(205, 180, 135, .45); border-radius: 50%; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--oker-licht); transition: background .3s ease, color .3s ease, border-color .3s ease; }
.craft-route a[aria-current="step"] span { color: var(--nacht); background: var(--oker-licht); border-color: var(--oker-licht); }
.craft-route a b { font-weight: 650; line-height: 1.15; }
.craft-route a:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: -2px; }
.craft-route__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 2px; background: rgba(205, 180, 135, .17); }
.craft-route__progress i { display: block; width: 100%; height: 100%; background: var(--oker-licht); transform: scaleX(0); transform-origin: left; }
.craft-section[id] { scroll-margin-top: calc(var(--kop-h) + 88px); }
@media (max-width: 1000px) {
  .craft-route__inner { grid-template-columns: 125px minmax(0, 1fr); gap: 8px; }
  .craft-route a { justify-content: center; padding-inline: 2px; }
  .craft-route a b { display: none; }
}
@media (max-width: 560px) {
  .craft-route__inner { min-height: 62px; grid-template-columns: minmax(0, 1fr) 220px; }
  .craft-route__intro strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .craft-route__intro small { font-size: 8px; }
  .craft-route a { min-height: 56px; }
  .craft-route a span { width: 32px; height: 32px; flex-basis: 32px; }
  .craft-section[id] { scroll-margin-top: calc(var(--kop-h) + 72px); }
}

/* ---------- sections ---------- */
.craft-section .c-tease__media img.c-photo { aspect-ratio: 3 / 2; }
.craft-cap { margin: 12px 0 0; font-size: var(--fs-caption); color: var(--mist); display: flex; gap: 10px; align-items: baseline; }
.craft-cap::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--oker-licht); border-radius: 50%; flex: none; transform: translateY(1px); }
.licht .craft-cap { color: var(--inkt-zacht); }
.licht .craft-cap::before { border-color: var(--oker-diep); }
.craft-section .c-tease__media { overflow: visible; background: none; }
.craft-section .c-tease__media > .c-placeholder, .craft-section .c-tease__media > img { border-radius: 2px; }
.groen .c-placeholder { background: var(--bos-diep); border-color: rgba(239, 236, 236, .2); }
.craft-sub { margin: 0; }

/* An unmistakable destination card; the shell marks future routes as Soon. */
.craft-deep-link { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 84px; padding: 14px 18px 14px 22px; align-self: stretch; text-decoration: none; color: inherit; border: 1px solid rgba(205, 180, 135, .5); background: rgba(205, 180, 135, .08); transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.craft-deep-link > span:first-child { display: grid; gap: 4px; }
.craft-deep-link small { display: block; font-size: 10px; font-weight: 700; line-height: 1.1; letter-spacing: .16em; color: var(--oker-licht); text-transform: uppercase; }
.craft-deep-link b { font-family: var(--display); font-size: clamp(19px, 2vw, 24px); letter-spacing: -.02em; line-height: 1.15; }
.craft-deep-link__arrow { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; font-family: var(--sans); font-size: 25px; line-height: 1; color: var(--oker-licht); transition: transform .25s ease, background .25s ease; }
a.craft-deep-link:hover { transform: translateY(-2px); border-color: var(--oker-licht); background: rgba(205, 180, 135, .16); }
a.craft-deep-link:hover .craft-deep-link__arrow { transform: translate(2px, -2px); background: rgba(205, 180, 135, .12); }
a.craft-deep-link:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 3px; }
.craft-deep-link.s-soon { cursor: default; border-style: dashed; opacity: 1; }
.craft-deep-link.s-soon > span:first-child small { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--oker-licht); }
.craft-deep-link.s-soon .craft-deep-link__arrow { display: none; }
.craft-deep-link.s-soon > small { margin-left: auto; align-self: flex-start; padding: 5px 7px; border: 1px solid currentColor; border-radius: 20px; color: var(--oker-licht); font-size: 9px; letter-spacing: .12em; }
.licht .craft-deep-link { border-color: rgba(107, 86, 48, .48); background: rgba(107, 86, 48, .07); }
.licht .craft-deep-link small, .licht .craft-deep-link__arrow, .licht .craft-deep-link.s-soon > small { color: var(--oker-diep); }
.licht .craft-deep-link.s-soon > span:first-child small { color: var(--oker-diep); }
.licht a.craft-deep-link:hover { border-color: var(--oker-diep); background: rgba(107, 86, 48, .13); }
.craft-next { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--mist); }
.craft-next a { color: var(--oker-licht); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.craft-next a:hover { color: var(--wit); }
.craft-next a:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 3px; }
.licht .craft-next { color: var(--inkt-zacht); }
.licht .craft-next a { color: var(--oker-diep); }
.licht .craft-next a:hover { color: var(--inkt); }
.licht .craft-next a:focus-visible { outline-color: var(--oker-diep); }

/* hairline pillars: what we do not do */
.craft-pillars { list-style: none; margin: 4px 0 0; padding: 0; border-top: 2px solid currentColor; }
.craft-pillars li { display: grid; gap: 4px; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--lijn-d); position: relative; }
.craft-pillars li::before { content: ""; position: absolute; left: 0; top: 21px; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--oker-licht); }
.craft-pillars b { font-family: var(--display); font-size: 19px; letter-spacing: -.01em; }
.craft-pillars span { font-size: 15.5px; color: var(--mist); max-width: 50ch; }

/* quality steps: a thread connects the three checks as the section is read */
.craft-qa-wrap { position: relative; margin-top: 4px; }
.craft-qa__thread { position: absolute; left: 17px; top: 22px; bottom: 22px; width: 1px; background: var(--oker-licht); opacity: .65; transform-origin: top center; pointer-events: none; }
.craft-qa { list-style: none; margin: 0; padding: 0; border-top: 2px solid currentColor; position: relative; }
.craft-qa li { display: flex; gap: 18px; align-items: center; min-height: 70px; padding: 14px 0; border-bottom: 1px solid rgba(239, 236, 236, .2); }
.craft-qa b { display: grid; place-items: center; flex: 0 0 35px; width: 35px; height: 35px; border-radius: 50%; border: 1px solid var(--oker-licht); background: var(--bos-diep); font-family: var(--display); font-size: 18px; line-height: 1; color: var(--oker-licht); font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.craft-qa span { font-size: 16px; color: var(--wit); }

/* ---------- skin: one sticky composition (heading + real skin + four caption states), then four skins ---------- */
.craft-skin { --stick: calc(var(--kop-h) + 76px + 14px); }
.craft-skin__head { display: grid; gap: 14px; }
.craft-skin__head > * { margin: 0; }
.craft-skin__head .kop2 { font-size: clamp(30px, 3.6vw, 54px); }
.craft-skin__intro { color: var(--inkt-zacht); font-size: 16.5px; max-width: 44ch; }

/* Without the script (or with reduced motion) this is a plain two-column layout: stage, then text and captions. */
.craft-study__sticky { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--col-gap); align-items: start; }
.craft-study__text { display: grid; gap: 28px; align-content: start; min-width: 0; }
.craft-study__runway { display: none; }
.craft-stage {
  margin: 0; position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #F6F3EC; border: 1px solid var(--steen-lijn); border-radius: var(--r-tile); box-shadow: 0 18px 48px rgba(29, 28, 24, .1);
}
.craft-stage__view { position: relative; overflow: hidden; isolation: isolate; background: #F6F3EC; aspect-ratio: 16 / 10; width: 100%; }
/* The photo is on white: multiply lets the white become the stage colour (no box, no filter on the skin). */
.craft-stage__world {
  position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 2 / 1; margin-top: -25%;
  transform-origin: 0 0; mix-blend-mode: multiply; will-change: transform;
}
.craft-stage__world img { display: block; width: 100%; height: 100%; }
.craft-stage__reticle { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; opacity: 0; visibility: hidden; }
.craft-stage__reticle i { position: absolute; width: 20px; height: 20px; border: 0 solid var(--oker-licht); filter: drop-shadow(0 0 1px rgba(16, 15, 13, .55)); }
.craft-stage__reticle i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.craft-stage__reticle i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.craft-stage__reticle i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.craft-stage__reticle i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }

/* Locator: the whole skin in miniature, everything outside the current view dimmed. */
.craft-stage__locator { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; gap: 5px; width: max-content; padding: 7px 8px 8px; background: rgba(246, 243, 236, .94); border: 1px solid rgba(107, 86, 48, .45); border-radius: 4px; }
.craft-stage__locator small { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oker-diep); }
.craft-stage__map { position: relative; width: 176px; aspect-ratio: 2 / 1; overflow: hidden; isolation: isolate; background: #F6F3EC; }
.craft-stage__map img { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; }
.craft-stage__map b { position: absolute; inset: 0; transform-origin: 0 0; box-shadow: 0 0 0 999px rgba(246, 243, 236, .7); border: 2px solid var(--oker-diep); }
.craft-stage__marker { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--steen-lijn); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--inkt-zacht); }
.craft-stage__count { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.craft-stage__count b { font-family: var(--display); font-size: 21px; letter-spacing: 0; color: var(--oker-diep); }
.craft-stage__ticks { display: flex; gap: 5px; }
.craft-stage__ticks i { width: 22px; height: 2px; background: var(--steen-lijn); }
.craft-stage__ticks i.is-active { background: var(--oker-diep); }
.craft-stage__name { margin-left: auto; color: var(--inkt); }

.craft-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.craft-step { display: grid; gap: 6px; align-content: start; padding-left: 18px; border-left: 2px solid var(--oker-diep); }
.craft-step small { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oker-diep); }
.craft-step h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.15; }
.craft-step p { margin: 0; color: var(--inkt-zacht); max-width: 42ch; }

/* Live: the whole composition is CSS-sticky under the shell and route bars while the runway scrolls past.
   One GSAP timeline reads the scroll through the runway; captions are layered in one grid cell and cross-fade. */
.craft-study.is-live .craft-study__sticky { position: sticky; top: var(--stick); height: calc(100svh - var(--stick) - 16px); min-height: 420px; align-items: stretch; }
.craft-study.is-live .craft-stage { min-height: 0; }
.craft-study.is-live .craft-stage__view { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
.craft-study.is-live .craft-study__runway { display: block; height: 300svh; }
.craft-study.is-live .craft-study__text { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; min-height: 0; }
.craft-study.is-live .craft-steps { align-self: center; align-items: center; gap: 0; transform: translateY(-18px); }
.craft-study.is-live .craft-step { grid-area: 1 / 1; }

@media (max-width: 899px) {
  .craft-skin { --stick: calc(var(--kop-h) + 62px + 8px); }
  .craft-skin__head .kop2 { font-size: clamp(26px, 7vw, 36px); }
  .craft-skin__head { gap: 10px; }
  .craft-skin__intro { font-size: 15px; max-width: none; }
  .craft-study__sticky { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .craft-study__text { display: contents; }
  .craft-skin__head { order: 0; }
  .craft-stage { order: 1; }
  .craft-steps { order: 2; }
  .craft-step p { max-width: none; font-size: 15px; }
  .craft-stage__view { aspect-ratio: 4 / 3; }
  .craft-stage__map { width: 104px; }
  .craft-stage__locator { top: 8px; right: 8px; }
  .craft-study.is-live .craft-study__sticky { display: flex; flex-direction: column; gap: 12px; height: calc(100svh - var(--stick) - 8px); min-height: 0; background: var(--steen); }
  .craft-study.is-live .craft-stage { flex: 1 1 0; }
  .craft-study.is-live .craft-stage__view { min-height: 140px; }
  .craft-study.is-live .craft-steps { align-items: start; margin-bottom: clamp(56px, 10svh, 96px); transform: none; }
  .craft-study.is-live .craft-step h3 { font-size: 19px; }
  .craft-study.is-live .craft-study__runway { height: 260svh; }
}
/* Tablet: the route bar is 76px tall until 560px, so the sticky composition clears it by 14px. */
@media (min-width: 561px) and (max-width: 899px) { .craft-skin { --stick: calc(var(--kop-h) + 76px + 14px); } }
@media (max-width: 899px) and (max-height: 700px) { .craft-study.is-live .craft-skin__intro { display: none; } }
@media (max-width: 899px) and (max-height: 640px) { .craft-study.is-live .craft-steps { margin-bottom: 24px; } }

.craft-skins { margin-top: clamp(72px, 9vw, 128px); display: grid; gap: 20px; }
.craft-skins__head { display: grid; gap: 8px; max-width: 62ch; }
.craft-skins__head h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.015em; }
.craft-skins__head p { margin: 0; color: var(--inkt-zacht); }
.craft-skins__picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.craft-skins__picker button {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; text-align: left; cursor: pointer;
  font: inherit; color: var(--inkt); background: var(--steen-2); border: 1px solid var(--steen-lijn); border-radius: 12px;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.craft-skins__picker button:hover { border-color: var(--oker-diep); }
.craft-skins__picker button[aria-pressed="true"] { background: #F6F3EC; border-color: var(--oker-diep); box-shadow: 0 0 0 1px var(--oker-diep); }
.craft-skins__picker button:focus-visible { outline: 2px solid var(--oker-diep); outline-offset: 3px; }
.craft-skins__picker i { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--sw); border: 2px solid #F6F3EC; box-shadow: 0 0 0 1px rgba(23, 21, 15, .35); }
.craft-skins__picker span { display: grid; gap: 1px; min-width: 0; }
.craft-skins__picker b { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.craft-skins__picker small { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--inkt-zacht); }
.craft-skins__stage { position: relative; aspect-ratio: 2 / 1; overflow: hidden; isolation: isolate; background: #F6F3EC; border: 1px solid var(--steen-lijn); border-radius: var(--r-tile); }
.craft-skins__item { position: absolute; inset: 0; margin: 0; }
.craft-skins__item img { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; }
.craft-skins__item figcaption { position: absolute; left: 16px; bottom: 12px; display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-caption); font-weight: 600; color: var(--inkt-zacht); }
.craft-ring { width: 9px; height: 9px; flex: none; border: 1.5px solid var(--oker-diep); border-radius: 50%; }
.craft-skins__status { margin: 0; font-size: 13px; color: var(--inkt-zacht); }
.js .craft-skins__item { opacity: 0; visibility: hidden; }
.js .craft-skins__item.is-current { opacity: 1; visibility: visible; }
/* No script: the picker has nothing to drive, so all four skins simply stack with captions. */
html:not(.js) .craft-skins__picker, html:not(.js) .craft-skins__status { display: none; }
html:not(.js) .craft-skins__stage { aspect-ratio: auto; overflow: visible; display: grid; gap: 18px; background: none; border: 0; }
html:not(.js) .craft-skins__item { position: relative; display: block; aspect-ratio: 2 / 1; background: #F6F3EC; border: 1px solid var(--steen-lijn); border-radius: var(--r-tile); overflow: hidden; }

@media (max-width: 560px) {
  .craft-stage__marker { gap: 10px; padding: 10px 12px; font-size: 10.5px; letter-spacing: .12em; }
  .craft-stage__ticks i { width: 14px; }
  .craft-skins__picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .craft-skins__picker button { padding: 8px 10px; gap: 9px; }
  /* On a phone the skin is shown lengthways so it is as large as the screen allows. */
  .craft-skins__stage { aspect-ratio: 5 / 8; }
  .craft-skins__item img { position: absolute; left: 50%; top: 50%; width: 160%; height: auto; transform: translate(-50%, -50%) rotate(90deg); }
  html:not(.js) .craft-skins__stage { aspect-ratio: auto; }
  html:not(.js) .craft-skins__item { aspect-ratio: 5 / 8; }
}

/* chapter 03: the finished-piece photo beside the quality checks */
.craft-section .c-tease__media img.craft-qa-photo { aspect-ratio: 4 / 5; max-height: min(82svh, 820px); object-position: 50% 36%; border-radius: 2px; }

/* chapter 04: one large machine photograph in a composed frame */
.craft-frame { margin: 0; position: relative; display: grid; gap: 12px; }
.craft-frame .craft-atelier-photo { width: 100%; height: auto; aspect-ratio: 5 / 6; max-height: min(88svh, 900px); object-fit: cover; object-position: 55% 40%; border-radius: 2px; position: relative; z-index: 1; }
.craft-frame figcaption { font-size: var(--fs-caption); color: var(--mist); display: flex; gap: 10px; align-items: baseline; }
.craft-frame figcaption .craft-ring { border-color: var(--oker-licht); }
@media (min-width: 901px) {
  .craft-atelier .c-tease--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .craft-frame::before { content: ""; position: absolute; z-index: 0; top: 18px; bottom: 46px; left: -18px; width: 62%; border-left: 1px solid rgba(205, 180, 135, .55); border-top: 1px solid rgba(205, 180, 135, .55); }
}

/* ---------- unit mini-timeline (inline traceability example) ---------- */
.craft-journey__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
.craft-unit { margin: 0; display: grid; gap: 18px; position: sticky; top: calc(var(--kop-h) + 24px); }
.craft-unit__plate { aspect-ratio: 4 / 5; border-radius: var(--r-tile); overflow: hidden; border: 1px solid var(--steen-lijn); position: relative; transition: box-shadow .5s var(--ease-enter), border-color .5s; }
.craft-unit__plate img { width: 100%; height: 100%; object-fit: cover; }
.craft-unit__sample { position: absolute; top: 16px; left: 16px; padding: 7px 10px; background: var(--nacht); color: var(--wit); border: 1px solid var(--oker-licht); font-size: 10px; line-height: 1.2; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; }
.craft-unit.is-shot .craft-unit__plate { border-color: var(--oker-diep); box-shadow: 0 0 0 4px rgba(170, 141, 89, .35); }
.craft-unit figcaption { display: grid; gap: 2px; font-size: 15px; color: var(--inkt-zacht); }
.craft-unit figcaption b { font-family: var(--display); font-size: 20px; color: var(--inkt); letter-spacing: -.01em; }
.craft-unit__status { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--steen-lijn); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--oker-diep); }

.craft-stations { gap: 0; padding-left: 34px; }
.craft-stations::before { left: 5px; top: 17px; bottom: 17px; width: 1px; }
.craft-stations::after { display: none; }
.craft-stations .c-minitl__item { gap: 0; padding-block: 2px; }
/* Selectors are deliberately as specific as components.css's reveal states, which would otherwise repaint the dots. */
.craft-stations .c-minitl__node { left: -34px; top: 11px; width: 11px; height: 11px; border: 1.5px solid var(--oker-diep); transition: background .3s ease, box-shadow .3s ease; }
.licht .craft-stations .c-minitl__item .c-minitl__node, html.motion-ok .licht .craft-stations .c-minitl__item .c-minitl__node { background: var(--steen); box-shadow: none; }
.craft-stations h3 { margin: 0; }
.craft-station {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; min-height: var(--doel); padding: 8px 32px 8px 0; position: relative;
  display: grid; gap: 1px; font: inherit; color: inherit; border-radius: 4px;
}
.craft-station:focus-visible { outline: 2px solid var(--oker-diep); outline-offset: 2px; }
.craft-station time { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--oker-diep); }
.craft-station span { font-family: var(--display); font-weight: 650; font-size: clamp(17px, 1.45vw, 19.5px); letter-spacing: -.01em; line-height: 1.2; color: var(--inkt-zacht); transition: color var(--dur-micro); }
.craft-station:hover span { color: var(--oker-diep); }
.craft-station::after {                          /* chevron: rotates when the station is open */
  content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--oker-diep); border-bottom: 1.5px solid var(--oker-diep); transform: rotate(45deg); transition: transform var(--dur-micro) ease;
}
.craft-station[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
.craft-station[aria-expanded="true"] span { color: var(--inkt); }
.licht .craft-stations .c-minitl__item.is-selected .c-minitl__node, html.motion-ok .licht .craft-stations .c-minitl__item.is-selected .c-minitl__node { background: var(--oker-diep); box-shadow: 0 0 0 3px rgba(107, 86, 48, .2); }
.craft-stations .c-minitl__item.is-selected > :not(.c-minitl__node) { opacity: 1; }
.craft-detail { padding: 4px 0 18px; display: grid; gap: 12px; max-width: 50ch; font-size: 15.5px; }
.craft-detail[hidden] { display: none; }
.craft-detail p { margin: 0; }
.craft-detail dl { margin: 0; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--steen-lijn); font-size: 15px; }
.craft-detail dt { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oker-diep); }
.craft-detail dd { margin: 0; color: var(--inkt); font-weight: 600; }
.craft-sub--journey { margin-top: var(--head-gap); }

@media (max-width: 900px) {
  .craft-journey__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .craft-unit { position: static; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 18px; }
  .craft-unit__plate { aspect-ratio: 4 / 5; }
  .craft-unit figcaption { font-size: 14.5px; }
  .craft-unit figcaption b { font-size: 18px; }
  .craft-unit__status { grid-column: 1 / -1; }
}

/* ---------- close: waterline rings + the one primary action ---------- */
.craft-close { position: relative; overflow: hidden; }
.craft-close .s-wrap { position: relative; z-index: 1; }
.craft-close .intro { margin: 0; }
.craft-reassurance { max-width: 63ch; margin: 20px 0 24px; padding: 14px 0 0; border-top: 1px solid rgba(205, 180, 135, .4); font-size: 14px; line-height: 1.55; color: var(--mist); }
.craft-rings {
  position: absolute; right: -8vw; bottom: -14vw; width: min(60vw, 720px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0; opacity: .55;
  background: repeating-radial-gradient(circle, transparent 0 46px, rgba(205, 180, 135, .2) 46px 47px);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); mask-image: radial-gradient(circle, #000 20%, transparent 70%);
}
@media (max-width: 900px) { .craft-rings { right: -30vw; bottom: -30vw; width: 90vw; } }

/* no-JS: every station detail stays open (the page script folds them) */
html:not(.js) .craft-station::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .craft-unit__plate, .craft-station::after, .craft-order a::after, .craft-deep-link, .craft-deep-link__arrow, .craft-route a, .craft-route a span { transition: none; }
}