/* Hoe het werkt (/hoe-het-werkt) and Wat komt eraan (/wat-komt-eraan): the marketplace as a route with haltes, in
   the Civios palette and type (docs/design/hoe-het-werkt.md). Every rule is scoped to .hhw, because Propshaft serves this file on every page; the
   tokens live on .hhw, not on :root, where they would clash with the app's own. Unlayered on purpose: it beats the
   legacy element styles of civios.css (headings) without !important. */

/* 1. Tokens ------------------------------------------------------------------------------------------------ */
.hhw {
  --hhw-teal: #1b4d4a;
  --hhw-deep: #16403d;
  --hhw-gold: #ffde59;
  --hhw-mist: #dde6df;
  --hhw-paper: #fafaf9;
  --hhw-sage: #b2c3b8;
  --hhw-muted: #4a544f;

  /* The drawings' colours (script/hoe_het_werkt), per chapter theme below. */
  --hhw-ink: var(--hhw-deep);
  --hhw-face: var(--hhw-paper);
  --hhw-pale: #edf2ee;
  --hhw-accent: var(--hhw-gold);
  --hhw-line: rgb(22 64 61 / .1);
  --hhw-shadow: rgb(22 64 61 / .1);

  --hhw-gutter: max(16px, calc((100% - 1280px) / 2));
  --hhw-rail: 88px;
  --hhw-stop: 48px;
  --hhw-ease: cubic-bezier(.2, .8, .2, 1);

  font-family: "Manrope", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  color: var(--hhw-deep);
}
.hhw :where(h1, h2, h3, p, ul, figure, table) { margin: 0; padding: 0; }
.hhw :where(h1, h2, h3) { color: inherit; font-family: "Sora", ui-sans-serif, system-ui, sans-serif; }
.hhw :where(ul) { list-style: none; }
.hhw .hhw-svg-text { font-family: "Sora", ui-sans-serif, system-ui, sans-serif; }
.hhw .hhw-svg-sign { font-size: 20px; font-weight: 800; }
.hhw :focus-visible { outline: 3px solid var(--hhw-gold); outline-offset: 3px; border-radius: 6px; }

/* 2. Chapters: copy and drawing side by side, the route on the left ----------------------------------------- */
.hhw-chapter {
  --hhw-text: var(--hhw-deep);
  --hhw-text-soft: var(--hhw-muted);
  --hhw-route-rest: var(--hhw-sage);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(64px, 9vw, 120px) var(--hhw-gutter) clamp(64px, 9vw, 120px) calc(var(--hhw-gutter) + var(--hhw-rail));
  background: var(--hhw-mist);
  color: var(--hhw-text);
  scroll-margin-top: 64px;
}
.hhw-chapter[data-theme="paper"] { background: var(--hhw-paper); }
.hhw-chapter[data-theme="teal"] {
  --hhw-text: var(--hhw-paper);
  --hhw-text-soft: rgb(250 250 249 / .78);
  --hhw-route-rest: rgb(250 250 249 / .2);
  --hhw-ink: #0e2b29;
  --hhw-line: rgb(14 43 41 / .12);
  --hhw-shadow: rgb(14 43 41 / .35);
  background: var(--hhw-teal);
}
.hhw-chapter > * { min-width: 0; }
.hhw-chapter--flip .hhw-copy { order: 2; }

/* 3. The route: one gold line through every chapter, filled as far as you scrolled, with a stop per halte --- */
.hhw-rail { position: absolute; top: 0; bottom: 0; left: var(--hhw-gutter); width: var(--hhw-rail); pointer-events: none; }
.hhw-rail-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 8px; margin-left: -4px; border-radius: 4px; background: var(--hhw-route-rest); overflow: hidden; }
.hhw-rail-fill { position: absolute; inset: 0 0 auto; height: calc(var(--fill, 0) * 100%); background: var(--hhw-gold); }
.hhw-chapter--start .hhw-rail-line { top: var(--stop-top, 50%); }
.hhw-chapter--end .hhw-rail-line { bottom: auto; height: var(--stop-top, 50%); }
.hhw-stop {
  position: absolute; left: 50%; top: var(--stop-top, 50%);
  display: grid; place-items: center;
  width: var(--hhw-stop); height: var(--hhw-stop); transform: translate(-50%, -50%);
  border: 3px solid var(--hhw-deep); border-radius: 50%;
  background: var(--hhw-paper); color: var(--hhw-deep);
  font-family: "Sora", ui-sans-serif, sans-serif; font-size: 20px; font-weight: 800;
  transition: background-color .4s var(--hhw-ease), transform .4s var(--hhw-ease);
}
.hhw-stop--start, .hhw-stop--small { width: 22px; height: 22px; }
.hhw-chapter.is-reached .hhw-stop { background: var(--hhw-gold); }
.hhw-chapter.is-reached .hhw-stop:not(.hhw-stop--start, .hhw-stop--small) { transform: translate(-50%, -50%) scale(1.08); }
.hhw-stop-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* 4. Type and links ------------------------------------------------------------------------------------------ */
.hhw-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hhw-copy > p { max-width: 36em; font-size: 17px; line-height: 1.65; color: var(--hhw-text-soft); }
.hhw-title { max-width: 11ch; font-size: clamp(42px, 5.6vw, 80px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.hhw-copy > .hhw-lead { max-width: 30em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; font-weight: 500; color: var(--hhw-text); }
.hhw-heading { max-width: 15ch; font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
/* The halte, like the plate on a bus-stop sign: where you are on the route. */
.hhw-copy > .hhw-halte { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--hhw-text); }
.hhw-halte::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--hhw-gold); box-shadow: 0 0 0 3px var(--hhw-deep); }
.hhw-chapter[data-theme="teal"] .hhw-halte::before { box-shadow: 0 0 0 3px var(--hhw-paper); }
.hhw-link { font-weight: 700; color: var(--hhw-text); text-decoration: underline 3px var(--hhw-gold); text-underline-offset: 6px; transition: text-underline-offset .2s; }
.hhw-link:hover { text-underline-offset: 3px; }
.hhw-onward { font-size: 15px; }
.hhw-onward a { color: var(--hhw-gold); font-weight: 700; }

.hhw-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hhw-button { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; transition: background-color .2s, color .2s, box-shadow .2s; }
.hhw-button--gold { background: var(--hhw-gold); color: var(--hhw-deep); box-shadow: inset 0 -3px rgb(22 64 61 / .18); }
.hhw-button--gold:hover { box-shadow: inset 0 -3px rgb(22 64 61 / .18), 0 6px 18px -8px rgb(22 64 61 / .55); }
.hhw-button--gold:focus-visible { outline-color: var(--hhw-deep); }
.hhw-button--line { box-shadow: inset 0 0 0 2px currentColor; color: var(--hhw-text); }
.hhw-button--line:hover { background: var(--hhw-text); color: var(--hhw-teal); }
.hhw-chapter:not([data-theme="teal"]) .hhw-button--line:hover { color: var(--hhw-paper); }

/* 5. Drawings ------------------------------------------------------------------------------------------------ */
.hhw-art-wrap { display: grid; place-items: center; }
.hhw-art { display: block; width: 100%; height: auto; max-height: 620px; overflow: visible; }
.hhw-art--house { max-height: 760px; }
.hhw-video-frame { border: 6px solid var(--hhw-deep); border-radius: 16px; box-shadow: 10px 10px 0 var(--hhw-gold); }

/* 7. Halte 3: the envelope flies into the postbox once the chapter is seen ------------ */
.hhw-envelope { offset-distance: 0%; offset-rotate: 0deg; }
.hhw-chapter[data-seen] .hhw-envelope { animation: hhw-post 1.9s var(--hhw-ease) .3s both; }
@keyframes hhw-post { from { offset-distance: 0%; } 90% { opacity: 1; } to { offset-distance: 100%; opacity: 0; transform: scale(.4); } }

/* 8. Halte 4: current runs from the town hall into the platform while the chapter is on screen --------------- */
.hhw-current { stroke-dasharray: 16 100; stroke-dashoffset: 16; animation: hhw-current 2.4s linear infinite paused; }
.hhw-chapter[data-active] .hhw-current { animation-play-state: running; }
@keyframes hhw-current { from { stroke-dashoffset: 16; } 70%, to { stroke-dashoffset: -100; } }

/* 9. The Civios-huis: pointing at a bouwsteen brings its floor forward -------------------------------------- */
.hhw-floor { transition: opacity .3s; }
.hhw-art-wrap[data-floor] .hhw-floor { opacity: .25; }
.hhw-art-wrap[data-floor="platform"] .hhw-floor[data-floor="platform"],
.hhw-art-wrap[data-floor="marktplaats"] .hhw-floor[data-floor="marktplaats"],
.hhw-art-wrap[data-floor="coaches"] .hhw-floor[data-floor="coaches"],
.hhw-art-wrap[data-floor="community"] .hhw-floor[data-floor="community"] { opacity: 1; }
.hhw-floors { display: grid; gap: 4px; width: 100%; max-width: 36em; margin-top: 4px; }
.hhw-floors li { padding: 12px 0 12px 18px; border-left: 4px solid var(--hhw-sage); transition: border-color .2s; }
.hhw-floors li:hover { border-color: var(--hhw-gold); }
.hhw-floors h3 { font-size: 18px; font-weight: 700; }
.hhw-floors p { margin-top: 2px; font-size: 16px; line-height: 1.55; color: var(--hhw-text-soft); }

/* 10. Wat komt eraan: the whole roadmap in one frame, sized so title, frame and signs fit one screen ----------- */
/* The page fills the space between header and footer, with the frame in the middle of it. */
main:has(> .hhw-roadmap) { display: flex; flex-direction: column; }
.hhw-roadmap { flex: 1; display: flex; flex-direction: column; overflow-x: clip; }
.hhw-scene-page { --hhw-soil: var(--hhw-teal); flex: 1; display: grid; grid-template-rows: auto 1fr; align-items: end; gap: 20px; padding: 28px var(--hhw-gutter) 0; background: var(--hhw-mist); }
.hhw-scene-head { align-self: start; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.hhw-scene-intro { display: grid; gap: 10px; }
.hhw-title--compact { max-width: none; font-size: clamp(36px, 4vw, 56px); }
.hhw-scene-intro .hhw-lead { max-width: 34em; font-size: 18px; line-height: 1.5; font-weight: 500; }
.hhw-scene-cta { display: grid; gap: 10px; justify-items: start; }
.hhw-scene-cta > p { font-family: "Sora", sans-serif; font-weight: 700; font-size: 18px; }
.hhw-scene-cta .hhw-actions { margin-top: 0; }
/* The panorama runs the full width of the page, with no frame, down to the footer. Its height is what is left under
   the head (so the page fits one screen), at most what the full width gives at 16:7. The drawing is centred and
   bottom-aligned at that height and goes on to the sides; the signs hang in a layer of exactly the drawing's 16:7
   middle part, so they stay over their leader lines whatever the screen's shape. */
.hhw-scene {
  --hhw-scene-h: max(300px, min(calc(100svh - 64px - 250px), calc(100vw * 7 / 16), 640px));
  position: relative; width: 100vw; height: var(--hhw-scene-h); margin-left: calc(50% - 50vw); overflow: hidden;
}
.hhw-art--scene { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
.hhw-scene-signs {
  position: absolute; top: 0; left: 50%; height: 100%; width: calc(var(--hhw-scene-h) * 16 / 7);
  transform: translateX(-50%); container: scene / inline-size; pointer-events: none;
}
/* A sign hangs above its spot on the road (its leader line is in the drawing, at the same x); all four share one row. */
.hhw-sign {
  position: absolute; left: var(--x); top: 1%; width: 14%; transform: translateX(-50%);
  display: grid; gap: .35cqw; padding: 1cqw 1.1cqw 1.1cqw;
  border: 2px solid var(--hhw-deep); border-radius: 10px; background: var(--hhw-paper);
  box-shadow: 5px 5px 0 var(--hhw-deep); pointer-events: auto;
}
.hhw-sign.is-planned { border-style: dashed; box-shadow: none; }
.hhw-sign-zone { display: inline-flex; align-items: center; gap: 8px; font-size: max(10px, .85cqw); font-weight: 700; }
.hhw-sign-zone::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--hhw-gold); box-shadow: 0 0 0 2px var(--hhw-deep); }
.hhw-sign.is-planned .hhw-sign-zone::before { background: transparent; }
.hhw-sign h2 { text-wrap: balance; font-size: max(11.5px, 1.15cqw); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.hhw-sign p:not(.hhw-sign-zone) { font-size: max(10.5px, .9cqw); line-height: 1.45; color: var(--hhw-muted); }
.hhw-sign .hhw-link { font-size: max(10.5px, .9cqw); text-underline-offset: 4px; }
/* The roller creeps forward and back on its stretch. */
.hhw-roller { animation: hhw-roll 3.4s ease-in-out infinite alternate; }
@keyframes hhw-roll { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.hhw-hook { animation: hhw-sway 4s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 1290px 296px; }
@keyframes hhw-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

/* 11. Phones and narrow screens ------------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .hhw { --hhw-rail: 44px; --hhw-stop: 36px; }
  .hhw-chapter { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-right: 16px; }
  .hhw-chapter--flip .hhw-copy { order: 0; }
  .hhw-rail { left: 4px; }
  .hhw-chapter { padding-left: calc(var(--hhw-rail) + 16px); }
  .hhw-stop { font-size: 16px; border-width: 2.5px; }
  .hhw-art { max-height: 420px; }
  .hhw-art--house { max-height: 560px; }
}
@media (max-width: 899px) {
  .hhw-scene { height: auto; overflow: visible; }
  .hhw-art--scene { position: static; height: calc(100vw * 7 / 16); }
  .hhw-scene-signs { position: static; width: auto; height: auto; transform: none; container-type: normal; display: grid; gap: 12px; padding: 18px var(--hhw-gutter) 28px; background: var(--hhw-teal); }
  .hhw-sign { position: static; width: auto; transform: none; padding: 14px 16px; gap: 4px; }
  .hhw-sign-zone, .hhw-sign p:not(.hhw-sign-zone), .hhw-sign .hhw-link { font-size: 14px; }
  .hhw-sign h2 { text-wrap: balance; font-size: 17px; }
}

/* 12. Less motion: the post, the current, the roller and the hook stay still. ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hhw *, .hhw *::before, .hhw *::after { animation: none !important; transition: none !important; }
}