/* ══════════════════════════════════════════════
   PORTFOLIO V2 — Warm charcoal palette, zero blue,
   horn-shaped hero bottom, parallax strips,
   editorial gallery cards, per-panel nature videos
   ══════════════════════════════════════════════ */

:root {
  /* ── Dark tones: near-neutral black — amber accent does the warmth work ── */
  --hero:        #0e1012;
  --page:        #1f2429;

  /* Floating containers — warm cream */
  --container:   #e6e9ed;

  /* Dark cards */
  --card:        #171a1d;
  --card-hover:  #20242a;
  --card-border: rgba(255,255,255,0.06);
  --card-text:   #edf0f3;
  --card-muted:  #9aa2ab;

  /* Ink on warm container */
  --ink:         #1b2026;
  --ink-soft:    #4a535d;
  --muted:       #7f8892;
  --border:      rgba(0,0,0,0.09);

  /* Accent — warm amber/gold */
  --acc:         #9aa3ad;
  --acc-dim:     rgba(154,163,173,0.18);
  --acc-glow:    rgba(154,163,173,0.34);

  /* On dark surfaces */
  --on-dark:     #f1f4f7;
  --on-dark-m:   #a2a9b1;

  --r:           28px;
  --max:         1060px;
  --pad:         clamp(1.5rem,4vw,2.5rem);
  --ease:        cubic-bezier(0.25,1,0.5,1);

  /* ── Parallax strip image ── set automatically by JS.
     Drop parallax.webp / .jpg / .jpeg / .png into assets/images/ — no code change needed. */
  --parallax-img: none;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:56px}
html,body{margin:0}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  /* Neutral charcoal wash */
  background:
    radial-gradient(ellipse 70% 50% at 92% 4%,  rgba(154,163,173,.10), transparent 55%),
    radial-gradient(ellipse 35% 25% at 50% 50%,  rgba(154,163,173,.04), transparent 70%),
    var(--parallax-img);
  background-size: auto, auto, cover;
  background-position: center;
  background-attachment:fixed;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}

/* ══════════════════════════════════════════════════════
   ATMOSPHERIC LIGHTING — spotlights, glows & ambience
   ══════════════════════════════════════════════════════ */

/* Header: twin focused spotlight cones spill downward from the nav bar */
.site-header::after{
  content:'';
  position:absolute;
  top:100%;left:0;right:0;
  height:160px;
  background:
    radial-gradient(ellipse 26% 100% at 22% 0%, rgba(154,163,173,.22), transparent 78%),
    radial-gradient(ellipse 20% 85%  at 78% 0%, rgba(154,163,173,.17), transparent 72%),
    radial-gradient(ellipse 60% 30%  at 50% 0%, rgba(255,255,255,.04), transparent 85%);
  pointer-events:none;
  z-index:-1;
}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */
.site-header{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  display:flex;align-items:center;
  height:72px;
  padding:0 clamp(1rem,3vw,2rem);
  background:linear-gradient(180deg, rgba(22,27,32,0.98) 0%, rgba(14,16,18,0.98) 100%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(20px);
  transition:box-shadow .3s;
}
.site-header.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.5)}

.brand{
  display:flex;align-items:center;gap:.55rem;
  color:var(--on-dark);text-decoration:none;
  font-weight:700;font-size:1.35rem;
}
.brand-logo{
  width:26px;height:26px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}

.top-nav{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.top-nav a{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--on-dark-m);text-decoration:none;
  font-size:1.05rem;font-weight:500;
  padding:.45rem .9rem;border-radius:8px;
  border:1px solid transparent;
  transition:all .2s;
}
.top-nav a:hover,.top-nav a.active{color:var(--on-dark);background:rgba(255,255,255,0.07)}
.top-nav a.active{border-color:rgba(154,163,173,.25);color:var(--acc)}

.nav-toggle{
  display:none;flex-direction:column;gap:4px;
  background:none;border:none;padding:6px;margin-left:auto;
}
.nav-toggle span{width:18px;height:1.5px;background:var(--on-dark);border-radius:1px;transition:all .25s}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* ══════════════════════════════════════════════
   HERO — Warm dark, atmospheric amber spotlight,
   flat bottom (horns handled by .hero-wings below)
   ══════════════════════════════════════════════ */
.hero{
  position:relative;
  z-index:0;
  height:100vh;min-height:580px;
  background:var(--hero);
  overflow:visible;
  /* NO border-bottom-radius — the .hero-wings div below creates the horn shape */
}

/* Hero background extension — pushes the hero colour 80px below the hero
   box so the projects section's rounded top corners sit fully inside the
   hero-coloured zone. Panels are unaffected (clipped by .hero-rail). */
.hero::after{
  content:'';
  position:absolute;
  bottom:-80px;
  left:0;right:0;
  height:80px;
  background:var(--hero);
  z-index:0;
  pointer-events:none;
}

/* Atmospheric hero background — cool neutral spotlight */
.hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 70% 40%,  rgba(255,255,255,.06),   transparent 50%),
    radial-gradient(ellipse 65% 75% at 20% 58%,  rgba(132,141,151,.17),   transparent 52%),
    radial-gradient(circle 320px  at 80% 16%,    rgba(170,178,188,.07),   transparent 50%),
    radial-gradient(ellipse 80% 28% at 50% 100%, rgba(30,55,110,.22),     transparent 65%),
    var(--hero);
}

/* Parallelogram rail */
.hero-rail-shell{
  position:absolute;inset:0;z-index:6;overflow:hidden;
  /* contain:paint tells Chrome to restrict repaints to this boundary,
     which prevents clip-path polygon repainting from propagating up the
     layer tree on every frame. */
  contain:paint;
}
.hero-rail{
  width:100%;height:100%;
  overflow:hidden;
  padding:6.25rem .5rem 1.5rem;
  cursor:grab;user-select:none;touch-action:pan-y;
  /* Flex here ensures panels are in a horizontal row even before JS wraps
     them in .hero-track — eliminates the "panels scroll in" flash on mobile. */
  display:flex;
  align-items:stretch;
}
.hero-rail.dragging{cursor:grabbing}

.hero-track{
  display:flex;align-items:stretch;
  gap:0;height:100%;
  will-change:transform;
}
/* CSS keyframe — runs entirely on the compositor thread (no JS per-frame cost).
   --hero-loop-w and --hero-scroll-dur are set by JS after measuring panel widths.
   JS adds .is-scrolling to engage; removes it during drag, re-adds on release. */
@keyframes hero-auto-scroll{
  to{ transform:translate3d(calc(-1 * var(--hero-loop-w, 2000px)),0,0); }
}
.hero-track.is-scrolling{
  animation:hero-auto-scroll var(--hero-scroll-dur, 60s) linear infinite;
}

/* Panels — parallelogram shape via clip-path, no transform on the panel itself.
   --panel-offset-x is set in JS (measure → updateClipPath) as tan(8°) × panelHeight px.
   Fallback 64px ≈ tan(8°) × min-height(~456px) so it looks right before JS runs.
   The negative margin-right pulls each panel left by the same offset amount — this
   exactly closes the geometric gap that clip-path creates between adjacent panels. */
.hero-panel{
  position:relative;
  flex:0 0 min(88vw, 960px);
  min-height:100%;
  margin-right:calc(12px - var(--panel-offset-x, 64px));
  clip-path:polygon(
    var(--panel-offset-x, 64px) 0%,
    100% 0%,
    calc(100% - var(--panel-offset-x, 64px)) 100%,
    0% 100%
  );
  border:none;
  background:rgba(20,16,10,.65);
  cursor:pointer;
  /* Promote each panel to its own compositor layer. Chrome then applies
     clip-path natively in the GPU compositing stage — no intermediate
     surface. Without this, nested GPU-promoted video children + clip-path
     force Chrome to blit an off-screen buffer every video frame (~5fps). */
  will-change:transform;
}
/* MP4 panel background — fills rectangular box, clip-path masks to parallelogram.
   opacity:0.85 keeps near-original video colour quality while letting a thin slice
   of the panel's dark background tint through. No CSS filter — filter forces the
   GPU to process every decoded frame and kills smoothness. */
.hero-panel > .panel-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  opacity:0.85;
  z-index:0;
  display:block;
  /* No GPU layer promotion on the video itself. The panel (parent) is the
     compositor layer. Video renders into the panel layer as a plain child.
     Nested layer promotion (video inside clip-path'd panel) forces Chrome
     to create an intermediate surface → the ~5fps issue. */
}

/* Gradient overlay — darkens top edge subtly + bottom strongly for text legibility.
   Slightly heavier than before to compensate for the brighter video. */
.hero-panel-glass{
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0)     28%,
    rgba(0,0,0,0.10)  55%,
    rgba(0,0,0,0.60)  100%
  );
  pointer-events:none;z-index:2;
}

/* Panel content — solid glass card.
   NO backdrop-filter: blur() — it forces a repaint every frame on a moving
   carousel and is the single biggest GPU cost on this page. A solid
   semi-transparent background gives the same "glass" look at zero cost. */
.hero-panel-content{
  position:absolute;
  bottom:8%;left:9%;right:11%;
  z-index:3;
  background:rgba(6,8,14,.48);
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  padding:1rem 1.2rem .9rem;
  box-shadow:
    0 6px 28px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.09);
}
/* When content is used as a link */
a.hero-panel-content{
  display:block;
  text-decoration:none;
  color:inherit;
}
a.hero-panel-content:focus-visible{
  outline:2px solid rgba(255,255,255,.5);
  outline-offset:3px;
}
.panel-num{
  display:none;
}
.hero-panel h2{
  margin:0 0 .35rem;
  font-size:clamp(1.3rem,2.4vw,2rem);
  font-weight:700;line-height:1.15;color:var(--on-dark);
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.hero-panel p{
  margin:0;font-size:clamp(.8rem,1.2vw,1rem);
  color:rgba(237,232,222,.72);
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}

/* Inner glass frame — inset border visible above the video */
.panel-inner-frame{
  position:absolute;
  inset:14px 20px;
  border:1px solid rgba(255,255,255,.10);
  pointer-events:none;
  z-index:1;
  border-radius:4px;
}

/* ── Left overlay — name is the biggest text ── */
.hero-overlay{
  position:absolute;inset:0 auto 0 0;
  width:min(48%,560px);min-width:280px;
  z-index:10;
  display:flex;flex-direction:column;
  justify-content:center;gap:.75rem;
  padding:2rem clamp(1.5rem,5vw,3.5rem);
  background:linear-gradient(90deg,rgba(14,16,18,1) 0%,rgba(14,16,18,1) 45%,rgba(14,16,18,.75) 65%,rgba(14,16,18,.35) 82%,transparent 100%);
  -webkit-mask-image:none;
  mask-image:none;
  pointer-events:none;
}
.hero-overlay>*{pointer-events:auto}

/* Name identity block — name BIG, role small below it */
.hero-identity{
  display:flex;flex-direction:column;
  gap:.55rem;
  margin-bottom:.2rem;
}

/* NAME — the hero. Bigger than or equal to the h1 tagline */
.hero-name-tag{
  display:block;
  font-size:clamp(2.2rem,4.8vw,3.8rem);
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--on-dark);
  line-height:1;
  white-space:nowrap;
}

/* Role — small label below name */
.hero-role-tag{
  display:block;
  font-size:clamp(.85rem,1.35vw,1.05rem);
  font-weight:400;
  color:rgba(237,232,222,.5);
  letter-spacing:.02em;
}

/* Tagline / H1 — medium, below name block */
.hero h1{
  margin:0;
  font-size:clamp(1.25rem,2.5vw,1.8rem);
  font-weight:500;line-height:1.3;
  letter-spacing:-.012em;
  color:rgba(237,232,222,.82);
}

.hero-cta-row{display:flex;gap:.5rem;margin-top:.1rem}
.hero-cta-secondary{margin-top:.4rem}

/* Buttons — portfolio-appropriate frosted glass, NO amber fill */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1.15rem;border-radius:9px;
  font-size:.81rem;font-weight:600;
  text-decoration:none;border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.16) 50%,transparent 75%);
  transform:translateX(-100%);
  transition:transform .5s var(--ease);
}
.btn:hover::after{transform:translateX(100%)}
.btn:hover{transform:translateY(-2px)}

.btn-pearl{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.22);
  color:#fff;
  backdrop-filter:blur(6px);
}
.btn-pearl:hover{
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.34);
  box-shadow:0 4px 20px rgba(255,255,255,.06);
}
.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,0.12);
  color:rgba(255,255,255,.58);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.82);
  border-color:rgba(255,255,255,.2);
}
/* Container-context accent button */
.btn-acc{
  background:var(--acc);color:#fff;
  box-shadow:0 3px 14px var(--acc-glow);
}
.btn-acc:hover{box-shadow:0 6px 22px var(--acc-glow)}

#projects.section{
  position:relative;
  padding-top:40px;
  margin-top:0;
  background:var(--page);
  border-top-left-radius:40px;
  border-top-right-radius:40px;
  border-bottom-left-radius:40px;
  border-bottom-right-radius:40px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
  z-index:1;
}


#projects .container{
  position:relative;
  z-index:1;
}

/* ══════════════════════════════════════════════
   PARALLAX STRIPS — fixed-background photo windows.
   The site scrolls OVER these images — they stay
   pinned as content moves past, like the page is
   layered on top of a photo underneath.
   No gradients. Clean, sharp edges.
   ══════════════════════════════════════════════ */
.parallax-strip{
  height:22px;
  position:relative;
  overflow:hidden;
  background-image: var(--parallax-img);
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
}
/* Second strip — different photo for variety */
.parallax-strip-b{
  background-image: var(--parallax-img);
}
.parallax-books-contact{
  background-image: var(--parallax-img);
  background-position:center 55%;
}

/* .parallax-inner — mobile substitute for fixed-attachment parallax.
   Taller than the strip so JS can shift it up/down to reveal different
   parts of the photo as the user scrolls. Hidden on desktop. */
.parallax-strip .parallax-inner{
  display:none;
  position:absolute;
  width:100%;
  /* 600% tall + top:-250% centres the inner and gives ~2.5× strip-height
     of overflow above/below — room for the JS ±60px scroll shift. */
  height:600%;
  top:-250%;
  left:0;
  background-size:cover;
  background-position:center;
  background-image: var(--parallax-img);
  will-change:transform;
  pointer-events:none;
}
.parallax-strip-b .parallax-inner{
  background-image: var(--parallax-img);
}
.parallax-books-contact .parallax-inner{
  background-image: var(--parallax-img);
  background-position:center 55%;
}

/* Mobile: background-attachment:fixed is broken on touch/iOS.
   Switch to the JS-driven inner div on narrow viewports. */
@media (max-width:900px){
  .parallax-strip{background:none;}
  .parallax-strip .parallax-inner{display:block;}
}

/* ══════════════════════════════════════════════
   SECTIONS — warm cream containers float on page
   ══════════════════════════════════════════════ */
.section{padding:2rem clamp(.75rem,2vw,1.5rem)}
.section+.section{padding-top:1rem}

/* Each section has its own rounded dark background layer,
   so rounded edges are visible against the page background */
.section.reveal-section{
  border-radius:28px;
  /* Remove outer radius if section edge-to-edge — only container is rounded */
}

.container{
  max-width:var(--max);margin:0 auto;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 18% 8%, rgba(255,255,255,.68) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 82% 92%, rgba(180,190,205,.32) 0%, transparent 50%),
    radial-gradient(circle at 50% 45%, rgba(210,215,225,.28) 0%, transparent 70%),
    linear-gradient(168deg, #eef2f8 0%, #e6eaf2 30%, #dde2ec 60%, #d5dbe7 100%);
  border:1px solid rgba(255,255,255,.04);
  border-radius:28px;
  padding:var(--pad);
  box-shadow:0 8px 56px rgba(0,0,0,.48), 0 1px 0 rgba(255,255,255,.06), 0 -2px 24px rgba(154,163,173,.06);
}

/* ── CONTAINER TEXTURE OVERLAY ─────────────────────────────────
   Drop any image into assets/images/card-texture.png to apply it.
   Remove the file and this pseudo-element simply disappears.
   Tweak opacity below to control strength (0.05 = barely there, 0.15 = obvious). */
.container::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:url('../images/card-texture.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  opacity:0.21;
  pointer-events:none;
  z-index:0;
}

/* Ensure all container content sits above the texture overlay */
.container > *{
  position:relative;
  z-index:1;
}

.section-head{text-align:center;margin-bottom:1.5rem}
.section-title{
  margin:0 0 .45rem;
  font-size:clamp(1.25rem,2.2vw,1.65rem);
  font-weight:700;letter-spacing:-.018em;
  color:var(--ink);
}
.section-subtitle{
  margin:0;max-width:72ch;margin-inline:auto;
  font-size:.93rem;font-weight:500;color:var(--ink-soft);line-height:1.7;
}
#proj-subtitle{
  height:calc(1.6em * 2);   /* line-height:1.6 × 2 lines — never shifts */
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.about-blurb{
  margin:0;max-width:720px;margin-inline:auto;
  font-size:.93rem;font-weight:500;color:var(--ink-soft);line-height:1.7;
  text-align:justify;text-align-last:left;hyphens:auto;
}

.reveal-section{
  opacity:0;transform:translateY(24px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.reveal-section.visible{opacity:1;transform:none}

/* Projects section is immediately below the hero — skip the reveal animation
   so it never flashes invisible on first scroll */
#projects.reveal-section{opacity:1;transform:none;transition:none}

/* ══════════════════════════════════════════════
   PROJECTS — Editorial featured + gallery cards
   ══════════════════════════════════════════════ */
.tabs-bar{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.3rem;margin-bottom:.5rem;
}
.tab-btn{
  position:relative;overflow:hidden;
  padding:.4rem .95rem;font-size:.79rem;font-weight:600;
  color:var(--ink-soft);
  border:1px solid var(--border);border-radius:20px;
  background:rgba(0,0,0,.04);
  transition:all .2s;
}
.tab-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.28) 50%,transparent 75%);
  transform:translateX(-110%);
  transition:transform .55s var(--ease);
  pointer-events:none;
}
.tab-btn:hover::after{transform:translateX(110%)}
.tab-btn:hover{color:var(--ink);background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.15)}
.tab-btn.active{
  color:#fff;background:var(--ink);border-color:var(--ink);
  box-shadow:0 2px 10px rgba(26,21,16,.25);
}

.sub-nav-wrapper{margin-bottom:1.2rem}
.sub-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem;
  max-height:0;overflow:hidden;opacity:0;padding:0;
  transition:max-height .32s var(--ease), opacity .25s var(--ease), padding .32s var(--ease);
}
.sub-nav.open{max-height:5rem;opacity:1;padding:.4rem 0;}
.sub-btn{
  position:relative;overflow:hidden;
  padding:.22rem .75rem;font-size:.74rem;font-weight:500;
  color:var(--ink-soft);border:1px solid transparent;
  border-radius:20px;background:transparent;transition:all .2s;
}
.sub-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.32) 50%,transparent 75%);
  transform:translateX(-110%);
  transition:transform .5s var(--ease);
  pointer-events:none;
}
.sub-btn:hover::after{transform:translateX(110%)}
.sub-btn:hover{color:var(--ink);background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1)}
.sub-btn.active{
  color:var(--ink);font-weight:600;
  border-color:rgba(0,0,0,.22);background:rgba(0,0,0,.09);
}

@keyframes slideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.panels-container{height:840px}
.tab-panel{display:none;animation:fadeUp .3s var(--ease)}
.tab-panel.active{display:flex;flex-direction:column;height:100%}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Grid — 3 col; featured spans all */
.projects-grid{display:flex;flex-direction:column;gap:1rem;flex:1}
.gallery-wrap{flex:1;display:flex;flex-direction:column;position:relative;padding-bottom:54px}
.gallery-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-content:start}

/* ── FEATURED CARD — editorial horizontal split ── */
.card.card-featured{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:42% 58%;
  min-height:260px;
  border-radius:14px;
  overflow:hidden;
  background:var(--card);
  border:none;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .3s var(--ease);
}
.card.card-featured:hover{
  border-color:rgba(154,163,173,.22);
  box-shadow:0 22px 52px rgba(0,0,0,.62), 0 6px 16px rgba(0,0,0,.4);
}
.card-editorial-body{
  padding:1.8rem 1.6rem;
  display:flex;flex-direction:column;
  justify-content:center;gap:.6rem;
}
.card-editorial-num{display:none}
.card-editorial-body h3{
  margin:0;font-size:1rem;font-weight:700;
  line-height:1.3;color:var(--card-text);
}
.card-editorial-body p{
  margin:0;font-size:.82rem;color:var(--card-muted);line-height:1.5;
}
.card-editorial-img{position:relative;overflow:hidden}
.card-editorial-img img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.85);
  transition:transform .5s var(--ease),filter .4s;
}
.card.card-featured:hover .card-editorial-img img{transform:scale(1.04);filter:brightness(1)}

/* 3-image strip for featured showcase card */
.card-editorial-imgs{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:3px;
  width:100%;height:100%;
}
.card-editorial-imgs img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.82);
  transition:transform .55s var(--ease),filter .4s;
}
.card.card-featured:hover .card-editorial-imgs img{
  transform:scale(1.05);filter:brightness(1);
}
/* Slight variation so they don't all animate identically */
.card-editorial-imgs img:nth-child(2){transition-delay:.05s}
.card-editorial-imgs img:nth-child(3){transition-delay:.1s}

/* ── GALLERY CARDS — image fill, hover reveals overlay ── */
.card.card-gallery{
  position:relative;border-radius:12px;overflow:hidden;
  aspect-ratio:5/4;background:#211c14;
  border:none;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.card.card-gallery:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 52px rgba(0,0,0,.62), 0 6px 16px rgba(0,0,0,.4);
  border-color:rgba(154,163,173,.22);
}
.card.card-gallery>img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.78);
  transition:transform .5s var(--ease),filter .4s;
}
.card.card-gallery:hover>img{transform:scale(1.06);filter:brightness(.52)}
/* Overlay: title+desc always visible at bottom, links revealed on hover */
.card-gal-body{
  position:absolute;inset:0 0 -6px 0;padding:.9rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(0deg,rgba(10,8,4,.84) 0%,rgba(10,8,4,.49) 42%,transparent 74%);
  transition:transform .38s var(--ease);
}
.card.card-gallery:hover .card-gal-body{transform:translateY(-4px)}
.card-gal-body h3{margin:0 0 .25rem;font-size:.82rem;font-weight:700;color:var(--card-text);line-height:1.3}
.card-gal-body p{
  margin:0 0 .45rem;font-size:.73rem;color:rgba(236,230,216,.72);
  line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Links hidden until hover */
.card.card-gallery .card-links{
  opacity:0;transform:translateY(5px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.card.card-gallery:hover .card-links{opacity:1;transform:none}

/* Touch devices: disable hover lift/shadow (no hover concept, and shadows get
   clipped by the overflow:auto scroll container). Show links always instead. */
@media(hover:none){
  .card.card-gallery:hover{transform:none;box-shadow:none}
  .card.card-gallery:hover>img{transform:none;filter:brightness(.78)}
  .card.card-gallery:hover .card-gal-body{transform:none}
  .card.card-gallery .card-links{opacity:1;transform:none}
  .card.card-featured:hover{box-shadow:none}
  .card.card-featured,.card.card-gallery{-webkit-tap-highlight-color:transparent}
}

.card-links{display:flex;gap:.3rem;flex-wrap:wrap}
.card-links a{
  font-size:.68rem;font-weight:600;
  padding:.16rem .46rem;border-radius:5px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.15);
  color:rgba(236,230,216,.8);
  background:rgba(255,255,255,.05);
  transition:all .2s;
  backdrop-filter:blur(4px);
}
.card-links a:hover{color:var(--acc);border-color:rgba(154,163,173,.4);background:rgba(154,163,173,.1)}

/* Featured card links */
.card-editorial-body .card-links a{border-color:rgba(255,255,255,.1);color:var(--card-muted);background:rgba(255,255,255,.04)}
.card.card-featured .card-links a:hover{color:var(--acc);border-color:rgba(154,163,173,.4);background:rgba(154,163,173,.1)}

/* ── PAGINATION ── */
/* Absolutely pinned to bottom of .gallery-wrap so it never moves regardless of card count */
.pagination{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:center;justify-content:center;
  gap:1.1rem;padding:.6rem 0;
}
.pagination-spacer{visibility:hidden;pointer-events:none}
.page-btn{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.page-btn svg{width:16px;height:16px}
.page-btn:hover:not(:disabled){background:rgba(0,0,0,.05);color:var(--ink-soft);border-color:var(--border);transform:scale(1.08)}
.page-btn:disabled{opacity:.28;cursor:default}
.page-dots{display:flex;gap:.55rem;align-items:center}
.page-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--muted);cursor:pointer;
  transition:all .2s;
}
.page-dot.active{background:var(--ink);transform:scale(1.4)}
.page-dot:hover{background:var(--ink-soft)}

.placeholder-card{
  display:flex;align-items:center;justify-content:center;
  min-height:180px;border:1px dashed rgba(255,255,255,.1);
  grid-column:1/-1;background:rgba(255,255,255,.02);border-radius:12px;
}
.placeholder-card h3{color:var(--card-muted);font-size:.85rem;margin:0}
.placeholder-card p{color:var(--card-muted);opacity:.5;font-size:.78rem;margin:.2rem 0 0}

/* ══════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════ */
.about-roles{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-bottom:2rem}
.role-tag{
  padding:.28rem .75rem;font-size:.72rem;font-weight:600;
  border-radius:5px;border:1px solid var(--border);
  color:var(--ink-soft);background:rgba(0,0,0,.04);transition:all .2s;
}
.role-tag:hover{border-color:var(--acc);color:var(--acc)}

.skills-panel{
  max-width:720px;margin:0 auto 2rem;
  background:rgba(0,0,0,.055);
  border-radius:16px;
  padding:1rem 1.2rem 1.1rem;
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,.16),
    inset 0 -1px 5px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 1px 0 rgba(255,255,255,.09);
}
.skills-note{font-size:.82rem;font-weight:500;color:var(--ink-soft);text-align:center;margin:0 0 .75rem}
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem 1.5rem}
.skill-item{display:flex;flex-direction:column;gap:.22rem}
.skill-label-row{display:flex;justify-content:space-between;font-size:.72rem;font-weight:500;color:var(--ink-soft)}
.pct{color:var(--muted)}
.skill-track{height:4px;border-radius:2px;background:rgba(0,0,0,.08);overflow:hidden}
.skill-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--acc),#e8b04a);width:0;transition:width .9s var(--ease)}

.stack-ribbon{overflow:hidden;border-top:1px solid var(--border);padding:.65rem 0 0;margin-top:.5rem;mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent)}
.stack-ribbon-track{display:flex;gap:.9rem;white-space:nowrap;animation:ribbonScroll 28s linear infinite}
.stack-ribbon-track span{flex-shrink:0;font-size:.7rem;font-weight:500;color:var(--muted);padding:.22rem .6rem;border:1px solid var(--border);border-radius:5px}
@keyframes ribbonScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════
   BOOKS
   ══════════════════════════════════════════════ */
.books-carousel-wrap{
  display:flex;align-items:center;gap:.75rem;
  background:rgba(0,0,0,.055);
  border-radius:16px;
  padding:.85rem 1rem;
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,.16),
    inset 0 -1px 5px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 1px 0 rgba(255,255,255,.09);
}
.books-viewport{flex:1;overflow:hidden;border-radius:10px;padding:16px 0 16px;mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent)}
.books-track{display:flex;gap:.9rem;padding:0;will-change:transform;cursor:grab;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}
.books-track.dragging{cursor:grabbing}

.book-card{flex:0 0 170px;border-radius:10px;overflow:hidden;border:none;background:transparent;transition:transform .3s var(--ease),box-shadow .3s}
.book-card:hover{transform:translateY(-4px);box-shadow:0 6px 14px rgba(0,0,0,.44),0 2px 5px rgba(0,0,0,.22)}
.book-card a{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.book-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
.book-card span{display:none}

.carousel-btn{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--ink);background:var(--ink);display:flex;align-items:center;justify-content:center;transition:all .2s;color:#fff}
.carousel-btn:hover{background:rgba(255,255,255,.05);color:var(--ink-soft);border-color:rgba(255,255,255,.12);transform:scale(1.05)}

/* ══════════════════════════════════════════════
   AI CHAT — Floating, breathing rings
   ══════════════════════════════════════════════ */
.ai-fab{position:fixed;bottom:2.6rem;right:2.4rem;z-index:90;width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,#f0ede8 0%,#ddd8d0 100%);border:1px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease);box-shadow:0 4px 22px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.5) inset;animation:fabGlow 3s ease-in-out infinite}
.ai-fab:hover{transform:scale(1.12);box-shadow:0 8px 32px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.5) inset}
.ai-fab.hidden{display:none}
.ai-fab::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);transform:translateX(-110%);transition:transform .6s var(--ease);pointer-events:none}
.ai-fab:hover::after{transform:translateX(110%)}
.ai-fab-icon{width:32px;height:32px;object-fit:contain;z-index:1;position:relative;display:block;margin:auto;transition:transform .3s var(--ease)}
.ai-fab:hover .ai-fab-icon{transform:rotate(12deg) scale(1.08)}
.ai-fab-ring{position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(58,48,40,.22);pointer-events:none;animation:fabBreathe 2.2s ease-in-out infinite}
.ai-fab-ring.r2{inset:-13px;animation-delay:.7s;animation-duration:2.7s;opacity:.45}
@keyframes fabBreathe{0%,100%{transform:scale(.82);opacity:0}35%{opacity:.8}55%{transform:scale(1.22);opacity:.25}}
@keyframes fabGlow{0%,100%{box-shadow:0 4px 22px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.5) inset}50%{box-shadow:0 6px 28px rgba(0,0,0,.34),0 0 12px rgba(200,185,170,.35),0 1px 0 rgba(255,255,255,.5) inset}}

.ai-chat{position:fixed;bottom:1.25rem;right:1.25rem;z-index:91;width:340px;max-height:450px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:var(--container);box-shadow:0 12px 44px rgba(0,0,0,.35);display:none;flex-direction:column;overflow:hidden;animation:chatIn .25s var(--ease)}
.ai-chat.open{display:flex}
@keyframes chatIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.ai-chat-header{display:flex;align-items:center;gap:.45rem;padding:.6rem .85rem;border-bottom:1px solid var(--border);font-size:.8rem;font-weight:600;color:var(--ink)}
.ai-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.35}50%{opacity:1}}
.ai-close{margin-left:auto;background:none;border:none;color:var(--muted);padding:3px;border-radius:5px;transition:color .2s}
.ai-close:hover{color:var(--ink)}
.ai-messages{flex:1;min-height:140px;max-height:300px;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.45rem}
.ai-messages::-webkit-scrollbar{width:3px}
.ai-messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:2px}
.ai-msg{max-width:84%;padding:.45rem .7rem;border-radius:10px;font-size:.79rem;line-height:1.5;animation:msgIn .2s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ai-msg-bot{align-self:flex-start;background:rgba(0,0,0,.05);border:1px solid var(--border);color:var(--ink-soft)}
.ai-msg-user{align-self:flex-end;background:var(--card);color:var(--card-text)}
.ai-cursor{display:inline-block;width:1.5px;height:.9em;background:var(--acc);margin-left:1px;vertical-align:text-bottom;animation:blink .65s step-end infinite}
.ai-cursor.hidden{display:none}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.ai-input-row{display:flex;gap:.35rem;padding:.5rem .65rem .65rem;border-top:1px solid var(--border)}
.ai-input-row input{flex:1;padding:.4rem .65rem;border-radius:8px;border:1px solid var(--border);background:rgba(0,0,0,.05);color:var(--ink);font-size:.79rem;outline:none;transition:border-color .2s}
.ai-input-row input::placeholder{color:var(--muted)}
.ai-input-row input:focus{border-color:var(--acc)}
.ai-input-row input:disabled,.ai-input-row button:disabled{opacity:.4;pointer-events:none}
#ai-send{width:32px;height:32px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;transition:all .2s}
#ai-send:hover{background:var(--card);color:var(--card-text);border-color:transparent}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
/* ── BOOKS DESCRIPTION ── */
.books-note{
  text-align:center;max-width:68ch;margin:0 auto 1.4rem;
  font-size:.93rem;font-weight:500;color:var(--ink-soft);line-height:1.7;
}

/* ── CONTACT ── */
#contact.section{background:var(--page);border-radius:40px 40px 0 0;margin-top:0}
.contact-row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1rem;margin-top:.5rem;
}
.contact-card{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.75rem 1.4rem;border-radius:12px;
  border:1px solid var(--border);background:rgba(0,0,0,.04);
  color:var(--ink-soft);text-decoration:none;
  font-size:.88rem;font-weight:500;
  transition:all .2s var(--ease);
}
.contact-card:hover{
  background:var(--ink);color:#fff;border-color:var(--ink);
  transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.2);
}
.contact-card svg{flex-shrink:0;opacity:.7}
.contact-card:hover svg{opacity:1}

.site-footer{padding:1.25rem 0;background:#0a0d10}
.footer-inner{max-width:var(--max);margin:0 auto;padding:0 clamp(1rem,3vw,2rem);display:flex;align-items:center;gap:1rem;border-top:1px solid rgba(255,255,255,.05);padding-top:1.25rem}
.footer-copy{font-size:.72rem;color:var(--on-dark-m);margin:0}
.footer-links{display:flex;gap:.8rem;margin-left:auto}
.footer-links a{font-size:.76rem;color:var(--on-dark-m);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--on-dark)}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media(max-width:900px){
  .hero{min-height:480px;height:100vh}
  .hero-overlay{width:100%;min-width:0;inset:auto 0 0 0;padding:1.5rem 1.2rem 3rem;background:linear-gradient(0deg,rgba(14,13,12,.98) 0%,rgba(14,13,12,.88) 50%,transparent 100%);justify-content:flex-end}
  .hero h1{font-size:clamp(1.1rem,4vw,1.5rem)}
  .hero-name-tag{font-size:clamp(1.6rem,5.5vw,2.6rem)}
  .hero-panel{flex-basis:86vw}
  /* On mobile the card is near the top (top:8%) where the parallelogram diagonal
     cuts in by ~var(--panel-offset-x) on both left and right. We start the card
     past that cut so text isn't clipped by the polygon shape. */
  .hero-panel-content{
    top:8%;bottom:auto;
    left:calc(var(--panel-offset-x,64px) + 4px);
    right:14px;
  }
  .hero-panel h2{font-size:clamp(.95rem,3.8vw,1.3rem);margin-bottom:0}
  /* Hide description — too cramped on narrow panels; title only on mobile */
  .hero-panel p{display:none}
  .hero-panel-content{padding:.6rem .8rem}
  .hero-panel-glass{background:linear-gradient(to bottom, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.12) 38%, rgba(0,0,0,0) 60%)}
  .hero-track{gap:0}
  .hero-rail{padding:5.25rem .2rem 1.25rem}
  #projects.section{
    padding-top:36px;
    margin-top:0;
    background:var(--page);
    border-top-left-radius:40px;
    border-top-right-radius:40px;
    border-bottom-left-radius:40px;
    border-bottom-right-radius:40px;
    /* Let cards overflow the fixed 840px container height on mobile */
    overflow:visible;
  }
  /* Let the projects panel grow to fit all cards on mobile */
  .panels-container{height:auto;min-height:0}
  .tab-panel.active{height:auto}

  .top-nav{display:none;position:fixed;top:72px;left:0;right:0;flex-direction:column;background:rgba(31,36,41,.98);backdrop-filter:blur(18px);padding:.6rem;border-bottom:1px solid rgba(255,255,255,.06);gap:.15rem;z-index:99}
  .top-nav.show{display:flex}
  .top-nav a{padding:.55rem .8rem;font-size:.88rem}
  .nav-toggle{display:flex}

  /* Horizontal swipe carousel on tablet/mobile */
  /* padding gives card box-shadows room inside the scroll container (overflow:auto clips shadows) */
  .gallery-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:.75rem;padding:8px 4px 14px;align-content:unset}
  .gallery-cards::-webkit-scrollbar{display:none}
  .card.card-gallery{flex:0 0 calc(50% - .5rem);scroll-snap-align:start;width:auto}
  .card.card-featured{grid-template-columns:1fr}
  .card-editorial-img{height:200px}
  /* Show full description text on mobile — no truncation */
  .card-gal-body p{display:block;-webkit-line-clamp:unset;overflow:visible;}
  .skills-grid{grid-template-columns:1fr}
  .ai-chat{width:calc(100vw - 1.5rem);right:.75rem;bottom:.75rem}
  .parallax-strip{height:26px}
}

@media(max-width:600px){
  .section{padding:1rem .5rem}
  .section+.section{padding-top:.5rem}
  .container{padding:1.2rem;border-radius:20px}
  .tab-btn{padding:.32rem .65rem;font-size:.73rem}
  /* Narrower cards on small phone — one card visible with clear peek of next */
  .gallery-cards{padding:8px 4px 14px}
  .card.card-gallery{flex:0 0 76vw}
  .card.card-featured{grid-template-columns:1fr}
  .card-editorial-img{height:180px}
  .hero-cta-row{flex-direction:column}
  .hero-cta-secondary{display:flex;flex-direction:column}
  #projects.section{
    padding-top:28px;
    margin-top:0;
    background:var(--page);
    border-top-left-radius:36px;
    border-top-right-radius:36px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    overflow:visible;
  }
  .btn{justify-content:center}
  .book-card{flex-basis:145px}
  .parallax-strip{height:20px}
}

/* ══ Utilities ══ */

/* Sections sit above parallax strips in z-order so their rounded corners
   cleanly cap the strip photo edges on mobile (negative-margin overlap). */
#projects.section,#about.section,#books.section,#contact.section{
  position:relative;
  z-index:1;
}

/* About + Books: full pill-shaped sections — large curve top & bottom,
   parallax strip between them reveals the background photo */
#about.section{
  background:var(--page);
  border-radius:40px;
}
#contact.section{
  background:var(--page);
  border-radius:40px 40px 0 0;
  padding-top:2.5rem;
  padding-bottom:2.5rem;
}
#books.section{
  background:var(--page);
  border-radius:40px;
  margin-top:0;
  padding-top:2.5rem;
  padding-bottom:2.5rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Responsive pill sections.
   Strips sit between sections as clean horizontal photo bands.
   No negative margins — sections don't overlap the strips. */
@media(max-width:900px){
  /* Flatten bottom corners of sections adjacent to parallax strips so the thin
     strip sits flush — avoids misaligned gap where section curve > strip height */
  #projects.section{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
  #about.section{border-top-left-radius:36px;border-top-right-radius:36px;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-top:2rem;padding-bottom:2rem;margin-top:0;margin-bottom:0}
  #books.section{border-top-left-radius:36px;border-top-right-radius:36px;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-top:2rem;padding-bottom:2rem;margin-top:0;margin-bottom:0}
  #contact.section{border-radius:28px;margin-top:0;margin-bottom:1rem}
}
@media(max-width:600px){
  #projects.section{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
  #about.section{border-top-left-radius:24px;border-top-right-radius:24px;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-top:1.5rem;padding-bottom:1.5rem;margin-top:0;margin-bottom:0}
  #books.section{border-top-left-radius:24px;border-top-right-radius:24px;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-top:1.5rem;padding-bottom:1.5rem;margin-top:0;margin-bottom:0}
  #contact.section{border-radius:20px;margin-top:0;margin-bottom:1.25rem}
}

/* ── Mobile carousel scroll-hint: right-edge fade ── */
@media(max-width:900px){
  /* Fade overlay signals more cards to the right */
  .gallery-wrap::after{
    content:'';
    position:absolute;right:0;top:0;bottom:54px;
    width:40px;
    background:linear-gradient(to right,transparent,#dde2ec);
    pointer-events:none;z-index:2;
  }
}

::selection{background:rgba(154,163,173,.2)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}


/* ═══════════════════════════════════════════════════════════
   DESIGN REFRESH — grain texture, larger type, experience,
   about metadata, improved mobile readability
   ═══════════════════════════════════════════════════════════ */

/* ── GRAIN TEXTURE OVERLAY ──────────────────────────────────
   Subtle animated film-grain that sits above dark sections
   but below nav (z-index 100) and AI chat (z-index 90+).   */
.grain-overlay {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url('../images/texture.png');
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 3;
  animation: grain-shift 8s steps(4) infinite;
  mix-blend-mode: overlay;
}
@keyframes grain-shift {
  0%   { transform: translate(0%,   0%);   }
  25%  { transform: translate(-4%,  -5%);  }
  50%  { transform: translate(-8%,   4%);  }
  75%  { transform: translate( 4%,  -7%);  }
  100% { transform: translate(0%,   0%);   }
}

/* ── FONT SIZE BUMPS ────────────────────────────────────────
   Override default small values for better mobile legibility */
.section-title {
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
}
.section-subtitle,
.about-blurb,
.books-note {
  font-size: 1.03rem;
  line-height: 1.75;
}
.tab-btn    { font-size: .9rem; }
.sub-btn    { font-size: .83rem; }
.role-tag   { font-size: .82rem; padding: .32rem .85rem; }
.card-editorial-body h3 { font-size: 1.08rem; }
.card-editorial-body p  { font-size: .92rem; line-height: 1.55; }
.card-gal-body h3       { font-size: .95rem; }
.card-gal-body p        { font-size: .84rem; }
.stack-ribbon-track span { font-size: .8rem; }
.contact-card { font-size: .96rem; }
.skills-note  { font-size: .88rem; }
.skill-label-row { font-size: .76rem; }
.sub-section-text { font-size: 1rem; }

/* ── ABOUT METADATA ROW ────────────────────────────────────
   Stats block inspired by Manus — Location / Years / Stack  */
.about-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 2.5rem;
  margin: 1.6rem auto 1.8rem;
  padding: 1.2rem 1.5rem;
  max-width: 680px;
  background: rgba(0,0,0,.05);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.about-meta-item { text-align: center; }
.meta-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-bottom: .2rem;
}
.meta-label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* ── EXPERIENCE SECTION ─────────────────────────────────── */
#experience.section {
  background: var(--page);
  border-radius: 40px;
}

/* Add z-index context so experience sits above parallax strips */
#experience.section {
  position: relative;
  z-index: 1;
}

.exp-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: .5rem;
}

.exp-item {
  display: grid;
  grid-template-columns: min(32%, 210px) 1fr;
  gap: 0 2rem;
  align-items: start;
  padding: 1.3rem 1.4rem;
  border-radius: 16px;
  background: rgba(0,0,0,.04);
  border: 1px solid var(--border);
  transition: border-color .2s, background .2s;
}
.exp-item:hover {
  background: rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.18);
}

.exp-meta { padding-top: .1rem; }

.exp-date-pill {
  display: inline-block;
  font-size: .73rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .04em;
  padding: .22rem .6rem;
  background: rgba(0,0,0,.07);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: .6rem;
  white-space: nowrap;
}

.exp-role {
  margin: 0 0 .22rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.exp-company {
  display: block;
  font-size: .76rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .02em;
}

.exp-bullets {
  margin: 0;
  padding: .1rem 0 0 1.1rem;
  list-style: disc;
}
.exp-bullets li {
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.68;
  margin-bottom: .28rem;
}
.exp-bullets li::marker { color: var(--muted); }

/* Mobile: stack meta above bullets */
@media (max-width: 700px) {
  .exp-item {
    grid-template-columns: 1fr;
    gap: .7rem;
    padding: 1rem 1.1rem;
  }
  .exp-date-pill { margin-bottom: .4rem; }
}

/* ── EXPERIENCE IN RESPONSIVE PILL RULES ─────────────────── */
#experience.section {
  border-radius: 40px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media(max-width:900px){
  #experience.section {
    border-top-left-radius: 36px;
    border-top-right-radius: 36px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 0;
    margin-bottom: 0;
  }
}
@media(max-width:600px){
  #experience.section {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .exp-item { gap: .5rem; }
  .exp-bullets li { font-size: .85rem; }
}

/* ── PARALLAX STRIP C (between experience and books) ──────── */
.parallax-strip-c {
  background-image: var(--parallax-img);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
.parallax-strip-c .parallax-inner {
  background-image: var(--parallax-img);
}
@media(max-width:900px){
  .parallax-strip-c { background: none; }
  .parallax-strip-c .parallax-inner { display: block; }
}

/* ── MOBILE: gallery fade uses correct experience colour ───── */
@media(max-width:900px){
  .gallery-wrap::after {
    background: linear-gradient(to right, transparent, var(--page));
  }
}

/* ── TECH STACK LABEL ──────────────────────────────────────── */
.tech-stack-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 2.8rem 0 .8rem;
  text-align: center;
}

/* ── CATEGORISED SKILLS GRID ───────────────────────────────
   Replaces flat role-tag pills with Frontend/AI/Tools groups */
.skills-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.2rem 1rem;
  margin: 1.6rem 0 1.8rem;
}

.skill-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cat-label {
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink);
  margin: 0 0 .6rem;
  padding-bottom: .38rem;
  border-bottom: 1px solid var(--acc-dim);
  width: 100%;
  text-align: center;
}

.cat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  flex: 1;
  align-content: flex-start;
  justify-content: center;
  padding-top: .1rem;
}

.cat-tags span {
  font-size: .78rem;
  font-weight: 500;
  padding: .24rem .62rem;
  background: rgba(0,0,0,.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-soft);
  transition: background .18s, color .18s, border-color .18s;
  cursor: default;
}

.cat-tags span:hover {
  background: rgba(0,0,0,.1);
  color: var(--ink);
  border-color: rgba(0,0,0,.18);
}

/* Mobile: collapse to 2 columns */
@media (max-width: 600px) {
  .skills-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem .8rem;
  }
  .cat-tags span { font-size: .75rem; }
}

/* Very small screens: single column */
@media (max-width: 380px) {
  .skills-categories {
    grid-template-columns: 1fr;
  }
}

/* ── SKILLS CATEGORIES — 3+2 CENTRED GRID LAYOUT ─────────────
   Row 1: Languages | Frontend, Desktop & Mobile | Data & Reporting
   Row 2 (centred): AI & Agents | Tools & Cloud
   Uses 6-column grid so row 2 can be offset-centred.            */
.skills-categories {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.4rem 1.2rem;
  margin: 1rem 0 2.8rem;
  /* Reset the earlier auto-fit rule */
}

/* Row 1 — each of the first 3 spans 2 of 6 columns */
.skill-cat:nth-child(1) { grid-column: 1 / span 2; }
.skill-cat:nth-child(2) { grid-column: 3 / span 2; }
.skill-cat:nth-child(3) { grid-column: 5 / span 2; }

/* Row 2 — 2 items centred: start at col 2 and col 4, 1 empty col each side */
.skill-cat:nth-child(4) { grid-column: 2 / span 2; }
.skill-cat:nth-child(5) { grid-column: 4 / span 2; }

/* Tablet: 2-column, all items same width */
@media (max-width: 900px) {
  .skills-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem .9rem;
  }
  .skill-cat:nth-child(1),
  .skill-cat:nth-child(2),
  .skill-cat:nth-child(3),
  .skill-cat:nth-child(4),
  .skill-cat:nth-child(5) {
    grid-column: auto;
  }
}

/* Mobile: single column */
@media (max-width: 500px) {
  .skills-categories {
    grid-template-columns: 1fr;
  }
}

/* ── Card expand overlay (hover preview) ── */
.card-expand-overlay{
  position:fixed;
  z-index:199;
  pointer-events:auto;
  will-change:transform,opacity;
  transform-origin:center center;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#0f0d0b;
  box-sizing:border-box;
  border:8px solid #0f0d0b;
}
.card-expand-img-wrap{
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
  position:relative;
}
.card-expand-overlay img{
  width:100%;height:100%;object-fit:contain;display:block;
  pointer-events:auto;background:#0a0804;
  cursor:zoom-in;
  transition:transform .32s ease;
  transform-origin:50% 50%;
}
.card-expand-overlay img.zoomed{
  cursor:zoom-out;
}
.card-expand-overlay .expand-close{
  position:absolute;top:.75rem;right:.75rem;
  width:32px;height:32px;border-radius:50%;
  background:rgba(10,8,4,.55);border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;opacity:0;
  transition:opacity .2s;
}
.card-expand-overlay:hover .expand-close{opacity:1}
.card-expand-caption{
  flex:0 0 auto;
  position:relative;
  background:#0a0804;
  padding:1.1rem 1.5rem 1.25rem;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .38s .28s var(--ease), transform .38s .28s var(--ease);
  pointer-events:none;
}
.card-expand-overlay.expanded .card-expand-caption{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.card-expand-caption h4{
  margin:0 0 .45rem;
  font-size:1.05rem;font-weight:700;
  color:#fff;letter-spacing:.01em;line-height:1.3;
}
.card-expand-caption p{
  margin:0;
  font-size:.83rem;line-height:1.65;
  color:rgba(255,255,255,.76);
  max-height:5.8rem;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
}
.card-expand-links{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.65rem}
.card-expand-links a{
  font-size:.72rem;font-weight:600;
  padding:.22rem .55rem;border-radius:6px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(236,230,216,.85);
  background:rgba(255,255,255,.07);
  transition:color .18s,border-color .18s,background .18s;
  backdrop-filter:blur(4px);
}
.card-expand-links a:hover{
  color:var(--acc);
  border-color:rgba(154,163,173,.45);
  background:rgba(154,163,173,.13);
}
/* Gallery card button hover — ensure transition fires on the pill buttons */
.card.card-gallery .card-links a{transition:color .18s,border-color .18s,background .18s}