/* ==========================================================================
   Baur Works
   Built against DESIGN.md. Palette and typefaces come from the studio's deck;
   structure and behaviour are built for the web.
   Dial: ENERGY 3 / RHYTHM 3 / MOTION 3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens. The bare :root block is the studio's default look (cocoa ground),
   because the deck itself is set on cocoa. The light "paper" set is a full
   mirror, declared twice so a system preference and the toggle both win.
   -------------------------------------------------------------------------- */
:root {
  --ground:      #211915;
  --ground-rgb:  33, 25, 21;
  --ground-2:    #2b211b;
  --ground-3:    #181210;
  --ink:         #f4f4f4;
  --ink-2:       #c8bbb2;
  --rule:        #4a382e;
  --rule-strong: #6d5445;
  --brown:       #683c21;

  --accent:      #ee7302;   /* fill only */
  --accent-ink:  #211915;   /* text that sits on the fill */
  --accent-text: #ee7302;   /* accent used as text, AA on cocoa */

  --shade:       rgba(0, 0, 0, .78);

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --bar-h: 3.75rem;

  --step-label:  .75rem;
  --step-body:   1.0625rem;
  --step-lead:   clamp(1.15rem, 1.6vw, 1.55rem);
  --step-h3:     clamp(1.6rem, 3.2vw, 2.6rem);
  --step-h2:     clamp(2.1rem, 5.6vw, 4.25rem);
  --step-index:  clamp(1.75rem, 6vw, 4.5rem);
  /* Capped at 14rem: the wordmark shares the hero with the wall, so it has
     roughly half the width to live in and must not run under it. */
  --step-mark:   clamp(3.25rem, 13vw, 14rem);

  --face-display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --face-body:    Arimo, Arial, Helvetica, "Helvetica Neue", sans-serif;

  --t: 140ms ease;
  --t-slow: 320ms cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:      #f4f4f4;
    --ground-rgb:  244, 244, 244;
    --ground-2:    #ffffff;
    --ground-3:    #e7e1dc;
    --ink:         #211915;
    --ink-2:       #5d4c42;
    --rule:        #d3cac4;
    --rule-strong: #b0a299;
    --accent-text: #9c4a00;
    --shade:       rgba(33, 25, 21, .76);
  }
}

:root[data-theme="light"] {
  --ground:      #f4f4f4;
  --ground-rgb:  244, 244, 244;
  --ground-2:    #ffffff;
  --ground-3:    #e7e1dc;
  --ink:         #211915;
  --ink-2:       #5d4c42;
  --rule:        #d3cac4;
  --rule-strong: #b0a299;
  --accent-text: #9c4a00;
  --shade:       rgba(33, 25, 21, .76);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--step-body);
  line-height: 1.62;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Opening aperture. "Baur" is Indonesian for blend, so the site opens by
   closing an iris on the wordmark and leaving the page behind it. It plays on
   every load, never under reduced motion, and any key or click ends it.
   -------------------------------------------------------------------------- */
.portal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  background: var(--ground);
  clip-path: circle(150% at 50% 50%);
  cursor: pointer;
}

/* The sequence: letters rise on the width axis, a rule draws under them, the
   colophon arrives, then the iris closes on the whole thing. Every stage uses
   fill mode `both`, so nothing needs a static opacity of 0 to hide behind. */
.portal.is-going { animation: portalOut 950ms cubic-bezier(.76, 0, .24, 1) 1950ms forwards; }

@keyframes portalOut {
  from { clip-path: circle(150% at 50% 50%); }
  to   { clip-path: circle(0% at 50% 50%); }
}

.portal__type {
  margin: 0;
  text-align: center;
  font-family: var(--face-display);
  font-size: clamp(2.5rem, 11vw, 9rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.055em;
}
.portal__a { display: block; color: var(--accent-text); }
.portal__b { display: block; color: var(--ink); }

.portal__ch {
  display: inline-block;
  font-variation-settings: "opsz" 96, "wdth" 100, "wght" 800;
}
.portal.is-going .portal__ch {
  animation: chRise 780ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 62ms);
}

@keyframes chRise {
  from {
    opacity: 0;
    transform: translateY(.62em);
    font-variation-settings: "opsz" 96, "wdth" 75, "wght" 800;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    font-variation-settings: "opsz" 96, "wdth" 100, "wght" 800;
  }
}

/* A pseudo-element, not a spare div: the rule is decoration and has no
   business in the document. */
.portal__type::after {
  content: "";
  display: block;
  width: min(20rem, 62%);
  height: 2px;
  margin: clamp(1.1rem, 2.4vw, 2rem) auto 0;
  background: var(--accent);
  transform: scaleX(1);
}
.portal.is-going .portal__type::after {
  animation: ruleDraw 760ms cubic-bezier(.65, 0, .35, 1) 940ms both;
}

@keyframes ruleDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.portal__line {
  margin: 0;
  font-family: var(--face-display);
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.portal.is-going .portal__line { animation: lineIn 760ms ease 1220ms both; }

@keyframes lineIn {
  from { opacity: 0; letter-spacing: .34em; }
  to   { opacity: 1; letter-spacing: .16em; }
}

.portal.is-going .portal__type { animation: portalExit 950ms cubic-bezier(.33, 1, .68, 1) 1950ms forwards; }

@keyframes portalExit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.16); }
}

body.portal-on { overflow: hidden; }


.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .85rem 1.25rem;
  font-family: var(--face-display);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Shared type roles
   -------------------------------------------------------------------------- */
.eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--face-display);
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
/* No opacity here: fading cocoa over the orange fill drops small text under AA. */
.eyebrow--on-fill { color: var(--accent-ink); }

.h2 {
  margin: 0;
  font-family: var(--face-display);
  font-size: var(--step-h2);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h2--wide { margin-bottom: 1.5rem; }
.h2--contact { color: var(--accent-ink); }

.lead {
  margin: 0;
  max-width: 46ch;
  font-size: var(--step-lead);
  line-height: 1.45;
}

.section-note,
.aside-note,
.pan__note {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-2);
}
.section-note { margin-bottom: 3rem; }
.aside-note { margin-top: 1.5rem; font-size: .95rem; }
.pan__note { margin-bottom: 2rem; font-size: .95rem; }

/* --------------------------------------------------------------------------
   Buttons. Radius stays 0 across the whole site.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--face-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.btn--sm { min-height: 40px; padding: .45rem 1rem; font-size: .85rem; }

.btn--fill { background: var(--accent); color: var(--accent-ink); }
.btn--fill:hover { background: var(--ink); color: var(--ground); }

.btn--line { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--line:hover { border-color: var(--ink); background: var(--ground-2); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ground-3);
  border-bottom: 1px solid var(--rule);
}

.masthead__in {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: min-height var(--t-slow);
}
.masthead.is-compact .masthead__in { min-height: 3rem; }

.masthead__mark {
  font-family: var(--face-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.045em;
  text-decoration: none;
  margin-right: auto;
  padding: .4rem 0;
}
.masthead__mark-a { color: var(--accent-text); }
.masthead__mark-b { color: var(--ink); margin-left: .28em; }

/* Scroll position rail: orientation on a long page. */
.masthead__rail { height: 2px; background: var(--rule); }
.masthead__railfill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
}

.nav { display: flex; gap: clamp(.9rem, 2vw, 1.9rem); }
.nav a {
  font-family: var(--face-display);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--ink-2);
  padding: .75rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

.theme-btn,
.menu-btn {
  min-height: 44px;
  padding: .5rem .85rem;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--face-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.theme-btn:hover,
.menu-btn:hover { color: var(--ink); border-color: var(--rule-strong); }

.menu-btn { display: none; align-items: center; gap: .55rem; }
.menu-btn__bars { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-btn__bars i { display: block; width: 16px; height: 2px; background: currentColor; }

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; order: 3; }
  .theme-btn { order: 2; }
  .nav {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding-bottom: .75rem;
  }
  .nav:not(.is-open) { display: none; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
  .masthead__in { flex-wrap: wrap; padding-block: .55rem; }
}

/* --------------------------------------------------------------------------
   Hero. Poster type beside a live wall of the studio's real output, because a
   social agency's product is a feed and the hero shows the feed rather than
   describing it.

   The wall sits *next to* the type, never behind it. Dimming a wall enough to
   keep text above AA would have left it at roughly six percent contrast,
   which is a texture, not a wall. Putting it in its own column keeps it at
   full strength and makes the type's contrast a non-question.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem);
  border-bottom: 1px solid var(--rule);
}

.hero__bed {
  position: absolute;
  top: -12%;
  bottom: -12%;
  right: 0;
  width: min(46%, 34rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.4rem, 1vw, .8rem);
  pointer-events: none;
  /* The leading edge fades into the ground with a mask on the wall itself.
     An extra empty div painting a gradient would have been one more element
     that exists only to draw something, and the mask needs no theme colour. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
  mask-image: linear-gradient(to right, transparent, #000 22%);
}

.hero__col {
  display: flex;
  flex-direction: column;
  gap: clamp(.4rem, 1vw, .8rem);
  will-change: transform;
  animation: bedDrift var(--dur, 50s) linear infinite;
}
.hero__col--up { animation-direction: reverse; }
.hero__col img { width: 100%; }

@keyframes bedDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}

.hero__bed.is-paused .hero__col { animation-play-state: paused; }


/* .hero__in is also .wrap, so its max-width and centring must stay. The type
   column is constrained on the children instead, keeping it clear of the wall. */
.hero__in { position: relative; }
.hero__in > * { max-width: 52%; }

@media (max-width: 1100px) {
  .hero__bed { width: min(42%, 24rem); grid-template-columns: repeat(2, 1fr); }
  .hero__col--c { display: none; }
  .hero__in > * { max-width: 55%; }
}

@media (max-width: 640px) {
  /* The wall needs real width to read as a wall. Below this the poster type
     carries the hero on its own, and the ticker below still moves. */
  .hero__bed, .hero__pause { display: none; }
  .hero__in > * { max-width: none; }
}

.hero__pause {
  position: absolute;
  right: var(--gutter);
  bottom: 1rem;
  z-index: 2;
  min-height: 40px;
  padding: .4rem .8rem;
  background: var(--ground);
  color: var(--ink-2);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  font-family: var(--face-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.hero__pause:hover { color: var(--ink); border-color: var(--ink); }

/* Plain text, comma separated. A coloured square between the two halves was
   drawing a shape for no reason, which is exactly the habit this site avoids. */
.colophon {
  margin: 0 0 clamp(1.5rem, 4vw, 3rem);
  font-family: var(--face-display);
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* The width axis is driven by scroll position: the wordmark narrows as the
   hero leaves, which is the one thing only a variable typeface can do and the
   deck's own face happens to carry it. Falls back to a static cut with no
   variable support, and JS leaves it at 100 under reduced motion. */
.wordmark {
  margin: 0;
  font-family: var(--face-display);
  font-size: var(--step-mark);
  font-weight: 800;
  font-variation-settings: "opsz" 96, "wdth" var(--wm-wdth, 100), "wght" 800;
  line-height: .78;
  letter-spacing: -.055em;
}
.wordmark__a { display: block; color: var(--accent-text); }
.wordmark__b { display: block; color: var(--ink); text-indent: .06em; }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 5vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--rule-strong);
}

.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------------------------------------------------------
   Ticker. The seam between the hero and the body, in the same motion family.
   -------------------------------------------------------------------------- */
.ticker {
  overflow: hidden;
  background: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-block: .7rem;
}

.ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: tick 42s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

@keyframes tick {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Grouping is the whole job here: a brand sits tight against its own sector,
   and the space and the divider fall *between* pairs, never inside one. */
.ticker__set {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--face-display);
}
.ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding-inline: 1.5rem;
  border-right: 1px solid rgba(33, 25, 21, .45);
}
.ticker__item b {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--accent-ink);
}
.ticker__item i {
  font-size: .7rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */
.band {
  padding-block: clamp(3.5rem, 8vw, 7.5rem);
  border-bottom: 1px solid var(--rule);
}
.band--alt { background: var(--ground-2); }
.band--contact { background: var(--accent); border-bottom: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 901px) {
  .split__aside { position: sticky; top: calc(var(--bar-h) + 2.5rem); }
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.service {
  position: relative;
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding: clamp(.9rem, 1.8vw, 1.45rem) 0 clamp(.9rem, 1.8vw, 1.45rem) .75rem;
  border-bottom: 1px solid var(--rule);
  transition: padding-left var(--t);
}
.service::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t);
}
.service:hover::before { transform: scaleY(1); }
.service:hover { padding-left: 1.25rem; }

.service__n {
  font-family: var(--face-display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
.service__name {
  font-family: var(--face-display);
  font-size: var(--step-h3);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.035em;
}

/* --------------------------------------------------------------------------
   Client index. Names at display scale; the work comes to the pointer.
   -------------------------------------------------------------------------- */
.idx__hint { margin-bottom: 2rem; }

.idx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.idx li { border-bottom: 1px solid var(--rule); }

.idx__row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  width: 100%;
  min-height: 44px;
  padding: clamp(.7rem, 1.6vw, 1.2rem) .75rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  transition: padding-left var(--t-slow);
}
.idx__row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t);
}
.idx__row:hover::before,
.idx__row:focus-visible::before { transform: scaleY(1); }
.idx__row:hover,
.idx__row:focus-visible { padding-left: 1.5rem; }

.idx__name {
  font-family: var(--face-display);
  font-size: var(--step-index);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.045em;
  color: var(--ink-2);
  transition: color var(--t);
}
.idx__row:hover .idx__name,
.idx__row:focus-visible .idx__name { color: var(--ink); }

.idx__sector {
  font-family: var(--face-display);
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Follow card
   -------------------------------------------------------------------------- */
.follow {
  position: fixed;
  z-index: 45;
  top: 0; left: 0;
  width: 15rem;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-areas: "logo name" "plate plate" "sector sector";
  gap: .5rem .75rem;
  padding: .75rem;
  background: var(--ground-2);
  border: 1px solid var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t);
}
.follow.is-on { opacity: 1; }

.follow__logo { grid-area: logo; width: 2.5rem; height: 2.5rem; object-fit: contain; }
.follow__plate {
  grid-area: plate;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.follow__name {
  grid-area: name;
  align-self: center;
  font-family: var(--face-display);
  font-size: .85rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.follow__sector {
  grid-area: sector;
  font-family: var(--face-display);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Work: mode switcher and panels
   -------------------------------------------------------------------------- */
.modes {
  display: inline-flex;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--rule-strong);
}
.modes__b {
  min-height: 44px;
  padding: .6rem clamp(1rem, 3vw, 2rem);
  background: transparent;
  color: var(--ink-2);
  border: 0;
  border-right: 1px solid var(--rule-strong);
  border-radius: 0;
  font-family: var(--face-display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t), color var(--t);
}
.modes__b:last-child { border-right: 0; }
.modes__b:hover { color: var(--ink); }
.modes__b.is-on { background: var(--accent); color: var(--accent-ink); }

.pan:focus-visible { outline-offset: 6px; }

/* --------------------------------------------------------------------------
   Work filter
   -------------------------------------------------------------------------- */
.filter {
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.filter__label {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--face-display);
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.filter__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.filter__input {
  flex: 1 1 18rem;
  min-height: 44px;
  padding: .6rem .85rem;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  font-family: var(--face-body);
  font-size: 1rem;
}
.filter__input::placeholder { color: var(--ink-2); opacity: 1; }
.filter__count {
  margin: .85rem 0 0;
  font-size: .9rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.empty { max-width: var(--measure); margin: 0; padding: 2rem 0 0; color: var(--ink-2); }
.empty b { color: var(--ink); font-family: var(--face-display); }

/* --------------------------------------------------------------------------
   Case studies
   -------------------------------------------------------------------------- */
.cases { display: flex; flex-direction: column; }

.case {
  display: grid;
  grid-template-columns: minmax(0, 27ch) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
}
.case:first-child { padding-top: 0; }
.case:nth-child(even) .case__txt { order: 2; }
@media (max-width: 820px) {
  .case { grid-template-columns: minmax(0, 1fr); }
  .case:nth-child(even) .case__txt { order: 0; }
}

.case__sector {
  margin: 0 0 .75rem;
  font-family: var(--face-display);
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.case__name {
  margin: 0 0 1rem;
  font-family: var(--face-display);
  font-size: var(--step-h3);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.04em;
}
.case__body { margin: 0; color: var(--ink-2); }

.case__plates {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(.5rem, 1.2vw, 1rem);
  align-items: start;
}
@media (max-width: 560px) {
  .case__plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate-btn--feed { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Plates
   -------------------------------------------------------------------------- */
.plate-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: var(--ground-3);
  border: 1px solid var(--rule);
  border-radius: 0;
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color var(--t);
}
.plate-btn:hover { border-color: var(--accent); }
.plate-btn img { width: 100%; }
.plate-btn.is-broken { cursor: default; }

.img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  padding: 1.25rem;
  font-family: var(--face-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-2);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Grid mode
   -------------------------------------------------------------------------- */
.wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
}
.wall li { display: flex; flex-direction: column; gap: .55rem; }
.wall__cap {
  font-family: var(--face-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Creators
   -------------------------------------------------------------------------- */
.creators {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: clamp(.5rem, 1.2vw, 1rem);
}

/* --------------------------------------------------------------------------
   Studio strip
   -------------------------------------------------------------------------- */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.strip__fig { margin: 0; }
.strip__fig--wide { grid-column: span 2; }
@media (max-width: 640px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__fig--wide { grid-column: 1 / -1; }
}
.strip__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.strip__fig--wide img { aspect-ratio: 8 / 5; }

.strip__fig figcaption,
.screen figcaption {
  padding-top: .6rem;
  font-family: var(--face-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Website screens
   -------------------------------------------------------------------------- */
.screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
}
.screen { margin: 0; }
.screen--lead { grid-column: 1 / -1; }
@media (max-width: 720px) { .screens { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Founders
   -------------------------------------------------------------------------- */
.founders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 54rem;
}
.founder { margin: 0; }
.founder img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.founder figcaption { display: flex; flex-direction: column; gap: .3rem; padding-top: .9rem; }
.founder__role {
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.founder__name {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Contact. The accent is spent here, in one full-bleed plate.
   -------------------------------------------------------------------------- */
.contact__type { max-width: 60rem; }

.channels {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  border-top: 1px solid rgba(33, 25, 21, .32);
}
.channels li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: .9rem;
  border-bottom: 1px solid rgba(33, 25, 21, .32);
}
@media (max-width: 480px) {
  .channels li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}
.channels__k {
  font-family: var(--face-display);
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.channels__v {
  font-family: var(--face-display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.channels__v--plain { text-decoration: none; }
a.channels__v:hover { text-decoration-thickness: 3px; }
.contact .eyebrow, .contact .h2 { color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Not found
   -------------------------------------------------------------------------- */
.notfound {
  min-height: 68vh;
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 7rem) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
}
.notfound__code {
  font-family: var(--face-display);
  font-size: clamp(4rem, 16vw, 11rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.055em;
  color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot { background: var(--ground-3); padding-block: clamp(2rem, 4vw, 3rem); }
.foot__in { display: flex; flex-direction: column; gap: .3rem; }
.foot__mark {
  margin: 0 0 .5rem;
  font-family: var(--face-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.045em;
}
.foot__meta { margin: 0; font-size: .9rem; color: var(--ink-2); }
.foot__meta a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
.foot__meta a:hover { color: var(--accent-text); }

/* --------------------------------------------------------------------------
   Image viewer
   -------------------------------------------------------------------------- */
.lb { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.lb__backdrop { position: absolute; inset: 0; background: var(--shade); }
.lb__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: min(60rem, 100%);
  max-height: 100%;
}
.lb__close {
  align-self: flex-end;
  min-height: 44px;
  padding: .5rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 0;
  font-family: var(--face-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.lb__close:hover { background: var(--ink); color: var(--ground); }
.lb__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 8rem;
  background: var(--ground-3);
  border: 1px solid var(--rule-strong);
  overflow: auto;
}
.lb__state {
  margin: 0;
  padding: 2.5rem 1.5rem;
  font-family: var(--face-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lb__img { max-height: min(72vh, 46rem); width: auto; object-fit: contain; }
.lb__cap {
  margin: 0;
  font-family: var(--face-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--ground);
  padding: .55rem .75rem;
  border: 1px solid var(--rule);
}
body.lb-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Reduced motion stops everything, including the ambient wall, the ticker
   and every transition. Nothing is merely slowed down.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation: none !important;
  }
  .hero__col, .ticker__track { transform: none !important; }
}

@media print {
  .masthead, .lb, .skip, .filter, .modes, .hero__bed, .hero__pause,
  .ticker, .follow { display: none !important; }
  body { background: #fff; color: #000; }
}