/* ===========================================================================
   David Zaslowsky Arbitration
   Design tokens first, then base, then components in page order.
   Mobile-first. No framework, no build step.
   ======================================================================== */

:root {
  /* Palette -------------------------------------------------------------- */
  --ink:       #0f1d2a;   /* headings, near-black navy */
  --navy:      #17304a;   /* brand blue */
  --slate:     #3f5468;   /* body text */
  --muted:     #64768a;   /* secondary text */
  --paper:     #ffffff;
  --stone:     #f6f4f0;   /* warm section ground */
  --stone-2:   #ece8e1;
  --line:      #ddd8d0;
  --line-soft: #eae6df;
  --copper:    #9c6f45;   /* accent, used sparingly */
  --copper-dk: #7d5734;

  /* Type ----------------------------------------------------------------- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --t-0:  clamp(1.00rem, 0.97rem + 0.14vw, 1.08rem);
  --t-1:  clamp(1.13rem, 1.08rem + 0.24vw, 1.28rem);
  --t-2:  clamp(1.33rem, 1.24rem + 0.42vw, 1.62rem);
  --t-3:  clamp(1.60rem, 1.44rem + 0.76vw, 2.12rem);
  --t-4:  clamp(1.95rem, 1.66rem + 1.36vw, 2.90rem);
  --t-5:  clamp(2.35rem, 1.83rem + 2.45vw, 4.10rem);

  /* Space ---------------------------------------------------------------- */
  --s-2xs: 0.25rem;
  --s-xs:  0.45rem;
  --s-s:   0.7rem;
  --s-m:   1rem;
  --s-l:   1.5rem;
  --s-xl:  2.1rem;
  --s-2xl: clamp(2.25rem, 1.8rem + 1.6vw, 3.5rem);

  --wrap: 1140px;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(15, 29, 42, .06), 0 8px 28px rgba(15, 29, 42, .09);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.65;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.16;
  margin: 0;
  letter-spacing: -0.008em;
}
h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-1); font-weight: 600; }

p { margin: 0 0 var(--s-m); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--copper-dk); }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: var(--s-s) var(--s-m); z-index: 100;
}
.skip:focus { left: var(--s-m); top: var(--s-m); }

/* Content for screen readers and search engines that the design does not show.
   Clipped rather than display:none, which would take it out of the accessibility
   tree along with the layout. The photo header bands use it for their h1. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-dk);
  margin: 0 0 var(--s-xs);
}

.lede {
  font-size: var(--t-1);
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}

.ph {
  color: var(--copper-dk);
  background: #fdf6ee;
  border-bottom: 1px dotted var(--copper);
  padding: 0 .2em;
  font-style: normal;
  white-space: nowrap;
}

/* --- masthead ------------------------------------------------------------ */
.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  z-index: 20;
}
.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-m);
  min-height: 80px;
}

/* The full business name is one mark: a single line, one weight, one colour,
   sized to carry the masthead. It never wraps, so it scales down with the
   viewport instead of breaking across two lines on a phone. */
.wordmark {
  display: block;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 0.70rem + 1.15vw, 1.72rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.12;
  padding-block: 2px;
}
.wordmark:hover { color: var(--navy); }

.nav ul {
  display: flex;
  gap: clamp(1rem, 2.2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  font-size: 0.95rem;
  color: var(--slate);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--copper);
}

.navtoggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}
.navtoggle .icon { width: 22px; height: 22px; }
.navtoggle .i-close { display: none; }
.navtoggle[aria-expanded="true"] .i-open { display: none; }
.navtoggle[aria-expanded="true"] .i-close { display: block; }

@media (max-width: 900px) {
  .navtoggle { display: inline-flex; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav ul {
    flex-direction: column;
    gap: 0;
    padding: var(--s-xs) clamp(1rem, 4vw, 2.5rem) var(--s-m);
  }
  .nav a {
    display: block;
    padding: var(--s-s) 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav a[aria-current="page"] { border-bottom-color: var(--copper); }
}

/* --- hero ---------------------------------------------------------------- */
.hero { background: var(--ink); }
.hero__img {
  width: 100%;
  height: clamp(210px, 23vw, 350px);
  object-fit: cover;
  object-position: center 32%;
}

/* --- home lead: text left, photo + contact right ------------------------- */
.lead-section { padding-top: var(--s-xl); }
.lead { display: grid; gap: var(--s-l); }
@media (min-width: 900px) {
  .lead {
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: var(--s-2xl);
    align-items: start;
  }
  /* The name is sized against the card itself, so it fills the column at any
     card width instead of being a fixed size guessed for one layout. */
  .lead__card { container-type: inline-size; }
  /* Scoped so it outranks the base .lead__name rule further down the file. */
  .lead__card .lead__name { font-size: 13.6cqi; line-height: 1.04; }
}

.lead__head { font-size: var(--t-3); margin-bottom: 0; }

/* Identity inside the contact card - sized for a 264px column, not a banner. */
.lead__id { display: grid; gap: 2px; }
.lead__name { font-size: var(--t-2); margin: 0; line-height: 1.12; }
.lead__role {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.lead__rule {
  width: 72px; height: 2px;
  background: var(--copper);
  margin: var(--s-m) 0;
  border: 0;
}

.lead__card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-m);
  display: grid;
  gap: var(--s-m);
  align-content: start;
}
.lead__card .lead__id { margin-top: calc(var(--s-m) * -0.4); }
@media (max-width: 899px) {
  /* On a phone the photo sits beside the name, and the whole card moves above
     the biography so contact details stay reachable without scrolling past
     three paragraphs. The name is centred against the photo rather than pinned
     to its top, which would leave a void beside the lower half of the portrait. */
  .lead__card {
    order: -1;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--s-s) var(--s-m);
  }
  .lead__card .lead__id {
    grid-column: 2;
    align-self: center;
    margin-top: 0;
  }
  .lead__card .clines { grid-column: 1 / -1; }
  .lead__card .lead__cv { grid-column: 1 / -1; }
}

.lead__card picture { display: block; }
.lead__photo {
  width: 100%;
  max-width: 172px;   /* native size of the supplied file - see docs/TODO.md */
  margin-inline: auto;  /* centred rather than stretched to fill the card */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
  background: var(--stone-2);
}
@media (max-width: 899px) { .lead__photo { width: 112px; margin-inline: 0; } }

.lead__cv { margin: 0; }
.lead__cv .btn { width: 100%; justify-content: center; }

/* Inside the aside the contact details always stack in one column. */
.lead__card .clines { grid-template-columns: 1fr; gap: var(--s-s); }

/* Contact lines. Label sits ABOVE the value - each part is its own block, so
   they can never collapse onto one line. */
.clines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-s); }
@media (min-width: 560px) {
  .clines { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-m); }
}
.cline { display: flex; align-items: flex-start; gap: var(--s-xs); }
.cline__ic {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--stone);
  color: var(--copper-dk);
}
.cline__ic .icon { width: 15px; height: 15px; }
.cline__tx { display: block; min-width: 0; }
.cline__lb {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}
.cline__vl {
  display: block;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: break-word;
  word-break: normal;
}
.cline__vl a { color: var(--ink); text-decoration: none; }
.cline__vl a:hover { color: var(--copper-dk); text-decoration: underline; }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.78rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.btn .icon { width: 17px; height: 17px; }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--navy); color: #fff; }
.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--copper); color: var(--copper-dk); }
.btn--quiet {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.btn--quiet:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn.is-disabled { opacity: .62; cursor: not-allowed; }

/* --- sections ------------------------------------------------------------ */
.section { padding-block: var(--s-xl); }
.section--stone { background: var(--stone); }
.section--tight { padding-block: var(--s-l); }
.section--roomy { padding-block: var(--s-2xl); }

.prose { max-width: 68ch; }
/* A text-only page has nothing to put beside its column, so a left-pinned
   measure inside the 1140px wrap leaves a dead right half. The whole page
   narrows -- heading band included, which is why this sits on .wrap rather than
   on the body text alone. Narrowing only the text would centre it while leaving
   the h1 on the old left edge, so the heading no longer lined up with the
   paragraphs under it. The measure itself stays put: the full 1140px would be
   ~110 characters a line, well past comfortable. */
.page--reading .wrap { max-width: 74ch; }
.page--reading .prose { max-width: none; }
.prose p + p { margin-top: 0; }
.prose p { font-size: var(--t-0); }

.section-title { margin-bottom: var(--s-s); }

/* A page whose title is printed under the photo band rather than hidden inside
   it. Same size and copper as the .phead h1 the text-header pages use, so the
   two kinds of page title read as one thing. */
.page-title {
  font-size: var(--t-3);
  color: var(--copper-dk);
  margin-bottom: var(--s-m);
}

/* --- interior page header ------------------------------------------------ */
.phead {
  background: var(--stone);
  border-bottom: 1px solid var(--line-soft);
  padding-block: clamp(1.05rem, 1.9vw, 1.55rem);
}
/* Page titles carry the copper the eyebrow used to bring to this band.
   5.82:1 on --stone, so it clears WCAG AA for body text, not just large. */
.phead h1 {
  font-size: var(--t-3);
  margin-bottom: var(--s-xs);
  color: var(--copper-dk);
}
.phead .lede { font-size: var(--t-0); }
/* That margin-bottom is there to clear the lede. On a page with no lede the h1
   is the last child, and the margin would just make the band bottom-heavy. */
.phead h1:last-child { margin-bottom: 0; }

/* --- interior page header: photo band ------------------------------------
   Profile, Experience, Publications, Presentations and Disclosure open on a
   full-bleed photograph, with the page title in the .phead band under it.

   Nothing is drawn over the photograph, and it carries no colour grade. Both
   used to exist to make a small bronze label legible where it sat on the
   image; even a veil at 0.80 alpha only got that label to 3.9:1, short of
   WCAG AA, and it cost every band a lot of its light. The title moved off the
   image, so the treatment could come off with it. The photographs are now
   shown the way the home page hero is shown: untouched.

   Framing is not done here. Each photograph is cropped to two art-directed
   banners in build/make_images.py -- 4.5:1 above 700px, 2:1 below -- around a
   focal point chosen against the whole frame. `object-fit: cover` is left only
   to trim the edges.
   ------------------------------------------------------------------------ */
.pbanner {
  position: relative;
  width: 100%;
  /* This includes the ~90px the title band under the photograph used to take:
     the picture got that space instead. At 1280-1680px the band lands at
     3.8:1, which is exactly the shape of the wide crop, so on the commonest
     widths almost the whole photograph survives. */
  height: clamp(300px, 42vh, 430px);
  overflow: hidden;
  /* Shown while the photograph loads, so the band never flashes white. */
  background: #14161c;
}
/* 42vh of a tall phone screen is about 1.1:1 - nearly square, and no landscape
   photograph survives being cropped to that. Phones get a shape of their own,
   about 1.3:1, which is what the 1.5:1 narrow crop is cut for. */
@media (max-width: 699px) {
  .pbanner { height: clamp(270px, 36vh, 330px); }
}

/* The <picture> is the img's containing block, and the base rule above leaves
   it at height: auto. A percentage height against an auto-height containing
   block resolves to auto, so `height: 100%` on the img below was silently
   ignored and the img took the crop's own 1.5:1 shape instead -- shorter than
   the band at every phone width, leaving the band's #14161c background showing
   as a black bar under the photograph. The picture has to carry the band's
   height for the img to have something to fill. */
.pbanner picture {
  display: block;
  width: 100%;
  height: 100%;
}
.pbanner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- lists of matters / credentials -------------------------------------- */
.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list li {
  padding: var(--s-s) 0 var(--s-s) var(--s-m);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.rule-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.45em;
  width: 6px; height: 1px;
  background: var(--copper);
}
.rule-list li:last-child { border-bottom: 0; }

/* Credentials read top to bottom in one column at every width, so the order on
   the page is the order they are meant to be read in.

   The rows inside a group are divided by hairlines ~22px apart, and a rule-list
   drops its last hairline. So a group boundary marked by space alone reads as
   WEAKER than the row divisions inside it, and the heading looks stuck to the
   bullet above it. The boundary therefore gets a rule of its own, with equal air
   either side of it. Because the rule carries the break, the air stays modest --
   space alone would have needed far more of it to say the same thing.

   Spacing is --s-xl rather than --s-2xl on purpose: --s-2xl is viewport-scaled
   and collapses to 36px on a phone, which is where the groups were hardest to
   tell apart. This keeps the same rhythm at every width. */
.credstack > * + * {
  margin-top: var(--s-l);
  padding-top: var(--s-l);
  border-top: 1px solid var(--line);
}
.profile__cv p { margin: 0; }

/* --- year-grouped works (publications, presentations) -------------------- */
.yrindex {
  position: sticky;
  top: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  padding-block: var(--s-s);
  z-index: 15;
  margin-bottom: var(--s-l);
}
.yrindex ul {
  display: flex; flex-wrap: wrap; gap: var(--s-xs);
  list-style: none; margin: 0; padding: 0;
}
.yrindex a {
  display: block;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
}
.yrindex a:hover { color: var(--ink); border-color: var(--copper); }

.yr { display: grid; gap: var(--s-xs); padding-block: var(--s-s); scroll-margin-top: 3.5rem; }
@media (min-width: 820px) {
  .yr { grid-template-columns: 110px 1fr; gap: var(--s-l); }
}
.yr + .yr { border-top: 1px solid var(--line-soft); }
.yr__n {
  font-size: var(--t-2);
  color: var(--copper-dk);
  font-variant-numeric: tabular-nums;
}
.yr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-s); }
.yr__list li { padding-left: var(--s-m); position: relative; }
.yr__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 6px; height: 1px; background: var(--line);
}
/* An entry we can link to the article itself. It keeps the underline the
   global `a` rule gives it -- that underline is the only thing marking the
   entry as a link, so nothing here may remove it. */
.yr__doc { color: var(--navy); }
.yr__doc:hover { color: var(--copper-dk); }

/* --- experience: representative matters ---------------------------------
   What this page keeps from its own handoff design is its structure: hairline
   rules and matters set two-up in a grid. Its colours are the site's.
   The warm palette it arrived with -- its own ink, body, accent, rules and a
   #f7f5f0 ground -- read as a different site one page in, so those page-scoped
   properties are gone and the tokens below are the ones every other page uses.
   Dropping the ground also ends a seam: .page--matters wraps the content but
   not the footer, so the warm paper used to stop dead at the footer's edge.
   ------------------------------------------------------------------------ */
.page--matters {
  --mx-t-body: 17px;         /* matter text                                  */
}

.mgroup {
  padding-block: clamp(40px, 6vh, 72px);
  border-bottom: 1px solid var(--line-soft);
}
/* The last group's rule would sit a few pixels above the footer's own top
   border, reading as a double line rather than a boundary. */
.mgroup:last-child { border-bottom: 0; }

.mgroup__title {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.015em;
}

/* Two columns inside the 1140px measure, one when the container cannot hold
   them. No row gap: the rows are separated by their own top hairlines. */
.mlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  column-gap: clamp(32px, 4vw, 64px);
}
/* The rows carried a zero-padded number in this slot. It read as a count of
   the practice rather than a sample of it, so what is left is the marker the
   rest of the site uses for an unranked list -- the same 6px copper rule as
   .rule-list, holding the same hanging indent the number used to hold. */
.matter {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.matter::before {
  content: "";
  flex: none;
  width: 6px; height: 1px;
  margin-top: 0.85em;   /* optical alignment with the first text line */
  background: var(--copper);
}
.matter__t {
  font-size: var(--mx-t-body);
  line-height: 1.6;
}

/* --- practice areas ------------------------------------------------------ */
.areas { display: grid; gap: 0; margin-top: var(--s-l); }
@media (min-width: 720px) { .areas { grid-template-columns: 1fr 1fr; column-gap: var(--s-xl); } }
.area { padding-block: var(--s-m); border-top: 1px solid var(--line-soft); }
.area h3 { margin-bottom: var(--s-2xs); }
.area p { font-size: 0.95rem; color: var(--muted); margin: 0; }

/* --- home intro: prose beside the figures, so the right side is not empty - */
.intro { display: grid; gap: var(--s-l); }
@media (min-width: 900px) {
  .intro { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s-2xl); align-items: start; }
  .intro .stats { grid-template-columns: 1fr; margin-top: 0; gap: var(--s-m); }
}

/* --- stats --------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-m);
  margin-top: var(--s-l);
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { border-top: 2px solid var(--copper); padding-top: var(--s-s); }
.stat__n {
  font-family: var(--serif);
  font-size: var(--t-3);
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__l { font-size: 0.82rem; color: var(--muted); margin-top: var(--s-2xs); }

/* --- callout ------------------------------------------------------------- */
.callout {
  background: var(--stone);
  border-left: 3px solid var(--copper);
  padding: var(--s-m);
  font-size: 0.95rem;
  color: var(--slate);
}

/* --- footer -------------------------------------------------------------- */
.foot {
  background: var(--ink);
  color: #c2cbd5;
  padding-block: var(--s-m);
  margin-top: 0;
}
/* One row across the band, hairline rules between the items. */
.footc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 0.88rem;
}
.footc li { display: flex; align-items: center; gap: var(--s-xs); }
/* The circular icon chip from the contact card, restated for the dark band. */
.footc__ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #d7a877;
}
.footc__ic .icon { width: 14px; height: 14px; }
.footc__sep { color: rgba(255, 255, 255, .3); padding-inline: 0.1em; }
.footc li + li::before {
  content: "";
  width: 1px;
  height: 1.05em;
  background: rgba(255, 255, 255, .22);
  margin-inline: clamp(0.7rem, 1.9vw, 1.4rem);
}
.footc a { color: #fff; text-decoration: none; }
.footc a:hover { color: #d7a877; text-decoration: underline; }
.footc .ph { background: rgba(255, 255, 255, .06); color: #d7a877; }

/* Too narrow for one row: stack centred, and drop the rules rather than leave
   them dangling at the start of a wrapped line. */
@media (max-width: 560px) {
  .footc { flex-direction: column; gap: var(--s-xs); }
  .footc li + li::before { display: none; }
}

.foot__credit {
  margin: var(--s-s) 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: #6f7e8d;
}
.foot__credit a { color: #8b9aa9; }

/* --- credit -------------------------------------------------------------- */
.credit {
  font-size: 0.72rem;
  color: var(--muted);
  padding-block: var(--s-xs);
}
.credit a { color: var(--muted); }

/* --- motion & print ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .masthead, .foot, .yrindex, .navtoggle, .skip, .hero,
  .pbanner__img { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a { text-decoration: underline; color: #000; }
  .yr, .matter { break-inside: avoid; }

  /* On screen the band's heading is hidden and the photograph carries the
     page. On paper the photograph goes, so the heading has to come back -- a
     printed page with no title at all is worse than one with no picture. */
  .pbanner { height: auto; background: none; }
  .pbanner .sr-only {
    position: static;
    width: auto; height: auto;
    margin: 0 0 0.6rem;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-size: 20pt;
  }
}