/*
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: 5.2.0
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 — NEUTRAL frosted glass (approved prototype recipe).
     A quiet white veil over a faint dark base; every colour seen in a
     card is the page background showing through, never the surface. */
  --glass:rgba(255,255,255,.072);
  --glass-soft:rgba(255,255,255,.034);
  --glass-dark:rgba(8,10,18,.16);       /* darkening base under the veil */
  --glass-border:rgba(255,255,255,.30);
  --glass-border-2:rgba(255,255,255,.40);
  --glass-hi:rgba(255,255,255,.34);     /* inner top reflection */
  --glass-blur:24px;
  --glass-sat:1.05;

  /* 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;
  --r-lg:28px;
  --r-md:22px;
  --r-sm:16px;

  /* Motion */
  --t-fast:.28s;
  --t-med:.45s;

  /* 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,.46) 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,.40) 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,.30) 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,.24) 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,.26) 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 46%, rgba(4,5,10,.48) 80%, rgba(3,4,8,.74) 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 — TRANSPARENT GLASS CAPSULES (approved prototype)
   The SHELL is the feature: a frosted, see-through capsule with a
   single thin reflective border, glossy top band, faint bottom
   caustic edge and a natural shadow. Colour exists only as a soft
   LIGHT inside the glass — never an opaque fill or outer glow.
   · element  = frosted shell (backdrop blur, border, rims, shadow)
   · ::before = internal coloured light, bottom-weighted, translucent
   · ::after  = specular layer: top gloss + moving light-sweep band
   ============================================================ */
.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:.78em 1.55em; min-height:44px; border-radius:999px; cursor:pointer; outline:none;
  position:relative; z-index:0; isolation:isolate;
  color:rgba(255,255,255,.97);
  text-shadow:0 1px 2px rgba(4,6,14,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05) 48%, rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.36);
  backdrop-filter:blur(9px) saturate(1.1); -webkit-backdrop-filter:blur(9px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -2px 4px -1px rgba(255,255,255,.28),
    inset 0 14px 20px -12px rgba(255,255,255,.20),
    inset 0 -10px 16px -12px rgba(0,10,30,.22),
    0 14px 30px -14px rgba(0,0,0,.6);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             border-color var(--t-fast) ease, color var(--t-fast) ease;
  will-change:transform; -webkit-tap-highlight-color:transparent;
}
/* Internal coloured light — translucent, the page stays visible behind */
.btn::before{
  content:""; position:absolute; inset:2px; border-radius:999px; z-index:-1;
  opacity:.75; transition:opacity var(--t-fast) ease;
}
/* Specular layer: [1] moving sweep band (parked off-canvas) · [2] top gloss */
.btn::after{
  content:""; position:absolute; inset:1px; z-index:1;
  border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(112deg, transparent 24%, rgba(255,255,255,.32) 47%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.32) 53%, transparent 76%) no-repeat,
    linear-gradient(184deg, rgba(255,255,255,.40), rgba(255,255,255,.13) 34%, transparent 52%);
  background-size:44% 100%, 100% 100%;
  background-position:-85% 0, 0 0;
}
.btn span, .btn svg, .btn > *{ position:relative; z-index:2; }
.btn svg{ transition:transform var(--t-fast) var(--ease); }
.btn:hover svg{ transform:translate(3px,-3px); }
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -2px 4px -1px rgba(255,255,255,.32),
    inset 0 14px 20px -12px rgba(255,255,255,.26),
    inset 0 -10px 16px -12px rgba(0,10,30,.2),
    0 18px 36px -16px rgba(0,0,0,.65);
}
.btn:hover::before{ opacity:1; }
.btn:active{ transform:translateY(0) scale(.97); transition-duration:.1s; }
.btn:active::before{ opacity:.55; }
.btn:focus-visible{
  outline:2px solid rgba(210,225,255,.95); outline-offset:3px;
}
.btn-lg{ font-size:1rem; padding:.9em 1.75em; }

/* Light sweep — once on hover; an occasional idle pass on the main CTAs */
.btn-primary.is-cta::after{ animation:btnSweepIdle 7s var(--ease) infinite; }
.btn:hover::after{ animation:btnSweep .95s var(--ease); }

/* Primary — cool blue-violet light inside the glass */
.btn-primary{ border-color:rgba(215,225,255,.34); }
.btn-primary::before{
  background:radial-gradient(120% 175% at 50% 128%,
    rgba(96,152,255,.50) 0%, rgba(126,92,255,.27) 44%, rgba(126,92,255,.08) 62%, transparent 76%);
}
.btn-primary:hover{ border-color:rgba(225,233,255,.5); }

/* Ghost — pure clear glass, shell only */
.btn-ghost{ color:rgba(255,255,255,.94); border-color:rgba(255,255,255,.32); }
.btn-ghost::before{ background:rgba(255,255,255,.05); opacity:1; }
.btn-ghost:hover{ color:#fff; }

/* Accent — warm amber light inside the glass (PunjabFile) */
.btn-accent{ border-color:rgba(255,228,205,.32); }
.btn-accent::before{
  background:radial-gradient(120% 175% at 50% 128%,
    rgba(255,162,96,.40) 0%, rgba(255,124,62,.20) 44%, rgba(255,124,62,.06) 62%, transparent 76%);
}
.btn-accent:hover{ border-color:rgba(255,235,215,.48); }

/* Nav CTA */
.nav-cta{ padding:.5em 1.2em; font-size:.88rem; min-height:42px; }
.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;
}
/* Floating glass pill. It is drawn by a PSEUDO-element of .header-inner:
   backdrop-filter on the element itself would become the containing block
   for the fixed mobile overlay (#siteNav) and clip it — on the pseudo it
   cannot. Fades in once the page scrolls. */
.header-inner{ display:flex; align-items:center; gap:18px; position:relative; isolation:isolate; }
.header-inner::before{
  content:""; position:absolute; inset:7px 6px; z-index:-1; border-radius:999px;
  background:
    linear-gradient(180deg, var(--glass), var(--glass-soft)),
    var(--glass-dark);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid rgba(255,255,255,.26);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 14px 34px -20px rgba(0,0,0,.6);
  opacity:0; transition:opacity .4s ease;
  pointer-events:none;
}
.site-header.scrolled .header-inner::before{ opacity:1; }
/* Keep the header inert while the mobile menu is open (belt & braces for the
   containing-block bug, and the pill must not float above the overlay). */
body.nav-open .site-header{
  background:transparent !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
body.nav-open .header-inner::before{ opacity:0; }
.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(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 6px 16px -8px rgba(0,0,0,.5);
}
.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:999px; transition:color .25s ease, background-color .25s ease;
}
.nav-list a:hover{ background:rgba(255,255,255,.07); }
.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,.09); cursor:pointer; padding:0; position:relative; z-index:95;
}
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);
  /* The rotating portrait aura (::before, inset:-8%) can swing past the
     viewport around ~1024px and inflate scrollWidth — clip horizontally only. */
  overflow-x:clip;
}
.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(200,214,255,.92);
  padding:8px 16px; border:1px solid rgba(255,255,255,.18); border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  backdrop-filter:blur(12px) saturate(1.05); -webkit-backdrop-filter:blur(12px) saturate(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 8px 20px -12px rgba(0,0,0,.5);
}
.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,.22);
  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 40px -16px rgba(120,150,255,.16);
  animation:float 7s ease-in-out infinite;
}
.portrait-frame:hover{ animation-play-state:paused; }
/* Specular glass reflection over the portrait (fades out well above the caption) */
.portrait-frame::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent) no-repeat 50% 0 / 72% 1px,
    linear-gradient(205deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 22%, transparent 38%);
}
.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 — approved prototype recipe)
   Real frosted glass over the aurora: quiet neutral white veil over
   a faint dark base, background clearly visible through controlled
   blur, thin white border, soft top reflection, restrained depth.
   NO coloured surfaces — accents live in dots, labels and lights.
   · element  = depth (shadow) + hover lift, never clipped
   · ::before = frosted surface: blur + veil + border + bevel
   · ::after  = specular: sweep band · top hairline · corner sheen
   ============================================================ */
.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,.03),
    0 14px 40px -18px rgba(0,0,0,.6),
    0 34px 70px -40px rgba(0,0,0,.5);
  transition:transform .4s var(--ease), box-shadow .4s 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(180deg, var(--glass), var(--glass-soft)),
    var(--glass-dark);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset -1px 0 0 rgba(255,255,255,.05),
    inset 0 -16px 30px -22px rgba(0,8,22,.26);
  transition:border-color .45s var(--ease), background .45s var(--ease);
}
.glass::after, .about-text::after, .philosophy::after,
.pcard::after, .wcard::after, .contact-panel::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:2;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.05) 55%, transparent 72%) no-repeat -160% 0 / 55% 100%,
    linear-gradient(90deg, transparent 6%, rgba(255,255,255,.62) 50%, transparent 94%) no-repeat 50% 0 / 82% 1px,
    linear-gradient(186deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 24%, transparent 42%);
}
.glass:hover::after, .about-text:hover::after, .philosophy:hover::after,
.pcard:hover::after, .wcard:hover::after, .contact-panel:hover::after{
  animation:cardSheen 1.3s var(--ease);
}
/* Shared hover: small lift, tiny scale, brighter border, deeper shadow */
.pcard:hover, .wcard:hover, .glass:hover, .about-text:hover,
.philosophy:hover, .contact-panel:hover{
  transform:translateY(-3px) scale(1.005);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 18px 46px -18px rgba(0,0,0,.68),
    0 38px 76px -40px rgba(0,0,0,.55);
}
.pcard:hover::before, .wcard:hover::before, .glass:hover::before,
.about-text:hover::before, .philosophy:hover::before, .contact-panel:hover::before{
  border-color:var(--glass-border-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.042)),
    var(--glass-dark);
}

/* Pointer-tracked reflection inside project/writing cards — a faint
   neutral light that follows the cursor (JS sets --mx/--my on fine
   pointers only; hidden entirely on touch devices). */
.card-ambient{
  position:absolute; inset:-1px; border-radius:inherit;
  pointer-events:none; z-index:-1; opacity:0; transition:opacity .5s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,30%),
    rgba(255,255,255,.08), transparent 65%);
}
.pcard:hover .card-ambient, .wcard:hover .card-ambient{ opacity:1; }
@media (hover:none){ .card-ambient{ display:none; } }

/* ============================================================
   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 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:var(--r-md); 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(180deg, var(--glass), var(--glass-soft)),
    var(--glass-dark);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(255,255,255,.05);
}
.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,.05); }
.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); }
.pcard{
  display:flex; flex-direction:column; padding:clamp(26px,3vw,42px); border-radius:var(--r-lg);
}

/* Subtle per-platform identity: a whisper of tint on the hover shadow
   only — colour otherwise lives in dots, labels and the button light. */
.pcard-archive:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 18px 46px -18px rgba(0,0,0,.68),
    0 30px 70px -34px rgba(255,150,80,.14);
}
.pcard-news:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 18px 46px -18px rgba(0,0,0,.68),
    0 30px 70px -34px rgba(95,140,255,.16);
}

/* Platform name block — plain typography over the glass with a fading
   hairline beneath (the heavy nested plate is gone; approved layout). */
.pcard-watermark{
  position:relative;
  height:auto; margin:0 0 22px; padding:0 0 20px;
  display:flex; flex-direction:column; justify-content:flex-start;
  background:linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.05)) no-repeat left bottom / 100% 1px;
}
.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.4rem; line-height:1.08; color:#fff; letter-spacing:-.02em; margin:.14em 0 .06em; }
.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,.09); border:1px solid rgba(255,255,255,.26); color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  padding:5px 14px; border-radius:999px; font-size:.78rem; letter-spacing:.02em; transition:all .25s ease;
}
.chips li:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,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); }
.wcard{
  padding:clamp(24px,2.8vw,34px); border-radius:var(--r-md); display:flex; flex-direction:column;
  min-height:250px;
}
/* Icon chips — neutral glass squares; the accent lives in the ICON stroke */
.w-icon{
  width:52px; height:52px; display:grid; place-items:center; border-radius:15px; margin-bottom:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.w-icon svg{ width:24px; height:24px; }
.wcard:nth-child(1) .w-icon{ color:var(--blue); }
.wcard:nth-child(2) .w-icon{ color:var(--violet); }
.wcard:nth-child(3) .w-icon{ color:var(--amber); }
.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(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.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:var(--r-lg);
}
.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:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  backdrop-filter:blur(10px) saturate(1.05); -webkit-backdrop-filter:blur(10px) saturate(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 10px 24px -14px rgba(0,0,0,.6);
  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(255,255,255,.5); transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 26px -14px rgba(0,0,0,.7), 0 0 16px -8px rgba(255,255,255,.35);
}
.contact-location{ position:relative; margin-top:12px; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }

/* ============================================================
   15b. FORMS — glass fields (WordPress search / comment forms
   rendered through index.php; the front page itself has none).
   Styling only — no behaviour, names or actions are touched.
   ============================================================ */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input[type="password"], input[type="number"], textarea, select{
  width:100%; max-width:100%; min-height:48px;
  padding:.72em 1.1em; font:inherit; color:var(--ink);
  background:linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r-sm);
  backdrop-filter:blur(14px) saturate(1.35); -webkit-backdrop-filter:blur(14px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.2);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  -webkit-appearance:none; appearance:none;
}
textarea{ min-height:130px; resize:vertical; }
::placeholder{ color:var(--faint); opacity:1; }
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:none; border-color:rgba(150,180,255,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 4px rgba(95,140,255,.18),
    0 0 18px -4px rgba(95,140,255,.35);
}
input:user-invalid, textarea:user-invalid{
  border-color:rgba(255,120,120,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 4px rgba(255,90,90,.14);
}
form label{ display:block; font-weight:600; font-size:.9rem; color:var(--soft); margin-bottom:.45em; }
input[type="submit"], button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:.72em 1.6em; width:auto; cursor:pointer;
  font:inherit; font-weight:600; color:rgba(255,255,255,.95); letter-spacing:.012em;
  background:linear-gradient(165deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 1px rgba(0,0,0,.2), 0 12px 26px -14px rgba(0,0,0,.65);
  transition:transform var(--t-fast) var(--ease), border-color .25s ease, box-shadow .25s ease;
  -webkit-appearance:none; appearance:none;
}
input[type="submit"]:hover, button[type="submit"]:hover{
  transform:translateY(-2px); border-color:rgba(175,200,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 0 20px -6px rgba(95,140,255,.4), 0 14px 30px -14px rgba(0,0,0,.65);
}
input[type="submit"]:active, button[type="submit"]:active{ transform:translateY(0) scale(.97); }
input[type="submit"]:focus-visible, button[type="submit"]:focus-visible{
  outline:2px solid rgba(175,205,255,.95); outline-offset:3px;
}

/* ============================================================
   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(1.05) brightness(1.03); -webkit-backdrop-filter:blur(22px) saturate(1.05) brightness(1.03);
  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; }
}

/* Light sweep across a button's specular layer (layer 1 moves, layer 2 static) */
@keyframes btnSweep{
  from{ background-position:-85% 0, 0 0; }
  to{ background-position:185% 0, 0 0; }
}
/* Occasional idle sweep on the main CTAs — one pass, then a long rest */
@keyframes btnSweepIdle{
  0%, 72%{ background-position:-85% 0, 0 0; }
  92%, 100%{ background-position:185% 0, 0 0; }
}
/* Reflection gliding across glass cards (layer 1 moves, 2 + 3 static) */
@keyframes cardSheen{
  from{ background-position:-160% 0, 50% 0, 0 0; }
  to{ background-position:260% 0, 50% 0, 0 0; }
}

/* ============================================================
   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){
  /* Lighter frost on phones — big blur radii are expensive on mobile GPUs */
  :root{ --glass-blur:18px; --glass-sat:1.03; }

  /* Comfortable touch targets on all touch-first widths */
  .footer-col a, .back-top{ display:inline-block; padding-block:7px; }
  .footer-socials a{ width:44px; height:44px; border-radius:13px; }
  .w-links a{ padding-block:6px; }

  .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; }
}

/* ============================================================
   18b. SAFE AREAS — iPhone notch / home-indicator insets
   ============================================================ */
@supports (padding:max(0px)){
  .container{
    padding-inline:
      max(clamp(20px,5vw,40px), env(safe-area-inset-left))
      max(clamp(20px,5vw,40px), env(safe-area-inset-right));
  }
  .site-footer .container{ padding-bottom:env(safe-area-inset-bottom); }
  @media (max-width:860px){
    .site-nav{ padding-bottom:max(48px, calc(env(safe-area-inset-bottom) + 24px)); }
  }
}

/* ============================================================
   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::after, .btn:hover::after, .btn-primary.is-cta::after{ animation:none !important; }
  .glass::after, .about-text::after, .philosophy::after,
  .pcard::after, .wcard::after, .contact-panel::after{ animation:none !important; }
  .portrait-frame, .hero-portrait::before{ animation:none !important; }
  .ping, .wm-live i, .scroll-cue .line::after{ animation:none !important; }
  .card-ambient{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn, .pcard, .wcard, .glass, .about-text, .philosophy, .contact-panel,
  .contact-socials a, .footer-socials a, .header-inner::before{ transition:none !important; }
  .btn:hover, .pcard:hover, .wcard:hover, .glass:hover,
  .about-text:hover, .philosophy:hover, .contact-panel:hover{ transform:none; }
}