/* ========================================================================== de binnentuin — the shared paper -------------------------------------------------------------------------- Everything every page stands on: the palette, the vertical rhythm, the atmosphere layers, the letter voices, the schetsboek and the toegangskaart. Page-specific movements — the hero and its plants, the motto — stay inline in the page that owns them. Linked, not built. There is still no build step. ========================================================================== */ :root{ --paper:#F4EFE6; --paper-deep:#ECE4D5; --paper-light:#FBF8F1; --ink:#2E4034; --ink-deep:#1C261E; --ink-soft:#46594B; --terracotta:#C97B5A; --terracotta-deep:#B5654A; --sage:#8C9A7E; --gold:#C9A66B; /* The one red on this paper: the heart of the klaproos in the drawings (#D05840 in the petal, #962A12 in its core). Terracotta could not do this job — it is already the colour every touchable line turns on hover, so a heart in it would read as "hovered" rather than as "yours". */ --klaproos:#B23A24; /* ---- vertical rhythm ---- Three steps, used everywhere. Sections are spaced by ONE flex gap on .stage rather than by padding on both neighbours, so the distance between any two movements is the same number and cannot double up. */ --gap-section:clamp(4rem,9vh,6.5rem); /* between movements */ --gap-block:clamp(2rem,4.5vh,3.25rem); /* between blocks within a movement */ --gap-line:clamp(1rem,2.2vh,1.6rem); /* between a line and its neighbour */ /* ---- de luisterplek ---- How wide one opname lies open. The sheets stay 880px — they are a page in a notebook and a notebook does not grow with the screen — but the plek is a drawing at full size beside a column of text, and on a wide desktop 880 left the drawing small with a stretch of empty paper under it. So this one grows with the window and stops at 1120. Below ~1300px nothing changes; a laptop keeps the layout it was drawn for. Only a max-width, so a narrow window simply fills what it has. */ --plek:clamp(880px,68vw,1120px); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:clip} /* Any author `display:` beats the browser's own [hidden] rule, so say it again here — otherwise toggling el.hidden quietly does nothing on a flex row. */ [hidden]{display:none !important} body{ position:relative; font-family:"Spectral",Georgia,serif; background:var(--paper); color:var(--ink); font-weight:400; line-height:1.82; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ---------- Atmosphere: gradient wash + grain + enclosing frame ---------- */ .wash{ position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(120% 90% at 18% 8%, rgba(201,166,107,.16), transparent 55%), radial-gradient(120% 100% at 92% 12%, rgba(201,123,90,.10), transparent 50%), radial-gradient(140% 120% at 50% 120%, rgba(46,64,52,.14), transparent 60%); animation:breathe 24s ease-in-out infinite alternate; } @keyframes breathe{0%{opacity:.85;transform:scale(1)}100%{opacity:1;transform:scale(1.04)}} .grain{ position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* enclosing "garden wall": one tall rectangle spanning the whole page — top edge only at the top, bottom edge only at the very bottom. */ .frame{position:absolute;inset:clamp(11px,2.1vw,30px);z-index:55;pointer-events:none; border:1px solid rgba(46,64,52,.30);} .frame::after{content:"";position:absolute;inset:6px;border:1px solid rgba(46,64,52,.13)} /* ---------- Layout ---------- */ .stage{position:relative;z-index:1;padding:0 clamp(22px,5vw,40px); display:flex;flex-direction:column;gap:var(--gap-section)} section{position:relative} .col{max-width:680px;margin:0 auto} .narrow{max-width:600px} .colwide{max-width:720px;margin:0 auto} p{margin:0 0 1.35em;font-size:clamp(1.06rem,.7rem + .9vw,1.28rem);color:var(--ink-soft);letter-spacing:.002em} p:last-child{margin-bottom:0} p strong{color:var(--ink);font-weight:500} em{font-style:italic} h2{font-family:"Fraunces",serif;font-weight:340;font-variation-settings:"opsz" 96; font-size:clamp(1.55rem,1rem + 1.7vw,2.3rem);line-height:1.2;letter-spacing:-.012em; color:var(--ink-deep);text-align:center} .kicker{ font-family:"Spectral",serif;font-weight:500;font-style:italic; letter-spacing:.36em;text-transform:uppercase; font-size:.72rem;color:var(--terracotta-deep); } /* ---------- the letter voices ---------- These reset only their BOTTOM margin. Resetting the shorthand would also wipe the margin-top the .gap-* utilities put there, and then a block's spacing would silently depend on stylesheet order. */ .stack{font-family:"Fraunces",serif;font-weight:330;font-style:normal; font-size:clamp(1.3rem,.8rem + 1.6vw,2rem);line-height:1.32;color:var(--ink); text-align:center;margin-bottom:0} .stack span{display:block} .stack .accent{color:var(--terracotta-deep);font-style:italic} /* mission / quote-ish lines */ .whisper{font-family:"Fraunces",serif;font-style:italic;font-weight:330; font-size:clamp(1.45rem,.8rem + 2vw,2.6rem);line-height:1.28;color:var(--ink); text-align:center;max-width:20ch;margin-bottom:0;margin-inline:auto} .whisper .em{color:var(--terracotta-deep)} /* a centred Fraunces line that closes a movement */ .cadence{font-family:"Fraunces",serif;font-style:italic;font-weight:330; font-size:clamp(1.3rem,.8rem + 1.6vw,2rem);line-height:1.35; color:var(--ink);text-align:center;margin-bottom:0} .cadence.warm{color:var(--terracotta-deep)} /* small label */ .eyebrow{display:flex;align-items:center;gap:1rem;margin-bottom:2.2rem;color:var(--terracotta-deep)} .eyebrow .t{font-family:"Spectral",serif;font-style:italic;letter-spacing:.28em;text-transform:uppercase;font-size:.72rem} .eyebrow .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--terracotta),transparent)} .eyebrow.centered{justify-content:center} .eyebrow.centered .ln{max-width:90px} .eyebrow.centered .ln.rev{background:linear-gradient(270deg,var(--terracotta),transparent)} .sprig{display:block;margin:0 auto;color:var(--sage)} /* the italic line under a sheet */ .cat-foot{text-align:center;font-style:italic;color:var(--ink-soft); font-size:clamp(.95rem,.8rem + .4vw,1.08rem)} /* ========================================================================== het schetsboek — het blad waarop de opnames staan -------------------------------------------------------------------------- Twee pagina's staan hierop: /tuin/ voor wie een kaartje heeft, en de brief (index.html), die het paadje laat zien en de intro laat horen. Daarom staat het hier en niet in één van die twee. ========================================================================== */ /* `.stage` zet de afstand tussen zijn eigen kinderen, en dat zijn nu de twee kamers. Die verdelen hem binnenin verder, met dezelfde maat. */ .stage-deel{display:flex;flex-direction:column;gap:var(--gap-section)} /* ====================================================================== het schetsboek — a page out of a botanical notebook ---------------------------------------------------------------------- Graph paper, a terracotta margin rule, punched holes and a strip of washi tape. Every opname is mounted the way a naturalist mounts a drawing: a thin ruled box, the plate number in the corner, the name written underneath. Observed and noted — deliberately NOT pinned specimens; nothing in this garden is collected dead. ====================================================================== */ .sketchbook{ --rule-x:clamp(34px,5.2vw,62px); /* where the margin rule stands */ position:relative;max-width:880px;margin:0 auto; padding:clamp(2.4rem,5vw,3.6rem) clamp(1.4rem,4vw,2.8rem) clamp(2.6rem,5vw,3.4rem) calc(var(--rule-x) + clamp(16px,2.4vw,30px)); border:1px solid rgba(46,64,52,.18);border-radius:2px 10px 4px 8px; box-shadow:0 30px 56px -40px rgba(28,38,30,.5); background: linear-gradient(rgba(140,154,126,.08) 1px, transparent 1px) 0 0/26px 26px, linear-gradient(90deg, rgba(140,154,126,.08) 1px, transparent 1px) 0 0/26px 26px, var(--paper-light); } .sketchbook::before{content:"";position:absolute;top:0;bottom:0;left:var(--rule-x); width:1px;background:rgba(201,123,90,.30)} .sketchbook .tape{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg); width:110px;height:30px;background:rgba(201,166,107,.3); border-left:1px dashed rgba(201,166,107,.5);border-right:1px dashed rgba(201,166,107,.5)} /* punched holes: the ground shows through, so they read as holes, not dots */ .hole{position:absolute;left:calc(var(--rule-x) / 2);transform:translateX(-50%); width:13px;height:13px;border-radius:50%;background:var(--paper); box-shadow:inset 0 1px 2px rgba(28,38,30,.30), 0 1px 0 rgba(255,255,255,.5)} .hole.a{top:12%} .hole.b{top:50%} .hole.c{top:88%} .sb-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding-bottom:.9rem;margin-bottom:clamp(1.6rem,3.4vw,2.4rem); border-bottom:1px dashed rgba(46,64,52,.20)} .sb-head .t{font-family:"Fraunces",serif;font-style:italic;font-weight:350; font-size:clamp(1.02rem,.85rem + .5vw,1.2rem);color:var(--ink)} .sb-head .d{font-family:"Spectral",serif;font-style:italic;font-size:.78rem; letter-spacing:.16em;text-transform:uppercase;color:var(--sage);white-space:nowrap} .sb-foot{margin-top:clamp(1.6rem,3.4vw,2.4rem);padding-top:.9rem; border-top:1px dashed rgba(46,64,52,.20); display:flex;align-items:baseline;justify-content:space-between;gap:1rem; font-family:"Spectral",serif;font-style:italic;font-size:.82rem;color:var(--sage)} /* ---------- the plates ---------- */ .plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(1.4rem,3.2vw,2.4rem) clamp(1.2rem,2.6vw,1.9rem)} .plate{display:flex;flex-direction:column;align-items:center;width:100%; text-align:center;cursor:pointer; font:inherit;color:inherit;background:none;border:0;padding:0; -webkit-tap-highlight-color:transparent} .plate .box{position:relative;isolation:isolate;width:100%;aspect-ratio:1/1; display:grid;place-items:center;padding:9%; border:1px solid rgba(46,64,52,.20);background:var(--paper-light); box-shadow:0 1px 0 rgba(255,255,255,.7) inset; transition:border-color .5s ease, box-shadow .5s ease, background .5s ease} .plate .pl{position:absolute;top:.45rem;left:.6rem;z-index:2; font-family:"Fraunces",serif;font-style:italic;font-size:.68rem; letter-spacing:.06em;color:var(--sage)} /* The drawing. multiply drops whatever white is left in the scan onto the paper, so the cream comes through the way ink on paper does. --rot / --hue / --sat vary per plate, so twenty drawings still read as twenty separate observations and not as one printed set. */ .plate img{width:100%;height:100%;object-fit:contain; mix-blend-mode:multiply; filter:hue-rotate(var(--hue,0deg)) saturate(var(--sat,1)) contrast(1.02); transform:rotate(var(--rot,0deg)) scale(var(--sc,1)); transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease} .plate .name{margin-top:.85rem;font-family:"Fraunces",serif;font-weight:400; font-size:clamp(1.02rem,.88rem + .45vw,1.18rem);line-height:1.3;color:var(--ink-deep); transition:color .4s ease} .plate .note{margin-top:.15rem;font-style:italic;font-size:.85rem;line-height:1.5;color:var(--sage)} /* it is audio, so every plate carries its length and a way in */ .plate .listen{margin-top:.5rem;display:inline-flex;align-items:center;gap:.45rem; font-family:"Spectral",serif;font-size:.78rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-soft);font-variant-numeric:tabular-nums} .plate .listen .mark{width:17px;height:17px;border-radius:50%;flex:none; border:1px solid var(--terracotta);display:grid;place-items:center; transition:background .4s ease, border-color .4s ease} .plate .listen .mark svg{width:6px;height:7px;display:block; fill:var(--terracotta-deep);transition:fill .4s ease} .plate:hover .box,.plate:focus-visible .box{ border-color:rgba(201,123,90,.55); background: radial-gradient(70% 60% at 50% 45%, rgba(201,166,107,.16), rgba(201,166,107,0) 70%), var(--paper-light); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 26px -20px rgba(28,38,30,.55)} .plate:hover img,.plate:focus-visible img{transform:rotate(0deg) scale(1.05); filter:hue-rotate(var(--hue,0deg)) saturate(calc(var(--sat,1) * 1.08)) contrast(1.04)} .plate:hover .name,.plate:focus-visible .name{color:var(--terracotta-deep)} .plate:hover .listen .mark,.plate:focus-visible .listen .mark{background:var(--terracotta);border-color:var(--terracotta)} .plate:hover .listen .mark svg,.plate:focus-visible .listen .mark svg{fill:var(--paper-light)} .plate:focus-visible{outline:none} .plate:focus-visible .box{outline:2px solid rgba(201,123,90,.5);outline-offset:3px} /* Waar je gebleven bent, rechtsboven op de plaat. Een zacht groen vinkje als je hem uit hebt, een zacht okeren pauzeteken als je middenin zit. Niets als je er nog niet aan begonnen bent — een leeg vakje hoort niets te melden. */ .plate .stand{position:absolute;top:.5rem;right:.55rem;z-index:3; width:15px;height:15px;display:none;place-items:center} .plate[data-stand="uit"] .stand,.plate[data-stand="bezig"] .stand{display:grid} .plate .stand svg{display:block;width:100%;height:100%} .plate[data-stand="uit"] .stand{color:var(--sage)} .plate[data-stand="bezig"] .stand{color:var(--gold)} .plate .stand .vink{display:none} .plate .stand .pauze{display:none} .plate[data-stand="uit"] .stand .vink{display:block} .plate[data-stand="bezig"] .stand .pauze{display:block} /* Het hartje ernaast, in dezelfde hoek: klaproosrood, en alleen te zien als je die opname bewaard hebt. Het is een merkje, geen knop — ophangen doe je in de luisterplek, hier lees je alleen af wat je hebt gedaan. Staat er ook een vinkje of een pauzeteken, dan schuift het hartje daar links van, zodat de twee merkjes elkaar niet overlappen. `[data-stand]` staat er alleen als er werkelijk iets te melden valt (zie zetStand), dus deze regel hoeft niet te weten wélk teken het is. Iets kleiner dan het vinkje: een dichtgelopen vorm weegt zwaarder dan een haarlijn van dezelfde maat. */ .plate .hartje{position:absolute;top:.5rem;right:.55rem;z-index:3; width:13px;height:13px;display:none;place-items:center;color:var(--klaproos)} .plate[data-fav="1"] .hartje{display:grid} .plate[data-stand] .hartje{right:calc(.55rem + 15px + .34rem)} .plate .hartje svg{display:block;width:100%;height:100%;fill:currentColor;stroke:none} /* ---------- een opname met een gast ---------- Alle opnames zijn Josien alleen; een enkele is een gesprek waar je bij zit. Dat zegt het kaartje drie keer, op drie afstanden: van een meter zie je het strookje over de hoek, van dichterbij lees je wie erbij zit, en als je al aan het kiezen bent staat het woord bij de feiten. Welke opname dit is staat in `gast` in tracks.js, het woord in schetsboek.js, de vorm hier. Het strookje ligt rechtsónder. Rechtsboven staan het vinkje en het hartje, en een band daaroverheen zou die wegpoetsen. Het knippen gebeurt in een eigen laagje en niet met `overflow` op het vakje zelf: de golf naar de volgende steen hangt buiten dat vakje (`left:100%`) en zou dan mee weggeknipt worden. */ .plate .strookje{position:absolute;inset:0;overflow:hidden;z-index:4;pointer-events:none} .plate .band{position:absolute;right:-30%;bottom:9.5%;width:90%; transform:rotate(-45deg);text-align:center;padding:.2rem 0; background:rgba(201,166,107,.34); border-top:1px dashed rgba(201,166,107,.6);border-bottom:1px dashed rgba(201,166,107,.6); font-family:"Spectral",serif;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-soft)} /* De naam onder de titel. Terracotta: dit is het enige aan de plaat dat niet over de tuin gaat maar over wie er zit. */ .plate .gast{margin-top:.2rem;font-family:"Fraunces",serif;font-style:italic; font-weight:350;font-size:.9rem;line-height:1.3;color:var(--terracotta-deep)} .plate .gast + .note{margin-top:.25rem} /* Het woord vóór de lengte, met een punt ertussen. Mocht die regel ooit toch te lang worden (een langer woord, een breder lettertype), dan breekt hij tussen de woorden en niet middenin "31 min" — dat laatste is wat er gebeurt als een flexvakje krimpt in plaats van afbreekt. */ .plate .listen .soort{color:var(--sage)} .plate .listen .soort::after{content:"·";margin:0 .1rem 0 .42rem;color:rgba(140,154,126,.7)} .plate .listen{flex-wrap:wrap;justify-content:center} .plate .listen .soort,.plate .listen .lengte{white-space:nowrap} /* a plate whose drawing has not been made yet — the same soft note the tuin gives an opname whose file is not in the bucket. The plate still opens. */ .plate .wacht{font-family:"Fraunces",serif;font-style:italic;font-size:.92rem; color:rgba(70,89,75,.45);line-height:1.4;max-width:14ch} .plate.ongetekend .box{border-style:dashed;border-color:rgba(46,64,52,.24);background:transparent;box-shadow:none} .plate.ongetekend:hover .box,.plate.ongetekend:focus-visible .box{ border-color:rgba(201,123,90,.45);background:transparent} /* ---------- begin hier, en het paadje ---------- De twee bladen waarop een volgorde staat. "Begin hier" zijn de drie opnames die iedereen als eerste hoort te horen; het paadje zijn de stappen daarna, voor wie niet weet waar te beginnen. Alle andere platen staan los, dus dit zijn de enige twee plekken waar de tuin een lijn trekt. Dezelfde stenen en dezelfde maat op allebei de bladen: het paadje is een raster van vier, `.begin` legt zijn handjevol platen op precies die breedte maar in het midden van het blad. Vandaar flex en geen grid — een raster van vier zou drie platen naar links duwen en een gat rechts laten. Begin hier is een handvol en past dus op één regel; groeit hij ooit voorbij de vier, dan wijst de laatste golf van een regel het niets in. */ .pad{--stap:clamp(1rem,2.2vw,1.5rem); display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(1.1rem,2.4vw,1.6rem) var(--stap)} .begin{--stap:clamp(1rem,2.2vw,1.5rem); display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(1.1rem,2.4vw,1.6rem) var(--stap)} .begin .plate{flex:0 0 calc((100% - 3 * var(--stap)) / 4)} /* Het paadje tussen twee stenen: geen streepje maar één rustige golf, in dezelfde hand als de tekeningen — doorgetrokken en met een stevige lijn, want dit is de enige volgorde die de tuin tekent en die moet je zien. Hij is precies zo breed als de ruimte tussen twee kolommen, dus hij raakt allebei de vakjes en steekt nergens buiten het blad uit. Aan het eind van een rij staat niets meer rechts, dus daar houdt het paadje op. Dat is te weten omdat het aantal kolommen vastligt: met `auto-fit` weet geen enkele regel welke steen de laatste van zijn rij is, en bleef er een kronkeltje het niets in wijzen. De kleur staat als hex in de data-URI: een SVG in een `url()` kent onze variabelen niet, en `var(--sage)` levert daar stilzwijgend niets op. */ .pad .box::after,.begin .plate .box::after,.rij .golf .box::after{content:"";position:absolute;top:calc(50% - 7px); left:100%;width:var(--stap);height:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 q5 -4 10 0 t10 0' fill='none' stroke='%238C9A7E' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%} /* Waar een rij ophoudt staat rechts niets meer, dus houdt het paadje daar op. Elk blok is precies één vakje in het raster — een steen, of het stapeltje van een groep — dus `:nth-child` weet weer welk vakje een rij afsluit. */ .pad > :nth-child(4n) .box::after, .pad > :last-child .box::after, .begin .plate:last-child .box::after{display:none} /* ---------- de groep: een stapeltje met een paperclip ---------- Twee of meer opnames die bij elkaar horen liggen als één stapeltje op het blad: twee vellen die er scheef onder uitsteken, de themaplaat bovenop en een paperclip over de linkerbovenhoek. Welke opnames dat zijn, en hoe de groep heet, staat in GROEPEN in tracks.js; hier staat alleen hoe het eruitziet. De vellen zijn echte elementen en geen box-shadow: een schaduw kan niet scheef liggen en een vel wel, en scheef is precies wat een stapeltje papier van een dikke rand onderscheidt. */ .gk{display:flex;flex-direction:column;align-items:center;width:100%; text-align:center;cursor:pointer; font:inherit;color:inherit;background:none;border:0;padding:0; -webkit-tap-highlight-color:transparent} .gk .stapel{position:relative;width:100%;aspect-ratio:1/1} .gk .vel{position:absolute;inset:0;border:1px solid rgba(46,64,52,.16); background:var(--paper-light); transition:transform .5s cubic-bezier(.2,.7,.2,1)} .gk .vel.a{transform:rotate(-3.4deg) translate(-2px,2px)} .gk .vel.b{transform:rotate(2.8deg) translate(4px,5px)} .gk:hover .vel.a,.gk:focus-visible .vel.a{transform:rotate(-5deg) translate(-4px,2px)} .gk:hover .vel.b,.gk:focus-visible .vel.b{transform:rotate(4.4deg) translate(6px,5px)} .gk .box{position:absolute;inset:0;isolation:isolate; display:grid;place-items:center;padding:11%; border:1px solid rgba(46,64,52,.22);background:var(--paper-light); box-shadow:0 1px 0 rgba(255,255,255,.7) inset; transition:border-color .5s ease, box-shadow .5s ease} /* Het bereik van de stappen die erin zitten, rechtsboven en niet linksboven zoals op een plaat: daar ligt de paperclip overheen. */ .gk .pl{position:absolute;top:.45rem;right:.6rem;z-index:2; font-family:"Fraunces",serif;font-style:italic;font-size:.68rem; letter-spacing:.06em;color:var(--sage)} .gk img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply; filter:hue-rotate(var(--hue,0deg)) saturate(var(--sat,1)) contrast(1.02); transform:rotate(var(--rot,0deg)) scale(var(--sc,1)); transition:transform .8s cubic-bezier(.2,.7,.2,1)} .gk .wacht{font-family:"Fraunces",serif;font-style:italic;font-size:.82rem; color:rgba(70,89,75,.45);line-height:1.4;max-width:12ch} .gk.ongetekend .box{border-style:dashed;border-color:rgba(46,64,52,.24); background:transparent;box-shadow:none} .gk .naam{margin-top:.7rem;font-family:"Fraunces",serif;font-style:italic;font-weight:400; font-size:.96rem;line-height:1.3;color:var(--ink-deep);transition:color .4s ease} .gk .tel{margin-top:.25rem;font-family:"Spectral",serif;font-size:.7rem;letter-spacing:.12em; text-transform:uppercase;color:var(--sage);font-variant-numeric:tabular-nums} .gk:hover .naam,.gk:focus-visible .naam{color:var(--terracotta-deep)} .gk:hover .box,.gk:focus-visible .box{border-color:rgba(201,123,90,.55); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 26px -20px rgba(28,38,30,.55)} .gk:hover img,.gk:focus-visible img{transform:rotate(0deg) scale(1.05)} .gk:focus-visible{outline:none} .gk:focus-visible .box{outline:2px solid rgba(201,123,90,.5);outline-offset:3px} /* De paperclip ligt erop, dus hij vangt geen klikken en heeft een schaduwtje. Hij hangt over de bovenrand: een deel erboven, een deel op het papier. */ .gk .klem{position:absolute;top:-8.4px;left:8%;z-index:4;width:13.2px;height:36px; transform:rotate(-13deg);pointer-events:none; filter:drop-shadow(.6px 1.2px .8px rgba(28,38,30,.22))} .gk .klem svg{display:block;width:100%;height:100%} /* ---------- het venster waarin een groep opengaat ---------- Eén groep tegelijk, over het blad heen, met de themaplaat en het verhaal links en de opnames rechts. Ze staan daar twee naast elkaar en niet vier: de tekening is waar je op kiest, en die moet je dus kunnen zien. Het is het enige in deze tuin dat over de pagina komt te liggen. Dat mag hier: je blijft op het blad staan, en er gaat niets weg om even iets anders te lezen. */ /* Zolang er een venster ligt, scrollt de pagina eronder niet mee: het venster heeft zijn eigen scroll en twee scrollende lagen over elkaar is verwarrend. */ body.vast{overflow:hidden} /* De kolom staat er uitgeschreven bij (`minmax(0,1fr)`) en niet op auto: een auto-kolom groeit mee met de breedste regel die er niet mag afbreken, en dan steekt het venster op een telefoon het scherm uit in plaats van dat de regel afkapt. */ .dek{position:fixed;inset:0;z-index:80;display:grid;grid-template-columns:minmax(0,1fr); place-items:start center; padding:clamp(1rem,4vw,2.6rem);overflow:auto; background:rgba(28,38,30,.38);backdrop-filter:blur(2px)} .venster{position:relative;width:min(940px,100%); padding:clamp(1.8rem,4vw,2.8rem); border:1px solid rgba(46,64,52,.2);border-radius:3px 10px 4px 8px; background:var(--paper-light); box-shadow:0 50px 90px -45px rgba(28,38,30,.75); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.85fr); gap:clamp(1.6rem,3.4vw,2.6rem);align-items:start} .venster .kruis{position:absolute;top:.7rem;right:.9rem;z-index:5;width:32px;height:32px; display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer; font-family:"Fraunces",serif;font-size:1.2rem;line-height:1;color:var(--sage)} .venster .kruis:hover{color:var(--terracotta-deep)} .venster .aanhef{padding-bottom:.9rem;margin-bottom:clamp(1.2rem,2.6vw,1.7rem); border-bottom:1px dashed rgba(46,64,52,.20); font-family:"Spectral",serif;font-style:italic;font-size:.72rem; letter-spacing:.2em;text-transform:uppercase;color:var(--sage)} .venster .themaplaat{position:relative;width:100%;aspect-ratio:1/1; display:grid;place-items:center;padding:6%; border:1px solid rgba(46,64,52,.18);background:var(--paper-light)} .venster .themaplaat img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .venster .themaplaat .wacht{font-family:"Fraunces",serif;font-style:italic;font-size:.88rem; color:rgba(70,89,75,.45);line-height:1.4;max-width:14ch;text-align:center} .venster .naam{margin-top:1rem;font-family:"Fraunces",serif;font-weight:350; font-variation-settings:"opsz" 72; font-size:clamp(1.4rem,1.1rem + 1.1vw,1.95rem);line-height:1.2;color:var(--ink-deep)} .venster .woorden{margin-top:.7rem;font-size:1rem;line-height:1.8;color:var(--ink-soft)} .venster .erbij{margin-top:.9rem;font-size:.92rem;font-style:italic;color:var(--ink-soft)} .venster .erbij a{color:var(--terracotta-deep)} /* de opnames in het venster: gewone platen, in een rij van twee */ .rij{--stap:clamp(1rem,2.2vw,1.5rem);--n:2; display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(1.4rem,3vw,2rem) var(--stap)} .rij > .plate{flex:0 0 calc((100% - (var(--n) - 1) * var(--stap)) / var(--n))} @media (max-width:860px){ .venster{grid-template-columns:1fr} /* Onder elkaar hoeft de themaplaat de hele breedte niet: een vierkant van 390 breed is een muur, en de tekening is er net zo goed op te zien. */ .venster .themaplaat{width:min(260px,62%);margin-inline:auto} } /* Op de twee bladen met een volgorde staan de vakjes dichter op elkaar dan in de catalogus: geen woordje eronder, kleinere titel en een kleiner merkje. In het venster van een groep staat een opname wél met zijn woordje erbij — daar is ruimte, en daar kies je. */ .pad .plate .name,.begin .plate .name{margin-top:.6rem;font-size:.94rem} .pad .plate .listen,.begin .plate .listen{margin-top:.3rem;font-size:.7rem;letter-spacing:.1em} .pad .plate .listen .mark,.begin .plate .listen .mark{width:14px;height:14px} .pad .plate .note,.begin .plate .note{display:none} /* De naam van de gast blijft wél staan waar het woordje wegvalt: dat er nog iemand bij zit is geen sfeer maar wat deze steen van de andere onderscheidt. */ .pad .plate .gast,.begin .plate .gast{font-size:.82rem;margin-top:.15rem} .pad .plate .wacht,.begin .plate .wacht{font-size:.74rem;max-width:11ch} /* ---------- de luisterplek ---------- One opname, opened. The drawing gets its full size, Josiens words stand beside it, and there is one player on the page and no second voice. */ .luister{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr); gap:clamp(1.8rem,4vw,3.2rem);align-items:start;max-width:var(--plek);margin:0 auto} .luister .lp-box{position:relative;aspect-ratio:1/1;display:grid;place-items:center;padding:7%; border:1px solid rgba(46,64,52,.20);border-radius:2px; background: linear-gradient(rgba(140,154,126,.08) 1px, transparent 1px) 0 0/26px 26px, linear-gradient(90deg, rgba(140,154,126,.08) 1px, transparent 1px) 0 0/26px 26px, var(--paper-light); box-shadow:0 24px 44px -34px rgba(28,38,30,.55)} .luister .lp-box .pl{position:absolute;top:.6rem;left:.8rem; font-family:"Fraunces",serif;font-style:italic;font-size:.72rem; letter-spacing:.06em;color:var(--sage)} .luister .lp-box img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply; filter:hue-rotate(var(--hue,0deg)) saturate(var(--sat,1)) contrast(1.02)} .luister .lp-box .wacht{font-family:"Fraunces",serif;font-style:italic;font-size:1rem; color:rgba(70,89,75,.45);text-align:center;max-width:16ch} .luister h2{text-align:left} .luister .lp-meta{font-family:"Spectral",serif;font-style:italic; letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:var(--terracotta-deep); margin-bottom:.7rem;font-variant-numeric:tabular-nums} .luister .lp-note{font-family:"Fraunces",serif;font-style:italic;color:var(--sage); font-size:1.02rem;margin:.5rem 0 0} /* Wie er naast Josien zit, dezelfde regel op dezelfde plek als op het kaartje: tussen de titel en het woordje. Het strookje hoort hier niet, dat lag op het vakje en het vakje is hier de tekening zelf. */ .luister .lp-gast{font-family:"Fraunces",serif;font-style:italic;font-weight:350; font-size:1.06rem;color:var(--terracotta-deep);margin:.45rem 0 0} .luister .lp-gast + .lp-note{margin-top:.25rem} /* Dichtdoen is een kruisje rechtsboven, niet een zin. Escape doet hetzelfde. Dezelfde kolom als de luisterplek eronder (`margin-inline`, niet de afkorting: die zou de margin-top van een .gap-* wissen), anders staat het kruisje tegen de rand van het scherm en niet boven de hoek van wat het dichtdoet. */ .terug-rij{display:flex;justify-content:flex-end; max-width:var(--plek);margin-inline:auto;margin-bottom:clamp(1rem,2.6vh,1.6rem)} .sluit{display:grid;place-items:center;width:38px;height:38px;flex:none; background:none;border:1px solid rgba(46,64,52,.20);border-radius:50%; padding:0;cursor:pointer;color:var(--ink-soft); transition:color .3s ease,border-color .3s ease,background .3s ease} .sluit svg{display:block;width:15px;height:15px} .sluit:hover{color:var(--terracotta-deep);border-color:rgba(201,123,90,.55); background:rgba(201,166,107,.10)} .sluit:focus-visible{outline:2px solid var(--terracotta-deep);outline-offset:3px} .intro{font-family:"Spectral",serif;font-style:italic;color:var(--ink-soft); font-size:1.02rem;line-height:1.72;max-width:54ch;margin:1.2rem 0 1.6rem} /* ---------- the player: a hairline and a bloom ---------- */ .player{display:flex;align-items:center;gap:1rem;max-width:520px} .play{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--terracotta); background:transparent;color:var(--terracotta-deep);cursor:pointer; display:grid;place-items:center;transition:background .35s ease,color .35s ease} .play:hover{background:var(--terracotta);color:var(--paper-light)} .play:focus-visible{outline:2px solid var(--terracotta-deep);outline-offset:3px} .play svg{display:block;width:13px;height:13px} .play .ic-pause{display:none} .play[data-playing="1"] .ic-play{display:none} .play[data-playing="1"] .ic-pause{display:block} .seek{flex:1;appearance:none;-webkit-appearance:none;background:transparent;height:22px;cursor:pointer} .seek::-webkit-slider-runnable-track{height:1px;background:rgba(70,89,75,.32)} .seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%; background:var(--terracotta);margin-top:-5px} .seek::-moz-range-track{height:1px;background:rgba(70,89,75,.32)} .seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--terracotta)} .seek:focus-visible{outline:2px solid var(--terracotta-deep);outline-offset:3px} .time{font-family:"Spectral",serif;font-size:.8rem;color:var(--sage); font-variant-numeric:tabular-nums;min-width:10ch;text-align:right} .soon{font-family:"Spectral",serif;font-style:italic;color:var(--sage);font-size:.92rem;margin:0} /* ---------- de kanttekening ---------- Wat er onder een opname bijgeschreven staat, als die opname er een nodig heeft. Geen kader en geen waarschuwingsdriehoek: dit is een aantekening in de kantlijn, met één zachte streep ernaast, zoals iemand die iets bij haar eigen tekst zet. Hij staat onder de speler, want hij hoort bij wat je net gehoord hebt en niet bij de beslissing om te luisteren. */ .kanttekening{max-width:54ch;margin:1.6rem 0 0; padding-left:clamp(.9rem,2vw,1.2rem);border-left:1px solid rgba(140,154,126,.5)} .kanttekening .lbl{display:block;margin-bottom:.4rem; font-family:"Spectral",serif;font-style:italic; letter-spacing:.2em;text-transform:uppercase;font-size:.68rem; color:var(--terracotta-deep)} .kanttekening p{font-family:"Spectral",serif;font-size:.94rem;line-height:1.75; color:var(--ink-soft);margin:0} .colofon .linkish{background:none;border:0;padding:0;font:inherit;color:var(--sage);cursor:pointer; border-bottom:1px solid rgba(140,154,126,.45);transition:color .3s ease,border-color .3s ease} .colofon .linkish:hover{color:var(--terracotta-deep);border-bottom-color:var(--terracotta-deep)} @media (prefers-reduced-motion:reduce){ .plate img{transition:none} .plate:hover img,.plate:focus-visible img{transform:rotate(var(--rot,0deg)) scale(var(--sc,1))} } /* One phone breakpoint. Two plates side by side still read as plates; one per row would turn the sheet into a very long list. */ @media (max-width:640px){ /* Op een telefoon staat de tuinmuur te dicht op alles wat erin staat: twee lijntjes langs een scherm van 390 breed lezen niet als omsloten maar als druk, en dit is juist de plek die kalm hoort te zijn. Buiten, op een ruimer scherm, blijft hij staan. */ .frame{display:none} .sketchbook{--rule-x:26px; padding:clamp(2rem,6vw,2.6rem) 1.1rem clamp(2rem,6vw,2.6rem) calc(var(--rule-x) + 14px)} .hole{width:10px;height:10px} .plates{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem} .plate .pl{display:none} /* Twee stappen naast elkaar; drie werd te krap voor de titel eronder. Elke tweede steen sluit de rij, dus daar houdt het paadje op. */ .pad{grid-template-columns:repeat(2,1fr);gap:1.2rem var(--stap)} /* Twee op een regel, dus verschuift ook waar een regel ophoudt. De 4n-regel mag weer meedoen en verliest daarna van 2n, waar hij een deel van is. */ .pad > :nth-child(4n) .box::after{display:block} .pad > :nth-child(2n) .box::after, .pad > :last-child .box::after{display:none} .rij > .plate{flex:0 0 calc((100% - var(--stap)) / 2)} .rij > .plate:nth-child(2n) .box::after{display:none} /* Op een plaat van 150px past "gesprek · 31 min" niet meer naast het speelrondje, en hier is het woord ook het minst nodig: het strookje zegt het twee centimeter hoger al, in hoofdletters. De naam onder de titel blijft staan, dus er gaat niets verloren. */ .plate .listen .soort{display:none} .gk .pl{display:none} .begin{gap:1.2rem var(--stap)} .begin .plate{flex:0 0 calc((100% - var(--stap)) / 2)} .begin .plate:nth-child(2n) .box::after{display:none} .sb-head{flex-direction:column;gap:.1rem} .sb-head .d{align-self:flex-start} .luister{grid-template-columns:1fr;gap:1.6rem} .luister .lp-box{max-width:320px;margin:0 auto} } /* ---------- ticket (toegangskaart) ---------- */ .ticket-wrap{display:flex;justify-content:center} .ticket{--bloem:clamp(104px,11vw,132px); position:relative;display:flex;max-width:620px;width:100%;background:var(--paper-light); border:1px solid rgba(46,64,52,.35); box-shadow:0 24px 44px -32px rgba(28,38,30,.5)} .ticket .main{position:relative;flex:1;text-align:left; padding:clamp(1.8rem,4.5vw,2.8rem) calc(var(--bloem) * 1.42) clamp(1.8rem,4.5vw,2.8rem) clamp(1.3rem,4vw,2.6rem)} .ticket .stub{position:relative;width:clamp(86px,16vw,120px);border-left:1px dashed rgba(46,64,52,.45); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem; background:repeating-linear-gradient(180deg, rgba(201,123,90,.07) 0 8px, transparent 8px 16px)} .ticket .stub span{font-family:"Spectral",serif;font-style:italic;writing-mode:vertical-rl; letter-spacing:.3em;text-transform:uppercase;font-size:.68rem;color:var(--terracotta-deep)} /* Het zegel op het strookje: de hondsroos, klein en een beetje scheef. Rood, net als de klaproos die ernaast over de kaart ligt — dat hoort bij elkaar. */ .ticket .stub .zegel{width:40px;height:auto;display:block;mix-blend-mode:multiply;transform:rotate(-9deg)} /* the perforation notches, punched out of the paper at the stub line */ .ticket::before,.ticket::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%; background:var(--paper);border:1px solid rgba(46,64,52,.35);right:calc(clamp(86px,16vw,120px) - 9px)} .ticket::before{top:-10px;border-bottom-color:transparent} .ticket::after{bottom:-10px;border-top-color:transparent} .ticket .lbl{display:block;font-family:"Spectral",serif;font-style:italic;font-size:.7rem; letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.8rem} .ticket .big{font-family:"Fraunces",serif;font-weight:340; font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem);line-height:1.25; color:var(--ink-deep);margin:0 0 1.5rem} /* Een klaproos dwars over de kaart, met de bloem over de bovenrand heen, zodat hij erop ligt in plaats van erop gedrukt te staan, met washi eroverheen. Hij hangt aan een eigen breedte (--bloem), op elk scherm, en de ruimte die `.main` rechts vrijhoudt komt uit datzelfde getal. Hij hing eerst aan de hoogte van de kaart, en dat is precies wat er misging: de kaart op /toegang draagt een prijsregel meer dan die op de brief, werd daardoor 67px hoger, en de bloem groeide mee naar links terwijl de vrijgehouden ruimte (een vaste vw-maat) daar niets van wist. De d van "toevluchtsoord" verdween onder de knop. Twee getallen die bij elkaar horen, dus één bron. De 1.42 is de afdruk van de bloem, niet zijn breedte: hij staat 6 graden scheef en is bijna drie keer zo hoog als breed, dus zijn omhullende doos is ruim anderhalf keer de tekening. Kantel hem verder en dit getal loopt mee. */ .ticket .pers{position:absolute;top:-22px;bottom:auto;right:clamp(6px,2vw,18px); width:var(--bloem); display:block;pointer-events:none;transform:rotate(6deg);transform-origin:50% 45%} .ticket .pers img{width:100%;height:auto;display:block;mix-blend-mode:multiply} .ticket .pers .minitape{position:absolute;top:47%;left:50%;transform:translateX(-50%) rotate(-11deg); width:52px;height:15px;background:rgba(201,166,107,.34); border-left:1px dashed rgba(201,166,107,.6);border-right:1px dashed rgba(201,166,107,.6)} /* De regelhoogte staat er met opzet bij. Een erft de 1.82 van de body, maar een