:root{--bg:#0b0b0b;--ink:#f2efe6;--mute:#9a978f;--paper:#f2efe6;--paper2:#e6e1d4;--txt:#161616;--hl:#f5e94a;--line:#2a2a2a}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;font-size:15px;line-height:1.5;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
mark{background:var(--hl);color:#111;padding:0 3px}
.adbar{font-size:11px;color:var(--mute);text-align:center;padding:6px 16px;border-bottom:1px solid var(--line)}
.adbar a{color:var(--ink)}
/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:0 auto;padding:14px 20px;position:relative}
.logo,.nav nav a,.burger{font-stretch:75%;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.04em;text-decoration:none}
.nav nav{display:flex;gap:56px}
.nav nav a:hover{color:var(--hl)}
.navt,.burger{display:none}
/* type */
h1,h2,.h2,h3{font-stretch:68%;font-weight:700;text-transform:uppercase;line-height:.92}
/* buttons */
.btn{display:inline-block;background:var(--ink);color:#111;text-decoration:none;font-stretch:75%;font-weight:700;text-transform:uppercase;font-size:13px;padding:11px 18px;border-radius:2px;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.dark{background:#111;color:var(--ink)}
/* hero */
.hero{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:start;padding-top:40px;padding-bottom:80px}
.hero h1{font-size:clamp(28px,3.4vw,40px);margin-bottom:14px}
.hero .sub{color:var(--mute);font-size:13px;max-width:300px;margin-bottom:22px}
.with{margin-top:34px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:12px}
.with span{width:100%;font-stretch:75%;text-transform:uppercase;color:var(--mute);font-size:10px;letter-spacing:.06em}
.with b{font-stretch:75%;font-weight:700;text-transform:uppercase}
.collage{position:relative;height:520px}
.kraft{position:absolute;right:0;top:10px;width:78%;height:480px;background:linear-gradient(135deg,#c79a63,#9c6f3e);transform:rotate(3deg);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.kraft::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 2px,transparent 2px 6px)}
.sheet{position:absolute;right:6%;top:0;width:66%;height:440px;background:var(--paper);color:var(--txt);padding:24px;transform:rotate(-1.5deg);box-shadow:0 20px 40px rgba(0,0,0,.45);display:flex;flex-direction:column}
.sheet-top{display:flex;justify-content:space-between;font-stretch:68%;font-weight:700;font-size:clamp(14px,1.6vw,20px);line-height:1}
.sheet-top .dot{font-size:26px}
.sheet-big{flex:1;display:flex;align-items:center;justify-content:center;font-stretch:62%;font-weight:800;font-size:clamp(120px,15vw,210px);line-height:1;letter-spacing:-.04em}
.sheet-foot{display:flex;justify-content:space-between;font-family:'Courier Prime',monospace;font-size:11px;border-top:1px solid #111;padding-top:8px}
.card-dark{position:absolute;left:4%;top:60px;width:170px;background:#141414;border:1px solid #333;padding:14px;transform:rotate(-4deg);box-shadow:0 14px 30px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:4px}
.card-dark span{font-stretch:75%;font-size:11px;color:var(--mute)}
.card-dark strong{font-stretch:62%;font-size:44px;line-height:.9;text-transform:uppercase}
.card-dark em{font-family:'Caveat',cursive;font-style:normal;font-size:20px;color:var(--hl)}
.sticky{position:absolute;left:0;bottom:70px;width:220px;background:#fbfaf5;color:var(--txt);padding:14px 16px;transform:rotate(3deg);box-shadow:0 12px 24px rgba(0,0,0,.5);font-family:'Courier Prime',monospace;font-size:15px;line-height:1.55}
.sticky small{display:block;font-family:'Archivo',sans-serif;font-size:10px;text-transform:uppercase;color:#666;margin-bottom:6px}
.ticket{position:absolute;right:2%;bottom:20px;background:var(--hl);color:#111;padding:10px 16px;transform:rotate(-6deg);display:flex;flex-direction:column;align-items:center;font-stretch:68%;font-weight:800;box-shadow:0 8px 18px rgba(0,0,0,.5)}
.ticket b{font-size:32px;line-height:1}
.ticket span{font-size:11px}
.clip{position:absolute;right:4%;top:-8px;width:18px;height:60px;border:3px solid #bbb;border-radius:10px;transform:rotate(8deg)}
/* sections */
.sec{padding-top:70px;padding-bottom:70px}
.sec-head{margin-bottom:34px}
.sec-head h2,.h2{font-size:clamp(26px,3vw,36px);margin-bottom:6px}
.sec-head p{color:var(--mute);font-size:13px}
.sec-head.center{text-align:center}
.paper{background:var(--paper);color:var(--txt);box-shadow:0 18px 40px rgba(0,0,0,.5)}
/* ranks */
.ranks{display:flex;flex-direction:column;gap:46px}
.rank{display:grid;grid-template-columns:300px 1fr;align-items:stretch}
.rank:nth-child(even) .cover{transform:rotate(1.5deg)}
.cover{position:relative;background:var(--c);color:#111;min-height:300px;padding:18px;transform:rotate(-1.5deg);box-shadow:0 18px 40px rgba(0,0,0,.6);overflow:hidden;z-index:2;display:flex;flex-direction:column}
.cover .no{font-family:'Courier Prime',monospace;font-size:13px}
.cover .bname{flex:1;display:flex;align-items:center;font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(40px,5vw,64px);line-height:.88;word-break:break-word;position:relative;z-index:1}
.cover .bname img{display:block;width:min(220px,85%);height:auto;max-height:90px;object-fit:contain;object-position:left center;filter:brightness(0)}
.tlogo{display:flex;align-items:center;gap:10px}
.tlogo img{height:18px;width:auto;max-width:70px;filter:brightness(0)}
.cover .lbl{font-family:'Caveat',cursive;font-size:24px;position:relative;z-index:1}
.cover .disc{position:absolute;right:-110px;top:50%;width:200px;height:200px;margin-top:-100px;border-radius:50%;background:radial-gradient(circle,#111 0 18%,#f2efe6 18% 21%,#111 21% 100%);opacity:.9}
.rank-body{padding:26px 30px;margin:18px 0;position:relative}
.rank-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}
.rank-top h3{font-size:34px}
.score{text-align:right}
.score b{font-stretch:62%;font-size:40px;line-height:1;display:block}
.score small{font-size:10px;text-transform:uppercase;color:#666}
.tag{font-family:'Courier Prime',monospace;margin-bottom:16px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.cols h4{font-stretch:75%;text-transform:uppercase;font-size:11px;color:#666;margin-bottom:6px;border-bottom:1px dashed #bbb;padding-bottom:4px}
.cols ul{list-style:none;font-family:'Courier Prime',monospace;font-size:14px}
.cols li::before{content:"— "}
.rank-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rank-cta small{font-size:11px;color:#666}
/* table postcard */
.postcard{position:relative;background:var(--paper);color:var(--txt);padding:34px 28px 22px;box-shadow:0 20px 50px rgba(0,0,0,.6);transform:rotate(-.4deg);max-width:1040px;margin:0 auto}
.postcard::before{content:"";position:absolute;inset:8px;border:1px solid #cfc9bb;pointer-events:none}
.stamp{position:absolute;right:22px;top:-18px;background:#c9412f;color:#fff;font-stretch:62%;font-weight:800;font-size:22px;padding:8px 12px;border:3px dashed #fff;transform:rotate(6deg)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:700px}
th{font-stretch:75%;text-transform:uppercase;font-size:11px;text-align:left;padding:10px;border-bottom:2px solid #111}
td{padding:12px 10px;border-bottom:1px solid #d6d0c2;font-family:'Courier Prime',monospace}
td a{font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;text-transform:uppercase}
.fine{font-size:11px;color:#666;margin-top:14px}
/* guide notes */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.note{background:var(--paper2) repeating-linear-gradient(transparent 0 27px,#cfc9bb 27px 28px);color:var(--txt);padding:22px 22px 22px 46px;min-height:360px;position:relative;box-shadow:0 14px 30px rgba(0,0,0,.5);display:flex;flex-direction:column}
.note::before{content:"";position:absolute;left:14px;top:20px;bottom:20px;width:12px;background:radial-gradient(circle,#0b0b0b 4px,transparent 5px) 0 0/12px 28px repeat-y}
.note:nth-child(2){transform:translateY(-10px)}
.note:nth-child(3){background-color:#ecebe7}
.note h3{font-family:'Courier Prime',monospace;font-weight:700;font-size:30px;line-height:1;margin-bottom:auto}
.note h3 span{font-size:16px;font-weight:400}
.note p{font-family:'Courier Prime',monospace;font-size:14px;margin:30px 0 16px}
.note em{font-stretch:68%;font-style:normal;text-transform:uppercase;font-weight:700;font-size:20px;text-align:right}
/* memos */
.memos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto}
.memo{background:#fbfaf5;color:var(--txt);padding:16px 18px;box-shadow:0 10px 24px rgba(0,0,0,.5);transform:rotate(-1deg);display:flex;flex-direction:column;gap:10px;border-bottom:3px dotted #cfc9bb}
.memo:nth-child(even){transform:rotate(1deg)}
.memo-h b{display:block;font-size:14px}
.memo-h small{font-size:11px;color:#666}
.memo p{font-family:'Courier Prime',monospace;font-size:14px;line-height:1.6}
.memo p::first-line{background:var(--hl)}
.memo-d{font-size:10px;color:#888;text-align:right}
/* letter */
.letter{max-width:560px;margin:0 auto;background:#fbfaf5;color:var(--txt);padding:40px 44px;font-family:'Courier Prime',monospace;font-size:14px;line-height:1.7;box-shadow:0 24px 60px rgba(0,0,0,.6);transform:rotate(-.8deg);position:relative;z-index:1}
.letter p{margin-bottom:12px}
.letter-from{text-align:right;font-size:12px;color:#555}
.sig{font-family:'Caveat',cursive;font-size:28px}
/* faq */
.faq{max-width:900px;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--paper);color:var(--txt);padding:16px 20px}
.faq summary{cursor:pointer;font-stretch:75%;font-weight:700;text-transform:uppercase;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{font-family:'Courier Prime',monospace;font-size:14px;margin-top:10px}
/* doc pages */
.page{min-height:50vh}
.doc{max-width:860px;padding:34px 38px;font-family:'Courier Prime',monospace;font-size:15px;line-height:1.7}
.doc h2{font-family:'Archivo',sans-serif;font-size:22px;margin:24px 0 8px}
.doc p,.doc ul{margin-bottom:12px}
.doc ul{padding-left:20px}
/* footer */
.foot{border-top:1px solid var(--line);margin-top:60px;padding-top:40px;overflow:hidden}
.foot-cols{max-width:1240px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.foot-cols h4{font-stretch:75%;text-transform:uppercase;font-size:11px;margin-bottom:8px}
.foot-cols a{display:block;font-stretch:75%;text-transform:uppercase;font-size:11px;color:var(--mute);text-decoration:none;margin-bottom:4px}
.foot-cols a:hover{color:var(--ink)}
.foot-legal{max-width:1240px;margin:30px auto 0;padding:0 20px;font-size:11px;color:var(--mute)}
.foot-legal p{margin-bottom:10px}
.foot-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;text-transform:uppercase;font-stretch:75%}
.wordmark{font-stretch:62%;font-weight:800;font-size:clamp(36px,10.5vw,170px);line-height:.8;color:var(--ink);text-align:center;white-space:nowrap;margin-top:30px;letter-spacing:-.02em}
.wordmark sup{font-size:.25em;vertical-align:top;font-weight:400}
.cookie{position:fixed;left:16px;bottom:16px;max-width:340px;background:var(--paper);color:var(--txt);padding:12px 14px;display:flex;gap:12px;align-items:center;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.6);z-index:50}
.cookie[hidden]{display:none}
.cookie button{background:#111;color:#fff;border:0;padding:8px 14px;font-weight:700;cursor:pointer}
/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:24px}
  .collage{height:440px}
  .rank{grid-template-columns:1fr}
  .cover{min-height:200px;transform:none!important}
  .rank-body{margin:0}
  .notes,.memos{grid-template-columns:1fr}
  .note{min-height:0}
  .note:nth-child(2){transform:none}
  .foot-cols{grid-template-columns:1fr 1fr}
  .burger{display:block;cursor:pointer}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);z-index:20}
  .navt:checked~nav{display:flex}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .collage{height:380px}
  .sheet{width:84%;height:340px;right:0}
  .kraft{width:90%;height:360px}
  .card-dark{width:130px;top:150px}
  .card-dark strong{font-size:32px}
  .sticky{width:190px;font-size:13px;bottom:20px}
  .cols{grid-template-columns:1fr}
  .rank-body,.doc,.letter{padding:22px 18px}
  .postcard{padding:30px 14px 18px}
}