:root{color-scheme:light;--paper:#f7f3e9;--ink:#30352d;--gold:#c8a74c;--line:#fffdf7;font-family:"Century Gothic","Trebuchet MS",Arial,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}img{display:block;max-width:100%;height:auto}body:has(dialog[open]){overflow:hidden}
.poster{position:relative;isolation:isolate;width:min(100%,735px);aspect-ratio:735/1041;margin:0 auto;overflow:hidden;container-type:inline-size;background:var(--paper)}
.paper,.corner,.gold-field,.halo,.outline-frame,.outline-oval{position:absolute;pointer-events:none}.paper{inset:0}.paper-one{background:#f0ecdd;clip-path:polygon(0 10.759%,36.735% 0,56.871% 0,16.327% 70.893%,0 62.44%)}.paper-two{background:#faf7f0;clip-path:polygon(49.796% 0,73.469% 0,100% 13.833%,100% 41.499%,80.408% 51.104%,44.898% 23.343%)}.corner{inset:0;background:var(--gold);clip-path:polygon(72.925% 0,100% 0,100% 13.929%)}.gold-field{inset:69.645% 0 0;background:#d7c172}.halo{left:10.748%;top:34.966%;width:77.959%;aspect-ratio:1;border-radius:50%;background:#e6d5a7}.outline-frame{left:11.429%;top:23.247%;width:73.605%;height:51.201%;border:1px solid var(--line)}.outline-oval{left:8.435%;top:27.858%;width:22.313%;height:46.494%;border:1px solid var(--line);border-radius:50%}
.navigation{position:absolute;z-index:5;left:4.082%;top:2.6%;width:70%;display:grid;grid-template-columns:65fr 81fr 94fr 96fr;column-gap:6%;align-items:center;font-size:clamp(11px,2.041cqw,15px);white-space:nowrap}.navigation a,.navigation button{position:relative;text-decoration:none;background:transparent;border:0;text-align:center;padding:8px 0;min-height:40px}.navigation .selected::before,.navigation button:hover::before,.navigation a:hover::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:50%;height:1.55em;transform:translateY(-50%);border-radius:50px;background:#d5be6d}.navigation a:hover::before,.navigation button:not(.selected):hover::before{opacity:.45}
.headline{margin:0;font-family:"Arial Black","Arial",sans-serif;font-weight:900;color:var(--gold);letter-spacing:0;line-height:1.18}.headline span{position:absolute;display:block;text-align:center;left:6.122%;white-space:nowrap}.headline span:first-child{top:9.894%;width:78.912%;font-size:10.612cqw}.headline span:last-child{top:17.579%;width:81.633%;font-size:9.524cqw}.signature{position:absolute;left:17.687%;top:17.291%;width:72.789%;transform:rotate(-10deg);pointer-events:none}
.star{position:absolute;background:var(--gold);clip-path:polygon(50% 0,58% 36%,65% 43%,100% 50%,65% 57%,58% 64%,50% 100%,42% 64%,35% 57%,0 50%,35% 43%,42% 36%)}.star-one{left:5.714%;top:11.335%;width:4.49%;height:4.131%}.star-two{left:84.898%;top:10.086%;width:9.524%;height:9.894%;background:var(--ink);transform:rotate(18deg)}.star-three{left:19.456%;top:28.915%;width:4.354%;height:4.227%}.star-four{left:79.456%;top:36.791%;width:4.49%;height:4.227%}.star-five{left:14.83%;top:51.585%;width:6.531%;height:6.34%;background:var(--ink)}
.aside-quote{position:absolute;left:78%;top:31.1%;width:16%;text-align:right;font-size:clamp(9px,1.905cqw,14px);line-height:1.15;margin:0}.character-window{position:absolute;left:15.782%;top:28.818%;width:75.694%;height:71.182%;overflow:hidden;pointer-events:none}.character{width:100%;max-width:none}.birthday{position:absolute;left:4.082%;top:43.804%;width:21.088%}.birthday strong{display:block;font-family:"Arial Black",Arial,sans-serif;letter-spacing:-.04em;font-size:5.442cqw;line-height:1.25;border-bottom:1px solid var(--ink);padding-bottom:.2em}.birthday span{display:block;margin-top:.8em;font-size:clamp(10px,1.905cqw,14px);line-height:1.12}.burst{position:absolute;left:68.163%;top:50.432%;width:23.401%;aspect-ratio:1;display:grid;place-items:center;color:#eadba5}.burst::before{position:absolute;content:"";inset:0;background:var(--ink);clip-path:polygon(50% 0%,56.1% 19.21%,69.13% 3.81%,67.44% 23.9%,85.36% 14.64%,76.1% 32.56%,96.19% 30.87%,80.79% 43.9%,100% 50%,80.79% 56.1%,96.19% 69.13%,76.1% 67.44%,85.36% 85.36%,67.44% 76.1%,69.13% 96.19%,56.1% 80.79%,50% 100%,43.9% 80.79%,30.87% 96.19%,32.56% 76.1%,14.64% 85.36%,23.9% 67.44%,3.81% 69.13%,19.21% 56.1%,0% 50%,19.21% 43.9%,3.81% 30.87%,23.9% 32.56%,14.64% 14.64%,32.56% 23.9%,30.87% 3.81%,43.9% 19.21%)}.burst span{z-index:1;text-align:center;font-size:clamp(9px,1.905cqw,14px);font-weight:700;line-height:1.15}
.poster-footer{position:absolute;left:4.082%;right:4.082%;top:85.591%;font-size:clamp(9px,1.905cqw,14px)}.credits{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:1.1em;border-bottom:1px solid var(--ink);white-space:nowrap}.credits strong{font-weight:700}.edition{display:flex;justify-content:space-between;align-items:start;padding-top:1em}.edition strong{font-family:"Arial Black",Arial,sans-serif;font-size:2.449cqw;line-height:.95}.edition>span{font-size:2.721cqw;font-weight:700}
.sheet{width:min(92vw,660px);max-height:88vh;max-height:88svh;overflow:auto;margin:auto;padding:28px;border:1px solid #d8c78f;border-radius:3px;color:var(--ink);background:var(--paper);box-shadow:0 20px 100px #30352d30}.sheet::backdrop{background:#30352d90;backdrop-filter:blur(5px)}.sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #d8c78f;padding-bottom:16px;margin-bottom:24px}.sheet-heading h2{margin:0;font-size:24px;font-weight:400}.close{width:44px;height:44px;border:0;background:none;font-size:32px;line-height:1}.close:hover{color:#8f7227}.profile-top{display:flex;align-items:center;gap:22px}.avatar{position:relative;flex:none;overflow:hidden;width:104px;aspect-ratio:1;border-radius:50%;background:#e6d5a7}.avatar img{position:absolute;max-width:none;width:137.143%;height:243.81%;left:-23.81%;top:-17.143%}.profile-top h3{font-size:36px;line-height:1.1;color:#9e7e2b;margin:0 0 10px}.profile-top p{margin:0;font-size:14px}.intro{font-size:clamp(21px,5vw,30px);line-height:1.35;letter-spacing:-.02em;margin:30px 0}.about{border-top:1px solid #d8c78f;padding-top:24px}.about h3{font-size:16px;margin:0 0 12px}.about p{font-size:20px;line-height:1.5;margin:0 0 24px}.facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:22px}.facts dt{font-size:12px;color:#756a4c;margin-bottom:6px}.facts dd{margin:0;font-size:14px;line-height:1.5}.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:28px 0 0}.tags li{background:#ecdfb5;padding:6px 10px;border-radius:20px;font-size:12px}.picture-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.picture-grid a{display:grid;place-items:center;background:#ece3cd;overflow:hidden;border-radius:2px}.picture-grid img{width:100%;max-height:65vh;object-fit:contain}.picture-grid .photo{height:100%;object-fit:cover}.illustration{display:block;background:#e6d5a7}.illustration img{width:auto;max-height:66vh;margin:auto}
@media(min-width:481px){.navigation{left:0;width:100%;height:40px;display:block}.navigation>:nth-child(1){position:absolute;left:4.082%;width:8.843%}.navigation>:nth-child(2){position:absolute;left:19.32%;width:11.02%}.navigation>:nth-child(3){position:absolute;left:40.136%;width:12.789%}.navigation>:nth-child(4){position:absolute;left:60.408%;width:13.061%}}

@media(max-width:480px){.navigation{width:92%;left:4%;top:.8%;column-gap:3%;font-size:13px}.navigation a,.navigation button{min-height:44px}.aside-quote{left:80%;width:17%;top:31.3%}.poster-footer{top:85.3%}.credits{font-size:10px;gap:4px}.edition strong{font-size:11px}.edition>span{font-size:13px}.sheet{padding:20px}.facts{gap:20px 14px}.picture-grid{gap:10px}.profile-top{gap:16px}.avatar{width:84px}.profile-top h3{font-size:30px}}
@media(prefers-reduced-motion:no-preference){.navigation a,.navigation button,.close{transition:color .16s ease}dialog[open]{animation:appear .18s ease-out}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}


/* Wide displays use a landscape composition; the portrait layout above
   remains intact on phones and portrait tablets. */
@media (min-width:900px) and (min-aspect-ratio:6/5) {
  body {
    display:grid;
    min-height:100vh;
    min-height:100svh;
    place-items:center;
    background:#eee9dc;
  }
  .poster {
    width:min(100vw,177.7778vh);
    width:min(100vw,177.7778svh);
    max-width:none;
    aspect-ratio:16/9;
    margin:0;
    box-shadow:0 8px 64px #413b2212;
  }
  .paper-one {
    clip-path:polygon(0 0,48% 0,22% 100%,0 100%);
  }
  .paper-two {
    clip-path:polygon(38% 0,75% 0,100% 32%,100% 64%,72% 47%);
  }
  .corner {clip-path:polygon(86% 0,100% 0,100% 25%)}
  .gold-field {inset:72% 0 0}
  .halo {left:52%;top:13%;width:43%}
  .outline-frame {left:48%;top:14%;width:42%;height:70%}
  .outline-oval {left:46%;top:24%;width:17%;height:63%}
  .navigation {
    left:6%;top:4.2%;width:39%;height:auto;
    display:grid;grid-template-columns:repeat(4,1fr);gap:6%;
    font-size:clamp(14px,1.05cqw,20px);
  }
  .navigation>:nth-child(n) {
    position:relative;left:auto;width:auto;min-height:44px;padding:10px 0;
  }
  .headline span {left:5.5%;width:47%;text-align:left;letter-spacing:-.035em}
  .headline span:first-child {top:20%;width:47%;font-size:6.1cqw}
  .headline span:last-child {top:32%;width:48%;font-size:5.45cqw}
  .signature {left:13%;top:32%;width:39%;transform:rotate(-10deg)}
  .character-window {left:53%;top:5.5%;width:42%;height:94.5%}
  .character {width:100%;height:auto}
  .star-one {left:4%;top:17%;width:2.4%;height:5.5%}
  .star-two {left:47%;top:9.5%;width:5.8%;height:10.4%}
  .star-three {left:48.5%;top:43%;width:2.4%;height:4.5%}
  .star-four {left:91.5%;top:43%;width:2.8%;height:5%}
  .star-five {left:24%;top:59%;width:3.4%;height:6%}
  .aside-quote {left:84%;top:16.5%;width:10%;font-size:clamp(12px,1cqw,19px)}
  .birthday {left:6%;top:55%;width:13%}
  .birthday strong {font-size:3.5cqw;line-height:1.2}
  .birthday span {font-size:clamp(12px,1cqw,19px);line-height:1.3}
  .burst {left:39%;top:60%;width:11.5%}
  .burst span {font-size:clamp(12px,1cqw,19px);line-height:1.3}
  .poster-footer {left:6%;right:55%;top:82%;font-size:clamp(12px,.95cqw,18px)}
  .credits {padding-bottom:.9em;gap:16px}
  .edition {padding-top:.9em}
  .edition strong {font-size:1.3cqw;line-height:.95}
  .edition>span {font-size:1.6cqw}
}

@media (max-width:480px) {
  .headline span:first-child {top:11%}
  .headline span:last-child {top:18.9%}
  .signature {top:18.6%}
  .sheet {max-height:calc(100svh - 32px);overscroll-behavior:contain}
  .sheet-heading {position:sticky;top:-20px;z-index:2;background:var(--paper);padding-top:8px}
  .close {flex:none;min-width:44px;min-height:44px}
}
@media (max-width:350px) {
  .navigation {font-size:12px;column-gap:2%}
  .facts {grid-template-columns:1fr}
  .picture-grid {grid-template-columns:1fr}
}