/* ==========================================================================
   Past editions, each one dressed as its own poster.
   Only today's edition (the home page) is pixel art. An older edition's page
   keeps the same layout (styles.css) but swaps everything that makes the look:
   colours, type, boxes, edges and the effects, after that edition's poster.
   tools/make-past-editions.py adds the markup each look needs: the 1st's
   clothesline, the 2nd's marker doodles and flowchart, the 3rd's painted
   paths and signs, the special edition's swirls and rainbow.
   ========================================================================== */


/* ── Shared by every older edition ─────────────────────────────────────── */

/* No stipple dots and no stepped motion: those belong to today's poster. */
body.theme { background-image: none; }
.theme .section--lilac,
.theme .section--violet,
.theme .closing { background-image: none; }

.theme .btn,
.theme .shot,
.theme .pager__link { transition-timing-function: ease; }
.theme .will-reveal.is-in { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); }

.theme h1,
.theme h2,
.theme h3 { font-weight: var(--display-weight, 400); }
.theme .page-hero__title { text-shadow: none; color: var(--deep); }

/* Line icons in place of pixel ones. */
.theme .ed-icon {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.25em;
}
.theme .hero__meta .ed-icon { color: var(--violet); }
.theme .eyebrow .ed-icon { margin-right: .35rem; }
.theme .site-header__tab .ed-icon { width: 18px; height: 18px; margin-right: .4rem; vertical-align: -4px; }

/* The hand-painted logo those editions used. */
.theme .site-header__brand img { height: 40px; }
.theme .site-footer__logo { width: 220px; filter: none; }

.theme .site-header { border-bottom-width: 2px; }
.theme .back-link { border-bottom-width: 2px; }

.theme .lightbox { background: color-mix(in srgb, var(--deep) 94%, transparent); }
.theme .lightbox__figure img,
.theme .lightbox__figure video { border-width: 3px; }

.theme .poster-reveal { display: block; line-height: 0; }

/* Decorations sit behind the words, never on top of them. */
.theme .page-hero > .container { position: relative; }

/* Paper grain, for the two posters painted on paper. */
body.theme--garden::before,
body.theme--painted::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .3;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}


/* ══════════════════════════════════════════════════════════════════════════
   1st edition: a watercolour of the garden. Thin ink lines, soft washes of
   green and sky blue, artworks pegged on a line between the trees, captions
   in pen capitals.
   ══════════════════════════════════════════════════════════════════════════ */

.theme--garden {
  --paper:      #FAF8EF;
  --lilac-pale: #EEF3E1;
  --lilac:      #DFEACB;
  --lavender:   #9CBDD6;
  --violet:     #557F35;
  --violet-hi:  #678F43;
  --deep:       #34502A;
  --ink:        #2B2A24;
  --ink-soft:   #57544A;
  --wash:       #F3D46A;
  --cream:      #FFFDF6;
  --red:        #B8402A;
  --peg:        #C79A62;

  --font-display: "Architects Daughter", "Karla", cursive;
  --font-label:   "Architects Daughter", "Karla", cursive;
}

.theme--garden .hero__wash {
  background:
    radial-gradient(40% 36% at 12% 10%, rgba(156, 189, 214, .6), transparent 70%),
    radial-gradient(44% 40% at 88% 22%, rgba(85, 127, 53, .3), transparent 68%),
    radial-gradient(52% 40% at 50% 100%, rgba(243, 212, 106, .45), transparent 70%),
    radial-gradient(30% 28% at 70% 72%, rgba(184, 64, 42, .1), transparent 70%);
  filter: blur(18px);
}

.theme--garden .page-hero__title { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); }
.theme--garden .h2,
.theme--garden .closing__title { letter-spacing: .01em; }

/* Ink outlines drawn by hand, and a wash of colour that missed the line. */
.theme--garden :is(.btn, .hero__meta li, .split__media, .shot, .pager__link, .lightbox__close, .lightbox__nav) {
  border: 2px solid var(--ink);
  border-radius: 4px 12px 5px 14px / 14px 5px 12px 4px;
  box-shadow: 5px 6px 0 -1px color-mix(in srgb, var(--drop) 42%, transparent);
}
.theme--garden .btn { --drop: var(--violet); }
.theme--garden .split__media { --drop: var(--lavender); padding: 10px 10px 8px; background: var(--cream); rotate: -1.2deg; }
.theme--garden .pager__link { --drop: var(--lavender); }

/* The photos, like small paintings: a paper mat and a slight tilt. */
.theme--garden .shot { --drop: var(--violet); padding: 6px 6px 20px; background: var(--cream); rotate: -1deg; }
.theme--garden .shot:nth-child(3n+2) { rotate: .8deg; --drop: var(--lavender); }
.theme--garden .shot:nth-child(3n) { rotate: -.4deg; --drop: var(--wash); }
.theme--garden .shot:hover { transform: translateY(-4px); }
.theme--garden .shot .shot__badge { bottom: 26px; left: 12px; }
.theme--garden .shot__caption { background: var(--cream); padding-bottom: 0; }

/* Section edges: a soft wavy wash line. */
.theme--garden .edge::before {
  height: 14px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 14V8Q30 0 60 8T120 8V14Z'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 14px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 14V8Q30 0 60 8T120 8V14Z'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 14px;
}

/* The clothesline: photos from the day pegged on a line, as the poster hung
   its artworks between the trees. */
.clothesline {
  position: relative;
  height: clamp(150px, 19vw, 210px);
  margin-top: calc(clamp(2.2rem, 6vw, 4.2rem) * -.4);
}
.clothesline__rope {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 60px;
  overflow: visible;
}
.clothesline__rope path { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.clothesline__prints { list-style: none; margin: 0; padding: 0; }
.clothesline__prints li {
  position: absolute;
  left: calc(var(--t) * 100%);
  top: calc(var(--y) - 3px);
  translate: -50% 0;
  transform-origin: 50% 0;
  animation: sway 4.6s ease-in-out calc(var(--i) * -.8s) infinite alternate;
}
.clothesline__prints img {
  display: block;
  width: auto;
  height: clamp(78px, 10.5vw, 126px);
  padding: 5px 5px 14px;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 4px 0 -1px rgba(43, 42, 36, .16);
}
/* A wooden peg on each. */
.clothesline__prints li::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 1;
  width: 8px;
  height: 18px;
  translate: -50% 0;
  background: var(--peg);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
@keyframes sway {
  from { rotate: -3deg; }
  to   { rotate: 3deg; }
}
@media (max-width: 640px) {
  .clothesline__prints li:nth-child(even) { display: none; }
}

/* The poster soaks into the paper, like the watercolour it is. */
@property --soak {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 150%;
}
.theme--garden .poster-reveal img {
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 calc(var(--soak) - 22%), transparent var(--soak));
          mask-image: radial-gradient(circle at 50% 42%, #000 calc(var(--soak) - 22%), transparent var(--soak));
  animation: soak 2.4s cubic-bezier(.3, .6, .3, 1) .3s both;
}
@keyframes soak {
  from { --soak: 0%; filter: blur(5px) saturate(.5); }
  to   { --soak: 150%; filter: none; }
}

/* Closing: the sandwich board from the poster, then its four captions. */
.theme--garden .closing__punch { color: var(--violet); }
.aboard {
  position: relative;
  width: min(270px, 74vw);
  margin: clamp(2.4rem, 6vw, 3.2rem) auto 30px;
  padding: 1.3rem 1rem;
  background: #EEF5F7;
  border: 2px solid var(--ink);
  border-radius: 6px 10px 6px 12px;
  box-shadow: inset 0 0 0 7px var(--lavender);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.25;
  text-transform: uppercase;
  rotate: -2deg;
}
.aboard::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 16%;
  right: 16%;
  height: 26px;
  border-inline: 3px solid var(--ink);
}
.captions {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 920px;
  margin: clamp(2rem, 5vw, 2.8rem) auto 0;
  padding: 1rem 0 clamp(2.6rem, 6vw, 3.6rem);
  border-top: 2px solid var(--ink);
  font-family: var(--font-label);
  font-size: clamp(.9rem, .85rem + .25vw, 1.02rem);
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
}
.captions li { padding: 0 1rem; border-left: 2px solid var(--ink); }
.captions li:first-child { border-left: 0; }
@media (max-width: 700px) {
  .captions { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
  .captions li:nth-child(3) { border-left: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   2nd edition: the yellow flyer. Flat yellow, black marker, bubbles that are
   only an outline, the handwriting of its flowchart, and lines that wobble
   like a hand-drawn cartoon.
   ══════════════════════════════════════════════════════════════════════════ */

.theme--flyer {
  --paper:      #FEDE59;
  --lilac-pale: #FEDE59;
  --lilac:      #FFF3BF;
  --lavender:   #894C84;
  --violet:     #1F1B16;
  --violet-hi:  #3A332A;
  --deep:       #1F1B16;
  --ink:        #1F1B16;
  --ink-soft:   #3D3426;
  --wash:       #C63D25;
  --cream:      #FEDE59;
  --red:        #C63D25;

  --font-display: "Gochi Hand", "Karla", cursive;
  --font-label:   "Gochi Hand", "Karla", cursive;
}
.theme--flyer .hero__wash { display: none; }
.theme--flyer .page-hero__title { font-size: clamp(2.8rem, 1.7rem + 4.4vw, 5rem); }
.theme--flyer .closing { --edge-bg: var(--paper); background-color: var(--paper); }
.theme--flyer .btn--ghost { --btn-bg: transparent; }
.theme--flyer .site-footer p { color: var(--lilac); }

/* Marker bubbles: an outline only, drawn on a separate layer so the line can
   wobble without shaking the words inside. */
@keyframes boil {
  0%   { filter: url(#boil-0); }
  33%  { filter: url(#boil-1); }
  67%  { filter: url(#boil-2); }
}
.theme--flyer :is(.btn, .hero__meta li, .pager__link, .lightbox__close, .lightbox__nav) {
  position: relative;
  border: 0;
  box-shadow: none;
  border-radius: 46% 54% 44% 56% / 58% 42% 56% 44%;
}
/* The pager links are wide: a rounded box, not an ellipse, keeps the words inside the line. */
.theme--flyer .pager .pager__link { border-radius: 26px 18px 30px 16px / 18px 28px 16px 26px; padding: 1.1rem 1.6rem; }
.theme--flyer :is(.btn, .hero__meta li, .pager__link, .lightbox__close, .lightbox__nav)::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2.5px solid var(--ink);
  border-radius: inherit;
  pointer-events: none;
  animation: boil .45s steps(1) infinite;
}
.theme--flyer .btn--primary::after { inset: -5px; }
.theme--flyer .hero__meta li { padding: .55rem 1.2rem .55rem .9rem; }
.theme--flyer .btn:hover { transform: rotate(-2deg) scale(1.03); }
.theme--flyer .btn:active { transform: rotate(1deg) scale(.98); }

.theme--flyer :is(.split__media, .shot) {
  border: 2.5px solid var(--ink);
  box-shadow: none;
  border-radius: 20px 12px 24px 10px / 12px 22px 10px 24px;
}
.theme--flyer .split__media { padding: 8px; background: var(--paper); rotate: 2deg; }
.theme--flyer .shot:hover { transform: rotate(-1.5deg); }

/* Between sections, a marker line instead of a colour change. */
.theme--flyer .edge::before {
  bottom: calc(100% - 6px);
  height: 12px;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='12'%3E%3Cpath d='M0 6Q22.5 0 45 6T90 6' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") repeat-x 0 0 / 90px 12px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='12'%3E%3Cpath d='M0 6Q22.5 0 45 6T90 6' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") repeat-x 0 0 / 90px 12px;
}

/* Doodles in the margins of the hero. */
.doodles { position: absolute; inset: 0; pointer-events: none; }
.doodle {
  position: absolute;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: boil .45s steps(1) infinite;
}
.doodle--arrow { display: none; width: 140px; left: 41%; top: 22%; }
.doodle--star { width: 34px; left: 4%; bottom: 10%; fill: var(--red); stroke-width: 1.6; }
.doodle--squiggle { width: 110px; right: 5%; bottom: 6%; }
@media (min-width: 860px) { .doodle--arrow { display: block; } }

/* Marker arrows from one section to the next, drawn as they come into view. */
.flow-link {
  display: block;
  width: 52px;
  height: 60px;
  margin: 0 auto 1.2rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: boil .45s steps(1) infinite;
}
.flow-link path { stroke-dasharray: 260; }

/* The flowchart from the flyer, closing the page. */
.flowchart {
  display: block;
  width: min(560px, 100%);
  margin: clamp(2rem, 5vw, 2.8rem) auto clamp(2.6rem, 6vw, 3.8rem);
  overflow: visible;
  animation: boil .45s steps(1) infinite;
}
.flowchart :is(.flow__bubble, .flow__arrow) {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flowchart .flow__arrow { stroke-dasharray: 260; }
.flowchart text { font-family: var(--font-display); font-size: 26px; text-anchor: middle; fill: var(--ink); }
.flowchart .flow__small { font-size: 19px; }

@supports (animation-timeline: view()) {
  .flow-link path,
  .flowchart .flow__arrow {
    animation: draw linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }
}
@keyframes draw {
  from { stroke-dashoffset: 260; }
  to   { stroke-dashoffset: 0; }
}

/* The flyer is slapped on the wall. */
.theme--flyer .poster-reveal img { animation: slap .7s cubic-bezier(.3, 1.6, .5, 1) .25s both; }
@keyframes slap {
  from { opacity: 0; transform: scale(.82) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   3rd edition: the hand-painted sunset. Orange, pink, red and violet, thick
   wobbly outlines, the garden paths sweeping round in bands of paint, the
   four signs along the bottom; and the website that went with it: Fraunces,
   wobbly cards, hard coloured shadows.
   ══════════════════════════════════════════════════════════════════════════ */

.theme--painted {
  --paper:      #FBF0C9;
  --lilac-pale: #F3E0A2;
  --lilac:      #EFB82C;
  --lavender:   #633795;
  --violet:     #CB2341;
  --violet-hi:  #A51A38;
  --deep:       #3F0A2E;
  --ink:        #3F0A2E;
  --ink-soft:   #6B3A5C;
  --wash:       #EFB82C;
  --cream:      #FFF4D8;
  --orange:     #EC5F1C;
  --pink:       #D53F72;
  --paper-3:    #EAD088;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-label:   "Karla", ui-sans-serif, sans-serif;
  --display-weight: 900;
}
.theme--painted .hero__wash {
  background:
    radial-gradient(42% 38% at 14% 12%, rgba(99, 55, 149, .3), transparent 68%),
    radial-gradient(46% 40% at 86% 6%,  rgba(236, 95, 28, .32), transparent 66%),
    radial-gradient(50% 44% at 50% 96%, rgba(239, 184, 44, .45), transparent 70%),
    radial-gradient(34% 30% at 78% 62%, rgba(213, 63, 114, .22), transparent 70%);
}
.theme--painted .page-hero__title { letter-spacing: -.015em; }
.theme--painted :is(.eyebrow, .back-link, .page-hero__date, .split__caption, .site-header__nav a, .pager__link small) {
  font-weight: 700;
  letter-spacing: .1em;
}
.theme--painted .page-hero__date { font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); }

.theme--painted .btn {
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
}
.theme--painted .btn:hover { box-shadow: 6px 6px 0 var(--ink); }
.theme--painted .btn--ghost { --btn-bg: var(--wash); }
.theme--painted .hero__meta li {
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: none;
}
.theme--painted .hero__meta .ed-icon { color: var(--lavender); }
.theme--painted :is(.pager__link, .lightbox__close, .lightbox__nav) {
  border: 3px solid var(--ink);
  border-radius: 22px 16px 24px 18px / 18px 24px 16px 22px;
  box-shadow: 6px 6px 0 var(--drop);
}
.theme--painted .pager__link:nth-child(2) { --drop: var(--orange); }
.theme--painted .split__media {
  padding: 10px 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 10px 10px 0 var(--lavender);
  rotate: -1.4deg;
}
.theme--painted .shot {
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 12px 30px -18px rgba(63, 10, 46, .8);
}
.theme--painted .shot:hover { transform: translateY(-4px) rotate(-.8deg); }

.theme--painted .edge::before {
  height: 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='16'%3E%3Cpath d='M0 16V9C30 0 60 0 90 9S150 18 180 9V16Z'/%3E%3C/svg%3E") repeat-x 0 0 / 180px 16px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='16'%3E%3Cpath d='M0 16V9C30 0 60 0 90 9S150 18 180 9V16Z'/%3E%3C/svg%3E") repeat-x 0 0 / 180px 16px;
}

/* The garden paths, painted across the hero as the page opens. */
.paths {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  width: 100%;
  height: 62%;
  pointer-events: none;
}
.paths path {
  fill: none;
  stroke-width: 34;
  stroke-linecap: round;
  opacity: .32;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  animation: paint 2.4s cubic-bezier(.4, .1, .2, 1) calc(.2s + var(--i) * .22s) forwards;
}
.paths__orange { stroke: var(--orange); }
.paths__pink   { stroke: var(--pink); }
.paths__purple { stroke: var(--lavender); }
.paths__butter { stroke: var(--wash); }
@keyframes paint { to { stroke-dashoffset: 0; } }

/* The poster is painted on, left to right. */
.theme--painted .poster-reveal img { animation: brush 1.6s cubic-bezier(.5, .1, .25, 1) .3s both; }
@keyframes brush {
  from { clip-path: inset(0 100% 0 0 round 3px); }
  to   { clip-path: inset(0 0 0 0 round 3px); }
}

/* Closing, as its website had it: red, glowing violet and orange, and then
   the poster's orange band with its four signs. */
.theme--painted .closing {
  --edge-bg: var(--violet);
  background-color: var(--violet);
  background-image:
    radial-gradient(38% 46% at 12% 22%, rgba(99, 55, 149, .55), transparent 70%),
    radial-gradient(40% 44% at 88% 70%, rgba(236, 95, 28, .5), transparent 70%);
  color: var(--cream);
}
.theme--painted .closing__punch { color: var(--wash); }
.theme--painted .closing .btn--primary { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.signs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, 2vw, 1.2rem);
  margin: clamp(2.4rem, 6vw, 3.4rem) calc(50% - 50vw) 0;
  padding: clamp(1.3rem, 3vw, 1.8rem) max(var(--gutter), calc(50vw - 560px)) clamp(2.2rem, 5vw, 3rem);
  background: var(--orange);
  border-top: 3px solid var(--ink);
}
.signs li {
  display: grid;
  place-items: center;
  padding: .9rem .8rem;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--lavender);
  border-radius: 10px 14px 8px 16px / 14px 8px 16px 10px;
  box-shadow: 4px 4px 0 var(--violet);
  font: 800 clamp(.82rem, .78rem + .25vw, .95rem)/1.25 var(--font-label);
  letter-spacing: .04em;
  text-transform: uppercase;
  rotate: -1.5deg;
}
.signs li:nth-child(even) { rotate: 1.2deg; }
@media (max-width: 700px) { .signs { grid-template-columns: 1fr 1fr; } }

.theme--painted .site-footer {
  --edge-bg: var(--paper-3);
  background: var(--paper-3);
  color: var(--ink);
}
.theme--painted .site-footer p { color: var(--ink-soft); }
.theme--painted .site-footer .hosted-by a,
.theme--painted .site-footer__community a { color: var(--ink); border-bottom-color: var(--orange); }
.theme--painted .site-footer .hosted-by__avatar { border-color: var(--ink); }


/* ══════════════════════════════════════════════════════════════════════════
   Special edition: its poster was a collage (photos and the logo torn out
   and stuck down, paper stars, Laura's portrait circled in yellow marker),
   and the day's own art was all rainbows and swirls: the Open Canvas and the
   marker drawings from the café tables. So: white paper, bright marker
   colours, rainbow ribbons, groovy lettering, and cut-and-paste on top.
   ══════════════════════════════════════════════════════════════════════════ */

.theme--swirl {
  --paper:      #FFFDF7;
  --lilac-pale: #FFF3F8;
  --lilac:      #FFE3EF;
  --lavender:   #20B2C8;
  --violet:     #D12A6B;
  --violet-hi:  #E13A7B;
  --deep:       #1E2A78;
  --ink:        #1A1530;
  --ink-soft:   #4A4060;
  --wash:       #FFD23F;
  --cream:      #FFFFFF;

  --pink:   #F0508C;
  --orange: #FF8A2B;
  --yellow: #FFD23F;
  --lime:   #8BD346;
  --teal:   #20B2C8;
  --blue:   #2D5BD8;
  --purple: #7A3FC0;

  --font-display: "Shrikhand", "Karla", cursive;
  --font-label:   "Karla", ui-sans-serif, sans-serif;
  --font-poster:  "Poppins", "Karla", ui-sans-serif, sans-serif;

  --marker-yellow: #F5E52B;
  --star-paper:    #F2CE3A;
  --tape:          rgba(240, 228, 190, .88);
  --torn: polygon(0.0% 0.5%, 4.0% 0.2%, 8.0% 0.9%, 12.0% 0.3%, 16.0% 0.1%, 20.0% 0.9%, 24.0% 2.0%, 28.0% 1.8%, 32.0% 1.7%, 36.0% 0.5%, 40.0% 1.2%, 44.0% 0.6%, 48.0% 0.4%, 52.0% 0.2%, 56.0% 0.5%, 60.0% 2.0%, 64.0% 1.8%, 68.0% 1.8%, 72.0% 1.8%, 76.0% 0.4%, 80.0% 0.7%, 84.0% 1.4%, 88.0% 1.6%, 92.0% 1.9%, 96.0% 1.9%, 100.0% 0.2%, 98.7% 4.0%, 98.5% 8.0%, 98.9% 12.0%, 99.6% 16.0%, 99.0% 20.0%, 99.8% 24.0%, 97.9% 28.0%, 98.1% 32.0%, 98.8% 36.0%, 99.3% 40.0%, 98.0% 44.0%, 98.7% 48.0%, 98.1% 52.0%, 98.1% 56.0%, 98.9% 60.0%, 99.1% 64.0%, 98.7% 68.0%, 99.1% 72.0%, 99.6% 76.0%, 99.3% 80.0%, 98.2% 84.0%, 99.9% 88.0%, 99.9% 92.0%, 98.6% 96.0%, 99.4% 100.0%, 96.0% 98.8%, 92.0% 99.0%, 88.0% 99.2%, 84.0% 97.8%, 80.0% 99.6%, 76.0% 99.1%, 72.0% 99.6%, 68.0% 98.6%, 64.0% 99.4%, 60.0% 99.2%, 56.0% 98.4%, 52.0% 99.3%, 48.0% 98.8%, 44.0% 98.0%, 40.0% 99.8%, 36.0% 99.9%, 32.0% 99.5%, 28.0% 98.3%, 24.0% 98.6%, 20.0% 99.5%, 16.0% 99.3%, 12.0% 99.6%, 8.0% 99.0%, 4.0% 99.9%, 0.0% 98.5%, 2.0% 96.0%, 2.1% 92.0%, 1.6% 88.0%, 2.1% 84.0%, 0.0% 80.0%, 0.6% 76.0%, 2.1% 72.0%, 1.7% 68.0%, 0.9% 64.0%, 2.1% 60.0%, 1.4% 56.0%, 1.8% 52.0%, 0.6% 48.0%, 0.4% 44.0%, 1.0% 40.0%, 0.3% 36.0%, 0.8% 32.0%, 2.1% 28.0%, 0.7% 24.0%, 0.0% 20.0%, 0.1% 16.0%, 0.4% 12.0%, 1.7% 8.0%, 0.8% 4.0%);
}
.theme--swirl .hero__wash {
  background:
    radial-gradient(42% 38% at 12% 14%, rgba(240, 80, 140, .22), transparent 68%),
    radial-gradient(46% 40% at 88% 10%, rgba(32, 178, 200, .26), transparent 66%),
    radial-gradient(50% 44% at 50% 98%, rgba(255, 210, 63, .42), transparent 70%),
    radial-gradient(34% 30% at 76% 64%, rgba(45, 91, 216, .16), transparent 70%);
}
.theme--swirl .page-hero__title { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); color: var(--ink); text-shadow: 3px 3px 0 var(--yellow), 6px 6px 0 var(--pink); }
.theme--swirl :is(.eyebrow, .back-link, .page-hero__date, .split__caption, .site-header__nav a, .pager__link small) {
  font-weight: 800;
  letter-spacing: .08em;
}

.theme--swirl .btn {
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--yellow), 7px 7px 0 var(--ink);
}
.theme--swirl .btn:hover { box-shadow: 5px 5px 0 var(--yellow), 9px 9px 0 var(--ink); }
.theme--swirl .hero__meta li {
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: none;
}
.theme--swirl .hero__meta .ed-icon { color: var(--blue); }
/* Bigger boxes carry the rainbow as stacked shadows. */
.theme--swirl :is(.pager__link, .lightbox__close, .lightbox__nav) {
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--yellow), 10px 10px 0 var(--pink), 15px 15px 0 var(--teal);
}
.theme--swirl :is(.lightbox__close, .lightbox__nav) { box-shadow: none; border-radius: 50%; }
.theme--swirl .shot {
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--c, var(--pink));
}
.theme--swirl .shot:nth-child(5n+2) { --c: var(--orange); }
.theme--swirl .shot:nth-child(5n+3) { --c: var(--yellow); }
.theme--swirl .shot:nth-child(5n+4) { --c: var(--teal); }
.theme--swirl .shot:nth-child(5n)   { --c: var(--blue); }
.theme--swirl .shot:hover { transform: translateY(-4px) rotate(1deg); }

/* Each section starts with a rainbow ribbon. */
.theme--swirl .edge::before {
  height: 21px;
  -webkit-mask: none;
          mask: none;
  background: linear-gradient(var(--pink) 0 3px, var(--orange) 3px 6px, var(--yellow) 6px 9px,
                              var(--lime) 9px 12px, var(--teal) 12px 15px, var(--blue) 15px 18px,
                              var(--purple) 18px 21px);
}

/* Swirls that keep turning and stars that twinkle, as on the drawings. */
.swirls { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.swirl {
  position: absolute;
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  animation: spin 20s linear infinite;
}
.swirl--1 { width: 130px; left: -40px; bottom: 6%; stroke: var(--pink); }
.swirl--2 { width: 92px; right: 3%; top: 4%; stroke: var(--teal); animation-duration: 14s; animation-direction: reverse; }
.swirl--3 { width: 160px; right: 36%; bottom: -60px; stroke: var(--blue); opacity: .45; }
/* Stars cut out of yellow paper, as on the poster. */
.cutstar {
  position: absolute;
  fill: var(--star-paper);
  stroke: #FFF6D6;
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(2px 3px 0 rgba(26, 21, 48, .18));
  animation: breathe 3.4s ease-in-out infinite;
}
.cutstar--1 { width: 66px; left: 43%; top: 7%; rotate: -12deg; }
.cutstar--2 { width: 48px; left: 2%; bottom: 13%; rotate: 10deg; animation-delay: .9s; }
.cutstar--3 { width: 56px; right: 2%; top: 50%; rotate: 18deg; animation-delay: 1.7s; }
@keyframes breathe { 50% { scale: .86; } }
@media (max-width: 640px) {
  .swirl--2 { width: 54px; top: 1%; }
  .swirl--1 { width: 90px; }
}
@keyframes spin { to { rotate: 360deg; } }

/* Cut and paste: the poster torn out of white paper and taped down, with
   Laura's portrait circled in yellow marker over its corner. */
.theme--swirl .split__media {
  position: relative;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.theme--swirl .split__media .poster-reveal {
  padding: 14px;
  background: #FFFFFF;
  clip-path: var(--torn);
  rotate: 2deg;
}
.theme--swirl .split__media::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  translate: -50% 0;
  background: var(--tape);
  box-shadow: 0 1px 2px rgba(26, 21, 48, .12);
  pointer-events: none;
}
.theme--swirl .split__media::before { top: -12px; width: 118px; height: 30px; rotate: -4deg; }

/* Laura's portrait circled in yellow marker, "with @eeye.see", beside the
   poster's "+++" lines. */
.collage-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2.2rem;
  margin-top: 1.3rem;
}
.with-host {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--ink);
  text-decoration: none;
  rotate: -6deg;
}
.with-host__face { position: relative; flex: none; width: 76px; height: 76px; }
.with-host__face img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.with-host__face svg {
  position: absolute;
  inset: -11px;
  width: calc(100% + 22px);
  height: calc(100% + 22px);
  overflow: visible;
  fill: none;
  stroke: var(--marker-yellow);
  stroke-width: 3.5;
  stroke-linecap: round;
}
.with-host__text { font: 800 1rem/1.1 var(--font-poster); }
.with-host:hover .with-host__text { color: var(--violet); }

/* "+++" lines from the poster, set slanting in its round bold type. */
.plus-note {
  display: inline-flex;
  flex-direction: column;
  margin: 0;
  font: 800 clamp(1.05rem, 1rem + .45vw, 1.35rem)/1.25 var(--font-poster);
  color: #7E7A2A;
  rotate: 4deg;
  transform-origin: left center;
}
.plus-note span:last-child { padding-left: 1.4rem; }
.theme--swirl .page-hero__date {
  font-family: var(--font-poster);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
}

/* The photos sit a little askew, as if stuck down by hand. */
.theme--swirl .shot:nth-child(odd) { rotate: -1.1deg; }
.theme--swirl .shot:nth-child(even) { rotate: .9deg; }

/* Laura and the canvas, on its own: torn out of white paper. */
.theme--swirl .shot--featured {
  padding: 12px 12px 0;
  background: #FFFFFF;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--torn);
  rotate: -1.5deg;
}
.theme--swirl .shot--featured .shot__caption { background: #FFFFFF; font: 800 1.2rem/1.2 var(--font-poster); }

/* The poster spins in like a sticker. */
.theme--swirl .poster-reveal img { animation: sticker .9s cubic-bezier(.3, 1.5, .5, 1) .25s both; }
@keyframes sticker {
  from { opacity: 0; transform: scale(.6) rotate(-14deg); }
  to   { opacity: 1; transform: none; }
}

/* Closing: a rainbow standing on the bottom edge, like the one on the canvas. */
.theme--swirl .closing__punch { color: var(--violet); }
.rainbow {
  display: block;
  width: min(520px, 92%);
  margin: clamp(2.2rem, 6vw, 3.2rem) auto 0;
  overflow: visible;
}
.rainbow path { fill: none; stroke-width: 22; }
.rainbow__pink   { stroke: var(--pink); }
.rainbow__orange { stroke: var(--orange); }
.rainbow__yellow { stroke: var(--yellow); }
.rainbow__lime   { stroke: var(--lime); }
.rainbow__teal   { stroke: var(--teal); }
.rainbow__blue   { stroke: var(--blue); }
.rainbow__purple { stroke: var(--purple); }
@supports (animation-timeline: view()) {
  .rainbow path {
    stroke-dasharray: 1000;
    animation: rainbow linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
}
@keyframes rainbow {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}


/* ── Motion off ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .clothesline__prints li,
  .swirl,
  .cutstar,
  .doodle,
  .flow-link,
  .flowchart,
  .theme--flyer :is(.btn, .hero__meta li, .pager__link, .lightbox__close, .lightbox__nav)::after { animation: none; }
  .paths path { stroke-dashoffset: 0; }
}