/* Levande Klassiker website (rebrand 2026-10-22). Mobile first (390x844); desktop is an enhancement at >= 900px.
   Animations use transform/opacity only. Brand: brand/brand.yaml (palette, genre accents, fonts). */
@font-face { font-family: "Fell SC"; src: url("../fonts/IMFellEnglishSC-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fell Italic"; src: url("../fonts/IMFellFrenchCanon-Italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Caslon"; src: url("../fonts/LibreCaslonText-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caslon"; src: url("../fonts/LibreCaslonText-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --page: #140f0b; --page-2: #1d1510; --page-3: #2a1f17;
  --cream: #efe3c8; --amber: #dcb465; --gold-2: #f1d58e; --muted: #cdbfa3; --dim: rgba(200, 190, 170, .74); --faint: rgba(237, 227, 204, .12);
  --g: var(--amber);
  --spine-x: 30px; --guide-y: 32vh; --tl-pr: 34px; --zoom-top: 58px;   /* keep in sync with GUIDE in js/pages/timeline.js */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --title: "Fell SC", Georgia, serif; --ital: "Fell Italic", Georgia, serif; --body: "Caslon", Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--page); color: var(--cream); -webkit-text-size-adjust: 100%; --sbw: 0px; }
/* An open modal (detail sheet, now playing, filters, reader) locks the page (js/app.js adds .locked): no page
   scrollbar beside the drawer. --sbw = the width of the classic scrollbar that goes away (0 with overlay scrollbars);
   the page and its fixed bars are padded by it so nothing jumps. (scrollbar-gutter: stable is not kept by Chrome
   when the root gets overflow: hidden, hence the padding.) */
html.locked { overflow: hidden; padding-right: var(--sbw); }
html.locked .bar { right: var(--sbw); }
html.locked .rail { right: var(--sbw); }
html.locked .era { right: calc(10px + var(--sbw)); }
html.locked .mini { right: calc(8px + var(--sbw)); }
/* drawers scroll, but without a visible scrollbar (touch, wheel and keyboard still scroll them) */
.sheet-scroll, .fs-body, .np-inner, .rd-scroll { scrollbar-width: none; }
.sheet-scroll::-webkit-scrollbar, .fs-body::-webkit-scrollbar, .np-inner::-webkit-scrollbar, .rd-scroll::-webkit-scrollbar { display: none; }
body { margin: 0; font: 17px/1.55 var(--body); min-height: 100vh; overflow-x: hidden; }
a { color: var(--amber); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* paper grain + vignette (static, painted once) */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body::before { opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body::after { background: radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
main, header, footer { position: relative; z-index: 1; }

/* ---------- top bar ---------- */
.bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px calc(14px); background: linear-gradient(var(--page) 30%, rgba(22, 19, 16, 0)); }
.bar .mark { font: 19px/1 var(--title); letter-spacing: .08em; color: var(--cream); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.bar .mark img { width: 19px; height: 26px; }
.bar nav { display: flex; gap: 4px; }
.bar nav a { font: 15px/1 var(--title); letter-spacing: .06em; color: var(--muted); text-decoration: none; padding: 9px 10px; border-radius: 99px; }
.bar nav a[aria-current="page"] { color: var(--amber); background: var(--faint); }   /* every active item amber (Cesar 2026-10-22) */
.bar nav .nav-soon { font: 15px/1 var(--title); letter-spacing: .06em; color: var(--muted); background: none; border: 0; padding: 9px 10px; border-radius: 99px; cursor: pointer; }

/* ---------- lantern glow (canvas lantern: js/lantern.js) ---------- */
.glow { position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 194, 106, .30), rgba(240, 160, 70, .10) 45%, rgba(240, 160, 70, 0) 100%);
  animation: glow 2.9s infinite; }
@keyframes glow { 0%, 100% { opacity: .95; transform: scale(1); } 22% { opacity: .78; transform: scale(.97); } 31% { opacity: .92; } 55% { opacity: .82; transform: scale(1.02); } 74% { opacity: 1; } }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 84px 24px 56px; position: relative; overflow: hidden; }
.hero-inner { will-change: transform, opacity; }
.hero-lantern { position: relative; width: 100%; height: 250px; margin: 0 auto 14px; }
.hero-lantern canvas, .hero-lantern noscript img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; }
.hero-lantern .glow { width: 560px; height: 560px; left: 50%; top: 52%; margin: -280px 0 0 -280px; opacity: 0; animation: none;
  background: radial-gradient(closest-side, rgba(240, 175, 95, .20), rgba(240, 160, 70, .07) 50%, rgba(240, 160, 70, 0)); }
.hero-dim { position: absolute; inset: 0; background: #0b0907; opacity: .55; pointer-events: none; }
.js .hero-text { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.hero.lit .hero-text { opacity: 1; transform: none; }
.hero-inner { position: relative; }
.hero h1 { margin: 0; font: 400 clamp(38px, 11vw, 76px)/1 var(--title); letter-spacing: .09em; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px auto; color: var(--amber); }
.ornament::before, .ornament::after { content: ""; height: 1px; width: 64px; background: linear-gradient(90deg, transparent, rgba(237, 227, 204, .55)); }
.ornament::after { transform: scaleX(-1); }
.ornament i { width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); }
.tagline { margin: 0; font: clamp(21px, 5.6vw, 30px)/1.25 var(--ital); color: var(--muted); }
.hero-intro { max-width: 30ch; margin: 22px auto 0; color: var(--dim); font-size: 16px; text-wrap: balance; }
.cta { display: flex; gap: 10px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 99px; border: 1px solid rgba(237, 227, 204, .28);
  color: var(--cream); background: rgba(237, 227, 204, .04); text-decoration: none; font: 16px/1 var(--title); letter-spacing: .05em; cursor: pointer; }
.btn.primary { background: var(--amber); color: #1b1610; border-color: var(--amber); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: transparent; }
.btn svg, .round svg { width: 18px; height: 18px; flex: none; }
.play-btn { padding-left: 14px; }
.scroll-cue { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; font: 13px var(--title); letter-spacing: .2em; color: var(--dim); display: grid; justify-items: center; gap: 6px; }
/* phones (Cesar 2026-10-22): room under the Tidslinjen/Lyssna buttons so the cue is never covered */
.scroll-cue::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--amber), transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.flake { position: absolute; top: -10px; width: 3px; height: 3px; border-radius: 50%; background: #dfe8f2; opacity: 0; animation: snow linear infinite; }
@keyframes snow { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: .5; } 90% { opacity: .35; } 100% { transform: translate3d(var(--dx, 20px), 105svh, 0); opacity: 0; } }

/* ---------- timeline ---------- */
.timeline { --tl-gap: 26px; position: relative; padding: 24px var(--tl-pr) 40px calc(var(--spine-x) + 26px); max-width: 760px; margin: 0 auto; }
.timeline::before { content: ""; position: absolute; left: var(--spine-x); top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(237, 227, 204, .22) 60px, rgba(237, 227, 204, .22) calc(100% - 120px), transparent); }
.spine-lit { position: absolute; left: calc(var(--spine-x) - 1px); top: 0; width: 3px; height: 100%; transform-origin: top; transform: scaleY(var(--p, 0));
  background: linear-gradient(rgba(240, 194, 106, 0), rgba(240, 194, 106, .9) 40px); border-radius: 2px; box-shadow: 0 0 10px rgba(240, 194, 106, .5); }
.section-title { font: 400 14px/1.2 var(--title); letter-spacing: .2em; color: var(--muted); margin: 18px 0 8px; position: relative; }
.section-title small { font: 13px/1.2 var(--ital); letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.week { font: 400 19px/1.2 var(--title); letter-spacing: .04em; margin: 26px 0 2px; position: relative; }
.week small { font: 14px/1.2 var(--ital); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.week { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.week small { margin-left: 0; }
.week .badge { align-self: center; }
.badge.tent { color: var(--dim); border-style: dashed; font-size: 12px; }

/* anchors land below the sticky bar, never under it */
.timeline :is(.week, .now, .later, .section-title) { scroll-margin-top: calc(var(--zoom-top) + 14px); }

.more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin: 8px 0 0; padding: 9px 22px; border-radius: 8px; border: 1px solid rgba(240, 194, 106, .35);
  background: var(--page); color: var(--amber, #f0c26a); font: 15px/1.2 var(--ital); cursor: pointer; position: relative; z-index: 1; }
.more-btn:hover { background: rgba(240, 194, 106, .08); }
.more-btn:focus-visible { outline: 2px solid var(--amber, #f0c26a); outline-offset: 2px; }
.more-btn .pw-chev { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.later { margin-top: 30px; }
.later .entry { opacity: 1; }
.wk-chip { font-size: 12px; }

/* compact row: line 1 title + chip, line 2 author · year · form · length; genre = coloured left edge */
.entry { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t c" "m c"; align-items: center; column-gap: 10px;
  min-height: 52px; margin: 0 0 5px; padding: 6px 10px 6px 12px; border: 1px solid rgba(237, 227, 204, .1); border-left: 3px solid var(--g); border-radius: 3px 10px 10px 3px;
  background: rgba(33, 28, 23, .9); opacity: 0; transition: opacity .35s ease-out; }
.entry.is-in { opacity: 1; }
.entry::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; border-radius: inherit;
  background: radial-gradient(120% 140% at 0% 50%, rgba(240, 194, 106, .13), transparent 60%); }
.entry .node { position: absolute; left: calc(-3px - var(--tl-gap) + .5px); translate: -50% 0; top: 12.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 3px var(--page); }
.card-title { grid-area: t; margin: 0; font: 400 17px/1.2 var(--title); color: var(--muted); transition: color .5s; min-width: 0;
  overflow-wrap: anywhere; text-wrap: balance; }   /* titles wrap (2 lines on phones), never an ellipsis */
a.open { all: unset; cursor: pointer; }
a.open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
a.open:focus-visible::after { outline: 2px solid var(--amber); outline-offset: 2px; }
.row-chip { grid-area: c; align-self: center; position: relative; z-index: 1; pointer-events: none; display: flex; align-items: center; }
.card-meta { grid-area: m; margin: 1px 0 0; font: 14px/1.25 var(--ital); color: var(--muted); min-width: 0; text-wrap: balance; }
.card-meta .mp { white-space: nowrap; }
.row-play { pointer-events: auto; position: relative; width: 36px; height: 36px; margin: 0; border-radius: 50%; border: 0; background: var(--amber); color: #1b1610; display: grid; place-items: center; cursor: pointer; padding: 0; }
.row-play::after { content: ""; position: absolute; inset: -5px; }       /* 46px touch target */
.row-play svg { width: 18px; height: 18px; margin-left: 2px; }
.card-kicker { display: flex; gap: 8px; align-items: center; font: 13px/1.2 var(--title); letter-spacing: .12em; color: var(--g); }
.entry.is-lit::before { opacity: 1; }
.entry.is-lit .card-title { color: var(--cream); }
.entry.released { border-color: rgba(240, 194, 106, .3); border-left-color: var(--g); }
.entry.planned .node { background: var(--page); border: 1.5px solid var(--g); width: 9px; height: 9px; top: 11.5px; }
.entry.later .node { opacity: .7; }
/* labels in Fell SC are mostly small capitals: trim the line box to x-height..baseline (text-box, "ex") so the band
   most letters occupy is what gets centred, not the font's uneven ascent/descent (an initial capital rises above it) */
.badge { display: inline-block; font: 12px/1 var(--title); letter-spacing: .08em; padding: 6.5px 7px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap;
  text-box: trim-both ex alphabetic; }
/* browsers without text-box (Firefox): IM Fell's ink sits ~1.5 px high in its line box at line-height 1 */
@supports not (text-box: trim-both ex alphabetic) { .badge { padding: 4px 7px 3px; } }
.row-chip .badge { color: var(--muted); border-color: rgba(237, 227, 204, .3); }
.badge.live { color: var(--amber); }
/* three public states (Cesar 2026-10-17): Inspelad · Manus klart · Planerad */
.badge.st-voiced, .row-chip .badge.st-voiced { color: var(--amber); border-color: currentColor; }
.badge.st-scripted, .row-chip .badge.st-scripted { color: #9fc7b0; border-color: currentColor; border-style: solid; }
.badge.st-planned, .row-chip .badge.st-planned { color: var(--dim); border-color: rgba(237, 227, 204, .22); border-style: dashed; }
.state-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 18px; font-size: 13px; color: var(--muted); }
.state-key .badge { margin-left: 6px; }
.state-key .badge:first-child { margin-left: 0; }
.wp-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.badge.dashed { color: #e88f7a; border-style: dashed; }
[data-needs][hidden] { display: none !important; }   /* optional features (fillPlaceholders) */


/* the "nu" marker */
.now { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 22px 0 6px; padding: 6px 0; }
.now::before { content: ""; position: absolute; left: calc(-26px - var(--spine-x) + 4px); right: -16px; top: 23px; height: 1px;
  background: linear-gradient(90deg, rgba(240, 194, 106, .9), rgba(240, 194, 106, .25) 70%, transparent); }
.now-pill { position: relative; display: inline-flex; align-items: baseline; gap: 9px; background: var(--page); padding: 6px 13px 6px 11px; border-radius: 99px; border: 1px solid rgba(240, 194, 106, .7); box-shadow: 0 0 24px rgba(240, 194, 106, .25); }
.now-pill b { font: 400 20px/1 var(--title); letter-spacing: .14em; color: var(--amber); }
.now-pill span { font: 14px/1 var(--ital); color: var(--muted); }
.future-note { position: relative; color: var(--muted); font: 13px/1.3 var(--ital); }

/* the spine flame (fixed at the guide line; js/flame.js draws the lantern's flame sprite) */
.guide { position: fixed; z-index: 5; left: calc(var(--spine-x) - 15px); top: calc(var(--guide-y) - 29px); width: 30px; height: 43px; pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease); }
.guide canvas { display: block; position: relative; }
.guide .glow { width: 150px; height: 150px; left: 50%; top: 66%; margin: -75px 0 0 -75px; }
body.in-timeline .guide { opacity: 1; }
.era { position: fixed; z-index: 0; right: 10px; top: calc(var(--guide-y) - 64px); pointer-events: none; text-align: right; opacity: 0; transition: opacity .5s; }
body.in-timeline .era { opacity: 1; }
.era-portrait { display: none; }   /* desktop only (below); never shown or fetched on phones */
.era span { position: absolute; right: 0; top: 0; font: 400 96px/1 var(--title); letter-spacing: .02em; color: rgba(237, 227, 204, .075); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.era span::before { content: attr(data-y); }
.era span.out { opacity: 0; transform: translate3d(0, -14px, 0); }
.era span.pre { opacity: 0; transform: translate3d(0, 14px, 0); }

/* scrubbable progress rail */
.rail { position: fixed; z-index: 20; right: 0; top: 18vh; bottom: 14vh; width: 30px; touch-action: none; opacity: 0; transition: opacity .4s; }
body.in-timeline .rail { opacity: 1; }
.rail::before { content: ""; position: absolute; right: 9px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: rgba(237, 227, 204, .14); }
.rail-tick { position: absolute; right: 7px; width: 6px; height: 1px; background: rgba(237, 227, 204, .45); }
.rail-tick.now-tick { width: 10px; right: 5px; height: 2px; background: var(--amber); }
.rail-tick span { display: none; }
.rail-thumb { position: absolute; right: 5px; top: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(240, 194, 106, .8); transform: translate3d(0, var(--ty, 0), 0); }
.rail-bubble { position: absolute; right: 26px; top: 0; transform: translate3d(0, var(--ty, 0), 0); margin-top: -15px; white-space: nowrap; pointer-events: none;
  background: rgba(30, 26, 22, .96); border: 1px solid rgba(237, 227, 204, .2); border-radius: 99px; padding: 6px 12px; font: 14px/1.2 var(--title); letter-spacing: .06em; color: var(--cream); opacity: 0; transition: opacity .3s; }
/* the bubble only shows while the rail is dragged (fades ~800 ms after release); passive scrolling only lights the thumb,
   and the content keeps a right gutter (--tl-pr) that clears the rail, so nothing is covered while reading */
.rail.dragging .rail-bubble, .rail:focus-visible .rail-bubble { opacity: 1; transition-duration: .12s; }
.rail.active .rail-thumb { box-shadow: 0 0 14px rgba(240, 194, 106, 1); }

/* end of timeline + wish */
.ending { text-align: center; padding: 30px 8px 0; color: var(--dim); font: 18px/1.5 var(--ital); }
.panel { max-width: 760px; margin: 28px auto; padding: 0 16px; }
.panel > div { border: 1px solid rgba(237, 227, 204, .16); border-radius: 14px; padding: 22px 20px; background: rgba(30, 26, 22, .8); }
.panel h2 { font: 400 26px/1.1 var(--title); margin: 0 0 8px; letter-spacing: .03em; }
.panel p { margin: 8px 0; color: var(--muted); }
.small { font-size: 14px; color: var(--dim); }
footer.foot { max-width: 760px; margin: 0 auto; padding: 28px 16px 48px; color: var(--dim); font-size: 14px; text-align: center; }
footer.foot nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; font: 15px var(--title); letter-spacing: .06em; }
footer.foot nav a, footer.foot nav span { color: var(--muted); text-decoration: none; }

/* ---------- detail sheet ---------- */
dialog.sheet { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 90svh; padding: 0; border: 0; border-radius: 18px 18px 0 0;
  background: #1f1a15; color: var(--cream); box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); overflow: hidden; }
dialog.sheet[open] { animation: sheet-in .42s var(--ease); }
dialog.sheet.closing { animation: sheet-out .26s ease-in forwards; }
dialog.sheet::backdrop { background: rgba(8, 6, 4, .66); }
@keyframes sheet-in { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
@keyframes sheet-out { to { transform: translate3d(0, 100%, 0); } }
.sheet-scroll { max-height: 90svh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px 28px; border-top: 3px solid var(--g); }
.sheet-handle { width: 42px; height: 4px; border-radius: 4px; background: rgba(237, 227, 204, .3); margin: 2px auto 12px; }
.sheet-close { position: absolute; right: 10px; top: 19px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(237, 227, 204, .2); background: rgba(22, 19, 16, .7); cursor: pointer; font-size: 20px; line-height: 1; }
.sheet-close svg { width: 20px; height: 20px; }
.sheet h2 { font: 400 32px/1.08 var(--title); margin: 8px 44px 6px 0; }
.sheet .by { font: 20px/1.3 var(--ital); color: var(--muted); margin: 0 0 14px; }
.sheet dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0; font-size: 16px; }
.sheet dt { font: 14px/1.5 var(--title); letter-spacing: .1em; color: var(--dim); }
.sheet dd { margin: 0; color: var(--cream); }
.sheet .status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted); }
.blurb { margin: 18px 0 6px; max-width: 62ch; }
.blurb p { margin: 0 0 6px; font-size: 17px; line-height: 1.55; color: var(--cream); }
.blurb.excerpt { margin-inline: 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--g); }
.blurb.excerpt figcaption { font: 13px/1.4 var(--title); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; }
.blurb.excerpt blockquote { margin: 0; font: 18px/1.55 var(--ital); color: var(--cream); }
.sponsor { margin: 20px 0 10px; border: 1px dashed rgba(240, 194, 106, .45); border-radius: 12px; padding: 16px; background: rgba(240, 194, 106, .05); }
.sponsor h3 { margin: 0 0 6px; font: 400 21px/1.2 var(--title); color: var(--amber); letter-spacing: .03em; }
.sponsor p { margin: 6px 0; color: var(--muted); font-size: 16px; }
.sponsor .swish { color: var(--cream); }
.sponsor code { font-family: var(--body); background: rgba(237, 227, 204, .08); padding: 1px 6px; border-radius: 4px; }
.copy { margin-top: 6px; padding: 7px 12px; font-size: 14px; }
.legal { font-size: 13px; color: var(--dim); margin-top: 16px; }

/* ---------- listen page ---------- */
.page-head { max-width: 760px; margin: 0 auto; padding: 76px 16px 2px; }
.page-head h1 { font: 400 40px/1 var(--title); margin: 0 0 6px; letter-spacing: .05em; }
.page-head p { margin: 0; color: var(--dim); font: 18px/1.4 var(--ital); }
/* sticky bar: search + Filter (n); active filters and author suggestions appear under it */
.lbar { position: sticky; top: 52px; z-index: 10; max-width: 760px; margin: 0 auto; padding: 10px 16px 8px; transition: box-shadow .25s; }
/* full-bleed page colour behind the stuck bar and up under the (gradient) top bar, so rows never show through */
.lbar::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--page); }
main:not(.lbar-stuck) .lbar::before { opacity: 0; }
main.lbar-stuck .lbar::before { top: -52px; }
main.facets-away .lbar::before { box-shadow: 0 1px 0 rgba(237, 227, 204, .1), 0 10px 18px -8px rgba(0, 0, 0, .6); }
.lbar-row { display: flex; gap: 8px; align-items: stretch; }
.search-wrap { position: relative; flex: 1; min-width: 0; margin: 0; }
.search-wrap svg { position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--dim); pointer-events: none; }
.search { width: 100%; height: 46px; font: 17px var(--body); color: var(--cream); background: var(--page-2); border: 1px solid rgba(237, 227, 204, .2); border-radius: 12px; padding: 0 12px; }
.search-wrap .search { padding-left: 40px; }
.search::placeholder { color: var(--dim); }
.search:focus { outline: none; border-color: rgba(240, 194, 106, .7); }
.fbtn { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 13px; border-radius: 12px; border: 1px solid rgba(237, 227, 204, .2);
  background: var(--page-2); color: var(--cream); font: 15px/1 var(--title); letter-spacing: .06em; cursor: pointer; }
.fbtn svg { width: 20px; height: 20px; flex: none; }
.fbtn > span { text-box: trim-both ex alphabetic; }
.fbtn b[hidden] { display: none; }
.fbtn b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--amber); color: #1b1610; font: 600 12px/1 var(--body); text-box: normal; }
.fbtn.on { border-color: rgba(240, 194, 106, .6); }

/* chip rows: one horizontally scrolling row per group (fades at the right edge to show there is more) */
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.suggest, .active-f { padding-top: 8px; margin-right: -16px; padding-right: 16px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.suggest::after, .active-f::after { content: ""; flex: none; width: 12px; }
.facets { max-width: 760px; margin: 0 auto; padding: 2px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.frow { min-width: 0; }
.frow .chips { padding: 0 16px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.frow .chips::after { content: ""; flex: none; width: 16px; }
.flabel { flex: none; align-self: center; margin-right: 2px; font: 12px/1 var(--title); letter-spacing: .08em; color: var(--dim); text-box: trim-both ex alphabetic; }

/* a chip: fixed height, flex-centred; the label spans are trimmed to x-height..baseline (text-box, see .badge) */
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid rgba(237, 227, 204, .22); background: transparent;
  border-radius: 99px; font: 15px/1 var(--title); letter-spacing: .05em; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.chip > span { text-box: trim-both ex alphabetic; }
.chip > .n { text-box: trim-both cap alphabetic; }   /* Caslon lining figures: centre them on their cap height */
.chip .n { font: 13px/1 var(--body); letter-spacing: 0; color: var(--dim); font-variant-numeric: tabular-nums; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--g); flex: none; }
.chip svg { width: 15px; height: 15px; flex: none; margin-right: -3px; }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--cream); color: #1b1610; border-color: var(--cream); }
.chip[aria-pressed="true"] .n { color: rgba(27, 22, 16, .62); }
.chip:disabled { opacity: .35; cursor: default; }
.chip.seg { padding: 0 14px; }
.chip.more { border-style: dashed; }
.chip.x { padding: 0 10px 0 12px; height: 32px; font-size: 14px; }
.chip.clear { height: 32px; border-color: transparent; color: var(--amber); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.chip.sugg { height: 32px; font-size: 14px; border-color: rgba(240, 194, 106, .45); color: var(--cream); }
.chip.sugg .plus { color: var(--amber); font: 17px/1 var(--body); }
@media (hover: hover) { .chip:not(:disabled):not([aria-pressed="true"]):not([aria-checked="true"]):hover { border-color: rgba(237, 227, 204, .5); color: var(--cream); } }

.rhead { max-width: 760px; margin: 0 auto; padding: 10px 16px 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.count { font: 15px/1.2 var(--ital); color: var(--dim); margin: 0; }
.sort { display: inline-flex; align-items: center; gap: 6px; font: 13px/1 var(--title); letter-spacing: .08em; color: var(--dim); }
.sort select { font: 15px var(--body); color: var(--cream); background: var(--page-2); border: 1px solid rgba(237, 227, 204, .2); border-radius: 10px; height: 36px; padding: 0 8px; }

/* filter sheet + all-authors sheet (bottom sheets on phones, centred panels on desktop) */
dialog.fsheet { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 88svh; padding: 0; border: 0; border-radius: 18px 18px 0 0;
  background: var(--page-2); color: var(--cream); display: none; flex-direction: column; box-shadow: 0 -10px 40px rgba(0, 0, 0, .6); }
dialog.fsheet[open] { display: flex; animation: sheet-in .36s var(--ease); }
dialog.fsheet::backdrop { background: rgba(8, 6, 4, .66); }
.fs-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px 18px; }
.fs-head h2 { margin: 0; font: 400 24px/1 var(--title); letter-spacing: .05em; text-box: trim-both cap alphabetic; }
.fs-close { border-color: transparent; background: none; color: var(--muted); }
.fs-body { overflow-y: auto; padding: 4px 18px 12px; overscroll-behavior: contain; }
.fgroup { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.fgroup legend { padding: 0; margin: 0 0 8px; font: 13px/1 var(--title); letter-spacing: .12em; color: var(--dim); }
.fs-foot { display: flex; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(237, 227, 204, .1); }
.fs-foot .btn { justify-content: center; }
.fs-foot .btn.primary { flex: 1; }
.as-search { padding: 4px 18px 8px; }
.as-list { display: grid; gap: 2px; min-height: 40svh; }
.arow { display: grid; grid-template-columns: 24px 34px 1fr auto; align-items: center; gap: 10px; min-height: 50px; padding: 0 4px; border-bottom: 1px solid rgba(237, 227, 204, .07); cursor: pointer; }
.arow input { width: 20px; height: 20px; margin: 0; accent-color: var(--amber); }
.arow .ini { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--page-3); border: 1px solid rgba(237, 227, 204, .16); font: 13px/1 var(--title); letter-spacing: .04em; color: var(--muted); }
.arow .an { font: 17px/1.2 var(--body); }
.arow .n { font: 14px var(--body); color: var(--dim); font-variant-numeric: tabular-nums; }
.arow.zero { opacity: .4; cursor: default; }
.empty.small { font-size: 16px; padding: 20px 0; }
.results { max-width: 760px; margin: 0 auto; padding: 2px 16px 40px; display: grid; gap: 5px; }
.results .entry { opacity: 1; margin: 0; }
.empty { text-align: center; color: var(--dim); font: 18px var(--ital); padding: 40px 0; }

@media (max-width: 420px) {
  .bar { padding-left: 12px; padding-right: 8px; }
  .bar .mark { font-size: 16px; gap: 6px; letter-spacing: .05em; }
  .bar nav { gap: 0; }
  .bar nav a, .bar nav .nav-soon { font-size: 14px; padding: 8px 7px; letter-spacing: .03em; }
}

/* ---------- player: mini (sticky) + now playing ---------- */
body.has-player { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
body.has-player .rail { bottom: calc(14vh + 40px); }
.mini { position: fixed; z-index: 40; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px;
  background: rgb(36, 30, 25); border: 1px solid rgba(237, 227, 204, .16); border-radius: 14px; padding: 10px 8px 8px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); overflow: hidden; animation: mini-in .35s var(--ease); }
@keyframes mini-in { from { transform: translate3d(0, 120%, 0); } }
.mini[hidden] { display: none; }
.mini { touch-action: none; transition: transform .22s var(--ease), opacity .22s; }
.mini.dragging { transition: none; }
.mini.leaving { transform: translate3d(0, 130%, 0) !important; opacity: 0; }
.mini-close { border-color: transparent; background: none; color: var(--muted); }
.mini-close svg { width: 20px; height: 20px; }

/* toast ("Butiken kommer snart") */
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate3d(-50%, 20px, 0); opacity: 0; pointer-events: none;
  display: grid; gap: 2px; text-align: center; min-width: 230px; padding: 12px 18px; border-radius: 14px; background: rgba(40, 33, 27, .98); border: 1px solid rgba(240, 194, 106, .45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55); transition: opacity .25s, transform .25s var(--ease); }
.toast b { font: 400 17px/1.2 var(--title); letter-spacing: .04em; color: var(--amber); }
.toast span { font: 14px/1.3 var(--ital); color: var(--muted); }
.toast.show { opacity: 1; transform: translate3d(-50%, 0, 0); }
body.has-player .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
.mini-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(237, 227, 204, .1); }
.mini-progress i { position: absolute; inset: 0; background: var(--g, var(--amber)); transform-origin: left; transform: scaleX(0); }
.mini-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 2px; cursor: pointer; text-align: left; }
.mini-open img { width: 21px; height: 29px; flex: none; }
.mini.playing .mini-open img { animation: glow 2.9s infinite; }
.mini-open span { min-width: 0; display: grid; }
.mini-title { font: 400 17px/1.2 var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-author { font: 14px/1.2 var(--ital); color: var(--dim); }
.round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(237, 227, 204, .22); background: rgba(237, 227, 204, .05); display: grid; place-items: center; cursor: pointer; color: var(--cream); flex: none; padding: 0; }
.mini-toggle { background: var(--amber); color: #1b1610; border-color: var(--amber); }
.round.big { width: 68px; height: 68px; background: var(--amber); color: #1b1610; border-color: var(--amber); }
.round.big svg { width: 30px; height: 30px; }
.round svg { width: 22px; height: 22px; }
dialog.np { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; color: var(--cream);
  background: radial-gradient(120% 70% at 50% 25%, #2a221b, #161310 70%); }
dialog.np[open] { animation: sheet-in .4s var(--ease); }
dialog.np.closing { animation: sheet-out .22s ease-in forwards; }
dialog.np::backdrop { background: rgba(8, 6, 4, .7); }
.np-inner { height: 100%; overflow-y: auto; padding: calc(10px + env(safe-area-inset-top)) clamp(14px, 5vw, 22px) calc(24px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; text-align: center; }
.np-close { position: relative; z-index: 2; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); cursor: pointer; display: block; margin: 0 auto; }
.np-close svg { width: 28px; height: 28px; }

.np-glow { position: absolute; pointer-events: none; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; opacity: .5;
  background: radial-gradient(closest-side, rgba(240, 175, 95, .22), rgba(240, 160, 70, 0)); transition: opacity .6s; }
.np.playing .np-glow { opacity: 1; animation: glow 2.9s infinite; }
.np-kicker { margin: 0; font: 13px var(--title); letter-spacing: .2em; color: var(--g, var(--amber)); }
.np-title { margin: 4px 0 2px; font: 400 32px/1.1 var(--title); }
.np-author { margin: 0 0 16px; font: 19px var(--ital); color: var(--muted); }
.np-scrub input { width: 100%; accent-color: var(--amber); height: 28px; }
.np-times { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.np-chap { font: 14px var(--ital); color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.np-controls { display: grid; justify-items: center; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: clamp(6px, 2.5vw, 18px); margin: 14px 0 18px; }
.np-speed { justify-self: start; width: 60px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 99px; border: 1px solid rgba(237, 227, 204, .22); background: none; color: var(--cream); font: 15px var(--body); cursor: pointer; }
.np-chapters { list-style: none; margin: 0; padding: 0; text-align: left; border-top: 1px solid rgba(237, 227, 204, .12); }
.np-chapters button { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; background: none; border: 0; border-bottom: 1px solid rgba(237, 227, 204, .08); color: var(--muted); font: 16px var(--body); cursor: pointer; text-align: left; }
.np-chapters button[aria-current] { color: var(--amber); }
.np-chapters time { font-size: 14px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---------- reader ---------- */
dialog.reader { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; color: var(--cream);
  background: #1a1612; --rd-size: 18px; }
dialog.reader[open] { animation: sheet-in .38s var(--ease); }
dialog.reader.closing { animation: sheet-out .22s ease-in forwards; }
.rd-bar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: linear-gradient(#1a1612 75%, rgba(26, 22, 18, 0)); }
.rd-close, .rd-size { border-color: transparent; background: none; color: var(--muted); }
.rd-size span { font: 17px/1 var(--title); }
.rd-switch { justify-self: center; display: flex; padding: 3px; border-radius: 99px; border: 1px solid rgba(237, 227, 204, .16); background: rgba(237, 227, 204, .04); }
.rd-switch[hidden] { display: none; }
.rd-switch button { min-height: 34px; min-width: 64px; padding: 0 10px; border: 0; border-radius: 99px; background: none; color: var(--muted); font: 14px/1 var(--title); letter-spacing: .06em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rd-switch button[aria-pressed="true"] { background: var(--cream); color: #1b1610; }
.rd-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(237, 227, 204, .06); }
.rd-progress i { position: absolute; inset: 0; background: var(--amber); transform-origin: left; transform: scaleX(0); }
.rd-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(68px + env(safe-area-inset-top)) 22px calc(40px + env(safe-area-inset-bottom)); }
.rd-text { max-width: 34em; margin: 0 auto; font: var(--rd-size)/1.68 var(--body); color: #e9dfc8; hyphens: auto; -webkit-hyphens: auto; }
.rd-text header { text-align: center; margin: 10px 0 26px; }
.rd-kicker { margin: 0; font: 12px var(--title); letter-spacing: .2em; color: var(--amber); }
.rd-text h1 { margin: 8px 0 4px; font: 400 34px/1.1 var(--title); letter-spacing: .04em; color: var(--cream); }
.rd-by { margin: 0; font: 19px var(--ital); color: var(--muted); }
.rd-text p { margin: 0 0 .95em; text-wrap: pretty; }
.rd-text p.first::first-line { font-variant: small-caps; letter-spacing: .03em; }
.rd-credit { margin-top: 10px; font: 14px/1.5 var(--body); color: var(--dim); text-align: center; hyphens: manual; }
.rd-credit p { margin: 0 0 6px; }
.rd-credit a { color: var(--muted); }
.cm-fab { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); min-height: 44px; padding: 0 22px; border: 0; border-radius: 99px; background: var(--amber); color: #1b1610; font: 15px/1 var(--title); letter-spacing: .06em; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); cursor: pointer; }
.cm-fab[hidden], .cm-sheet[hidden] { display: none; }
.cm-sheet { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); background: #241e18; border: 1px solid rgba(237, 227, 204, .14); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); display: grid; gap: 10px; font: 15px/1.45 var(--body); }
.cm-quote { margin: 0; color: var(--muted); font: italic 15px/1.4 var(--ital); max-height: 4.2em; overflow: hidden; }
.cm-l { display: grid; gap: 4px; color: var(--muted); font-size: 14px; }
.cm-l i { color: var(--dim); font-style: normal; }
.cm-sheet textarea, .cm-sheet input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(237, 227, 204, .2); background: #1a1612; color: var(--cream); font: 16px/1.4 var(--body); }
.cm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .cm-row { grid-template-columns: 1fr; } }
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cm-note { margin: 0; font-size: 13px; color: var(--dim); }
.cm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.cm-actions button { min-height: 44px; padding: 0 20px; border-radius: 99px; font: 15px/1 var(--title); letter-spacing: .05em; cursor: pointer; }
.cm-cancel { background: none; border: 1px solid rgba(237, 227, 204, .22); color: var(--muted); }
.cm-send { background: var(--cream); border: 0; color: #1b1610; }
.cm-send:disabled { opacity: .5; }
.cm-status { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--amber); }
.read-btn svg { width: 18px; height: 18px; }
.np-read { justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 60px; height: 36px; padding: 0; border-radius: 99px; border: 1px solid rgba(237, 227, 204, .22); background: none; color: var(--cream); font: 14px/1 var(--title); letter-spacing: .05em; cursor: pointer; }
.np-read[hidden] { display: none; }
.np-read svg { width: 17px; height: 17px; }

/* ---------- merch ---------- */
.merch-note { max-width: 760px; margin: 10px auto 4px; padding: 0 16px; color: var(--dim); font-size: 15px; }
.merch-grid { max-width: 760px; margin: 0 auto; padding: 12px 16px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.merch-card { display: grid; gap: 2px; text-align: left; background: rgba(30, 26, 22, .85); border: 1px solid rgba(237, 227, 204, .12); border-radius: 12px; padding: 0 0 12px; overflow: hidden; cursor: pointer; }
.merch-img { display: block; aspect-ratio: 1; background: #221d18; overflow: hidden; margin-bottom: 8px; }
.merch-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.merch-card:hover .merch-img img { transform: scale(1.03); }
.merch-kind { padding: 0 12px; font: 12px var(--title); letter-spacing: .14em; color: var(--amber); }
.merch-title { padding: 0 12px; font: 400 18px/1.2 var(--title); }
.merch-price { padding: 0 12px; font: 14px var(--ital); color: var(--dim); }
.merch-hero { width: 100%; height: auto; border-radius: 10px; margin: 4px 0 12px; display: block; }
.merch-desc { color: var(--muted); margin: 6px 0; }
.facts { margin: 8px 0; padding-left: 18px; color: var(--dim); font-size: 15px; }

/* ---------- desktop enhancement ---------- */
@media (min-width: 900px) {
  /* 50%, not 50vw: vw includes a classic (Windows/Linux) scrollbar, which put the fixed spine flame ~half a scrollbar
     right of the line. % in the fixed .guide resolves against the viewport without the scrollbar = the timeline's box. */
  :root { --spine-x: calc((100% - var(--sbw)) / 2 - 380px + 40px); }
  .timeline { padding-left: 76px; padding-right: 24px; --tl-gap: 36px; } :root { --tl-pr: 24px; }
  .timeline::before, .spine-lit { left: 40px; }
  .spine-lit { left: 39px; }
  .now::before { left: -36px; }
  .entry { padding: 10px 14px 10px 16px; }
  .entry .node { top: 17.5px; } .entry.planned .node { top: 16.5px; }
  .sheet-close { top: 15px; }
  .card-title { font-size: 20px; }
  .era span { font-size: 220px; }
  .era { right: 4vw; top: calc(var(--guide-y) - 130px); }
  /* the author's engraved portrait behind the year: faded, warm, soft vignette; crossfades as the reader scrolls */
  .era-portrait { display: block; position: fixed; z-index: 0; right: calc(4vw + 20px); top: calc(var(--guide-y) - 300px); width: clamp(220px, 22vw, 400px);
    aspect-ratio: 420 / 501; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
    -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); }
  body.in-timeline .era-portrait { opacity: 1; }
  .era-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: sepia(.6) brightness(.85);
    transform: translate3d(0, 14px, 0) scale(1.03); transition: opacity 1s var(--ease), transform 1.2s var(--ease); will-change: opacity, transform; }
  .era-portrait img.on { opacity: .13; transform: none; }
  html.locked .era-portrait { right: calc(4vw + 20px + var(--sbw)); }
  .rail { width: 160px; right: 8px; }
  .rail-tick span { display: block; position: absolute; right: 16px; top: -8px; white-space: nowrap; font: 12px var(--title); letter-spacing: .08em; color: var(--dim); }
  .rail-bubble { right: 30px; }
  .rail.dragging .rail-tick span { opacity: .3; }
  dialog.sheet { inset: 0; margin: auto; width: min(620px, 92vw); max-height: 86vh; border-radius: 16px; }
  dialog.sheet[open] { animation: pop-in .35s var(--ease); }
  dialog.sheet.closing { animation: pop-out .2s ease-in forwards; }
  .sheet-handle { display: none; }
  .sheet-scroll { padding: 24px 32px 32px; max-height: 86vh; }
  @keyframes pop-in { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes pop-out { to { opacity: 0; transform: translate3d(0, 12px, 0); } }
  .frow .chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0 16px; }
  .frow .chips::after { display: none; }
  .fbtn { display: none; } main.facets-away .fbtn { display: inline-flex; }
  dialog.fsheet { inset: 0; margin: auto; width: min(560px, 92vw); max-height: 80vh; border-radius: 16px; }
  dialog.fsheet[open] { animation: pop-in .3s var(--ease); }
  .merch-grid { grid-template-columns: repeat(3, 1fr); }
  .mini, html.locked .mini { left: calc((100% - var(--sbw)) / 2 - 260px); right: auto; width: 520px; }
  @keyframes mini-in { from { opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .entry { opacity: 1; }
}

/* About page ("Om oss"): one short column of prose in the page-head style */
.about { max-width: 760px; margin: 0 auto; padding: 18px 16px 8px; }
.about p { margin: 0 0 14px; color: var(--muted); }
.about .about-lede { color: var(--cream); font-size: 18px; line-height: 1.55; }
.about h2 { font: 400 22px/1.15 var(--title); letter-spacing: .04em; color: var(--amber); margin: 26px 0 8px; }
.about a { color: var(--cream); text-decoration-color: rgba(240, 194, 106, .55); text-underline-offset: 3px; }
.about .ornament { margin: 30px auto 6px; }

/* ---------- work + author pages (tools/build_web_pages.py; redesign 2026-10-13) ----------
   One column, one left edge (--wp-x) for every block; compact hero with the portrait as a faded backdrop on the right,
   so title + Spela sit in the first screen on a phone. No canvas, no lantern on these pages. */
.wp { --wp-x: 20px; max-width: 720px; margin: 0 auto; padding: 0 var(--wp-x) 96px; }
.wp-hero { position: relative; margin: 0 calc(-1 * var(--wp-x)); padding: 76px var(--wp-x) 18px; min-height: 300px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.wp-hero.no-portrait { min-height: 0; padding-top: 88px; border-bottom: 1px solid var(--faint); }
.wp-portrait { position: absolute; z-index: -1; right: -6%; top: 40px; height: calc(100% - 20px); width: auto; max-width: 72%; object-fit: cover; object-position: top;
  opacity: .42; -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 95%), linear-gradient(to top, transparent 0, #000 45%);
  mask-image: linear-gradient(to left, #000 35%, transparent 95%), linear-gradient(to top, transparent 0, #000 45%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.wp-head { position: relative; width: 100%; }
.wp-kicker { margin: 0 0 6px; font: 13px/1.3 var(--title); letter-spacing: .1em; color: var(--amber); }
.wp-hero h1 { margin: 0; font: 400 clamp(36px, 10vw, 58px)/1.02 var(--title); letter-spacing: .02em; text-wrap: balance; }
.wp-by { margin: 6px 0 0; font: 19px/1.35 var(--ital); color: var(--muted); }
.wp-by a { color: var(--cream); text-decoration-color: rgba(237, 227, 204, .35); text-underline-offset: 3px; }
.wp-by span { font: 15px var(--body); color: var(--dim); }
.wp-when { margin: 12px 0 0; font: 15px/1.3 var(--title); letter-spacing: .06em; color: var(--amber); }
.wp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wp-actions .btn { padding: 10px 15px; }
.wp-hint { margin: 12px 0 0; font-size: 14px; color: var(--dim); }
.wp-hint a { color: var(--muted); text-decoration-color: rgba(240, 194, 106, .5); text-underline-offset: 3px; }
.wp .small { font-size: 14px; color: var(--dim); }
.wp-audio { width: 100%; margin-top: 12px; }
.wp-excerpt { margin: 22px 0 0; }
.wp-excerpt p { margin: 0; font: 17px/1.6 var(--body); color: var(--cream); }
.wp-more { display: inline; } .wp-more summary { display: inline; cursor: pointer; color: var(--amber); font-size: 15px; margin-left: 6px; list-style: none; }
.wp-more summary::-webkit-details-marker { display: none; }
.wp-more[open] summary { display: none; } .wp-excerpt:has(.wp-more[open]) .wp-ell { display: none; }
.wp-facts { margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; padding: 16px 0; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.wp-facts div { min-width: 0; } .wp-facts dt { font: 11.5px/1.2 var(--title); letter-spacing: .12em; color: var(--dim); }
.wp-facts dd { margin: 3px 0 0; font-size: 15.5px; line-height: 1.35; color: var(--cream); }
.wp-facts dd a { color: var(--muted); }
.wp-box { margin: 18px 0 0; border: 1px solid var(--faint); border-radius: 12px; padding: 14px 16px; background: rgba(237, 227, 204, .025); }
.wp-chapters summary { cursor: pointer; font: 15px/1.2 var(--title); letter-spacing: .08em; list-style: none; display: flex; justify-content: space-between; }
.wp-chapters summary::-webkit-details-marker { display: none; }
.wp-chapters summary::after { content: "+"; color: var(--amber); } .wp-chapters[open] summary::after { content: "–"; }
.wp-chapters summary .small { margin-left: 6px; margin-right: auto; }
.wp-chapters ol { list-style: none; margin: 10px 0 0; padding: 0; font-size: 15.5px; }
.wp-chapters li { display: flex; gap: 12px; padding: 5px 0; border-top: 1px solid rgba(237, 227, 204, .06); }
.wp-chapters time { min-width: 3em; color: var(--dim); font-variant-numeric: tabular-nums; }
.wp-chapters li:has(.wp-chap) { padding: 0; }
.wp-chap { all: unset; box-sizing: border-box; display: flex; gap: 12px; width: 100%; padding: 8px 0; min-height: 40px; align-items: center; cursor: pointer; color: var(--cream); }
.wp-chap:hover span, .wp-chap:focus-visible span { color: var(--amber); }
.wp-chap:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
.wp-about { margin: 18px 0 0; color: var(--muted); }
.wp-about p { margin: 4px 0; font-size: 15px; line-height: 1.5; }
.wp-about p + p { font-style: italic; color: var(--cream); }
.wp-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 18px 0 0; font-size: 13px; color: var(--dim); letter-spacing: .02em; }
.wp-support { margin: 18px 0 0; }
.wp-sponsor h2 { margin: 0 0 6px; font: 400 18px/1.2 var(--title); letter-spacing: .05em; color: var(--amber); }
.wp-sponsor p { margin: 4px 0; font-size: 15.5px; color: var(--muted); }
.wp-sponsor p b { color: var(--cream); font-weight: 400; }
.wp-sponsor code { white-space: nowrap; font-family: var(--body); background: rgba(237, 227, 204, .09); padding: 1px 6px; border-radius: 4px; color: var(--cream); }
.wp-sponsor .btn { margin-top: 8px; padding: 8px 14px; font-size: 14px; }
.wp-related { margin-top: 28px; } .wp-related h2 { font: 400 16px/1.2 var(--title); letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; }
.wp-list { list-style: none; margin: 18px 0 0; padding: 0; }
.wp-related .wp-list { margin-top: 0; }
.wp-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--faint); }
.wp-list a { color: var(--cream); text-decoration: none; } .wp-list a:hover { color: var(--amber); }
.wp-list .small { white-space: nowrap; }
.wp-foot { margin-top: 28px; } .wp-foot a { color: var(--muted); }
.np-art { height: 220px; margin: 4px auto 8px; display: flex; justify-content: center; }
.np-art img { height: 100%; width: auto; opacity: .85; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); }
.np-art.typo { height: auto; margin: 26px auto 10px; }
.np-art.typo span { display: block; width: 48px; height: 1px; background: var(--amber); opacity: .6; }
.np-sponsor { text-align: center; margin: 0 0 6px; font-size: 14px; color: var(--dim); } .np-sponsor a { color: var(--muted); }
@media (min-width: 900px) {
  .wp { --wp-x: 32px; }
  .wp-hero { min-height: 380px; padding-top: 110px; }
  .wp-portrait { right: 0; max-width: 46%; opacity: .5; }
  .wp-head { max-width: 60%; }
  .wp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wp-facts .wide { grid-column: 1 / -1; }
.wp-back { position: absolute; z-index: 2; left: calc(var(--wp-x) - 10px); top: 62px; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px 8px 6px; border-radius: 99px;
  font: 14px/1 var(--title); letter-spacing: .08em; color: var(--muted); text-decoration: none; background: rgba(22, 19, 16, .55); }
.wp-back svg { width: 18px; height: 18px; } .wp-back:hover { color: var(--cream); }
.wp-hero { padding-top: 108px; } .wp-hero.no-portrait { padding-top: 108px; }
@media (min-width: 900px) { .wp-back { top: 70px; } .wp-hero { padding-top: 120px; } }
.wp-dl { margin: 10px 0 0; } .wp-dl a { color: var(--muted); text-underline-offset: 3px; }
.wp-save span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.wp-save small { font: 12px/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--dim); margin-top: 2px; }
.wp-save[aria-busy="true"] { opacity: .8; } .wp-save[aria-busy="true"] span { font-variant-numeric: tabular-nums; }
.wp-share-hint { margin: 10px 0 0; color: var(--muted) !important; }

/* Kontakt (kontakt.html) and comment page: compact cards, same palette (2026-10-14) */

.aud-btn, .about a.aud-btn { display: inline-block; padding: 8px 14px; border-radius: 99px; background: var(--amber); color: #1b1610; text-decoration: none; font-size: 15px; margin: 2px 6px 2px 0; }
.aud-btn.ghost, .about a.aud-btn.ghost { background: none; color: var(--cream); border: 1px solid rgba(237, 227, 204, .28); }

/* Contact form (kontakt.html), comment form and the work-page cast list »Röster«: Lucide-style inline SVG icons
   (.i, stroke 1.75, currentColor). */
:root { --tap: 40px; --r: 12px; }
.i { width: 18px; height: 18px; flex: none; vertical-align: -3px; }

/* optical centring: the play triangle's visual centre sits left of its box centre; nudge it right (and keep the
   stop square exactly centred). Used by every play icon on these pages. */
.i-play { transform: translateX(1px); }

/* forms */
.kform { display: grid; gap: 12px; margin: 24px 0 8px; padding: 16px; border-radius: 16px; border: 1px solid var(--faint); background: rgba(30, 26, 22, .85); scroll-margin-top: 104px; }

.row2 { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .row2 { grid-template-columns: 1fr 1fr; } }
.kform input:not([type=radio]), .kform textarea { width: 100%; min-height: 44px; font: inherit; font-size: 16px; color: var(--cream); background: var(--page); border: 1px solid rgba(237, 227, 204, .2); border-radius: 10px; padding: 10px 12px; transition: border-color .2s, box-shadow .2s; }
.kform input:focus, .kform textarea:focus { outline: none; border-color: rgba(240, 194, 106, .7); box-shadow: 0 0 0 3px rgba(240, 194, 106, .15); }
.kform textarea { resize: vertical; min-height: 112px; line-height: 1.5; }
.kform ::placeholder { color: rgba(200, 190, 170, .55); }

.dim { color: var(--dim); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aud-btn.big, .about button.aud-btn.big { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: inherit; font-size: 16px; padding: 0 22px 0 18px; border: 0; cursor: pointer; justify-self: start; margin: 0; transition: opacity .2s, transform .12s, background-color .2s; }
.aud-btn.big:not([disabled]):active { transform: scale(.97); }
.aud-btn[disabled] { opacity: .4; cursor: not-allowed; }
.rec-status { margin: 0; color: var(--amber); font-size: 14px; }
.rec-status:empty { display: none; }
.rec-done { margin: 24px 0; padding: 16px; border-radius: 16px; border: 1px solid rgba(240, 194, 106, .45); background: rgba(240, 194, 106, .07); }
.rec-done h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 400 22px/1.1 var(--title); color: var(--amber); }
.rec-done h2 .i { width: 22px; height: 22px; }
.rec-done p { margin: 0 0 6px; }
.rec-done .mock { color: #ffd59a; }
.rec-alt { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 12px 0 0; font-size: 13px; }
.about .rec-alt a { display: inline-flex; align-items: center; gap: 5px; min-height: var(--tap); color: var(--dim); text-decoration: none; }
.about .rec-alt a:hover { color: var(--cream); }
.rec-alt .i { width: 15px; height: 15px; }
.chips-r { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chips-r legend { color: var(--dim); font-size: 13px; margin-bottom: 8px; padding: 0; }
.chip-r input { position: absolute; opacity: 0; }
.chip-r span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; border-radius: 99px; border: 1px solid rgba(237, 227, 204, .22); color: var(--muted); font-size: 14px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.chip-r input:checked + span { background: var(--amber); color: #1b1610; border-color: var(--amber); }
.chip-r input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.kf { display: grid; gap: 10px; }
.kform .note { margin: 0; font-size: 12px; color: var(--dim); }
/* work page »Röster« */
.wp-voices h2 { display: flex; align-items: baseline; gap: 8px; }

.wp-voices ul { list-style: none; padding: 0; margin: 4px 0 0; }
.wp-voices li { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--faint); font-size: 15px; }
.wp-voices li:first-child { border-top: 0; }
.wp-voices li b { font-weight: 400; color: var(--cream); flex: 1; min-width: 0; line-height: 1.3; }
.vc { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 99px; white-space: nowrap; }
.vc .i { width: 14px; height: 14px; }
.vc-ai { color: var(--dim); border: 1px solid var(--faint); }
.vc-person { color: var(--amber); border: 1px solid rgba(240, 194, 106, .4); }

@media (prefers-reduced-motion: reduce) {
  .chip-r span, .aud-btn.big { transition: none; }
}
.kf[hidden], .kform[hidden], .rec-done[hidden] { display: none !important; }
/* »Villkor« disclosure: fine print hidden by default (Cesar 2026-10-14) */
details.terms { font-size: 13px; color: var(--dim); }
details.terms summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; list-style: none; text-decoration: underline; text-decoration-color: rgba(200, 190, 170, .35); text-underline-offset: 3px; }
details.terms summary::-webkit-details-marker { display: none; }
details.terms summary::after { content: "+"; font-size: 14px; text-decoration: none; }
details.terms[open] summary::after { content: "–"; }
details.terms ul { margin: 4px 0 0; padding: 0 0 0 1.1em; line-height: 1.5; }

.cm-page .about { max-width: 560px; }
.cm-quote-big { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--amber); background: rgba(237, 227, 204, .04); border-radius: 0 10px 10px 0; font: italic 17px/1.5 var(--ital); color: var(--cream); white-space: pre-wrap; }
.cm-quote-big small { font: normal 12px var(--body); color: var(--dim); }
.cm-form .cm-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.cm-form .cm-cancel { min-height: 44px; padding: 0 18px; border-radius: 99px; background: none; border: 1px solid rgba(237, 227, 204, .22); color: var(--muted); font: 15px/1 var(--title); cursor: pointer; }

/* ---------- »Manus med regi«: radio-drama script ---------- */
.rd-script { max-width: 36em; }
.rd-script .sc-help { margin: -8px auto 26px; max-width: 26em; font: 15px/1.5 var(--body); color: var(--dim); text-align: center; }
.sc-cast { margin: 0 0 30px; padding: 14px 16px; border: 1px solid rgba(237, 227, 204, .1); border-radius: 12px; background: rgba(237, 227, 204, .025); }
.sc-cast h2, .sc-sources h2 { margin: 0 0 10px; font: 400 13px/1.2 var(--title); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.sc-cast dl { margin: 0; display: grid; gap: 8px; }
.sc-cast dt { font: 600 13px/1.2 var(--body); letter-spacing: .14em; font-variant: small-caps; text-transform: lowercase; color: var(--amber); }
.sc-cast dd { margin: 1px 0 0; font: .9em/1.45 var(--body); color: var(--muted); }
.sc-body { display: grid; gap: 4px; }
.sc-c { position: relative; min-height: 44px; margin: 0 -12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; transition: background .15s, box-shadow .15s; }
.sc-c:focus-visible { box-shadow: 0 0 0 2px rgba(232, 170, 80, .6); }
@media (hover: hover) { .sc-c:hover { background: rgba(237, 227, 204, .03); } }
.sc-c.sc-on { background: rgba(232, 170, 80, .11); box-shadow: inset 3px 0 0 var(--amber); }
.sc-c p { margin: 0; }
.sc-id { position: absolute; right: 10px; top: 12px; font: 10.5px/1 var(--body); letter-spacing: .04em; color: rgba(237, 227, 204, .22); font-variant-numeric: tabular-nums; pointer-events: none; }
/* scene: a clear divider, acoustics in one short line */
.sc-scene { margin-top: 26px; margin-bottom: 6px; padding-top: 18px; padding-bottom: 12px; text-align: center; }
.sc-scene::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; border-top: 1px solid rgba(232, 170, 80, .35); }
.sc-scene h2 { margin: 0; font: 400 17px/1.3 var(--title); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.sc-scene .sc-room { margin-top: 4px; font: italic 15px/1.35 var(--ital); color: var(--dim); }
.sc-scene .sc-id { top: 20px; }
/* line: NAME (small caps, amber), the reading note above the line, the line indented */
.sc-line { padding-top: 12px; padding-bottom: 12px; }
.sc-who { padding-right: 52px; font: 600 14px/1.2 var(--body); letter-spacing: .14em; font-variant: small-caps; text-transform: lowercase; color: var(--amber); }
.sc-dir { margin-top: 3px !important; padding-left: 1.4em; font: italic .92em/1.4 var(--ital); color: var(--muted); }
.sc-t { margin-top: 4px !important; padding-left: 1.4em; }
.sc-inl { font-family: var(--ital); color: var(--muted); }
.sc-omit { color: rgba(237, 227, 204, .42); text-decoration-thickness: 1px; text-decoration-color: rgba(237, 227, 204, .45); }
.sc-omit-note { display: inline-block; margin-left: 6px; font: italic .78em/1.2 var(--ital); color: var(--dim); }
/* sound cue: slim amber bar with ▶ */
.sc-cue { display: flex; align-items: center; gap: 12px; margin-top: 6px; margin-bottom: 6px; padding-left: 14px; box-shadow: inset 2px 0 0 rgba(232, 170, 80, .65); font: italic .95em/1.4 var(--ital); color: var(--muted); }
.sc-cue.sc-on { box-shadow: inset 3px 0 0 var(--amber); }
.sc-cue p { flex: 1; padding-right: 52px; }
.sc-cue b { margin-right: 6px; font: 600 12px/1 var(--body); font-style: normal; letter-spacing: .16em; color: var(--amber); }
.sc-play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -6px 0; padding: 0; border-radius: 50%; border: 1px solid rgba(232, 170, 80, .5); background: rgba(232, 170, 80, .06); color: var(--amber); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sc-play svg { width: 16px; height: 16px; }
.sc-play .i-play { margin-left: 2px; }
.sc-play .i-pause, .sc-play.on .i-play { display: none; }
.sc-play.on .i-pause { display: block; }
.sc-play.on { background: var(--amber); color: #1b1610; }
.sc-unspoken { color: var(--dim); font-size: .92em; }
.sc-sent { display: block; margin: 6px 0 0 1.4em; font: 13px/1.3 var(--body); color: var(--amber); }
.sc-sent::before { content: "✓ "; }
.sc-flash { animation: sc-flash 2.4s ease-out; }
@keyframes sc-flash { 0% { background: rgba(232, 170, 80, .28); } 100% { background: transparent; } }
.sc-music { margin: 24px 0 0; font: italic .9em/1.5 var(--ital); color: var(--dim); text-align: center; }
.sc-sources { margin: 8px 0 20px; }
.sc-sources ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font: 14px/1.45 var(--body); color: var(--dim); }
.sc-sources a { color: var(--muted); }
.sc-src-t { color: var(--muted); }
.cm-fab { min-height: 44px; }
@media (min-width: 900px) {
  .rd-script { font-size: calc(var(--rd-size) + 1px); }
  .sc-c { margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
  .sc-scene::before { left: 18px; right: 18px; }
}
/* comment page: sound source */
.cm-src { margin: -6px 0 16px; font: 14px/1.5 var(--body); color: var(--dim); }
.cm-src a { color: var(--muted); }
.cm-src audio { display: block; width: 100%; margin-top: 8px; height: 40px; }

.sc-prose p { text-indent: 0; }
.sc-prose { color: #e9dfc8; }
.sc-stage p:not(.sc-who) { font: italic .95em/1.5 var(--ital); color: var(--muted); padding-left: 1.4em; }
.sc-stage p:not(.sc-who)::before { content: "("; } .sc-stage p:not(.sc-who)::after { content: ")"; }
.sc-verse p { padding-left: 2.2em; font-style: italic; font-family: var(--ital); white-space: pre-line; }
.sc-attr { font: italic .95em var(--ital); color: var(--muted); }
.sc-prose .sc-id, .sc-stage .sc-id, .sc-verse .sc-id { top: 12px; }
.sc-prose p, .sc-stage p, .sc-verse p { padding-right: 46px; }
/* narration under its character (Cesar 2026-10-15 14:32): same indent as a speech, name once per run */
.sc-nar > p:not(.sc-who):not(.sc-dir) { padding-left: 1.4em; }
.sc-nar.sc-cont { padding-top: 0; }
.sc-stage.sc-nar p:not(.sc-who) { padding-left: 1.4em; }
.sc-nar .sc-who + p, .sc-nar .sc-who + .sc-dir { margin-top: 0; }
/* direction pass (2026-10-15): character base in Roller, AI-draft note, per-part direction in a joined speech */
.sc-cast .sc-base { display: block; font: italic .92em/1.45 var(--ital); color: var(--muted); }
.sc-cast .sc-base::before { content: "Grundton: "; font-style: normal; color: var(--dim); }
.sc-draft { color: var(--amber, #e3b25a); }
.sc-pdir { font-size: .9em; }
/* »Manus med regi« page (/<author>/<work>/manus/, Cesar 2026-10-15): own page, förord/efterord toggle, tap to listen */
.mn { padding-top: 104px; padding-bottom: 140px; --rd-size: 18px; }
.mn .mn-back { top: 62px; }
.mn-text { max-width: 36em; }
.mn-text .rd-by a { color: inherit; text-decoration: none; }
.mn-text .sc-help { margin: -8px auto 26px; max-width: 26em; font: 15px/1.5 var(--body); color: var(--dim); text-align: center; }
.mn-hint-icon svg { width: 15px; height: 15px; vertical-align: -2px; color: var(--amber); }
.mn-switch { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -6px auto 22px; min-height: 44px; font: 15px/1.3 var(--body); color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.mn-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mn-track { position: relative; flex: none; width: 42px; height: 24px; border-radius: 99px; background: rgba(237, 227, 204, .16); transition: background .2s; }
.mn-track i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); transition: transform .2s; }
.mn-switch input:checked + .mn-track { background: var(--amber); }
.mn-switch input:checked + .mn-track i { transform: translateX(18px); background: #1b1610; }
.mn-switch input:focus-visible + .mn-track { box-shadow: 0 0 0 2px rgba(232, 170, 80, .6); }
.mn-host { margin: 6px 0 14px; padding: 4px 0 6px; border-radius: 12px; }
.mn-host-h { margin: 18px 0 6px; font: 400 15px/1.3 var(--title); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); text-align: center; }
.mn-host-note { margin: 0 auto 10px; max-width: 26em; font: italic 14px/1.45 var(--ital); color: var(--dim); text-align: center; }
.sc-hostline .sc-who { color: #cdb98f; }
.sc-frame { font-size: .9em; }
/* per-line audio: a small mark on lines that have their own file, only while »uppläsning« is on */
.sc-aud { display: none; position: absolute; right: 10px; bottom: 12px; width: 15px; height: 15px; color: rgba(232, 170, 80, .55); pointer-events: none; }
.mn-listen-on .sc-has > .sc-aud { display: block; }
.sc-playing.sc-c, .sc-part.sc-playing { background: rgba(232, 170, 80, .16); }
.sc-part.sc-playing { border-radius: 4px; box-shadow: 0 0 0 3px rgba(232, 170, 80, .16); }
.sc-c.sc-playing > .sc-aud, .sc-c:has(.sc-playing) > .sc-aud { color: var(--amber); animation: sc-pulse 1s ease-in-out infinite alternate; }
@keyframes sc-pulse { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sc-c.sc-playing > .sc-aud, .sc-c:has(.sc-playing) > .sc-aud { animation: none; } }
.mn-bar { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; pointer-events: none; }
.mn-bar > * { pointer-events: auto; }
.mn-bar .cm-fab { position: static; transform: none; }
.mn-listen { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(232, 170, 80, .5); background: #221c15; color: var(--amber); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mn-listen[aria-pressed="false"] { color: var(--dim); border-color: rgba(237, 227, 204, .2); }
.mn-listen svg { width: 22px; height: 22px; }
.mn-listen[hidden], .mn-bar .cm-fab[hidden] { display: none; }
.mn .sc-c { user-select: text; }
.cm-line-audio { display: block; width: 100%; height: 40px; margin: -6px 0 16px; }
.wp-manus { border-color: rgba(232, 170, 80, .5); }
@media (min-width: 900px) { .mn { --rd-size: 19px; } }
body:has(.mini:not([hidden])) .mn-bar { bottom: calc(86px + env(safe-area-inset-bottom)); }
.mn-hint-icon svg, .mn-hint-spk { width: 15px; height: 15px; vertical-align: -2px; color: var(--amber); }

/* ── Kontakt »Hör av dig« (Cesar 2026-10-17): lantern-lit two-column page; single column on phones ── */
.kt { position: relative; overflow: hidden; min-height: 80vh; }
.kt::before { content: ""; position: absolute; inset: -10% -20% auto; height: 620px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(240, 194, 106, .13), rgba(240, 194, 106, .04) 45%, transparent 75%); }
.kt-portrait { display: none; }
.kt-wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 84px 16px 40px; }
.kt-head { text-align: center; margin: 0 auto 28px; max-width: 620px; }
.kt-kicker { margin: 0 0 8px; font: 13px/1 var(--title); letter-spacing: .22em; color: var(--amber); opacity: .8; }
.kt-head h1 { font: 400 clamp(38px, 6vw, 56px)/1 var(--title); letter-spacing: .05em; margin: 0 0 12px; text-shadow: 0 0 28px rgba(240, 194, 106, .25); }
.kt-lede { margin: 0; color: var(--muted); font: 19px/1.5 var(--ital); }
.kt-grid { display: grid; gap: 22px; }
.kt-card { position: relative; padding: 4px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(240, 194, 106, .22), rgba(240, 194, 106, .04) 60%, rgba(240, 194, 106, .12)); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 60px -20px rgba(240, 194, 106, .18); }
.kt .kform { margin: 0; padding: 22px 20px; gap: 16px; border-radius: 4px; border: 1px solid rgba(240, 194, 106, .18);
  background: radial-gradient(ellipse at 50% 0%, rgba(240, 194, 106, .06), transparent 60%), linear-gradient(180deg, #221d18, #1a1612); }
.kt .chips-r legend, .kt-f > span { font: 13px/1 var(--title); letter-spacing: .14em; color: var(--amber); opacity: .85; text-transform: lowercase; }
.kt .chips-r legend { margin-bottom: 12px; }
.kt-f { display: grid; gap: 7px; }
.kt-f i { font: 12px var(--ital); letter-spacing: 0; color: var(--dim); text-transform: none; margin-left: 4px; }
.kt .chip-r span { border-radius: 3px; font-family: var(--title); letter-spacing: .06em; font-size: 15px; padding: 0 14px;
  background: rgba(237, 227, 204, .03); border-color: rgba(240, 194, 106, .22); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.kt .chip-r span:hover { border-color: rgba(240, 194, 106, .55); color: var(--cream); }
.kt .chip-r input:checked + span { background: linear-gradient(180deg, #f6d48a, var(--amber)); color: #1b1610; border-color: #f6d48a; box-shadow: 0 0 18px rgba(240, 194, 106, .35); }
.kt .kform input:not([type=radio]), .kt .kform textarea { border: 0; border-bottom: 1px solid rgba(240, 194, 106, .3); border-radius: 2px 2px 0 0;
  background: rgba(0, 0, 0, .22); font-family: var(--body); padding: 10px 12px; }
.kt .kform textarea { min-height: 150px; background: rgba(0, 0, 0, .22) repeating-linear-gradient(180deg, transparent 0 31px, rgba(240, 194, 106, .07) 31px 32px); line-height: 32px; padding-top: 2px; }
.kt .kform input:focus, .kt .kform textarea:focus { border-bottom-color: var(--amber); box-shadow: 0 6px 18px -10px rgba(240, 194, 106, .6); }
.kt .small { margin: 0; font-size: 14px; color: var(--muted); }
.kt-send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.kt .aud-btn.big { font-family: var(--title); letter-spacing: .08em; border-radius: 3px; background: linear-gradient(180deg, #f6d48a, var(--amber)); box-shadow: 0 0 22px rgba(240, 194, 106, .3); }
.kt .rec-done { margin: 0; padding: 30px 24px; border-radius: 4px; text-align: center; background: linear-gradient(180deg, #221d18, #1a1612); }
.kt .rec-done h2 { justify-content: center; font-size: 28px; }
.kt-side { padding: 6px 4px; color: var(--muted); }
.kt-side h2 { font: 400 26px/1.15 var(--title); letter-spacing: .04em; color: var(--amber); margin: 0 0 10px; }
.kt-side h3 { font: 400 15px/1.2 var(--title); letter-spacing: .16em; color: var(--cream); text-transform: lowercase; margin: 22px 0 8px; }
.kt-topic p { margin: 0; font-size: 17px; line-height: 1.6; }
.kt-topic[hidden] { display: none; }
.kt-orn { margin: 24px 0 4px; color: var(--amber); opacity: .55; font-size: 20px; }
.kt-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.kt-steps li { counter-increment: s; position: relative; padding: 4px 0 4px 34px; line-height: 1.5; }
.kt-steps li::before { content: counter(s, upper-roman); position: absolute; left: 0; top: 4px; width: 24px; font: 15px var(--title); color: var(--amber); text-align: center; border-bottom: 1px solid rgba(240, 194, 106, .3); }
.kt-mail { margin: 0; }
.kt-mail a { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); font-size: 17px; text-decoration: underline; text-decoration-color: rgba(240, 194, 106, .5); text-underline-offset: 4px; }
.kt-mail a:hover { color: var(--amber); }
@media (min-width: 900px) {
  .kt-wrap { padding: 110px 32px 60px; }
  .kt-head { margin-bottom: 44px; }
  .kt-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .kt .kform { padding: 30px 30px 26px; }
  .kt-side { padding-top: 28px; position: sticky; top: 90px; }
  .kt-portrait { display: block; position: absolute; z-index: 0; right: -4vw; bottom: 0; width: clamp(280px, 32vw, 520px); opacity: .07; filter: sepia(.6) brightness(.85); pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
}
/* Kontakt on phones (Cesar 2026-10-17): nothing important below Skicka; info line above the form, topic text under the chips */
.kt-phone-info { margin: -10px auto 4px; max-width: 34em; text-align: center; font: 15px/1.5 var(--ital); color: var(--muted); }
.kt-phone-info a { color: var(--cream); font-family: var(--body); white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(240, 194, 106, .55); text-underline-offset: 3px; display: inline-block; padding: 6px 0; }
.kt-mini { margin: -4px 0 0; padding: 10px 12px; border-left: 2px solid rgba(240, 194, 106, .45); background: rgba(240, 194, 106, .05); }
.kt-mini p { margin: 0; font: 15px/1.5 var(--ital); color: var(--muted); }
@media (max-width: 899px) { .kt-side { display: none; } }
@media (min-width: 900px) { .kt-phone-info, .kt-mini { display: none; } }
/* top menu on narrow phones (2026-10-17): everything on one line, no sideways scroll */
@media (max-width: 380px) {
  .bar { padding-left: 10px; padding-right: 4px; }
  .bar .mark { font-size: 14px; gap: 5px; letter-spacing: .03em; }
  .bar .mark img { width: 15px; height: 21px; }
  .bar nav a, .bar nav .nav-soon { font-size: 12.5px; padding: 8px 5px; letter-spacing: .01em; }
}
@media (max-width: 340px) {
  .bar { padding-left: 8px; padding-right: 2px; }
  .bar .mark { font-size: 12.5px; letter-spacing: .02em; }
  .bar nav a, .bar nav .nav-soon { font-size: 11.5px; padding: 8px 4px; letter-spacing: 0; }
}

/* ── Lyssna overhaul (Cesar 2026-10-17): lantern hero, »Kommer snart«, catalogue behind a button ── */
body[data-page="listen"] main { position: relative; overflow-x: clip; }
.ly-glow { position: absolute; z-index: 0; inset: 0 -20% auto; height: 640px; pointer-events: none;
  background: radial-gradient(ellipse 45% 55% at 50% 0%, rgba(240, 194, 106, .14), rgba(240, 194, 106, .04) 50%, transparent 78%); }
.ly-head { position: relative; text-align: center; max-width: 760px; padding-top: 84px; }
.ly-head h1 { font-size: clamp(40px, 6vw, 58px); text-shadow: 0 0 28px rgba(240, 194, 106, .25); }
.ly-head > p:not(.kt-kicker) { max-width: 34em; margin: 0 auto; }
.subs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 4px; }
.sub-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 3px; border: 1px solid rgba(240, 194, 106, .35);
  font: 14px/1 var(--title); letter-spacing: .07em; color: var(--cream); text-decoration: none; background: rgba(240, 194, 106, .05); }
.sub-btn:hover, .sub-btn:focus-visible { border-color: var(--amber); color: var(--amber); }
.sub-btn.small { min-height: 34px; font-size: 13px; padding: 0 11px; }
.ly-sec { position: relative; max-width: 1120px; margin: 0 auto; padding: 26px 16px 4px; }
.ly-h { font: 400 15px/1 var(--title); letter-spacing: .2em; text-transform: lowercase; color: var(--amber); margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.ly-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(240, 194, 106, .35), transparent); }
.ly-hero { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.hcard { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(240, 194, 106, .2); border-top: 2px solid var(--g);
  background: radial-gradient(ellipse at 0% 0%, rgba(240, 194, 106, .07), transparent 60%), linear-gradient(180deg, #231e19, #1a1612); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); }
.hc-art { align-self: start; aspect-ratio: 420 / 502; display: grid; place-items: center; }
.hc-art img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35); opacity: .9; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent); }
.hc-ini { font: 34px var(--title); color: var(--g); opacity: .8; }
.hc-kicker { margin: 0 0 4px; font: 12px/1 var(--title); letter-spacing: .14em; color: var(--g); }
.hcard h3 { margin: 0; font: 400 23px/1.15 var(--title); letter-spacing: .03em; }
.hcard h3 a { color: var(--cream); text-decoration: none; }
.hcard h3 a:hover { color: var(--amber); }
.hc-by { margin: 3px 0 8px; font: 15px var(--ital); color: var(--muted); }
.hc-blurb { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hc-act { display: flex; align-items: center; gap: 12px; }
.hc-play { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 18px 0 14px; border: 0; border-radius: 3px; cursor: pointer;
  font: 15px/1 var(--title); letter-spacing: .08em; color: #1b1610; background: linear-gradient(180deg, #f6d48a, var(--amber)); box-shadow: 0 0 20px rgba(240, 194, 106, .28); }
.hc-play svg { width: 18px; height: 18px; }
.hc-play.small { min-height: 36px; padding: 0 12px 0 10px; font-size: 14px; }
.hc-len { font: 14px var(--ital); color: var(--dim); }
.ly-resume { margin: 0 0 14px; padding: 12px 14px; border-radius: 4px; border: 1px solid rgba(240, 194, 106, .4); background: rgba(240, 194, 106, .07); }
.ly-res-k { margin: 0 0 6px; font: 12px/1 var(--title); letter-spacing: .16em; color: var(--amber); }
.ly-res-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ly-res-row > span:first-child { flex: 1 1 200px; } .ly-res-row i { color: var(--muted); font-size: 14px; }
.ly-res-bar { flex: 1 1 120px; height: 3px; background: rgba(237, 227, 204, .14); border-radius: 2px; overflow: hidden; }
.ly-res-bar i { display: block; height: 100%; background: var(--amber); }
.ly-strip { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); scrollbar-width: none; }
.ly-strip::-webkit-scrollbar { display: none; }
.ly-strip li { scroll-snap-align: start; }
.ly-strip a { display: grid; gap: 4px; height: 100%; padding: 12px; border-radius: 4px; border: 1px solid rgba(237, 227, 204, .12); border-left: 2px solid var(--g); background: rgba(33, 28, 23, .9); text-decoration: none; color: var(--cream); }
.ly-strip a:hover { border-color: rgba(240, 194, 106, .45); }
.ls-wk { font: 12px/1 var(--title); letter-spacing: .1em; color: var(--amber); }
.ly-strip b { font: 400 17px/1.2 var(--title); letter-spacing: .02em; }
.ly-strip i { font-size: 14px; color: var(--muted); }
.ls-st { justify-self: start; font: 12px/1 var(--title); letter-spacing: .06em; color: #9fc7b0; border: 1px solid currentColor; border-radius: 99px; padding: 4px 7px; }
.ly-cat-toggle { position: relative; text-align: center; padding: 26px 16px 8px; }
.ly-cat-toggle .btn { font-family: var(--title); letter-spacing: .08em; }
.ly-catalog[hidden] { display: none; }
.ly-cat-h { max-width: 728px; margin: 18px auto 0; padding: 0 16px; }
body[data-page="listen"] .fbtn { display: inline-flex !important; }   /* filters always behind the button now */
@media (max-width: 480px) {
  .results .entry:not(.released) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "m" "c"; row-gap: 3px; padding-top: 8px; padding-bottom: 8px; }
  .results .entry:not(.released) .row-chip { justify-self: start; }
}
@media (min-width: 700px) { .ly-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .ly-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ly-hero .hcard:first-child { grid-column: span 2; grid-template-columns: 170px minmax(0, 1fr); }
  .ly-hero .hcard:first-child h3 { font-size: 30px; }
  .ly-hero .hcard:first-child .hc-blurb { -webkit-line-clamp: 5; font-size: 16px; }
}

/* player polish */
.np-close { display: flex; align-items: center; gap: 4px; width: auto; padding: 0 12px; font: 13px var(--title); letter-spacing: .1em; }
.np-speedwrap { position: relative; justify-self: start; }
.np-speeds { position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 0; display: grid; gap: 2px; padding: 6px; border-radius: 6px; background: #241e18; border: 1px solid rgba(240, 194, 106, .3); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.np-speeds[hidden] { display: none; }
.np-speeds button { min-width: 64px; min-height: 36px; border: 0; border-radius: 4px; background: none; color: var(--cream); font: 15px var(--body); cursor: pointer; }
.np-speeds button[aria-pressed="true"] { background: var(--amber); color: #1b1610; }
.np-next { margin: 4px 0 18px; padding: 14px; border-radius: 4px; border: 1px solid rgba(240, 194, 106, .4); background: rgba(240, 194, 106, .07); }
.np-next[hidden] { display: none; }
.np-next-k { margin: 0 0 10px; font: 16px var(--ital); color: var(--muted); }
.np-next-btn { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: 3px; cursor: pointer; text-align: left; color: #1b1610; background: linear-gradient(180deg, #f6d48a, var(--amber)); }
.np-next-btn b { font: 400 18px var(--title); letter-spacing: .04em; } .np-next-btn span { font-size: 14px; }
.np-next-subs, .np-subs nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.np-subs { margin: 22px 0 6px; } .np-subs p { margin: 0; font: 12px var(--title); letter-spacing: .16em; color: var(--dim); }
@media (min-width: 900px) {
  .np-inner { max-width: 1000px; display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 56px; align-content: start; text-align: left; padding-top: 24px; }
  .np-inner > * { grid-column: 2; }
  .np-inner > .np-close { grid-column: 1 / -1; justify-self: center; }
  .np-inner > .np-art { grid-column: 1; grid-row: 2 / span 12; height: auto; align-self: start; margin-top: 30px; position: sticky; top: 20px; }
  .np-art img { width: 100%; height: auto; }
  .np-art.typo { margin-top: 60px; }
  .np-title { font-size: 40px; margin-top: 30px; }
  .np-sponsor { text-align: left; }
  .np-subs nav, .np-next-subs { justify-content: flex-start; }
}
/* sticky search bar (2026-10-17 fix): stuck state follows the bar's own sentinel; soft fade instead of a hard edge */
.lbar-sentinel { height: 1px; }
.lbar::before { background: linear-gradient(var(--page) calc(100% - 22px), rgba(22, 19, 16, 0)); bottom: -22px; transition: opacity .2s; }
main.facets-away .lbar::before { box-shadow: none; }
/* Lyssna v2 (Cesar 2026-10-17): featured carousel, slim »Kommer snart«, catalogue always visible */
.feat { position: relative; }
.feat-stage { display: grid; gap: 14px; min-height: 230px; }
.feat-stage .hcard { animation: feat-in .35s var(--ease); }
@keyframes feat-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
@media (prefers-reduced-motion: reduce) { .feat-stage .hcard { animation: none; } }
.feat-side { display: grid; gap: 14px; }
.feat-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.feat-arrow { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(240, 194, 106, .35); background: rgba(240, 194, 106, .05); color: var(--cream); cursor: pointer; }
.feat-arrow:hover, .feat-arrow:focus-visible { border-color: var(--amber); color: var(--amber); }
.feat-arrow svg { width: 20px; height: 20px; }
.feat-dots { display: flex; gap: 2px; }
.feat-dots button { width: 24px; height: 32px; border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; }
.feat-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(237, 227, 204, .3); transition: background .2s, transform .2s; }
.feat-dots button[aria-selected="true"]::before { background: var(--amber); transform: scale(1.3); box-shadow: 0 0 8px rgba(240, 194, 106, .6); }
.hcard.big .hc-blurb { -webkit-line-clamp: 4; }
.subs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: 14px; }
.subs-row > span { font: 12px/1 var(--title); letter-spacing: .16em; text-transform: lowercase; color: var(--dim); }
.subs-row .subs { margin: 0; }
.ly-soon { padding-top: 18px; }
.ly-soon .ly-strip { grid-auto-columns: minmax(150px, 1fr); gap: 8px; }
.ly-soon .ly-strip a { padding: 8px 10px; gap: 2px; }
.ly-soon .ly-strip b { font-size: 15px; }
.ly-soon .ly-strip i { font-size: 13px; }
.ly-soon .ls-st { padding: 3px 6px; margin-top: 2px; }
.ly-catalog { position: relative; }
.ly-cat-h { margin-top: 26px; }
@media (min-width: 900px) {
  .feat-stage { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: stretch; }
  .feat-stage .hcard.big { grid-template-columns: 190px minmax(0, 1fr); padding: 20px; }
  .feat-stage .hcard.big h3 { font-size: 32px; }
  .feat-stage .hcard.big .hc-blurb { font-size: 16px; -webkit-line-clamp: 5; }
  .feat-side .hcard { grid-template-columns: 70px minmax(0, 1fr); padding: 12px; }
  .feat-side .hcard h3 { font-size: 19px; }
  .feat-nav { position: absolute; right: 0; top: -46px; margin: 0; }
  .ly-now .ly-h { padding-right: 230px; }
}

/* ── Podcast badges + banner (Cesar 2026-10-17): brand-style glyphs, lantern frame ── */
.results .entry .node { display: none; }   /* no coloured dots in the Lyssna catalogue */
.pod-badge { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 6px 14px 6px 8px; border-radius: 9px; background: #0b0a09;
  border: 1px solid rgba(237, 227, 204, .28); color: #fff; text-decoration: none; transition: border-color .2s, transform .12s; }
.pod-badge:hover, .pod-badge:focus-visible { border-color: rgba(240, 194, 106, .8); }
.pod-badge:active { transform: scale(.98); }
.pod-badge .pi { width: 30px; height: 30px; flex: none; }
.pod-badge span { display: grid; line-height: 1.05; text-align: left; }
.pod-badge small { font: 11px/1.1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em; color: rgba(255, 255, 255, .78); }
.pod-badge b { font: 600 16px/1.15 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.01em; }
.pod-badge.small { min-height: 40px; padding: 4px 11px 4px 6px; gap: 7px; } .pod-badge.small .pi { width: 24px; height: 24px; } .pod-badge.small b { font-size: 14px; }
.pod-badge.tiny, .pod-badge.icon { min-height: 0; padding: 7px; border-radius: 50%; gap: 0; background: none; border-color: transparent; }
.pod-badge.tiny span, .pod-badge.icon span { display: none; }
.pod-badge.tiny .pi, .pod-badge.icon .pi { width: 26px; height: 26px; }
.pod-badge.tiny:hover, .pod-badge.icon:hover { border-color: rgba(240, 194, 106, .5); }
.hc-pods { display: inline-flex; gap: 2px; margin-left: auto; }
.foot-pod { display: flex; justify-content: center; gap: 6px; margin: 0 0 6px; }
.pod-wrap { max-width: 1120px; margin: 0 auto; padding: 18px 16px 6px; }
.pod-banner { position: relative; display: grid; gap: 14px; align-items: center; padding: 20px; border-radius: 6px; overflow: hidden; text-align: center;
  border: 1px solid rgba(240, 194, 106, .3); background: radial-gradient(ellipse 70% 120% at 0% 50%, rgba(240, 194, 106, .12), transparent 60%), linear-gradient(180deg, #221d18, #1a1612);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(240, 194, 106, .12); }
.pb-kicker { margin: 0 0 6px; font: 12px/1 var(--title); letter-spacing: .2em; color: var(--amber); }
.pod-banner h2 { margin: 0 0 6px; font: 400 clamp(22px, 3vw, 28px)/1.15 var(--title); letter-spacing: .04em; color: var(--cream); }
.pod-banner .pb-text p:last-child { margin: 0; color: var(--muted); font: 16px/1.5 var(--ital); }
.pb-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wp .pod-banner { margin: 18px 0 6px; }
@media (min-width: 760px) {
  .pod-banner { grid-template-columns: minmax(0, 1fr) auto; text-align: left; padding: 22px 26px; gap: 22px; }
  .pb-badges { justify-content: flex-end; }
  .wp .pod-banner { grid-template-columns: 1fr; text-align: center; } .wp .pb-badges { justify-content: center; }
}
.foot-pod .pb-rss { align-self: center; padding: 6px; } .foot-pod .pb-rss .pi { width: 17px; height: 17px; filter: grayscale(1); opacity: .55; } .foot-pod .pb-rss:hover .pi { opacity: .9; }
/* carousel controls (2026-10-17 fix): their own row under the cards, right-aligned on desktop; never absolute */
@media (min-width: 900px) {
  .feat-nav { position: static; justify-content: flex-end; margin-top: 12px; }
  .ly-now .ly-h { padding-right: 0; }
}

/* Swish unlock box (Cesar 2026-10-19) */
.wp-unlock { border-color: var(--amber); }
.wp-unlock h2 { margin: 0 0 6px; font: 400 18px/1.2 var(--title); letter-spacing: .05em; color: var(--amber); }
.wp-unlock p { margin: 6px 0; font-size: 15.5px; color: var(--muted); }
.wp-unlock p b { color: var(--cream); font-weight: 400; }
.wp-unlock .ul-pay { margin: 10px 0; display: grid; gap: 8px; }
.wp-unlock .ul-pay div { display: grid; grid-template-columns: 6.6em 1fr; align-items: center; gap: 6px; }
.wp-unlock .ul-pay dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.wp-unlock .ul-pay dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; font-size: 17px; color: var(--cream); }
.wp-unlock .ul-pay dd b { font-weight: 400; white-space: nowrap; }
.wp-unlock code { font-family: var(--body); background: rgba(237, 227, 204, .09); padding: 1px 6px; border-radius: 4px; }
.wp-unlock .ul-copy { font: inherit; font-size: 13px; padding: 6px 10px; min-height: 34px; flex: none; border-radius: 999px; border: 1px solid var(--faint); background: transparent; color: var(--amber); cursor: pointer; }
.sfd h2 { margin-top: 1.4em; }

/* soft paywall: locked state at the top of a locked work (Cesar 2026-10-19) */
.wp-lock { display: flex; gap: 12px; align-items: center; margin: 10px 0 12px; padding: 10px 14px; border: 1px solid rgba(232, 176, 90, .45); border-radius: 12px; background: rgba(232, 176, 90, .06); }
.wp-lock .lk-art { flex: none; width: 76px; height: 41px; color: var(--amber); }
.wp-lock p { margin: 0; }
.wp-lock .lk-t { font-size: 15.5px; line-height: 1.3; color: var(--cream); }
.wp-lock .lk-p { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.wp-lock .lk-btn { margin-top: 8px; padding: 6px 16px; font-size: 14px; }
.wp-unlock { scroll-margin-top: 70px; }

/* Cesar 2026-10-20: on phones the platform link leaves the top menu (YouTube stays in the »Lyssna där du redan lyssnar«
   badges and the footer), and the menu wraps instead of being cut off if a narrow screen still can't fit it. */
@media (max-aspect-ratio: 3/4), (max-width: 767px) {
  .bar nav .nav-yt { display: none; }
}
/* Giant works sold volume by volume (2026-10-20) */
.wp-unlock .ul-vol { border-top: 1px solid var(--faint); padding-top: 14px; margin-top: 14px; }
.wp-unlock .ul-vol h3 { font-size: 17px; margin: 0 0 4px; }
.wp-unlock .ul-vol.is-open { opacity: .8; }

/* Phones (Cesar 2026-10-20, iPhone 393 pt: Butik wrapped under the lantern). At 430 px and below the bar is two rows:
   the mark centred on top, the menu on its own full-width row under it, never wrapping (nowrap + fluid size). */
@media (max-width: 430px) {
  .bar { flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 12px; }
  .bar { background: linear-gradient(var(--page) 72%, rgba(22, 19, 16, 0)); }
  :root { --zoom-top: 82px; }
  .lbar { top: 76px; }
  .wp-unlock { scroll-margin-top: 92px; }
  .bar .mark { font-size: 16px; letter-spacing: .06em; }
  .bar nav { flex-wrap: nowrap; justify-content: center; gap: 0; max-width: 100%; white-space: nowrap; }
  .bar nav a, .bar nav .nav-soon { font-size: clamp(12.5px, 3.9vw, 15px); padding: 7px clamp(5px, 2.2vw, 10px); letter-spacing: .03em; }
  .wp-hero, .wp-hero.no-portrait { padding-top: 128px; }
  .wp-back { top: 84px; }
  .ly-head { padding-top: 104px; }
  .page-head { padding-top: 100px; }
  .mn { padding-top: 124px; }
}
@media (max-width: 360px) {   /* payment rows: label above the value at 320 px */
  .wp-unlock .ul-pay div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ── Levande Klassiker (2026-10-20): LK monogram hero, media chips, media sections ── */
.hero-logo { height: auto; margin-bottom: 18px; }
.hero-logo img { position: relative; display: block; width: clamp(120px, 34vw, 173px); height: auto; margin: 0 auto;
  filter: drop-shadow(0 0 24px rgba(220, 180, 101, .22)); opacity: 0; transform: scale(.96); transition: opacity 1.2s var(--ease), transform 1.6s var(--ease); }
.no-js .hero-logo img, .hero.lit .hero-logo img, html:not(.js) .hero-logo img { opacity: 1; transform: none; }
.hero-logo .glow { opacity: .35; }
.hero h1 { color: var(--gold-2); }
.hero-media { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; padding: 0; font: 13px/1 var(--title); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero-media span { border: 1px solid rgba(220, 180, 101, .35); border-radius: 999px; padding: 7px 12px; }
.hero-media small { font: italic 12px var(--ital); letter-spacing: 0; text-transform: none; color: var(--amber); margin-left: 3px; }
.media-tag { display: inline-block; font: 11px/1 var(--title); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(220, 180, 101, .35); border-radius: 999px; padding: 4px 8px; }
.ly-media { margin: 34px auto 8px; max-width: 800px; }
.ly-media h2 { font: 400 26px/1.1 var(--title); margin: 0 0 6px; }
.ly-media .lm-cards { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
@media (min-width: 700px) { .ly-media .lm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lm-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--faint); border-radius: 12px; background: var(--page-2); }
.lm-card .lm-art { aspect-ratio: 4 / 3; border-radius: 8px; background: radial-gradient(circle at 40% 40%, #4a3622, #1d1510); display: grid; place-items: center; }
.lm-card .lm-art img { width: 40%; height: auto; opacity: .8; }
.lm-card h3 { margin: 6px 0 4px; font: 400 19px/1.2 var(--title); }
.lm-card p { margin: 0; color: var(--dim); font-size: 15px; }
.ly-media .ly-intro { font-size: 16px; color: var(--dim); }
@media (max-width: 380px) { .lm-card { grid-template-columns: 1fr; } .lm-card .lm-art { max-height: 170px; } }

/* Målningar (Levande Klassiker, 2026-10-20) */
.pt-fig { margin: 18px 0 0; }
.pt-fig img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 8px; background: rgba(237, 227, 204, .04); }
.pt-fig figcaption { margin-top: 6px; color: var(--dim); }
.pt-fig figcaption a { color: var(--muted); }
.pt-desc h2 { margin: 22px 0 6px; font: 15px/1.3 var(--title); letter-spacing: .08em; color: var(--amber); }
.pt-desc p, .pt-what { font-size: 16.5px; line-height: 1.55; color: var(--cream); }
.pt-what { color: var(--muted); }
.pt-test { color: var(--cream); }
.pt-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.pt-card a { display: flex; flex-direction: column; gap: 4px; color: var(--cream); text-decoration: none; }
.pt-card img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 6px; background: rgba(237, 227, 204, .04); }
.pt-card a:hover .pt-t { color: var(--amber); }
.pt-t { font-size: 15px; line-height: 1.3; }
.badge.st-test { font-size: 11px; padding: 1px 6px; border: 1px solid var(--amber); border-radius: 99px; color: var(--amber); margin-left: 4px; }

/* Målningar as a Lyssna-style page (2026-10-20): the painting is the hero of every card */
body[data-page="paintings"] main { position: relative; overflow-x: clip; }
body[data-page="paintings"] .ly-sec, body[data-page="paintings"] .ly-catalog, .pt-foot { position: relative; max-width: 960px; margin: 34px auto 0; padding: 0 16px; }
.pt-card { position: relative; margin: 0; }
.pt-link { display: block; position: relative; overflow: hidden; border-radius: 12px; border: 1px solid rgba(240, 194, 106, .22); background: #1d1510; color: var(--cream); text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .4); }
.pt-art { display: block; aspect-ratio: 4 / 3; }
.pt-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease, ease); }
.pt-link:hover .pt-art img, .pt-link:focus-visible .pt-art img { transform: scale(1.04); }
.pt-link:hover, .pt-link:focus-visible { border-color: rgba(240, 194, 106, .6); }
.pt-over { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 3px; padding: 36px 12px 11px;
  background: linear-gradient(rgba(20, 15, 11, 0), rgba(20, 15, 11, .78) 38%, rgba(20, 15, 11, .94)); }
.pt-over .media-tag { justify-self: start; background: rgba(20, 15, 11, .6); margin-bottom: 4px; font-size: 10px; }
.pt-t { font: 400 17px/1.15 var(--title); letter-spacing: .02em; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.pt-m { font: 14px/1.25 var(--ital); color: var(--muted); }
.pt-len { font-size: 12.5px; color: var(--amber); letter-spacing: .02em; }
.pt-big .pt-art { aspect-ratio: 16 / 9; }
.pt-big .pt-over { padding: 70px 18px 18px; }
.pt-big .pt-t { font-size: clamp(22px, 4.6vw, 34px); }
.pt-big .pt-m { font-size: 16px; } .pt-big .pt-len { font-size: 14px; }
.pt-play { position: absolute; right: 14px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--amber); color: #1b1610; display: grid; place-items: center; cursor: pointer; }
.pt-play svg { width: 24px; height: 24px; }
.pt-note { margin: 10px 2px 0; color: var(--dim); font: 15px/1.45 var(--ital); }
.pt-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.pt-row::-webkit-scrollbar { display: none; }
.pt-row .pt-card { scroll-snap-align: start; }
.pt-row .pt-art { aspect-ratio: 3 / 4; }
.pt-chips { margin-top: 10px; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 6px; }
.pt-grid .pt-card[hidden] { display: none; }
.pt-none { color: var(--dim); }
@media (max-width: 430px) { .pt-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .pt-t { font-size: 15px; } .pt-m { font-size: 13px; } .pt-over { padding: 28px 9px 9px; } }
/* five menu items (Berättelser, Målningar, Flöde, Kontakt, Poesi; 2026-10-22): a little tighter so the row keeps a margin at 320–430 px */
@media (max-width: 430px) { .bar nav a, .bar nav .nav-soon { font-size: clamp(11.5px, 3.55vw, 15px); padding: 7px clamp(3px, 1.5vw, 9px); letter-spacing: .02em; } }
/* catalogue grid: the text sits under the painting, so the painting stays fully visible */
.pt-grid .pt-over { position: static; background: none; padding: 9px 10px 11px; }
.pt-grid .pt-over .media-tag { background: none; }
.pt-grid .pt-t { text-shadow: none; }
/* Målningar nitpicks (Cesar 2026-10-20): smaller intro, one card size, no status/length on cards, video hero */
body[data-page="paintings"] .ly-head .ly-intro { font-size: 14.5px; line-height: 1.45; margin-top: 6px; }
@media (max-width: 430px) {
  body[data-page="paintings"] .ly-head .ly-intro { font-size: 13.5px; }
  body[data-page="paintings"] .ly-sec { margin-top: 20px; }
}
.pt-grid .pt-card, .pt-row .pt-card { aspect-ratio: 3 / 4; }
.pt-grid .pt-link, .pt-row .pt-link { height: 100%; display: grid; grid-template-rows: 60% 40%; }
.pt-grid .pt-art, .pt-row .pt-art { aspect-ratio: auto; height: 100%; min-height: 0; }
.pt-grid .pt-over, .pt-row .pt-over { position: static; background: none; padding: 9px 10px; align-content: start; overflow: hidden; }
.pt-row .pt-t, .pt-grid .pt-t { text-shadow: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pt-row { grid-auto-columns: minmax(180px, 220px); }
.pt-vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-snd { position: absolute; z-index: 2; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(240, 194, 106, .5);
  background: rgba(20, 15, 11, .7); color: var(--cream); display: grid; place-items: center; cursor: pointer; }
.pt-snd svg { width: 22px; height: 22px; }
.pt-snd .i-on, .pt-snd[aria-pressed="true"] .i-off { display: none; }
.pt-snd[aria-pressed="true"] .i-on { display: block; }
.pt-snd:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
body[data-page="paintings"] .ly-head > p.ly-intro { font-size: 14.5px; margin-top: 4px; }
@media (max-width: 430px) { body[data-page="paintings"] .ly-head > p.ly-intro { font-size: 13.5px; } }

/* Målningar, Shorts-style flow (Cesar 2026-10-20): intro → 9:16 video → 9:16 reel (Ken Burns stills) → grid */
body[data-page="paintings"] .pt-intro { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
.pt-scroll { margin-top: 22px !important; font: 12px/1 var(--title) !important; letter-spacing: .25em; text-transform: uppercase; color: var(--amber) !important; opacity: .7; }
.pt-scroll::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--amber), transparent); animation: pt-drip 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes pt-drip { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.pt-reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .7s ease-out, transform .7s var(--ease, ease-out); }
.pt-reveal.is-in { opacity: 1; transform: none; }
.pt-phone { position: relative; margin: 0 auto; width: min(100%, 360px); }
.pt-phone a { display: block; color: var(--cream); text-decoration: none; }
.pt-screen { display: block; position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: #1d1510;
  border: 1px solid rgba(240, 194, 106, .3); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 40px rgba(240, 194, 106, .07); }
.pt-screen video, .pt-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-cap { display: grid; gap: 2px; padding: 10px 4px 0; text-align: center; }
.pt-phone .pt-t { font: 400 19px/1.2 var(--title); letter-spacing: .02em; }
.pt-phone .pt-m { font: 14.5px/1.3 var(--ital); color: var(--muted); }
.pt-feat .pt-note, .pt-reel + .pt-note { text-align: center; max-width: 30em; margin: 12px auto 0; }
.pt-reel { display: grid; grid-auto-flow: column; grid-auto-columns: min(74%, 280px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 13% 8px; justify-content: start; }
.pt-reel::-webkit-scrollbar { display: none; }
.pt-reel .pt-phone { width: 100%; scroll-snap-align: center; }
@media (min-width: 900px) { .pt-reel { justify-content: center; padding-inline: 0; grid-auto-columns: 260px; } }
.pt-kb { transform-origin: 50% 50%; will-change: transform; }
.kb0 { animation: kb0 22s ease-in-out infinite alternate; }
.kb1 { animation: kb1 26s ease-in-out infinite alternate; }
.kb2 { animation: kb2 24s ease-in-out infinite alternate; }
@keyframes kb0 { from { transform: scale(1.08) translate3d(-4%, 0, 0); } to { transform: scale(1.22) translate3d(5%, -2%, 0); } }
@keyframes kb1 { from { transform: scale(1.2) translate3d(3%, 3%, 0); } to { transform: scale(1.06) translate3d(-3%, -2%, 0); } }
@keyframes kb2 { from { transform: scale(1.06) translate3d(0, 4%, 0); } to { transform: scale(1.2) translate3d(-2%, -4%, 0); } }
.pt-mini { z-index: 41; max-width: 560px; margin: 0 auto; }
.pt-mini .mini-open { cursor: default; }
.pt-mini .mini-open img { width: 29px; height: 29px; object-fit: cover; border-radius: 6px; }
body.has-player .pt-mini { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) {
  .pt-reveal { opacity: 1; transform: none; transition: none; }
  .pt-kb, .pt-scroll::after { animation: none; }
}

/* Målningar as Shorts (Cesar 2026-10-20): a full-viewport, vertically snapping scroller with one work per slide.
   It is its own scroller (height 100svh), so the page below it (the catalogue) stays reachable: past the last slide
   the scroll chains to the page. JS (pages/paintings.js) makes one wheel gesture / arrow key = one slide. */
body[data-page="paintings"] main { padding-top: 0; }
.pt-shorts { position: relative; height: 100vh; height: 100svh; overflow-y: auto; overscroll-behavior-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; background: #0d0a08; outline: none; }
.pt-shorts::-webkit-scrollbar { display: none; }
.pt-slide { position: relative; height: 100vh; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; overflow: hidden; }
body[data-page="paintings"] .pt-intro { min-height: 0; display: grid; text-align: center; padding: 90px 22px 40px; background: var(--page); }
.pt-intro-in { position: relative; max-width: 34em; }
.pt-intro h1 { font: 400 clamp(32px, 6vw, 52px)/1 var(--title); letter-spacing: .05em; margin: 4px 0 10px; text-shadow: 0 0 28px rgba(240, 194, 106, .25); }
.pt-lead { font: 17px/1.4 var(--ital); color: var(--muted); margin: 0 0 8px; }
.pt-intro .ly-intro, .pt-end p { font-size: 15px; line-height: 1.5; color: var(--dim); margin: 0 0 8px; }
.pt-skip a { color: var(--muted); font-size: 14px; }
.pt-end { background: var(--page); text-align: center; padding: 0 22px; }
.pt-end h2 { font: 400 30px/1.1 var(--title); letter-spacing: .05em; margin: 0 0 10px; }
.pt-frame { position: relative; height: 100%; width: 100%; overflow: hidden; background: #1d1510; }
@media (min-width: 700px) { .pt-frame { width: auto; aspect-ratio: 9 / 16; max-width: 100%; border-left: 1px solid rgba(240, 194, 106, .18); border-right: 1px solid rgba(240, 194, 106, .18); box-shadow: 0 0 80px rgba(0, 0, 0, .7); } }
.pt-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* first-frame cover over the video until a real frame is painted (Flöde, 2026-10-22); same box and crop as the video */
.pt-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; aspect-ratio: 9 / 16; } /* remote R2 poster: no intrinsic size in HTML, the ratio reserves it (design lint) */
.pt-cover.is-off { visibility: hidden; }
.pt-frame .pt-cover { transition: height .36s var(--ease, ease); }
.pt-frame.fd-comments .pt-cover { height: 33.333%; object-fit: contain; background: #000; }
.pt-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(13, 10, 8, .55), rgba(13, 10, 8, 0) 22%, rgba(13, 10, 8, 0) 55%, rgba(13, 10, 8, .88)); }
.pt-info { position: absolute; left: 18px; right: 70px; bottom: calc(96px + env(safe-area-inset-bottom)); color: var(--cream); }
.pt-info .pt-t { font: 400 clamp(22px, 6vw, 28px)/1.15 var(--title); letter-spacing: .02em; margin: 0 0 4px; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); display: block; -webkit-line-clamp: unset; }
.pt-info .pt-m { font: 16px/1.3 var(--ital); color: var(--muted); margin: 0 0 12px; }
.pt-open { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid rgba(240, 194, 106, .6); background: rgba(20, 15, 11, .55); color: var(--cream); text-decoration: none; font: 15px/1 var(--title); letter-spacing: .05em; }
.pt-open:hover, .pt-open:focus-visible { background: var(--amber); color: #1b1610; }
.pt-count { position: absolute; right: 16px; bottom: calc(104px + env(safe-area-inset-bottom)); margin: 0; font: 13px/1 var(--title); letter-spacing: .1em; color: var(--muted); }
.pt-work .pt-kb { animation-duration: 18s; }
body[data-page="paintings"] .ly-catalog { margin-top: 0; padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { .pt-shorts { scroll-behavior: auto; } }
/* Shorts tweaks (2026-10-20): transparent header over the slides; speaker button inside the video Short */
body.pt-over-shorts .bar { background: linear-gradient(rgba(10, 8, 6, .55), rgba(10, 8, 6, 0)); }
.pt-frame .pt-snd { top: 70px; right: 14px; z-index: 3; }
@media (max-width: 430px) { .pt-frame .pt-snd { top: 92px; } }
.pt-frame video { cursor: pointer; }
/* Shorts overlay v3 (2026-10-20): compact full-width strip at the very bottom, below the burned-in subtitles (~76 % of frame height) */
.pt-shade { background: linear-gradient(rgba(13, 10, 8, .5), rgba(13, 10, 8, 0) 18%, rgba(13, 10, 8, 0) 84%, rgba(13, 10, 8, .9)); }
.pt-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)) 16px; }
.pt-strip .pt-info { position: static; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--cream); text-decoration: none; padding: 4px 0; }
.pt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-strip .pt-t { font: 400 18px/1.2 var(--title); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.pt-strip .pt-m { font: 14px/1.25 var(--ital); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-chev { flex: none; opacity: .65; }
@media (hover: hover) { .pt-strip .pt-info:hover .pt-chev { opacity: 1; } }
.pt-strip .pt-info:focus-visible .pt-chev { opacity: 1; }
.pt-strip .pt-info:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
.pt-snd2 { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(13, 10, 8, .28); color: var(--cream); cursor: pointer; padding: 0; }
.pt-snd2:hover, .pt-snd2:focus-visible { background: rgba(13, 10, 8, .5); outline: none; box-shadow: 0 0 0 1px rgba(240, 194, 106, .6); }
.pt-snd2 .w-on { display: none; }
.pt-snd2[aria-pressed="true"] .w-on { display: inline; }
.pt-snd2[aria-pressed="true"] .w-off { display: none; }
@media (min-width: 700px) { .pt-strip .pt-t { font-size: 20px; } }
/* Breitenfeld Short on landscape / desktop: the 16:9 take in a wide frame (JS loads the matching source, same query) */
@media (min-width: 768px) and (min-aspect-ratio: 751/1000) {
  .pt-hasvid .pt-frame { width: min(100vw, calc(100svh * 16 / 9)); height: auto; aspect-ratio: 16 / 9; max-height: 100svh; border: 0; }
}
/* ---------- Flöde (/flode/, 2026-10-20): full-screen feed, reuses the Shorts slide styles (.pt-*) ---------- */
body[data-page="feed"] main { padding-top: 0; }
body[data-page="feed"] .site-foot, body[data-page="feed"] footer { display: none; }
.fd-feed { background: #0d0a08; }
.fd-feed .pt-slide[hidden] { display: none; }
.fd-chips { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); top: 58px; display: flex; gap: 6px; margin: 0; padding: 0; flex-wrap: nowrap; }
.fd-chips .chip { background: rgba(13, 10, 8, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 13px; padding: 5px 12px; min-height: 0; }
@media (max-width: 430px) { .fd-chips { top: 84px; } }
.pt-figvid video { display: block; width: 100%; max-height: 80vh; background: #0d0a08; border-radius: 8px; }
@media (max-aspect-ratio: 3/4), (max-width: 767px) { .pt-figvid video { aspect-ratio: 9 / 16; max-height: 82svh; margin: 0 auto; width: auto; max-width: 100%; } }
body[data-page="paintings"] .pt-head { max-width: 960px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
body[data-page="paintings"] .ly-catalog { padding-top: 24px; }
@media (max-width: 430px) { .fd-chips { top: 80px; gap: 4px; } .fd-chips .chip { font-size: 11.5px; padding: 3px 9px; letter-spacing: .03em; } }
/* Flöde info drawer (2026-10-20): left panel on desktop, bottom sheet on phones */
.fd-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(5, 4, 3, .45); }
.fd-scrim[hidden] { display: none; }
.fd-drawer { position: fixed; z-index: 91; top: 0; bottom: 0; left: 0; width: min(400px, 92vw); overflow-y: auto; padding: 64px 24px 28px; background: #17110c; color: var(--cream);
  border-right: 1px solid rgba(240, 194, 106, .25); box-shadow: 20px 0 60px rgba(0, 0, 0, .6); transform: translateX(-104%); transition: transform .32s var(--ease, ease); visibility: hidden; }
.fd-drawer.open { transform: none; visibility: visible; }
.fd-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(240, 194, 106, .4); background: none; color: var(--cream); font-size: 24px; line-height: 1; cursor: pointer; }
.fd-d-img { display: block; width: 100%; height: auto; max-height: 38vh; object-fit: contain; border-radius: 8px; margin-bottom: 14px; background: #0d0a08; }
.fd-d-img[hidden] { display: none; }
.fd-d-t { font: 400 26px/1.15 var(--title); letter-spacing: .03em; margin: 2px 0 4px; }
.fd-d-m { font: 16px/1.3 var(--ital); color: var(--muted); margin: 0 0 12px; }
.fd-d-desc { font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.fd-d-h { color: var(--dim); margin: 0 0 18px; }
@media (max-width: 767px) {
  .fd-drawer { top: auto; left: 0; right: 0; width: auto; max-height: 78svh; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid rgba(240, 194, 106, .25);
    border-radius: 16px 16px 0 0; transform: translateY(104%); box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); }
  .fd-drawer.open { transform: none; }
  .fd-d-img { max-height: 26svh; }
  .fd-x { top: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .fd-drawer { transition: none; } }
/* the header sits outside main's stacking context: hide it while the Flöde drawer is open (desktop panel covers its left part) */
@media (min-width: 768px) { body.fd-open .bar { opacity: 0; pointer-events: none; transition: opacity .2s; } }
/* painting page with a video = one Short + the full page in the drawer (2026-10-20) */
.fd-static { width: min(460px, 94vw); padding-top: 18px; }
.fd-static .wp { padding: 0; margin: 0; max-width: none; }
.fd-static .wp-hero, .fd-static .hero { padding-top: 34px; }
.fd-static .wp-facts { grid-template-columns: 1fr; }
@media (max-width: 767px) { .fd-static { max-height: 86svh; } }
/* ---------- shared info panel, YouTube Shorts comments style (Flöde + painting Shorts, 2026-10-20) ---------- */
.fd-panel { display: none; }
.pt-frame .fd-panel { display: flex; flex-direction: column; position: absolute; z-index: 5; left: 0; right: 0; top: 33.333%; bottom: 0;
  background: #17110c; color: var(--cream); border-top: 1px solid rgba(240, 194, 106, .25); border-radius: 14px 14px 0 0;
  transform: translateY(105%); transition: transform .36s var(--ease, ease); }
.pt-frame.fd-comments .fd-panel { transform: none; }
.pt-frame .pt-media { transition: height .36s var(--ease, ease); }
.pt-frame.fd-comments .pt-media { height: 33.333%; object-fit: contain; background: #000; }
.pt-frame.fd-comments .pt-strip, .pt-frame.fd-comments .pt-shade { opacity: 0; pointer-events: none; }
.pt-strip, .pt-shade { transition: opacity .2s; }
.fd-ph { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 6px 18px; border-bottom: 1px solid rgba(240, 194, 106, .12); position: relative; }
.fd-ph::before { content: ""; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: rgba(237, 227, 204, .25); }
.fd-ph-t { font: 400 15px/1 var(--title); letter-spacing: .1em; color: var(--amber); }
.fd-panel .fd-x { position: static; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--cream); display: grid; place-items: center; cursor: pointer; font-size: 0; }
.fd-panel .fd-x:hover, .fd-panel .fd-x:focus-visible { background: rgba(237, 227, 204, .08); outline: none; }
.fd-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 18px calc(22px + env(safe-area-inset-bottom)); }
.fd-body .fd-d-img { max-height: 26svh; }
.fd-body .wp { padding: 0; margin: 0; max-width: none; }
.fd-body .back-link, .fd-body .wp-back, .fd-body a[data-back] { display: none; }
body.fd-open .bar { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pt-frame .fd-panel, .pt-frame .pt-media { transition: none; } }
.fd-body .wp-hero { padding: 4px 0 10px !important; margin: 0 !important; min-height: 0 !important; }
.fd-body .wp-hero h1 { font-size: clamp(26px, 5vw, 34px); }
.fd-body > * { max-width: 680px; margin-left: auto; margin-right: auto; }
/* 2026-10-20: panel overlaps the shrunken video by 14 px (video behind the rounded edge); strip label »Om verket« + up arrow */
.pt-frame .fd-panel { top: calc(33.333% - 14px); }
.pt-om { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 13px/1 var(--title); letter-spacing: .08em; color: var(--cream); opacity: .85; }
.pt-strip .pt-om .pt-chev { opacity: 1; }
.fd-body .wp-h1 { font: 400 clamp(26px, 5vw, 34px)/1.1 var(--title); letter-spacing: .03em; margin: 2px 0 4px; }
.fd-body .wp { max-width: 680px; margin-left: auto; margin-right: auto; }

/* Short: speaker top-right of the frame, below the header (Cesar 2026-10-20) */
.pt-frame > .pt-snd-top { position: absolute; z-index: 6; top: 92px; right: 12px; width: 44px; height: 44px; background: rgba(13, 10, 8, .38); }
@media (min-width: 768px) { .pt-frame > .pt-snd-top { top: 76px; right: 16px; } }
.fd-comments > .pt-snd-top, .fd-comments > .pt-share-top { display: none; }
.pt-frame > .pt-share-top { position: absolute; z-index: 6; top: 144px; right: 12px; width: 44px; height: 44px; background: rgba(13, 10, 8, .38); }
@media (min-width: 768px) { .pt-frame > .pt-share-top { top: 128px; right: 16px; } }
/* auto-hide: header + speaker fade after ~2 s idle on Shorts pages; the Om verket strip stays */
body.pt-over-shorts .bar, .pt-frame > .pt-snd-top, .pt-frame > .pt-share-top { transition: opacity .45s ease; }
body.pt-over-shorts.lk-idle:not(.fd-open) .bar, body.pt-over-shorts.lk-idle:not(.fd-open) .pt-snd-top, body.pt-over-shorts.lk-idle:not(.fd-open) .pt-share-top { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.pt-over-shorts .bar, .pt-frame > .pt-snd-top, .pt-frame > .pt-share-top { transition: none; } }

/* Shorts pages: the feed is the ONLY scroll container (Cesar 2026-10-20). JS adds body.pt-lock; :has() covers first paint */
html:has(body.pt-lock), body.pt-lock, html:has(#shorts.pt-shorts), html:has(#shorts.pt-shorts) body { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
body.pt-lock .foot, html:has(#shorts.pt-shorts) .foot { display: none; }
#shorts.pt-shorts { position: fixed; inset: 0; z-index: 1; height: 100dvh; overscroll-behavior: contain; scroll-snap-type: y mandatory; }
#shorts.pt-shorts > .pt-slide { height: 100%; scroll-snap-stop: always; }

/* Swish Företag, redesign (Cesar 2026-10-21): show, not tell. Big price, code chip, three icon steps, one white Swish
   button on phones, QR on computers, the manual copy rows folded away, all fine print on /sa-funkar-det.html */
.wp-unlock, .wp-sponsor { min-width: 0; overflow-wrap: anywhere; }
.wp-unlock .ul-price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 12px; }
.wp-unlock .ul-price b { font: 400 clamp(34px, 10vw, 44px)/1 var(--title); color: var(--cream); letter-spacing: .02em; white-space: nowrap; }
.wp-unlock .ul-price.sm b { font-size: 24px; }
.ul-chip { font: 13px/1 var(--body); letter-spacing: .06em; color: var(--amber); border: 1px solid rgba(220, 180, 101, .5); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.ul-badge { font: normal 11.5px/1 var(--body); color: #1b1610; background: var(--amber); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.ul-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; }
.ul-steps li { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 13px; line-height: 1.2; color: var(--muted); position: relative; }
.ul-steps li + li::before { content: ""; position: absolute; top: 15px; left: -18%; width: 36%; border-top: 1px dashed var(--faint); }
.ul-steps .i { width: 30px; height: 30px; color: var(--amber); }
.ul-swish { margin: 6px 0 10px; }
.sw-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 360px; box-sizing: border-box; min-height: 54px; padding: 10px 18px;
  background: #fff; color: #111; border-radius: 14px; text-decoration: none; font: 600 18px/1 var(--body); box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.sw-btn .i { width: 20px; height: 20px; }
.sw-btn .sw-logo { height: 22px; width: auto; }
.ul-qr { display: none; margin: 0; }
.ul-qr > svg, .ul-qr > img { display: block; width: 168px; height: 168px; border-radius: 8px; }
/* the Swish symbol in the caption stays small (bug 2026-10-22: an unscoped QR img rule blew it up to the QR size) */
.ul-qr figcaption { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); margin-top: 6px; }
.ul-qr figcaption .sw-sym { width: 15px; height: 15px; background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .ul-swish .sw-btn { display: none; }
  .ul-qr { display: block; }
}
.ul-manual { margin: 4px 0 8px; font-size: 14px; color: var(--muted); }
.ul-manual summary { cursor: pointer; color: var(--dim); font-size: 13.5px; }
.wp-unlock .ul-pay div { grid-template-columns: minmax(0, 6em) minmax(0, 1fr); }
.wp-unlock .ul-pay dd { flex-wrap: wrap; min-width: 0; font-size: 16px; }
.ul-terms, .ul-links { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); }
.ul-terms .i { width: 15px; height: 15px; }
.wp-sponsor .ul-lede { margin: 2px 0 8px; color: var(--muted); }
.ul-vol { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; }
.ul-vol .ul-swish { margin: 0; }
.ul-vol .ul-qr > svg { width: 120px; height: 120px; }
.ul-vol .sw-btn { min-height: 44px; font-size: 16px; padding: 8px 14px; width: auto; }
.ul-vol .ul-price { margin: 6px 0 0; }
@media (max-width: 430px) { .ul-vol { grid-template-columns: minmax(0, 1fr); } .ul-vol .sw-btn { width: 100%; max-width: none; } }
/* 2026-10-21 overflow fix: the phone menu was ~10 px wider than 320–430 px screens (first and last link cut off) */
@media (max-width: 430px) {
  .bar nav a, .bar nav .nav-soon { font-size: clamp(11px, 3.45vw, 14.5px); padding: 7px clamp(2px, 1.1vw, 8px); letter-spacing: .01em; }
  .bar nav { justify-content: safe center; overflow-x: auto; scrollbar-width: none; }   /* never wider than the screen */
  .bar nav::-webkit-scrollbar { display: none; }
}

.sw-btn .sw-sym { width: 24px; height: 24px; }
.ul-manual .ul-pay { margin: 8px 0 4px; display: grid; gap: 6px; }
.ul-manual .ul-pay div { display: grid; grid-template-columns: minmax(0, 6em) minmax(0, 1fr); align-items: center; gap: 6px; }
.ul-manual .ul-pay dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ul-manual .ul-pay dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--cream); min-width: 0; }
.ul-manual .ul-pay dd b { font-weight: 400; white-space: nowrap; }
.ul-manual .ul-copy { font: inherit; font-size: 13px; padding: 5px 10px; min-height: 32px; border-radius: 999px; border: 1px solid var(--faint); background: transparent; color: var(--amber); cursor: pointer; }

/* ── Play card, payment state (Cesar 2026-10-21): the »Lyssna där du redan lyssnar« frame, with Swish in it.
   Swish appears only as its own unedited symbol on a white plate; everything else is the site's own palette. ── */
.wp-pay { scroll-margin-top: 92px; }
.wp-pay h2 { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.wp-pay h2 .ul-chip { font-size: 13px; }
.pp-pay { display: grid; justify-items: center; gap: 12px; }
.pb-swish { color: #fff; }
.pb-swish small, .pb-swish b { white-space: nowrap; }
.wp-sponsor .ul-qr > svg { width: 120px; height: 120px; }
.pp-sym { display: grid; place-items: center; background: #fff; border-radius: 50%; }
.pp-sym .sw-sym { width: 22px; height: 22px; display: block; }
.pod-badge.small .pp-sym .sw-sym { width: 17px; height: 17px; }
.pp-qr { margin: 0; display: grid; justify-items: center; }
.pp-qr svg { display: block; width: 132px; height: 132px; border-radius: 6px; }
.pp-qr figcaption { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--dim); }
.pp-qr figcaption .sw-sym { width: 15px; height: 15px; background: #fff; border-radius: 50%; padding: 2px; }
.pp-meta { margin: 0; font-size: 13px; }
.pp-terms { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); }
.pp-terms .i { width: 14px; height: 14px; }
.pp-vols { list-style: none; margin: 0; padding: 0; text-align: left; }
.pp-vol { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--faint); }
.pp-vt { margin: 0; color: var(--cream); font-size: 15.5px; line-height: 1.25; }
.pp-vs { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pp-price { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font: 400 18px/1 var(--title); color: var(--cream); }
.pp-vol .pp-qr { display: none; }
.pp-done { font: 12px/1 var(--title); letter-spacing: .1em; color: var(--amber); }
@media (hover: hover) and (pointer: fine) {
  .pp-qr svg { width: 168px; height: 168px; }
  .pp-vol { grid-template-columns: minmax(0, 1fr) auto; } .pp-vol .pod-badge { display: none; }
  .pp-vol .pp-qr { display: grid; } .pp-vol .pp-qr svg { width: 104px; height: 104px; } .pp-vol .pp-qr figcaption { display: none; }
}
@media (max-width: 430px) { .pp-vol { grid-template-columns: minmax(0, 1fr); } .pp-vol .pod-badge { justify-self: start; } }

/* (chains removed 2026-10-23: unlock design) */
.wp-actions.ch-acts{margin:12px 0 0}
.btn.is-off{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
/* third layer: the gold-framed Swish panel over the card itself (Cesar 2026-10-21) */
.ch-pay{position:absolute;inset:0;z-index:5;color:#f3e6c6;display:grid;place-items:center;padding:30px 24px;text-align:center}
.ch-pay[hidden]{display:none}
/* entrance: the line draws itself round, the logo curls unfurl, then the content fades in (~1.1 s) */
.ch-pay .gl-bg{opacity:0;transition:opacity .5s ease}
.ch-pay .gl-ln,.ch-pay .gl-cu{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s cubic-bezier(.5,0,.3,1)}
.ch-pay .gl-cu{transition-duration:.55s;transition-delay:.35s}
.ch-pay .gl-lf{opacity:0;transition:opacity .4s .55s}
.ch-pay-in,.ch-x{opacity:0;transform:translateY(4px);transition:opacity .4s .7s ease,transform .4s .7s ease}
.ch-pay.is-in .gl-bg{opacity:.97}.ch-pay.is-in .gl-ln,.ch-pay.is-in .gl-cu{stroke-dashoffset:0}.ch-pay.is-in .gl-lf{opacity:1}
.ch-pay.is-in .ch-pay-in,.ch-pay.is-in .ch-x{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ch-pay *{transition:none!important}}
.gl-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.ch-x{position:absolute;top:32px;right:22px;width:32px;height:32px;border:0;border-radius:50%;background:none;color:#f3dca4;font-size:22px;line-height:1;cursor:pointer}
.ch-x:hover{background:rgba(232,199,124,.12)}.ch-x:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.ch-pay-in{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 22px;width:100%;max-width:560px}
.ch-pay-txt{display:grid;gap:5px;justify-items:center}
.ch-kick{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#d4a955;hyphens:manual;max-width:100%}
.ch-line{margin:0;font:400 16px/1.28 var(--ital);color:#f3e6c6}
.ch-price{margin:0;font:400 22px/1 var(--title);color:#e8c77c}
.ch-pay .sw-foot{margin:2px 0 0;font-size:11.5px}.ch-pay .sw-foot a{color:var(--muted)}
.ch-pay .sw-slot{--slot:124px;width:var(--slot);height:var(--slot);position:relative;margin:0 0 18px}
.ch-pay .sw-slot>*{position:absolute;inset:0;box-sizing:border-box;margin:0}
.ch-pay .sw-go{display:grid;place-content:center;justify-items:center;gap:7px;padding:8px;border-radius:10px;text-decoration:none;color:#f3e6c6;
 background:linear-gradient(160deg,#2e231a,#18120d);box-shadow:inset 0 0 0 1px rgba(212,169,85,.8);font:400 13px/1.2 var(--title);letter-spacing:.03em}
.ch-pay .sw-go:hover{box-shadow:inset 0 0 0 1px #ecd08a;background:linear-gradient(160deg,#352819,#1c150f)}
.ch-pay .sw-go:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.ch-pay .sw-go[hidden]{display:none}
.sw-l-m{display:none}
.gl-sym{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #d4a955,0 3px 8px rgba(0,0,0,.5)}
.gl-sym .sw-sym{width:28px;height:28px}
/* QR fills the button's square; »Skanna i Swish« + code sit just below it */
.ch-pay .sw-qr{display:block;background:#fff;border-radius:8px;padding:5px;box-shadow:0 0 0 1px rgba(212,169,85,.8)}
.ch-pay .sw-qr[hidden]{display:none}.ch-pay .sw-qr:focus{outline:none}
.ch-pay .sw-qr svg{display:block;width:100%;height:100%}
.ch-pay .sw-qr figcaption{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;margin:0;font-size:10.5px;color:var(--muted);display:flex;gap:5px;align-items:center}
.ch-pay .sw-qr .ul-chip{padding:0 6px;font-size:10.5px}
@media (max-width:420px){.ch-pay{padding:30px 18px}.ch-pay-in{gap:0 12px}.ch-pay .sw-slot{--slot:108px}.ch-line{font-size:15px}}
/* phones/tablets: one column, the regular horizontal Swish button, never a QR */
@media (hover:none),(pointer:coarse){
 .ch-pay-in{display:flex;flex-direction:column;align-items:center;gap:8px}
 .ch-pay-txt{display:contents}.ch-pay .sw-slot{order:4;width:auto;height:auto;margin:2px 0}.ch-pay .sw-foot{order:5}.ch-pay .sw-slot>*{position:static}
 .ch-pay .sw-go{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 20px 6px 7px;border-radius:999px;font-size:16px;
  background:linear-gradient(#2a2018,#1d1611);box-shadow:inset 0 0 0 1px rgba(212,169,85,.85)}
 .ch-pay .gl-sym{width:32px;height:32px}.ch-pay .gl-sym .sw-sym{width:22px;height:22px}
 .sw-l-d{display:none}.sw-l-m{display:inline}
}
@media (hover:none),(pointer:coarse){.ch-pay .sw-qr{display:none!important}}
/* Målningar-katalogen: låsta verk får en liten hänglåsbricka (Cesar 2026-10-22, variant c) */
.pt-lk { display: grid; place-items: center; position: absolute; pointer-events: none; z-index: 2; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  color: #b5a07c; background: rgba(28, 22, 18, .72); border: 1px solid rgba(160, 138, 104, .45); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.pt-lk svg { width: 15px; height: 15px; }
/* the same badge on locked audio dramas, inline in the row's chip column (timeline + Lyssna) */
.pt-lk.is-row { position: static; display: inline-grid; vertical-align: middle; width: 22px; height: 22px; margin-right: 6px; box-shadow: none; }
.pt-lk.is-row svg { width: 13px; height: 13px; }
.pt-art { position: relative; }
/* »Om verket« open on a locked painting: no big chains, the catalog padlock badge (larger) top-right (2026-10-22) */
.pt-lk.is-mini { display: none; top: 10px; left: auto; right: 10px; bottom: auto; width: 36px; height: 36px; }
.pt-lk.is-mini svg { width: 20px; height: 20px; }
/* unlock button in the description: the gold pill */
.wp-unlock { margin: 14px 0 6px; }
.sw-unlock { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; cursor: pointer;
  font: 600 15px/1.2 var(--title, inherit); letter-spacing: .03em; color: #f6e7c1; background: rgba(28, 22, 18, .85);
  border: 1px solid rgba(240, 194, 106, .65); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35); }
.sw-unlock b { color: var(--amber, #f0c26a); font-weight: 600; }
.sw-unlock:hover, .sw-unlock:focus-visible { border-color: var(--amber, #f0c26a); background: rgba(48, 36, 24, .9); }
.sw-u-lk { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #b5a07c; background: rgba(28, 22, 18, .72); border: 1px solid rgba(160, 138, 104, .45); }
.sw-u-lk svg { width: 14px; height: 14px; }
.wp-unlock.is-thanks { color: var(--amber, #f0c26a); font-style: italic; }

/* Flöde overlays (2026-10-22): play icon while paused, thin spinner while stalled, "tap for sound" hint */
.fd-ui { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.fd-st { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; place-items: center; }
.pt-frame.fd-comments .fd-st { display: none; }
.fd-play, .fd-spin { grid-area: 1 / 1; opacity: 0; transition: opacity .2s; }
.fd-play { width: 72px; height: 72px; color: rgba(245, 236, 220, .85); filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45)); }
.fd-play svg { width: 100%; height: 100%; }
.fd-play circle { fill: rgba(13, 10, 8, .25); }
.fd-st.is-paused .fd-play { opacity: 1; }
.fd-spin { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(245, 236, 220, .18); border-top-color: rgba(240, 194, 106, .95); filter: drop-shadow(0 0 3px rgba(0, 0, 0, .45)); animation: fd-spin .9s linear infinite; }
.fd-st.is-loading .fd-spin { opacity: 1; }
.fd-st.is-loading .fd-play { opacity: 0; }
@keyframes fd-spin { to { transform: rotate(360deg); } }
.fd-unmute { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(240, 194, 106, .55); background: rgba(13, 10, 8, .45); color: var(--cream); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; animation: fd-pulse 2.4s ease-in-out infinite; }
.fd-ui.is-muted-hint .fd-unmute { opacity: 1; visibility: visible; pointer-events: auto; }
@keyframes fd-pulse { 50% { box-shadow: 0 0 0 7px rgba(240, 194, 106, 0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 194, 106, .35); } }
body.fd-open .fd-ui { display: none; }
@media (prefers-reduced-motion: reduce) { .fd-unmute { animation: none; } .fd-spin { animation-duration: 2s; } }
.fd-toast { position: absolute; left: 50%; top: calc(50% + 64px); transform: translate(-50%, 6px); display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: rgba(13, 10, 8, .72); border: 1px solid rgba(240, 194, 106, .4); color: var(--cream); font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; }
.fd-toast.on { opacity: 1; transform: translate(-50%, 0); }
.fd-toast svg { color: var(--amber); }
.fd-ph-slide { background: #0d0a08; }

/* single-narrator förord/efterord: one passage, paragraphs kept (2026-10-22) */
.sc-block{display:block}
.sc-para{display:block}
.sc-para+.sc-para{margin-top:.75em}

/* phones (Cesar 2026-10-22): the whole hero, scroll cue included, fits the first screen (svh = with Safari's bars
   shown) on iPhone SE 375x548, iPhone 13 390x664 and large Android 412x780; spacing and logo scale with the height */
@media (max-width: 700px) {
  .hero { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 20px 6px; min-height: 100svh; }
  .hero-logo { margin-bottom: clamp(6px, 1.6svh, 18px); }
  .hero .hero-logo img { width: auto; height: clamp(80px, 15svh, 200px); }
  .hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .hero .ornament { margin: clamp(8px, 1.6svh, 16px) auto; }
  .hero-intro { margin-top: clamp(8px, 1.8svh, 22px); font-size: 15px; line-height: 1.45; }
  .hero-media { margin-top: clamp(8px, 1.8svh, 18px); }
  .cta { margin-top: clamp(10px, 2.4svh, 26px); }
  .scroll-cue { position: static; translate: none; margin-top: clamp(8px, 2svh, 22px); }
  .scroll-cue::after { height: clamp(18px, 3.4svh, 34px); }
}

/* locked cards: the »Lås upp« pill appears only once chains.js has placed it (never unpositioned, bug 2026-10-22) */

/* 404 */
.nf-links { line-height: 1.7; }

/* ---------- published paintings on the timeline (Cesar 2026-10-23): image only, natural aspect ratio, 1px gold hairline ---------- */
.entry.painting { --h: 150px; display: block; width: min(100%, calc(var(--h) * var(--ar, 1) + 2px)); max-width: 100%; min-height: 0; padding: 0; line-height: 0;
  border: 1px solid rgba(240, 194, 106, .55); border-radius: 2px; background: var(--page); }
.entry.painting::before { content: none; }
.entry.painting .pic { display: block; position: static; cursor: pointer; }
.entry.painting .pic::after { border-radius: 2px; }
.entry.painting .pic:focus-visible::after { outline: 2px solid var(--amber); outline-offset: 3px; }
.entry.painting img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, auto); border-radius: 1px; }
.entry.painting .node { background: var(--amber); }
.entry.painting:hover, .entry.painting:focus-within { border-color: var(--amber); }
.tl-yr { display: none; }

/* ---------- desktop: two-sided timeline on a central spine (from the redesign, each item in its own row) ---------- */
@media (min-width: 900px) {
  :root { --spine-x: calc((100% - var(--sbw)) / 2); }
  .timeline { --tl-gap: 40px; max-width: 1040px; padding: 24px 24px 40px; }
  .timeline::before { left: 50%; }
  .spine-lit { left: calc(50% - 1px); }
  .entry { width: calc(50% - var(--tl-gap)); margin-bottom: 10px; }
  .entry.R { margin-left: calc(50% + var(--tl-gap)); }
  .entry.L { margin-right: calc(50% + var(--tl-gap)); margin-left: auto; }
  .entry.painting { --h: 240px; width: min(calc(50% - var(--tl-gap)), calc(var(--h) * var(--ar, 1) + 2px)); max-width: none; }
  .entry.R .node { left: calc(-1 * var(--tl-gap) - 2.5px); }
  .entry.L .node { left: auto; right: calc(-1 * var(--tl-gap) - 3px); translate: 50% 0; }
  .entry.L { border-left: 1px solid rgba(237, 227, 204, .1); border-right: 3px solid var(--g); border-radius: 10px 3px 3px 10px; }
  .entry.released.L { border-color: rgba(240, 194, 106, .3); border-right-color: var(--g); }
  .entry.painting.L, .entry.painting.R { border: 1px solid rgba(240, 194, 106, .55); border-radius: 2px; }
  .entry.painting.L:hover, .entry.painting.R:hover, .entry.painting:focus-within { border-color: var(--amber); }
  /* the year marker sits on the other side of the spine, level with its own item */
  .tl-yr { display: block; position: absolute; top: 50%; translate: 0 -50%; white-space: nowrap; pointer-events: none; line-height: 1;
    font: 400 44px/1 var(--title); letter-spacing: .02em; color: rgba(220, 180, 101, .62); }
  .entry.L .tl-yr { left: calc(100% + 2 * var(--tl-gap) + 3px); }
  .entry.R .tl-yr { right: calc(100% + 2 * var(--tl-gap) + 3px); }
  .entry.painting .tl-yr { font-size: 56px; }
  /* headings, »Nu« and events sit across the spine, centred */
  .section-title, .week, .now, .later > .section-title { text-align: center; }
  .section-title, .week { width: fit-content; margin-left: auto; margin-right: auto; padding: 4px 14px; background: var(--page); z-index: 1; }
  .now::before { left: 0; right: 0; }
  .later .more-btn { display: flex; margin: 8px auto 0; }
  /* the big era year + portrait would collide with the right-hand column: the per-item year markers replace them */
  .era, .era-portrait { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) { .timeline { max-width: calc(100% - 190px); margin-left: 16px; } :root { --spine-x: calc(16px + (100% - var(--sbw) - 190px) / 2); } }
/* desktop rhythm (review 2026-10-23): every row the same 40px gap; one alignment rule for stories and paintings:
   the dot, the year marker and the item's top edge share the same top line */
@media (min-width: 900px) {
  .timeline .entry { margin-bottom: 40px; }
  .timeline .entry .node, .timeline .entry.planned .node { top: 14px; translate: -50% -50%; }
  .timeline .entry.L .node { translate: 50% -50%; }
  .timeline .tl-yr, .timeline .entry.painting .tl-yr { top: -1px; translate: 0 0; font-size: 44px; }
}
/* phones (review 2026-10-23): 12px between timeline items */
@media (max-width: 899px) { .timeline .entry { margin-bottom: 12px; } }

/* ---------- paintings per release week (prototype 2026-10-23) ---------- */
.ty { display: inline-flex; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; color: var(--gold-2); }
.ty svg { width: 100%; height: 100%; }
.pweek .pw-head, .pweek .pw-line { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .86rem; color: var(--muted, #b9ab95); }
.pweek .pw-wk { color: var(--ink, #f3e9d8); font-weight: 600; }
.pweek .pw-line { width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(240, 194, 106, .25); padding: 6px 0; margin: 0; cursor: pointer; font: inherit; font-size: .86rem; text-align: left; }
.pweek .pw-chev { margin-left: auto; width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.pweek .pw-line[aria-expanded="true"] .pw-chev { transform: rotate(-135deg); }
.pweek .pw-line:focus-visible, .pw-stack:focus-visible, .pw-arr:focus-visible, .pw-strip:focus-visible { outline: 2px solid var(--amber, #f0c26a); outline-offset: 2px; }
a.pt { position: relative; display: block; flex: none; width: 64px; aspect-ratio: 9 / 16; border: 1px solid rgba(240, 194, 106, .55); border-radius: 2px; overflow: hidden; background: #1c1612; }
a.pt img, .pw-stack img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
a.pt:focus-visible { outline: 2px solid var(--amber, #f0c26a); outline-offset: 2px; }
a.pt.is-test, .pw-stack:has(.pt-test) img { filter: sepia(.5) hue-rotate(-30deg) saturate(1.3); }
.pt-test { position: absolute; left: 2px; top: 2px; font: 700 9px/1 system-ui, sans-serif; letter-spacing: .04em; padding: 2px 3px; background: #b3261e; color: #fff; border-radius: 2px; z-index: 3; }
a.pt.is-crop::after { content: "beskuren"; position: absolute; inset: auto 0 0; font: 9px/1.4 system-ui, sans-serif; text-align: center; background: rgba(0, 0, 0, .6); color: #fff; }
.pw-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pw-grid[hidden] { display: none; }
/* stacks */
.pw-stack { position: relative; display: block; width: calc(64px + 2 * 14px + 2px); height: calc(64px * 16 / 9 + 2px); padding: 0; background: none; border: 0; cursor: pointer; }
.pw-stack img { position: absolute; top: 0; left: calc(var(--i) * 14px); width: 64px; height: auto; aspect-ratio: 9 / 16; border: 1px solid rgba(240, 194, 106, .55); border-radius: 2px; box-shadow: -3px 0 6px rgba(0, 0, 0, .45); z-index: calc(3 - var(--i)); transform: rotate(calc((var(--i) - 1) * 2deg)); }
.pw-more { position: absolute; right: -36px; top: 50%; transform: translateY(-50%); font-size: .85rem; color: var(--amber, #f0c26a); }
.pweek.open .pw-stack { display: none; }
/* swipe */
.pw-swipe { position: relative; }
.pw-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent); padding: 2px 18px; }
.pw-strip::-webkit-scrollbar { display: none; }
.pw-strip a.pt { scroll-snap-align: start; }
.pw-arr { display: none; }
@media (hover: hover) and (min-width: 900px) {
  .pw-arr { display: block; position: absolute; top: 50%; z-index: 2; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; border: 1px solid rgba(240, 194, 106, .55); background: rgba(28, 22, 18, .85); cursor: pointer; }
  .pw-arr::before { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-right: 1px solid #f0c26a; border-bottom: 1px solid #f0c26a; transform: translateX(-1px) rotate(-45deg); }
  .pw-arr.prev { left: -6px; } .pw-arr.prev::before { transform: translateX(1px) rotate(135deg); }
  .pw-arr.next { right: -6px; }
}
@media (min-width: 900px) { a.pt, .pw-stack img { width: 76px; } .pw-stack { width: calc(76px + 28px + 2px); height: calc(76px * 16 / 9 + 2px); } }
.timeline .entry.pweek.far { margin-bottom: 6px; }
@media (min-width: 900px) { .timeline .entry.pweek.far { margin-bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .pw-chev, .pw-strip { transition: none; scroll-behavior: auto; } .pw-stack img { transform: none; } }
.demo-banner { position: sticky; top: 0; z-index: 1000; padding: 6px 12px; text-align: center; font: 600 13px/1.3 system-ui, sans-serif; background: repeating-linear-gradient(45deg, #b3261e 0 12px, #8f1d17 12px 24px); color: #fff; }
.timeline .entry.pweek { display: block; padding-top: 10px; padding-bottom: 10px; }
.pweek .pw-head, .pweek .pw-line { white-space: nowrap; }
.pw-stack { margin-right: 44px; }
.pw-more { right: -40px; }
/* mosaic variant: justified rows, natural aspect ratio (timeline.js sets each tile's width/height so a row fills the
   width at one shared height; before that each tile reserves its box at the target row height, so nothing shifts much) */
.pw-mosaic { --rh: 110px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
@media (min-width: 900px) { .pw-mosaic { --rh: 150px; } }
.pm { position: relative; display: block; flex: var(--ar) 1 calc(var(--ar) * var(--rh)); aspect-ratio: var(--ar); height: auto; max-width: 100%; box-sizing: border-box; outline: 1px solid rgba(240, 194, 106, .55); outline-offset: -1px; overflow: hidden; background: #1c1612; }
.pm[style*="height"] { flex: none; }   /* sized by the justify script */
.pm img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* justified rows: items grow in proportion to their aspect ratio, so a full row keeps one height and fills the width;
   the spacer stops the last row from stretching */
.pm:focus-visible { outline: 2px solid var(--amber, #f0c26a); outline-offset: 2px; z-index: 1; }
.pm.is-test img { filter: sepia(.5) hue-rotate(-30deg) saturate(1.3); }

/* ---------- week-grouped timeline (tl-mosaic, Cesar 2026-10-23) ---------- */
.week .wk-cs { display: inline-flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.week .wk-c { font: 14px/1.2 var(--ital); color: var(--muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.week .wk-c b { font: 600 14px/1 var(--title); color: var(--ink, #eadfcb); letter-spacing: 0; }
.week .wk-ci { display: inline-grid; color: var(--gold-2); }
.week .wk-ci svg { width: 16px; height: 16px; }
/* phones: icons + numbers only; the words stay for screen readers */
@media (max-width: 899px) { .week .wk-cw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* a week reads as one unit: subtle card; collapsed weeks show a preview and »Visa alla« */
.wkb { display: block; margin: 18px 0 6px; }
@media (max-width: 899px) {
  .wkb { padding: 2px 10px 10px; border-radius: 10px; background: linear-gradient(180deg, rgba(240, 194, 106, .06), rgba(240, 194, 106, .02)); border: 1px solid rgba(240, 194, 106, .14); }
  .wkb > .week { margin-top: 10px; }
  /* the card's 10px padding + 1px border would push the type icon 11px right of the spine */
  .wkb .entry .node { margin-left: -11px; }
}
@media (min-width: 900px) { .wkb { margin: 30px 0 10px; } .wkb > .week { margin-top: 0; margin-bottom: 8px; } }
.wkb.clip .wk-more { display: none !important; }
.wk-all { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 8px; border: 1px solid rgba(240, 194, 106, .35); font: 15px/1.2 var(--ital); color: var(--amber, #f0c26a); cursor: pointer; position: relative; z-index: 1; background: var(--page); }
.wk-all:hover { background: rgba(240, 194, 106, .08); }
.wk-all:focus-visible { outline: 2px solid var(--amber, #f0c26a); outline-offset: 2px; }
.wk-all .pw-chev { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.wk-all[aria-expanded="true"] .pw-chev { transform: translateY(2px) rotate(-135deg); }
@media (min-width: 900px) { .wk-all { width: fit-content; margin: 10px auto 0; padding: 8px 22px; } }
@media (prefers-reduced-motion: reduce) { .wk-all .pw-chev { transition: none; } }
.week .wk-tog { all: unset; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; cursor: pointer; }
.week .wk-tog .pw-chev { align-self: center; margin-left: 4px; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .2s; color: var(--amber, #f0c26a); }
.week .wk-tog[aria-expanded="true"] .pw-chev { transform: rotate(-135deg); }
.week .wk-tog:focus-visible { outline: 2px solid var(--amber, #f0c26a); outline-offset: 3px; border-radius: 2px; }
.wkb:not(.open) .entry.gal { display: none; }
.wkb.far:not(.open) > .wk { display: none; }
.wkb.far .week { margin-top: 10px; }
/* the type icon is the dot on the line */
.timeline .entry .node.ty-node, .timeline .entry.planned .node.ty-node { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--page); box-shadow: 0 0 0 2px var(--page); color: rgba(240, 194, 106, .9); display: grid; place-items: center; }
.timeline .entry .node.ty-node svg { width: 16px; height: 16px; }
.timeline .entry .node.ty-node { color: var(--gold-2); }
.timeline .entry.planned .node.ty-node { color: var(--amber); }   /* ≥ 4.5:1 on the page */
.timeline .entry.gal { display: block; }
.timeline .entry.gal .pw-mosaic { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .week .wk-tog .pw-chev { transition: none; } }
/* »Längre fram« (tl-mosaic, Cesar 2026-10-23): the most famous works after the shown weeks */
.ahead { margin-top: 28px; }
.ahead .ahead-when { display: block; margin: 0 0 2px; font: 13px/1.2 var(--ital); color: var(--amber, #f0c26a); }
.pm .pm-when { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 3px; background: rgba(10,8,6,.82); color: #f3e6c8; font: 13px/1.3 var(--ital); pointer-events: none; }
.ahead-all { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 15px/1.3 var(--ital); }
.ahead-all a { color: var(--amber, #f0c26a); }

/* author portrait on timeline rows (Cesar 2026-10-23): small, round, cropped to the face (portraits are 420x502 head-and-shoulders) */
.entry.has-face { grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-areas: "f t c" "f m c"; column-gap: 10px; }
.row-face { grid-area: f; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: 50% 24%; align-self: center;
  border: 1px solid rgba(240, 194, 106, .45); background: #1c1612; filter: sepia(.15); }
@media (min-width: 900px) { .entry.has-face { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; } .row-face { width: 44px; height: 44px; } }

/* Lyssna catalogue in the timeline's language (Cesar 2026-10-23): type icon before the title, round author portrait,
   hairline play button and chips, meta >= 13 px, titles wrap (never ellipsis); compact »Utvalda« row above the search */
.results .card-title .ty { margin-right: 7px; vertical-align: -2px; }
.results .card-title { white-space: normal; overflow: visible; text-overflow: clip; }
.results .card-meta { font-size: 14px; color: #d9cbad; }
.results .row-play { width: 34px; height: 34px; background: transparent; color: var(--amber); border: 1px solid rgba(240, 194, 106, .7); }
.results .row-play:hover { background: rgba(240, 194, 106, .12); }
.results .row-chip .badge { font-size: 13px; color: #d9cbad; border-color: rgba(237, 227, 204, .35); }
@media (max-width: 480px) {
  .results .entry.has-face:not(.released) { grid-template-columns: 42px minmax(0, 1fr); grid-template-areas: "f t" "f m" "f c"; }
}
.ly-feat .feat-stage { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ly-feat .hcard { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
.ly-feat .hcard h3 { font-size: 19px; }
@media (min-width: 900px) { .ly-feat .feat-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* shared catalogue header (Cesar 2026-10-23): Berättelser and Målningar use the same eyebrow, heading and one line */
.cat-head { padding-top: 84px; padding-bottom: 6px; }
.cat-head h1 { font-size: clamp(36px, 5.4vw, 52px); margin-bottom: 6px; }
.cat-head .cat-line { font: 17px/1.4 var(--ital); color: var(--dim); }
@media (min-width: 900px) { .cat-head { padding-top: 104px; } }
body[data-page="paintings"] .ly-catalog, body[data-page="listen"] .ly-catalog { margin-top: 14px; }
.ly-resume-solo { max-width: 728px; margin: 14px auto 0; }
/* monogram fallback for rows without a portrait */
.row-mono { display: grid; place-items: center; font: 15px/1 var(--title); letter-spacing: .04em; color: var(--gold-2); filter: none; }
@media (min-width: 900px) { .row-mono { font-size: 16px; } }
.entry.has-face .row-face { grid-area: f; }
/* phone: the filter chips scroll sideways; a right-edge fade says there is more */
@media (max-width: 700px) {
  .facets .chips, .pt-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}
.pm .pm-when { font-size: 13px; }
.cat-head .kt-kicker { color: #a39a88; }   /* >= 4.5:1 on the page */

/* one catalogue frame for Berättelser and Målningar (Apollo 2026-10-23): same 760 px column for bar, chips, count line and items */
body[data-page="paintings"] .ly-catalog { max-width: none; padding: 0; margin-top: 14px; }
body[data-page="paintings"] .fbtn { display: inline-flex !important; }
.pt-grid { max-width: 760px; margin: 0 auto; padding: 0 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 14px; align-items: start; }
@media (max-width: 899px) { .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pt-grid { grid-template-columns: 1fr 1fr; gap: 20px 10px; } }
/* content-height cards: the image keeps its box (no layout jump, hairline placeholder while it loads), titles cap at 2 lines */
.pt-grid .pt-art { aspect-ratio: 4 / 3; height: auto; background: #1c1612; outline: 1px solid rgba(237, 227, 204, .14); outline-offset: -1px; }
.pt-grid .pt-over { padding: 8px 2px 0; }
.pt-grid .pt-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-page="paintings"] .facets { margin-top: 6px; }   /* same rhythm as Berättelser (its bar carries an extra hidden row) */
.pt-grid .pt-card { aspect-ratio: auto; min-width: 0; }
.pt-grid .pt-link { height: auto; display: block; }
.pt-grid .pt-art { overflow: hidden; }
.pt-grid .pt-art img { width: 100%; height: 100%; object-fit: cover; }
/* phone chip rows: a clearly visible right-edge fade on the scroller (Apollo 2026-10-23: 28 px read as a hard cut) */
@media (max-width: 899px) {
  .facets .frow .chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), rgba(0,0,0,.35) calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), rgba(0,0,0,.35) calc(100% - 22px), transparent); }
}
.pm .pm-when { font-size: 14px; }   /* Fell Italic has a small x-height: 13 px read as ~11 px (Apollo 2026-10-23) */
/* 2026-10-23 nav edge (Cesar): the phone menu scrolls edge to edge with 12 px end padding inside the scroller and a
   soft fade at both ends, so when it overflows (wider fonts, zoom) the last item keeps the same breathing room as the
   first instead of sitting flush against the screen edge. The ::after spacer is the end padding (Safari drops a
   flex scroller's padding-right). Fits without scrolling at 320–430 px as before. */
@media (max-width: 430px) {
  .bar nav { box-sizing: border-box; width: calc(100% + 12px); max-width: none; margin-inline: -6px; padding-inline: 12px 0; scroll-padding-inline: 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
  .bar nav::after { content: ""; flex: 0 0 12px; }
}

/* ---- story page = painting page (story-fullscreen sketch, 2026-10-23): portrait large, player on screen, »Om verket« panel ---- */
.st-shorts .pt-frame { background: #110d0a; }
.st-art { position: absolute; inset: 0 0 calc(200px + env(safe-area-inset-bottom)) 0; display: grid; place-items: center; overflow: hidden; transition: bottom .36s var(--ease, ease), height .36s var(--ease, ease); }
.st-art .st-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 40%; }
.st-art.is-small .st-img { position: relative; width: auto; height: auto; max-width: min(84%, 504px); max-height: min(86%, 602px); aspect-ratio: 420/502; border-radius: 6px; box-shadow: 0 18px 60px rgba(0, 0, 0, .6); }
.st-art.is-mono .st-mono { font: 400 clamp(96px, 30vw, 220px)/1 var(--title); color: var(--amber); opacity: .8; letter-spacing: .04em; }
.st-slide:not(.st-playable) .st-art { bottom: 64px; }
.st-player { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); width: min(100% - 32px, 520px); bottom: calc(84px + env(safe-area-inset-bottom)); }
.st-scrub input { width: 100%; accent-color: var(--amber); height: 28px; margin: 0; }
.st-times { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.st-chap { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.st-ctl { display: grid; grid-template-columns: 1fr auto auto auto 1fr; justify-items: center; align-items: center; gap: clamp(10px, 4vw, 22px); margin-top: 4px; }
.st-speed { justify-self: start; min-width: 48px; height: 36px; border: 1px solid rgba(237, 227, 204, .22); border-radius: 99px; background: none; color: var(--cream); font: 600 14px/1 var(--sans, system-ui); cursor: pointer; }
.st-chaps { justify-self: end; width: 44px; height: 44px; display: grid; place-items: center; color: var(--cream); border-radius: 50%; }
.st-chaps svg { width: 24px; height: 24px; }
.st-chaps:hover, .st-speed:hover { background: rgba(237, 227, 204, .08); }
.st-slide.is-playing .st-toggle { box-shadow: 0 0 0 6px rgba(232, 177, 90, .16); }
.pt-frame.fd-comments .st-art { bottom: 66.667%; }
.pt-frame.fd-comments .st-player { opacity: 0; pointer-events: none; }
.wp-chap[aria-current] { color: var(--amber); }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .st-art { bottom: calc(170px + env(safe-area-inset-bottom)); top: 60px; }
  .st-player { bottom: 72px; }
}
/* podcast icons on the full-screen view, under the share button (Cesar 2026-10-23) */
.st-pods { position: absolute; z-index: 6; top: 200px; right: 12px; display: flex; flex-direction: column; gap: 8px; }
.st-pod { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(13, 10, 8, .38); color: var(--cream); }
.st-pod svg { width: 22px; height: 22px; }
.st-pod:hover, .st-pod:focus-visible { background: rgba(237, 227, 204, .12); }
.fd-comments > .st-pods { display: none; }
.wp-pods { margin: 4px 0 0; color: var(--dim); }

/* ---- unlock design (Apollo, Cesar approved 2026-10-23): no chains, nothing over the artwork ---- */
:root { --lk-foot: 118px; --lk-gold: #e3c07a; --lk-hair: rgba(227, 192, 122, .55); --lk-hair2: rgba(227, 192, 122, .28); --lk-muted: #d4c8ae; --lk-dark: #17110c;
  --lk-grad: linear-gradient(135deg, #f1d58e 0, #d4a955 45%, #e8c77c 75%, #b58a3e 100%); }
.lk-stage { position: absolute; z-index: 1; left: 12px; right: 12px; top: 60px; bottom: calc(var(--lk-foot) + env(safe-area-inset-bottom)); container-type: size; display: grid; place-items: center; }
.lk-art { position: relative; margin: 0; width: min(100cqw, calc(100cqh * var(--ar))); aspect-ratio: var(--ar); border: 1px solid var(--lk-hair); overflow: hidden; background: #110d0a; }
.lk-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-slide .lk-art .st-art, .pt-frame.fd-comments .lk-art .st-art { position: absolute; inset: 0; }
.lk-art .st-art.is-small::before { display: none; }
.lk-art .st-art.is-small .st-img { max-width: 100%; max-height: 100%; border-radius: 0; box-shadow: none; }
.lk-art.is-locked > img { filter: brightness(.8) saturate(.85); }               /* paintings: a gentle veil */
.lk-art.is-locked .st-img, .lk-art.is-locked .st-mono { filter: brightness(.62) saturate(.7); }   /* portraits are already high-contrast */
/* lock v2: the overlay sits low and centred ON the art (same spot for every aspect ratio), over a soft scrim */
.lk-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: clamp(36px, 14cqh, 72px) 14px clamp(14px, 4.5cqh, 26px); background: linear-gradient(to bottom, rgba(16, 12, 9, 0), rgba(16, 12, 9, .55) 45%, rgba(16, 12, 9, .82)); pointer-events: none; }
.lk-bar > * { pointer-events: auto; }
.lk-bar .lk-go { padding: 10px 24px 10px 18px; box-shadow: 0 6px 22px rgba(0, 0, 0, .45); }
.lk-bar .lk-go .lk-ico { width: 20px; height: 20px; }
.ch-pay.is-sponsor .sw-go.is-contact { justify-content: center; padding: 0 28px; }
.lk-bar .lk-pill { background: rgba(23, 17, 12, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--cream); border-color: var(--lk-hair); }
.lk-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.lk-bar.is-sponsor .lk-line { position: static; width: auto; height: auto; clip: auto; white-space: normal; max-width: 26em; font-size: 16px; line-height: 1.35; color: var(--cream); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.lk-bar.is-sponsor .lk-pill { display: none; }
.lk-ico { width: 18px; height: 18px; flex: none; }
.lk-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--lk-hair); border-radius: 999px; padding: 3px 11px 3px 9px; font-size: 15px; line-height: 1.3; color: var(--lk-gold); white-space: nowrap; background: rgba(23, 17, 12, .6); }
.lk-pill.is-big { font-size: 16px; padding: 5px 14px 5px 11px; }
.lk-pill.is-ok { color: var(--cream); } .lk-pill.is-ok .lk-ico { color: var(--lk-gold); }
.lk-pill.is-lk { color: var(--lk-muted); border-color: var(--lk-hair2); }
.lk-pill.is-nx { color: var(--lk-dark); background: var(--lk-grad); border-color: transparent; font-weight: 700; }
.lk-go, .lk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; border-radius: 10px; border: 0; cursor: pointer;
  font: 700 18px/1.2 var(--body); text-decoration: none; color: var(--lk-dark); background: var(--lk-grad); }
.lk-go:focus-visible, .lk-btn:focus-visible { outline: 2px solid var(--lk-gold); outline-offset: 3px; }
.pt-frame > .ch-pay { left: 8px; right: 8px; top: calc(60px + (100% - 60px - var(--lk-foot) - env(safe-area-inset-bottom)) / 2); bottom: auto; height: 330px; max-width: 520px; margin: 0 auto; transform: translateY(-50%); }
.pt-frame.is-paying .lk-bar { visibility: hidden; }
.pt-frame.fd-comments .lk-stage { left: 0; right: 0; top: 0; bottom: 66.667%; place-items: center; }
.pt-frame.fd-comments .lk-bar, .pt-frame.fd-comments > .ch-pay { display: none; }
@media (min-width: 700px) { :root { --lk-foot: 124px; } .lk-bar .lk-pill { font-size: 17px; } }

/* long works (> SPONSOR_MIN): sponsor lock area + card; sponsor page */
.lk-from { display: block; margin-top: 4px; font-size: 15px; color: var(--lk-gold); }
.lk-btn.is-gold { margin-top: 4px; }
.wp-pay.is-sponsor .pp-pay { display: flex; align-items: center; }
.pp-moms, .ch-price small, .sw-unlock small { font-size: .55em; font-weight: 400; color: var(--lk-muted); white-space: nowrap; }
.sw-unlock small { font-size: .8em; }
.sp-list { margin: 0 0 8px; padding-left: 1.1em; line-height: 1.5; } .sp-list li { margin: 4px 0; } .sp-list li::marker { color: var(--lk-gold, #e3c07a); }

@media (prefers-reduced-motion: reduce) { .lk-stage, .lk-stage *, .lk-bar, .lk-bar * { transition: none !important; animation: none !important; } }
/* panel polish (Cesar 2026-10-23 18:50): roomier type, a hairline between text and Swish, a bigger QR with its caption
   inside the slot, and long works as one centred column with one gold primary »Kontakta oss« */
.ch-pay-in { gap: 0 28px; max-width: 470px; }
.ch-pay-txt { gap: 8px; }
.ch-kick { font-size: 11px; letter-spacing: .14em; }
.ch-line { font-size: 18px; line-height: 1.3; text-wrap: balance; }
.ch-price { font-size: 26px; }
.ch-pay .sw-foot { font-size: 13px; margin-top: 4px; }
@media (hover:hover) and (pointer:fine) {
  .ch-pay:not(.is-sponsor) .ch-pay-in { grid-template-columns: 1fr 1px auto; }
  .ch-pay:not(.is-sponsor) .ch-pay-in::before { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; margin: 6px 0; background: linear-gradient(transparent, rgba(212, 169, 85, .5), transparent); }
  .ch-pay:not(.is-sponsor) .ch-pay-txt { grid-column: 1; grid-row: 1; }
  .ch-pay:not(.is-sponsor) .sw-slot { grid-column: 3; grid-row: 1; --slot: 140px; margin: 0 0 22px; }
  .ch-pay .sw-go { font-size: 14px; gap: 10px; }
  .ch-pay .sw-qr { padding: 7px; }
  .ch-pay .sw-qr figcaption { top: calc(100% + 6px); font-size: 12px; }
}
.ch-pay.is-sponsor .ch-pay-in { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 400px; }
.ch-pay.is-sponsor .ch-pay-txt { display: contents; }
.ch-pay.is-sponsor .ch-kick { order: 1; } .ch-pay.is-sponsor .ch-line { order: 2; font-size: 19px; }
.ch-pay.is-sponsor .sw-slot { order: 3; width: auto; height: auto; margin: 4px 0 0; }
.ch-pay.is-sponsor .sw-slot > * { position: static; }
.ch-pay.is-sponsor .sw-foot { order: 4; margin: 0; }
.ch-pay.is-sponsor .sw-go.is-contact { display: inline-flex; align-items: center; min-height: 48px; padding: 0 30px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  background: var(--lk-grad); color: var(--lk-dark); font: 700 17px/1 var(--body); letter-spacing: .01em; }
.ch-pay.is-sponsor .sw-go.is-contact b { font-weight: 700; }
.ch-pay.is-sponsor .sw-go.is-contact:hover { filter: brightness(1.06); background: var(--lk-grad); }
@media (min-width: 700px) { .pt-frame > .ch-pay { height: 350px; max-width: 560px; } }
@media (max-width: 420px) { .ch-line { font-size: 16px; } .ch-price { font-size: 23px; } .ch-pay.is-sponsor .ch-line { font-size: 17px; } .ch-pay-in { max-width: 300px; } }
@media (hover:none),(pointer:coarse) {
  .ch-pay:not(.is-sponsor) .ch-pay-in { gap: 10px; }
  .ch-pay:not(.is-sponsor) .ch-price { margin: 2px 0 4px; }
  .ch-pay:not(.is-sponsor) .sw-go { min-height: 50px; padding: 6px 24px 6px 7px; box-shadow: inset 0 0 0 1.5px #d4a955, 0 6px 18px rgba(0, 0, 0, .4); }
}
/* Cesar 2026-10-23 19:44: the art must read behind the open panel. A landscape painting is shorter than the panel, so
   the near-opaque fill (.97) hid it completely; a lighter veil keeps it visible while the text stays legible */
.ch-pay.is-in .gl-bg { opacity: .66; }
.ch-pay .ch-pay-in { text-shadow: 0 1px 8px rgba(10, 7, 5, .85); }