/* hetwiel — catalogus
   Gebroken wit, veel leegte, ernstig. Eén donker beeld: een 3D-render van het wiel (bron/wiel3d.js).
   Eén lijn: de grond waarop het wiel staat, die doorloopt tot de rand van de pagina. */

@font-face { font-family: "IM Fell"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/im-fell.woff2") format("woff2"); }
@font-face { font-family: "IM Fell"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/im-fell-italic.woff2") format("woff2"); }

:root {
  --papier: #f6f1ea;
  --inkt: #1f1d1a;
  --inkt-2: #5e5a53;     /* bijzaken, 6:1 op papier */
  --lijn: #bdb5aa;       /* de grondlijn */
  --kolom: 17rem;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--papier); scroll-behavior: smooth; overflow-x: clip; }
body {
  color: var(--inkt);
  font: 400 1.1875rem/1.55 "IM Fell", "Iowan Old Style", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* de grondlijn mag tot de rand, niet verder */
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--lijn); }
a:hover { text-decoration-color: var(--inkt); }
a:focus-visible { outline: 1px solid var(--inkt); outline-offset: 4px; }
cite { font-style: italic; }
ul { list-style: none; }

.skip { position: absolute; left: 1.5rem; top: -4rem; z-index: 6; background: var(--inkt); color: var(--papier); padding: .4rem .8rem; text-decoration: none; }
.skip:focus { top: 1.5rem; }

/* Kop */
.kop, main, footer { width: min(100% - 4rem, 74rem); margin-inline: auto; }
@media (max-width: 600px) { .kop, main, footer { width: calc(100% - 3rem); } }
.kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; padding: 2.5rem 0 0; }
.mark { font-style: italic; font-size: 1.375rem; text-decoration: none; }
.kop nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; align-items: baseline; }
.kop nav a { white-space: nowrap; }
.kop nav a { text-decoration: none; color: var(--inkt-2); }
.kop nav a:hover, .kop nav a[aria-current] { color: var(--inkt); }
.langs { display: flex; gap: .35rem; color: var(--inkt-2); }
@media (max-width: 420px) { .kop nav { column-gap: .85rem; font-size: 1.0625rem; } }
@media (max-width: 350px) { .kop nav { column-gap: .6rem; font-size: 1rem; } }

/* Catalogusnummer: tekstkolom en plaat */
.nummer { display: grid; gap: 2rem; padding: 4.5rem 0; }
@media (min-width: 860px) {
  .nummer { grid-template-columns: var(--kolom) minmax(0, 1fr); gap: 5rem; padding: 7.5rem 0; }
  .nummer .tekst { position: sticky; top: 3rem; align-self: start; }
}
@media (max-width: 859px) { .nummer .plaat { order: -1; } }
main > .nummer:first-child { padding-top: 6rem; }

.afdeling { font-weight: 400; font-style: italic; font-size: 1.625rem; line-height: 1.2; padding-top: 6rem; margin-bottom: -2rem; }

/* Bordje */
.bordje { font-size: 1.0625rem; line-height: 1.5; color: var(--inkt-2); }
.bordje h1, .bordje h3 { font: inherit; color: var(--inkt); }
.bordje .omschrijving { margin-top: .9rem; }
.toegang { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; color: var(--inkt); }
.toegang span { font-style: italic; color: var(--inkt-2); }

.zaaltekst { margin-top: 3rem; max-width: 30rem; }
.zaaltekst strong { font-weight: 400; font-style: italic; }
.tekst > .zaaltekst:first-child { margin-top: 0; }

/* Het wiel. De grondlijn loopt door waar de band de grond raakt (--grond, gezet door wiel3d.js). */
.plaat { margin: 0; position: relative; }
.plaat::after {
  content: ""; position: absolute; z-index: -1; left: -100vw; right: -100vw;
  top: var(--grond, 93.5%); height: 1px; background: var(--lijn);
}
.vel { position: relative; aspect-ratio: 5 / 3; }
.vel img, .vel canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* ontwikkelen: het beeld komt op uit het papier */
.vel canvas { opacity: 0; filter: blur(8px) contrast(.55); transition: opacity 5.5s cubic-bezier(.6,0,.3,1), filter 5.5s cubic-bezier(.6,0,.3,1); }
.vel canvas.ontwikkeld { opacity: 1; filter: none; }
.vel canvas.direct { transition: none; }
@media (prefers-reduced-motion: reduce) { .vel canvas { transition: none; } }

/* Projecten: catalogusregels zonder beeld */
.lijst { padding: 4rem 0 2rem; }
.regel { display: grid; gap: .6rem 5rem; padding: 2.5rem 0; }
@media (min-width: 860px) { .regel { grid-template-columns: var(--kolom) minmax(0, 34rem); } }
.uitleg { max-width: 34rem; }

/* Contact */
.balie { display: grid; gap: .35rem; font-size: clamp(1.5rem, 3.4vw, 2rem); font-style: italic; align-self: end; }

footer { padding: 6rem 0 3.5rem; font-size: .9375rem; color: var(--inkt-2); }

/* Foutpagina */
.fout { min-height: 70svh; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Werkwijze: de octrooitekening (src/_includes/schema.njk) ── */
.werkwijze .opening { padding-bottom: 3rem; }
.werkwijze .opening .bordje h1 { font-size: 1.375rem; }
.figuur { margin: 2rem 0 0; }
.schema { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }
.schema > svg { display: block; width: 100%; min-width: 860px; height: auto; }
.veeg { display: none; font-style: italic; color: var(--inkt-2); font-size: .9375rem; margin-bottom: .75rem; }
@media (max-width: 860px) { .veeg { display: block; } }

.schema text { font-family: "IM Fell", Georgia, serif; fill: var(--inkt); }
.schema .t { font-size: 17px; }
.schema .s { font-size: 14px; font-style: italic; fill: var(--inkt-2); }
.schema .nr { font-size: 15px; }
.schema .citaat { font-size: 15px; font-style: italic; }
.vak, .binnen, .lade, .aanwijs, .route, .stippel, .streep, .route-stil { fill: none; stroke: var(--inkt); stroke-linecap: round; stroke-linejoin: round; }
.vak { stroke-width: 1.1; }
.binnen { stroke-width: .5; }
.lade { stroke-width: .7; }
.aanwijs { stroke-width: .6; }
.vak.streep, .streep { stroke-width: 1; stroke-dasharray: 6 5; }
.stippel { stroke-width: 1.1; stroke-dasharray: .5 4.5; }
.route, .route-stil { stroke-width: 1.6; }
.punt { fill: var(--inkt); stroke: none; }

.figuur figcaption { display: grid; gap: 1.25rem 5rem; margin-top: 1.75rem; color: var(--inkt-2); font-size: 1rem; }
@media (min-width: 860px) { .figuur figcaption { grid-template-columns: var(--kolom) 1fr; } }
.fig { color: var(--inkt); }
.onderdelen { columns: 3 11rem; column-gap: 2rem; list-style: none; }
.onderdelen span { display: inline-block; width: 2.2rem; color: var(--inkt); }
.legenda { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; }
@media (min-width: 860px) { .legenda { grid-column: 2; } }
.legenda svg { width: 40px; height: 8px; margin-right: .6rem; vertical-align: middle; overflow: visible; }

.werkwijze .lijst { padding: 2rem 0 0; list-style: none; }
.stapnr { color: var(--inkt-2); margin-right: .35rem; }
.motorkap { margin-top: .6rem; font-size: 1rem; font-style: italic; color: var(--inkt-2); }

/* Eerste bezoek: de tekening komt op uit het papier, daarna wordt de route getrokken (werkwijze.js) */
@keyframes ontwikkel { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes trek { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes verschijn { from { opacity: 0; } to { opacity: 1; } }
.eerste .ontwikkel { animation: ontwikkel 3.2s cubic-bezier(.6, 0, .3, 1) both; }
.eerste .figuur .ontwikkel { animation-delay: .6s; }
.eerste .routes .route { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trek .9s ease-in-out forwards; }
.eerste .routes .punt { opacity: 0; animation: verschijn .25s ease-out forwards; }
.eerste .routes .r1 { animation-delay: 2.4s; } .eerste .routes .k1 { animation-delay: 3.25s; }
.eerste .routes .r2 { animation-delay: 3.3s; } .eerste .routes .k2 { animation-delay: 4.15s; }
.eerste .routes .r3 { animation-delay: 4.2s; } .eerste .routes .k3 { animation-delay: 5.05s; }
.eerste .routes .r4 { animation-delay: 5.1s; } .eerste .routes .k4 { animation-delay: 5.95s; }
@media (prefers-reduced-motion: reduce) {
  .eerste .ontwikkel, .eerste .routes .route, .eerste .routes .punt { animation: none; opacity: 1; filter: none; stroke-dashoffset: 0; }
}

/* ── Register: projecten, contact, stappen en kosten als inventarislijst ── */
.register { width: 100%; border-collapse: collapse; margin-top: 2.5rem; font-size: 1.0625rem; line-height: 1.5; }
.register th, .register td { text-align: left; vertical-align: top; padding: 1.05rem 1.5rem 1.05rem 0; }
.register thead th { font-weight: 400; font-style: italic; color: var(--inkt-2); font-size: .9375rem; padding-top: 0; padding-bottom: .55rem; border-bottom: 1.5px solid var(--inkt); vertical-align: bottom; }
.register tbody tr { border-bottom: 1px solid var(--lijn); }
.register tbody th { font-weight: 400; }
.register .nr { width: 3.25rem; color: var(--inkt-2); }
.register .titel { width: 13rem; }
.register .materiaal { width: 14rem; color: var(--inkt-2); }
.register .omschrijving { color: var(--inkt); }
.register .toegang { width: 9rem; white-space: nowrap; display: table-cell; margin-top: 0; }
.register .toegang a, .register .toegang span { display: block; }
.register .toegang a + a { margin-top: .2rem; }
.register .toegang span { font-style: italic; color: var(--inkt-2); }
.register-kort { max-width: 46rem; }
.register-kort tbody tr:first-child { border-top: 1.5px solid var(--inkt); }
.register-kort tbody th { width: 13rem; font-style: italic; color: var(--inkt-2); }
.register-kort .totaal td, .register-kort .totaal th { color: var(--inkt); }
.contact-intro { margin-top: 1.5rem; }
.afdeling + .register { margin-top: 3rem; }

/* Op een smal scherm: elke regel een blok, met het nummer ervoor */
@media (max-width: 760px) {
  .register thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .register:not(.register-kort) tbody tr:first-child { border-top: 1.5px solid var(--inkt); }
  .register:not(.register-kort) tr { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: .5rem; padding: 1rem 0; }
  .register:not(.register-kort) th, .register:not(.register-kort) td { display: block; width: auto; padding: 0; grid-column: 2; }
  .register:not(.register-kort) .nr { grid-column: 1; grid-row: 1 / span 4; }
  .register:not(.register-kort) .materiaal { font-size: .9375rem; }
  .register:not(.register-kort) .omschrijving { margin-top: .35rem; }
  .register:not(.register-kort) .toegang { margin-top: .5rem; display: block; }
  .register-kort th { width: 6.5rem; }
  .register-kort th, .register-kort td { padding-right: 1rem; }
}