/* ================================================================
   Kaesar Ahmed — portfolio
   Daylight palette: warm paper, ink, burnt orange, deep teal book.
   ================================================================ */
:root {
  --paper: #EEECE2;      /* morning mist */
  --paper-2: #E3E1D2;
  --page: #F7F0E2;
  --ink: #17171A;
  --ink-2: #3A3835;
  --muted: #6B655E;
  --line: #D8D5C3;
  --accent: #C9542A;     /* horizon ember */
  --accent-2: #E7855A;
  --hl: #F4C38E;         /* sun */
  --teal: #22304D;       /* night sky (book cloth) */
  --teal-2: #34466B;
  --teal-3: #141D33;
  --foil: #F3C98B;
  --sky: #E2E4D6;
  --ground: #363111;     /* meadow at full sunrise */
  --sage: #A3A28B;
  --dusk: #886B74;
  --display: "Poppins", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --hero-1: "Montserrat", system-ui, sans-serif;
  --hero-2: "Lora", Georgia, serif;
  --hero-s: "Hind Madurai", system-ui, sans-serif;
  --ease: cubic-bezier(.2,.7,.1,1);
  --paper-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .25' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .09 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; background: #fff; color: var(--ink); }

.hl {
  background: linear-gradient(transparent 52%, var(--hl) 52%, var(--hl) 96%, transparent 96%);
  color: inherit; padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.label { font: 700 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.h2 { font: 800 clamp(34px, 5vw, 64px)/1.04 var(--display); letter-spacing: -.035em; margin: 0; }

/* Signature (used as a mask so it can take any colour) */
.sig {
  display: inline-block; aspect-ratio: 1201 / 304; background: currentColor;
  -webkit-mask: url(assets/signature.png) center / contain no-repeat;
          mask: url(assets/signature.png) center / contain no-repeat;
}
.sig-ink { color: var(--ink); }

/* Grain */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} }

/* ---------------- Leader intro ---------------- */
.leader {
  position: fixed; inset: 0; z-index: 100; background: var(--paper);
  display: grid; place-content: center; justify-items: center; gap: 22px;
  transition: opacity .5s var(--ease), visibility .5s;
}
.leader.done { opacity: 0; visibility: hidden; }
.leader-ring { width: 150px; height: 150px; border-radius: 50%; position: relative; display: grid; place-items: center; border: 2px solid var(--ink); overflow: hidden; }
.leader-ring::before, .leader-ring::after { content: ""; position: absolute; background: var(--ink); opacity: .25; }
.leader-ring::before { width: 1px; height: 100%; } .leader-ring::after { height: 1px; width: 100%; }
.leader-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--hl) var(--a, 0deg), transparent 0); animation: sweep .4s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes sweep { to { --a: 360deg; } }
.leader-num { position: relative; font: 800 64px/1 var(--display); }
.leader-label { font: 500 11px var(--mono); letter-spacing: .2em; color: var(--muted); }

/* ---------------- Top bar ---------------- */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 68px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(18px, 4vw, 48px);
  background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.topbar.scrolled { border-color: var(--line); }
.topbar { transition: border-color .3s, background .4s; }
.topbar.on-hero { background: transparent; backdrop-filter: none; border-color: transparent; }
.topbar.on-hero .brand .sig { color: #FFFDF8; }
.topbar.on-hero .nav a { color: #FFFDF8; }
.topbar.on-hero .nav a:hover { background: #ffffff1f; }
.topbar.on-hero .nav .nav-cta { background: #FFFDF8; color: var(--ink); }
.topbar.on-hero .nav .nav-cta:hover { background: var(--hl); }
.brand .sig { width: 132px; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { text-decoration: none; font: 500 14px var(--body); padding: 8px 12px; border-radius: 99px; transition: background .2s; }
.nav a:hover { background: var(--paper-2); }
.nav .nav-cta { background: var(--ink); color: var(--paper); margin-left: 6px; }
.nav .nav-cta:hover { background: var(--accent); }

/* ---------------- Hero ---------------- */
.hero { position: relative; height: 250svh; }
.hero-pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ground);
  padding: 100px clamp(18px, 5vw, 64px) 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
}
/* Scroll-driven sunrise */
.sunrise { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: .72; }
/* Hero text sits on the video: light type */
.hero-copy { color: #FFFDF8; }
.hero-copy .eyebrow { color: #FFFDF8; text-shadow: 0 1px 8px #0006; }
.hero-copy .hero-title { color: #FFFDF8; text-shadow: 0 2px 24px #0000004d; }
.hero-copy .hero-title .sun-hl {
  --hw: 0%; --hc: #B65F6E; text-shadow: none; transition: none;
  background: linear-gradient(90deg, var(--hc) var(--hw), transparent var(--hw)) 0 70% / 100% 87% no-repeat;
}
.sun-hl .hl-t {
  color: transparent; -webkit-background-clip: text; background-clip: text; text-shadow: none;
  background-image: linear-gradient(90deg, var(--ink) var(--hw), #FFFDF8 var(--hw));
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero-copy .hero-desc { color: #FFFDF8e6; text-shadow: 0 1px 10px #0007; }
.hero-copy .btn-dark { background: #FFFDF8; color: var(--ink); }
.hero-copy .btn-dark:hover { background: var(--accent); color: #fff; }
.hero-copy .btn-ghost { background: #ffffff14; box-shadow: inset 0 0 0 1.5px #FFFDF8; color: #FFFDF8; backdrop-filter: blur(4px); }
.hero-copy .btn-ghost:hover { background: #FFFDF8; color: var(--ink); }
.hero-copy .hero-meta { color: #FFFDF8cc; text-shadow: 0 1px 8px #0007; }
.hero-copy .hero-meta b { color: #FFFDF8; }
.scroll-cue { position: absolute; z-index: 1; right: clamp(18px, 5vw, 64px); top: 96px; display: flex; align-items: center; gap: 10px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #FBEBD3; text-shadow: 0 1px 6px #0006; transition: opacity .5s; pointer-events: none; }
.scroll-cue i { width: 16px; height: 26px; border: 1.5px solid currentColor; border-radius: 9px; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: cue 1.4s infinite; }
@keyframes cue { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }
.scroll-cue.hide { opacity: 0; }

.hero-copy { position: relative; z-index: 1; max-width: 860px; width: 100%; margin: auto 0; pointer-events: none; }
.hero-copy a, .hero-copy .btn { pointer-events: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #22A06B; box-shadow: 0 0 0 4px #22A06B22; }
.hero-title { font: 800 clamp(40px, 5vw, 72px)/1.06 var(--hero-1); letter-spacing: -.035em; margin: 0 0 26px; }
.hero-title .l2 { font-family: var(--hero-2); font-weight: 700; font-style: italic; letter-spacing: -.02em; }
.hero-copy .eyebrow, .hero-copy .hero-desc, .hero-copy .btn, .hero-copy .hero-meta { font-family: var(--hero-s); }
.hero-copy .eyebrow { font-weight: 600; font-size: 13px; letter-spacing: .16em; }
.hero-copy .hero-desc { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; }
.hero-copy .btn { font-weight: 600; font-size: 16px; padding-top: 14px; padding-bottom: 12px; }
.hero-copy .hero-meta b { font-family: var(--hero-1); font-weight: 800; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero-title .line > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
.hero-title .line:nth-child(2) > span { transition-delay: .12s; }
.loaded .hero-title .line > span { transform: none; }
.hero-title .hl { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .9s var(--ease) .8s;
  background-image: linear-gradient(transparent 55%, var(--hl) 55%, var(--hl) 95%, transparent 95%); background-color: transparent; }
.loaded .hero-title .hl { background-size: 100% 100%; }
.hero-desc { font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-2); max-width: 580px; margin: 0 0 28px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border: 0;
  font: 600 15px var(--body); padding: 15px 22px; border-radius: 99px; transition: transform .2s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--accent); }
.btn-ghost { background: color-mix(in srgb, var(--paper) 70%, transparent); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.hero-meta { margin: 24px 0 0; font-size: 14px; color: var(--muted); }
.hero-meta b { color: var(--ink); font: 700 20px var(--display); margin-right: 4px; }

/* ---------------- Hero timeline ---------------- */
.htl { position: relative; z-index: 1; padding-bottom: 26px; user-select: none; pointer-events: none; }
.hero-pin .htl-stages span { color: #FFFDF880; border-color: #FFFDF833; }
.hero-pin .htl-stages span.on { color: #FFFDF8; border-color: var(--hl); }
.hero-pin .htl-stages span.done { color: #FFFDF8cc; border-color: #FFFDF8aa; }
.hero-pin .htl-names { color: #FFFDF899; }
.hero-pin .htl-tc { color: var(--hl); }
.hero-pin .htl-ruler { filter: invert(1); opacity: .3; }
.hero-pin .clip { background: #FFFDF833; }
.hero-pin .raw-label { color: #FFFDF8cc; }
.hero-pin .htl-head, .hero-pin .htl-head::before { background: var(--hl); }
.htl .htl-export { pointer-events: none; }
.htl.s4 .htl-export { pointer-events: auto; }
.htl-top { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 6px; padding-left: 38px; }
.htl-tc { position: absolute; left: 0; top: -22px; color: var(--accent); font-weight: 700; }
.htl-stages { flex: 1; display: flex; gap: 3px; }
.htl-stages span { flex: var(--w, 1); font: 600 10px/22px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--line); padding: 0 6px; white-space: nowrap; overflow: hidden; transition: color .3s, border-color .3s; }
.htl-stages span.on { color: var(--ink); border-color: var(--accent); }
.htl-stages span.done { color: var(--ink-2); border-color: var(--ink-2); }
.htl-export {
  position: absolute; right: 0; top: -40px; text-decoration: none; display: inline-flex; gap: 8px; align-items: center;
  background: var(--accent); color: #fff; font: 700 13px var(--body); padding: 9px 16px; border-radius: 99px;
  opacity: 0; transform: translateY(6px) scale(.96); pointer-events: none; transition: opacity .45s var(--ease), transform .45s var(--ease);
  box-shadow: 0 10px 24px -10px #c2410c88;
}
.htl.s4 .htl-export { opacity: 1; transform: none; }
.htl-body { display: flex; gap: 8px; }
.htl-names { width: 30px; display: flex; flex-direction: column; font-size: 9.5px; color: var(--muted); }
.htl-names span { overflow: hidden; display: flex; align-items: center; transition: height .5s var(--ease), opacity .4s; }
.htl-tracks { position: relative; flex: 1; display: flex; flex-direction: column; }
.trk { position: relative; overflow: hidden; transition: height .5s var(--ease), margin .5s var(--ease); }
.trk-v1, .n-v1 { height: 30px; }
.trk-v2, .trk-a1, .trk-a2, .n-v2, .n-a1, .n-a2 { height: 0; opacity: 0; }
.trk-v2, .trk-a1, .trk-a2 { opacity: 1; }
.htl.s2 .trk-a1, .htl.s2 .n-a1 { height: 24px; margin-top: 4px; opacity: 1; }
.htl.s2 .trk-a2, .htl.s2 .n-a2 { height: 16px; margin-top: 4px; opacity: 1; }
.htl.s3 .trk-v2, .htl.s3 .n-v2 { height: 20px; margin-bottom: 4px; opacity: 1; }

.trk-v1 { display: flex; gap: 0; }
.clip { position: relative; height: 100%; flex: var(--f); background: #CFC7BA; border-radius: 0; transition: background .35s, margin .35s var(--ease), border-radius .35s; overflow: hidden; }
.clip:first-child { border-radius: 6px 0 0 6px; } .clip:last-child { border-radius: 0 6px 6px 0; }
.clip::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #ffffff38 0 1px, transparent 1px 22px); opacity: .5; }
.clip.cut { background: var(--c); margin-left: 3px; border-radius: 6px; }
.clip.cut:first-child { margin-left: 0; }
.clip.flash::before { content: "✂"; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink); animation: snip .6s var(--ease) forwards; z-index: 2; }
@keyframes snip { from { opacity: 1; transform: translate(-6px,-50%) scale(1.5); } to { opacity: 0; transform: translate(0,-50%) scale(1); } }
.raw-label { position: absolute; left: 10px; top: 0; line-height: 30px; font: 700 10px var(--mono); letter-spacing: .12em; color: #5d564c; z-index: 1; transition: opacity .3s; pointer-events: none; }
.htl.s1 .raw-label, .htl.s2 .raw-label, .htl.s3 .raw-label, .htl.s4 .raw-label { opacity: 0; }

.music-layer { position: absolute; inset: 0; background: #2E9E6E; border-radius: 6px; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease); }
.htl.s2 .music-layer { clip-path: inset(0 0 0 0); }
.music-layer svg { position: absolute; inset: 2px 0; width: 100%; height: calc(100% - 4px); }
.music-layer span, .grade-layer span { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font: 700 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #0003; }
.trk-a2 .sfx { position: absolute; top: 0; height: 100%; border-radius: 4px; background: #5B8DEF; transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease); }
.htl.s2 .trk-a2 .sfx { transform: none; }
.grade-layer { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(90deg, #7A5BC7, #C2569B 50%, #E8772E); clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease); }
.htl.s3 .grade-layer { clip-path: inset(0 0 0 0); }
.htl.s3 .trk-v1 .clip.cut { filter: saturate(1.25) contrast(1.05); }
.htl-head { position: absolute; top: -8px; bottom: -6px; left: 0; width: 2px; background: var(--accent); z-index: 3; pointer-events: none; }
.htl-head::before { content: ""; position: absolute; top: 0; left: -6px; width: 14px; height: 10px; background: var(--accent); clip-path: polygon(0 0,100% 0,100% 60%,50% 100%,0 60%); }
.htl-ruler { height: 14px; margin: 6px 0 0 38px; opacity: .35;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px) bottom/100% 5px no-repeat, repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 60px) bottom/100% 11px no-repeat; }

/* Filmstrip */
.dawn { background: linear-gradient(180deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 88%, var(--paper)) 12%, color-mix(in srgb, var(--ground) 66%, var(--paper)) 30%, color-mix(in srgb, var(--ground) 46%, var(--paper)) 50%, color-mix(in srgb, var(--ground) 32%, var(--paper)) 72%, color-mix(in srgb, var(--ground) 22%, var(--paper)) 100%); padding: 16vh 0 22vh; overflow: hidden; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ================================================================
   BOOK
   ================================================================ */
.book-section { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--ground) 22%, var(--paper)) 0, color-mix(in srgb, var(--ground) 12%, var(--paper)) 32vh, color-mix(in srgb, var(--ground) 5%, var(--paper)) 62vh, var(--paper) 100vh) no-repeat; }
.book-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: 76px clamp(14px, 3vw, 40px) 14px; overflow: hidden; }
.book-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 30px; color: var(--muted); }
.book-chapter { font: 700 15px var(--display); color: var(--ink); text-align: center; }
.stage { flex: 1; position: relative; perspective: 2400px; min-height: 0; }
.book {
  position: absolute; left: calc(50% - var(--pw)); top: calc((100% - 40px - var(--ph)) / 2);
  width: calc(var(--pw) * 2); height: var(--ph);
  transform-style: preserve-3d; will-change: transform;
}
.leaf { position: absolute; top: 0; left: var(--pw); width: var(--pw); height: 100%; transform-origin: left center; transform-style: preserve-3d; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: var(--page); }
.face.back { transform: rotateY(180deg); }
.leaf.flipped > .face.front, .leaf:not(.flipped) > .face.back, .curl { pointer-events: none; }
.face.front { border-radius: 2px 8px 8px 2px; }
.face.back  { border-radius: 8px 2px 2px 8px; }
.face > .shd { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, #3a2a1500 0%, #3a2a1544 100%); z-index: 3; }
.face.back > .shd { background: linear-gradient(270deg, #3a2a1500 0%, #3a2a1544 100%); }
.dim { position: absolute; inset: -1px; background: var(--paper); pointer-events: none; z-index: 4; opacity: 0; }

/* Page content box: the container that page typography is sized against */
.fi { position: absolute; top: 0; left: 0; width: var(--pw); height: var(--ph); container-type: size; }
.page > .fi {
  background:
    var(--paper-fiber), var(--paper-tex),
    radial-gradient(120% 90% at 50% 45%, #FAF4E8 0%, #F4EBDA 70%, #EBDFC9 100%);
}
.face.front.page > .fi::before, .face.back.page > .fi::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.face.front.page > .fi::before { background: linear-gradient(90deg, #4a3a2236 0, #4a3a2210 3%, transparent 9%), linear-gradient(270deg, #00000010 0, transparent 2%); }
.face.back.page  > .fi::before { background: linear-gradient(270deg, #4a3a2236 0, #4a3a2210 3%, transparent 9%), linear-gradient(90deg, #00000010 0, transparent 2%); }
.book-shadow { position: absolute; inset: auto 4% -26px; height: 30px; background: radial-gradient(closest-side, #00000030, transparent); pointer-events: none; transform: translateZ(-2px); }

/* Curling page: built from strips while it turns */
.curl, .strip { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; }
.curl { left: 0; width: 100%; }
.strip { transform-origin: left center; }
.strip > .face { border-radius: 0; }
.strip > .face > .shd { background: #3a2a15; }
.strip.edge > .face.front { border-radius: 0 8px 8px 0; }
.strip.edge > .face.back { border-radius: 8px 0 0 8px; }

.hint { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: opacity .4s; pointer-events: none; white-space: nowrap; }
.hint.hide { opacity: 0; }

/* NLE timeline under the book */
.nle { width: min(980px, 100%); margin: 6px auto 0; }
.nle-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--muted); }
.nle-tc { color: var(--accent); font-weight: 700; min-width: 100px; }
.viewtog { display: flex; align-items: center; gap: 6px; background: #fffdf8; border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.viewtog button { border: 0; background: none; border-radius: 99px; padding: 4px 11px; font: 600 12px var(--body); color: var(--muted); }
.viewtog button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.viewtog kbd { margin-right: 4px; }
.nle-btns { min-width: 100px; text-align: right; }
.nle-btns button { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 32px; height: 26px; font-size: 10px; color: var(--ink); }
.nle-btns button:hover { background: var(--ink); color: #fff; }
.nle-track { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; background: #fffdf8; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
.nle-label { color: var(--muted); font-size: 10px; }
.nle-clips { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; gap: 2px; }
.nle-clip { min-width: 0; height: 100%; border: 0; border-radius: 4px; font: 600 9.5px/24px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 0 6px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); opacity: .55; transition: opacity .2s; }
.nle-clip.on, .nle-clip:hover { opacity: 1; }
.nle-head { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--accent); pointer-events: none; left: 0; }
.nle-head::before { content: ""; position: absolute; top: 0; left: -5px; width: 12px; height: 8px; background: var(--accent); clip-path: polygon(0 0,100% 0,100% 60%,50% 100%,0 60%); }

/* ================================================================
   PAGE CONTENT (sized relative to the page via container units)
   ================================================================ */
.pg {
  position: absolute; inset: 0; z-index: 1; padding: 8.5cqw 8.5cqw 7cqw;
  display: flex; flex-direction: column; font-size: 3.05cqw; line-height: 1.55; color: var(--ink-2);
}
.back .pg { padding-left: 8.5cqw; padding-right: 9.5cqw; }
.front .pg { padding-left: 10cqw; }
.pg-run { display: flex; justify-content: space-between; font: 600 2.05cqw var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #A1957F; margin-bottom: 5cqw; }
.pg-foot { margin-top: auto; padding-top: 3cqw; display: flex; justify-content: space-between; align-items: center; font: 600 2.05cqw var(--mono); letter-spacing: .14em; color: #A1957F; }
.pg-label { font: 700 2.3cqw/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 3.5cqw; }
.pg-h { font: 800 7.6cqw/1.05 var(--display); letter-spacing: -.04em; color: var(--ink); margin: 0 0 4.5cqw; }
.pg-h.sm { font-size: 6.6cqw; }
.pg p { margin: 0 0 3cqw; }
.pg .tags { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin-top: 2cqw; }
.pg .tag { font: 600 2.35cqw var(--body); background: #FFFBF3; box-shadow: inset 0 0 0 1px #E2D3BA; color: var(--ink); padding: 1.3cqw 2.6cqw; border-radius: 99px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: 700 2.9cqw var(--body); text-decoration: none; display: inline-flex; gap: 1.5cqw; align-items: center; }
.link-btn:hover { text-decoration: underline; }
.book.turning .vbtn, .book.turning .frame, .book.turning .link-btn, .book.turning .toc button, .book.turning .arr, .book.turning .btn-page { pointer-events: none; }

/* Covers + endpapers */
.cover-pg {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 10cqw 9cqw; color: var(--foil);
  background:
    linear-gradient(90deg, #0000004d 0, #0000 6%, #ffffff14 7.2%, #0000 9%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 80% at 70% 20%, var(--teal-2), var(--teal) 55%, var(--teal-3));
}
.cover-pg::before { content: ""; position: absolute; inset: 5cqw 5cqw 5cqw 8cqw; border: 1.5px solid #F3C98B66; border-radius: 1.5cqw; pointer-events: none; }
.cover-top { font: 600 2.3cqw var(--mono); letter-spacing: .3em; opacity: .85; margin-top: 3cqw; }
.cover-sig { width: 78%; margin: auto 0 4cqw; color: var(--foil); filter: drop-shadow(0 .4cqw 0 #0003); }
.cover-title { font: italic 400 7cqw/1.1 var(--serif); margin: 0 0 auto; color: #FBEBD3; }
.cover-bottom { font: 600 2.2cqw var(--mono); letter-spacing: .22em; text-transform: uppercase; opacity: .85; margin-bottom: 2cqw; }
.cover-badge { position: absolute; bottom: 19cqw; right: 11cqw; width: 17cqw; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #F3C98B99; display: grid; place-content: center; text-align: center; font: 700 2cqw/1.3 var(--mono); letter-spacing: .1em; transform: rotate(12deg); }
.cover-badge b { display: block; font: 800 5cqw/1 var(--display); letter-spacing: -.02em; }
.cover-perf { position: absolute; left: 12cqw; right: 9cqw; height: 2.2cqw; background: repeating-linear-gradient(90deg, #F3C98B55 0 3cqw, transparent 3cqw 5cqw); border-radius: 1px; }
.cover-perf.top { top: 9cqw; } .cover-perf.bot { bottom: 9cqw; }
.backcover .cover-pg { background:
    linear-gradient(270deg, #0000004d 0, #0000 6%, #ffffff14 7.2%, #0000 9%),
    radial-gradient(120% 80% at 30% 20%, var(--teal-2), var(--teal) 55%, var(--teal-3)); }
.backcover .cover-pg::before { inset: 5cqw 8cqw 5cqw 5cqw; }
.bc-quote { font: italic 400 8cqw/1.1 var(--serif); color: #FBEBD3; margin: auto 0 4cqw; }
.bc-url { font: 700 4cqw var(--mono); letter-spacing: .22em; margin: auto 0; }
.bc-small { font: 600 2cqw var(--mono); letter-spacing: .3em; opacity: .7; margin-bottom: 3cqw; }
.barcode { width: 32cqw; height: 12cqw; background: #FFFDF8; padding: 2cqw 2.4cqw 1cqw; border-radius: 1cqw; align-self: flex-end; margin: 0 3cqw 9cqw 0; }
.barcode i { display: block; height: 75%; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px); }
.barcode span { display: block; font: 600 1.7cqw var(--mono); color: var(--ink); letter-spacing: .2em; text-align: center; margin-top: .6cqw; }
.endpaper .cover-pg { justify-content: center;
  background: radial-gradient(110% 80% at 50% 40%, var(--teal-2), var(--teal) 55%, var(--teal-3)); }
.face.back.endpaper .cover-pg { background: linear-gradient(270deg, #00000040 0, #0000 8%), radial-gradient(110% 80% at 50% 40%, var(--teal-2), var(--teal) 55%, var(--teal-3)); }
.face.front.endpaper .cover-pg { background: linear-gradient(90deg, #00000040 0, #0000 8%), radial-gradient(110% 80% at 50% 40%, var(--teal-2), var(--teal) 55%, var(--teal-3)); }
.endpaper .cover-pg::before { inset: 6cqw; border: .6cqw double #E7BE7Fcc; border-radius: 1cqw; box-shadow: inset 0 0 0 1.6cqw transparent, 0 0 0 0 #0000; }
.endpaper .cover-pg::after { content: ""; position: absolute; inset: 9.5cqw; border: 1px solid #E7BE7F66; border-radius: .6cqw; pointer-events: none; }
.endpaper-mark { font: 600 2.2cqw var(--mono); letter-spacing: .3em; color: #F3C98Bcc; }
.endpaper .sig { width: 64%; color: #E7BE7F; filter: drop-shadow(0 .4cqw 0 #0003); }
.ep-quote { font: italic 400 5.4cqw/1.35 var(--serif); color: #FBEBD3; margin: 0; letter-spacing: .01em; }
.ep-quote em { color: #E7BE7F; }

/* Portrait page */
.portrait-wrap { position: relative; width: 62%; aspect-ratio: 4/5; margin: auto auto 5cqw; }
.portrait-bg { position: absolute; inset: 0; border-radius: 3cqw; overflow: hidden; background: radial-gradient(circle at 50% 35%, #FBE3C8, #F5C396 55%, #EFAE73); box-shadow: 0 2cqw 5cqw -3cqw #5a3a1a66; }
.portrait-img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 94%; width: auto; max-width: none; }
.portrait-wrap .vf-corner { position: absolute; width: 5cqw; height: 5cqw; border: 2px solid var(--ink); }
.vf-corner.tl { top: 2.5cqw; left: 2.5cqw; border-right: 0; border-bottom: 0; }
.vf-corner.tr { top: 2.5cqw; right: 2.5cqw; border-left: 0; border-bottom: 0; }
.vf-corner.bl { bottom: 2.5cqw; left: 2.5cqw; border-right: 0; border-top: 0; }
.vf-corner.br { bottom: 2.5cqw; right: 2.5cqw; border-left: 0; border-top: 0; }
.portrait-rec { position: absolute; top: 3cqw; left: 50%; transform: translateX(-50%); font: 700 1.8cqw var(--mono); letter-spacing: .14em; background: #fffdf8d9; padding: .8cqw 1.6cqw; border-radius: .8cqw; color: var(--ink); white-space: nowrap; }
.portrait-rec i { display: inline-block; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #E5252A; margin-right: 1cqw; vertical-align: .1cqw; }
.portrait-cap { display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; width: 62%; margin: 0 auto auto; }
.portrait-cap .sig { width: 78%; color: var(--ink); }
.portrait-cap .loc { font: 600 2cqw/1.7 var(--mono); letter-spacing: .14em; color: var(--muted); text-align: center; text-transform: uppercase; }

/* Showreel slate */
.slate { margin-top: auto; border-radius: 2.4cqw; overflow: hidden; background: var(--ink); color: var(--paper); font-family: var(--mono); }
.slate-top { height: 7cqw; background: repeating-linear-gradient(-55deg, var(--paper) 0 4cqw, var(--ink) 4cqw 8cqw); }
.slate-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.slate-grid div { padding: 2.4cqw 3cqw; border-top: 1px solid #ffffff2a; border-right: 1px solid #ffffff2a; }
.slate-grid div:nth-child(3n+1):not(.wide) { border-right: 1px solid #ffffff2a; }
.slate-grid small { display: block; font-size: 1.8cqw; letter-spacing: .16em; opacity: .55; }
.slate-grid b { font: 700 3.6cqw var(--display); }
.slate-grid .wide { grid-column: span 3; border-right: 0; }

/* Contents page */
.toc { list-style: none; padding: 0; margin: 2cqw 0 0; }
.toc li { border-top: 1px solid #DCCFB8; }
.toc li:last-child { border-bottom: 1px solid #DCCFB8; }
.toc button { width: 100%; display: flex; align-items: baseline; gap: 3cqw; background: none; border: 0; padding: 3.4cqw 0; text-align: left; color: var(--ink); transition: padding .25s var(--ease), color .2s; }
.toc button:hover { padding-left: 2cqw; color: var(--accent); }
.toc .n { font: 700 2.6cqw var(--mono); color: var(--accent); }
.toc .t { font: 700 4.2cqw/1.15 var(--display); letter-spacing: -.02em; }
.toc .p { margin-left: auto; font: 600 2.3cqw var(--mono); color: #A1957F; }

/* Chapter opener */
.ch-num { font: 800 34cqw/0.8 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: .35cqw var(--accent); margin: 2cqw 0 6cqw -1.5cqw; }
.ch-count { margin-top: auto; display: flex; align-items: center; gap: 2cqw; font: 600 2.3cqw var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.ch-count i { display: inline-block; width: 4cqw; height: 6cqw; border-radius: .8cqw; background: var(--ink); }
.ch-count i.p { width: 6cqw; height: 4cqw; }

/* Video page */
.v-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3cqw; font: 700 2.2cqw var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.v-meta .c { color: var(--accent); }
.v-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6cqw; }
.frame { position: relative; background: #111; border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 2cqw 5cqw -2cqw #0005; }
.frame.landscape { width: 100%; aspect-ratio: 16/9; }
.frame.portrait { height: 54cqh; aspect-ratio: 9/16; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(#0000 40%, #0007); border: 0; padding: 0; color: #fff; }
.frame .play-btn { width: 15cqw; height: 15cqw; border-radius: 50%; background: var(--accent); display: grid; place-items: center; transition: transform .25s var(--ease); box-shadow: 0 0 0 2cqw #c2410c33; }
.frame .play:hover .play-btn { transform: scale(1.08); }
.frame .play-btn::before { content: ""; margin-left: 1cqw; border-left: 4.4cqw solid #fff; border-top: 2.7cqw solid transparent; border-bottom: 2.7cqw solid transparent; }
.frame .player { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.frame .player iframe { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1.02); border: 0; opacity: 0; transition: opacity .6s; }
.frame.portrait .player iframe { width: 100%; height: 100%; }
.frame.live .player iframe { opacity: 1; }
.frame[data-yt], .frame[data-file] { cursor: zoom-in; }
.frame video.fvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.vctrl { display: flex; justify-content: center; gap: 1.8cqw; }
.vbtn { height: 6.6cqw; min-height: 30px; border: 1px solid #17171a26; border-radius: 99px; display: inline-flex; align-items: center; gap: 1.2cqw; background: #fffdf8; color: var(--ink); padding: 0 2.8cqw 0 2.2cqw; cursor: pointer; font: 700 2cqw/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 .6cqw 1.6cqw -.8cqw #3a2a1540; transition: background .2s, color .2s, transform .2s; }
.vbtn:hover { background: var(--ink); color: #fffdf8; transform: translateY(-1px); }
.vbtn svg { width: 3.4cqw; height: 3.4cqw; min-width: 14px; min-height: 14px; flex: none; }
.vbtn.snd.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.frame.live .badge { opacity: 0; transition: opacity .4s; }
.frame .expand { position: absolute; right: 2.4cqw; bottom: 2.4cqw; z-index: 2; font: 700 1.8cqw var(--mono); letter-spacing: .12em; color: #fff; background: #0008; padding: .8cqw 1.6cqw; border-radius: .8cqw; pointer-events: none; }
.frame .crop { position: absolute; width: 4cqw; height: 4cqw; border: 2px solid #ffffffcc; pointer-events: none; z-index: 2; }
.frame .crop.tl { top: 2cqw; left: 2cqw; border-right: 0; border-bottom: 0; } .frame .crop.tr { top: 2cqw; right: 2cqw; border-left: 0; border-bottom: 0; }
.frame .crop.bl { bottom: 2cqw; left: 2cqw; border-right: 0; border-top: 0; } .frame .crop.br { bottom: 2cqw; right: 2cqw; border-left: 0; border-top: 0; }
.frame .badge { position: absolute; top: 2.4cqw; left: 50%; transform: translateX(-50%); z-index: 2; font: 700 1.8cqw var(--mono); letter-spacing: .14em; color: #fff; background: #0006; padding: .8cqw 1.6cqw; border-radius: .8cqw; white-space: nowrap; }
.frame.empty { background: repeating-linear-gradient(-45deg, #ffffff07 0 2cqw, transparent 2cqw 4cqw), #1b1b1e; display: grid; place-items: center; }
.frame.empty .soon { text-align: center; color: #fffdf8; font-family: var(--mono); padding: 4cqw; }
.frame.empty .soon b { display: block; font: 700 4cqw/1.2 var(--display); letter-spacing: -.01em; margin: 1.4cqw 0; }
.frame.empty .soon small { font-size: 1.8cqw; letter-spacing: .18em; opacity: .6; }
.v-title { font: 700 4.4cqw/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); margin: 4cqw 0 1cqw; }
.v-note { font-size: 2.8cqw; color: var(--muted); margin: 0; }

/* Services cards */
.svc { background: #FFFCF6; border: 1px solid #E2D6C1; border-radius: 3cqw; padding: 4cqw 4.4cqw; margin-bottom: 2.6cqw; position: relative; }
.svc .num { font: 700 2.6cqw var(--mono); color: var(--accent); }
.svc .arr { position: absolute; top: 2.4cqw; right: 2.6cqw; width: 7cqw; height: 7cqw; border-radius: 50%; border: 0; background: transparent; font-size: 3.4cqw; color: var(--ink); display: grid; place-items: center; transition: background .2s, color .2s, transform .25s var(--ease); }
.svc .arr:hover { background: var(--ink); color: #fff; transform: rotate(45deg); }
.svc h3 { font: 800 4.9cqw/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); margin: 2cqw 8cqw 1.6cqw 0; }
.svc p { font-size: 2.75cqw; margin: 0; }
.svc .tags { margin-top: 2.4cqw; }
.svc.compact { display: grid; grid-template-columns: auto 1fr; gap: 0 3.4cqw; align-items: center; }
.svc.compact .num { grid-row: span 2; font-size: 3.2cqw; }
.svc.compact h3 { font: 700 3.9cqw/1.2 var(--display); margin: 0 8cqw .6cqw 0; }
.svc.compact .arr { top: 50%; transform: translateY(-50%); }
.svc.compact .arr:hover { transform: translateY(-50%) rotate(45deg); }

/* Steps */
.steps { display: grid; gap: 0; margin-top: 1cqw; }
.step { border-top: 1.5px solid #DCCFB8; padding: 3.2cqw 0; display: grid; grid-template-columns: 13cqw 1fr; align-items: start; }
.step .n { font: 800 6.4cqw/1 var(--display); color: var(--accent); letter-spacing: -.03em; }
.step h3 { font: 700 3.6cqw/1.2 var(--display); color: var(--ink); margin: 0 0 1cqw; }
.step p { font-size: 2.75cqw; margin: 0; }

/* Review */
.review { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 1cqw 1cqw 0 2cqw; border-left: .5cqw solid #E7855A66; }
.review-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2cqw; }
.review-top .pg-label { margin: 0; }
.stars { font: 600 2.3cqw var(--mono); letter-spacing: .08em; color: #6B5B45; white-space: nowrap; }
.stars i { font-style: normal; color: var(--accent); letter-spacing: .12em; margin-right: 1.4cqw; }
.review .qmark { font: italic 400 24cqw/.6 var(--serif); color: #C9542A44; margin: 3cqw 0 -4cqw -1.4cqw; height: 9cqw; display: block; }
.review q { display: block; font: italic 500 5.1cqw/1.32 var(--hero-2, Georgia), serif; letter-spacing: -.005em; color: #2A2620; quotes: none; margin-bottom: 3.4cqw; }
.review q .hl { background: linear-gradient(transparent 58%, #F4C38Ecc 58%, #F4C38Ecc 92%, transparent 92%); color: inherit; }
.review p { font: 400 2.9cqw/1.6 var(--hero-2, Georgia), serif; color: #4A4238; margin: 0 0 2.2cqw; }
.review .full { display: none; }
.review.open .full { display: block; }
.review.open .lead, .review.open .review-tags { display: none; }
.review .link-btn { font-family: var(--body); font-size: 2.6cqw; align-self: flex-start; }
.review-who { margin-top: auto; display: flex; align-items: flex-start; gap: 2cqw; padding-top: 3cqw; }
.review-who .dash { font: 400 4cqw/1 var(--serif); color: #6B5B45; }
.review-who b { display: block; color: #2A2620; font: italic 600 4cqw/1.1 var(--serif); }
.review-who span { font: 500 2.2cqw var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8C7F6C; }
.review-tags { margin: 2.6cqw 0 0 !important; font: 600 2.1cqw/1.6 var(--mono) !important; letter-spacing: .1em; text-transform: uppercase; color: #9A8A70 !important; }

/* Chapter 06 + wrap pages */
.cta-frame { flex: 1; min-height: 0; border: .4cqw dashed #C9B89C; border-radius: 3cqw; display: grid; place-content: center; text-align: center; gap: 3cqw; margin: 1cqw 0 4cqw; font: 600 2.3cqw var(--mono); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.cta-frame b { font: 300 14cqw/1 var(--display); color: var(--accent); }
.ch6 .ch-num { margin-bottom: 8cqw; }
.ch6 .btn-page { margin-top: 3cqw; }
.btn-page { align-self: flex-start; background: var(--ink); color: var(--paper); text-decoration: none; font: 600 3cqw var(--body); padding: 2.6cqw 4.4cqw; border-radius: 99px; }
.btn-page:hover { background: var(--accent); }
.wrap-pg { text-align: center; align-items: center; justify-content: center; }
.wrap-pg .fin { font: italic 400 16cqw/1 var(--serif); color: var(--ink); margin: auto 0 3cqw; }
.wrap-pg .sig { width: 70%; color: var(--accent); margin-bottom: 5cqw; }
.wrap-pg p { max-width: 70cqw; }
.wrap-pg .pg-foot, .wrap-pg .pg-run { width: 100%; }

.totop {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 60;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
  background: var(--ink); color: var(--paper); font: 700 18px var(--body); box-shadow: 0 12px 30px -10px #0006;
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease), background .2s;
}
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--accent); }

/* ================================================================
   VIDEO LIGHTBOX
   ================================================================ */
.lb { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.lb.open { visibility: visible; }
.lb-backdrop { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .45s var(--ease); }
.lb.show .lb-backdrop { opacity: 1; }
.lb-box { position: fixed; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 40px 90px -30px #000; }
.lb-box.anim { transition: left .55s var(--ease), top .55s var(--ease), width .55s var(--ease), height .55s var(--ease), border-radius .55s; }
.lb-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; opacity: .6; }
.lb-box iframe, .lb-box video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.lb-box video { object-fit: contain; }
.lb-close { position: absolute; z-index: 2; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fffdf8; color: var(--ink); font-size: 18px; box-shadow: 0 6px 20px #0008; opacity: 0; transition: opacity .3s .2s, transform .2s; }
.lb-close:hover { transform: scale(1.08); }
.lb.show .lb-close { opacity: 1; }

/* ================================================================
   CONTACT (compact)
   ================================================================ */
.contact {
  padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 64px) 0; position: relative;
  background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--ground) 6%, var(--paper)) 16%, color-mix(in srgb, var(--ground) 14%, var(--paper)) 32%, color-mix(in srgb, var(--ground) 24%, var(--paper)) 50%, color-mix(in srgb, var(--ground) 34%, var(--paper)) 64%, color-mix(in srgb, var(--ground) 48%, var(--paper)) 76%, color-mix(in srgb, var(--ground) 66%, var(--paper)) 86%, color-mix(in srgb, var(--ground) 86%, var(--paper)) 94%, var(--ground) 100%);
}
.contact-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.contact .h2 { font-size: clamp(30px, 3.6vw, 50px); }
.contact-lead { font-size: 16px; color: var(--ink-2); margin: 14px 0 22px; max-width: 420px; }
.contact-email { display: inline-block; font: 700 clamp(20px, 2vw, 26px) var(--display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; border-bottom: 2px solid currentColor; word-break: break-all; }
.contact-email:hover { color: var(--accent); }
.copy-btn { display: block; margin-top: 10px; border: 1px solid var(--ink); background: transparent; border-radius: 99px; padding: 5px 11px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.copy-btn:hover { background: var(--ink); color: var(--paper); }
.socials { list-style: none; padding: 0; margin: 22px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.socials a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; padding: 7px 12px; border-radius: 99px; background: #fffdf8; font: 600 13px var(--body); }
.socials a:hover { background: var(--ink); color: #fff; }
.socials svg { width: 15px; height: 15px; }

.form { background: #FFFDF8; border-radius: 20px; padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 12px; box-shadow: 0 30px 60px -36px #2a280e88; }
.form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.form-title { font: 800 clamp(19px, 1.6vw, 22px)/1.2 var(--display); letter-spacing: -.025em; margin: 0; color: var(--ink); }
.form-sub { margin: 0; color: var(--muted); font-size: 13px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .row-3 { grid-template-columns: 1fr 1fr 1fr; }
.form .row-end { grid-template-columns: 1fr auto; align-items: end; }
.form label { display: grid; gap: 6px; font: 700 12px var(--body); color: var(--ink); }
.form input, .form select, .form textarea {
  font: 400 14px var(--body); color: var(--ink); background: #F3F1E8; border: 1px solid #D9D6C6; border-radius: 10px; padding: 10px 12px; width: 100%; outline: none; transition: border-color .2s, box-shadow .2s; resize: vertical; min-height: 42px;
}
.form textarea { min-height: 76px; }
.form select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; text-overflow: ellipsis;
  background: #F3F1E8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2317171A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
.form input::placeholder, .form textarea::placeholder { color: #8F887E; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px #E7855A33; }
.form .invalid { border-color: #E5252A; }
.form-submit { height: 42px; padding: 0 22px; border: 0; border-radius: 99px; background: #F28C2E; color: var(--ink); font: 700 14px var(--body); white-space: nowrap; transition: background .2s, transform .2s; }
.form-submit:hover { background: #E8772E; transform: translateY(-1px); }
.form-submit:disabled { opacity: .6; }
.form-status { margin: 0; font-size: 13px; color: var(--ink-2); min-height: 0; }
.form-status:empty { display: none; }
.form-status.ok { color: #1D7A50; } .form-status.err { color: #B42318; }

.footer { max-width: 1180px; margin: clamp(48px, 6vw, 72px) auto 0; padding: 18px 0 22px; border-top: 1px solid #ffffff2e; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; color: #F1EEDF; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--hl); }
.footer-sig { width: 104px; color: #F1EEDF; }
.social-icons { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.social-icons a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #ffffff1c; color: #F1EEDF; transition: background .2s, color .2s, transform .2s; }
.social-icons a:hover { background: #F1EEDF; color: var(--ground); transform: translateY(-2px); }
.social-icons svg { width: 15px; height: 15px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {
  .contact-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav a:not(.nav-cta) { display: none; }
  .brand .sig { width: 110px; }
  .book-head .mono:first-child { display: none; }
  .nle-tc, .nle-btns { min-width: 0; }
  .nle-tc { display: none; }
  .nle-clip { font-size: 0; padding: 0; }
  .viewtog kbd { display: none; }
  .form .row, .form .row-3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .form .row-3 > :first-child { grid-column: span 2; }
  .form .row-end { grid-template-columns: 1fr; }
  .form-submit { width: 100%; }
  .form-sub { font-size: 12px; }
  .hero-pin { padding-top: 76px; gap: 14px; }
  .scroll-cue { top: 78px; right: 16px; font-size: 9px; }
  .hero-copy { margin: auto 0; }
  .hero-title { font-size: clamp(34px, 9.6vw, 46px); margin-bottom: 14px; }
  .hero-desc { font-size: 15px; margin-bottom: 18px; }
  .hero-ctas .btn { padding: 12px 18px; font-size: 14px; }
  .hero-meta { margin-top: 14px; }
  .htl-stages span { font-size: 8px; padding: 0 3px; letter-spacing: .04em; }
  .htl-export { top: -36px; font-size: 12px; padding: 7px 12px; }
  .book.single-mobile .pg { font-size: 3.4cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .hero-title .line > span { transform: none; transition: none; }
}

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.blank-pg { background: none; }

/* ================================================================
   FILM STRIP — a straight strip of vintage 35mm film
   ================================================================ */
.reel-stage { --fh: clamp(118px, 13vw, 176px); position: relative; z-index: 1; }
.reel-stage.paused .reel-track { animation-play-state: paused; }

/* the film strip: straight, full width */
.reel { position: relative; z-index: 2; left: 0; top: 0;
  width: 100%; overflow: hidden; padding: calc(var(--fh) * .25) 0;
  background: linear-gradient(180deg, #1a120b, #2a1d13 50%, #1a120b);
  box-shadow: 0 30px 60px -20px #000c, inset 0 1px 0 #ffffff10, inset 0 -1px 0 #ffffff10;
  --hole-w: calc(var(--fh) * .075); --hole-h: calc(var(--fh) * .06); --pitch: calc(var(--fh) * .16); }
/* sprocket holes ride on each frame, so the whole strip travels together.
   Each frame cell (frame + gap = 1.62 × height) carries exactly 10 holes → seamless. */
.rf::before, .rf::after { content: ""; position: absolute; left: calc(var(--fh) * -.06); right: calc(var(--fh) * -.06); height: var(--hole-h); pointer-events: none;
  --pitch: calc(var(--fh) * .162);
  -webkit-mask: linear-gradient(90deg, transparent calc(var(--pitch) * .25), #000 0 calc(var(--pitch) * .25 + var(--hole-w)), transparent 0) 0 0 / var(--pitch) 100% repeat-x;
          mask: linear-gradient(90deg, transparent calc(var(--pitch) * .25), #000 0 calc(var(--pitch) * .25 + var(--hole-w)), transparent 0) 0 0 / var(--pitch) 100% repeat-x;
  background: linear-gradient(#efe5d2, #d9ccb4); opacity: .9; }
.rf::before { top: calc(var(--fh) * -.2); }
.rf::after { bottom: calc(var(--fh) * -.2); }
.reel-track { will-change: transform; display: flex; gap: calc(var(--fh) * .12); padding: 0 calc(var(--fh) * .06); width: max-content;
  transform: translateX(-50%); animation: reelOut 60s linear infinite; }
@keyframes reelOut { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.rf { position: relative; flex: none; height: var(--fh); aspect-ratio: 3 / 2; }
.rf-pic { position: absolute; inset: 0; border-radius: calc(var(--fh) * .05); overflow: hidden; background: #000; box-shadow: 0 0 0 2px #0d0805, inset 0 0 0 1px #00000080;
  transition: transform .4s var(--ease), box-shadow .4s; }
.rf-pic canvas { width: 100%; height: 100%; display: block; }
.rf:hover .rf-pic { transform: scale(1.06); box-shadow: 0 0 0 2px #F4C38E, 0 14px 30px -10px #000; z-index: 2; }
.rf-no, .rf-lab { position: absolute; font: 700 calc(var(--fh) * .052)/1 var(--mono); letter-spacing: .12em; color: #e2a55a; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.rf-no { top: calc(var(--fh) * -.105); left: 4px; }
.rf-no::after { content: " ▸ KA 5219"; color: #e2a55a88; }
.rf-lab { bottom: calc(var(--fh) * -.105); right: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: #e9dfcca8; }

/* warm projector light with dust drifting through it */
.proj-beam { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 75%; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 45%, #f4c38e1c, transparent 70%); }
.proj-beam i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe9c8; opacity: 0; animation: dust 9s linear infinite; }
.proj-beam i:nth-child(1) { left: 14%; top: 30%; animation-delay: 0s; }
.proj-beam i:nth-child(2) { left: 26%; top: 52%; animation-delay: -1.2s; width: 2px; height: 2px; }
.proj-beam i:nth-child(3) { left: 38%; top: 24%; animation-delay: -2.6s; }
.proj-beam i:nth-child(4) { left: 48%; top: 62%; animation-delay: -3.9s; width: 2px; height: 2px; }
.proj-beam i:nth-child(5) { left: 60%; top: 36%; animation-delay: -5.1s; }
.proj-beam i:nth-child(6) { left: 72%; top: 18%; animation-delay: -6.3s; width: 2px; height: 2px; }
.proj-beam i:nth-child(7) { left: 20%; top: 70%; animation-delay: -7.4s; }
.proj-beam i:nth-child(8) { left: 84%; top: 46%; animation-delay: -8.2s; width: 2px; height: 2px; }
@keyframes dust { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .55; } 85% { opacity: .35; } 100% { opacity: 0; transform: translate(60px, -40px); } }

.reel-cap { position: relative; z-index: 1; text-align: center; margin: 9vh 0 0; padding: 0 20px; color: #3a2d22b0; font-size: 11px; letter-spacing: .2em; }
@media (max-width: 720px) {
  .reel-stage { --fh: 96px; }
  .reel-track { animation-duration: 45s; }
  .reel-cap { font-size: 9px; line-height: 1.8; margin-top: 8vh; }
}
@media (prefers-reduced-motion: reduce) { .reel-track, .proj-beam i { animation: none; } }

.dawn.reelsec { position: relative; overflow: hidden; padding: 14vh 0 18vh; margin: 0; }
.reel-cap { color: #3a2d22b0; }

/* Cloudflare Turnstile check (normally invisible) */
.ts-box:empty { display: none; }
.ts-box { margin: 0; }

/* Phones, one-page mode: a flip-pad — the page turns over to the left, revealing the next one */
.sp { display: none; }
.book.flip > .leaf { display: none; }
.book.flip > .sp { display: block; position: absolute; top: 0; left: calc(var(--pw) * .5); width: var(--pw); height: 100%; perspective: 1500px; transform-style: preserve-3d; }
.sp-page { position: absolute; inset: 0; display: none; transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; }
.sp-page > .face { border-radius: 4px 10px 10px 4px; box-shadow: 0 1px 0 #0000000a; }
.sp-page > .face.back { transform: none; }
.sp-page > .face > .shd { background: linear-gradient(90deg, #2a1d0f22, #2a1d0f66); }
.book.flip > .book-shadow { left: 27%; right: 27%; }

/* Phones: a hand-written note pointing at the page arrows */
.nle-btns { position: relative; }
.turn-hint { display: none; }
@media (max-width: 720px) {
  .turn-hint { display: flex; align-items: flex-end; gap: 2px; position: absolute; right: 26px; bottom: calc(100% + 2px); pointer-events: none;
    font: 700 19px/1 Caveat, "Segoe Print", cursive; color: var(--accent); white-space: nowrap; transform: rotate(-4deg); transition: opacity .5s; }
  .turn-hint svg { width: 34px; height: 26px; margin-bottom: -10px; }
  .turn-hint.gone { opacity: 0; }
}