/*
Theme Name: Matt Bassano
Theme URI: https://mattbassano.com
Author: Matt Bassano
Author URI: https://mattbassano.com
Description: A single-artist theme for music, poetry and art. Hand-drawn Bassano display lettering set in caps over a full-bleed collage backdrop, with square-cornered glassmorphism panels carrying all legible text. Built for the classic editor.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matt-bassano
Tags: one-column, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   READ ME FIRST — how this stylesheet is put together

   The colour and glass system lives in the :root block just below. Almost
   every visual decision in this theme is a variable in there, so tuning the
   design means editing values in one place rather than hunting selectors.

   Two things are worth understanding before changing them:

   1. The glass is NOT just a translucent colour. It is a thin sheet of
      --glass-fill sitting on top of a backdrop-filter that blurs the artwork
      and flattens its tonal range. The flattening is what keeps dark text
      legible over the collage's dark passages. If you reduce brightness() or
      raise contrast() in --glass-filter, text contrast falls below the
      accessibility floor almost immediately. Opacity and saturate() are the
      safe dials; brightness and contrast are not.

   2. --glass-fill is a more saturated blue than the brand colour #5d87b4.
      That is deliberate. At roughly 20% opacity a muted blue delivers almost
      no colour and the panels read grey. The fill is the same hue (212°) at
      full chroma so that one fifth of a coat still lands on the intended
      shade. #5d87b4 itself is used at full strength for edges, links and
      solid fills, where it is not being diluted.

   Measured worst-case contrast for body copy over the artwork is 4.6:1,
   just above the 4.5:1 WCAG AA threshold. Treat that as a budget: if you
   darken the glass or lighten the ink, re-check it.
   ========================================================================== */


/* ==========================================================================
   Matt Bassano — Music, Poetry & Art
   Design system: hand-drawn display type (Bassano) over a fixed artwork
   backdrop, with warm frosted-glass surfaces carrying all legible text.
   ========================================================================== */

/* --- Display faces ------------------------------------------------------
   One family, three weights:
     400 = Bassano              (the original hand)
     700 = Bassano Supermaxed   (heavy marker)
     800 = Bassano Supermaxed Bold
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Bassano";
  src: url("assets/fonts/bassano-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bassano";
  src: url("assets/fonts/bassano-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bassano";
  src: url("assets/fonts/bassano-black.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Ink is not black: it is the glass hue driven almost to black, so
     type and surface belong to one family. */
  --ink:            #06111c;
  --ink-soft:       #06121e;
  --ink-faint:      #1b3247;

  /* --- Glass -------------------------------------------------------------
     Real glassmorphism rather than a recolour: a translucent sheet of
     #3e8494 laid over the artwork, with backdrop-filter doing blur and a
     gentle tonal lift underneath. The hue lives in the sheet, so whatever
     is behind keeps its own shapes and reads through at medium strength.
     No sepia, no hue-rotate — those were what turned the collage into
     blotchy cyan clouds.
     ---------------------------------------------------------------------- */
  --glass-tint:     93 135 180;           /* #5d87b4 — the overlay colour */
  --glass-fill:     57 142 239;           /* #398eef — #5d87b4's hue (212°) at full
                                             chroma and lifted, so one fifth of a
                                             coat still reads blue, not grey */
  --glass-lite:     124 174 232;          /* same hue lifted, for edges   */
  --glass-deep:     28 51 80;             /* same hue dropped, for edges  */

  /* At ~80% the sheet carries the colour on its own, so the fill is
     #5d87b4 undiluted. The filter underneath still flattens the collage
     into a narrow light band — that is what keeps dark type legible over
     the darkest passages of the artwork rather than only the pale ones. */

  /* The gradient swings either side of the nominal value — that slight
     unevenness is what stops a flat fill from reading as paint. */
  --glass-panel:    linear-gradient(154deg,
                      rgb(var(--glass-fill) / 0.23) 0%,
                      rgb(var(--glass-fill) / 0.16) 45%,
                      rgb(var(--glass-fill) / 0.22) 100%);
  --glass-panel-hi: rgb(var(--glass-fill) / 0.34);
  --glass-btn:      linear-gradient(148deg,
                      rgb(var(--glass-fill) / 0.21) 0%,
                      rgb(var(--glass-fill) / 0.13) 55%,
                      rgb(var(--glass-fill) / 0.19) 100%);
  --glass-btn-hov:  linear-gradient(148deg,
                      rgb(var(--glass-fill) / 0.38) 0%,
                      rgb(var(--glass-fill) / 0.28) 55%,
                      rgb(var(--glass-fill) / 0.36) 100%);

  /* Edges are tonal, never white: a lifted teal catching the light along
     the top, a dropped teal grounding the bottom. */
  --glass-line:     rgb(var(--glass-lite) / 0.82);
  --glass-line-lo:  rgb(var(--glass-deep) / 0.50);
  --glass-sheen:    rgb(var(--glass-lite) / 0.58);

  /* The order matters. saturate() below 100% drains the collage's warm
     oranges first — otherwise they cancel the cool sheet and everything
     resolves to grey. brightness() and contrast() then flatten the tonal
     range so dark type always has something to sit on. What survives is
     the artwork's structure: shapes, edges and movement, in teal.
     Medium blur — forms stay readable, detail does not. */
  --glass-filter:     blur(34px) saturate(115%) brightness(2.56) contrast(0.34);
  --glass-filter-sm:  blur(22px) saturate(115%) brightness(2.46) contrast(0.38);

  /* Accents pulled from the collage */
  --accent:         #1d3a5c;   /* the overlay hue, darkened for text */
  --accent-bright:  #5d87b4;   /* the hue itself, for solid fills only */
  --accent-2:       #a81a5e;   /* the magenta loops   */

  --shadow-sm: 0 2px 10px rgb(16 26 34 / 0.18);
  --shadow-md: 0 10px 30px rgb(16 26 34 / 0.24);
  --shadow-lg: 0 24px 70px rgb(16 26 34 / 0.32);

  --radius:    18px;
  --radius-lg: 26px;

  --font-display: "Bassano", "Segoe Print", "Bradley Hand", cursive;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Solid peach, lifted from the collage's terracotta passages.
     The one opaque surface on the site — it separates the name
     from the glass buttons around it. */
  --peach:          #ecc2a4;
  --peach-line:     #d69f78;

  --measure: 64ch;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink);
  background: #d9d2c6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 100; padding: 0.7em 1.2em; background: #fff; color: var(--ink);
  font-family: var(--font-display); text-decoration: none;
  border-radius: 0 0 12px 12px; box-shadow: var(--shadow-md);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- Artwork backdrop ----------------------------------------------------
   Home: one full-bleed <img>, so it can carry alt text and srcset and
         serve as a fast LCP element.
   Sub pages: the same artwork as a decorative CSS background tiled
         straight down the document — edge to edge, no gap between tiles.
   ------------------------------------------------------------------------ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #cfc7ba;
  background-size: cover;
  background-position: center;
}

.backdrop__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Repeating backdrop for scrolling pages. The tile is never narrower
   than 640px, so on a phone it crops instead of shrinking to a stripe. */


/* A whisper of a scrim: keeps white passages of the collage from
   blowing out the glass edges, without dulling the art. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, rgb(26 23 20 / 0.02) 0%, rgb(26 23 20 / 0.16) 100%);
  pointer-events: none;
}

body.mb-subpage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgb(26 23 20 / 0.02) 0%, rgb(26 23 20 / 0.14) 100%);
}

/* ==========================================================================
   GLASS
   ========================================================================== */
.glass {
  position: relative;
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-line);
  border-radius: 0;
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 var(--glass-line-lo);
}

/* Browsers without backdrop-filter get an opaque-enough panel instead,
   so text never lands on raw artwork. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass       { background: #a8c0dc; }
  .btn         { background: #a8c0dc; }
  .wordmark    { background: #a8c0dc; }
  .site-header { background: #a8c0dc; }
}

/* ==========================================================================
   HOME
   ========================================================================== */
.mb-home {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.stage {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}

/* --- Wordmark ----------------------------------------------------------- */
.wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: min(92vw, 34rem);
  padding: clamp(1.1rem, 2.8vh, 1.9rem) clamp(1.4rem, 3.4vw, 2.4rem);
  border-radius: 0;
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-line);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 var(--glass-line-lo);
}

.wordmark__name {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
  line-height: 0.95;
  letter-spacing: 0.02em;
  font-size: clamp(2rem, 5.9vw, 3.7rem);
  color: var(--ink);
}

.wordmark__tag {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0.45em 0 0;
  font-size: clamp(0.95rem, 2.1vw, 1.25rem);
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

.wordmark__tag span { white-space: nowrap; }

.wordmark__rule {
  width: 46%;
  height: 2px;
  margin: 0.9em auto 0.2em;
  border: 0;
  background: linear-gradient(90deg, transparent, rgb(var(--glass-deep) / 0.55), transparent);
}

/* --- Scattered quadrant buttons ----------------------------------------- */
.btn {
  position: absolute;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.75vw, 1.45rem);
  line-height: 1.15;
  text-decoration: none;
  color: var(--ink);
  padding: 0.78em 1.6em 0.68em;
  min-width: 10em;
  text-align: center;
  background: var(--glass-btn);
  -webkit-backdrop-filter: var(--glass-filter-sm);
  backdrop-filter: var(--glass-filter-sm);
  border: 1px solid var(--glass-line);
  border-radius: 0;
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 var(--glass-line-lo);
  white-space: nowrap;
  transition: transform .28s cubic-bezier(.2,.8,.3,1),
              background-color .28s ease,
              box-shadow .28s ease;
  will-change: transform;
}

/* The slant lives on the box; the label is counter-skewed so the
   type stays upright and readable. */
.btn > span { display: block; }

.btn:hover,
.btn:focus-visible {
  background: var(--glass-btn-hov);
  box-shadow: var(--shadow-lg),
              inset 0 1px 0 rgb(var(--glass-lite) / 0.5),
              inset 0 -1px 0 var(--glass-line-lo);
}

/* Hand-placed feel: each shape leans its own way within its quadrant. */
/* All four lean the same way — that consistency is what makes them read
   as a set of parallelograms. The small rotations keep the hand-placed
   feel without breaking the shape. */
.btn--a { top: 15%;    left: 10%;   transform: rotate(-1.6deg) skewX(-14deg); }
.btn--b { top: 27%;    right: 11%;  transform: rotate(1.2deg)  skewX(-14deg); }
.btn--c { bottom: 25%; left: 15%;   transform: rotate(0.9deg)  skewX(-14deg); }
.btn--d { bottom: 13%; right: 14%;  transform: rotate(-1.1deg) skewX(-14deg); }

.btn > span { transform: skewX(14deg); }

.btn--a:hover, .btn--a:focus-visible { transform: rotate(-1.6deg) skewX(-14deg) translateY(-5px); }
.btn--b:hover, .btn--b:focus-visible { transform: rotate(1.2deg)  skewX(-14deg) translateY(-5px); }
.btn--c:hover, .btn--c:focus-visible { transform: rotate(0.9deg)  skewX(-14deg) translateY(-5px); }
.btn--d:hover, .btn--d:focus-visible { transform: rotate(-1.1deg) skewX(-14deg) translateY(-5px); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color .2s ease; }
  .btn--a:hover, .btn--a:focus-visible { transform: rotate(-1.6deg) skewX(-14deg); }
  .btn--b:hover, .btn--b:focus-visible { transform: rotate(1.2deg)  skewX(-14deg); }
  .btn--c:hover, .btn--c:focus-visible { transform: rotate(0.9deg)  skewX(-14deg); }
  .btn--d:hover, .btn--d:focus-visible { transform: rotate(-1.1deg) skewX(-14deg); }
}

/* Landscape phones / short viewports: pull everything inward. */
@media (max-height: 560px) and (min-width: 701px) {
  .btn--a { top: 8%;  left: 5%; }
  .btn--b { top: 20%; right: 5%; }
  .btn--c { bottom: 20%; left: 9%; }
  .btn--d { bottom: 7%;  right: 7%; }
  .wordmark { width: min(70vw, 26rem); }
}

/* Portrait phones: keep the scattered, hand-placed rhythm in a
   staggered column so everything still fits one screen, no scrolling. */
@media (max-width: 700px) {
  .wordmark {
    top: 11%;
    transform: translate(-50%, 0);
    width: min(88vw, 24rem);
  }
  .wordmark__name { font-size: clamp(2rem, 11vw, 3rem); }
  .wordmark__tag  { font-size: clamp(0.9rem, 4vw, 1.1rem); }

  .btn {
    font-size: clamp(1.05rem, 5.1vw, 1.4rem);
    max-width: 74vw;
    white-space: normal;
    text-align: center;
  }
  .btn--a { top: 38%;  left: 7%;  right: auto; bottom: auto; }
  .btn--b { top: 51%;  right: 7%; left: auto;  bottom: auto; }
  .btn--c { top: 64%;  left: 11%; right: auto; bottom: auto; }
  .btn--d { top: 77%;  right: 9%; left: auto;  bottom: auto; }
}

@media (max-width: 700px) and (max-height: 680px) {
  .wordmark { top: 6%; padding: 0.8rem 1.2rem; }
  .btn--a { top: 34%; }
  .btn--b { top: 49%; }
  .btn--c { top: 64%; }
  .btn--d { top: 79%; }
}

/* ==========================================================================
   SUB PAGES
   ========================================================================== */
.mb-subpage { min-height: 100vh; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg,
      rgb(var(--glass-fill) / 0.21) 0%,
      rgb(var(--glass-fill) / 0.14) 100%);
  -webkit-backdrop-filter: var(--glass-filter-sm);
  backdrop-filter: var(--glass-filter-sm);
  border-bottom: 1px solid var(--glass-line-lo);
  box-shadow: 0 1px 20px rgb(var(--glass-deep) / 0.16);
}

.site-header__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.7rem clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.brand small {
  display: block;
  font-weight: 400;
  font-size: 0.56em;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-top: 0.35em;
}

.nav {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1.4rem);
  flex-wrap: wrap;
}
.nav a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.98rem, 2vw, 1.15rem);
  text-decoration: none;
  color: var(--ink);
  padding: 0.3em 0.6em;
  border-radius: 0;
  transition: background-color .2s ease, color .2s ease;
}
.nav a:hover { background: rgb(var(--glass-lite) / 0.34); color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  background: rgb(var(--glass-lite) / 0.46);
  box-shadow: inset 0 0 0 1px rgb(var(--glass-deep) / 0.28);
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(1.4rem, 5vw, 3.5rem) clamp(0.9rem, 4vw, 2rem) clamp(3rem, 8vw, 5rem);
}

.panel {
  padding: clamp(1.5rem, 5vw, 3.75rem);
}
.panel + .panel { margin-top: clamp(1.4rem, 4vw, 2.5rem); }

.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.025em;
  font-size: clamp(2.1rem, 6.5vw, 3.6rem);
  line-height: 1;
  margin: 0 0 0.2em;
  color: var(--ink);
}

.page-kicker {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6em;
}

.lede {
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 1.6em;
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15em; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  line-height: 1.1;
  margin: 2em 0 0.5em;
}
.prose h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  margin: 1.6em 0 0.35em;
}
.prose a { color: var(--accent); text-underline-offset: 3px; }

.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--glass-deep) / 0.45), transparent);
  margin: clamp(1.8rem, 4vw, 2.6rem) 0;
}


/* --- Card grid ---------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(0.9rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 1.3rem 1.4rem;
  background: rgb(var(--glass-lite) / 0.22);
  border: 1px solid rgb(var(--glass-lite) / 0.42);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}
.card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 0 0 0.35em;
}
.card p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

/* --- Pull quote (for poetry pages) -------------------------------------- */
.pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.2vw, 1.9rem);
  line-height: 1.35;
  margin: 2rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent-2);
  color: var(--ink);
}

/* --- Buttons in flow ----------------------------------------------------- */
.btn-inline {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.6em 1.3em 0.5em;
  border-radius: 0;
  background: rgb(var(--glass-lite) / 0.36);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-sheen);
  transition: background-color .2s ease, transform .2s ease;
}
.btn-inline:hover { background: rgb(var(--glass-lite) / 0.56); transform: translateY(-2px); }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: clamp(1.5rem, 4vw, 2.2rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: linear-gradient(180deg,
      rgb(var(--glass-fill) / 0.14) 0%,
      rgb(var(--glass-fill) / 0.21) 100%);
  -webkit-backdrop-filter: var(--glass-filter-sm);
  backdrop-filter: var(--glass-filter-sm);
  border-top: 1px solid var(--glass-line);
}
.site-footer a { color: var(--accent); }

/* --- Poem block (short-form display text, set in Bassano) --------------- */
.poem {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.18rem, 1rem + 0.8vw, 1.45rem);
  line-height: 1.7;
  white-space: pre-line;
  margin: 0 0 1.2em;
  color: var(--ink);
}
.poem__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  margin: 0 0 0.35em;
}
.poem__meta {
  font-size: 0.9rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 2.4em;
}

/* --- Art gallery grid --------------------------------------------------- */
.gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(0.7rem, 2vw, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.gallery figure {
  margin: 0;
  background: rgb(var(--glass-lite) / 0.22);
  border: 1px solid rgb(var(--glass-lite) / 0.42);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}
.gallery img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.gallery a { display: block; text-decoration: none; }
.gallery a:hover img { transform: scale(1.04); }
.gallery figcaption {
  padding: 0.75rem 0.9rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink);
}
.gallery figcaption small {
  display: block; font-family: var(--font-body);
  font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.15rem;
}

/* --- Booking / contact form -------------------------------------------- */
.form { display: grid; gap: 1rem; max-width: 34rem; }
.form label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.08rem;
  display: block;
  margin-bottom: 0.3rem;
}
.form input, .form select, .form textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: 0.7em 0.85em;
  background: rgb(var(--glass-lite) / 0.55);
  border: 1px solid rgb(var(--glass-deep) / 0.48);
  border-radius: 12px;
  box-shadow: inset 0 1px 3px rgb(var(--glass-deep) / 0.18);
}
.form input:focus, .form select:focus, .form textarea:focus {
  background: rgb(var(--glass-lite) / 0.78);
}
.form button {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: #e8f3f6;
  background: var(--accent);
  border: 0;
  border-radius: 0;
  padding: 0.65em 1.6em 0.55em;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, filter .2s ease;
}
.form button:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* --- YouTube rows --------------------------------------------------------
   A compact embed on the left, notes on the right. The embed is capped at
   22rem so it reads as a reference clip rather than a hero video, and the
   text column takes whatever is left. Collapses to a single column on
   narrow screens.
   ------------------------------------------------------------------------ */
.videos { display: grid; gap: clamp(1.4rem, 3.4vw, 2.2rem); margin: 1.6rem 0 0; }

.video-row {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  margin: 0;
}

/* The right cell is deliberately roomy — real copy goes here. Its
   min-height keeps the column reading as a column while it is still
   mostly empty. */
.video-row figcaption { min-height: 11.25rem; }

.video-row figcaption { padding-top: 0.1rem; }
.video-row .video-caption { margin-top: 0; }

@media (max-width: 680px) {
  .video-row { grid-template-columns: 1fr; }
  /* The reserved height only makes sense while the text sits in its own
     column. Stacked, it is just a hole under every entry. */
  .video-row figcaption { min-height: 0; }
}

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgb(var(--glass-deep) / 0.58);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-md);
}
.video iframe,
.video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Mock-up stand-in for a YouTube embed (replace with the real iframe) */
.video--placeholder {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.7rem;
  color: rgb(214 236 241 / 0.94);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  backdrop-filter: blur(8px) saturate(115%);
}
.video--placeholder .play {
  width: 3.4rem; height: 2.4rem;
  border-radius: 10px;
  background: rgb(var(--glass-lite) / 0.22);
  border: 1px solid rgb(var(--glass-lite) / 0.45);
  display: grid; place-items: center;
}
.video--placeholder .play::after {
  content: "";
  width: 0; height: 0;
  border-left: 0.85rem solid rgb(214 236 241 / 0.94);
  border-top: 0.52rem solid transparent;
  border-bottom: 0.52rem solid transparent;
  margin-left: 0.25rem;
}
.video--placeholder span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.video-caption {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  margin: 0.75rem 0 0.1rem;
}
.video-caption + p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

/* ==========================================================================
   DISPLAY TYPE — Bassano, set in caps throughout
   The hand-drawn capitals have tight, occasionally overlapping side
   bearings, so every display element carries tracking. Larger sizes need
   proportionally less of it: the scale runs from 0.11em at caption size
   down to 0.045em at the wordmark.
   ========================================================================== */
.wordmark__name, .wordmark__tag, .btn, .brand, .brand small, .nav a,
.page-title, .page-kicker, .prose h2, .prose h3, .card h3, .pullquote,
.btn-inline, .poem__title, .gallery figcaption, .form label, .form button,
.video--placeholder span, .video-caption, .skip-link {
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

/* Large display: the glyphs already have room at this size. */
.wordmark__name { letter-spacing: 0.045em; }
.page-title     { letter-spacing: 0.05em;  }
.prose h2, .poem__title, .pullquote { letter-spacing: 0.06em; }

/* Small display: needs the most air to stop letters colliding. */
.wordmark__tag, .brand small, .nav a, .page-kicker,
.gallery figcaption, .video--placeholder span { letter-spacing: 0.11em; }

/* Capitals have no descenders, so display leading can close up. */
.wordmark__name { line-height: 1.02; }
.page-title     { line-height: 1.04; }
.brand          { line-height: 1.05; }

/* Tracking adds space after the final letter too, which drags centred
   text half a step left. Nudge it back. */
.btn > span, .wordmark__name, .wordmark__tag, .form button {
  text-indent: 0.04em;
}

/* The verse itself stays in sentence case — Bassano, but not capitals.
   Whole poems set in caps stop being readable at any length. */
.poem { text-transform: none; letter-spacing: 0.015em; }

/* The sticky header would otherwise sit on top of any heading jumped to. */
.page-title, .prose h2, .poem__title { scroll-margin-top: 6rem; }

/* --- Social row ----------------------------------------------------------
   Reserved space for Facebook, Spotify, YouTube and whatever else follows.
   In the WordPress theme this is a registered nav menu location ("social")
   rendered with wp_nav_menu(); with no menu assigned it outputs nothing and
   the strip collapses to zero height, so the page looks finished either way.
   The row is a flex line, so anything from two to six items sits correctly
   without touching the layout again.
   ------------------------------------------------------------------------ */
.social {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(0.9rem, 2.4vw, 1.35rem) clamp(0.9rem, 4vw, 2rem) 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* No links assigned yet — take up no room at all. */
.social:empty { display: none; padding: 0; }

.social a {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(148deg,
                rgb(var(--glass-fill) / 0.46) 0%,
                rgb(var(--glass-fill) / 0.36) 55%,
                rgb(var(--glass-fill) / 0.44) 100%);
  -webkit-backdrop-filter: var(--glass-filter-sm);
  backdrop-filter: var(--glass-filter-sm);
  border: 1px solid var(--glass-line);
  border-radius: 0;
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 var(--glass-line-lo);
  transition: background-color .2s ease, transform .2s ease;
}
.social a:hover,
.social a:focus-visible {
  background: linear-gradient(148deg,
                rgb(var(--glass-fill) / 0.62) 0%,
                rgb(var(--glass-fill) / 0.52) 55%,
                rgb(var(--glass-fill) / 0.60) 100%);
  transform: translateY(-2px);
}

.social svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* Placeholder marks only — swap for real brand icons and drop this rule. */
.social a[data-placeholder] { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .social a:hover, .social a:focus-visible { transform: none; }
}

@media (max-width: 700px) {
  .social { justify-content: center; }
}

body.mb-subpage {
  background-color: #cfc7ba;
  background-image: url("assets/img/backdrop-tile.webp");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: max(100%, 640px) auto;
  background-attachment: scroll;
}


/* ==========================================================================
   WORDPRESS ADDITIONS
   Everything above this line came straight from the design prototype.
   Everything below exists because WordPress emits markup the prototype
   never had to deal with.
   ========================================================================== */

/* --- Admin bar ----------------------------------------------------------
   The home page is a fixed 100dvh stage, so a logged-in admin would
   otherwise lose 32px of it behind the toolbar. */
.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

.admin-bar.mb-home .stage,
.admin-bar.mb-home { height: calc(100dvh - 32px); }

@media screen and (max-width: 782px) {
  .admin-bar.mb-home .stage,
  .admin-bar.mb-home { height: calc(100dvh - 46px); }
}

/* --- <picture> wrapper for the backdrop ---------------------------------
   The prototype used a bare <img>. Serving WebP with a JPEG fallback needs
   a <picture> around it, which is a block-level box the img must fill. */
.backdrop picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Editor output ------------------------------------------------------
   Classic editor content can contain floats, captions and embeds. These
   keep them inside the glass panel rather than escaping it. */
.prose::after { content: ""; display: table; clear: both; }

.prose img,
.prose iframe,
.prose embed,
.prose object,
.prose video { max-width: 100%; }

.prose img { height: auto; }

.alignleft {
  float: left;
  margin: 0.3em 1.4em 1em 0;
}

.alignright {
  float: right;
  margin: 0.3em 0 1em 1.4em;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignnone { margin: 0 0 1em; }

.wp-caption {
  max-width: 100%;
  margin-bottom: 1.4em;
}

.wp-caption img { margin-bottom: 0.5em; }

.wp-caption-text,
.wp-caption .wp-caption-text {
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin: 0.4em 0 0;
}

/* Embedded video (a YouTube URL pasted on its own line) keeps 16:9. */
.prose .wp-video,
.prose iframe[src*="youtube"],
.prose iframe[src*="vimeo"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* --- Sticky posts and post meta ----------------------------------------- */
.entry-meta {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.6em;
}

/* --- Pagination ---------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
}

.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.6em;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.075em;
  text-decoration: none;
  color: var(--ink);
  background: rgb(var(--glass-fill) / 0.30);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: rgb(var(--glass-fill) / 0.52);
}

/* --- Screen reader text -------------------------------------------------
   WordPress core and many plugins emit .screen-reader-text by name, so it
   needs to exist even though the prototype called it .visually-hidden. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  padding: 0.7em 1.2em;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.075em;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

/* --- Contact form plugin output -----------------------------------------
   Contact Form 7 and WPForms wrap fields in their own containers. These
   rules make plugin-generated fields inherit the theme's glass styling
   instead of arriving unstyled. Harmless when no plugin is installed. */
.wpcf7 .form,
.wpcf7-form { display: grid; gap: 1rem; max-width: 34rem; }

.wpcf7-form label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  display: block;
  margin-bottom: 0.3rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea,
.wpforms-field input,
.wpforms-field select,
.wpforms-field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: 0.7em 0.85em;
  background: rgb(var(--glass-lite) / 0.55);
  border: 1px solid rgb(var(--glass-deep) / 0.48);
  border-radius: 12px;
  box-shadow: inset 0 1px 3px rgb(var(--glass-deep) / 0.18);
}

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"],
.wpforms-submit {
  justify-self: start;
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: #e8f3f6;
  background: var(--accent);
  border: 0;
  border-radius: 0;
  padding: 0.65em 1.6em 0.55em;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, filter .2s ease;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover,
.wpforms-submit:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* --- Empty states -------------------------------------------------------- */
.mb-empty {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.mb-empty code {
  font-size: 0.92em;
  padding: 0.1em 0.4em;
  background: rgb(var(--glass-fill) / 0.30);
  border: 1px solid var(--glass-line);
}