/* Portal: a card binder. Released works are face-up cards in sleeves; works in progress are face-down. */
:root{
  --paper:#F4F1E8; --ink:#1E2026; --sub:#5E6370; --line:#D8D3C4;
  --binder:#2F3A55; --binder-dk:#222A40; --sleeve:rgba(255,255,255,.55);
  --pop:#FFE24A; --marker:#DB2F28; --gold:#E8C24A; --back:#2B2A4C;
  --pop-font:"Yusei Magic","Zen Kaku Gothic New",sans-serif;
  --body-font:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body-font);line-height:1.7;-webkit-text-size-adjust:100%}
a{color:inherit}
:focus-visible{outline:3px solid #2C6BD8;outline-offset:3px}

.hero{max-width:980px;margin:0 auto;padding:44px 20px 18px}
.kicker{display:inline-block;margin:0;background:var(--ink);color:#fff;font-weight:900;font-size:13px;letter-spacing:.12em;padding:4px 12px;border-radius:3px}
.hero h1{font:400 clamp(34px,7vw,56px)/1.15 var(--pop-font);margin:14px 0 8px;letter-spacing:.02em}
.lead{margin:0;font-size:16px;color:var(--sub);max-width:36em}
.author{display:inline-block;margin-top:12px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--marker)}

main{max-width:980px;margin:0 auto;padding:12px 16px 40px}
.binder{background:var(--binder);border-radius:14px;padding:22px 18px 26px;position:relative;box-shadow:inset 0 0 0 4px var(--binder-dk)}
/* binder rings */
.binder::before{content:"";position:absolute;left:-7px;top:40px;bottom:40px;width:14px;background:radial-gradient(circle at 50% 50%,#C9CDD6 0 5px,#8E95A6 5px 7px,transparent 7px) 0 0/14px 70px repeat-y}
.binder h2{margin:0;color:#fff;font:400 24px var(--pop-font)}
.binder-note{margin:2px 0 18px;color:#C9D0E2;font-size:13.5px}
.pockets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.pocket{background:var(--sleeve);border-radius:10px;padding:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

/* face-up work card */
.work{display:flex;flex-direction:column;height:100%;background:#F3E7C2;border:6px solid var(--gold);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s}
a.work:hover{transform:translateY(-3px)}
.work .hd{display:flex;align-items:baseline;gap:8px;padding:8px 10px 6px}
.work .st{font-size:11px;font-weight:900;background:#fff;border-radius:4px;padding:2px 6px;flex:none}
.work .st.soon{background:var(--pop)}
.work h3{margin:0;font-size:17px;font-weight:900;line-height:1.3}
.work .art{aspect-ratio:1200/630;margin:0 10px;border:3px solid #BFA25A;background:#fff center/cover no-repeat}
.work .body{padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.work .catch{margin:0;font-size:13.5px;line-height:1.6}
.work .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.work .tag{font-size:11.5px;font-weight:700;background:rgba(255,255,255,.75);border:1px solid #D9C27A;border-radius:999px;padding:1px 9px}
.work .play{display:flex;justify-content:space-between;align-items:center;border-top:2px solid #BFA25A;padding-top:8px;font-size:13px;font-weight:700}
.work .play b{background:var(--marker);color:#fff;border-radius:6px;padding:5px 14px;font-size:14px}

/* face-down work card */
.work.down{background:var(--back);border-color:#3C3A66;color:#E8E6F4;position:relative;min-height:330px;justify-content:center;align-items:center;text-align:center;padding:20px}
.work.down::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 50% 42%,transparent 0 46px,rgba(255,255,255,.07) 46px 49px,transparent 49px 72px,rgba(255,255,255,.07) 72px 75px,transparent 75px),
  repeating-conic-gradient(from 0deg at 50% 42%,rgba(255,255,255,.035) 0 6deg,transparent 6deg 12deg)}
.work.down .emb{position:relative;width:84px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 70%,#F7B35C 0 38%,transparent 39%),linear-gradient(180deg,#6A4C9C 0 60%,#3C3A66 60%);box-shadow:0 0 0 4px var(--gold)}
.work.down .st{position:relative;margin-top:18px;background:var(--gold);color:var(--ink)}
.work.down h3{position:relative;margin-top:8px;color:#fff}
.work.down .catch{position:relative;color:#C9C6E0}

.foot{max-width:980px;margin:0 auto;padding:0 20px 40px;color:var(--sub);font-size:12.5px}
.foot p{margin:4px 0}
@media (prefers-reduced-motion: reduce){a.work{transition:none}}

/* 404: an empty binder page with one face-down card numbered 404 */
.lost{max-width:760px;min-height:100vh;display:flex;align-items:center;padding:32px 16px}
.lost-binder{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:26px;align-items:center;padding:26px 24px}
.lost-pockets{grid-template-columns:repeat(2,1fr);gap:12px}
.pocket.empty{aspect-ratio:63/88;background:var(--sleeve);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 -40px 60px rgba(0,0,0,.12)}
.lost-card{aspect-ratio:63/88;background:var(--back);border:5px solid #3C3A66;border-radius:8px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;transform:rotate(-4deg)}
.lost-card::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.035) 0 6deg,transparent 6deg 12deg)}
.lost-card .emb{position:relative;width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 70%,#F7B35C 0 38%,transparent 39%),linear-gradient(180deg,#6A4C9C 0 60%,#3C3A66 60%);box-shadow:0 0 0 3px var(--gold)}
.lost-no{position:absolute;left:8px;bottom:6px;font:900 11px var(--body-font);color:var(--gold);letter-spacing:.06em}
.lost-mark{position:relative;font:400 26px var(--pop-font);color:var(--gold)}
.lost-text{color:#fff}
.lost-text .kicker{background:var(--gold);color:var(--ink)}
.lost-text h1{font:400 clamp(24px,4.4vw,32px)/1.35 var(--pop-font);margin:14px 0 10px}
.lost-text p{margin:0;color:#C9D0E2;font-size:14.5px}
.lost-back{display:inline-block;margin-top:20px;background:var(--marker);color:#fff;font-weight:900;text-decoration:none;border-radius:8px;padding:11px 20px}
.lost-back:hover{filter:brightness(1.08)}
@media (max-width:620px){.lost-binder{grid-template-columns:1fr}.lost-pockets{max-width:200px;margin:0 auto;width:100%}}