:root {
  --paper: #fdfdfc;
  --ink: #181818;
  --muted: #8c8c8a;
  --backdrop: #f3d58f;
  --pink: #ff2583;
  --orange: #ffae00;
  --blue: #258eff;
  --ui: "JetBrains Mono", monospace;
  --copy: "Lora", serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--backdrop);
  color: var(--ink);
}

body.third-page { background: #000; }

.shell-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1200ms cubic-bezier(.65, 0, .35, 1);
}
.shell-transition.is-active { opacity: 1; pointer-events: auto; }

button { font: inherit; }

.story {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 54% 58%, rgba(255,255,255,.38), transparent 34%),
    linear-gradient(100deg, #f6d790, #ebd8a9 48%, #f8d88d);
}

.story[data-active-case="2"] { background: linear-gradient(100deg, #ffe0a6, #f6cf95 60%, #f2bd72); }
.story[data-active-case="3"] { background: linear-gradient(100deg, #ff4b91, #ff7b94 60%, #fa4d76); }
.story[data-active-case="4"] { background: linear-gradient(100deg, #67142e, #aa4251 60%, #3c0b1e); }
.story[data-active-case="5"] { background: #080808; }
.story[data-active-case="4"] .case-nav,
.story[data-active-case="5"] .case-nav { color: #e8d8dc; }
.story[data-active-case="4"] .case-nav button,
.story[data-active-case="5"] .case-nav button,
.story[data-active-case="4"] .down-arrow,
.story[data-active-case="5"] .down-arrow { color: inherit; }

.case-track {
  display: flex;
  gap: clamp(16px, 1.6vw, 32px);
  height: calc(100% - clamp(76px, 8.8vh, 110px));
  padding: clamp(28px, 5.7vh, 66px) 0 0 clamp(18px, 3.2vw, 66px);
  transition: transform 900ms cubic-bezier(.72, 0, .16, 1);
  will-change: transform;
}

.case-canvas {
  --document-font-size: clamp(12px, .88vw, 18px);
  --thumb-font-size: clamp(3.6px, .264vw, 5.4px);
  position: relative;
  flex: 0 0 calc(100vw - clamp(58px, 6.5vw, 132px));
  min-width: 0;
  height: 100%;
  background: rgba(255, 255, 255, .965);
  box-shadow: 0 15px 40px rgba(88, 67, 29, .11);
  overflow: hidden;
}

.case-meta {
  position: absolute;
  top: 5.6%;
  left: 2.1%;
  display: grid;
  grid-template-columns: 38% 62%;
  width: 21%;
  font-family: var(--ui);
  color: var(--muted);
  z-index: 4;
}

.case-number {
  display: block;
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(52px, 5.2vw, 102px);
  line-height: .85;
  letter-spacing: -.09em;
  font-weight: 300;
}

.case-number-label,
.section-label,
.case-description-label {
  display: block;
  margin-top: 10px;
  font-size: clamp(9px, .68vw, 14px);
  line-height: 1.3;
  font-weight: 300;
  color: var(--muted);
  opacity: .62;
}

.case-number-label { grid-column: 1; grid-row: 2; }

.case-name {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  max-width: 240px;
  font-size: clamp(14px, 1.05vw, 22px);
  line-height: 1.28;
  font-weight: 300;
}

.case-description-label { grid-column: 2; grid-row: 2; opacity: .62; }

.labels {
  position: absolute;
  top: 5.7%;
  right: 2.3%;
  display: flex;
  width: min(260px, 19%);
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(12px, 2.1vh, 24px);
  z-index: 8;
}

.labels .section-label { align-self: flex-end; margin: 0 0 14px; }

.label-button {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.label-button img { display: block; width: auto; max-width: 100%; height: clamp(30px, 3.9vh, 48px); }
.label-button:hover { transform: translateX(-8px); filter: saturate(1.15); }
.label-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.label-button.is-selected { transform: translateX(-13px); filter: drop-shadow(0 5px 8px rgba(0,0,0,.16)); }

.document-stage {
  position: absolute;
  inset: 7.8% 24% 10.3% 25%;
  display: grid;
  place-items: center;
  perspective: 1000px;
  z-index: 3;
}

.document {
  position: absolute;
  width: min(31vw, 580px);
  height: auto;
  aspect-ratio: .72;
  max-width: 100%;
  max-height: 100%;
  padding: clamp(30px, 3vw, 64px);
  overflow: hidden;
  border: 0;
  background: #fff;
  box-shadow: 0 16px 40px rgba(30, 30, 30, .08);
  color: #171717;
  font-family: var(--copy);
  font-size: var(--document-font-size);
  line-height: 1.3;
  text-align: left;
  cursor: default;
  transition: transform 720ms cubic-bezier(.65, 0, .2, 1), opacity 500ms ease, box-shadow 180ms ease;
}

.document.is-active { transform: translate(0, 0) rotate(0); opacity: 1; z-index: 2; }
.document[data-label="fact"] { background: var(--pink); color: white; }
.document[data-label="opinion"] { background: var(--orange); color: white; }
.document[data-label="none"] { background: var(--blue); color: white; }
.document.exit-left { transform: translate(-76vw, 13vh) rotate(-9deg); opacity: .85; }
.document.exit-right { transform: translate(76vw, 13vh) rotate(9deg); opacity: .85; }
.document.painted-fact { background: var(--pink); color: white; }
.document.painted-opinion { background: var(--orange); color: white; }
.document.painted-none { background: var(--blue); color: white; }

.all-sorted {
  color: var(--muted);
  font: 300 clamp(10px, .7vw, 14px)/1.5 var(--ui);
  text-align: center;
}

.tray {
  position: absolute;
  bottom: 3.7%;
  --thumb-tray-height: clamp(100px, 19vh, 230px);
  z-index: 5;
  font-family: var(--ui);
  color: var(--muted);
}

.tray-pending { left: 2.8%; width: 22%; }
.tray-sorted { right: 2.3%; width: 18%; text-align: right; }
.tray .section-label { position: absolute; bottom: calc(var(--thumb-tray-height) + 10px); width: 100%; margin: 0; }

.thumbs {
  display: flex;
  align-items: flex-end;
  gap: clamp(5px, .45vw, 10px);
  width: 100%;
  height: var(--thumb-tray-height);
}

.paper-thumb {
  position: relative;
  flex: 0 0 clamp(72px, 7.8vw, 154px);
  width: clamp(72px, 7.8vw, 154px);
  aspect-ratio: .72;
  margin-right: -2px;
  padding: clamp(8px, .8vw, 15px);
  overflow: hidden;
  border: 0;
  background: #fff;
  box-shadow: 0 7px 20px rgba(30,30,30,.06);
  color: #222;
  font-family: var(--copy);
  font-size: var(--thumb-font-size);
  line-height: 1.03;
  overflow-wrap: anywhere;
  text-align: left;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.paper-thumb:hover { transform: translateY(-7px); box-shadow: 0 12px 24px rgba(30,30,30,.12); }
.paper-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.paper-thumb[data-label="fact"] { background: var(--pink); color: rgba(255,255,255,.88); }
.paper-thumb[data-label="opinion"] { background: var(--orange); color: rgba(255,255,255,.88); }
.paper-thumb[data-label="none"] { background: var(--blue); color: rgba(255,255,255,.88); }
.tray-sorted .thumbs { justify-content: flex-end; }

.flying-sheet {
  position: fixed !important;
  z-index: 100;
  margin: 0 !important;
  overflow: hidden;
  border: 0;
  box-shadow: 0 14px 38px rgba(20,20,20,.16);
  font-family: var(--copy);
  text-align: left;
  pointer-events: none;
  transition:
    left 720ms cubic-bezier(.68, 0, .2, 1),
    top 720ms cubic-bezier(.68, 0, .2, 1),
    width 720ms cubic-bezier(.68, 0, .2, 1),
    height 720ms cubic-bezier(.68, 0, .2, 1),
    padding 720ms cubic-bezier(.68, 0, .2, 1),
    font-size 720ms cubic-bezier(.68, 0, .2, 1),
    line-height 720ms cubic-bezier(.68, 0, .2, 1),
    background-color 420ms ease,
    color 420ms ease;
}

/* The office becomes less reliable with every case. */
.case-canvas[data-case="1"] { background: #cfe6ff; }
.case-canvas[data-case="2"] { background: #ffe3bd; }
.case-canvas[data-case="3"] { background: #ffc1dc; }
.case-canvas[data-case="4"] { background: #f3b8bd; box-shadow: inset 0 0 60px rgba(89, 0, 28, .48); }
.case-canvas[data-case="5"] { background: #292929; color: #d8d8d8; box-shadow: inset 0 0 90px #000; }

.corruption-bars { position: fixed; inset: 0; z-index: 150; display: none; pointer-events: none; }
.corruption-bars i { position: absolute; top: 0; bottom: 0; left: var(--bar-left); width: var(--bar-width); background: #020202; opacity: var(--bar-opacity); }
.story[data-active-case="4"] .corruption-bars,
.story[data-active-case="5"] .corruption-bars { display: block; }
.story[data-active-case="4"] .corruption-bars i:nth-child(n+9) { display: none; }
.story[data-active-case="4"] .corruption-bars i,
.story[data-active-case="5"] .corruption-bars i { animation: screen-burn 1.15s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--bar-delay); }

@keyframes screen-burn {
  0% { opacity: 0; transform: scaleX(.15); background: #fff; box-shadow: -7px 0 #ff2583, 7px 0 #258eff; filter: brightness(5); }
  42% { opacity: 1; transform: scaleX(1.8); background: #ff2583; box-shadow: -3px 0 #258eff, 4px 0 #4effa8; }
  72% { transform: scaleX(.7); background: #258eff; box-shadow: 3px 0 #ff2583; }
  100% { opacity: var(--bar-opacity); transform: scaleX(1); background: #020202; box-shadow: none; filter: none; }
}

.instruction {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-content: center;
  justify-items: stretch;
  gap: 36px;
  padding: 24px;
  background: rgba(25,25,25,.49);
  backdrop-filter: blur(9px);
  font-family: "PT Sans", sans-serif;
  transition: opacity 400ms ease, visibility 400ms ease;
}

.instruction[hidden] { display: none; }
.instruction.is-closing { opacity: 0; visibility: hidden; }
.instruction-card { width: min(660px, 86vw); padding: 68px 78px; border-radius: 72px; background: white; }
.instruction-card h1 { margin: 0 0 34px; font-size: clamp(24px, 1.8vw, 36px); }
.instruction-card p { margin: 0 0 28px; font-size: clamp(20px, 1.55vw, 30px); line-height: 1.28; }
.instruction-card p:last-child { margin-bottom: 0; }
.instruction-start { width: 100%; padding: 30px; border: 0; border-radius: 60px; background: #000; color: #fff; font: 700 clamp(22px, 1.6vw, 32px)/1 "PT Sans", sans-serif; cursor: pointer; }
.sound-warning { position: absolute; bottom: 3.5vh; left: 50%; transform: translateX(-50%); color: #fff; font-size: clamp(13px, 1.1vw, 23px); text-transform: lowercase; white-space: nowrap; }

.not-found {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 58px;
  background: #000;
  color: #fff;
  font-family: var(--ui);
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease, visibility 900ms ease;
}

.show-404 .not-found { opacity: 1; visibility: visible; }
.not-found-code { font-size: clamp(92px, 12vw, 220px); font-weight: 300; letter-spacing: -.09em; }
.return-home { border: 0; background: none; color: white; font: 300 clamp(11px, .75vw, 15px)/1 var(--ui); cursor: pointer; }
.return-home:hover { text-decoration: underline; }
.return-note { margin-left: 20px; font: 400 clamp(11px, 1vw, 20px)/1 "PT Sans", sans-serif; white-space: nowrap; }

.exit-route { position: fixed; inset: 0; z-index: 280; opacity: 0; visibility: hidden; transition: opacity 420ms ease, visibility 420ms ease; }
.exit-route.is-open { opacity: 1; visibility: visible; }
.exit-step { position: absolute; inset: 0; font-family: "PT Sans", sans-serif; }
.exit-step[hidden] { display: none; }
.exit-step-one { display: grid; place-content: center; justify-items: stretch; gap: 26px; background: #c9c0ad; }
.exit-question { width: min(460px, 78vw); padding: 55px 50px; border-radius: 65px; background: #fff; font-size: clamp(31px, 2.5vw, 50px); font-weight: 700; line-height: 1.16; }
.exit-return { width: 100%; padding: 26px; border: 0; border-radius: 60px; background: #1182f5; color: #fff; font-size: clamp(28px, 2.5vw, 50px); font-weight: 700; cursor: pointer; }
.exit-next { position: absolute; border: 0; background: none; font: 400 34px/1 var(--ui); cursor: pointer; }
.exit-next-down { left: 3.8vw; bottom: 4vh; }
.exit-step-two { display: grid; place-content: center; justify-items: stretch; gap: 46px; background: #666; }
.exit-step-two .exit-question { width: min(930px, 76vw); padding: 90px 65px; text-align: center; }
.exit-question-loud { font-size: clamp(48px, 5vw, 98px); line-height: 1.05; }
.exit-step-two .exit-return { width: min(930px, 76vw); padding: 55px; font-size: clamp(45px, 4vw, 82px); }
.exit-next-right { top: 3vh; right: 3vw; }
.exit-step-three { display: flex; flex-direction: column; justify-content: space-between; padding: 7vh 7vw; background: #000; }
.last-return { align-self: flex-start; border: 0; background: none; color: #ffae00; font: 400 clamp(70px, 9.5vw, 190px)/1.2 var(--ui); text-align: left; cursor: pointer; }
.last-return span { color: white; font: 400 clamp(30px, 2.4vw, 48px)/1 var(--ui); }
.go-home { min-height: 37vh; border: 0; background: #ffae00; color: #000; font: 400 clamp(70px, 9vw, 180px)/1 var(--ui); cursor: pointer; }

.audiobook {
  position: fixed;
  inset: 0;
  z-index: 240;
  overflow: hidden;
  background: #020303;
  color: #eee;
  font-family: "EB Garamond", serif;
}

.audiobook[hidden] { display: none; }
.book-back, .book-controls button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.book-back {
  position: absolute;
  top: 4.5vh;
  left: 3.7vw;
  z-index: 8;
  font: 400 clamp(38px, 4vw, 76px)/1 "EB Garamond", serif;
}

.chapter-indicator {
  position: absolute;
  top: 4.3vh;
  right: 3.7vw;
  z-index: 9;
  min-width: 150px;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.58);
  font: 500 clamp(13px, 1vw, 18px)/1 var(--ui);
  text-align: left;
}

.book-media {
  position: absolute;
  inset: 0 47% 0 0;
  overflow: hidden;
  background: #030606;
  opacity: 0;
  transition: opacity 1100ms ease;
}
.book-media.is-live { opacity: 1; }
.book-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 62%, #020303 100%); pointer-events: none; }
.book-media img, .book-media video { width: 100%; height: 100%; object-fit: cover; animation: media-reveal 1.2s ease both; }
@keyframes media-reveal { from { opacity: 0; transform: scale(1.03); filter: brightness(.4); } to { opacity: 1; transform: scale(1); filter: brightness(.78); } }

.book-text {
  position: absolute;
  top: 12vh;
  right: 5.5vw;
  bottom: 13vh;
  width: 31vw;
  overflow: hidden;
  font-size: clamp(26px, 1.9vw, 41px);
  line-height: 1.23;
  text-wrap: pretty;
}
.book-paragraph { max-height: 75vh; margin: 0 0 1em; overflow: hidden; opacity: 1; transition: color 700ms ease, opacity 800ms ease, max-height 900ms ease, margin 900ms ease; }
.book-paragraph.is-upcoming { max-height: 0; margin: 0; opacity: 0; }
.book-paragraph.is-previous { color: rgba(255,255,255,.28); }
.book-paragraph.is-gone { max-height: 0; margin: 0; opacity: 0; }
.book-word { color: transparent; opacity: 0; transition: color 520ms ease, opacity 520ms ease; }
.book-word.is-spoken { color: rgba(255,255,255,.46); opacity: 1; }
.book-word.is-current { color: #fff; opacity: 1; }
.book-paragraph.is-previous .book-word { color: rgba(255,255,255,.28); opacity: 1; }

.book-controls {
  position: absolute;
  left: 27%;
  bottom: 5vh;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: clamp(25px, 3.4vw, 68px);
  transform: translateX(-50%);
}
.book-controls button { font: 400 clamp(35px, 3.2vw, 65px)/1 var(--ui); user-select: none; touch-action: none; }
.book-controls .play-control { font-size: clamp(27px, 2.5vw, 50px); }
.book-controls .chapter-skip { font-size: clamp(24px, 2.3vw, 46px); letter-spacing: -.32em; padding-right: .32em; opacity: .72; }

.chapter-intro {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  background: #000;
  font-size: clamp(52px, 5.5vw, 106px);
  line-height: .92;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
.chapter-intro strong { display: block; max-width: 12ch; margin-top: 12px; font-weight: 400; }
.chapter-intro.is-visible { visibility: visible; animation: chapter-reveal 2.8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes chapter-reveal { 0% { opacity: 0; letter-spacing: .12em; filter: blur(12px); } 22%,72% { opacity: 1; letter-spacing: 0; filter: blur(0); } 100% { opacity: 0; filter: blur(8px); } }

.case-nav {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.5vh, 30px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 28px);
  transform: translateX(-50%);
  z-index: 20;
  font-family: var(--ui);
}

.case-title, .nav-arrow, .down-arrow {
  border: 0;
  background: none;
  color: var(--ink);
}

.case-title { min-width: 13ch; padding: 8px 0; font-size: clamp(17px, 1.5vw, 30px); cursor: default; }
.nav-arrow { padding: 6px; font-size: clamp(24px, 2vw, 39px); cursor: pointer; transition: opacity 180ms ease, transform 180ms ease; }
.nav-arrow:hover:not(:disabled) { transform: scale(1.12); }
.nav-arrow:disabled { opacity: .25; cursor: not-allowed; }

.down-arrow {
  position: absolute;
  left: clamp(23px, 3.8vw, 78px);
  bottom: clamp(18px, 3vh, 38px);
  padding: 3px 10px;
  font-size: clamp(23px, 1.9vw, 39px);
  opacity: .58;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .document-stage { inset: 15% 23% 20% 23%; }
  .document { width: min(54vw, 470px); }
  .tray { --thumb-tray-height: clamp(86px, 15vh, 150px); }
}

@media (max-width: 760px) {
  .case-track { height: calc(100% - 58px); padding: 12px 0 0 10px; gap: 10px; }
  .case-canvas { --document-font-size: clamp(10px, 2.35vw, 12px); --thumb-font-size: clamp(3px, .705vw, 3.6px); flex-basis: calc(100vw - 20px); }
  .case-meta { top: 3.2%; left: 4%; grid-template-columns: 40% 60%; width: 55%; }
  .case-number { font-size: clamp(42px, 14vw, 68px); }
  .case-name { width: 132px; font-size: 13px; line-height: 1.35; }
  .case-number-label, .case-description-label { margin-top: 7px; font-size: 8px; }
  .labels { top: 3%; right: 3.5%; width: 37%; gap: 4px; }
  .labels .section-label { display: none; }
  .label-button img { height: clamp(14px, 2.4vh, 21px); }
  .label-button:hover, .label-button.is-selected { transform: translateX(-5px); }
  .document-stage { inset: 17% 3% 16% 3%; }
  .document { width: clamp(330px, 82vw, 500px); height: auto; padding: clamp(24px, 7vw, 40px); font-size: var(--document-font-size); line-height: 1.25; }
  .tray { bottom: 6.2%; }
  .tray { --thumb-tray-height: 68px; }
  .tray-pending { left: 4%; width: 48%; }
  .tray-sorted { right: 4%; width: 31%; }
  .tray .section-label { bottom: -20px; min-height: 13px; font-size: 6px; }
  .thumbs { height: var(--thumb-tray-height); }
  .paper-thumb { flex-basis: 66px; width: 66px; padding: 5px; font-size: .1vw; }
  .case-nav { bottom: 7px; gap: 5px; }
  .case-title { font-size: 13px; }
  .nav-arrow { font-size: 20px; }
  .down-arrow { left: 12px; bottom: 6px; display: flex; align-items: flex-end; gap: 5px; padding-bottom: 0; font: 400 20px/1 var(--ui); }
  .return-note { margin-left: 0; max-width: 120px; padding-bottom: 1px; font-size: 8px; line-height: 1.15; white-space: normal; text-align: left; }
  .instruction { gap: 18px; }
  .instruction-card { padding: 38px 30px; border-radius: 38px; }
  .instruction-card h1 { margin-bottom: 24px; font-size: 21px; }
  .instruction-card p { margin-bottom: 22px; font-size: 17px; }
  .instruction-start { padding: 20px; font-size: 19px; }
  .sound-warning { bottom: 2.4vh; font-size: 11px; }
  .exit-question { padding: 38px 32px; border-radius: 38px; font-size: 29px; }
  .exit-return { padding: 20px; font-size: 29px; }
  .exit-question-loud { font-size: 38px; }
  .exit-step-two .exit-question { padding: 48px 26px; }
  .exit-step-two .exit-return { padding: 28px; font-size: 35px; }
  .last-return, .go-home { font-size: 48px; }
  .book-back { top: 18px; left: 15px; font-size: 35px; }
  .chapter-indicator { top: 18px; right: 15px; min-width: 112px; padding: 9px 12px; font-size: 10px; }
  .book-media { inset: 0 0 48% 0; }
  .book-media::after { background: linear-gradient(180deg, transparent 60%, #020303 100%); }
  .book-text { top: 48%; right: 9%; bottom: 12%; width: 82%; font-size: clamp(16px, 4.3vw, 21px); line-height: 1.2; }
  .book-controls { left: 50%; bottom: 3.3vh; gap: 23px; }
  .book-controls button { font-size: 31px; }
  .book-controls .play-control { font-size: 24px; }
  .book-controls .chapter-skip { font-size: 23px; }
  .chapter-intro { padding: 30px; font-size: 48px; }
}

@media (max-width: 420px) {
  .document-stage { top: 18%; }
  .document { width: min(88vw, 370px); }
  .paper-thumb { width: 58px; flex-basis: 58px; }
}

/* Third shell: a shader-driven, non-verbal language. */
.third-shell {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #000;
  color: #111;
  cursor: default;
  transition: background 1800ms cubic-bezier(.7, 0, .2, 1);
  touch-action: manipulation;
}
.third-shell.is-white { background: #fff; }
.language-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.third-choice-zones { position: absolute; inset: 0; z-index: 3; display: none; }
.third-choice-zones.is-visible { display: grid; grid-template-columns: 1fr 1fr; }
.third-choice-zones button { border: 0; background: transparent; cursor: pointer; }
.third-choice-zones button:focus-visible { outline: 2px solid rgba(120,120,120,.35); outline-offset: -8px; }
.third-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #fff;
  pointer-events: none;
}
.third-image-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(22px) brightness(1.12);
  transform: scale(1.025);
  transition: opacity 2800ms cubic-bezier(.35, 0, .2, 1), filter 2800ms ease, transform 3600ms ease;
}
.third-image-frame.is-current { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
.third-image-frame.is-leaving { opacity: 0; filter: blur(26px) brightness(1.12); transform: scale(1.018); }
.third-image img { position: absolute; inset: 0; width: 100%; height: 100%; }
.third-image-back { object-fit: cover; transform: scale(1.12); filter: blur(42px) saturate(.72) contrast(.82); opacity: .72; }
.third-image-front { object-fit: cover; filter: saturate(.82) contrast(.9); }
.third-hint {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  margin: 0;
  transform: translateX(-50%);
  font: 400 clamp(10px, .75vw, 14px)/1 "EB Garamond", serif;
  letter-spacing: .12em;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.third-shell.is-ready .third-hint { opacity: .25; }
.third-credits {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(32px, 6vh, 72px) clamp(24px, 6vw, 110px) clamp(24px, 4vh, 52px);
  background: #fff;
  font-family: "EB Garamond", serif;
  text-align: center;
  transform: translateY(100%);
  transition: transform 4800ms cubic-bezier(.48, 0, .18, 1);
}
.third-credits.is-visible { transform: translateY(0); }
.third-credits__names { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2.2vh; }
.third-credits__names p { margin: 0; font-size: clamp(18px, 1.5vw, 30px); }
.third-credits__names strong { margin: 0 0 clamp(38px, 6vh, 76px); font-size: clamp(30px, 3.6vw, 66px); font-weight: 400; }

.course-webring {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 20px 0 0;
  border-top: 1px solid currentColor;
  color: #111;
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.course-webring h2 { margin: 0 0 12px; font: 600 20px/1.3 Inter, sans-serif; }
.course-webring__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; align-items: start; }
.course-webring__nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.course-webring__nav a:last-child { justify-content: flex-end; text-align: right; }
.course-webring__nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (max-width: 760px) {
  .third-image-back { filter: blur(28px) saturate(.72) contrast(.82); }
  .third-credits { padding: 28px 22px 22px; }
  .third-credits__names { gap: 1.6vh; }
  .third-credits__names p { font-size: 16px; }
  .third-credits__names strong { margin-bottom: 4vh; font-size: clamp(30px, 9vw, 48px); }
  .course-webring { padding-top: 16px; font-size: 14px; }
  .course-webring h2 { margin-bottom: 8px; font-size: 17px; }
  .course-webring__nav { grid-template-columns: 1fr; gap: 0; }
  .course-webring__nav a:last-child { justify-content: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}