/* ==========================================================
   AVIYA KOPELMAN — aviya.info
   Type:  Jost (geometric, sibling of the logo wordmark)
          JetBrains Mono (labels, instrumentation, dates)
   Colour: warm paper ground · orange reserved for the logo
           electric cobalt for links, buttons and active states
   ---------------------------------------------------------
   To change the accent, edit --acc below. That is the
   only edit required — it cascades through the whole site.
   ========================================================== */

/* The web fonts are requested by a <link> in _includes/base.njk, not by an
   @import here. An @import cannot begin downloading until this stylesheet has
   itself downloaded and parsed, which delays first paint by a whole extra
   round trip. Keep the two in step: if a family changes, change it there. */

:root{
  /* ground */
  --paper:#F7F3EA;
  --paper-2:#F1EBDF;
  --ink:#1A1714;
  --dim:#6E655A;
  --faint:#9A9083;
  --line:#DFD7C7;

  /* brand */
  --orange:#F47217;      /* logo only — sampled from Aviya_menu_logoX2.png */
  /* blue options — swap --acc between these to change the whole site */
  --blue-cobalt:#2668C4;     /* 1 · softest */
  --blue-electric:#2455E8;   /* 2 · brighter, more digital */
  --blue-ultra:#1B44F5;      /* 3 · maximum voltage  ← current */
  --acc:var(--blue-ultra);
  --acc-soft:rgba(27,68,245,.09);

  /* dark sections */
  --dark:#14110E;
  --dark-2:#1E1A15;
  --dark-ink:#F4EFE5;
  --dark-dim:#9C9184;
  --dark-line:#2E2822;

  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  /* Jost and JetBrains Mono carry no Hebrew glyphs. Heebo is geometric and
     sits comfortably beside Jost, and covers both roles in Hebrew. */
  --sans-he:'Heebo','Jost', -apple-system, sans-serif;
  --mono-he:'Heebo', ui-monospace, monospace;
  --maxw:1200px;
  --pad:clamp(1.25rem, 4vw, 3.25rem);
}
/* Phones were getting the 1.25rem floor, which is tight for a text-heavy page. */
@media (max-width:560px){
  :root{--pad:1.5rem;}
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1.15em;font-weight:400;}
h1,h2,h3,h4{font-family:var(--sans);font-weight:650;line-height:1.06;letter-spacing:-.025em;margin:0 0 .45em;}
h1{font-size:clamp(2.4rem,6vw,4.1rem);}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);}
h3{font-size:1.2rem;letter-spacing:-.015em;}
strong{font-weight:600;}

/* ---------- shared page furniture ----------
   These replace declarations that were repeated inline across the
   templates. Editing them here now changes every page at once, which
   the inline versions did not.
   · .page-title  — the smaller h1 used by every page except the home
                    page and MINORITY, which set their own larger sizes
   · .link        — an accent-coloured link outside .prose (inside
                    .prose, links are already styled by the rules below)
   · .sub-h       — subheading inside a programme note
   · .card-h      — heading inside a listing card
   · .credit-note — commission and premiere details, quieter than body  */
.page-title{font-size:clamp(2.2rem,5vw,3.4rem);}
.link{color:var(--acc);}
.sub-h{font-size:1.3rem;}
.card-h{font-size:1.1rem;margin-bottom:.2em;}
.credit-note{color:var(--dim);font-size:.95rem;}
::selection{background:var(--acc);color:#fff;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.narrow{max-width:70ch;}

/* ---------- shared label styling ---------- */
.eyebrow,.meta,.geo,.wi,.pub{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;
}
.eyebrow{color:var(--acc);margin:0 0 1.1rem;}
.meta{color:var(--faint);}
.geo{color:var(--dim);}

/* ---------- skip link ---------- */
.skip-link{position:absolute;left:-999px;background:var(--acc);color:#fff;padding:.7em 1.2em;z-index:2000;}
.skip-link:focus{left:1rem;top:1rem;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--dark);border-bottom:1px solid var(--dark-line);}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  max-width:var(--maxw);margin:0 auto;padding:1.15rem var(--pad);}
.brand{display:block;flex-shrink:0;}
.brand svg{width:clamp(168px,19vw,232px);height:auto;}
.brand .lg-mark,.footer-logo .lg-mark{fill:var(--orange);}
.brand .lg-word{fill:#fff;}
.footer-logo .lg-word{fill:#fff;}
.main-nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;}
.main-nav a{
  font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#EDE7DC;padding:.35em 0;position:relative;transition:color .18s;
}
.main-nav a:hover{color:#fff;}
.main-nav a[aria-current="page"]{color:#fff;}
.main-nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acc);
}
.nav-toggle{display:none;background:none;border:0;color:var(--dark-ink);font-size:1.4rem;cursor:pointer;padding:.2em .4em;}

@media (max-width:920px){
  .nav-toggle{display:block;}
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,330px);height:100dvh;
    flex-direction:column;align-items:flex-start;gap:1.3rem;
    background:var(--dark-2);padding:5.5rem 2rem 2rem;
    transform:translateX(100%);transition:transform .28s ease;
    border-left:1px solid var(--dark-line);overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{font-size:.95rem;}
}

/* ---------- artwork banner ---------- */
.banner{position:relative;background:var(--paper-2);overflow:hidden;}
.banner img{
  width:100%;display:block;
  height:var(--bh, clamp(260px, 48vw, 580px));
  object-fit:cover;
  object-position:var(--focus, center 60%);
}
.banner.tall img{height:var(--bh, clamp(320px, 58vw, 700px));}
@media (max-width:700px){
  .banner img{height:clamp(200px, 52vw, 300px);}
  /* pages with a purpose-composed mobile artwork get the full 2:3 shape */
  .banner.art-directed img{height:auto;aspect-ratio:2/3;max-height:62vh;object-position:center;}
}
.banner picture{display:block;}

/* decorative cut-outs floating on a banner */
.banner-cutouts{position:absolute;inset:0;pointer-events:none;}
.banner-cutouts img{position:absolute;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.14));}
@media (max-width:700px){.banner-cutouts img{max-width:82vw;}}
.banner.on-white{background:#fff;}
.banner.on-white .banner-credit{color:rgba(0,0,0,.38);text-shadow:none;}
.banner.on-white img{object-fit:contain;background:#fff;}

/* home hero — taller, so the composition survives on a wide screen */
.banner.hero-random img,.banner.hero-random .hero-video{
  height:clamp(380px, 62vw, 760px);width:100%;object-fit:cover;
  object-position:var(--focus, center 60%);display:block;background:var(--paper-2);
}
@media (max-width:700px){
  .banner.hero-random img{height:auto;aspect-ratio:2/3;max-height:64vh;object-position:center;}
  .banner.hero-random .hero-video{height:clamp(260px,64vw,380px);}
}
.banner-credit{
  position:absolute;right:.6rem;bottom:.45rem;
  font-family:var(--mono);font-size:.44rem;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* ---------- section grounds ----------
   The ruled grid texture that used to sit behind these sections was removed
   on 29 July 2026. Sections separate by tone alone: .alt uses --paper-2,
   .dark-section uses --dark. The artwork carries the visual interest. */
.hero,.alt{position:relative;}
.hero>*,.alt>*{position:relative;}
.dark-section{position:relative;}
.dark-section>*{position:relative;}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--line);}
.hero-inner{
  /* Only the block axis. A `padding: X 0 Y` shorthand here also sets the
     horizontal padding to zero, which overrode .container on the same element
     and pushed the hero text to the screen edge on phones. */
  padding-top:clamp(2.5rem,6vw,4.5rem);
  padding-bottom:clamp(2.2rem,5vw,3.5rem);
}
.hero h1{max-width:13ch;margin-bottom:.5em;}
.hero h1 em{font-style:normal;color:var(--acc);}
.lede{font-size:clamp(1.02rem,1.7vw,1.22rem);line-height:1.5;font-weight:400;max-width:54ch;color:var(--ink);margin-bottom:1.5rem;}
/* two-sentence statement headline: needs more measure than the 13ch default */
.hero h1.h1-statement{max-width:26ch;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.1;margin-bottom:.62em;}
/* the catalogue-of-contradictions line, demoted below the lede */
.hero-list{max-width:62ch;color:var(--acc);font-size:.97rem;line-height:1.62;margin-bottom:0;}
.hero .geo{margin-top:1.6rem;}
/* signed first-person statement — carries the name for search engines and AI models */
.signature{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--dim);margin:1.6rem 0 1.1rem;}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.7rem;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:1.05em 1.7em;border-radius:0;border:1px solid var(--acc);
  background:var(--acc);color:#fff;cursor:pointer;transition:background .18s,color .18s;
}
.btn:hover{background:transparent;color:var(--acc);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc);background:transparent;}

/* ---------- sections ---------- */
section{padding:clamp(2.8rem,6vw,5rem) 0;}
section.tight{padding:clamp(1.8rem,4vw,3rem) 0;}
.alt{background:var(--paper-2);}
.dark-section{background:var(--dark);color:var(--dark-ink);}
.dark-section .meta,.dark-section .geo{color:var(--dark-dim);}
.dark-section .card{background:var(--dark-2);border-color:var(--dark-line);}
.section-head{max-width:62ch;margin-bottom:2.2rem;}
hr.divider{border:0;border-top:1px solid var(--line);margin:0;}

/* ---------- grids ---------- */
.grid{display:grid;gap:clamp(1.1rem,2.4vw,2rem);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:660px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ---------- cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:0;padding:1.5rem;
  transition:border-color .15s,box-shadow .15s;
}
.card:hover{border-color:var(--acc);box-shadow:4px 4px 0 var(--acc);transform:none;}
.card h3{margin-bottom:.2em;}
.card .meta{display:block;margin-bottom:1em;}

/* ---------- embeds ---------- */
.embed iframe{width:100%;border:0;border-radius:0;background:#000;display:block;}
.embed-16x9{position:relative;padding-top:56.25%;}
.embed-16x9 iframe{position:absolute;inset:0;height:100%;}

/* ---------- filter chips ---------- */
/* ==========================================================
   Catalogue search — /music/
   Sits above the category filters. The filters were demoted on
   2 Aug 2026: they answer "can my ensemble play this?", which is
   a real question, but not the one most visitors arrive with.
   The box is empty by design — no suggested tags, no categories
   offered. Aviya's decision: let people come up with a search.
   ========================================================== */
.csearch{margin:2.2rem 0 0;max-width:38rem;}
.csearch-field{position:relative;display:flex;align-items:center;}
.csearch-icon{
  position:absolute;left:1rem;color:var(--dim);pointer-events:none;transition:color .18s;
}
.csearch-field:focus-within .csearch-icon{color:var(--acc);}
.csearch input[type="search"]{
  width:100%;font-family:inherit;font-size:1.06rem;font-weight:400;line-height:1.4;
  padding:.95em 2.6rem .95em 3rem;border:1px solid var(--line);border-radius:0;
  background:#fff;color:var(--ink);-webkit-appearance:none;appearance:none;
  transition:border-color .18s,box-shadow .18s;
}
.csearch input[type="search"]::-webkit-search-cancel-button{display:none;}
.csearch input[type="search"]:focus{
  outline:none;border-color:var(--acc);box-shadow:4px 4px 0 var(--acc);
}
.csearch input::placeholder{color:var(--faint);}
.csearch-clear{
  position:absolute;right:.7rem;display:flex;padding:.45rem;border:0;border-radius:0;
  background:transparent;color:var(--dim);cursor:pointer;transition:color .18s;
}
.csearch-clear:hover{color:var(--acc);}

/* Autocomplete. Deliberately only appears after two characters, so it
   never frames the visitor's thinking before they have a direction. */
.csearch-ac{
  position:absolute;left:0;right:0;top:100%;z-index:40;
  background:#fff;border:1px solid var(--acc);border-top:0;
  max-height:16rem;overflow-y:auto;
}
.csearch-ac button{
  display:flex;width:100%;justify-content:space-between;align-items:center;gap:1rem;
  padding:.6em 1rem;border:0;border-radius:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:.95rem;color:var(--ink);text-align:left;
}
.csearch-ac button small{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;
}
.csearch-ac button:hover,.csearch-ac button[aria-selected="true"]{background:var(--acc);color:#fff;}
.csearch-ac button:hover small,.csearch-ac button[aria-selected="true"] small{color:rgba(255,255,255,.72);}

.csearch-status{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin:.95rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
}
.csearch-status .cs-chip{background:var(--acc-soft);color:var(--acc);padding:.25em .6em;}

/* Why a work matched. Without this a result like "Vivaldi" returning the
   oud concerto reads as a bug rather than as a real connection. */
.wcard-why{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);padding:0 1rem .85rem 1rem;margin:-.35rem 0 0;
}
.work-card[data-rank]{order:attr(order);}
:root[dir="rtl"] .csearch-icon{left:auto;right:1rem;}
:root[dir="rtl"] .csearch input[type="search"]{padding:.95em 3rem .95em 2.6rem;}
:root[dir="rtl"] .csearch-clear{right:auto;left:.7rem;}

@media (max-width:600px){
  .csearch input[type="search"]{font-size:1rem;padding:.9em 2.4rem .9em 2.8rem;}
  .csearch-icon{left:.85rem;}
}

.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 0;}
.filter-btn{
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:.75em 1.15em;border-radius:0;border:1px solid var(--line);
  background:transparent;color:var(--dim);cursor:pointer;transition:.18s;
}
.filter-btn:hover{border-color:var(--acc);color:var(--acc);}
.filter-btn[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff;}
.work-card[hidden]{display:none;}
.no-results{color:var(--faint);font-style:italic;padding:2rem 0;}

/* ---------- work rows ---------- */
.wrow{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:.95rem 0;border-bottom:1px solid var(--line);}
.wt{font-size:1.12rem;font-weight:550;letter-spacing:-.015em;}
.wi{color:var(--faint);white-space:nowrap;}

/* ---------- press ---------- */
.press-item{display:flex;flex-direction:column;gap:.55rem;}
.press-item img{border-radius:0;border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover;width:100%;}
.press-item .pub{color:var(--acc);}
.press-item blockquote{margin:0;font-size:.97rem;line-height:1.55;color:var(--dim);font-style:italic;}

/* ---------- news ---------- */
.news-item{display:grid;grid-template-columns:150px 1fr;gap:1.6rem;
  padding:1.7rem 0;border-bottom:1px solid var(--line);}
.news-item time{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);padding-top:.35em;}
.news-item img{border-radius:0;margin:.9rem 0;max-width:440px;}
@media (max-width:660px){.news-item{grid-template-columns:1fr;gap:.5rem;}}

/* ---------- pull quote ---------- */
.pull-quote{
  font-size:clamp(1.35rem,3vw,2rem);line-height:1.24;font-weight:500;letter-spacing:-.025em;
  color:var(--ink);border-left:3px solid var(--acc);padding-left:1.1em;max-width:26ch;margin:0 0 1.5rem;
}

/* ---------- products ---------- */
.product{display:grid;grid-template-columns:1fr auto;gap:1.1rem;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:0;padding:1.3rem 1.5rem;}
.product h2,.product h3{margin-bottom:.15em;}
.product-actions{display:flex;gap:.55rem;flex-wrap:wrap;}
.product-actions .btn{padding:.8em 1.2em;font-size:.66rem;}
@media (max-width:660px){.product{grid-template-columns:1fr;}}

.note-box{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:0;padding:1.3rem 1.5rem;font-size:.97rem;color:var(--dim);}
.note-box a{color:var(--acc);font-weight:500;}

/* ---------- portrait ---------- */
.portrait-fig{margin:0 0 2rem;float:right;width:min(46%,480px);margin-left:2.2rem;}
.portrait-fig img{border-radius:0;width:100%;height:auto;}
@media (max-width:760px){.portrait-fig{float:none;width:100%;margin:0 0 1.6rem;}}

/* ---------- prose ---------- */
.prose{max-width:72ch;}
.prose h2{margin-top:2.2em;}
.prose h2:first-child{margin-top:0;}
.prose p{color:var(--ink);}
.prose a{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;font-weight:500;}
.prose a:hover{background:var(--acc-soft);}

/* A poem or sung text quoted inside a programme note. Line breaks are the
   poet's, so the block is not justified and lines are never re-wrapped for
   tidiness; long lines indent rather than fold invisibly. */
.work-text{
  margin:1.2rem 0 1.4rem;padding:0 0 0 1.1rem;
  border-left:2px solid var(--line);
  font-size:1.02rem;line-height:1.75;color:var(--ink);
  white-space:normal;text-wrap:balance;
}
.work-text[dir="rtl"]{border-left:0;border-right:2px solid var(--line);padding:0 1.1rem 0 0;}
.work-note-he{margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line);}

/* Shown at the top of a page whose content is not finished. Deliberately quiet
   — it is an honest note to the reader, not a warning. */
.under-construction{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  color:var(--dim);margin:1.6rem 0 -0.6rem;
  padding-left:.8rem;border-left:2px solid var(--acc);
}
[dir="rtl"] .under-construction{padding:0 .8rem 0 0;border-left:0;border-right:2px solid var(--acc);}

/* ---------- forms ---------- */
form.contact-form{display:grid;gap:1rem;max-width:540px;}
.contact-form label{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:.45em;}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;background:#fff;border:1px solid var(--line);color:var(--ink);
  padding:.8em .9em;border-radius:0;font-family:var(--sans);font-size:1rem;}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
  outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc);}

/* ---------- footer ---------- */
.site-footer{background:var(--dark);color:var(--dark-ink);padding:clamp(2.5rem,5vw,3.8rem) 0 2rem;}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:2.4rem;}
.footer-grid p{color:var(--dark-dim);font-size:.95rem;}
/* h2, not h4: the footer sits after pages whose deepest heading is an h1
   (the catalogue, a news post), so an h4 — or an h3 — skipped a level and
   broke the outline screen readers navigate by. Appearance unchanged. */
.footer-grid h2{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acc);margin-bottom:1em;font-weight:500;}
.footer-grid a{display:block;color:var(--dark-dim);font-size:.95rem;padding:.24em 0;transition:color .16s;}
.footer-grid a:hover{color:var(--dark-ink);}
.footer-logo{margin-bottom:1.2rem;}
.footer-logo svg{width:210px;height:auto;}
.social-row{display:flex;gap:.6rem;margin-top:1.1rem;}
.social-row a{width:38px;height:38px;border:1px solid var(--dark-line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.05em;color:var(--dark-dim);transition:.18s;}
.social-row a:hover{border-color:var(--acc);color:var(--acc);}
.footer-bottom{max-width:var(--maxw);margin:2.4rem auto 0;padding:1.3rem var(--pad) 0;
  border-top:1px solid var(--dark-line);display:flex;justify-content:space-between;gap:.6rem;
  flex-wrap:wrap;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- utility ---------- */
.center{text-align:center;}
.cutout{max-width:300px;width:100%;height:auto;margin:0 0 1.6rem;}
@media (max-width:700px){.cutout{max-width:70vw;}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ==========================================================
   WORK CARDS — the music player
   One frame for every source (Bandcamp, SoundCloud, YouTube,
   Vimeo, Spotify). The real player is not loaded until the
   row is clicked, so the page stays fast and looks like ours.
   Category fallback colours are the four --wfb-* tokens below;
   change those to recolour the works that have no artwork.
   ========================================================== */
:root{
  --wfb-orchestral:#1B44F5;
  --wfb-chamber:#128A85;
  --wfb-solo:#1A1714;
  --wfb-multigenre:#7A2E24;
}
.work-list{display:flex;flex-direction:column;gap:.85rem;}

.wcard{background:#fff;border:1px solid var(--line);transition:border-color .15s,box-shadow .15s;}
.wcard:hover{border-color:var(--acc);box-shadow:4px 4px 0 var(--acc);}
.wcard[data-open="true"]{border-color:var(--acc);box-shadow:4px 4px 0 var(--acc);}

.wcard-hit{
  display:flex;align-items:center;gap:clamp(.8rem,2vw,1.15rem);width:100%;
  padding:.7rem;background:transparent;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;
}
.wcard-hit:focus-visible{outline:2px solid var(--acc);outline-offset:2px;}

.wcard-thumb{
  flex:0 0 auto;width:clamp(104px,17vw,164px);aspect-ratio:16/9;
  background:var(--paper-2);overflow:hidden;position:relative;
}
.wcard-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 38%;}

.wcard-thumb--fb{display:flex;align-items:flex-end;padding:.5rem;}
.wcard-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;}
.wcard-thumb--fb[data-cat="Orchestral"]{background:var(--wfb-orchestral);}
.wcard-thumb--fb[data-cat="Chamber"]{background:var(--wfb-chamber);}
.wcard-thumb--fb[data-cat="Solo"]{background:var(--wfb-solo);}
.wcard-thumb--fb[data-cat="Multigenre"]{background:var(--wfb-multigenre);}
.wcard-fb-label{
  font-family:var(--mono);font-size:.52rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
}

.wcard-body{flex:1 1 auto;min-width:0;}
.wcard-title{
  display:block;font-weight:650;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(1rem,1.6vw,1.12rem);
}

/* Category and format as small chips, so the mono uppercase style is used only
   for short labels. Long instrumentation text gets readable sans below —
   at .55rem mono it was about 9px, which is not legible on a phone. */
.wcard-tags{display:flex;flex-wrap:wrap;gap:.3rem .4rem;margin-top:.42em;}
.wcard-tag{
  font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);padding:.24em .5em;line-height:1.35;white-space:nowrap;
}
.wcard-instr{
  display:block;margin-top:.45em;font-size:.86rem;line-height:1.5;color:var(--dim);
}

/* movement titles — shown in the row, not hidden inside Bandcamp's player */
.wcard-movements{display:flex;flex-wrap:wrap;gap:.1rem .9rem;margin-top:.5em;}
.wcard-mvt{font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.04em;
  color:var(--faint);line-height:1.65;}

/* link to a work's own programme-note page, when one exists */
.wcard-note-link{
  display:block;text-align:right;padding:0 .7rem .6rem;margin-top:-.2rem;
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.06em;
  color:var(--acc);text-decoration:none;
}
.wcard-note-link:hover{text-decoration:underline;}
[dir="rtl"] .wcard-note-link{text-align:left;}

.wcard-play{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
  background:var(--acc);color:#fff;transition:background .15s;
}
.wcard-hit:hover .wcard-play{background:var(--ink);}
.wcard-play svg{display:none;}
.wcard-hit[data-autoplay="true"] .i-play{display:block;}
.wcard-hit[data-autoplay="false"] .i-expand{display:block;}
.wcard[data-open="true"] .wcard-play{background:var(--ink);}
.wcard[data-open="true"] .wcard-hit .i-play,
.wcard[data-open="true"] .wcard-hit .i-expand{display:none;}
.wcard[data-open="true"] .wcard-hit .i-close{display:block;}

.wcard-player{padding:0 .7rem .7rem;}
.wcard-player iframe{width:100%;border:0;display:block;background:#000;}
.wcard-player.is-video{position:relative;}
.wcard-player.is-video .ratio{position:relative;padding-top:56.25%;}
.wcard-player.is-video iframe{position:absolute;inset:0;height:100%;}

/* ---------- the same rows on a dark section (home page) ---------- */
/* --dark-2 (#1E1A15) against --dark (#14110E) is a 4% luminance step: on a
   phone in daylight the rows vanish into the section and the page reads as
   having no margins at all. A lighter surface and a visible edge fix it. */
.work-list.on-dark .wcard{background:#26211A;border-color:rgba(255,255,255,.17);}
.work-list.on-dark .wcard:hover,
.work-list.on-dark .wcard[data-open="true"]{border-color:var(--acc);box-shadow:4px 4px 0 var(--acc);}
.work-list.on-dark .wcard-title{color:var(--dark-ink);}
.work-list.on-dark .wcard-tag{color:var(--dark-dim);border-color:var(--dark-line);}
.work-list.on-dark .wcard-instr{color:var(--dark-dim);}
.work-list.on-dark .wcard-mvt{color:var(--dark-dim);opacity:.75;}
.work-list.on-dark .wcard-thumb{background:var(--dark);}
.work-list.on-dark .wcard-hit:hover .wcard-play{background:var(--dark-ink);color:var(--dark);}

/* ---------- phones ---------- */
@media (max-width:660px){
  .wcard-hit{gap:.75rem;padding:.65rem;align-items:flex-start;}
  .wcard-thumb{width:104px;}
  .wcard-title{font-size:1rem;line-height:1.2;}
  .wcard-instr{font-size:.82rem;}
  /* A tap target below 44px is hard to hit accurately. */
  .wcard-play{width:44px;height:44px;}
  /* Six movement titles under every row turns the list into a wall of grey.
     They stay available — they appear when the row is opened. */
  .wcard-movements{display:none;}
  .wcard[data-open="true"] .wcard-movements{display:flex;flex-direction:column;gap:0;}
}
@media (max-width:420px){
  .wcard-thumb{width:88px;}
  .wcard-tag{font-size:.52rem;letter-spacing:.1em;padding:.2em .42em;}
}


/* ==========================================================
   HEBREW AND RIGHT-TO-LEFT
   The layout is built on flexbox and grid, which mirror by
   themselves once dir="rtl" is set. What does not mirror is
   anything positioned with an explicit left or right, so those
   are the overrides below.
   ========================================================== */
[dir="rtl"] body{font-family:var(--sans-he);}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-family:var(--sans-he);font-weight:700;letter-spacing:0;
}
/* Letter-spacing is a Latin typographic device. Applied to Hebrew it pulls the
   letters apart into nonsense, so every tracked label is reset. Uppercasing is
   also meaningless in an unicameral script. */
[dir="rtl"] .eyebrow,[dir="rtl"] .meta,[dir="rtl"] .geo,[dir="rtl"] .wi,[dir="rtl"] .pub,
[dir="rtl"] .filter-btn,[dir="rtl"] .wcard-tag,[dir="rtl"] .wcard-mvt,
[dir="rtl"] .wcard-fb-label,[dir="rtl"] .btn,[dir="rtl"] .main-nav a,
[dir="rtl"] .signature,[dir="rtl"] .banner-credit{
  font-family:var(--mono-he);letter-spacing:0;text-transform:none;
}
[dir="rtl"] .eyebrow,[dir="rtl"] .filter-btn,[dir="rtl"] .btn,[dir="rtl"] .main-nav a{font-weight:600;}
/* Slightly larger, because Hebrew has no ascenders or descenders to read by
   and the same nominal size reads smaller than Latin. */
[dir="rtl"] .wcard-tag{font-size:.66rem;}
[dir="rtl"] .wcard-mvt{font-size:.72rem;}
[dir="rtl"] .banner-credit{font-size:.56rem;}

/* Latin inside Hebrew — work titles, ensemble names, MINORITY — stay left to
   right. The browser's bidi algorithm handles the ordering; this only keeps
   the Latin typeface. */
[dir="rtl"] .wcard-title{font-family:var(--sans-he);}
[dir="rtl"] [lang="en"],[dir="rtl"] [dir="ltr"]{font-family:var(--sans);}

/* things pinned to a side */
[dir="rtl"] .skip-link{left:auto;right:-999px;}
[dir="rtl"] .skip-link:focus{left:auto;right:1rem;}
[dir="rtl"] .banner-credit{right:auto;left:.6rem;}
[dir="rtl"] .news-item img{margin-inline:0;}
@media (max-width:920px){
  [dir="rtl"] .main-nav{inset:0 auto 0 0;transform:translateX(-100%);
    border-left:0;border-right:1px solid var(--dark-line);}
  [dir="rtl"] .main-nav.open{transform:translateX(0);}
}
/* the offset shadow should fall away from the reading direction */
[dir="rtl"] .wcard:hover,[dir="rtl"] .wcard[data-open="true"],
[dir="rtl"] .card:hover{box-shadow:-4px 4px 0 var(--acc);}
[dir="rtl"] .work-list.on-dark .wcard:hover,
[dir="rtl"] .work-list.on-dark .wcard[data-open="true"]{box-shadow:-4px 4px 0 var(--acc);}

/* ---------- language switch ----------
   Each language in its own name. "עב" was not a real abbreviation, and a code
   like HE tells a Hebrew reader less than the word does. */
.lang-switch{display:flex;align-items:center;gap:.05rem;margin-inline-start:.55rem;}
.lang-switch a,.lang-switch .lang-cur{
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.05em;
  padding:.45em .62em;line-height:1;white-space:nowrap;
}
.lang-switch a{color:var(--dark-dim);transition:color .18s;}
.lang-switch a:hover{color:#fff;}
.lang-switch .lang-cur{color:#fff;background:var(--acc);}
.lang-switch .lang-code{display:none;}
/* Hebrew carries no ascenders or descenders, so it reads smaller than Latin at
   the same nominal size and needs a little more. */
.lang-switch [lang="he"]{font-family:var(--sans-he);font-size:.86rem;letter-spacing:0;}

@media (max-width:920px){
  .lang-switch{margin:1.6rem 0 0;padding-top:1.3rem;
    border-top:1px solid var(--dark-line);width:100%;
    flex-direction:column;align-items:flex-start;gap:.15rem;}
  .lang-switch a,.lang-switch .lang-cur{font-size:1rem;padding:.5em .75em;}
  .lang-switch [lang="he"]{font-size:1.12rem;}
}

/* ---------- cut-out illustrations inside a text column ----------
   The transparent-background collages sit in the prose the way they did on the
   old site: floated on wide screens so the text wraps around them, centred and
   full-width-limited on phones. */
.cutout-fig{float:right;margin:.2rem 0 1.2rem 2rem;max-width:300px;}
.cutout-fig img{display:block;}
.cutout-fig figcaption{
  font-family:var(--mono);font-size:.5rem;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-top:.5em;text-align:right;
}
[dir="rtl"] .cutout-fig{float:left;margin:.2rem 2rem 1.2rem 0;}
[dir="rtl"] .cutout-fig figcaption{text-align:left;font-family:var(--mono-he);letter-spacing:0;}
@media (max-width:700px){
  .cutout-fig{float:none;margin:1.4rem auto;max-width:70vw;}
  .cutout-fig figcaption{text-align:center;}
}


/* ==========================================================
   PRESS — quote panels, interleaved concert photographs
   Grounds sampled from the site artwork; every text/ground
   pair verified at 4.5:1 or better (metadata 3:1).
   Data lives in src/_data/pressquotes.json
   ========================================================== */
.pq-intro{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem)}
.pq-intro h1{font-size:clamp(2rem,5.5vw,3.6rem);margin:0 0 .5em}
.pq-intro-p{font-size:1.06rem;line-height:1.62;color:var(--dim);max-width:56ch;margin:0}
.pq-wrap{--pq-gut:clamp(1.5rem,6vw,6rem)}
.pq{padding:clamp(4rem,11vw,9rem) var(--pq-gut);position:relative}
.pq-in{max-width:940px;margin:0 auto;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s ease-out;transform:scale(.94);opacity:.62;will-change:transform}
.pq.on .pq-in{transform:scale(1);opacity:1}
.pq-flex{display:flex;gap:0}
.pq-rule{width:3px;flex:0 0 3px;align-self:stretch}
.pq-body{padding-inline-start:clamp(1rem,2.5vw,1.75rem)}
.pq-meta{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin:0 0 1.4rem}
.pq-lead{font-family:var(--sans);font-size:clamp(1.6rem,4.4vw,3rem);font-weight:500;line-height:1.16;letter-spacing:-.022em;margin:0 0 1rem;text-wrap:balance}
.pq-cont{font-family:var(--sans);font-size:clamp(1rem,1.55vw,1.18rem);line-height:1.62;margin:0 0 1.6rem;max-width:54ch}
.pq-who{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin:0}
.pq-src{display:inline-block;margin-top:1.05rem;padding-bottom:2px;
  font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid;opacity:.75;transition:opacity .2s}
.pq-src:hover,.pq-src:focus{opacity:1}
[dir="rtl"] .pq-src{font-family:var(--mono-he);letter-spacing:.02em;text-transform:none;font-size:.8rem}
.pq-shot{background:var(--paper);padding:clamp(2.75rem,7vw,5rem) var(--pq-gut);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.pq-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(1.25rem,3vw,2.25rem);max-width:960px}
.pq-row figure{margin:0;display:flex;flex-direction:column;align-items:center;min-width:0}
.pq-row img{display:block;width:auto;height:auto;object-fit:contain;
  max-width:min(645px,88vw);max-height:480px;border:1px solid var(--line);
  opacity:.001;transform:translateY(10px);transition:opacity .6s ease-out,transform .6s cubic-bezier(.22,.61,.36,1)}
.pq-row.is-pair img{max-width:min(375px,44vw);max-height:365px}
.pq-shot.on img{opacity:1;transform:none}
.pq-shot.on .pq-row.is-pair figure:last-child img{transition-delay:.12s}
.pq-cap{margin:1.1rem 0 0;max-width:42ch;color:var(--dim);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.65}
.pq-row.is-pair .pq-cap{font-size:.58rem;letter-spacing:.11em;max-width:32ch}
.pq-cap b{font-weight:500;color:var(--faint);margin-inline-start:.6em}
@media (max-width:520px){
  .pq-row.is-pair img{max-width:84vw;max-height:340px}
}
.pq-react{padding:clamp(3.5rem,8vw,6rem) var(--pq-gut);background:var(--paper-2)}
.pq-react-h{max-width:940px;margin:0 auto 2.5rem}
.pq-react-h h2{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:500;margin:0 0 .5rem}
.pq-react-h p{font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin:0}
.pq-react-l{max-width:940px;margin:0 auto;display:flex;flex-direction:column;gap:2.4rem}
.pq-react-i{border-top:1px solid var(--line);padding-top:1.5rem}
.pq-react-i blockquote{font-family:var(--sans);font-style:italic;font-size:clamp(1.02rem,1.7vw,1.24rem);line-height:1.66;color:var(--ink);margin:0 0 1rem;max-width:62ch}
.pq-react-i cite{font-style:normal;font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:block}
.pq-react-i cite span{display:block;font-weight:400;letter-spacing:.1em;color:var(--dim);margin-top:.35rem}
/* Hebrew: Jost and JetBrains Mono carry no Hebrew glyphs */
[dir="rtl"] .pq-meta,[dir="rtl"] .pq-who{font-family:var(--mono-he);letter-spacing:.02em;text-transform:none;font-size:.86rem}
[dir="rtl"] .pq-lead{font-family:var(--sans-he);font-weight:600;letter-spacing:0;line-height:1.36}
[dir="rtl"] .pq-cont{font-family:var(--sans-he);line-height:1.75}
[dir="rtl"] .pq-cap{font-family:var(--mono-he);letter-spacing:.02em;text-transform:none;font-size:.82rem}
[dir="rtl"] .pq-row.is-pair .pq-cap{font-size:.76rem}
[dir="rtl"] .pq-react-h p{font-family:var(--mono-he);letter-spacing:.02em;text-transform:none;font-size:.82rem}
[dir="rtl"] .pq-react-i blockquote{font-family:var(--sans-he);line-height:1.8}
[dir="rtl"] .pq-react-i cite,[dir="rtl"] .pq-react-i cite span{font-family:var(--mono-he);letter-spacing:.02em;text-transform:none;font-size:.84rem}
@media (prefers-reduced-motion:reduce){
  .pq-in,.pq-shot img{transition:none;transform:none;opacity:1}
}

/* A work with no recording. Deliberately NOT the player row minus its player:
   no thumbnail, no play control, so it cannot read as a row that failed to
   load. A recording is an attribute of a work, not the reason it is listed. */
.wcard--noplayer{border-left:3px solid var(--ink);}
.wcard--noplayer:hover{border-color:var(--line);border-left-color:var(--acc);box-shadow:none;}
.wcard-entry{
  display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.15rem);
  width:100%;padding:.95rem .85rem;
}
.wcard-entry-main{flex:1 1 auto;min-width:0;}
.wcard-entry-meta{
  flex:0 0 auto;display:flex;align-items:center;gap:.6rem;
}
.wcard-entry .wcard-note-link{position:static;margin:0;white-space:nowrap;}
@media (max-width:640px){
  .wcard-entry{flex-direction:column;align-items:flex-start;gap:.55rem;}
  .wcard-entry-meta{width:100%;justify-content:space-between;}
}

/* Contact form result message. Added 6 Aug 2026 with the move from Netlify
   Forms to the Cloudflare Pages Function in functions/api/contact.js. The
   element is aria-live, so a screen reader announces the outcome without the
   page navigating anywhere. */
.form-status{font-family:var(--mono);font-size:.8rem;line-height:1.5;margin:0;}
.form-status.is-ok{color:#1c7a4a;}
.form-status.is-error{color:#b3261e;}