/* =====================================================================
   STYLE.CSS — styles for The Consciousness Problem (same design system as the portfolio)
   Tip: change the colours in section 1 and the whole site updates.
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS (edit these to re-theme the site) ---------- */
:root {
  --void: #020403;                               /* page background: deep black void */
  --void-2: #06100b;                             /* card background: a hair lighter than the void */
  --green: #3dff9a;                              /* main neon green */
  --green-2: #00d4a6;                            /* teal-green, used inside gradients */
  --lime: #b8ff5c;                               /* lime accent, used inside gradients */
  --white: #effff6;                              /* soft white with a slight green tint */
  --muted: #8ea597;                              /* grey-green for secondary text */
  --gold: #f4c95d;                               /* golden sparkle accent */
  --green-rgb: 61, 255, 154;                     /* green as r,g,b (the admin theme updates this) */
  --gold-rgb: 244, 201, 93;                      /* gold as r,g,b (the admin theme updates this) */
  --line: rgba(var(--green-rgb), 0.22);          /* colour of the fine 1px lines */
  --line-strong: rgba(var(--green-rgb), 0.65);   /* brighter line colour on hover */
  --line-gold: rgba(var(--gold-rgb), 0.5);      /* gold fine line */
  --grad: linear-gradient(115deg, var(--green) 0%, var(--green-2) 35%, var(--white) 70%, var(--gold) 100%); /* signature text gradient */
  --grad-soft: linear-gradient(90deg, transparent, var(--green), transparent); /* fading line gradient */
  --font-display: "Space Grotesk", system-ui, sans-serif; /* headline & body font */
  --font-mono: "JetBrains Mono", ui-monospace, monospace; /* small techy labels font */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);         /* smooth "expo-out" easing used everywhere */
  --gutter: clamp(16px, 5vw, 72px);              /* left/right page padding (16px on phones) */
  --nav-h: 72px;                                 /* height of the top navigation bar */
  --maxw: 1240px;                                /* maximum content width */
  --shadow-offset: 8px;                          /* distance of the fine-line "shadow" boxes */
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* predictable sizing, no default spacing */
html { -webkit-text-size-adjust: 100%; }        /* stop iOS from auto-enlarging text */
html.lenis, html.lenis body { height: auto; }   /* required by the Lenis smooth-scroll library */
.lenis.lenis-smooth { scroll-behavior: auto !important; } /* let Lenis control scrolling */
body {
  background: var(--void);                       /* black void background */
  color: var(--white);                           /* default text colour */
  font-family: var(--font-display);              /* default font */
  font-size: clamp(16px, 1.05vw, 18px);          /* body text scales gently with screen */
  line-height: 1.6;                              /* comfortable reading line height */
  overflow-x: hidden;                            /* never allow sideways scroll */
  -webkit-font-smoothing: antialiased;           /* crisper text on Mac */
  min-height: 100vh;                             /* always at least one screen tall */
}
img { max-width: 100%; display: block; }         /* images never overflow their box */
a { color: inherit; text-decoration: none; }     /* links inherit colour, no underline */
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* clean buttons */
::selection { background: var(--green); color: var(--void); } /* green text-highlight colour */
:focus-visible { outline: 1px solid var(--green); outline-offset: 4px; } /* visible keyboard focus */

/* ---------- 3. 3D BACKGROUND CANVAS ---------- */
#bg {
  position: fixed;                               /* stays put while the page scrolls */
  top: 0; left: 0;                               /* pinned to the top-left corner */
  width: 100%;                                   /* full width */
  height: 100vh;                                 /* full height (older browsers) */
  height: 100lvh;                                /* full height incl. the phone address-bar area → no resize/flicker when it hides or shows */
  z-index: 0;                                    /* sits behind all content */
  pointer-events: none;                          /* clicks pass through to the page */
}
.vignette {
  position: fixed;                               /* fixed over the canvas */
  inset: 0;                                      /* full screen */
  z-index: 1;                                    /* above canvas, below content */
  pointer-events: none;                          /* never blocks clicks */
  background: radial-gradient(ellipse at center, transparent 40%, rgba(2, 4, 3, 0.85) 100%); /* darkens the edges */
}
.no-webgl #bg { background: radial-gradient(circle at 70% 30%, rgba(var(--green-rgb), 0.12), transparent 50%); } /* fallback glow if 3D is unsupported */

/* ---------- 4. LAYOUT HELPERS ---------- */
main { position: relative; z-index: 2; }         /* content sits above the 3D background */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* centred content column */
.section { padding: clamp(80px, 14vh, 160px) 0; position: relative; } /* vertical spacing between sections */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; } /* two columns on desktop */

/* ---------- 5. TYPOGRAPHY ---------- */
.eyebrow {
  font-family: var(--font-mono);                 /* techy mono font */
  font-size: 12px;                               /* small label */
  letter-spacing: 0.3em;                         /* wide spacing looks futuristic */
  text-transform: uppercase;                     /* ALL CAPS */
  color: var(--green);                           /* green label */
  display: inline-flex;                          /* lets the line sit beside the text */
  align-items: center;                           /* vertically centre line + text */
  gap: 12px;                                     /* space between line and text */
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--green); } /* the fine line before labels */
.h-display {
  font-size: clamp(44px, 9vw, 132px);            /* huge hero title, shrinks on phones */
  line-height: 0.95;                             /* tight lines for big type */
  font-weight: 600;                              /* semi-bold */
  letter-spacing: -0.04em;                       /* tighter letters look premium */
}
.h-section {
  font-size: clamp(34px, 5.5vw, 76px);           /* section titles */
  line-height: 1;                                /* tight line height */
  font-weight: 500;                              /* medium weight */
  letter-spacing: -0.03em;                       /* slightly tighter */
  margin: 18px 0 28px;                           /* spacing around the title */
}
.grad-text {
  background: var(--grad);                       /* green → white → gold gradient */
  background-size: 200% auto;                    /* wider than text so it can move */
  -webkit-background-clip: text;                 /* clip gradient to the letters (Safari) */
  background-clip: text;                         /* clip gradient to the letters */
  color: transparent;                            /* show the gradient instead of colour */
  animation: gradShift 8s linear infinite;       /* slowly shifts the gradient */
}
@keyframes gradShift { to { background-position: 200% center; } } /* gradient movement */
.lead { font-size: clamp(18px, 1.6vw, 22px); color: var(--muted); max-width: 60ch; } /* intro paragraph */
.muted { color: var(--muted); }                  /* secondary text colour */
.gold { color: var(--gold); }                    /* gold text */
[hidden] { display: none !important; }           /* hidden really means hidden */
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.05em; } /* small mono text */

/* ---------- 6. NAVIGATION ---------- */
.nav {
  position: fixed;                               /* always visible at top */
  top: 0; left: 0; right: 0;                     /* stretch across the top */
  height: var(--nav-h);                          /* fixed height */
  z-index: 50;                                   /* above everything but overlays */
  display: flex;                                 /* logo left, links right */
  align-items: center;                           /* vertically centred */
  justify-content: space-between;                /* push items to each side */
  padding: 0 var(--gutter);                      /* side padding */
  transition: border-color 0.5s var(--ease);     /* smooth change on scroll */
  border-bottom: 1px solid transparent;          /* line appears after scrolling */
}
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(2, 4, 3, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity 0.5s var(--ease); } /* frosted layer (kept on a separate layer so the phone menu isn't trapped inside the bar) */
.nav.scrolled::before { opacity: 1; }           /* show frosted bar after scrolling */
.nav.scrolled { border-color: var(--line); }    /* fine line under the bar after scrolling */
.menu-open .nav::before { opacity: 0; }         /* hide bar background while phone menu is open */
.logo { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; display: flex; align-items: center; gap: 10px; } /* logo text */
.logo-mark { width: 10px; height: 10px; border: 1px solid var(--green); transform: rotate(45deg); position: relative; } /* little diamond icon */
.logo-mark::after { content: ""; position: absolute; inset: 2px; background: var(--gold); animation: pulse 2.4s ease-in-out infinite; } /* gold dot inside diamond */
@keyframes pulse { 50% { opacity: 0.2; } }       /* soft blinking */
.nav-links { display: flex; gap: clamp(20px, 3vw, 44px); list-style: none; } /* horizontal link list */
.nav-links a {
  font-family: var(--font-mono);                 /* mono link text */
  font-size: 13px;                               /* small */
  letter-spacing: 0.15em;                        /* spaced out */
  text-transform: uppercase;                     /* capitals */
  color: var(--muted);                           /* dim until hovered */
  position: relative;                            /* for the underline */
  padding: 6px 0;                                /* bigger click area */
  transition: color 0.3s;                        /* smooth colour change */
}
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); } /* hidden fine underline */
.nav-links a:hover, .nav-links a.active { color: var(--white); } /* brighten on hover / current page */
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; } /* draw underline */
.nav-links a .num { color: var(--gold); margin-right: 6px; } /* gold number before each link */
.burger { display: none; width: 40px; height: 40px; position: relative; z-index: 60; } /* mobile menu button (hidden on desktop) */
.burger span { position: absolute; left: 8px; right: 8px; height: 1px; background: var(--white); transition: transform 0.5s var(--ease), top 0.5s var(--ease); } /* the two lines */
.burger span:nth-child(1) { top: 16px; }         /* top line */
.burger span:nth-child(2) { top: 24px; }         /* bottom line */
.menu-open .burger span:nth-child(1) { top: 20px; transform: rotate(45deg); }  /* becomes X */
.menu-open .burger span:nth-child(2) { top: 20px; transform: rotate(-45deg); } /* becomes X */

/* ---------- 7. BUTTONS ---------- */
.btn {
  display: inline-flex;                          /* icon + text in a row */
  align-items: center;                           /* vertically centred */
  gap: 12px;                                     /* space between text and arrow */
  padding: 16px 28px;                            /* size of button */
  border: 1px solid var(--line-strong);          /* fine line border */
  font-family: var(--font-mono);                 /* mono text */
  font-size: 13px;                               /* small text */
  letter-spacing: 0.15em;                        /* spaced out */
  text-transform: uppercase;                     /* capitals */
  position: relative;                            /* for the fill effect */
  overflow: hidden;                              /* hide the fill until hover */
  isolation: isolate;                            /* keeps the fill behind the text */
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease); /* smooth hover */
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--green); transform: translateY(101%); transition: transform 0.6s var(--ease); z-index: -1; } /* green fill waiting below */
.btn:hover { color: var(--void); border-color: var(--green); } /* dark text on hover */
.btn:hover::before { transform: translateY(0); } /* fill slides up */
.btn .arrow { transition: transform 0.5s var(--ease); } /* arrow animation */
.btn:hover .arrow { transform: translateX(6px); } /* arrow nudges right */
.btn.ghost { border-color: var(--line); color: var(--muted); } /* quieter secondary button */
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; } /* row of buttons */

/* ---------- 8. FINE-LINE FRAMES & SHADOWS (the "straight line" shadow look) ---------- */
.frame {
  --o: var(--shadow-offset);                     /* current distance of the line-shadow */
  position: relative;                            /* anchor for the shadow box */
  border: 1px solid var(--line);                 /* main fine border */
  background: rgba(4, 10, 7, 0.82);              /* dark glassy fill */
  backdrop-filter: blur(6px);                    /* blur the 3D scene behind */
  -webkit-backdrop-filter: blur(6px);            /* Safari support */
  transition: border-color 0.5s var(--ease), transform 0.6s var(--ease); /* smooth hover */
}
.frame::after {
  content: "";                                   /* empty decorative box */
  position: absolute;                            /* placed relative to the frame */
  inset: -1px;                                   /* same size as the frame's border box */
  border: 1px solid var(--line);                 /* the "shadow" is just a fine line */
  transform: translate(var(--o), var(--o));      /* offset down-right */
  clip-path: polygon(calc(100% - var(--o)) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - var(--o)), calc(100% - var(--o)) calc(100% - var(--o))); /* only draw the part that sticks OUT from behind the frame */
  pointer-events: none;                          /* never blocks clicks */
  transition: transform 0.6s var(--ease), clip-path 0.6s var(--ease), border-color 0.6s var(--ease); /* smooth hover */
}
.frame:hover { border-color: var(--line-strong); --o: calc(var(--shadow-offset) * 1.8); } /* brighter border, shadow line moves further out */
.frame:hover::after { border-color: var(--line-gold); } /* shadow line turns gold */
.corners {
  background-image:                              /* four L-shaped corner ticks */
    linear-gradient(var(--green), var(--green)), linear-gradient(var(--green), var(--green)),
    linear-gradient(var(--green), var(--green)), linear-gradient(var(--green), var(--green)),
    linear-gradient(var(--green), var(--green)), linear-gradient(var(--green), var(--green)),
    linear-gradient(var(--green), var(--green)), linear-gradient(var(--green), var(--green));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px; /* each tick is 14px long, 1px thick */
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; /* top-left, top-right, bottom-left, bottom-right */
  background-repeat: no-repeat;                  /* draw each tick once */
}
.hr { height: 1px; background: var(--grad-soft); opacity: 0.5; border: 0; } /* fading divider line */

/* ---------- 9. HERO (home page) ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); position: relative; } /* full-screen intro */
.hero .h-display { margin: 24px 0 32px; }        /* spacing around the big title */
.hero .line { display: block; overflow: hidden; } /* each title line hides its text for the reveal */
.hero .line > span { display: inline-block; transform: translateY(110%); transition: transform 1.4s var(--ease); } /* text starts below */
.loaded .hero .line > span { transform: translateY(0); } /* slides up once the page loads */
.loaded .hero .line:nth-child(2) > span { transition-delay: 0.12s; } /* second line a bit later */
.loaded .hero .line:nth-child(3) > span { transition-delay: 0.24s; } /* third line even later */
.scroll-hint { position: absolute; bottom: 32px; left: var(--gutter); display: flex; align-items: center; gap: 14px; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } /* "scroll" label bottom-left */
.hint-gone .scroll-hint { opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.6s; } /* fades away after the first scroll and stays gone (a refresh brings it back) */
.scroll-hint .bar { width: 1px; height: 48px; background: var(--line); position: relative; overflow: hidden; } /* vertical track */
.scroll-hint .bar::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: var(--green); animation: drip 2s var(--ease) infinite; } /* green line running down */
@keyframes drip { to { top: 110%; } }            /* moving line animation */
.coords { position: absolute; bottom: 32px; right: var(--gutter); text-align: right; line-height: 1.8; } /* futuristic data readout bottom-right */

/* ---------- 10. STORY CHAPTERS (home page) ---------- */
.chapter { display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 56px 0; border-top: 1px solid var(--line); } /* number column + text column */
.chapter-num { font-family: var(--font-mono); color: var(--gold); font-size: 13px; letter-spacing: 0.2em; } /* gold chapter number */
.chapter h3 { font-size: clamp(26px, 3.2vw, 44px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 14px; transition: color 0.4s; } /* chapter heading */
.chapter:hover h3 { color: var(--green); }       /* heading turns green on hover */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); } /* three stat boxes */
.stat { padding: 36px 28px; border-right: 1px solid var(--line); } /* each stat box */
.stat:last-child { border-right: 0; }            /* no line after the last one */
.stat b { display: block; font-size: clamp(36px, 5vw, 64px); font-weight: 500; line-height: 1; margin-bottom: 8px; } /* big number */

/* ---------- 11. PAGE HEADER (inner pages) ---------- */
.page-head { padding: calc(var(--nav-h) + clamp(60px, 14vh, 140px)) 0 clamp(40px, 8vh, 80px); } /* top area of about/projects/social */

/* ---------- 12. IMAGE SLOTS (put your own pictures in /images) ---------- */
.img-slot { aspect-ratio: 4 / 5; overflow: hidden; display: grid; place-items: center; } /* portrait-shaped box */
.img-slot.wide { aspect-ratio: 16 / 10; }        /* landscape box for projects */
.img-slot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.6s; filter: grayscale(0.4) contrast(1.05); } /* image fills the box */
.img-slot:hover img { transform: scale(1.06); filter: none; } /* zoom + full colour on hover */
.img-slot .placeholder { position: absolute; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.2em; } /* text shown if no image yet */

/* ---------- 13. ABOUT PAGE ---------- */
.timeline { position: relative; padding-left: 32px; } /* vertical timeline */
.timeline::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(var(--green), var(--gold), transparent); } /* the vertical fine line */
.t-item { position: relative; padding-bottom: 44px; } /* each timeline entry */
.t-item::before { content: ""; position: absolute; left: -36px; top: 8px; width: 9px; height: 9px; border: 1px solid var(--green); background: var(--void); transform: rotate(45deg); transition: background 0.4s; } /* diamond marker */
.t-item:hover::before { background: var(--gold); } /* marker lights gold on hover */
.t-item h4 { font-size: 22px; font-weight: 500; margin: 6px 0; } /* entry title */
.skills { display: flex; flex-wrap: wrap; gap: 12px; } /* wrap skill chips */
.chip { padding: 10px 18px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; transition: all 0.4s var(--ease); } /* single skill chip */
.chip:hover, .chip.active { border-color: var(--green); color: var(--void); background: var(--green); } /* chip fills green */

/* ---------- 14. PROJECTS PAGE ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; } /* filter button row */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px); } /* two-column project grid */
.card { padding: 20px; transform-style: preserve-3d; will-change: transform; } /* project card (3D tilt ready) */
.card.hide { display: none; }                    /* hidden by filter */
.card .glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(var(--green-rgb), 0.14), transparent 45%); opacity: 0; transition: opacity 0.4s; } /* green light following the mouse */
.card:hover .glare { opacity: 1; }               /* show light on hover */
.card-body { padding: 24px 4px 4px; transform: translateZ(30px); } /* text floats above card in 3D */
.card h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; margin: 8px 0 10px; } /* project title */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; } /* tag list */
.tag { font-family: var(--font-mono); font-size: 11px; color: var(--gold); border: 1px solid var(--line-gold); padding: 4px 10px; } /* single gold tag */
.card-links { display: flex; gap: 24px; } /* links under project */
.link-line { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; position: relative; padding-bottom: 4px; } /* text link */
.link-line::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--green); transform-origin: left; transition: transform 0.5s var(--ease); } /* underline */
.link-line:hover::after { transform: scaleX(0); transform-origin: right; } /* underline slides away on hover */

/* ---------- 15. SOCIAL PAGE ---------- */
.socials { list-style: none; border-top: 1px solid var(--line); } /* list of social links */
.social {
  display: grid;                                 /* number | name | handle | arrow */
  grid-template-columns: 60px 1fr auto 40px;     /* column widths */
  align-items: center;                           /* vertically centred */
  gap: 24px;                                     /* space between columns */
  padding: clamp(22px, 3.5vw, 40px) 8px;         /* row height */
  border-bottom: 1px solid var(--line);          /* fine line under each row */
  position: relative;                            /* for the sweep effect */
  overflow: hidden;                              /* clip the sweep */
  isolation: isolate;                            /* keeps the sweep behind the text */
  transition: padding 0.6s var(--ease);          /* row expands on hover */
}
.social::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--green-rgb), 0.1), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); z-index: -1; } /* green sweep background */
.social:hover::before { transform: scaleX(1); }  /* sweep fills in */
.social:hover { padding-left: 28px; }            /* row slides right */
.social .name { font-size: clamp(28px, 5vw, 64px); font-weight: 500; letter-spacing: -0.03em; transition: color 0.4s; } /* big network name */
.social:hover .name { color: var(--green); }     /* name turns green */
.social .go { width: 40px; height: 40px; border: 1px solid var(--line); display: grid; place-items: center; transition: all 0.5s var(--ease); } /* arrow box */
.social:hover .go { background: var(--gold); color: var(--void); border-color: var(--gold); transform: rotate(-45deg); } /* arrow turns gold & rotates */
.contact-box { margin-top: clamp(60px, 10vh, 120px); padding: clamp(32px, 6vw, 72px); text-align: center; } /* email call-to-action box */

/* ---------- 16. FOOTER + SIGNATURE + MANTRA ---------- */
.footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 28px 0; } /* bottom bar */
.footer .container { display: flex; align-items: center; gap: 16px; } /* © year + signature */
.footer .right { text-align: right; }           /* tagline on the right */
.sign { display: flex; align-items: center; gap: 12px; } /* "© 2026" + signature */
.signature-box { display: inline-flex; align-items: center; height: 52px; filter: drop-shadow(0 0 6px rgba(var(--green-rgb), 0.45)); clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--ease) 0.2s; } /* glow + hidden until revealed */
.sign.in .signature-box { clip-path: inset(0 0 0 0); } /* "writes" itself left → right when scrolled into view */
.signature { display: block; height: 100%; aspect-ratio: 3 / 1; background: var(--grad); background-size: 200% auto; animation: gradShift 8s linear infinite; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; } /* gradient seen through your signature's shape */
.signature-text { font-family: "Mrs Saint Delafield", cursive; font-size: 44px; line-height: 1; padding: 0 6px; } /* handwriting fallback until a signature is uploaded */
.mantra { font-family: "Tiro Devanagari Sanskrit", serif; color: var(--gold); letter-spacing: 0.08em; font-size: 18px; text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.5); white-space: nowrap; } /* ॐ नमः शिवाय */
.coords .mantra { display: block; font-size: 20px; margin-bottom: 6px; } /* mantra above the hero readout */
.preview-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 300; padding: 8px 16px; background: var(--gold); color: var(--void); font-size: 11px; letter-spacing: 0.15em; } /* admin preview notice */
.preview-banner a { text-decoration: underline; } /* exit link */

/* ---------- 17. SCROLL REVEAL ANIMATIONS ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); } /* hidden until scrolled into view */
.reveal.in { opacity: 1; transform: none; }      /* visible state */
.reveal[data-delay="1"] { transition-delay: 0.1s; } /* small stagger */
.reveal[data-delay="2"] { transition-delay: 0.2s; } /* medium stagger */
.reveal[data-delay="3"] { transition-delay: 0.3s; } /* larger stagger */

/* ---------- 18. PAGE TRANSITION OVERLAY ---------- */
.transition {
  position: fixed;                               /* covers the screen */
  inset: 0;                                      /* full screen */
  z-index: 100;                                  /* on top of everything */
  background: var(--void);                       /* black curtain */
  pointer-events: none;                          /* never blocks clicks while hidden */
  transform: scaleY(1);                          /* starts covering the page */
  transform-origin: top;                         /* shrinks toward the top */
  transition: transform 0.9s var(--ease);        /* smooth wipe */
}
.transition::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--grad); } /* glowing gradient edge line */
.loaded .transition { transform: scaleY(0); }    /* page loaded → curtain lifts */
.leaving .transition { transform: scaleY(1); transform-origin: bottom; pointer-events: all; } /* leaving → curtain drops */

/* ---------- 19. CUSTOM CURSOR (desktop mouse only) ---------- */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 200; border-radius: 50%; opacity: 0; transition: opacity 0.3s; } /* shared cursor styles */
.has-cursor .cursor-dot, .has-cursor .cursor-ring { opacity: 1; } /* only show when a mouse is detected */
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); } /* small gold dot */
.cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid var(--green); transition: width 0.4s var(--ease), height 0.4s var(--ease), margin 0.4s var(--ease), background 0.4s, opacity 0.3s; } /* green ring that trails */
.cursor-ring.hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(var(--green-rgb), 0.08); } /* ring grows over links */

/* ---------- 20. GOLD CLICK SPARKLES ---------- */
.spark { position: fixed; width: 4px; height: 4px; background: var(--gold); pointer-events: none; z-index: 150; border-radius: 50%; box-shadow: 0 0 6px var(--gold); animation: spark 0.8s var(--ease) forwards; } /* one sparkle particle */
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } } /* flies outward and fades */

/* ---------- 21. TABLET & PHONE LAYOUT ---------- */
@media (max-width: 900px) {                      /* tablets and phones */
  .grid-2 { grid-template-columns: 1fr; }        /* stack the two columns */
  .projects { grid-template-columns: 1fr; }      /* one project per row */
  .stats { grid-template-columns: 1fr; }         /* stack stats */
  .stat { border-right: 0; border-bottom: 1px solid var(--line); } /* horizontal lines instead */
  .stat:last-child { border-bottom: 0; }         /* no line after last stat */
}
@media (max-width: 768px) {                      /* phones */
  :root { --nav-h: 64px; --shadow-offset: 6px; } /* smaller nav & shadow offset */
  .burger { display: block; }                    /* show the menu button */
  .nav-links {
    position: fixed;                             /* full-screen menu */
    inset: 0;                                    /* cover the screen */
    flex-direction: column;                      /* links stacked */
    justify-content: center;                     /* centred vertically */
    padding: 0 var(--gutter);                    /* side padding */
    gap: 28px;                                   /* space between links */
    background: rgba(2, 4, 3, 0.96);             /* near-black menu background */
    backdrop-filter: blur(12px);                 /* blur behind */
    -webkit-backdrop-filter: blur(12px);         /* Safari blur */
    clip-path: circle(0 at calc(100% - 36px) 32px); /* hidden as a tiny circle at the burger */
    transition: clip-path 0.8s var(--ease);      /* circle expands smoothly */
  }
  .menu-open .nav-links { clip-path: circle(150% at calc(100% - 36px) 32px); } /* menu open: circle covers screen */
  .nav-links a { font-size: 28px; font-family: var(--font-display); letter-spacing: -0.01em; text-transform: none; } /* bigger touch-friendly links */
  .chapter { grid-template-columns: 1fr; gap: 10px; padding: 40px 0; } /* number above text */
  .social { grid-template-columns: 1fr 40px; gap: 12px; } /* hide number & handle columns */
  .social .idx, .social .handle { display: none; } /* hidden on phones */
  .coords { display: none; }                     /* hide data readout on phones */
  .footer .container { grid-template-columns: 1fr; justify-items: center; text-align: center; } /* stack footer */
  .footer .right { text-align: center; }       /* centre tagline */
  .card { padding: 14px; }                       /* tighter cards */
}

/* ---------- 22. ACCESSIBILITY: REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {        /* user asked their OS for less motion */
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* disable animations */
  .reveal { opacity: 1; transform: none; }       /* show everything immediately */
}

.bio p + p { margin-top: 20px; }                 /* space between bio paragraphs */

/* =====================================================================
   THE CONSCIOUSNESS PROBLEM — extra components
   ===================================================================== */

/* ---------- 23. READING PROGRESS BAR (entry page) ---------- */
.progress { position: fixed; top: 0; left: 0; height: 1px; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); z-index: 60; } /* thin gradient line that grows while reading */

/* ---------- 24. TOPIC CARDS ---------- */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(20px, 3vw, 36px); } /* responsive grid */
.topic-card { padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; min-height: 220px; } /* one topic */
.topic-card .sym { font-size: 28px; color: var(--gold); line-height: 1; font-family: "Noto Sans Symbols", "Tiro Devanagari Sanskrit", serif; } /* topic symbol */
.topic-card h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -0.02em; } /* topic name */
.topic-card .count { margin-top: auto; } /* entry count pinned to bottom */

/* ---------- 25. ENTRY CARDS / LIST ---------- */
.entries { display: grid; gap: 0; border-top: 1px solid var(--line); } /* list of entries */
.entry-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 28px; align-items: start; padding: 36px 8px; border-bottom: 1px solid var(--line); position: relative; isolation: isolate; transition: padding 0.6s var(--ease); } /* one entry line */
.entry-row::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--green-rgb), 0.08), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); z-index: -1; } /* hover sweep */
.entry-row:hover::before { transform: scaleX(1); } /* sweep in */
.entry-row:hover { padding-left: 24px; }        /* slide on hover */
.entry-row h3 { font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 8px; transition: color 0.4s; } /* entry title */
.entry-row:hover h3 { color: var(--green); }    /* title glows */
.entry-row .meta { display: grid; gap: 6px; }   /* date / topic column */
.entry-row .go { width: 40px; height: 40px; border: 1px solid var(--line); display: grid; place-items: center; transition: all 0.5s var(--ease); } /* arrow box */
.entry-row:hover .go { background: var(--gold); color: var(--void); border-color: var(--gold); transform: rotate(-45deg); } /* arrow turns */
.topic-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); } /* topic label */
.empty { padding: 60px 0; text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; } /* nothing found */

/* ---------- 26. SEARCH ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 40px; } /* filters + search */
.search { position: relative; flex: 1 1 260px; max-width: 360px; } /* search box wrapper */
.search input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 12px 0 12px 28px; color: var(--white); font: 15px var(--font-display); outline: none; transition: border-color 0.3s; border-radius: 0; } /* search input */
.search input:focus { border-color: var(--green); } /* focus */
.search::before { content: "⌕"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--green); font-size: 18px; } /* magnifier */

/* ---------- 27. ARTICLE (entry page) ---------- */
.article-head { padding: calc(var(--nav-h) + clamp(50px, 12vh, 120px)) 0 40px; } /* title area */
.article-head .h-display { font-size: clamp(38px, 7vw, 96px); margin: 18px 0 20px; } /* entry title */
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; } /* date · minutes · topic */
.article-cover { margin: 20px 0 50px; aspect-ratio: 16 / 9; } /* cover image */
.prose { max-width: 720px; margin: 0 auto; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.8; color: #d8e8de; } /* reading column */
.prose > * + * { margin-top: 1.1em; }           /* paragraph spacing */
.prose h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin-top: 2em; color: var(--white); } /* sub heading */
.prose h3 { font-size: clamp(21px, 2.2vw, 26px); font-weight: 500; margin-top: 1.6em; color: var(--white); } /* smaller heading */
.prose a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* links */
.prose blockquote { border-left: 1px solid var(--gold); padding: 4px 0 4px 24px; color: var(--white); font-size: 1.15em; font-style: italic; } /* quotes */
.prose ul, .prose ol { padding-left: 1.4em; } /* lists */
.prose li + li { margin-top: 0.4em; }            /* list spacing */
.prose img { margin: 2em auto; border: 1px solid var(--line); } /* images */
.prose code { font-family: var(--font-mono); font-size: 0.85em; color: var(--gold); background: rgba(var(--gold-rgb), 0.08); padding: 2px 6px; } /* inline code */
.prose pre { background: rgba(4, 10, 7, 0.85); border: 1px solid var(--line); padding: 18px; overflow-x: auto; } /* code block */
.prose pre code { background: none; padding: 0; color: var(--white); } /* code inside block */
.prose hr { border: 0; height: 1px; background: var(--grad-soft); margin: 3em 0; opacity: 0.6; } /* divider */
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9em; display: block; overflow-x: auto; } /* tables scroll on phones */
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; } /* table cells */
.prose .katex-display { overflow-x: auto; overflow-y: hidden; padding: 6px 0; } /* long equations scroll */
.prose .katex { color: var(--white); }           /* equation colour */
.article-foot { max-width: 720px; margin: 70px auto 0; padding-top: 30px; border-top: 1px solid var(--line); display: grid; gap: 30px; } /* tags + prev/next */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* previous / next */
.pager a { padding: 20px; display: grid; gap: 6px; } /* pager box */
.pager a.next { text-align: right; }            /* next aligned right */

/* ---------- 28. SWITCHABLE PANELS (games tabs) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; } /* game tabs */
.game { padding: clamp(20px, 4vw, 40px); }      /* game frame */
.game-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 20px; } /* title + score */
.game-head h3 { font-size: clamp(24px, 3vw, 36px); font-weight: 500; } /* game title */
.hud { display: flex; gap: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--muted); } /* score line */
.hud b { color: var(--gold); font-weight: 500; } /* numbers */
.stage { position: relative; min-height: 380px; display: grid; place-items: center; border: 1px solid var(--line); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; } /* play area */
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* game canvas */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; padding: 24px; background: rgba(2, 4, 3, 0.78); z-index: 2; } /* start / game-over screen */
.overlay p { max-width: 46ch; color: var(--muted); } /* instructions */
.stroop-word { font-size: clamp(48px, 10vw, 110px); font-weight: 600; letter-spacing: -0.03em; } /* colour word */
.choices { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; } /* answer buttons */
.choice { width: 64px; height: 64px; border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; transition: transform 0.2s var(--ease), background 0.2s; } /* one answer */
.choice:active { transform: scale(0.92); }       /* press feedback */
.chakras { display: grid; gap: 12px; justify-items: center; padding: 30px 0; } /* chakra column */
.chakra { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--c); position: relative; transition: box-shadow 0.2s, background 0.2s, transform 0.2s; } /* one chakra button */
.chakra::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid var(--c); opacity: 0.5; } /* inner ring */
.chakra.lit { background: var(--c); box-shadow: 0 0 30px var(--c), 0 0 60px var(--c); transform: scale(1.08); } /* lit */
.flash-good { animation: good 0.3s; }          /* correct */
.flash-bad { animation: bad 0.3s; }            /* wrong */
@keyframes good { 50% { box-shadow: inset 0 0 0 1px var(--green), 0 0 40px rgba(var(--green-rgb), 0.4); } } /* green flash */
@keyframes bad { 50% { box-shadow: inset 0 0 0 1px #ff6b6b, 0 0 40px rgba(255, 107, 107, 0.35); } } /* red flash */

/* ---------- 29. LINKS PAGE ---------- */
.portfolio-link { margin-top: 32px; }            /* portfolio button spacing */

/* ---------- 30. PHONE TWEAKS FOR NEW PARTS ---------- */
@media (max-width: 768px) {
  .entry-row { grid-template-columns: 1fr 40px; gap: 14px; padding: 28px 4px; } /* stack entry rows */
  .entry-row .meta { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; gap: 14px; } /* meta on one line */
  .pager { grid-template-columns: 1fr; }        /* stack prev / next */
  .stage { min-height: 440px; }                  /* taller play area */
  .choice { width: 58px; height: 58px; }         /* slightly smaller answers */
}

/* ---------- 31. CUSTOMISATION EXTRAS ---------- */
.type-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); opacity: 0.75; } /* entry type label */
.topic-card { position: relative; overflow: hidden; } /* room for a cover image */
.topic-cover { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0.16; z-index: -1; filter: grayscale(0.3); transition: opacity 0.6s var(--ease); } /* faint topic cover */
.topic-card:hover .topic-cover { opacity: 0.3; } /* stronger on hover */
.topic-head { margin-bottom: 36px; display: grid; gap: 14px; max-width: 70ch; } /* topic intro in the journal */
.authors { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--gold); margin-top: 14px; } /* paper authors */
.abstract { max-width: 720px; margin: 0 auto 50px; padding: 26px 28px; display: grid; gap: 12px; font-size: 0.98em; color: var(--white); } /* abstract box */
.prose-actions { max-width: 720px; margin: 0 auto 40px; } /* PDF button row */
.prose-actions:has(a[hidden]) { display: none; } /* no PDF → no gap */
.topic-card { isolation: isolate; }               /* keeps the cover image behind the text */

/* ---------- LONG BUTTON TEXT (e.g. email addresses) ---------- */
.btn { max-width: 100%; }                        /* a button is never wider than the screen */
.btn > span:not(.arrow) { min-width: 0; overflow-wrap: anywhere; } /* long words may break instead of overflowing */
a.btn[href^="mailto:"] { text-transform: none; letter-spacing: 0.04em; } /* emails in normal case: shorter + easier to read */
.grid-2.single { grid-template-columns: 1fr; }   /* only one column switched on → full width */