/* =========================================================
   Veerendrababu Nanjegowda — personal & professional site
   Design tokens
   ========================================================= */
:root{
  /* ---- primary: rich black / deep forest / dark emerald ---- */
  --ink:#16211F;
  --ink-2:#1E2C29;
  --ink-3:#263733;
  --ink-4:#0E1614;

  /* ---- surface: soft ivory / paper white ---- */
  --paper:#F1EAD9;
  --paper-2:#E6DCC4;
  --paper-3:#FAF6EC;

  /* ---- accent: luxury gold / warm bronze ---- */
  --gold:#B8863D;
  --gold-bright:#D6A44F;
  --gold-pale:#F0D9A8;
  --soil:#9C4E34;
  --soil-bright:#C06A46;

  /* ---- text: rich charcoal / warm white ---- */
  --text-light:#EFE9DD;
  --text-dark:#221F1A;
  --muted:#ABBAB1;
  --muted-2:#6B6656;

  --rule: rgba(239,233,221,0.14);
  --rule-strong: rgba(239,233,221,0.24);
  --maxw: 1180px;
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 22px;
  --space-4: 36px;
  --space-5: 56px;

  /* ---- luxury gradients, built from the palette above (no stock purples/blues) ---- */
  --grad-emerald: linear-gradient(155deg, var(--ink-3) 0%, var(--ink) 55%, var(--ink-4) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 55%, var(--soil) 100%);
  --grad-gold-soft: linear-gradient(120deg, rgba(214,164,79,.16), rgba(156,78,52,.08));
  --grad-vignette: radial-gradient(120% 90% at 50% -10%, rgba(214,164,79,.10), transparent 60%);

  /* ---- glass / elevation ---- */
  --glass-bg: rgba(30,44,41,.55);
  --glass-bg-light: rgba(250,246,236,.6);
  --glass-border: rgba(239,233,221,.14);
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(28px);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.04);
  --shadow-lift: 0 20px 48px rgba(0,0,0,.32);
  --shadow-gold: 0 12px 32px rgba(214,164,79,.22);

  /* ---- motion easing ---- */
  --ease-premium: cubic-bezier(.16,.8,.24,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- glass utility ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:var(--blur-md);
  -webkit-backdrop-filter:var(--blur-md);
  border:1px solid var(--glass-border);
}
section.paper .glass{ background:var(--glass-bg-light); border-color:rgba(34,31,26,.08); }

/* ---------- reduced-scale fluid type ramp, used by hero + section heads ---------- */
.display-1{ font-size:clamp(2.6rem, 6vw, 5.4rem); line-height:.98; letter-spacing:-0.02em; }
.display-2{ font-size:clamp(2.1rem, 4.4vw, 3.6rem); line-height:1.04; letter-spacing:-0.015em; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text-light);
  font-family:'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1.6;
  font-size:16px;
  position:relative;
}
/* faint paper grain — adds tactile warmth instead of a flat gradient */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  margin:0 0 .4em;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--gold-bright); color:#1A1408; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--gold-bright); color:#1A1408; padding:10px 18px;
  font-family:'IBM Plex Mono', monospace; font-size:13px; z-index:200; border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; top:0; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold-bright);
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:20px; height:1px; background:var(--gold-bright); display:inline-block; }
section.paper .eyebrow{ color:var(--soil); }
section.paper .eyebrow::before{ background:var(--soil); }

a:focus-visible, button:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

.btn{
  position:relative; overflow:hidden; isolation:isolate; will-change:transform;
  font-family:'Public Sans', sans-serif; font-weight:600; font-size:14.5px;
  padding:13px 24px; border-radius:3px; text-decoration:none; display:inline-block;
  transition:background .2s ease, box-shadow .35s ease; border:none; cursor:pointer;
}
/* Small dot, always faintly visible, that expands to fill the button on
   hover — a lighter-weight replacement for the old diagonal shine-sweep.
   Pure CSS (:hover), not GSAP, so it's safe to keep on ::before even
   though GSAP itself can't target pseudo-elements. Applies to every .btn
   (including the plain-text admin ones) since it needs no extra markup. */
.btn::before{
  content:""; position:absolute; z-index:-1; left:18px; top:50%; width:8px; height:8px;
  margin-top:-4px; border-radius:50%; transition:all .4s var(--ease-premium);
}
.btn:hover::before{ left:0; top:0; margin-top:0; width:100%; height:100%; border-radius:3px; }
.btn-primary{ background:var(--gold-bright); color:#1A1408; box-shadow:0 0 0 rgba(214,164,79,0); }
.btn-primary::before{ background:#1A1408; opacity:.14; }
.btn-primary:hover{ box-shadow:var(--shadow-gold); }
.btn-primary:hover::before{ background:#e6b665; opacity:1; }
.btn-ghost{ border:1px solid var(--rule-strong); color:var(--text-light); }
.btn-ghost::before{ background:var(--gold-bright); opacity:.18; }
.btn-ghost:hover{ border-color:var(--gold-bright); color:#1A1408; box-shadow:0 8px 24px rgba(214,164,79,.12); }
.btn-ghost:hover::before{ background:var(--gold-bright); opacity:1; }

/* Opt-in text-slide + icon-reveal (the two-layer .btn-label/.btn-reveal
   markup below) — only the public CTA buttons use this; plain .btn text
   (e.g. admin panel buttons) just gets the dot effect above with no
   markup change needed. */
.btn-label{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px;
  transition:transform .3s var(--ease-premium), opacity .3s ease;
}
.btn:hover .btn-label{ transform:translateX(16px); opacity:0; }
.btn-reveal{
  position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px;
  transform:translateX(40px); opacity:0; pointer-events:none;
  transition:transform .3s var(--ease-premium), opacity .3s ease;
}
.btn-reveal svg{ width:16px; height:16px; flex-shrink:0; }
.btn:hover .btn-reveal{ transform:translateX(0); opacity:1; }
/* Plain hover-lift for buttons the magnetic-cursor effect doesn't reach
   (touch devices, reduced motion, or simply buttons we didn't wire up). */
.btn:not(.magnetic):hover{ transform:translateY(-2px); transition:transform .2s ease, background .2s ease, box-shadow .35s ease; }
/* .magnetic buttons get their translate driven by main.js on mousemove. */
.magnetic{ transform:translate(0,0); }
@media (prefers-reduced-motion: reduce){ .magnetic{ transform:none !important; } }

/* ---------- NAV ---------- */
/* backdrop-filter lives on ::before, NOT on header itself: putting a
   filter/backdrop-filter directly on header makes it a "containing block"
   for any position:fixed descendant (the mobile nav.links panel below),
   which silently breaks that panel's sizing to header's own ~60px height
   instead of the full viewport. Keeping the blur on a separate pseudo
   layer gets the same frosted look without that side effect. */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(22,33,31,0.92);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .3s ease, background .3s ease;
}
header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
header.scrolled{ background:rgba(18,27,25,0.97); box-shadow:0 10px 30px rgba(0,0,0,.28); }
.navrow{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; max-width:var(--maxw); margin:0 auto;
  transition:padding .3s ease;
}
header.scrolled .navrow{ padding-top:9px; padding-bottom:9px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark{ width:34px; height:34px; border-radius:50%; flex-shrink:0; }
.brand-name{ font-family:'Fraunces', serif; font-weight:600; font-size:16px; color:var(--text-light); }
.brand-name span{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.08em;
  color:var(--muted); font-weight:400; text-transform:uppercase; margin-top:2px;
}
nav.links{ display:flex; gap:26px; font-size:14px; }
nav.links a{ position:relative; text-decoration:none; color:var(--muted); transition:color .2s ease; padding-bottom:3px; }
nav.links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--gold-bright);
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
nav.links a:hover{ color:var(--gold-bright); }
nav.links a:hover::after, nav.links a.active::after{ transform:scaleX(1); }
nav.links a.active{ color:var(--gold-bright); }
#menuToggle{
  display:none; background:none; border:1px solid var(--rule-strong);
  width:38px; height:38px; padding:0; border-radius:6px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  flex-shrink:0;
}
#menuToggle:hover{ border-color:var(--gold-bright); }
#menuToggle .menu-bar{
  display:block; width:18px; height:2px; border-radius:1px;
  background:var(--text-light); transition:transform .25s ease, opacity .2s ease;
}
/* morph the three bars into an X once the panel is open */
#menuToggle[aria-expanded="true"] .menu-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#menuToggle[aria-expanded="true"] .menu-bar:nth-child(2){ opacity:0; }
#menuToggle[aria-expanded="true"] .menu-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){ #menuToggle .menu-bar{ transition:none; } }
@media (max-width: 880px){
  nav.links{
    position:fixed; inset:58px 0 0 0; background:var(--ink);
    flex-direction:column; padding:30px 28px; gap:22px; font-size:17px; display:none;
  }
  nav.links.open{ display:flex; }
  #menuToggle{ display:flex; }
}

/* ---------- BANNER ----------
   The artwork is 1400x560 (2.5:1) with its text baked in, so it can
   never be cropped. The block carries that exact ratio, which means the
   image lands edge to edge with no letterbox at normal widths. Where
   max-height takes over (short, wide windows) object-fit:contain keeps
   the artwork whole and the blurred copy behind fills what's left —
   using the banner's own colours rather than a guessed backdrop. */
.banner-hero{
  position:relative; width:100%; padding:0;
  aspect-ratio:1400 / 560;
  max-height:78vh;
  overflow:hidden;
  background:var(--ink-4);
  border-bottom:1px solid var(--rule);
}
.banner-hero img{
  position:absolute; inset:0; display:block;
  width:100%; height:100%;
}
.banner-hero .banner-hero-bleed{
  object-fit:cover; transform:scale(1.16);
  filter:blur(44px) brightness(.5) saturate(1.2);
  pointer-events:none;
}
.banner-hero .banner-hero-art{ object-fit:contain; }

/* ---------- HERO ---------- */
.hero{ padding:120px 0 128px; position:relative; overflow:hidden; border-bottom:1px solid var(--rule); }

/* Animated gradient mesh — layered radial gradients from the brand palette
   only (no stock purple/blue "AI mesh"), drifting slowly via mesh-drift.
   #meshLayer's own position is additionally nudged by main.js on
   mousemove/scroll for a subtle parallax depth cue. */
.hero-mesh{
  position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(214,164,79,.20), transparent 68%),
    radial-gradient(32% 38% at 82% 12%, rgba(156,78,52,.16), transparent 70%),
    radial-gradient(46% 50% at 68% 82%, rgba(38,55,51,.55), transparent 72%),
    var(--grad-emerald);
  animation:meshDrift 22s ease-in-out infinite alternate;
  will-change:transform;
}
.hero::before{
  content:""; position:absolute; top:-140px; right:-140px; width:420px; height:420px; border-radius:50%;
  border:1px solid rgba(214,164,79,0.14); animation:driftA 26s ease-in-out infinite alternate; pointer-events:none; z-index:1;
}
.hero::after{
  content:""; position:absolute; bottom:-180px; left:-120px; width:340px; height:340px; border-radius:50%;
  border:1px solid rgba(214,164,79,0.09); animation:driftB 32s ease-in-out infinite alternate; pointer-events:none; z-index:1;
}
.hero-grid{ display:grid; grid-template-columns:1.3fr 0.9fr; gap:60px; align-items:start; position:relative; z-index:2; }
.hero h1{ font-size:clamp(2.6rem, 5.4vw, 4.6rem); line-height:1.02; letter-spacing:-.02em; max-width:14ch; }
.hero h1 .line{ overflow:hidden; display:block; }
.hero h1 .line-inner{ display:block; will-change:transform; }
.hero .lede{ font-size:18px; color:var(--muted); max-width:48ch; margin-bottom:26px; }
.byline{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-light); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:14px 0; margin-bottom:30px; line-height:1.9;
}
.byline b{ color:var(--gold-bright); font-weight:500; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-visual{ display:flex; flex-direction:column; gap:22px; perspective:1200px; }
.portrait-frame{
  position:relative; aspect-ratio:4/5; border-radius:6px;
  border:1px solid rgba(214,164,79,0.35);
  background-image:
    linear-gradient(155deg, rgba(214,164,79,0.10), transparent 55%),
    linear-gradient(0deg, var(--ink-3), var(--ink-2));
  background-size:cover, cover;
  background-position:center;
  overflow:hidden;
  box-shadow:var(--shadow-lift);
  transform-style:preserve-3d;
  will-change:transform;
}
/* main.js probes for assets/portrait.jpg with a plain Image() and only adds
   this class if it actually exists — avoids the browser silently re-issuing
   a failed background-image request on every repaint (it does, in some
   Chromium builds, when the layer keeps repainting from scroll/parallax). */
.portrait-frame.has-photo{ background-image:
    linear-gradient(155deg, rgba(214,164,79,0.14), transparent 55%),
    linear-gradient(0deg, rgba(14,22,20,0.55), transparent 45%),
    url("portrait.jpg");
  background-size:cover, cover, cover;
}
/* Soft ambient glow behind the frame — main.js toggles .is-visible once the
   frame has revealed, so the glow fades in a beat after rather than popping. */
.portrait-frame::after{
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:8px;
  background:radial-gradient(60% 60% at 50% 40%, rgba(214,164,79,.35), transparent 72%);
  filter:var(--blur-lg); opacity:0; transition:opacity 1s var(--ease-premium) .3s;
}
.portrait-frame.is-visible::after{ opacity:.55; }
.portrait-caption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 18px;
  background:linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em; color:var(--text-light);
  text-transform:uppercase;
}
.portrait-stamp{
  position:absolute; right:-16px; bottom:-16px; width:74px; height:74px;
  border-radius:50%; box-shadow:0 4px 16px rgba(0,0,0,0.4);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.portrait-frame:hover .portrait-stamp{ transform:rotate(-12deg) scale(1.06); }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); animation:bounceCue 2.6s ease-in-out infinite; pointer-events:none;
}
.scroll-cue svg{ width:13px; height:13px; }
@media (max-width:640px){ .scroll-cue{ display:none; } }

.pull-quote{
  font-family:'Fraunces', serif; font-style:italic; font-size:16.5px; color:var(--gold-bright);
  text-align:center; line-height:1.45; padding:0 8px;
}
.pull-quote .cap{
  display:block; font-family:'IBM Plex Mono', monospace; font-style:normal; font-size:10px;
  letter-spacing:.18em; color:var(--muted); margin-top:10px; text-transform:uppercase;
}
@media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; } .hero{ padding:60px 0 52px; } .hero-visual{ max-width:340px; } }

/* ---------- PREMIUM LOADING SCREEN ---------- */
/* Shown only while webfonts + the hero portrait are loading, and only if
   JS actually runs — see main.js. No-JS visitors never see this at all
   (the HTML ships without it in that case... in practice it's inline in
   index.html, so we hide it fast via a hard timeout as a safety net). */
#loader{
  position:fixed; inset:0; z-index:400; background:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
}
#loader .loader-mark{ width:48px; height:48px; opacity:0; animation:loaderFadeIn .6s ease forwards .1s; }
#loader .loader-bar{ width:160px; height:1px; background:var(--rule-strong); position:relative; overflow:hidden; }
#loader .loader-bar::after{
  content:""; position:absolute; inset:0; background:var(--gold-bright); transform:scaleX(0); transform-origin:left;
  animation:loaderProgress 1.1s var(--ease-premium) forwards .2s;
}
#loader .loader-word{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); opacity:0; animation:loaderFadeIn .6s ease forwards .1s;
}
@keyframes loaderFadeIn{ to{ opacity:1; } }
@keyframes loaderProgress{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){ #loader{ display:none; } }

/* ---------- SECTION SCAFFOLDING ---------- */
section{ padding:80px 0; border-bottom:1px solid var(--rule); position:relative; z-index:1; }
section.paper{ background:var(--paper); color:var(--text-dark); border-bottom:none; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head h1, .section-head h2{ font-size:clamp(2rem, 3.6vw, 2.9rem); letter-spacing:-.015em; }
.section-head p{ color:var(--muted); font-size:16px; }
section.paper .section-head p{ color:var(--muted-2); }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:0.85fr 1.4fr; gap:52px; align-items:start; }
.about-grid h1, .about-grid h2{ font-size:clamp(1.6rem, 2.8vw, 2.1rem); }
.value-line{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--soil); line-height:2;
}
.about-portrait{
  position:relative; margin-top:32px; max-width:280px; border-radius:6px; overflow:hidden;
  box-shadow:0 20px 40px rgba(34,31,26,.14); border:1px solid rgba(34,31,26,.1);
}
.about-portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.about-portrait-caption{
  position:absolute; left:0; right:0; bottom:0; padding:12px 16px;
  background:linear-gradient(0deg, rgba(0,0,0,.6), transparent);
  color:var(--text-light); font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
}
.about-lead::first-letter{
  font-family:'Fraunces', serif; font-size:3.4em; float:left; line-height:0.8; padding:6px 8px 0 0;
  color:var(--soil); font-weight:600;
}
.about-copy p{ max-width:64ch; color:var(--muted-2); font-size:16px; }
.stat-row{ display:flex; gap:18px; margin-top:36px; flex-wrap:wrap; }
.stat{
  flex:1; min-width:150px; padding:22px 20px; border-radius:8px;
  background:#fff; border:1px solid rgba(34,31,26,.1); box-shadow:var(--shadow-soft);
  transition:transform .35s var(--ease-premium), box-shadow .35s ease;
}
.stat:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(34,31,26,.12); }
.stat-icon{ width:22px; height:22px; color:var(--soil); margin-bottom:14px; }
.stat .num{ font-family:'Fraunces', serif; font-size:1.9rem; color:var(--soil); font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.stat .lbl{ font-size:12px; color:var(--muted-2); font-family:'IBM Plex Mono', monospace; letter-spacing:.03em; margin-top:6px; }
@media (max-width:880px){ .about-grid{ grid-template-columns:1fr; } }

/* ---------- BIOGRAPHY TIMELINE (alternating spine) ----------
   Entries stack in normal block flow (each .tl-item is full-height
   regardless of its half-width, so they never sit side by side) and
   alternate which half they occupy via nth-child, producing a zig-zag
   either side of a centered spine. ---------------------------------- */
.timeline{ position:relative; max-width:920px; margin:0 auto; padding:8px 0; }
/* Static full-height guide rule (::before — decorative, no need to be a
   real element), plus a real .timeline-progress element that GSAP scrubs
   with scaleY as you scroll — pseudo-elements aren't animatable targets,
   so the filling gold line needs an actual DOM node. Centered with
   left:50%/margin-left instead of transform:translateX, since GSAP's
   scaleY scrub writes an inline transform that would otherwise clobber it. */
.timeline::before{ content:""; position:absolute; left:50%; margin-left:-.5px; top:0; bottom:0; width:1px; background:var(--rule); }
.timeline-progress{
  position:absolute; left:50%; margin-left:-.5px; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, var(--gold-bright), var(--soil));
  transform:scaleY(0); transform-origin:top; will-change:transform;
}
.tl-item{ position:relative; width:calc(50% - 44px); padding:0 0 40px; }
.tl-item:last-child{ padding-bottom:0; }
/* .tl-left/.tl-right (set explicitly in the markup) drive the
   alternation rather than :nth-child(odd/even) — .timeline-progress
   is a preceding sibling of the .tl-item elements, so nth-child would
   count it too and throw the odd/even parity off by one. */
.tl-right{ margin-left:calc(50% + 44px); }
.tl-item::before{
  content:""; position:absolute; top:4px; width:11px; height:11px; border-radius:50%;
  background:var(--ink); border:2px solid var(--gold-bright);
  transform:scale(0); transition:transform .5s cubic-bezier(.34,1.56,.64,1) .1s, box-shadow .3s ease;
}
/* Dot sits centered on the spine: the box edge is 44px short of the
   center line, so offset outward by that gap plus half the dot's own
   width (5.5px) to land the dot's center exactly on the spine. */
.tl-left::before{ right:-49.5px; }
.tl-right::before{ left:-49.5px; }
.tl-item.is-visible::before{ transform:scale(1); }
.tl-item:hover::before{ box-shadow:0 0 0 6px rgba(214,164,79,.18); }
.tl-year{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--gold-bright); letter-spacing:.05em; margin-bottom:6px; }
.tl-item h4{ font-size:17px; margin-bottom:6px; transition:color .25s ease; }
.tl-item:hover h4{ color:var(--gold-bright); }
.tl-item p{ color:var(--muted); margin:0; max-width:46ch; }

@media (max-width:760px){
  .timeline{ margin-left:6px; padding-left:36px; max-width:none; }
  .timeline::before, .timeline-progress{ left:0; margin-left:0; }
  .tl-item{ width:auto; }
  .tl-right{ margin-left:0; }
  .tl-left::before, .tl-right::before{ left:-42px; right:auto; }
  .tl-item p{ max-width:62ch; }
}

/* ---------- BEAT ROWS (reused for Work + Campaigns) ---------- */
.beat-list{ display:flex; flex-direction:column; }
.beat-row{
  display:grid; grid-template-columns:190px 1fr; gap:24px; padding:26px 0; border-top:1px solid var(--rule);
  transition:padding-left .3s ease, border-color .3s ease;
}
.beat-row:last-child{ border-bottom:1px solid var(--rule); }
.beat-row:hover{ padding-left:10px; border-color:var(--gold-bright); box-shadow:0 1px 0 var(--gold-bright); }
section.paper .beat-row:hover{ border-color:var(--soil); box-shadow:0 1px 0 var(--soil); }
.beat-row .lbl{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--gold-bright); letter-spacing:.05em; padding-top:2px; text-transform:uppercase; }
.beat-row h2, .beat-row h3{ font-size:17px; margin-bottom:6px; }
.beat-row p{ color:var(--muted); margin:0; font-size:14.5px; max-width:64ch; }
section.paper .beat-row{ border-color:var(--paper-2); }
section.paper .beat-row .lbl{ color:var(--soil); }
section.paper .beat-row p{ color:var(--muted-2); }
@media (max-width:640px){ .beat-row{ grid-template-columns:1fr; gap:8px; } }

/* .beat-grid: lays the same .beat-row items out as a single horizontal
   row of cards instead of a stacked list. Scoped as a modifier (rather
   than changed on .beat-row itself) since .beat-list/.beat-row are
   shared with the Campaigns page, which keeps the stacked layout. */
.beat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.beat-grid .beat-row{
  display:flex; flex-direction:column; grid-template-columns:none;
  padding:20px 22px; border-top:none;
  background:linear-gradient(135deg, var(--ink-3), var(--ink-2)); border-left:4px solid var(--gold-bright);
  border-radius:0 4px 4px 0;
  transition:transform .35s var(--ease-premium), box-shadow .35s ease;
}
.beat-grid .beat-row:last-child{ border-bottom:none; }
.beat-grid .beat-row:hover{ padding-left:22px; transform:translateY(-5px); box-shadow:0 14px 28px rgba(0,0,0,.35); }
.beat-grid .beat-row .lbl{ padding-top:0; margin-bottom:10px; }
section.paper .beat-grid .beat-row{ background:#fff; border-color:var(--gold); box-shadow:0 1px 2px rgba(0,0,0,0.04); }
section.paper .beat-grid .beat-row:hover{ box-shadow:0 14px 28px rgba(34,31,26,.12); }
@media (max-width:860px){ .beat-grid{ grid-template-columns:1fr; } .beat-grid .beat-row:hover{ padding-left:22px; } }

.pub-head{ margin:44px 0 20px; font-size:1.15rem; }
.pub-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; perspective:1000px; }
@media (max-width:860px){ .pub-grid{ grid-template-columns:repeat(2,1fr); } }
.book-spine{
  display:flex; flex-direction:column;
  background:linear-gradient(135deg, var(--ink-3), var(--ink-2)); border-left:4px solid var(--gold-bright);
  border-radius:0 4px 4px 0; padding:20px 22px;
  transition:transform .35s var(--ease-premium), box-shadow .35s ease;
  transform-style:preserve-3d; will-change:transform;
}
/* Base (non-JS) hover keeps a simple, reliable lift. main.js upgrades this
   to a mouse-tracked 3D tilt on pointer-capable devices; both respect
   reduced-motion since the JS bails out entirely in that case. */
.book-spine:hover{ transform:translateY(-5px); box-shadow:0 14px 28px rgba(0,0,0,.35); }
section.paper .book-spine{ background:#fff; border-color:var(--gold); box-shadow:0 1px 2px rgba(0,0,0,0.04); }
section.paper .book-spine:hover{ box-shadow:0 14px 28px rgba(34,31,26,.12); }
/* Fixed-height meta/title bands keep the meta, title, and description of
   every card starting at the same vertical offset across the row, even
   when one card's text wraps to more lines than its neighbours. */
.book-spine h3{ font-size:16px; line-height:1.3; margin-bottom:5px; min-height:calc(16px * 1.3 * 2); }
section.paper .book-spine h3{ color:var(--text-dark); }
.book-spine .meta{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; line-height:1.5; color:var(--muted); margin-bottom:9px; display:block; letter-spacing:.04em; min-height:calc(10.5px * 1.5 * 2); }
section.paper .book-spine .meta{ color:var(--soil); }
.book-spine p{ color:var(--muted); font-size:13.5px; margin:0; }
section.paper .book-spine p{ color:var(--muted-2); }
@media (max-width:640px){ .pub-grid{ grid-template-columns:1fr; } }

/* ---------- VISION: PILLARS (numbered list, not cards) ---------- */
.pillar-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin:40px 0 52px; }
.pillar-item{
  position:relative; padding:28px 26px; border-radius:8px; isolation:isolate; overflow:hidden;
  background:linear-gradient(160deg, var(--ink-3), var(--ink-2)); border:1px solid var(--rule);
  transition:transform .35s var(--ease-premium), border-color .3s ease, box-shadow .35s ease;
}
.pillar-item::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--grad-gold-soft); transition:opacity .35s ease;
}
.pillar-item:hover{ transform:translateY(-6px); border-color:var(--gold-bright); box-shadow:var(--shadow-lift); }
.pillar-item:hover::before{ opacity:1; }
.pillar-item .n{
  font-family:'Fraunces', serif; font-size:1.7rem; color:var(--gold-bright); font-weight:600; margin-bottom:10px;
  display:inline-block; transition:transform .3s ease, color .3s ease;
}
.pillar-item:hover .n{ transform:translateX(4px); color:var(--text-light); }
section.paper .pillar-item{ background:#fff; border-color:rgba(34,31,26,.1); box-shadow:var(--shadow-soft); }
section.paper .pillar-item:hover{ box-shadow:0 20px 40px rgba(34,31,26,.12); }
section.paper .pillar-item:hover .n{ color:var(--soil); }
.pillar-item h2{ font-size:17px; margin-bottom:8px; }
section.paper .pillar-item h2{ color:var(--text-dark); }
.pillar-item p{ font-size:14px; color:var(--muted); margin:0; }
section.paper .pillar-item p{ color:var(--muted-2); }
@media (max-width:640px){ .pillar-list{ grid-template-columns:1fr; } }

/* ---------- POSITIONS (definition list) ---------- */
.positions{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.position-item{
  position:relative; padding:28px 26px; border-radius:8px; isolation:isolate; overflow:hidden;
  background:linear-gradient(160deg, var(--ink-3), var(--ink-2)); border:1px solid var(--rule);
  transition:transform .35s var(--ease-premium), border-color .3s ease, box-shadow .35s ease;
}
.position-item::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--grad-gold-soft); transition:opacity .35s ease;
}
.position-item:hover{ transform:translateY(-6px); border-color:var(--gold-bright); box-shadow:var(--shadow-lift); }
.position-item:hover::before{ opacity:1; }
.position-item dt{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-bright); margin-bottom:10px;
}
.position-item dd{ margin:0; font-size:14.5px; color:var(--muted); }
.position-item dd em{ color:var(--text-light); font-style:normal; font-weight:600; }
section.paper .position-item{ background:#fff; border-color:rgba(34,31,26,.1); box-shadow:var(--shadow-soft); }
section.paper .position-item:hover{ box-shadow:0 20px 40px rgba(34,31,26,.12); }
section.paper .position-item dt{ color:var(--soil); }
section.paper .position-item dd{ color:var(--muted-2); }
section.paper .position-item dd em{ color:var(--text-dark); }
@media (max-width:760px){ .positions{ grid-template-columns:1fr; } }

/* ---------- MOVEMENT (featured) ---------- */
.movement{
  background:linear-gradient(120deg, #2A1B12 0%, #1E2C29 60%);
  border-bottom:1px solid var(--rule); position:relative; overflow:hidden;
}
/* Topographic contour lines — a land-survey motif, on brand for a land
   rights movement, rendered as a faint inline SVG rather than a photo. */
.movement::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cg fill='none' stroke='%23D6A44F' stroke-width='1' opacity='0.14'%3E%3Cpath d='M-40 120 Q200 40 400 130 T860 90'/%3E%3Cpath d='M-40 200 Q220 110 420 220 T860 170'/%3E%3Cpath d='M-40 280 Q240 190 440 290 T860 250'/%3E%3Cpath d='M-40 360 Q180 300 400 370 T860 330'/%3E%3Cpath d='M-40 440 Q260 380 460 450 T860 410'/%3E%3Cpath d='M-40 520 Q200 460 420 530 T860 490'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140% 140%; background-position:60% 40%;
  animation:contourDrift 40s ease-in-out infinite alternate;
}
.movement-inner{ display:grid; grid-template-columns:1.2fr 0.9fr; gap:48px; align-items:center; position:relative; z-index:1; }
.movement h1, .movement h2{ font-size:clamp(2.1rem,3.8vw,3.1rem); letter-spacing:-.015em; max-width:16ch; }
.movement .lede{ color:var(--muted); font-size:16px; margin-bottom:22px; max-width:54ch; }
.vision-box{
  border:1px solid rgba(214,164,79,0.4); border-radius:8px; padding:32px;
  background:rgba(0,0,0,0.18); backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm);
  box-shadow:var(--shadow-lift);
}
.vision-box .big{
  font-family:'Fraunces', serif; font-size:2.5rem; color:var(--gold-bright); font-weight:600; line-height:1;
  display:inline-block; animation:glowPulse 3.4s ease-in-out infinite;
}
.vision-box .cap{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.05em; color:var(--muted); margin-top:10px; }
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.tag-row span{
  font-family:'IBM Plex Mono', monospace; font-size:11px; border:1px solid var(--rule-strong);
  padding:6px 11px; border-radius:16px; color:var(--muted); display:inline-block;
  transition:transform .2s ease, border-color .2s ease, color .2s ease;
}
.tag-row span:hover{ transform:translateY(-3px); border-color:var(--gold-bright); color:var(--gold-bright); }
@media (max-width:880px){ .movement-inner{ grid-template-columns:1fr; } }

/* ---------- EXPLORE (homepage card grid — entry point into every page) ---------- */
.explore-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.explore-card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:32px 28px; border-radius:8px; text-decoration:none; color:inherit;
  background:var(--glass-bg-light); border:1px solid rgba(34,31,26,.08);
  backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm);
  transition:transform .35s var(--ease-premium), border-color .35s ease, box-shadow .35s ease;
}
.explore-card:hover{ transform:translateY(-6px); border-color:var(--soil); box-shadow:0 20px 40px rgba(34,31,26,.12); }
.explore-n{ font-family:'Fraunces', serif; font-size:1.4rem; font-weight:600; color:var(--soil); }
.explore-card h3{ font-size:1.15rem; margin:0; color:var(--text-dark); }
.explore-card p{ color:var(--muted-2); font-size:14px; margin:0; flex:1; }
.explore-arrow{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--muted-2);
  transition:color .25s ease, transform .25s ease;
}
.explore-card:hover .explore-arrow{ color:var(--soil); transform:translateX(4px); }
@media (max-width:980px){ .explore-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .explore-grid{ grid-template-columns:1fr; } }

/* ---------- LINK LISTS (Media hub + Affiliated platforms) ---------- */
.link-list a{
  position:relative; overflow:hidden;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 4px; border-top:1px solid var(--rule); text-decoration:none; color:var(--text-light); font-size:15px;
  transition:color .2s ease, padding-left .3s ease;
}
.link-list a > span:first-child{ min-width:0; overflow-wrap:anywhere; }
.link-list a::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(214,164,79,0.07); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
section.paper .link-list a{ color:var(--text-dark); } /* was inheriting --text-light: pale-on-pale, unreadable on .paper */
section.paper .link-list a::before{ background:rgba(156,78,52,0.06); }
.link-list a:last-child{ border-bottom:1px solid var(--rule); }
.link-list a:hover{ color:var(--gold-bright); padding-left:12px; }
section.paper .link-list a:hover{ color:var(--soil); }
.link-list a:hover::before{ transform:scaleX(1); }
.link-list .desc{ color:var(--muted); font-size:13px; }
section.paper .link-list .desc{ color:var(--muted-2); }
.link-list .arrow{
  font-family:'IBM Plex Mono', monospace; color:var(--muted); font-size:13px; flex-shrink:0;
  display:inline-block; transition:transform .25s ease, color .25s ease;
}
section.paper .link-list .arrow{ color:var(--muted-2); }
.link-list a:hover .arrow{ transform:translateX(5px); color:inherit; }

/* ---------- CONTACT / FOOTER ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.contact-grid > div{ min-width:0; }
.contact-block{
  border-radius:8px; padding:28px 30px;
  background:rgba(255,255,255,.5); backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm);
  border:1px solid rgba(34,31,26,.08);
}
.contact-block .line{ display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--paper-2); font-size:14.5px; }
.contact-block .line:first-child{ border-top:none; }
.contact-block .k{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted-2); width:90px; flex-shrink:0;
  text-transform:uppercase; letter-spacing:.05em; padding-top:2px;
}
.contact-block .line > span:last-child{ min-width:0; overflow-wrap:anywhere; }
.disclaimer-box{
  background:var(--ink-3); border:1px solid var(--rule); border-radius:4px; padding:18px 22px;
  font-size:12.5px; color:var(--muted); margin-top:26px; line-height:1.6;
}

/* ---------- CONTACT FORM ---------- */
.contact-form-block{ margin-top:32px; padding-top:32px; border-top:1px solid var(--paper-2); }
.contact-form-block .eyebrow{ margin-bottom:18px; }
.form-flash{ padding:12px 16px; border-radius:4px; font-size:13.5px; margin-bottom:18px; line-height:1.5; }
.form-flash.success{ background:rgba(120,160,120,.15); border:1px solid rgba(120,160,120,.4); color:#3F6B3F; }
.form-flash.error{ background:rgba(156,78,52,.12); border:1px solid rgba(156,78,52,.4); color:var(--soil); }
.form-row{ margin-bottom:18px; }
.form-row label{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:7px;
}
.form-row .optional{ text-transform:none; letter-spacing:0; opacity:.7; }
.form-row input, .form-row textarea{
  width:100%; background:#fff; border:1px solid rgba(34,31,26,.14); color:var(--text-dark);
  padding:11px 14px; border-radius:4px; font-family:'Public Sans', sans-serif; font-size:14.5px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-row input:focus, .form-row textarea:focus{
  outline:none; border-color:var(--soil); box-shadow:0 0 0 3px rgba(156,78,52,.1);
}
.form-row textarea{ resize:vertical; min-height:120px; font-family:inherit; }
/* Honeypot — off-screen rather than display:none, since some bots
   specifically skip fields hidden that way. */
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }

/* ---------- PREMIUM FOOTER ---------- */
footer{
  background:var(--grad-emerald); padding:80px 0 32px; font-size:13px; color:var(--muted);
  position:relative; z-index:1; overflow:hidden; border-top:1px solid var(--rule);
}
.footer-brand{ position:relative; z-index:1; }
.footer-brand .display-2{ color:var(--text-light); margin-bottom:10px; }
.footer-brand p{ color:var(--muted); font-size:15px; max-width:38ch; margin:0; }
.footer-contact{ display:flex; flex-direction:column; gap:8px; margin-top:20px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; }
.footer-contact a{ color:var(--muted); text-decoration:none; transition:color .2s ease; width:fit-content; }
.footer-contact a:hover{ color:var(--gold-bright); }

.footer-top{
  display:grid; grid-template-columns:1.3fr 2fr; gap:40px; align-items:start;
  margin-bottom:44px; position:relative; z-index:1;
}
.footer-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.footer-col h3{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin-bottom:16px;
}
.footer-links{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.footer-links a{
  position:relative; text-decoration:none; color:var(--muted); transition:color .2s ease; padding:6px 0;
}
.footer-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--gold-bright);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-premium);
}
.footer-links a:hover{ color:var(--gold-bright); }
.footer-links a:hover::after{ transform:scaleX(1); }
/* Not social icons in the usual sense — this site has no social accounts on
   record, so these are the real affiliated platforms instead, shown as
   monogram badges rather than fabricated icons for networks he isn't on. */
.footer-social{ display:flex; gap:14px; flex-wrap:wrap; }
.footer-social a{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--rule-strong); color:var(--muted); text-decoration:none; transition:all .25s ease;
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.02em;
}
.footer-social a:hover{ border-color:var(--gold-bright); color:var(--gold-bright); transform:translateY(-3px); box-shadow:0 8px 18px rgba(214,164,79,.2); }
@media (max-width:880px){ .footer-top{ grid-template-columns:1fr; gap:36px; } }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }
.footer-note{
  border-top:1px solid var(--rule); padding-top:22px; font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  position:relative; z-index:1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* =========================================================
   MOTION SYSTEM
   Progressive enhancement: everything is visible by default.
   The .js class (set by an early inline script) opts elements
   with [data-reveal] into a hidden-until-scrolled-into-view
   state, driven by IntersectionObserver in main.js.
   ========================================================= */

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:300;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow:0 0 8px rgba(214,164,79,.5);
}

html.js [data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1), clip-path 1s cubic-bezier(.16,.8,.24,1);
}
html.js [data-reveal].is-visible{ opacity:1; transform:none; }

html.js [data-reveal="left"]{ transform:translateX(-34px); }
html.js [data-reveal="left"].is-visible{ transform:none; }

html.js [data-reveal="scale"]{ transform:translateY(14px) scale(.95); }
html.js [data-reveal="scale"].is-visible{ transform:none; }

html.js .portrait-frame[data-reveal]{
  opacity:1; transform:none; clip-path:inset(0 100% 0 0);
}
html.js .portrait-frame[data-reveal].is-visible{ clip-path:inset(0 0% 0 0); }

html.js [data-reveal-item]{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,.8,.24,1), transform .6s cubic-bezier(.16,.8,.24,1);
}
html.js [data-reveal-item].is-visible{ opacity:1; transform:none; }

@keyframes driftA{ 0%{ transform:translate(0,0); } 100%{ transform:translate(-26px,30px); } }
@keyframes driftB{ 0%{ transform:translate(0,0); } 100%{ transform:translate(22px,-24px); } }
@keyframes meshDrift{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-2%,2%) scale(1.05); } }
@keyframes contourDrift{ 0%{ background-position:60% 40%; } 100%{ background-position:44% 56%; } }
@keyframes bounceCue{ 0%,100%{ transform:translate(-50%,0); opacity:.55; } 50%{ transform:translate(-50%,7px); opacity:1; } }
@keyframes glowPulse{
  0%,100%{ text-shadow:0 0 0 rgba(214,164,79,0); }
  50%{ text-shadow:0 0 22px rgba(214,164,79,.6); }
}

/* Respect explicit user preference above all else */
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal], html.js [data-reveal-item]{
    opacity:1 !important; transform:none !important; clip-path:inset(0 0% 0 0) !important;
  }
  .hero::before, .hero::after, .hero-mesh, .vision-box .big, .scroll-cue, .movement::before{ animation:none !important; }
  .portrait-frame, .book-spine{ transform:none !important; }
}