/*
 * The page of a poster (piano 10), from the mockup approved by the user. The first screen is the room really visible,
 * between the pill and the quick bar (on phones also the tab of the footer): title and texts, the poster as big as
 * that room allows, its looks and "Meet the characters". Phones in landscape: a normal page that scrolls.
 */
.poster-page {
  --top-space: calc(var(--pill-top) + var(--pill-h) + 12px);
  --tab-h: 0px;
  --visible: calc(100vh - var(--top-space) - var(--bar-h) - var(--tab-h));
}
@supports (height: 100dvh) { .poster-page { --visible: calc(100dvh - var(--top-space) - var(--bar-h) - var(--tab-h)); } }
@media (max-width: 899px), (pointer: coarse) and (orientation: landscape) and (max-height: 520px) { .poster-page { --tab-h: 26px; } }
.poster-page .site-main { padding-top: var(--top-space); }

/* ---------- The first screen ---------- */
.hero { height: var(--visible); min-height: 420px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 12px; padding-bottom: 12px; text-align: center; }
.hero-text { display: grid; gap: 4px; justify-items: center; }
.hero h1 { margin: 0; font-size: 1.5rem; font-weight: 400; line-height: 1.15; }
/* On a single the name leads to the page of its character (2026-10-28), underlined in the colour of the characters */
.hero h1 a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-characters); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hero h1 a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
/* The people of the credits and the interpreters lead to their pages in the cast (2026-10-29), underlined in its colour */
.credit-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--c-cast); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.credit-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.hero .collection { display: block; font-size: 1.02rem; color: var(--c-works); text-shadow: 0 0 8px color-mix(in srgb, var(--c-works) 70%, transparent); }
[data-theme="light"] .hero .collection { text-shadow: none; }
.credits { margin: 0; color: var(--muted); font-size: .85rem; }
.credits b { font-weight: 400; color: var(--text); }
/* The page of a single: the poster it comes from, a link */
.from-poster { margin: 0; color: var(--muted); font-size: .85rem; }
.from-poster a { color: var(--c-works); text-decoration: underline; text-underline-offset: 3px; }
.about { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; }
.meta { color: var(--muted); font-size: .8rem; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 1px 9px; border: 1px solid var(--chip-c); border-radius: 999px; font-size: .74rem; box-shadow: 0 0 8px color-mix(in srgb, var(--chip-c) 45%, transparent), inset 0 0 6px color-mix(in srgb, var(--chip-c) 25%, transparent); }
[data-theme="light"] .chips li { box-shadow: none; }
.chips li:nth-child(5n+1) { --chip-c: var(--c-works); }
.chips li:nth-child(5n+2) { --chip-c: var(--c-singles); }
.chips li:nth-child(5n+3) { --chip-c: var(--c-characters); }
.chips li:nth-child(5n+4) { --chip-c: var(--c-cast); }
.chips li:nth-child(5n+5) { --chip-c: var(--c-discover); }
/* The poster: the biggest of its format (3:4 as the page opens) that fits the room left (the room is its container); a tap opens it in full screen */
.hero-art { width: 100%; height: 100%; min-height: 0; container-type: size; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: zoom-in; }
.hero-art:focus-visible { outline: 0; }
.hero-art:focus-visible .hero-frame { outline: 3px solid var(--focus); outline-offset: 5px; }
.hero-frame { position: relative; display: block; width: min(100cqw, calc(100cqh * var(--w, 3) / var(--h, 4))); aspect-ratio: var(--w, 3) / var(--h, 4); border-radius: 18px; }
.hero-frame .poster { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; transition: box-shadow .5s ease;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 110px 18px color-mix(in srgb, var(--halo, #9A5CFF) 62%, transparent); }
[data-theme="light"] .hero-frame .poster { box-shadow: 0 14px 30px rgba(27, 24, 56, .14), 0 0 40px color-mix(in srgb, var(--halo, #9A5CFF) 26%, transparent); }
.zoom-mark { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pill-bg); color: var(--text); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-actions { display: grid; justify-items: center; gap: 12px; width: 100%; }
/* Three pills under the poster (piano 10, 2026-10-24): the look, the format and the language of the poster, with
   their word, in one row; the glass and the border of the round pills; each opens a small glass panel above it */
.poster-tools { position: relative; display: flex; justify-content: center; gap: 8px; }
.tool > summary { list-style: none; cursor: pointer; }
.tool > summary::-webkit-details-marker { display: none; }
.tool > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tool-pill { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 9px; border-radius: 22px; color: var(--pill-text); font-size: .88rem; white-space: nowrap;
  background: var(--pill-bg); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--pill-shadow); }
.tool-pill:hover, .tool[open] > .tool-pill { background: linear-gradient(var(--pill-hover), var(--pill-hover)), var(--pill-bg); }
.tool-pill > * { position: relative; }
.tool-pill .dot, .tool-pill .flag { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px var(--pill-field-line); }
.tool-format { color: var(--pill-text); font-size: .88rem; letter-spacing: .02em; text-decoration: none; }
.tool-pill .tool-format { min-width: 24px; text-align: center; font-weight: 700; }
@media (max-width: 374px) { .poster-tools { gap: 6px; } .tool-pill { gap: 6px; padding: 0 11px 0 7px; font-size: .8rem; } .tool-pill .tool-format { font-size: .8rem; } }
.tool-panel { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 30; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 8px; border-radius: 24px; transform: translateX(-50%);
  background: var(--pill-bg); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--pill-shadow); color: var(--pill-text); animation: tool-in .2s ease; }
.tool-pill::before, .tool-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--pill-border); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tool-panel > * { position: relative; }
.tool-panel.is-below { top: calc(100% + 10px); bottom: auto; }
@keyframes tool-in { from { opacity: 0; transform: translate(-50%, 6px); } }
.tool-title { margin: 0 0 6px; color: var(--muted); font-size: .78rem; text-align: center; }
.tool-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tool-choices [aria-current] { box-shadow: inset 0 0 0 2px var(--pill-text); }
.looks { display: grid; gap: 4px; }
.looks a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 8px; border-radius: 999px; color: var(--pill-text); font-size: .9rem; text-decoration: none; }
.looks a:hover { background: var(--pill-hover); }
.looks a[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--pill-text); }
.looks .dot { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px var(--pill-field-line); }
@media (prefers-reduced-motion: reduce) { .tool-panel { animation: none; } }
.cta { display: inline-flex; justify-content: center; align-items: center; gap: 10px; width: min(100%, 360px); padding: 12px 22px; border: 2px solid var(--c-discover); border-radius: 999px; background: transparent; color: var(--c-discover); font: inherit; font-size: 1.02rem; letter-spacing: .02em; cursor: pointer; text-decoration: none; transition: transform .15s;
  text-shadow: 0 0 8px color-mix(in srgb, var(--c-discover) 70%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--c-discover) 80%, transparent), 0 0 24px color-mix(in srgb, var(--c-discover) 40%, transparent), inset 0 0 10px color-mix(in srgb, var(--c-discover) 30%, transparent); }
[data-theme="light"] .cta { text-shadow: none; box-shadow: none; }
.cta:active { transform: scale(.98); }
@media (min-width: 900px) { .hero h1 { font-size: 2rem; } }
/* Phones in landscape: a normal page (user's indication), the poster at its own size */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .hero { height: auto; min-height: 0; }
  .hero-art { height: auto; container-type: normal; }
  .hero-frame { width: min(70vw, 340px); }
}

/* ---------- The parts below ---------- */
.section { margin-top: 28px; }
.section h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.2rem; font-weight: 400; }
.section h2::after { content: ""; flex: 1; height: 1px; background: var(--c-works); box-shadow: 0 0 6px color-mix(in srgb, var(--c-works) 80%, transparent); }
[data-theme="light"] .section h2::after { box-shadow: none; }
.section h2:focus-visible { outline-offset: 6px; }
/* The small 3x3 of the brand beside the titles of the parts (piano 10) */
.nine { display: inline-grid; grid-template-columns: repeat(3, 6px); gap: 2px; flex: 0 0 auto; }
.nine i { width: 6px; height: 6px; border-radius: 2px; border: 1px solid var(--n); background: color-mix(in srgb, var(--n) 30%, transparent); box-shadow: 0 0 4px color-mix(in srgb, var(--n) 70%, transparent); }
[data-theme="light"] .nine i { box-shadow: none; }
.nine i:nth-child(5n+1) { --n: var(--c-works); }
.nine i:nth-child(5n+2) { --n: var(--c-cast); }
.nine i:nth-child(5n+3) { --n: var(--c-singles); }
.nine i:nth-child(5n+4) { --n: var(--c-discover); }
.nine i:nth-child(5n+5) { --n: var(--c-characters); }
.nine i:nth-child(5) { background: transparent; border-style: dashed; box-shadow: none; }

/* The 9 singles as the neon squares of the 404 (piano 10); the grid fits the visible room, so the button can bring it
   to the middle with "You may also like" readable below */
.singles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: min(760px, calc((var(--visible) - 150px) * .75)); margin: 0 auto; padding: 0; list-style: none; }
.singles li { --frame: var(--c-works); }
.singles li:nth-child(5n+2) { --frame: var(--c-cast); }
.singles li:nth-child(5n+3) { --frame: var(--c-singles); }
.singles li:nth-child(5n+4) { --frame: var(--c-discover); }
.singles li:nth-child(5n+5) { --frame: var(--c-characters); }
.singles a { display: block; width: 100%; padding: 3px; border: 2px solid var(--frame); border-radius: 10px; background: color-mix(in srgb, var(--frame) 14%, transparent); transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; box-shadow: 0 0 12px color-mix(in srgb, var(--frame) 60%, transparent); }
.singles a[href]:hover, .singles a[href]:focus-visible { transform: translateY(-3px); box-shadow: 0 0 22px color-mix(in srgb, var(--frame) 80%, transparent); }
[data-theme="light"] .singles a { box-shadow: none; background: color-mix(in srgb, var(--frame) 8%, transparent); }
/* The single shown on its page: there, switched off (2026-10-24) */
.singles a[aria-current] { opacity: .35; filter: grayscale(.6); box-shadow: none; }
.singles img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 7px; }
.singles img.is-square { object-fit: contain; background: var(--bg); }
@media (min-width: 900px) { .singles { gap: 14px; } .singles a { padding: 5px; border-radius: 12px; } }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) { .singles { max-width: 520px; } }

/* You may also like: a row that scrolls sideways */
/* The light of each poster short, full and apart (piano 10, 2026-10-24): a sharp line and 10px of light in the full
   colour, 22px between the posters, and room around the row, which cuts what goes out of it */
.more { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 42%); gap: 22px; margin: -8px -16px 0; padding: 12px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; list-style: none; }
@media (min-width: 900px) { .more { grid-auto-columns: 220px; margin: -8px -12px 0; padding: 12px; scroll-padding-inline: 12px; } }
.more li { min-width: 0; scroll-snap-align: start; }
.more a { display: grid; grid-template-columns: minmax(0, 1fr); color: var(--text); text-decoration: none; }
.more img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; box-shadow: 0 0 3px var(--halo, #9A5CFF), 0 0 10px var(--halo, #9A5CFF), 0 4px 10px rgba(0, 0, 0, .4); }
[data-theme="light"] .more img { box-shadow: 0 0 3px var(--halo, #9A5CFF), 0 0 10px var(--halo, #9A5CFF), 0 4px 10px rgba(27, 24, 56, .14); }
/* Two lines, the title and the collection, never cut (piano 10, 2026-10-24): a long one rolls like on a ring (site.css) */
.more-line { min-height: 1.35em; font-size: .85rem; line-height: 1.35; }
.more-line:first-of-type { margin-top: 8px; }
.more-collection { color: var(--muted); font-size: .78rem; }

/* ---------- Full screen: the image big, with the zoom and Close ---------- */
.viewer { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #05040F; color: #E9E8F7; }
.viewer[hidden] { display: none; }
.viewer-bar { display: flex; justify-content: center; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 12px 10px; }
.viewer-bar button { min-width: 44px; height: 40px; padding: 0 14px; border: 1px solid rgba(166, 163, 201, .45); border-radius: 999px; background: rgba(21, 18, 44, .6); color: #E9E8F7; cursor: pointer; font: inherit; font-size: 1rem; }
.viewer-bar button:hover { background: rgba(255, 255, 255, .1); }
.viewer-bar .viewer-close { margin-left: auto; }
.viewer-spacer { margin-right: auto; visibility: hidden; padding: 0 14px; }
.viewer-stage { position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; }
.viewer-stage.is-zoomed { cursor: grab; }
.viewer-stage.is-dragging { cursor: grabbing; }
.viewer-stage img { position: absolute; left: 50%; top: 50%; max-width: calc(100% - 24px); max-height: calc(100% - 12px); transform: translate(-50%, -50%); transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none; border-radius: 6px; }
.viewer-caption { margin: 0; padding: 8px 16px max(14px, env(safe-area-inset-bottom)); text-align: center; font-size: .9rem; }
.viewer-caption small { display: block; color: #A6A3C9; }
.viewer :focus-visible { outline-color: #FFEC70; }
@media (prefers-reduced-motion: reduce) { .hero-frame .poster, .cta, .singles a { transition: none; } }
/* On a single the collection of its poster under the title, never on one line with it (2026-10-31) */
.from-collection { color: var(--text); }