/* =========================================================
   ANH TA PORTFOLIO — SHARED STYLESHEET
   Used by: index.html, antarctica.html (and future pages)
   ========================================================= */

/* ---------------------------------------------------------
   SHARED: Design Tokens
   --------------------------------------------------------- */
:root{
  --bg:#fffff4d5;
  --header-bg:#DFE9E1;
  --card-bg:#E3F0E6;
  --card-bg-deep:#D6E9DB;
  --placeholder:#D9D9D9;
  --ink:#1F5D42;
  --ink-soft:#2C6B4F;
  --text-dark:#25332B;
  --text-muted:#4E5E54;
  --btn:#4FA179;
  --btn-hover:#3E8865;
  --flower:#EF9A8D;
  --radius:20px;
}

/* ---------------------------------------------------------
   SHARED: Base Reset & Global Elements
   --------------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-dark);
  font-family:'Poppins', sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* Fluid container: compact on phones, comfortable on tablets,
   generous breathing room on large desktop screens. */
.wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(20px, 5vw, 96px);
}
.serif{ font-family:'Instrument Serif', serif;}

/* ---------------------------------------------------------
   SHARED: Header & Navigation
   --------------------------------------------------------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--header-bg);
  padding: 16px 0 16px 0;
}
nav.wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:26px;padding-bottom:26px;
}
.brand{
  font-family:'Instrument Serif', serif; font-weight:600;
  font-size:22px; color:var(--ink);
}
.navlinks{display:flex; align-items:center; gap:clamp(24px, 4vw, 56px);}
.navlinks a{
  font-size:17px; font-weight:400; color:var(--text-dark);
  transition:color .2s ease;
}
.navlinks a:hover{color:var(--ink);}
.navlinks a:focus-visible,
.brand:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}

/* Mobile menu toggle (hamburger) — hidden on desktop */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px;
  background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{
  width:24px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:760px){
  .nav-toggle{display:flex;}
  .navlinks{
    position:absolute; top:100%; left:0; right:0;
    background:var(--header-bg);
    flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden;
    transition:max-height .35s ease;
  }
  .navlinks.open{
    max-height:320px;
    box-shadow:0 16px 24px rgba(31,93,66,0.1);
  }
  .navlinks a{
    padding:16px clamp(20px, 5vw, 40px);
    border-top:1px solid rgba(31,93,66,0.08);
  }
}

/* ---------------------------------------------------------
   SHARED: Footer
   --------------------------------------------------------- */
footer{
  background:var(--ink); color:#F3FBF5;
  padding: clamp(56px, 9vw, 90px) 0 clamp(32px, 5vw, 46px);
  margin-top: 36px;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;
  gap: clamp(32px, 5vw, 48px);
}
footer h2{
  font-family:'Instrument Serif', serif; font-style:italic; font-weight:600;
  font-size:clamp(30px,4.4vw,44px); margin:0 0 18px;
}
.footer-email{
  font-family:'Poppins', sans-serif; font-size:19px; font-weight:500; color:#F3FBF5; opacity:0.9;
}
.footer-cols{display:flex; flex-wrap:wrap; gap: clamp(32px, 6vw, 96px);}
.footer-col h4{
  font-family:'Poppins', sans-serif; font-size:18px; font-weight:700; margin:0 0 20px;
}
.footer-col a{
  display:block; font-size:15px; margin-bottom:14px; color:#F3FBF5; opacity:0.85;
  transition:opacity .2s ease;
}
.footer-col a:hover{opacity:1;}
.footer-col a:focus-visible,
.footer-email:focus-visible{outline:2px solid #F3FBF5; outline-offset:3px;}


/* =========================================================
   PAGE-SPECIFIC: HOME (index.html)
   ========================================================= */

/* HERO */
.hero{
  padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 56px);
  align-items:center;
}
.hero-image{
  width: clamp(180px, 26vw, 300px);
  height: clamp(180px, 26vw, 300px);
  aspect-ratio: 1 / 1;
  background: var(--placeholder);
  border-radius: 50%;
  overflow: hidden;
}
.hero-image img{width:100%; height:100%; object-fit:cover; display:block;}
h1.hero-title{
   font-family:'Instrument Serif', serif; font-weight:600; font-style:italic;
  font-size:clamp(38px, 4.6vw, 54px);
  line-height:1.1; margin:0 0 22px; color:var(--ink);
}
.hero p.lede{
  font-size:19px; line-height:1.65; color:var(--text-muted); max-width:38ch; margin:0;
}
.pronunciation{
  font-family:'Instrument Serif', serif; font-style:italic; color:var(--ink-soft);
  font-size:16px; margin:0 0 18px;
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; text-align:center;}
  .hero-copy{display:flex; flex-direction:column; align-items:center;}
  .hero-image{margin:0 auto;}
  .hero p.lede{margin:0 auto;}
}

/* MARQUEE - signature element */
.marquee-band{
  background:var(--ink);
  overflow:hidden;
  padding:22px 0;
  margin:0 0 clamp(32px, 5vw, 48px);
}
.marquee-track{
  display:flex; width:max-content;
  animation: scroll-left 30s linear infinite;
}
@keyframes scroll-left{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.marquee-track span{
  font-family:'Instrument Serif', serif; font-weight:500;
  font-size:26px; letter-spacing:0.06em; color:#F3FBF5;
  padding:0 34px; white-space:nowrap;
  display:flex; align-items:center; gap:34px;
  text-transform:uppercase;
}
.marquee-track span::after{
  content:'✿'; color:var(--flower); font-size:20px;
}
@media (max-width:600px){
  .marquee-track span{font-size:19px; padding:0 20px; gap:20px;}
  .footer-top{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .footer-cols{
    justify-content:center;
  }
  .footer-col{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
}

/* SECTION HEADERS (home page section intros) */
.section-head{
  text-align:center;
  margin-bottom:36px;
}
.section-head h2{
  font-family:'Instrument Serif', serif; font-weight:600; font-size:clamp(30px,4vw,42px);
  margin:0; color:var(--ink);
}
.section-head p{
  color:var(--text-muted); font-size:16px; max-width:60ch; margin:16px auto 0; line-height:1.6;
}

/* SKILLS — horizontal row, most relevant first (left to right) */
.skills{
  padding:32px 0 64px;
}
.skills-row{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap: clamp(32px, 6vw, 64px);
  margin-top:48px;
}
.skill-col{
  max-width:240px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.skill-col .skill-index{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--ink); color:#F3FBF5;
  display:flex; align-items:center; justify-content:center;
  font-family:'Instrument Serif', serif; font-weight:600; font-size:16px;
  margin-bottom:16px;
}
.skill-col h3{
  font-family:'Poppins', sans-serif; font-weight:700; font-size:19px; color:var(--ink); margin:0 0 8px;
}
.skill-col p{margin:0; font-size:15px; color:var(--text-muted); line-height:1.5;}

@media (max-width:600px){
  .skills-row{gap:40px;}
}

/* PROJECTS */
.projects{
  padding:0 0 32px;
}
/* Category accordion */
.category-list{display:flex; flex-direction:column; gap:20px;}
.category{
  background:var(--card-bg); border-radius:var(--radius); overflow:hidden;
}
.category-toggle{
  width:100%; display:flex; align-items:center; gap:16px;
  background:none; border:none; cursor:pointer; text-align:left;
  padding: clamp(18px, 3vw, 24px) clamp(20px, 4vw, 28px);
  font-family:'Poppins', sans-serif;
}
.category-toggle:focus-visible{outline:2px solid var(--btn); outline-offset:-2px;}
.category-title{
  font-weight:700; font-size:19px; color:var(--ink); flex:1;
  transition:color .2s ease;
}
.category-toggle:hover .category-title{color:var(--btn-hover);}
.category-count{
  font-size:13px; font-weight:600; color:var(--btn-hover);
  background:rgba(79,161,121,0.15); padding:4px 12px; border-radius:100px;
  flex:0 0 auto;
}
.category-icon{
  flex:0 0 auto; width:12px; height:12px; margin-top:-3px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg);
  transition:transform .3s ease, margin .3s ease;
}
.category-toggle[aria-expanded="true"] .category-icon{
  transform:rotate(-135deg); margin-top:3px;
}

/* Smooth expand/collapse without measuring pixel heights in JS */
.category-panel{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .35s ease;
}
.category-panel.collapsed{grid-template-rows:0fr;}
.category-panel-inner{overflow:hidden; min-height:0;}
.category-panel-inner .project-grid{
  padding:0 clamp(20px, 4vw, 28px) clamp(20px, 4vw, 28px);
}
.category-empty{
  color:var(--text-muted); font-size:15px; margin:0;
  padding:0 clamp(20px, 4vw, 28px) clamp(20px, 4vw, 28px);
}

/* Project grid — auto-fit handles column count; capped track width keeps
   cards a consistent size instead of stretching when a category has
   only 1–2 projects. justify-content centers the row when it doesn't
   fill the full width. */
.project-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
  gap: clamp(20px, 3vw, 32px);
  justify-content:center;
}
.project-card{
  background:var(--card-bg-deep); 
  border-radius:var(--radius);
  padding: clamp(16px, 3vw, 20px);
  text-align:center;
  box-shadow:0 20px 40px rgba(31,93,66,0.08);

  display:flex;
  flex-direction:column;
  align-items:center;

  height:100%;
  transition:transform .3s ease, box-shadow .3s ease;
}
.project-card:hover{transform:translateY(-6px); box-shadow:0 24px 50px rgba(31,93,66,0.14);}
.project-thumb{
  width:100%; aspect-ratio:4/2.9; background:var(--placeholder);
  border-radius:12px; overflow:hidden; margin-bottom: clamp(18px, 3vw, 26px);
}
.project-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.project-card h3{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:23px;
  margin:0 0 8px;
  color:var(--ink);

  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.project-card .tag{
  font-size:15px; color:var(--text-muted); margin:0 0 20px;
}
.project-btn{
  font-family:'Poppins', sans-serif; font-weight:600; font-size:15px;
  background:var(--btn); color:#fff; padding:12px 26px; border-radius:10px;
  display:inline-block; transition:background .2s ease, transform .2s ease;
}
.project-btn:hover{background:var(--btn-hover); transform:translateY(-1px);}
.project-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

/* EXPERIENCE — vertical timeline, most recent at top */
.experience{
padding:32px 0 64px;
}
.experience .section-head p{max-width:70ch;}
.exp-timeline{
  list-style:none; margin: 48px auto 0; padding:0;
  max-width:640px; text-align:left; position:relative;
}
.exp-timeline::before{
  content:''; position:absolute; left:23px; top:8px; bottom:8px; width:2px;
  background:rgba(31,93,66,0.15);
}
.exp-item{
  display:flex; gap: clamp(16px, 3vw, 24px); align-items:flex-start;
  position:relative; padding-bottom: clamp(24px, 4vw, 40px);
}
.exp-item:last-child{padding-bottom:0;}
.exp-index{
  flex:0 0 auto; width:48px; height:48px;
  border-radius:50%;
  background:var(--ink); color:#F3FBF5;
  display:flex; align-items:center; justify-content:center;
  font-family:'Instrument Serif', serif; font-weight:600; font-size:16px;
  position:relative; z-index:1;
}
.exp-content{
  background:var(--card-bg); border-radius:16px;
  padding:18px 22px; flex:1;
}
.exp-content h4{
  font-family:'Poppins', sans-serif; font-weight:700; font-size:19px; color:var(--ink); margin:0 0 6px;
}
.exp-content p{margin:2px 0; color:var(--text-muted); font-size:15px;}
.exp-content ul{margin:10px 0 0; padding-left:18px; color:var(--text-muted); font-size:14.5px; line-height:1.6;}
.exp-content ul li{margin-bottom:6px;}
.exp-content ul ul{margin-top:6px;}

@media (max-width:480px){
  .exp-timeline::before{left:19px;}
  .exp-index{width:40px; height:40px; font-size:14px;}
}


/* =========================================================
   PAGE-SPECIFIC: ANTARCTICA CASE STUDY (antarctica.html)
   ========================================================= */

/* Shared by every case-study page (via body.case-study) so index.html's
   .wrap padding is untouched — gives long-form case studies more
   breathing room from the browser edge on larger screens. */

body.page-antarctica{
  --bg:#F3F7F8;              /* icy white background */
  --header-bg:#E5EEF2;       /* soft glacier blue */
  --card-bg:#E6F1F4;         /* frosted card */
  --card-bg-deep:#D3E5EB;    /* deeper ice blue */
  --placeholder:#c9d9de00;     

  --ink:#204A5A;             /* deep polar ocean */
  --ink-soft:#3D7182;        /* muted glacier blue */

  --text-dark:#26343A;       /* charcoal ice */
  --text-muted:#45545a;      /* cool gray */

  --btn:#4F8FA3;             /* arctic blue button */
  --btn-hover:#376D7E;

  --flower:#E8AFA0;          /* warm sunset accent */
}
.case-study .wrap{
max-width:1200px;
padding:0 clamp(24px, 4vw, 64px);
}

/* CASE HERO */
.case-hero{padding: clamp(48px, 8vw, 72px) 0 clamp(32px, 5vw, 48px);}
.back-link{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--ink-soft); margin-bottom:28px;
}
.back-link:hover{color:var(--ink);}
.back-link:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
h1.case-title{
  font-family:'Instrument Serif', serif;font-weight:600;font-style:italic;color:var(--ink);
  font-size:clamp(36px,5.2vw,60px);margin:0 0 36px;line-height:1.08;text-align:center;

}
.hero-cover {
  width: 80%;
  margin: 0 auto;
}

.hero-cover img {
  width: 100%;
  display: block;
}
.meta-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap: clamp(16px, 3vw, 24px);
  background:var(--card-bg); border-radius:var(--radius);
  padding: clamp(22px, 4vw, 32px) clamp(24px, 4vw, 36px); margin-bottom:36px;
}
.meta-item h4{
  font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted);
  font-weight:600; margin:0 0 8px;
}
.meta-item p{margin:0; font-weight:600; color:var(--ink); font-size:16px;}
.case-intro{
font-size:19px;
line-height:1.65;
color:var(--text-muted);
max-width:90ch;
margin:0 0 48px;
}
.hero-cover{border-radius:var(--radius); overflow:hidden; background:var(--placeholder); margin-bottom:8px;}

@media (max-width:760px){
  .meta-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .meta-grid{grid-template-columns:1fr;}
}

/* STAGE LABEL */
.stage-label{
  display:inline-block; font-family:'Poppins',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:0.12em; text-transform:uppercase; color:#fff; background:var(--ink);
  padding:10px 22px; border-radius:100px; margin:0 0 8px;
}

/* SECTIONS */
section.stage{padding: clamp(40px, 7vw, 64px) 0;}
.section-block{margin-bottom: clamp(36px, 6vw, 56px);}
.section-block:last-child{margin-bottom:0;}
.section-block h3{
  font-family:'Instrument Serif', serif; font-weight:600; font-size:clamp(24px,3vw,32px);
  color:var(--ink); margin:0 0 18px;
}
.section-block p{
font-size:16px;
line-height:1.7;
color:var(--text-muted);
max-width:1100px;
margin:0 0 16px;
}
.section-block ul{margin:0 0 16px; padding-left:22px; color:var(--text-muted); font-size:16px; line-height:1.7; max-width:1100px;}
.section-block ul li{margin-bottom:8px;}
.section-block strong{color:var(--text-dark);}
.divider{height:1px; background:rgba(31,93,66,0.12); margin: clamp(40px, 8vw, 64px) 0;}

.figure{margin: clamp(20px, 4vw, 28px) 0; overflow:hidden;}
.figure img{border-radius:0; background:var(--placeholder);}
.figure figcaption{
  text-align:center; font-size:16px; color:var(--text-muted); margin-top:12px; font-weight:700;
}

/* Standalone figures (a .figure that is a direct child of .section-block —
   e.g. Information Architecture, User Flows, Testing insight images, Design
   decision images) get a comfortable width cap instead of spanning the full
   content column. Figures inside .gallery-2/.gallery-3 sit one level deeper
   in the markup, so this rule doesn't affect them — one reusable rule
   instead of unique styles per section. */
.section-block > .figure{
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
.gallery-3 .figure{
max-width:500px;
margin-left:auto;
margin-right:auto;
}
.section-block > .figure img{
width:100%;
height:auto;
object-fit:contain;
}
@media (max-width:900px){
  .section-block > .figure{max-width:92%;}
}
@media (max-width:768px){
  .section-block > .figure{max-width:70%;}
  .section-block > .figure img{object-fit:contain;}
}

.gallery-2{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 3vw, 24px);
}
.gallery-3{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 3vw, 24px);
}
.gallery-2 figure, .gallery-3 figure{margin:0;}

/* Modifier for galleries that should never exceed 3 columns regardless of
   viewport width (Initial Sketches, Expanding Design Exploration), rather
   than auto-fit's variable count. Still collapses to 2, then 1, on
   smaller screens with the same spacing as every other gallery. */
.gallery-3.gallery-max3{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:900px){
  .gallery-3.gallery-max3{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:560px){
  .gallery-3.gallery-max3{grid-template-columns:1fr;}
}

/* Gallery images have very different native dimensions (landscape sketches,
   portrait UI screens, square concept art). A fixed-ratio frame with
   object-fit:contain gives every tile in a gallery the same visual
   footprint without stretching or cropping any image. The ratio is read
   from a --gallery-ratio custom property set inline on each gallery
   container (sized to that gallery's own largest/dominant image), falling
   back to a sensible default when no override is set — so one shared rule
   works for every gallery on every case-study page. */
.gallery-2 .figure img{
  width:100%;
  aspect-ratio: var(--gallery-ratio, 3 / 3.2);
  object-fit:contain;
  background:var(--placeholder);
}
.gallery-3 .figure img{
  width:100%;
  aspect-ratio: var(--gallery-ratio, 4 / 3.4);
  object-fit:contain;
  background:var(--placeholder);
}

/* Problem / Opportunity — two columns on larger screens so the pairing
   reads side by side instead of stacking into a long scroll. */
.problem-opportunity{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
.problem-opportunity .section-block{margin-bottom:0;}
@media (min-width:900px){
  .problem-opportunity{grid-template-columns:repeat(2, 1fr);}
}

/* PERSONA CARDS */
.persona-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 28px);
}
.persona-card{
  background:var(--card-bg); border-radius:var(--radius); padding: clamp(20px, 3vw, 28px); text-align:left;
}
.persona-photo{
  width:100%; aspect-ratio:4/3.4; border-radius:12px; overflow:hidden; background:var(--placeholder); margin-bottom:20px;
}
.persona-photo img{width:100%; height:100%; object-fit:cover;}
.persona-card h4{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:19px; color:var(--ink); margin:0 0 2px;
}
.persona-card .role{font-size:14px; color:var(--btn-hover); font-weight:600; margin:0 0 14px;}
.persona-card p{font-size:14px; color:var(--text-muted); line-height:1.6; margin:0 0 12px;}
.persona-card ul{font-size:13.5px; padding-left:18px; margin:0; color:var(--text-muted);}

/* QUOTES */
.quote-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 3vw, 20px);
}
.quote-card{
  background:var(--card-bg-deep); border-radius:16px; padding: clamp(20px, 3vw, 24px) clamp(22px, 4vw, 28px); position:relative;
}
.quote-card p{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:17px;
  color:var(--ink); margin:0; line-height:1.5;
}

/* STATS */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap: clamp(16px, 3vw, 24px);}
.stat-card{
  background:var(--ink); color:#F3FBF5; border-radius:16px; padding: clamp(24px, 4vw, 32px) 20px; text-align:center;
}
.stat-card .num{
  font-family:'Instrument Serif', serif; font-weight:600; font-size:42px; color:var(--flower); display:block; margin-bottom:8px;
}
.stat-card .label{font-size:13.5px; opacity:0.9; line-height:1.4;}
@media (max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.stat-grid{grid-template-columns:1fr;}}

/* Modifier for case studies with fewer than 4 stats — caps card width and
   centers the row instead of stretching cards across 4 fixed columns. */
.stat-grid.stat-grid--compact{
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  justify-content:center;
}

/* ---------------------------------------------------------
   SPLIT BLOCK — text alongside a supporting image/figure/gallery,
   instead of stacking every section full-width. Reusable across
   any case study.
   --------------------------------------------------------- */
.split-block{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items:center;
}
.split-block .figure,
.split-block .gallery-2,
.split-block .gallery-3{margin:0;}
.split-block--reverse .split-text{order:2;}
.split-block--reverse .split-media{order:1;}
@media (max-width:900px){
  .split-block{grid-template-columns:1fr;}
  .split-block--reverse .split-text,
  .split-block--reverse .split-media{order:initial;}
}

/* ---------------------------------------------------------
   INSIGHT CARDS — compact 3-up (or 2-up) card grid for findings,
   decisions, and takeaways, so related points sit side by side
   instead of stacking as long paragraphs.
   --------------------------------------------------------- */
.insight-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap: clamp(16px, 3vw, 20px);
}
.insight-grid.insight-grid--2{grid-template-columns:repeat(2, 1fr);}
.insight-card{
  background:var(--card-bg); border-radius:16px;
  padding: clamp(16px, 3vw, 20px) clamp(18px, 3vw, 22px);
}
.insight-card h4{
  font-family:'Poppins', sans-serif; font-weight:700; font-size:15.5px;
  color:var(--ink); margin:0 0 8px;
}
.insight-card p{
  margin:0; font-size:14px; line-height:1.6; color:var(--text-muted);
}
@media (max-width:900px){
  .insight-grid, .insight-grid.insight-grid--2{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:560px){
  .insight-grid, .insight-grid.insight-grid--2{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------
   TAG LIST — compact chip list for short items (focus areas, key
   themes) instead of a full bulleted paragraph block.
   --------------------------------------------------------- */
.tag-list{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 16px; padding:0; list-style:none;
}
.tag-list li{
  background:var(--card-bg); color:var(--ink);
  font-size:13.5px; font-weight:600;
  padding:6px 14px; border-radius:100px;
}

/* ---------------------------------------------------------
   IMAGE LIGHTBOX — click any case-study image to view it full size
   Markup for .lightbox-overlay/.lightbox-content/.lightbox-image/
   .lightbox-close is generated by initImageLightbox() in script.js;
   .lightbox-trigger is added by that same function to every image
   it wires up.
   --------------------------------------------------------- */
.lightbox-trigger{
  cursor:zoom-in;
  transition:transform .25s ease, opacity .2s ease, box-shadow .25s ease;
}
.lightbox-trigger:hover,
.lightbox-trigger:focus-visible{
  transform:scale(1.03);
  opacity:0.96;
  box-shadow:0 14px 32px rgba(0,0,0,0.2);
}
.lightbox-trigger:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  .lightbox-trigger{transition:none;}
  .lightbox-trigger:hover,
  .lightbox-trigger:focus-visible{transform:none;}
}

body.lightbox-active{overflow:hidden;}

.lightbox-overlay{
  position:fixed; inset:0;
  background:rgba(31,93,66,0.9);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(20px, 5vw, 64px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:1000;
}
.lightbox-overlay.open{
  opacity:1;
  visibility:visible;
}
.lightbox-content{
  position:relative;
  max-width:92vw;
  max-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:scale(0.94);
  transition:transform .3s ease;
}
.lightbox-overlay.open .lightbox-content{
  transform:scale(1);
}
.lightbox-image{
  display:block;
  max-width:92vw;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:0;
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
}
.lightbox-close{
  position:fixed;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  width:44px; height:44px;
  border-radius:50%;
  background:var(--ink);
  color:#F3FBF5;
  border:none;
  cursor:pointer;
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover{background:var(--btn-hover); transform:scale(1.06);}
.lightbox-close:focus-visible{
  outline:2px solid #F3FBF5;
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  .lightbox-overlay, .lightbox-content{transition:none;}
}

/* ---------------------------------------------------------
   BACK TO TOP — floating button, generated by initBackToTop()
   in script.js. Appears after scrolling past a threshold.
   --------------------------------------------------------- */
.back-to-top{
  position:fixed;
  bottom: clamp(20px, 4vw, 32px);
  right: clamp(20px, 4vw, 32px);
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--ink);
  color:#F3FBF5;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  box-shadow:0 12px 28px rgba(0,0,0,0.18);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
  z-index:900;
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{background:var(--btn-hover);}
.back-to-top:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  .back-to-top{transition:none;}
}

/* ---------------------------------------------------------
   BACK TO HOME — button at the end of a case study, before
   the footer. Reuses the same pill-button language as
   .project-btn elsewhere in the portfolio.
   --------------------------------------------------------- */
.back-home-wrap{
  padding: clamp(24px, 5vw, 48px) 0 clamp(48px, 8vw, 80px);
  display:flex;
  justify-content:center;
}
.btn-back-home{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:15px;
  background:var(--btn);
  color:#fff;
  padding:14px 28px;
  border-radius:10px;
  transition:background .2s ease, transform .2s ease;
  margin-top: 16px;
}
.btn-back-home:hover{background:var(--btn-hover); transform:translateY(-1px);}
.btn-back-home:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}


/* =========================================================
   PAGE-SPECIFIC: SPOTTOGETHER CASE STUDY (spottogether.html)
   ========================================================= */

/* SpotTogether keeps its own earthy-green + warm-yellow identity instead
   of Antarctica's forest green. Every shared component (header, footer,
   cards, stage labels, buttons, dividers, stat cards, personas, the
   lightbox, back-to-top, etc.) is reused as-is — only the custom-property
   values change, scoped to this page via body.page-spottogether, so
   nothing needs to be rebuilt or duplicated. */
body.page-spottogether{
  --bg:#f5f5f5;
  --header-bg:#E2E2E2;
  --card-bg:#F1F1F1;
  --card-bg-deep:#E4E4E4;
  --placeholder:#E4E4E4;
  --ink:#3C6E47;
  --ink-soft:#4F8058;
  --text-dark:#2B2B2B;
  --text-muted:#4d4d4d;
  --btn:#4C8B62;
  --btn-hover:#3D7350;
  --flower:#f3eec0;
}

/* --- Image fixes, scoped to this page only --- */
/* Every shared image container elsewhere in the site (Antarctica, Tutorify)
   intentionally uses a fixed-ratio box so mixed-size gallery images share a
   uniform tile. On SpotTogether that box was clipping content, so here we
   drop the forced box entirely: images render at their own natural aspect
   ratio (height:auto) and are never cropped or stretched. Scoped to
   body.page-spottogether so the other case studies are unaffected. */
body.page-spottogether .figure{overflow:visible;}
body.page-spottogether .gallery-2 .figure img,
body.page-spottogether .gallery-3 .figure img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height: clamp(240px, 40vh, 420px);
  aspect-ratio:auto;
  object-fit:contain;
  background:none;
  margin:0 auto;
}
body.page-spottogether .persona-photo{
  aspect-ratio:auto;
  height:auto;
  overflow:visible;
  background:none;
}
body.page-spottogether .persona-photo img{
  height:auto;
  object-fit:contain;
}

/* Balanced column counts so a gallery never leaves an awkward orphan row
   (e.g. 3 images sitting alone under a wider desktop layout). */
body.page-spottogether .gallery-cols-2{
  grid-template-columns:repeat(2, 1fr);
}
@media (max-width:560px){
  body.page-spottogether .gallery-cols-2{grid-template-columns:1fr;}
}

/* Compact size cap for wireframe/screen galleries — keeps balanced
   columns but caps the grid's own width so tiles read as thumbnails
   instead of oversized full-width screens. */
body.page-spottogether .gallery-compact{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}


/* =========================================================
   PAGE-SPECIFIC: TUTORIFY CASE STUDY (tutorify.html)
   ========================================================= */

/* Tutorify uses a "trust blue" identity — fitting, since the case study
   itself is about building trust and credibility. Every shared component
   (header, footer, cards, stage labels, buttons, dividers, stat cards,
   quotes, the lightbox, back-to-top, etc.) is reused as-is — only the
   custom-property values change, scoped to this page via
   body.page-tutorify. */
body.page-tutorify{
  --bg:#EFF4FA;
  --header-bg:#DCE7F5;
  --card-bg:#E6EFFA;
  --card-bg-deep:#D6E4F5;
  --placeholder:#d6dee800;
  --ink:#1F4E79;
  --ink-soft:#2E6DA4;
  --text-dark:#1E2A38;
  --text-muted:#5B6B7A;
  --btn:#2E6DA4;
  --btn-hover:#1F567F;
  --flower:#fdff94;
}

/* --- Image fixes, scoped to this page only (same pattern as SpotTogether) --- */
body.page-tutorify .figure{overflow:visible;}
body.page-tutorify .gallery-2 .figure img,
body.page-tutorify .gallery-3 .figure img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height: clamp(240px, 40vh, 420px);
  aspect-ratio:auto;
  object-fit:contain;
  background:none;
  margin:0 auto;
}

/* =========================================================
   PAGE-SPECIFIC: ABOUT PAGE (about.html)
   ========================================================= */
.hero.wrap.about {
  padding-top: 100px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(50px, 7vw, 90px);
  align-items: center;
}
/* Balanced column counts so a gallery never leaves an awkward orphan row. */
body.page-tutorify .gallery-cols-2{
  grid-template-columns:repeat(2, 1fr);
}
@media (max-width:560px){
  body.page-tutorify .gallery-cols-2{grid-template-columns:1fr;}
}

/* Compact size cap for wireframe/screen galleries — keeps balanced
   columns but caps the grid's own width so tiles read as thumbnails
   instead of oversized full-width screens. */
body.page-tutorify .gallery-compact{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}