/* ==========================================================================
   harmoniousreality.com, stylesheet
   Shared by index.html, kan.html, less-than-three.html.
   Palette, type and motion rules come from PROJECT-BRIEF section 5.
   ========================================================================== */

/* ---------- fonts, self hosted ---------- */

@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;
  src:url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Karla';font-style:italic;font-weight:300 500;font-display:swap;
  src:url('../fonts/karla-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- tokens ---------- */

:root{
  --canvas:#0A0D0B;
  --canvas-2:#0F1411;
  /* The cool pole. Same value as the canvas, tilted blue. It gives the blue lit
     photographs a ground to sit on so they read as part of the world rather
     than as a clash. Blue is a ground here, never an accent: gold stays the
     only accent on the site. */
  --canvas-cool:#090E15;
  --panel-cool:#111926;
  --panel:#151C17;
  --green-deep:#1A2A20;
  --accent:#C9A227;
  --accent-hover:#E2BA3C;
  --accent-muted:rgba(201,162,39,.20);
  --rust:#A9502C;
  --text-primary:#EFEAE0;
  --text-secondary:#98A292;
  --rule:rgba(239,234,224,.12);
  --rule-strong:rgba(239,234,224,.24);
  /* Interactive borders need 3:1 on the canvas and the hairline rules do not
     reach it. Measured, not guessed: this lands at 3.6:1. */
  --rule-ui:rgba(239,234,224,.42);

  --max:1180px;
  --gutter:clamp(20px,5vw,44px);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --tshadow:0 1px 2px rgba(5,8,6,.95),0 3px 12px rgba(5,8,6,.78),0 10px 44px rgba(5,8,6,.8);

  --sec-pad:clamp(76px,11vw,152px);

  /* Broad soft diagonal bands. Wide transparent gaps so the texture appears in
     passages rather than everywhere at once. */
  --ribbon:repeating-linear-gradient(104deg,
    transparent 0 70px,
    rgba(0,0,0,.55) 190px,
    #000 250px 330px,
    rgba(0,0,0,.5) 400px,
    transparent 520px 660px);

  /* U+2192 is outside the latin subsets of all three self hosted fonts, so a
     glyph arrow falls back to whatever the operating system has. This one is
     drawn, so it is identical everywhere and takes currentColor. */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h13.4M9.8 1.2 13.8 5l-4 3.8' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;overflow-x:clip;
  scroll-padding-top:96px;
  background:var(--canvas);
}

body{
  overflow-x:hidden;overflow-x:clip;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

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

::selection{background:rgba(201,162,39,.28);color:var(--text-primary)}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--panel);color:var(--text-primary);
  padding:14px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}

.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- the environment layer ----------
   One fixed backdrop behind everything so scrolling reads as moving
   through a place rather than past stacked boxes. Whisper level. */

.env{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 12% 8%,rgba(26,42,32,.55),transparent 62%),
    radial-gradient(ellipse 80% 55% at 92% 46%,rgba(17,25,38,.6),transparent 62%),
    radial-gradient(ellipse 70% 50% at 88% 82%,rgba(26,42,32,.4),transparent 60%),
    var(--canvas);
}
.env::after{
  content:"";position:absolute;inset:-10%;
  background:radial-gradient(circle at 50% 50%,rgba(201,162,39,.055),transparent 55%);
  animation:envdrift 74s var(--ease) -18s infinite alternate;
}
@keyframes envdrift{
  from{transform:translate3d(-6%,3%,0) scale(1)}
  to{transform:translate3d(6%,-4%,0) scale(1.14)}
}

/* ---------- layout helpers ---------- */

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:1440px;margin:0 auto;padding-inline:var(--gutter)}

main > section{position:relative;padding-block:var(--sec-pad)}

.lede{
  font-size:clamp(18px,1.35vw,21px);
  color:var(--text-secondary);
  max-width:62ch;
}
p + p{margin-top:1.15em}

.measure{max-width:64ch}
.measure-tight{max-width:52ch}

/* ---------- the section label ---------- */

.label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:16px;
  margin-bottom:clamp(22px,2.6vw,34px);
}
.label::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--accent-muted),transparent)}
.label .n{color:var(--text-secondary);letter-spacing:.18em}

/* ---------- headings ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.015em;
  font-optical-sizing:auto;
  font-variation-settings:'SOFT' 24,'WONK' 1;
  text-wrap:balance;
}
h2{font-size:clamp(31px,4.3vw,54px);line-height:1.06}
h3{font-size:clamp(25px,2.9vw,38px);line-height:1.12}
h4{font-size:clamp(20px,1.7vw,25px);line-height:1.2;letter-spacing:-.01em}

em{font-style:italic}
/* The body runs at 300, and the default `bolder` on strong maps 300 to 400,
   which is not visibly bold at all. Set it explicitly. */
strong,b{font-weight:600}

/* ==========================================================================
   THE SIGNATURE: the counterpoint rule
   Two independent lines that run their own course, cross once, and resolve.
   It is the one idea on this site, drawn. Used as the section divider,
   the hero cue, and the audio playhead track.
   ========================================================================== */

.cp{display:block;width:100%;height:26px;overflow:visible;color:var(--rule-strong)}
.cp path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.js .cp path{
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.9s var(--ease-out);
}
.cp path.v2{color:var(--accent);opacity:.55;transition-delay:.16s}
.in .cp path,.cp.in path{stroke-dashoffset:0}

.divider{padding-block:0;margin-block:0}
.divider .wrap{padding-block:clamp(10px,2vw,26px)}
/* a section that sits directly against a divider gives back half its padding,
   so the rule reads as a join between two sections rather than a stranded mark */
.divider + section{padding-top:calc(var(--sec-pad) * .5)}
section:has(+ .divider){padding-bottom:calc(var(--sec-pad) * .5)}

/* ==========================================================================
   NAV
   ========================================================================== */

#nav{
  position:fixed;inset-inline:0;top:0;z-index:80;
  display:flex;align-items:center;gap:28px;
  padding:14px var(--gutter);
  background:rgba(10,13,11,.82);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--rule);
  transform:translateY(-104%);
  transition:transform .62s var(--ease-out);
}
html:not(.js) #nav{transform:none}
#nav.show{transform:translateY(0)}
#nav .mark{display:flex;align-items:center;gap:12px;margin-inline-end:auto}
#nav .mark .cpmark{width:26px;height:13px;flex:none}
#nav .nm{
  font-family:var(--display);font-size:17px;letter-spacing:.005em;
  font-variation-settings:'SOFT' 24,'WONK' 1;
}
#nav ul{display:flex;gap:clamp(16px,2.4vw,32px);list-style:none}
#nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);
  padding-block:6px;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
#nav a:hover{color:var(--text-primary);border-bottom-color:var(--accent-muted)}
#nav a.gold{color:var(--accent)}
#nav a.gold:hover{color:var(--accent-hover)}
@media (max-width:760px){
  #nav ul li:not(.keep){display:none}
  #nav{gap:14px}
}

/* ==========================================================================
   HERO
   The image is a full-bleed plate that dissolves into the page, so the
   headline never sits on raw photograph. The media layer is a self
   contained stack: a scroll scrub video drops in as a sibling of
   .hero-plate later without touching anything else. See PROJECT-BRIEF s10.
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(48px,7vh,96px);
  isolation:isolate;
}

.hero-stage{position:absolute;inset:0;z-index:-1;overflow:hidden}

.hero-plate{
  position:absolute;inset:0;
  background-image:image-set(url('../img/hero-valle-de-bravo-sm.jpg') 1x);
  background-size:cover;
  background-position:58% 30%;
  filter:saturate(.84) contrast(1.04) brightness(.94);
  transform:scale(1.06);
  will-change:transform;
}
@media (min-width:800px){
  .hero-plate{background-image:image-set(url('../img/hero-valle-de-bravo.jpg') 1x)}
}
/* A portrait frame crops this 3:2 photograph hard from the sides, so the
   anchor moves left to keep his face and the violin inside the frame. */
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){
  .hero-plate{background-position:32% center}
}

/* the grade: pulls the dusk pinks toward the green canvas */
.hero-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,13,11,.72) 0%,rgba(10,13,11,.14) 26%,rgba(10,13,11,0) 42%),
    linear-gradient(90deg,rgba(10,13,11,.55) 0%,rgba(10,13,11,.16) 34%,rgba(10,13,11,0) 58%),
    radial-gradient(ellipse 120% 90% at 55% 34%,rgba(10,13,11,0) 30%,rgba(10,13,11,.52) 100%);
}
/* the dissolve: the plate melts into the canvas so type sits on solid ground */
.hero-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,13,11,0) 34%,
    rgba(10,13,11,.42) 52%,
    rgba(10,13,11,.84) 68%,
    rgba(10,13,11,.97) 82%,
    var(--canvas) 94%);
}

/* The per band scrim. The dissolve alone left the kicker and the two
   secondary lines under 3.5:1 against the brightest water in frame, measured
   on the real composited page. This ellipse rides under the text block only,
   so the photograph stays live everywhere else. */
.hero-body{position:relative;z-index:1;text-shadow:var(--tshadow)}
.hero-body::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  /* The radius has to die out INSIDE this box. A gradient still carrying alpha
     at the box edge gets clipped, and the clip reads as a hard line across the
     photograph. */
  inset:-64% -30% -60% -14%;
  background:radial-gradient(ellipse 62% 46% at 22% 60%,
    rgba(5,8,6,.9) 0%,rgba(5,8,6,.78) 32%,rgba(5,8,6,.46) 56%,rgba(5,8,6,0) 84%);
}


.hero h1{display:flex;flex-direction:column;letter-spacing:-.022em;line-height:.98}
.hero h1 .l1{
  font-size:clamp(46px,7.6vw,104px);
  font-variation-settings:'SOFT' 34,'WONK' 1;
}
.hero h1 .l2{
  font-size:clamp(30px,4.7vw,64px);
  color:#C4CBBD;
  margin-top:.06em;
}
.hero h1 .l3{
  font-size:clamp(24px,3.5vw,48px);
  color:var(--accent);
  margin-top:.16em;
  font-variation-settings:'SOFT' 30,'WONK' 1;
}
.hero-sub{
  margin-top:clamp(22px,3.2vh,36px);
  max-width:44ch;
  color:var(--text-primary);
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.55;
}
.hero-role .who{
  color:var(--accent);font-weight:500;
  display:inline-flex;align-items:center;gap:12px;
  margin-inline-end:12px;
}
.hero-role .who::after{content:"";width:26px;height:1px;background:var(--accent-muted)}
.hero-role{
  margin-top:1.15em;max-width:60ch;
  color:var(--text-secondary);
  font-family:var(--mono);font-size:clamp(10px,.82vw,11.5px);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.8;
}

/* load choreography: the three lines arrive in order, the way they read */
.js .hero h1 span,.js .hero-sub,.js .hero-role{
  opacity:0;transform:translateY(16px);
  animation:heroIn 1.15s var(--ease-out) forwards;
}
.hero h1 .l1{animation-delay:.18s}
.hero h1 .l2{animation-delay:.34s}
.hero h1 .l3{animation-delay:.50s}
.hero-sub{animation-delay:.74s}
.hero-role{animation-delay:.90s}
@keyframes heroIn{to{opacity:1;transform:none}}

.hero-cue{
  position:absolute;left:var(--gutter);bottom:clamp(14px,2.2vh,26px);
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);
  transition:color .3s var(--ease);
}
.js .hero-cue{opacity:0;animation:heroIn 1.2s var(--ease-out) 1.5s forwards}
.hero-cue:hover{color:var(--accent)}
.hero-cue svg{width:56px;height:14px;overflow:visible}
.hero-cue path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.hero-cue path.v2{stroke:var(--accent);opacity:.7}
@media (max-width:900px){.hero-cue{display:none}}

/* ==========================================================================
   SCROLL REVEALS
   ========================================================================== */

.js .rv{
  opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);
}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}
.rv[data-d="2"]{transition-delay:.2s}
.rv[data-d="3"]{transition-delay:.3s}
.rv.in.done{transition-delay:0s}

/* ==========================================================================
   THE IDEA
   ========================================================================== */

.idea-grid{
  display:grid;gap:clamp(28px,4.5vw,72px);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){.idea-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}

.idea-lead{
  font-family:var(--display);
  font-size:clamp(31px,4.1vw,54px);
  font-weight:300;line-height:1.1;letter-spacing:-.02em;
  font-variation-settings:'SOFT' 24,'WONK' 1;
  text-wrap:balance;
}
.idea-body p{color:var(--text-secondary)}
.idea-body strong{color:var(--text-primary);font-weight:400}
/* the sentence the whole section turns on */
.idea-body .turn{
  color:var(--text-primary);
  font-style:italic;
  font-family:var(--display);
  font-size:1.13em;line-height:1.4;
  font-variation-settings:'SOFT' 24,'WONK' 1;
}
.idea-out{
  margin-top:clamp(26px,3vw,40px);
  display:inline-flex;align-items:baseline;gap:12px;
}

/* ---------- link styles ---------- */

.lnk{
  display:inline-flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
  padding-block:8px;
  border-bottom:1px solid var(--rule);
  transition:color .32s var(--ease),border-color .32s var(--ease);
}
.lnk::after{
  content:"";flex:none;align-self:center;width:16px;height:10px;
  background:currentColor;
  -webkit-mask:var(--arrow) no-repeat center/contain;
  mask:var(--arrow) no-repeat center/contain;
  transition:transform .32s var(--ease-out);
}
.lnk:hover{color:var(--text-primary);border-bottom-color:var(--rule-strong)}
.lnk:hover::after{transform:translateX(5px)}
.lnk.gold{color:var(--accent);border-bottom-color:var(--accent-muted)}
.lnk.gold:hover{color:var(--accent-hover);border-bottom-color:var(--accent)}
.lnk.plain::after{content:none}

.links{display:flex;flex-wrap:wrap;column-gap:clamp(18px,2.4vw,34px);row-gap:4px;margin-top:clamp(26px,3vw,40px)}

/* ==========================================================================
   MUSIC
   ========================================================================== */

.presence{
  margin-top:clamp(34px,4.5vw,64px);
  display:grid;gap:clamp(24px,4vw,60px);
  grid-template-columns:1fr;
}
@media (min-width:960px){.presence{grid-template-columns:auto minmax(0,1fr);align-items:start}}

.presence-mark{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);white-space:nowrap;padding-top:.6em;
}
.presence p{color:var(--text-secondary);max-width:58ch}
.presence p:last-child{
  color:var(--text-primary);
  font-family:var(--display);
  font-size:clamp(21px,2.05vw,27px);
  line-height:1.32;font-weight:300;letter-spacing:-.012em;
  font-variation-settings:'SOFT' 24,'WONK' 1;
  margin-top:1.4em;
}

/* ---------- work blocks ---------- */

.work{position:relative}
.work + .work{margin-top:clamp(84px,11vw,168px)}

.work-index{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;flex-wrap:wrap;
  column-gap:14px;row-gap:9px;margin-bottom:18px;
}
/* each part stays whole: the eyebrow wraps between them, never inside one */
.work-index .nm,.work-index .yr,.work-index .tag{white-space:nowrap}
.work-index .yr{color:var(--text-secondary)}

.work h3{margin-top:.24em}
.work-note{margin-top:1.1em;color:var(--text-secondary);max-width:60ch}

/* the KAN plate: framed like a painting on a gallery wall, no border,
   full saturation, generous matting. See PROJECT-BRIEF section 5. */
.plate{
  margin-block:clamp(30px,4vw,54px);
  padding:clamp(16px,3.4vw,54px);
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%,rgba(26,42,32,.55),transparent 72%),
    var(--canvas-2);
}
.plate img{
  width:100%;
  box-shadow:0 34px 90px -28px rgba(0,0,0,.9),0 6px 22px -8px rgba(0,0,0,.7);
}
.plate figcaption{
  margin-top:clamp(14px,1.8vw,22px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
}

.meta{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-block:clamp(26px,3.4vw,44px);
}
.meta div{
  padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,32px) clamp(16px,2vw,24px) 0;
  flex:1 1 190px;min-width:0;
}
.meta div + div{border-left:1px solid var(--rule);padding-left:clamp(18px,2.4vw,32px)}
.meta b{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(25px,2.6vw,34px);line-height:1;
  font-variation-settings:'SOFT' 24,'WONK' 1;
}
.meta span{
  display:block;margin-top:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);line-height:1.5;
}

.pull{
  margin-block:clamp(34px,4.6vw,64px);
  padding-left:clamp(20px,3vw,40px);
  border-left:1px solid var(--accent-muted);
  font-family:var(--display);
  font-size:clamp(23px,2.7vw,36px);
  font-weight:300;line-height:1.24;letter-spacing:-.018em;
  font-variation-settings:'SOFT' 30,'WONK' 1;
  max-width:22ch;
  text-wrap:balance;
}
.pull cite{
  display:block;margin-top:1em;
  font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);
}

/* ==========================================================================
   THE MOVEMENTS
   Six boxes side by side, so the whole progression is visible at once and any
   one of them is one click away. Mood first, per PROJECT-BRIEF section 9.
   Six across needs the wide container; below that it steps to three, then two.
   ========================================================================== */

.mv-intro{
  margin-block:clamp(30px,4vw,54px) clamp(24px,3vw,38px);
  color:var(--text-secondary);max-width:58ch;
}

.movements{
  list-style:none;
  display:grid;gap:1px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--rule);
  border-block:1px solid var(--rule);
}
@media (min-width:680px){.movements{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.movements{grid-template-columns:repeat(6,minmax(0,1fr))}}

.mv{
  position:relative;
  background:var(--canvas);
  padding:clamp(18px,1.7vw,26px) clamp(14px,1.3vw,20px) clamp(16px,1.5vw,22px);
  display:flex;flex-direction:column;
  transition:background-color .5s var(--ease);
}
.mv.is-playing{background:var(--panel)}
.mv.is-open{background:var(--canvas-2)}
/* the gold thread: it lights only on the movement you are in */
.mv::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent);opacity:0;
  transition:opacity .5s var(--ease);
}
.mv.is-playing::before{opacity:1}

.mv-num{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;
  color:var(--accent);margin-bottom:14px;
}
.mv-mood{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);line-height:1.7;margin-bottom:12px;
}
.mv-title{
  font-size:clamp(18px,1.45vw,21px);line-height:1.14;margin:0;
  /* room for the longest case, a two line title plus a subtitle, so the
     durations and the play buttons line up straight across all six */
  min-height:3.55em;
}
.mv-title .sub{
  display:block;margin-top:.5em;
  font-family:var(--body);font-size:12.5px;font-weight:300;font-style:italic;
  letter-spacing:0;color:var(--text-secondary);line-height:1.35;
}
.mv-len{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--text-secondary);margin-top:10px;
}
.mv-desc{
  margin:0 0 14px;
  color:var(--text-secondary);font-size:14px;line-height:1.6;
}

/* Collapsed, the players sit on a common baseline across all six boxes.
   Open, the box fills from the top instead, so a short movement does not
   leave a hole in the middle of the strip. */
.clips{margin-top:auto;padding-top:clamp(14px,1.5vw,20px)}
.mv.is-open .clips{margin-top:0}
html:not(.js) .clips{margin-top:0}

/* ---------- the excerpt player ---------- */

.clip{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:11px;
  width:100%;text-align:left;
  padding:9px 0;
  color:var(--text-secondary);
  transition:color .3s var(--ease);
}
.clip + .clip{border-top:1px solid rgba(239,234,224,.07)}
.clip:hover{color:var(--text-primary)}
.clip:hover .clip-btn{border-color:var(--accent);color:var(--accent)}

.clip-btn{
  position:relative;
  width:32px;height:32px;flex:none;
  border:1px solid var(--rule-ui);border-radius:50%;
  display:grid;place-items:center;
  color:var(--text-secondary);
  transition:border-color .34s var(--ease),color .34s var(--ease),background-color .34s var(--ease);
}
.clip-btn svg{width:10px;height:11px;fill:currentColor;transform:translateX(1px)}
.clip-btn .pause{display:none;transform:none}
.clip.is-playing .clip-btn{border-color:var(--accent);color:var(--accent);background:rgba(201,162,39,.1)}
.clip.is-playing .clip-btn .play{display:none}
.clip.is-playing .clip-btn .pause{display:block}
.clip.is-loading .clip-btn{border-color:var(--accent-muted)}
.clip.is-loading .clip-btn::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid transparent;border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.clip-label{
  font-family:var(--body);font-size:14px;font-weight:300;line-height:1.35;
  min-width:0;
}
.clip-time{
  grid-column:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;color:var(--text-secondary);
  margin-top:3px;
}
/* the playhead is the signature again: a gold voice crossing a still one */
.clip-track{
  grid-column:2;height:1px;position:relative;
  background:var(--rule);margin-top:7px;
  opacity:0;transition:opacity .4s var(--ease);
}
.clip.is-playing .clip-track,.clip.is-paused .clip-track{opacity:1}
.clip-track i{
  position:absolute;inset-block:0;left:0;display:block;width:100%;
  background:var(--accent);
  transform-origin:left center;transform:scaleX(0);
}
.clip.is-missing{opacity:.42;cursor:default;pointer-events:none}

.clip-more{overflow:hidden}
.js .clip-more{
  max-height:0;opacity:0;
  transition:max-height .55s var(--ease-out),opacity .4s var(--ease);
}
.mv.is-open .clip-more{opacity:1}
.clip-more .mv-desc{padding-top:14px}

.more{display:none}
.js .more{
  margin-top:12px;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);
  transition:color .3s var(--ease);
}
.more:hover{color:var(--accent)}
.more .chev{
  width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .45s var(--ease-out);
}
.mv.is-open .more .chev{transform:rotate(-135deg) translate(-2px,-2px)}

.listen-row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(30px,3.6vw,48px);
}
.listen-row .cue{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);
}

/* ==========================================================================
   IMAGE + TEXT WORK BLOCKS
   ========================================================================== */

.split{display:grid;gap:clamp(28px,4.2vw,64px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split.flip .shot{order:2}
}

.shot{position:relative;overflow:hidden;background:var(--canvas-2)}
.shot img{
  width:100%;
  filter:saturate(.75) contrast(1.04) brightness(.9);
  transform:scale(1);
  transition:transform 1.5s var(--ease-out),filter 1.5s var(--ease-out);
}
.shot:hover img{transform:scale(1.035);filter:saturate(.86) contrast(1.05) brightness(1)}
.shot.full img{filter:saturate(.94) contrast(1.02) brightness(.97)}
.shot.full:hover img{filter:saturate(1.04) contrast(1.02) brightness(1.03)}
.cap{
  position:absolute;left:0;bottom:0;right:0;
  padding:clamp(16px,2.2vw,26px);
  background:linear-gradient(0deg,rgba(10,13,11,.9),rgba(10,13,11,0));
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);
}

/* ==========================================================================
   LIVE + CREDENTIALS
   ========================================================================== */

.creds{
  display:grid;gap:1px;
  grid-template-columns:1fr;
  background:var(--rule);
  border-block:1px solid var(--rule);
  margin-top:clamp(40px,5vw,72px);
}
@media (min-width:760px){.creds{grid-template-columns:repeat(3,1fr)}}
.cred{
  background:var(--canvas);
  padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,32px);
}
.cred .k{
  display:block;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.cred .v{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(21px,2.1vw,27px);line-height:1.14;letter-spacing:-.012em;
  font-variation-settings:'SOFT' 24,'WONK' 1;
}
.cred p{margin-top:12px;font-size:14.5px;color:var(--text-secondary);line-height:1.6}

/* ==========================================================================
   INSIGHTS
   ========================================================================== */

.cards{
  display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);
  grid-template-columns:1fr;
  margin-top:clamp(34px,4vw,56px);
}
@media (min-width:820px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{
  display:flex;flex-direction:column;
  background:var(--canvas);
  padding:clamp(26px,3vw,44px);
  transition:background-color .5s var(--ease);
}
.card:hover{background:var(--panel)}
.card .k{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:20px;
}
.card h4{margin-bottom:.6em}
.card p{color:var(--text-secondary);font-size:15.5px;line-height:1.68;flex:1}
.card .go{
  margin-top:26px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
  display:inline-flex;gap:9px;
  transition:color .3s var(--ease);
}
.card .go::after{
  content:"";flex:none;align-self:center;width:16px;height:10px;
  background:currentColor;
  -webkit-mask:var(--arrow) no-repeat center/contain;
  mask:var(--arrow) no-repeat center/contain;
  transition:transform .32s var(--ease-out);
}
.card:hover .go{color:var(--accent)}
.card:hover .go::after{transform:translateX(5px)}

.series{
  list-style:none;margin-top:clamp(34px,4vw,52px);
  border-top:1px solid var(--rule);
}
.series li{border-bottom:1px solid var(--rule)}
.series a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;gap:clamp(12px,2vw,26px);
  padding:clamp(15px,1.8vw,21px) 0;
  transition:color .34s var(--ease),padding-left .45s var(--ease-out);
}
.series a:hover{color:var(--accent);padding-left:12px}
.series .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--text-secondary)}
.series .t{font-family:var(--display);font-size:clamp(17px,1.5vw,21px);font-weight:300;letter-spacing:-.008em;font-variation-settings:'SOFT' 24,'WONK' 1}
.series .g{
  width:16px;height:10px;align-self:center;
  background:var(--text-secondary);
  -webkit-mask:var(--arrow) no-repeat center/contain;
  mask:var(--arrow) no-repeat center/contain;
  transition:transform .32s var(--ease-out),background-color .32s var(--ease);
}
.series a:hover .g{background:var(--accent)}
.series a:hover .g{transform:translateX(5px)}

/* ==========================================================================
   PRACTICES
   ========================================================================== */

.practice-lines{
  font-family:var(--display);
  font-size:clamp(23px,2.6vw,34px);
  font-weight:300;line-height:1.24;letter-spacing:-.016em;
  font-variation-settings:'SOFT' 26,'WONK' 1;
  max-width:26ch;text-wrap:balance;
}
.practice-body{margin-top:clamp(24px,2.8vw,36px);color:var(--text-secondary);max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,3.4vw,44px)}

/* One panel, not a row of chips. A row of five implied five things to say and
   then said very little. */
.cred-panel{
  margin-top:clamp(30px,3.4vw,44px);
  border:1px solid var(--rule);
  padding:clamp(22px,2.6vw,34px);
  max-width:42ch;
}
.cred-head{
  font-family:var(--display);font-weight:500;
  font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-.012em;
  font-variation-settings:'SOFT' 24,'WONK' 1;
  color:var(--text-primary);
}
.cred-panel ul{list-style:none;margin-top:16px}
.cred-panel li{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);line-height:2.1;
}
.chip{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
  border:1px solid var(--rule);
  padding:9px 15px;
}

/* ==========================================================================
   WHO I AM
   ========================================================================== */

.who{display:grid;gap:clamp(30px,4.4vw,68px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.who{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}}
.who p{color:var(--text-secondary)}
.who .opener{
  color:var(--text-primary);
  font-family:var(--display);font-size:clamp(21px,2.1vw,28px);
  font-weight:300;line-height:1.32;letter-spacing:-.014em;
  font-variation-settings:'SOFT' 24,'WONK' 1;
}

/* ==========================================================================
   NEWSLETTER + BOOKING
   ========================================================================== */

.band{
  background:
    linear-gradient(180deg,rgba(26,42,32,.42),rgba(26,42,32,0)),
    var(--canvas-2);
  border-block:1px solid var(--rule);
}
/* Live is where the blue lit photographs live, so the section drifts cool
   underneath them. The two grounds cross once, the way the two voices do. */
#live{
  background:
    linear-gradient(180deg,rgba(9,14,21,0),rgba(9,14,21,.85) 22%,rgba(9,14,21,.85) 78%,rgba(9,14,21,0)),
    transparent;
}
#live .cap{background:linear-gradient(0deg,rgba(9,14,21,.92),rgba(9,14,21,0))}

.sign{display:grid;gap:clamp(26px,4vw,60px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.sign{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}}
.sign p{color:var(--text-secondary);max-width:52ch}
.sign-cta{
  border-left:1px solid var(--accent-muted);
  padding-left:clamp(20px,3vw,40px);
}
.sign-alt{margin-top:22px;font-size:15px;color:var(--text-secondary);max-width:44ch}
.sign-alt a{color:var(--text-primary);border-bottom:1px solid var(--accent-muted);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.sign-alt a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:899px){.sign-cta{border-left:0;border-top:1px solid var(--accent-muted);padding-left:0;padding-top:clamp(20px,4vw,32px)}}

.booking{text-align:center}
.booking .label{justify-content:center}
.booking .label::after{display:none}
.booking h2{margin-bottom:.42em}
.booking > p{margin-inline:auto;color:var(--text-secondary);max-width:46ch}

.contact{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:clamp(34px,4vw,52px);
}
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 26px;
  border:1px solid var(--rule-ui);
  color:var(--text-primary);
  transition:border-color .34s var(--ease),background-color .34s var(--ease),color .34s var(--ease);
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{border-color:var(--accent);color:var(--accent)}
.btn.primary:hover{background:var(--accent);color:var(--canvas)}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}
.btn .done{display:none}
.btn.copied .idle{display:none}
.btn.copied .done{display:inline}
.btn.copied{border-color:var(--accent);color:var(--accent)}
@media (pointer:coarse){
  .btn{min-height:48px;justify-content:center}
  .clip-btn{width:44px;height:44px}
  .more{min-height:44px}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer{
  border-top:1px solid var(--rule);
  padding-block:clamp(52px,6vw,84px) clamp(34px,4vw,48px);
}
.fgrid{
  display:grid;gap:clamp(30px,4vw,60px);grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:820px){.fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}}
.flogo{
  width:min(340px,78%);height:auto;opacity:.88;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.fsub{margin-top:14px;color:var(--text-secondary);font-size:15px;max-width:34ch}
.flinks{
  display:grid;gap:12px 26px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
}
.flinks a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
  transition:color .3s var(--ease);
}
.flinks a:hover{color:var(--accent)}
.fbot{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  margin-top:clamp(40px,5vw,68px);padding-top:24px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
}


/* ---------- full saturation images (KAN artwork rule, PROJECT-BRIEF s5) ---------- */
.shot img.saturated,.shot:hover img.saturated{filter:none}

/* ---------- the third work: deliberately a different shape from the two
     features above it, so the row of works never reads as one template
     stamped three times ---------- */
.strip{
  display:grid;gap:clamp(20px,3.4vw,54px);
  grid-template-columns:1fr;
  border:1px solid var(--rule);
  padding:clamp(26px,3.6vw,52px);
  background:linear-gradient(135deg,rgba(21,28,23,.6),transparent 62%);
}
@media (min-width:900px){.strip{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-items:start}}
.strip h4{margin-top:.4em}
.strip p{color:var(--text-secondary);max-width:56ch}

/* ---------- who I am portrait ---------- */
.who .shot img{aspect-ratio:3/4;object-fit:cover}

/* ---------- pause every loop on a hidden tab. animation-play-state does
     not inherit, so it has to be aimed at pseudo elements too ---------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ==========================================================================
   REDUCED MOTION, honored completely
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .rv{opacity:1;transform:none}
  .split-words .w{opacity:1 !important;transform:none !important}
  .hero h1 span,.hero-sub,.hero-role,.hero-cue{opacity:1;transform:none}
  .cp path{stroke-dashoffset:0}
  .shot:hover img{transform:none}
}

/* ---------- the counterpoint mark: the signature at logo size ---------- */
.cpmark{overflow:visible}
/* Three voices: warm, gold, and a cool silver that carries a heavier stroke so
   it holds its own against the other two rather than receding. */
.cpmark path{fill:none;stroke:var(--text-secondary);stroke-width:1.35;vector-effect:non-scaling-stroke}
.cpmark path.v2{stroke:var(--accent);stroke-width:1.35}
.cpmark path.v3{stroke:#8FA6B2;stroke-width:1.85;opacity:.9}

/* ==========================================================================
   ADDITIONS
   ========================================================================== */

/* The music heading. Three lines that escalate. The third carries the weight
   through colour and weight, not through a big jump in size. */
.music-h{display:flex;flex-direction:column;gap:.14em;line-height:1.1}
.music-h .s{font-size:clamp(26px,3.5vw,44px);color:var(--text-primary)}
.music-h .k{
  font-size:clamp(29px,3.9vw,49px);
  font-weight:500;color:var(--accent);
  font-variation-settings:'SOFT' 30,'WONK' 1;
}

/* a full width photograph that sits inside a section rather than beside text */
.band-shot{max-height:min(66vh,620px)}
.band-shot img{width:100%;height:100%;object-fit:cover;object-position:center 34%}

/* icons */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:15px;height:15px;flex:none;fill:currentColor}
#nav .nav-icons{display:flex;align-items:center;gap:15px;margin-inline-start:clamp(14px,2vw,28px);padding-inline-start:clamp(14px,2vw,28px);border-left:1px solid var(--rule)}
#nav .nav-icons a{display:grid;place-items:center;color:var(--text-secondary);padding:4px;border:0}
#nav .nav-icons a:hover{color:var(--accent)}
#nav .nav-icons .ic{width:16px;height:16px}
@media (max-width:860px){#nav .nav-icons{display:none}}
.flinks a{display:flex;align-items:center;gap:9px}
.btn .ic{width:14px;height:14px}
.btn .cp-ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}

/* the Less Than Three trailer, beside its links */
.frame{position:relative;aspect-ratio:16/9;background:var(--canvas-2);border:1px solid var(--rule)}
@media (min-width:900px){
  /* the column is much shorter than the prose beside it, so instead of
     floating in the middle of a void it travels with the reading */
  .split.flip > .frame{position:sticky;top:104px;align-self:start}
}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (min-width:900px){.split.flip .frame{order:2}}

/* the first work block after the listen row needs its own air */
.listen-row + .work{margin-top:clamp(84px,11vw,168px)}

/* the vertical reel in the Live section */
.reel{position:relative;margin:0;max-width:340px;justify-self:center}
/* height:auto matters. The element carries width/height attributes for the
   intrinsic ratio, and a non-auto height makes the browser ignore
   aspect-ratio entirely, which was rendering this at its literal pixel
   height instead of its shape. */
.reel video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--canvas-2)}
.reel figcaption{
  margin-top:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);
}
.reel-btn{
  position:absolute;left:50%;top:calc(50% - 20px);transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;
  border:1px solid var(--rule-ui);background:rgba(10,13,11,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;color:var(--text-primary);
  transition:border-color .34s var(--ease),color .34s var(--ease),opacity .34s var(--ease);
}
.reel-btn svg{width:15px;height:16px;fill:currentColor;transform:translateX(2px)}
.reel-btn:hover{border-color:var(--accent);color:var(--accent)}
.reel.is-playing .reel-btn{opacity:0;pointer-events:none}
.reel.is-playing:hover .reel-btn{opacity:1;pointer-events:auto}

/* inline subscribe fields */
.inline-sub,.kit-form{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.inline-sub input,.kit-form input{
  flex:1 1 170px;min-width:0;
  background:var(--canvas);
  border:1px solid var(--rule-ui);
  color:var(--text-primary);
  font-family:var(--body);font-size:15px;font-weight:300;
  padding:13px 14px;
}
.inline-sub input::placeholder,.kit-form input::placeholder{color:var(--text-secondary);opacity:.8}
.inline-sub input:focus-visible,.kit-form input:focus-visible{border-color:var(--accent)}
.inline-sub button{
  flex:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 20px;
  border:1px solid var(--accent);color:var(--accent);
  transition:background-color .34s var(--ease),color .34s var(--ease);
}
.inline-sub button:hover{background:var(--accent);color:var(--canvas)}
.kit-form .btn{flex:none}
.kit-form input{flex:1 1 200px}
@media (pointer:coarse){.inline-sub input,.kit-form input,.inline-sub button{min-height:48px}}

/* the series list gains a description line and reads as a grid of boxes */
.series{
  list-style:none;margin-top:clamp(20px,2.4vw,30px);
  display:grid;gap:1px;grid-template-columns:1fr;
  background:var(--rule);border:1px solid var(--rule);
}
@media (min-width:720px){.series{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.series{grid-template-columns:repeat(3,minmax(0,1fr))}}
.series li{border:0}
.series a{
  display:block;height:100%;
  background:var(--canvas);
  padding:clamp(20px,2.2vw,30px);
  transition:background-color .45s var(--ease),color .34s var(--ease);
  position:relative;
}
.series a:hover{background:var(--panel);padding-left:clamp(20px,2.2vw,30px)}
.series .n{
  display:block;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent);
  margin-bottom:14px;
}
.series .t{
  display:block;
  font-family:var(--display);font-size:clamp(18px,1.55vw,22px);font-weight:300;
  line-height:1.16;letter-spacing:-.01em;font-variation-settings:'SOFT' 24,'WONK' 1;
}
.series .d{
  display:block;margin-top:12px;
  font-size:14px;line-height:1.62;color:var(--text-secondary);
}
.series .g{
  display:block;margin-top:18px;
  width:16px;height:10px;
  background:var(--text-secondary);
  -webkit-mask:var(--arrow) no-repeat center/contain;
  mask:var(--arrow) no-repeat center/contain;
  transition:transform .32s var(--ease-out),background-color .32s var(--ease);
}
.series a:hover .g{transform:translateX(5px);background:var(--accent)}

/* ==========================================================================
   THE QUIET LAYER
   Four whisper level additions that do most of the work of feeling expensive:
   grain, a scroll thread, word by word arrivals, and images that resolve in
   rather than pop. None of them announce themselves.
   ========================================================================== */

/* 0. The weave. A fine twill at two and three percent, used only on the
      surfaces that already read as panels, so it stays an occasional tactile
      note rather than wallpaper. Carbon fibre, because that is what his
      gigging violin is made of. */
.weave{
  position:relative;
}
.weave::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(45deg,rgba(198,210,214,.016) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(-45deg,rgba(198,210,214,.010) 0 1px,transparent 1px 5px);
  background-size:10px 10px;
  -webkit-mask-image:var(--ribbon);mask-image:var(--ribbon);
  -webkit-mask-size:100% 760px;mask-size:100% 760px;
  -webkit-mask-position:0 calc(var(--sheen,0px) * .6);mask-position:0 calc(var(--sheen,0px) * .6);
}
.weave > *{position:relative;z-index:1}

/* 1. Grain. A single tiled turbulence tile at very low opacity, so flat
      colour fields get the tooth of print instead of reading as digital flat. */
.grain{
  /* BEHIND the content, not over it. Over the top, even at 3 percent, the
     noise lands inside the glyphs and small body text starts reading as bad
     rendering rather than texture. Behind, it gives the flat canvas its tooth
     and never touches a letterform. */
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* 2. The scroll thread. One gold voice crossing the top of the page, the same
      idea as the counterpoint rule, drawn by how far you have come. */
.thread{position:fixed;inset-inline:0;top:0;height:1px;z-index:90;pointer-events:none;background:var(--rule)}
.thread i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--rust),var(--accent) 70%);
  transform-origin:left center;transform:scaleX(0);
}
html:not(.js) .thread{display:none}

/* 3. Word by word arrivals on the display lines that carry the most weight. */
.split-words .w{display:inline-block;white-space:pre}
.js .split-words .w{
  opacity:0;transform:translateY(.42em);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
/* .in lands on the .rv wrapper, not on the split element itself, so accept
   either. Requiring it on the element alone left the line permanently at
   opacity 0. */
.js .in .split-words .w,
.js .split-words.in .w{opacity:1;transform:none}

/* 4. Images resolve in as they decode instead of snapping. */
.js .shot img,.js .plate img{opacity:0;transition:opacity 1.1s var(--ease-out),transform 1.5s var(--ease-out),filter 1.5s var(--ease-out)}
.js .shot img.ready,.js .plate img.ready{opacity:1}

/* ==========================================================================
   MUSIC: the player block, the work tags, the Samueltaneous aside
   ========================================================================== */

.player-block{margin-top:clamp(48px,6vw,88px);align-items:center}
.player-block .shot img{aspect-ratio:3/4;object-fit:cover;object-position:center 42%}

.role-line{
  margin-top:clamp(24px,2.8vw,34px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);line-height:1.9;max-width:46ch;
}

.work-index .tag{
  color:var(--text-secondary);
  border:1px solid var(--rule);
  padding:4px 10px;margin-inline-start:4px;
  font-size:9.5px;letter-spacing:.2em;
  white-space:nowrap;
}

.works-label{margin-top:clamp(64px,8vw,120px)}
.works-label + .work{margin-top:clamp(28px,3.4vw,44px)}

/* the live project sits under Less Than Three as a related note, deliberately
   shaped unlike the work blocks around it */
.aside{
  display:grid;gap:clamp(16px,2.6vw,44px);grid-template-columns:1fr;
  margin-top:clamp(40px,5vw,72px);
  padding-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--rule);
}
@media (min-width:900px){.aside{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}}
.aside-k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);padding-top:.5em;
}
.aside h4{margin-bottom:.7em}
.aside p{color:var(--text-secondary);max-width:60ch}

/* the stacked Less Than Three headline: one claim per line */
/* four claims, one per line. Sized so the longest one does not wrap in the
   half width column it lives in, which is the whole point of stacking them. */
h3.stack{display:flex;flex-direction:column;gap:.12em;line-height:1.18}
h3.stack span{display:block;font-size:clamp(20px,2.05vw,29px)}

/* ==========================================================================
   LIVE: the wide photograph and the vertical reel share one row
   ========================================================================== */

.live-pair{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:1fr;align-items:start}
/* the two are different shapes, so the ratios are chosen to land their
   bottom edges at roughly the same place rather than leaving a void */
@media (min-width:820px){.live-pair{grid-template-columns:minmax(0,1fr) minmax(0,.34fr)}}
.live-pair .shot.full img{aspect-ratio:3/2;object-fit:cover}
.live-pair .reel{max-width:none;width:100%}

/* ==========================================================================
   FINAL PASS
   ========================================================================== */

/* A compact copy of the booking pair, so an enquiry never throws the reader
   to the bottom of the page and makes them find their place again. */
.mini-contact{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.btn.small{
  font-size:10px;letter-spacing:.14em;
  padding:10px 16px;gap:9px;
}
.btn.small .ic,.btn.small .cp-ic{width:12px;height:12px}
.mini-contact .lnk{margin-inline-start:6px}
@media (pointer:coarse){.btn.small{min-height:44px}}

/* the closing line of Who I Am carries more weight than the paragraphs above */
.who .closing{
  margin-top:1.6em;
  color:var(--text-primary);
  font-family:var(--display);font-size:clamp(18px,1.55vw,22px);
  font-weight:300;line-height:1.42;letter-spacing:-.01em;
  font-variation-settings:'SOFT' 24,'WONK' 1;
  border-left:1px solid var(--accent-muted);
  padding-left:clamp(16px,1.8vw,24px);
}

/* the logo is a quiet signature now, not a feature */
.flogo{
  width:min(150px,42%);height:auto;opacity:.62;
  margin-bottom:clamp(18px,2vw,26px);
  transition:opacity .5s var(--ease);
}
footer:hover .flogo{opacity:.8}

/* ==========================================================================
   THE VERTICAL STRAND
   A second, quieter texture than the twill. Fine vertical hairlines with a
   slight lean, masked so they fade in and out down the section instead of
   running edge to edge like wallpaper. Its job is to carry the eye downward.
   Backdrops only. It never lands on a panel that already has the twill.
   ========================================================================== */

.strand{position:relative}
.strand::after{
  content:"";position:absolute;inset:7% 0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(93deg,rgba(198,210,214,.026) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(87deg,rgba(198,210,214,.015) 0 1px,transparent 1px 14px);
  /* The ribbon mask is what stops this reading as a field. The texture only
     shows inside soft diagonal bands, and the bands drift as you scroll, so it
     behaves the way a woven surface does when you tilt it into the light. */
  -webkit-mask-image:var(--ribbon);mask-image:var(--ribbon);
  -webkit-mask-size:100% 900px;mask-size:100% 900px;
  -webkit-mask-position:0 var(--sheen,0px);mask-position:0 var(--sheen,0px);
}
.strand > *{position:relative;z-index:1}

/* the parenthetical stays in his voice but sits back from the claim */
.aside-note{color:var(--text-secondary);opacity:.85}

/* ==========================================================================
   THE SECTION RAIL
   Seven ticks in the left margin. The active one grows and turns gold, and
   its name appears beside it. Wide screens only, since narrower ones have no
   margin to give it, and only once the hero is gone.
   ========================================================================== */

.rail{
  position:fixed;left:12px;top:50%;z-index:70;
  transform:translateY(-50%);
  opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease);
}
.rail.show{opacity:1;pointer-events:auto}
.rail ol{list-style:none;display:flex;flex-direction:column;gap:14px}
.rail a{
  display:flex;align-items:center;gap:12px;
  padding:3px 0;
  text-decoration:none;
}
.rail .tick{
  display:block;width:14px;height:1px;flex:none;
  background:var(--rule-strong);
  transition:width .45s var(--ease-out),background-color .45s var(--ease);
}
.rail .rl{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);
  opacity:0;transform:translateX(-4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease-out),color .4s var(--ease);
  white-space:nowrap;
}
.rail a:hover > .tick,.rail a:focus-visible > .tick{width:26px;background:var(--text-primary)}
.rail a:hover > .rl,.rail a:focus-visible > .rl{opacity:1;transform:none;color:var(--text-primary)}
.rail > ol > li.is-here > a > .tick{width:30px;background:var(--accent)}
.rail > ol > li.is-here > a > .rl{opacity:1;transform:none;color:var(--accent)}

/* Music runs far longer than any other section, so it carries sub ticks. They
   only unfold while you are inside Music, which keeps the rail at seven the
   rest of the time. */
.rail .sub{
  list-style:none;
  display:grid;grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .5s var(--ease-out),opacity .4s var(--ease);
}
.rail .sub > li{overflow:hidden;min-height:0}
.rail li.has-sub.is-open > .sub{grid-template-rows:1fr;opacity:1}
.rail .sub li a{padding-left:10px;gap:10px}
.rail .sub .tick{width:8px;opacity:.7}
.rail .sub .rl{font-size:9px;letter-spacing:.12em}
.rail .sub > li.is-here > a > .tick{width:18px;background:var(--accent);opacity:1}
.rail .sub > li.is-here > a > .rl{opacity:1;transform:none;color:var(--accent)}
.rail li.has-sub.is-open > .sub{margin-top:12px}
.rail .sub{row-gap:0}
.rail .sub > li{padding-block:5px}

/* no room for it below this, and nothing to light it without scripting */
@media (max-width:1360px){.rail{display:none}}
html:not(.js) .rail{display:none}

/* the top nav says where you are too, at no extra cost in chrome */
#nav a.is-here{color:var(--accent)}

/* ==========================================================================
   A vignette for photographs with a bright, flat background. The corners fall
   away into the canvas so a white wall stops reading as a lit rectangle
   pasted onto a dark page.
   ========================================================================== */
.shot.vignette::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 78% 70% at 50% 44%,
    rgba(10,13,11,0) 40%,rgba(10,13,11,.34) 74%,rgba(10,13,11,.66) 100%);
}
.shot.vignette img{filter:saturate(.72) contrast(1.05) brightness(.84)}
.shot.vignette:hover img{filter:saturate(.82) contrast(1.05) brightness(.92)}

/* two photographs read as one statement: stillness and movement */
.pair{display:grid;gap:clamp(10px,1.4vw,18px);grid-template-columns:1fr}
@media (min-width:720px){.pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pair .shot img{aspect-ratio:3/2;object-fit:cover}
.pair-cap{
  margin-top:clamp(12px,1.4vw,18px);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);
}

/* ==========================================================================
   HARMONIOUS REALITY
   Same palette, same type, same signature, different weighting. This site is
   about the idea rather than the person, so it leads with the argument drawn
   rather than with a photograph.
   ========================================================================== */

/* ---------- the hero: the counterpoint figure at full scale ---------- */

.hr-hero{min-height:min(100svh,880px);justify-content:center;padding-block:clamp(90px,12vh,150px) clamp(48px,7vh,96px)}

.voices{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.voices svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.voices path{
  fill:none;stroke:var(--text-primary);stroke-width:1;
  vector-effect:non-scaling-stroke;opacity:.24;
}
.js .voices path{
  stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:voiceDraw 3.4s var(--ease-out) forwards;
}
@keyframes voiceDraw{to{stroke-dashoffset:0}}
.voices .v2{stroke:var(--accent);opacity:.5;animation-delay:.22s}
.voices .v3{opacity:.16;animation-delay:.44s}
.voices .v4{stroke:var(--accent);opacity:.22;animation-delay:.62s}
.voices .v5{opacity:.11;animation-delay:.80s}
.voices .v6{opacity:.11;animation-delay:.96s}

/* the crossing point gets a soft glow, so the resolution is the bright moment */
.voices::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 46% 40% at 50% 50%,rgba(201,162,39,.16),transparent 62%);
}
/* and the type still has to win over it */
.hr-hero .hero-body::before{
  inset:-26% -18% -30% -14%;
  background:radial-gradient(ellipse 66% 62% at 42% 52%,
    rgba(5,8,6,.92) 0%,rgba(5,8,6,.8) 36%,rgba(5,8,6,.46) 60%,rgba(5,8,6,0) 84%);
}

.hr-hero h1{gap:.16em;line-height:1.12}
.hr-hero h1 .l2{
  font-size:clamp(22px,2.9vw,38px);
  color:#C4CBBD;max-width:30ch;
}
.hr-hero h1 .l3{
  font-size:clamp(28px,3.9vw,52px);
  color:var(--accent);margin-top:.34em;max-width:26ch;
  font-variation-settings:'SOFT' 30,'WONK' 1;
}
.hr-hero .hero-sub{margin-top:clamp(26px,3.4vh,40px);max-width:48ch}
.js .hr-hero h1 .l2:nth-of-type(1){animation-delay:.5s}
.js .hr-hero h1 .l2:nth-of-type(2){animation-delay:.72s}
.js .hr-hero h1 .l2:nth-of-type(3){animation-delay:.94s}
.js .hr-hero h1 .l3{animation-delay:1.24s}
.js .hr-hero .hero-sub{animation-delay:1.56s}

/* ---------- the argument: a lede that carries, a body that explains ---------- */

.arg-grid{
  display:grid;gap:clamp(28px,4.4vw,68px);grid-template-columns:1fr;
  margin-top:clamp(30px,4vw,54px);align-items:start;
}
@media (min-width:900px){.arg-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.arg-body p{color:var(--text-secondary)}
.arg-body strong{color:var(--text-primary);font-weight:400}

.note{
  display:grid;gap:clamp(16px,2.6vw,44px);grid-template-columns:1fr;
  margin-top:clamp(34px,4.4vw,64px);padding-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--rule);
}
@media (min-width:900px){.note{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}}
.note-k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);padding-top:.5em;
}
.note p{color:var(--text-secondary);max-width:62ch}

.pull.closer{
  margin-top:clamp(50px,6vw,88px);max-width:34ch;
  border-left-color:var(--accent);
}

/* three readings of one idea */
#inner .cards{grid-template-columns:1fr;margin-top:clamp(40px,5vw,70px)}
@media (min-width:760px){#inner .cards{grid-template-columns:repeat(3,1fr)}}
.after-cards{
  margin-top:clamp(34px,4vw,52px);
  color:var(--text-secondary);max-width:70ch;
}

/* ---------- join ---------- */

.join-grid{display:grid;gap:clamp(30px,4.4vw,68px);grid-template-columns:1fr;margin-top:clamp(30px,4vw,54px)}
@media (min-width:900px){.join-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ifs{list-style:none;counter-reset:ifs}
.ifs li{
  counter-increment:ifs;
  position:relative;padding-left:44px;
  padding-block:clamp(14px,1.7vw,20px);
  border-top:1px solid var(--rule);
  color:var(--text-primary);
  font-family:var(--display);font-weight:300;
  font-size:clamp(17px,1.5vw,21px);line-height:1.35;letter-spacing:-.008em;
  font-variation-settings:'SOFT' 24,'WONK' 1;
}
.ifs li:last-child{border-bottom:1px solid var(--rule)}
.ifs li::before{
  content:counter(ifs,decimal-leading-zero);
  position:absolute;left:0;top:calc(clamp(14px,1.7vw,20px) + .35em);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--accent);
}
.join-grid p{color:var(--text-secondary);max-width:54ch}

/* ---------- footer mark ---------- */
.hr-mark{
  display:flex;align-items:center;gap:14px;
  font-family:var(--display);font-size:22px;font-weight:300;letter-spacing:-.01em;
  font-variation-settings:'SOFT' 24,'WONK' 1;
}
.hr-mark .cpmark{width:30px;height:15px;flex:none}
.fsub{font-family:var(--body)}

@media (prefers-reduced-motion:reduce){
  .js .voices path{stroke-dashoffset:0;animation:none}
}

/* ---------- the scope: what he brings, and what it also takes ---------- */

.fields-k{
  margin-top:clamp(34px,4vw,54px);margin-bottom:clamp(16px,1.8vw,24px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
}
.fields.mine{
  display:grid;gap:1px;grid-template-columns:1fr;
  background:var(--rule);border:1px solid var(--rule);
}
@media (min-width:760px){.fields.mine{grid-template-columns:repeat(3,1fr)}}
.field{background:var(--canvas);padding:clamp(24px,2.8vw,38px)}
.field .k{
  display:block;margin-bottom:14px;
  font-family:var(--display);font-weight:400;
  font-size:clamp(21px,2vw,27px);line-height:1.1;letter-spacing:-.014em;
  color:var(--text-primary);
  font-variation-settings:'SOFT' 24,'WONK' 1;
}
.field p{color:var(--text-secondary);font-size:15px;line-height:1.68}

.fields.open{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:680px){.fields.open{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:980px){.fields.open{grid-template-columns:repeat(4,minmax(0,1fr))}}
.field-chip{
  display:flex;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.5;color:var(--text-secondary);
  border:1px solid var(--rule);
  padding:13px 16px;min-height:52px;
}
.field-chip.open-slot{
  color:var(--accent);border-color:var(--accent-muted);
  border-style:dashed;
}
#scope .note{border-top-color:var(--rule)}
#scope .note strong{color:var(--text-primary);font-weight:400}

/* ---------- scope additions ---------- */
/* Two by two. Four narrow columns made the longest block a thin ribbon of
   text, and three across left one orphan on its own row. */
@media (min-width:720px){.fields.mine{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fields-note{
  margin-top:clamp(18px,2vw,26px);
  color:var(--text-secondary);font-size:15px;line-height:1.7;max-width:74ch;
}
.field-chip.quiet{color:var(--text-secondary);opacity:.62;border-style:dashed}
.field-chip.open-slot strong{font-weight:600;color:var(--accent)}

/* ---------- the work: three pieces, each a marginal label and a block ---------- */
.piece{
  display:grid;gap:clamp(14px,2.4vw,44px);grid-template-columns:1fr;
  margin-top:clamp(38px,4.6vw,68px);
  padding-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--rule);
}
@media (min-width:900px){.piece{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}}
.piece-k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);padding-top:.6em;
}
.piece h3{font-size:clamp(23px,2.4vw,32px);margin-bottom:.7em}
.piece p{color:var(--text-secondary);max-width:62ch}
.piece p + p{margin-top:1.1em}
#series .series{margin-top:clamp(24px,2.8vw,36px)}

/* ---------- join: the qualifier is an aside, not a shout ---------- */
.join-h .only{
  display:inline-block;
  font-size:.4em;letter-spacing:.06em;
  color:var(--text-secondary);
  transform:translateY(-.22em);
  margin-left:.28em;
}

/* ---------- who: a face, and his own voice ---------- */
.face{
  width:clamp(140px,15vw,190px);height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:50%;
  filter:saturate(.74) contrast(1.05) brightness(.9);
  margin-bottom:clamp(22px,2.6vw,32px);
}
.says{
  margin-top:clamp(24px,2.8vw,36px);
  padding-left:clamp(18px,2vw,26px);
  border-left:1px solid var(--accent-muted);
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(19px,1.8vw,25px);line-height:1.36;letter-spacing:-.012em;
  font-variation-settings:'SOFT' 26,'WONK' 1;
  color:var(--text-primary);max-width:26ch;
}

/* the qualifier is an aside under the headline, not part of it */
.only-if{
  margin-top:.9em;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);
}
.only-if::before{content:"";display:inline-block;width:22px;height:1px;background:var(--accent-muted);vertical-align:.3em;margin-right:12px}

/* the face sits beside the line rather than above it, and small */
.who-line{display:flex;align-items:center;gap:clamp(16px,2vw,24px);margin-bottom:clamp(20px,2.4vw,30px)}
.who-line .practice-lines{max-width:none;font-size:clamp(19px,1.7vw,23px)}
.face{
  position:relative;flex:none;
  width:clamp(88px,9vw,118px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  display:block;
}
.face img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.74) contrast(1.05) brightness(.88)}
.face::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,transparent 54%,rgba(10,13,11,.6) 100%)}