/* Fluid interface layer. Shared by every page and loaded after each page's own
   <style>, so these rules deliberately win ties. Behaviour lives in fluid.js. */

:root{ --ease:cubic-bezier(.16,1,.3,1); }
html{ scroll-padding-top:calc(var(--header-h, 4.75rem) + .75rem); }

/* ------------------------------------------------------------- landmarks */
.skip-link{
  position:fixed; left:.75rem; top:-4rem; z-index:300;
  padding:.75rem 1.125rem; border-radius:2px;
  background:var(--cream); color:var(--ink);
  font-size:.875rem; font-weight:700;
  transition:top .3s var(--ease);
}
.skip-link:focus{ top:.75rem; }
main{ display:block; }
main:focus{ outline:none; }

/* ------------------------------------------------------ header as material
   No hard divider: where content slides under the bar, a soft fade appears
   instead, and only once something is actually passing beneath it. */
header{ border-bottom-color:transparent; background:rgba(11,11,16,.88); }
header::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:1.75rem;
  background:linear-gradient(180deg, rgba(11,11,16,.5), rgba(11,11,16,0));
  opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease);
}
header.scrolled::after{ opacity:1; }

/* ---------------------------------------------- where am I (nav indicator) */
.nav-links a{ position:relative; padding:.625rem 0; }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:.25rem; height:1.5px;
  background:var(--grad, var(--violet));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--ease);
}
.nav-links a[aria-current="true"]{ color:var(--cream); }
.nav-links a[aria-current="true"]::after{ transform:scaleX(1); }

/* Comfortable hit areas on small text links. */
.footer-col a{ padding:.3125rem 0; margin-bottom:.125rem; }
.footer-legal-links a{ padding:.5rem 0; }

/* --------------------------------------------------------------- menu sheet */
.menu-layer{ display:none; }
@media (max-width:899.98px){
  .menu-layer{
    display:block; position:fixed; left:0; right:0; bottom:0;
    top:var(--header-h, 4.75rem);
    overflow:hidden; z-index:90; contain:layout paint;
    visibility:hidden; pointer-events:none;
  }
  .menu-layer.on{ visibility:visible; pointer-events:auto; }
}
.menu-scrim{
  position:absolute; inset:0; opacity:0; touch-action:none;
  background:rgba(5,5,10,.66);
}
.menu-sheet{
  position:absolute; left:0; right:0; top:0; max-height:100%;
  transform:translate3d(0,-100%,0);
  background:rgba(17,17,25,.74);
  -webkit-backdrop-filter:blur(calc(var(--p, 0) * 24px)) saturate(180%);
  backdrop-filter:blur(calc(var(--p, 0) * 24px)) saturate(180%);
  /* A large surface reads as thick: deeper shadow, light catching its edge. */
  box-shadow:0 2.5rem 4.5rem -1.5rem rgba(0,0,0,.7), inset 0 -1px 0 rgba(245,243,239,.12);
  touch-action:none;
}
.menu-layer.on .menu-sheet{ will-change:transform; }
/* Covers the few px a bouncy release overshoots past the header edge. */
.menu-sheet::before{
  content:''; position:absolute; left:0; right:0; bottom:100%; height:7.5rem;
  background:rgba(17,17,25,.74);
}
.menu-sheet.scrolls{ touch-action:pan-y; }
.menu-sheet.dragging{ cursor:grabbing; user-select:none; -webkit-user-select:none; }
.menu-body{
  max-height:calc(100vh - var(--header-h, 4.75rem) - 2.125rem);
  max-height:calc(100dvh - var(--header-h, 4.75rem) - 2.125rem);
  overflow-y:auto; overscroll-behavior:contain;
}
.menu-list{ padding:.5rem 1.25rem .25rem; display:flex; flex-direction:column; }
.menu-list a:not(.btn){
  display:flex; align-items:center; min-height:3.375rem;
  font-family:'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:1.25rem; font-weight:700; letter-spacing:-.01em;
  color:var(--cream); border-bottom:1px solid var(--hairline-dark);
  -webkit-tap-highlight-color:transparent;
  transition:background .25s var(--ease);
}
.menu-list a:not(.btn):active{ background:rgba(245,243,239,.05); }
.menu-list .btn{ margin:1.125rem 0 .375rem; width:100%; }
.menu-grabber{ display:flex; justify-content:center; padding:.75rem 0 .875rem; touch-action:none; cursor:grab; }
.menu-grabber::before{ content:''; width:2.5rem; height:3px; border-radius:2px; background:rgba(245,243,239,.28); }

/* Reduced motion: no travel. The layer cross-fades instead. */
@media (prefers-reduced-motion: reduce){
  .menu-layer{ opacity:0; transition:opacity .2s ease, visibility 0s linear .2s; }
  .menu-layer.on{ opacity:1; transition:opacity .2s ease, visibility 0s; }
}
@media (prefers-reduced-transparency: reduce){
  .menu-sheet, .menu-sheet::before{ background:#11111a; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-contrast: more){
  .menu-sheet, .menu-sheet::before{ background:#11111a; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .menu-list a:not(.btn){ border-bottom-color:rgba(245,243,239,.4); }
}

/* ---------------------------------------------------------------- accordion
   The spring in fluid.js drives the height; CSS only sets the resting states
   (so it works, fully open, with no script) and the text's own reveal. */
.faq-a{ height:0; max-height:none; overflow:hidden; transition:none; }
html:not(.js) .faq-a{ height:auto; }
html.js .faq-item.open .faq-a{ height:auto; }
.faq-a p{
  opacity:0; transform:translate3d(0,-.375rem,0);
  transition:opacity .35s var(--ease), transform .5s var(--ease);
}
.faq-item.open .faq-a p, html:not(.js) .faq-a p{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .faq-a p{ transform:none; transition:opacity .2s ease; }
}

/* ---------------------------------------------------------------- carousel
   Layout only applies once the script has taken over (.is-carousel), so
   without it the projects simply stack. */
.work-dots{ display:none; }
@media (max-width:800px){
  .work-viewport.is-carousel{
    --gutter:2.5rem;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    overflow:hidden; touch-action:pan-y; cursor:grab;
  }
  .work-viewport.is-carousel .work-grid{
    display:flex; gap:1rem; position:relative; will-change:transform;
  }
  .work-viewport.is-carousel .work-grid > div{ flex:0 0 84%; min-width:0; }
  /* The card is narrower than the grid cell it replaced, so the title and its
     category stack instead of fighting for one row. */
  .work-viewport.is-carousel .work-meta{ flex-direction:column; align-items:flex-start; gap:.375rem; }
  .work-viewport.is-carousel img{ -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
  .work-viewport.dragging{ cursor:grabbing; }
  .work-viewport:focus-visible{ outline-offset:-3px; }
  .work-dots{ display:flex; justify-content:center; gap:.125rem; margin-top:1.25rem; }
  .work-dots button{
    width:2rem; height:2.75rem; background:none; border:0; padding:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    -webkit-tap-highlight-color:transparent;
  }
  .work-dots button::before{
    content:''; display:block; width:.4375rem; height:.4375rem; border-radius:999px;
    background:rgba(11,11,16,.22);
    transition:width .45s var(--ease), background .3s var(--ease);
  }
  .work-dots button[aria-current="true"]::before{ width:1.5rem; background:var(--grad-deep, #6d28d9); }
}
@media (max-width:640px){ .work-viewport.is-carousel{ --gutter:1.25rem; } }
@media (prefers-reduced-motion: reduce){ .work-dots button::before{ transition:none; } }

/* The hero kicker lives inside the <h1> so the page's main heading carries the
   target phrase as visible text. This restores the exact look it had as a
   standalone line: Inter, small caps-style label, gradient, own line. */
.hero h1 .h1-kicker{
  display:block; width:fit-content;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:.75rem; font-weight:600; line-height:1.5; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:1.5rem;
  padding-top:.25rem;   /* matches the 4px the old standalone line sat below its line box */
}

/* Contextual links on cream sections (case studies, niche pages). */
.work-link{
  display:inline-block; margin-top:.875rem; padding:.25rem 0;
  font-size:.875rem; font-weight:600; color:var(--violet-dark);
  border-bottom:1px solid rgba(109,40,217,.35);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.work-link:hover{ color:var(--ink); border-color:var(--ink); }

/* Footer "Follow" block sits under Contact, set apart from the links above it. */
.footer-col .label-small.follow{ margin-top:1.5rem; }

/* The nav link for the page you are ON (aria-current="page") reads the same as
   a scroll-spy "current section", so both get the underline. */
.nav-links a[aria-current="page"]{ color:var(--cream); }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }