:root {
  --cell-target: 30px;
  --tile-scale: .8;
  --dot-size: 3px;
  --fill-time: .7s;                 /* hoe snel de titel zich vult */
}

@media (min-width: 768px)  { :root { --cell-target: 36px; --dot-size: 4px; } }
@media (min-width: 1200px) { :root { --cell-target: 44px; } }
@media (min-width: 1920px) { :root { --cell-target: 54px; --dot-size: 5px; } }

html, body {
  height: auto;
  min-height: 100%;
}

body {
  overflow-x: hidden;
  display: flow-root;                 /* zodat de marge onder de kaart meetelt */
  padding-bottom: 0;
}

/* ---------- Achtergrond (blijft staan bij scrollen) ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
  transition: background-color .3s ease;
  touch-action: none;
}

.grid {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), var(--cell, 30px));
  grid-auto-rows: var(--cell, 30px);
}

.cell { position: relative; }

.cell::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: var(--dot-size);
  height: var(--dot-size);
  background: var(--dot);
  transform: translate(-50%, -50%);
}

.cell.has-item::before,
.cell.no-dot::before { display: none; }

.cell.is-near::before { background: var(--accent); }

.tile {
  position: absolute;
  inset: calc(var(--cell) * (1 - var(--tile-scale)) / 2);
  background: center / contain no-repeat;
  opacity: 0;
  transform: scale(.6);
  filter: var(--icon-filter);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

.tile.is-on {
  opacity: 1;
  transform: scale(1);
  transition: opacity .12s ease-out, transform .18s cubic-bezier(.2, 1.4, .4, 1);
}

.grid.is-focus .tile.is-on { transform: scale(.7); }

/* "Dark" / "Light" boven en onder het thema-vierkant */
.cell-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-name);
  font-weight: 500;
  font-size: calc(var(--cell) * .32);
  line-height: 1;
  color: var(--label);
  transition: color .25s ease, opacity .15s ease;
  pointer-events: none;
}
.cell-label.is-active { color: var(--label-active); }
.cell:has(.tile.is-on) .cell-label { opacity: 0; }
.cell.is-near .cell-label.is-active { color: var(--accent); }
.cell.is-near .cell-label:not(.is-active) {
  color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ---------- Terugpijl + Light/Dark ---------- */
.nav-tiles {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
}
.nav-tiles.is-ready { visibility: visible; }

.nav-tile {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}

.nav-tile img {
  grid-area: 1 / 1;
  width:  calc(var(--cell) * var(--tile-scale));
  height: calc(var(--cell) * var(--tile-scale));
  pointer-events: none;
}

.nav-tile .icon   { filter: var(--icon-filter); }
.nav-tile .accent {
  filter: var(--accent-filter);
  opacity: 0;
  transition: opacity .2s ease;
}

.nav-tile.is-near .accent,
.nav-tile:hover .accent,
.nav-tile:focus-visible .accent { opacity: 1; }

.nav-tile:hover,
.nav-tile:focus-visible { transform: scale(1.5); z-index: 1; }

/* ---------- Witte kaart ---------- */
.card {
  --card-w: min(600px, calc(100% - var(--gutter) * 2));

  position: relative;
  z-index: 2;
  width: var(--card-w);
  /* reserve voor oudere browsers zonder container queries */
  container-type: inline-size;      /* 1vw = 1% van de binnenbreedte van de kaart */
  container-type: inline-size;      /* 1cqw = 1% van de binnenbreedte van de kaart */
  margin: calc(var(--cell, 30px) * 3.5) auto calc(var(--cell, 30px) * 1);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.75rem);
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .3s ease, border-color .3s ease;
}

/* ---------- Titel: About met de Aston-O ---------- */
.work-title {
  --title-mobile-space: 16px;
  position: relative;
  top: 0;
  display: grid;
  place-items: center;
  cursor: default;
  outline: none;
  /* Responsieve titelafstanden staan in page-title.css. */
  text-align: center;
  font-family: var(--font-name);
  font-weight: 400;
  /* "AbOut" is 4.06x de font-size breed (met de O die onder Ab en ut schuift),
     dus 22cqw = het woord vult ~89% van de kaart. */
  /* reserve voor oudere browsers zonder container queries */
  /* Zelfde binnenbreedte als de kaart, ook zonder cqw-ondersteuning. */
  --title-inner-width: calc(min(600px, calc(100vw - var(--gutter) * 2)) - clamp(1rem, 3vw, 2rem) * 2 - 2px);
  font-size: min(calc(var(--title-inner-width) * 0.22), 118.4px);
  font-size: min(22cqw, 118.4px);
  line-height: .95;
  color: var(--heading);
  white-space: nowrap;
}

.work-title__latin,
.work-title__greek { grid-area: 1 / 1; }

/* Het vullen gebeurt per letterdeel. Zou het op het hele woord staan,
   dan tekent dat ook de E mee en krijg je een donker randje rond de E. */
.work-title__pre,
.work-title__rest,
.work-title__greek {
  padding: .12em;                    /* ruimte voor accenten */
  color: transparent;
  background-image: linear-gradient(90deg,
    var(--heading) 0 50%,
    var(--name-empty) 50% 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.work-title__pre,
.work-title__rest,
.work-title__greek {
  background-image: linear-gradient(90deg,
    var(--works-title, var(--heading)) 0 50%,
    var(--name-empty) 50% 100%);
}

/* de Aston-E vult in haar eigen kleur */
.work-title__o {
  padding: .8em .4em;                /* ruimte voor de lussen */
  /* links dichter tegen de b, rechts iets meer lucht voor de ut */
  margin: 0 -.42em 0 -.62em;
  color: transparent;
  background-image: linear-gradient(90deg,
    var(--works-o, var(--script)) 0 50%,
    var(--name-empty) 50% 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* gevuld in rust, en van links naar rechts: eerst Ab, dan de O, dan ut */
.work-title__pre,
.work-title__o,
.work-title__rest {
  background-position: 0 0;
  transition: background-position var(--fill-time) cubic-bezier(.65, 0, .35, 1);
}
.work-title__o    { transition-delay: .1s; }
.work-title__rest { transition-delay: .2s; }

.work-title__greek {
  background-position: 100% 0;       /* leeg, vult bij hover */
  transition: none;
}

.work-title:hover .work-title__pre,
.work-title:hover .work-title__o,
.work-title:hover .work-title__rest,
.work-title:focus .work-title__pre,
.work-title:focus .work-title__o,
.work-title:focus .work-title__rest {
  background-position: 100% 0;
  transition: none;
}

.work-title:hover .work-title__greek,
.work-title:focus .work-title__greek {
  background-position: 0 0;
  transition: background-position var(--fill-time) cubic-bezier(.65, 0, .35, 1);
}

/* het Grieks ligt op het Latijn en wisselt bij hover */
.work-title__greek {
  font-family: "Inter", var(--font-name);
  font-weight: 400;
  font-size: 1.12em;                 /* enkel het Grieks iets groter */
  margin-top: -.2em;                /* zoals bij works */
  opacity: 0;
}

.work-title__latin,
.work-title__greek { will-change: opacity; }   /* vloeiend wisselen, geen hapering */

/* hover of tik: oud-Grieks, zoals bij de naam op de homepagina */
.work-title:hover .work-title__latin,
.work-title:focus .work-title__latin { opacity: 0; }
.work-title:hover .work-title__greek,
.work-title:focus .work-title__greek { opacity: 1; }

.work-title__pre,
.work-title__rest { letter-spacing: 0; }

.work-title__o {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: .01em;                        /* net genoeg lucht naast de O */
  line-height: 0;
  vertical-align: -.12em;
}

/* Regeltje rechtsonder de titel. Het staat los (absolute) in de ruimte die er
   al was onder de titel, dus geen enkele afstand op de pagina verandert. */
.title-wrap { position: relative; }

.work-sub {
  position: absolute;
  top: 100%;
  /* 5.5% = de vrije ruimte rechts van het woord, dus het regeltje eindigt
     precies onder de laatste s van Experiences */
  right: 1.1%;
  margin: 0;
  text-align: right;
  font-family: "Poppins";     
  font-weight: 300;
  /* reserve voor oudere browsers zonder container queries */
  font-size: clamp(.72rem, 2.3vw, .85rem);
  font-size: clamp(.72rem, 2.3cqw, .85rem);
  line-height: 1;
  color: var(--exp-detail);
  font-style: italic;
}


/* ---------- Kleuren die enkel deze pagina gebruikt ---------- */
:root {
  --mood-edge:   var(--c-off-white);   /* rand rond een foto bij hover */
  --mood-chip:   var(--c-off-white);   /* het woordje bij de foto */
  --mood-chip-t: var(--c-grey-900);
  --mood-shadow: rgba(36, 41, 51, .28);
  --mood-ink:    none;                 /* de sierteksten zijn al donker */
  --note:        var(--c-grey-500);
}

:root[data-theme="dark"] {
  --mood-edge:   var(--c-black);
  --mood-chip:   var(--c-black);
  --mood-chip-t: var(--c-white);
  --mood-shadow: rgba(0, 0, 0, .6);
  --mood-ink:    brightness(0) invert(1) brightness(.972549);
  --note:        rgba(248, 248, 248, .6);
}

/* ---------- Introzin ---------- */
.about-intro,
.about-text {
  margin: 0;
  max-width: 62ch;
  font-family: var(--font-name);      /* Poppins, zoals op works */
  font-weight: 400;
  font-size: clamp(.78rem, 1.35vw, .9rem);
  line-height: 1.8;
  color: var(--heading);
}
.about-intro { margin-bottom: .5rem; }

/* ---------- Moodbord ---------- */
.mood {
  position: relative;
  /* het bord loopt links door tot voorbij de rand van de kaart: de bloem
     mag daarin hangen, zodat de foto's zelf de volle breedte krijgen */
  width: calc(100% + clamp(1rem, 3vw, 2rem) + 3%);
  margin: 0 0 -2.5% calc(-1 * clamp(1rem, 3vw, 2rem) - 3%);
  aspect-ratio: 653 / 875;             /* mobiele indeling */
}

.mood__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: var(--r, 1);
  margin: 0;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1),
              box-shadow .35s ease, outline-color .25s ease;
}

.mood__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* geen border-radius: de ronde hoeken zitten al in de beelden zelf,
     een tweede afronding sneed de hoeken een extra keer weg */
}

/* de sierteksten (Favourite flower / Favourite colors) en het madeliefje
   liggen bovenop en vangen geen muis */
.mood__deco { pointer-events: none; z-index: 3; }
.m-flower img, .m-colors img { filter: var(--mood-ink); }

/* ---------- Hover: groter, met rand en het woordje erbij ---------- */
.mood__foto {
  cursor: default;
  outline: 0 solid var(--mood-edge);
  outline-offset: 0;
  /* --radx/--rady staan per tegel onderaan: de rx="8" uit de svg, omgerekend
     naar een percentage van die tegel. Zo volgt de rand bij hover exact
     dezelfde ronding als de foto, op elk schermformaat. */
  border-radius: var(--radx, 0) / var(--rady, 0);
}

.mood__foto:hover,
.mood__foto:focus-visible {
  z-index: 5;
  transform: scale(1.14);
  outline-width: 3px;
  box-shadow: 0 12px 30px var(--mood-shadow);
}

/* het woordje/de woordjes bij een foto */
.mood__chip {
  position: absolute;
  z-index: 6;
  padding: .3em .7em .25em;
  border-radius: 999px;
  background: var(--mood-chip);
  color: var(--mood-chip-t);
  font-family: var(--font-name);
  font-weight: 500;
  /* reserve voor oudere browsers zonder container queries */
  font-size: clamp(.9rem, 3vw, 1.15rem);
  font-size: clamp(.9rem, 3cqw, 1.15rem);
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 6px 16px var(--mood-shadow);
  opacity: 0;
  transform: translateY(.35em) scale(.877);   /* .877 = 1 / 1.14 */
  transform-origin: 0 50%;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .9, .3, 1);
  pointer-events: none;
}
.mood__foto:hover .mood__chip,
.mood__foto:focus-visible .mood__chip { opacity: 1; transform: scale(.877); }

.mood__chip:nth-of-type(1) { top: 10%; left: 78%;  transition-delay: .04s; }
.mood__chip:nth-of-type(2) { top: 47%; right: 77%; transition-delay: .10s; }
.mood__chip:nth-of-type(3) { top: 78%; left: 88%;  transition-delay: .16s; }

/* Op mobiel staan de buitenste kolommen tegen de rand van de kaart: daar
   mogen de woordjes niet naar buiten wijzen. Rechterkolom -> links en
   boven/onder, linkerkolom -> rechts en boven/onder. */
[data-col="r"] .mood__chip:nth-of-type(1) { top: -13%; left: auto; right:  6%; }
[data-col="r"] .mood__chip:nth-of-type(2) { top:  45%; left: auto; right: 84%; }
[data-col="r"] .mood__chip:nth-of-type(3) { top:  98%; left: auto; right: 14%; }

[data-col="l"] .mood__chip:nth-of-type(1) { top: -13%; left:  6%; right: auto; }
[data-col="l"] .mood__chip:nth-of-type(2) { top:  45%; left: 84%; right: auto; }
[data-col="l"] .mood__chip:nth-of-type(3) { top:  98%; left: 14%; right: auto; }

/* ---------- Byron: de foto wisselt bij hover ---------- */
.m-byron { position: absolute; }
.m-byron img { transition: opacity .4s ease; }
.m-byron .mood__swap { position: absolute; inset: 0; opacity: 0; }
.m-byron:hover .mood__swap,
.m-byron:focus-visible .mood__swap { opacity: 1; }

/* ---------- Kleurenpalet: kleur en foto delen één afgeronde vorm ---------- */
.mood__bars { position: absolute; inset: 0; }

.mood__slot {
  position: absolute;
  top: 0;
  height: 99.936%;                     /* 169,891 / 170 */
  width: 15.079%;                      /* 38,9043 / 258 */
}
.mood__slot:nth-of-type(1) { left:  0%; }
.mood__slot:nth-of-type(2) { left: 21.186%; }
.mood__slot:nth-of-type(3) { left: 42.372%; }
.mood__slot:nth-of-type(4) { left: 63.557%; }
.mood__slot:nth-of-type(5) { left: 84.743%; }

.mood__bar {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: var(--bar-color);
  border-radius: 20.561% / 4.709%;     /* rx=8 bij 38.9043 × 169.891 */
  overflow: hidden;
  cursor: default;
}
.mood__bar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  transition: opacity .35s ease;
}
.mood__bar:hover img,
.mood__bar:focus-visible img { opacity: 1; }

/* de naam van de kleur komt boven de balk te staan.
   Let op de selector: .mood__chip:nth-of-type(1) hierboven is sterker dan
   een losse .mood__chip--bar, vandaar .mood__slot ervoor. */
.mood__slot .mood__chip {
  top: auto;
  bottom: 104%;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(.35em) scale(1);
  transition-delay: 0s;
}
.mood__slot:hover .mood__chip,
.mood__slot:focus-within .mood__chip { opacity: 1; transform: translateX(-50%) scale(1); }

/* De silhouetten liggen over de balken. De clip-path volgt de vorm van de
   vrouw: daarbinnen hovert zij, daarbuiten gaan de muisbewegingen door naar
   de kleurbalken eronder. De vorm omsluit alle inkt, dus visueel verandert
   er niets. */
.m-figure {
  z-index: 4;
  pointer-events: none;              /* het vierkant zelf vangt niets */
}
/* De foto zelf wordt NIET geknipt — daar werd ze eerder door afgesneden.
   De clip-path zit op een onzichtbare laag erboven die alleen de muis
   vangt: binnen haar vorm hover je haar, daarbuiten gaan de bewegingen
   door naar de kleurbalken eronder. */
.m-figure img { pointer-events: none; }

.mood__hit {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  clip-path: polygon(30.0% 0.0%, 30.0% 6.1%, 25.1% 8.7%, 23.3% 11.2%, 16.3% 13.7%, 16.3% 16.1%, 16.3% 18.7%, 14.5% 21.2%, 13.1% 23.7%, 12.1% 26.1%, 11.9% 28.7%, 14.7% 31.2%, 18.6% 33.7%, 22.4% 36.1%, 25.8% 38.7%, 27.4% 41.2%, 28.8% 43.7%, 27.4% 46.1%, 25.1% 48.7%, 23.7% 51.2%, 22.4% 53.7%, 21.2% 56.1%, 20.0% 58.7%, 18.8% 61.2%, 17.7% 63.7%, 16.8% 66.1%, 15.8% 68.7%, 14.5% 71.2%, 13.3% 73.7%, 11.7% 76.1%, 11.7% 78.7%, 13.1% 81.2%, 7.5% 83.7%, 6.6% 86.1%, 41.0% 88.7%, 41.0% 100.0%, 59.5% 100.0%, 59.5% 88.7%, 81.1% 86.1%, 87.7% 83.7%, 90.4% 81.2%, 91.1% 78.7%, 92.3% 76.1%, 92.6% 73.7%, 92.6% 71.2%, 92.5% 68.7%, 92.3% 66.1%, 93.4% 63.7%, 93.4% 61.2%, 93.0% 58.7%, 92.1% 56.1%, 91.8% 53.7%, 91.1% 51.2%, 90.5% 48.7%, 89.8% 46.1%, 88.3% 43.7%, 86.2% 41.2%, 43.7% 38.7%, 42.8% 36.1%, 41.8% 33.7%, 40.7% 31.2%, 39.0% 28.7%, 37.6% 26.1%, 36.5% 23.7%, 36.0% 21.2%, 35.6% 18.7%, 35.3% 16.1%, 35.1% 13.7%, 36.9% 11.2%, 39.0% 8.7%, 39.1% 6.1%, 39.1% 0.0%);
}
/* de vrouw en het madeliefje worden wel groter, maar krijgen geen rand
   en geen schaduw: het zijn uitgeknipte vormen, geen rechthoekige foto's */
.m-figure:hover, .m-figure:focus-visible { z-index: 6; }
.m-figure:hover, .m-figure:focus-visible,
.m-daisy:hover,  .m-daisy:focus-visible { outline-width: 0; box-shadow: none; }

/* haar woordje staat rechtsboven, naast het bovenbeen */
.m-figure .mood__chip { top: 4%; left: 62%; right: auto; bottom: auto; }

/* ---------- Bronvermelding en tekst ---------- */
.about-note {
  /* reserve voor oudere browsers zonder container queries */
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  margin: 0 0 clamp(1.5rem, 4cqw, 2.5rem);
  font-family: var(--font-name);
  font-weight: 400;
  font-size: clamp(.68rem, 1.1vw, .78rem);
  line-height: 1.6;
  color: var(--note);
}



/* ---------- Posities: mobiele indeling ---------- */
.m-yellow  { --x: 8.576%; --y: 6.769%; --w: 27.681%; --r: 1.0000; --radx: 4.426%; --rady: 4.426%; }
.m-chalks  { --x: 39.332%; --y: 6.743%; --w: 36.923%; --r: 1.3329; --radx: 3.318%; --rady: 4.423%; }
.m-statue  { --x: 79.173%; --y: 6.769%; --w: 20.827%; --r: 0.7514; --radx: 5.882%; --rady: 4.420%; }
.m-cat  { --x: 8.576%; --y: 72.343%; --w: 32.772%; --r: 1.0000; --radx: 3.738%; --rady: 3.738%; }
.m-curlers  { --x: 8.576%; --y: 50.558%; --w: 20.805%; --r: 0.7990; --radx: 5.889%; --rady: 4.705%; }
.m-figure  { --x: 37.833%; --y: 51.183%; --w: 29.078%; --r: 1.0000; --radx: 4.213%; --rady: 4.213%; }
.m-moon  { --x: 75.191%; --y: 50.639%; --w: 24.809%; --r: 0.9529; --radx: 4.938%; --rady: 4.706%; }
.m-comics  { --x: 44.410%; --y: 72.343%; --w: 26.340%; --r: 0.8000; --radx: 4.651%; --rady: 3.721%; }
.m-stones  { --x: 8.576%; --y: 29.714%; --w: 35.375%; --r: 1.4259; --radx: 3.463%; --rady: 4.938%; }
.m-headphones  { --x: 47.014%; --y: 29.714%; --w: 25.115%; --r: 1.0123; --radx: 4.878%; --rady: 4.938%; }
.m-byron  { --x: 75.191%; --y: 29.714%; --w: 24.809%; --r: 1.0000; --radx: 4.938%; --rady: 4.938%; }
.m-dog  { --x: 73.813%; --y: 72.457%; --w: 26.187%; --r: 0.7991; --radx: 4.678%; --rady: 3.738%; }
.m-daisy  { --x: 0.000%; --y: 0.000%; --w: 19.755%; --r: 1.1518; --radx: 6.202%; --rady: 7.143%; }
.m-palette  { --x: 32.670%; --y: 50.590%; --w: 39.510%; --r: 1.5176; }
.m-flower  { --x: 16.646%; --y: 2.206%; --w: 30.888%; --r: 3.4186; }
.m-colors  { --x: 36.187%; --y: 46.366%; --w: 30.475%; --r: 3.3558; }

/* Op gsm liep "Detail-oriented" rechts van het scherm af. */
@media (max-width: 767px) {
  .m-chalks .mood__chip:nth-of-type(3) { left: auto; right: 0; }
}

/* ---------- Vanaf 768px: de desktopindeling ---------- */
@media (min-width: 768px) {
  .card { margin-top: calc(var(--cell, 30px) * 1); }
  .nav-tiles { z-index: 4; }

  .mood { aspect-ratio: 823 / 641; }

  /* op desktop staan de woordjes weer op hun gewone plek */
  [data-col] .mood__chip:nth-of-type(1) { top: 10%; left: 78%; right: auto; }
  [data-col] .mood__chip:nth-of-type(2) { top: 47%; left: auto; right: 77%; }
  [data-col] .mood__chip:nth-of-type(3) { top: 78%; left: 88%; right: auto; }

  .m-yellow  { --x: 6.804%; --y: 9.240%; --w: 21.964%; }
  .m-chalks  { --x: 31.207%; --y: 9.204%; --w: 29.296%; }
  .m-statue  { --x: 62.819%; --y: 9.240%; --w: 16.525%; }
  .m-cat  { --x: 81.652%; --y: 9.204%; --w: 18.348%; }
  .m-curlers  { --x: 6.804%; --y: 40.465%; --w: 16.507%; }
  .m-figure  { --x: 30.018%; --y: 41.318%; --w: 23.072%; }
  .m-moon  { --x: 59.660%; --y: 40.575%; --w: 19.684%; }
  .m-comics  { --x: 81.652%; --y: 34.321%; --w: 18.348%; }
  .m-stones  { --x: 6.804%; --y: 70.203%; --w: 28.068%; }
  .m-headphones  { --x: 37.303%; --y: 70.203%; --w: 19.927%; }
  .m-byron  { --x: 59.660%; --y: 70.203%; --w: 19.684%; }
  .m-dog  { --x: 81.652%; --y: 65.991%; --w: 18.348%; }
  .m-daisy  { --x: 0.000%; --y: 0.000%; --w: 15.674%; }
  .m-palette  { --x: 25.922%; --y: 40.509%; --w: 31.349%; }
  .m-flower  { --x: 13.208%; --y: 3.011%; --w: 24.508%; }
  .m-colors  { --x: 28.712%; --y: 34.743%; --w: 24.180%; }
}

@media (prefers-reduced-motion: reduce) {
  .mood__item, .mood__chip, .mood__bar img { transition: none; }
}


/* "me" blijft bij de Latijnse titel en wisselt mee bij hover. */
.work-title__me {
  display: block;
  margin-top: -.35em;
  text-align: right;
  padding: .1em .35em .2em;
  font-family: var(--font-script);
  font-size: .38em;
  font-weight: 400;
  line-height: 1.2;
  color: var(--works-o, var(--script));
}
/* De volledige Griekse titel past op één regel. */
.work-title__greek { font-size: .86em; white-space: nowrap; position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }

/* Alleen de Latijnse titel staat lager; de Griekse behoudt haar plek. */
.work-title__latin { position: relative; top: 1.125rem; }