:root{
  --navy:#151F4C; --blue:#38B5E4; --purple:#A554F3; --btn:#4268C1;
  --ink:#333; --muted:#6b7280; --rule:#DFDFDF; --line:#e5e7eb;
  /* The brand sheet defines four colors - #000000, #38B5E4, #A655F4, #FFFFFF -
     and neither accent can carry text on white: the blue is 2.36:1 and the
     purple 4.02:1, against the 4.5:1 AA asks for. #4268C1, which the WordPress
     theme used for every link and button, clears it at 5.27:1 but is not a
     brand color at all.

     So the purple is taken down four points of lightness, keeping its hue and
     saturation, until it passes: #9D44F3 at 4.61:1, near enough to #A655F4 to
     read as the same color. Darkening the blue that far turns it into a teal
     and loses the brand entirely, which is why the accent used for text is the
     purple. --blue stays for the footer, where it sits on navy at 6.68:1. */
  --brand:#9D44F3; --brand-dark:#8A2BE8;
  --ink-strong:#111;
  --bg:#fff; --bg-soft:#f7f8fa; --nav-ink:#54595F; --wrap:1140px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--bg);font-size:16px;line-height:2}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
a:hover{color:var(--brand-dark)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:100}

/* ---------------------------------------------------------------- header */
.site-header{background:#fff;border-bottom:1px solid var(--rule);
  box-shadow:0 0 5px 0 rgba(0,0,0,.5);position:relative;z-index:50}
.site-header .wrap{max-width:1220px;display:flex;align-items:center;gap:20px;
  padding-top:18px;padding-bottom:18px}
.logo{flex:0 0 auto;display:block;line-height:0}
.logo img{width:157px;height:auto}
.nav{flex:1;display:flex;align-items:center;justify-content:center;gap:0;
  list-style:none;padding:0;margin:0}
.nav>li{position:relative;list-style:none}
.nav a,.nav .top{display:block;padding:10px 16px;text-decoration:none;color:var(--nav-ink);
  font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif;
  font-size:20px;font-weight:700;line-height:1;text-transform:uppercase;
  background:none;border:0;cursor:pointer}
.nav a:hover,.nav .top:hover{color:var(--brand-dark)}
.nav .caret{font-size:11px;margin-left:6px;vertical-align:middle}
.nav ul{position:absolute;left:0;top:100%;min-width:250px;background:#fff;
  border:1px solid var(--line);padding:4px;margin:0;
  box-shadow:0 12px 28px rgba(0,0,0,.12);display:none;z-index:60}
/* .open is set by the button; the JS used to write an inline display,
   which then outranked every rule that tried to close it again. */
.nav li:hover>ul,.nav li:focus-within>ul,.nav li.open>ul{display:block}
.nav ul li{list-style:none}
.nav ul a{font-size:18px;padding:10px 14px}
.nav ul a:hover{background:var(--bg-soft)}
.social{display:flex;gap:5px;list-style:none;margin:0;padding:0}
.social a{display:grid;place-items:center;width:30px;height:30px;border-radius:10%;color:#fff}
.social a:hover{opacity:.85;color:#fff}
.social svg{width:15px;height:15px;fill:currentColor}
/* Same object as the contact route: an inset ring that fills on hover, not a
   hairline box. They sit next to each other, so they have to match. */
.menu-btn{display:none;background:transparent;border:0;color:var(--ink-strong);
  box-shadow:inset 0 0 0 1.5px currentColor;
  min-height:44px;min-width:44px;padding:9px 13px;cursor:pointer;font-size:19px;
  line-height:1;transition:background .15s,color .15s}
.menu-btn:hover,.menu-btn:focus-visible{background:var(--ink-strong);color:#fff}
/* Last in the bar, at every width - never inside the drawer, because a contact
   route that needs two taps and a menu is not a contact route.

   Outlined rather than filled. Sitting second, in solid brand blue, next to a
   two-color wordmark, it was the loudest thing in the header and competed with
   the logo for the first look. An outline still reads as a button and still
   fills in on hover, without shouting over the name.

   inline-flex with a 44px floor rather than padding alone: padding on an
   inline-block gave a 35px target on mobile, under the 44px minimum. */
.cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;background:transparent;color:var(--ink-strong);
  box-shadow:inset 0 0 0 1.5px currentColor;
  text-decoration:none;padding:10px 20px;
  font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif;
  font-weight:700;font-size:16px;line-height:1;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;transition:background .15s,color .15s}
.cta:hover,.cta:focus-visible{background:var(--ink-strong);color:#fff}

/* ----------------------------------------------------------------- main */
main{min-height:50vh}
.page-head{padding:40px 0 4px}
.page-head h1{font-size:clamp(28px,4vw,40px);line-height:1.2;margin:0 0 8px}
.block{margin:0 0 24px}
h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3}
/* Linked-to headings get a little air above them rather than sitting flush
   against the top of the window. The header is not sticky, so that is all
   the clearance an anchor needs. */
h2[id],h3[id]{scroll-margin-top:24px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
h2{font-size:clamp(22px,3vw,30px);margin:34px 0 12px}
h3{font-size:20px;margin:26px 0 10px}
h4,h5,h6{margin:20px 0 8px}
p{margin:0 0 18px}
.text ul,.text ol{margin:0 0 18px;padding-left:22px}
.text img{margin:18px auto}
.text a{overflow-wrap:anywhere}
figure{margin:0 0 22px}
figcaption{color:var(--muted);font-size:14px;line-height:1.6;margin-top:8px}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;
  padding:14px 32px;border-radius:0;font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif;
  font-weight:700;font-size:18px;line-height:1;letter-spacing:.03em;text-transform:uppercase;
  border:0;cursor:pointer}
.btn:hover{background:var(--brand-dark);color:#fff}
.embed{position:relative;aspect-ratio:var(--ar,16/9);background:#000;overflow:hidden;
  margin:0 0 26px;max-width:100%}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Belt and braces: a body iframe that somehow misses the wrapper still must
   not push past its column. */
.text iframe,.post-main iframe{max-width:100%}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:0 0 26px}
.gallery a{display:block;overflow:hidden;background:var(--bg-soft)}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .25s}
.gallery a:hover img{transform:scale(1.04)}
/* A picked strip rather than an archive: three across, so six tiles are two
   full rows at roughly 360px instead of four and two orphans. The tiles stay
   square - make_assets cuts the thumbnails square, and asking for 4:3 here
   would only crop the square again, top and bottom. */
.gallery--wide{grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){ .gallery--wide{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .gallery--wide{grid-template-columns:1fr} }
.logos{display:flex;flex-wrap:wrap;gap:34px;align-items:center;justify-content:center;margin:0 0 26px}
.logos img{max-height:100px;width:auto}
.divider{border:0;border-top:1px solid var(--line);margin:34px 0}
/* A section's own reading width, taken from Elementor rather than forcing
   every page to one container: the Media Kit runs its brand sheet wide and
   its prose at 800px. */
.measure{max-width:var(--measure,100%);margin-left:auto;margin-right:auto}
.ta-center{text-align:center}
.ta-right{text-align:right}
.ta-left{text-align:left}
.ta-justify{text-align:justify}
.ta-center .btn,.ta-center img{margin-left:auto;margin-right:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ bands */
/* Sections, and a rhythm that groups.
   The homepage had no <section> at all - eleven blocks in one .wrap - and its
   spacing was 34px above a heading against 12px below it. A separation barely
   larger than the join reads as neither, which is why the page looked both
   empty and undivided. Two changes, in order of strength:
     1. common region - each section is a full-bleed band with its own ground,
        which separates far more firmly than any amount of space;
     2. proximity - the gap between sections is the band padding, 56px a side,
        against 16px from a heading to what it heads. About 7:1, where it used
        to be under 3:1.
   56px rather than the ~80px a purely spatial design would need: once the
   ground changes, space stops having to carry the separation on its own, so
   the page separates more clearly AND gets tighter. Whitespace was never the
   problem - whitespace doing no work was. */
.band{--pad:56px;padding:var(--pad) 0}
/* --band-ground is the band's own colour, published so that something drawn
   over a rule inside it - a timeline node - can be ringed in the ground and
   appear to sit on top of the line rather than beside it. */
.band--plain,.band--intro{background:var(--bg);--band-ground:#fff}
.band--soft{background:#F7F7F7;--band-ground:#F7F7F7}
.band--accent{background:#E8C5C5;--band-ground:#E8C5C5}
.panel{--band-ground:#fff}

/* Diagonal edges, the way the live site cuts them.

   Each *boundary* is drawn once, by the band above, in the color of the band
   below - so the next ground reaches up into this one on the left and the join
   slopes away to the right. Drawing it on both sides instead (a wedge under
   every band and another over the next) puts two opposing wedges on the same
   line, and where two tinted bands met they fought and left a sliver of the
   wrong color between them. One cut per join also keeps every diagonal on the
   page parallel. */
.band{position:relative}
.band--cut{padding-bottom:calc(var(--pad) + 34px)}
/* A white panel over the tint, as the live site sets its awards block. */
.panel{background:#fff;padding:34px 38px;max-width:860px;
  box-shadow:0 18px 40px rgba(17,24,39,.10)}
.panel>*:last-child{margin-bottom:0}
.panel>h2:first-child{margin-top:0}
@media (max-width:600px){ .panel{padding:24px 20px} }

.band--cut::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:var(--wh,58px);background:var(--wb,#fff);pointer-events:none;
  clip-path:polygon(0 0,100% 94%,100% 100%,0 100%)}
/* The avatar is lifted over the hero, so the first band already has space. */
.band--intro{--pad:34px}
/* Band padding is the separation now; a heading must not add to it. */
.band > .wrap > h2:first-child,
.band > .wrap > .measure:first-child > h2:first-child{margin-top:0}
.band > .wrap > *:last-child{margin-bottom:0}
.band h2{margin-bottom:16px}
@media (max-width:760px){
  .band{--pad:40px}
  .band--cut{--wh:32px}
}

/* --------------------------------------------------------------- homepage */
/* The name is typed in sentence case and capitalised here: a screen reader can
   spell out a word written in capitals letter by letter. */
.masthead{text-align:center;margin:0 0 26px}
.mast-pre{margin:0 0 2px;color:var(--muted);font-size:15px;letter-spacing:.06em;
  text-transform:uppercase}
.masthead h1{margin:0 0 10px;font-size:clamp(30px,4.4vw,44px);line-height:1.15;
  text-transform:uppercase;letter-spacing:.01em}
.mast-role{margin:0 0 8px;font-size:clamp(16px,2vw,20px);font-weight:500;color:#4b5563}
.mast-claim{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}

/* A split heading the original set as two stacked h2s. */
.kicker{display:block;font-size:.62em;font-weight:400;color:var(--muted);
  letter-spacing:.02em;margin-top:4px}

/* Video cards. The page used to stack three bare 16:9 iframes with no titles -
   1,310px of identical rectangles, blank while lazyloading, and four
   third-party frames loaded before anyone asked for one. The poster is served
   from this domain and YouTube is not contacted until a card is clicked. */
.vids{list-style:none;margin:0 0 26px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:24px}
.vid{margin:0;line-height:1.45}
.vid-play{display:block;position:relative;width:100%;aspect-ratio:16/9;padding:0;
  border:0;background:#000;cursor:pointer;overflow:hidden}
.vid-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid-nopost{position:absolute;inset:0;background:linear-gradient(135deg,#1f2937,#374151)}
.vid-icon{position:absolute;left:50%;top:50%;width:62px;height:44px;
  transform:translate(-50%,-50%);background:rgba(17,24,39,.72);border-radius:11px;
  transition:background .18s}
.vid-icon::after{content:"";position:absolute;left:52%;top:50%;
  transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff}
.vid-play:hover .vid-icon,.vid-play:focus-visible .vid-icon{background:var(--purple)}
.vid-play img{transition:transform .3s}
.vid-play:hover img{transform:scale(1.04)}
.vid-title{margin:12px 0 2px;font-size:16.5px;line-height:1.4;font-weight:600}
.vid-by{margin:0;color:var(--muted);font-size:14px}
.vid .embed{margin:0}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px}
.vids--single{max-width:620px}

/* Biography beside the portrait, which used to sit orphaned further down the
   page at 960px tall with nothing to say what it was. */
.feature{display:grid;grid-template-columns:1fr minmax(240px,340px);gap:38px;
  align-items:start;margin:0 0 26px}
.feature-body{line-height:1.95}
.feature-body p:last-child{margin-bottom:0}
.feature-points{list-style:none;margin:18px 0 0;padding:0;line-height:1.55}
.feature-points li{position:relative;padding:0 0 10px 26px;font-size:15.5px;color:#4b5563}
.feature-points li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;
  background:var(--brand);transform:rotate(45deg)}
.feature-cta{margin:20px 0 0}
.feature-media{margin:0}
/* The portrait is 640x960 and the biography is six lines, so at full height the
   column left ~270px of void beside nothing. Capped and cropped from the upper
   third, which is where the face is. */
.feature-media img{width:100%;height:auto;max-height:430px;object-fit:cover;
  object-position:center 28%}
.feature-cap{margin:9px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
/* A run of chapters all keeping the picture on the right reads as a template.
   Alternating sides gives the biography a gait; the source order is unchanged,
   so it still reads text-then-image to a screen reader. */
.feature--flip{grid-template-columns:minmax(240px,340px) 1fr}
.feature--flip .feature-body{order:2}
.feature--flip .feature-media{order:1}
/* A wide photograph - a stage, a parade - is wasted in a 340px column, so it
   takes the full width and the prose sits under it. */
.feature--wide{grid-template-columns:1fr}
.feature--wide .feature-body{order:2}
/* The figure stays stretched to the column and the picture is centred inside
   it. Centring the figure itself with an auto inline margin does not work: an
   auto margin on a grid item switches off its stretch, and the figure then
   shrink-wrapped to the height cap - a 1100px band drawing the picture 599px
   wide. Images are display:block here, so the centring is a margin on the
   image, not text-align on its parent. */
.feature--wide .feature-media{order:1}
.feature--wide .feature-media img{max-height:420px;object-position:center 45%;
  margin-inline:auto}
.feature--wide .feature-cap{text-align:center}

/* Awards were four <p> tags that read as one paragraph. */
.awards{list-style:none;margin:0 0 26px;padding:0}
.awards li{display:flex;gap:20px;align-items:baseline;padding:13px 0;
  border-bottom:1px solid var(--line);line-height:1.5}
.awards li:first-child{border-top:1px solid var(--line)}
.aw-yr{flex:0 0 auto;width:52px;font-weight:700;color:var(--brand);
  font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif;font-size:19px;
  letter-spacing:.02em}
.aw-txt{flex:1}
.aw-sub{display:block;color:var(--muted);font-size:14.5px;margin-top:3px}

/* The same list hung off a spine, for a page where the dates are the point.
   The rule fades out at the foot rather than stopping dead, so the record
   reads as continuing rather than as finished. */
.awards--timeline{position:relative;padding-left:104px;margin-bottom:30px}
.awards--timeline::before{content:"";position:absolute;left:80px;top:14px;bottom:24px;
  width:2px;background:linear-gradient(180deg,var(--brand),rgba(157,68,243,.12))}
.awards--timeline li{display:block;position:relative;padding:0 0 22px;border:0}
.awards--timeline li:first-child{border-top:0}
.awards--timeline li:last-child{padding-bottom:0}
.awards--timeline .aw-yr{position:absolute;left:-104px;top:1px;width:64px;
  text-align:right;font-size:21px;font-variant-numeric:tabular-nums}
/* The node sits on the spine, ringed in the band's own colour so the rule
   appears to pass behind it. */
.awards--timeline li::before{content:"";position:absolute;left:-27px;top:9px;
  width:11px;height:11px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px var(--band-ground,#fff)}
/* A row continuing the year above it prints no numeral, and its node is hollow
   - the eye reads the solid ones as the years and the rings as more of the
   same year. */
.awards--timeline li.aw-cont::before{width:9px;height:9px;left:-26px;top:11px;
  background:var(--band-ground,#fff);
  box-shadow:inset 0 0 0 2px var(--brand),0 0 0 4px var(--band-ground,#fff)}
.awards--timeline .aw-txt{display:block;font-weight:600;font-size:17px;
  line-height:1.45;color:var(--ink-strong)}
.awards--timeline .aw-sub{font-weight:400;line-height:1.6;margin-top:5px}
@media (max-width:640px){
  .awards--timeline{padding-left:26px}
  .awards--timeline::before{left:2px}
  .awards--timeline .aw-yr{position:static;display:block;width:auto;text-align:left;
    font-size:18px;margin-bottom:2px}
  .awards--timeline .aw-yr:empty{display:none}
  .awards--timeline li::before{left:-25px;top:8px}
  .awards--timeline li.aw-cont::before{left:-24px;top:10px}
}

/* Citations. The site holds 56 press pieces and none of them says where it came
   from, so a claim on the biography had nothing behind it but the biography.
   Each row names the publication, links the headline to the original, and -
   where this site keeps its own copy - links that too. */
.sources{list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:0 30px}
.sources li{padding:15px 0;border-bottom:1px solid var(--line);line-height:1.5}
.src-pub{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 5px}
.src-title{font-size:16px;font-weight:600;line-height:1.4}
.src-meta{display:block;color:var(--muted);font-size:13.5px;margin-top:4px}
.src-here{display:inline-block;margin-top:7px;font-size:13.5px;font-weight:600}
.src-here::after{content:" \2192"}
/* An outbound headline is marked once, on the arrow, rather than repeated in
   the text of every row. */
.src-title[href^="http"]::after{content:" \2197";font-weight:400;color:var(--muted)}

@media (max-width:760px){
  .feature,.feature--flip,.feature--wide{grid-template-columns:1fr;gap:24px}
  .feature-media{max-width:340px}
  /* One column has no sides to alternate between, so the flip is dropped and
     every chapter reads text then picture. A wide photograph keeps its lead:
     it is the establishing shot, not an illustration beside the words. */
  .feature--flip .feature-body{order:1}
  .feature--flip .feature-media{order:2}
  .feature--wide .feature-media{max-width:none}
  .awards li{gap:14px}
  .aw-yr{width:46px;font-size:17px}
}

/* --------------------------------------------------------------- lightbox */
/* Shared by the drawer and the lightbox, and deliberately outside every
   media query: it lived inside the mobile block, so opening the lightbox
   on a desktop left the page scrolling behind it. */
body.no-scroll{overflow:hidden}

.lbox{position:fixed;inset:0;z-index:120;display:none;background:rgba(9,11,16,.94);
  padding:56px 20px 20px}
.lbox.on{display:flex;align-items:center;justify-content:center}
.lbox-fig{margin:0;max-width:100%;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:12px}
.lbox-fig img{max-width:min(100%,1400px);max-height:calc(100vh - 140px);
  width:auto;height:auto;object-fit:contain}
.lbox-fig figcaption{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  justify-content:center;color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.5}
.lbox-num{color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;white-space:nowrap}
.lbox-x,.lbox-nav{position:absolute;background:rgba(255,255,255,.10);border:0;
  color:#fff;cursor:pointer;line-height:1;display:grid;place-items:center}
.lbox-x{top:12px;right:14px;width:44px;height:44px;font-size:18px}
.lbox-nav{top:50%;transform:translateY(-50%);width:52px;height:64px;font-size:34px}
.lbox-prev{left:10px} .lbox-next{right:10px}
.lbox-x:hover,.lbox-nav:hover,.lbox-x:focus-visible,.lbox-nav:focus-visible{
  background:var(--purple)}
@media (max-width:640px){
  .lbox{padding:52px 8px 8px}
  .lbox-nav{width:44px;height:56px;font-size:28px;background:rgba(255,255,255,.16)}
  .lbox-fig img{max-height:calc(100vh - 150px)}
}

/* --------------------------------------------------------------- credits */
/* A body of work, not a list of sentences: the year is a marker on a rail and
   each production gets its title on its own line, with the credit under it. */
.cr-lead{font-size:17px;color:var(--muted);margin:0 0 30px;line-height:1.6}
.credits{position:relative;margin:0 0 34px}
.credits::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--brand),rgba(157,68,243,.15))}
.cr-year{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 28px;
  padding:0 0 30px 0}
.cr-year > h2{margin:0;padding-left:24px;font-size:22px;line-height:1.2;
  font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif;letter-spacing:.02em;
  color:var(--brand);position:relative}
.cr-year > h2::before{content:"";position:absolute;left:-5px;top:7px;width:12px;height:12px;
  background:var(--brand);border-radius:50%;box-shadow:0 0 0 4px #fff}
.cr-year ul{list-style:none;margin:0;padding:0}
.cr-year li{position:relative;margin:0 0 18px;padding:0 62px 0 0}
.cr-year li:last-child{margin-bottom:0}
.cr-year h3{margin:0 0 4px;font-size:17px;line-height:1.4;font-weight:600}
.cr-meta{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.cr-span{display:inline-block;margin:2px 0 0;font-size:13px;letter-spacing:.04em;
  font-weight:600;color:var(--brand)}
.cr-tag{position:absolute;right:0;top:2px;font-size:11.5px;letter-spacing:.08em;
  font-weight:700;color:var(--muted);border:1px solid var(--line);padding:2px 7px}
@media (max-width:640px){
  .cr-year{grid-template-columns:1fr;gap:10px}
  .cr-year > h2{padding-left:24px;font-size:20px}
  .cr-year ul{padding-left:24px}
  .cr-year li{padding-right:0}
  .cr-tag{position:static;display:inline-block;margin-top:6px}
}

/* ----------------------------------------------------------------- contact */
.routes{list-style:none;margin:0 0 26px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.route{margin:0;border:1px solid var(--line);padding:22px 22px 24px;
  line-height:1.6;display:flex;flex-direction:column}
.route h2{margin:0 0 8px;font-size:18px}
.route p{margin:0 0 10px;font-size:15px;color:#4b5563}
.route-note{margin-top:auto!important;margin-bottom:0!important;
  font-size:13.5px;color:var(--muted)}
.route-link{display:inline-block;margin-top:12px;font-weight:600;font-size:15px}
.route-mail{margin:0 0 30px;font-size:15.5px;color:var(--muted)}

/* Form and portrait side by side, so the page has a face on it at the point
   someone is deciding whether to write. */
.inquiry{max-width:820px;margin:0 0 30px}
.inquiry--split{max-width:1100px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,380px);gap:40px;align-items:start}
.inquiry-photo{margin:0}
.inquiry-photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  object-position:center 20%}
@media (max-width:860px){
  .inquiry--split{grid-template-columns:1fr;gap:26px}
  .inquiry-photo{max-width:420px}
}
.inquiry .f2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.inquiry label{display:block;font-size:14px;font-weight:600;line-height:1.4;
  margin:0 0 6px;color:#374151}
.inquiry .req{color:#b91c1c;font-weight:400}
.inquiry .opt{color:var(--muted);font-weight:400;text-transform:none;font-size:13px}
.inquiry input,.inquiry select,.inquiry textarea{width:100%;font:inherit;
  font-size:16px;line-height:1.5;padding:11px 13px;border:1px solid #cbd2dc;
  background:#fff;color:var(--ink);border-radius:0;margin:0 0 16px}
.inquiry textarea{resize:vertical;min-height:150px}
.inquiry input:focus,.inquiry select:focus,.inquiry textarea:focus{
  outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
/* The note is inserted next to whichever form was submitted, and one of those
   is in the navy footer - where color:#fff cascades in and put white text on a
   pale green ground. It sets its own ink rather than inheriting the ground's. */
.form-note{margin:0 0 26px;padding:14px 18px;font-size:15.5px;line-height:1.55;
  font-weight:500;color:#14532d;background:#ecfdf5;border-left:4px solid #15803d}
.form-note.ok{color:#14532d;background:#ecfdf5;border-left-color:#15803d}
.form-note.bad{color:#7f1d1d;background:#fef2f2;border-left-color:#b91c1c}
.site-footer .form-note a,.form-note a{color:inherit;text-decoration:underline}
/* Every field on both forms is required; the asterisk says so before the
   browser has to. Red on white, but a lighter red on the navy footer. */
.req{color:#b91c1c;font-weight:400}
.site-footer .req{color:#ff9b9b}
.form-req{margin:-4px 0 16px;font-size:13.5px;color:var(--muted)}
.site-footer .form-req{color:#9FB6D6}
/* Belt and braces: if the note ever does land inside the grid, it spans it
   rather than taking a column. */
.inquiry > .form-note{grid-column:1/-1}
@media (max-width:620px){ .inquiry .f2{grid-template-columns:1fr} }

/* -------------------------------------------------------------- media kit */
/* Body line-height is 2, which is right for prose and wrong for every
   component here, so each one sets its own. */
/* Everything on this page shares one left edge. Line length is capped on the
   prose itself rather than by centring each block in its own narrower
   container, which left the text visibly inboard of the headings above it. */
.mk-prose,.typespec,.naming{max-width:820px;margin-right:auto}
/* The opening paragraphs of a page, set a size up so it has a standfirst
   rather than starting flat, and opened with a brand rule so the eye has
   somewhere to land under the breadcrumb.

   Named standfirst, not lede: the footer already has a .lede - "Founder,
   Artistic Director, Choreographer, Dancer, Teacher" - and sharing the name
   put a purple bar and 26px of padding in the footer of every page. */
.standfirst{position:relative;padding-top:58px}
.standfirst::before{content:"";position:absolute;left:0;top:34px;width:64px;height:4px;
  background:var(--brand)}
.standfirst p{font-size:18.5px;line-height:1.72;color:#3a3a3a}
.standfirst p:first-child{font-size:20.5px;color:var(--ink-strong)}
.standfirst b,.standfirst strong{color:var(--ink-strong);font-weight:600}
@media (max-width:600px){
  .standfirst{padding-top:48px}
  .standfirst::before{top:26px}
  .standfirst p{font-size:17px}
  .standfirst p:first-child{font-size:18px}
}

/* A labelled panel for the one thing on a page that is not prose: what he is
   working on now on the biography, when and where the next class is on Sayaw
   PD. Both were paragraphs among paragraphs, and on Sayaw PD the class details
   were two thirds of the way down a page somebody opens to find out how to
   join. */
.callout{border:1px solid var(--line);border-left:4px solid var(--brand);
  background:#fff;padding:20px 26px 22px;margin:30px 0 30px;max-width:820px}
.callout-label{margin:0 0 6px!important;
  font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);line-height:1}
.callout p:last-child{margin:0;font-size:17.5px;line-height:1.6}
.callout b{color:var(--ink-strong)}
.callout dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 20px;
  font-size:17px;line-height:1.5}
.callout dt{font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif;
  font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  padding-top:3px}
.callout dd{margin:0;color:var(--ink-strong)}
@media (max-width:600px){
  .callout{padding:18px 20px 20px}
  .callout dl{grid-template-columns:1fr;gap:2px}
  .callout dd{margin-bottom:10px}
}

/* A standalone list of points - a mission, a set of principles, a budget. The
   same diamond as .feature-points, but able to run in two columns, because
   twelve principles in one column is a scroll rather than a list. */
.points{list-style:none;margin:0 0 26px;padding:0;line-height:1.6}
.points li{position:relative;padding:0 0 12px 26px;font-size:16px;color:#4b5563;
  break-inside:avoid}
.points li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;
  background:var(--brand);transform:rotate(45deg)}
.points--2{columns:2;column-gap:44px}
@media (max-width:720px){ .points--2{columns:1} }

/* -------------------------------------------------------- chapter eyebrow
   A numbered label above the heading. Condensed and letterspaced against the
   heading's normal width, so the two lines read as label and title rather
   than as one heading that wrapped. */
.eyebrow{display:block;margin:0 0 10px;
  font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);line-height:1}
.eyebrow b{color:var(--brand);font-weight:700;margin-right:12px;
  position:relative;padding-right:16px;font-variant-numeric:tabular-nums}
.eyebrow b::after{content:"";position:absolute;right:0;top:50%;width:8px;height:1px;
  background:var(--rule)}

/* ------------------------------------------------------------- pull quote
   The biography carries three quotations that were set as ordinary sentences
   inside their paragraphs. Given room and a rule they become the places the
   page rests, which is most of what stops eight chapters reading as one
   undifferentiated column. */
.feature-body blockquote,.text blockquote{margin:26px 0;padding:2px 0 2px 26px;
  border-left:3px solid var(--brand);position:relative}
.feature-body blockquote p,.text blockquote p{margin:0;font-size:19.5px;
  line-height:1.55;color:var(--ink-strong);font-weight:500;letter-spacing:-.005em}
.feature-body blockquote cite,.text blockquote cite{display:block;margin-top:12px;
  font-style:normal;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
  font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif}
@media (max-width:600px){
  .feature-body blockquote p,.text blockquote p{font-size:17.5px}
}

/* Prose in the biography's chapters. The site's body leading is 2, which is
   right for a short block and too loose for a five-paragraph chapter beside a
   picture - the column stops holding together. */
.feature-body p{line-height:1.78;margin-bottom:16px}
.feature-body b,.feature-body strong{color:var(--ink-strong);font-weight:600}

/* At a glance. The label column is the spec-sheet voice: small, condensed and
   letterspaced, so it never competes with the value beside it.

   Only under naming--spec. The Media Kit uses the same table to show how the
   brand name is written, and its left column IS the specimen - uppercasing it
   would print "NOVYBEREBER.COM" on the row that says always lowercase. */
.naming--spec th{font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif;
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-strong);padding-top:15px;width:30%}
.naming--spec td{line-height:1.65}
.lede{font-size:19px;line-height:1.7;color:#4b5563}

/* Assets. The preview sits on a checkerboard so a transparent PNG reads as
   transparent rather than as a white rectangle, and every card states format,
   true pixel size and weight, because that is what someone deciding whether to
   download it needs to know. */
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:22px;margin:0 0 30px}
.asset{margin:0;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
/* The preview is a fixed frame with the logo absolutely positioned inside it.
   A percentage height does not resolve against an aspect-ratio box, so the
   grid-centred version let a tall logo (the Iloilo mark is 1150x893) overflow
   and get clipped; insets give the image a definite box to fit into. */
.asset-pv{aspect-ratio:16/9;position:relative;overflow:hidden}
.asset-pv img{position:absolute;inset:22px;width:calc(100% - 44px);
  height:calc(100% - 44px);object-fit:contain}
.bg-check{background-image:
  linear-gradient(45deg,#eceff3 25%,transparent 25%),
  linear-gradient(-45deg,#eceff3 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#eceff3 75%),
  linear-gradient(-45deg,transparent 75%,#eceff3 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.bg-plain{background:var(--bg-soft)}
.asset figcaption{padding:16px 18px 18px;border-top:1px solid var(--line);
  line-height:1.5;flex:1;display:flex;flex-direction:column}
.asset h3{margin:0 0 6px;font-size:17px;line-height:1.3}
.asset-note{margin:0 0 10px;color:var(--muted);font-size:14px}
.asset-meta{margin:0 0 14px;font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;color:#8b93a1}
.asset-dl{margin-top:auto;align-self:flex-start;display:inline-block;
  text-decoration:none;border:1px solid var(--brand);color:var(--brand);
  padding:9px 20px;font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif;
  font-weight:700;font-size:16px;line-height:1;text-transform:uppercase;letter-spacing:.03em}
.asset-dl:hover{background:var(--brand-dark);color:#fff}

/* Placement. Each panel is the real logo with the forbidden transform applied,
   so the rule is demonstrated instead of described. */
.rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;margin:0 0 30px}
.rule{margin:0}
.rule-pv{aspect-ratio:16/9;position:relative;
  background:#fff;border:1px solid var(--line);overflow:hidden}
.rule-pv.dark{background:#000}
.rule-pv img{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain}
/* The transformed panels rotate and stretch the logo, so it needs room
   inside the frame or the violation reads as a rendering bug. */
.rule figcaption{margin-top:8px;font-size:14px;line-height:1.4;
  display:flex;gap:7px;align-items:flex-start;color:var(--ink)}
.rule figcaption::before{flex:0 0 auto;width:17px;height:17px;margin-top:1px;
  border-radius:50%;color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center}
.rule.ok figcaption::before{content:"\2713";background:#15803d}
.rule.no figcaption::before{content:"\2715";background:#b91c1c}

/* Colour. A swatch you can see and a value you can take away in one click. */
.swatches{list-style:none;margin:0 0 30px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.swatch{line-height:1.45;position:relative}
.sw{display:block;width:100%;height:96px;border:0;padding:0;cursor:pointer}
.sw-edge{box-shadow:inset 0 0 0 1px var(--line)}
.sw:hover{opacity:.9}
.swatch b{display:block;margin-top:11px;font-size:16px}
.sw-role{display:block;color:var(--muted);font-size:13.5px;margin-bottom:7px}
.sw-val{display:block;font-size:13.5px;letter-spacing:.03em;color:#4b5563;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.swatch>.sw-val:not(.sw-rgb){cursor:pointer}
.swatch>.sw-val:not(.sw-rgb):hover{color:var(--brand-dark)}
.swatch.copied::after{content:"Copied";position:absolute;left:8px;top:8px;
  background:rgba(17,24,39,.92);color:#fff;font-size:12px;letter-spacing:.04em;
  padding:4px 9px;pointer-events:none}

/* Typeface. */
.typespec{border:1px solid var(--line);padding:24px 26px;margin:0 0 30px;line-height:1.6}
.type-name{margin:0 0 14px;font-size:21px;font-weight:600}
.type-sample{font-family:"Nunito Sans",Montserrat,"Segoe UI",system-ui,sans-serif;
  font-size:clamp(19px,2.6vw,27px);line-height:1.35;letter-spacing:.01em;word-break:break-word}
.type-sample span{display:block}
.type-sub{margin:12px 0 14px;font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;color:#8b93a1}
.type-note{margin:0;color:var(--muted);font-size:14.5px}

/* Naming. */
.naming{width:100%;border-collapse:collapse;margin:0 0 30px;line-height:1.55}
.naming th,.naming td{text-align:left;vertical-align:top;padding:13px 14px;
  border-bottom:1px solid var(--line)}
.naming th{width:38%;font-weight:600;white-space:nowrap}
.naming td{color:var(--muted);font-size:15px}

@media (max-width:600px){
  .rules{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .naming th,.naming td{display:block;border-bottom:0;padding:4px 0}
  .naming th{width:auto;padding-top:14px}
  .naming tr{display:block;border-bottom:1px solid var(--line);padding-bottom:12px}
}

/* ------------------------------------------------------------- hero head */
.herohead{position:relative;min-height:var(--hh-h,80vh);display:flex;align-items:flex-end;
  background-image:var(--hh-img);background-size:cover;background-position:50% 50%;
  color:#fff;overflow:hidden}
.herohead .hh-veil{position:absolute;inset:0;backdrop-filter:blur(7.7px)}
.herohead .hh-body{position:relative;z-index:1;width:100%;padding-top:40px;padding-bottom:40px}
.herohead h1,.herohead h2,.herohead h3,.herohead h4,.herohead p{color:#fff;margin:0 0 6px}
.herohead h1{font-size:clamp(30px,4.4vw,44px)}
/* Was an h4, and is set to match one: the look does not change, only what a
   screen reader and a crawler are told it is. */
.herohead .hh-sub{font-size:19px;font-weight:600;line-height:1.3}

/* ---------------------------------------------------------------- banner */
/* Page banners are full-width section backgrounds on the original, not image
   widgets - same treatment as the hero, with the avatar riding over them. */
.banner{position:relative;background:#000;overflow:hidden;line-height:0}
/* Same fault the hero had, and worse here: --banner-h comes from the section's
   own height, which is in vh, so it never grew with the width. At 2560px the
   box was 3.8 times wider than tall and the heads in the outer panels were cut
   off above the eyes. The declared height is now a floor rather than the whole
   answer, 40vw takes over once the window is wide, and the crop is anchored
   where the faces are. */
.banner img{width:100%;height:max(var(--banner-h,600px),40vw);
  max-height:88vh;min-height:260px;object-fit:cover;object-position:50% 30%}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;background:#000;overflow:hidden;line-height:0}
.hero .slide{display:none}
.hero .slide.on{display:block}
/* The height has to keep growing with the width. Capped at 576px it stopped at
   about 1266px wide while the width carried on, so cover scaled the photograph
   up and took the extra off the top and bottom - which is Novy's head. The cap
   moves out to 820px, and the crop is anchored at 30% rather than the centre,
   because in all four slides the faces sit in the upper third. */
.hero img{width:100%;height:clamp(320px,45.5vw,820px);
  object-fit:cover;object-position:50% 30%}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  background:none;border:0;color:#fff;font-size:44px;line-height:1;cursor:pointer;
  padding:10px 18px;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hero-arrow:hover{opacity:1}
.hero-arrow.prev{left:4px}
.hero-arrow.next{right:4px}
.hero-dots{position:absolute;bottom:16px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:2}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0}
.hero-dots button[aria-current="true"]{background:#fff}

/* The portrait that overlaps the hero: 150px, 5px white ring, lifted 110px. */
.avatar{margin:-100px 0 0;text-align:center;position:relative;z-index:3}
.avatar img{width:150px;height:150px;object-fit:cover;border:5px solid #fff;
  border-radius:150px;display:inline-block;margin:0 auto}

/* ----------------------------------------------------------------- posts */
.post-meta{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 22px}
.post-meta a{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px;
  margin:26px 0 0;padding:0;list-style:none}
.card{border:1px solid var(--line);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.card .thumb{aspect-ratio:16/9;object-fit:cover;width:100%;background:var(--bg-soft)}
.card .body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1;line-height:1.6}
/* Both levels: a card title is h2 on a listing page and h3 where it sits under
   a section heading, and styling only h3 left every blog and category card
   title falling through to the generic link color. */
.card h2,.card h3{margin:0 0 8px;font-size:17px;line-height:1.35}
.card h2 a,.card h3 a{text-decoration:none;color:var(--ink)}
.card h2 a:hover,.card h3 a:hover{color:var(--brand-dark)}
.card .cats{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);
  font-weight:700;margin:0 0 8px}
.card p{font-size:14px;color:var(--muted);margin:0 0 14px}
.card .when{margin-top:auto;font-size:13px;color:var(--muted)}
.pager{display:flex;gap:12px;justify-content:space-between;margin:40px 0 0;font-size:14px;line-height:1.6}
.blog-filter{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.blog-filter input,.blog-filter select{padding:11px 14px;border:1px solid var(--line);
  font:inherit;font-size:15px;line-height:1.4;background:#fff;color:var(--ink);min-width:0}
.blog-filter input{flex:1 1 260px}
.blog-filter select{flex:0 1 220px}
.blog-count{color:var(--muted);font-size:14px;line-height:1.6;margin:4px 0 0}
.blog-empty{color:var(--muted);margin:26px 0}

/* ----------------------------------------------------------------- forms */
.form{display:grid;gap:12px;max-width:520px}
.form label{font-size:13px;font-weight:600;line-height:1.6}
.form input,.form textarea{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.25);
  font:inherit;font-size:15px;line-height:1.5;background:rgba(255,255,255,.06);color:#fff}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.6)}
.form textarea{min-height:120px;resize:vertical}
.form .btn{justify-self:start}
main .form input,main .form textarea{background:#fff;color:var(--ink);border-color:var(--line)}
main .form input::placeholder,main .form textarea::placeholder{color:#9aa1ab}

/* ---------------------------------------------------------------- footer */
/* 4x2 on desktop, 4x2 down to tablet, 2x4 on a phone - eight squares stay
   eight squares rather than becoming a long column. */
/* The band used to butt straight up against the last section of the page - on
   a banded page that meant the pink contact panel and a row of Instagram tiles
   sharing an edge, with 34px between them. The margin puts real white space
   between the page and the follow band, so the rule reads as the end of the
   page rather than as a divider inside it. */
.ig-band{border-top:1px solid var(--line);margin-top:84px;padding:46px 0 48px;
  text-align:center}
.ig-grid{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:8px}
.ig-grid li{margin:0}
.ig-grid a{display:block;position:relative;overflow:hidden;background:var(--bg-soft)}
.ig-grid img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  transition:transform .3s}
.ig-grid a:hover img{transform:scale(1.05)}
.ig-play{position:absolute;right:8px;top:8px;width:0;height:0;
  border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
@media (max-width:700px){
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .ig-band{margin-top:52px;padding:34px 0 36px}
}
/* Consent bar. Sits above the drawer and its scrim, below the skip link and
   the lightbox, so it can never cover the keyboard entry point to the page. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 24px;padding:15px 24px;background:var(--navy);color:#fff;
  font-size:14.5px;line-height:1.55;box-shadow:0 -2px 16px rgba(0,0,0,.22)}
/* .consent sets display, which would otherwise beat the UA rule for [hidden]
   and leave the bar on screen after a choice is made. */
.consent[hidden]{display:none}
.consent p{margin:0;max-width:62ch}
.consent a{color:#fff}
.consent-btns{display:flex;gap:10px;flex:none}
.consent button{font-family:"Fira Sans Extra Condensed","Fira Sans",sans-serif;
  font-size:15px;letter-spacing:.05em;text-transform:uppercase;
  min-height:42px;padding:9px 20px;border:0;cursor:pointer;
  background:#fff;color:var(--navy);transition:background .15s,color .15s}
.consent button.ghost{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.consent button:hover{background:var(--blue);color:var(--navy)}
.consent button.ghost:hover{background:rgba(255,255,255,.14);color:#fff}
@media (max-width:640px){
  .consent{flex-direction:column;gap:12px;text-align:center;padding:16px 18px}
  .consent-btns{width:100%}
  .consent button{flex:1}
}
.ig-band h2{margin:0;font-size:22px}
.ig-band a{text-decoration:none;color:var(--ink)}
.ig-band a:hover{color:var(--brand-dark)}
.post-layout{display:grid;grid-template-columns:75% 25%;gap:0}
.post-layout .post-main{padding-right:38px;min-width:0}
.patron{padding:8px 0 0 26px;border-left:1px solid var(--line);text-align:center;
  font-size:14px;line-height:1.7}
.patron .patron-face{width:110px;height:110px;border-radius:110px;object-fit:cover;
  margin:0 auto 14px;border:5px solid #fff;box-shadow:0 0 0 1px var(--line)}
.patron-kicker{text-transform:uppercase;letter-spacing:.08em;font-size:11px;
  font-weight:700;color:var(--muted);margin:0}
.patron h2{margin:0 0 12px;font-size:20px}
.patron h3{margin:16px 0 6px;font-size:15px}
.patron p{margin:0 0 8px;color:var(--muted)}
.patron .btn{margin-top:12px;padding:12px 22px;font-size:15px}
.crumbs{font-size:13px;color:var(--muted);line-height:1.8;margin:26px 0 0}
.crumbs a{color:var(--muted)}
.crumbs .sep{margin:0 8px;opacity:.6}
@media (max-width:900px){
  .post-layout{grid-template-columns:1fr}
  .post-layout .post-main{padding-right:0}
  .patron{border-left:0;border-top:1px solid var(--line);padding:26px 0 0;margin-top:34px}
}
.site-footer{background:var(--navy);color:#fff;padding:52px 0 0;margin-top:56px}
.site-footer a{color:#fff}
.site-footer h2{margin:0 0 6px;font-size:26px;color:#fff}
.site-footer h3{margin:0 0 14px;font-size:18px;color:#fff}
.site-footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.site-footer .lede{font-weight:600;color:var(--blue);margin:0 0 14px;font-size:15px}
.site-footer p{color:rgba(255,255,255,.88);font-size:15px}
.colophon{border-top:1px solid rgba(255,255,255,.16);margin-top:44px;padding:18px 0;font-size:13px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:rgba(255,255,255,.75)}

/* ------------------------------------------------------------ responsive */
@media (max-width:1024px){
  .nav a,.nav .top{padding:12px 13px;font-size:19px}
  .logo img{width:140px}
}
/* The drawer wrapper is inert on desktop: display:contents dissolves it so the
   nav and social list are direct flex children of the header row, as before. */
.drawer{display:contents}
.drawer-top,.drawer-foot,.drawer-x,.scrim{display:none}

@media (max-width:900px){
  .site-footer .cols{grid-template-columns:1fr;gap:32px}
  /* The right-hand controls travel together. Only the first of them takes the
     auto margin - both the button and the burger had one, which pushed them to
     opposite ends of the space left over instead of grouping them. */
  .menu-btn{display:block;order:3;margin-left:0}
  .cta{order:2;margin-left:0;padding:10px 18px;font-size:15px}
  .social--bar{order:1;margin-left:auto}
  .site-header .wrap{position:relative;gap:10px}

  /* Panel: logo at the top, menu, contact and social at the foot. */
  .drawer{position:fixed;top:0;right:0;bottom:0;z-index:70;
    width:min(86vw,340px);background:#fff;display:flex;flex-direction:column;
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:-14px 0 34px rgba(0,0,0,.18);
    transform:translateX(100%);visibility:hidden;
    transition:transform .28s ease,visibility 0s linear .28s}
  .drawer.open{transform:none;visibility:visible;
    transition:transform .28s ease}
  .drawer-top{display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:18px 20px;border-bottom:1px solid var(--rule)}
  .drawer-top .logo img{width:150px}
  /* Re-enabled here: the shared hide rule above switches off drawer-only
     chrome on desktop, and leaving this one off made the close button
     unfocusable, so opening the drawer dropped focus onto the body. */
  .drawer-x{display:block;background:none;border:0;font-size:20px;line-height:1;
    cursor:pointer;color:var(--nav-ink);padding:8px 10px}
  .drawer-x:hover{color:var(--brand-dark)}

  .drawer .nav{flex:1 0 auto;display:block;padding:8px 0;align-items:stretch}
  .drawer .nav>li{width:100%;border-bottom:1px solid var(--line)}
  .drawer .nav>li:last-child{border-bottom:0}
  .drawer .nav a,.drawer .nav .top{width:100%;text-align:left;padding:14px 20px}
  .drawer .nav .top{display:flex;align-items:center;justify-content:space-between}
  .drawer .nav ul{position:static;display:none;border:0;box-shadow:none;
    min-width:0;background:var(--bg-soft);padding:2px 0}
  .drawer .nav li.open>ul{display:block}
  .drawer .nav ul a{font-size:17px;padding:11px 20px 11px 34px}
  .drawer .nav .caret{transition:transform .2s}
  .drawer .nav li.open>.top .caret{transform:rotate(180deg)}

  .drawer-foot{display:block;padding:20px;border-top:1px solid var(--rule);
    background:var(--bg-soft);line-height:1.6}
  .drawer-label{margin:0 0 6px;font-size:12.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted)}
  .drawer-mail{margin:0 0 2px;font-size:15.5px;overflow-wrap:anywhere}
  .drawer-where{margin:0 0 14px;color:var(--muted);font-size:14.5px}
  .drawer-foot .social{gap:8px}

  /* A tablet has room for the social icons; a phone does not. They stay in the
     bar down to 700px and the drawer carries them below that. */
  .social--bar a{width:34px;height:34px}
}

/* Phones: the icons come out of the bar and the contact button takes over the
   auto margin that was holding the group to the right. */
@media (max-width:700px){
  .social--bar{display:none}
  .cta{margin-left:auto}

  /* Always in the DOM, state driven by the body class. It used to be toggled
     with the hidden attribute and faded in from a requestAnimationFrame - and
     rAF does not fire in a background tab, so opening the menu there left the
     drawer sitting over a completely transparent scrim. */
  .scrim{display:block;position:fixed;inset:0;z-index:60;
    background:rgba(17,24,39,.5);opacity:0;pointer-events:none;
    transition:opacity .28s ease}
  body.no-scroll .scrim{opacity:1;pointer-events:auto}

  .avatar{margin-top:-70px}
  .avatar img{width:120px;height:120px}
}
@media (max-width:560px){
  .logo img{width:150px}
  .hero-arrow{font-size:32px;padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}