/* ============================================================
   Flight & Form v5 — design system modeled on MONOLOG's tokens
   Palette, fluid type and spacing lifted from their variable set

   Fonts: 'default font'  = Geist (assets/fonts), -5% tracking
          'bold font'     = Dirtyline (assets/fonts), display headings only
          'cursive font'  = Instrument Serif (assets/fonts), italic/script accents
   ============================================================ */
@font-face{
  font-family:'Dirtyline';
  src:url('../assets/fonts/Dirtyline 36daysoftype 2022.woff2') format('woff2'),
      url('../assets/fonts/Dirtyline 36daysoftype 2022.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Projekt Blackbird';
  src:url('../assets/fonts/projekt-blackbird-v2.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/* Inter — primary UI/body typeface (variable TTF) */
@font-face{
  font-family:'Inter';
  src:url('../assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../assets/fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}

/* Geist — static weights only (most compatible across browsers/environments).
   The site uses 400/500/600/700, plus the occasional italic. */
@font-face{
  font-family:'Geist';
  src:url('../assets/fonts/Geist/static/Geist-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Geist';
  src:url('../assets/fonts/Geist/static/Geist-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Geist';
  src:url('../assets/fonts/Geist/static/Geist-SemiBold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Geist';
  src:url('../assets/fonts/Geist/static/Geist-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Geist';
  src:url('../assets/fonts/Geist/static/Geist-Italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('../assets/fonts/Instrument_Serif/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('../assets/fonts/Instrument_Serif/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}


:root{
  /* swatches — pushed toward black & white: lighter beige, darker grays, brighter olive */
  --beige-100:#fafaf7;
  --beige-200:#f6f6f1;
  --beige-300:#ffffff;   /* light theme background — pure white */
  --beige-400:#dedcd2;   /* light theme border */
  --olive:#e2e2ac;       /* accent (unchanged) */
  --black-400:#030303;   /* dark theme background / light theme text — near true black */
  --black-300:#333029;
  --black-200:#4a4640;
  --black-100:#6b645c;
  --black-50:#a3a09a;
  --charcoal:#0c0b0a;    /* card / alt dark background */

  /* fonts */
  --font-default:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Arial,sans-serif;
  --font-bold:'Dirtyline','Helvetica Neue',Arial,sans-serif;
  --font-bold-2:'Projekt Blackbird','Helvetica Neue',Arial,sans-serif;
  --font-cursive:'Instrument Serif','Times New Roman',serif;


  /* fluid type (20rem → 100rem viewport) */
  --text-display:clamp(3.5rem,2.0625rem + 7.1875vw,9.25rem);
  --text-title:clamp(3rem,1.9rem + 5.25vw,7.5rem);   /* big section title — display, dialed back a notch */
  --text-h2:clamp(3rem,2.5625rem + 2.1875vw,4.75rem);
  --text-h3:clamp(2rem,1.625rem + 1.875vw,3.5rem);
  --text-h4:clamp(1.5rem,1.125rem + 1.875vw,3rem);
  --text-h5:clamp(1.375rem,1.34375rem + .15625vw,1.5rem);
  --text-main:clamp(1rem,.96875rem + .125vw,1.125rem);
  --text-small:clamp(.875rem,.84375rem + .125vw,1rem);
  --text-xsmall:clamp(.65rem,.625rem + .125vw,.75rem);

  /* spacing */
  --space-section:clamp(4rem,3.25rem + 3.75vw,7rem);
  --space-section-lg:clamp(5.5rem,4.375rem + 5.625vw,10rem);
  --space-page-top:clamp(7rem,5.25rem + 8.75vw,14rem);
  --site-margin:clamp(1rem,.5rem + 2vw,2.75rem);
  --gutter:1rem;

  --radius-small:.15rem;
  --radius-medium:.35rem;

  /* theme (default dark) */
  --theme-bg:var(--black-400);
  --theme-text:var(--beige-100);
  --theme-muted:var(--black-50);
  --theme-border:var(--black-300);
}

*{margin:0;padding:0;box-sizing:border-box}
/* NOTE: no scroll-behavior:smooth here — it fights Lenis's per-frame writes
   and causes severe scroll lag. Anchor glides are handled by lenis.scrollTo. */
html.lenis{scroll-behavior:auto!important}
html.lenis,html.lenis body{height:auto}

body{
  background:var(--black-400);
  color:var(--beige-100);
  font-family:var(--font-default);
  font-weight:400;
  font-size:var(--text-main);
  line-height:1.5;
  letter-spacing:-.07em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--beige-300);color:var(--black-400)}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.u-label{
  font-family:var(--font-default);
  font-size:var(--text-small);
  text-transform:uppercase;
  font-weight:500;
}

/* ============ THEMES (per section) ============ */
.u-theme-dark{background:var(--black-400);color:var(--beige-100);
  --theme-bg:var(--black-400);--theme-text:var(--beige-100);
  --theme-muted:var(--black-50);--theme-border:var(--black-300)}
.u-theme-charcoal{background:var(--charcoal);color:var(--beige-100);
  --theme-bg:var(--charcoal);--theme-text:var(--beige-100);
  --theme-muted:var(--black-50);--theme-border:var(--black-300)}
.u-theme-light{background:var(--beige-300);color:var(--black-400);
  --theme-bg:var(--beige-300);--theme-text:var(--black-400);
  --theme-muted:var(--black-100);--theme-border:var(--beige-400)}
.u-theme-light ::selection{background:var(--black-400);color:var(--beige-300)}

/* ============ MOTION SETUP ============ */
/* initial hidden states apply only once JS confirms motion libs loaded */
.has-motion [data-animate]{opacity:0;transform:translateY(1.5rem)}
.has-motion [data-split]{visibility:hidden}
.has-motion [data-split].is-split{visibility:visible}
/* padding-bottom + equal negative margin: gives descenders (y, g, …) room
   inside the reveal mask without changing the line's layout spacing */
[data-split] .split-line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
[data-split] .split-line-inner{display:block;will-change:transform}

/* ============ GRAIN ============ */
.grain{
  position:fixed;inset:-20%;z-index:200;pointer-events:none;
  /* pre-rendered 160x160 noise tile (cheaper than live SVG turbulence, and keeps the
     DOM clean vs. an inline base64 data URI) */
  background-image:url("../assets/images/grain.png");
  opacity:.05;
  animation:grain .6s steps(5) infinite;
  will-change:transform;
  transform:translateZ(0);
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4%,-7%)}
  40%{transform:translate(3%,-9%)}
  60%{transform:translate(8%,6%)}
  80%{transform:translate(-6%,4%)}
}

/* ============ CLICK SPARK ============ */
.spark_canvas{
  position:fixed;inset:0;z-index:1200;   /* above the index drawer (400) so clicks spark there too */
  width:100%;height:100%;
  pointer-events:none;user-select:none;
  /* white sparks invert per-pixel, so they read on dark and beige alike */
  mix-blend-mode:difference;
}

/* ============ PRELOADER ============ */
.preloader{
  position:fixed;inset:0;z-index:300;
  background:var(--black-400);color:var(--beige-100);
  display:flex;align-items:flex-end;
}
.preloader.is-done{display:none}
.preloader_inner{
  width:100%;display:flex;justify-content:space-between;align-items:baseline;
  padding:var(--site-margin);
}

/* ============ NAVBAR ============ */
/* difference blending: everything in the nav is pure white and inverts
   per-pixel against whatever scrolls beneath it — the logo stays legible
   even while straddling a section boundary, with no theme swapping. */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:.5rem var(--site-margin);
  color:#fff;
  mix-blend-mode:difference;
}
.navbar_brand{display:block;transform:translateY(6px)}
.navbar_logo{height:50px;width:auto;display:block}
.navbar_links ul{display:flex;gap:clamp(1rem,.5rem + 2vw,2.25rem);transform:translateY(-4px)}
.navbar_links a{
  font-family:var(--font-default);font-size:var(--text-small);
  text-transform:none;font-weight:500;
  position:relative;padding:.25em 0;
  opacity:.65;transition:opacity .3s;
}
.navbar_links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right .35s cubic-bezier(.16,1,.3,1);
}
.navbar_links a:hover,.navbar_links a:focus-visible{opacity:1}
.navbar_links a:hover::after,.navbar_links a:focus-visible::after{right:0}
.navbar_links a:focus-visible{outline:1px solid currentColor;outline-offset:4px}
/* current project tab (works pages) stays lit with its underline drawn */
.navbar_links a[aria-current="page"]{opacity:1}
.navbar_links a[aria-current="page"]::after{right:0}

/* ============ MOBILE MENU (hamburger → option wheel) ============ */
body.menu-open{overflow:hidden}
.menu-btn{
  position:fixed;top:.9rem;right:var(--site-margin);z-index:1100;
  width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  mix-blend-mode:difference;-webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;appearance:none;touch-action:manipulation;
}
.menu-btn span{
  display:block;width:24px;height:2px;background:#fff;border-radius:2px;
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s ease;
}
.menu-btn.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn.is-open span:nth-child(2){opacity:0}
.menu-btn.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.menu-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(6,6,7,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
.menu-overlay.is-open{opacity:1;visibility:visible}
.menu-overlay__stage{
  width:100%;height:100%;transform:translateY(20px);opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
.menu-overlay.is-open .menu-overlay__stage{transform:none;opacity:1}
.menu-foot{
  position:absolute;left:0;right:0;bottom:calc(1.7rem + env(safe-area-inset-bottom));
  padding:0 var(--site-margin);font-family:var(--font-default);
}
.menu-foot .mail{font-size:var(--text-small);color:rgba(255,255,255,.55);transition:color .3s}
.menu-foot .mail:hover{color:#fff}

/* right-side "go" arrow — aligned with the centred item; click to jump to that section */
.ow-go{
  position:absolute;z-index:2;top:50%;right:clamp(2rem,10vw,5.5rem);transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  padding:.5rem;                     /* invisible tap target, no box */
  border:0;background:transparent;color:#fff;cursor:pointer;   /* solid white from the start */
  font-size:clamp(2rem,8vw,3rem);line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.ow-go span{display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
/* :active covers touch (no hover on phones) — the arrow slides while pressed */
.ow-go:hover span,.ow-go:focus-visible span,.ow-go:active span{transform:translateX(.5rem)}
.ow-go:focus{outline:none}
.ow-go:focus-visible{outline:2px solid #fff;outline-offset:4px}

.option-wheel{
  --ow-text-color:#6f6f74;--ow-active-color:#fff;--ow-font-size:2.4rem;--ow-inset:2rem;
  position:relative;width:100%;height:100%;overflow:hidden;cursor:grab;
  -webkit-user-select:none;user-select:none;touch-action:none;outline:none;
}
.option-wheel--dragging{cursor:grabbing}
.option-wheel__item{
  position:absolute;top:50%;left:var(--ow-inset);white-space:nowrap;
  font-family:var(--font-default);font-size:var(--ow-font-size);line-height:1;
  font-weight:300;letter-spacing:-.05em;
  transform-origin:left center;cursor:pointer;will-change:transform,opacity,filter;
  color:var(--ow-text-color);
}
.option-wheel--right .option-wheel__item{left:auto;right:var(--ow-inset);transform-origin:right center}
.option-wheel__item--selected{font-weight:600}

/* hide the floating hamburger while the index drawer is open (its own close button takes over) */
body.drawer-open .menu-btn{opacity:0;pointer-events:none;visibility:hidden}

@media(max-width:700px){
  .navbar_links{display:none}
  .menu-btn{display:flex}
  .navbar_logo{height:42px}
}

/* ============ EYEBROW ============ */
.g_eyebrow{display:inline-flex;align-items:center;gap:.65em}
.g_eyebrow_circle{
  width:.9em;height:.9em;border-radius:50%;
  background:var(--olive);
}
.g_eyebrow_text{
  font-family:var(--font-default);font-size:var(--text-main);
  text-transform:uppercase;font-weight:500;
  color:var(--theme-muted);
}

/* ============ SECTIONS SHARED ============ */
section{position:relative}

/* ============ HERO ============ */
/* content block is anchored to the bottom, sitting just above the wordmark */
.hero{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--space-page-top) var(--site-margin) clamp(1.5rem,1rem + 2.5vw,3.5rem);
  overflow:hidden;
}
/* dotted, grained swirl of ivory gradient drifting behind the hero */
.hero_swirl{
  position:absolute;inset:-18%;
  z-index:0;pointer-events:none;
  background:
    conic-gradient(from 225deg at 62% 38%,
      transparent 0deg,
      rgba(244,244,239,.26) 55deg,
      transparent 140deg,
      rgba(244,244,239,.10) 210deg,
      rgba(244,244,239,.19) 265deg,
      transparent 330deg),
    radial-gradient(ellipse 55% 42% at 36% 64%, rgba(244,244,239,.15), transparent 70%);
  filter:blur(64px);
  opacity:.85;
  /* soft-edged, denser dots: reads as noisy texture rather than a crisp grid */
  -webkit-mask-image:radial-gradient(#000 .7px, rgba(0,0,0,.35) 1.5px, transparent 2.6px);
  -webkit-mask-size:5px 5px;
  mask-image:radial-gradient(#000 .7px, rgba(0,0,0,.35) 1.5px, transparent 2.6px);
  mask-size:5px 5px;
  animation:swirl-flow 38s ease-in-out infinite;
  will-change:transform;
}
/* slow wave: the layer drifts and breathes instead of rotating */
@keyframes swirl-flow{
  0%,100%{transform:translate3d(0,0,0) scale(1,1)}
  25%{transform:translate3d(-3%,2.5%,0) scale(1.05,.96)}
  50%{transform:translate3d(2%,4%,0) scale(.97,1.04)}
  75%{transform:translate3d(3.5%,-2%,0) scale(1.03,.98)}
}
/* canvas version of the swirl: stationary dots whose radius/brightness
   wave subtly — replaces .hero_swirl when JS is running */
.hero_dots{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
}
.hero_contain{
  max-width:72rem;margin-bottom:clamp(2rem,1rem + 4vw,4.5rem);
  position:relative;z-index:1;
}
.hero_wordmark{position:relative;z-index:1}
.hero_statement{
  margin-top:clamp(1.5rem,1rem + 2.5vw,3rem);
  /* same 1.5rem→3rem range as --text-h4, but a gentler slope (1.35vw vs 1.875vw)
     so widening the window grows the text (and its height) more slowly */
  font-size:clamp(1.5rem,1.2rem + 1.35vw,3rem);
  font-weight:600;
  line-height:1.15;
  max-width:52ch;
  text-wrap:balance;
}
.hero_eyebrow{margin-top:clamp(1rem,.5rem + 2vw,2.5rem)}
.hero_meta{
  margin-top:clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
  display:flex;gap:2.5rem;flex-wrap:wrap;
  color:#c4c1b9;
}
.hero_wordmark{
  font-family:var(--font-bold);
  font-size:14.5vw;
  font-weight:400;
  line-height:.85;
  letter-spacing:0;
  white-space:nowrap;
  text-align:center;
  user-select:none;
  transform:translateY(.06em);
  will-change:transform;
}

/* ============ PROFILE ============ */
.profile{padding:var(--space-section-lg) var(--site-margin) clamp(2rem,1.5rem + 2vw,3rem)}
.profile_contain{max-width:90rem;margin:0 auto}
/* manifesto (left) + a friendly "about me" with photo (right); stacks on mobile */
.profile_intro{
  margin-top:clamp(1.5rem,1rem + 2.5vw,2.5rem);
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.profile_manifesto{
  font-size:var(--text-h3);
  font-weight:600;
  line-height:1.1;
  max-width:24ch;
}
/* keep the scrub-reveal split from breaking words across lines */
[data-scrub-words] .sw-word{display:inline-block;white-space:nowrap}
.profile_about{
  display:flex;flex-direction:column;gap:1rem;
  max-width:18rem;justify-self:end;
}
.profile_photo{
  width:11rem;border-radius:14px;display:block;
  aspect-ratio:4/5;object-fit:cover;
}
.profile_about_body{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.profile_about_text{
  color:var(--theme-muted);font-size:var(--text-main);font-weight:500;
  line-height:1.5;text-wrap:pretty;max-width:32ch;
}
/* "More about me" — opens the About drawer */
.profile_more{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:0;background:transparent;border:0;cursor:pointer;
  color:var(--theme-text);font:inherit;font-weight:600;
  font-size:var(--text-small);letter-spacing:-.01em;
  transition:color .3s ease;
}
.profile_more_text{position:relative}
.profile_more_text::after{
  content:'';position:absolute;left:0;bottom:-.2rem;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.profile_more_arrow{display:inline-block;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.profile_more:hover,.profile_more:focus-visible{color:var(--beige-100)}
.profile_more:hover .profile_more_text::after,
.profile_more:focus-visible .profile_more_text::after{transform:scaleX(1)}
.profile_more:hover .profile_more_arrow,
.profile_more:focus-visible .profile_more_arrow{transform:translateX(.4rem)}
.profile_more:focus,.profile_more:focus-visible{outline:none}   /* no box; the underline + arrow are the focus cue */
@media(max-width:900px){
  .profile_intro{grid-template-columns:1fr;gap:2.75rem}
  .profile_about{max-width:none;justify-self:start;flex-direction:row;align-items:center;gap:1.25rem}
  .profile_photo{width:9rem;flex:none}
}
@media(max-width:520px){
  .profile_photo{width:8rem}
}
.profile_stats{
  margin-top:var(--space-section);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  border-top:1px solid var(--theme-border);
}
.profile_stat{padding-top:1.25rem}
.profile_stat_value{
  font-size:var(--text-h2);font-weight:500;line-height:1;
}
.profile_stat_label{
  margin-top:.75rem;font-size:var(--text-small);
  color:var(--theme-muted);max-width:24ch;text-wrap:pretty;
}
.profile_skills{margin-top:var(--space-section);color:var(--theme-muted)}

/* institutions & sponsors strip */
.partners{
  margin-top:var(--space-section);
  padding-top:1.5rem;
  border-top:1px solid var(--theme-border);
}
.partners_label{color:var(--theme-muted)}
/* continuous logo marquee — track duplicated and tweened by JS */
.partners_marquee{
  margin-top:1.75rem;
  overflow:hidden;
  /* soft fade at both edges */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.partners_track{
  display:flex;align-items:center;width:fit-content;
  gap:clamp(5rem,5vw,5.5rem);
  padding-right:clamp(2.5rem,5vw,5.5rem); /* keeps the loop seam evenly spaced */
  will-change:transform;
}
.partners_item{display:block;flex-shrink:0;-webkit-user-drag:none;-webkit-touch-callout:none}
/* monochromatic: every logo forced to a single light tone, dimmed */
.partners_track img{
  height:2rem;width:auto;display:block;
  filter:brightness(0) invert(1);
  opacity:.55;
  transition:opacity .3s;
  /* block image picking / ghost-drag / long-press save */
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  pointer-events:none;-webkit-touch-callout:none;
}
.partners_item:hover img,.partners_item:focus-visible img{opacity:1}
.partners_item:focus-visible{outline:1px solid var(--olive);outline-offset:6px}

/* ============ WORKS ============ */
.works{padding:var(--space-section-lg) var(--site-margin)}
/* eyebrow kicker above the heading, flush-left — same as the “everything else” header */
.works_header{max-width:90rem;margin:0 auto}
.works_heading{
  margin-top:clamp(.6rem,.4rem + 1vw,1.1rem);
  font-family:var(--font-default);
  font-size:var(--text-title);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.04em;
}
.works_contain{
  max-width:90rem;margin:clamp(2rem,1.5rem + 2.5vw,3.5rem) auto 0;
  padding-left:clamp(1rem,4vw,4.5rem);
}
/* MONOLOG rhythm: modest gaps + dotted separators instead of large voids */
.works_list{display:flex;flex-direction:column;gap:clamp(1.75rem,1.5rem + 1.25vw,2rem)}

.work_item{
  display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.25rem,2.5vw,3rem);
  align-items:start;
  padding-bottom:clamp(1.75rem,1.5rem + 1.25vw,2rem);
  border-bottom:1px dotted var(--theme-border);
}
.work_item:last-child{padding-bottom:0;border-bottom:0}
.work_cover{
  position:relative;
  overflow:hidden;border-radius:var(--radius-medium);
  aspect-ratio:3/2;
  background:var(--charcoal);
}
/* hover: a preview (video / photo slideshow) floats up on a dimmed backdrop */
.work_cover_video{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  opacity:0;pointer-events:none;
  background:rgba(10,9,8,.5);           /* slightly darkens the photo behind */
  transition:opacity .35s cubic-bezier(.25,0,.25,1);
}
.work_cover_video .work_media,
.work_cover_video .work_slides{
  position:relative;
  width:78%;height:78%;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.5);
  transform:translateY(16%) scale(.98);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
/* animate the wrapper div, never the <video> itself — a playing video gets
   its own compositor layer and snaps an in-progress transform transition */
.work_media video{width:100%;height:100%;display:block;object-fit:cover}
.work_media,.work_slides{background:var(--charcoal)}
.work_slides img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .7s ease}
.work_slides img.is-active{opacity:1}
@media(hover:hover) and (pointer:fine){
  .work_item:hover .work_cover_video{opacity:1}
  .work_item:hover .work_cover_video .work_media,
  .work_item:hover .work_cover_video .work_slides{transform:translateY(0) scale(1)}
}
/* touch / no-hover: JS adds .is-active to the card at the viewport centre while scrolling */
.work_item.is-active .work_cover_video{opacity:1}
.work_item.is-active .work_cover_video .work_media,
.work_item.is-active .work_cover_video .work_slides{transform:translateY(0) scale(1)}
.work_cover_inner{
  width:100%;height:120%;margin-top:-10%;
  will-change:transform;
}
.work_cover_inner svg,.work_cover_inner img{width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.work_item:hover .work_cover_inner svg,.work_item:hover .work_cover_inner img{transform:scale(1.04)}
.work_content{display:flex;flex-direction:column;align-items:flex-start;max-width:39ch;height:100%}
.work_micrographic{
  display:flex;align-items:center;gap:.75em;width:100%;
  color:var(--theme-muted);
}
.work_micrographic_line{flex:1;height:1px;background:var(--theme-border)}
.work_title{
  margin-top:1.25rem;
  font-size:var(--text-h5);font-weight:500;
}
.work_desc{
  margin-top:.5rem;
  font-size:var(--text-h5);font-weight:500;
  line-height:1.3;color:var(--theme-muted);text-wrap:pretty;
}
/* result pinned to the bottom of the row via margin-top:auto,
   value styled as a chip like MONOLOG's result block */
.work_result{
  margin-top:auto;padding-top:clamp(2rem,1.5rem + 2.5vw,3.5rem);
  display:flex;flex-direction:column;align-items:flex-start;
}
.work_result_value{
  font-weight:500;font-size:var(--text-main);
  padding:.25rem .5rem;border-radius:var(--radius-small);
  background:var(--beige-100);
}
.work_result_label{
  margin-top:.6rem;font-size:var(--text-small);color:var(--theme-muted);
  max-width:24ch;text-wrap:balance;
}

/* ============ ARCHIVE (Index + Records) ============ */
.archive{padding:var(--space-section-lg) var(--site-margin)}
/* tighten the gap from each section's top to its eyebrow (keeps bottom spacing) */
.profile,.works,.archive,.case{padding-top:clamp(2.75rem,2rem + 2.5vw,5rem)}
.archive_contain{max-width:90rem;margin:0 auto}
.archive_heading{
  margin-top:clamp(.6rem,.4rem + 1vw,1.1rem);
  font-family:var(--font-default);
  font-size:var(--text-title);
  font-weight:700;line-height:.95;letter-spacing:-.04em;
}
.archive_list{margin-top:clamp(2.5rem,2rem + 2.5vw,4rem)}
.archive_row{
  display:grid;grid-template-columns:5rem 1fr 4rem 2rem;
  align-items:baseline;gap:1.25rem;
  padding:.55rem .5rem;
  border-bottom:1px solid var(--theme-border);
  cursor:pointer;
  transition:padding-left .35s cubic-bezier(.16,1,.3,1);
}
.archive_row:first-child{border-top:1px solid var(--theme-border)}
.archive_row:hover{padding-left:1.25rem}
.archive_idx{color:var(--theme-muted)}
.archive_title{
  font-size:var(--text-h5);font-weight:500;
}
.archive_year{color:var(--theme-muted);text-align:right}
.archive_arrow{
  text-align:right;color:var(--theme-muted);
  transition:transform .35s cubic-bezier(.16,1,.3,1),color .35s;
}
.archive_row:hover .archive_arrow{transform:translateX(.35rem);color:var(--olive)}
/* records rows: no year column */
#records .archive_row{grid-template-columns:5rem 1fr 2rem}

/* ============ SELECTED AWARDS — timeline ============ */
.awards_timeline{
  margin-top:clamp(2.5rem,2rem + 2.5vw,4rem);
  position:relative;margin-left:.5rem;padding-left:2rem;
  border-left:1px solid var(--theme-border);max-width:60rem;
}
.aw_group{position:relative;padding-bottom:2.25rem}
.aw_group:last-child{padding-bottom:0}
.aw_year{
  position:relative;font-family:var(--font-default);
  font-size:var(--text-h4);font-weight:700;letter-spacing:-.03em;
  line-height:1;margin-bottom:.9rem;
}
.aw_year::before{
  content:'';position:absolute;left:calc(-2rem - 1px);top:50%;
  transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;
  background:var(--theme-bg);border:2px solid var(--theme-text);
}
.aw_item{
  display:flex;align-items:baseline;gap:.85rem;padding:.7rem 0;
  color:var(--theme-text);transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.aw_item:hover{transform:translateX(.35rem)}
.aw_mark{flex:none;width:1.1rem;color:var(--theme-muted);font-size:var(--text-small)}
.aw_t{font-size:var(--text-h5);font-weight:500;letter-spacing:-.01em;line-height:1.25}
.aw_org{display:block;margin-top:.2rem;color:var(--theme-muted);
  font-size:var(--text-small);font-weight:400;letter-spacing:0}
.aw_item.star .aw_mark{color:var(--theme-text)}

/* ============ FLOWING MENU (Index only) ============ */
.flow_list{margin-top:clamp(2.5rem,2rem + 2.5vw,4rem)}
.flow_item{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--theme-border);
}
.flow_item:first-child{border-top:1px solid var(--theme-border)}
.flow_link{
  display:grid;grid-template-columns:5rem 1fr 4rem 2rem;
  align-items:baseline;gap:1.25rem;
  padding:.65rem .5rem;
  cursor:pointer;position:relative;
}
.flow_title{
  font-size:var(--text-h5);font-weight:500;
}
/* the marquee band that slides over the row on hover */
.flow_marquee{
  position:absolute;inset:0;
  pointer-events:none;
  background:var(--beige-100);
  transform:translate3d(0,101%,0);
  will-change:transform;
}
.flow_marquee_wrap{height:100%;width:100%;overflow:hidden}
.flow_marquee_inner{
  display:flex;align-items:center;position:relative;
  height:100%;width:fit-content;
  will-change:transform;
}
.flow_part{
  display:flex;align-items:center;flex-shrink:0;
  color:var(--charcoal);
}
.flow_part span{
  white-space:nowrap;text-transform:uppercase;
  font-weight:500;font-size:var(--text-h5);line-height:1;
  padding:0 1.5vw;
}
.flow_part i{
  width:9rem;height:2.4rem;margin:0 1.5vw;flex-shrink:0;
  border-radius:50px;
  background-size:cover;background-position:50% 50%;
}
@media(max-width:900px){
  .flow_link{grid-template-columns:3.25rem 1fr 3rem 1.5rem;gap:.75rem;padding:1.3rem .5rem}
  .flow_part i{width:6rem;height:2rem}
}
@media(prefers-reduced-motion:reduce){
  .flow_marquee{display:none}
}

/* ============ INDEX BENTO ============ */
.bento{
  margin-top:clamp(2.5rem,2rem + 2.5vw,4rem);
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(150px,9vw + 60px,220px);
  gap:var(--gutter);grid-auto-flow:dense;
}
.bento_card{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-medium);
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 30px 60px -42px rgba(0,0,0,.9);
  padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;
  transition:border-color .4s,transform .4s,background .4s;
}
.bento_card:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.11);transform:translateY(-5px)}
/* solid fallback where backdrop-filter isn't supported */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bento_card{background:var(--charcoal);border-color:var(--theme-border)}
}
.bento_card.is-feature{grid-column:span 2;grid-row:span 2}
.bento_card.is-tall{grid-row:span 2}
.bento_card.is-wide{grid-column:span 2}
.bento_img{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:.46;transition:opacity .5s,transform .8s cubic-bezier(.16,1,.3,1);
}
.bento_card.has-img::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(3,3,3,.1) 0%,rgba(3,3,3,.15) 45%,rgba(3,3,3,.82) 100%);
}
.bento_card:hover .bento_img{opacity:.6;transform:scale(1.05)}
.bento_top,.bento_bot{position:relative;z-index:1}
.bento_top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin:-.45rem -.5rem 0}
.bento_cat{
  display:inline-flex;font-size:var(--text-xsmall);text-transform:uppercase;font-weight:600;letter-spacing:.03em;
  padding:.3em .7em;border:1px solid var(--black-200);border-radius:50px;color:var(--beige-100);background:rgba(0,0,0,.25);
}
.bento_idx{font-size:var(--text-small);color:var(--theme-muted);font-weight:500}
.bento_title{font-size:var(--text-h5);font-weight:600;line-height:1.15;letter-spacing:-.02em;text-wrap:pretty}
.bento_card.is-feature .bento_title{font-size:var(--text-h3);letter-spacing:-.03em}
.bento_year{
  margin-top:.5rem;font-size:var(--text-xsmall);text-transform:uppercase;color:var(--theme-muted);
  display:flex;align-items:center;gap:.5em;
}

/* ============ FOOTER ============ */
.footer{overflow:hidden}
.footer_inner{
  padding:clamp(1.75rem,1rem + 2vw,3.25rem) var(--site-margin) 1.5rem;
  will-change:transform;
}
.footer_top{
  max-width:90rem;margin:0 auto;
  display:flex;flex-direction:column;gap:var(--space-section);
}
.footer_nav ul{display:flex;flex-direction:column}
.footer_nav_link{
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 0;
  border-bottom:1px solid var(--theme-border);
  font-size:var(--text-h3);font-weight:500;
  transition:padding-left .35s cubic-bezier(.16,1,.3,1);   /* color fills instantly, only the slide animates */
}
.footer_nav li:first-child .footer_nav_link{border-top:1px solid var(--theme-border)}
.footer_nav_link:hover{padding-left:1.25rem}
.footer_nav_arrow{
  transition:transform .35s cubic-bezier(.16,1,.3,1);   /* only the slide animates; color is instant */
  color:inherit;               /* same as the link text by default */
}
.footer_nav_link:hover .footer_nav_arrow{transform:translateX(.5rem)}
/* on hover the arrow takes each platform's brand color */
/* on hover the whole link (text + arrow) takes each platform's brand color */
.footer_nav_link.is-linkedin:hover{color:#0a66c2}   /* LinkedIn blue */
.footer_nav_link.is-github:hover{color:#a3a09a}     /* GitHub (mono) — light gray */
.footer_nav_link.is-instagram:hover span{          /* Instagram — purple-leaning gradient on text + arrow */
  color:transparent;
  background:linear-gradient(45deg,#7b2ff7,#9b30c9,#c13584,#e1306c);
  -webkit-background-clip:text;background-clip:text;
}
.footer_email{
  display:block;max-width:90rem;
  margin:var(--space-section-lg) auto;
  font-family:var(--font-bold);
  font-size:var(--text-display);
  font-weight:400;line-height:.95;letter-spacing:0;
  overflow-wrap:normal;word-break:keep-all; /* break only at the intended <br> */
}
/* the email is rendered as an interactive WebGL warp canvas (js/warp-text.js) */
.footer_email_warp{position:relative;display:block;width:100%;height:clamp(7rem,26vw,19rem)}
.footer_bottom{
  max-width:90rem;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-top:1.25rem;
  border-top:1px solid var(--theme-border);
  color:var(--theme-muted);
}
.footer_credit{font-family:var(--font-default);font-size:var(--text-main);font-weight:500;color:var(--theme-text)}
.footer_totop{display:inline-flex;align-items:center;gap:.5em;
  color:var(--theme-muted);text-decoration:none;font-size:var(--text-main);transition:color .3s}
.footer_totop span{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.footer_totop:hover{color:var(--olive)}
.footer_totop:hover span{transform:translateY(-.25em)}

/* ============ CASE STUDY (works.html) ============ */
/* page intro */
.case_intro{padding:var(--space-page-top) var(--site-margin) var(--space-section)}
.case_intro_contain{max-width:90rem;margin:0 auto}
.case_intro_heading{
  margin-top:clamp(1.5rem,1rem + 2.5vw,2.5rem);
  font-family:var(--font-default);
  font-size:var(--text-h2);font-weight:700;line-height:1.05;letter-spacing:-.04em;
}
.case_intro_lede{
  margin-top:clamp(1.25rem,1rem + 1.5vw,2rem);
  font-size:var(--text-h4);font-weight:500;line-height:1.2;
  max-width:28ch;text-wrap:pretty;color:var(--theme-muted);
}
/* jump nav to the three projects */
.case_jump{
  margin-top:var(--space-section);
  display:flex;flex-wrap:wrap;gap:1rem;
  border-top:1px solid var(--theme-border);padding-top:1.5rem;
}
.case_jump_link{
  display:inline-flex;align-items:baseline;gap:.6em;
  padding:.5rem .9rem;border:1px solid var(--theme-border);border-radius:50px;
  font-size:var(--text-small);font-weight:500;
  transition:border-color .35s,color .35s;
}
.case_jump_link .n{color:var(--theme-muted)}
.case_jump_link:hover{border-color:var(--olive);color:var(--olive)}
.case_jump_link:hover .n{color:var(--olive)}

/* per-project section */
.case{padding:var(--space-section-lg) var(--site-margin)}
.case_contain{max-width:90rem;margin:0 auto}
.case_title{
  margin-top:clamp(1rem,.5rem + 2vw,2rem);
  font-family:var(--font-default);
  font-size:var(--text-title);font-weight:700;line-height:.92;letter-spacing:-.04em;
}
.case_lede{
  margin-top:clamp(1.25rem,1rem + 1.5vw,2rem);
  font-size:var(--text-h4);font-weight:500;line-height:1.2;
  max-width:26ch;text-wrap:pretty;
}
.case_meta{
  margin-top:var(--space-section);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  border-top:1px solid var(--theme-border);
}
.case_meta_item{padding-top:1.25rem}
.case_meta_k{font-size:var(--text-small);color:var(--theme-muted);text-transform:uppercase}
.case_meta_v{margin-top:.4rem;font-size:var(--text-h5);font-weight:500}

.case_cover{
  margin-top:var(--space-section);
  overflow:hidden;border-radius:var(--radius-medium);
  aspect-ratio:16/9;background:var(--charcoal);
}
.case_cover_inner{width:100%;height:118%;margin-top:-9%;will-change:transform}
.case_cover.is-media{aspect-ratio:4/3}
.case_cover.is-media .case_cover_inner{height:100%;margin-top:0}
.case_cover_inner svg,.case_cover_inner img,.case_cover_inner video{width:100%;height:100%;display:block;object-fit:cover}

.case_body{margin-top:var(--space-section-lg);display:flex;flex-direction:column;gap:var(--space-section-lg)}
/* label-in-rail + content, like the works layout */
.case_block{display:grid;grid-template-columns:1fr 2.4fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.case_block_label{
  font-size:var(--text-small);text-transform:uppercase;color:var(--theme-muted);
  position:sticky;top:var(--space-section);
}
.case_prose{max-width:60ch}
.case_prose p{font-size:var(--text-h5);font-weight:500;line-height:1.35;text-wrap:pretty}
.case_prose p+p{margin-top:1.25rem}
/* inline links inside prose need to read as links (default a{} strips underline) */
.case_prose a,.panel_prose a{
  text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;
  text-decoration-color:var(--olive);transition:color .25s ease,text-decoration-color .25s ease;
}
.case_prose a:hover,.case_prose a:focus-visible,
.panel_prose a:hover,.panel_prose a:focus-visible{color:var(--olive)}

.case_specs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.5rem,4vw,4rem)}
.case_spec{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.9rem 0;border-bottom:1px solid var(--theme-border);
}
.case_spec_k{color:var(--theme-muted);font-size:var(--text-small);text-transform:uppercase}
.case_spec_v{font-weight:500;text-align:right}

.case_steps{counter-reset:step;display:flex;flex-direction:column}
.case_step{
  display:grid;grid-template-columns:4rem 1fr;gap:1.5rem;
  padding:1.5rem 0;border-top:1px solid var(--theme-border);
}
.case_step:last-child{border-bottom:1px solid var(--theme-border)}
.case_step_n{counter-increment:step;font-size:var(--text-small);color:var(--theme-muted)}
.case_step_n::before{content:counter(step,decimal-leading-zero)}
.case_step_t{font-size:var(--text-h5);font-weight:500}
.case_step_d{margin-top:.5rem;color:var(--theme-muted);max-width:52ch;text-wrap:pretty}

.case_gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
.case_fig{overflow:hidden;border-radius:var(--radius-medium);aspect-ratio:4/3;background:var(--charcoal)}
.case_fig.is-wide{grid-column:1 / -1;aspect-ratio:2/1}
.case_fig img,.case_fig svg{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.case_fig:hover img{transform:scale(1.03)}

.case_outcome{display:grid;grid-template-columns:1fr 2.4fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.case_outcome_value{font-family:var(--font-default);font-size:var(--text-h2);font-weight:600;line-height:1}
.case_outcome_p{margin-top:1rem;max-width:52ch;font-size:var(--text-h5);font-weight:500;
  line-height:1.35;color:var(--theme-muted);text-wrap:pretty}

/* ============ INDEX SIDE PANEL (drawer) ============ */
.drawer_backdrop{
  position:fixed;inset:0;z-index:390;
  background:rgba(3,3,3,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;
  transition:opacity .5s ease,visibility 0s linear .5s;
}
.drawer_backdrop.is-open{opacity:1;visibility:visible;transition:opacity .5s ease}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:400;
  width:70%;max-width:64rem;
  background:var(--charcoal);color:var(--beige-100);
  --theme-muted:var(--black-50);--theme-border:var(--black-300);
  transform:translateX(100%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;
}
/* shadow only while open — otherwise it bleeds back onto the right edge
   of the page while the panel sits parked off-screen */
.drawer.is-open{transform:translateX(0);box-shadow:-2rem 0 6rem rgba(0,0,0,.5)}
.drawer:focus{outline:none}   /* focused on open for a11y; no visible ring on the container */
.drawer_bar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.05rem var(--site-margin);flex-shrink:0;
  border-bottom:1px solid var(--theme-border);
}
.drawer_bar_label{color:var(--theme-muted)}
/* minimal close — the X only, no chrome.
   appearance:none is required or Safari paints a native button box around it. */
.drawer_close{
  -webkit-appearance:none;appearance:none;
  width:2.4rem;height:2.4rem;flex:none;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--beige-100);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .3s ease;
}
.drawer_close:hover,.drawer_close:focus-visible{color:var(--olive)}
.drawer_close:focus{outline:none}
.drawer_close:focus-visible{outline:1px solid var(--olive);outline-offset:3px}
.drawer_close_x{
  position:relative;display:block;width:15px;height:15px;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.drawer_close:hover .drawer_close_x,
.drawer_close:focus-visible .drawer_close_x{transform:scale(1.18)}
.drawer_close_x::before,.drawer_close_x::after{
  content:'';position:absolute;top:50%;left:0;width:100%;height:1.5px;
  border-radius:2px;background:currentColor;
}
.drawer_close_x::before{transform:translateY(-50%) rotate(45deg)}
.drawer_close_x::after{transform:translateY(-50%) rotate(-45deg)}
.drawer_scroll{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(2rem,1.5rem + 2.5vw,4rem) var(--site-margin) var(--space-section);
}
/* injected panel content */
.panel_title{
  margin-top:1rem;font-family:var(--font-default);
  font-size:var(--text-h2);font-weight:700;line-height:1.05;letter-spacing:-.04em;
}
.panel_lede{
  margin-top:1.25rem;font-size:var(--text-h5);font-weight:500;line-height:1.3;
  max-width:44ch;text-wrap:pretty;
}
.panel_cover{
  margin-top:2rem;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius-medium);background:var(--black-400);
}
.panel_cover img,.panel_cover video{width:100%;height:100%;object-fit:cover;display:block}
.panel_cover.is-poster{background:#f2f1ec}
.panel_cover.is-poster img{object-fit:contain;padding:clamp(.75rem,2vw,1.5rem)}
/* photo placeholder — reserves the frame until a real image is dropped in */
.media_ph{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;height:100%;
  color:var(--theme-muted);font-family:var(--font-default);font-size:var(--text-small);
  text-transform:uppercase;letter-spacing:.05em;
  background:repeating-linear-gradient(45deg,transparent 0,transparent 11px,rgba(255,255,255,.03) 11px,rgba(255,255,255,.03) 22px);
}
.panel_prose{margin-top:2rem;max-width:60ch}
.panel_prose p{color:var(--theme-text);text-wrap:pretty}
.panel_prose p + p{margin-top:1rem}
.panel_facts{margin-top:2.5rem;border-top:1px solid var(--theme-border)}
.panel_fact{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--theme-border);
}
.panel_fact_k{color:var(--theme-muted);text-transform:uppercase;font-size:var(--text-small)}
.panel_fact_v{font-weight:500;text-align:right}

/* ============ RESPONSIVE ============ */
/* gallery goes full-width earlier, so photos fill the column sooner */
@media(max-width:1200px){
  .case_gallery{grid-template-columns:1fr}
  .case_fig.is-wide{aspect-ratio:4/3}
}
@media(max-width:900px){
  /* selected works: photo goes full-width above the text — same type sizes as side-by-side */
  .work_item{grid-template-columns:1fr;gap:clamp(1rem,3vw,1.75rem)}
  .work_title{margin-top:1.1rem}
  .work_result{padding-top:1.75rem}
  .profile_stats{grid-template-columns:1fr;gap:0}
  .profile_stat{border-bottom:1px solid var(--theme-border);padding-bottom:1.25rem;margin-bottom:1.25rem}
  .profile_stat:last-child{border-bottom:0;margin-bottom:0}
  .archive_row{grid-template-columns:3.25rem 1fr 3rem 1.5rem;gap:.75rem}
  #records .archive_row{grid-template-columns:3.25rem 1fr 1.5rem}
  .hero_meta{gap:1rem;flex-direction:column}
  .footer_bottom{flex-direction:column;gap:.5rem}
  /* case study collapses to a single column */
  .case_block,.case_outcome{grid-template-columns:1fr;gap:1.25rem}
  .case_block_label{position:static}
  .case_meta{grid-template-columns:1fr;gap:0}
  .case_meta_item{border-bottom:1px solid var(--theme-border);padding-bottom:1rem;margin-bottom:1rem}
  .case_meta_item:last-child{border-bottom:0;margin-bottom:0}
  .case_specs{grid-template-columns:1fr}
  .case_cover{aspect-ratio:4/3}
  /* the panel takes the full screen on small viewports */
  .drawer{width:100%;max-width:none}
  /* index bento → two columns */
  .bento{grid-template-columns:1fr 1fr}
  .bento_card.is-feature{grid-column:span 2}
}
@media(max-width:560px){
  /* keep the nav on one row at any width — never wrap under the logo */
  .navbar{flex-wrap:nowrap;gap:.6rem;padding:.4rem var(--site-margin)}
  .navbar_logo{height:42px}
  .navbar_links ul{flex-wrap:nowrap;white-space:nowrap;gap:.7rem}
  .navbar_links a{font-size:.6rem}
  /* smaller sponsor logos */
  .partners_track{gap:2.25rem}
  .partners_track img{height:2rem}
  /* email must never break mid-word (the "M" was wrapping) */
  .footer_email{font-size:clamp(2.25rem,10vw,3.5rem);overflow-wrap:normal;word-break:keep-all}
  /* works: keep the larger stacked type on phones, just tighten the cover */
  .work_cover{aspect-ratio:3/2}
  .work_micrographic{font-size:var(--text-xsmall)}
  .work_result{padding-top:1rem}
  .work_result_value{font-size:var(--text-small)}
  .work_result_label{font-size:var(--text-xsmall)}
  /* index bento → single column */
  .bento{grid-template-columns:1fr}
  .bento_card.is-feature,.bento_card.is-wide{grid-column:span 1}
  .bento_card.is-feature{grid-row:span 2}
}

/* ============ 3D MODEL VIEWER ============ */
.case_cover.is-model{cursor:grab}
.case_cover.is-model:active{cursor:grabbing}
.model3d{position:relative;width:100%;height:100%}
.model3d_canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .8s ease}
.model3d.is-loaded .model3d_canvas{opacity:1}
.model3d_fallback{position:absolute;inset:0;transition:opacity .6s ease}
.model3d_fallback .case_cover_inner{height:100%;margin-top:0}
.model3d.is-loaded .model3d_fallback{opacity:0;pointer-events:none}
.model3d_caption{
  position:absolute;left:clamp(.75rem,2vw,1.25rem);bottom:clamp(.75rem,2vw,1.25rem);z-index:2;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.5rem .85rem;border-radius:999px;
  background:rgba(24,23,21,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#e8e8e3;opacity:0;transition:opacity .8s ease .3s;pointer-events:none;
}
.model3d.is-loaded .model3d_caption{opacity:1}
.model3d_caption sub,.model3d_caption sup{font-size:.7em}
.model3d_dot{width:.5rem;height:.5rem;border-radius:50%;background:#8b5cf6;box-shadow:0 0 8px #8b5cf6}

/* ---- gallery figures shown in full (charts / diagrams, not cropped) ---- */
.case_fig{position:relative;margin:0}
.case_fig.is-fit{background:#f6f5f1}
.case_fig.is-fit img{object-fit:contain;padding:clamp(.75rem,2.2vw,1.5rem)}
.case_fig.is-fit:hover img{transform:none}
.case_fig.is-video{background:#2b2a28}
.case_fig video{width:100%;height:100%;object-fit:cover;display:block}
.case_fig.on-dark{background:#141310}
.case_fig.is-trio{aspect-ratio:auto}
.case_trio{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-items:center;
  gap:clamp(.6rem,1.6vw,1.1rem);padding:clamp(.9rem,2.4vw,1.7rem);height:clamp(230px,32vw,420px)}
.case_fig.is-trio .case_trio img{width:auto;height:100%;max-width:100%;object-fit:contain;
  border-radius:14px;display:block}
.case_fig.is-trio:hover img{transform:none}

/* ---- case links (paper / poster / code buttons) ---- */
.case_links{display:flex;flex-wrap:wrap;gap:.75rem}
.case_link{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.7rem 1.15rem;border:1px solid var(--theme-border);border-radius:999px;
  font-weight:500;line-height:1;
  transition:border-color .3s ease,background-color .3s ease,transform .3s ease;
}
.case_link::after{content:"\2197";color:var(--theme-muted);transition:transform .3s ease,color .3s ease}
.case_link:hover{border-color:var(--theme-text);transform:translateY(-2px)}
.case_link:hover::after{transform:translate(2px,-2px);color:var(--theme-text)}
.case_link_meta{
  color:var(--theme-muted);font-size:var(--text-small);text-transform:uppercase;letter-spacing:normal;
  padding-left:.6rem;border-left:1px solid var(--theme-border);
}

/* ---- drawer panel: caption, figure grid, links ---- */
.panel_caption{margin-top:.6rem;color:var(--theme-muted);font-size:var(--text-small);line-height:1.4}
.panel_figs{margin-top:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.panel_fig{margin:0}
/* two short figures stacked in one grid cell, to sit beside a taller one */
.panel_fig_stack{display:flex;flex-direction:column;gap:var(--gutter);min-width:0}
.panel_fig img,.panel_fig video{width:100%;border-radius:var(--radius-medium);display:block;background:#141310}
/* photo galleries (mixed portrait/landscape): crop to one uniform tile so rows line up */
.panel_figs.is-photos .panel_fig img,.panel_figs.is-photos .panel_fig video{aspect-ratio:4/3;height:auto;object-fit:cover}
.panel_fig figcaption{margin-top:.5rem;color:var(--theme-muted);font-size:var(--text-small)}
.panel_links{margin-top:1.75rem}
@media(max-width:560px){.panel_figs{grid-template-columns:1fr}}

/* ---- interactive 3D models in a panel ---- */
.panel_models{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:1.5rem}
.panel_model{position:relative;aspect-ratio:3/4;border-radius:var(--radius-medium);overflow:hidden;
  background:radial-gradient(120% 120% at 50% 30%,#211f1b 0%,#141310 100%);cursor:grab}
.panel_model:active{cursor:grabbing}
.panel_model.is-loaded .model3d_canvas{opacity:1}
.panel_model_num{position:absolute;left:.6rem;top:.5rem;z-index:2;color:var(--theme-muted)}
.case_fig_cap{
  position:absolute;left:.75rem;top:.75rem;z-index:1;
  padding:.35rem .6rem;border-radius:6px;
  background:rgba(24,23,21,.72);color:#e8e8e3;
  font-size:var(--text-small);letter-spacing:.02em;
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .grain{display:none}
  .has-motion [data-animate]{opacity:1;transform:none}
  .has-motion [data-split]{visibility:visible}
}