/* ===================================================================
   GLOBAL STYLING — shared across every page.
   Only design tokens, typography, base elements and shared chrome
   (nav / footer / buttons) live here. Page CONTENT is not styled here;
   each page owns its own sections and elements inline, so editing one
   page never affects another.
   =================================================================== */

/* ----- Display face: Panchang (variable, 200–800) ----- */
@font-face{
  font-family:'Panchang';
  src:url('assets/fonts/Panchang-Variable.woff2') format('woff2'),
      url('assets/fonts/Panchang-Variable.woff') format('woff');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#f6f5f2; --panel:#ece9e3; --panel-2:#e6e2db; --frame:#ece9e3;
  --ink:#1b1a18; --ink-2:#57544e; --ink-3:#6e6a63;
  --line:rgba(27,26,24,0.13); --line-2:rgba(27,26,24,0.09);
  --accent:#a4573a;
  --pad:clamp(20px,6vw,80px); --max:1280px;
  --font:'Montserrat',system-ui,sans-serif;
  --font-display:'Panchang','Montserrat',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ----- Type system: Panchang carries titles, Montserrat carries prose.
   Inline styles set family via the font shorthand, so the display-face
   promotion needs !important to win — this is the single point of
   control for the whole site's headline voice. ----- */
h1,h2,h3,
[data-i18n^="section."],
[data-i18n="about.tagline"],
.nav-brand{
  font-family:var(--font-display) !important;
}
[data-i18n="about.tagline"]{letter-spacing:0 !important;line-height:1.25 !important;font-weight:500 !important}
h1{letter-spacing:-0.01em !important;line-height:1.06 !important;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
h2{letter-spacing:-0.005em !important;line-height:1.12 !important;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
h3{letter-spacing:0 !important;line-height:1.16 !important;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
[data-i18n^="section."]{
  letter-spacing:0.01em !important;
  font-weight:500 !important;
  text-transform:lowercase;
}
.nav-brand{font-weight:600 !important;letter-spacing:0.01em !important}

/* Keyboard focus — visible everywhere, styled to the palette */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

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

/* ----- Nav: shared chrome + mobile hamburger ----- */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  margin-right:-8px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:inherit;
}
.nav-toggle span{
  display:block;width:20px;height:2px;background:currentColor;
  transition:transform .25s ease,opacity .2s ease;
}
.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)}
.nav-right{display:flex;gap:clamp(16px,2.4vw,32px);align-items:center}
.nav-links{display:flex;gap:clamp(16px,2.4vw,32px);align-items:center}
@media (max-width:768px){
  .nav-toggle{display:flex}
  .nav-right{gap:14px}
  .nav-links{
    position:fixed;top:60px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:4px;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:12px var(--pad) 20px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .nav-links a{
    width:100%;padding:13px 0;
    font-size:15px !important;
    color:var(--ink) !important;
    border-bottom:1px solid var(--line-2);
  }
  .nav-links a:last-child{border-bottom:0}
  /* the language switch rides inside the dropdown on phones */
  .nav-links #langToggle{
    margin-top:14px;
    padding:15px 22px;
    font-size:13px !important;
    border-radius:999px;
    color:var(--ink) !important;
    border-color:var(--line) !important;
  }
}

/* Overlay nav for project heroes: transparent over the image,
   solid paper once scrolled past (`.is-solid` toggled by i18n.js). */
.nav-overlay{
  background:transparent !important;border-bottom-color:transparent !important;
  transition:background .25s ease,border-color .25s ease;
}
.nav-overlay.is-solid{background:var(--paper) !important;border-bottom-color:var(--line) !important}
/* dark-tone heroes get white nav text until solid */
.nav-overlay--dark:not(.is-solid){color:#fff}
.nav-overlay--dark:not(.is-solid) a{color:#fff !important}
.nav-overlay--dark:not(.is-solid) #langToggle{color:#fff !important;border-color:rgba(255,255,255,0.5) !important}
@media (max-width:768px){
  /* the dropdown panel is always paper — reset link colors inside it */
  .nav-overlay--dark:not(.is-solid) .nav-links a{color:var(--ink) !important}
  .nav-overlay--dark:not(.is-solid) .nav-links #langToggle{color:var(--ink) !important;border-color:var(--line) !important}
}

/* ----- Project hero: full-bleed header image behind nav, title and
   story cards, fading into the paper background before the process
   section (same treatment as the Dance of Sound page). ----- */
.p-hero{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column}
.p-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.p-hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:190px;
  background:linear-gradient(to bottom,rgba(246,245,242,0),var(--paper));
  z-index:1;pointer-events:none;
}
.p-hero > section{position:relative;z-index:2}
/* dark-tone hero: scrim keeps white text ≥4.5:1 on any image */
.p-hero--dark .p-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,19,18,0.55),rgba(20,19,18,0.28) 45%,rgba(20,19,18,0.4));
}
/* light-tone hero: soft paper wash on the left text column so ink
   text stays legible even where the photo runs mid-grey */
.p-hero:not(.p-hero--dark) .p-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(246,245,242,0.85),rgba(246,245,242,0.35) 52%,rgba(246,245,242,0) 78%);
}
@media (max-width:640px){
  .p-hero:not(.p-hero--dark) .p-hero-bg::after{
    background:linear-gradient(to bottom,rgba(246,245,242,0.9),rgba(246,245,242,0.45) 60%,rgba(246,245,242,0.1));
  }
}
@media (max-width:640px){
  .p-hero{min-height:94svh}
}

/* ----- Story-row arrows: injected by i18n.js on every story-row,
   click steps one card; shown for mouse/trackpad users only ----- */
.story-nav-wrap{position:relative}
.story-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);
  color:var(--ink);cursor:pointer;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -12px rgba(27,26,24,0.4);
  transition:opacity .2s ease,transform .2s ease;
  z-index:3;
}
.story-arrow svg{width:18px;height:18px}
.story-arrow--prev{left:-12px}
.story-arrow--prev svg{transform:scaleX(-1)}
.story-arrow--next{right:-12px}
.story-arrow.is-disabled{opacity:0;pointer-events:none}
.story-arrow:hover{transform:translateY(-50%) scale(1.08)}
@media (hover:hover) and (pointer:fine){
  .story-arrow{display:flex}
}

/* ----- Work filter bar (homepage) ----- */
.filter-bar{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:0 auto clamp(32px,4vw,52px);max-width:var(--max);
}
.filter-pill{
  font:500 12px/1 var(--font);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-2);background:var(--paper);
  border:1px solid var(--line);border-radius:999px;
  padding:11px 18px;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.filter-pill:hover{border-color:var(--ink-3)}
.filter-pill[aria-pressed="true"]{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}
.work-card-sticky.is-filtered{display:none}

/* Hero portrait: full width + centred once the header row wraps
   to a single column on mobile. */
@media (max-width:640px){
  .hero-portrait-wrap{width:100%;display:flex;justify-content:center;}
}

/* ----- Rotating role words (homepage hero) ----- */
.role-rotator{
  margin:26px 0 0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(19px,2.2vw,30px);
  line-height:1.25;
  letter-spacing:0.005em;
  color:var(--ink-2);
  display:flex;align-items:baseline;gap:12px;
  min-height:1.4em;
}
.role-rotator .role-word{
  display:inline-block;
  animation:roleIn .45s cubic-bezier(.2,.7,.3,1);
}
.role-rotator .role-dash{color:var(--accent);font-weight:600}
@keyframes roleIn{
  from{opacity:0;transform:translateY(0.35em)}
  to{opacity:1;transform:none}
}

/* Story row — horizontal problem/approach/main-idea cards used on
   project pages. Plain native horizontal scroll (real scrollbar, touch
   swipe, trackpad/shift+wheel) with scroll-snap; vertical scroll never
   touches it, no custom JS involved. */
.story-row{
  display:flex;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:20px;
}
.story-card{
  flex:0 0 92%;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  gap:clamp(24px,3vw,48px);
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:clamp(24px,3vw,40px);
  box-shadow:0 24px 60px -34px rgba(27,26,24,0.28);
}
.story-card-media{
  flex:2 1 0;
  min-width:220px;
  aspect-ratio:4/3;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:var(--frame);
  background-size:cover;
  background-position:center;
}
.story-card-text{flex:1 1 0;min-width:200px}
.story-card-text h2{margin:0;font:600 clamp(21px,2.2vw,28px)/1.14 var(--font-display);letter-spacing:0;color:var(--ink)}
.story-card-text p{margin:14px 0 0;font:400 clamp(14px,1.15vw,16px)/1.62 var(--font);color:var(--ink-2)}
@media (max-width:640px){
  .story-card{flex:0 0 88%;flex-direction:column;align-items:stretch;text-align:left}
  .story-card-media{flex:0 0 auto;width:100%}
  .story-card-text{flex:0 0 auto}
  .process-media{order:0}
  .process-text{order:1}
  .gallery-ratio-item{flex:0 0 100% !important}
}

/* Compact story cards used inside project heroes — declared after
   .story-card so it wins the cascade at equal specificity. Slightly
   wider than the Dance of Sound cards (52%). */
.story-card.story-card--compact{flex:0 0 56%}
@media (max-width:900px){
  .story-card.story-card--compact{flex:0 0 80%}
}
@media (max-width:640px){
  .story-card.story-card--compact{flex:0 0 88%}
}

/* ----- About reveal cards (homepage): icon + title front, full
   content revealed on hover / focus / tap within a fixed footprint,
   so the page never shifts. On small screens the same cards become
   a tap-to-expand accordion. ----- */
.about-grid{
  max-width:var(--max);
  margin:clamp(44px,6vw,72px) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,22px);
}
.ab-card{
  position:relative;
  background:#fdfcf9;
  border:1px solid var(--line-2);
  border-radius:16px;
  min-height:clamp(430px,54vh,500px);
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 24px 55px -40px rgba(27,26,24,0.45);
  transition:transform .3s ease,box-shadow .3s ease;
  scroll-margin-top:90px;
}
.ab-front{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:26px;text-align:center;
  transition:opacity .25s ease,transform .25s ease;
}
.ab-front svg{width:38px;height:38px;color:var(--ink-2)}
.ab-front-text{display:flex;flex-direction:column;align-items:center;gap:10px}
.ab-front h3{margin:0;font:600 clamp(20px,1.8vw,25px)/1.15 var(--font)}
.ab-teaser{margin:0;font:500 13px/1.5 var(--font);letter-spacing:0.04em;color:var(--ink-3)}
.ab-plus{
  position:absolute;top:14px;right:14px;
  width:28px;height:28px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);z-index:2;
  transition:transform .25s ease,border-color .25s ease;
}
.ab-plus svg{width:13px;height:13px}
.ab-full{
  position:absolute;inset:0;
  padding:24px 22px;
  opacity:0;transform:translateY(10px);pointer-events:none;
  overflow-y:auto;
  transition:opacity .28s ease,transform .28s ease;
}
.ab-label{
  font:600 12px/1 var(--font);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:12px;border-bottom:1px solid var(--line);
  margin-bottom:14px;
}
.cv-btn{
  display:inline-flex;align-items:center;gap:10px;
  font:600 12px/1 var(--font);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink);background:transparent;
  border:1px solid var(--ink);border-radius:999px;
  padding:15px 28px;
  transition:background .2s ease,color .2s ease;
}
.cv-btn:hover{background:var(--ink);color:var(--paper)}
.ab-card.is-open .ab-front{opacity:0;transform:translateY(-8px);pointer-events:none}
.ab-card.is-open .ab-full{opacity:1;transform:none;pointer-events:auto}
.ab-card.is-open .ab-plus{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){
  .ab-card:hover,.ab-card:focus-visible{transform:translateY(-4px);box-shadow:0 32px 64px -38px rgba(27,26,24,0.55)}
  .ab-card:hover .ab-front,.ab-card:focus-visible .ab-front{opacity:0;transform:translateY(-8px);pointer-events:none}
  .ab-card:hover .ab-full,.ab-card:focus-visible .ab-full{opacity:1;transform:none;pointer-events:auto}
  .ab-card:hover .ab-plus,.ab-card:focus-visible .ab-plus{transform:rotate(45deg)}
}
@media (max-width:980px){
  .about-grid{grid-template-columns:repeat(2,1fr)}
  .ab-card{min-height:420px}
}
@media (max-width:620px){
  .about-grid{grid-template-columns:1fr;gap:12px}
  .ab-card{min-height:0}
  .ab-front{
    position:static;flex-direction:row;justify-content:flex-start;
    text-align:left;gap:14px;padding:18px 56px 18px 18px;
    opacity:1 !important;transform:none !important;pointer-events:auto !important;
  }
  .ab-front svg{width:24px;height:24px;flex:0 0 auto}
  .ab-front-text{align-items:flex-start;gap:5px}
  .ab-front h3{font-size:16px !important}
  .ab-plus{top:50%;transform:translateY(-50%)}
  .ab-card.is-open .ab-plus{transform:translateY(-50%) rotate(45deg)}
  .ab-full{
    position:static;opacity:1;transform:none;pointer-events:auto;
    max-height:0;padding:0 18px;overflow:hidden;
    transition:max-height .35s ease,padding .3s ease;
  }
  .ab-card.is-open .ab-full{max-height:1400px;padding:0 18px 20px}
}