/* ══════════════════════════════════════════════════════════════════════════
   ONS VERHAAL

   Een opening, een tijdlijn van zes stappen en het contactblok. De krant en
   de kaart (prikbord) en contact halen hun opmaak uit thuis.css; de tijdlijn
   staat hieronder, de animatie ervan in js/zine.js (tijdlijn).
   ══════════════════════════════════════════════════════════════════════════ */

/* #opening in zine.css is een scherm hoog en houdt onderaan de hoogte van de
   tafel vrij; dat hoort bij de thuispagina. Hier is het een titel, en daarna
   begint het verhaal meteen. Zelfde regel als op de receptenpagina. */
#opening{
  min-height:0;
  padding-block:calc(var(--kv-boog,0px) * 71 / 60 + clamp(1rem,3vh,2.2rem))
                clamp(.6rem,2vh,1.4rem);
}
.opening__woord{grid-column:1 / -1}
.opening__kicker{margin:.1rem 0 0;color:var(--goud)}

/* ── De tijdlijn ──────────────────────────────────────────────────────────
   Zes stappen langs een gouden lijn. Drie kolommen: beeld, knoop, tekst, en
   bij elke even stap wisselen beeld en tekst van kant. De knoop staat in de
   middelste kolom en de lijn loopt precies door het midden van die kolom. */
#tijdlijn{position:relative;padding-block:clamp(1.5rem,5vh,3.5rem) var(--lucht)}
.tijdlijn{position:relative}
.tijdlijn__lijn{
  position:absolute;left:50%;top:0;bottom:0;z-index:0;
  width:2px;translate:-50% 0;
  transform-origin:50% 0;
  background:linear-gradient(180deg,
    rgba(249,222,96,0) 0%,
    var(--goud) 4%,
    rgba(249,222,96,.6) 88%,
    rgba(249,222,96,0) 100%);
}
.tijdlijn__stappen{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:clamp(4.5rem,13vh,9rem);
}
.stap{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) clamp(4.5rem,8vw,7rem) minmax(0,1fr);
}
.stap__beeld{grid-column:1;grid-row:1;margin:0;position:relative}
.stap__knoop{
  grid-column:2;grid-row:1;justify-self:center;
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:3.6rem;height:3.6rem;border-radius:50%;
  background:var(--inkt);border:2px solid var(--goud);
  color:var(--goud);font-size:1rem;font-weight:600;letter-spacing:.06em;
  box-shadow:0 0 0 .45rem rgba(42,87,49,.85);
}
.stap__tekst{
  grid-column:3;grid-row:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;
}
.stap:nth-child(even) .stap__beeld{grid-column:3}
.stap:nth-child(even) .stap__tekst{grid-column:1;align-items:flex-end;text-align:right}
.stap__kicker{margin:0;color:var(--goud)}
.stap__kop{margin:0;color:var(--vanille)}
.stap__zin{margin:0;max-width:30ch;color:var(--vanille-zacht)}
.stap__weg{margin:.6rem 0 0}

/* Een foto staat in een lijst: inkt met een ronde rand, zoals de blokken op
   de rest van de site. */
.stap__beeld--foto{
  padding:clamp(.6rem,1vw,.85rem);
  background:var(--inkt);border-radius:var(--rond);
}
.stap__beeld--foto img{
  display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;
  border-radius:var(--rond-in);filter:var(--foto);
}

/* Wat op de plank ligt heeft geen lijst: het ligt er gewoon. */
.stap__beeld--leg{aspect-ratio:4 / 3}
.stap__beeld--schaal{display:grid;place-items:center}
.stap__beeld--schaal > *{grid-area:1 / 1}
.stap__krans{--m:var(--vanille-zacht);width:88%;opacity:.55}
.stap__schaal{position:relative;width:62%;height:auto}

.stap__beeld--prikbord{aspect-ratio:1 / .96;width:min(100%,32rem);justify-self:center}

.stap__ding{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--b);height:auto;
  translate:-50% -50%;rotate:var(--r);
  filter:drop-shadow(0 .8rem 1rem rgba(9,20,12,.4));
}

/* De gedekte tafel: de schalen hebben hun schaduw al in het bestand, dus
   hier geen tweede. */
.stap__beeld--tafel .stap__ding{filter:none}

/* Op een telefoon: de lijn links, de knoop erop, beeld en tekst eronder
   naast de lijn. */
@media (max-width:799px){
  .tijdlijn__lijn{left:1.3rem}
  .tijdlijn__stappen{gap:clamp(3rem,8vh,4.5rem)}
  .stap{grid-template-columns:2.6rem minmax(0,1fr);column-gap:1rem;row-gap:1.1rem;align-items:start}
  .stap__knoop{grid-column:1;grid-row:1;width:2.6rem;height:2.6rem;font-size:.875rem;margin-top:.2rem}
  .stap__beeld,
  .stap:nth-child(even) .stap__beeld{grid-column:2;grid-row:1}
  .stap__tekst,
  .stap:nth-child(even) .stap__tekst{grid-column:2;grid-row:2;align-items:flex-start;text-align:left}
  .stap__beeld--prikbord{justify-self:start}
}

/* Elke stap heeft nu een kop en een paar alinea's: breder, met ruimte
   tussen de alinea's en de kop groot. */
.stap__tekst{gap:.9rem}
.stap__kop{font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.2}
.stap__zin{max-width:46ch;line-height:1.75}
.stap__slot{margin:.4rem 0 0;color:var(--goud);font-size:var(--nl-body);font-weight:500}
.stap__weg{display:flex;flex-wrap:wrap;gap:.7rem}
.stap:nth-child(even) .stap__weg{justify-content:flex-end}
@media (max-width:799px){.stap:nth-child(even) .stap__weg{justify-content:flex-start}}