/* L’Orient sonore — the exhibition online. Scoped to #amar-os (.aos); uses the editorial theme's variables when present. */
.aos { --a-ink: var(--ink, #1d1d1b); --a-paper: var(--paper, #f3f1ea); --a-line: var(--line, #cfcbbf); --a-muted: var(--muted, #6b6a63);
  --a-red: #ad3e25; --a-shade: #e9e7df; --a-gold: #c9a24a; color: var(--a-ink); font-size: 16px; line-height: 1.7; position: relative; padding-bottom: 90px; }
.aos * { box-sizing: border-box; }
.aos a { color: inherit; }
.aos img, .aos video { display: block; max-width: 100%; height: auto; }
.aos video { width: 100%; aspect-ratio: 16/9; background: #000; }
.aos h2, .aos h3 { letter-spacing: -.02em; margin: 0; }
#amar-os h2, #amar-os h3 { text-transform: none !important; } /* the theme uppercases entry headings */
.aos p { margin: 0 0 .9em; max-width: 70ch; }
.aos ul, .aos ol { margin: 0; padding: 0; list-style: none; }
.aos figure { margin: 0; }
.aos figcaption, .aos .aos-small { font-size: 13px; color: var(--a-muted); margin-top: 6px; line-height: 1.5; }
.aos .aos-loading { padding: 40px 0; color: var(--a-muted); }
.aos .aos-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--a-red); margin: 0 0 8px; }
.aos .aos-arrow { display: inline-block; }
.aos[dir="rtl"] .aos-kicker { letter-spacing: 0; }
.aos .aos-lead { font-size: 18px; line-height: 1.65; max-width: 62ch; }

/* buttons */
.aos .aos-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; background: var(--a-ink); color: var(--a-paper); text-decoration: none; font-weight: 500; font-size: 15px; }
.aos .aos-btn:hover { background: var(--a-red); }
.aos .aos-link { font-size: 15px; }
.aos .aos-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.aos button.aos-play { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 8px; border: 1px solid var(--a-ink); cursor: pointer; font-size: 14px; font-weight: 500; color: var(--a-ink); background: transparent; }
.aos[dir="rtl"] button.aos-play { padding: 8px 8px 8px 16px; }
.aos button.aos-play:hover, .aos button.aos-play:focus-visible { background: var(--a-ink); color: var(--a-paper); outline: none; }
.aos button.aos-play:focus-visible { box-shadow: 0 0 0 3px var(--a-gold); }
.aos .aos-play__ring { --p: 0; width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; position: relative;
  background: conic-gradient(var(--a-red) calc(var(--p) * 360deg), transparent 0); box-shadow: inset 0 0 0 2px currentColor; }
.aos .aos-play__ring::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; transform: translateX(1px); }
.aos[dir="rtl"] .aos-play__ring::after { transform: translateX(1px); }
.aos button.aos-play.is-on .aos-play__ring::after { border: 0; width: 9px; height: 10px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); transform: none; }
.aos button.aos-play.is-on { background: var(--a-ink); color: var(--a-paper); }
.aos .aos-play--big { font-size: 16px; padding: 10px 22px 10px 10px; }
.aos .aos-play--big .aos-play__ring { width: 40px; height: 40px; flex-basis: 40px; }

/* hero */
.aos-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; padding: 30px 0 46px; border-bottom: 1px solid var(--a-line); }
.aos .aos-hero__title { font-size: clamp(44px, 6vw, 84px); line-height: 1; font-weight: 400; letter-spacing: -.04em; margin-bottom: 8px; }
.aos .aos-hero__sub { font-size: 14px; text-transform: uppercase; letter-spacing: .07em; color: var(--a-muted); margin-bottom: 20px; }
.aos[dir="rtl"] .aos-hero__sub { letter-spacing: 0; text-transform: none; font-size: 17px; }

/* part one: records */
.aos-part { padding-top: 56px; scroll-margin-top: 100px; }
.aos-part__head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px 40px; border-bottom: 1px solid var(--a-line); padding-bottom: 22px; margin-bottom: 8px; }
.aos-part__head .aos-kicker { grid-column: 1 / -1; }
.aos .aos-part__head h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; font-weight: 400; }
.aos .aos-sec { font-size: 15px; font-weight: 600; margin: 34px 0 12px; padding-top: 12px; border-top: 1px solid var(--a-line); }
.aos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 24px; }
.aos-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 16px; border-bottom: 1px solid var(--a-line); }
.aos .aos-card__link { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; text-decoration: none; align-items: start; }
.aos-card__body { display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.45; }
.aos-card__title { font-weight: 600; font-style: italic; }
.aos[dir="rtl"] .aos-card__title { font-style: normal; }
.aos-card__tr, .aos-card__meta { color: var(--a-muted); }
.aos-card__artist { margin-top: 3px; }
.aos .aos-card__link:hover .aos-card__title { text-decoration: underline; }
.aos .aos-card button.aos-play { align-self: flex-start; margin-inline-start: 90px; padding-block: 4px; min-height: 36px; font-size: 13px; }
.aos-card .aos-play__ring { width: 22px; height: 22px; flex-basis: 22px; }
.aos-card .aos-play__ring::after { border-width: 5px 0 5px 8px; }

/* discs (real label scans; the photo turns at 78 rpm while its extract plays) */
.aos-disc { display: block; border-radius: 50%; overflow: hidden; background: #111; position: relative; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.aos-disc--card { width: 76px; height: 76px; }
.aos-disc--big { width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.aos-disc img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.28); }
.aos-disc--big img { transform: scale(1.18); }
.aos-disc::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6%; height: 6%; border-radius: 50%; background: var(--a-paper); }
.aos-disc__blank { position: absolute; inset: 30%; border-radius: 50%; background: var(--a-shade); display: grid; place-items: center; text-align: center; font-size: 11px; line-height: 1.2; color: var(--a-ink); padding: 4px; }
.aos-disc.is-spinning { animation: aos-spin .77s linear infinite; }
@keyframes aos-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aos-disc.is-spinning { animation: none; } }

/* tiles */
.aos-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 50px; }
.aos .aos-tile { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border: 1px solid var(--a-line); text-decoration: none; background: var(--a-shade); min-height: 150px; }
.aos .aos-tile strong { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.aos .aos-tile span { color: var(--a-muted); font-size: 14px; }
.aos .aos-tile .aos-arrow { margin-top: auto; font-size: 20px; color: var(--a-ink); }
.aos .aos-tile:hover { background: var(--a-ink); color: var(--a-paper); }
.aos .aos-tile:hover span { color: #cfcbbf; }
.aos .aos-tile:hover .aos-arrow { color: var(--a-paper); }

/* part two: films */
.aos-films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; margin-top: 20px; }
.aos .aos-film { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; text-decoration: none; }
.aos-film__img { grid-column: 1 / -1; position: relative; display: block; overflow: hidden; }
.aos-film__img img { aspect-ratio: 16/9; object-fit: cover; width: 100%; transition: transform .3s; }
.aos .aos-film:hover .aos-film__img img { transform: scale(1.03); }
.aos-film__badge { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; background: var(--a-paper); color: var(--a-ink); font-size: 12px; padding: 4px 9px; }
.aos-film__n { color: var(--a-red); font-size: 13px; padding-top: 3px; }
.aos-film__title { font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.aos-film__place { grid-column: 2; color: var(--a-muted); font-size: 13px; }
.aos .aos-film:hover .aos-film__title { text-decoration: underline; }
.aos .aos-foot { margin-top: 50px; padding-top: 16px; border-top: 1px solid var(--a-line); font-size: 14px; max-width: none; }

/* prev / next */
.aos-pn { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-block: 1px solid var(--a-line); font-size: 14px; margin-bottom: 26px; }
.aos .aos-pn a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.aos .aos-pn a:hover { text-decoration: underline; }
.aos .aos-pn__home { font-weight: 600; }

/* record page */
.aos-rec { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.aos-rec__media { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.aos .aos-rec__disc { display: block; width: 100%; }
.aos-rec__play { min-height: 56px; width: 100%; display: flex; align-items: center; justify-content: center; }
.aos .aos-rec__media .aos-small { text-align: center; max-width: 42ch; }
/* when it plays whole on AMAR Radio (user 2026-10-12): the radio plugin's band, then the radio here or on its page */
.aos-onradio { width: 100%; }
.aos .aos-onradio .amr-band { margin: 0 0 12px; }
.aos .aos-onradio .amr-main { font-size: 17px; }
.aos-onradio__go { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 0; font-size: 14px; }
.aos .aos-onradio__go a { font-weight: 600; }
.aos .aos-rec__title { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; font-weight: 400; font-style: italic; margin-bottom: 6px; }
.aos[dir="rtl"] .aos-rec__title { font-style: normal; }
.aos .aos-rec__tr { color: var(--a-muted); font-size: 18px; margin-bottom: 6px; }
.aos .aos-rec__artist { font-size: 22px; font-weight: 500; margin: 14px 0 2px; }
.aos .aos-rec__meta { color: var(--a-muted); font-size: 14px; }
.aos .aos-rec__credit { font-style: italic; font-size: 15px; }
.aos[dir="rtl"] .aos-rec__credit { font-style: normal; }
.aos .aos-rec__note { font-size: 17px; line-height: 1.75; margin-top: 18px; }
.aos-rec__face { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: end; margin: 24px 0; }
.aos-rec__face img { width: 120px; height: 150px; object-fit: cover; object-position: 50% 20%; border: 1px solid var(--a-line); }
.aos-rec__company { border-top: 1px solid var(--a-line); padding-top: 16px; margin-top: 10px; font-size: 15px; }
.aos .aos-rec__company h3 { font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.aos .aos-note { color: var(--a-muted); font-size: 14px; text-align: center; max-width: 36ch; }

/* film page */
.aos-filmv__head { margin-bottom: 20px; }
.aos .aos-filmv__head h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; font-weight: 400; }
.aos-film-v { margin-bottom: 26px; }
.aos-film-v img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.aos-filmv__cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; }
.aos .aos-author { font-style: italic; color: var(--a-muted); }
.aos-cap { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--a-shade); font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.aos-cap strong { font-weight: 600; font-size: 15px; }
.aos-cap--more { background: transparent; border: 1px solid var(--a-line); }
.aos-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.aos-gal img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }

/* conversation / about */
.aos-page h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 400; line-height: 1.1; margin-bottom: 14px; }
.aos-two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 24px; }
.aos-two h3 { font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.aos-chapters { counter-reset: ch; }
.aos-chapters > li { counter-increment: ch; padding: 12px 0; border-bottom: 1px solid var(--a-line); }
.aos-chapters > li > strong::before { content: counter(ch, decimal-leading-zero) "  "; color: var(--a-red); font-weight: 400; }
.aos-chapters ul { margin-top: 4px; font-size: 14px; color: var(--a-muted); }
.aos-chapters ul li::before { content: "– "; }
.aos-credits li { font-size: 14px; padding: 4px 0; border-bottom: 1px solid var(--a-line); }
.aos-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); border-top: 1px solid var(--a-line); margin: 0 0 14px; }
.aos-dl dt, .aos-dl dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--a-line); font-size: 14px; }
.aos-dl dt { color: var(--a-muted); padding-inline-end: 16px; }
.aos-dl dd span { display: block; }
.aos-dl--small dt, .aos-dl--small dd { font-size: 13px; padding: 6px 0; }
.aos-box { padding: 20px 22px; border: 1px solid var(--a-line); }

/* player bar */
.aos-bar { position: fixed; z-index: 60; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px;
  padding: 10px max(16px, calc((100vw - 1100px) / 2)); background: var(--a-ink); color: var(--a-paper); box-shadow: 0 -6px 20px rgba(0,0,0,.18); }
.aos-bar[hidden] { display: none; }
.aos .aos-bar button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; min-width: 44px; min-height: 44px; color: var(--a-paper); font-size: 16px; }
.aos .aos-bar button:focus-visible { box-shadow: 0 0 0 2px var(--a-gold); }
.aos .aos-bar__btn { background: var(--a-red) !important; border-radius: 50%; }
.aos-bar__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.aos-bar__kind { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #cfcbbf; }
.aos[dir="rtl"] .aos-bar__kind { letter-spacing: 0; }
.aos-bar__title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aos-bar__prog { grid-column: 1 / -1; height: 2px; background: rgba(255,255,255,.18); order: 3; }
.aos-bar__prog i { display: block; height: 100%; width: 0; background: var(--a-gold); }
.aos-bar.is-live .aos-bar__prog i { width: 100% !important; animation: aos-live 2s ease-in-out infinite; }
@keyframes aos-live { 50% { opacity: .35; } }

@media (max-width: 900px) {
  .aos-hero, .aos-rec, .aos-filmv__cols, .aos-two, .aos-part__head { grid-template-columns: 1fr; gap: 24px; }
  .aos-rec__media { position: static; }
  .aos-films { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .aos-films, .aos-tiles { grid-template-columns: 1fr; }
  .aos-grid { grid-template-columns: 1fr; }
  .aos-rec__face { grid-template-columns: 90px 1fr; }
  .aos-rec__face img { width: 90px; height: 112px; }
  .aos .aos-lead { font-size: 17px; }
  .aos-dl { grid-template-columns: 1fr; }
  .aos-dl dt { border-bottom: 0; padding-bottom: 0; }
}

#amar-os h2[tabindex="-1"]:focus { outline: none; } /* focus moved by the app on page change; no visible ring for mouse users */

/* responsive QA 2026-11-05: company names stay inside the blank card labels; no empty bands above and below the app on phones */
.aos-disc--card .aos-disc__blank { inset: 12%; padding: 2px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .aos-hero { padding-top: 0; } }
.aos { padding-bottom: 0; }
.aos:has(> .aos-bar:not([hidden])) { padding-bottom: 90px; }

/* responsive QA 2026-11-05, polish */
.aos-disc__blank { z-index: 1; }
#amar-os .aos-foot { max-width: none; }