/* =========================================================
   TZ — v2
   Vanilla design system. No build step.
   ========================================================= */

/* Syne and Inter Tight are loaded from a link tag in each page head. An @import
   here would queue the font request behind this stylesheet instead of alongside
   it, which delays first paint. */

:root{
  --bg:        #0a0a0b;
  --bg-soft:   #121215;
  --ink:       #f1ece4;
  --ink-2:     rgba(241, 236, 228, .62);
  --ink-3:     rgba(241, 236, 228, .34);
  --line:      rgba(241, 236, 228, .13);
  --accent:    #e8622e;
  --accent-2:  #f0b64e;

  --display: 'Syne', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  --gutter: clamp(18px, 4vw, 64px);
  --maxw: 1560px;

  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
}

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

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* iOS paints the rubber band area with the canvas background and can reveal
     fixed layers parked just off screen, so the root carries the colour too and
     the elastic scroll is switched off */
  background: var(--bg);
  overscroll-behavior-y: none;
}

/* no scrollbars anywhere — scrolling still works */
html, body, *{ scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar{ width: 0; height: 0; display: none; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked{ overflow: hidden; }

img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection{ background: var(--accent); color: #0a0a0b; }

.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;
}

/* ---------------------------------------------------------
   Film grain + vignette
   --------------------------------------------------------- */
.grain{
  position: fixed;
  inset: -120%;
  z-index: 9000;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/></svg>");
  animation: grainShift 6s steps(6) infinite;
  mix-blend-mode: overlay;
}
@keyframes grainShift{
  0%   { transform: translate3d(0,0,0); }
  16%  { transform: translate3d(-3%, 2%, 0); }
  33%  { transform: translate3d(2%, -4%, 0); }
  50%  { transform: translate3d(-1%, 3%, 0); }
  66%  { transform: translate3d(4%, 1%, 0); }
  83%  { transform: translate3d(-2%, -2%, 0); }
  100% { transform: translate3d(0,0,0); }
}

.vignette{
  position: fixed; inset: 0; z-index: 8990; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 48%, rgba(0,0,0,.55) 100%);
}

/* ---------------------------------------------------------
   Cursor
   --------------------------------------------------------- */
.cursor{
  position: fixed; top: 0; left: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(241,236,228,.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9500;
  mix-blend-mode: difference;
  transition: width .45s var(--ease), height .45s var(--ease),
              margin .45s var(--ease), background-color .35s var(--ease),
              border-color .35s var(--ease), opacity .3s linear;
  opacity: 0;
}
.cursor__label{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: #0a0a0b;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.cursor__icon{
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .25s linear;
}
body.cursor-ready .cursor{ opacity: 1; }
.cursor.is-hover{
  width: 68px; height: 68px; margin: -34px 0 0 -34px;
  background: var(--ink);
  border-color: transparent;
}
.cursor.is-hover .cursor__label{ opacity: 1; }
/* destination logo: the cursor becomes the icon of where the link goes.
   no ring, no plate — just the logo, sized to its own aspect ratio by js */
.cursor.is-icon{
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  background: none;
  border-color: transparent;
  border-radius: 0;
  mix-blend-mode: normal;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.5));
}
/* dark artwork would vanish on the dark page: give those a tight backing */
.cursor.is-icon.has-plate .cursor__icon{
  background: var(--ink);
  border-radius: 6px;
  padding: 5px;
}
.cursor.is-icon .cursor__label{ opacity: 0; }
.cursor.is-icon .cursor__icon{ opacity: 1; }
.cursor.is-down{ transform-origin: center; }

@media (hover: none), (pointer: coarse){
  .cursor{ display: none !important; }
}

/* ---------------------------------------------------------
   Intro
   A letterbox opening. The screen starts closed, a single point of
   light appears on the seam, stretches out into a hairline the full
   width of the page, and then the two mattes carry their half of it
   away with them. The hero is simply already there behind them.
   --------------------------------------------------------- */
.intro{
  position: fixed; inset: 0; z-index: 9800;
  pointer-events: none;
}
.intro__bar{
  position: absolute; left: 0; right: 0;
  /* the extra fraction keeps a subpixel seam from showing through */
  height: 50.2%;
  background: var(--bg);
  will-change: transform;
}
.intro__bar--t{ top: 0;    animation: introUp   1.25s cubic-bezier(.76,0,.24,1) 2.35s forwards; }
.intro__bar--b{ bottom: 0; animation: introDown 1.25s cubic-bezier(.76,0,.24,1) 2.35s forwards; }
/* The point of light is its own fixed size element. Holding a full width
   bar at scaleX(.004) for a beat would round it to whole pixels and the
   birth of the line would visibly step, so nothing gets scaled until the
   line is actually on its way out to the edges. */
.intro__bar::before{
  content: '';
  position: absolute; left: 50%; width: 7px; height: 1px;
  margin-left: -3.5px;
  background: var(--accent);
  box-shadow: 0 0 16px 1px rgba(232, 98, 46, .65);
  opacity: 0;
  animation: introSpark 1.7s ease-out .3s forwards;
}
.intro__bar::after{
  content: '';
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--accent);
  /* starts exactly as wide as the spark it takes over from */
  transform: scaleX(.0055);
  opacity: 0;
  will-change: transform;
  animation: introStrike 1.15s cubic-bezier(.5,0,.16,1) 1.2s forwards;
}
.intro__bar--t::before, .intro__bar--t::after{ bottom: 0; }
.intro__bar--b::before, .intro__bar--b::after{ top: 0; }
.intro__tag{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, 20px);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  animation: introTag 2.35s linear .75s forwards;
}
@keyframes introSpark{
  0%   { opacity: 0; transform: scaleY(.4); }
  26%  { opacity: 1; transform: scaleY(1); }
  62%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}
@keyframes introStrike{
  0%   { transform: scaleX(.0055); opacity: 1; }
  100% { transform: scaleX(1);     opacity: 1; }
}
@keyframes introTag{ 0%{ opacity: 0; } 22%{ opacity: 1; } 68%{ opacity: 1; } 100%{ opacity: 0; } }
@keyframes introUp{ to{ transform: translateY(-100%); } }
@keyframes introDown{ to{ transform: translateY(100%); } }

/* Page curtain (transitions) */
/* a sheet of colour travelling bottom -> top across the page change:
   .is-in slides it up over the old page, .is-out keeps it going off the top */
.curtain{
  position: fixed; inset: 0; z-index: 9700;
  background: var(--accent);
  transform: translate3d(0, 100%, 0);
  pointer-events: none;
  /* parked off screen it must not paint at all: a permanent compositing layer
     of solid orange is exactly what iOS flashed during an elastic scroll */
  visibility: hidden;
}
.curtain.is-in,
.curtain.is-cover,
.curtain.is-out{ visibility: visible; will-change: transform; }
.curtain.is-in{
  transform: translate3d(0, 0, 0);
  transition: transform .6s var(--ease-io);
}
.curtain.is-cover{
  transform: translate3d(0, 0, 0);
  transition: none;
}
.curtain.is-out{
  transform: translate3d(0, -100%, 0);
  transition: transform .72s var(--ease-io);
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.hdr{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.2vw, 30px) var(--gutter);
  mix-blend-mode: difference;
  pointer-events: none;
}
.hdr > *{ pointer-events: auto; }
.hdr__mark{
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px;
}
.hdr__dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(.55); opacity: .5; }
}
.hdr__status{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
@media (max-width: 860px){ .hdr__status{ display: none; } }

.menu-btn{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.menu-btn__lines{
  display: inline-flex; flex-direction: column; gap: 4px; width: 22px;
}
.menu-btn__lines i{
  display: block; height: 1px; background: currentColor;
  transition: transform .45s var(--ease), width .45s var(--ease);
  width: 22px;
}
.menu-btn__lines i:last-child{ width: 13px; }
.menu-btn:hover .menu-btn__lines i:last-child{ width: 22px; }
body.nav-open .menu-btn__lines i:first-child{ transform: translateY(2.5px) rotate(15deg); }
body.nav-open .menu-btn__lines i:last-child{ transform: translateY(-2.5px) rotate(-15deg); width: 22px; }

/* ---------------------------------------------------------
   Nav overlay
   --------------------------------------------------------- */
.nav{
  position: fixed; inset: 0; z-index: 790;
  background: var(--bg-soft);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .85s var(--ease);
  pointer-events: none;
}
body.nav-open .nav{
  clip-path: inset(0 0 0% 0);
  pointer-events: auto;
}
.nav__list{
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(92px, 13vh, 150px) var(--gutter) clamp(66px, 11vh, 120px);
  margin: 0;
  list-style: none;
  overflow-y: auto;
  min-height: 0;
}
.nav__item{
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  flex: none;
}
.nav__item:first-child{ border-top: 1px solid var(--line); }
.nav__link{
  display: flex; align-items: baseline; gap: clamp(12px, 2vw, 28px);
  padding: clamp(9px, 1.1vw, 15px) 0;
  transform: translateY(105%);
  transition: transform .8s var(--ease);
}
body.nav-open .nav__link{ transform: translateY(0); }
body.nav-open .nav__item:nth-child(1) .nav__link{ transition-delay: .10s; }
body.nav-open .nav__item:nth-child(2) .nav__link{ transition-delay: .16s; }
body.nav-open .nav__item:nth-child(3) .nav__link{ transition-delay: .22s; }
body.nav-open .nav__item:nth-child(4) .nav__link{ transition-delay: .28s; }
body.nav-open .nav__item:nth-child(5) .nav__link{ transition-delay: .34s; }
body.nav-open .nav__item:nth-child(6) .nav__link{ transition-delay: .40s; }
body.nav-open .nav__item:nth-child(7) .nav__link{ transition-delay: .46s; }

.nav__idx{
  font-family: var(--mono);
  font-size: 10px; color: var(--ink-3);
  letter-spacing: .1em;
}
.nav__word{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-transform: uppercase;
  transition: color .4s var(--ease), transform .55s var(--ease);
}
.nav__link:hover .nav__word{ color: var(--accent); transform: translateX(clamp(8px, 1.4vw, 24px)); }
.nav__link[aria-current="page"] .nav__word{ color: var(--accent); }

.nav__media{
  position: relative;
  overflow: hidden;
  background: #000;
}
.nav__media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 34%;
  opacity: 0;
  transform: scale(1.06);
  filter: contrast(1.04) saturate(.95);
  transition: opacity .9s var(--ease), transform 1.4s var(--ease);
}
.nav__media img.is-on{ opacity: 1; transform: scale(1); }
.nav__media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--bg-soft) 0%, rgba(18,18,21,0) 32%);
  pointer-events: none;
}

.nav__foot{
  position: absolute; left: var(--gutter); bottom: clamp(20px, 3.4vh, 34px);
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  z-index: 2;
}
.nav__foot a:hover{ color: var(--accent); }

@media (max-width: 900px){
  .nav{ grid-template-columns: 1fr; }
  /* no room for a second column, so the same photo slides behind the words
     instead of being dropped */
  .nav__media{
    position: absolute; inset: 0;
    background: none;
  }
  .nav__media img{ object-position: center 26%; }
  .nav__media::after{
    background: linear-gradient(to bottom,
      rgba(18,18,21,.62) 0%,
      rgba(18,18,21,.88) 42%,
      rgba(18,18,21,.94) 72%,
      var(--bg-soft) 100%);
  }
  .nav__list{
    position: relative; z-index: 1;
    padding-bottom: clamp(80px, 14vh, 130px);
  }
}

/* ---------------------------------------------------------
   Reveal primitives
   --------------------------------------------------------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
[data-reveal].is-in{ opacity: 1; transform: none; }

.line-mask{ display: block; overflow: hidden; }
.line-mask > span{
  display: block;
  transform: translateY(110%);
  transition: transform 1.05s var(--ease);
}
.is-in .line-mask > span,
.line-mask.is-in > span{ transform: translateY(0); }
.line-mask:nth-child(2) > span{ transition-delay: .07s; }
.line-mask:nth-child(3) > span{ transition-delay: .14s; }
.line-mask:nth-child(4) > span{ transition-delay: .21s; }

.clip-img{
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease);
}
.clip-img.is-in{ clip-path: inset(0 0 0% 0); }
.clip-img img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.18);
  transition: transform 1.6s var(--ease);
}
.clip-img.is-in img{ transform: scale(1); }

/* ---------------------------------------------------------
   Type helpers
   --------------------------------------------------------- */
.eyebrow{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before{
  content: ''; width: clamp(24px, 4vw, 56px); height: 1px;
  background: var(--accent);
}

.h-xl{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 6.4vw, 118px);
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: uppercase;
  margin: 0;
}
.h-lg{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 5.6vw, 84px);
  line-height: .94;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0;
}
.h-md{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 42px);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 0;
}
.lead{
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.5;
  color: var(--ink-2);
  font-weight: 300;
  max-width: 62ch;
  margin: 0;
}
.body{
  color: var(--ink-2);
  max-width: 58ch;
  margin: 0;
}
.accent{ color: var(--accent); }

/* ---------------------------------------------------------
   Link / arrow
   --------------------------------------------------------- */
.alink{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 5px;
  position: relative;
  color: var(--ink);
}
.alink::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: right;
  transition: transform .5s var(--ease);
}
.alink:hover::after{ transform: scaleX(0); }
.alink svg{ width: 11px; height: 11px; transition: transform .45s var(--ease); }
.alink:hover svg{ transform: translate(3px, -3px); }

/* ---------------------------------------------------------
   Marquee
   --------------------------------------------------------- */
.marquee{
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(12px, 1.6vw, 22px) 0;
  white-space: nowrap;
}
.marquee__track{
  display: inline-flex; gap: 0;
  will-change: transform;
}
.marquee__track span{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 76px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  padding-right: .4em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241,236,228,.4);
}
.marquee__track span:nth-child(even){
  color: var(--ink);
  -webkit-text-stroke: 0;
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.foot{
  padding: clamp(60px, 9vw, 140px) var(--gutter) clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
  margin-top: clamp(60px, 10vw, 160px);
}
.foot__top{
  display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 80px);
  justify-content: space-between; align-items: flex-end;
}
.foot__mail{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 6.5vw, 108px);
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  word-break: break-word;
}
.foot__mail::after{
  content: ''; position: absolute; left: 0; bottom: .04em; right: 0;
  height: .045em; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease);
}
.foot__mail:hover::after{ transform: scaleX(1); }
.foot__socials{
  display: flex; flex-wrap: wrap; gap: 18px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
}
.foot__socials a{ color: var(--ink-2); transition: color .35s var(--ease); }
.foot__socials a:hover{ color: var(--accent); }
.foot__bottom{
  margin-top: clamp(40px, 6vw, 90px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.foot__bottom a:hover{ color: var(--accent); }

/* =========================================================
   SECTION PAGES
   ========================================================= */
.page{ padding-top: clamp(96px, 14vh, 170px); }

.page-hero{
  padding: 0 var(--gutter) clamp(50px, 8vw, 110px);
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.page-hero__txt .eyebrow{ margin-bottom: clamp(18px, 2.4vw, 34px); }
.page-hero__txt .lead{ margin-top: clamp(22px, 3vw, 40px); }
.page-hero__media{
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  margin: 0;
}
.page-hero__media img{ filter: grayscale(.25) contrast(1.05); }
.page-hero__media.is-poster img{ filter: none; }
/* landscape shot, same crop as its card on the home page */
.page-hero__media img.is-right{ object-position: 88% center; }

@media (max-width: 900px){
  .page-hero{ grid-template-columns: 1fr; }
  .page-hero__media{ aspect-ratio: 16 / 10; }
  /* a poster in a landscape box would only show a thin slice of it */
  .page-hero__media.is-poster{ aspect-ratio: 3 / 4; max-width: 320px; margin: 0 auto; }
  .h-xl{ font-size: clamp(34px, 10.5vw, 86px); }
}

/* Project list */
.plist{
  border-top: 1px solid var(--line);
  margin: 0 var(--gutter);
  padding: 0;
  list-style: none;
}
.pitem{
  border-bottom: 1px solid var(--line);
  position: relative;
}
.pitem__link{
  display: grid;
  grid-template-columns: 62px 1fr minmax(0, 30ch) 120px;
  gap: clamp(14px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(22px, 3.2vw, 46px) 0;
  position: relative;
  transition: padding-left .6s var(--ease), color .4s var(--ease);
}
.pitem__link::before{
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--accent);
  opacity: .1;
  /* absolutely positioned, so once it spans the row it paints over the links
     inside it and swallows their clicks */
  pointer-events: none;
  transition: width .7s var(--ease);
}
.pitem:hover .pitem__link{ padding-left: clamp(14px, 2vw, 34px); }
.pitem:hover .pitem__link::before{ width: 100%; }

.pitem__idx{
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: .1em;
  padding-top: .7em;
}
.pitem__head{ min-width: 0; }
.pitem__title{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0;
  transition: color .4s var(--ease);
}
.pitem:hover .pitem__title{ color: var(--accent); }
.pitem__tags{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.tag{
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 11px;
}
.tag--hl{ border-color: var(--accent); color: var(--accent); }
.pitem__desc{
  color: var(--ink-2);
  font-size: clamp(14px, .95vw, 15.5px);
  line-height: 1.62;
  margin: 0;
  padding-top: .35em;
}
.pitem__go{
  justify-self: end;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  padding-top: .8em;
  transition: color .4s var(--ease);
  text-align: right;
}
.pitem:hover .pitem__go{ color: var(--ink); }
.pitem__go svg{ width: 12px; height: 12px; flex: none; transition: transform .5s var(--ease); }
.pitem:hover .pitem__go svg{ transform: translate(3px, -3px); }

/* multiple links instead of one (music page): each one is its own target, so
   they need to be big enough to actually hit */
.plist--streams .pitem__link{ grid-template-columns: 62px 1fr minmax(0, 28ch) 158px; }
/* the row-wide hover slide would drag the stream buttons out from under the
   cursor mid click, so this list keeps the accent wash and stays put */
.plist--streams .pitem:hover .pitem__link{ padding-left: 0; }
.pitem__streams{
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding-top: .5em;
}
.pitem__streams a{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-2);
  text-align: left;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.pitem__streams a:hover{
  color: var(--ink);
  border-color: var(--ink-3);
  background: rgba(255,255,255,.05);
}
.pitem__streams img{
  width: 15px; height: 15px; flex: none;
  object-fit: contain;
}

/* thumb (mobile inline / desktop follows cursor) */
.pitem__thumb{
  display: none;
}
@media (max-width: 1100px){
  .pitem__link{
    grid-template-columns: 40px 1fr;
    grid-template-areas:
      'idx head'
      '.   thumb'
      '.   desc'
      '.   go';
    gap: 10px clamp(12px, 3vw, 24px);
  }
  .pitem__idx{ grid-area: idx; }
  .pitem__head{ grid-area: head; }
  .pitem__desc{ grid-area: desc; margin-top: 6px; }
  .pitem__go{ grid-area: go; justify-self: start; text-align: left; margin-top: 10px; }
  .plist--streams .pitem__link{ grid-template-columns: 40px 1fr; }
  .pitem__streams{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .pitem__thumb{
    grid-area: thumb;
    display: block;
    margin: 14px 0 0;
    width: 54px; height: 54px;
    padding: 9px;
    overflow: hidden;
    background: var(--ink);
    border-radius: 9px;
  }
  .pitem__thumb img{ width: 100%; height: 100%; object-fit: contain; }
}

/* contact page */
.contact-grid{
  margin: 0 var(--gutter);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ccard{
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  overflow: hidden;
  transition: background-color .5s var(--ease);
}
.ccard::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.ccard:hover::after{ transform: scaleX(1); }
.ccard:hover{ background: rgba(241,236,228,.03); }
.ccard__k{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.ccard__v{
  font-family: var(--display); font-weight: 700;
  font-size: clamp(19px, 1.9vw, 28px);
  letter-spacing: -.02em;
  line-height: 1.1;
  word-break: break-word;
}
.ccard__v--mail{ font-size: clamp(16px, 1.5vw, 21px); }
.ccard__n{ font-size: 13.5px; color: var(--ink-2); margin: 0; }

/* generic media band */
.band{
  margin: clamp(60px, 9vw, 140px) var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 24vw, 330px), 1fr));
  gap: clamp(10px, 1.4vw, 22px);
}
.band figure{ margin: 0; }
.band .clip-img{ aspect-ratio: 4 / 5; }
/* pull the subject back toward the middle of the 4/5 crop */
.band img.is-mid{ object-position: 100% center; }
/* a near square source loses too much of itself inside the 4/5 box */
.band .is-square .clip-img{ aspect-ratio: 1 / 1; }
.band .clip-img img{ filter: grayscale(.3) contrast(1.04); }
.band--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.band--6{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px){
  .band--6{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* school crests: the logos range from pure black to near white, so every one of
   them sits on the same light tile to stay readable on a dark page */
.band--marks{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.band--marks .clip-img{
  aspect-ratio: 4 / 3;
  background: #f2f0eb;
  display: grid;
  place-items: center;
  padding: clamp(18px, 2.6vw, 40px);
}
.band--marks .clip-img img{
  width: 100%; height: 100%;
  /* a grid item defaults to min-height:auto, which for an image means its own
     aspect ratio wins over height:100%. The square and portrait crests grew
     past the tile and got clipped, so the automatic minimum is switched off. */
  min-width: 0; min-height: 0;
  object-fit: contain;
  filter: none;
  /* the shared zoom in reveal would push a contained logo outside its tile */
  transform: none;
}
/* browser shots read better wide, two per row */
.band--shots{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band--shots .clip-img{ aspect-ratio: 16 / 10; }
.band--shots .clip-img img{ filter: grayscale(.12) contrast(1.02); }
/* posters and sleeve art keep their own proportions instead of being cropped to 4/5 */
.band .is-poster .clip-img,
.band .is-art .clip-img{ aspect-ratio: auto; }
.band .is-poster .clip-img img,
.band .is-art .clip-img img{ height: auto; display: block; filter: none; }
.band figcaption{
  margin-top: 10px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 760px){
  .band{ grid-template-columns: 1fr 1fr; }
  .band--shots{ grid-template-columns: 1fr; }
}

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