/* ============================================================
   HAJI MIKE — theme stylesheet (derived from the approved preview)
   Monochrome by design: black, paper white, and one photograph.
   Colour appears only inside artwork and photography.
   ============================================================ */

:root{
  /* --ink is sampled straight from the hero photograph's background, which is
     true black; the lifted tones carry its faint violet falloff (#020106) so the
     dark greys read as belonging to the image rather than as generic neutrals */
  --ink:#000;
  /* insets only -- cards and tiles sitting ON black, never a full-width band.
     Two grounds carry the page: --ink and --paper. Nothing in between. */
  --ink-2:#0b0a0f;
  --ink-3:#141119;
  /* cream sampled from beldonhaigh.com (#f2e9cc), pulled back a little
     so long body text still holds contrast against it */
  --paper:#f1ebd8;
  --paper-2:#e4dcc3;
  --white:#fff;
  --mute:#9b9791;
  --mute-2:#6d6a66;
  --caption:#3a3733;   /* names under photos: darker than the eyebrow grey, softer than ink */
  --line:rgba(255,255,255,.13);
  --line-2:rgba(255,255,255,.28);
  --line-p:rgba(10,10,10,.16);
  --pad:clamp(1.25rem,5vw,5.5rem);
  --maxw:1360px;
  --display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Spectral",Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- shared type ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--ui);font-size:.688rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  margin:0 0 1.5rem;display:flex;align-items:center;gap:.85rem;
}
.eyebrow::before{content:"";width:2rem;height:1px;background:currentColor;flex:none;opacity:.8}
.paper .eyebrow{color:var(--mute-2)}

/* Three levels, and only three: the hero, the two things he actually wants you
   to act on (the new album, the booking), and everything else. */
h2.section-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.15rem,5.4vw,4.15rem);
  line-height:.92;letter-spacing:-.015em;text-transform:uppercase;
  margin:0 0 1.6rem;
}
h2.section-title--lead{
  font-size:clamp(2.9rem,7.8vw,6.5rem);
  line-height:.88;letter-spacing:-.02em;
  margin-bottom:1.9rem;
}
h3{font-family:var(--ui);font-weight:700;letter-spacing:-.01em;margin:0 0 .6rem}

.lede{font-size:clamp(1.06rem,1rem + .45vw,1.35rem);line-height:1.62;color:#ddd9d3;font-weight:300;max-width:46ch}
.paper .lede{color:#3a3733}
p{margin:0 0 1.15rem}
.muted{color:var(--mute)}
.paper .muted{color:var(--mute-2)}

section{padding-block:clamp(4.5rem,9vw,8.5rem);position:relative}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ui);font-size:.75rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:1rem 1.65rem;border:1px solid var(--line-2);
  background:transparent;color:var(--white);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--solid{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--solid:hover{background:transparent;color:var(--white);border-color:var(--line-2)}
.paper .btn{border-color:var(--line-p);color:var(--ink)}
.paper .btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.paper .btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.paper .btn--solid:hover{background:transparent;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;gap:2rem;
  padding:1.1rem var(--pad);
  transition:background .35s,border-color .35s,padding .35s;
  border-bottom:1px solid transparent;
}
/* scrim so the nav stays legible over whatever the hero image is doing
   behind it, until it goes solid on scroll */
.nav::before{
  content:"";position:absolute;inset:-1px 0 auto;height:190%;z-index:-1;
  background:linear-gradient(rgba(0,0,0,.78),rgba(0,0,0,.45) 45%,transparent);
  transition:opacity .35s;pointer-events:none;
}
.nav.is-stuck::before{opacity:0}
.nav.is-stuck{background:rgba(0,0,0,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding-block:.8rem}
.nav__mark{font-family:var(--display);font-size:1.18rem;letter-spacing:.02em;text-transform:uppercase;line-height:1;white-space:nowrap}
.nav__links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem 1.35rem;margin-left:auto;list-style:none;padding:0;margin-block:0;max-width:62vw}
.nav__links a{
  font-family:var(--ui);font-size:.72rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:#d8d5d0;
  padding-block:.35rem;position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.nav__links a:hover,.nav__links a.is-current{color:#fff}
.nav__links a.is-current::after{transform:scaleX(1)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__social{display:flex;gap:.85rem;align-items:center;padding-left:1.75rem;border-left:1px solid var(--line)}
.nav__social a{color:#c9c6c1;transition:color .2s,transform .2s}
.nav__social a:hover{color:#fff;transform:translateY(-2px)}
.icon{width:17px;height:17px;fill:currentColor;display:block}
.nav__toggle{display:none}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:grid;grid-template-columns:1.02fr .98fr;
  border-bottom:1px solid var(--line);
}
.hero__panel{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(7rem,12vw,9rem) clamp(1.25rem,4.5vw,4.5rem) clamp(4.5rem,6vw,5.5rem);
}
.hero__title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(3.7rem,9.2vw,9.5rem);line-height:.83;letter-spacing:-.025em;
  margin:0 0 1.6rem;
}
.hero__title span{display:block}
.hero__title .outline{
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);
}
.hero__sub{font-size:clamp(1.02rem,.95rem + .4vw,1.28rem);line-height:1.6;font-weight:300;color:#d8d4ce;max-width:34ch;margin:0}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;padding:0;
  margin:2.75rem 0 0;border-top:1px solid var(--line);padding-top:1.35rem;
  font-family:var(--ui);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);
}
.hero__media{position:relative;overflow:hidden;background:var(--ink)}
/* he faces left into the type, and the stage background is already near-black,
   so the photo meets the panel with no visible seam */
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 38%}
/* keep the split hard-edged on desktop; the scrim only returns when stacked */
.scrollcue{
  position:absolute;left:clamp(1.25rem,4.5vw,4.5rem);bottom:2.25rem;z-index:5;
  margin:0;font-family:var(--ui);font-size:.65rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:.7rem;
}
.scrollcue span{display:block;width:2.5rem;height:1px;background:currentColor;transform-origin:left;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleX(.35)}50%{transform:scaleX(1)}}


/* ---------- album feature ---------- */
.album{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.album__art{position:relative}
.album__art img{width:100%;border:1px solid var(--line)}
.album__art figcaption{
  font-family:var(--ui);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute-2);margin-top:1rem;
}
.credits{list-style:none;padding:0;margin:2.25rem 0 0;border-top:1px solid var(--line)}
.credits li{
  display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.95rem;
}
.credits dt,.credits b{
  font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);padding-top:.28rem;
}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.4vw,1rem);margin-top:clamp(2.5rem,5vw,4rem)}
.strip figure{margin:0;position:relative;overflow:hidden;background:var(--ink-3)}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.strip figure:hover img{transform:scale(1.04)}
.strip figcaption{
  position:absolute;inset:auto 0 0;padding:1.5rem 1rem .85rem;
  background:linear-gradient(transparent,rgba(0,0,0,.9));
  font-family:var(--ui);font-size:.64rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- live ---------- */
.dates{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.dates li{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr) 12rem auto;
  gap:1.5rem;align-items:baseline;padding:1.5rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .3s,background .3s;
}
.dates li:hover{padding-left:.85rem;background:linear-gradient(90deg,rgba(255,255,255,.045),transparent 55%)}
.dates .d{font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--mute)}
.dates .t{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,2rem);text-transform:uppercase;line-height:1.02;letter-spacing:-.01em}
.dates .c{font-family:var(--ui);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.dates .tag{
  font-family:var(--ui);font-size:.62rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--line-2);padding:.45rem .8rem;color:var(--mute);white-space:nowrap;
}
/* Upcoming is what he wants you to act on, so it takes the weight: bigger
   type, more room, a solid label. Recent is reference material -- it steps
   down a size, greys off, and loses the chip border so it stops competing. */
.dates--upcoming li{padding-block:1.9rem}
.dates--upcoming .d{color:#fff}
.dates--upcoming .t{color:#fff;font-size:clamp(1.55rem,3.1vw,2.45rem)}
.dates--upcoming .c{color:#b9b5af}
.dates--upcoming .tag{background:var(--white);color:var(--ink);border-color:var(--white)}

.dates--past{border-top-color:rgba(255,255,255,.08)}
.dates--past li{padding-block:1.05rem;border-bottom-color:rgba(255,255,255,.08)}
.dates--past .d{color:#7d7973}
.dates--past .t{color:#8a8681;font-size:clamp(1rem,1.7vw,1.35rem)}
.dates--past .c{color:#7d7973}
.dates--past .tag{border-color:transparent;padding-inline:0;color:#7d7973;font-size:.6rem}
.dates--past li:hover .t{color:#c9c5bf}

.dates__head{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin:3.25rem 0 .85rem;
}
.dates__head:first-of-type{margin-top:0}
.dates__head--up{color:#fff;font-size:.72rem}
.dates__head--up::before{content:"";width:.42rem;height:.42rem;background:#fff;flex:none}
.offer{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:clamp(3rem,6vw,5rem);border:1px solid var(--line)}
.offer article{background:var(--ink);padding:clamp(1.75rem,3vw,2.5rem)}
.offer h3{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.offer p{font-size:.95rem;color:#c4c0ba;margin:0}
.offer .for{
  display:block;margin-top:1.35rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-family:var(--ui);font-size:.66rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);line-height:1.8;
}

/* ---------- radio ---------- */
.radio{border-block:1px solid var(--line);overflow:hidden}
.radio__bg{position:absolute;inset:0;z-index:0}
.radio__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15);opacity:.14}
.radio__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(0,0,0,.62) 42%,var(--ink) 100%)}
.radio .wrap{position:relative;z-index:1}

.stations{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2.5rem,5vw,3.5rem)}
.stations a{background:rgba(0,0,0,.72);padding:clamp(1.5rem,3vw,2.25rem);transition:background .3s}
.stations a:hover{background:rgba(255,255,255,.06)}
.stations p{margin:0}
.stations .s{font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.75rem);text-transform:uppercase;line-height:1.05;margin-bottom:.4rem}
.stations .l{font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* ---------- koubebi ---------- */
/* the logo column is sized to the logo itself so it sits beside the text
   rather than floating in the middle of an over-wide column */
.koubebi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
/* the source logo is only 225px square -- don't scale it past its own pixels */
.koubebi__logo{width:100%;max-width:225px;border:1px solid var(--line)}

/* ---------- words (inverted) ---------- */
.paper{background:var(--paper);color:var(--ink)}
.paper .section-title,.paper .hero__title{color:var(--ink)}
.books{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,4.5vw,3.5rem);margin-top:clamp(2rem,4vw,3rem)}
.book{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(1.25rem,2.5vw,2rem);align-items:start}
.book img{width:100%;border:1px solid var(--line-p);box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.book h3{font-family:var(--body);font-weight:600;font-size:1.3rem;line-height:1.24;letter-spacing:-.01em;margin-bottom:.5rem}
.book .pub{font-family:var(--ui);font-size:.65rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2);margin-bottom:.85rem}
.book p{font-size:.95rem;line-height:1.6;color:#4a4741}
.pubs{list-style:none;padding:0;margin:clamp(3rem,6vw,4.5rem) 0 0;border-top:1px solid var(--line-p)}
.pubs li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--line-p);align-items:baseline}
.pubs .y{font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--mute-2)}
.pubs .n{font-size:1rem;line-height:1.45}
.pubs .n em{color:#4a4741;font-size:.92rem;display:block;margin-top:.2rem}
.quote{
  margin:clamp(3rem,6vw,4.5rem) 0 0;padding:clamp(1.75rem,4vw,2.75rem) 0;
  border-block:1px solid var(--line-p);
}
.quote blockquote{margin:0;font-size:clamp(1.15rem,1rem + .8vw,1.7rem);line-height:1.42;font-weight:300;font-style:italic;max-width:34ch}
.quote cite{display:block;margin-top:1.1rem;font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--mute-2)}

/* ---------- discography page ---------- */
.pubs--discog .n{font-size:.98rem}
.pubs--discog .n a{border-bottom:1px solid rgba(10,10,10,.28)}
.pubs--discog .n a:hover{border-bottom-color:var(--ink)}
.pubs--discog .pubs__decade{border-bottom:0;padding:2.4rem 0 .5rem}
.pubs--discog .pubs__decade:first-child{padding-top:0}
.pubs--discog .pubs__decade b{font-family:var(--display);font-weight:400;font-size:1.6rem;letter-spacing:.01em}
.pubs--discog .y{font-variant-numeric:tabular-nums}

/* ---------- discography ---------- */
.discog{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:clamp(1rem,2.2vw,1.75rem);margin-top:clamp(2rem,4vw,3rem)}
.rec figure{margin:0;overflow:hidden;background:var(--ink-3);position:relative}
/* sleeves rest mostly monochrome so the grid belongs to the black/white site;
   colour arrives on hover, which is where his artwork gets to be itself */
.rec img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .5s;filter:grayscale(.65)}
.rec:hover img{transform:scale(1.05);filter:grayscale(0)}
.rec .y{font-family:var(--ui);font-size:.65rem;font-weight:600;letter-spacing:.16em;color:var(--mute);margin-top:.85rem;display:block}
.rec .t{font-family:var(--ui);font-size:.88rem;font-weight:600;line-height:1.3;margin-top:.25rem;display:block}
.rec .f{font-size:.82rem;color:var(--mute);display:block;margin-top:.1rem}

/* ---------- archive cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem);margin-top:clamp(2rem,4vw,3rem)}
.card{border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .3s,transform .4s}
.card:hover{border-color:var(--line-2);transform:translateY(-4px)}
.card__img{overflow:hidden;background:var(--ink-3)}
.card__img img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .5s}
.card:hover .card__img img{transform:scale(1.05);filter:grayscale(.2)}
.card__body{padding:clamp(1.35rem,2.4vw,1.85rem);flex:1;display:flex;flex-direction:column}
.card h3{font-family:var(--ui);font-size:.95rem;letter-spacing:.02em;line-height:1.3;margin-bottom:.6rem}
.card p{font-size:.92rem;color:#b8b4ae;margin:0 0 1.25rem}
.card .more{margin-top:auto;font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:.5rem}
.card:hover .more{color:#fff}

/* ---------- booking / footer ---------- */
.booking{text-align:center}
.booking p{max-width:44ch;margin-inline:auto;color:#4a4741}
.booking .btn-row{justify-content:center}
.booking .eyebrow{justify-content:center}

.foot{background:var(--ink);padding-block:clamp(3.5rem,6vw,5rem) 2.5rem}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,4vw,3.5rem);padding-bottom:3rem;border-bottom:1px solid var(--line)}
.foot__mark{font-family:var(--display);font-size:clamp(2rem,4.5vw,3rem);text-transform:uppercase;line-height:.95;margin:0 0 1rem}
.foot h4{font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:0 0 1.25rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.65rem}
.foot li a{font-size:.95rem;color:#c8c4be;transition:color .2s}
.foot li a:hover{color:#fff}
.signup{display:flex;gap:0;margin-top:.5rem;max-width:340px;border:1px solid var(--line-2)}
.signup input{
  flex:1;min-width:0;background:transparent;border:0;color:#fff;padding:.85rem 1rem;
  font-family:var(--ui);font-size:.82rem;
}
.signup input::placeholder{color:var(--mute-2)}
.signup input:focus{outline:none;background:rgba(255,255,255,.05)}
.signup button{
  background:var(--white);color:var(--ink);border:0;padding:.85rem 1.15rem;cursor:pointer;
  font-family:var(--ui);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.foot__bar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding-top:2rem}
.foot__bar p{margin:0;font-family:var(--ui);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2)}
.foot__social{display:flex;gap:1.15rem}
.foot__social a{color:var(--mute);transition:color .2s,transform .2s}
.foot__social a:hover{color:#fff;transform:translateY(-2px)}

/* ---------- interior templates ----------
   The homepage is the stage and stays black. Every page you actually *read*
   opens with a black masthead and then drops into cream, so the reading
   environment is consistent and the two grounds keep the meaning they have
   on the homepage. */

.masthead{
  background:var(--ink);
  /* one height on every page: the band is fixed, the text centres in the room
     below the menu. Tall enough for a two-line title plus a standfirst. */
  min-height:400px;box-sizing:border-box;   /* one height on every page */
  display:flex;align-items:center;
  padding:clamp(6.5rem,10vw,7.5rem) 0 clamp(2.25rem,4vw,3rem);
  border-bottom:1px solid var(--line);
}
/* masthead sits on the same grid as the nav; the reading measure is set
   on .prose so every left edge down the page lines up */
.masthead > .wrap{width:100%}
.masthead h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.5rem,6.6vw,5.25rem);line-height:.9;letter-spacing:-.02em;
  margin:0;max-width:16ch;text-wrap:balance;
}
.masthead .standfirst{
  font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.6;font-weight:300;
  color:#d8d4ce;max-width:52ch;margin:1.5rem 0 0;
}
.masthead .meta{
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;list-style:none;padding:1.35rem 0 0;
  margin:2.25rem 0 0;border-top:1px solid var(--line);
  font-family:var(--ui);font-size:.68rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mute);
}

.article{padding-block:clamp(4.5rem,8vw,7rem) clamp(3.5rem,7vw,6rem)}   /* clear air under the title band */
.article .wrap{max-width:var(--maxw)}

.prose{font-size:1.08rem;line-height:1.78;overflow-wrap:anywhere}   /* his pages carry long bare URLs */
/* .prose and .wrap are the same element, so the measure has to outrank
   `.article .wrap`, and box-sizing:border-box means the wrap's own
   horizontal padding sits *inside* max-width -- add it back or the
   reading column comes out ~16 characters too narrow */
/* the page is wide; the *text* keeps a 68ch measure, media runs the width.
   That is what stops a page reading as a document in a narrow column. */
.article .prose{max-width:calc(68ch + 2 * var(--pad))}   /* images, galleries and players share the text column */
.prose > p:first-of-type{font-size:1.3rem;line-height:1.6;font-weight:300;color:#2f2c28}
.prose p{margin:0 0 1.55rem}
.prose h2{
  font-family:var(--ui);font-weight:700;font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute-2);
  margin:3.25rem 0 1.1rem;padding-top:1.5rem;border-top:1px solid var(--line-p);
}
.prose em{font-style:italic}
.prose strong{font-weight:600}
.prose a{border-bottom:1px solid rgba(10,10,10,.3);transition:border-color .2s,background .2s}
.prose a:hover{border-bottom-color:var(--ink);background:rgba(10,10,10,.06)}
.prose ul{margin:0 0 1.55rem;padding-left:1.15rem}
.prose li{margin-bottom:.5rem}
.prose blockquote{
  margin:2.5rem 0;padding:0 0 0 1.6rem;border-left:2px solid var(--ink);
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.45;font-weight:300;font-style:italic;
}
.prose figure{margin:2.5rem 0}
.prose figure img{width:100%;border:1px solid var(--line-p)}
.prose figcaption{
  font-family:var(--ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute-2);margin-top:.8rem;
}

/* ---------- WordPress block coverage ----------
   Class names below are the ones his pages really emit (audited 1 Sep):
   wp-block-image / -gallery / -audio / -embed / -list / -separator. */
.prose h3{font-family:var(--serif);font-weight:600;font-size:1.28rem;line-height:1.3;
  letter-spacing:-.005em;margin:2.4rem 0 .75rem}
.prose h4{font-family:var(--ui);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-2);margin:2rem 0 .6rem}
.prose h5,.prose h6{font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute-2);margin:1.6rem 0 .5rem}
.prose ol{margin:0 0 1.55rem;padding-left:1.2rem}
.prose li{padding-left:.2rem}
.prose li::marker{color:var(--mute-2)}
.prose sup,.prose sub{font-size:.72em;line-height:0}

.prose hr,.prose .wp-block-separator{
  border:0;border-top:1px solid var(--line-p);margin:2.75rem 0;width:100%;opacity:1;height:0;
}

.prose .wp-block-image{margin:2.5rem 0}
.prose .wp-block-image img{width:100%;height:auto;border:1px solid var(--line-p)}
/* he shrank many images with the editor's resize handles to fit the old narrow
   layout; in this column the figure's own max-width is the right size */
.prose .is-resized img{width:100%!important;height:auto!important}   /* WP writes the resize as an inline style on the img */
.prose figure.is-resized{width:auto!important;height:auto!important}
.prose .aligncenter{margin-inline:auto;text-align:center}
/* floated images in a 68ch paragraph column: cap them so the text beside them
   keeps at least ~40 characters a line instead of being squeezed to a sliver */
.prose .alignleft{float:left;max-width:min(42%,300px);margin:.35rem 1.75rem 1rem 0}
.prose .alignright{float:right;max-width:min(42%,300px);margin:.35rem 0 1rem 1.75rem}
.prose > .wp-block-image.alignleft,.prose > .wp-block-image.alignright{max-width:min(42%,300px)}
.prose .alignwide,.prose .alignfull{width:100%;max-width:none}
.prose .wp-block-image figcaption,.prose figure > figcaption{
  font-family:var(--ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute-2);margin-top:.8rem;
}

/* galleries: WordPress nests figure.wp-block-image inside figure.wp-block-gallery */
.prose .wp-block-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:2.5rem 0}
.prose .wp-block-gallery.columns-1{grid-template-columns:1fr}
.prose .wp-block-gallery.columns-3,.prose .wp-block-gallery.columns-4,.prose .wp-block-gallery.columns-5,
.prose .wp-block-gallery.columns-6,.prose .wp-block-gallery.columns-7,.prose .wp-block-gallery.columns-8{grid-template-columns:repeat(3,1fr)}
.prose .wp-block-gallery .wp-block-image{margin:0;width:auto!important}
.prose .wp-block-gallery figure img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.prose .wp-block-gallery a{display:block}
.prose .wp-block-gallery > figcaption{grid-column:1/-1;margin-top:.2rem}

/* classic [gallery] shortcode output, as on his Music page */
.prose .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:2.5rem 0}
.prose .gallery.gallery-columns-1{grid-template-columns:1fr}
.prose .gallery.gallery-columns-3,.prose .gallery.gallery-columns-4,.prose .gallery.gallery-columns-5,
.prose .gallery.gallery-columns-6,.prose .gallery.gallery-columns-7,.prose .gallery.gallery-columns-8{grid-template-columns:repeat(3,1fr)}
.prose .gallery-item{margin:0;width:auto!important;max-width:none!important}
.prose .gallery-icon{margin:0}
.prose .gallery-icon img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid var(--line-p)}
.prose .gallery-caption{font-family:var(--ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);margin-top:.5rem}

/* images dropped straight into paragraphs (the classic editor's habit): align
   their tops, give them even spacing, keep them in the column */
.prose p > img,.prose p > a > img{display:inline-block;vertical-align:top;max-width:100%;height:auto;margin:.5rem .75rem .5rem 0;border:1px solid var(--line-p)}
.prose p > img.aligncenter{display:block;margin:1.5rem auto}

/* core Buttons block, so buttons he adds in the editor look like the site's */
.prose .wp-block-buttons{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 2.5rem}
.prose .wp-block-button__link{display:inline-flex;align-items:center;font-family:var(--ui);font-size:.75rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding:1rem 1.65rem;border:1px solid var(--line-p);border-radius:0;
  background:transparent;color:var(--ink);text-decoration:none;transition:background .25s,color .25s}
.prose .wp-block-button__link:hover,.prose .is-style-fill .wp-block-button__link{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.prose .is-style-fill .wp-block-button__link:hover{background:transparent;color:var(--ink)}

/* audio: The Living Chiofta page stacks thirty of these, so they must read as
   a track list rather than thirty separate widgets */
.prose .wp-block-audio{margin:0;padding:.7rem 0;border-top:1px solid var(--line-p)}
.prose .wp-block-audio:last-of-type,.prose .wp-block-audio + :not(.wp-block-audio){border-top-color:var(--line-p)}
.prose .wp-block-audio + .wp-block-audio{margin-top:0}
.prose .wp-block-audio figcaption{margin:0 0 .45rem;color:var(--body-c);font-size:.72rem;letter-spacing:.12em}
.prose .wp-block-audio audio{width:100%;display:block;height:38px}
.prose .wp-block-audio:has(+ :not(.wp-block-audio)),.prose .wp-block-audio:last-child{border-bottom:1px solid var(--line-p)}

.prose .wp-block-video{margin:2.5rem 0}
.prose .wp-block-video video{width:100%;height:auto;display:block;background:#000}

/* embeds: the wrapper WordPress emits gets the aspect ratio, the iframe fills it */
.prose .wp-block-embed{margin:2.5rem 0}
.prose .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.prose .wp-block-embed__wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* lite YouTube: poster + play; the real iframe loads only on click, so YouTube
   never sees the visitor until they choose to watch (and nothing third-party
   loads on page view) */
.lite-yt{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:pointer;
  border:1px solid var(--line-p)}
.lite-yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .3s}
.lite-yt:hover img{opacity:1}
.lite-yt .play{position:absolute;inset:0;display:grid;place-items:center}
.lite-yt .play span{width:4.25rem;height:4.25rem;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;transition:transform .25s}
.lite-yt:hover .play span,.lite-yt:focus-visible .play span{transform:scale(1.07)}
.lite-yt .play svg{width:1.5rem;height:1.5rem;fill:currentColor;margin-left:.2rem}
.lite-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.prose table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line-p);vertical-align:top}
.prose th{font-family:var(--ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}

@media (max-width:600px){
  .prose .wp-block-gallery,.prose .wp-block-gallery[class*=columns-],.prose .gallery,.prose .gallery[class*=gallery-columns-]{grid-template-columns:repeat(2,1fr)}
  .prose .alignleft,.prose .alignright{float:none;max-width:100%;margin:2rem 0}
}

/* end-of-article furniture */
.endnote{
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.75rem;border-top:1px solid var(--line-p);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
  font-family:var(--ui);font-size:.68rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mute-2);
}
.endnote a{border-bottom:1px solid rgba(10,10,10,.3)}
.endnote a:hover{border-bottom-color:var(--ink)}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-p);
  border:1px solid var(--line-p);margin-top:clamp(3rem,6vw,4.5rem)}
.pager a{background:var(--paper);padding:clamp(1.35rem,2.5vw,1.85rem);transition:background .3s}
.pager a:hover{background:var(--paper-2)}
.pager .dir{font-family:var(--ui);font-size:.64rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute-2);display:block;margin-bottom:.5rem}
.pager .ttl{font-size:1.05rem;line-height:1.35;display:block}
.pager a:last-child{text-align:right}

/* ---------- archive listing ---------- */
.entries{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-p)}
.entries li{border-bottom:1px solid var(--line-p)}
.entries a{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr) 150px;
  gap:clamp(1.25rem,3vw,2.5rem);align-items:start;
  padding:clamp(1.5rem,3vw,2.25rem) 0;transition:padding-left .3s,background .3s;
}
.entries a:hover{padding-left:.9rem;background:rgba(10,10,10,.04)}
.entries .d{font-family:var(--ui);font-size:.68rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mute-2);padding-top:.4rem}
.entries h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,2.6vw,2rem);line-height:1;letter-spacing:-.01em;margin:0 0 .6rem}
.entries p{margin:0;font-size:.98rem;line-height:1.6;color:#4a4741}
.entries img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line-p);
  filter:grayscale(1);transition:filter .4s}
.entries a:hover img{filter:grayscale(0)}
.entries .tag{display:inline-block;margin-top:.75rem;font-family:var(--ui);font-size:.62rem;
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--mute-2);
  border:1px solid var(--line-p);padding:.35rem .7rem}

.pagination{display:flex;gap:.5rem;justify-content:center;margin-top:clamp(3rem,6vw,4.5rem)}
.pagination a,.pagination span{
  font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.1em;
  min-width:2.75rem;padding:.75rem .5rem;text-align:center;border:1px solid var(--line-p);
}
.pagination .on{background:var(--ink);color:var(--paper);border-color:var(--ink)}


@media (max-width:860px){
  .entries a{grid-template-columns:1fr;gap:.9rem}
  .entries .d{padding-top:0}
  .entries img{max-width:260px}
  .pager{grid-template-columns:1fr}
  .pager a:last-child{text-align:left}
  .lead-figure img{max-height:42svh}
}

/* ---------- front door + music page ---------- */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.door{background:var(--ink);padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;gap:.5rem;transition:background .3s}
.door:hover{background:rgba(255,255,255,.06)}
.door__k{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.75rem);text-transform:uppercase;line-height:1.05}
.door__v{font-family:var(--ui);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.releases{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2vw,1.6rem)}
@media (max-width:1080px){.releases{grid-template-columns:repeat(3,1fr)}}
.releases a,.singles a{display:block;color:var(--ink)}
.releases img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line-p);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.releases a:hover img{transform:translateY(-4px)}
.releases .y,.singles .y{display:block;font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.16em;color:var(--mute-2);margin-top:.85rem}
.releases .t{display:block;font-family:var(--ui);font-size:.95rem;font-weight:700;line-height:1.3;margin-top:.2rem}
.releases .f,.singles .f{display:block;font-size:.86rem;color:var(--mute-2);margin-top:.15rem}
.releases__head{font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2);
  margin:clamp(3rem,6vw,4.5rem) 0 1rem;padding-top:1.5rem;border-top:1px solid var(--line-p)}
.singles{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-p)}
.singles li{border-bottom:1px solid var(--line-p)}
.singles a{display:grid;grid-template-columns:64px 4.5rem minmax(0,1fr);grid-template-rows:auto auto;column-gap:1.25rem;row-gap:.1rem;align-items:center;padding:.85rem 0;transition:background .3s}
.singles img,.singles .y{grid-row:1/span 2}
.singles .t{grid-column:3;grid-row:1;align-self:end}
.singles .f{grid-column:3;grid-row:2;align-self:start;margin-top:0}
.singles a:hover{background:rgba(10,10,10,.04)}
.singles img{width:64px;aspect-ratio:1;object-fit:cover;border:1px solid var(--line-p)}
.singles .y{margin:0}
.singles .t{font-family:var(--ui);font-weight:700;font-size:.95rem;display:block}
@media (max-width:860px){
  .doors{grid-template-columns:1fr 1fr}
  .releases{grid-template-columns:repeat(2,1fr)}
  .singles a{grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto auto}
  .singles img{grid-row:1/span 3}
  .singles .y{grid-column:2;grid-row:1}
  .singles .t{grid-column:2;grid-row:2}
  .singles .f{grid-column:2;grid-row:3}
}

/* ---------- reveal ----------
   Hidden only once JS has confirmed it can reveal them again, so the page
   is never blank for no-JS / crawlers / print. */
html.js-rv .rv{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
html.js-rv .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .album{grid-template-columns:1fr;gap:2.5rem}
  .album__art{max-width:420px}
  .books{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .dates li{grid-template-columns:7rem minmax(0,1fr) auto;row-gap:.35rem}
  .dates .c{grid-column:2/-1}
}
@media (max-width:1180px){
  .nav{flex-wrap:wrap}
  .nav__social{display:none}
  .nav__toggle{
    display:block;margin-left:auto;background:none;border:1px solid var(--line-2);color:#fff;
    font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;padding:.6rem .95rem;cursor:pointer;
  }
  /* the panel is a flex item on the nav's second row, so it pushes nothing
     around when closed and needs no absolute positioning */
  .nav__links{
    flex-basis:100%;order:3;flex-direction:column;gap:0;margin-left:0;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .4s cubic-bezier(.2,.7,.3,1),visibility .4s,margin-top .4s;
  }
  .nav.is-open{background:rgba(0,0,0,.97);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
  .nav.is-open::before{opacity:0}
  .nav.is-open .nav__links{max-height:70svh;visibility:visible;margin-top:.85rem;overflow-y:auto}
  .nav__links li{border-top:1px solid var(--line)}
  .nav__links a{display:block;padding:1rem 0;font-size:.82rem}
  .nav__links a::after{display:none}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero__media{order:-1;height:52svh;min-height:320px;position:relative}
  .hero__media::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 32%,rgba(0,0,0,.4) 100%);
  }
  .hero__panel{padding-block:3.5rem 4rem}
  .scrollcue{display:none}
  .offer,.stations,.strip,.koubebi{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .credits li{grid-template-columns:1fr;gap:.15rem}
  .dates li{grid-template-columns:1fr;row-gap:.3rem}
  .dates .tag{justify-self:start;margin-top:.4rem}
  .foot__grid{grid-template-columns:1fr}
  .book{grid-template-columns:110px 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

@media (max-width:860px){
  .masthead{min-height:300px}   /* phones: the 400px band is too much room */
}

/* ---------- 1.0.4: how his existing pages place images ---------- */
/* A left/right-aligned image with no paragraph of words beside it is not a
   wrap-around, it is a stray float that staggers everything after it (Media
   page). Stack it and centre it. Four "nothing to wrap" cases, spelled out
   because :has() may not nest: no next paragraph / an empty one / one holding
   only an image / one holding only a linked image. */
.prose figure.wp-caption:is(.alignleft,.alignright):not(:has(+ p)),
.prose figure.wp-caption:is(.alignleft,.alignright):has(+ p:empty),
.prose figure.wp-caption:is(.alignleft,.alignright):has(+ p > img:only-child),
.prose figure.wp-caption:is(.alignleft,.alignright):has(+ p > a:only-child > img:only-child),
.prose .wp-block-image:not(:has(+ p)) > figure:is(.alignleft,.alignright),
.prose .wp-block-image:has(+ p:empty) > figure:is(.alignleft,.alignright),
.prose .wp-block-image:has(+ p > img:only-child) > figure:is(.alignleft,.alignright),
.prose .wp-block-image:has(+ p > a:only-child > img:only-child) > figure:is(.alignleft,.alignright){
  float:none;display:block;margin:2.5rem auto;max-width:100%;text-align:center;
}
/* classic captioned images that aren't floated sit centred, caption under them */
.prose figure.wp-caption.aligncenter,.prose figure.wp-caption.alignnone{margin-inline:auto;text-align:center}
.prose .wp-caption-text{text-align:inherit}
/* a paragraph or heading that holds nothing but an image (his sleeves): centre it */
.prose :is(p,h1,h2,h3,h4,h5,h6):has(> img:only-child),
.prose :is(p,h1,h2,h3,h4,h5,h6):has(> a:only-child > img:only-child){text-align:center}
.prose :is(p,h1,h2,h3,h4,h5,h6):has(> img:only-child) > img,
.prose :is(p,h1,h2,h3,h4,h5,h6):has(> a:only-child > img:only-child) img{margin:.5rem auto}
/* block galleries: WordPress's own flex + percentage widths must not win over the grid */
.prose .wp-block-gallery.has-nested-images{display:grid!important}
.prose .wp-block-gallery figure.wp-block-image{width:auto!important;max-width:none!important;margin:0!important;flex:none!important}
.prose .wp-block-gallery figure.wp-block-image > a{display:block}

/* ---------- 1.0.5: gallery columns follow the photo count, like the editor ---------- */
/* one photo = full width; exactly three = a row of three; anything else keeps two columns */
.prose .wp-block-gallery:has(> figure:only-child){grid-template-columns:1fr}
.prose .wp-block-gallery:has(> figure:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.prose .wp-block-gallery:has(> figure:only-child) figure img{aspect-ratio:3/2}

/* ---------- 1.0.6: gallery captions sit under the photo, not on it ---------- */
/* WordPress overlays them in white on a gradient, which fails on light photos.
   Same small uppercase caption the rest of the site uses. */
.prose .wp-block-gallery.has-nested-images figure.wp-block-image{display:flex;flex-direction:column}
/* WordPress gives the image flex:1 0 0% (zero height in a column) through a
   :not(#individual-image) selector, i.e. ID-level specificity, hence !important */
.prose .wp-block-gallery.has-nested-images figure.wp-block-image > a{flex:none!important;display:block}
.prose .wp-block-gallery.has-nested-images figure.wp-block-image img{flex:none!important;width:100%!important;height:auto!important;aspect-ratio:1;object-fit:cover}
.prose .wp-block-gallery.has-nested-images:has(> figure:only-child) figure.wp-block-image img{aspect-ratio:3/2}
.prose .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
  position:static;background:none;color:var(--mute-2);text-shadow:none;
  font-family:var(--ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.5;padding:.7rem 0 0;margin:0;text-align:center;
}

/* ---------- 1.0.7: captions read darker ---------- */
.prose .wp-caption-text,
.prose .wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.prose figure.wp-block-image > figcaption{color:var(--caption)}