/* sven.bierchecker.nl · het portfolio van Sven Arons (src/studio.ts). De zetkast van een drukker: gebeitst
   ebbenhout, tinnen schotjes, loden letters, proefdrukpapier en twee inkten (ultramarijn en mennierood).
   Eigen wereld, los van BierChecker. Koppen in Grenze Gotisch (de letter van de eerste drukkers), tekst in Geist. */

@font-face { font-family: "Grenze Gotisch"; src: url("/fonts/GrenzeGotisch-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/Caveat-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --wood: #16110d; --wood-2: #201812; --wood-pit: #0e0a07;
  --tin: #6f7780; --tin-hi: #a9b0b8;
  --lead: #aab1b9; --lead-dark: #5d646c; --lead-hi: #dde2e6;
  --paper: #e8e4d9; --paper-ink: #14161b; --paper-soft: #3a3d44;
  --blue: #2146d4; --red-ink: #b8321a; --blue-on-dark: #8aa4ff; --red: #e5482b;
  --text: #ece7da; --text-soft: #bdb6a6;
  --wood-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.16' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.42 0 0 0 0 0.24 0 0 0 0.7 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --paper-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.16 0 0 0 0.9 -0.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --display: "Grenze Gotisch", Georgia, "Times New Roman", serif;
  --sans: "Geist", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; scrollbar-color: var(--tin) var(--wood); background: var(--wood); }
body { margin: 0; color: var(--text); font: 400 18px/1.6 var(--sans); background: var(--wood); }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--blue-on-dark); text-underline-offset: 3px; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--blue-on-dark); outline-offset: 3px; border-radius: 3px; }
.stage :focus-visible, .proef :focus-visible { outline-color: var(--blue); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 20; background: var(--paper); color: var(--paper-ink); padding: 8px 12px; border-radius: 3px; }

/* Hero: de open zetkast met links het gezette papier en rechts het klisjee. */
.hero { background-image: var(--wood-grain); background-size: 1100px 1100px; position: relative; min-height: 100svh; display: flex; align-items: center; padding: 80px 0; overflow: hidden; }
.kast { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .72; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 40% 50%, rgba(22, 17, 13, 0) 0%, rgba(22, 17, 13, .5) 65%, rgba(22, 17, 13, .92) 100%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; justify-items: center; width: 100%; }
.hero.met-portret .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); justify-items: stretch; }
.stage { position: relative; max-width: 820px; padding: clamp(30px, 4.4vw, 64px); color: var(--paper-ink); }
.vel { position: absolute; inset: 0; background: var(--paper); border-radius: 2px; transform: rotate(-1.1deg); box-shadow: 0 34px 70px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .05); background-image: var(--paper-fibre); background-size: 300px 300px; }
.stage > :not(.vel) { position: relative; }
.stage::before { content: ""; position: absolute; inset: -22px; pointer-events: none; background: linear-gradient(#8c939b, #8c939b) 0 6px / 26px 2px no-repeat, linear-gradient(#8c939b, #8c939b) 6px 0 / 2px 26px no-repeat, linear-gradient(#8c939b, #8c939b) 100% 6px / 26px 2px no-repeat, linear-gradient(#8c939b, #8c939b) calc(100% - 6px) 0 / 2px 26px no-repeat, linear-gradient(#8c939b, #8c939b) 0 calc(100% - 6px) / 26px 2px no-repeat, linear-gradient(#8c939b, #8c939b) 6px 100% / 2px 26px no-repeat, linear-gradient(#8c939b, #8c939b) 100% calc(100% - 6px) / 26px 2px no-repeat, linear-gradient(#8c939b, #8c939b) calc(100% - 6px) 100% / 2px 26px no-repeat; }
.stage h1 { font: 700 clamp(58px, 9.4vw, 96px)/.95 var(--display); color: var(--blue); }
.regel { position: relative; display: inline-block; max-width: 100%; }
.regel h1 { position: relative; z-index: 1; text-shadow: 0 0 1.2px rgba(33, 70, 212, .55); }
.haak { position: absolute; left: -18px; top: -12px; width: calc(100% + 36px); height: calc(100% + 46px); opacity: 0; pointer-events: none; }
.zet { display: block; }
.sort { display: inline-block; transform-origin: 50% 62%; padding: 0 .02em; }
.w { display: inline-block; white-space: nowrap; }
.sort-gap { display: inline-block; width: .3em; }
.stage .lead { font-size: clamp(18px, 2vw, 21px); max-width: 52ch; margin-top: 38px; color: var(--paper-ink); }
.beschikbaar { display: flex; align-items: center; gap: 10px; margin-top: 22px; font: 700 15px/1.3 var(--sans); color: var(--red-ink); }
.stip { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acties { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.knop { display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: #f6f3ea; text-decoration: none; font-weight: 700; padding: 15px 22px; border-radius: 3px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .2); transition: transform .15s; overflow-wrap: anywhere; }
.knop:hover { transform: translateY(-2px); }
.knop:active { transform: translateY(1px); }
.knop:hover .arrow { transform: translateX(3px); }
.arrow { display: inline-block; flex: none; width: 1.05em; height: 1.05em; transition: transform .15s; }
.stage .tekstlink { color: var(--blue); font-weight: 700; text-underline-offset: 5px; }

/* Het klisjee: het portret in een tinnen lijst, in zijn eigen kleuren. */
.klisjee { margin: 0; justify-self: end; width: min(340px, 100%); transform: rotate(1.6deg); }
.klisjee[hidden] { display: none; }
.plaat { position: relative; display: block; border: 7px solid var(--tin-hi); border-radius: 3px; overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, .55), inset 0 0 0 2px var(--tin); isolation: isolate; }
.plaat img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 24%; }
.klisjee figcaption { margin-top: 12px; font-size: 14px; color: var(--text-soft); text-align: right; }

/* Het werk: een zetkast met vakken van verschillende breedte, in elk vak een proefdruk. */
.section { padding: 110px 0 40px; }
.maskkop { overflow: hidden; padding-bottom: .08em; }
.maskkop > span { display: inline-block; font: 700 clamp(44px, 6.2vw, 80px)/1 var(--display); color: #f1ecde; }
.intro { max-width: 56ch; margin-top: 18px; color: var(--text-soft); font-size: 19px; }
.kastgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: 46px; padding: 6px; background: linear-gradient(#8c939b, #6a717a); border-radius: 6px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.vak { display: flex; background: var(--wood-pit); border-radius: 2px; padding: 10px; box-shadow: inset 0 8px 18px rgba(0, 0, 0, .8); }
.vak-wide { grid-column: span 7; } .vak-narrow { grid-column: span 5; } .vak-third { grid-column: span 4; } .vak-six { grid-column: span 6; }
.proef { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 26px; background: var(--paper); color: var(--paper-ink); border-radius: 2px; box-shadow: 0 12px 26px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .06); background-image: var(--paper-fibre); background-size: 300px 300px; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.vak:hover .proef { transform: translateY(-7px) rotate(-.35deg); }
.proef h3 { font: 700 clamp(26px, 2.6vw, 32px)/1.1 var(--display); color: var(--blue); text-wrap: balance; }
.vak-first .proef h3 { font-size: clamp(36px, 4.4vw, 56px); }
.proef p { margin-top: 12px; color: var(--paper-soft); font-size: 17px; }
.proef .rol { color: var(--paper-ink); }
.formule { margin-top: 16px !important; font: 600 clamp(16px, 1.8vw, 20px)/1.35 var(--sans); color: var(--paper-ink) !important; font-variant-numeric: tabular-nums; border-top: 2px solid var(--paper-ink); border-bottom: 2px solid var(--paper-ink); padding: 12px 0; }
.formule b { color: var(--red-ink); }
.formule .som { display: block; margin-top: 6px; font-weight: 400; font-size: 14px; color: var(--paper-soft); }
.loden { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto !important; padding-top: 20px; }
.loden li { background: linear-gradient(var(--lead), #8d949c); color: #15181c; font: 600 13px/1 var(--sans); padding: 7px 10px; border-radius: 2px; box-shadow: inset 0 2px 0 var(--lead-hi), inset 0 -3px 0 var(--lead-dark); }
.soort { margin-top: 18px !important; font: 700 13px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--blue) !important; }
.soort a { color: var(--blue); }
.proef-leeg { background: #120d0a; color: var(--text); box-shadow: none; }
.proef-leeg h3 { color: var(--blue-on-dark); }
.proef-leeg p { color: var(--text); }
.proef-leeg .knop { margin-top: 8px; }

/* Wat ik doe: drie werkwoorden, groot gezet. */
.doen { padding-top: 120px; }
.werkwoorden { margin-top: 40px; }
.werkwoorden li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 48px; align-items: center; padding: 34px 0; border-top: 3px solid var(--tin); }
.werkwoorden li:last-child { border-bottom: 3px solid var(--tin); }
.woord { font: 700 clamp(52px, 8vw, 96px)/1 var(--display); color: var(--blue-on-dark); }
.woord .ch { display: inline-block; }
.werkwoorden p { max-width: 52ch; color: var(--text); font-size: 19px; }

/* Samenwerken: het slotvel in ultramarijn, met een proefvel waarop het rode stempel "Akkoord voor druk" staat. */
.band { position: relative; margin-top: 110px; padding: 100px 0 110px; background: var(--blue); color: #f6f3ea; overflow: hidden; }
.band .maskkop > span { color: #f6f3ea; }
.band .intro { color: #dfe4fb; }
.band .knop { background: #f6f3ea; color: var(--paper-ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18); }
.knop-groot { font-size: clamp(18px, 3vw, 28px); padding: 20px 28px; margin-top: 30px; }
.reg { position: absolute; right: 7%; top: 50%; width: clamp(170px, 22vw, 270px); aspect-ratio: 1; margin-top: -9%; background: var(--paper); background-image: var(--paper-fibre); background-size: 300px 300px; box-shadow: 0 22px 44px rgba(0, 0, 0, .35); transform: rotate(-4deg); pointer-events: none; }
.stempel { position: absolute; left: 6%; top: 20%; width: 88%; height: auto; color: var(--red-ink); transform: rotate(-9deg); opacity: .92; }
.band .wrap { position: relative; z-index: 1; }

.foot { background: #0d0907; color: var(--text-soft); padding: 40px 0 48px; font-size: 15px; }
.foot p + p { margin-top: 8px; }
.foot a { color: var(--blue-on-dark); }

/* Beweging: alleen met JavaScript en zonder "verminder beweging" (html.anim); anders staat alles er meteen. */
.anim .hero:not(.gezet) .sort, .anim .stage .lead, .anim .stage .acties, .anim .klisjee { opacity: 0; }
.anim .vel { clip-path: inset(0 100% 0 0); }
.anim .maskkop > span { transform: translateY(108%); }
.anim .vak { opacity: 0; }
.anim .werkwoorden p { opacity: 0; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .klisjee { justify-self: start; width: min(260px, 70%); }
  .vak-wide, .vak-narrow, .vak-six { grid-column: span 12; }
  .vak-third { grid-column: span 6; }
  .werkwoorden li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .stage { padding: 26px 22px 30px; }
  .stage h1 { font-size: clamp(52px, 17vw, 72px); }
  /* Op een telefoon elk woord op een eigen regel, zodat de zethaak precies om de letters past. */
  .zet .w { display: block; width: max-content; }
  .zet .sort-gap { display: none; }
  .hero { padding: 100px 0 56px; }
  .kast { grid-template-columns: repeat(6, 1fr); padding-top: 70px; }
  .vak-third { grid-column: span 12; }
  .proef { padding: 20px; }
  .section { padding-top: 80px; }
  .band { padding: 72px 0 80px; margin-top: 80px; }
  .band { display: flex; flex-direction: column; }
  .reg { position: relative; order: 2; right: auto; top: auto; margin: 44px 0 0 28px; width: 200px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knop, .arrow, .proef { transition: none; }
  .vak:hover .proef { transform: none; }
}