/* ══════════════════════════════════════
   JAPSIMRAN KAUR — PORTFOLIO
   Shared stylesheet for all pages
══════════════════════════════════════ */

/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:'Space Grotesk',sans-serif;
  background:var(--cream);
  color:var(--black);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}

/* ══════════════════════════════════════
   TOKENS  — darker, warmer, consistent across every page
══════════════════════════════════════ */
:root{
  --cream:#F5EDE0;
  --black:#1C1A17;            /* slightly softer than pure black, warmer */
  --orange:#E0531F;           /* darkened from F05A28 for better contrast/legibility */
  --orange-dim:rgba(224,83,31,.14);
  --orange-deep:#B34219;      /* AA-safe orange for small text on light bg + orange backgrounds carrying white text (4.87:1 / 5.66:1) */
  --orange-ondark:#E4683A;    /* AA-safe orange for small text on the black About section (5.24:1) */
  --sage:#6E9171;              /* darkened from 8BAB8D so it reads on cream */
  --sage-deep:#58745A;         /* AA-safe sage for backgrounds carrying white text (5.17:1) */
  --rule:#E3D6BE;              /* warm rule tone, replaces old cool blue #C8D8E8 */
  --muted:#5B564E;             /* darkened from #777 — was too low-contrast on cream */
  --muted-soft:#68635A;        /* darkened from #8A8478 — was 3.2:1 on cream, failed AA */
  --white:#FFFFFF;
  --line:rgba(28,26,23,.14);   /* standard hairline replacing hard 2px black borders */
  --line-soft:rgba(28,26,23,.08);
  --shadow-card:rgba(28,26,23,.10);
  --sidebar:72px;
  --max:1120px;
}

/* ══════════════════════════════════════
   VERTICAL NAV SIDEBAR (desktop)
══════════════════════════════════════ */
.sidebar{
  position:fixed;
  left:0;top:0;bottom:0;
  width:var(--sidebar);
  z-index:200;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 0;
  border-right:1.5px solid var(--line);
  background:var(--cream);
}
.sidebar-brand{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  font-family:'Bebas Neue',sans-serif;
  font-size:1rem;
  letter-spacing:.14em;
  color:var(--black);
}
.sidebar-nav{
  display:flex;flex-direction:column;
  align-items:center;gap:.25rem;
}
.sidebar-nav a{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-soft);
  padding:.9rem .3rem;
  border-radius:4px;
  transition:color .2s,background .2s;
  position:relative;
}
.sidebar-nav a:hover,
.sidebar-nav a.active{color:var(--orange-deep)}
.sidebar-nav a.active::before{
  content:'';
  position:absolute;right:0;top:50%;
  transform:translateY(-50%);
  width:2px;height:60%;
  background:var(--orange);
  border-radius:2px;
}
.sidebar-socials{
  display:flex;flex-direction:column;gap:.75rem;align-items:center;
}
.sidebar-socials a{
  width:28px;height:28px;
  display:grid;place-items:center;
  border:1.5px solid var(--line);
  border-radius:50%;
  font-size:.7rem;
  font-weight:700;
  transition:border-color .2s,color .2s,transform .2s;
}
.sidebar-socials a:hover{
  border-color:var(--orange);
  color:var(--orange-deep);
  transform:scale(1.12);
}

/* ══════════════════════════════════════
   MAIN CONTENT (offset for sidebar)
══════════════════════════════════════ */
.main-wrap{
  margin-left:var(--sidebar);
  min-height:100vh;
}

/* ══════════════════════════════════════
   SECTION BASE
══════════════════════════════════════ */
.page-section{
  min-height:100vh;
  padding:5rem 4rem 5rem 4rem;
  position:relative;
  border-bottom:1.5px solid var(--line);
}
.inner{
  max-width:var(--max);
  margin:0 auto;
}

/* ══════════════════════════════════════
   PAPER LINES (subtle ruled texture)
══════════════════════════════════════ */
.paper-lines{
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 39px,
    var(--rule) 39px,
    var(--rule) 40px
  );
  opacity:.4;
}

/* ══════════════════════════════════════
   ★  HERO — THE SKETCHBOOK SPREAD
══════════════════════════════════════ */
#home{
  display:flex;
  align-items:center;
  background:var(--cream);
  overflow:hidden;
  padding-top:0;padding-bottom:0;
  min-height:100vh;
}
.hero-inner{
  position:relative;z-index:1;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:5rem 4rem;
}
.hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2.5rem;
}
.hero-meta{
  display:flex;flex-direction:column;
  gap:.6rem;
  padding-top:.6rem;
}
.hero-meta-tag{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:.35rem .8rem;
  display:inline-block;
  align-self:flex-start;
}
.hero-meta-status{
  display:flex;align-items:center;gap:.5rem;
  font-size:.8rem;font-weight:600;color:var(--muted);
}
.status-dot{
  width:7px;height:7px;
  background:var(--sage);
  border-radius:50%;
  animation:pulse 2.5s ease infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(110,145,113,.5)}
  50%{box-shadow:0 0 0 6px rgba(110,145,113,0)}
}

/* Doodle sheet — faint full-bleed background watermark on the hero */
.hero-doodle-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-doodle-bg img{
  position:absolute;
  top:50%;right:-4%;
  width:46%;
  min-width:420px;
  height:auto;
  transform:translateY(-50%);
  opacity:.07;
  filter:grayscale(1) contrast(.9);
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 65% 65% at 60% 50%, #000 45%, transparent 88%);
  mask-image:radial-gradient(ellipse 65% 65% at 60% 50%, #000 45%, transparent 88%);
}

/* Reusable doodle watermark for any light/cream section (work, contact headers) */
.page-doodle-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.page-doodle-bg img{
  position:absolute;
  top:50%;right:-6%;
  width:38%;
  min-width:340px;
  height:auto;
  transform:translateY(-50%);
  opacity:.06;
  filter:grayscale(1) contrast(.9);
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 65% 50%, #000 40%, transparent 85%);
  mask-image:radial-gradient(ellipse 60% 60% at 65% 50%, #000 40%, transparent 85%);
}
.page-doodle-bg-left img{
  right:auto;left:-6%;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 35% 50%, #000 40%, transparent 85%);
  mask-image:radial-gradient(ellipse 60% 60% at 35% 50%, #000 40%, transparent 85%);
}
/* Variant for dark sections (About page) — doodle reads as light linework on black */
.page-doodle-bg-dark img{
  opacity:.10;
  filter:grayscale(1) invert(1) contrast(.85);
  mix-blend-mode:screen;
}
/* About page specifically: the right column is full of solid content (photo,
   faces panel) so a right-anchored doodle gets buried behind it. Instead,
   spread it wider and centre it so it reads behind BOTH columns evenly. */
#about .page-doodle-bg img{
  top:48%;left:50%;right:auto;
  width:78%;
  min-width:560px;
  transform:translate(-50%,-50%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 88%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 88%);
}

/* Profile photo + name layout */
.hero-name-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.hero-photo-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
  padding-bottom:.5rem;
}
.hero-photo{
  width:128px;height:128px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid var(--black);
  background:var(--white);
  flex-shrink:0;
  position:relative;
  box-shadow:5px 5px 0 var(--orange-dim);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-photo-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-size:.62rem;font-weight:700;
  letter-spacing:.04em;
  color:var(--muted-soft);
  padding:.6rem;
  background:repeating-linear-gradient(45deg,var(--cream),var(--cream) 6px,#ECE2D2 6px,#ECE2D2 12px);
}

/* THE MASSIVE NAME */
.hero-name-block{position:relative;flex:1;min-width:260px;}
.hero-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(4rem,12vw,10.5rem);
  line-height:.9;
  letter-spacing:.01em;
  color:var(--black);
  position:relative;
  z-index:1;
  overflow-wrap:break-word;
  max-width:100%;
}
.hero-name .line2{color:var(--orange);}

/* SVG scribble underline */
.name-underline{
  display:block;
  width:100%;
  margin-top:.4rem;
  overflow:visible;
}
.name-underline path{
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:drawLine 1.4s ease forwards .6s;
}
@keyframes drawLine{to{stroke-dashoffset:0}}

/* Annotation — margin note style, sits under the profile photo */
.hero-annotation{
  max-width:140px;
  text-align:center;
}
.anno-arrow{
  display:block;
  font-size:.78rem;
  color:var(--orange-deep);
  font-weight:700;
  margin-bottom:.2rem;
}
.anno-text{
  font-size:.78rem;
  color:var(--muted);
  line-height:1.45;
  font-style:italic;
}

/* Bottom hero row */
.hero-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  padding-top:2rem;
  margin-top:2rem;
  border-top:1.5px solid var(--line);
}
.hero-desc{
  max-width:46ch;
  font-size:1rem;
  color:var(--muted);
  line-height:1.75;
}
.hero-desc strong{color:var(--black);}
.hero-focus-tags{
  display:flex;flex-wrap:wrap;gap:.55rem;
  margin-top:1.5rem;
}
.hero-focus-tag{
  font-size:.74rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:.4rem .85rem;
  background:rgba(255,255,255,.5);
  transition:border-color .2s,color .2s;
}
.hero-focus-tag:hover{border-color:var(--orange);color:var(--orange-deep);}
.hero-cta-group{
  display:flex;flex-direction:column;
  align-items:flex-end;gap:.75rem;
  flex-shrink:0;
}

/* ══════════════════════════════════════
   STANDOUT CTA CARDS — Home page "See My Work" / "Let's Talk"
══════════════════════════════════════ */
.cta-showcase{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
  margin-top:2.5rem;
}
.cta-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.5rem 1.6rem;
  border-radius:18px;
  border:1.5px solid var(--line);
  overflow:hidden;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;
}
.cta-card::before{
  content:'';
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .35s ease;
  z-index:0;
}
.cta-card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 20px 44px -14px rgba(28,26,23,.3);}
.cta-card:hover::before{opacity:1;}
.cta-work{background:var(--black);color:var(--white);}
.cta-work::before{background:radial-gradient(circle at 85% 20%,rgba(224,83,31,.5),transparent 60%);}
.cta-work:hover{border-color:var(--orange);}
.cta-talk{background:var(--white);color:var(--black);}
.cta-talk::before{background:radial-gradient(circle at 85% 20%,rgba(110,145,113,.35),transparent 60%);}
.cta-talk:hover{border-color:var(--sage);}
.cta-icon{
  position:relative;z-index:1;
  width:46px;height:46px;flex-shrink:0;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s ease;
}
.cta-talk .cta-icon{background:rgba(28,26,23,.06);}
.cta-card:hover .cta-icon{transform:rotate(-14deg) scale(1.08);}
.cta-icon svg{width:20px;height:20px;}
.cta-text{position:relative;z-index:1;flex:1;}
.cta-text .cta-label{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  opacity:.65;margin-bottom:.2rem;
}
.cta-text .cta-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.6rem;letter-spacing:.02em;line-height:1;
}
.cta-arrow{
  position:relative;z-index:1;
  font-size:1.3rem;flex-shrink:0;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.cta-card:hover .cta-arrow{transform:translateX(6px);}
@media(max-width:900px){
  .cta-showcase{grid-template-columns:1fr;margin-top:1.75rem;}
}

/* Doodle circle cluster top-right */
.hero-doodle-cluster{
  position:absolute;
  top:3rem;right:3rem;
  width:160px;height:160px;
  pointer-events:none;z-index:0;
  opacity:.22;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.5rem;
  border-radius:999px;
  font-weight:700;font-size:.88rem;
  border:1.5px solid var(--black);
  transition:transform .2s ease,background .2s,color .2s,border-color .2s,box-shadow .2s;
  white-space:nowrap;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}
.btn-solid{background:var(--black);color:var(--white);}
.btn-solid:hover{background:var(--orange-deep);border-color:var(--orange-deep);}
.btn-ghost{background:transparent;color:var(--black);}
.btn-ghost:hover{background:var(--white);border-color:var(--orange-deep);color:var(--orange-deep);}
.btn-orange{background:var(--orange-deep);color:var(--white);border-color:var(--orange-deep);}
.btn-orange:hover{background:var(--black);border-color:var(--black);}

/* ══════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════ */
.sec-eyebrow{
  font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange-deep);
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.75rem;
}
.sec-eyebrow::before{content:'✦';}
.sec-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3rem,7vw,6.5rem);
  line-height:.88;letter-spacing:.02em;
  margin-bottom:1rem;
}
.sec-sub{color:var(--muted);max-width:52ch;font-size:.97rem;line-height:1.7;}

/* ══════════════════════════════════════
   WORK SECTION
══════════════════════════════════════ */
#work{background:var(--cream);}
.work-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:3rem;
  gap:2rem;
  flex-wrap:wrap;
}

/* PROJECT GRID — flexible responsive grid, scales to any number of projects */
.proj-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.25rem;
}

/* ══════════════════════════════════════
   PRINT GALLERY TEASERS — Posters / Book Covers
   (link out to standalone Pinterest-style pages)
══════════════════════════════════════ */
.print-gallery-heading{margin:4rem 0 1.5rem;}
.print-gallery-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
}
.print-gallery-card{
  position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  border:1.5px solid var(--line);
  background:var(--black);
  min-height:340px;
  box-shadow:0 1px 2px var(--shadow-card);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
.print-gallery-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px -14px rgba(28,26,23,.32);}
.pg-cover{
  position:absolute;inset:0;
  aspect-ratio:3/4;
}
.pg-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;display:block;}
.print-gallery-card:hover .pg-cover img{transform:scale(1.06);}
.pg-tile-placeholder{
  width:100%;height:100%;
  background:repeating-linear-gradient(45deg,#33302B,#33302B 10px,#3B3730 10px,#3B3730 20px);
}
.pg-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(28,26,23,.92) 0%,rgba(28,26,23,.35) 45%,rgba(28,26,23,.15) 100%);
  backdrop-filter:blur(1px);
}
.pg-body{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.5rem 1.6rem;
  color:var(--white);
}
.pg-body span.pg-tag{
  display:inline-block;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-ondark);margin-bottom:.4rem;
}
.pg-body h3{
  font-family:'Bebas Neue',sans-serif;
  font-size:2.3rem;letter-spacing:.02em;line-height:1;margin-bottom:.4rem;
}
.pg-body p{font-size:.85rem;color:rgba(255,255,255,.75);margin-bottom:.85rem;max-width:34ch;}
.pg-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;font-size:.84rem;color:var(--white);
  border:1.5px solid rgba(255,255,255,.4);
  border-radius:999px;padding:.5rem 1.1rem;
  transition:gap .2s,border-color .2s,background .2s;
}
.print-gallery-card:hover .pg-cta{gap:.65rem;border-color:var(--orange);background:rgba(224,83,31,.15);}
@media(max-width:900px){
  .print-gallery-grid{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════
   PINTEREST-STYLE MASONRY GALLERY PAGE
   (posters.html / book-covers.html)
══════════════════════════════════════ */
.pin-grid{
  column-count:4;
  column-gap:1rem;
}
.pin-tile{
  break-inside:avoid;
  margin-bottom:1rem;
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1.5px solid var(--line);
  background:#E9DFCF;
  cursor:pointer;
  box-shadow:0 1px 2px var(--shadow-card);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
}
.pin-tile:hover{transform:translateY(-4px);box-shadow:0 16px 32px -10px rgba(28,26,23,.28);}
.pin-tile img{width:100%;display:block;transition:transform .5s ease;}
.pin-tile:hover img{transform:scale(1.04);}
.pin-tile-placeholder{
  width:100%;aspect-ratio:3/4;
  display:none;flex-direction:column;gap:.3rem;
  align-items:center;justify-content:center;
  text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);
  padding:1rem;
  background:repeating-linear-gradient(45deg,#E9DFCF,#E9DFCF 10px,#E2D6C2 10px,#E2D6C2 20px);
}
.pin-tile-placeholder small{font-weight:600;font-size:.64rem;color:var(--muted-soft);}
.pin-tile.img-missing img{display:none;}
.pin-tile.img-missing .pin-tile-placeholder{display:flex;}
/* frosted blur reveal on hover — themed frosted-glass effect */
.pin-tile-overlay{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  padding:.9rem;
  background:rgba(28,26,23,.0);
  backdrop-filter:blur(0px);
  opacity:0;
  transition:opacity .3s ease,background .3s ease,backdrop-filter .3s ease;
}
.pin-tile:hover .pin-tile-overlay{
  opacity:1;
  background:linear-gradient(0deg,rgba(28,26,23,.55) 0%,rgba(28,26,23,.05) 55%,transparent 100%);
}
.pin-tile-overlay span{
  color:var(--white);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(28,26,23,.4);
  backdrop-filter:blur(6px);
  padding:.35rem .75rem;border-radius:999px;
}
.pin-loadmore-wrap{display:flex;justify-content:center;margin-top:2.5rem;}
@media(max-width:1100px){.pin-grid{column-count:3;}}
@media(max-width:700px){.pin-grid{column-count:2;column-gap:.7rem;} .pin-tile{margin-bottom:.7rem;}}

/* ── LIGHTBOX — full-screen frosted-glass viewer for the Pinterest galleries ── */
.lightbox-overlay{
  position:fixed;inset:0;
  z-index:600;
  display:none;
  align-items:center;justify-content:center;
  background:rgba(20,18,16,.82);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  padding:2rem;
}
.lightbox-overlay.open{display:flex;animation:overlayIn .25s ease;}
.lightbox-stage{
  position:relative;
  max-width:min(92vw,900px);
  max-height:88vh;
  display:flex;align-items:center;justify-content:center;
  animation:modalIn .3s cubic-bezier(.2,.8,.2,1);
}
.lightbox-stage img{
  max-width:100%;max-height:88vh;
  border-radius:14px;
  box-shadow:0 30px 70px -14px rgba(0,0,0,.6);
  display:block;
}
.lightbox-close,.lightbox-back{
  position:fixed;
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(245,237,224,.14);
  border:1.5px solid rgba(255,255,255,.3);
  color:var(--white);
  display:grid;place-items:center;
  font-size:1.15rem;font-weight:700;
  cursor:pointer;z-index:602;
  backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s,transform .2s;
}
.lightbox-close{top:1.5rem;right:1.5rem;}
.lightbox-back{top:1.5rem;left:1.5rem;width:auto;padding:0 1rem;border-radius:999px;gap:.4rem;display:inline-flex;align-items:center;font-size:.8rem;letter-spacing:.05em;}
.lightbox-close:hover,.lightbox-back:hover{background:var(--orange-deep);border-color:var(--orange-deep);transform:scale(1.05);}
.lightbox-arrow{
  position:fixed;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(245,237,224,.14);
  border:1.5px solid rgba(255,255,255,.3);
  color:var(--white);
  display:grid;place-items:center;
  font-size:1.5rem;font-weight:700;
  cursor:pointer;z-index:602;
  backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s,transform .2s;
}
.lightbox-arrow:hover{background:var(--orange-deep);border-color:var(--orange-deep);}
.lightbox-prev{left:1.5rem;}
.lightbox-next{right:1.5rem;}
.lightbox-counter{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  color:var(--white);font-size:.75rem;font-weight:700;letter-spacing:.1em;
  background:rgba(245,237,224,.14);
  border:1.5px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px);
  padding:.4rem 1rem;border-radius:999px;z-index:602;
}
@media(max-width:700px){
  .lightbox-arrow{width:38px;height:38px;font-size:1.2rem;}
  .lightbox-prev{left:.6rem;}
  .lightbox-next{right:.6rem;}
  .lightbox-close{top:1rem;right:1rem;}
  .lightbox-back{top:1rem;left:1rem;}
}

/* Gallery page intro header */
.gallery-stats{
  display:flex;gap:1.5rem;flex-wrap:wrap;
  margin:1.5rem 0 2.5rem;
  padding:1rem 1.25rem;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.5);
}
.gallery-stats div{display:flex;flex-direction:column;gap:.15rem;}
.gallery-stats strong{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:var(--orange);line-height:1;}
.gallery-stats span{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

.proj-card{
  border:1.5px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--white);
  box-shadow:0 1px 2px var(--shadow-card);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  display:flex;flex-direction:column;
  cursor:pointer;
}
.proj-card:hover{
  transform:translateY(-5px);
  border-color:rgba(224,83,31,.35);
  box-shadow:0 16px 32px -8px rgba(28,26,23,.18),0 0 0 1px rgba(224,83,31,.12);
}
.proj-thumb{
  position:relative;
  overflow:hidden;
  background:#E9DFCF;
  flex-shrink:0;
  aspect-ratio:4/3;
}
.proj-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.proj-card:hover .proj-thumb img{transform:scale(1.04);}
/* placeholder when no image */
.proj-thumb-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;gap:.35rem;
  align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;color:var(--muted);
  padding:1rem;text-align:center;
  background:repeating-linear-gradient(45deg,#E9DFCF,#E9DFCF 10px,#E2D6C2 10px,#E2D6C2 20px);
}
.proj-thumb-placeholder small{
  font-weight:600;font-size:.68rem;color:var(--muted-soft);
  letter-spacing:.04em;
}
.proj-tag{
  position:absolute;top:.85rem;left:.85rem;
  background:var(--cream);
  border:1.5px solid var(--line);
  border-radius:999px;
  font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .7rem;z-index:2;
  color:var(--black);
}
.proj-tag.t-orange{background:var(--orange-deep);color:var(--white);border-color:var(--orange-deep);}
.proj-tag.t-sage{background:var(--sage-deep);color:var(--white);border-color:var(--sage-deep);}
.proj-body{
  padding:1.25rem 1.25rem 1.5rem;
  display:flex;flex-direction:column;gap:.5rem;
  flex-shrink:0;
}
.proj-body h3{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.9rem;letter-spacing:.03em;line-height:1;
}
.proj-body p{font-size:.88rem;color:var(--muted);line-height:1.6;}
.proj-link{
  display:inline-flex;align-items:center;gap:.35rem;
  font-weight:700;font-size:.82rem;
  color:var(--orange-deep);
  margin-top:.25rem;
  border-bottom:1.5px solid var(--orange-deep);
  padding-bottom:1px;
  align-self:flex-start;
  transition:gap .2s;
}
.proj-link:hover{gap:.55rem;}

/* ══════════════════════════════════════
   PROJECT MODAL — full-screen pin-style detail view
══════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(28,26,23,.72);
  z-index:500;
  display:none;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  padding:2rem;
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
}
.modal-overlay.open{display:flex;animation:overlayIn .25s ease;}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--cream);
  border:1.5px solid var(--line);
  border-radius:22px;
  width:min(980px,100%);
  height:min(90vh,900px);
  margin:auto;
  overflow:hidden;
  animation:modalIn .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 30px 70px -14px rgba(28,26,23,.45);
  display:flex;
  flex-direction:column;
}
@keyframes modalIn{
  from{opacity:0;transform:translateY(36px)scale(.96)}
  to{opacity:1;transform:none}
}
.modal-hero{
  height:46vh;
  min-height:320px;
  max-height:460px;
  background:#E9DFCF;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.modal-hero img{width:100%;height:100%;object-fit:cover;}
.modal-body{overflow-y:auto;flex:1;scrollbar-width:thin;}

/* ── MODAL CAROUSEL — real horizontal scroll-snap, swipeable/scrollable ── */
.modal-carousel{
  position:relative;
  width:100%;height:100%;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.modal-carousel::-webkit-scrollbar{display:none;}
.modal-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.modal-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.modal-slide-placeholder{
  display:none;
  position:absolute;inset:0;
  flex-direction:column;gap:.4rem;
  align-items:center;justify-content:center;
  text-align:center;
  font-size:.78rem;font-weight:700;color:var(--muted);
  padding:1rem;
  background:repeating-linear-gradient(45deg,#E9DFCF,#E9DFCF 10px,#E2D6C2 10px,#E2D6C2 20px);
}
.modal-slide-placeholder small{font-weight:600;font-size:.68rem;color:var(--muted-soft);}
.modal-slide.img-missing img{display:none;}
.modal-slide.img-missing .modal-slide-placeholder{display:flex;}
.modal-scroll-hint{
  position:absolute;bottom:.9rem;left:50%;
  transform:translateX(-50%);
  z-index:3;
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white);
  background:rgba(28,26,23,.45);
  backdrop-filter:blur(6px);
  padding:.35rem .8rem;border-radius:999px;
  opacity:.9;
  animation:hintPulse 2.2s ease infinite;
  pointer-events:none;
}
@keyframes hintPulse{0%,100%{opacity:.5}50%{opacity:.95}}

.modal-arrow{
  position:absolute;top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;
  border-radius:50%;
  background:rgba(245,237,224,.85);
  border:1.5px solid var(--line);
  display:grid;place-items:center;
  font-size:1.4rem;font-weight:700;
  cursor:pointer;z-index:3;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
  backdrop-filter:blur(4px);
}
.modal-arrow:hover{background:var(--orange-deep);border-color:var(--orange-deep);color:var(--white);}
.modal-arrow-prev{left:1rem;}
.modal-arrow-next{right:1rem;}

.modal-carousel-dots{
  position:absolute;bottom:1rem;left:50%;
  transform:translateX(-50%);
  display:flex;gap:.45rem;
  z-index:3;
}
.modal-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(245,237,224,.6);
  border:1.5px solid rgba(28,26,23,.25);
  cursor:pointer;padding:0;
  transition:background .2s,transform .2s,border-color .2s;
}
.modal-dot.is-active{background:var(--orange);border-color:var(--orange);transform:scale(1.15);}
.modal-dot:hover{border-color:var(--orange);}

.modal-seeall-btn{width:100%;justify-content:center;}

.modal-close{
  position:absolute;top:1rem;right:1rem;
  width:38px;height:38px;
  background:var(--cream);
  border:1.5px solid var(--line);
  border-radius:50%;
  display:grid;place-items:center;
  font-size:1.1rem;font-weight:700;
  cursor:pointer;
  z-index:4;
  transition:background .2s,transform .2s,border-color .2s,color .2s;
}
.modal-close:hover{background:var(--orange-deep);border-color:var(--orange-deep);color:var(--white);transform:rotate(90deg);}
.modal-tag{
  position:absolute;top:1rem;left:1rem;
  background:var(--cream);
  border:1.5px solid var(--line);
  border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.4rem .9rem;
  z-index:3;
}
.modal-body{padding:2.5rem;}
.modal-body h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:3.5rem;letter-spacing:.03em;line-height:.9;
  margin-bottom:1.25rem;
}
.modal-meta{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1rem;
  padding:1.25rem;
  background:rgba(28,26,23,.04);
  border:1.5px solid var(--line);
  border-radius:12px;
  margin-bottom:1.5rem;
}
.modal-meta-item small{
  display:block;
  font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.2rem;
}
.modal-meta-item strong{font-size:.92rem;}
.modal-section{margin-bottom:1.5rem;}
.modal-section h4{
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange-deep);margin-bottom:.6rem;
}
.modal-section p{color:var(--muted);line-height:1.75;font-size:.95rem;}
.modal-footer{
  display:flex;gap:.75rem;flex-wrap:wrap;
  padding-top:1.5rem;
  border-top:1.5px solid var(--line);
}

/* ══════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════ */
#about{background:var(--black);color:var(--white);}
#about .paper-lines{
  background-image:repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 39px,
    rgba(255,255,255,.05) 39px,
    rgba(255,255,255,.05) 40px
  );
  opacity:1;
}
#about .sec-eyebrow{color:var(--orange-ondark);}
.about-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:3rem;
  align-items:start;
  margin-top:3.5rem;
}
.about-left h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3.5rem,8vw,7rem);
  line-height:.88;letter-spacing:.02em;
  color:var(--white);
  margin-bottom:1.5rem;
}
.about-left h2 span{color:var(--orange);}
.about-para{
  color:rgba(255,255,255,.78);
  font-size:1rem;line-height:1.8;
  margin-bottom:1rem;
  max-width:52ch;
}
/* Profile photo on about page */
.about-photo{
  width:100%;
  aspect-ratio:4/5;
  border-radius:16px;
  overflow:hidden;
  border:1.5px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
  margin-bottom:1.5rem;
}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.about-photo-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;gap:.4rem;
  align-items:center;justify-content:center;
  text-align:center;color:rgba(255,255,255,.4);
  font-size:.78rem;font-weight:700;letter-spacing:.04em;
  padding:1.5rem;
}
.about-photo-placeholder small{font-size:.68rem;font-weight:600;color:rgba(255,255,255,.28);}

/* Doodle faces panel */
.about-faces-panel{
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.faces-svg-wrap{
  padding:2rem;
  border-bottom:1.5px solid rgba(255,255,255,.1);
}
.about-stats{
  display:grid;grid-template-columns:1fr 1fr;
}
.about-stat{
  padding:1.5rem;
  border-right:1.5px solid rgba(255,255,255,.1);
  border-bottom:1.5px solid rgba(255,255,255,.1);
}
.about-stat:nth-child(even){border-right:0;}
.about-stat:nth-child(3),
.about-stat:nth-child(4){border-bottom:0;}
.about-stat-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:3rem;color:var(--orange);
  line-height:1;display:block;margin-bottom:.2rem;
}
.about-stat-label{font-size:.8rem;color:rgba(255,255,255,.55);font-weight:600;}

/* Skills */
.about-skills{
  margin-top:2.5rem;
  display:flex;flex-direction:column;gap:1rem;
}
.skill-row{
  display:flex;align-items:center;gap:1rem;
}
.skill-name{
  font-size:.8rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.65);
  width:160px;flex-shrink:0;
}
.skill-bar{
  flex:1;height:3px;
  background:rgba(255,255,255,.12);
  border-radius:2px;overflow:hidden;
}
.skill-fill{
  height:100%;
  background:var(--orange);
  border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s ease;
}
.skill-fill.animate{transform:scaleX(1);}

/* Tools */
.tools-wrap{
  margin-top:2.5rem;
  display:flex;flex-wrap:wrap;gap:.6rem;
}
.tool-tag{
  padding:.5rem 1rem;
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:999px;
  font-size:.8rem;font-weight:700;
  color:rgba(255,255,255,.75);
  transition:border-color .2s,color .2s;
}
.tool-tag:hover{border-color:var(--orange-ondark);color:var(--orange-ondark);}

/* ══════════════════════════════════════
   CONTACT SECTION
══════════════════════════════════════ */
#contact{background:var(--cream);}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  margin-top:3rem;
  align-items:stretch;
}
.contact-info{
  display:flex;flex-direction:column;
  height:100%;
}
.contact-big{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.6rem,6vw,5rem);
  line-height:.92;letter-spacing:.02em;
  margin-bottom:1.1rem;
}
.contact-big span{color:var(--orange);}
.contact-intro{
  color:var(--muted);max-width:42ch;line-height:1.75;
  margin-bottom:2rem;font-size:.97rem;
}
.contact-links{display:flex;flex-direction:column;gap:.85rem;flex:1;}
.contact-link-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:var(--white);
  box-shadow:0 1px 2px var(--shadow-card);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.contact-link-row:hover{
  transform:translateY(-3px);
  border-color:rgba(224,83,31,.35);
  box-shadow:0 10px 24px -6px rgba(28,26,23,.16);
}
.contact-link-row-left small{
  display:block;font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.15rem;
}
.contact-link-row-left strong{font-size:.88rem;}
.contact-link-row .btn{transition:transform .2s,background .2s,color .2s,border-color .2s;}
.contact-link-row:hover .btn{transform:translateX(3px);}
.contact-doodle{margin-top:1.75rem;opacity:.3;width:180px;}
.contact-doodle path{
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation:drawContactLine 1.6s ease forwards .3s;
}
.contact-doodle circle{
  opacity:0;
  animation:fadeInDot .4s ease forwards 1.7s;
}
@keyframes drawContactLine{to{stroke-dashoffset:0}}
@keyframes fadeInDot{to{opacity:1}}

.contact-form-card{
  border:1.5px solid var(--line);
  border-radius:20px;
  padding:2rem;
  background:var(--white);
  box-shadow:0 1px 2px var(--shadow-card);
  display:flex;flex-direction:column;
  height:100%;
}
.contact-form{display:grid;gap:1rem;flex:1;align-content:start;}
.field{display:grid;gap:.4rem;}
.field label{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--black);}
.field input,
.field textarea{
  width:100%;
  border:1.5px solid var(--line);
  background:var(--cream);
  border-radius:10px;
  padding:.8rem 1rem;
  font:inherit;font-size:.92rem;
  color:var(--black);
  outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.field input::placeholder,
.field textarea::placeholder{color:var(--muted-soft);}
.field input:focus,
.field textarea:focus{
  border-color:var(--orange);
  background:var(--white);
  box-shadow:0 0 0 3px var(--orange-dim);
}
textarea{min-height:130px;resize:vertical;}
.contact-form-foot{margin-top:1.25rem;}
.contact-form-foot .btn-solid{
  animation:ctaPulse 2.8s ease infinite;
}
.contact-form-foot .btn-solid:hover{animation:none;}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(28,26,23,.18);}
  50%{box-shadow:0 0 0 7px rgba(28,26,23,0);}
}

/* ══════════════════════════════════════
   RESUME PAGE
══════════════════════════════════════ */
.resume-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1rem;}
.resume-meta a{font-size:.85rem;font-weight:600;color:var(--muted);border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
.resume-meta a:hover{color:var(--orange-deep);border-color:var(--orange-deep);}
.resume-entry{margin-bottom:1.75rem;}
.resume-entry:last-child{margin-bottom:0;}
.resume-entry-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem .75rem;margin-bottom:.15rem;}
.resume-entry-head h3{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.02em;}
.resume-entry-dates{font-size:.78rem;font-weight:700;color:var(--orange-deep);letter-spacing:.04em;white-space:nowrap;}
.resume-entry-sub{font-size:.85rem;color:var(--muted);margin-bottom:.6rem;}
.resume-entry ul{padding-left:1.1rem;color:var(--muted);font-size:.92rem;line-height:1.7;}
.resume-entry ul li{margin-bottom:.15rem;}
.resume-skill-group{margin-bottom:1.25rem;}
.resume-skill-group:last-child{margin-bottom:0;}
.resume-skill-group h4{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:.6rem;}
.resume-skill-tags{display:flex;flex-wrap:wrap;gap:.5rem;}
@media print{
  .sidebar,.mobile-topbar,.mobile-nav,.site-footer,.resume-print-btn,.page-doodle-bg,.paper-lines{display:none!important;}
  .main-wrap{margin-left:0!important;}
  body{background:#fff!important;}
  .page-section{padding:1.5rem 0!important;min-height:auto!important;border:none!important;}
  a{color:inherit!important;text-decoration:none!important;}
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer{
  margin-left:var(--sidebar);
  border-top:1.5px solid var(--line);
  padding:1.5rem 4rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}
.footer-brand{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.2rem;letter-spacing:.06em;
}
.footer-copy{font-size:.78rem;color:var(--muted);}
.footer-links{display:flex;gap:1.25rem;}
.footer-links a{font-size:.8rem;font-weight:600;color:var(--muted);transition:color .2s;}
.footer-links a:hover{color:var(--orange-deep);}

/* ══════════════════════════════════════
   PAGE HEADER (for work/about/contact top banner)
══════════════════════════════════════ */
.page-hero{
  padding-top:6.5rem;
  padding-bottom:2.5rem;
}

/* ══════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════ */
.sr{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.sr.up{transform:translateY(28px);}
.sr.left{transform:translateX(-32px);}
.sr.right{transform:translateX(32px);}
.sr.visible{opacity:1;transform:none;}
.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}
.d4{transition-delay:.32s}
.d5{transition-delay:.4s}

@media (prefers-reduced-motion: reduce){
  .sr{opacity:1!important;transform:none!important;transition:none!important;}
  .name-underline path{animation:none;stroke-dashoffset:0;}
  .status-dot{animation:none;}
  .contact-doodle path{animation:none;stroke-dashoffset:0;}
  .contact-doodle circle{animation:none;opacity:1;}
  .contact-form-foot .btn-solid{animation:none;}
  *{scroll-behavior:auto!important;}
}

/* ══════════════════════════════════════
   MOBILE NAV (bottom bar)
══════════════════════════════════════ */
.mobile-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  z-index:200;
  background:var(--cream);
  border-top:1.5px solid var(--line);
  padding:.75rem 1.5rem;
  justify-content:space-between;
  box-shadow:0 -4px 16px rgba(28,26,23,.06);
}
.mobile-nav a{
  font-size:.65rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-soft);
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  transition:color .2s;
}
.mobile-nav a.active,.mobile-nav a:hover{color:var(--orange-deep);}
.mob-nav-dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--orange);
  opacity:0;transition:opacity .2s;
}
.mobile-nav a.active .mob-nav-dot{opacity:1;}

/* Mobile top brand bar (shown only on small screens, since sidebar hides) */
.mobile-topbar{
  display:none;
  position:fixed;top:0;left:0;right:0;
  z-index:199;
  background:rgba(245,237,224,.92);
  backdrop-filter:blur(8px);
  border-bottom:1.5px solid var(--line);
  padding:.9rem 1.5rem;
  align-items:center;
  justify-content:space-between;
}
.mobile-topbar .footer-brand{font-size:1rem;}
.mobile-topbar a{
  font-size:.7rem;font-weight:700;color:var(--orange-deep);
  border:1.5px solid var(--orange-deep);
  padding:.4rem .8rem;border-radius:999px;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:900px){
  :root{--sidebar:0px;}
  .sidebar{display:none;}
  .mobile-nav{display:flex;}
  .mobile-topbar{display:flex;}
  .main-wrap{margin-left:0;padding-bottom:64px;padding-top:56px;}
  .site-footer{margin-left:0;padding:1.25rem 1.5rem;}
  .page-section{padding:3.5rem 1.5rem;}
  .hero-inner{padding:3rem 1.5rem;}
  .hero-top{flex-direction:column;}
  .hero-name-row{flex-direction:row;align-items:center;justify-content:flex-start;gap:1.25rem;}
  .hero-photo-col{flex-direction:row;gap:.85rem;padding-bottom:0;}
  .hero-annotation{max-width:160px;text-align:left;}
  .hero-photo{width:72px;height:72px;}
  .hero-doodle-bg img{width:70%;min-width:280px;opacity:.07;right:-10%;}
  #about .page-doodle-bg img{width:140%;min-width:340px;}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:1.5rem;}
  .hero-cta-group{align-items:flex-start;flex-direction:row;flex-wrap:wrap;}
  .proj-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .about-photo{max-width:280px;aspect-ratio:1/1;}
  .contact-grid{grid-template-columns:1fr;gap:2rem;}
  .modal-overlay{padding:0;}
  .modal{width:100%;height:100dvh;border-radius:0;}
  .modal-body{padding:1.5rem;}
  .modal-hero{height:38vh;min-height:220px;}
  .modal-meta{grid-template-columns:1fr 1fr;}
  .modal-gallery-grid{grid-template-columns:repeat(2,1fr);}
  .modal-arrow{width:34px;height:34px;font-size:1.2rem;}
  .modal-arrow-prev{left:.6rem;}
  .modal-arrow-next{right:.6rem;}
  .hero-doodle-cluster{display:none;}
  .work-header{flex-direction:column;align-items:flex-start;}
  .page-hero{padding-top:1.5rem;}
  .lightbox-overlay{padding:0;}
}
@media(max-width:560px){
  .hero-name{font-size:clamp(2rem,11.5vw,3rem);letter-spacing:0;}
  .about-stat-num{font-size:2.2rem;}
  .contact-big{font-size:clamp(2.4rem,11vw,3.4rem);}
  .modal-meta{grid-template-columns:1fr;}
  .hero-photo{width:72px;height:72px;}
}