:root{
  --bg:#0a0a0b;
  --text:#e8e8ea;
  --muted:#a3a3ad;
  --accent:#ffd166;
  --card:#121216;
  --border:#23232a;
  --maxw:72rem;
  --radius:18px;
  --header-h: 64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.6;
  color:var(--text);
  background: radial-gradient(1000px 600px at 20% -10%, #161621 0%, #0a0a0b 40%);
}
a{color:inherit}
.container{max-width:var(--maxw); margin:0 auto; padding: clamp(16px, 2vw, 32px);}
.header{
  position:sticky; top:0; backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(10,10,11,.6); border-bottom:1px solid var(--border); z-index:10;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand h1{font-size:clamp(18px, 2.2vw, 24px); margin:0; font-weight:700; letter-spacing:0.3px;}
nav a{opacity:.9; text-decoration:none; padding:.6rem .8rem; border-radius:12px; border:1px solid transparent}
nav a:hover{border-color:var(--border); background:rgba(255,255,255,.03)}
.header-row{display:flex; align-items:center; justify-content:space-between}
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(18px,3vw,32px); align-items:center;
  padding: clamp(28px, 6vw, 80px) 0;
}
.hero img{width:100%; border-radius:var(--radius); box-shadow:0 30px 120px rgba(0,0,0,.5)}
h2{font-size:clamp(28px, 5vw, 56px); line-height:1.1; margin:.2em 0 .4em}
h3{font-size:clamp(20px, 3vw, 32px); margin:1.2em 0 .4em}
p.lead{font-size:clamp(16px, 2.2vw, 20px); color:var(--muted)}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--border);
  background:#111118; color:#fff; padding:.9rem 1.2rem; border-radius:14px; text-decoration:none; font-weight:600;
  transition:transform .05s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 15px 40px rgba(0,0,0,.35); border-color:#2e2e3a}
.btn-accent{background:linear-gradient(180deg, #ffd166, #fdb813); color:#171717}
.btn-ghost{background:transparent}
.section{padding: clamp(24px, 5vw, 64px) 0; border-top:1px solid var(--border)}
.grid{display:grid; gap:20px}
@media (max-width: 880px){ .hero{grid-template-columns:1fr} }

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding: clamp(16px, 2.2vw, 24px);
}
.media{
  background:#0c0c12; border:1px dashed #30303a; border-radius:16px; padding:16px;
}
audio, video{width:100%; outline:none; border-radius:12px; background:#000}
.video-poster{width:100%; border-radius:12px; display:block; margin-bottom:12px; opacity:.9}
.kicker{letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-size:.85rem}
.footer{border-top:1px solid var(--border); color:var(--muted); padding:40px 0; font-size:.95rem}
blockquote{
  margin:1.2rem 0; padding-left:1rem; border-left:3px solid #3a3a44; color:#c9c9d3;
}
.breadcrumbs{font-size:.9rem; color:var(--muted); margin:12px 0 4px}
hr{border:0; height:1px; background:var(--border); margin:28px 0}
.small{font-size:.9rem; color:var(--muted)}
.buybar{position:sticky; bottom:14px; display:flex; justify-content:center; z-index:50}
.buybar .btn{box-shadow:0 20px 50px rgba(253,184,19,.18)}

/* --- Updates: Buy button hover should NOT be black or red; use a different shade of yellow --- */
.btn-accent:hover{
  background:linear-gradient(180deg, #ffe58a, #ffd166);
  color:#171717;
  border-color:#f7c74b;
}

/* --- Scrolly video section --- */
.scrolly{
  position: relative;
  height: 200vh; /* will be adjusted via JS by duration */
  margin: 0;
  padding: 0;
}
.scrolly .pin{
  position: sticky;
  top: 0;
  height: 100vh;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-start;
  background:#000;
  border-bottom:1px solid var(--border);
}
.scrolly video{
  width: 100%;
  height: 100vh;
  object-fit: cover;
  border-radius: var(--radius);
  filter: contrast(1.02) saturate(0.9);
  pointer-events:none;
}
.scrolly .cue{
  position: static;
  margin-top: 50px;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:999px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2); color:#fff; font-weight:600; font-size:.95rem;
  backdrop-filter: blur(6px); user-select:none;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.scrolly .cue .icon{ display:inline-flex; width:16px; height:16px; opacity:.9; animation: cueFloat 1.6s ease-in-out infinite; }
@keyframes cueFloat{ 0%{ transform: translateY(0) } 50%{ transform: translateY(6px) } 100%{ transform: translateY(0) } }

/* --- Quote hero sections --- */
.quote-hero{
  position: relative;
  min-height: 68vh;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius); overflow:hidden;
  margin: clamp(18px, 3vw, 32px) 0;
  border: 1px solid var(--border);
}
.quote-hero img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; opacity:.8;
  filter: saturate(.8) contrast(1.05);
}
.quote-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: url("../img/grain.png");
  mix-blend-mode: overlay; opacity:.18;
}
.quote-hero .inner{
  position:relative; z-index:1; text-align:center;
  padding: clamp(16px, 3vw, 40px);
  background: radial-gradient(320px 220px at 50% 60%, rgba(0,0,0,.55), rgba(0,0,0,.0));
  max-width: min(68ch, 90vw);
}
.quote-hero blockquote{
  border: none;
  color: #f1f1f3;
  font-size: clamp(22px, 4.2vw, 40px);
  line-height: 1.2;
  margin: 0 0 .5rem 0;
  text-wrap: balance;
}
.quote-hero .attribution{
  color: #d9d9df; opacity:.85; font-size: clamp(14px, 1.6vw, 16px);
}

@media (prefers-reduced-motion: reduce){
  .scrolly{ height: auto; }
  .scrolly .pin{ position: relative; height: auto; }
  .scrolly video{ height: auto; }
}

/* === Premium / Modern tweaks === */
:root{
  --bg-film: radial-gradient(1000px 600px at 20% -10%, #181823 0%, #0a0a0b 40%);
  --bg-podcast: radial-gradient(1100px 700px at 80% -20%, #12141b 0%, #0a0a0b 40%);
  --bg-journal: radial-gradient(900px 600px at 50% -10%, #151515 0%, #0a0a0b 40%);
  --text-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
  --text-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  --accent-2:#ffe58a;
}

body{
  transition: background 800ms ease, color 300ms ease;
}
body.theme-film{ background: var(--bg-film); }
body.theme-podcast{ background: var(--bg-podcast); }
body.theme-journal{ background: var(--bg-journal); }

.kicker{letter-spacing:.18em}

/* Header refinements */
.header{ box-shadow: 0 10px 40px rgba(0,0,0,.25); }

/* Buttons: premium hover */
.btn-accent{ background:linear-gradient(180deg, #ffd166, #fdb813); }
.btn-accent:hover{ background:linear-gradient(180deg, var(--accent-2), #ffd166); border-color:#f7c74b; color:#171717; }

/* --- Scrolly frame with rounded edges and overlay title --- */
.scrolly{ position: relative; height: 160vh; }
.scrolly .pin{ position: sticky; top: 0; height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:transparent; }
.scrolly .frame{
  width:min(1200px, 92vw); height: min(68vh, 72vw);
  border-radius: 22px; overflow:hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.08); position:relative; background:#000;
}
.scrolly video{ width:100%; height:100%; object-fit:cover; }
.scrolly .overlay-title{
  position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center;
  font-family: var(--text-serif); text-transform:none; letter-spacing:.02em;
  color:#fff; pointer-events:none; transition: opacity .3s ease;
}
.scrolly .overlay-title{ padding-top: clamp(56px, 8vw, 92px); }
.scrolly .overlay-title h1{
  font-size: clamp(26px, 5.2vw, 64px); margin:0; text-align:center; line-height:1.05;
  text-shadow: 0 6px 30px rgba(0,0,0,.6);
}
.scrolly .overlay-title .sub{ display:block; opacity:.9; font-size: clamp(14px, 1.7vw, 18px); margin-top: .4rem; }
.scrolly .cue{ position: static; margin-top:50px; padding:.4rem .8rem; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18); font-weight:600;}

/* --- Podcast player: modern, glassy --- */
.podcast{ padding: clamp(24px, 5vw, 64px) 0; }
.podcast .wrap{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(18px, 3vw, 40px);
}
@media (max-width: 880px){ .podcast .wrap{ grid-template-columns:1fr; } }
.audioplayer{
  position: relative; border-radius: 20px; padding: 18px; border:1px solid rgba(255,255,255,.085);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.35);
  overflow:hidden;
}
.transcript.card{ overflow: hidden; }
.transcript-body{ font-size: 0.98rem; line-height: 1.65; }
.transcript-body p{ margin: 0 0 .8rem 0; }
.transcript-body span.s2{ color: var(--muted); }
.transcript-body b{ color: #fff; }

/* Panoramic break between Podcast and Journal */
.panorama{ padding: clamp(14px, 4vw, 24px) 0; }
.panorama .frame{
  position: relative; border-radius: var(--radius); overflow:hidden;
  border:1px solid var(--border);
  box-shadow: 0 30px 120px rgba(0,0,0,.5);
}
.panorama img{ width:100%; height:auto; display:block; object-fit:cover; max-height: 460px; }
.panorama .frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: url("../img/grain.png"); mix-blend-mode: overlay; opacity:.16;
}
.audioplayer .visualizer{
  width:100%; height:128px; display:block; margin: 8px 0 10px 0;
  border-radius: 14px;
  background: radial-gradient(800px 300px at 20% -60%, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.audioplayer .glass-reflection{
  content:""; position:absolute; inset:-40% -10% auto -10%; height: 60%;
  background: linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%);
  transform: translateX(var(--gloss, -60%)) rotate(8deg); transition: transform .2s ease;
  pointer-events:none; mix-blend-mode:screen; filter: blur(0.5px);
}
.audioplayer .controls{ display:flex; align-items:center; gap:14px; }
.audioplayer .play{
  display:inline-grid; place-items:center; width:56px; height:56px; border-radius:16px;
  background:linear-gradient(180deg, #ffd166, #fdb813); color:#171717; font-weight:800; border:1px solid rgba(0,0,0,.15);
  cursor:pointer;
}
.audioplayer .timeline{
  position:relative; flex:1; height:14px; border-radius:999px; background: rgba(255,255,255,.08);
  overflow:hidden; cursor:pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.audioplayer .progress{ position:absolute; left:0; top:0; bottom:0; width:0%; background: linear-gradient(180deg, #ffe58a, #ffd166); }
.audioplayer .thumb{ position:absolute; top:50%; transform:translate(-50%, -50%); width:18px; height:18px; border-radius:50%; background:#111; border:2px solid #ffe58a; box-shadow:0 2px 12px rgba(253,184,19,.45) }
.audioplayer .time{ width:84px; text-align:right; color:var(--muted) }

/* looping seascape visual container */
.seascape{
  position:relative; border-radius: 20px; overflow:hidden; height: min(48vh, 60vw);
  border:1px solid rgba(255,255,255,.085); background: radial-gradient(800px 400px at 50% -30%, #0b0f19, #040507);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.seascape canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* --- Journal: premium newspaper style --- */
.journal{
  --measure: 62ch;
  font-family: var(--text-serif);
  max-width: var(--measure); margin: 0 auto;
  font-size: clamp(17px, 2.1vw, 19px);
}
.journal .deck{ font-style:italic; color:var(--muted); margin-bottom: .8rem }
.journal p{ text-align: start; }
.journal p + p{ margin-top: 1.1rem; }
.journal .dropcap:first-letter{
  float:left; font-size: 3.2em; line-height: .8; padding-right:.08em; margin-top:.04em; font-weight:700;
}
.journal hr{ border:0; height:1px; background: var(--border); margin: 2rem 0; }
@media (min-width: 980px){
  .journal.columns{ column-count: 2; column-gap: 48px; }
}

/* === Experience meter (global) === */
.experience-meter{
  position: sticky; top: 56px; z-index: 9; height: 6px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  margin: 0; border-radius: 999px; overflow:hidden;
}
.experience-meter .bar{ height:100%; width:0%; background: linear-gradient(90deg, #ffe58a, #ffd166); transition: width .2s ease; }

/* === Scrolly video progress bar === */
.scrolly .progressbar{
  position:absolute; left: 14px; right: 14px; bottom: 12px; height: 6px;
  background: rgba(255,255,255,.12); border-radius: 999px; overflow:hidden; border:1px solid rgba(255,255,255,.14);
}
.scrolly .progressbar .bar{
  height: 100%; width: 0%; background: linear-gradient(90deg, #ffe58a, #ffd166);
  box-shadow: 0 0 16px rgba(253,184,19,.35);
}

/* === Chapter shelf (streaming style) === */
.shelf{ padding: clamp(16px, 4vw, 28px) 0; }
.shelf .row{ display:grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap:14px; overflow-x:auto; padding-bottom: 10px; }
.shelf .cardish{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border);
  background:#0f1117; aspect-ratio: 16/9; display:flex; align-items:center; justify-content:center;
}
.shelf .cardish img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1); transition: transform .24s ease; will-change: transform; }
.shelf .cardish:hover img{ transform: scale(1.03); }
.shelf .cardish .lock{
  position:absolute; top:10px; right:10px; background:rgba(0,0,0,.5); color:#fff; border-radius:10px; padding:.2rem .5rem; font-size:.8rem;
}
.shelf .cardish.unlocked{ box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.shelf .title{ margin-top:.4rem; font-size:.95rem; opacity:.9 }
.shelf::-webkit-scrollbar{ height:8px } .shelf::-webkit-scrollbar-thumb{ background:#333; border-radius:999px }

/* === Map game === */
.mapgame{ padding: clamp(28px, 5vw, 56px) 0; }
.mapgame .board{
  position:relative; border-radius: 20px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#000;
  background-image: url("../img/skye-map.png"); background-size: cover; background-position: center;
  width: 100%; aspect-ratio: 14/9; box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.mapgame .drop-zone{
  position:absolute; width: 8%; height: 8%; border-radius: 50%;
  outline: 2px dashed rgba(255,255,255,.18); outline-offset: -4px;
  transform: translate(-50%, -50%);
}
.mapgame .drop-zone.correct{ outline: 2px solid rgba(253,184,19,.8); background: rgba(253,184,19,.12); }
.mapgame .chip-tray{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px }
.mapgame .chip{
  display:inline-flex; align-items:center; justify-content:center; padding:.5rem .8rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  cursor:grab; user-select:none;
}
.mapgame .chip.dragging{ opacity:.85; cursor:grabbing }
.mapgame .status{ margin-top:8px; color:var(--muted) }
.mapgame .success{ color:#ffe58a; font-weight:700 }

/* === Continue CTA === */
.cta-continue{ display:flex; gap:12px; justify-content:center; margin: 18px 0; }

/* === Micro flourish === */
.glimmer{ position:relative; overflow:hidden }
.glimmer::after{
  content:""; position:absolute; top:0; left:-120%; width:100%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,0) 60%);
  transform: skewX(-16deg);
  animation: sweep 8s linear infinite;
}
@keyframes sweep{
  0%{ left:-120% } 60%{ left:140% } 100%{ left:140% }
}

/* === Hide slider/seek handle ("circle on the bar") === */
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 0; height: 0; background: transparent; border: 0; box-shadow: none; }
input[type="range"]::-moz-range-thumb { width: 0; height: 0; background: transparent; border: 0; box-shadow: none; }
input[type="range"]::-ms-thumb { width: 0; height: 0; background: transparent; border: 0; box-shadow: none; }
/* Hide common custom elements if present */
.progress-dot, .slider-dot, .slider__thumb, .slider-thumb, .seek-handle, .seek__thumb { display: none !important; }
/* Page-specific: Talisker layout */
.page-talisker main.container{ position: relative; padding-top: 0; }
/* Keep breadcrumbs fixed under header until scrolly completes */
.page-talisker .breadcrumbs{
  position: sticky; top: var(--header-h, 64px); z-index: 5;
  margin: 0; padding: 6px 0;
  background: transparent;
}

/* Pin scrolly immediately with measured gap under header + breadcrumbs */
.page-talisker .scrolly .pin{
  top: var(--sticky-offset, 104px);
  height: calc(100vh - var(--sticky-offset, 104px));
}