/* ============================================================================
   Inner pages.
   The palette is taken straight out of the home photograph so the two halves of
   the site read as one: the lit end of the studio backdrop is the page, the
   backdrop itself is the rule and scrim colour, and the type is the exact ink
   the wordmark sits in. The photographs are the only dark things on the site.
   ========================================================================== */
:root {
  --paper:      #EFEAE3;   /* the lit end of the studio backdrop */
  --paper-2:    #E7E0D7;   /* a half-step down, for panels */
  --greige:     #A99C96;   /* the backdrop itself */
  --ink:        #2E2823;   /* the wordmark's own ink */
  --ink-dim:    rgba(46,40,35,0.86);
  --ink-faint:  rgba(46,40,35,0.68);
  --rule:       rgba(46,40,35,0.18);
  --rule-soft:  rgba(46,40,35,0.09);
  --accent:     #16343A;   /* petrol — the one cool note against the warm paper */
  --accent-2:   #2C5259;   /* the same, lifted, for hovers on the dark ground */

  --gut: clamp(26px, 4.4vw, 52px);
  /* The content column scales with the window rather than sitting at a fixed
     maximum. A fixed 1400px filled 82% of a 1710px window but only 55% of a
     2560px one, which is why the same page read as "zoomed" on the smaller
     screen. Holding it near 55vw keeps the proportion the same at any width,
     with floors and ceilings so it stays sane on a small laptop and a large
     monitor. */
  --max: clamp(900px, 55vw, 1400px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Jost, Helvetica, sans-serif; font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink);
  color:var(--paper); padding:12px 16px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; }
.skip:focus { left:12px; top:12px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* ------------------------------------------------------------------ type */
.eyebrow { font-size:clamp(12px,0.8vw,14px); letter-spacing:.34em; text-transform:uppercase; color:var(--accent); margin:0; }
.label   { font-size:clamp(11px,0.76vw,13px); letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin:0; }
.lede    { font-size:clamp(19px,1.45vw,30px); font-weight:200; line-height:1.35; margin:0; text-wrap:pretty; }
.h1      { font-size:clamp(26px,2.55vw,52px); font-weight:200; line-height:1.06; letter-spacing:.01em; margin:0; text-wrap:pretty; }
.h2      { font-size:clamp(19px,1.32vw,27px); font-weight:200; line-height:1.2; margin:0; }
.body    { font-size:clamp(16px,0.95vw,20px); line-height:1.75; color:var(--ink-dim); text-wrap:pretty; }

.link {
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--rule); padding-bottom:5px;
  transition: color .35s var(--ease), border-color .35s var(--ease);
  display:inline-block;
}
.link:hover { color:var(--accent); border-color:var(--accent); }

/* ---------------------------------------------------------------- header */
/* While the bar sits over the photograph it has no background at all and the
   type goes light, so none of the picture is washed out. It only takes a paper
   shelf once you have scrolled past the opener. */
.hd {
  position:fixed; top:0; left:0; right:0; z-index:30;
  /* the box runs well below the links so the veil has room to finish before
     the page's own text reappears underneath it */
  padding:16px var(--gut) 44px; pointer-events:none;
  background:linear-gradient(180deg, rgba(239,234,227,0) 0%, rgba(239,234,227,0) 100%);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  transition:background .45s var(--ease);
}
/* Solid paper behind the links themselves, then a fade. Before this the veil
   was already down to 62% where the links sit, so paragraphs slid up behind
   the navigation and the two sets of words collided. */
.hd.is-solid {
  background:linear-gradient(180deg,
    #efeae3 0%, #efeae3 72%,
    rgba(239,234,227,0.82) 84%, rgba(239,234,227,0.5) 93%, rgba(239,234,227,0) 100%);
}
/* an engagement that is agreed but not yet dated */
.row-when .tbc { font-size:0.82em; letter-spacing:.16em; color:var(--ink-faint); }

.hd-logo { pointer-events:auto; display:block; line-height:0; position:relative; }
.hd-logo img { height:clamp(46px,2.55vw,58px); width:auto; display:block; transition:opacity .45s var(--ease); }
.hd-logo .ink { position:absolute; left:0; top:0; opacity:0; }
.hd.is-solid .hd-logo .cream { opacity:0; }
.hd.is-solid .hd-logo .ink   { opacity:1; }
.hd-right { pointer-events:auto; display:flex; align-items:center; gap:clamp(22px,2.6vw,44px); }
.hd-nav { display:flex; gap:clamp(18px,1.5vw,30px); font-size:clamp(12px,0.7vw,14px);
  letter-spacing:.2em; text-transform:uppercase; font-weight:400; }
.hd-social { display:flex; align-items:center; gap:clamp(12px,1.1vw,17px); }
.hd-social a { display:block; line-height:0; color:rgba(244,239,232,0.8);
  transition:color .3s var(--ease), transform .3s var(--ease); }
.hd-social a:hover { color:#fff; transform:translateY(-2px); }
.hd-social svg { width:clamp(15px,1vw,18px); height:auto; display:block;
  fill:none; stroke:currentColor; stroke-width:1.4; }
.hd-social svg .fill, .hd-social svg .dot { fill:currentColor; stroke:none; }
.hd.is-solid .hd-social a { color:var(--ink-dim); }
.hd.is-solid .hd-social a:hover { color:var(--ink); }
.hd-nav a { color:rgba(244,239,232,0.88); text-shadow:0 1px 14px rgba(46,40,35,0.5);
  transition:color .45s var(--ease), text-shadow .45s var(--ease); }
.hd-nav a:hover { color:#fff; }
.hd-nav a[aria-current="page"] { color:#fff; border-bottom:1px solid rgba(244,239,232,0.5); padding-bottom:3px; }
.hd.is-solid .hd-nav a { color:var(--ink-dim); text-shadow:none; }
.hd.is-solid .hd-nav a:hover { color:var(--ink); }
.hd.is-solid .hd-nav a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--rule); }

/* ---------------------------------------------------------------- opener */
/* The photograph runs full bleed and ends on a clean edge. A fade into the
   paper looked like a printing fault; a crisp edge reads as a plate. */
.opener {
  position:relative; width:100%; display:block;
  background-color:#1B1613;
  background-image:linear-gradient(to bottom, rgba(27,22,19,0) 0%,
    rgba(27,22,19,0.35) 26%, rgba(74,64,56,0.72) 56%, rgba(150,139,128,0.92) 80%, var(--paper) 100%);
  background-repeat:no-repeat;
  background-position:bottom;
  background-size:100% clamp(150px, 17vw, 280px);
}
.opener img {
  position:relative; width:100%; object-fit:cover; display:block;
  /* Sized so the headline underneath is in view without scrolling. At 86vh
     the plate filled the window on a tall screen, which both hid the words
     and made the picture read as heavily cropped — object-fit:cover scales
     to whichever side is tighter, and a tall box on a wide screen is a zoom. */
  height:clamp(400px, 66vh, 780px);
  /* a long, eased dissolve into the page. A blurred block laid on top read as
     a grey smear over a dark picture; fading the picture itself does not. */
  -webkit-mask-image:linear-gradient(to bottom,
    #000 54%, rgba(0,0,0,0.97) 68%, rgba(0,0,0,0.82) 78%,
    rgba(0,0,0,0.5) 88%, rgba(0,0,0,0.18) 95%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,
    #000 54%, rgba(0,0,0,0.97) 68%, rgba(0,0,0,0.82) 78%,
    rgba(0,0,0,0.5) 88%, rgba(0,0,0,0.18) 95%, rgba(0,0,0,0) 100%);
}
.opener-tall  img { height:clamp(440px, 72vh, 860px); }
.opener-short img { height:clamp(380px, 62vh, 720px); }
.opener-in {
  position:relative; z-index:2; width:100%; max-width:var(--max); margin-inline:auto;
  padding:0 var(--gut) clamp(140px,15vw,250px); margin-top:clamp(-120px,-9vw,-60px);
}
.opener .eyebrow { margin-bottom:24px; color:#c9bfa9; }
.opener .lede { color:#f1efec; }

/* --------------------------------------------------------------- section */
.sec { padding-block: clamp(72px, 9vw, 118px); }
.sec-tight { padding-block: clamp(46px, 6vw, 78px); }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:54px; flex-wrap:wrap; }

/* ------------------------------------------------------------- biography */
.bio-grid { display:grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: clamp(40px,5vw,80px); align-items:start; }
.bio-cols { display:grid; gap:24px; max-width:60ch; }
.bio-cols p { margin:0; }
.facts { display:grid; gap:38px; }
.fact .label { padding-bottom:12px; border-bottom:1px solid var(--rule); margin-bottom:16px; display:block; }
.fact ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.fact li { font-size:clamp(15px,0.98vw,17px); line-height:1.6; color:var(--ink-dim); }

/* ---------------------------------------------------------------- season */
.season-group + .season-group { margin-top: clamp(48px,6vw,84px); }
.season-group > .label { display:block; margin-bottom:22px; font-size:clamp(13px,1vw,16px); color:var(--ink); }
.row {
  display:grid; grid-template-columns:190px minmax(0,1fr) 260px; gap:32px;
  width:100%; text-align:left; align-items:baseline;
  padding:24px 0; border:0; border-top:1px solid var(--rule);
  background:none; font:inherit; color:inherit; cursor:pointer;
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.row:last-child { border-bottom:1px solid var(--rule); }
.row:hover, .row:focus-visible { background:rgba(46,40,35,0.035); }
html.enh .row { border-top-color:transparent; position:relative; }
html.enh .row::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--rule);
  transform:scaleX(0); transform-origin:left; transition:transform 1.15s var(--ease);
}
html.enh .row.seen::before { transform:scaleX(1); }
.row-when { font-size:clamp(14px,1vw,17px); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:400; }
.row-when .yr { color:var(--ink-faint); }
.row-title { font-size:clamp(21px,1.85vw,31px); font-weight:300; line-height:1.25; }
.row-title em { font-style:italic; }
.row-ens { font-size:clamp(15px,1.05vw,18px); color:var(--ink); }
.row-mark { display:block; }
.row-mark img { height:clamp(26px,2vw,34px); width:auto; max-width:150px; object-fit:contain;
  opacity:.62; transition:opacity .4s var(--ease); }
.row:hover .row-mark img { opacity:1; }
.eng-mark { height:34px; width:auto; max-width:160px; object-fit:contain; opacity:.85; }
.row-next { display:inline-block; margin-right:10px; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--paper); background:var(--accent); padding:4px 9px; }

/* the panel behind a row */
.eng { position:fixed; inset:0; width:100vw; height:100vh; max-width:100vw; max-height:100vh;
  border:0; padding:0; background:rgba(46,40,35,0.96); color:var(--paper); display:none; }
.eng[open] { display:grid; grid-template-rows:1fr auto; }
.eng::backdrop { background:rgba(46,40,35,0.96); }
.eng-in { align-self:center; justify-self:center; width:min(760px,86vw); padding:clamp(24px,4vw,48px); }
.eng-when { margin:0 0 18px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:#c9bfa9; }
.eng-title { margin:0 0 16px; font-size:clamp(28px,3.4vw,52px); font-weight:200; line-height:1.15; }
.eng-title em { font-style:italic; }
.eng-role { margin:0 0 34px; font-size:clamp(16px,1.15vw,20px); color:rgba(239,234,227,0.8); }
.eng-body .label { color:#c9bfa9; margin-bottom:14px; display:block; }
.eng-body ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.eng-link { display:inline-block; margin-top:32px; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:#c9bfa9; border-bottom:1px solid rgba(201,191,169,0.5);
  padding-bottom:5px; transition:color .3s var(--ease), border-color .3s var(--ease); }
.eng-link:hover { color:var(--paper); border-color:var(--paper); }
.eng-body li { font-size:clamp(16px,1.1vw,19px); line-height:1.55; color:rgba(239,234,227,0.85); }
.eng-bar { display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px clamp(24px,4vw,48px); border-top:1px solid rgba(239,234,227,0.2);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(239,234,227,0.66); }
.eng-bar button { font:inherit; letter-spacing:inherit; text-transform:inherit; background:none;
  border:1px solid rgba(239,234,227,0.3); color:rgba(239,234,227,0.9); padding:10px 18px; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease); }
.eng-bar button:hover { border-color:var(--paper); color:var(--paper); }

/* the ensembles' own marks keep their colours here */
.row-logo img { height:34px; width:auto; max-width:150px; object-fit:contain;
  opacity:.62; transition:opacity .4s var(--ease); }
.row:hover .row-logo img { opacity:1; }

/* ----------------------------------------------------------------- watch */
.vids { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); gap:clamp(32px,4vw,52px); }
.vid-frame { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--greige);
  border:0; padding:0; cursor:pointer; display:block; }
.vid-frame img { width:100%; height:100%; object-fit:cover;
  transition: transform 1.3s var(--ease), opacity .5s var(--ease); }
.vid-frame:hover img { transform:scale(1.03); }
.vid-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid-play { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.vid-play i { width:64px; height:64px; border:1px solid rgba(239,234,227,0.7); border-radius:50%;
  display:grid; place-items:center; background:rgba(46,40,35,0.28);
  transition:background .35s var(--ease), border-color .35s var(--ease); }
.vid-frame:hover .vid-play i { background:var(--paper); border-color:var(--paper); }
.vid-play svg { width:13px; height:15px; fill:var(--paper); margin-left:3px; }
/* The caption always sits in the bottom-left corner, and always carries the
   same three lines — composer, work, movement — so it lands in exactly the
   same spot on every film even when a line has nothing to say. */
.vid-cap { position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  padding:0 clamp(20px,2.1vw,32px) clamp(18px,1.9vw,28px); text-align:left;
  background:linear-gradient(to top, rgba(16,13,11,0.92) 0%, rgba(16,13,11,0.66) 38%,
    rgba(16,13,11,0.26) 70%, rgba(16,13,11,0) 100%); }
/* the composer is set in the book face, the work in the sans — the change of
   voice is what separates them, not a change of size */
.vid-cap em { display:block; font-family:"Cormorant Garamond", Georgia, serif;
  font-style:italic; font-weight:400; font-size:clamp(16px,1.15vw,21px);
  line-height:1.1; letter-spacing:.012em; color:#e0d3b8; margin:0 0 6px; }
.vid-cap b { display:block; font-weight:300; font-size:clamp(19px,1.5vw,29px);
  line-height:1.14; letter-spacing:.004em; color:#faf7f1;
  max-width:24ch; text-wrap:balance; }
.vid-cap i { display:block; font-style:normal; margin-top:11px;
  font-size:clamp(10px,0.7vw,12px); letter-spacing:.24em; text-transform:uppercase;
  color:rgba(250,247,241,0.58); }
.vid-title { font-size:clamp(20px,1.42vw,25px); font-weight:300; line-height:1.3; margin:22px 0 0; }
.vid-detail { font-size:clamp(13px,0.9vw,16px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:16px 0 0; }
.vid-note { color:var(--ink-faint); letter-spacing:.1em; }
.vid-note { font-size:14px; color:var(--ink-faint); margin:6px 0 0; }

/* --------------------------------------------------------------- gallery */
/* Nine of these frames are landscape and three are portrait. A uniform grid
   crops every one of them to the same box, which is what was slicing heads
   off. Columns let each photograph keep the shape it was taken in. */
.gal-head { padding: clamp(96px,11vw,150px) 0 clamp(30px,4vw,52px); }
.gal-group + .gal-group { margin-top: clamp(48px,6vw,86px); }
.gal-group .label {
  margin-bottom:22px;
  font-size:clamp(15px,1.15vw,20px); letter-spacing:.2em; color:var(--ink);
}
.gal { column-count:3; column-gap:10px; padding-inline:10px; }
.gal button { break-inside:avoid; display:block; width:100%; margin:0 0 10px;
  border:0; padding:0; background:var(--greige); cursor:zoom-in; overflow:hidden; position:relative; }
.gal img { width:100%; height:auto; display:block;
  transition:transform 1.4s var(--ease), opacity .5s var(--ease); }
.gal button:hover img { transform:scale(1.02); }
@media (max-width: 1080px) { .gal { column-count:2; } }
@media (max-width: 720px)  { .gal { column-count:1; } }

.quotes { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:clamp(32px,4vw,56px); }
.quote p { font-size:clamp(19px,1.7vw,25px); font-weight:200; font-style:italic; line-height:1.5; margin:0 0 16px; text-wrap:pretty; }
.quote footer { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }

.plist { list-style:none; margin:0; padding:0; }
.plist li { border-top:1px solid var(--rule); }
.plist li:last-child { border-bottom:1px solid var(--rule); }
.plist a { display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:22px 0;
  transition: color .3s var(--ease); }
.plist a:hover { color:var(--accent); }
.plist .t { font-size:clamp(17px,1.18vw,21px); font-weight:300; }
.plist .s { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }

/* --------------------------------------------------------------- contact */
.cells { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); column-gap:32px; }
.cell { display:block; padding:30px 0; border-top:1px solid var(--rule); transition:color .3s var(--ease); }
.cell:hover { color:var(--accent); }
.cell .label { margin-bottom:12px; display:block; }
.cell .v { font-size:clamp(19px,1.32vw,24px); font-weight:300; }


/* --------------------------------------------------- a plain page opening */
/* Gallery and Watch lead with the work itself rather than a photograph that
   says nothing, so they only need a quiet heading. */
/* the fixed bar is 118px tall, so the eyebrow has to start below that or it
   sits right on the navigation and washes out under the veil */
.page-head { padding: clamp(150px,8.8vw,178px) 0 clamp(26px,3.2vw,42px); }

/* the first film runs full width */
/* the lead film is inset rather than run to the full column width — at full
   width on a large screen it fills the window and reads as a zoom */
/* the lead film is inset inside the column, as it was at the width you liked:
   1120 of a 1296 column, i.e. 86% */
.vid-lead { margin: 0 auto clamp(44px,5.5vw,84px); max-width:86%; }
.vid-lead .vid-frame { border-radius:4px; }
.vid-lead .vid-cap { padding:0 clamp(26px,2.6vw,44px) clamp(24px,2.4vw,38px); }
.vid-lead .vid-cap b { font-size:clamp(24px,1.95vw,37px); max-width:22ch; }
.vid-lead .vid-cap em { font-size:clamp(19px,1.45vw,26px); }
.vid-lead .vid-cap i { font-size:clamp(11px,0.76vw,13px); }
.vid-lead .vid-detail { font-size:clamp(13px,0.92vw,16px); }
.vids { grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); }

/* ------------------------------------------------------------ contact page */
/* The details sit in the dark half of the portrait rather than stacked
   underneath it — the one page where a stacked layout had least to offer. */
.contact-hero { position:relative; height:100svh; min-height:560px; display:flex; align-items:center; overflow:hidden; }
.contact-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:32% 24%; }
.contact-hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(24,34,32,0) 26%, rgba(24,34,32,0.5) 52%,
                                    rgba(20,30,29,0.86) 82%, rgba(20,30,29,0.92) 100%); }
.contact-panel { position:relative; z-index:2; margin-left:auto;
  width:min(48%, 640px); padding-inline:var(--gut); color:var(--paper); }
.contact-panel .eyebrow { color:#c9bfa9; margin-bottom:clamp(26px,3vw,44px); }
.contact-panel .cells { grid-template-columns:1fr; column-gap:0; }
.contact-panel .cell { border-top-color:rgba(239,234,227,0.22); color:var(--paper);
  padding:clamp(16px,1.8vw,26px) 0; }
.contact-panel .cell:hover { color:#c9bfa9; }
.contact-panel .cell .label { color:rgba(239,234,227,0.62); }

@media (max-width: 900px) {
  .contact-hero { min-height:auto; display:block; }
  .contact-hero > img { position:relative; height:clamp(340px,52vh,560px); }
  .contact-hero::after { display:none; }
  .contact-panel { width:100%; margin:0; color:var(--ink);
    padding-block:clamp(40px,6vw,64px); }
  .contact-panel .eyebrow { color:var(--accent); }
  .contact-panel .cell { border-top-color:var(--rule); color:var(--ink); }
  .contact-panel .cell .label { color:var(--accent); }
}

/* ---------------------------------------------------------------- footer */
.ft { border-top:1px solid var(--rule-soft); margin-top:clamp(60px,8vw,110px); }
.ft-in { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  padding-block: clamp(40px,5vw,64px); }
.ft-logo img { height:52px; width:auto; opacity:.55; transition:opacity .35s var(--ease); }
.ft-logo:hover img { opacity:1; }
.ft-nav { display:flex; gap:26px; flex-wrap:wrap; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.ft-nav a { color:var(--ink-faint); transition:color .3s var(--ease); }
.ft-nav a:hover { color:var(--ink); }
.ft-social { display:flex; align-items:center; gap:clamp(16px,1.6vw,26px); }
.ft-social a { display:block; line-height:0; color:var(--ink-faint);
  transition:color .3s var(--ease), transform .3s var(--ease); }
.ft-social a:hover { color:var(--accent); transform:translateY(-2px); }
.ft-social svg { width:clamp(19px,1.4vw,23px); height:auto; display:block;
  fill:none; stroke:currentColor; stroke-width:1.4; }
.ft-social svg .fill { fill:currentColor; stroke:none; }
.ft-social svg .dot  { fill:currentColor; stroke:none; }
.ft-place { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }


/* -------------------------------------------------- the accent as a ground */
/* One section per page may sit on the accent. It is the only place the site
   goes dark, so it is used for the thing worth stopping on. */
.sec-accent { background:var(--accent); color:var(--paper); }
.sec-accent .eyebrow,
.sec-accent .label            { color:rgba(239,234,227,0.66); }
.sec-accent .quote p          { color:var(--paper); }
.sec-accent .quote footer     { color:rgba(239,234,227,0.62); }
.sec-accent .link             { color:var(--paper); border-bottom-color:rgba(239,234,227,0.42); }
.sec-accent .link:hover       { color:#fff; border-bottom-color:#fff; }
.sec-accent .plist li         { border-color:rgba(239,234,227,0.20); }
.sec-accent .plist a          { color:rgba(239,234,227,0.9); }
.sec-accent .plist a:hover    { color:#fff; }
.sec-accent .plist .s         { color:rgba(239,234,227,0.55); }

/* ------------------------------------------------------------ the ensembles */
/* Who he has stood in front of — the fastest credibility signal there is for
   someone deciding whether to book him. Cream marks on the accent ground. */
.marks { background:var(--accent); color:var(--paper);
  padding: clamp(52px,6.5vw,92px) var(--gut) clamp(56px,7vw,100px); }
.marks-in { max-width:1180px; margin:0 auto; }
.marks-line { margin:0 0 clamp(32px,4vw,52px); text-align:center;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(239,234,227,0.62); }
.marks-row { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:clamp(28px,3.6vw,56px); }
.marks-row img { height:clamp(24px,2.4vw,34px); width:auto; max-width:145px; object-fit:contain;
  opacity:.72; transition:opacity .4s var(--ease); }
.marks-row li:hover img { opacity:1; }
@media (max-width: 820px) {
  .marks-row { gap:24px 28px; }
  .marks-row img { height:22px; }
}

/* -------------------------------------------------------------- lightbox */
.lb { position:fixed; inset:0; width:100vw; height:100vh; max-width:100vw; max-height:100vh;
  border:0; padding:clamp(16px,3vw,40px); background:rgba(46,40,35,0.96); display:none; color:var(--paper); }
.lb[open] { display:grid; grid-template-rows:1fr auto; }
.lb::backdrop { background:rgba(46,40,35,0.96); }
.lb-img { display:grid; place-items:center; min-height:0; }
.lb-img img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.lb-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:18px; margin-top:18px;
  border-top:1px solid rgba(239,234,227,0.2); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(239,234,227,0.7); }
.lb-bar button { font:inherit; letter-spacing:inherit; text-transform:inherit; background:none;
  border:1px solid rgba(239,234,227,0.28); color:rgba(239,234,227,0.85); padding:9px 16px; cursor:pointer; margin-left:8px;
  transition:border-color .3s var(--ease), color .3s var(--ease); }
.lb-bar button:hover { border-color:var(--paper); color:var(--paper); }


/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .grid { grid-template-columns:repeat(2,1fr); }
  .bio-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 820px) {
  .hd { padding:16px var(--gut) 32px; }
  .hd-logo img { height:46px; }
  .hd-nav { gap:14px 18px; font-size:10px; letter-spacing:.16em; flex-wrap:wrap; justify-content:flex-end; max-width:62%; }
  .row { grid-template-columns:minmax(0,1fr); gap:8px; padding:20px 0; }
  .grid { grid-template-columns:1fr; }
  .opener-tall { min-height:72vh; }
  .ft-logo img { height:44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}