/* Public share page for one anime (/anime/<id>). Same ink-and-paper look, no scripts. */
:root {
    color-scheme: dark;
    --ink: #121212;
    --night: #171719;
    --paper: #f2eedf;
    --red: #ef4b3f;
    --line: rgba(242, 238, 223, .2);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.share-body { min-height: 100vh; margin: 0; color: var(--paper); background: var(--night); font: 16px/1.5 Arial, sans-serif; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.share-top { max-width: 1100px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 24px 18px; border-bottom: 1px solid var(--line); }
.share-brand { display: inline-flex; align-items: center; gap: 13px; color: var(--paper); text-decoration: none; font: 800 20px/1 Arial, sans-serif; letter-spacing: -.04em; }
.share-brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: var(--paper); background: var(--red); font: 400 24px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: 0; }
.share-brand small { display: block; margin-top: 5px; color: #a3a097; font: 500 11px/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }

.share-main { max-width: 1100px; margin: 0 auto; padding: 44px 24px 30px; }
.share-card { position: relative; display: grid; grid-template-columns: minmax(200px, 330px) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); padding: clamp(18px, 3vw, 34px); overflow: hidden; color: var(--ink); background-color: var(--paper); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(18, 18, 18, .055) 28px); box-shadow: 14px 14px 0 #080808; transform: rotate(-.4deg); }
.share-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(18, 18, 18, .14); pointer-events: none; }
.share-cover { position: relative; z-index: 1; align-self: start; }
.share-cover img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 8px 8px 0 rgba(18, 18, 18, .2); }
.share-cover-empty { display: grid; place-items: center; aspect-ratio: 2 / 3; color: rgba(18, 18, 18, .3); background: #ded7c2; font: 400 80px/1 "Yu Mincho", "MS Mincho", serif; }
.share-copy { position: relative; z-index: 1; min-width: 0; align-self: center; }
.share-kicker { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--red); font: 800 12px/1.4 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.share-kicker span { flex: none; white-space: nowrap; font: 400 20px/1 "Yu Mincho", "MS Mincho", serif; letter-spacing: .04em; }
.share-copy h1 { margin: 18px 0 0; font: 400 clamp(40px, 6vw, 76px)/.95 Georgia, "Times New Roman", serif; letter-spacing: -.05em; overflow-wrap: anywhere; }
.share-subtitle { margin: 12px 0 0; color: #57534c; font: italic 19px/1.4 Georgia, serif; }
.share-meta { margin: 18px 0 0; color: var(--red); font: 800 12px/1.6 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.share-genres { display: flex; flex-wrap: wrap; gap: 0; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid #aaa697; list-style: none; }
.share-genres li { padding: 0 9px 4px 0; color: #57534c; font: italic 16px/1.4 Georgia, serif; }
.share-genres li:not(:last-child)::after { content: ' /'; color: var(--red); }
.share-synopsis { max-width: 62ch; margin: 18px 0 0; color: #3d3a35; font: 17px/1.65 Georgia, serif; }
/* The publisher's synopsis credit, kept small under the text it belongs to. */
.share-credit { display: flex; align-items: center; gap: 10px; max-width: 62ch; margin: 10px 0 0; color: #6d685e; font: italic 13px/1.5 Georgia, serif; }
.share-credit::before { content: ''; flex: none; width: 22px; height: 1px; background: #aaa697; }
.share-score { margin: 14px 0 0; color: #57534c; font: 15px/1.5 Arial, sans-serif; }
.share-score b { color: var(--ink); font: 400 24px/1 Georgia, serif; }
.share-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.share-primary, .share-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 8px 22px; text-align: center; text-decoration: none; font: 800 13px/1.2 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
/* The app's Save (decision.css, copied here because this page loads nothing else): the bookmark icon, Save's ink,
   filled because it is the one thing to do on this page. */
.share-primary { gap: 10px; border: 1px solid var(--ink); color: var(--paper); background: var(--ink); }
.share-primary:hover { border-color: #3a3833; background: #3a3833; }
.share-primary-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.share-secondary { border: 1px solid var(--ink); color: var(--ink); }
.share-secondary:hover { border-color: var(--red); color: var(--red); }
.share-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 14px 0 0; color: #6d685e; font: 14px/1.5 Arial, sans-serif; }
.share-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font: italic 16px/1.4 Georgia, serif; text-decoration: underline; text-decoration-color: rgba(18, 18, 18, .35); text-underline-offset: 4px; }
.share-more a:hover { color: var(--red); text-decoration-color: currentColor; }
.share-seal { position: absolute; right: -18px; bottom: -40px; color: rgba(239, 75, 63, .1); font: 400 220px/1 "Yu Mincho", "MS Mincho", serif; pointer-events: none; user-select: none; }

.share-about { max-width: 62ch; margin: 44px auto 0; color: #a3a097; text-align: center; font: italic 16px/1.6 Georgia, serif; }
.share-about a { color: var(--paper); text-underline-offset: 3px; }
.share-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; padding: 24px 20px calc(36px + env(safe-area-inset-bottom)); font: 15px/1.5 Arial, sans-serif; }
.share-foot a { color: #c9c5b9; text-underline-offset: 3px; }

@media (max-width: 720px) {
    .share-top { padding-left: 16px; padding-right: 16px; }
    .share-main { padding: 26px 16px 20px; }
    .share-card { grid-template-columns: 1fr; gap: 22px; box-shadow: 8px 8px 0 #080808; transform: none; }
    .share-cover { width: min(220px, 64%); }
    .share-copy h1 { margin-top: 14px; }
    .share-synopsis { font-size: 16px; }
    .share-actions a { flex: 1 1 100%; }
    .share-seal { font-size: 160px; }
}