/* ============================================================
 *  ARCHIVE EXPERIENCE — TEDFLIX reimagined as four bespoke rooms.
 *  Cinema (Films) · Gallery (Photography) · Listening Room (Music) ·
 *  Notebook (Literature). Built on the site's bronze-on-black language.
 *  Lives inside the 1920 scaled stage.
 * ============================================================ */
.arc-section { position: relative; background: #000; padding: 92px 0 110px; overflow: hidden; }
.arc { position: relative; z-index: 2; max-width: 1720px; margin: 0 auto; padding: 0 64px; }

/* Header sits above the rooms (reuses .tedflix-* lockup styles) */
.arc-header { position: relative; z-index: 5; margin-bottom: 18px; }

/* Room entrance — every tab change feels like stepping into a new wing */
.arc-room-anim { animation: arcRoomIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes arcRoomIn {
  from { opacity: 0; filter: blur(16px); transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0)    scale(1); }
}
/* Inner element crossfade on featured-work change */
@keyframes arcFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .arc-room-anim { animation: none; }
}

/* Shared CTA sizing (override fixed .tk-btn width) */
.cinema-meta .tk-btn, .gal-plaque .tk-btn, .lr-panel .tk-btn, .nb-page .tk-btn {
  width: auto; padding: 0 34px; margin-top: 6px;
}

/* ============================================================
 *  CINEMA — FILMS · a private screening room
 * ============================================================ */
.cinema { position: relative; padding: 30px 0 8px; }
.cinema-atmos { position: absolute; inset: -40px -200px; z-index: 0; pointer-events: none; overflow: hidden; }
.cinema-beam {
  position: absolute; top: -8%; left: 50%; width: 70%; height: 120%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, rgba(244,213,142,0) 42%, rgba(244,213,142,0.12) 50%, rgba(244,213,142,0) 58%);
  filter: blur(8px); opacity: 0.7;
}
.cinema-grain { display: none; }
@keyframes cinGrain { 0%{transform:translate(0,0)} 33%{transform:translate(-1.5%,1%)} 66%{transform:translate(1%,-1.5%)} 100%{transform:translate(0,0)} }
.cinema-seats { display: none; }

.cinema-stage {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.55fr 0.92fr; gap: 46px; align-items: center;
}

/* The projected screen */
.cinema-screen {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: radial-gradient(125% 125% at 50% 38%, #14100a 0%, #0a0805 52%, #050302 100%);
  box-shadow: 0 60px 130px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,162,75,0.18), 0 0 80px rgba(244,213,142,0.10);
  animation: arcFade 0.7s ease both;
}
.cinema-screen__fill { display: none; }
.cinema-screen__img { position: absolute; inset: 0; margin: auto; max-height: 100%; max-width: 100%; width: auto; height: 100%; object-fit: contain; display: block; }
.cinema-screen__vig { position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%); }
.cinema-marquee {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: #F4E4BE; padding: 8px 14px; border-radius: 4px;
  background: rgba(8,5,2,0.6); border: 1px solid rgba(232,201,138,0.32); backdrop-filter: blur(5px);
}
.cinema-marquee__dot { width: 8px; height: 8px; border-radius: 50%; background: #E8504A; box-shadow: 0 0 10px #E8504A; animation: cinRec 1.4s ease-in-out infinite; }
@keyframes cinRec { 50% { opacity: 0.3; } }
.cinema-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  background: none; border: 0; cursor: pointer; color: #F5EDE3;
}
.cinema-play > span:first-child,
.cinema-play :where(svg) { filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6)); }
.cinema-play__label { font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.92; transition: opacity 0.2s ease; }
.cinema-play:hover .cinema-play__label { opacity: 1; }

/* Poster + metadata dossier */
.cinema-dossier { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: start; animation: arcFade 0.7s ease both; }
.cinema-poster { border-radius: 8px; overflow: hidden; box-shadow: 0 28px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,162,75,0.22); }
.cinema-poster img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.cinema-meta { display: flex; flex-direction: column; gap: 12px; }
.cinema-cat { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--grad-bronze); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cinema-title { font-family: var(--font-display); font-size: clamp(26px, 2.1vw, 40px); line-height: 1.0; margin: 2px 0 0; color: #F4E8CF; }
.cinema-specs { display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,237,227,0.72); }
.cinema-specs i { width: 4px; height: 4px; border-radius: 50%; background: rgba(201,162,75,0.6); }
.cinema-logline { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: rgba(232,222,205,0.86); margin: 2px 0 4px; max-width: 420px; }
.cinema-awards { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.cinema-award { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; }
.cinema-award em { font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,228,190,0.92); }
.cinema-award .award__laurel { height: 24px; width: auto; opacity: 0.92; }

/* Archive reels */
.cinema-reels { position: relative; z-index: 2; display: flex; gap: 26px; margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(201,162,75,0.16); }
.reel { display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; padding: 0; flex: 1; max-width: 200px; }
.reel-can {
  position: relative; width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  background: #0C0805; border: 3px solid rgba(40,28,16,0.9);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,0.6), 0 16px 34px rgba(0,0,0,0.55);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.reel-can img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; filter: grayscale(0.3) brightness(0.7); transition: opacity 0.3s ease, filter 0.3s ease; }
.reel-sprockets {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 30%, transparent 31%);
  box-shadow:
    inset 0 14px 0 -10px rgba(0,0,0,0.7), inset 0 -14px 0 -10px rgba(0,0,0,0.7),
    inset 14px 0 0 -10px rgba(0,0,0,0.7), inset -14px 0 0 -10px rgba(0,0,0,0.7);
}
.reel-label { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.06em; color: rgba(216,204,182,0.6); text-align: center; line-height: 1.3; transition: color 0.25s ease; }
.reel:hover .reel-can { transform: translateY(-4px); }
.reel:hover .reel-can img { opacity: 0.8; }
.reel.is-active .reel-can { border-color: rgba(232,201,138,0.8); box-shadow: inset 0 0 0 6px rgba(0,0,0,0.5), 0 0 36px rgba(232,201,138,0.3), 0 16px 34px rgba(0,0,0,0.6); animation: reelSpin 8s linear infinite; }
.reel.is-active .reel-can img { opacity: 0.95; filter: none; }
.reel.is-active .reel-label { color: #F4E4BE; }
@keyframes reelSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reel.is-active .reel-can { animation: none; } }

/* ============================================================
 *  GALLERY — PHOTOGRAPHY · a museum exhibition
 * ============================================================ */
.gal { position: relative; padding: 20px 0 8px; }
.gal-atmos { position: absolute; inset: -60px -200px; z-index: 0; pointer-events: none; overflow: hidden; }
.gal-wall { display: none; }
.gal-wall::after { display: none; }
.gal-spot { position: absolute; top: -10%; width: 46%; height: 130%; filter: blur(20px); }
.gal-spot--l { left: 2%; background: radial-gradient(50% 50% at 50% 20%, rgba(245,237,227,0.14) 0%, rgba(245,237,227,0) 60%); }
.gal-spot--r { right: 2%; background: radial-gradient(50% 50% at 50% 20%, rgba(245,237,227,0.10) 0%, rgba(245,237,227,0) 60%); }

.gal-stage { position: relative; z-index: 2; display: flex; justify-content: center; padding: 18px 0 6px; }
.gal-frame {
  position: relative; margin: 0; display: grid; grid-template-columns: minmax(420px, 640px) 360px; gap: 40px; align-items: center;
  animation: arcFade 0.7s ease both;
}
.gal-frame__light {
  position: absolute; top: -30px; left: 0; width: 640px; height: 60px; z-index: 4; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255,244,214,0.5) 0%, rgba(255,244,214,0) 70%);
}
.gal-frame__mat {
  position: relative; padding: 26px; background: #F4EFE6; border-radius: 2px;
  box-shadow: 0 50px 110px rgba(0,0,0,0.7), 0 0 0 10px #100c08, 0 0 0 12px rgba(201,162,75,0.5);
}
.gal-frame__mat::after { content: ""; position: absolute; inset: 26px; box-shadow: inset 0 0 18px rgba(0,0,0,0.25); pointer-events: none; }
.gal-frame__mat img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Museum label plaque */
.gal-plaque { display: flex; flex-direction: column; gap: 12px; padding-left: 6px; border-left: 2px solid rgba(201,162,75,0.4); padding-left: 26px; }
.gal-plaque__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.gal-plaque__cat { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--grad-bronze); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gal-plaque__yr { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.16em; color: rgba(245,237,227,0.6); }
.gal-plaque__title { font-family: var(--font-display); font-size: clamp(26px, 2.2vw, 42px); line-height: 1.0; margin: 0; color: #F4E8CF; }
.gal-plaque__cap { font-family: var(--font-body); font-style: italic; font-size: 16px; line-height: 1.55; color: rgba(232,222,205,0.82); margin: 0; }
.gal-exif { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.gal-exif span { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 10.5px; letter-spacing: 0.06em; color: rgba(232,201,138,0.85);
  padding: 5px 9px; border: 1px solid rgba(201,162,75,0.3); border-radius: 3px; background: rgba(20,15,8,0.5); }

/* Contact sheet / negative strip */
.gal-contact {
  position: relative; z-index: 2; display: flex; gap: 14px; justify-content: center;
  margin-top: 44px; padding: 22px 26px; background: #0a0a0c; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(201,162,75,0.12);
}
.gal-contact__edge { position: absolute; left: 14px; right: 14px; height: 12px;
  background-image: radial-gradient(circle, #1c1c20 0 4px, transparent 5px);
  background-size: 22px 12px; background-repeat: repeat-x; opacity: 0.9; }
.gal-contact__edge--t { top: 5px; } .gal-contact__edge--b { bottom: 5px; }
.neg { position: relative; width: 132px; height: 132px; border-radius: 2px; overflow: hidden; cursor: pointer; padding: 0; border: 0;
  background: #000; filter: brightness(0.6) contrast(1.05); transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.neg img { width: 100%; height: 100%; object-fit: cover; }
.neg-no { position: absolute; bottom: 5px; left: 6px; font-family: ui-monospace, monospace; font-size: 10px; color: rgba(232,201,138,0.7); letter-spacing: 0.1em; }
.neg:hover { filter: brightness(0.85); transform: translateY(-3px); }
.neg.is-active { filter: none; box-shadow: 0 0 0 2px rgba(232,201,138,0.85), 0 14px 30px rgba(0,0,0,0.5); transform: translateY(-3px); }

/* ============================================================
 *  LISTENING ROOM — MUSIC · vinyl, waveform, stage light
 * ============================================================ */
.lr { position: relative; padding: 20px 0 8px; }
.lr-atmos { position: absolute; inset: -60px -220px; z-index: 0; pointer-events: none; overflow: hidden; }
.lr-beam { position: absolute; top: -12%; width: 30%; height: 150%; filter: blur(14px); transform-origin: 50% 0; }
.lr-beam--l { left: 16%; background: linear-gradient(180deg, rgba(217,95,16,0.22) 0%, rgba(217,95,16,0) 70%); transform: rotate(10deg); animation: lrSweep 7s ease-in-out infinite alternate; }
.lr-beam--r { right: 16%; background: linear-gradient(180deg, rgba(244,213,142,0.20) 0%, rgba(244,213,142,0) 70%); transform: rotate(-10deg); animation: lrSweep 7s ease-in-out infinite alternate-reverse; }
@keyframes lrSweep { from { transform: rotate(10deg); } to { transform: rotate(2deg); } }
.lr-fog { display: none; }
@keyframes lrFog { from { opacity: 0.7; } to { opacity: 1; } }

.lr-stage { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; padding: 20px 0 8px; }

/* Vinyl + sleeve */
.lr-deck { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; animation: arcFade 0.7s ease both; }
.lr-vinyl { position: absolute; left: 50%; top: 50%; transform: translate(-26%, -50%); width: 360px; height: 360px; z-index: 1; }
.lr-vinyl__disc {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1a1a1d 0 30%, #0a0a0c 31% 100%);
  box-shadow: 0 40px 90px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.05);
  position: relative; animation: lrSpin 6s linear infinite;
}
.lr-vinyl__groove { position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(255,255,255,0.05); }
.lr-vinyl__groove--2 { inset: 22%; }
.lr-vinyl__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38%; height: 38%; border-radius: 50%;
  background-size: cover; background-position: center; box-shadow: inset 0 0 0 4px rgba(232,201,138,0.4), 0 0 0 1px rgba(0,0,0,0.6); }
.lr-vinyl__label::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; background: #0a0a0c; box-shadow: 0 0 0 2px rgba(232,201,138,0.5); }
@keyframes lrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lr-vinyl__disc { animation: none; } }
.lr-sleeve { position: relative; z-index: 2; width: 320px; height: 320px; margin-left: 150px; border-radius: 4px; overflow: hidden;
  box-shadow: 0 50px 110px rgba(0,0,0,0.75), 0 0 0 1px rgba(201,162,75,0.25); }
.lr-sleeve img { width: 100%; height: 100%; object-fit: cover; }
.lr-sleeve__sheen { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 40%); }

/* Track panel */
.lr-panel { animation: arcFade 0.7s ease both; }
.lr-nowplaying { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #E8C98A; }
.lr-eq-mini { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.lr-eq-mini i { width: 3px; background: #E8C98A; border-radius: 2px; animation: lrEq 0.9s ease-in-out infinite alternate; }
.lr-eq-mini i:nth-child(2) { animation-delay: 0.25s; } .lr-eq-mini i:nth-child(3) { animation-delay: 0.5s; }
@keyframes lrEq { from { height: 3px; } to { height: 13px; } }
.lr-title { font-family: var(--font-display); font-size: clamp(30px, 2.6vw, 48px); line-height: 1.0; margin: 12px 0 8px; color: #F4E8CF; }
.lr-specs { display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,237,227,0.7); }
.lr-specs i { width: 4px; height: 4px; border-radius: 50%; background: rgba(201,162,75,0.6); }
.lr-wave { display: flex; align-items: center; gap: 3px; height: 56px; margin: 22px 0 20px; }
.lr-wave span { flex: 1; min-width: 2px; background: linear-gradient(180deg, #F4D58E, #C9913F); border-radius: 2px; opacity: 0.85;
  height: 30%; animation: lrWave 1.3s ease-in-out infinite alternate; }
@keyframes lrWave { from { height: 14%; opacity: 0.5; } to { height: 100%; opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) { .lr-wave span { animation: none; height: 50%; } }
.lr-tracks { list-style: none; margin: 0 0 16px; padding: 0; max-width: 460px; }
.lr-tracks li { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(201,162,75,0.12);
  font-family: var(--font-body); color: rgba(232,222,205,0.72); transition: color 0.2s ease; }
.lr-tracks li:hover { color: #F4E8CF; }
.lr-tracks__no { font-family: ui-monospace, monospace; font-size: 12px; color: rgba(201,162,75,0.7); width: 22px; }
.lr-tracks__name { flex: 1; font-size: 15px; }
.lr-tracks li.is-playing { color: #F4E4BE; }
.lr-tracks__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.lr-tracks__bars i { width: 3px; background: #E8C98A; border-radius: 2px; animation: lrEq 0.8s ease-in-out infinite alternate; }
.lr-tracks__bars i:nth-child(2){ animation-delay: 0.2s; } .lr-tracks__bars i:nth-child(3){ animation-delay: 0.45s; }
.lr-note { font-family: var(--font-body); font-style: italic; font-size: 15px; color: rgba(232,222,205,0.7); margin: 0 0 14px; max-width: 440px; }

/* Vinyl rack */
.lr-rack { position: relative; z-index: 2; display: flex; gap: 22px; margin-top: 42px; padding-top: 30px; border-top: 1px solid rgba(201,162,75,0.16); }
.lr-rec { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 0; flex: 1; max-width: 180px; }
.lr-rec__disc { position: absolute; top: 0; right: 22%; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, #1a1a1d 0 32%, #08080a 33%); z-index: 0;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.lr-rec img { position: relative; z-index: 1; width: 104px; height: 104px; object-fit: cover; border-radius: 3px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.55); filter: brightness(0.72) saturate(0.85); transition: filter 0.3s ease, transform 0.4s ease; }
.lr-rec__label { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.05em; color: rgba(216,204,182,0.6); text-align: center; line-height: 1.3; transition: color 0.25s ease; }
.lr-rec:hover img { filter: brightness(0.95); }
.lr-rec:hover .lr-rec__disc { transform: translateX(14px); }
.lr-rec.is-active img { filter: none; box-shadow: 0 0 0 1px rgba(232,201,138,0.7), 0 16px 32px rgba(0,0,0,0.6); }
.lr-rec.is-active .lr-rec__disc { transform: translateX(20px); }
.lr-rec.is-active .lr-rec__label { color: #F4E4BE; }

/* ============================================================
 *  NOTEBOOK — LITERATURE · an open manuscript by candlelight
 * ============================================================ */
.nb { position: relative; padding: 20px 0 8px; }
.nb-atmos { position: absolute; inset: -60px -220px; z-index: 0; pointer-events: none; overflow: hidden; }
.nb-atmos::before { display: none; }
.nb-candle { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: 60%; height: 80%;
  background: radial-gradient(50% 40% at 50% 0%, rgba(217,135,51,0.22) 0%, rgba(217,135,51,0) 62%);
  animation: nbFlicker 4s ease-in-out infinite; }
@keyframes nbFlicker { 0%,100% { opacity: 0.9; } 45% { opacity: 1; } 70% { opacity: 0.82; } }
.nb-shelf { display: none; }
.nb-paper { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,5,2,0.6) 100%); }

.nb-stage { position: relative; z-index: 2; display: flex; justify-content: center; padding: 16px 0 6px; margin: 0 -20px; }
.nb-book {
  position: relative; display: grid; grid-template-columns: 1fr 1.12fr;
  width: min(1460px, 100%); min-height: 660px; align-items: stretch;
  background: url("../assets/paper-texture-gold.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 46px 80px rgba(0,0,0,0.62));
  animation: arcFade 0.7s ease both;
}
.nb-book__spine { display: none; }
.nb-page { position: relative; padding: 88px 48px 96px; min-height: 0;
  color: #2a1d0c; }
.nb-page--left { border-right: 1px solid rgba(120,90,50,0.28); display: flex; flex-direction: column; padding: 88px 44px 96px 160px; }
.nb-kind { font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: #9a6a2c; }
.nb-pagehead { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(80,55,25,0.6); margin-top: 18px; }
.nb-title { font-family: var(--font-display); font-size: clamp(28px, 2.4vw, 44px); line-height: 1.04; margin: 10px 0 0; color: #241608; }
.nb-margin { font-family: var(--font-display); font-style: italic; font-size: 16px; color: #7a5320; margin-top: auto; }
.nb-rule { width: 54px; height: 2px; margin-top: 14px; background: linear-gradient(90deg, #9a6a2c, rgba(154,106,44,0)); }
.nb-page--right { display: flex; flex-direction: column; padding: 88px 160px 96px 44px; }
.nb-excerpt { font-family: var(--font-body); font-size: 17px; line-height: 1.72; color: #3a2a14; margin: 0; }
.nb-drop { float: left; font-family: var(--font-display); font-size: 76px; line-height: 0.7; padding: 6px 12px 0 0; color: #8a5a20; }
.nb-line { display: block; }
.nb-sign { font-family: var(--font-display); font-style: italic; font-size: 20px; color: #6a4518; margin: 22px 0 18px; }

/* Clippings / notebook tabs */
.nb-clips { position: relative; z-index: 2; display: flex; gap: 18px; margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(201,162,75,0.16); }
.clip { position: relative; flex: 1; max-width: 230px; text-align: left; cursor: pointer; padding: 18px 18px 20px; border: 0; border-radius: 3px;
  background: linear-gradient(180deg, #e7d8b8 0%, #d8c49c 100%); color: #2a1d0c;
  box-shadow: 0 14px 30px rgba(0,0,0,0.5); transform: rotate(-1deg); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.clip:nth-child(even) { transform: rotate(1.2deg); }
.clip::after { display: none; }
.clip-kind { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #9a6a2c; }
.clip-title { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.12; margin-top: 7px; color: #241608; }
.clip-tab { position: absolute; top: -9px; left: 22px; width: 46px; height: 14px; border-radius: 3px 3px 0 0; background: #c9913f; box-shadow: 0 -2px 6px rgba(0,0,0,0.2); }
.clip:hover { transform: translateY(-4px) rotate(0deg); box-shadow: 0 22px 44px rgba(0,0,0,0.6); }
.clip.is-active { transform: translateY(-6px) rotate(0deg); box-shadow: 0 0 0 2px rgba(232,201,138,0.9), 0 24px 48px rgba(0,0,0,0.6); }

/* ============================================================
 *  RESPONSIVE — stack the rooms on narrow / mobile stages
 * ============================================================ */
@media (max-width: 1180px) {
  .cinema-stage { grid-template-columns: 1fr; gap: 32px; }
  .cinema-dossier { grid-template-columns: 160px 1fr; }
  .gal-frame { grid-template-columns: 1fr; gap: 24px; }
  .gal-frame__light { width: 100%; }
  .lr-stage { grid-template-columns: 1fr; gap: 36px; }
  .lr-deck { min-height: 360px; }
  .nb-book { grid-template-columns: 1fr; }
  .nb-page { min-height: auto; }
}
.tk-stage.is-mobile .arc { padding: 0 22px; }
.tk-stage.is-mobile .cinema-stage,
.tk-stage.is-mobile .lr-stage { grid-template-columns: 1fr; gap: 28px; }
.tk-stage.is-mobile .gal-frame,
.tk-stage.is-mobile .nb-book { grid-template-columns: 1fr; }
.tk-stage.is-mobile .cinema-reels,
.tk-stage.is-mobile .lr-rack,
.tk-stage.is-mobile .nb-clips,
.tk-stage.is-mobile .gal-contact { flex-wrap: wrap; }
.tk-stage.is-mobile .cinema-dossier { grid-template-columns: 1fr; }
.tk-stage.is-mobile .lr-vinyl { display: none; }
.tk-stage.is-mobile .lr-sleeve { margin-left: 0; }

@media (max-width: 768px) {
  .arc-section { padding: 56px 0 70px; }
  .arc { padding: 0 18px; }
  .cinema-stage, .lr-stage { grid-template-columns: 1fr; gap: 24px; }
  .cinema-dossier { grid-template-columns: 1fr; }
  .gal-frame, .nb-book { grid-template-columns: 1fr; }
  .lr-vinyl { display: none; }
  .lr-sleeve { margin-left: 0; width: 260px; height: 260px; }
  .cinema-reels, .lr-rack, .nb-clips { flex-wrap: wrap; gap: 16px; }
  .gal-contact { flex-wrap: wrap; }
  .neg { width: 96px; height: 96px; }
  .nb-page { padding: 34px 30px; min-height: auto; }
}