/* Fonts: self-hosted Latin subsets (SIL OFL), preloaded in index.html so the hero text does not reflow on load */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/geist-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/instrument-serif-latin.woff2") format("woff2"); }

/* Layout */
/* Layout shared by the five experimental variants. Colour and type live in each variant file. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
.container { width: 100%; max-width: var(--max, 54rem); margin-inline: auto; padding-inline: 1.25rem; }

:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 3px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.6rem; }
.nav__left { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.nav__logo { display: block; flex: none; line-height: 0; }
.nav__logo img { display: block; height: 2.5rem; width: auto; }
.nav__brand { text-decoration: none; white-space: nowrap; }
.nav__links { display: flex; gap: 0.2rem; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.nav__links a { display: block; padding: 0.35rem 0.65rem; text-decoration: none; white-space: nowrap; }

/* Sections */
.section { padding-block: 3.5rem; }
.section h2 { margin: 0 0 1.25rem; }
.h2__note { display: block; margin-top: 0.3rem; }
.prose p, .section__intro { max-width: 40rem; }
.prose p { margin: 0 0 1rem; }
.section__intro { margin: 0 0 1.75rem; }
h3 { margin: 0 0 0.35rem; }

.questions { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.questions p { margin: 0; }

.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; padding-block: 1rem; }
.timeline p { margin: 0; }
.timeline p + .timeline__note { margin-top: 0.4rem; }

.callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.callout p { margin: 0; }

.stickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.stickers li { display: flex; flex-direction: column; gap: 0.25rem; }
.stickers__icon { display: none; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 2rem 0 0; }
.cta span { max-width: 34rem; }
.cta__button { display: inline-block; text-decoration: none; }

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.75rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.people li { display: flex; gap: 0.9rem; align-items: flex-start; }
.avatar { flex: none; display: grid; place-items: center; }
.people h3 a { text-decoration: none; }
.people p { margin: 0; }
.people .people__affil { margin-bottom: 0.25rem; }

.reading { margin: 0; padding-left: 1.2rem; }
.reading li { max-width: 44rem; margin-bottom: 0.6rem; }

.site-footer { padding-block: 2.5rem 4.5rem; }
.site-footer p { margin: 0 0 0.3rem; }


@media (max-width: 36rem) {
  .nav__brand { display: none; }
  .timeline li { grid-template-columns: 1fr; gap: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Rethinking Human Creativity site: a wall of real works that flip in a wave to show who made them,
   a title under revision, and the guiding questions as a deck. Type: Geist + Instrument Serif. */
:root {
  --paper: #ffffff;
  --ink: #2a2140;
  --soft: #655c7a;
  --rule: #ece7f5;
  --violet: #6d3be8;
  --violet-deep: #4f22c4;
  --pink: #ffd9e8;
  --peach: #ffe3cf;
  --lemon: #fff3bf;
  --mint: #d3f5e4;
  --sky: #d6ebff;
  --lilac: #e7defe;
  --human: #6d3be8;
  --ai: #3b82f6;
  --del: #b42318;
  --wash: #fbf8ff;
  --focus: #6d3be8;
  --max: 56rem;
}

body { background: var(--paper); color: var(--ink); font-family: "Geist", system-ui, sans-serif; font-size: 1.02rem; }
a { color: var(--violet); text-underline-offset: 0.2em; }
a:hover { color: var(--violet-deep); }

.site-header { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nav__brand { color: var(--ink); font-weight: 600; }
.nav__brand del { color: var(--del); text-decoration: line-through var(--del) 2px; }
.nav__links a { color: var(--soft); font-size: 0.93rem; }
.nav__links a:hover { color: var(--violet-deep); }

/* ---------- Wall of works ---------- */
.wall-hero { position: relative; height: min(94vh, 54rem); min-height: 36rem; overflow: hidden;
  background:
    radial-gradient(34rem 34rem at 0% 0%, var(--pink), transparent 70%),
    radial-gradient(34rem 34rem at 100% 0%, var(--sky), transparent 70%),
    radial-gradient(26rem 26rem at 45% 40%, var(--lemon), transparent 70%),
    radial-gradient(34rem 34rem at 10% 100%, var(--lilac), transparent 70%),
    radial-gradient(34rem 34rem at 95% 100%, var(--mint), transparent 70%),
    var(--wash); }
.wall-field { position: absolute; inset: 0; }

.work { position: absolute; width: var(--w, 9.5rem); perspective: 900px; }
.work__inner { position: relative; display: block; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(.3, .8, .25, 1); }
.work.is-flipped .work__inner { transform: rotateY(180deg); }
.work__face { display: block; padding: 0.5rem; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 14px 30px -14px rgba(0, 0, 0, 0.28); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.work__back { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; padding: 0.8rem; transform: rotateY(180deg); color: #fff; }
.work--human .work__back { background: var(--human); }
.work--ai .work__back { background: var(--violet); }
.work__who { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.work__how { font-size: 0.72rem; line-height: 1.35; opacity: 0.9; }

.work img, .work video, .work__text, .work__film { display: block; width: 100%; border-radius: 4px; }
.work img, .work video { height: auto; }
.work__text { padding: 0.75rem 0.7rem; background: #fbfaf6; font-family: "Instrument Serif", Georgia, serif; font-size: 0.98rem; line-height: 1.3; color: #2a2a2a; }
/* Muybridge's sheet is a 4 x 3 grid of frames; step through them like a film */
.work__film { aspect-ratio: 1.55; background: url("assets/works/muybridge_frames.jpg") 0 0 / 400% 300% no-repeat; animation: gallop 1.1s steps(1) infinite; }
@keyframes gallop {
  0% { background-position: 0 0; } 8.3% { background-position: 33.33% 0; } 16.6% { background-position: 66.66% 0; } 25% { background-position: 100% 0; }
  33.3% { background-position: 0 50%; } 41.6% { background-position: 33.33% 50%; } 50% { background-position: 66.66% 50%; } 58.3% { background-position: 100% 50%; }
  66.6% { background-position: 0 100%; } 75% { background-position: 33.33% 100%; } 83.3% { background-position: 66.66% 100%; } 91.6% { background-position: 100% 100%; }
}
.work__cap { display: block; margin-top: 0.4rem; font-size: 0.7rem; color: var(--soft); }

.wall-title { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1.25rem; pointer-events: none; }
.wall-title__box { max-width: 48rem; padding: 1.75rem 2rem; border-radius: 24px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: center; pointer-events: auto; }
.wall-title h1 { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; }
.wall-title del { color: var(--del); text-decoration: line-through var(--del) 0.08em; }
.wall-title ins { text-decoration: none; color: var(--violet); }
.wall-title .caret { display: inline-block; width: 3px; height: 0.85em; margin-left: 2px; background: var(--ink); vertical-align: -0.05em; animation: blink 1s steps(1) 6; }
@keyframes blink { 50% { opacity: 0; } }
.wall-title p { margin: 0 auto; max-width: 31rem; color: var(--soft); }


/* ---------- Sections ---------- */
.section { border-bottom: 1px solid var(--rule); }
.section h2 { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.025em; }
.h2__note, .section__intro { color: var(--soft); }
h3 { font-size: 1.08rem; font-weight: 600; line-height: 1.35; }

/* Guiding questions as a deck */
.qdeck { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-top: 1.5rem; }
.qdeck__stack { position: relative; width: min(22rem, 100%); aspect-ratio: 4 / 5; cursor: pointer; border-radius: 20px; }
.dcard { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.5rem; border-radius: 20px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 30px 60px -30px rgba(30, 40, 70, 0.35); transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), opacity 0.5s; }
.dcard[data-pos="1"] { transform: translate(14px, -10px) rotate(4deg); }
.dcard[data-pos="2"] { transform: translate(-16px, -16px) rotate(-5deg); }
.dcard[data-pos="3"] { transform: translate(6px, -22px) rotate(8deg); }
.dcard.is-leaving { transform: translate(115%, -4%) rotate(18deg) !important; transition-duration: 0.38s; }
.dcard.is-leaving--left { transform: translate(-115%, -4%) rotate(-18deg) !important; transition-duration: 0.38s; }
.dcard__label { margin: 0 0 0.6rem; font-weight: 600; color: var(--violet); }
.dcard__q { margin: 0; font-size: 1.45rem; font-weight: 600; line-height: 1.22; letter-spacing: -0.015em; }
.dcard__note { margin: auto 0 0; color: var(--soft); font-size: 0.95rem; }
.qdeck__dots { display: flex; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.qdeck__dots button { width: 0.55rem; height: 0.55rem; padding: 0; border: 0; border-radius: 999px; background: #d3d6dc; cursor: pointer; transition: width 0.3s; }
.qdeck__dots button[aria-current="true"] { width: 1.8rem; background: var(--violet); }

.timeline li { border-top: 1px solid var(--rule); }
.timeline__time { font-weight: 600; }
.timeline p { color: var(--soft); }

.callout { padding: 1.2rem; border-radius: 12px; border: 1px solid var(--rule); }
.callout p { color: var(--soft); }

.stickers li { padding: 1.1rem 1.2rem; border-radius: 12px; border: 1px solid var(--rule); }
.stickers span:last-child { color: var(--soft); }

.cta__button { padding: 0.75rem 1.3rem; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; }
.cta span { color: var(--soft); }

.avatar { width: 3.6rem; height: 3.6rem; border-radius: 50%; object-fit: cover; background: var(--lilac); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lilac); }
.people h3 a { color: var(--ink); }
.people p { color: var(--soft); font-size: 0.92rem; }

.site-footer { color: var(--soft); }

@media (max-width: 36rem) {
  .work { --w: 6.6rem !important; }
  .wall-title__box { padding: 1.25rem; }
}

/* Each question card keeps its pastel from the original site */
.dcard:nth-child(1) { background: var(--pink); }
.dcard:nth-child(2) { background: var(--lemon); }
.dcard:nth-child(3) { background: var(--mint); }
.dcard:nth-child(4) { background: var(--sky); }
.dcard { border-color: transparent; }

.cta__button { background: var(--violet); box-shadow: 0 4px 0 var(--violet-deep); }
.cta__button:hover { background: var(--violet-deep); color: #fff; }
.callout--pink { background: var(--pink); border-color: transparent; }
.callout--mint { background: var(--mint); border-color: transparent; }
.timeline__time { color: var(--violet); }
.people li:nth-child(4n+1) .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pink); }
.people li:nth-child(4n+2) .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--lemon); }
.people li:nth-child(4n+3) .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--mint); }
.people li:nth-child(4n+4) .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--sky); }
.site-footer { margin-top: 2rem; background: linear-gradient(120deg, var(--pink), var(--lilac) 45%, var(--sky)); color: var(--ink); text-align: center; }
.nav__links { scrollbar-width: none; }
.nav__links::-webkit-scrollbar { display: none; }

/* Header spans the full width instead of the text column */
.site-header .nav { max-width: none; padding-inline: clamp(1rem, 3vw, 2.5rem); }

/* Phones */
@media (max-width: 40rem) {
  .wall-hero { height: 100svh; min-height: 38rem; max-height: 48rem; }
  .wall-title { padding: 0.75rem; }
  .wall-title__box { padding: 1.1rem 1.1rem 1.2rem; border-radius: 18px; }
  .wall-title h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); margin-bottom: 0.6rem; }
  .wall-title p { font-size: 0.92rem; line-height: 1.5; }
  .work__face { padding: 0.35rem; }
  .work__text { padding: 0.45rem; font-size: 0.72rem; }
  .work__cap { font-size: 0.62rem; margin-top: 0.25rem; }
  .work__who { font-size: 1.15rem; }
  .work__how { font-size: 0.6rem; }
  .section { padding-block: 2.5rem; }
  .section h2 { font-size: 1.6rem; }
  .qdeck__stack { width: min(19rem, 86vw); }
  .dcard { padding: 1.2rem; }
  .dcard__q { font-size: 1.25rem; }
  .cta { flex-direction: column; align-items: flex-start; }
}

/* Sparkle from the original site, after "Human Creativity" */
.title-spark { display: inline-block; margin-left: 0.15em; color: var(--violet); font-size: 0.55em; vertical-align: 0.9em; opacity: 0; }
.title-spark.is-on { animation: spark-in 0.5s ease forwards, twinkle 2.4s ease-in-out 0.5s infinite; }
@keyframes spark-in { from { opacity: 0; transform: scale(0.2) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes twinkle { 50% { transform: scale(0.75) rotate(20deg); } }

/* Back cards in the deck stay quiet so only the top question reads */
.dcard:not([data-pos="0"]) > * { visibility: hidden; }

/* Organizers: photo cards that flip to an illustration */
.people { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 2.25rem 1.75rem; }
.people li { flex-direction: column; gap: 0.9rem; }
.person { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; perspective: 900px; cursor: pointer; }
.person__inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(.3, .8, .25, 1); }
.person:hover .person__inner, .person:focus-visible .person__inner, .person.is-flipped .person__inner { transform: rotateY(180deg); }
.person__face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 14px 30px -16px rgba(42, 33, 64, 0.45); }
.person__toon { transform: rotateY(180deg); background: #fff; }

/* Who should come: illustration on top of each card */
.stickers li { padding: 0 0 1.2rem; overflow: hidden; }
.stickers__art { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 0.9rem; }
.stickers strong, .stickers span:last-child { padding-inline: 1.2rem; }

/* Sound cards: a waveform of the actual recording; tap to play */
.work__sound { position: relative; display: block; cursor: pointer; }
.work__sound img { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover; border-radius: 4px; }
.work__play { position: absolute; left: 50%; top: 50%; width: 2.4rem; height: 2.4rem; margin: -1.2rem 0 0 -1.2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 12px rgba(42, 33, 64, 0.25); }
.work__play::before { content: ""; position: absolute; left: 0.95rem; top: 0.7rem; border-style: solid; border-width: 0.5rem 0 0.5rem 0.75rem; border-color: transparent transparent transparent #1f1b2e; }
.work.is-playing .work__play::before { left: 0.8rem; top: 0.75rem; width: 0.8rem; height: 0.9rem; border: 0; background: linear-gradient(90deg, #1f1b2e 0 35%, transparent 35% 65%, #1f1b2e 65%); }

/* Small note next to a section heading */
.section h2 .h2__note { display: block; margin-top: 0.35rem; font-family: inherit; font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--soft); }

/* Agenda: two activities */
.act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: center; padding-block: 1.5rem 2.5rem; }
.act + .act { border-top: 1px solid var(--rule); padding-top: 3rem; }
.act__time { margin: 0 0 0.3rem; color: var(--violet); font-weight: 600; }
.act__text h3 { margin: 0 0 0.6rem; font-size: 1.6rem; letter-spacing: -0.02em; }
.act__text p:last-child { margin: 0; color: var(--soft); }

.spot { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.spot__card { padding: 0; border: 0; background: none; perspective: 900px; cursor: pointer; }
.spot__inner { position: relative; display: block; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(.3, .8, .25, 1); }
.spot__card:hover .spot__inner, .spot__card:focus-visible .spot__inner, .spot__card.is-flipped .spot__inner { transform: rotateY(180deg); }
.spot__face { display: block; padding: 0.5rem; border-radius: 10px; background: #fff; box-shadow: 0 14px 30px -14px rgba(42, 33, 64, 0.35); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.spot__face img { display: block; width: 100%; height: auto; aspect-ratio: 1.45; object-fit: cover; border-radius: 6px; }
.spot__back { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; padding: 1rem; color: #fff; transform: rotateY(180deg); }
.spot__back b { font-size: 1.8rem; letter-spacing: -0.02em; }
.spot__back span { font-size: 0.85rem; opacity: 0.9; }
.spot__back--human { background: var(--human); }
.spot__back--ai { background: var(--violet); }

.act--deck .qdeck { padding-top: 1.25rem; }
.dcard__art { display: block; width: 78%; margin: auto auto 0; aspect-ratio: 1; object-fit: cover; border-radius: 14px; mix-blend-mode: multiply; }
.dcard__q .w { display: inline-block; }
.dcard[data-pos="0"] .dcard__q .w { animation: word-up 0.5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 60ms + 120ms); }
@keyframes word-up { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }

@media (max-width: 46rem) {
  .act { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* Card backs: Human in violet, AI in blue, as soft gradients with a glow */
.work--human .work__back, .spot__back--human {
  background:
    radial-gradient(120% 80% at 15% 10%, rgba(255, 255, 255, 0.35), transparent 55%),
    linear-gradient(140deg, #5b2fd6 0%, #8b5cf6 45%, #e79ad0 100%);
}
.work--ai .work__back, .spot__back--ai {
  background:
    radial-gradient(120% 80% at 15% 10%, rgba(255, 255, 255, 0.35), transparent 55%),
    linear-gradient(140deg, #1d4ed8 0%, #3b82f6 50%, #7dd3fc 100%);
}
.work__back, .spot__back { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 14px 30px -14px rgba(42, 33, 64, 0.35); text-shadow: 0 1px 2px rgba(20, 10, 60, 0.25); }

/* Contribute your work */
.contribute { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.contribute__text p { max-width: 34rem; margin: 0 0 1.6rem; color: var(--soft); font-size: 1.08rem; }
.contribute__button { display: inline-block; padding: 0.9rem 1.6rem; border-radius: 999px; background: linear-gradient(140deg, #5b2fd6, #8b5cf6 55%, #e79ad0); color: #fff; font-weight: 600; font-size: 1.05rem; text-decoration: none; box-shadow: 0 6px 0 #4f22c4, 0 16px 30px -14px rgba(91, 47, 214, 0.7); transition: transform 0.15s, box-shadow 0.15s; }
.contribute__button:hover { color: #fff; transform: translateY(2px); box-shadow: 0 4px 0 #4f22c4, 0 12px 24px -14px rgba(91, 47, 214, 0.7); }
.contribute__art { display: block; width: 100%; max-width: 22rem; justify-self: center; aspect-ratio: 1; border-radius: 24px; }
@media (max-width: 46rem) {
  .contribute { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .contribute__art { max-width: 16rem; }
}

/* "Human Creativity" in the same violet-to-pink gradient as the Human cards */
.grad, .wall-title ins, .title-spark {
  background: linear-gradient(100deg, #5b2fd6 0%, #8b5cf6 45%, #e79ad0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.title-spark { background: linear-gradient(140deg, #8b5cf6, #e79ad0); -webkit-background-clip: text; background-clip: text; }

/* 90-minute schedule as one proportional bar */
.schedule { display: flex; gap: 4px; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.schedule li { flex: var(--m) 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 0.8rem; border-radius: 12px; }
.schedule li:nth-child(1) { background: var(--pink); }
.schedule li:nth-child(2) { background: var(--lemon); }
.schedule li:nth-child(3) { background: var(--mint); }
.schedule li:nth-child(4) { background: var(--sky); }
.schedule b { font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.schedule span { color: var(--soft); font-size: 0.85rem; }
@media (max-width: 40rem) {
  .schedule { flex-direction: column; }
  .schedule li { flex: none; flex-direction: row; justify-content: space-between; }
}
.site-footer__stay { max-width: 40rem; margin: 0 auto 0.9rem !important; font-weight: 400; color: var(--soft); }

/* Inserted "Human": keep the title on two lines and the sparkle beside the word */
.wall-title__box { width: min(52rem, 94vw); }
.wall-title h1 { font-size: clamp(1.8rem, 4.4vw, 3.2rem); }
.title-spark { vertical-align: 1.1em; margin-left: 0.05em; margin-right: 0.1em; }

/* Hover: illustrations zoom gently inside their frame */
.stickers li { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.stickers__art { transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.stickers li:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -20px rgba(42, 33, 64, 0.45); }
.stickers li:hover .stickers__art { transform: scale(1.07); }

.contribute__frame { justify-self: center; width: 100%; max-width: 22rem; overflow: hidden; border-radius: 24px; }
.contribute__frame .contribute__art { max-width: none; border-radius: 0; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.contribute__frame:hover .contribute__art { transform: scale(1.07); }
@media (max-width: 46rem) { .contribute__frame { max-width: 16rem; } }

@media (prefers-reduced-motion: reduce) {
  .stickers li:hover, .stickers li:hover .stickers__art, .contribute__frame:hover .contribute__art { transform: none; }
}

/* Contribute: the show-off illustration sits directly on the page */
.contribute__art { max-width: 24rem; border-radius: 0; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 90%; }
.contribute__art:hover { transform: rotate(-2deg) scale(1.04); }
.contribute__button { box-shadow: 0 10px 24px -12px rgba(91, 47, 214, 0.6); }
.contribute__button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(91, 47, 214, 0.7); }
@media (prefers-reduced-motion: reduce) { .contribute__art:hover { transform: none; } }
/* Upper-body crop fades out at the bottom instead of ending in a hard line */
.contribute__art { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }

/* Reading list grouped by the meet-up's argument */
.reading-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.75rem 2.5rem; }
.reading-groups h3 { margin: 0 0 0.6rem; color: var(--violet); font-size: 1rem; }
.reading-groups .reading li { font-size: 0.95rem; }
.nav-spark { font-size: 0.6em; vertical-align: 0.8em; margin-left: 0.1em; }

/* ---------- Phones: compact sections so each fits in one or two screens ---------- */
@media (max-width: 40rem) {
  .section { padding-block: 2rem; }
  .section h2 { font-size: 1.45rem; margin-bottom: 0.9rem; }
  .section__intro { margin-bottom: 1rem; font-size: 0.95rem; }

  /* Activities: shorter blocks, smaller pair and deck */
  .schedule { flex-direction: row; gap: 3px; margin-bottom: 1.5rem; }
  .schedule li { flex: var(--m) 1 0; flex-direction: column; justify-content: flex-start; padding: 0.45rem 0.4rem; border-radius: 8px; }
  .schedule b { font-size: 0.68rem; }
  .schedule span { font-size: 0.65rem; }
  .act { gap: 1rem; padding-block: 0.5rem 1.5rem; }
  .act + .act { padding-top: 1.5rem; }
  .act__text h3 { font-size: 1.25rem; margin-bottom: 0.3rem; }
  .act__text p:last-child { font-size: 0.92rem; }
  .spot { gap: 0.6rem; }
  .qdeck__stack { width: min(15rem, 72vw); }
  .dcard { padding: 1rem; }
  .dcard__label { font-size: 0.8rem; margin-bottom: 0.3rem; }
  .dcard__q { font-size: 1.05rem; }

  /* Attendees: one compact row each, picture beside text */
  .stickers { grid-template-columns: 1fr; gap: 0.6rem; }
  .stickers li { display: grid; grid-template-columns: 5.5rem 1fr; grid-template-rows: auto 1fr; column-gap: 0.9rem; padding: 0; align-items: start; }
  .stickers__art { grid-row: 1 / 3; width: 5.5rem; height: 100%; min-height: 5.5rem; margin: 0; }
  .stickers strong { padding: 0.7rem 0.8rem 0 0; font-size: 0.98rem; }
  .stickers span:last-child { padding: 0.15rem 0.8rem 0.7rem 0; font-size: 0.85rem; }
  .stickers li:hover { transform: none; }

  /* Contribute: text and button first, small picture */
  .contribute { gap: 0.5rem; }
  .contribute__text p { font-size: 0.95rem; margin-bottom: 1rem; }
  .contribute__art { max-width: 11rem; order: -1; }

  /* Organizers: three per row, photo and name only */
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 0.6rem; }
  .people li { gap: 0.4rem; }
  .person__face { border-radius: 12px; }
  .people h3 { font-size: 0.82rem; line-height: 1.25; }
  .people .people__affil { font-size: 0.72rem; line-height: 1.3; margin: 0; }
  .people p:not(.people__affil) { display: none; }

  /* Reading: tighter */
  .reading-groups { gap: 1.2rem; }
  .reading-groups .reading li { font-size: 0.88rem; margin-bottom: 0.45rem; }
}

/* Phones keep the desktop arrangement, just smaller */
@media (max-width: 40rem) {
  .act { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.9rem; align-items: center; }
  .act__text h3 { font-size: 1.05rem; }
  .act__text p:last-child { font-size: 0.8rem; line-height: 1.45; }
  .act__time { font-size: 0.78rem; }
  .spot { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .spot__face { padding: 0.25rem; border-radius: 7px; }
  .spot__back b { font-size: 1rem; }
  .spot__back span { font-size: 0.6rem; }
  .act--deck .qdeck { padding-top: 0.8rem; gap: 0.8rem; }
  .qdeck__stack { width: 100%; }
  .dcard { padding: 0.7rem; border-radius: 14px; }
  .dcard__label { font-size: 0.65rem; }
  .dcard__q { font-size: 0.82rem; }

  .stickers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .stickers li { display: flex; flex-direction: column; padding: 0 0 0.6rem; }
  .stickers__art { width: 100%; height: auto; min-height: 0; aspect-ratio: 1; margin-bottom: 0.45rem; }
  .stickers strong { padding: 0 0.5rem; font-size: 0.78rem; line-height: 1.25; }
  .stickers span:last-child { padding: 0.15rem 0.5rem 0; font-size: 0.68rem; line-height: 1.35; }

  .contribute { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.8rem; align-items: center; }
  .contribute__art { order: 0; width: 100%; max-width: 100%; }
  .contribute__text p { font-size: 0.82rem; line-height: 1.5; margin-bottom: 0.8rem; }
  .contribute__button { padding: 0.6rem 1rem; font-size: 0.85rem; }
}
@media (max-width: 40rem) { .contribute__art { max-height: 13rem; object-fit: contain; } }
/* Who should come: always three cards in one row, at any width */
.stickers { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
/* No hover zoom or tilt on touch screens */
@media (hover: none), (max-width: 40rem) {
  .stickers li, .stickers__art, .contribute__art { transition: none; }
  .stickers li:hover, .stickers li:hover .stickers__art, .contribute__art:hover { transform: none; box-shadow: none; }
}
/* Card backs: centred text */
.work__back, .spot__back { align-items: center; justify-content: center; text-align: center; }
/* Keep "Human Creativity" together; on phones it gets its own line */
.wall-title .grad { white-space: nowrap; }
@media (max-width: 40rem) {
  .wall-title h1 .grad { display: inline-block; }
  .wall-title h1 .grad::before { content: ""; display: block; }
}
/* Header on phones: logo keeps its space, links scroll beside it */
@media (max-width: 40rem) {
  .nav__left { flex: none; }
  .nav__links { min-width: 0; overflow-x: auto; }
  .nav__logo img { height: 2.2rem; }
}
.br-phone { display: none; }
@media (max-width: 40rem) { .br-phone { display: inline; } .wall-title h1 .grad::before { content: none; } }
/* Keep the illustration's own proportions (the width/height attributes otherwise stretch it) */
.contribute__art { height: auto; aspect-ratio: 1; object-fit: contain; }
/* Never let anything push the page sideways */
html, body { overflow-x: clip; }
.contribute__art { -webkit-mask-image: none; mask-image: none; }
/* Compact footer */
.site-footer { margin-top: 1rem; padding-block: 1.1rem 1.3rem; font-size: 0.85rem; }
.site-footer p { margin: 0 0 0.2rem; }
.site-footer__stay { margin: 0 auto 0.35rem !important; font-size: 0.85rem; }
.site-footer__fine { font-size: 0.78rem; }
.site-footer__stay { max-width: none; }
/* Question art sits straight on the card, no box or tint */
.dcard__art { mix-blend-mode: normal; border-radius: 0; background: none; }
/* Poems: full stanzas, set a little smaller so they fit the card */
.work__text { font-size: 0.82rem; line-height: 1.28; }
/* Overlapping cards: the one under the pointer comes to the front */
.work { transition: z-index 0s; }
.work:hover, .work.is-flipped, .work.is-playing { z-index: 6 !important; }
.work__inner { transition: transform 0.6s cubic-bezier(.3, .8, .25, 1), box-shadow 0.3s; }
.work:hover .work__face { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 22px 40px -16px rgba(42, 33, 64, 0.45); }
/* Poem line breaks */
.work__text { white-space: pre-line; }

/* Music cards: on the back, the waveform sits exactly where it was on the front, as a faint overlay */
.work__sound--back { position: absolute; top: 0.5rem; left: 0.5rem; right: 0.5rem; margin: 0; border-radius: 4px; }
.work__sound--back img { width: 100%; aspect-ratio: 1.6; object-fit: cover; opacity: 0.35; background: none; }
.work__back .work__who, .work__back .work__how { position: relative; z-index: 1; }

/* Music card back: Human/AI reads clearly; play button tucks into the corner */
.work__sound--back .work__play { left: auto; top: auto; right: 0.35rem; bottom: 0.35rem; margin: 0; width: 1.6rem; height: 1.6rem; }
.work__sound--back .work__play::before { left: 0.6rem; top: 0.42rem; border-width: 0.38rem 0 0.38rem 0.55rem; }
.work.is-playing .work__sound--back .work__play::before { left: 0.5rem; top: 0.45rem; width: 0.62rem; height: 0.7rem; }

/* Hero: the title sits on the table itself, in the clearing between the cards */
.wall-title__box { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wall-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(rgba(42, 33, 64, 0.05) 1px, transparent 1.2px) 0 0 / 6px 6px; }
.wall-field { z-index: 1; }
.wall-title h1 { text-shadow: none; }

/* Music card back: play button in its front position, as a faint overlay like the waveform */
.work__sound--back .work__play { left: 50%; top: 50%; right: auto; bottom: auto; width: 2.4rem; height: 2.4rem; margin: -1.2rem 0 0 -1.2rem;
  background: rgba(255, 255, 255, 0.28); box-shadow: none; }
.work__sound--back .work__play::before { left: 0.95rem; top: 0.7rem; border-width: 0.5rem 0 0.5rem 0.75rem; border-color: transparent transparent transparent rgba(255, 255, 255, 0.7); }
.work.is-playing .work__sound--back .work__play::before { left: 0.8rem; top: 0.75rem; width: 0.8rem; height: 0.9rem; border: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.7) 0 35%, transparent 35% 65%, rgba(255,255,255,0.7) 65%); }
.wall-hero::before { content: none; }

/* Card backs show a faint copy of the front in its original place */
.work__ghost { position: absolute; top: 0.5rem; left: 0.5rem; right: 0.5rem; width: calc(100% - 1rem) !important; border-radius: 4px; opacity: 0.22; mix-blend-mode: luminosity; pointer-events: none; }
img.work__ghost, video.work__ghost { height: auto; }
.work__text.work__ghost { background: none; color: #fff; opacity: 0.35; mix-blend-mode: normal; }
.work__film.work__ghost { aspect-ratio: 1.55; }
/* Ghost has no colour of its own: a pale white trace like the waveform */
.work__ghost { mix-blend-mode: normal; filter: grayscale(1) brightness(1.9) contrast(0.9); opacity: 0.28; }
.work__text.work__ghost { filter: none; color: #fff; opacity: 0.4; }
.work__text.work__ghost { text-align: left; opacity: 0.25; }

/* Hovered card first comes to the front, then turns over */
.work:hover { z-index: auto; }
.work.is-raised, .work.is-playing { z-index: 20 !important; }
.work.is-raised .work__inner { transform: translateY(-6px) scale(1.06); }
.work.is-raised.is-flipped .work__inner { transform: translateY(-6px) scale(1.06) rotateY(180deg); }
.work.is-raised .work__face { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 24px 44px -16px rgba(42, 33, 64, 0.5); }
/* Slight blur on the faint copy of the front shown on the back */
.work__ghost { filter: grayscale(1) brightness(1.9) contrast(0.9) blur(1.5px); }
.work__text.work__ghost { filter: blur(1.2px); }
.work__sound--back img { filter: blur(1.5px); }

/* Glossy frosted-glass back: the front shows through, softly blurred, under a sheen */
.work__ghost { filter: grayscale(1) brightness(1.8) blur(6px); opacity: 0.45; transform: scale(1.04); }
.work__text.work__ghost { filter: blur(3px); opacity: 0.45; }
.work__sound--back img { filter: blur(5px); opacity: 0.5; }
.work__back { overflow: hidden; }
.work__back::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 32%, rgba(255, 255, 255, 0) 48%),
    radial-gradient(120% 70% at 85% 110%, rgba(255, 255, 255, 0.22), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.work__back .work__who, .work__back .work__how { position: relative; z-index: 1; }
/* Blur at a quarter of the previous strength; the play button is blurred with the waveform */
.work__ghost { filter: grayscale(1) brightness(1.8) blur(1.5px); }
.work__text.work__ghost { filter: blur(0.75px); }
.work__sound--back img { filter: blur(1.25px); }
.work__sound--back .work__play { filter: blur(1.25px); }

/* Activities pair: same glossy frosted back as the wall cards */
.spot__back { overflow: hidden; }
.spot__back .work__ghost { top: 0.5rem; left: 0.5rem; width: calc(100% - 1rem) !important; aspect-ratio: 1.45; object-fit: cover; }
.spot__back::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 32%, rgba(255, 255, 255, 0) 48%),
    radial-gradient(120% 70% at 85% 110%, rgba(255, 255, 255, 0.22), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.spot__back b, .spot__back span { position: relative; z-index: 1; }

/* Wall cards appear one by one, from the centre outward, once the layout is final */
.wall-field .work { opacity: 0; translate: 0 18px; scale: 0.96; transition: opacity 0.5s ease, translate 0.6s cubic-bezier(.2, .8, .2, 1), scale 0.6s cubic-bezier(.2, .8, .2, 1); }
.wall-field.is-ready .work { opacity: 1; translate: 0 0; scale: 1; }
@media (prefers-reduced-motion: reduce) { .wall-field .work { transition: none; translate: none; scale: none; } }
/* Seen from behind: the faint copy of the front is mirrored left to right */
.work__ghost { transform: scaleX(-1); }
.work__sound--back { transform: scaleX(-1); }
.wall-field .work { transition: opacity 0.35s ease, translate 0.45s cubic-bezier(.2, .8, .2, 1), scale 0.45s cubic-bezier(.2, .8, .2, 1); }
.work img, .work video { height: auto; }
/* Audience cards: shorter, landscape illustrations */
.stickers__art { height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover; object-position: center 60%; }
/* Touch screens: no sticky hover flip on the Activities pair, tap controls it */
@media (hover: none) {
  .spot__card:hover .spot__inner, .spot__card:focus-visible .spot__inner { transform: none; }
  .spot__card.is-flipped .spot__inner { transform: rotateY(180deg); }
}
@media (hover: none) {
  .person:hover .person__inner, .person:focus-visible .person__inner { transform: none; }
  .person.is-flipped .person__inner { transform: rotateY(180deg); }
}

/* Phone navigation: hamburger button and a drop-down panel */
.nav__toggle { display: none; }
@media (max-width: 40rem) {
  .site-header .nav { position: relative; }
  /* The hero repeats the title right below, so the phone header keeps only the CHI logo */
  .nav__brand { display: none; }
  .nav__toggle { flex: none; display: grid; gap: 4px; place-content: center; width: 2.5rem; height: 2.5rem; margin-left: auto; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
  .nav__toggle span { display: block; width: 1.25rem; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.25s, opacity 0.2s; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav__links { position: absolute; top: 100%; right: 0.75rem; left: auto; display: none; flex-direction: column; gap: 0; min-width: 12rem; padding: 0.4rem; overflow: visible;
    background: #fff; border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(42, 33, 64, 0.35); }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a { padding: 0.65rem 0.8rem; border-radius: 9px; font-size: 1rem; color: var(--ink); }
  .nav__links a:active { background: var(--wash); }
}
/* Header always stays above page content (deck cards use z-index up to 10) */
.site-header { z-index: 100; }
.qdeck__stack { isolation: isolate; }
.site-footer .container { max-width: none; }