/* ═══ 1. BASE STYLES + TOKENS ═══════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0a0a0a;
  --paper:#f7f5f0;
  --muted:#3d3b36;
  --read:#161514;
  --border:rgba(10,10,10,0.12);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --reveal-dur:1.15s;
  --on-dark-muted:rgba(247,245,240,0.58);
  --on-dark-read:rgba(247,245,240,0.92);
  --hero-ring-opacity:0.28;
}
html{scroll-behavior:smooth}
@media (hover:none),(pointer:coarse){html{scroll-behavior:auto}}
/* When JS runs we drive smooth scroll ourselves; disable native to avoid fighting Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{background:var(--paper);background-image:none;color:var(--ink);font-family:'Cormorant Garamond',serif;font-size:20px;line-height:1.8;cursor:crosshair;overflow-x:hidden}
.seo-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0
}
::selection{background:rgba(10,10,10,0.85);color:var(--paper)}
.skills-section ::selection,.contact ::selection{background:rgba(247,245,240,0.85);color:var(--ink)}

/* ─── Reveal system ─── content is visible by default (no-JS safe);
   only hidden once html.js is present, so a JS failure still shows everything. */
/* Keep text stable after refresh (no fade-out/fade-in jump). */
html.js .reveal{opacity:1;transform:none;transition:none;will-change:auto}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal-d1{transition-delay:0.08s}
html.js .reveal-d2{transition-delay:0.16s}
html.js .reveal-d3{transition-delay:0.24s}

/* ─── Rune line-drawing (carve-in) ─── */
svg.rune-draw line,svg.rune-draw polyline,svg.rune-draw path{transition:stroke-dashoffset 1.5s var(--ease)}
svg.rune-draw.drawn line,svg.rune-draw.drawn polyline,svg.rune-draw.drawn path{stroke-dashoffset:0 !important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1 !important;transform:none !important;transition:none}
  svg.rune-draw line,svg.rune-draw polyline,svg.rune-draw path{transition:none;stroke-dashoffset:0 !important}
  .tech-marquee,.hero-big-rune svg,.atmo *,.hero-rings svg{animation:none !important}
  .hero-type-char.locked,.bio-char.locked{animation:none !important;opacity:1 !important;transform:none !important;filter:none !important;letter-spacing:inherit !important}
  .hero-bio-cursor{display:none !important}
  .hero-contact-icon{animation:none !important;opacity:1 !important;transform:none !important}
  #spaceTrail{display:none !important}
  html.js:not(.hero-css-intro):not(.hero-ready) .hero-left .eyebrow,
  html.js:not(.hero-css-intro):not(.hero-ready) .hero-left .hero-title-line,
  html.js:not(.hero-css-intro):not(.hero-ready) .hero-left .hero-bio,
  html.js:not(.hero-css-intro):not(.hero-ready) .hero-left .cta,
  html.js:not(.hero-css-intro):not(.hero-ready) .hero-right,
  html.js:not(.hero-css-intro):not(.hero-ready) .hero-big-rune,
  html.js:not(.hero-css-intro):not(.hero-ready) .hero-rings svg,
  html.js:not(.hero-css-intro):not(.hero-ready) .hero-tagline,
  html.js:not(.hero-css-intro):not(.hero-ready) .hero-scroll-hint,
  html.js:not(.hero-css-intro):not(.hero-ready) nav{opacity:1 !important;transform:none !important}
}

/* ═══ 2. BACKGROUND ATMOSPHERE ═════════════════════════════════ */
.atmo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmo-rune{position:absolute;opacity:0.035;color:var(--ink)}
.atmo-rune svg{display:block}
.atmo-lines{position:absolute;inset:0;opacity:0.5}
.atmo-lines line{stroke:rgba(10,10,10,0.04);stroke-width:0.5}
/* slow-drifting film grain */
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
/* Use clean solid background (no pattern layers). */
.atmo,.grain{display:none !important}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}
.skills-section,.contact,footer{position:relative;z-index:2}
nav,.hero,.story,.legend,.about{position:relative;z-index:2}

/* ═══ 3. CUSTOM CURSOR + SPACE HOVER ═══════════════════════════ */
#spaceTrail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9998}
.cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:0.5px solid rgba(10,10,10,0.5);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width 0.35s var(--ease),height 0.35s var(--ease),background 0.35s,border-color 0.35s,opacity 0.4s,box-shadow 0.35s var(--ease);mix-blend-mode:difference;opacity:0}
.cursor::before,.cursor::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.cursor::before{inset:-7px;border:0.5px solid rgba(10,10,10,0.12);opacity:0;transform:scale(0.85);transition:opacity 0.4s var(--ease),transform 0.45s var(--ease)}
.cursor::after{inset:-14px;border:0.5px dashed rgba(10,10,10,0.08);opacity:0;transform:scale(0.7) rotate(0deg);transition:opacity 0.45s var(--ease),transform 0.5s var(--ease)}
.cursor.ready{opacity:1}
.cursor-dot{position:fixed;top:0;left:0;width:4px;height:4px;background:rgba(10,10,10,0.9);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:opacity 0.4s,box-shadow 0.35s;opacity:0;mix-blend-mode:difference;box-shadow:0 0 6px rgba(10,10,10,0.25)}
.cursor-dot.ready{opacity:1}
.cursor.hover{width:56px;height:56px;background:rgba(247,245,240,0.08);border-color:rgba(10,10,10,0.8);box-shadow:0 0 16px rgba(10,10,10,0.14),0 0 32px rgba(247,245,240,0.06)}
.cursor.hover::before{opacity:1;transform:scale(1);animation:orbitPulse 2.4s ease-in-out infinite}
.cursor.hover::after{opacity:1;transform:scale(1) rotate(45deg);animation:orbitSpin 8s linear infinite}
.cursor-dot.hover{box-shadow:0 0 10px rgba(10,10,10,0.45),0 0 18px rgba(247,245,240,0.2)}
@keyframes orbitPulse{0%,100%{transform:scale(1);opacity:0.7}50%{transform:scale(1.08);opacity:1}}
@keyframes orbitSpin{to{transform:scale(1) rotate(405deg)}}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot,#spaceTrail{display:none}body{cursor:auto}}

/* ═══ 4. NAVIGATION ════════════════════════════════════════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1.4rem 4rem;background:rgba(247,245,240,0.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:0.5px solid transparent;transition:border-color 0.5s,padding 0.5s var(--ease),background 0.5s}
nav.scrolled{border-bottom-color:var(--border);padding-top:1rem;padding-bottom:1rem}
.nav-logo{display:flex;align-items:flex-end;gap:0.25rem;line-height:1;text-decoration:none;color:inherit}
.nav-logo-sr,.logo-sr,.footer-logo-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-logo-word{display:flex;align-items:flex-end;gap:2px}
.nav-rune{display:flex;align-items:center;line-height:0}
.nav-rune svg{display:block;width:26px;height:32px;filter:drop-shadow(0 1px 0 rgba(10,10,10,0.12))}
.nav-logo:hover .nav-rune svg{transform:translateY(-1px);transition:transform 0.35s var(--ease)}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color 0.3s;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:0.5px;background:var(--ink);transition:width 0.4s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--ink)}
/* scroll progress hairline under nav */
.nav-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:101;transition:width 0.1s linear}
.nav-toggle{display:none;background:transparent;border:none;padding:0.25rem;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--ink);margin:4px 0;transition:transform 0.25s var(--ease),opacity 0.25s var(--ease)}

/* ═══ 5. HERO ══════════════════════════════════════════════════ */
.hero{min-height:100vh;display:grid;grid-template-columns:1.1fr 0.9fr;padding-top:70px}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:5rem 4rem}
.eyebrow{font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);margin-bottom:2.5rem}
.name-runes{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.5rem}
.name-row{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
.rune-cell{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0}
html.name-runes-live .rune-cell{animation:rise 0.6s var(--ease) forwards}
.rune-cell svg{display:block}
.rune-letter{font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.1em;color:var(--muted);text-align:center;text-transform:uppercase}
.name-separator{display:none}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.hero-title-line{font-family:'Cinzel',serif;font-size:14px;letter-spacing:0.28em;text-transform:uppercase;color:var(--ink);margin-bottom:2rem;min-height:1.6em;line-height:1.4}
.hero-title-line.is-typing .hero-type-char.locked{animation:titleCarve 0.26s var(--ease) forwards}
.hero-title-line .hero-type-char.glyph{
  font-family:'Cinzel',serif;font-style:normal;font-weight:400;color:var(--muted);
  letter-spacing:0.12em;opacity:0.75
}
@keyframes titleCarve{
  from{opacity:0.35;transform:translateY(5px);letter-spacing:0.35em;filter:blur(1px)}
  to{opacity:1;transform:none;letter-spacing:inherit;filter:none}
}
html.js:not(.hero-css-intro):not(.hero-ready) .hero-left .eyebrow,
html.js:not(.hero-css-intro):not(.hero-ready) .hero-left .hero-title-line,
html.js:not(.hero-css-intro):not(.hero-ready) .hero-left .hero-bio,
html.js:not(.hero-css-intro):not(.hero-ready) .hero-left .cta{opacity:0;transform:translateY(22px)}
html.js:not(.hero-css-intro):not(.hero-ready) .hero-right{opacity:0;transform:translateX(28px)}
html.js:not(.hero-css-intro):not(.hero-ready) .hero-big-rune{opacity:0;transform:scale(0.88)}
html.js:not(.hero-css-intro):not(.hero-ready) .hero-rings svg{opacity:0;transform:scale(0.92)}
html.js:not(.hero-css-intro):not(.hero-ready) .hero-tagline{opacity:0;transform:translateY(14px)}
html.js:not(.hero-css-intro):not(.hero-ready) .hero-scroll-hint{opacity:0;transform:translateY(10px)}
html.js:not(.hero-css-intro):not(.hero-ready) nav{opacity:0;transform:translateY(-12px)}
html.hero-css-intro .hero-left .eyebrow,
html.hero-css-intro .hero-left .cta{
  animation:heroFadeUp 1.05s var(--ease) both
}
html.hero-css-intro .hero-left .eyebrow{animation-delay:0.18s}
html.hero-css-intro .hero-left .hero-title-line,
html.hero-css-intro .hero-left .hero-bio{opacity:1;transform:none;animation:none}
html.hero-css-intro .hero-left .cta{animation-delay:0.78s}
html.hero-css-intro nav{animation:heroNavIn 0.95s var(--ease) 0.08s both}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroSlideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes heroRingIn{from{opacity:0;transform:scale(0.92)}to{opacity:var(--hero-ring-opacity);transform:scale(1)}}
@keyframes heroRuneIn{from{opacity:0;transform:scale(0.88)}to{opacity:1;transform:scale(1)}}
@keyframes heroNavIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes ringDrift{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero-bio{font-size:1.2rem;font-style:italic;color:var(--read);font-weight:500;max-width:430px;margin-bottom:3rem;min-height:4.5em;line-height:1.75}
.hero-contact-icons{
  display:flex;
  align-items:center;
  gap:0.55rem;
  margin:-1.6rem 0 1.4rem;
}
.hero-contact-icon{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0.5px solid rgba(10,10,10,0.2);
  background:rgba(247,245,240,0.55);
  border-radius:50%;
  text-decoration:none;
  opacity:0;
  transform:translateY(8px) scale(0.96);
  animation:heroContactIn 0.75s var(--ease) forwards,heroContactFloat 4.8s ease-in-out infinite;
  transition:transform 0.35s var(--ease),border-color 0.35s var(--ease),background 0.35s var(--ease),box-shadow 0.35s var(--ease);
}
.hero-contact-icon img{
  width:14px;
  height:14px;
  object-fit:contain;
  opacity:0.72;
  transition:opacity 0.35s var(--ease),filter 0.35s var(--ease);
}
.hero-contact-icon:hover{
  transform:translateY(-3px) scale(1.03);
  border-color:rgba(10,10,10,0.42);
  background:rgba(247,245,240,0.92);
  box-shadow:0 8px 18px rgba(10,10,10,0.08);
}
.hero-contact-icon:hover img{
  opacity:0.95;
  filter:contrast(1.05);
}
.hero-contact-icon:nth-child(1){animation-delay:0.08s,1.1s}
.hero-contact-icon:nth-child(2){animation-delay:0.16s,1.25s}
.hero-contact-icon:nth-child(3){animation-delay:0.24s,1.4s}
.hero-contact-icon:nth-child(4){animation-delay:0.32s,1.55s}
.hero-contact-icon:nth-child(5){animation-delay:0.4s,1.7s}
@keyframes heroContactIn{
  from{opacity:0;transform:translateY(8px) scale(0.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes heroContactFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
.hero-bio-text,.hero-type-text{display:inline}
.hero-type-char{display:inline}
.hero-type-char.glyph,.bio-char.glyph{
  font-family:'Cinzel',serif;font-style:normal;font-weight:400;color:var(--muted);
  letter-spacing:0.04em;opacity:0.7
}
.hero-type-char.locked,.bio-char.locked{animation:bioCarve 0.22s var(--ease) forwards}
.hero-bio-cursor{
  display:inline-block;width:1.5px;height:0.95em;margin-left:3px;vertical-align:text-bottom;
  background:linear-gradient(180deg,var(--ink),rgba(10,10,10,0.35));
  box-shadow:0 0 8px rgba(10,10,10,0.2);animation:runeCursor 1.15s ease-in-out infinite
}
.hero-bio-cursor.done{opacity:0;animation:none;transition:opacity 0.6s var(--ease)}
.hero-bio.is-typing .hero-bio-cursor.done{opacity:0.25;animation:runeCursor 2.4s ease-in-out infinite}
.bio-char{display:inline}
@keyframes bioCarve{
  from{opacity:0.4;transform:translateY(2px);filter:blur(1px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes runeCursor{
  0%,100%{opacity:1;transform:scaleY(1)}
  50%{opacity:0.3;transform:scaleY(0.82)}
}
.cta{display:inline-flex;align-items:center;gap:0.6rem;font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.3em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;transition:gap 0.4s var(--ease),opacity 0.3s}
.cta:hover{gap:1.1rem;opacity:0.88}
.cta span.arrow{display:inline-block;transition:transform 0.4s var(--ease)}
.cta:hover span.arrow{transform:translateX(3px)}

.cta-outline{
  display:inline-flex;align-items:center;gap:0.75rem;font-family:'Cinzel',serif;
  font-size:11px;letter-spacing:0.25em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);border:1px solid var(--border);padding:0.85rem 1.75rem;
  transition:background 0.4s var(--ease),color 0.4s var(--ease),border-color 0.4s var(--ease),gap 0.4s var(--ease);
  margin-top:0.5rem;
}
.cta-outline svg{transition:transform 0.4s var(--ease);opacity:0.85}
.cta-outline:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);gap:0.95rem}
.cta-outline:hover svg{transform:translateY(-1px)}

.hero-right{background:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2rem;position:relative;overflow:hidden;padding:3rem}
/* faint concentric archive rings behind the rune */
.hero-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hero-rings::before{
  content:'';position:absolute;width:min(78%,440px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(247,245,240,0.07) 0%,rgba(247,245,240,0.02) 42%,transparent 72%);
  pointer-events:none
}
.hero-rings svg{
  position:relative;z-index:1;opacity:var(--hero-ring-opacity);transform-origin:center center;
  filter:drop-shadow(0 0 14px rgba(247,245,240,0.08))
}
.hero-rings svg circle{vector-effect:non-scaling-stroke}
.hero-big-rune{position:relative;z-index:2;will-change:transform,opacity}
.hero-big-rune svg{display:block;animation:breathe 14s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(1deg) scale(1.015)}}
.hero-tagline{font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.35em;text-transform:uppercase;color:#fff;text-align:center;position:relative;z-index:2;opacity:1;will-change:transform,opacity}
.hero-scroll-hint{position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.4em;text-transform:uppercase;color:rgba(247,245,240,0.52);display:flex;flex-direction:column;align-items:center;gap:0.6rem;z-index:2}
.hero-scroll-hint::after{content:'';width:0.5px;height:34px;background:linear-gradient(rgba(247,245,240,0.55),transparent);animation:hintline 2.4s ease-in-out infinite}
@keyframes hintline{0%{transform:scaleY(0.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0.2);transform-origin:top}}

/* ═══ 6. SKILLS ════════════════════════════════════════════════ */
.skills-section{background:var(--ink);color:var(--paper);padding:7rem 4rem;border-top:0.5px solid rgba(247,245,240,0.06)}
.skills-section .section-label{color:var(--on-dark-muted)}
.skills-section .section-label::after{background:rgba(247,245,240,0.14)}
.skills-headline{font-family:'Cinzel',serif;font-size:clamp(1.8rem,3vw,3.2rem);font-weight:400;line-height:1.15;max-width:620px;margin-bottom:1rem}
.skills-sub{font-style:italic;color:var(--on-dark-read);font-weight:400;max-width:500px;margin-bottom:5rem;font-size:1.08rem}
.skill-clusters{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.cluster{border-top:0.5px solid rgba(247,245,240,0.12);padding-top:2rem;transition:border-color 0.5s}
.cluster:hover{border-top-color:rgba(247,245,240,0.4)}
.cluster-icon{margin-bottom:1.25rem;position:relative;width:38px;height:46px}
.cluster-icon svg{display:block;transition:transform 0.8s var(--ease)}
/* glowing rune separator dot */
.cluster-icon::after{content:'';position:absolute;right:-1rem;top:50%;width:3px;height:3px;border-radius:50%;background:rgba(247,245,240,0.5);box-shadow:0 0 8px rgba(247,245,240,0.5);opacity:0;transition:opacity 0.5s}
.cluster:hover .cluster-icon svg{transform:rotate(-6deg) scale(1.08)}
.cluster:hover .cluster-icon::after{opacity:1}
.cluster-name{font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:rgba(247,245,240,0.72);margin-bottom:1.5rem;transition:color 0.4s}
.cluster:hover .cluster-name{color:rgba(247,245,240,0.95)}
.cluster-items{display:flex;flex-direction:column;gap:1.2rem}
.skill-row{display:flex;flex-direction:column;gap:0.4rem}
.skill-name{font-family:'Cinzel',serif;font-size:13px;letter-spacing:0.1em;color:rgba(247,245,240,0.96)}
.skill-bar-bg{width:100%;height:1.5px;background:rgba(247,245,240,0.16);position:relative;overflow:hidden}
.skill-bar-fill{height:100%;background:rgba(247,245,240,0.82);width:0;transition:width 1.3s var(--ease)}
.skill-bar-fill.animate{width:var(--pct)}

.skills-carousel-controls{display:none;align-items:center;justify-content:center;gap:1rem;margin-top:1.75rem}
.carousel-hint{display:none}
.carousel-btn{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:0.5px solid rgba(247,245,240,0.18);border-radius:50%;background:transparent;color:rgba(247,245,240,0.65);cursor:pointer;transition:border-color 0.3s,color 0.3s,opacity 0.3s}
.carousel-btn:hover:not(:disabled){border-color:rgba(247,245,240,0.45);color:rgba(247,245,240,0.95)}
.carousel-btn:disabled{opacity:0.25;cursor:default}
.carousel-dots{display:flex;align-items:center;gap:0.45rem;min-height:1.5rem}
.carousel-dot{width:6px;height:6px;padding:0;border:none;border-radius:50%;background:rgba(247,245,240,0.22);cursor:pointer;transition:width 0.35s var(--ease),background 0.35s var(--ease)}
.carousel-dot.active{width:1.35rem;border-radius:3px;background:rgba(247,245,240,0.85)}

.tech-strip{border-top:0.5px solid rgba(247,245,240,0.08);margin-top:5rem;padding-top:2.5rem;overflow:hidden;white-space:nowrap;position:relative}
.tech-strip::before,.tech-strip::after{content:'';position:absolute;top:0;bottom:0;width:8rem;z-index:2}
.tech-strip::before{left:0;background:linear-gradient(to right,var(--ink),transparent)}
.tech-strip::after{right:0;background:linear-gradient(to left,var(--ink),transparent)}
.tech-marquee{display:inline-flex;gap:3rem;animation:scroll 38s linear infinite}
.tech-strip:hover .tech-marquee{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.tech-pill{font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:rgba(247,245,240,0.48);border:0.5px solid rgba(247,245,240,0.16);padding:0.5rem 1.2rem;white-space:nowrap;transition:color 0.4s,border-color 0.4s}
.tech-pill:hover{color:rgba(247,245,240,0.88);border-color:rgba(247,245,240,0.4)}

/* ═══ 7. STORY TIMELINE ════════════════════════════════════════ */
.story{padding:7rem 4rem;border-top:0.5px solid var(--border)}
.section-label{font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);margin-bottom:3rem;display:flex;align-items:center;gap:1rem}
.section-label::after{content:'';flex:1;height:0.5px;background:var(--border)}
.story-intro{font-family:'Cinzel',serif;font-size:clamp(1.6rem,2.8vw,2.8rem);font-weight:400;line-height:1.2;max-width:700px;margin-bottom:5rem}
.story-intro em{font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.1em;color:var(--read)}
.timeline{display:flex;flex-direction:column;gap:0;position:relative}
/* track + fill (saga scroll) */
.timeline::before{content:'';position:absolute;left:90px;top:0;bottom:0;width:0.5px;background:var(--border)}
.timeline-progress{position:absolute;left:90px;top:0;width:1.5px;height:0;background:var(--ink);z-index:1;transform:translateX(-0.5px)}
.tl-item{display:grid;grid-template-columns:90px 1fr;gap:3rem;padding:3rem 0;border-bottom:0.5px solid var(--border);position:relative;opacity:0.88;transition:opacity 0.7s var(--ease)}
.tl-item.active{opacity:1}
.tl-item:last-child{border-bottom:none}
.tl-year{font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.15em;color:var(--muted);text-align:right;padding-top:4px;padding-right:0.75rem;position:relative;z-index:2}
.tl-year::after{content:'';position:absolute;right:-3.3rem;top:10px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);transition:background 0.5s,transform 0.5s var(--ease);z-index:3}
.tl-item.active .tl-year::after{background:var(--ink);transform:scale(1.25)}
.tl-content{padding-left:1.25rem;position:relative;z-index:1}
/* each saga rune sits in a carved marker seal */
.tl-rune{margin-bottom:1.4rem;width:auto;height:auto;border:none;display:flex;align-items:center;justify-content:flex-start;position:relative;background:transparent}
.tl-rune svg{display:block;will-change:transform}
.tl-item.active .tl-rune{border:none;background:transparent}
.tl-rune::before,.tl-rune::after{display:none}
.tl-title{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:500;margin-bottom:0.5rem;letter-spacing:0.05em}
.tl-tag{font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.25em;text-transform:uppercase;color:var(--muted);border:0.5px solid rgba(10,10,10,0.16);padding:0.25rem 0.7rem;display:inline-block;margin-bottom:1rem}
.tl-text{font-size:1.08rem;color:var(--read);font-style:italic;font-weight:500;line-height:1.75;max-width:620px}
/* per-element stagger inside a timeline item */
html.js .tl-item .tl-rune,html.js .tl-item .tl-year,html.js .tl-item .tl-title,html.js .tl-item .tl-tag,html.js .tl-item .tl-text{opacity:1;transform:none;transition:none}
html.js .tl-item.in .tl-rune,html.js .tl-item.in .tl-year,html.js .tl-item.in .tl-title,html.js .tl-item.in .tl-tag,html.js .tl-item.in .tl-text{opacity:1;transform:none}

/* ═══ 8. RUNE KEY + CONVERTER ══════════════════════════════════ */
.legend{padding:6rem 4rem;border-top:0.5px solid var(--border)}
.legend-heading{font-family:'Cinzel',serif;font-size:2rem;font-weight:400;margin-bottom:1rem}
.legend-sub{font-style:italic;color:var(--read);font-weight:500;max-width:520px;margin-bottom:4rem;font-size:1.05rem}
.alphabet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:2.5rem 1.5rem;margin-bottom:5rem}
.alpha-cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0.75rem 0.25rem;position:relative;transition:transform 0.45s var(--ease);cursor:crosshair}
.alpha-cell svg{transition:transform 0.45s var(--ease)}
.alpha-cell:hover{transform:translateY(-4px)}
.alpha-cell:hover svg{transform:scale(1.18)}
.alpha-letter{font-family:'Cinzel',serif;font-size:18px;font-weight:500;color:var(--ink)}
.alpha-sub{font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase}
/* tooltip */
.alpha-cell .tip{position:absolute;top:-10px;left:50%;transform:translate(-50%,-4px);background:var(--ink);color:var(--paper);font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.25em;text-transform:uppercase;padding:0.35rem 0.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.3s var(--ease),transform 0.3s var(--ease);z-index:5}
.alpha-cell:hover .tip{opacity:1;transform:translate(-50%,-8px)}

/* name converter — ancient inscription preview */
.inscribe{
  position:relative;margin-top:2rem;
  border:1px solid rgba(10,10,10,0.14);
  background:linear-gradient(165deg,rgba(10,10,10,0.055) 0%,rgba(10,10,10,0.02) 55%,rgba(10,10,10,0.04) 100%);
  padding:3rem 3rem 3.25rem;
  box-shadow:0 20px 48px rgba(10,10,10,0.07),inset 0 1px 0 rgba(247,245,240,0.65)
}
.inscribe::before{
  content:'';position:absolute;top:0;left:2.5rem;right:2.5rem;height:1px;
  background:linear-gradient(90deg,transparent,rgba(10,10,10,0.22) 18%,rgba(10,10,10,0.22) 82%,transparent)
}
.inscribe-label{
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.35em;text-transform:uppercase;
  color:var(--ink);margin-bottom:1.75rem;display:flex;align-items:center;gap:1.25rem
}
.inscribe-label::after{content:'';flex:1;height:0.5px;background:rgba(10,10,10,0.12)}
.inscribe-input{
  width:100%;max-width:100%;background:rgba(247,245,240,0.45);
  border:1px solid rgba(10,10,10,0.12);border-bottom:1px solid rgba(10,10,10,0.28);
  font-family:'Cinzel',serif;font-size:1.25rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink);padding:0.85rem 1rem;outline:none;
  transition:border-color 0.45s var(--ease),background 0.45s var(--ease),box-shadow 0.45s var(--ease)
}
.inscribe-input::placeholder{color:var(--muted);opacity:0.78;letter-spacing:0.12em}
.inscribe-input:focus{
  border-color:rgba(10,10,10,0.35);background:var(--paper);
  box-shadow:0 0 0 3px rgba(10,10,10,0.06)
}
.inscribe-stage{
  margin-top:2rem;min-height:96px;padding:1.75rem 1.25rem;
  display:flex;flex-wrap:wrap;gap:14px 10px;align-items:flex-end;
  border:0.5px solid rgba(10,10,10,0.1);background:rgba(10,10,10,0.03)
}
.inscribe-stage:empty::after{
  content:'Your runes appear here as you type';
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1rem;
  color:var(--muted);opacity:0.72;letter-spacing:0.02em
}
.inscribe-stage .ins-cell{display:flex;flex-direction:column;align-items:center;gap:5px;opacity:0;animation:rise 0.55s var(--ease) forwards}
.inscribe-stage .ins-letter{font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.12em;color:var(--read)}
.inscribe-stage .ins-space{width:24px}
.inscribe-hint{
  margin-top:1.35rem;font-style:italic;font-weight:500;color:var(--read);
  font-size:0.98rem;opacity:1;margin-bottom:1.2rem;line-height:1.65
}
.inscribe .saga-history-label{color:var(--muted);opacity:0.88}
.inscribe .saga-chip{color:var(--ink);border-color:rgba(10,10,10,0.18);background:rgba(247,245,240,0.5)}
.inscribe .saga-chip::before{background:rgba(10,10,10,0.05)}
.inscribe .saga-chip:hover{border-color:rgba(10,10,10,0.45);color:var(--ink)}
.inscribe .saga-chip.chip-active{border-color:var(--ink);background:rgba(10,10,10,0.06)}
.inscribe .saga-action{margin-top:0.25rem}
.inscribe .saga-btn{margin-bottom:0;cursor:crosshair}
.saga-history{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-bottom:1.4rem}
.saga-history-label{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--read);opacity:0.55;margin-right:0.25rem;white-space:nowrap}
.saga-chip{background:transparent;border:1px solid rgba(247,245,240,0.18);color:var(--paper);font-family:inherit;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.3rem 0.85rem;border-radius:2px;cursor:pointer;transition:background 0.2s,border-color 0.2s,color 0.2s;position:relative;overflow:hidden}
.saga-chip::before{content:'';position:absolute;inset:0;background:rgba(247,245,240,0.04);opacity:0;transition:opacity 0.2s}
.saga-chip:hover{border-color:rgba(247,245,240,0.45);color:var(--paper)}
.saga-chip:hover::before{opacity:1}
.saga-chip.chip-active{border-color:rgba(247,245,240,0.6);background:rgba(247,245,240,0.07)}
.saga-session-badge{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(247,245,240,0.4);margin-bottom:0.6rem}
.saga-session-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:rgba(180,160,100,0.7);flex-shrink:0}
.saga-action{display:flex;justify-content:flex-start}
.saga-btn{background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:0.8rem 2rem;font-size:10px;margin-bottom:2rem}
.saga-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--border)}
.saga-card{display:none;opacity:0;transform:translateY(15px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);margin-top:1rem;position:relative;perspective:1000px;--card-glow-color:rgba(247,245,240,0.3);--card-rune-color:#fff}
.saga-card.active{display:block;opacity:1;transform:none}
.saga-card-glow{position:absolute;inset:-2px;background:linear-gradient(45deg,var(--card-glow-color),rgba(10,10,10,0.9),var(--card-glow-color));z-index:0;filter:blur(8px);opacity:0.6;animation:sagaGlow 4s ease-in-out infinite alternate;transition:transform 0.1s ease-out, background 0.6s var(--ease)}
@keyframes sagaGlow{0%{opacity:0.3;filter:blur(8px)}100%{opacity:0.8;filter:blur(12px)}}
.saga-card-inner{padding:4rem;background:#050505;color:var(--paper);position:relative;overflow:hidden;border:1px solid rgba(247,245,240,0.15);box-shadow:inset 0 0 80px rgba(0,0,0,0.8),0 30px 60px rgba(0,0,0,0.6);z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform 0.1s ease-out;transform-style:preserve-3d;will-change:transform}
.saga-card-inner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%, var(--card-glow-color), transparent 70%);pointer-events:none;opacity:0.6;transition:background 0.6s var(--ease)}
.saga-name-runes{display:flex;gap:6px;margin-bottom:0.75rem;flex-wrap:wrap;justify-content:center;position:relative;z-index:2;min-height:76px}
.saga-rune-large-cell{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;animation:sagaRuneRise 0.65s var(--ease) forwards}
.saga-rune-letter{font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.18em;color:rgba(247,245,240,0.78);text-transform:uppercase}
.saga-rune-space{width:20px}
@keyframes sagaRuneRise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.saga-era{font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.4em;text-transform:uppercase;color:rgba(247,245,240,0.58);margin-bottom:1rem;position:relative;z-index:2}
.saga-title{font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.4em;text-transform:uppercase;color:rgba(247,245,240,0.84);margin-bottom:2rem;position:relative;z-index:2}
.saga-divider{width:40px;height:1px;background:rgba(247,245,240,0.55);margin:1.5rem auto 2.5rem;box-shadow:0 0 10px var(--card-glow-color)}
.saga-tale{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.25rem;font-style:italic;font-weight:500;color:rgba(247,245,240,0.96);line-height:1.95;position:relative;z-index:2;max-width:580px;letter-spacing:0.02em;text-shadow:0 1px 12px rgba(0,0,0,0.7)}
.saga-stat-label{font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.2em;color:rgba(247,245,240,0.58);text-transform:uppercase}
.saga-stat-val{font-size:0.82rem;color:rgba(247,245,240,0.95);letter-spacing:0.04em;text-align:center;line-height:1.35;word-break:break-word;max-width:100%;text-shadow:0 0 8px rgba(247,245,240,0.25)}
.saga-card-actions{display:flex;gap:1rem;margin-top:3.5rem;position:relative;z-index:2;flex-wrap:wrap;justify-content:center}
.saga-share-btn{background:transparent;color:var(--paper);border:0.5px solid rgba(247,245,240,0.3);padding:0.8rem 1.5rem;font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;cursor:pointer;transition:all 0.4s var(--ease);display:flex;align-items:center;gap:0.75rem}
.saga-share-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ═══ 9. ABOUT ═════════════════════════════════════════════════ */
.about{display:grid;grid-template-columns:1fr 1fr;border-top:0.5px solid var(--border)}
.about-left{padding:7rem 4rem;border-right:0.5px solid var(--border)}
/* ink-treated archival portrait */
.portrait{max-width:300px;margin-bottom:3rem}
.portrait-frame{position:relative;border:0.5px solid var(--border);padding:9px;background:rgba(10,10,10,0.025)}
.portrait-frame::before,.portrait-frame::after{content:'';position:absolute;width:10px;height:10px;border-color:var(--ink)}
.portrait-frame::before{top:-1px;left:-1px;border-top:0.5px solid;border-left:0.5px solid}
.portrait-frame::after{bottom:-1px;right:-1px;border-bottom:0.5px solid;border-right:0.5px solid}
.portrait-media{position:relative;overflow:hidden}
.portrait-media img{display:block;width:100%;height:auto;filter:grayscale(1) sepia(0.3) contrast(1.06) brightness(1.03);transition:filter 0.9s var(--ease)}
/* parchment duotone wash so the photo reads like an inked plate */
.portrait-media::after{content:'';position:absolute;inset:0;background:linear-gradient(165deg,rgba(247,245,240,0.16),rgba(10,10,10,0.22));mix-blend-mode:multiply;pointer-events:none}
.portrait:hover .portrait-media img{filter:grayscale(0.5) sepia(0.12) contrast(1.04) brightness(1.04)}
/* maker's-mark rune in the corner */
.portrait-mark{position:absolute;right:14px;bottom:12px;z-index:2;opacity:0.7;mix-blend-mode:screen}
.portrait-mark svg{display:block}
.portrait figcaption{font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);margin-top:1rem;display:flex;align-items:center;gap:0.65rem}
.portrait figcaption::before{content:'';width:24px;height:0.5px;background:var(--ink)}
.about-heading{font-family:'Cinzel',serif;font-size:clamp(1.8rem,3vw,3rem);font-weight:400;line-height:1.2;margin-bottom:2rem}
.about-text{color:var(--read);font-style:italic;font-weight:500;font-size:1.12rem;margin-bottom:1.2rem}
.about-right{padding:7rem 4rem;display:flex;flex-direction:column;gap:3rem}
.value-item{display:flex;gap:1.5rem;align-items:flex-start}
.value-rune{flex-shrink:0}
.value-rune svg{display:block}
.value-label{font-family:'Cinzel',serif;font-size:13px;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:0.4rem}
.value-desc{font-size:1.02rem;color:var(--read);font-style:italic;font-weight:500;line-height:1.6}

/* ═══ 10. CONTACT ══════════════════════════════════════════════ */
.contact{background:var(--ink);color:var(--paper);padding:8rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:6rem}
.contact .section-label{color:var(--on-dark-muted)}
.contact .section-label::after{background:rgba(247,245,240,0.14)}
.contact-heading{font-family:'Cinzel',serif;font-size:clamp(1.8rem,3vw,3rem);font-weight:400;line-height:1.2;margin-bottom:1.5rem}
.contact-sub{color:var(--on-dark-read);font-style:italic;font-weight:500}
.contact-meta{margin-top:2.2rem;display:flex;flex-direction:column;gap:0.8rem;max-width:500px}
.contact-meta-item{
  border:0.5px solid rgba(247,245,240,0.18);
  background:rgba(247,245,240,0.03);
  text-decoration:none;
  color:var(--paper);
  padding:0.9rem 1rem;
  display:flex;
  flex-direction:column;
  gap:0.2rem;
  transition:border-color 0.35s var(--ease),background 0.35s var(--ease),transform 0.35s var(--ease);
}
.contact-meta-item:hover{
  border-color:rgba(247,245,240,0.42);
  background:rgba(247,245,240,0.08);
  transform:translateY(-1px);
}
.contact-meta-item-static:hover{transform:none}
.contact-meta-label{
  font-family:'Cinzel',serif;
  font-size:9px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:rgba(247,245,240,0.62);
}
.contact-meta-value{
  font-family:'Cormorant Garamond',serif;
  font-size:1.05rem;
  font-style:italic;
  color:rgba(247,245,240,0.92);
}
.contact-form{display:flex;flex-direction:column;gap:2rem}
.form-group{display:flex;flex-direction:column;gap:0.5rem;position:relative}
.form-group label{font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.25em;text-transform:uppercase;color:rgba(247,245,240,0.78);transition:color 0.4s}
.form-group.focused label{color:rgba(247,245,240,0.98)}
.input-wrap{position:relative}
.form-group input,.form-group textarea{width:100%;background:transparent;border:none;border-bottom:0.5px solid rgba(247,245,240,0.38);color:var(--paper);font-family:'Cormorant Garamond',serif;font-size:1.08rem;padding:0.75rem 0;outline:none;resize:none}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(247,245,240,0.58);font-style:italic}
/* animated underline drawn from the centre on focus */
.input-underline{position:absolute;left:0;bottom:0;height:1px;width:100%;transform:scaleX(0);transform-origin:center;background:rgba(247,245,240,0.85);transition:transform 0.55s var(--ease)}
.form-group.focused .input-underline{transform:scaleX(1)}
.submit-btn{align-self:flex-start;background:var(--paper);color:var(--ink);border:none;font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;text-decoration:none;padding:0.95rem 2.6rem;cursor:crosshair;transition:opacity 0.3s,gap 0.4s var(--ease);display:flex;align-items:center;gap:0.75rem;overflow:hidden}
.submit-btn:hover{gap:1.1rem;opacity:0.85}
.submit-btn svg{display:block;transition:transform 0.6s var(--ease)}
.submit-btn.sent svg{transform:translateY(-2px) rotate(360deg)}
.submit-btn:disabled{cursor:default}
#form-msg{color:rgba(247,245,240,0.78);font-style:italic;font-size:0.95rem;opacity:0;transform:translateY(8px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease)}
#form-msg.show{opacity:1;transform:none}
#form-msg.error{color:rgba(255,180,180,0.85)}


footer{background:var(--ink);color:rgba(247,245,240,0.42);border-top:0.5px solid rgba(247,245,240,0.1);padding:1.75rem 4rem;display:flex;justify-content:space-between;align-items:center;font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.25em;text-transform:uppercase}
.footer-logo{display:flex;flex-direction:column;align-items:flex-start;gap:0.55rem}
.logo-stamp-frame{border:0.5px solid rgba(247,245,240,0.22);padding:0.65rem 0.75rem 0.5rem;background:rgba(247,245,240,0.03)}
.logo-stamp-runes{display:flex;align-items:flex-end;gap:5px}
.logo-stamp-cell{display:flex;flex-direction:column;align-items:center;gap:3px}
.logo-stamp-cell svg{display:block;width:28px;height:34px}
.logo-stamp-letter{font-size:7px;letter-spacing:0.12em;color:rgba(247,245,240,0.62)}
.logo-stamp-sub{font-size:8px;letter-spacing:0.28em;color:rgba(247,245,240,0.72);margin:0}

/* ═══ 11. RESPONSIVE ═══════════════════════════════════════════ */
@media(max-width:900px){
  .skill-clusters{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  body{font-size:19px}
  nav{padding:1rem 1.1rem}
  .nav-logo{gap:0.15rem}
  .nav-logo-word{gap:1px}
  .nav-rune svg{width:20px !important;height:25px !important}
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(247,245,240,0.98);border-bottom:0.5px solid var(--border)
  }
  nav.nav-open .nav-links{display:flex}
  .nav-links li{border-top:0.5px solid var(--border)}
  .nav-links a{display:block;padding:1rem 1.1rem;font-size:12px;letter-spacing:0.1em}
  nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
  nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .hero{grid-template-columns:1fr;padding-top:58px}
  .hero-left{padding:3.2rem 1.1rem}
  .hero-right{min-height:78vw;padding:2rem 1.1rem}
  .eyebrow{letter-spacing:0.2em}
  .hero-title-line{font-size:12px;letter-spacing:0.14em;margin-bottom:1.2rem}
  .hero-bio{font-size:1.08rem;margin-bottom:2rem}
  .hero-contact-icons{margin:-0.7rem 0 1.1rem}
  .hero-contact-icon{width:32px;height:32px}
  .hero-contact-icon img{width:13px;height:13px}
  .skills-section{padding:4rem 1.5rem}
  .skills-sub{margin-bottom:2.5rem}
  .skills-carousel{position:relative;margin-inline:-1.5rem}
  .skills-carousel::before,.skills-carousel::after{
    content:'';position:absolute;top:0;bottom:3.5rem;width:2.75rem;z-index:2;pointer-events:none;
    transition:opacity 0.6s var(--ease)
  }
  .skills-carousel::before{left:0;background:linear-gradient(to right,var(--ink),transparent)}
  .skills-carousel::after{right:0;background:linear-gradient(to left,var(--ink),transparent);animation:edgePulse 2.4s ease-in-out infinite}
  .skills-carousel.engaged::before,.skills-carousel.engaged::after{opacity:0.35}
  .skills-carousel.engaged::after{animation:none}
  @keyframes edgePulse{0%,100%{opacity:1}50%{opacity:0.45}}
  .carousel-hint{
    display:flex;align-items:center;justify-content:center;gap:0.4rem;
    margin:0 1.5rem 1rem;font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.28em;
    text-transform:uppercase;color:rgba(247,245,240,0.58);
    transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)
  }
  .carousel-hint.hidden{opacity:0;transform:translateY(-4px);pointer-events:none}
  .carousel-hint-arrows{display:inline-flex;letter-spacing:-0.15em;animation:hintSlide 1.9s ease-in-out infinite}
  @keyframes hintSlide{0%,100%{transform:translateX(0);opacity:0.35}50%{transform:translateX(7px);opacity:1}}
  .skill-clusters{
    display:flex;flex-direction:row;gap:1rem;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:0 1.5rem 0.5rem;grid-template-columns:unset
  }
  .skill-clusters::-webkit-scrollbar{display:none}
  .cluster{
    flex:0 0 min(88vw,340px);scroll-snap-align:center;scroll-snap-stop:always;
    border-top:none;border:0.5px solid rgba(247,245,240,0.14);padding:1.5rem 1.25rem
  }
  .skills-carousel-controls{display:flex}
  .tech-strip{margin-top:3rem}
  .story{padding:4rem 1.5rem}
  .timeline{--tl-rail:14px}
  .timeline::before,.timeline-progress{
    left:var(--tl-rail);
    transform:translateX(-50%)
  }
  .timeline-progress{width:1.5px}
  .tl-item{
    grid-template-columns:1fr;
    gap:0.85rem;
    padding:2.25rem 0 2.25rem calc(var(--tl-rail) + 1.35rem)
  }
  .tl-year{
    text-align:left;
    padding:0;
    position:static
  }
  .tl-year::after{
    right:auto;
    left:var(--tl-rail);
    top:calc(2.25rem + 2px);
    transform:translate(-50%,0)
  }
  .tl-item.active .tl-year::after{transform:translate(-50%,0) scale(1.25)}
  .tl-content{padding-left:0}
  .tl-rune{margin-bottom:1rem;margin-left:0}
  .tl-rune svg{width:34px;height:42px}
  .legend{padding:4rem 1.5rem}.inscribe{padding:2rem 1.5rem 2.25rem;margin-top:1.5rem}
  .inscribe::before{left:1.5rem;right:1.5rem}
  .inscribe-stage{padding:1.25rem 1rem;min-height:80px}
  .about{grid-template-columns:1fr}.about-left{padding:4rem 1.5rem;border-right:none;border-bottom:0.5px solid var(--border)}.about-right{padding:4rem 1.5rem}
  .contact{grid-template-columns:1fr;padding:4rem 1.5rem;gap:3rem}
  .contact-meta{margin-top:1.6rem}
  .submit-btn{width:100%;justify-content:center}
  footer{flex-direction:column;gap:1.25rem;text-align:center;padding:1.5rem}
  .footer-logo{align-items:center}
}
@media(max-width:480px){
  .skills-section,.story,.legend,.about-left,.about-right,.contact{padding-left:1rem !important;padding-right:1rem !important}
  .skills-carousel{margin-inline:-1rem}
  .carousel-hint{margin-inline:1rem}
  .skill-clusters{padding-inline:1rem}
  .hero-left,.hero-right{padding-left:1rem !important;padding-right:1rem !important}
  .name-row{gap:4px}
  .rune-cell svg{width:34px;height:42px}
  .hero-big-rune svg{width:140px;height:140px}
  .hero-scroll-hint{display:none}
  .section-label{letter-spacing:0.22em}
  .legend-heading{font-size:1.55rem}
  .inscribe-input{font-size:1rem;letter-spacing:0.1em}
  .tech-marquee{gap:1.8rem}
  .tech-pill{letter-spacing:0.16em;padding:0.45rem 0.8rem}
  .tl-title{font-size:1rem}
  .saga-card-inner{padding:3rem 1.5rem}
  .saga-tale{font-size:1rem}
  .saga-stats{flex-wrap:wrap;gap:1.5rem;justify-content:center;padding:1rem}
}