/* The Divinity of Love — layered poem room.
   Desktop (>=1100px): a 1536x1024 stage. Every position below is written in the artwork's own pixels
   and converted to percentages, so HTML lands exactly where the painted element was.
   Narrow (<1100px): panels stack in reading order. */
*{box-sizing:border-box}
html,body{margin:0}
body{background:#120a0d radial-gradient(ellipse at 50% 0,#2a1520 0,#120a0d 70%) fixed;color:#3a231b;
  font-family:'EB Garamond',Baskerville,'Baskerville Old Face','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:inherit}
:focus-visible{outline:2px solid #f0c66e;outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit}

:root{--gold:#e9c98d;--gold2:#c89b52;--cream:#f4e2bd;--ink:#2f1c15;--burg:#5a1622;--burg2:#3a0c15}
.script{font-family:'Pinyon Script','Snell Roundhand','Apple Chancery',cursive}

/* ---------- shared: panels whose children scale with the panel (container query units) ---------- */
.m-record,.m-letters,.act,.m-parchment,.m-nav,.room{container-type:inline-size}
.m-record{position:relative;--mw:436}
.rec-title{position:absolute;left:0;width:89.5%;top:44%;text-align:center;font-family:'Pinyon Script','Snell Roundhand',cursive;
  color:var(--gold);font-size:calc(31/436*100cqw);line-height:1;text-shadow:0 1px 2px #000a;pointer-events:none}
.rec-time{position:absolute;left:0;width:89.5%;top:63.8%;text-align:center;color:var(--gold);font-size:calc(15/436*100cqw);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;pointer-events:none}
/* song links on the dark inside of the record player's lid, above the record (no artwork changed) */
.rec-social{position:absolute;left:0;width:89.5%;top:calc(48/420*100%);margin:0;text-align:center;white-space:nowrap;
  font-size:calc(12.5/436*100cqw);line-height:1.3;font-style:italic;color:var(--gold2);text-shadow:0 1px 2px #000}
.rec-social a{color:var(--gold);text-decoration:none;border-bottom:1px solid #c89b5266}
.rec-social a:hover,.rec-social a:focus-visible{color:#fff1d4;border-bottom-color:var(--gold)}
.play{position:absolute;left:calc(32/436*100%);top:calc(342/420*100%);width:calc(318/436*100%);height:calc(60/420*100%);
  background:transparent;border:0;border-radius:999px;cursor:pointer;padding:0;color:var(--cream);-webkit-tap-highlight-color:transparent}
.play .ico{position:absolute;left:calc((1200 - 1132 - 15)/318*100%);top:50%;width:calc(30/318*100%);transform:translateY(-50%);fill:#f1d9a6;filter:drop-shadow(0 1px 1px #0008)}
.play .i-pause{display:none}.play.playing .i-play{display:none}.play.playing .i-pause{display:inline}
.play-label{position:absolute;left:calc((1250 - 1132)/318*100%);top:50%;transform:translateY(-52%);font-size:calc(29/436*100cqw);white-space:nowrap;text-shadow:0 1px 2px #000b}
.play:hover .play-label{color:#fff3d6}
.seek{position:absolute;left:calc(140/436*100%);width:calc(200/436*100%);top:calc(404/420*100%);height:calc(12/420*100%);margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold) var(--p,0%),#8d6a42 var(--p,0%))}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border-radius:50%;background:#f3d79c;border:1px solid #7a5426}
.seek::-moz-range-track{height:3px;border-radius:3px;background:#6b4a2e}.seek::-moz-range-progress{height:3px;background:var(--gold)}
.seek::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#f3d79c;border:1px solid #7a5426}

.m-letters{position:relative;color:#22140e;font-weight:500}
.m-letters h3{position:absolute;margin:0;left:calc(98/385*100%);top:calc(29/195*100%);font-weight:400;font-style:italic;font-size:calc(28/385*100cqw);line-height:1;white-space:nowrap}
.m-letters p{position:absolute;margin:0;left:calc(92/385*100%);top:calc(65/195*100%);font-size:calc(18/385*100cqw);line-height:1.25;white-space:nowrap}
.m-letters .write{position:absolute;left:calc(99/385*100%);top:calc(121/195*100%);font-style:italic;font-size:calc(25/385*100cqw);text-decoration:none;white-space:nowrap}
.m-letters .write:hover{text-decoration:underline;text-decoration-thickness:1px}

.act{position:relative;display:block;text-decoration:none;color:var(--cream);border-radius:calc(14/338*100cqw)}
.act strong{position:absolute;font-weight:500;white-space:nowrap;line-height:1;text-shadow:0 1px 2px #000}
.act small{position:absolute;white-space:nowrap;line-height:1;color:#e6d2ae}
.act:hover strong{color:#fff3d6}
.act-reaction{--mw:338}.act-reaction strong{left:calc(95/338*100%);top:calc(17/75*100%);font-size:calc(22/338*100cqw)}.act-reaction small{left:calc(95/338*100%);top:calc(44/75*100%);font-size:calc(12.5/338*100cqw)}
.act-keepsake{--mw:334}.act-keepsake strong{left:calc(88/334*100%);top:calc(17/75*100%);font-size:calc(22/334*100cqw)}.act-keepsake small{left:calc(88/334*100%);top:calc(44/75*100%);font-size:calc(12.5/334*100cqw)}
.act-share{--mw:253}.act-share strong{left:calc(76/253*100%);top:calc(17/75*100%);font-size:calc(22/253*100cqw)}.act-share small{left:calc(76/253*100%);top:calc(44/75*100%);font-size:calc(12.5/253*100cqw)}

.lang-switch{display:flex;border-radius:999px;border:1.5px solid #b48a4f;background:linear-gradient(#f6e8c9,#e5cfa5);
  box-shadow:inset 0 1px 0 #fff8,0 1px 3px #5a2e1a55;overflow:hidden}
.lang-switch button{flex:1;border:0;background:transparent;cursor:pointer;color:var(--ink);padding:0;border-radius:999px;-webkit-tap-highlight-color:transparent}
.lang-switch button[aria-pressed="true"]{background:linear-gradient(#7a2232,#4a0f1b 70%,#360a13);color:#f7e6c4;box-shadow:inset 0 0 0 1.5px #d6ab62,inset 0 2px 4px #0006}
.poem{white-space:pre-line;color:#24150f;font-weight:500;text-shadow:0 1px 0 #f7e6c455}
.poem .stanza{margin:0;break-inside:avoid}
.poem .ln{display:block;padding-left:1.1em;text-indent:-1.1em}
.poem .soon{margin:0;font-style:italic;text-align:center;white-space:normal}
.p-title span,.rec-title span{display:inline-block;white-space:nowrap}
[hidden]{display:none!important}
.play:disabled{cursor:default}.no-rec .play .ico{opacity:.35}.no-rec .play-label{font-size:calc(23/436*100cqw);opacity:.85}
.p-title{margin:0;font-family:'Pinyon Script','Snell Roundhand','Apple Chancery',cursive;font-weight:400;color:#1a100c;text-align:center;line-height:1;-webkit-text-stroke:.025em #1a100c;paint-order:stroke fill}
.p-subtitle{margin:0;font-style:italic;font-weight:500;text-align:center;color:#22140e}
.m-verse p{margin:0;font-style:italic;font-weight:500;color:#e8ca8f;text-align:center}
.m-verse a{text-decoration:none}.m-verse a:hover{text-decoration:underline}
.status{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#2a0f18ee;color:#f6dfb2;border:1px solid #b88c4e;
  padding:8px 16px;border-radius:6px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:10}
.status.show{opacity:1}

/* ================= DESKTOP: the painted room ================= */
@media (min-width:1100px){
  .room{position:relative;width:min(100%,1536px);aspect-ratio:1536/1024;margin:0 auto;
    background:url('images/nirvana_plate.jpg') 0 0/100% 100% no-repeat}
  .room>*{position:absolute;margin:0}
  /* artwork-pixel → percent helpers */
  .m-header,.m-portrait,.m-back,.m-parchment,.m-record,.m-letters,.act,.m-verse,.m-nav{
    left:calc(var(--x)/1536*100%);top:calc(var(--y)/1024*100%);width:calc(var(--w)/1536*100%);height:calc(var(--h)/1024*100%)}
  .m-header{--x:0;--y:0;--w:1536;--h:140}.logo-img{display:none}  /* logo stays as painted in the plate */
  .m-nav{--x:0;--y:143;--w:1536;--h:38}
  .m-nav ul{list-style:none;margin:0;padding:0}
  .m-nav li{position:absolute;top:0;height:100%;left:calc(var(--cx)/1536*100%);transform:translateX(-50%);display:flex;align-items:center}
  .m-nav a{color:#f3e0ba;font-weight:500;text-decoration:none;font-size:calc(20.5/1536*100cqw);white-space:nowrap;text-shadow:0 1px 2px #000;padding:0 .2em}
  .m-nav li.feature a{color:#f8e6c2;font-size:calc(21/1536*100cqw)}
  .m-nav a:hover{color:#fff4da;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
  .m-nav .sep{position:absolute;top:28%;height:44%;width:1px;left:calc(var(--cx)/1536*100%);background:linear-gradient(#c9a464,#f0d79e,#c9a464);opacity:.85}
  .m-back{--x:134;--y:212;--w:250;--h:32;display:flex;align-items:center;gap:.35em;text-decoration:none;color:#22140e;font-weight:500;font-size:calc(22/1536*100cqw);white-space:nowrap}
  .m-back:hover{text-decoration:underline;text-decoration-thickness:1px}
  .m-portrait{--x:118;--y:246;--w:394;--h:546}.m-portrait img{display:block;width:100%;height:100%}
  /* a book cover (no painted frame of its own) sits inside the room's painted gold frame */
  .portrait-cover .m-portrait{--x:130;--y:257;--w:368;--h:521;box-shadow:0 0 0 1px #3a2412,inset 0 0 0 1px #d9b36a}
  .portrait-cover .m-portrait img{object-fit:cover;box-shadow:inset 0 0 18px #0008}
  .portrait-cover .m-portrait::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px #c99a4e,inset 0 0 0 4px #2b170c88,inset 0 0 22px #000a}
  .poem.scrolls{-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent);padding-bottom:1.2em}
  .poem .soon{grid-column:1/-1;align-self:center;font-size:calc(21/576*100cqw)}
  .m-parchment{--x:512;--y:206;--w:576;--h:600}
  .m-parchment>*{position:absolute}
  .orn{display:none}
  .p-title{left:0;right:0;top:calc(18/600*100%);font-size:calc(80/576*100cqw)}
  .p-subtitle{left:0;right:0;top:calc(98/600*100%);font-size:calc(22.5/576*100cqw)}
  .lang-switch{left:calc(144/576*100%);top:calc(480/600*100%);width:calc(264/576*100%);height:calc(40/600*100%)}
  .lang-switch button{font-size:calc(19/576*100cqw)}
  .poem{left:calc(18/576*100%);top:calc(146/600*100%);width:calc(558/576*100%);height:calc(308/600*100%);overflow:auto;
    display:grid;grid-template-columns:calc(265/558*100%) calc(258/558*100%);column-gap:calc(18/558*100%);
    font-size:calc(var(--fit,17.4)/576*100cqw);line-height:1.28;scrollbar-width:thin;scrollbar-color:#9a7550 transparent}
  /* fit-tight: only set by fitPoem() for the two long Spanish poems when they still overflow at the normal floor */
  .poem.fit-tight{line-height:var(--fit-lh,1.28)}
  .poem.fit-tight .col>.stanza+.stanza{margin-top:var(--fit-gap,.8em)}
  .poem.fit-tight .ln{padding-left:var(--fit-indent,1.1em);text-indent:calc(var(--fit-indent,1.1em) * -1)}
  .poem .col>.stanza+.stanza{margin-top:.8em}
  .poem .col+.col{padding-left:calc(10/558*100cqw)}
  .m-record{--x:1100;--y:190;--w:436;--h:420}
  .m-letters{--x:1120;--y:605;--w:385;--h:195}
  .act-reaction{--x:335;--y:820;--w:338;--h:75}
  .act-keepsake{--x:688;--y:820;--w:334;--h:75}
  .act-share{--x:1035;--y:820;--w:253;--h:75}
  .m-actions{display:contents}
  .act{position:absolute}
  .m-verse{--x:480;--y:918;--w:550;--h:36;display:flex;align-items:center;justify-content:center}
  .m-verse p{font-size:calc(19.5/1536*100cqw)}
  .status{position:fixed}
}

/* ================= NARROW: stacked panels (iPhone, iPad portrait, small windows) ================= */
@media (max-width:1099.98px){
  .room{max-width:560px;margin:0 auto;padding:0 12px 40px}
  .m-header{margin:0 -12px}.logo-img{display:block;width:100%;height:auto}
  .m-nav{margin:6px 0 0;padding:8px 6px;border:1px solid #b08a4e;border-radius:10px;background:linear-gradient(#1c1018,#100810);box-shadow:inset 0 0 0 1px #3c2a18}
  .m-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px}
  .m-nav .sep{display:none}
  .m-nav a{display:inline-block;padding:7px 9px;color:#f0dcb4;text-decoration:none;font-size:16px;line-height:1.1;border-radius:6px}
  .m-nav li.feature a{background:linear-gradient(#6b1a2a,#3e0d18);box-shadow:inset 0 0 0 1px #c9a464}
  .m-back{display:inline-block;margin:14px 2px 10px;color:#ecd3a3;font-size:17px;text-decoration:none}
  .m-portrait{margin:0 auto 14px;max-width:420px}.m-portrait img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 4px 18px #000a}
  .portrait-cover .m-portrait img{border-radius:2px;border:3px solid #c99a4e;outline:1px solid #3a2412;outline-offset:2px}
  .poem .soon{font-size:19px;padding:10px 0}
  .m-parchment{display:flex;flex-direction:column;align-items:center;padding:30px 22px 26px;
    border:34px solid transparent;border-image:url('images/parchment_card.jpg') 60 fill / 34px stretch;
    margin:0 -6px 16px;filter:drop-shadow(0 4px 14px #000b)}
  .m-parchment{padding:0}
  .p-title{font-size:64px;margin-top:-6px}
  .p-subtitle{font-size:18px;margin-top:2px}
  .orn-flourish{display:block;width:72%;max-width:240px;mix-blend-mode:multiply;margin:6px 0 14px}
  .lang-switch{width:min(100%,280px);height:44px;margin-bottom:20px}
  .lang-switch button{font-size:18px}
  .poem{font-size:18px;line-height:1.5;align-self:stretch;padding:0 4px}
  .poem .stanza+.stanza,.poem .col+.col{margin-top:1em}
  .orn-motto{display:block;width:80%;max-width:280px;mix-blend-mode:multiply;margin:22px 0 0}
  .m-record{width:100%;aspect-ratio:436/420;background:url('images/record_player.jpg') top/100% auto no-repeat #2a160f;border-radius:6px;margin-bottom:14px}
  .seek{top:calc(400/420*100%)}
  .m-letters{width:100%;aspect-ratio:385/195;background:url('images/letters_card.jpg') 0 0/100% 100%;border-radius:6px;margin-bottom:14px}
  .m-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
  .act{width:100%;margin:0 auto}
  .act-reaction{aspect-ratio:338/75;background:url('images/btn_reaction.jpg') 0 0/100% 100%}
  .act-keepsake{width:calc(334/338*100%);aspect-ratio:334/75;background:url('images/btn_keepsake.jpg') 0 0/100% 100%}
  .act-share{width:calc(253/338*100%);aspect-ratio:253/75;background:url('images/btn_share.jpg') 0 0/100% 100%}
  .m-verse p{font-size:17px;line-height:1.4;padding:0 10px}
}

.act[aria-disabled="true"], .write[aria-disabled="true"]{cursor:default}
.write[aria-disabled="true"]:hover{text-decoration:none}
.act[aria-disabled="true"]:hover strong{color:inherit}
button.act{appearance:none;background:transparent;border:0;padding:0;font:inherit;text-align:inherit}

/* Exact approved language-specific cover: preserve all frame/art pixels, never crop. */
.portrait-cover.localized-cover .m-portrait img{object-fit:contain}
.portrait-cover.localized-cover .m-portrait::after{box-shadow:none}

/* Yes You display-only soft brightness (.88); original cover file bytes unchanged. */
body.yes-you-display .m-portrait img{filter:brightness(.88)}

/* A failed/loading overlay must never expose the unrelated Nirvana portrait baked into the room plate. */
.m-portrait{background:#211715}
.artwork-notice{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;background:#211715;color:#f2d7a4;font:18px/1.4 Georgia,serif;z-index:2}
.podemos-es-title .p-title{left:4%;right:4%;font-size:calc(56/576*100cqw);line-height:1.05}
@media(max-width:1099.98px){.m-portrait{position:relative}.m-portrait.artwork-pending,.m-portrait.artwork-unavailable{min-height:240px}.podemos-es-title .p-title{font-size:clamp(36px,9vw,52px)}}