/* ═══════════════════════════════════════════════════════════
   Eric Scheide — Saxophonist, Composer
   Late-night editorial: warm ink ground, brass accent,
   high-contrast didone display against a quiet grotesque.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ground */
  --ink:      #0B0908;
  --ink-2:    #12100E;
  --ink-3:    #1A1613;

  /* type */
  --paper:    #EFE9DF;
  --muted:    #9A8F85;
  --faint:    #6B625B;

  /* accent — saxophone brass */
  --brass:    #C69A3E;
  --brass-lit:#E7C273;
  --plum:     #43254B;

  --line:     rgba(239,233,223,.12);
  --line-2:   rgba(239,233,223,.22);

  --display: "Bodoni Moda", "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
  --body:    "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gut:  clamp(1.25rem, 4.5vw, 5rem);
  --maxw: 1500px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.16,.84,.44,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(.98rem,.5vw + .85rem,1.06rem);
  font-weight:300;
  line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

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

::selection{ background:var(--brass); color:#12100E; }

:focus-visible{
  outline:1.5px solid var(--brass-lit);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:fixed; top:.6rem; left:.6rem; z-index:200;
  padding:.6rem 1rem; background:var(--brass); color:#12100E;
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border-radius:2px;
  transform:translateY(-160%);
  transition:transform .25s var(--ease);
}
.skip:focus{ transform:none; }

/* ── film grain ─────────────────────────────────────────── */
.grain{
  position:fixed; inset:-50%;
  z-index:1; pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ── shared type ────────────────────────────────────────── */
.label{
  margin:0;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
}
/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(11,9,8,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:1.15rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__mark{
  display:flex; align-items:baseline; gap:.7rem;
  text-decoration:none; color:var(--paper);
}
.nav__mono{
  font-family:var(--display);
  font-size:1.15rem; font-weight:700; letter-spacing:.02em;
  color:var(--brass);
}
.nav__name{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  transition:color .3s var(--ease);
}
@media (hover:hover){ .nav__mark:hover .nav__name{ color:var(--paper); } }

.nav__links{ display:flex; gap:clamp(1.1rem,2.5vw,2.4rem); }
.nav__links a{
  position:relative;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  padding-bottom:.28rem;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--brass);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
@media (hover:hover){ .nav__links a:hover{ color:var(--paper); } }
@media (hover:hover){ .nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; } }

/* Booking is the one actionable item in the bar — brass at rest, while
   keeping the same size and weight as its neighbours. */
.nav__links a.is-key{ color:var(--brass); }
@media (hover:hover){ .nav__links a.is-key:hover{ color:var(--brass-lit); } }

@media (max-width:520px){ .nav__name{ display:none; } }

/* Four items with these label lengths will not fit a 320px bar at full size.
   Below 430px the ES monogram steps aside (the footer still has a Top link)
   and the labels tighten, so nothing gets clipped. */
@media (max-width:430px){
  .nav__links{ gap:.72rem; }
  .nav__links a{ font-size:.64rem; letter-spacing:.06em; }
  .nav__links a.is-key{ padding:.45rem .62rem; }
}
/* Only the very narrowest bars need the monogram to step aside; on a normal
   phone it still fits alongside the tightened labels. */
@media (max-width:360px){
  .nav__mark{ display:none; }
  /* with the mark gone, space-between would strand the links on the left */
  .nav__in{ justify-content:flex-end; }
}

/* three links need a little more room than two on narrow bars */
@media (max-width:430px){
  .nav__links{ gap:.8rem; }
  .nav__links a{ letter-spacing:.1em; }
}

/* ── hero ───────────────────────────────────────────────── */
.hero{
  position:relative; z-index:2;
  overflow:clip;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(7rem,15vh,11rem) var(--gut) clamp(2.5rem,5vw,4rem);
}
.hero__glow{
  position:absolute; z-index:-1;
  top:-16%; right:-6%; width:min(78vw,900px); aspect-ratio:1;
  background:
    radial-gradient(circle at 62% 38%, rgba(198,154,62,.17), transparent 62%),
    radial-gradient(circle at 30% 70%, rgba(67,37,75,.30),  transparent 66%);
  filter:blur(48px);
  pointer-events:none;
}

.hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:end;
  gap:clamp(1.5rem,4vw,4rem);
}

.hero__type{ padding-bottom:clamp(.5rem,3vw,2.5rem); }

.hero__h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3.4rem,12.5vw,11rem);
  line-height:.86;
  letter-spacing:-.02em;
  margin:clamp(1rem,2.4vw,2rem) 0 0;
  text-wrap:balance;
}
.hero__h1 span{ display:block; }
.hero__last{
  font-style:italic;
  font-weight:500;
  color:var(--brass);
  margin-left:clamp(.6rem,4.5vw,4.2rem);
}

.hero__rule{
  height:1px; width:min(100%,17rem);
  margin:clamp(1.6rem,3.4vw,2.8rem) 0 1.35rem;
  background:linear-gradient(90deg,var(--brass),rgba(198,154,62,0));
  transform-origin:left;
}

.hero__meta{
  margin:0;
  max-width:31rem;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.75;
}

.cue{
  display:inline-flex; align-items:center; gap:.65rem;
  margin-top:clamp(1.8rem,3.6vw,3rem);
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper); text-decoration:none;
}
.cue svg{ width:1rem; height:1rem; color:var(--brass); animation:bob 2.6s var(--ease) infinite; }
.cue span{ position:relative; padding-bottom:.25rem; }
.cue span::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--line-2);
  transition:background .35s var(--ease);
}
@media (hover:hover){ .cue:hover span::after{ background:var(--brass); } }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* portrait */
.hero__fig{ margin:0; position:relative; }
.hero__frame{
  position:relative;
  overflow:hidden;
  border-radius:1px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
}
.hero__frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(198,154,62,.10), transparent 45%, rgba(11,9,8,.32));
  pointer-events:none;
}
.hero__frame img{ width:100%; filter:brightness(1.1) contrast(1.02); }

.hero__cap{
  position:absolute; top:0; left:0;
  transform:translateX(-100%) rotate(180deg);
  writing-mode:vertical-rl;
  padding-right:1rem;
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.hero__cap span{ display:inline-flex; align-items:center; gap:.8rem; }
.hero__cap span::after{
  content:""; width:2.6rem; height:1px; background:var(--brass); opacity:.75;
}

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; align-items:start; }
  .hero__fig{ order:-1; max-width:23rem; }
  .hero__cap{
    position:static; transform:none; writing-mode:horizontal-tb;
    padding:.85rem 0 0;
  }
  .hero__last{ margin-left:0; }
}

/* ── sections ───────────────────────────────────────────── */
.sect{
  position:relative; z-index:2;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4.5rem,10vw,8.5rem) var(--gut);
}
.sect--gal{ border-top:1px solid var(--line); }
/* The footer supplies its own hairline and 80px of top padding, so the
   gallery does not need a full section's worth of padding beneath it. */
.sect--gal{ padding-bottom:clamp(1.75rem,3.5vw,2.75rem); }
/* Equal breathing room either side of the rule dividing the two sections,
   rather than a full section's padding stacked on both. */
#performances{
  padding-top:   clamp(3.5rem,7vw,6rem);
  padding-bottom:clamp(2.75rem,5.5vw,4.5rem);
}
.sect--gal  { padding-top:   clamp(2.75rem,5.5vw,4.5rem); }

.sect__head{ margin-bottom:clamp(1.35rem,2.4vw,2rem); }

/* ── films ──────────────────────────────────────────────── */
.films{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(2rem,4.5vw,4rem) clamp(1.5rem,3vw,2.8rem);
}
.film--wide{ grid-column:1 / -1; }

.film__btn{
  display:block; width:100%;
  border-radius:2px;
}
.film__media{
  position:relative; display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--ink-2);
  border-radius:2px;
  border:1px solid var(--line);
}
.film__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.28) contrast(1.03) brightness(1.2);
  transition:filter .7s var(--ease);
}
.film__veil{
  position:absolute; inset:0;
  background:linear-gradient(170deg, rgba(11,9,8,.04), rgba(11,9,8,.30));
  transition:opacity .6s var(--ease);
}
.film__play{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:clamp(3.5rem,5.4vw,4.6rem); aspect-ratio:1;
  display:grid; place-items:center;
  border:1px solid rgba(239,233,223,.5);
  border-radius:50%;
  color:var(--paper);
  background:rgba(11,9,8,.28);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:background .45s var(--ease), border-color .45s var(--ease),
             color .45s var(--ease);
}
.film__play svg{ width:42%; height:42%; margin-left:8%; }

.film__btn:focus-visible .film__media img{
  filter:grayscale(0) contrast(1.02) brightness(1.4);
}
@media (hover:hover){ .film__btn:hover .film__media img{
  filter:grayscale(0) contrast(1.02) brightness(1.4);
} }
@media (hover:hover){ .film__btn:hover .film__veil{ opacity:.4; } }
.film__btn:focus-visible .film__play{
  background:var(--brass);
  border-color:var(--brass);
  color:#12100E;
}
@media (hover:hover){ .film__btn:hover .film__play{
  background:var(--brass);
  border-color:var(--brass);
  color:#12100E;
} }

.film__txt{
  padding-top:1.15rem;
}
.film__t{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.15rem,2.1vw,1.75rem);
  line-height:1.2;
  letter-spacing:-.005em;
  margin:0;
}
.film--wide .film__t{ font-size:clamp(1.4rem,3.1vw,2.5rem); }
.film__s{
  margin:.34rem 0 0;
  font-size:.83rem;
  letter-spacing:.05em;
  color:var(--muted);
}

/* live iframe swap */
.film__media.is-live{ border-color:var(--line-2); }
.film__media iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

@media (max-width:760px){
  .films{ grid-template-columns:1fr; }
  .film--wide{ grid-column:auto; }
}

/* ── projects ───────────────────────────────────────────── */
/* Same breathing room either side of the rule as the neighbouring
   sections, so the page keeps one rhythm. */
.sect--projects{
  border-top:1px solid var(--line);
  padding-top:   clamp(2.75rem,5.5vw,4.5rem);
  padding-bottom:clamp(2.75rem,5.5vw,4.5rem);
}
.projects{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line);
}
.projects li{ border-bottom:1px solid var(--line); }
.projects a{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem;
  padding:clamp(.85rem,1.7vw,1.3rem) 0;
  color:var(--paper); text-decoration:none;
  transition:color .3s var(--ease);
}
.projects__name{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.3rem,2.7vw,2.05rem);
  line-height:1.14;
  letter-spacing:-.01em;
}
.projects__host{
  flex:none;
  font-size:.64rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
  transition:color .3s var(--ease);
}
@media (hover:hover){
  .projects a:hover{ color:var(--brass); }
  .projects a:hover .projects__host{ color:var(--brass-lit); }
}
.projects a:active{ color:var(--brass); }

/* the two lines are too wide to sit side by side on a phone */
@media (max-width:640px){
  .projects a{ flex-direction:column; align-items:flex-start; gap:.3rem; }
}

/* ── mosaic ─────────────────────────────────────────────── */
/* Bands rather than one grid. Every tile in a band shares a single height
   (--bh) while widths vary by --f, so a row can stay asymmetric without any
   tile coming up short and leaving black space beneath it. */
.mosaic{
  --mgap:clamp(.55rem,1.3vw,1.15rem);
  display:flex; flex-direction:column;
  gap:var(--mgap);
}
.band{
  display:flex;
  gap:var(--mgap);
  height:var(--bh);
}
.band--tall { --bh:clamp(230px,27vw,430px); }
.band--mid  { --bh:clamp(205px,24vw,380px); }
.band--short{ --bh:clamp(150px,18vw,285px); }

.tile{
  margin:0; position:relative;
  flex:var(--f,1) 1 0;
  min-width:0;
  height:100%;
  overflow:hidden;
  border-radius:2px;
  background:var(--ink-2);
  cursor:zoom-in;
}
.tile img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.22) brightness(1.16) contrast(1.04);
  transition:filter .65s var(--ease);
}
.tile::after{
  content:""; position:absolute; inset:0;
  border:1px solid transparent;
  border-radius:2px;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
  pointer-events:none;
}
@media (hover:hover){ .tile:hover img{ filter:grayscale(0) brightness(1.3) contrast(1.02); } }
@media (hover:hover){ .tile:hover::after{
  border-color:rgba(198,154,62,.55);
  box-shadow:inset 0 0 0 1px rgba(11,9,8,.5), 0 18px 40px -22px rgba(0,0,0,.9);
} }

@media (max-width:760px){
  .band{ flex-wrap:wrap; height:auto; }
  .tile{ flex:1 1 calc(50% - var(--mgap)); height:auto; aspect-ratio:3/2; }
}
@media (max-width:480px){
  .tile{ flex:1 1 100%; }
}

/* ── photo credit ───────────────────────────────────────── */
/* Sits on the nine photographs from the Bird and Beckett shoot; the other
   three carry no credit. Plain text on the tile (the tile is already a
   button, so a link here would nest interactive elements) — the clickable
   credit lives in the lightbox. */
.hero__credit{
  position:absolute; left:0; right:0; bottom:0;
  margin:0; z-index:2;
  padding:1.9rem .95rem .7rem;
  text-align:right;
  font-size:.56rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  background:linear-gradient(to top, rgba(11,9,8,.8), rgba(11,9,8,0));
}
.hero__credit a{
  color:rgba(239,233,223,.6);
  text-decoration:none;
  transition:color .4s var(--ease);
}
@media (hover:hover){ .hero__credit a:hover{ color:var(--brass-lit); } }

.lb__credit{
  position:absolute;
  right:clamp(1rem,3vw,2.2rem);
  bottom:clamp(1rem,3vw,2.2rem);
  margin:0;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); text-align:right;
}
.lb__credit:empty{ display:none; }
.lb__credit a{
  color:var(--brass); text-decoration:none;
  border-bottom:1px solid rgba(198,154,62,.4);
  padding-bottom:.12em;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
@media (hover:hover){ .lb__credit a:hover{ color:var(--brass-lit); border-color:var(--brass-lit); } }

/* ── footer ─────────────────────────────────────────────── */
.foot{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(67,37,75,.14));
}
.foot__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(3rem,6vw,5rem) var(--gut);
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between;
  gap:2rem 2.75rem;
}
.foot__name{
  font-family:var(--display);
  font-size:clamp(1.7rem,4.6vw,3.1rem);
  font-weight:400;
  line-height:1;
  margin:0 0 .55rem;
}
.foot__id{ flex:0 1 auto; }

/* Booking address.
   The markup holds the address reversed; bidi-override flips it back so it
   reads correctly even with JavaScript off. site.js then replaces the span
   with a real <a href="mailto:"> and restores normal text direction. */
.foot__book{
  margin:0;
  flex:0 1 auto;
  display:flex; flex-direction:column; gap:.6rem;
  align-items:flex-start;
}
.foot__mail{
  font-family:var(--display);
  font-size:clamp(1rem,1.7vw,1.3rem);
  line-height:1.2;
  color:var(--brass);
  text-decoration:none;
  unicode-bidi:bidi-override;
  direction:rtl;
}
a.foot__mail{
  position:relative;
  unicode-bidi:normal;
  direction:ltr;
  transition:color .3s var(--ease);
}
a.foot__mail::after{
  content:""; position:absolute; left:0; bottom:-.18em; height:1px; width:100%;
  background:currentColor; opacity:.35;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
@media (hover:hover){ a.foot__mail:hover{ color:var(--brass-lit); } }
@media (hover:hover){ a.foot__mail:hover::after{ transform:scaleX(1); transform-origin:left; opacity:.8; } }

@media (max-width:640px){
  .foot__in{ align-items:flex-start; }
}
.foot__top{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  transition:color .35s var(--ease);
}
.foot__top svg{ width:.95rem; height:.95rem; }
@media (hover:hover){ .foot__top:hover{ color:var(--brass); } }

/* ── lightbox ───────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(7,6,5,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }

.lb__fig{ margin:0; max-width:100%; max-height:100%; }
.lb__fig img{
  max-width:100%; max-height:82vh;
  width:auto; height:auto;
  border-radius:2px;
  box-shadow:0 50px 110px -30px rgba(0,0,0,.9);
  transform:scale(.97);
  opacity:0;
  transition:transform .5s var(--slow), opacity .4s var(--ease);
}
.lb.is-open .lb__fig img{ transform:none; opacity:1; }

.lb__x,.lb__nav{
  position:absolute;
  display:grid; place-items:center;
  width:2.9rem; aspect-ratio:1;
  border:1px solid var(--line-2);
  border-radius:50%;
  color:var(--paper);
  background:rgba(11,9,8,.5);
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.lb__x svg,.lb__nav svg{ width:45%; height:45%; }
.lb__x{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.lb__nav--p{ left:clamp(.6rem,2.5vw,2.2rem); top:50%; transform:translateY(-50%); }
.lb__nav--n{ right:clamp(.6rem,2.5vw,2.2rem); top:50%; transform:translateY(-50%); }
/* Touch has no hover, so give the controls a momentary pressed state
   instead. :active clears on release, unlike :hover which sticks. */
.lb__x:active,.lb__nav:active{ background:var(--brass); border-color:var(--brass); color:#12100E; }
@media (hover:hover){ .lb__x:hover,
.lb__nav:hover{
  background:var(--brass); border-color:var(--brass); color:#12100E;
} }
.lb__count{
  position:absolute; bottom:clamp(1rem,3vw,2.2rem);
  left:clamp(1rem,3vw,2.2rem);
  margin:0;
  font-family:var(--display); font-style:italic;
  font-size:.9rem; letter-spacing:.08em;
  color:var(--muted);
}
body.lb-open{ overflow:hidden; }

/* ── reveal ─────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .95s var(--slow), transform .95s var(--slow);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}