/*
Theme Name: Singh Kulbir — Aurora Glass
Theme URI: https://singhkulbir.com
Author: Kulbir Singh Bajwa
Author URI: https://singhkulbir.com
Description: Premium animated glassmorphism personal-brand website for Kulbir Singh Bajwa. Deep charcoal canvas, aurora light (blue / violet / amber) behind clear frosted-white glass cards with selective champagne-gold accents, editorial Fraunces type. Single-page. All styles live in this single file.
Version: 4.1.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Private
License URI: #
Text Domain: singhkulbir
Tags: dark, portfolio, single-page, custom, glassmorphism, animated
*/

/* ============================================================
   SINGH KULBIR — AURORA GLASS — v4.1
   Single-file stylesheet. Everything lives here.

   Design language: deep charcoal canvas (never plain black),
   soft aurora light (blue / violet / amber) drifting behind CLEAR
   frosted-white glass. Premium, clean, animated, personal-brand
   focused. Selective champagne-gold accents only — no heavy gold.

   TABLE OF CONTENTS
   01. Tokens (variables)
   02. Reset & base
   03. Animated background (aurora blobs, dot grid, grain, vignette)
   04. Layout helpers & utilities
   05. Reveal-on-scroll
   06. Buttons (glass — primary / ghost / accent)
   07. Header / navigation
   08. Hero + portrait
   09. Section heads
   10. Glass card system (shared)
   11. About + philosophy
   12. Stats
   13. Projects (cards, watermark, chips)
   14. Writing cards
   15. Contact panel
   16. Footer
   17. Keyframes
   18. Responsive
   19. Reduced motion
   ============================================================ */

/* ============================================================
   01. TOKENS
   ============================================================ */
:root{
  /* Canvas — deep charcoal with a cool blue undertone (not black) */
  --bg:#0a0c13;
  --bg-2:#0e111b;

  /* Aurora glow palette */
  --blue:#5b9bff;
  --blue-deep:#3f6dff;
  --violet:#9b7dff;
  --violet-deep:#7a54ff;
  --amber:#ff9f5c;
  --amber-deep:#ff7d3d;
  --cyan:#63e2ff;

  /* Text on dark */
  --ink:rgba(255,255,255,.96);
  --soft:rgba(255,255,255,.83);
  --muted:rgba(255,255,255,.66);
  --faint:rgba(255,255,255,.46);

  /* Glass surfaces — clearer, frosted white glass */
  --glass:rgba(255,255,255,.10);
  --glass-soft:rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.26);
  --glass-border-2:rgba(255,255,255,.40);
  --glass-hi:rgba(255,255,255,.58);     /* inner top reflection */

  /* Selective champagne-gold accent (used sparingly) */
  --gold:#f2c879;
  --gold-2:#ffe1a6;
  --gold-deep:#cf9a4a;

  /* Lines */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);

  /* Metrics */
  --container:1200px;
  --nav-h:66px;
  --radius:24px;

  /* Type */
  --font-display:"Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:"Hanken Grotesk", "Noto Sans Gurmukhi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-gur:"Noto Sans Gurmukhi", "Hanken Grotesk", system-ui, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   02. RESET & BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 14px);
  -webkit-text-size-adjust:100%;
  color-scheme:dark;
}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.7;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600; line-height:1.08; margin:0; letter-spacing:-.015em;
  font-optical-sizing:auto;
}

::selection{ background:rgba(91,155,255,.34); color:#fff; }

/* Custom scrollbar (webkit) */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#06070c; }
::-webkit-scrollbar-thumb{ background:rgba(120,150,220,.32); border-radius:20px; border:3px solid #06070c; }
::-webkit-scrollbar-thumb:hover{ background:rgba(140,170,255,.55); }

/* Skip link */
.skip-link{
  position:absolute; left:14px; top:-60px; z-index:200;
  background:var(--blue); color:#04122e; padding:10px 16px;
  border-radius:10px; font-weight:600; transition:top .2s ease;
}
.skip-link:focus{ top:14px; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

/* WordPress core helpers */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; padding:0; overflow:hidden;
  position:absolute !important; word-wrap:normal !important;
}
.admin-bar .site-header{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .site-header{ top:46px; } }

/* ============================================================
   03. ANIMATED BACKGROUND — aurora blobs, dot grid, grain, vignette
   ============================================================ */
.bg{
  position:fixed; inset:0; z-index:-3; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #14182a 0%, var(--bg) 46%),
    var(--bg);
}
.blob{
  position:absolute; border-radius:50%;
  mix-blend-mode:screen; will-change:transform; filter:saturate(1.15) blur(8px);
}
.blob.b1{ width:60vw; height:60vw; left:-14vw; top:-16vw;
  background:radial-gradient(circle at center, rgba(91,155,255,.40) 0%, rgba(91,155,255,0) 62%);
  animation:drift1 26s var(--ease) infinite alternate; }
.blob.b2{ width:58vw; height:58vw; right:-16vw; bottom:-22vw;
  background:radial-gradient(circle at center, rgba(155,125,255,.34) 0%, rgba(155,125,255,0) 64%);
  animation:drift2 32s var(--ease) infinite alternate; }
.blob.b3{ width:46vw; height:46vw; right:2vw; top:18vw;
  background:radial-gradient(circle at center, rgba(255,159,92,.24) 0%, rgba(255,159,92,0) 64%);
  animation:drift3 38s var(--ease) infinite alternate; }
.blob.b4{ width:44vw; height:44vw; left:4vw; bottom:0vw;
  background:radial-gradient(circle at center, rgba(99,226,255,.20) 0%, rgba(99,226,255,0) 65%);
  animation:drift4 29s var(--ease) infinite alternate; }
.blob.b5{ width:40vw; height:40vw; left:30vw; top:2vw;
  background:radial-gradient(circle at center, rgba(122,84,255,.22) 0%, rgba(122,84,255,0) 66%);
  animation:drift5 23s var(--ease) infinite alternate; }

/* Subtle dot grid (premium texture), fades toward the edges */
.bg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.4px);
  background-size:26px 26px;
  opacity:.04;
  -webkit-mask-image:radial-gradient(125% 100% at 50% 0%, #000 28%, transparent 78%);
  mask-image:radial-gradient(125% 100% at 50% 0%, #000 28%, transparent 78%);
}
/* Vignette so content pops and edges don't wash out */
.bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(125% 125% at 50% 40%, transparent 42%, rgba(4,5,10,.55) 80%, rgba(3,4,8,.82) 100%);
}

/* Film grain / noise */
.grain{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  opacity:.045; mix-blend-mode:soft-light;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll progress bar */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:120;
  background:linear-gradient(90deg, var(--blue), var(--violet), var(--amber));
  box-shadow:0 0 12px rgba(120,150,255,.7);
}

/* ============================================================
   04. LAYOUT HELPERS & UTILITIES
   ============================================================ */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ position:relative; padding-block:clamp(58px,8vw,104px); }
.gur{ font-family:var(--font-gur); }

/* Animated aurora gradient text */
.grad-text{
  background:linear-gradient(100deg,
    var(--blue) 0%, var(--violet) 34%, var(--amber) 70%, var(--blue) 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:auroraShift 7s linear infinite;
  -webkit-font-smoothing:antialiased;
}

/* Selective champagne-gold gradient text — hero surname & key emphasis only */
.grad-gold{
  background:linear-gradient(100deg,
    var(--gold-deep) 0%, var(--gold) 32%, var(--gold-2) 52%, var(--gold) 72%, var(--gold-deep) 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:auroraShift 8s linear infinite;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   05. REVEAL-ON-SCROLL
   ============================================================ */
.reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
/* Hidden state applies ONLY when JS is active (html.js). If JS is disabled or
   fails to load, nothing is ever hidden — the page stays fully readable. */
.js .reveal{ opacity:0; transform:translateY(26px) scale(.985); }
.js .reveal.in{ opacity:1; transform:translateY(0) scale(1); }

/* ============================================================
   06. BUTTONS — GLASS (primary / ghost / accent)
   Premium app-style glass: rounded, inner shadow, border shine,
   soft glow, hover lift. The fill + glow live on ::before so the
   label is never blurred. Top shine line lives on ::after.
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  font-family:var(--font-body); font-weight:600; font-size:.92rem; letter-spacing:.012em;
  padding:.82em 1.55em; border-radius:999px; cursor:pointer; border:none; outline:none;
  position:relative; z-index:0; isolation:isolate;
  color:rgba(255,255,255,.96);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), color .3s ease;
  will-change:transform; -webkit-tap-highlight-color:transparent;
  transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
/* Glass fill + glow layer (never blurs the label) */
.btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  transition:all .3s ease;
}
/* Top shine line */
.btn::after{
  content:""; position:absolute; top:0; left:16%; right:16%; height:1px; z-index:1;
  border-radius:999px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
}
.btn span, .btn svg, .btn > *{ position:relative; z-index:2; }
.btn svg{ transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translate(3px,-3px); }
.btn:active{ transform:translateY(-1px) scale(.99); }
.btn-lg{ font-size:1rem; padding:.92em 1.75em; }

/* Primary — blue → violet glass */
.btn-primary{ color:#fff; text-shadow:0 1px 2px rgba(6,10,30,.45); }
.btn-primary::before{
  background:linear-gradient(150deg, rgba(91,155,255,.60) 0%, rgba(124,84,255,.55) 100%);
  border:1px solid rgba(160,185,255,.55);
  box-shadow:
    0 0 18px rgba(95,140,255,.30),
    0 10px 30px -10px rgba(80,110,255,.55),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.25);
}
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); }
.btn-primary:hover::before{
  border-color:rgba(190,205,255,.85);
  box-shadow:
    0 0 30px rgba(110,150,255,.55),
    0 16px 40px -12px rgba(90,120,255,.7),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.2);
}

/* Ghost — frosted neutral glass */
.btn-ghost{ color:rgba(255,255,255,.9); }
.btn-ghost::before{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 10px 26px -12px rgba(0,0,0,.6);
}
.btn-ghost:hover{ transform:translateY(-3px) scale(1.02); color:#fff; }
.btn-ghost:hover::before{
  border-color:rgba(150,180,255,.5);
  background:rgba(255,255,255,.09);
  box-shadow:
    0 0 22px rgba(95,140,255,.22),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.12);
}

/* Accent — warm amber glass */
.btn-accent{ color:#fff; text-shadow:0 1px 2px rgba(40,16,4,.4); }
.btn-accent::before{
  background:linear-gradient(150deg, rgba(255,159,92,.62) 0%, rgba(255,110,60,.55) 100%);
  border:1px solid rgba(255,180,120,.55);
  box-shadow:
    0 0 18px rgba(255,140,70,.30),
    0 10px 30px -10px rgba(255,120,50,.5),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.25);
}
.btn-accent:hover{ transform:translateY(-3px) scale(1.02); }
.btn-accent:hover::before{
  border-color:rgba(255,205,160,.85);
  box-shadow:
    0 0 30px rgba(255,150,80,.55),
    0 16px 40px -12px rgba(255,120,50,.6),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.2);
}

/* Soft always-on glow on the main call-to-action only (few elements) */
.btn-primary.is-cta{ animation:ctaGlow 4.5s ease-in-out infinite; }

/* Nav CTA */
.nav-cta{ padding:.58em 1.2em; font-size:.88rem; }
.nav-cta:hover{ transform:translateY(-2px); }

/* ============================================================
   07. HEADER / NAVIGATION
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}
.site-header.scrolled{
  background:rgba(10,12,20,.55);
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line);
}
/* When the mobile menu is open, drop the header backdrop-filter so it does not
   become the containing block for the fixed overlay (which would clip it). */
body.nav-open .site-header{
  background:transparent !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom-color:transparent;
}
.header-inner{ display:flex; align-items:center; gap:18px; }
.site-nav{ display:flex; align-items:center; gap:clamp(8px,1.5vw,20px); }
.site-header .brand{ margin-right:auto; position:relative; z-index:95; }

.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:600; }
.brand-mark{
  font-family:var(--font-display); font-style:italic; font-size:1.28rem; letter-spacing:.01em;
  width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  color:#fff;
  background:linear-gradient(150deg, rgba(91,155,255,.32), rgba(124,84,255,.30));
  border:1px solid rgba(160,185,255,.40);
  box-shadow:
    0 0 14px rgba(95,140,255,.25),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.3);
}
.brand-name{ font-family:var(--font-body); font-size:.97rem; letter-spacing:.01em; color:var(--ink); }
.brand-name em{ font-style:normal; color:var(--muted); }

.nav-list{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.nav-list a{
  position:relative; display:inline-block; padding:9px 14px; font-size:.92rem;
  color:var(--soft); border-radius:9px; transition:color .25s ease;
}
.nav-list a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:1.5px;
  transform:scaleX(0); transform-origin:left; border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--violet));
  transition:transform .3s var(--ease);
}
.nav-list a:hover{ color:#fff; }
.nav-list a:hover::after, .nav-list a.active::after{ transform:scaleX(1); }
.nav-list a.active{ color:#fff; }

.nav-side{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:12px;
  background:rgba(255,255,255,.05); cursor:pointer; padding:0; position:relative; z-index:95;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
body.nav-open .nav-toggle{ background:rgba(255,255,255,.08); }
.nav-toggle span{
  position:absolute; left:11px; right:11px; height:1.8px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s ease;
}
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:27px; }
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
   08. HERO + PORTRAIT
   ============================================================ */
.hero{
  position:relative; min-height:min(88svh,760px); display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 8px); padding-bottom:clamp(36px,5vh,64px);
}
.hero-container{
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center;
  gap:clamp(28px,4vw,64px); width:100%;
}
.hero-inner{ max-width:100%; padding-block:clamp(6px,2vh,24px); }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 20px;
  font-size:.78rem; letter-spacing:.20em; text-transform:uppercase; color:rgba(180,200,255,.9);
  padding:8px 16px; border:1px solid rgba(140,170,255,.22); border-radius:999px;
  background:rgba(120,150,255,.06); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.ping{
  width:8px; height:8px; border-radius:50%; background:var(--cyan);
  position:relative; box-shadow:0 0 0 0 rgba(99,226,255,.6); animation:ping 2.4s ease-in-out infinite;
}
.hero h1{
  font-size:clamp(2.5rem,5vw,4.4rem); font-weight:600; letter-spacing:-.025em;
  margin-bottom:.2em; line-height:1.03;
}
.hero h1 .ln{ display:block; }
.hero-role{
  font-family:var(--font-body); font-size:clamp(1.02rem,1.7vw,1.3rem);
  font-weight:500; color:var(--ink); margin:0 0 1.1rem;
}
.hero-role b{ font-weight:600; }
.hero-quote{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.08rem,2vw,1.45rem); line-height:1.45; color:rgba(255,255,255,.84);
  max-width:34ch; padding-left:22px; margin:0 0 1.9rem;
  border-left:2px solid transparent;
  border-image:linear-gradient(180deg,var(--blue),var(--violet)) 1;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* Portrait — premium glass card with animated aurora behind it */
.hero-portrait{ position:relative; display:flex; justify-content:center; align-items:center; }
.hero-portrait::before{
  content:""; position:absolute; inset:-8%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 42% at 28% 22%, rgba(91,155,255,.55), transparent 70%),
    radial-gradient(44% 44% at 78% 64%, rgba(155,125,255,.5), transparent 72%),
    radial-gradient(40% 40% at 58% 96%, rgba(255,159,92,.42), transparent 70%);
  filter:blur(48px); opacity:.8;
  animation:portraitAura 11s ease-in-out infinite;
}
.portrait-frame{
  position:relative; max-width:352px; width:100%; aspect-ratio:4 / 5; border-radius:24px; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 24px 56px -24px rgba(0,0,0,.82),
    0 0 44px -14px rgba(95,140,255,.30);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:float 7s ease-in-out infinite;
}
.portrait-frame:hover{ animation-play-state:paused; }
.portrait-img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:50% 20%;
  filter:contrast(1.05) brightness(1.05);
  transition:transform .8s var(--ease), filter .6s ease;
}
.portrait-frame:hover .portrait-img{ transform:scale(1.03); filter:contrast(1.08) brightness(1.08); }
.portrait-caption{
  position:absolute; bottom:0; left:0; right:0; padding:16px 18px 14px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(200,215,255,.85);
  background:linear-gradient(0deg, rgba(6,8,16,.88), transparent);
}
.portrait-glow{
  position:absolute; inset:0; border-radius:24px; pointer-events:none; mix-blend-mode:soft-light;
  background:linear-gradient(160deg, rgba(91,155,255,.18) 0%, transparent 45%, rgba(255,159,92,.12) 100%);
}

.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--faint);
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
}
.scroll-cue .line{
  width:1px; height:46px; position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(120,150,255,.8), transparent);
}
.scroll-cue .line::after{
  content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:linear-gradient(180deg,transparent,var(--blue)); animation:cue 2.2s ease-in-out infinite;
}

/* ============================================================
   09. SECTION HEADS
   ============================================================ */
.section-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(30px,4vw,52px); }
.section-index{
  font-family:var(--font-body); font-size:.8rem; font-weight:700; letter-spacing:.18em;
  color:var(--blue); padding-top:.3em;
}
.section-head h2{ font-size:clamp(2rem,5vw,3.4rem); font-weight:600; }
.section-lede{ max-width:62ch; color:var(--soft); font-size:clamp(1.02rem,1.5vw,1.18rem); margin:0 0 clamp(34px,4vw,56px); }

/* ============================================================
   10. GLASS CARD SYSTEM (shared)
   Depth + outer glow live on the ELEMENT (never clipped).
   Frosted surface + border + bevel live on ::before (clipped).
   Top highlight line lives on ::after.
   ============================================================ */
.glass, .about-text, .philosophy, .pcard, .wcard, .contact-panel{
  position:relative; isolation:isolate; overflow:hidden; background:transparent; z-index:0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 18px 50px -22px rgba(0,0,0,.7),
    0 40px 80px -40px rgba(0,0,0,.55);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.glass::before, .about-text::before, .philosophy::before,
.pcard::before, .wcard::before, .contact-panel::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(150deg,
    rgba(255,255,255,.17) 0%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.15) 100%);
  backdrop-filter:blur(34px) saturate(.82) brightness(1.13); -webkit-backdrop-filter:blur(34px) saturate(.82) brightness(1.13);
  border:1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 1px 0 0 rgba(255,255,255,.12),
    inset -1px 0 0 rgba(255,255,255,.08);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.glass::after, .about-text::after, .philosophy::after,
.pcard::after, .wcard::after, .contact-panel::after{
  content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
  pointer-events:none; z-index:2; border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  opacity:.85;
}

/* Ambient color orb inside cards — revealed/intensified on hover */
.card-ambient{
  position:absolute; width:65%; height:65%; border-radius:50%;
  pointer-events:none; z-index:-1; opacity:0; transition:opacity .6s ease;
  filter:blur(10px);
}
.pcard:hover .card-ambient, .wcard:hover .card-ambient{ opacity:1; }

/* ============================================================
   11. ABOUT + PHILOSOPHY
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(22px,3vw,40px); align-items:stretch; }
.about-text{ border-radius:24px; padding:clamp(28px,3.6vw,48px); }
.about-lead{ font-family:var(--font-display); font-size:clamp(1.35rem,2.4vw,1.85rem); line-height:1.4; color:var(--ink); margin:0 0 1.15rem; font-weight:500; letter-spacing:-.01em; }
.about-text p{ color:var(--soft); margin:0 0 1.05rem; }
.about-text p:last-child{ margin-bottom:0; }

.philosophy{ border-radius:24px; padding:clamp(28px,3.4vw,44px); display:flex; flex-direction:column; justify-content:center; }
.philosophy::before{
  background:linear-gradient(150deg, rgba(255,255,255,.17) 0%, rgba(150,130,255,.12) 52%, rgba(255,255,255,.14) 100%);
}
.philosophy blockquote{ margin:0; position:relative; }
.philosophy p{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.22rem,2.1vw,1.6rem); line-height:1.46; color:var(--ink); margin:0 0 1rem; font-weight:400; }
.philosophy cite{ font-family:var(--font-body); font-style:normal; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--violet); font-weight:600; }

/* ============================================================
   12. STATS — glass strip
   ============================================================ */
.stats{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden;
  border-radius:22px; margin-top:clamp(30px,4vw,52px); isolation:isolate; z-index:0;
}
.stats::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.105));
  backdrop-filter:blur(32px) saturate(.82) brightness(1.13); -webkit-backdrop-filter:blur(32px) saturate(.82) brightness(1.13);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(255,255,255,.06);
}
.stat{
  position:relative; padding:clamp(20px,3vw,32px) clamp(16px,2.5vw,28px);
  border-right:1px solid rgba(255,255,255,.12);
  transition:background .4s ease;
}
.stat:last-child{ border-right:none; }
.stat:hover{ background:rgba(255,255,255,.06); }
.stat-num{
  display:block; font-family:var(--font-display); font-size:clamp(1.9rem,3.6vw,2.9rem);
  font-weight:600; color:#fff; margin-bottom:6px; letter-spacing:-.02em;
  text-shadow:0 0 24px rgba(120,150,255,.35);
}
.stat.accent .stat-num{ color:var(--gold); text-shadow:0 0 26px rgba(242,200,121,.45); }
.stat.lang .stat-num{ font-size:clamp(1.3rem,2.4vw,1.95rem); }
.stat-label{ display:block; margin-top:.4em; font-size:.82rem; color:var(--muted); letter-spacing:.01em; }

/* ============================================================
   13. PROJECTS
   ============================================================ */
.projects-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,32px); perspective:1400px; }
.pcard{
  display:flex; flex-direction:column; padding:clamp(26px,3vw,42px); border-radius:28px;
  transform-style:preserve-3d;
}

/* Per-card ambient orbs (color identity) */
.pcard-archive .card-ambient{
  background:radial-gradient(circle, rgba(255,159,92,.30) 0%, transparent 70%);
  top:-22%; right:-12%; animation:ambientFloat 9s ease-in-out infinite;
}
.pcard-news .card-ambient{
  background:radial-gradient(circle, rgba(91,155,255,.30) 0%, transparent 70%);
  top:-22%; left:-12%; animation:ambientFloat 11s ease-in-out infinite reverse;
}
.wcard .card-ambient{
  background:radial-gradient(circle, rgba(155,125,255,.26) 0%, transparent 70%);
  bottom:-22%; left:8%; animation:ambientFloat 8s ease-in-out infinite;
}

/* Card hover — lift + glow + brighter glass edge */
.pcard:hover, .wcard:hover{
  transform:translateY(-10px);
  box-shadow:
    0 26px 60px -24px rgba(0,0,0,.7),
    0 30px 80px -30px rgba(95,140,255,.30);
}
.pcard:hover::before, .wcard:hover::before{
  border-color:var(--glass-border-2);
  background:linear-gradient(150deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.15) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.2),
    inset 1px 0 0 rgba(255,255,255,.16),
    inset -1px 0 0 rgba(255,255,255,.06);
}
.pcard-archive:hover{ box-shadow:0 26px 60px -24px rgba(0,0,0,.7), 0 30px 80px -30px rgba(255,150,80,.28); }

/* Watermark plate — glass, tinted per platform */
.pcard-watermark{
  position:relative; isolation:isolate; overflow:hidden;
  height:132px; margin:-4px 0 24px; border-radius:18px;
  display:flex; flex-direction:column; justify-content:center; padding:18px 22px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.32), 0 8px 24px -10px rgba(0,0,0,.45);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.pcard-archive .pcard-watermark{
  background:linear-gradient(150deg, rgba(255,170,105,.24) 0%, rgba(255,255,255,.07) 60%, rgba(255,140,80,.16) 100%);
}
.pcard-news .pcard-watermark{
  background:linear-gradient(150deg, rgba(110,165,255,.24) 0%, rgba(255,255,255,.07) 60%, rgba(140,105,255,.16) 100%);
}
.wm-live{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-gur); font-size:.95rem; color:rgba(255,255,255,.9); }
.wm-live i{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 0 rgba(99,226,255,.6); animation:ping 1.8s ease-in-out infinite; }
.pcard-archive .wm-live i{ background:var(--amber); box-shadow:0 0 0 0 rgba(255,150,80,.6); }
.wm-news-title{ font-family:var(--font-display); font-weight:600; font-size:2.1rem; line-height:1; color:#fff; letter-spacing:-.02em; }
.wm-sub{ font-size:.78rem; color:var(--muted); margin-top:6px; }

.pcard-meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.pcard-kind{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.pcard-archive .pcard-kind{ color:var(--amber); }
.pcard-news .pcard-kind{ color:var(--blue); }
.pcard-year{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.pcard h3{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:.5rem; letter-spacing:-.02em; }
.pcard h3 .tld{ color:rgba(255,255,255,.4); font-weight:400; }
.pcard-desc{ color:var(--soft); margin:0 0 1.3rem; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 1.5rem; padding:0; }
.chips li{
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.88);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:5px 14px; border-radius:999px; font-size:.78rem; letter-spacing:.02em; transition:all .25s ease;
}
.chips li:hover{ background:rgba(120,150,255,.14); border-color:rgba(140,170,255,.4); color:#fff; }
.pcard .btn{ margin-top:auto; align-self:flex-start; }

/* ============================================================
   14. WRITING CARDS
   ============================================================ */
.writing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px); perspective:1400px; }
.wcard{
  padding:clamp(24px,2.8vw,34px); border-radius:22px; display:flex; flex-direction:column;
  min-height:250px; transform-style:preserve-3d;
}
.w-icon{
  width:52px; height:52px; display:grid; place-items:center; border-radius:15px; margin-bottom:18px;
  color:#fff;
}
.w-icon svg{ width:24px; height:24px; }
.wcard:nth-child(1) .w-icon{ background:linear-gradient(150deg, rgba(91,155,255,.32), rgba(91,155,255,.12)); border:1px solid rgba(140,170,255,.4); box-shadow:0 0 14px rgba(95,140,255,.22), inset 0 1px 0 rgba(255,255,255,.25); }
.wcard:nth-child(2) .w-icon{ background:linear-gradient(150deg, rgba(155,125,255,.32), rgba(155,125,255,.12)); border:1px solid rgba(170,150,255,.4); box-shadow:0 0 14px rgba(140,110,255,.22), inset 0 1px 0 rgba(255,255,255,.25); }
.wcard:nth-child(3) .w-icon{ background:linear-gradient(150deg, rgba(255,159,92,.32), rgba(255,159,92,.12)); border:1px solid rgba(255,180,120,.4); box-shadow:0 0 14px rgba(255,150,80,.22), inset 0 1px 0 rgba(255,255,255,.25); }
.wcard h3{ font-size:1.42rem; margin-bottom:.55rem; letter-spacing:-.01em; }
.wcard p{ color:var(--soft); font-size:.97rem; margin:0 0 1.2rem; }
.w-status{
  display:inline-flex; align-items:center; margin-top:auto; align-self:flex-start;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:rgba(200,215,255,.9);
  padding:6px 16px; border-radius:999px;
  background:rgba(120,150,255,.08); border:1px solid rgba(140,170,255,.24);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.w-links{ margin-top:auto; display:flex; flex-direction:column; gap:9px; }
.w-links a{ display:inline-flex; align-items:center; gap:8px; font-size:.92rem; color:var(--soft); transition:color .25s ease, gap .25s ease; }
.w-links a::before{ content:"↗"; color:var(--blue); }
.w-links a:hover{ color:#fff; gap:12px; }

/* ============================================================
   15. CONTACT PANEL
   ============================================================ */
.section.contact{ padding-block:clamp(34px,4.5vw,64px); }
.contact-panel{
  text-align:center; padding:clamp(18px,2.4vw,30px) clamp(22px,4.5vw,52px); border-radius:26px;
}
.contact-panel::before{
  background:linear-gradient(150deg, rgba(255,255,255,.16) 0%, rgba(120,170,255,.11) 45%, rgba(255,200,150,.11) 100%);
}
.contact-kicker{ position:relative; font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); margin:0 0 12px; font-weight:700; }
.contact-panel h2{ position:relative; font-size:clamp(1.85rem,4.4vw,3rem); font-weight:600; margin-bottom:.6rem; letter-spacing:-.02em; }
.contact-lede{ position:relative; max-width:52ch; margin:0 auto 1.1rem; color:var(--soft); font-size:clamp(1rem,1.5vw,1.12rem); }
.contact-actions{ position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; }
.contact-email{
  position:relative; display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-display);
  font-size:clamp(1.35rem,4vw,2.4rem); font-weight:500; color:var(--ink); word-break:break-word;
  transition:color .3s ease, transform .3s ease; letter-spacing:-.01em;
}
.contact-email:hover{ color:var(--blue); transform:translateY(-2px); }
.contact-socials{ position:relative; display:flex; justify-content:center; gap:12px; margin-top:14px; }
.contact-socials a{
  width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:var(--soft);
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .3s var(--ease), color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.contact-socials a:hover{ color:#fff; border-color:rgba(140,170,255,.6); transform:translateY(-4px); box-shadow:0 14px 30px -14px rgba(95,140,255,.8); }
.contact-location{ position:relative; margin-top:12px; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }

/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer{
  position:relative; padding-block:clamp(22px,2.5vw,30px) 16px;
  border-top:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  backdrop-filter:blur(22px) saturate(.9) brightness(1.05); -webkit-backdrop-filter:blur(22px) saturate(.9) brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(14px,2vw,24px) clamp(22px,2.8vw,36px); }
.footer-brand .brand{ margin-bottom:10px; }
.footer-line{ color:var(--muted); font-size:.9rem; line-height:1.45; max-width:42ch; margin:0 0 10px; }
.footer-socials{ display:flex; gap:8px; }
.footer-socials a{
  width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--soft);
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.footer-socials a:hover{ color:#fff; border-color:rgba(140,170,255,.5); transform:translateY(-2px); }
.footer-col h4{ font-family:var(--font-body); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:0 0 9px; font-weight:700; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; line-height:1.3; }
.footer-col a{ color:var(--soft); font-size:.92rem; transition:color .25s ease; }
.footer-col a:hover{ color:var(--blue); }
.footer-muted{ color:var(--faint); font-size:.95rem; }
.footer-divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); margin:clamp(16px,1.8vw,20px) 0 11px; }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:space-between; color:var(--faint); font-size:.84rem; line-height:1.4; }
.back-top{ color:var(--soft); transition:color .25s ease; }
.back-top:hover{ color:var(--blue); }

/* ============================================================
   17. KEYFRAMES
   ============================================================ */
@keyframes drift1{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(14vw,10vw,0) scale(1.18); } }
@keyframes drift2{ from{ transform:translate3d(0,0,0) scale(1.05); } to{ transform:translate3d(-12vw,-8vw,0) scale(.85); } }
@keyframes drift3{ from{ transform:translate3d(0,0,0) scale(.95); } to{ transform:translate3d(-14vw,12vw,0) scale(1.2); } }
@keyframes drift4{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(12vw,-12vw,0) scale(1.25); } }
@keyframes drift5{ from{ transform:translate3d(0,0,0) scale(1.1); } to{ transform:translate3d(-12vw,12vw,0) scale(.9); } }

@keyframes auroraShift{ 0%{ background-position:0% center; } 100%{ background-position:200% center; } }

@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(99,226,255,.55); }
  70%{ box-shadow:0 0 0 9px rgba(99,226,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(99,226,255,0); }
}

@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

@keyframes cue{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(300%); } }

@keyframes portraitAura{
  0%,100%{ transform:scale(1) rotate(0deg); opacity:.7; }
  50%{ transform:scale(1.07) rotate(4deg); opacity:.95; }
}

@keyframes ambientFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(8%,6%) scale(1.08); }
  66%{ transform:translate(-6%,4%) scale(.96); }
}

@keyframes ctaGlow{
  0%,100%{ box-shadow:0 0 18px rgba(95,140,255,.28), 0 10px 30px -10px rgba(80,110,255,.5), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.25); }
  50%{ box-shadow:0 0 30px rgba(110,150,255,.5), 0 12px 36px -10px rgba(90,120,255,.6), inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(0,0,0,.22); }
}

/* ============================================================
   18. RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .about-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .hero-container{ grid-template-columns:1fr; }
  .hero{ padding-top:calc(var(--nav-h) + 16px); min-height:auto; }
  /* Portrait sits BELOW the buttons on mobile (natural DOM order).
     The desktop frame derives its height from aspect-ratio:4/5, but older
     mobile browsers (iOS Safari < 15, legacy Android WebViews) ignore
     aspect-ratio and collapse the frame to zero height — hiding the image.
     So on mobile we drop aspect-ratio and use a padding-ratio box (works
     everywhere) with the image absolutely filling it. */
  .hero-portrait{ order:0; width:80%; max-width:290px; margin:18px auto 0; }
  .hero-portrait::before{ inset:-10%; filter:blur(38px); }
  .portrait-frame{ aspect-ratio:auto; width:100%; max-width:none; height:0; padding-bottom:115%; }
  .portrait-img{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; }
  .scroll-cue{ display:none; }
  .hero-inner{ text-align:center; }
  .hero-actions{ justify-content:center; }
  .hero-eyebrow{ justify-content:center; }
  .hero-quote{ border-left:none; border-top:2px solid; border-image:linear-gradient(90deg,var(--blue),var(--violet)) 1; padding-left:0; padding-top:16px; text-align:left; margin-inline:auto; }
  .projects-grid{ grid-template-columns:1fr; }
  .writing-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(2n){ border-right:none; }
  .stat:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.08); }

  /* Mobile menu overlay */
  .site-nav{
    position:fixed; inset:0; z-index:90; display:flex !important; flex-direction:column;
    justify-content:center; gap:8px; padding:96px clamp(24px,8vw,48px) 48px;
    background:rgba(8,10,18,.9); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .35s ease, transform .35s var(--ease), visibility .35s;
  }
  body.nav-open .site-nav{ opacity:1; visibility:visible; transform:none; }
  .site-nav .nav-list{ flex-direction:column; align-items:flex-start; gap:6px; width:100%; }
  .site-nav .nav-list a{ font-size:1.65rem; font-family:var(--font-display); padding:12px 4px; color:var(--ink); width:100%; }
  .site-nav .nav-list a:hover{ color:var(--blue); }
  .site-nav .nav-list a::after{ left:4px; right:auto; width:42px; bottom:8px; }
  .site-nav .nav-cta{ display:inline-flex !important; margin-top:28px; align-self:flex-start; padding:.85em 1.6em; font-size:1rem; }
}

@media (max-width:520px){
  :root{ --nav-h:60px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .hero-quote{ max-width:none; }
  .contact-socials a{ width:48px; height:48px; }

  /* Compact footer on phones — keep the 3 link groups in a tight 2-column grid
     (a single stacked column made the footer nearly twice as tall) and trim
     padding/spacing heavily. */
  .site-footer{ padding-block:18px 14px; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:14px 16px; }
  .footer-line{ font-size:.88rem; margin-bottom:10px; }
  .footer-divider{ margin:13px 0 11px; }
}

/* ============================================================
   19. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ scroll-behavior:auto !important; }
  .blob{ animation:none !important; }
  .grad-text, .grad-gold{ animation:none !important; }
  .btn-primary.is-cta{ animation:none !important; }
  .portrait-frame, .hero-portrait::before{ animation:none !important; }
  .ping, .wm-live i, .scroll-cue .line::after{ animation:none !important; }
  .card-ambient{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}