/* Yonatan Nahmias: poster-and-print redesign.
   Concept: a 60s/70s gig poster on top (huge condensed caps over a stage photo), then a record-shop wall,
   then printed liner-note pages on cream paper. Dark wine base, cream paper, mustard and tomato-red accents. */
/* Fallback for the condensed display font: while Anton loads (or if Google Fonts is blocked),
   a scaled-down system sans keeps big headings close to Anton's width, so words don't break mid-word.
   Latin only, so Hebrew still falls through to Karantina. */
@font-face {
  font-family: 'Anton Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Roboto'), local('Liberation Sans');
  size-adjust: 70%;
  unicode-range: U+0000-024F, U+2000-206F;
}
:root {
  --bg: #140A0E;
  --surface: #1E0E15;
  --surface-2: #2C1220;
  --burgundy: #5C0A1E;
  --crimson: #8B1E2D;
  --cream: #F2E3C6;
  --muted: #CDB596;
  --mustard: #D9A441;
  --burnt: #C4622D;
  --red: #E8674A;          /* accent on dark */
  --paper: #F2E3C6;        /* printed sections */
  --ink: #1A0811;
  --ink-muted: #5A4636;
  --red-ink: #9A2B17;      /* accent on paper */
  --line: rgba(242, 227, 198, 0.22);
  --font-display: 'Anton', 'Anton Fallback', 'Karantina', 'Impact', sans-serif;
  --font-serif: 'Frank Ruhl Libre', Georgia, serif;
  --font-body: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Heebo', ui-monospace, monospace;
  --font-flair: var(--font-serif);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 12px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--cream); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .75  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
cite { font-style: italic; }
[lang="he"] cite { font-style: normal; }

/* utilities */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 100; background: var(--cream); color: var(--ink); padding: 10px 18px; border-radius: 4px; font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; box-shadow: 0 0 0 6px var(--bg); }
.paper a:focus-visible, .paper button:focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 6px var(--paper); }
main:focus { outline: none; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.label { margin: 0 0 10px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mustard); }
.paper .label { color: var(--red-ink); }

/* top bar */
.hero { position: relative; background: var(--bg); container-type: inline-size; }
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 16px; border-bottom: 1px solid var(--line); position: relative; z-index: 3; }
.brand { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; line-height: 1; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.nav-links a { display: inline-block; min-width: 24px; text-align: center; text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--red); }
.lang-toggle { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border: 1.5px solid var(--cream); border-radius: 999px; text-decoration: none; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; text-transform: none; }
.lang-toggle:hover { background: var(--cream); color: var(--ink); }

/* poster hero */
.poster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: stretch; min-height: min(86vh, 820px); }
.poster-text { display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding-block: 48px 56px; padding-inline-end: 32px; min-width: 0; position: relative; z-index: 2; }
.kicker { align-self: flex-start; padding: 3px 8px; background: var(--bg); margin: 0; font-family: var(--font-mono); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--mustard); }
h1 { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .86; font-size: clamp(3.6rem, 11vw, 9rem); letter-spacing: .005em; }
h1 span { display: block; }
h1 span + span { color: var(--red); }
[lang="he"] h1 { line-height: .92; font-weight: 700; }
.flair { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); text-transform: uppercase; letter-spacing: .04em; color: var(--mustard); }
[dir="rtl"] .flair { text-align: right; }
.lead { margin: 0; font-size: 1.2rem; max-width: 36ch; text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 26px; font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--red); }
.btn-primary { background: var(--red); color: var(--ink); }
.btn-primary:hover { background: var(--cream); border-color: var(--cream); }
.btn-ghost { color: var(--cream); border-color: var(--cream); }
.btn-ghost:hover { background: var(--cream); color: var(--ink); }
.poster-photo { position: relative; margin: 0; margin-inline-end: calc(-1 * max(16px, (100cqw - 1200px) / 2 + 16px)); min-height: 420px; overflow: hidden; }
.poster-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.poster-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--bg) 0%, rgba(20, 10, 14, 0) 26%), linear-gradient(to top, rgba(20, 10, 14, .55), rgba(20, 10, 14, 0) 30%); }
[dir="rtl"] .poster-photo::after { background: linear-gradient(to left, var(--bg) 0%, rgba(20, 10, 14, 0) 26%), linear-gradient(to top, rgba(20, 10, 14, .55), rgba(20, 10, 14, 0) 30%); }
.poster-photo figcaption { position: absolute; bottom: 12px; inset-inline-end: 16px; z-index: 1; padding: 2px 8px; background: rgba(20, 10, 14, .85); color: var(--cream); font-family: var(--font-serif); font-weight: 500; font-size: 13.5px; line-height: 1.5; }

/* credit ticker (static) */
.ticker { background: var(--burgundy); border-block: 1px solid var(--line); }
.ticker ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding: 14px 0; list-style: none; font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.ticker li { display: inline-flex; align-items: center; gap: 18px; }
.ticker li + li::before { content: "✶"; color: var(--mustard); }
.ticker .t-label { color: var(--mustard); }

/* sections */
.section { padding-block: 88px; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 36px; }
.section-head h2 { margin: 0; min-width: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 7vw, 5rem); line-height: .95; }
[lang="he"] .section-head h2 { font-weight: 700; }
.section-sub { margin: 0; max-width: 46ch; color: var(--muted); }
.paper { background: var(--paper); color: var(--ink); }
.paper .section-sub { color: var(--ink-muted); }

/* the wall: records */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.filter { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); background: transparent; border: 1px solid var(--cream); border-radius: 999px; padding: 6px 14px; min-height: 36px; cursor: pointer; }
.filter:hover { background: rgba(242, 227, 198, .14); }
.filter[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.wall > li { display: flex; min-width: 0; }
.wall > li[hidden] { display: none; }
.wall > li > .record { flex: 1; }
.record { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); }
.cover { position: relative; aspect-ratio: 1; overflow: hidden; display: flex; align-items: flex-end; padding: 18px; }
.cover-type { position: relative; z-index: 1; margin: 0; font-family: var(--font-display); text-transform: uppercase; line-height: .88; font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.cover--lp { background: var(--mustard); color: var(--ink); }
.cover--lp::before { content: ""; position: absolute; inset: -20%; background: repeating-radial-gradient(circle at 70% 30%, var(--burnt) 0 10px, var(--mustard) 10px 22px); opacity: .55; }
.cover--single { background: var(--crimson); color: var(--cream); }
.cover--single::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 40%, rgba(242, 227, 198, .14) 0 8deg, transparent 8deg 16deg); }
.cover--seven { background: var(--burnt); color: var(--ink); }
.cover--seven::before { content: ""; position: absolute; width: 74%; aspect-ratio: 1; top: 8%; inset-inline-end: -14%; border-radius: 50%; background: radial-gradient(circle, var(--bg) 0 4%, var(--cream) 4.5% 30%, var(--bg) 31% 100%); }
.cover--tile { background: var(--surface-2); color: var(--cream); }
.cover--tile::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 45deg, var(--mustard) 0 25%, transparent 0 50%, var(--crimson) 0 75%, transparent 0) 0 0 / 56px 56px; opacity: .45; }
.cover--funk { background: repeating-linear-gradient(-16deg, var(--mustard) 0 18px, var(--burnt) 18px 36px, var(--crimson) 36px 54px, var(--burgundy) 54px 72px); color: var(--cream); }
.cover--funk .cover-type { background: var(--ink); padding: 6px 10px; }
.cover--rays { background: radial-gradient(circle at 50% 100%, var(--mustard) 0 22%, transparent 22.5%), repeating-conic-gradient(from 0deg at 50% 100%, var(--burgundy) 0 8deg, var(--crimson) 8deg 16deg); color: var(--cream); }
.cover--rays .cover-type { background: var(--ink); padding: 6px 10px; }
.record-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px; }
.record-body h3 { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
.record-meta { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.record-note { margin: 0; font-size: 15px; color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.chip--link { border: 1px solid var(--cream); color: var(--cream); }
.chip--link:hover { background: var(--cream); color: var(--ink); }

/* bands */
.bands { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.band { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; padding-block: 28px; border-bottom: 1px solid var(--line); }
.band-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.band-art { aspect-ratio: 4 / 5; background: repeating-radial-gradient(circle at 60% 50%, var(--crimson) 0 14px, var(--surface-2) 14px 28px, var(--mustard) 28px 33px, var(--surface-2) 33px 46px); display: flex; align-items: flex-start; padding: 12px; }
.band-art span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--cream); padding: 2px 8px; }
.band h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .95; }
[lang="he"] .band h3 { font-weight: 700; }
.band .genre { margin: 0 0 12px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--mustard); }
.band p.about-text { margin: 0 0 12px; max-width: 62ch; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0 0 6px; font-size: 15px; max-width: 72ch; }
.facts dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.more-projects { margin: 24px 0 0; color: var(--muted); }
.more-projects a { color: var(--cream); text-underline-offset: 4px; text-decoration-color: var(--red); }

/* credits on paper */
.credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
.credit { min-width: 0; border-top: 2px solid var(--ink); padding-top: 14px; }
.credit h3 { margin: 0 0 10px; font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; }
.credit ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 1.05rem; }
.credit li small { display: block; color: var(--ink-muted); font-size: 14px; line-height: 1.4; }
.credit p { margin: 0; text-wrap: pretty; }

/* watch */
.tapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tapes li { min-width: 0; }
.tape { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; padding-inline-start: 70px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; }
.tape:hover { border-color: var(--red); }
.tape-play { position: absolute; top: 20px; inset-inline-start: 20px; width: 34px; height: 34px; border-radius: 50%; background: var(--red); }
.tape-play::after { content: ""; position: absolute; top: 11px; left: 13px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--ink); }
.tape-band { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mustard); }
.tape-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }
.tape-meta { color: var(--muted); font-size: 14px; margin-top: auto; }

/* gallery */
/* gallery: a row-ordered grid, so the order on screen is the order in the page (best shots first).
   Tall prints are 4:5; wide ones span two columns at 16:10, which comes out the same height. */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; align-items: start; }
.gallery figure { margin: 0; min-width: 0; }
.gallery figure.g-wide { grid-column: span 2; }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bg); }
.gallery figure.g-wide img { aspect-ratio: 16 / 10; }
.gallery figure[hidden] { display: none; }
.gallery figcaption { margin-top: 8px; font-family: var(--font-serif); font-weight: 500; font-size: 14.5px; color: var(--muted); line-height: 1.4; }
/* photo credits: liner-note serif, photographer handle in mustard */
figcaption .by { color: var(--mustard); }
html.yn-contrast figcaption .by { color: #ffd84d; }

/* bio */
.about { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; }
.portrait-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 52%; }
.about-copy p { margin: 0 0 16px; max-width: 62ch; font-family: var(--font-serif); font-size: 1.22rem; line-height: 1.6; text-wrap: pretty; }
.about-copy p:first-child::first-letter { font-family: var(--font-display); float: inline-start; font-size: 4.2em; line-height: .8; margin-inline-end: 10px; margin-top: 6px; color: var(--red); }
/* Hebrew: no drop cap (a single yod reads as a red block) */
[dir="rtl"] .about-copy p:first-child::first-letter { font: inherit; float: none; font-size: inherit; line-height: inherit; margin: 0; color: inherit; }

/* services on paper */
.services { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.service { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding-block: 24px; border-bottom: 1px solid rgba(26, 8, 17, .25); }
.service .num { font-family: var(--font-mono); font-size: 14px; color: var(--red-ink); letter-spacing: .1em; }
.service h3 { margin: 0 0 4px; font-family: var(--font-serif); font-weight: 700; font-size: 1.6rem; line-height: 1.2; }
.service p { margin: 0; color: var(--ink-muted); max-width: 60ch; }
.service .ask { display: inline-flex; align-items: center; min-height: 40px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-underline-offset: 5px; }

/* contact */
.contact { background: var(--burgundy); }
.contact .section-head h2 { color: var(--cream); }
.lead-sm { margin: 0 0 28px; font-size: 1.15rem; max-width: 52ch; }
.contact-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.contact-list li { padding: 18px; border: 1px solid var(--cream); min-width: 0; }
.contact-list strong { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mustard); font-weight: 500; }
.contact-list a { display: block; text-decoration: none; }
.contact-list > li > a > span:not([lang]), .contact-list > li > span:not([lang]) { color: var(--cream); font-size: 16px; }
.contact-list a:hover span { text-decoration: underline; }
.contact-list a.addr { margin-top: 4px; color: var(--cream); font-size: 16px; text-decoration: underline; text-decoration-color: var(--mustard); text-underline-offset: 4px; overflow-wrap: anywhere; }
.copy { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); background: transparent; border: 1px solid var(--cream); border-radius: 999px; padding: 2px 14px; min-height: 32px; cursor: pointer; }
.copy:hover { background: var(--cream); color: var(--burgundy); }

/* footer and statement pages */
.foot { padding-block: 28px 84px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
.foot p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot a { display: inline-block; min-height: 24px; padding-block: 3px; color: var(--cream); text-underline-offset: 4px; }
.stripes { height: 10px; background: linear-gradient(var(--mustard) 0 3px, var(--red) 3px 6px, var(--crimson) 6px 10px); }
.doc { padding-block: 56px 72px; }
.doc h1 { font-size: clamp(2.6rem, 8vw, 5rem); margin-bottom: 24px; }
.doc h2 { margin: 36px 0 10px; font-family: var(--font-serif); font-weight: 700; font-size: 1.6rem; line-height: 1.2; }
.doc p, .doc li { max-width: 68ch; text-wrap: pretty; overflow-wrap: anywhere; }
.doc ul { padding-inline-start: 1.2em; }
.doc a { text-underline-offset: 4px; }

/* responsive */
@media (max-width: 1000px) {
  .wall, .tapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .poster { grid-template-columns: 1fr; min-height: 0; }
  .poster-photo { order: -1; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); aspect-ratio: 4 / 4.2; min-height: 0; }
  .poster-photo::after, [dir="rtl"] .poster-photo::after { background: linear-gradient(to top, var(--bg) 0%, rgba(20, 10, 14, 0) 40%); }
  .poster-text { padding-block: 0 48px; padding-inline-end: 0; margin-top: -72px; }
  .poster-photo figcaption { bottom: auto; top: 12px; }
  .band { grid-template-columns: 1fr; }
  .band-photo, .band-art { max-width: 360px; }
  .about { grid-template-columns: 1fr; gap: 28px; }
  .portrait-img { max-width: 320px; }
  .service { grid-template-columns: 56px minmax(0, 1fr); }
  .service .ask { grid-column: 2; }
  .section { padding-block: 64px; }
}
@media (max-width: 560px) {
  .wall, .tapes, .credits, .contact-list { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
}
@media (forced-colors: active) { .cover::before { forced-color-adjust: none; } }

/* a11y-menu.css: styles for the accessibility menu and the modes it switches on.
   Uses the site's tokens: --bg, --surface, --cream, --muted, --mustard, --line, --font-body. */
html { scroll-padding-bottom: 96px; }
.yn-a11y-btn {
  /* 44px and close to the corner: on wide screens it sits in the margin, clear of the text column */
  position: fixed; z-index: 60; bottom: 10px; inset-inline-start: 8px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--cream); color: #3B0F2A; border: 2px solid var(--bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.yn-a11y-btn:hover { background: #fff; }
.yn-a11y-btn svg { width: 24px; height: 24px; }
.yn-a11y-panel {
  width: min(92vw, 400px); max-height: min(88vh, 640px); overflow: auto;
  padding: 20px; border: 2px solid var(--cream); border-radius: 10px;
  background: var(--surface); color: var(--cream); font-family: var(--font-body);
}
.yn-a11y-panel::backdrop { background: rgba(0, 0, 0, .6); }
.yn-a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.yn-a11y-head h2 { margin: 0; font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; }
.yn-a11y-panel button, .yn-a11y-foot a {
  font: inherit; font-size: 15px; font-weight: 500; min-height: 44px; padding: 8px 14px;
  color: var(--cream); background: transparent; border: 1.5px solid var(--cream); border-radius: 8px; cursor: pointer;
}
.yn-a11y-panel button:hover { background: rgba(242, 227, 198, .14); }
.yn-a11y-panel button[aria-pressed="true"] { background: var(--cream); color: var(--bg); }
.yn-a11y-panel button[aria-pressed="true"]::before { content: "✓ "; }
.yn-a11y-panel button:disabled { opacity: .55; cursor: not-allowed; }
.yn-a11y-size { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.yn-a11y-label { width: 100%; color: var(--muted); font-size: 14px; }
.yn-a11y-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.yn-a11y-toggle { text-align: start; }
.yn-a11y-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.yn-a11y-foot a { display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; border-color: transparent; }
.yn-a11y-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.yn-a11y-status { margin: 6px 0 0; min-height: 1.4em; color: var(--mustard); font-size: 14px; }
@media (max-width: 360px) { .yn-a11y-grid { grid-template-columns: 1fr; } }
@media print { .yn-a11y { display: none; } }

/* text size: zoom the page content, not the menu */
html.yn-zoom :is(body > header, body > .stripes, body > main, body > footer) { zoom: var(--yn-zoom); }

/* high contrast: black, white and yellow, no textures */
html.yn-contrast {
  --bg: #000; --surface: #000; --surface-2: #000; --burgundy: #000; --crimson: #000;
  --cream: #fff; --muted: #fff; --mustard: #ffd84d; --burnt: #ffd84d; --line: #fff;
}
html.yn-contrast body { background: #000; }
html.yn-contrast body::after, html.yn-contrast .rays { display: none; }
html.yn-contrast .hero, html.yn-contrast .contact, html.yn-contrast .section { background: #000 !important; }
html.yn-contrast .flair { color: #ffd84d; }
html.yn-contrast .sticker { background: #fff; color: #000; }
html.yn-contrast .btn-primary { color: #000; }
html.yn-contrast .sleeve-photo figcaption { color: #000; }
html.yn-contrast .sleeve, html.yn-contrast .tape, html.yn-contrast .contact-list li { border-color: #fff; }
html.yn-contrast .yn-a11y-btn { background: #ffd84d; color: #000; border-color: #000; }

/* readable font: plain sans-serif everywhere */
html.yn-font { --font-display: var(--font-body); --font-flair: var(--font-body); }
html.yn-font h1, html.yn-font h2, html.yn-font h3, html.yn-font .sticker, html.yn-font .tape-band, html.yn-font .brand { font-weight: 700; letter-spacing: 0; }

/* highlight links */
html.yn-links a:not(.yn-a11y-btn) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px; }
html.yn-links a:not(.yn-a11y-btn):not(.skip-link) { outline: 1px dashed currentColor; outline-offset: 2px; }

/* text spacing (WCAG 1.4.12 values) */
html.yn-spacing body * { line-height: 1.5 !important; letter-spacing: .12em !important; word-spacing: .16em !important; }
html.yn-spacing p { margin-bottom: 2em !important; }

/* stop animations and transitions */
html.yn-still *, html.yn-still *::before, html.yn-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.yn-links a:focus-visible { outline: 3px solid var(--cream) !important; outline-offset: 3px; }

/* high contrast for the redesign tokens and classes */
html.yn-contrast { --paper: #000; --ink-muted: #fff; --red: #ffd84d; --red-ink: #ffd84d; }
html.yn-contrast .paper { color: #fff; }
html.yn-contrast .paper .credit, html.yn-contrast .paper .services { border-color: #fff; }
html.yn-contrast .service { border-color: #fff; }
html.yn-contrast .service .ask { color: #fff; }
html.yn-contrast .paper a:focus-visible, html.yn-contrast .paper button:focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px #000; }
html.yn-contrast .ticker, html.yn-contrast .record, html.yn-contrast .tape { background: #000; }
html.yn-contrast .cover { background: #000 !important; color: #fff !important; border-bottom: 1px solid #fff; }
html.yn-contrast .cover::before, html.yn-contrast .poster-photo::after { display: none; }
html.yn-contrast .cover-type { background: #000 !important; }
html.yn-contrast .band-art { background: #000; border: 1px solid #fff; }
html.yn-contrast .btn-primary { color: #000; }
html.yn-contrast .tape-play::after { border-left-color: #000; }
/* redesign tokens */

/* real record covers on the wall */
.cover-img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.record > .rec-cover { position: relative; flex: none; }
.cover-img--wide { aspect-ratio: 460 / 215; }
.wall > li.featured { grid-column: 1 / -1; }
.featured .record { flex-direction: row; }
.featured .record { flex-wrap: wrap; }
.featured .rec-cover { width: min(42%, 420px); }
.featured .cover-img { border-bottom: 0; border-inline-end: 1px solid var(--line); }
.featured .record-body { flex: 1 1 0; min-width: 0; }
.featured .record-body { justify-content: center; padding: clamp(18px, 3vw, 40px); }
.featured .record-body h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
@media (max-width: 640px) {
  .featured .record { flex-direction: column; }
  .featured .rec-cover { width: 100%; }
  .featured .cover-img { border-inline-end: 0; border-bottom: 1px solid var(--line); }
}

/* bands: show group photos whole, not cropped to a portrait */
.band { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@media (max-width: 820px) { .band { grid-template-columns: 1fr; } .band-photo { max-width: 100%; } }
.band-photo { aspect-ratio: auto; max-height: 560px; object-fit: cover; object-position: 50% 30%; border: 1px solid var(--line); }
.band-photo--tall { max-height: 520px; }

/* listening room */

/* live videos, inside the listening room */
.listen-video { margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); }
.listen-sub { margin: 0 0 18px; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; }
[lang="he"] .listen-sub { font-weight: 700; }

/* phones: shorter page. Records become compact rows (cover beside the text), photos go two by two */
/* compact rows only when there is room: not on the narrowest screens, and not with enlarged text */
@media (min-width: 340px) and (max-width: 560px) {
  html:not(.yn-zoom) .wall > li:not(.featured) > .record { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  html:not(.yn-zoom) .wall > li:not(.featured) > .record > .rec-cover { width: 108px; height: 108px; align-self: flex-start; }
  html:not(.yn-zoom) .wall > li:not(.featured) > .record > .rec-cover > .cover-img { width: 108px; height: 108px; aspect-ratio: 1; border-bottom: 0; border-inline-end: 1px solid var(--line); }
  html:not(.yn-zoom) .wall > li:not(.featured) .record-body { flex: 1 1 0; }
  html:not(.yn-zoom) .wall .play-badge { inset-block-end: 6px; inset-inline-start: 6px; padding: 4px 8px; }
  html:not(.yn-zoom) .wall > li:not(.featured) .record-body { padding: 12px 14px; min-width: 0; }
  html:not(.yn-zoom) .wall > li:not(.featured) .record-body h3 { font-size: 1.15rem; }
  .wall > li:not(.featured) .chip { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .wall > li:not(.featured) .record-meta, .wall > li:not(.featured) .record-note { overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  .wall { gap: 12px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .gallery figcaption { font-size: 13px; overflow-wrap: anywhere; }
}

/* phones: give the hero photo its own height instead of relying on aspect-ratio of a grid item
   (older iOS Safari collapsed it to 0 high) */
@media (max-width: 820px) {
  .poster-photo { aspect-ratio: auto; height: auto; }
  .poster-photo img { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.2; min-height: 320px; object-fit: cover; }
}

/* motion, round 7: calm, time-based reveals instead of effects scrubbed to the scroll position.
   js/motion.js adds .motion-ok on <html> (only with IntersectionObserver and no reduced-motion preference)
   and .rv / .is-in on blocks as they come into view. Without it, or with "stop animations", everything is simply shown. */
.scroll-progress { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* opening: the hero settles in once, on load */
  .poster-photo img { animation: yn-hero-in 1.6s cubic-bezier(.16, .84, .3, 1) both; }
  @keyframes yn-hero-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
  .poster-text > * { animation: yn-up .9s cubic-bezier(.16, .84, .3, 1) both; }
  .poster-text > :nth-child(1) { animation-delay: .15s; }
  .poster-text > :nth-child(2) { animation-delay: .25s; }
  .poster-text > :nth-child(3) { animation-delay: .4s; }
  .poster-text > :nth-child(4) { animation-delay: .5s; }
  .poster-text > :nth-child(5) { animation-delay: .6s; }
  @keyframes yn-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  @supports (animation-timeline: scroll()) {
    .scroll-progress { display: block; position: fixed; inset: 0 0 auto; height: 2px; z-index: 50; pointer-events: none;
      background: linear-gradient(90deg, var(--crimson), var(--red), var(--mustard)); transform-origin: 0 50%;
      animation: yn-progress linear both; animation-timeline: scroll(root); }
    [dir="rtl"] .scroll-progress { transform-origin: 100% 50%; }
    @keyframes yn-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    /* a gentle parallax on the hero photo only (translate, so it stacks with the opening scale) */
    .poster-photo img { animation: yn-hero-in 1.6s cubic-bezier(.16, .84, .3, 1) both, yn-parallax linear both;
      animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    @keyframes yn-parallax { from { translate: 0 0; } to { translate: 0 4%; } }
  }
}
html.motion-ok:not(.yn-still) .rv { opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .9s cubic-bezier(.16, .84, .3, 1) var(--rv-delay, 0ms), transform 1.1s cubic-bezier(.16, .84, .3, 1) var(--rv-delay, 0ms); }
html.motion-ok:not(.yn-still) .rv.is-in { opacity: 1; transform: none; }
/* section titles rise out of a mask, like type on a poster */
html.motion-ok:not(.yn-still) .section-head.rv { opacity: 1; transform: none; }
html.motion-ok:not(.yn-still) .section-head.rv h2 { clip-path: inset(-.1em 0 100% 0); transform: translateY(.35em);
  transition: clip-path 1s cubic-bezier(.16, .84, .3, 1), transform 1s cubic-bezier(.16, .84, .3, 1); }
html.motion-ok:not(.yn-still) .section-head.rv.is-in h2 { clip-path: inset(-.1em 0 -.2em 0); transform: none; }
html.motion-ok:not(.yn-still) .section-head.rv .label, html.motion-ok:not(.yn-still) .section-head.rv .section-sub { opacity: 0; transition: opacity .8s ease .25s; }
html.motion-ok:not(.yn-still) .section-head.rv.is-in .label, html.motion-ok:not(.yn-still) .section-head.rv.is-in .section-sub { opacity: 1; }
/* band photos open slowly from the centre */
html.motion-ok:not(.yn-still) .band.rv .band-photo { clip-path: inset(6% 6% 6% 6%); transition: clip-path 1.4s cubic-bezier(.16, .84, .3, 1) .1s; }
html.motion-ok:not(.yn-still) .band.rv.is-in .band-photo { clip-path: inset(0 0 0 0); }
@media print { html.motion-ok .rv, html.motion-ok .rv * { opacity: 1 !important; transform: none !important; clip-path: none !important; } }
html.yn-contrast .scroll-progress { background: #fff; }

/* records: press Listen on a cover, the official player opens inside the card */
.play { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.play:focus-visible { outline-offset: -6px; }
.play-badge { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  background: var(--red); color: var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
/* the play triangle points right in both languages, like on any player */
.play-icon { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid currentColor; }
.play:hover .play-badge { background: var(--cream); }
.play[aria-expanded="true"] .play-badge { background: var(--mustard); }
.play[aria-expanded="true"] .play-icon { border: 0; width: 9px; height: 9px; background: currentColor; }
.player { flex: 1 0 100%; padding: 0 18px 18px; }
.player iframe { display: block; width: 100%; border: 0; background: var(--bg); }
.player-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.wall > li.is-playing .record { border-color: var(--mustard); }
html.yn-contrast .play-badge { background: #ffd84d; color: #000; }
html.yn-contrast .wall > li.is-playing .record { border-color: #fff; }

/* videos: YouTube thumbnail cards (images hosted on the site, nothing loads from YouTube until a click) */
.tapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tape { padding: 0; padding-inline-start: 0; gap: 0; overflow: hidden; }
.tape-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg); border-bottom: 1px solid var(--line); }
.tape-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tape .tape-play { inset: 0; margin: auto; width: 56px; height: 56px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.tape .tape-play::after { top: 18px; left: 22px; border-top-width: 10px; border-bottom-width: 10px; border-left-width: 16px; }
.tape:hover .tape-play { background: var(--cream); }
.tape-text { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
@media (max-width: 1000px) { .tapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .tapes { grid-template-columns: 1fr; gap: 12px; }
  html:not(.yn-zoom) .tape { flex-direction: row; align-items: stretch; }
  html:not(.yn-zoom) .tape-thumb { flex: none; width: 42%; aspect-ratio: 16 / 9; align-self: flex-start; border-bottom: 0; border-inline-end: 1px solid var(--line); }
  html:not(.yn-zoom) .tape .tape-play { width: 40px; height: 40px; }
  html:not(.yn-zoom) .tape .tape-play::after { top: 12px; left: 16px; border-top-width: 8px; border-bottom-width: 8px; border-left-width: 12px; }
  html:not(.yn-zoom) .tape-text { padding: 10px 12px; min-width: 0; }
  .tape-title { font-size: 1.02rem; }
}
html.yn-contrast .tape-thumb { border-color: #fff; }

/* round 6 */
.cover-img--face { object-position: 50% 61%; }
.cover-ph { display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, var(--bg) 0 9%, #E8762A 9.5% 62%, #C4512D 62.5% 100%); border-bottom: 1px solid var(--line); }
.cover-ph span { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--ink); background: var(--cream); padding: 4px 12px; transform: rotate(-4deg); }
@media (min-width: 340px) and (max-width: 560px) {
  html:not(.yn-zoom) .wall > li:not(.featured) > .record > .rec-cover > .cover-ph { width: 108px; height: 108px; border-bottom: 0; border-inline-end: 1px solid var(--line); }
  html:not(.yn-zoom) .wall .cover-ph span { font-size: 1rem; padding: 2px 6px; }
}
html.yn-contrast .cover-ph { background: #000; }
.band-photos { display: grid; gap: 12px; align-content: start; }
.credit li.more { font-style: italic; color: var(--ink-muted); }
.player-note a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
/* small childhood snapshot in the bio, like a print tucked into the liner notes */
.bio-snap { float: inline-end; width: min(240px, 42%); margin: 4px 0 16px; margin-inline-start: 24px; padding: 8px 8px 6px; background: var(--cream); transform: rotate(2deg); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.bio-snap img { display: block; width: 100%; height: auto; }
.bio-snap figcaption { margin-top: 6px; font-family: var(--font-serif); font-size: 13px; line-height: 1.35; color: var(--ink); }
@media (max-width: 560px) { .bio-snap { float: none; width: min(260px, 80%); margin: 0 auto 18px; } }
html.yn-still .bio-snap, html.yn-spacing .bio-snap { transform: none; }
html.yn-contrast .bio-snap { background: #fff; }
html.yn-contrast .bio-snap figcaption { color: #000; }
/* round 7: red Alma Madre press photo closes the band text */
.band-photo--wide { margin: 4px 0 18px; width: 100%; max-height: none; aspect-ratio: 1492 / 640; object-position: 50% 50%; max-width: 100%; }
@media (max-width: 820px) { .band-photo.band-photo--wide { max-width: 100%; } }

/* round 8 hero: Yonatan cut out of the original photo (img/hero-cut.webp, transparent; cut with tools/cut_hero.py,
   graded with tools/vintage.py option A "70s print": warm, faded plum blacks, creamy highlights, film grain).
   Behind him one soft warm light, placed behind the shoulder and the guitar head so the black headstock
   reads against it. No beams, no colour rim: kept quiet on purpose. */
.poster { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
@media (max-width: 820px) { .poster { grid-template-columns: 1fr; } }
.poster-photo--epic { background: var(--bg); isolation: isolate; }
.poster-photo--epic img { z-index: 2; object-fit: contain; object-position: 30% 100%; }
[dir="rtl"] .poster-photo--epic img { object-position: 70% 100%; }
.poster-photo--epic .stage { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(46% 38% at 58% 34%, rgba(196, 120, 82, .30), rgba(139, 30, 45, .12) 55%, transparent 78%),
    linear-gradient(to bottom, transparent 55%, rgba(20, 10, 14, .6)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
[dir="rtl"] .poster-photo--epic .stage { background:
    radial-gradient(46% 38% at 46% 34%, rgba(196, 120, 82, .30), rgba(139, 30, 45, .12) 55%, transparent 78%),
    linear-gradient(to bottom, transparent 55%, rgba(20, 10, 14, .6)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
html.yn-contrast .poster-photo--epic .stage { display: none; }
.poster-photo--epic::after { z-index: 3; }
/* one film layer over him AND the background, so they read as one photograph: shared grain, a soft dark
   vignette at the edges and a faint haze of the page colour */
.poster-photo--epic .film { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(75% 70% at 50% 40%, transparent 55%, rgba(20, 10, 14, .55) 100%),
    linear-gradient(rgba(20, 10, 14, .08), rgba(20, 10, 14, .08)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
html.yn-contrast .poster-photo--epic .film { display: none; }
.poster-photo--epic figcaption { z-index: 4; }
@media (max-width: 820px) {
  .poster-photo--epic img { object-position: 50% 0; padding-inline: 4% 8%; box-sizing: border-box; }
  [dir="rtl"] .poster-photo--epic img { padding-inline: 8% 4%; }
}

/* navigation, round 8: a sticky section bar, the current section marked, a Menu button on phones,
   and a "Top" link. Sticky only when nav.js runs, and never with enlarged text or on short screens,
   so it can't cover content at high zoom (WCAG 1.4.10, 2.4.11). */
html.nav-js { scroll-padding-top: calc(var(--head-h, 64px) + 12px); }
.site-head { background: var(--bg); position: relative; z-index: 40; }
.site-head .nav { border-bottom: 0; }
.site-head { border-bottom: 1px solid var(--line); }
html.nav-js .site-head { position: sticky; top: env(safe-area-inset-top, 0px); background: rgba(20, 10, 14, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html.nav-js body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: var(--bg); }
html.nav-js .site-head .nav { padding-block: 12px; }
.nav-links a[aria-current] { border-bottom-color: var(--mustard); color: var(--mustard); }
.nav-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px; border: 1.5px solid var(--cream); border-radius: 999px; background: transparent; color: var(--cream);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.nav-toggle::before { content: ""; width: 16px; height: 10px; border-block: 2px solid currentColor; box-shadow: inset 0 4px 0 -2px currentColor; }
.nav-toggle[aria-expanded="true"] { background: var(--cream); color: var(--ink); }
.nav-toggle:focus-visible, .to-top:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
@media (max-width: 820px) {
  html.nav-js .site-head .nav { flex-wrap: nowrap; position: static; }
  html.nav-js .nav-links { display: none; }
  html.nav-js.nav-open .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; inset-inline: 0; padding-block: 8px 20px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0, 0, 0, .5); max-height: calc(100vh - var(--head-h, 64px)); overflow: auto; }
  html.nav-js.nav-open .nav-links a { text-align: start; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
  html.nav-js.nav-open .nav-links a[aria-current] { border-bottom-color: var(--line); }
  html.nav-js.nav-open .nav-links .lang-toggle { align-self: flex-start; margin-top: 14px; border-bottom: 1.5px solid var(--cream); }
}
/* enlarged text, short screens: back to a normal header, links always shown */
html.nav-js.yn-zoom .site-head { position: relative; top: auto; }
@media (max-height: 480px) { html.nav-js .site-head { position: relative; top: auto; } }
html.nav-js.yn-zoom .nav-toggle { display: none; }
html.nav-js.yn-zoom .site-head .nav { flex-wrap: wrap; position: relative; }
html.nav-js.yn-zoom .nav-links { display: flex !important; position: static !important; flex-direction: row; flex-wrap: wrap; box-shadow: none; padding: 0; border: 0; }

.to-top { position: fixed; z-index: 55; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); inset-inline-end: calc(10px + env(safe-area-inset-right, 0px));
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--cream);
  background: rgba(20, 10, 14, .9); color: var(--cream); text-decoration: none; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.to-top:hover { background: var(--cream); color: var(--ink); }
html.yn-contrast .to-top, html.yn-contrast .nav-toggle { background: #000; color: #fff; border-color: #fff; }
html.yn-contrast .site-head { background: #000; }
@media print { .site-head, .to-top { position: static; } .to-top { display: none; } }
[lang="he"] .nav-toggle, [lang="he"] .to-top { letter-spacing: 0; font-family: var(--font-body); font-size: 15px; }
.nav-toggle[hidden], .to-top[hidden] { display: none !important; }

/* Yonatino band card: 4:5 frame, head near the top and more of him and the guitar (same idea as the record-wall cover) */
.band-photo--tall { aspect-ratio: 4 / 5; max-height: none; object-position: 50% 58%; }

/* round 8d: sink him further into the scene. The edges of the picture dissolve (he fades toward the text
   side and toward the floor), his blacks are lifted to the page colour, and the warm light sits partly
   over him as well as behind him. */
.poster-photo--epic img {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%), linear-gradient(to right, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 62%, transparent 98%), linear-gradient(to right, transparent 0%, #000 22%);
  mask-composite: intersect; opacity: .94; }
[dir="rtl"] .poster-photo--epic img {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%), linear-gradient(to left, transparent 0%, #000 22%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 98%), linear-gradient(to left, transparent 0%, #000 22%); }
.poster-photo--epic .film { background:
    radial-gradient(42% 34% at 58% 30%, rgba(196, 120, 82, .10), transparent 70%),
    radial-gradient(70% 66% at 52% 38%, transparent 50%, rgba(20, 10, 14, .7) 100%),
    linear-gradient(rgba(20, 10, 14, .12), rgba(20, 10, 14, .12)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@media (max-width: 820px) {
  .poster-photo--epic img, [dir="rtl"] .poster-photo--epic img {
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
}

/* round 8e (research-led): the key light in the photo comes from the upper left (it lights his hair on that side),
   so the warm glow now sits behind the head on that side instead of behind the right shoulder, and a soft stage
   haze hangs in that light. The background is fitted to the photo, not the other way round. */
.poster-photo--epic .stage { background:
    radial-gradient(34% 30% at 36% 16%, rgba(214, 140, 92, .34), rgba(139, 30, 45, .12) 60%, transparent 80%),
    radial-gradient(60% 22% at 30% 8%, rgba(242, 227, 198, .06), transparent 70%),
    radial-gradient(55% 40% at 62% 40%, rgba(139, 30, 45, .10), transparent 75%),
    linear-gradient(to bottom, transparent 55%, rgba(20, 10, 14, .6)); }
[dir="rtl"] .poster-photo--epic .stage { background:
    radial-gradient(34% 30% at 26% 16%, rgba(214, 140, 92, .34), rgba(139, 30, 45, .12) 60%, transparent 80%),
    radial-gradient(60% 22% at 20% 8%, rgba(242, 227, 198, .06), transparent 70%),
    radial-gradient(55% 40% at 52% 40%, rgba(139, 30, 45, .10), transparent 75%),
    linear-gradient(to bottom, transparent 55%, rgba(20, 10, 14, .6)); }
.poster-photo--epic .film { background:
    radial-gradient(30% 26% at 36% 14%, rgba(214, 140, 92, .10), transparent 70%),
    radial-gradient(70% 66% at 52% 38%, transparent 50%, rgba(20, 10, 14, .7) 100%),
    linear-gradient(rgba(20, 10, 14, .12), rgba(20, 10, 14, .12)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
[dir="rtl"] .poster-photo--epic .film { background:
    radial-gradient(30% 26% at 26% 14%, rgba(214, 140, 92, .10), transparent 70%),
    radial-gradient(70% 66% at 42% 38%, transparent 50%, rgba(20, 10, 14, .7) 100%),
    linear-gradient(rgba(20, 10, 14, .12), rgba(20, 10, 14, .12)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@media (max-width: 820px) {
  .poster-photo--epic .stage, [dir="rtl"] .poster-photo--epic .stage { background:
    radial-gradient(40% 30% at 40% 18%, rgba(214, 140, 92, .32), rgba(139, 30, 45, .12) 60%, transparent 80%),
    linear-gradient(to bottom, transparent 55%, rgba(20, 10, 14, .6)); }
}

/* photo credits on band photos: small label in the corner, same style as the opening photo */
.band-fig { position: relative; margin: 0; min-width: 0; }
.band-fig figcaption { position: absolute; bottom: 10px; inset-inline-end: 10px; z-index: 2; padding: 2px 8px; background: rgba(20, 10, 14, .85); color: var(--cream);
  font-family: var(--font-serif); font-weight: 500; font-size: 13.5px; line-height: 1.5; }
.record-note .by { color: var(--mustard); }
html.yn-contrast .band-fig figcaption { background: #000; color: #fff; }
.band-fig--wide { margin: 4px 0 18px; }
.band-fig--wide .band-photo--wide { margin: 0; }

/* opening photo credit: no box over the picture; small, quiet text in the faded area at the bottom */
.poster-photo--epic figcaption, [dir="rtl"] .poster-photo--epic figcaption { top: auto; bottom: 10px; inset-inline-end: 12px; padding: 0; background: none;
  font-size: 12px; color: var(--cream); text-shadow: 0 1px 6px rgba(20, 10, 14, .9); }
.poster-photo--epic figcaption .by { color: inherit; }
@media (max-width: 820px) { .poster-photo--epic figcaption, [dir="rtl"] .poster-photo--epic figcaption { top: 8px; bottom: auto; } }
html.yn-contrast .poster-photo--epic figcaption { color: #fff; background: #000; padding: 2px 6px; }

/* bio photo: the original colour version of the opening photo, with its credit under it */
.portrait-fig { margin: 0; min-width: 0; }
.portrait-fig .portrait-img { object-position: 50% 22%; }
.portrait-fig figcaption { margin-top: 8px; font-family: var(--font-serif); font-weight: 500; font-size: 13.5px; color: var(--muted); text-align: end; }
@media (max-width: 820px) { .portrait-fig { max-width: 320px; } .portrait-fig .portrait-img { max-width: 100%; } }
/* opening photo credit: always the physical bottom right corner, clear of the figure */
.poster-photo--epic figcaption, [dir="rtl"] .poster-photo--epic figcaption { inset-inline-start: auto; inset-inline-end: auto; left: auto; right: 12px; bottom: 10px; top: auto; }
@media (max-width: 820px) { .poster-photo--epic figcaption, [dir="rtl"] .poster-photo--epic figcaption { top: 8px; bottom: auto; right: 10px; } }
/* with no lead paragraph the name and buttons sit closer together */
.poster-text .cta { margin-top: 14px; }
/* round 8h: the credit sits in its own strip under the photo, never on the picture */
.poster-photo--epic img { inset: 0 0 30px 0; height: calc(100% - 30px); }
.poster-photo--epic figcaption, [dir="rtl"] .poster-photo--epic figcaption { bottom: 6px; top: auto; text-shadow: none; color: var(--muted); }
@media (max-width: 820px) {
  .poster-photo--epic { padding-bottom: 26px; }
  .poster-photo--epic img { height: auto; }
  .poster-photo--epic figcaption, [dir="rtl"] .poster-photo--epic figcaption { top: auto; bottom: 4px; right: 10px; }
  .poster-photo--epic + .poster-text, .poster-text { margin-top: 4px; }
}
/* round 8i: hero in the style of Yonatan's reference: muted, almost monochrome, light falling from the face down
   (graded cutout tools/hero-cut-graded-reference.png). No coloured glow; he comes out of the dark on his own. */
.poster-photo--epic .stage, [dir="rtl"] .poster-photo--epic .stage { background: radial-gradient(40% 32% at 40% 18%, rgba(242, 227, 198, .05), transparent 75%); }
.poster-photo--epic .film, [dir="rtl"] .poster-photo--epic .film { background: radial-gradient(70% 66% at 50% 38%, transparent 50%, rgba(20, 10, 14, .75) 100%); }
@media (max-width: 820px) { .poster-photo--epic .stage, [dir="rtl"] .poster-photo--epic .stage { background: radial-gradient(45% 32% at 45% 18%, rgba(242, 227, 198, .05), transparent 75%); } }

/* round 8j: liquid light behind the opening photo. A nod to the oil-and-water light shows of 60s psychedelic gigs:
   soft blobs in the site's coral, wine and mustard drift and morph very slowly at low opacity behind him (he stays
   on top). Pure CSS, no script. Standing still with reduced motion or "stop animations", hidden in high contrast. */
.poster-photo--epic .stage::before, .poster-photo--epic .stage::after { content: ""; position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: screen; filter: blur(34px) saturate(1.3); }
.poster-photo--epic .stage::before { opacity: .4;
  background:
    radial-gradient(22% 18% at 30% 30%, #E8674A, transparent 70%),
    radial-gradient(26% 22% at 68% 42%, #8B1E2D, transparent 70%),
    radial-gradient(18% 24% at 46% 70%, #D9A441, transparent 70%);
  animation: yn-liquid-a 11s ease-in-out infinite alternate, yn-hue 8s ease-in-out infinite alternate; }
.poster-photo--epic .stage::after { opacity: .32;
  background:
    radial-gradient(20% 16% at 62% 22%, #B24A7A, transparent 70%),
    radial-gradient(24% 20% at 26% 60%, #E8674A, transparent 70%),
    radial-gradient(16% 20% at 74% 74%, #8B1E2D, transparent 70%);
  animation: yn-liquid-b 14s ease-in-out infinite alternate, yn-hue 10s ease-in-out -4s infinite alternate; }
@keyframes yn-liquid-a { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 33% { transform: translate(9%, -6%) rotate(50deg) scale(1.18); } 66% { transform: translate(-8%, 7%) rotate(-30deg) scale(.9); } 100% { transform: translate(6%, 9%) rotate(80deg) scale(1.12); } }
@keyframes yn-liquid-b { 0% { transform: translate(0, 0) rotate(0deg) scale(1.05); } 50% { transform: translate(-7%, 4%) rotate(-50deg) scale(.92); } 100% { transform: translate(5%, -6%) rotate(35deg) scale(1.15); } }
@keyframes yn-hue { from { filter: blur(34px) saturate(1.3) hue-rotate(-16deg); } to { filter: blur(34px) saturate(1.3) hue-rotate(22deg); } }
@media (prefers-reduced-motion: reduce) { .poster-photo--epic .stage::before, .poster-photo--epic .stage::after { animation: none; } }
html.yn-still .poster-photo--epic .stage::before, html.yn-still .poster-photo--epic .stage::after { animation: none; }
html.yn-contrast .poster-photo--epic .stage::before, html.yn-contrast .poster-photo--epic .stage::after { display: none; }
.poster-photo--epic .stage { overflow: hidden; }

/* round 8l: 90s TV static. A fine monochrome noise that flickers in quick steps over the opening photo,
   at very low opacity, with the faintest scan lines. Still (but kept) with reduced motion or "stop animations",
   hidden in high contrast. */
.poster-photo--epic .film::after { content: ""; position: absolute; inset: -50%; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='3' intercept='-1'/><feFuncG type='linear' slope='3' intercept='-1'/><feFuncB type='linear' slope='3' intercept='-1'/><feFuncA type='linear' slope='0' intercept='1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>"), repeating-linear-gradient(to bottom, rgba(242, 227, 198, .18) 0 1px, transparent 1px 3px);
  background-size: 180px 180px, 100% 3px;
  opacity: .06; mix-blend-mode: screen; animation: yn-static .5s steps(6) infinite; }
@keyframes yn-static {
  0% { transform: translate(0, 0); } 17% { transform: translate(-7%, 4%); } 33% { transform: translate(5%, -6%); }
  50% { transform: translate(-3%, 8%); } 67% { transform: translate(8%, 2%); } 83% { transform: translate(-6%, -5%); } 100% { transform: translate(2%, 6%); } }
@media (prefers-reduced-motion: reduce) { .poster-photo--epic .film::after { animation: none; } }
html.yn-still .poster-photo--epic .film::after { animation: none; }
html.yn-contrast .poster-photo--epic .film::after { display: none; }

/* round 9: shorter page. Long lists show the first items and a "show all" button (js/site.js) */
[data-collapse] > .beyond { display: none !important; }
.show-more-wrap { display: flex; justify-content: center; margin-top: 28px; }
.show-more { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 28px; border: 2px solid var(--cream); border-radius: 999px; background: transparent; color: var(--cream);
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.show-more:hover { background: var(--cream); color: var(--ink); }
.show-more:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
[lang="he"] .show-more { letter-spacing: 0; font-family: var(--font-body); font-size: 15px; }
html.yn-contrast .show-more { background: #000; color: #fff; border-color: #fff; }
/* the role line under the name wraps as a whole, not one orphan word */
.kicker { text-wrap: balance; }
/* round 10b: record covers tilt toward the mouse with a soft light (js/tilt.js) */
.wall .rec-cover.tilt { perspective: 700px; }
.wall .rec-cover.tilt .cover-img { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.16, .84, .3, 1); transform-origin: 50% 50%; }
.wall .rec-cover.tilt.tilt--on .cover-img { transition-duration: .12s; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.wall .rec-cover.tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 244, 225, .28), transparent 55%); mix-blend-mode: soft-light; }
.wall .rec-cover.tilt.tilt--on::after { opacity: 1; }
.wall .rec-cover.tilt .play { z-index: 2; }
html.yn-still .wall .rec-cover.tilt .cover-img { transform: none; }