/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, Helvetica Neue, Arial, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.visible {
  visibility: visible;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.inline {
  display: inline;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.overline {
  text-decoration-line: overline;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* ============================================================================
   TOKENS
   ========================================================================== */
:root {
  --font-marker: 'Permanent Marker', 'Comic Sans MS', cursive;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-condensed: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --font-oswald: 'Oswald', ui-sans-serif, system-ui, sans-serif;
  --font-type: 'Special Elite', 'Courier New', monospace;
  --font-sans: ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;

  --ink: #1c1a17;
  --cream: #f7f1e6;
  --gold: #b7873f;
  --rose: #a24b57;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #0a0b0f;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.site {
  overflow-x: clip;
}

/* ============================================================================
   MOTION PRIMITIVES
   ========================================================================== */
.reveal {
  opacity: 1;
}
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.75s ease,
    transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.js .reveal--in {
  opacity: 1;
  transform: none;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.12);
}
.scroll-progress__bar {
  height: 100%;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), #e6c25a, var(--rose));
  transition: transform 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .decor * {
    animation: none !important;
  }
}

/* ============================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vh 6vw;
  color: var(--cream);
  background:
    radial-gradient(120% 80% at 50% 0%, #241f1a 0%, #14110e 55%, #0a0908 100%);
  overflow: hidden;
}
.hero__grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(183, 135, 63, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 135, 63, 0.09) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(90% 70% at 50% 40%, #000 30%, transparent 80%);
  animation: grid-drift 40s linear infinite;
}
.hero__glow {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  top: -20vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 135, 63, 0.22), transparent 60%);
  filter: blur(20px);
  animation: pulse-glow 9s ease-in-out infinite;
}
.hero__inner {
  position: relative;
  z-index: 1;
}
.hero__overline {
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: clamp(0.7rem, 1.6vw, 0.95rem);
  color: var(--gold);
  margin: 0 0 1.6rem;
  opacity: 0;
  animation: rise 1s ease 0.1s forwards;
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 900;
  line-height: 0.98;
  font-size: clamp(3.2rem, 12vw, 8.5rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.hero__name {
  display: block;
  opacity: 0;
  animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero__name:first-child {
  animation-delay: 0.25s;
}
.hero__name:last-child {
  animation-delay: 0.55s;
}
.hero__amp {
  color: var(--gold);
  font-style: italic;
  font-size: 0.62em;
  opacity: 0;
  animation: rise 1.1s ease 0.42s forwards;
}
.hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  color: rgba(247, 241, 230, 0.82);
  max-width: 34ch;
  margin: 2.2rem auto 0;
  opacity: 0;
  animation: rise 1.1s ease 0.85s forwards;
}
.hero__cue {
  position: absolute;
  bottom: 4vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.7rem;
  color: rgba(247, 241, 230, 0.5);
}
.hero__cue-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(rgba(183, 135, 63, 0.9), transparent);
  animation: cue 2.2s ease-in-out infinite;
}

/* ============================================================================
   CHAPTER SHELL
   ========================================================================== */
.chapter {
  position: relative;
  padding: clamp(4.5rem, 12vh, 9rem) 6vw;
  overflow: hidden;
  isolation: isolate;
}
.chapter__inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
}

/* Large hero image below a section title — shows the WHOLE photo, uncropped,
   sized to fit the screen (bounded by both width and height). */
.chapter__hero {
  position: relative;
  z-index: 2;
  margin: clamp(1rem, 2.5vh, 2rem) -6vw clamp(2rem, 5vh, 3.5rem);
  text-align: center;
}
.chapter__hero img {
  display: inline-block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  vertical-align: middle;
}
.chapter__hero figcaption {
  max-width: 820px;
  margin: 1rem auto 0;
  padding: 0 6vw;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  line-height: 1.5;
  opacity: 0.72;
}
.chapter__overline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.chapter__num {
  font-family: var(--font-serif);
  font-size: 0.95rem;
}
.chapter__era {
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: clamp(0.65rem, 1.5vw, 0.8rem);
}
.chapter__title {
  margin: 0 0 1.6rem;
  line-height: 1.02;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
}
.chapter__intro {
  font-size: clamp(1.08rem, 2.3vw, 1.3rem);
  line-height: 1.65;
  max-width: 60ch;
}
.chapter__lead {
  max-width: 62ch;
  margin-bottom: 1.6rem;
}
.chapter__lead p {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.7vw, 1.5rem);
  line-height: 1.72;
  margin: 0 0 1.4rem;
}
.chapter__stories {
  margin-top: 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Story cards (base) */
.story-card {
  position: relative;
  padding: 1.6rem 1.7rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(28, 26, 23, 0.1);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.5);
}
.story-card__tag {
  display: inline-block;
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.62rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  margin-bottom: 0.9rem;
}
.story-card__tag--roast {
  color: var(--rose);
}
.story-card__tag--toast {
  color: var(--gold);
}
.story-card__tag--story {
  color: rgba(28, 26, 23, 0.5);
}
.story-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0 0 0.6rem;
  line-height: 1.15;
}
.story-card__body {
  margin: 0;
  line-height: 1.7;
  white-space: pre-line;
  color: rgba(28, 26, 23, 0.82);
}

/* Gallery */
.gallery {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}
.gallery[data-count='1'] {
  grid-template-columns: 1fr;
  max-width: 460px;
}
@media (min-width: 640px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery[data-count='1'] {
    grid-template-columns: 1fr;
  }
}
.gallery__frame {
  margin: 0;
}
.gallery__img {
  width: 100%;
  height: 220px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  display: block;
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s ease;
}
.gallery[data-count='1'] .gallery__img {
  height: auto;
  max-height: 560px;
}
.gallery__frame:hover .gallery__img {
  transform: scale(1.02);
}
.gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  padding: 0 1rem;
  text-align: center;
  font-size: 0.8rem;
  border: 1px dashed rgba(120, 120, 120, 0.5);
  border-radius: 10px;
  background: rgba(128, 128, 128, 0.08);
  color: rgba(120, 120, 120, 0.8);
}
.gallery__caption {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.4;
  opacity: 0.72;
}

/* Facts list */
.facts__list {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.facts__item {
  display: flex;
  gap: 1rem;
  font-size: clamp(1.02rem, 2.1vw, 1.22rem);
  line-height: 1.6;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
}
.facts__num {
  font-family: var(--font-serif);
  color: var(--gold);
}
.facts__closer {
  margin-top: 2rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  line-height: 1.55;
}
.facts__attribution {
  margin-top: 1.4rem;
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  opacity: 0.6;
}

/* ============================================================================
   DECOR LAYER
   ========================================================================== */
.decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ---- THEME: SCHOOL (90s notebook) ---------------------------------------- */
[data-theme='school'] {
  color: #22252e;
  background-color: #fbf7ee;
  background-image:
    linear-gradient(90deg, transparent 46px, rgba(224, 122, 122, 0.55) 46px, rgba(224, 122, 122, 0.55) 48px, transparent 48px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 33px, rgba(120, 170, 214, 0.4) 33px, rgba(120, 170, 214, 0.4) 34px);
}
[data-theme='school'] .chapter__num {
  color: #ff5d8f;
}
[data-theme='school'] .chapter__era {
  color: #2ec4b6;
}
[data-theme='school'] .chapter__title {
  font-family: var(--font-marker);
  color: #2b2d42;
  font-weight: 400;
  transform: rotate(-1.2deg);
}
[data-theme='school'] .story-card {
  background: #fffdf8;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.4);
}
[data-theme='school'] .chapter__stories .reveal:nth-child(odd) .story-card {
  transform: rotate(-0.7deg);
}
[data-theme='school'] .chapter__stories .reveal:nth-child(even) .story-card {
  transform: rotate(0.7deg);
}
[data-theme='school'] .story-card::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 84px;
  height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 202, 58, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
[data-theme='school'] .story-card__title {
  font-family: var(--font-marker);
  font-weight: 400;
}
.m-shape {
  position: absolute;
  animation: float 7s ease-in-out infinite;
}
.m-shape--zig {
  top: 12%;
  right: 8%;
  width: 60px;
  height: 60px;
  border: 6px solid #ff5d8f;
  border-radius: 0;
  transform: rotate(20deg);
  clip-path: polygon(0 20%, 20% 20%, 20% 0, 60% 0, 60% 40%, 100% 40%, 100% 100%, 0 100%);
  opacity: 0.5;
}
.m-shape--tri {
  bottom: 14%;
  left: 6%;
  width: 0;
  height: 0;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
  border-bottom: 54px solid #9b5de5;
  opacity: 0.4;
  animation-delay: 1.2s;
}
.m-shape--dot {
  top: 22%;
  left: 12%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #2ec4b6 0 4px, transparent 4px 9px);
  opacity: 0.55;
  animation-delay: 0.6s;
}
.m-shape--ring {
  bottom: 20%;
  right: 12%;
  width: 70px;
  height: 70px;
  border: 8px solid #ffca3a;
  border-radius: 50%;
  opacity: 0.5;
  animation-delay: 2s;
}
.m-shape--bar {
  top: 55%;
  right: 4%;
  width: 90px;
  height: 16px;
  background: #3a86ff;
  transform: rotate(-35deg);
  opacity: 0.35;
  animation-delay: 1.6s;
}

/* ---- THEME: COLLEGE (early-2000s collegiate + Vegas neon) ---------------- */
[data-theme='college'] {
  color: #eae4d4;
  background:
    radial-gradient(120% 90% at 80% 10%, #123a30 0%, #0c241f 45%, #08150f 100%);
}
[data-theme='college'] .chapter__num {
  color: #e6c25a;
}
[data-theme='college'] .chapter__era {
  color: #7fd1b9;
}
[data-theme='college'] .chapter__title {
  font-family: var(--font-serif);
  font-weight: 900;
  color: #f0e6c8;
  text-shadow: 0 2px 24px rgba(230, 194, 90, 0.25);
}
[data-theme='college'] .chapter__intro {
  color: rgba(234, 228, 212, 0.85);
}
[data-theme='college'] .story-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(230, 194, 90, 0.28);
  box-shadow:
    0 20px 50px -30px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme='college'] .story-card__title {
  color: #f0e6c8;
}
[data-theme='college'] .story-card__body {
  color: rgba(234, 228, 212, 0.82);
}
[data-theme='college'] .story-card__tag--roast {
  color: #ff6b9d;
}
[data-theme='college'] .story-card__tag--toast {
  color: #e6c25a;
}
[data-theme='college'] .story-card__tag--story {
  color: rgba(234, 228, 212, 0.6);
}
[data-theme='college'] .story-card[data-tone='toast']:hover {
  box-shadow:
    0 20px 60px -26px rgba(230, 194, 90, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.neon-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.5;
  animation: drift 16s ease-in-out infinite;
}
.neon-orb--a {
  width: 340px;
  height: 340px;
  top: -60px;
  right: -40px;
  background: #ff2e88;
}
.neon-orb--b {
  width: 300px;
  height: 300px;
  bottom: -80px;
  left: -60px;
  background: #26c6da;
  animation-delay: 3s;
}
.sweep {
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(230, 194, 90, 0.08), transparent);
  animation: sweep 9s linear infinite;
}

/* ---- THEME: CITY (7H — NYC night) ---------------------------------------- */
[data-theme='city'] {
  color: #eef1f6;
  background: linear-gradient(180deg, #0a0b10 0%, #0e1017 60%, #141826 100%);
}
[data-theme='city'] .chapter__num {
  color: #00e5ff;
}
[data-theme='city'] .chapter__era {
  color: #00e5ff;
}
[data-theme='city'] .chapter__title {
  font-family: var(--font-condensed);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: clamp(3rem, 10vw, 6rem);
  color: #fff;
  text-shadow: 0 0 26px rgba(0, 229, 255, 0.35);
}
[data-theme='city'] .chapter__intro {
  color: rgba(238, 241, 246, 0.82);
}
[data-theme='city'] .story-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid #00e5ff;
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.9);
}
[data-theme='city'] .story-card:hover {
  border-left-color: #ff3ea5;
  box-shadow: 0 20px 60px -26px rgba(0, 229, 255, 0.4);
}
[data-theme='city'] .story-card__title {
  font-family: var(--font-condensed);
  font-weight: 400;
  letter-spacing: 0.03em;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  color: #fff;
}
[data-theme='city'] .story-card__body {
  color: rgba(238, 241, 246, 0.8);
}
[data-theme='city'] .story-card__tag {
  font-family: var(--font-oswald);
}
[data-theme='city'] .story-card__tag--story {
  color: rgba(238, 241, 246, 0.55);
}
.decor--city .skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='300' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath fill='%23060810' d='M0 300 V150 H40 V110 H70 V150 H100 V70 H130 V120 H175 V90 H205 V160 H240 V60 H270 V120 H320 V40 H350 V110 H395 V150 H440 V80 H480 V130 H520 V95 H560 V160 H600 V50 H640 V120 H680 V85 H720 V150 H760 V110 H800 V60 H840 V130 H880 V90 H920 V160 H960 V70 H1000 V120 H1040 V95 H1080 V150 H1120 V55 H1160 V120 H1200 V90 H1240 V150 H1280 V80 H1320 V130 H1360 V100 H1400 V150 H1440 V300 Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom;
  opacity: 0.9;
}
.decor--city .citylights {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background-image:
    radial-gradient(1.4px 1.4px at 20px 40px, rgba(255, 214, 138, 0.9) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 80px 90px, rgba(255, 214, 138, 0.8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 140px 60px, rgba(0, 229, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 50px 120px, rgba(255, 214, 138, 0.7) 50%, transparent 51%);
  background-size: 160px 160px;
  opacity: 0.55;
  animation: twinkle 4.5s ease-in-out infinite;
}
.decor--city .neon-orb--cyan {
  width: 300px;
  height: 300px;
  top: -60px;
  left: -40px;
  background: #00e5ff;
  opacity: 0.28;
}
.decor--city .neon-orb--pink {
  width: 260px;
  height: 260px;
  top: 20%;
  right: -60px;
  background: #ff3ea5;
  opacity: 0.28;
  animation-delay: 4s;
}

/* ---- THEME: DOSSIER (typewriter field notes) ----------------------------- */
[data-theme='dossier'] {
  color: #2a2620;
  background-color: #e7dcc2;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.04), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.05), transparent 45%);
}
[data-theme='dossier'] .chapter__num {
  color: #b3402f;
}
[data-theme='dossier'] .chapter__era,
[data-theme='dossier'] .facts__attribution {
  font-family: var(--font-type);
  color: #6b5d45;
  letter-spacing: 0.12em;
}
[data-theme='dossier'] .chapter__title {
  font-family: var(--font-type);
  font-weight: 400;
  color: #2a2620;
  font-size: clamp(2rem, 6vw, 3.4rem);
}
[data-theme='dossier'] .chapter__intro,
[data-theme='dossier'] .facts__item {
  font-family: var(--font-type);
  line-height: 1.75;
}
[data-theme='dossier'] .facts__item {
  border-left-color: #b3402f;
}
[data-theme='dossier'] .facts__num {
  color: #b3402f;
}
[data-theme='dossier'] .facts__closer {
  font-family: var(--font-type);
  font-style: normal;
}
.decor--dossier .stamp {
  position: absolute;
  bottom: 6%;
  right: 5%;
  font-family: var(--font-oswald);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(1rem, 2.4vw, 1.7rem);
  color: rgba(179, 64, 47, 0.4);
  border: 3px solid rgba(179, 64, 47, 0.4);
  padding: 0.25rem 0.85rem;
  border-radius: 8px;
  transform: rotate(-11deg);
}
@media (max-width: 720px) {
  .decor--dossier .stamp {
    bottom: 3%;
    right: 4%;
    font-size: 1rem;
  }
}

/* ---- THEME: FINALE (warm romantic) --------------------------------------- */
[data-theme='finale'] {
  color: #2a2118;
  background: linear-gradient(180deg, #fdf7ec 0%, #f7e8cf 60%, #f1dcbd 100%);
}
[data-theme='finale'] .chapter__num,
[data-theme='finale'] .chapter__era {
  color: var(--gold);
}
[data-theme='finale'] .chapter__title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: #3a2c1c;
}
[data-theme='finale'] .story-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(183, 135, 63, 0.25);
}
[data-theme='finale'] .story-card__title {
  color: #3a2c1c;
}
.decor--finale .glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  animation: pulse-glow 11s ease-in-out infinite;
}
.decor--finale .glow--a {
  width: 380px;
  height: 380px;
  top: -80px;
  left: -60px;
  background: rgba(230, 194, 90, 0.5);
}
.decor--finale .glow--b {
  width: 320px;
  height: 320px;
  bottom: -100px;
  right: -60px;
  background: rgba(200, 120, 90, 0.35);
  animation-delay: 4s;
}

/* ============================================================================
   VIDEO
   ========================================================================== */
.video {
  position: relative;
  padding: clamp(4.5rem, 12vh, 8rem) 6vw;
  background: linear-gradient(180deg, #141826 0%, #0a0b10 100%);
  color: var(--cream);
  overflow: hidden;
}
.video__inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.video__overline {
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.75rem;
  color: #00e5ff;
  margin: 0 0 0.9rem;
}
.video__title {
  font-family: var(--font-condensed);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: clamp(2.4rem, 7vw, 4rem);
  margin: 0 0 2rem;
}
.video__frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 60px -20px rgba(0, 229, 255, 0.4);
}
.video__player {
  width: 100%;
  height: 100%;
}
.video__placeholder {
  font-size: 0.9rem;
  color: rgba(247, 241, 230, 0.4);
}
.video__storyboard {
  margin-top: 2.6rem;
  text-align: left;
  max-width: 560px;
  margin-inline: auto;
}
.video__shots {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(238, 241, 246, 0.72);
}

/* ============================================================================
   CHAPTER INLINE VIDEO
   ========================================================================== */
.chapter__video {
  margin: 2.4rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.chapter__video--portrait {
  max-width: 340px;
}
.chapter__video--landscape {
  max-width: 720px;
}
.chapter__video-player {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
  background: #000;
  display: block;
}
.chapter__video-caption {
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  opacity: 0.6;
  text-align: center;
}

/* ============================================================================
   CLOSING
   ========================================================================== */
.closing {
  position: relative;
  padding: clamp(5rem, 16vh, 10rem) 6vw;
  overflow: hidden;
  text-align: center;
}
.closing__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}
.closing__toast {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1.4;
  color: #3a2c1c;
  margin: 0;
}
.closing__author {
  margin-top: 1.6rem;
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.85rem;
  color: var(--gold);
}

/* ============================================================================
   SPEECH (primary content, top of page)
   ========================================================================== */
.speech-intro {
  padding: clamp(4rem, 11vh, 7rem) 6vw clamp(2rem, 5vh, 3rem);
  background: linear-gradient(180deg, #fbf6ec 0%, #f6efe1 100%);
  color: #221f1a;
  text-align: center;
}
.speech-intro__inner {
  max-width: 760px;
  margin: 0 auto;
}
.speech-intro__overline {
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 0.82rem;
  color: var(--gold);
  margin: 0 0 0.9rem;
}
.speech-intro__title {
  font-family: var(--font-serif);
  font-weight: 900;
  line-height: 1;
  font-size: clamp(2.8rem, 10vw, 6rem);
  margin: 0;
}
.speech-intro__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  opacity: 0.68;
  max-width: 52ch;
  margin: 1.5rem auto 0;
}

/* Each speech section reuses the .chapter theme system; these style its prose. */
.speech-part__body {
  margin-top: 1.9rem;
  max-width: 62ch;
}
.speech-part__para {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  line-height: 1.72;
  margin: 0 0 1.4rem;
}
.speech-part__note {
  margin-top: 2.2rem;
  padding-top: 1.1rem;
  border-top: 1px dashed currentColor;
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  color: var(--rose);
  opacity: 0.85;
}

/* ============================================================================
   NOTES / WIP (bottom of page)
   ========================================================================== */
.notes__banner {
  background: #14110e;
  color: var(--cream);
  text-align: center;
  padding: clamp(3.5rem, 9vh, 6rem) 6vw;
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}
.notes__label {
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: clamp(1rem, 3.2vw, 1.5rem);
  color: var(--gold);
  margin: 0 0 0.7rem;
}
.notes__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: rgba(247, 241, 230, 0.72);
  max-width: 46ch;
  margin: 0 auto;
}

/* ============================================================================
   APPENDIX (bottom of page, out of main flow)
   ========================================================================== */
.appendix {
  background: #0d0f13;
  color: var(--cream);
  padding: clamp(3.5rem, 9vh, 6rem) 6vw;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.appendix__inner {
  max-width: 820px;
  margin: 0 auto;
}
.appendix__label {
  font-family: var(--font-oswald);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: rgba(247, 241, 230, 0.55);
  margin: 0 0 0.4rem;
}
.appendix__note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(247, 241, 230, 0.5);
  margin: 0 0 2rem;
}
.appendix__stories {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* ============================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes cue {
  0%,
  100% {
    transform: scaleY(0.4);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes pulse-glow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.62;
  }
}
@keyframes grid-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 60px 60px;
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-18px) rotate(8deg);
  }
}
@keyframes drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, -24px);
  }
}
@keyframes sweep {
  from {
    left: -30%;
  }
  to {
    left: 130%;
  }
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.7;
  }
}