/* ===================================================
   SREANG LIZA — PORTFOLIO
   =================================================== */

:root{
  --bg: #0a0806;
  --bg-alt: #131009;
  --surface: rgba(246,239,225,0.045);
  --surface-strong: rgba(246,239,225,0.085);
  --border: rgba(205,164,94,0.16);
  --text: #f6efe1;
  --text-dim: rgba(246,239,225,0.64);
  --text-dimmer: rgba(246,239,225,0.42);

  --gold: #cda45e;
  --gold-light: #f1e0ad;
  --bronze: #8a5a2b;
  --champagne: #eadfc0;
  --amber: #d98a4d;

  --gradient: linear-gradient(120deg, var(--gold-light), var(--bronze));
  --gradient-soft: linear-gradient(120deg, rgba(205,164,94,0.16), rgba(138,90,43,0.14));
  --grid-line: rgba(205,164,94,0.07);

  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  --container: 1180px;
  --radius: 20px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  cursor: none;
}

@media (max-width: 860px){
  body{ cursor: auto; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family: var(--font-display); margin:0; font-weight:600; letter-spacing:-0.02em; }
p{ margin:0; }

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.text-gradient{
  background: var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring{
  position: fixed;
  top:0; left:0;
  border-radius:50%;
  pointer-events:none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{
  width:6px; height:6px;
  background: var(--gold);
}
.cursor-ring{
  width:34px; height:34px;
  border: 1.5px solid rgba(255,255,255,0.35);
  display:flex; align-items:center; justify-content:center;
  transition: width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.cursor-ring.is-active{
  width:56px; height:56px;
  background: rgba(205,164,94,0.14);
  border-color: var(--gold);
}
.cursor-label{
  opacity:0; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#1a1206; white-space:nowrap;
  transition: opacity .25s ease;
}
.cursor-ring.is-label{
  width:84px; height:84px;
  background: var(--gold);
  border-color: transparent;
}
.cursor-ring.is-label .cursor-label{ opacity:1; }
@media (max-width:860px){
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position: fixed; top:0; left:0; width:100%; height:3px;
  z-index: 9997; background: rgba(255,255,255,0.06);
}
.scroll-progress span{
  display:block; height:100%; width:100%;
  background: var(--gradient);
  /* Scaled rather than resized — animating width relayouts on every
     scroll frame, a transform is handled by the compositor. */
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- preloader ---------- */
.preloader{
  position: fixed; inset:0; z-index: 10000;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: transform .8s var(--ease), opacity .6s ease;
  /* Failsafe: clears itself even if the script never runs at all, so a
     broken or blocked JS file can't leave a blank screen. */
  animation: preloader-failsafe 0s linear 4s forwards;
}
@keyframes preloader-failsafe{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}
.preloader.done{
  transform: translateY(-100%);
  opacity: 0;
  pointer-events:none;
}
.preloader-inner{
  display:flex; align-items:baseline; gap:18px;
  font-family: var(--font-display);
}
.preloader-name{
  font-size: clamp(2rem,6vw,3.5rem);
  letter-spacing: 0.05em;
  color: var(--text-dimmer);
}
.preloader-count{
  font-size: clamp(2rem,6vw,3.5rem);
  color: var(--gold);
  min-width: 3ch;
}

/* ---------- background grid ----------
   Static on purpose: this is a fixed, full-viewport layer, and animating
   its background-position forced the browser to repaint the whole thing
   every frame — measured at 92 of 100 scroll frames dropped on pages where
   it isn't hidden behind the hero. The drift was imperceptible anyway. */
.bg-grid{
  position: fixed; inset:0; z-index:-2;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 85%);
  opacity: .7;
}

/* ---------- background blobs ---------- */
/* These warm ambient glows used to be four blurred, slowly drifting circles.
   Measured under CPU throttling they were, by a wide margin, the most
   expensive thing on the page on both desktop and mobile — a large blur
   filter has to be re-rendered rather than simply re-composited. Painted as
   static radial gradients the look survives essentially intact and the cost
   goes to nothing: scroll went from ~86ms per frame to ~16ms. */
.bg-blobs{
  position: fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(760px 760px at 2% 0%, rgba(205,164,94,0.20), transparent 70%),
    radial-gradient(700px 700px at 100% 32%, rgba(138,90,43,0.22), transparent 70%),
    radial-gradient(620px 620px at 30% 100%, rgba(234,223,192,0.09), transparent 70%),
    radial-gradient(560px 560px at 58% 60%, rgba(217,138,77,0.10), transparent 70%);
}

/* ---------- header / nav ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0;
  z-index: 500;
  padding-top: 18px;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  padding: 12px 22px;
  background: rgba(10,8,6,0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 100px;
}
.nav-logo{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}
.nav-logo span{ color: var(--gold); }
.nav-links{ display:flex; gap: 30px; }
.nav-links a{
  font-size: 0.92rem;
  color: var(--text-dim);
  position: relative;
  transition: color .25s ease;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background: var(--gradient);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); }

.nav-cta{ display:inline-flex; }

.menu-toggle{
  display:none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor: pointer;
}
.menu-toggle span{
  width:16px; height:1.5px; background: var(--text);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.menu-toggle.active span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px){
  .nav .nav-links, .nav .nav-cta{ display:none; }
  .menu-toggle{ display:flex; }
}

.mobile-menu{
  position: fixed; inset:0;
  background: rgba(8,8,11,0.98);
  z-index: 450;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 40px;
  opacity:0; visibility:hidden;
  transform: translateY(-20px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-menu ul{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.mobile-menu a{ font-family: var(--font-display); font-size: 2rem; }
.mobile-menu-foot{ display:flex; flex-direction:column; align-items:center; gap:6px; color: var(--text-dim); font-size:.9rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), background .3s ease, border-color .3s ease, box-shadow .3s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--gradient);
  color: #1a1206;
  font-weight: 700;
  box-shadow: 0 8px 30px -8px rgba(205,164,94,0.45);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px -6px rgba(205,164,94,0.55); }
.btn-ghost{
  border-color: var(--border);
  color: var(--text);
  background: var(--surface);
}
.btn-ghost:hover{ border-color: rgba(255,255,255,0.3); background: var(--surface-strong); }
.btn-small{ padding: 9px 18px; font-size: 0.85rem; }
.btn-large{ padding: 17px 30px; font-size: 1rem; }

/* ---------- sections generic ---------- */
.section{ padding: 140px 0; position: relative; }
.section-head{ margin-bottom: 64px; }
.section-tag{
  display:inline-block;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 600;
}
.section-tag.center{ display:block; text-align:center; }
.section-title{
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.08;
}

/* reveal animation base state (JS/GSAP will animate to visible) */
.reveal{ opacity: 0; transform: translateY(36px); }
.reveal.is-visible{
  opacity:1; transform:none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

/* ---------- hero (full-bleed video) ---------- */
.hero{
  /* svh must come second so it WINS where supported: on phones the plain
     vh unit changes every time the browser's address bar collapses, which
     re-lays-out the whole hero mid-scroll and reads as a stutter. */
  min-height: 100vh;
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  padding-top: 120px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}
.hero-media{
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--bg);
}
.hero-video{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: .5;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference){
  .hero-video{ animation: kenburns 24s ease-in-out infinite alternate; }
}
@keyframes kenburns{
  0%{ transform: scale(1); }
  100%{ transform: scale(1.09); }
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,8,6,0.58) 0%, rgba(10,8,6,0.32) 38%, rgba(10,8,6,0.82) 100%),
    radial-gradient(ellipse at 50% 28%, rgba(10,8,6,0.05), rgba(10,8,6,0.55) 78%);
}
.hero-content{
  position: relative; z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  display:flex; flex-direction:column; align-items:center;
  text-align: center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 0.85rem; color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 30px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--champagne);
  box-shadow: 0 0 12px var(--champagne);
}
.hero-title{
  font-size: clamp(3rem, 8vw, 6.4rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.split-line{ display:inline-block; overflow:hidden; }
.accent-dot{ color: var(--gold); }

.role-rotator{
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size: 1.3rem;
  margin: 30px 0 28px;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-style: italic;
}
.role-window{ position:relative; height: 1.5em; overflow:hidden; }
.role-list{ display:flex; flex-direction:column; }
.role-list li{
  height: 1.5em;
  display:flex; align-items:center;
  color: var(--gold-light);
  font-weight:600;
}

.hero-desc{
  max-width: 520px;
  color: var(--text-dim);
  font-size: 1.05rem;
  margin: 0 auto 42px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

.scroll-cue{
  position:absolute; bottom: 34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--text-dimmer); font-size: 0.75rem; letter-spacing:.1em; text-transform:uppercase;
  z-index: 1;
}
.scroll-cue-line{ width:1px; height:46px; background: rgba(246,239,225,0.2); overflow:hidden; }
.scroll-cue-line i{
  display:block; width:100%; height:16px; background: var(--gradient);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{ transform: translateY(-20px);} 100%{ transform: translateY(46px);} }

/* ---------- about photo ---------- */
.about-photo-wrap{
  position: relative;
  width: 340px;
  flex-shrink: 0;
  align-self: flex-start;
}
.about-photo-ring{
  position:absolute; inset: -14px;
  border-radius: 32px;
  background: var(--gradient);
  opacity: .35;
  filter: blur(18px);
}
.about-photo{
  position: relative; z-index:1;
  width:100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.6);
}
.about-photo img{ width:100%; height:auto; display:block; }

/* ---------- on-set gallery (horizontal scroll) ---------- */
.gallery-section{ position:relative; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding: 90px 0; }
.gallery-section::before{
  content:''; position:absolute; inset:0;
  background: rgba(10,8,6,0.32);
  pointer-events:none;
}
/* An aligned grid rather than a horizontal strip: the strip cropped the
   first and last photos against the screen edges, hid two of the four
   behind a swipe most people never discover, and its staggered
   self-alignment left large uneven gaps. */
.gallery-head{ margin-bottom: 48px; }
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}
.gallery-grid-3{ grid-template-columns: repeat(3, 1fr); }
.gallery-item{
  position: relative;
  margin: 0;
  border-radius: 20px; overflow:hidden;
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 30px 60px -32px rgba(0,0,0,0.7);
}
.gallery-item img{
  width:100%; height:auto; display:block;
  transition: transform .7s var(--ease);
}
/* A deliberate, repeating drop on alternate columns — editorial rhythm
   without the ragged edges of per-item self-alignment. Offset with a
   margin, not a transform, so it can't fight the reveal animation. */
.gallery-item:nth-child(even){ margin-top: 38px; }
@media (hover: hover){
  .gallery-item:hover img{ transform: scale(1.05); }
}

@media (max-width: 980px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 860px){
  .gallery-section{ padding: 70px 0; }
  .gallery-section::before{ background: rgba(10,8,6,0.45); }
  .gallery-head{ margin-bottom: 32px; }
  .gallery-grid{ gap: 14px; }
  .gallery-item{ border-radius: 16px; }
  .gallery-item:nth-child(even){ margin-top: 24px; }
}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden; white-space:nowrap; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{ display:inline-flex; gap: 22px; animation: marquee 32s linear infinite; }
.marquee-track-reverse{ animation-direction: reverse; animation-duration: 40s; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-skills .marquee-track span{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--text-dimmer);
}
.marquee-skills .marquee-track span:nth-child(4n+1){ color: var(--gold); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

.brands-strip{ padding: 60px 0; text-align:center; }
.brands-label{ color: var(--text-dimmer); font-size: 0.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom: 26px; }
.marquee-brands .marquee-track span{
  font-family: var(--font-display);
  font-size: 1.1rem;
  padding: 10px 26px;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-dim);
}

/* ---------- about ---------- */
/* Portrait on the left, prose and facts stacked beside it. Previously the
   photo, the text and the facts were three side-by-side columns, which left
   the text about 300px wide — wrapping every three or four words. */
.about-grid{
  display:grid; grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 52px; align-items:start;
  margin-bottom: 90px;
}
.about-copy{ display:flex; flex-direction:column; gap: 34px; }
.about-text{ font-size: 1.15rem; color: var(--text-dim); line-height: 1.75; max-width: 62ch; }
.about-text strong{ color: var(--text); }
.about-facts{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.fact{
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.fact-label{ display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color: var(--gold); margin-bottom:6px; }
.fact-value{ font-size:.98rem; color: var(--text-dim); }

.stats{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 24px;
  border-top: 1px solid var(--border); padding-top: 56px;
}
.stat{ text-align:left; }
.stat-num{ font-family: var(--font-display); font-size: clamp(2.4rem,4vw,3.6rem); color: var(--text); }
.stat-suffix{ font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); }
.stat p{ color: var(--text-dim); margin-top: 8px; font-size: 0.92rem; max-width: 20ch; }

/* ---------- experience timeline ---------- */
.timeline{ position: relative; display:flex; flex-direction:column; gap: 28px; }
.timeline-line{
  position:absolute; left: 27px; top:10px; bottom:10px; width:1px;
  background: rgba(205,164,94,0.12);
}
.timeline-line i{
  display:block; width:100%; height:100%;
  background: linear-gradient(to bottom, var(--gold), var(--bronze), transparent);
  transform: scaleY(0); transform-origin: top;
}
.timeline-item{ display:flex; gap: 28px; position:relative; }
.timeline-marker{
  flex-shrink:0; width:56px; height:56px; border-radius:50%;
  background: var(--bg-alt); border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); color: var(--gold); font-weight:600;
  position: relative; z-index:1;
}
.timeline-content{
  flex:1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 30px;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.timeline-content:hover{ border-color: rgba(255,255,255,0.22); background: var(--surface-strong); }
.timeline-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: 10px 20px; margin-bottom: 6px; }
.timeline-top h3{ font-size: 1.25rem; }
.timeline-date{ color: var(--gold); font-size: 0.85rem; font-weight:600; white-space:nowrap; }
.timeline-org{ color: var(--text-dimmer); font-size: 0.92rem; margin-bottom: 14px; }
.timeline-content ul{ display:flex; flex-direction:column; gap:8px; }
.timeline-content li{
  color: var(--text-dim); font-size: 0.95rem; padding-left: 18px; position:relative;
}
.timeline-content li::before{
  content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%;
  background: var(--gradient);
}

/* ---------- skills ---------- */
.skills-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.skill-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; transition: border-color .3s ease, transform .3s ease;
}
.skill-card:hover{ border-color: rgba(255,255,255,0.22); }
.skill-card h3{ margin-bottom: 20px; font-size: 1.15rem; }
.tags{ display:flex; flex-wrap:wrap; gap: 10px; }
.tags span{
  padding: 8px 16px; border-radius: 100px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  font-size: 0.85rem; color: var(--text-dim);
  transition: color .25s ease, border-color .25s ease;
}
.tags span:hover{ color: var(--text); border-color: var(--gold); }

/* ---------- education ---------- */
.edu-list{ display:flex; flex-direction:column; gap:0; margin-bottom: 80px; }
.edu-item{
  display:grid; grid-template-columns: 180px 1fr;
  gap: 30px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.edu-item:first-child{ border-top: 1px solid var(--border); }
.edu-date{ color: var(--gold); font-weight:600; font-size:.9rem; }
.edu-item h3{ font-size: 1.15rem; margin-bottom: 6px; }
.edu-item p{ color: var(--text-dim); font-size: .95rem; }
.edu-desc{ margin-top: 6px; color: var(--text-dimmer) !important; }

.achievements{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.achieve-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 26px; position:relative;
}
.achieve-card.highlight{
  background: var(--gradient-soft);
  border-color: rgba(205,164,94,0.3);
  grid-column: span 3;
}
.achieve-year{ color: var(--gold); font-size:.8rem; font-weight:700; letter-spacing:.05em; }
.achieve-card h3{ font-size: 1rem; margin: 10px 0 6px; }
.achieve-card p{ color: var(--text-dimmer); font-size: .88rem; }

/* ---------- empty state ---------- */
.empty-state{
  text-align:center; padding: 60px 30px;
  border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--text-dimmer);
  background: var(--surface);
}
.empty-state strong{ display:block; color: var(--text-dim); font-family: var(--font-display); font-size:1.1rem; margin-bottom:8px; }

/* ---------- video ---------- */
.video-hero{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  margin-bottom: 26px;
}
/* The frame carries the ratio chosen per video in the admin panel, so a
   vertical reel isn't letterboxed inside a landscape box. */
.video-frame{
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}
.video-frame > video,
.video-frame > iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  border: 0;
}
.video-linkout{
  display:flex; align-items:center; justify-content:center;
  color: var(--gold); font-size:.95rem; text-align:center; padding:20px;
  background: var(--bg-alt);
}
.video-linkout:hover{ color: var(--gold-light); }

/* Portrait clips are bounded by width, never height — a height cap would
   fight the aspect-ratio and letterbox the video inside its own frame. The
   width limit itself is emitted per video, derived from its ratio. */
.video-frame-tall{ margin-inline: auto; }
.video-hero-meta{ padding: 22px 26px; }
.video-hero-meta h3{ font-size: 1.3rem; margin-bottom: 8px; }
.video-hero-meta p{ color: var(--text-dim); font-size: .95rem; }

.video-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.video-card{
  border: 1px solid var(--border); border-radius: 16px; overflow:hidden;
  background: var(--surface);
  transition: border-color .3s ease;
}
.video-card:hover{ border-color: rgba(255,255,255,0.22); }
.video-card .video-frame{ border-radius: 16px 16px 0 0; }
.video-card-body{ padding: 16px 18px; }
.video-card-body h4{ font-size: 1rem; margin-bottom: 4px; }
.video-card-body p{ color: var(--text-dimmer); font-size: .85rem; }

/* ---------- projects / work ---------- */
.project-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.project-card{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .3s ease;
  display:flex; flex-direction:column;
}
.project-card:hover{ border-color: rgba(255,255,255,0.25); }
.project-cover{ aspect-ratio: 4/3; overflow:hidden; background: var(--bg-alt); }
.project-cover img{
  width:100%; height:100%; object-fit: cover;
  transition: transform .6s var(--ease), filter .6s ease;
}
@media (hover: hover){
  .project-cover img{ filter: grayscale(65%) contrast(1.05); }
  .project-card:hover .project-cover img{ transform: scale(1.06); filter: grayscale(0%) contrast(1.05); }
}
.project-body{ padding: 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.project-category{ color: var(--amber); font-size: .75rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.project-body h3{ font-size: 1.1rem; }
.project-body p{ color: var(--text-dim); font-size: .9rem; flex:1; }
.project-link{ align-self:flex-start; color: var(--gold); font-size: .88rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-top:6px; }
.project-link svg{ transition: transform .25s var(--ease); }
.project-link:hover svg{ transform: translate(3px,-3px); }

/* ---------- blog ---------- */
.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .3s ease, transform .3s ease;
  display:flex; flex-direction:column;
}
.blog-card:hover{ border-color: rgba(255,255,255,0.25); }
.blog-cover{ aspect-ratio: 16/10; overflow:hidden; background: var(--bg-alt); }
.blog-cover img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s var(--ease), filter .6s ease;
}
@media (hover: hover){
  .blog-cover img{ filter: grayscale(65%) contrast(1.05); }
  .blog-card:hover .blog-cover img{ transform: scale(1.05); filter: grayscale(0%) contrast(1.05); }
}
.blog-body{ padding: 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-date{ color: var(--text-dimmer); font-size: .78rem; text-transform:uppercase; letter-spacing:.06em; }
.blog-body h3{ font-size: 1.1rem; line-height:1.3; }
.blog-body p{ color: var(--text-dim); font-size: .9rem; flex:1; }
.blog-read{ color: var(--gold); font-size: .85rem; font-weight:600; align-self:flex-start; }
.section-foot{ text-align:center; margin-top: 40px; }

/* ===================================================
   MULTI-PAGE LAYOUT
   =================================================== */

/* Banner at the top of every page other than home. Sits clear of the
   fixed header, which the home page's full-height hero handles itself. */
.page-hero{
  position: relative;
  padding: 190px 0 70px;
  border-bottom: 1px solid var(--border);
}
.page-hero-title{
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.06;
  margin-top: 10px;
}
.page-hero-sub{
  margin-top: 22px;
  max-width: 56ch;
  color: var(--text-dim);
  font-size: 1.08rem;
  line-height: 1.7;
}
/* The first section after the banner doesn't need its full top padding. */
.page-hero + .section{ padding-top: 90px; }
.page-hero + .gallery-section{ padding-top: 90px; }

/* Home: statement band ------------------------------------------------ */
.statement-grid{
  display:grid; grid-template-columns: 1fr minmax(280px, 420px);
  gap: 64px; align-items:center;
}
.statement-title{
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.12;
  margin-top: 14px;
}
.statement-text{
  margin-top: 26px;
  max-width: 54ch;
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1.75;
}
.statement-actions{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 34px; }
.statement-photo{
  border-radius: var(--radius); overflow:hidden;
  border: 1px solid var(--border);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.75);
}
/* No forced ratio: the photo keeps its own proportions rather than being
   cropped to fit a box, which was cutting the top of her head off. */
.statement-photo img{ width:100%; height:auto; display:block; }

/* Home: what I do ----------------------------------------------------- */
.service-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.service-card{
  position: relative;
  padding: 34px 30px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.service-num{
  display:block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.service-card h3{ font-size: 1.45rem; margin-bottom: 14px; }
.service-card p{ color: var(--text-dim); line-height: 1.7; margin-bottom: 20px; }

/* Home: portrait band -------------------------------------------------- */
.portrait-band{ padding: 0 0 140px; }
.portrait-strip{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  align-items:start;
}
.portrait-shot{
  margin:0;
  border-radius: var(--radius); overflow:hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -32px rgba(0,0,0,0.7);
}
.portrait-shot img{ width:100%; height:auto; display:block; transition: transform .7s var(--ease); }
.portrait-shot:nth-child(2){ margin-top: 44px; }
@media (hover: hover){
  .portrait-shot:hover img{ transform: scale(1.04); }
}

@media (max-width: 980px){
  .service-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  .portrait-band{ padding-bottom: 90px; }
  .portrait-strip{ gap: 12px; }
  .portrait-shot:nth-child(2){ margin-top: 26px; }
}

/* Home: closing call to action ---------------------------------------- */
.contact-cta{ text-align:center; }
.cta-title{
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.08;
  margin: 14px 0 36px;
}
.contact-cta .contact-actions{ justify-content:center; }

@media (max-width: 860px){
  .page-hero{ padding: 150px 0 50px; }
  .page-hero + .section, .page-hero + .gallery-section{ padding-top: 70px; }
  .statement-grid{ grid-template-columns: 1fr; gap: 40px; }
  .statement-photo{ order: -1; max-width: 420px; }
}

.post-hero{ max-width: 760px; margin: 0 auto; }
.post-meta{ color: var(--text-dimmer); font-size:.85rem; margin-bottom:16px; text-transform:uppercase; letter-spacing:.06em; }
.post-cover{ border-radius: var(--radius); overflow:hidden; margin: 26px 0 40px; border: 1px solid var(--border); }
.post-cover img{ width:100%; display:block; }
.post-content{ max-width: 720px; margin: 0 auto; color: var(--text-dim); font-size: 1.05rem; line-height:1.8; }
.post-content h2,.post-content h3,.post-content h4{ color: var(--text); margin: 36px 0 14px; font-family: var(--font-display); }
.post-content p{ margin-bottom: 20px; }
.post-content a{ color: var(--gold); text-decoration: underline; }
.post-content img{ border-radius: 14px; margin: 24px 0; }
.post-content ul,.post-content ol{ margin: 0 0 20px; padding-left: 22px; }
.post-content blockquote{
  border-left: 3px solid var(--gold); margin: 24px 0; padding: 4px 0 4px 20px;
  color: var(--text); font-style: italic;
}
.post-back{ display:inline-flex; align-items:center; gap:8px; color: var(--text-dim); font-size:.9rem; margin-bottom: 30px; }

/* ---------- contact ---------- */
.contact{ text-align:center; }
.contact-title{ font-size: clamp(2.2rem, 5.5vw, 4rem); margin: 0 auto 20px; max-width: 800px; }
.contact-sub{ color: var(--text-dim); font-size: 1.1rem; margin-bottom: 46px; display:block; }
.contact-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom: 40px; }
.contact-meta{ display:flex; gap: 26px; justify-content:center; flex-wrap:wrap; color: var(--text-dimmer); font-size:.92rem; }

/* ---------- footer ---------- */
.site-footer{ border-top: 1px solid var(--border); padding: 34px 0; }
.footer-grid{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-logo{ font-family: var(--font-display); font-weight:700; }
.footer-logo span{ color:var(--gold); }
.footer-grid p{ color: var(--text-dimmer); font-size:.85rem; }
.back-to-top{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s var(--ease), border-color .3s ease;
}
.back-to-top:hover{ border-color: var(--gold); transform: translateY(-4px); }

/* ---------- tilt ---------- */
.tilt-card{ transform-style: preserve-3d; will-change: transform; }

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; justify-items:center; text-align:center; gap: 36px; }
  .about-text{ max-width: 60ch; }
  .about-photo-wrap{ width: min(280px, 70vw); }
  .about-facts{ text-align:left; }
  .stats{ grid-template-columns: repeat(2,1fr); row-gap: 40px; }
  .skills-grid{ grid-template-columns:1fr; }
  .achievements{ grid-template-columns:1fr; }
  .achieve-card.highlight{ grid-column: span 1; }
  .video-grid{ grid-template-columns: repeat(2,1fr); }
  .project-grid{ grid-template-columns: repeat(2,1fr); }
  .blog-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px){
  .section{ padding: 90px 0; }
  .about-facts{ grid-template-columns: 1fr; }
  .timeline-item{ gap:16px; }
  .timeline-marker{ width:44px; height:44px; font-size:.8rem; }
  .timeline-line{ left:21px; }
  .timeline-content{ padding: 22px 20px; }
  .edu-item{ grid-template-columns: 1fr; gap:6px; }
  .contact-actions{ flex-direction:column; align-items:stretch; }
  .contact-actions .btn{ justify-content:center; }
  .video-grid{ grid-template-columns: 1fr; }
  .project-grid{ grid-template-columns: 1fr; }
  .blog-grid{ grid-template-columns: 1fr; }
  .video-hero video{ max-height: 260px; }
  .bg-grid{ background-size: 40px 40px; }
}

/* ===================================================
   MOBILE PERFORMANCE
   Blurred/animated filters and backdrop-filter are expensive to
   repaint on phones and are the main cause of scroll jank — trade a
   little visual richness for a smooth scroll on small screens.
   =================================================== */
@media (max-width: 860px){

  /* Tilt/magnetic hover effects never run on touch, so the GPU layers
     they reserve are pure memory pressure on a phone. */
  .tilt-card{ will-change: auto; }

  /* Drawn by a scroll-linked animation on desktop; shown outright here. */
  .timeline-line i{ transform: scaleY(1); }

  .nav{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10,8,6,0.92);
  }

  .hero-video{ animation: none; will-change: auto; }

  .about-photo-ring{ filter: blur(10px); }
}