/* Base reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #0a0b0e; color: #eae7df; font: 16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
:root {
  --bg: #0a0b0e;
  --bg-soft: #0e1116;
  --text: #eae7df;
  --text-dim: #bdb8ab;
  --accent: #c0a27c;
  --muted: #2a2e36;
  --shadow: rgba(0,0,0,.5);
}

.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: .5rem .75rem; background: #111; border: 1px solid #333; border-radius: .25rem; z-index: 9999; }

/* Gate */
.gate { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; }
.gate__overlay { position: absolute; inset: 0; background: radial-gradient(55% 55% at 50% 50%, rgba(20,22,27,.65), rgba(10,11,14,.95)); }
.gate__content { position: relative; display: grid; grid-template-columns: minmax(0,1fr); max-width: 1200px; width: min(92vw, 1400px); gap: 2rem; padding: 3vh 2vw; }
.gate__hero { position: relative; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px var(--shadow); }
.gate__hero img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); filter: contrast(1.05) saturate(1.05) brightness(.9) grayscale(.05); }
.gate__text { position: relative; padding: 1rem; text-align: center; }
.site-title { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: .02em; margin: .5rem 0; font-size: clamp(1.25rem, 2.2vw, 2.25rem); text-transform: uppercase; }
.byline { color: var(--text-dim); margin: .25rem 0 1rem; }
.password-wrap { display: inline-flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1rem; }
.input { background: var(--bg-soft); color: var(--text); border: 1px solid #1a1f27; border-radius: 12px; padding: .75rem .9rem; min-width: 220px; outline: none; }
.input:focus { border-color: #3a4150; box-shadow: 0 0 0 3px rgba(58,65,80,.35); }
.btn { appearance: none; border: 0; border-radius: 12px; background: linear-gradient(180deg, #1b2028, #11151b); color: var(--text); padding: .75rem 1rem; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.35); }
.btn:hover { filter: brightness(1.05); }
.btn:focus-visible { outline: 2px solid #3a4150; outline-offset: 2px; }
.btn--primary { background: linear-gradient(180deg, #343c49, #1b2028); }
.gate__hint { color: var(--text-dim); font-size: .95rem; margin: .5rem 0 0; }
.gate__message { margin-top: .35rem; color: #e3a39a; min-height: 1.25em; }

/* HUD */
.hud { position: fixed; right: 1rem; top: 1rem; display: flex; gap: .5rem; z-index: 40; }
.hud__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(20,22,27,.75); border: 1px solid #20242c; box-shadow: 0 8px 20px rgba(0,0,0,.35); cursor: pointer; }
.hud__btn img { width: 20px; height: 20px; filter: invert(90%); }
.help { position: absolute; right: 0; top: 48px; background: rgba(14,17,22,.9); border: 1px solid #20242c; border-radius: 12px; padding: .75rem 1rem; width: 260px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.help__title { margin: 0 0 .35rem; font-weight: 700; letter-spacing: .02em; }
.help ul { margin: 0; padding-left: 1.1rem; color: var(--text-dim); }

/* Vertical Experience */
.slideshow { position: relative; inset: 0; display: block; height: -webkit-fill-available; min-height: 100vh; min-height: 100svh; height: 100svh; opacity: 0; pointer-events: none; }
.slideshow--active { opacity: 1; pointer-events: auto; transition: opacity .6s ease; }
/* Scroll snap container */
.slides { position: relative; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
/* Individual slides */
.slide { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1fr; align-items: stretch; justify-items: center; padding: clamp(12px, 3vw, 40px); scroll-snap-align: start; scroll-snap-stop: always; }
/* Subtle entrance animation when slide becomes active */
.slide .slide__inner { opacity: 0; transform: translateY(12px); transition: opacity .3s ease-out, transform .3s ease-out; }
.slide.active .slide__inner { opacity: 1; transform: none; }
/* Prevent FOUC before JS initializes observers */
.slides:not(.initialized) .slide .slide__inner { opacity: 1; transform: none; }
.slide__inner { position: relative; display: grid; gap: clamp(18px, 2.5vw, 28px); grid-template-columns: 1fr; width: min(1600px, 96vw); align-items: center; }
.media { position: relative; border-radius: 18px; overflow: hidden; min-height: 85svh; max-height: 95svh; box-shadow: 0 24px 70px var(--shadow); background: #0f1116; }
.media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }
.media[data-kenburns="true"] img { animation: kenburns 22s ease forwards; }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.06); } }

.copy { position: relative; padding: .5rem 0; max-width: 80ch; margin-inline: auto; }
.copy::-webkit-scrollbar { width: 8px; }
.copy::-webkit-scrollbar-thumb { background: #2a2e36; border-radius: 8px; }
.copy, .media { will-change: transform; transition: transform .25s ease; }
.overline { color: var(--text-dim); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; }
.title { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: .02em; font-size: clamp(1.4rem, 3.2vw, 2.6rem); line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.body { color: var(--text); font-size: clamp(1rem, 1.4vw, 1.125rem); max-width: 66ch; }
.body ul { padding-left: 1.2rem; }
.body li { margin: .35rem 0; }
.quote { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: .01em; }
.by { color: var(--text-dim); margin-top: .5rem; }

.two-col { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 900px) {
  .slide__inner { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr 1fr; }
}
[data-type="columns"] .slide__inner { grid-template-columns: 1fr; }
[data-type="bullets"] .slide__inner { grid-template-columns: 1fr; }
[data-type="text"] .slide__inner { grid-template-columns: 1fr; }
[data-type="quote"] .slide__inner,
[data-type="poem"] .slide__inner { grid-template-columns: 1fr; place-items: center; }
[data-type="quote"] .slide,
[data-type="poem"] .slide { align-content: center; }

/* Typography refinements */
.title { font-weight: 800; letter-spacing: .01em; }
.quote { font-style: italic; font-weight: 700; }
.body strong { font-weight: 700; }
.body em { font-style: italic; }

/* Layout variations */
[data-type="quote"] .slide__inner,
[data-type="poem"] .slide__inner { grid-template-columns: 1fr; }
[data-type="quote"] .copy, [data-type="poem"] .copy { max-width: min(80ch, 80vw); margin-inline: auto; text-align: center; }
[data-type="quote"] .quote .word, [data-type="poem"] .body .word { transition-delay: 0s; }
[data-type="quote"] .media, [data-type="poem"] .media { order: 2; }

/* Progress (removed in vertical redesign) */
.progress, .dots, .dot, .counter, .thumb-tray, .thumb { display: none !important; }

/* Section separators subtle */
.slide::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(96vw, 1600px); height: 1px; background: linear-gradient(90deg, rgba(0,0,0,0), #161a21, rgba(0,0,0,0)); opacity: .7; }

/* Dust / film grain overlay */
.dust { position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: screen; }

/* Footer */
.footer { border-top: 1px solid #161a21; background: linear-gradient(180deg, rgba(8,9,12,.35), rgba(8,9,12,.65)); }
.footer__inner { display: flex; justify-content: space-between; align-items: center; padding: 1rem; color: var(--text-dim); }
.footer a { color: var(--text); }
.footer__brand { display: inline-flex; align-items: center; gap: .5rem; }
.footer__brand img { width: 18px; height: 18px; filter: brightness(1.1) contrast(1); opacity: .9; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .slides { scroll-behavior: auto; }
}

/* Utility */
.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; }

/* Text reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.65,.2,1), transform .7s cubic-bezier(.2,.65,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: translateY(0); }
.word { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.word.in { opacity: 1; transform: translateY(0); }
.line { display: block; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.line.in { opacity: 1; transform: translateY(0); }

/* Mobile & safe-area refinements */
@media (max-width: 600px) {
  .hud { right: calc(12px + env(safe-area-inset-right)); top: calc(12px + env(safe-area-inset-top)); }
  .hud__btn { width: 44px; height: 44px; }

  .gate__content { gap: 1rem; padding: max(12px, 2vh) max(16px, 4vw); }
  .password-wrap { flex-direction: column; width: min(100%, 360px); }
  .password-wrap .input, .password-wrap .btn { width: 100%; }

  .slide { padding: clamp(8px, 4vw, 28px); }

  .progress { padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom)); }
  .counter { font-size: .95rem; }

  .thumb-tray { bottom: calc(52px + env(safe-area-inset-bottom)); max-width: 94vw; overflow-x: auto; opacity: 1; pointer-events: auto; }
  .footer__inner { padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
}

/* Improve tap interactions on mobile */
@media (hover: none) {
  :root { -webkit-tap-highlight-color: rgba(0,0,0,0); }
}