/* Morris Artists — artist profile (Option C). Palette pulled from the active theme. */
:root{
  --ma-cream: var(--wp--preset--color--base, #FDFBF7);
  --ma-ink:   var(--wp--preset--color--contrast, #1A1A1A);
  --ma-accent:var(--wp--preset--color--accent, #6A1B29);
  --ma-muted: var(--wp--preset--color--muted, #6E655C);
  --ma-serif: var(--wp--preset--font-family--cormorant, Georgia, serif);
  --ma-sans:  var(--wp--preset--font-family--montserrat, system-ui, sans-serif);
  --ma-max: 940px;
}
.ma-profile{ color:var(--ma-ink); background:var(--ma-cream); }

/* Hero */
.ma-hero{ position:relative; min-height:78vh; display:flex; align-items:flex-end; overflow:hidden; }
.ma-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.ma-hero__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,17,15,.78) 0%, rgba(20,17,15,.30) 45%, rgba(20,17,15,.05) 100%); }
.ma-hero__overlay{ position:relative; width:100%; max-width:var(--ma-max); margin:0 auto; padding:clamp(2rem,5vw,4.5rem) clamp(1.2rem,4vw,2rem); color:#fff; }
.ma-hero__quote{ font-family:var(--ma-serif); font-weight:500; font-style:italic; font-size:clamp(1.4rem,3.2vw,2.5rem); line-height:1.22; max-width:24ch; margin:0 0 1rem; text-wrap:balance; }
.ma-hero__qsrc{ font-family:var(--ma-sans); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; opacity:.85; margin:0 0 1.4rem; }
.ma-hero__name{ font-family:var(--ma-serif); font-weight:600; font-size:clamp(2.4rem,6vw,4.2rem); line-height:1; margin:0; }
.ma-hero__disc{ font-family:var(--ma-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.78rem; margin:.6rem 0 0; opacity:.9; }

/* Sticky section nav. top:0 is the BASE — correct in the editor canvas, where no site header sits
   above it. On the front end header-sticky.css overrides top so this stacks under the sticky header.
   z-index stays below the header's 30, so this bar slides under it rather than over it. */
.ma-nav{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--ma-cream) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid color-mix(in srgb, var(--ma-ink) 12%, transparent); }
/* WRAPS rather than scrolling off the edge. On a 390px phone the seven sections measure 662px, so
   Press, Discography and Contact sat off-screen behind a horizontal swipe that nothing signalled —
   and users famously do not discover horizontal scroll. flex-wrap needs no breakpoint: the row still
   fits on one line at desktop widths, so it only wraps when it actually must. overflow-x stays as
   insurance for a single label longer than the bar; with wrapping on it never triggers.
   The links keep white-space:nowrap so wrapping happens BETWEEN items, never mid-label. */
.ma-nav__inner{ max-width:var(--ma-max); margin:0 auto; padding:.35rem clamp(1.2rem,4vw,2rem); display:flex; flex-wrap:wrap; gap:0 1.6rem; overflow-x:auto; }
.ma-nav a{ font-family:var(--ma-sans); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--ma-muted); text-decoration:none; padding:.7rem 0; white-space:nowrap; border-bottom:2px solid transparent; }
/* Two rows on a phone must not cost more height than they have to: tighter gaps and shorter link
   padding claw back most of the second row. */
@media (max-width:700px){
  .ma-nav__inner{ gap:0 1.15rem; padding:.2rem 1.2rem; }
  .ma-nav a{ padding:.45rem 0; letter-spacing:.1em; }
}
/* Very narrow (iPhone SE, and 400% zoom on a 1280px screen): without this the seven-section artists
   need THREE rows, and this bar is stacked under an already-sticky header. Squeezing the gutters and
   tracking gets them back to two. */
@media (max-width:380px){
  .ma-nav__inner{ gap:0 .8rem; padding:.2rem .9rem; }
  .ma-nav a{ letter-spacing:.06em; }
}
.ma-nav a:hover{ color:var(--ma-accent); border-color:var(--ma-accent); }
/* This page carries a SECOND sticky bar, so the site-wide scroll-padding-top must account for it.
   roster.js overwrites this with the measured height; the value here is the no-JS fallback.
   html:has() rather than :root so it beats site.css's 0 default whatever the stylesheet order, and
   so it is self-gating — it only matches when the section nav is genuinely on the page. */
html:has(.ma-nav){ --ma-subnav-h: 3.4rem; }
/* Pre-JS fallback for the wrapped two-row bar, so a deep link landing before roster.js measures
   still clears it. ResizeObserver corrects this to the real height moments later. */
@media (max-width:700px){ html:has(.ma-nav){ --ma-subnav-h: 4.6rem; } }

/* Body + sections */
.ma-body{ max-width:var(--ma-max); margin:0 auto; padding:0 clamp(1.2rem,4vw,2rem); }
/* No scroll-margin-top here: html{scroll-padding-top} in site.css now carries the whole sticky-bar
   offset (admin bar + header + this nav). Setting it again would double-count. */
.ma-section{ padding:clamp(2.6rem,6vw,4.5rem) 0; border-top:1px solid color-mix(in srgb, var(--ma-ink) 10%, transparent); }
.ma-section:first-child{ border-top:0; }
.ma-section__title{ font-family:var(--ma-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.74rem; color:var(--ma-muted); margin:0 0 1.6rem; font-weight:600; }
.ma-prose{ font-family:var(--ma-sans); font-weight:400; font-size:1.06rem; line-height:1.75; max-width:66ch; }
.ma-prose p{ margin:0 0 1.1rem; }

/* Media */
.ma-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem .7rem; }
.ma-gallery__item{ margin:0; }
.ma-gallery__img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block; }
.ma-gallery__credit{ font-family:var(--ma-sans); font-size:.66rem; letter-spacing:.06em; color:var(--ma-muted); margin:.45rem 0 0; }
.ma-videos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem; margin-top:1rem; }
.ma-video{ position:relative; aspect-ratio:16/9; }
.ma-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* News */
.ma-news{ display:grid; gap:.2rem; }
.ma-news__item{ display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; align-items:baseline; padding:1rem 0; border-bottom:1px solid color-mix(in srgb,var(--ma-ink) 8%,transparent); text-decoration:none; color:var(--ma-ink); }
.ma-news__item:hover .ma-news__title{ color:var(--ma-accent); }
.ma-news__date{ font-family:var(--ma-sans); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; color:var(--ma-muted); }
.ma-news__title{ font-family:var(--ma-serif); font-size:1.3rem; line-height:1.25; }

/* Discography */
.ma-disco{ display:grid; gap:1.1rem; }
.ma-disco__row{ display:grid; grid-template-columns:76px 1fr; gap:1.1rem; align-items:center; }
.ma-disco__cover{ width:76px; height:76px; object-fit:cover; }
.ma-disco__meta{ display:flex; flex-direction:column; gap:.15rem; }
.ma-disco__title{ font-family:var(--ma-serif); font-size:1.25rem; }
.ma-disco__desc{ font-family:var(--ma-sans); font-size:.9rem; line-height:1.45; color:var(--ma-ink); max-width:60ch; }
.ma-disco__label{ font-family:var(--ma-sans); font-size:.82rem; color:var(--ma-muted); }
.ma-disco__listen{ font-family:var(--ma-sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ma-accent); text-decoration:none; margin-top:.2rem; }

/* Press */
.ma-reviews{ display:grid; gap:1.6rem; max-width:70ch; }
.ma-review{ margin:0; padding-left:1.2rem; border-left:2px solid var(--ma-accent); }
.ma-review__ctx{ display:block; font-family:var(--ma-sans); text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; color:var(--ma-muted); margin:0 0 .4rem; }
.ma-review p{ font-family:var(--ma-serif); font-style:italic; font-size:1.35rem; line-height:1.4; margin:0 0 .5rem; }
.ma-review cite{ font-family:var(--ma-sans); font-style:normal; text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; color:var(--ma-muted); }

/* Contact */
.ma-contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; }
.ma-contact h3{ font-family:var(--ma-sans); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--ma-muted); margin:0 0 .8rem; font-weight:600; }
.ma-links{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; }
/* .ma-link lives in site.css (single, site-wide definition) — it loads on the artist page too. */
.ma-btn{ display:inline-block; font-family:var(--ma-sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--ma-accent); padding:.7rem 1.1rem; text-decoration:none; }
.ma-mgmt{ font-family:var(--ma-sans); font-size:.95rem; line-height:1.7; margin:0; }
.ma-mgmt span{ color:var(--ma-muted); font-size:.85rem; }
.ma-mgmt a{ color:var(--ma-accent); text-decoration:none; }

@media (max-width:600px){
  .ma-news__item{ grid-template-columns:1fr; gap:.15rem; }
  .ma-hero{ min-height:70vh; }
}

/* Press bio affordances — one tiered button family: copy (ghost) · PDF (outline) · press kit (filled) */
.ma-biopress{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1rem; }
.ma-copybtn, .ma-readmore__btn, .ma-biopress .ma-linkbtn{ font-family:var(--ma-sans); font-size:.66rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ma-accent); background:none; border:1px solid color-mix(in srgb, var(--ma-accent) 40%, transparent);
  padding:.5rem .95rem; border-radius:100px; cursor:pointer; transition:background .2s, color .2s, border-color .2s;
  display:inline-flex; align-items:center; gap:.5em; }
.ma-biopress .ma-linkbtn{ text-decoration:none; }
.ma-copybtn:hover, .ma-copybtn.is-copied, .ma-readmore__btn:hover, .ma-biopress .ma-linkbtn:hover{ background:var(--ma-accent); color:var(--ma-cream); border-color:var(--ma-accent); }
.ma-copybtn svg, .ma-readmore__btn svg, .ma-biopress .ma-linkbtn svg{ width:1em; height:1em; flex:0 0 auto; }
.ma-biopress .ma-linkbtn--pdf{ border-color:color-mix(in srgb, var(--ma-accent) 65%, transparent); }
.ma-biopress .ma-linkbtn--kit{ background:var(--ma-accent); color:var(--ma-cream); border-color:var(--ma-accent); }
.ma-biopress .ma-linkbtn--kit:hover{ filter:brightness(1.12); }
/* Each biography enabled for the artist page: its prose, then its own copy button. The heading
   shows only when two or more bios are displayed. Successive bios get a divider + breathing room. */
.ma-bioitem + .ma-bioitem{ margin-top:2.2rem; padding-top:2.2rem; border-top:1px solid color-mix(in srgb, var(--ma-accent) 18%, transparent); }
.ma-bioitem__h{ font-family:var(--ma-sans); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--ma-muted); margin:0 0 .8rem; }
.ma-bioactions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.6rem; }

/* Full-biography "Read more" — a real disclosure button (aria-expanded, toggled in roster.js),
   styled as part of the button family. First paragraph shows; the rest expands ABOVE the button
   row, so the control reads after paragraph one collapsed and after the last paragraph expanded. */
.ma-readmore__rest{ margin-top:1.1rem; }
/* roster.js gives the revealed text tabindex="-1" and focuses it so a screen reader lands on the
   newly-shown paragraphs (they precede the button in the DOM). That focus draws the UA's outline —
   a box around the biography. Suppress it: the element is not tab-reachable, so no keyboard
   affordance is lost, and the visible control remains the Read more button, which keeps its own
   focus ring. */
.ma-readmore__rest:focus, .ma-readmore__rest:focus-visible{ outline:none; }
/* Collapsing removes text above the button, so roster.js scrolls it back into view. No
   scroll-margin-top needed: scrollIntoView() honours html{scroll-padding-top}, which now clears the
   header AND this page's section nav — see site.css. */
.ma-readmore__less{ display:none; }
.ma-readmore__btn[aria-expanded="true"] .ma-readmore__more{ display:none; }
.ma-readmore__btn[aria-expanded="true"] .ma-readmore__less{ display:inline; }
.ma-readmore__chev{ transition:transform .2s ease; }
.ma-readmore__btn[aria-expanded="true"] .ma-readmore__chev{ transform:rotate(180deg); }
@media (prefers-reduced-motion: reduce){ .ma-readmore__chev{ transition:none; } }

/* Name pronunciation guide (under hero name) */
.ma-hero__pron{ font-family:var(--ma-sans); font-style:italic; font-size:.8rem; letter-spacing:.04em; opacity:.85; margin:.35rem 0 0; }
.ma-hero__pron::before{ content:"\201C"; } .ma-hero__pron::after{ content:"\201D"; }

/* Subtle hero Ken-Burns (reduced-motion safe) */
@media (prefers-reduced-motion: no-preference){
  .ma-hero__img{ animation:ma-kenburns 24s ease-out both; transform-origin:center 28%; }
  @keyframes ma-kenburns{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
}

/* Print: paper has no disclosure — always print the WHOLE biography and drop the controls. */
@media print{
  /* until-found is content-visibility:hidden, NOT display:none — both must be overridden. */
  .ma-readmore__rest[hidden]{ display:block !important; content-visibility:visible !important; }
  .ma-readmore__btn, .ma-copybtn, .ma-biopress, .ma-nav{ display:none !important; }
}

/* Biographies are wysiwyg fields (basic toolbar): lists, quotes and links can now be authored, so
   style them here rather than after the first complaint. */
.ma-prose ul, .ma-prose ol{ margin:0 0 1.1rem; padding-left:1.4em; }
.ma-prose li{ margin:0 0 .35rem; }
.ma-prose blockquote{ margin:0 0 1.1rem; padding-left:1rem; border-left:2px solid var(--ma-accent,#6A1B29); font-style:italic; }
/* Underlined, not colour-only: accent-on-ink is ~1.46:1, far below the 3:1 that WCAG 2.2 SC 1.4.1
   requires before colour alone may distinguish a link. The theme suppresses link underlines site-wide,
   so this has to be set explicitly. */
.ma-prose a{ color:var(--ma-accent,#6A1B29); text-decoration:underline; text-underline-offset:.15em; }
.ma-prose a:hover, .ma-prose a:focus-visible{ text-decoration-thickness:2px; }
.ma-prose s, .ma-prose del, .ma-prose strike{ text-decoration:line-through; }