/* ============================================================
   ANURADHA TIBILE , PORTFOLIO
   Design concept: "The All-Access Pass"
   She is the person backstage with the lanyard , the one who
   built the room before anyone walked into it. Badges, hole-
   punches, foil accents and stage-signage typography carry
   that identity through every section.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:#14171c;
  --ink-soft:#1f242c;
  --parchment:#f5f0e6;
  --parchment-dim:#eae3d3;
  --brass:#c89b3c;
  --brass-bright:#e6c265;
  --teal:#1c4b4b;
  --teal-bright:#2f7d7d;
  --rust:#b5502f;
  --line: rgba(245,240,230,0.14);
  --line-dark: rgba(20,23,28,0.12);
  --shadow: 0 20px 60px rgba(0,0,0,0.35);
  --radius: 2px;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

::selection{background:var(--brass); color:var(--ink);}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ---------- utility type ---------- */
.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brass-bright);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background:var(--brass-bright);
  display:inline-block;
}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
}

/* ---------- badge / lanyard signature component ---------- */
.badge{
  position:relative;
  background:var(--parchment);
  color:var(--ink);
  border-radius:10px;
  padding:22px 24px 18px;
  box-shadow:var(--shadow);
  transform:rotate(var(--tilt, -2deg));
}
.badge::before{ /* hole punch */
  content:"";
  position:absolute;
  top:10px; left:50%;
  width:14px; height:14px;
  margin-left:-7px;
  background:var(--ink);
  border-radius:50%;
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.5);
}
.badge .badge-role{
  font-family:'Space Mono', monospace;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal);
  border-bottom:1px solid var(--line-dark);
  padding-bottom:6px;
  margin-bottom:8px;
  display:block;
}
.lanyard-strap{
  position:absolute;
  top:-46px; left:50%;
  width:26px; height:52px;
  margin-left:-13px;
  background:repeating-linear-gradient(45deg, var(--teal), var(--teal) 6px, var(--teal-bright) 6px, var(--teal-bright) 12px);
  border-radius:3px;
  z-index:-1;
}

/* ============================================================
   NAV
   ============================================================ */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(20,23,28,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-mark{
  font-family:'Space Mono', monospace;
  font-size:13px;
  letter-spacing:0.1em;
  display:flex; align-items:center; gap:10px;
}
.nav-mark .dot{width:8px; height:8px; border-radius:50%; background:var(--brass-bright);}
nav.links{display:flex; gap:28px; font-size:13.5px; font-family:'Space Mono',monospace; letter-spacing:0.04em;}
nav.links a{text-decoration:none; opacity:0.75; transition:opacity 0.2s;}
nav.links a:hover{opacity:1; color:var(--brass-bright);}

.nav-toggle{
  display:none;
  position:relative; z-index:101;
  background:none; border:none; padding:6px; cursor:pointer;
  width:40px; height:40px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle .hamburger-line{
  display:block; width:22px; height:2px; border-radius:2px;
  background:var(--parchment);
  transition:transform .3s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(10,12,15,0.55);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
  z-index:98;
}
.nav-backdrop.is-open{display:block; opacity:1; pointer-events:auto;}

@media (max-width:820px){
  nav.links{
    display:flex; flex-direction:column;
    position:fixed; top:0; right:0;
    height:100vh; width:min(80vw, 320px);
    background:#14171c;
    padding:96px 30px 40px;
    gap:2px;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow:-12px 0 40px rgba(0,0,0,0.45);
    border-left:1px solid var(--line);
    z-index:99;
    overflow-y:auto;
  }
  nav.links.is-open{transform:translateX(0);}
  nav.links a{
    font-size:16px;
    padding:16px 4px;
    border-bottom:1px solid rgba(245,240,230,0.08);
    opacity:0.85;
    -webkit-tap-highlight-color:transparent;
  }
  nav.links a:active{opacity:1; color:var(--brass-bright);}
  .nav-toggle{display:flex;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
  padding:140px 0 80px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(28,75,75,0.35), transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(200,155,60,0.18), transparent 45%),
    var(--ink);
  overflow:hidden;
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:0.25;
  mask-image:linear-gradient(to bottom, black, transparent 75%);
}
.hero-content{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1fr min(360px, 32vw);
  gap:56px;
  align-items:center;
}
.hero-text{min-width:0;}
.hero-eyebrow-row{display:flex; align-items:center; gap:14px; margin-bottom:28px; flex-wrap:wrap;}
.access-pill{
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  border:1px solid var(--brass); color:var(--brass-bright);
  padding:6px 12px; border-radius:20px;
}
h1.hero-title{
  font-size:clamp(2.6rem, 6vw, 5.2rem);
  line-height:0.98;
  max-width:14ch;
  margin-bottom:28px;
}
h1.hero-title em{
  font-style:italic;
  color:var(--brass-bright);
}
.hero-quote{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.3rem;
  color:var(--brass-bright);
  max-width:620px;
  margin:22px 0 26px;
  line-height:1.5;
}
.hero-sub{
  font-size:1.15rem;
  max-width:640px;
  color:rgba(245,240,230,0.8);
  margin-bottom:40px;
}
.hero-image-frame{
  position:relative;
  width:100%;
  transform:rotate(3deg);
  z-index:1;
  align-self:center;
}
.hero-image-frame .badge{padding:14px 14px 40px;}
.hero-image-frame img{border-radius:2px; filter:grayscale(0.1); width:100%; height:auto; display:block;}
.hero-image-frame .cap{
  position:absolute; bottom:12px; left:14px; right:14px;
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.06em;
  color:var(--ink); opacity:0.65;
}
.hero-placeholder-note{
  font-family:'Space Mono', monospace;
  font-size:11px;
  color:rgba(245,240,230,0.35);
  text-align:center;
  padding-top:6px;
}
.stat-row{display:flex; gap:48px; flex-wrap:wrap; margin-top:8px;}
.stat-row .stat b{
  display:block; font-family:'Fraunces', serif; font-size:2.1rem; color:var(--brass-bright); font-weight:600;
}
.stat-row .stat span{font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.6;}

.ipv-stat-row{margin:26px 0 40px; padding:24px 0; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);}
.ipv-stat-row .stat b{color:var(--rust);}
.ipv-stat-row .stat span{color:var(--ink); opacity:0.55;}

@media (max-width: 900px){
  .hero-content{ grid-template-columns: 1fr; gap:0; }
  .hero-image-frame{ width:220px; margin:36px auto 0; transform:rotate(3deg); }
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
section{padding:120px 0; position:relative;}
section.on-parchment{background:var(--parchment); color:var(--ink);}
section.on-parchment .eyebrow{color:var(--teal);}
section.on-parchment .eyebrow::before{background:var(--teal);}
.section-head{max-width:720px; margin-bottom:64px;}
.section-head h2{font-size:clamp(2rem, 4vw, 3rem); margin-top:16px;}
.section-head p{margin-top:18px; font-size:1.05rem; opacity:0.75; max-width:60ch;}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap:64px;
  align-items:start;
}
.about-photo{position:relative;}
.about-photo .frame{
  background:var(--ink);
  padding:18px 18px 54px;
  border-radius:4px;
  box-shadow:0 30px 60px rgba(0,0,0,0.15);
  transform:rotate(-2deg);
}
.about-photo .frame img{border-radius:2px; aspect-ratio:4/5; object-fit:cover; width:100%;}
.about-photo .frame .tag{
  position:absolute; bottom:18px; left:18px; right:18px;
  color:var(--parchment); font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.06em; opacity:0.7;
}
.placeholder-box{
  aspect-ratio:4/5; width:100%;
  border:1.5px dashed var(--line-dark);
  border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.05em; color:rgba(20,23,28,0.4);
  padding:24px;
}
.about-copy p{font-size:1.08rem; margin:0 0 20px; max-width:56ch;}
.about-copy .lede{font-family:'Fraunces', serif; font-size:1.5rem; font-weight:500; line-height:1.4; color:var(--ink);}
.role-line{
  font-family:'Space Mono', monospace; font-size:12.5px; letter-spacing:0.06em;
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  padding:16px 0; margin:32px 0; display:flex; gap:24px; flex-wrap:wrap;
}
.role-line span{opacity:0.55;}
.role-line b{color:var(--teal);}

/* ============================================================
   NOW / CURRENT WORK , event stage cards
   ============================================================ */
.stage-cards{display:flex; flex-direction:column; gap:2px;}
.stage-card{
  display:grid;
  grid-template-columns:120px 1.1fr 1.4fr;
  gap:40px;
  padding:48px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.stage-num{
  font-family:'Fraunces', serif; font-size:3.4rem; font-weight:300; color:var(--brass);
  opacity:0.5;
}
.stage-info .event-name{font-size:1.9rem; margin-bottom:10px;}
.stage-info .event-meta{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.06em; color:var(--brass-bright); margin-bottom:14px;}
.stage-info p{opacity:0.75; max-width:48ch;}
.stage-gallery{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.stage-gallery img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:3px;
  cursor:zoom-in;
  transition:transform 0.35s ease, box-shadow .35s ease;
}
.stage-gallery img:hover{transform:scale(1.05) rotate(-1deg); box-shadow:0 12px 30px rgba(0,0,0,0.5); z-index:5; position:relative;}
.stage-gallery-pending{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:start;
}
.gec-video-thumb{position:relative; display:block; border-radius:3px; overflow:hidden;}
.gec-video-thumb img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block;}
.gec-video-thumb .play-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,0.6);
  background:rgba(0,0,0,0.14); transition:background .25s ease;
}
.gec-video-thumb:hover .play-overlay{background:rgba(0,0,0,0.3);}
.gallery-pending-note{
  grid-column:1 / -1;
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.04em;
  color:rgba(245,240,230,0.4); border:1px dashed var(--line); border-radius:4px;
  padding:16px; text-align:center;
}

@media (max-width:940px){
  .stage-card{grid-template-columns:1fr; gap:20px;}
  .stage-num{font-size:2rem;}
}

/* ============================================================
   TEDX + PRISON VOICES , floating pop-up collage
   ============================================================ */
.legacy-block{margin-bottom:96px;}
.legacy-block:last-child{margin-bottom:0;}
.legacy-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; flex-wrap:wrap;}
.legacy-head h3{font-size:1.7rem;}
.legacy-head .role-tag{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-bright); border:1px solid var(--line); padding:6px 12px; border-radius:20px;}
.legacy-oneliner{font-size:1.02rem; opacity:0.7; max-width:60ch; margin:0 0 22px; font-style:italic;}
.legacy-text a{color:var(--teal); text-decoration:underline; text-decoration-color:rgba(28,75,75,0.35); text-underline-offset:2px; transition:color .2s ease;}
.legacy-text a:hover{color:var(--rust);}
.legacy-oneliner em{color:var(--teal); font-style:italic;}
.legacy-text{font-size:1.02rem; opacity:0.75; max-width:64ch; margin:0 0 40px;}
.float-collage{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:26px 22px;
  padding:30px 4px 20px;
}
.float-item{
  flex:0 0 auto;
  width:200px;
  cursor:pointer;
  transition:transform .3s ease;
}
.float-item:nth-child(odd){transform:rotate(-3deg);}
.float-item:nth-child(even){transform:rotate(2deg);}
.float-item:hover{transform:scale(1.08) rotate(0deg) translateY(-8px); z-index:6;}
.float-item .polaroid{
  background:var(--parchment);
  padding:10px 10px 34px;
  border-radius:2px;
  box-shadow:0 14px 30px rgba(0,0,0,0.4);
}
.float-item img{width:100%; aspect-ratio:4/5; object-fit:cover;}
.float-item .cap{font-family:'Space Mono',monospace; font-size:10px; color:var(--ink); opacity:0.6; padding-top:8px; text-align:center;}
.doc-video-link .play-overlay{
  position:absolute; top:0; left:0; right:0; bottom:24px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,0.6);
  background:rgba(0,0,0,0.12); transition:background .25s ease;
}
.doc-video-link:hover .play-overlay{background:rgba(0,0,0,0.28);}
.doc-video-link .cap{color:var(--ink); font-weight:600;}

.anchor-lang-row{display:flex; gap:22px; flex-wrap:wrap;}
.anchor-lang-card{
  text-decoration:none; color:var(--ink);
  width:200px;
}
.anchor-lang-thumb{
  position:relative; border-radius:6px; overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,0.16);
  transition:transform .25s ease, box-shadow .25s ease;
}
.anchor-lang-thumb img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block;}
.anchor-lang-thumb .play-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,0.6);
  background:rgba(0,0,0,0.14); transition:background .25s ease;
}
.anchor-lang-card:hover .anchor-lang-thumb{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,0.24);}
.anchor-lang-card:hover .anchor-lang-thumb .play-overlay{background:rgba(0,0,0,0.3);}
.anchor-lang-label{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  margin-top:10px; opacity:0.7; text-align:center;
}
.anchor-lang-card:hover .anchor-lang-label{opacity:1; color:var(--brass-bright);}

.yt-feature-card{
  text-decoration:none; color:var(--ink);
  width:320px;
}
.yt-feature-thumb{
  position:relative; border-radius:6px; overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,0.16);
  transition:transform .25s ease, box-shadow .25s ease;
}
.yt-feature-thumb img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.yt-feature-thumb .play-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,0.6);
  background:rgba(0,0,0,0.16); transition:background .25s ease;
}
.yt-feature-card:hover .yt-feature-thumb{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,0.24);}
.yt-feature-card:hover .yt-feature-thumb .play-overlay{background:rgba(0,0,0,0.32);}
.yt-feature-label{
  font-family:'Fraunces',serif; font-size:0.95rem; line-height:1.35;
  margin-top:12px; opacity:0.8;
}
.yt-feature-card:hover .yt-feature-label{opacity:1; color:var(--teal);}

/* ============================================================
   VIDEO GALLERY
   ============================================================ */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:28px;
}
.video-card{
  background:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
.video-card:hover{transform:translateY(-6px); border-color:var(--brass);}
.video-frame-wrap{position:relative; aspect-ratio:16/9; background:#000;}
.video-frame-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-meta{padding:18px 20px 22px;}
.video-meta .v-eyebrow{font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-bright); margin-bottom:6px;}
.video-meta h4{font-size:1.15rem;}

/* ============================================================
   X / TWEETS
   ============================================================ */
.tweet-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
}
.tweet-card{
  background:var(--parchment);
  color:var(--ink);
  border-radius:14px;
  padding:18px;
  box-shadow:0 20px 40px rgba(0,0,0,0.25);
  text-decoration:none;
  display:block;
  transition:transform .3s ease;
}
.tweet-card:hover{transform:translateY(-6px);}
.tweet-top{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.tweet-avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--teal-bright));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; color:var(--parchment); font-weight:700;
}
.tweet-name{font-weight:700; font-size:14px;}
.tweet-handle{font-size:12.5px; opacity:0.55;}
.tweet-card img{border-radius:10px; margin-top:4px;}
.x-cta{
  margin-top:36px; display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.06em;
  text-decoration:none; color:var(--parchment); border-bottom:1px solid var(--brass-bright); padding-bottom:4px;
  transition:gap .2s ease;
}
.x-cta:hover{gap:16px; color:var(--brass-bright);}

.visit-site-link{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:16px;
  text-decoration:none;
  background:linear-gradient(135deg, var(--brass-bright), var(--brass));
  padding:8px 18px 8px 8px;
  border-radius:40px;
  box-shadow:0 6px 16px rgba(200,155,60,0.3);
  transition:transform .25s ease, box-shadow .25s ease;
}
.visit-site-circle{
  width:26px; height:26px; flex-shrink:0;
  border-radius:50%; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--brass-bright);
  transition:transform .3s ease;
}
.visit-site-label{
  font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
  font-weight:700; color:var(--ink);
}
.visit-site-link:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(200,155,60,0.45);
}
.visit-site-link:hover .visit-site-circle{transform:rotate(45deg) scale(1.1);}

.view-all-btn{
  display:inline-flex; align-items:center; gap:18px;
  text-decoration:none; color:var(--ink);
  margin-top:8px;
  background:linear-gradient(135deg, var(--brass-bright), var(--brass));
  padding:14px 28px 14px 14px;
  border-radius:60px;
  box-shadow:0 10px 26px rgba(200,155,60,0.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.view-all-circle{
  width:44px; height:44px; flex-shrink:0;
  border-radius:50%; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; color:var(--brass-bright);
  transition:transform .3s ease;
}
.view-all-label{
  font-family:'Space Mono',monospace; font-size:14px; letter-spacing:0.06em; text-transform:uppercase;
  font-weight:700; color:var(--ink);
}
.view-all-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(200,155,60,0.5);
}
.view-all-btn:hover .view-all-circle{transform:rotate(45deg) scale(1.1);}

/* ============================================================
   BLOGS
   ============================================================ */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:26px;
}
.blog-card{
  text-decoration:none; color:var(--parchment);
  display:block;
  border-radius:6px;
  overflow:hidden;
  background:var(--ink-soft);
  border:1px solid var(--line);
  transition:transform .3s ease, border-color .3s ease;
}
.blog-card:hover{transform:translateY(-6px); border-color:var(--brass);}
.blog-cover{aspect-ratio:16/10; overflow:hidden;}
.blog-cover img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.blog-card:hover .blog-cover img{transform:scale(1.06);}
.blog-body{padding:18px 20px 22px;}
.blog-body .b-eyebrow{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.1em; color:var(--brass-bright); text-transform:uppercase; margin-bottom:8px;}
.blog-body h4{font-size:1.05rem; line-height:1.35;}

/* ============================================================
   RECOMMENDATIONS
   ============================================================ */
.rec-grid{
  columns:3 320px;
  column-gap:24px;
}
.rec-card{
  break-inside:avoid;
  background:var(--parchment); color:var(--ink);
  border-radius:4px;
  padding:26px 24px;
  margin-bottom:24px;
  position:relative;
  box-shadow:0 16px 34px rgba(0,0,0,0.18);
}
.rec-card::before{
  content:"\201C";
  font-family:'Fraunces', serif;
  font-size:3.5rem;
  color:var(--brass);
  position:absolute; top:6px; left:16px;
  opacity:0.35;
  line-height:1;
}
.rec-quote{font-size:0.98rem; line-height:1.6; margin:22px 0 18px; position:relative; z-index:1;}
.rec-person{font-family:'Space Mono',monospace; font-size:11.5px; border-top:1px solid var(--line-dark); padding-top:12px;}
.rec-person b{display:block; font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px; margin-bottom:2px;}
.rec-person span{opacity:0.55; display:block; font-size:11px;}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  padding:100px 0 50px;
  background:var(--ink);
  border-top:1px solid var(--line);
}
.footer-cta h2{font-size:clamp(2rem,5vw,3.6rem); max-width:12ch; margin-bottom:24px;}
.footer-links{display:flex; gap:28px; flex-wrap:wrap; margin-top:40px; font-family:'Space Mono',monospace; font-size:13px;}
.footer-links a{text-decoration:none; opacity:0.7; border-bottom:1px solid transparent; padding-bottom:2px;}
.footer-links a:hover{opacity:1; border-color:var(--brass-bright); color:var(--brass-bright);}
.footer-bottom{margin-top:70px; padding-top:24px; border-top:1px solid var(--line); font-family:'Space Mono',monospace; font-size:11.5px; opacity:0.4; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,12,15,0.92);
  display:none;
  align-items:center; justify-content:center;
  padding:40px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:85vh; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,0.6);}
.lightbox-close{
  position:absolute; top:28px; right:32px;
  font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.1em;
  background:none; border:1px solid var(--line); color:var(--parchment);
  padding:8px 16px; border-radius:20px; cursor:pointer;
}
.lightbox-close:hover{border-color:var(--brass-bright); color:var(--brass-bright);}

.rec-card-img{
  background:none;
  padding:0;
  box-shadow:0 16px 34px rgba(0,0,0,0.35);
  border-radius:10px;
  overflow:hidden;
}
.rec-card-img::before{content:none;}
.rec-card-img img{
  width:100%; display:block; cursor:zoom-in;
  transition:transform .3s ease;
}
.rec-card-img:hover img{transform:scale(1.02);}

/* ---------- Contact form ---------- */
.contact-form{max-width:560px;}
.cf-row{margin-bottom:22px; display:flex; flex-direction:column; gap:8px;}
.cf-row label{
  font-family:'Space Mono', monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal);
}
.cf-row input, .cf-row textarea{
  font-family:'Inter', sans-serif; font-size:15px;
  background:var(--parchment-dim);
  border:1px solid var(--line-dark);
  border-radius:4px;
  padding:12px 14px;
  color:var(--ink);
  resize:vertical;
}
.cf-row input:focus, .cf-row textarea:focus{
  outline:2px solid var(--brass); outline-offset:1px; background:#fff;
}
.cf-submit{
  font-family:'Space Mono', monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--ink); color:var(--parchment);
  border:none; padding:14px 26px; border-radius:4px; cursor:pointer;
  transition:background .2s ease;
}
.cf-submit:hover{background:var(--teal);}
.cf-submit:disabled{opacity:0.6; cursor:wait;}
.cf-status{font-family:'Space Mono', monospace; font-size:12.5px; margin-top:16px; min-height:18px;}
.cf-status-success{color:var(--teal);}
.cf-status-error{color:var(--rust);}

/* ============================================================
   EXPERIENCE TIMELINE
   ============================================================ */
.timeline{position:relative; max-width:820px; padding-left:12px;}
.timeline::before{
  content:"";
  position:absolute; left:12px; top:8px; bottom:8px;
  width:2px;
  background:linear-gradient(to bottom, var(--brass), var(--teal-bright) 60%, transparent);
}
.tl-item{
  position:relative;
  padding-left:52px;
  padding-bottom:56px;
}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{
  position:absolute; left:4px; top:4px;
  width:17px; height:17px;
  border-radius:50%;
  background:var(--ink);
  border:3px solid var(--brass-bright);
  box-shadow:0 0 0 4px var(--ink);
}
.tl-date{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--brass-bright); margin-bottom:8px;
}
.tl-body h4{font-size:1.3rem; margin-bottom:10px;}
.tl-body p{opacity:0.75; max-width:56ch; margin:0 0 10px;}
.tl-list{margin:14px 0 10px; padding-left:18px; max-width:60ch;}
.tl-list li{margin-bottom:10px; opacity:0.8; line-height:1.5;}
.tl-list li b{opacity:1; color:var(--brass-bright);}
.tl-footnote{
  font-family:'Space Mono', monospace; font-size:11.5px; letter-spacing:0.03em;
  opacity:0.5; margin-top:14px; font-style:normal;
}

@media (max-width:600px){
  .timeline{padding-left:4px;}
}

a:focus-visible, button:focus-visible{outline:2px solid var(--brass-bright); outline-offset:3px;}

@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;}
  .rec-grid{columns:1 100%;}
  section{padding:80px 0;}
}

@media (max-width:600px){
  .stage-gallery{grid-template-columns:repeat(2, 1fr); gap:8px;}
  .stage-card{padding:36px 0;}
  .stage-num{font-size:1.6rem;}
  .nav-inner{padding:14px 20px;}
  .nav-mark{font-size:11.5px;}
  h1.hero-title{max-width:none;}
  .hero-quote,.hero-sub{max-width:none;}
  .stat-row{gap:28px;}
  .tweet-row{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .float-collage{gap:20px 14px;}
  .float-item{width:calc(50% - 7px);}
}