/* =====================================================================
   daniellouvre — Photography
   Design system. Idiom: editorial monochrome + single accent, oversized
   fluid display type, per-section theme inversion, grain, smooth scroll.
   One stylesheet, mobile-first, reduced-motion aware.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* Fonts (self-hosted)                                                 */
/* ------------------------------------------------------------------ */
/* CDOvuer — display font (has Latin + Cyrillic) */
@font-face{font-family:"CDOvuer";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/cdovuer.woff2") format("woff2")}
/* Sansumi — hero heading font */
@font-face{font-family:"Sansumi";font-style:normal;font-weight:200;font-display:swap;src:url("../fonts/Sansumi-UltraLight.woff2") format("woff2")}
@font-face{font-family:"Sansumi";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Sansumi-Regular.woff2") format("woff2")}
@font-face{font-family:"Sansumi";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Sansumi-DemiBold.woff2") format("woff2")}
@font-face{font-family:"Sansumi";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Sansumi-Bold.woff2") format("woff2")}
/* HelveticaNowDisplay — body font (drop the 2 files in /fonts to enable; Cyrillic falls back to Inter) */
@font-face{font-family:"HelveticaNowDisplay";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/HelveticaNowDisplay-Regular.woff2") format("woff2"),url("../fonts/HelveticaNowDisplay-Regular.woff") format("woff")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/manrope-500-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/manrope-500-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/manrope-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/manrope-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/manrope-700-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/manrope-700-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/manrope-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/manrope-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
:root{
  /* palette */
  --ink:#0c0c0d;
  --paper:#f3f0e8;
  --paper-2:#e8e4d8;
  --accent:#e8482a;          /* vermilion */
  --accent-ink:#bd3a1f;      /* darker accent for small text on light — meets WCAG AA (4.87:1 on --paper) */
  --grey:#8c8a85;

  /* active theme (defaults to light / paper) */
  --bg:var(--paper);
  --fg:var(--ink);
  --muted:#6f6c65;
  --hairline:rgba(12,12,13,.16);
  --cursor:var(--accent);
  --selection:var(--accent);

  /* type */
  --font-display:"CDOvuer","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* fluid type scale */
  --fs-mega:clamp(3.2rem,14vw,16rem);
  --fs-display:clamp(2.6rem,9vw,9rem);
  --fs-h1:clamp(2.2rem,6vw,5.5rem);
  --fs-h2:clamp(1.6rem,3.4vw,3rem);
  --fs-h3:clamp(1.3rem,2.2vw,2rem);
  --fs-lede:clamp(1.25rem,2.4vw,2.1rem);
  --fs-body:clamp(1rem,1.05vw,1.125rem);
  --fs-small:.8125rem;
  --fs-eyebrow:.72rem;

  /* spacing scale */
  --sp-1:.5rem;  --sp-2:1rem;   --sp-3:1.5rem;  --sp-4:2.5rem;
  --sp-5:4rem;   --sp-6:6rem;   --sp-7:9rem;    --sp-8:13rem;
  --section-y:clamp(5rem,12vw,11rem);

  /* layout */
  --gutter:clamp(18px,4.5vw,44px);
  --maxw:1760px;
  --header-h:clamp(58px,7vw,84px);
  --hairline-w:1px;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.6s;
  --radius:0px;
}

/* theme variants — set on <body data-theme> or any [data-theme] scope */
[data-theme="dark"]{
  --bg:var(--ink); --fg:var(--paper);
  --muted:rgba(243,240,232,.56);
  --hairline:rgba(243,240,232,.18);
  --cursor:var(--paper);
}
[data-theme="accent"]{
  --bg:var(--accent); --fg:var(--paper);
  --muted:rgba(243,240,232,.7);
  --hairline:rgba(243,240,232,.34);
  --cursor:var(--paper);
}

/* ------------------------------------------------------------------ */
/* Reset / base                                                        */
/* ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ink root background — fills iOS safe-area (notch / home-indicator) + overscroll
   bounce with dark, matching the dark hero (top) and footer (bottom) so there are
   no light bands. The paper body paints over it for the light middle sections. */
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip;background:var(--ink)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  max-width:100%;
  transition:background-color .7s var(--ease),color .7s var(--ease);
}
::selection{background:var(--selection);color:var(--paper)}
img,video,canvas,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-weight:500;line-height:1;letter-spacing:-.02em}

/* hide native cursor only where we render a custom one */
@media (hover:hover) and (pointer:fine){
  html.js.has-cursor,html.js.has-cursor *{cursor:none}
}

/* ------------------------------------------------------------------ */
/* Layout primitives                                                   */
/* ------------------------------------------------------------------ */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
@media (max-width:1024px){.grid{grid-template-columns:repeat(8,1fr)}}
@media (max-width:699px){.grid{grid-template-columns:repeat(4,1fr)}}
.hairline{border:0;border-top:var(--hairline-w) solid var(--hairline);width:100%}

/* type helpers */
.font-display{font-family:var(--font-display)}
.eyebrow{font-family:var(--font-body);font-weight:600;font-size:clamp(.8rem,.95vw,.92rem);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow--accent{color:var(--accent)}
[data-theme="accent"] .eyebrow--accent{color:var(--paper)}
.lede{font-size:var(--fs-lede);line-height:1.22;letter-spacing:-.01em;font-weight:400;max-width:24ch}
.muted{color:var(--muted)}
.display{font-family:var(--font-display);font-weight:500;font-size:var(--fs-display);line-height:.92;letter-spacing:-.03em}
.mega{font-family:var(--font-display);font-weight:500;font-size:var(--fs-mega);line-height:.82;letter-spacing:-.045em}

/* ------------------------------------------------------------------ */
/* Grain + page overlays                                               */
/* ------------------------------------------------------------------ */
.grain{position:fixed;inset:0;width:100%;height:100%;z-index:9000;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="dark"] .grain,[data-theme="accent"] .grain{mix-blend-mode:screen;opacity:.06}

/* page transition overlay */
.transition{position:fixed;inset:0;z-index:9500;background:var(--ink);transform:scaleY(0);transform-origin:bottom;pointer-events:none;will-change:transform}
.transition__label{position:absolute;inset:0;display:grid;place-items:center;color:var(--paper);font-family:"Sansumi",sans-serif;font-weight:200;letter-spacing:.04em;font-size:clamp(2.6rem,9.5vw,10rem);opacity:0}
html.is-entering .transition{transform:scaleY(1);transform-origin:top}

/* ------------------------------------------------------------------ */
/* Custom cursor                                                       */
/* ------------------------------------------------------------------ */
.cursor{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--cursor);z-index:9600;pointer-events:none;
  transform:translate(var(--cx,-100px),var(--cy,-100px)) translate(-50%,-50%);mix-blend-mode:difference;opacity:0;will-change:transform;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),opacity .3s,background-color .3s}
.cursor.is-visible{opacity:1}
.cursor.is-hover{width:64px;height:64px;background:transparent;border:1px solid var(--paper);mix-blend-mode:difference}
.cursor.is-media{width:96px;height:96px;mix-blend-mode:normal;background:var(--accent)}
.cursor__label{position:absolute;inset:0;display:grid;place-items:center;color:var(--paper);font-family:var(--font-display);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .25s}
.cursor.is-media .cursor__label{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */
.site-header{position:fixed;top:0;left:0;width:100%;height:calc(var(--header-h) + env(safe-area-inset-top,0px));z-index:8000;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gutter);
  /* push below notch/dynamic island on iOS */
  padding-top:env(safe-area-inset-top,0px);
  /* simple per-section color: white over dark sections, black over light ones */
  color:var(--fg);
  transition:color .7s var(--ease),transform .5s var(--ease)}
.site-header[data-hidden="true"]{transform:translateY(-100%)}
.site-header::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:var(--hairline);opacity:0;transition:opacity .4s}
.site-header.is-stuck::after{opacity:1}

.brand{font-family:var(--font-body);font-weight:700;font-size:clamp(1.45rem,2.1vw,2rem);letter-spacing:normal;display:inline-flex;align-items:center;gap:.5em;line-height:1}
.brand sup{font-size:.5em;font-weight:500;vertical-align:super;color:var(--accent)}
[data-theme="accent"] .brand sup,[data-theme="dark"] .brand sup{color:var(--paper)}

.nav{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.8rem);margin-right:clamp(1.5rem,8vw,9rem)}
.nav__link{position:relative;font-size:clamp(.95rem,1.05vw,1.1rem);letter-spacing:.01em;padding-block:.4rem}
.nav__link::after{content:"";position:absolute;left:0;bottom:.15rem;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
@media (hover:hover){.nav__link:hover::after{transform:scaleX(1);transform-origin:left}}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--accent)}
[data-theme="accent"] .nav__link[aria-current="page"],[data-theme="dark"] .nav__link[aria-current="page"]{color:var(--paper)}

.menu-toggle{display:none;align-items:center;gap:.6rem;font-family:var(--font-body);font-weight:600;font-size:clamp(.82rem,1vw,.95rem);letter-spacing:.06em;text-transform:uppercase}
.menu-toggle__bars{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:30px;height:16px}
.menu-toggle__bars span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;transition:transform .45s var(--ease)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (max-width:860px){
  .nav__link{display:none}
  .menu-toggle{display:inline-flex}
}
/* slightly taller, larger header on phones */
@media (max-width:699px){
  .site-header{height:66px}
  .brand{font-size:1.55rem}
  .menu-toggle{font-size:.84rem;gap:.6rem}
}

/* ------------------------------------------------------------------ */
/* Full-screen menu overlay                                            */
/* ------------------------------------------------------------------ */
.menu{position:fixed;inset:0;z-index:7900;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-out);pointer-events:none}
.menu.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu__list{display:flex;flex-direction:column;gap:.1rem;margin-bottom:var(--sp-5)}
.menu__list li{overflow:hidden}
.menu__link{font-family:var(--font-display);font-weight:500;font-size:clamp(2.6rem,11vw,7rem);line-height:1.04;letter-spacing:-.03em;
  display:inline-flex;align-items:baseline;gap:.4em;width:max-content;padding-bottom:.06em;opacity:.6;
  transform:translateY(115%);transition:transform .7s var(--ease-out),opacity .45s var(--ease),color .4s}
.menu.is-open .menu__link{transform:translateY(0)}
.menu.is-open .menu__list li:nth-child(1) .menu__link{transition-delay:.16s,0s,0s}
.menu.is-open .menu__list li:nth-child(2) .menu__link{transition-delay:.23s,0s,0s}
.menu.is-open .menu__list li:nth-child(3) .menu__link{transition-delay:.30s,0s,0s}
.menu.is-open .menu__list li:nth-child(4) .menu__link{transition-delay:.37s,0s,0s}
.menu__link .idx{font-size:.18em;font-family:var(--font-body);color:var(--accent);letter-spacing:0}
@media (hover:hover){.menu__link:hover{opacity:1;color:var(--accent)}}
@media (prefers-reduced-motion:reduce){.menu__link{transform:none}}
.menu__meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);color:rgba(243,240,232,.6);font-size:var(--fs-small);
  opacity:0;transform:translateY(1rem);transition:opacity .5s var(--ease),transform .6s var(--ease-out)}
.menu.is-open .menu__meta{opacity:1;transform:none;transition-delay:.45s}
.menu__meta a{color:var(--paper)}

/* ------------------------------------------------------------------ */
/* Buttons & links                                                     */
/* ------------------------------------------------------------------ */
.arrow-link{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);
  letter-spacing:.04em;text-transform:uppercase;line-height:1}
.arrow-link svg{width:1.05em;height:1.05em;transition:transform .4s var(--ease-out)}
@media (hover:hover){.arrow-link:hover svg{transform:translateX(.35em)}}
.btn{display:inline-flex;align-items:center;gap:.7em;padding:1.05em 1.8em;border:1px solid currentColor;border-radius:999px;
  font-family:var(--font-body);font-weight:600;font-size:clamp(.85rem,1vw,.95rem);text-transform:uppercase;letter-spacing:.05em;
  position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);transform:translateY(101%);transition:transform .5s var(--ease-out)}
@media (hover:hover){.btn:hover{color:var(--bg)}.btn:hover::before{transform:translateY(0)}}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;
  padding-block:calc(var(--header-h) + 2rem) clamp(2rem,5vw,4rem)}
.hero__title{font-family:var(--font-display);font-weight:500;font-size:var(--fs-mega);line-height:.82;letter-spacing:-.045em;
  text-transform:uppercase;position:relative;z-index:2}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line > span{display:block}
.hero__sub{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--sp-3);margin-top:var(--sp-3);
  position:relative;z-index:2}
.hero__tagline{max-width:34ch;font-size:var(--fs-lede);line-height:1.2}
.hero__media{position:absolute;top:0;right:var(--gutter);width:min(40vw,520px);aspect-ratio:4/5;overflow:hidden;z-index:1;
  filter:grayscale(1) contrast(1.04);clip-path:inset(0 0 0 0)}
.hero__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.hero__media{position:relative;right:auto;width:100%;aspect-ratio:16/10;margin-bottom:var(--sp-3)}}
.hero__scroll{position:absolute;bottom:clamp(1.4rem,3vw,2.4rem);left:50%;transform:translateX(-50%);
  font-size:var(--fs-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:.6rem;z-index:2}
.hero__scroll::after{content:"";width:1px;height:32px;background:currentColor;animation:scrollPulse 2.4s var(--ease) infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ------------------------------------------------------------------ */
/* Marquee                                                             */
/* ------------------------------------------------------------------ */
.marquee{overflow:hidden;border-block:1px solid var(--hairline);padding-block:clamp(1rem,2vw,1.8rem)}
.marquee__track{display:flex;width:max-content;gap:clamp(2rem,5vw,5rem);will-change:transform}
.marquee__item{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,7vw,6rem);line-height:1;letter-spacing:-.03em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:clamp(2rem,5vw,5rem);white-space:nowrap}
.marquee__item::after{content:"✶";color:var(--accent);font-size:.5em}
[data-theme="accent"] .marquee__item::after{color:var(--paper)}

/* ------------------------------------------------------------------ */
/* Section heads                                                       */
/* ------------------------------------------------------------------ */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--sp-3);
  margin-bottom:var(--sp-4)}
.section-head__title{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h1);line-height:.95;letter-spacing:-.03em}
.section-head__count{font-family:var(--font-display);font-size:var(--fs-small);color:var(--muted)}

/* ------------------------------------------------------------------ */
/* Work tiles (selected, home)                                         */
/* ------------------------------------------------------------------ */
.work-list{display:flex;flex-direction:column;gap:clamp(4rem,9vw,9rem)}
.work-tile{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:end}
.work-tile:nth-child(even) .work-tile__media{grid-column:6/13;order:2}
.work-tile:nth-child(even) .work-tile__meta{grid-column:1/5;order:1}
.work-tile:nth-child(odd) .work-tile__media{grid-column:1/8}
.work-tile:nth-child(odd) .work-tile__meta{grid-column:9/13}
/* no fixed aspect-ratio + no object-fit:cover -> covers show WHOLE, never cropped.
   width/height attrs on the <img> reserve the natural ratio (no layout shift). */
.work-tile__media{position:relative;overflow:hidden}
.work-tile__media img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.05);
  transition:filter .7s var(--ease),transform 1.2s var(--ease-out)}
@media (hover:hover){.work-tile:hover .work-tile__media img{filter:grayscale(0);transform:scale(1.03)}}
.work-tile__idx{font-family:var(--font-display);font-size:var(--fs-small);color:var(--accent-ink)}
[data-theme="accent"] .work-tile__idx,[data-theme="dark"] .work-tile__idx{color:var(--paper)}
.work-tile__title{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);line-height:1;letter-spacing:-.02em;margin-block:.4rem .7rem}
.work-tile__cat{color:var(--muted);font-size:var(--fs-small)}
@media (max-width:699px){
  .work-tile,.work-tile:nth-child(even) .work-tile__media,.work-tile:nth-child(odd) .work-tile__media,
  .work-tile:nth-child(even) .work-tile__meta,.work-tile:nth-child(odd) .work-tile__meta{display:block;grid-column:auto;order:0}
  .work-tile__meta{margin-top:var(--sp-2)}
}

/* ------------------------------------------------------------------ */
/* Gallery grid (work page)                                            */
/* ------------------------------------------------------------------ */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--sp-5)}
.filter{padding:.55em 1.2em;border:1px solid var(--hairline);border-radius:999px;font-family:var(--font-body);font-weight:500;
  font-size:clamp(.82rem,.95vw,.92rem);letter-spacing:.02em;color:var(--muted);transition:color .35s,background-color .35s,border-color .35s}
.filter.is-active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
@media (hover:hover){.filter:hover{color:var(--fg);border-color:var(--fg)}.filter.is-active:hover{color:var(--bg)}}

.gallery{columns:3;column-gap:var(--gutter)}
@media (max-width:1024px){.gallery{columns:2}}
@media (max-width:560px){.gallery{columns:1}}
.gallery__item{break-inside:avoid;margin-bottom:var(--gutter);position:relative;overflow:hidden;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.gallery__item.is-filtered{display:none}
.gallery__item img{width:100%;filter:grayscale(1) contrast(1.04);transition:filter .7s var(--ease),transform 1.1s var(--ease-out)}
.gallery__item figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.7rem;font-size:var(--fs-small);color:var(--muted)}
.gallery__item figcaption b{font-family:var(--font-display);font-weight:500;color:var(--fg)}
@media (hover:hover){.gallery__item:hover img{filter:grayscale(0);transform:scale(1.04)}}

/* Touch devices can't hover to reveal colour, so the grayscale-until-hover
   treatment would trap the photos in B&W forever. Show them in full colour. */
@media (hover:none),(pointer:coarse){
  .work-tile__media img,.gallery__item img{filter:none}
}

/* ------------------------------------------------------------------ */
/* Project (gallery) page                                              */
/* ------------------------------------------------------------------ */
.project-head{padding-block:calc(var(--header-h) + var(--section-y)) var(--sp-5)}
.project-head__back{margin-bottom:var(--sp-2);font-size:var(--fs-small)}
.project-head__back a{color:var(--muted)}
@media (hover:hover){.project-head__back a:hover{color:var(--fg)}}
.project-head__meta{margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-small);
  text-transform:uppercase;letter-spacing:.08em}
.project-nav{display:flex;justify-content:space-between;gap:var(--gutter);
  border-top:1px solid var(--hairline);padding-block:var(--sp-4);margin-bottom:var(--section-y)}
.project-nav__link{display:flex;flex-direction:column;gap:.35em}
.project-nav__link--next{text-align:right;align-items:flex-end}
.project-nav__dir{font-size:var(--fs-small);color:var(--muted);letter-spacing:.04em}
.project-nav__name{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);
  letter-spacing:-.02em;transition:color .35s var(--ease)}
@media (hover:hover){.project-nav__link:hover .project-nav__name{color:var(--accent)}}

/* ------------------------------------------------------------------ */
/* About                                                               */
/* ------------------------------------------------------------------ */
.about-lede{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em;max-width:20ch}
.about-body p{font-size:var(--fs-body);line-height:1.6;margin-bottom:1.2em;max-width:60ch;color:var(--muted)}
.about-body p strong{color:var(--fg);font-weight:500}
.about-portrait{overflow:hidden;aspect-ratio:4/5}
.about-portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}

.list-rows{border-top:1px solid var(--hairline)}
.list-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding-block:clamp(1rem,2.2vw,1.8rem);border-bottom:1px solid var(--hairline)}
.list-rows__title{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);letter-spacing:-.02em}
.list-rows__meta{color:var(--muted);font-size:var(--fs-small);max-width:46ch;text-align:right;margin-left:auto}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media (max-width:699px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat__num{font-family:var(--font-display);font-weight:500;font-size:clamp(2.4rem,6vw,4.5rem);line-height:1;letter-spacing:-.03em}
.stat__label{color:var(--muted);font-size:var(--fs-small);margin-top:.4rem}

.client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
@media (max-width:699px){.client-grid{grid-template-columns:repeat(2,1fr)}}
.client-grid li{background:var(--bg);display:grid;place-items:center;padding:clamp(1.4rem,4vw,2.6rem);text-align:center;
  font-family:var(--font-display);font-weight:500;font-size:clamp(1rem,1.6vw,1.3rem);letter-spacing:.02em;color:var(--muted);
  transition:color .35s,background-color .35s}
@media (hover:hover){.client-grid li:hover{color:var(--fg)}}

/* ------------------------------------------------------------------ */
/* Contact                                                             */
/* ------------------------------------------------------------------ */
.contact-mail{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,8vw,7rem);line-height:1;letter-spacing:-.04em;
  display:inline-block;word-break:break-word}
.contact-mail .u-line{display:inline-block;position:relative}
.contact-mail .u-line::after{content:"";position:absolute;left:0;bottom:.08em;width:100%;height:.04em;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
@media (hover:hover){.contact-mail:hover .u-line::after{transform:scaleX(1);transform-origin:left}}
.socials{display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.socials a{font-family:var(--font-display);font-size:var(--fs-h3);letter-spacing:-.01em;position:relative}
@media (hover:hover){.socials a:hover{color:var(--accent)}[data-theme="accent"] .socials a:hover,[data-theme="dark"] .socials a:hover{color:var(--paper)}}

.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:var(--sp-3)}
.field label{font-family:var(--font-body);font-weight:600;font-size:clamp(.85rem,1vw,.98rem);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--hairline);color:var(--fg);
  font-family:var(--font-body);font-size:var(--fs-body);padding:.7em 0;transition:border-color .35s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:7rem}
/* chips — radio/checkbox styled as pills for shoot type & usage */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{padding:.55em 1.15em;border:1px solid var(--hairline);border-radius:999px;
  font-family:var(--font-display);font-size:var(--fs-small);letter-spacing:.01em;color:var(--muted);
  transition:color .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease);pointer-events:none}
.chip input:checked + span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){.chip:hover span{color:var(--fg);border-color:var(--fg)}.chip input:checked:hover + span{color:var(--bg)}}
/* commission brief guide — what a good photo brief includes (c-lisa-good-brief analog) */
.brief-guide{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);counter-reset:bg}
@media (max-width:899px){.brief-guide{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.brief-guide{grid-template-columns:1fr}}
.brief-guide li{border-top:1px solid var(--hairline);padding-top:1rem}
.brief-guide__n{font-family:var(--font-display);font-size:var(--fs-small);color:var(--accent)}
[data-theme="dark"] .brief-guide__n,[data-theme="accent"] .brief-guide__n{color:var(--accent)}
.brief-guide h3{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h4);letter-spacing:-.01em;margin:.5rem 0 .55rem}
.brief-guide p{font-size:var(--fs-small);color:var(--muted);line-height:1.5}
/* contact: reach (email + details) beside a quiet form */
.contact-reach{display:flex;flex-direction:column;gap:var(--sp-4)}
.contact-reach .contact-mail{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.05}
.contact-rows{display:flex;flex-direction:column;gap:var(--sp-3)}
.contact-row{display:flex;flex-direction:column;gap:.3rem}
.contact-row .eyebrow{color:var(--muted)}
.contact-row p{font-size:var(--fs-body);line-height:1.45}
.contact-send .field{margin-bottom:var(--sp-3)}
.field select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--hairline);color:var(--fg);
  font-family:var(--font-body);font-size:var(--fs-body);padding:.7em 1.5em .7em 0;border-radius:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .1em center}
.field select:focus{outline:none;border-color:var(--accent)}
.field select option{color:#111}
.field__hint{display:block;font-size:var(--fs-small);color:var(--muted);margin-top:.6rem}
/* spam honeypot — visually hidden but present in the DOM for bots to fill */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* form submit feedback (success/error/pending) */
.form-status{margin-top:1rem;font-size:var(--fs-small);line-height:1.45;min-height:1.3em}
.form-status.is-pending{color:var(--muted)}
.form-status.is-ok{color:var(--fg)}
.form-status.is-error{color:var(--accent-ink)}
.form-status a{color:inherit;text-decoration:underline}
@media (max-width:699px){.contact-send{margin-top:var(--sp-5)}}

/* about — big manifesto intro (c-about-head analog) + capabilities with image */
.about-head{padding-block:clamp(7rem,15vw,13rem) var(--section-y)}
.about-head__statement{font-family:var(--font-display);font-weight:500;font-size:clamp(2.2rem,6vw,5.2rem);
  line-height:1.04;letter-spacing:-.03em;max-width:20ch;margin-block:var(--sp-3) var(--sp-5)}
.about-head__meta{display:flex;flex-wrap:wrap;gap:.4rem var(--sp-5);font-size:var(--fs-small);color:var(--muted);
  border-top:1px solid var(--hairline);padding-top:var(--sp-3)}
.capabilities-visual{overflow:hidden;aspect-ratio:3/4}
.capabilities-visual img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.cap-list{border-top:1px solid var(--hairline);margin-top:var(--sp-2)}
.cap-list li{border-bottom:1px solid var(--hairline);padding-block:clamp(.9rem,1.8vw,1.3rem)}
.cap-list__title{display:block;font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);letter-spacing:-.02em}
.cap-list__meta{display:block;margin-top:.35rem;color:var(--muted);font-size:var(--fs-small);max-width:44ch}
@media (max-width:699px){.capabilities-visual{margin-top:var(--sp-4);aspect-ratio:4/3}}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.site-footer{background:var(--ink);color:var(--paper);padding-block:var(--sp-7) var(--sp-3)}
.site-footer a{color:var(--paper)}
.footer-nav{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);margin-bottom:var(--sp-6)}
.footer-col{flex:0 0 clamp(170px,20vw,260px);display:flex;flex-direction:column}
.footer-col__h{font-family:var(--font-body);font-weight:600;font-size:clamp(1.45rem,2.1vw,2rem);color:var(--paper);
  border-bottom:1px solid rgba(243,240,232,.32);padding-bottom:.4em;margin-bottom:.6em}
.footer-col ul{display:flex;flex-direction:column;gap:.2rem;font-size:clamp(1.45rem,2.1vw,2rem);font-weight:500}
.footer-col a{width:max-content}
/* big "coords" — address / phone / email at ~5vw, the dominant footer element */
.footer-coords{font-style:normal;display:flex;flex-direction:column;gap:.04em;
  font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,5vw,4.4rem);line-height:1.06;letter-spacing:-.03em}
.footer-coords a{width:max-content;max-width:100%;overflow-wrap:anywhere}
@media (hover:hover){
  .footer-col a:hover,.footer-coords a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
}
/* coords + copyright share a baseline: copyright sits at bottom-right, level
   with the last coords line (like locomotive's ©) */
.footer-foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem 2rem}
.footer-copy{flex:0 0 auto;font-family:var(--font-display);font-size:clamp(1.9rem,5vw,4.4rem);line-height:1.06;
  color:rgba(243,240,232,.72);text-align:right}
@media (max-width:699px){.footer-copy{flex-basis:100%;margin-top:var(--sp-3);text-align:left;font-size:clamp(1.25rem,6vw,2.1rem)}}
@media (max-width:699px){
  :root{--section-y:clamp(3.4rem,10vw,6rem)}
  .footer-coords{font-size:clamp(1.25rem,6vw,2.1rem)}
  .footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.5rem;margin-bottom:var(--sp-4)}
  .footer-col{flex-basis:auto;min-width:0}
}

/* ------------------------------------------------------------------ */
/* Hero — fullscreen video + text                                      */
/* ------------------------------------------------------------------ */
/* 100lvh = LARGE viewport = the full screen (top notch → bottom toolbar). The video
   fills it, so it bleeds UNDER the iOS status bar and the Safari bottom bar — no gaps.
   100vh is the fallback for browsers without lvh. */
/* NO isolation here. The negative-blend text (.hero-v__content) must blend against
   the FINAL composited page — exactly like the custom cursor (.cursor, root-level,
   z-index 9600). isolation:isolate would trap the blend inside this group, where the
   GPU-composited video (its transform forces a separate layer) is unreachable and the
   difference falls back to flat white. Instead: no isolating ancestor, and media/scrim
   sit at non-negative z-index so overflow:hidden keeps them clipped to the hero box. */
.hero-v{position:relative;height:100vh;height:100lvh;min-height:30rem;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.hero-v__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:grayscale(1) contrast(1.02);transform:scale(1.08) translateY(calc(-6vh * var(--p,0)));will-change:transform}
@media (pointer:coarse){
  .hero-v__media{transform:scale(1.18);will-change:auto}
}
/* Mobile-only mirror of the video (see index.html hero script). Plain compositable
   layer — NO css filter/transform here, or it risks being promoted off the blend
   path again; grayscale/contrast/zoom are baked into the canvas draw. Sits above the
   video (DOM order) and fully covers it, so the negative text blends over THIS. */
.hero-v__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
/* melt ONLY the top edge into the dark page background (--ink) so the strip behind
   the iOS status bar blends seamlessly — long, gentle fade (no hard seam). No bottom
   darkening (looks good as-is there). */
.hero-v__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    #0c0c0d 0%,
    rgba(12,12,13,.8) 4%,
    rgba(12,12,13,.5) 9%,
    rgba(12,12,13,.28) 15%,
    rgba(12,12,13,.13) 22%,
    rgba(12,12,13,.04) 30%,
    rgba(12,12,13,0) 40%)}
.hero-v__scrim::after{content:"";position:absolute;inset:0;background:#0c0c0d;opacity:calc(var(--p,0) * .55)}
/* heading in negative; lift it above the Safari bottom bar by exactly the bar height
   (100lvh − 100dvh = the chrome the bottom toolbar currently occupies) */
.hero-v__content{position:relative;z-index:2;width:100%;text-align:center;
  padding-block:0;
  padding-bottom:calc((100lvh - 100dvh) + env(safe-area-inset-bottom,0px) + clamp(1.4rem,2.6vw,2.4rem));
  color:#fff;mix-blend-mode:difference}
.hero-v__tagline{font-family:"Sansumi",sans-serif;font-weight:200;margin:0 auto;
  font-size:clamp(1rem,2.2vw,1.8rem);line-height:1.2;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;animation:heroTagIn .9s .45s var(--ease-out) forwards}
/* Sansumi brand — centered overlay over the hero video */
.hero-v__brand{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  pointer-events:none;mix-blend-mode:difference;color:#fff}
.hero-v__brand span{font-family:"Sansumi",sans-serif;font-weight:200;
  font-size:clamp(2.6rem,9.5vw,10rem);line-height:1;letter-spacing:.04em;white-space:nowrap}
@keyframes heroTagIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-v__tagline{opacity:1;animation:none}}

/* ------------------------------------------------------------------ */
/* Featured work — centered single-line titles, thin separators, a small image
   expands inline (width 0 -> 1.5em) between the two words on hover, non-hovered
   rows fade to .3, and the name scrambles on enter (featured.js). */
.featured{padding-block:var(--section-y) var(--sp-4)}
.featured__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.6em}
.featured__head h2{font-family:var(--font-body);font-weight:600;font-size:var(--fs-h3);letter-spacing:0}
.featured__head span{font-size:var(--fs-small);color:var(--muted)}
.feat-list{display:flex;flex-direction:column;border-bottom:1px solid var(--hairline)}
/* the first project's top border is the single line under the heading (no doubling) */
.feat{--enter:.45s;--leave:.2s;--e:cubic-bezier(.23,1,.32,1);
  position:relative;display:flex;justify-content:center;align-items:center;
  border-top:1px solid var(--hairline);padding-block:clamp(.45rem,1.1vw,.85rem);
  color:var(--fg);transition:opacity .4s var(--e)}
.feat__title{display:flex;justify-content:center;align-items:center;line-height:1;text-align:center;
  font-family:var(--font-display);font-weight:500;font-size:clamp(2.4rem,8vw,7.5rem);
  letter-spacing:-.04em;text-transform:uppercase}
.feat__word{display:inline-block;transform:translateY(.06em)}
.feat__word:first-child{padding-right:.1em}
.feat__word:last-child{padding-left:.1em}
.feat__preview{position:relative;flex:0 0 auto;display:inline-block;overflow:hidden;width:0;vertical-align:bottom;
  transition:width var(--leave) var(--e);pointer-events:none}
.feat__preview::before{content:"";display:block;padding-bottom:1em}
.feat__preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.feat__more{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (hover:hover){
  .feat:hover .feat__preview,.feat:focus-within .feat__preview{width:1.5em;transition-duration:var(--enter)}
  .feat-list:hover .feat:not(:hover){opacity:.3}
}
@media (hover:none),(pointer:coarse){.feat__preview{display:none}}

/* ------------------------------------------------------------------ */
/* Work index — locomotive c-work-list: Title | Category | Year rows,    */
/* hairline separators, cursor-following preview, scramble + dim on hover */
/* ------------------------------------------------------------------ */
.work-index{border-bottom:1px solid var(--hairline);margin-top:var(--sp-2)}
.wi{transition:opacity .4s var(--ease)}
.wi.is-filtered{display:none}
.wi__row{display:grid;grid-template-columns:2.6rem 1fr auto auto;gap:clamp(.6rem,2vw,2rem);align-items:baseline;
  border-top:1px solid var(--hairline);padding-block:clamp(.85rem,2.1vw,1.6rem);color:var(--fg)}
.wi__idx{font-family:var(--font-display);font-size:var(--fs-small);color:var(--muted)}
.wi__title{font-family:var(--font-display);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.8rem);letter-spacing:-.02em}
.wi__cat{font-size:var(--fs-small);color:var(--muted);align-self:center}
.wi__year{font-size:var(--fs-small);color:var(--muted);align-self:center;text-align:right;font-variant-numeric:tabular-nums}
@media (hover:hover){.work-index:hover .wi:not(:hover){opacity:.3}}
.wi__thumb{display:none}
@media (max-width:699px){
  /* full-screen video hero on mobile — lvh so it bleeds under the Safari bars */
  .hero-v{height:100vh;height:100lvh}
  /* mobile: like locomotive — title + category left, thumbnail right (hover preview off on touch) */
  .wi__row{grid-template-columns:1fr clamp(96px,29vw,140px);grid-template-rows:auto auto;align-items:center;
    column-gap:1.1rem;row-gap:.15rem;padding-block:1.1rem}
  .wi__idx{display:none}
  .wi__title{grid-column:1;grid-row:1}
  .wi__cat{grid-column:1;grid-row:2;display:block;align-self:start}
  .wi__year{display:none}
  .wi__thumb{display:block;grid-column:2;grid-row:1/3;aspect-ratio:4/5;overflow:hidden;align-self:center}
  .wi__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
}
.wi-preview{position:fixed;top:0;left:0;width:min(22vw,300px);aspect-ratio:4/5;overflow:hidden;pointer-events:none;z-index:60;
  opacity:0;transform:translate(calc(var(--px,-50vw) - 50%),calc(var(--py,-50vh) - 50%)) scale(.88);
  transition:opacity .4s var(--ease),transform .6s var(--ease-out);will-change:transform}
.wi-preview.is-on{opacity:1;transform:translate(calc(var(--px) - 50%),calc(var(--py) - 50%)) scale(1)}
.wi-preview img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
@media (hover:none),(pointer:coarse){.wi-preview{display:none}}

/* ------------------------------------------------------------------ */
/* SEO / about-studio text block                                       */
/* ------------------------------------------------------------------ */
.seo{padding-block:var(--sp-4) var(--section-y)}
.seo__head{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);letter-spacing:-.02em;
  line-height:1.06;max-width:30ch}
.seo__body{max-width:64ch}
.seo__body p{font-size:var(--fs-body);line-height:1.65;color:var(--muted);margin-bottom:1.1em}
.seo__body p strong{color:var(--fg);font-weight:500}

/* ------------------------------------------------------------------ */
/* Reveal / split animations (gated on JS + motion preference)         */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  /* block reveals: hidden until .is-revealed is added by the observer */
  html.js [data-reveal]{opacity:0;transform:translateY(28px);
    transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
  html.js [data-reveal="fade"]{transform:none}
  html.js [data-reveal].is-revealed{opacity:1;transform:none}

  /* split text: each line/word masked, rises into place with a staggered delay */
  html.js .split-line{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
  html.js .split-line > span{display:block;transform:translateY(122%);
    transition:transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * .09s)}
  html.js .split-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.18em;margin-bottom:-.18em}
  html.js .split-word > span{display:inline-block;transform:translateY(122%);
    transition:transform .9s var(--ease-out);transition-delay:calc(var(--i,0) * .04s)}
  html.js [data-split].is-revealed .split-line > span,
  html.js [data-split].is-revealed .split-word > span{transform:translateY(0)}
}

/* ------------------------------------------------------------------ */
/* Utilities                                                           */
/* ------------------------------------------------------------------ */
.u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.u-skip{position:fixed;top:.5rem;left:.5rem;z-index:9999;background:var(--ink);color:var(--paper);padding:.6em 1em;border-radius:4px;transform:translateY(-150%);transition:transform .3s}
.u-skip:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.col-span-6{grid-column:span 6}.col-span-5{grid-column:span 5}.col-span-7{grid-column:span 7}
.col-span-4{grid-column:span 4}.col-span-8{grid-column:span 8}.col-span-12{grid-column:1/-1}
@media (max-width:699px){.col-span-6,.col-span-5,.col-span-7,.col-span-4,.col-span-8{grid-column:1/-1}}

/* responsive grid placement — mobile-first: full width by default, positioned ≥700px.
   No inline grid-column needed, so layouts never break under the breakpoints. */
.lay-wide-l,.lay-narrow-r,.lay-half-l,.lay-half-r,.lay-label,.lay-body,.lay-portrait,.lay-lede-r{grid-column:1/-1}
@media (min-width:700px){
  .lay-wide-l{grid-column:1/8}
  .lay-narrow-r{grid-column:8/13}
  .lay-half-l{grid-column:1/7}
  .lay-half-r{grid-column:7/13}
  .lay-label{grid-column:1/4}
  .lay-body{grid-column:6/13}
  .lay-portrait{grid-column:1/6}
  .lay-lede-r{grid-column:9/13}
}
@media (min-width:700px) and (max-width:1024px){
  .lay-wide-l,.lay-body,.lay-narrow-r,.lay-lede-r,.lay-label{grid-column:1/-1}
  .lay-half-l{grid-column:1/5}
  .lay-half-r{grid-column:5/9}
  .lay-portrait{grid-column:1/6}
}
.u-center{text-align:center}
.measure-wide{max-width:46ch}
.footer-eyebrow{color:rgba(243,240,232,.5);margin-bottom:1.5rem}
.band{overflow:hidden;aspect-ratio:16/9}
.band img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.mt-section{margin-top:var(--section-y)}
.pb-section{padding-bottom:var(--section-y)}
.stack-3{display:flex;flex-direction:column;gap:var(--sp-3)}
.stack-4{display:flex;flex-direction:column;gap:var(--sp-4)}

/* ------------------------------------------------------------------ */
/* CDOvuer display — extra letter-spacing (serif reads better with air) */
/* ------------------------------------------------------------------ */
.mega,.display,.hero-v__title,.hero-v__tagline,.feat__title,.section-head__title,
.about-head__statement,.footer-coords,.footer-copy,.wi__title,.menu__link,.contact-mail,
.cap-list__title,.list-rows__title,.stat__num,.marquee__item,
.feat__more,.press__title{letter-spacing:.04em}