/* shared rule-page styles — PLAYROOM / risograph (retro print pop) */
:root{
  --paper:#f3ead6;--paper-2:#ece0c4;--paper-3:#e6d8b8;--paper-edge:#e2d3ad;
  --ink:#2b2622;--ink-soft:#6b6358;
  --vermilion:#e34a2f;--indigo:#2f4a8c;--mustard:#e0a52e;--green:#2f7d4f;
  --maxw:1000px;--accent:#e34a2f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Outfit",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
/* paper grain: feTurbulence noise, multiply */
body::after{content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;mix-blend-mode:multiply;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
::selection{background:var(--vermilion);color:var(--paper)}
.mono{font-family:"Space Mono",monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* header */
header{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:13px 28px;background:var(--paper);border-bottom:3px double var(--ink)}
.back{display:inline-flex;align-items:center;gap:9px;font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.04em;color:var(--ink-soft);transition:color .15s}
.back:hover{color:var(--vermilion)}.back svg{width:15px;height:15px}
.brand-mini{font-family:"Archivo Black","Bricolage Grotesque",sans-serif;font-weight:800;font-size:18px;letter-spacing:-.01em}
.brand-mini b{color:var(--vermilion)}

/* hero */
.r-hero{padding:54px 0 36px}
.r-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:820px){.r-hero .wrap{grid-template-columns:1fr;gap:30px}}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:2px solid var(--ink);background:var(--paper-2);border-radius:6px;padding:6px 13px;margin-bottom:20px;box-shadow:2px 2px 0 var(--ink)}
.eyebrow .dot{width:8px;height:8px;border-radius:0;background:var(--accent);border:1.5px solid var(--ink)}
h1{font-family:"Archivo Black","Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(44px,8vw,82px);line-height:.96;letter-spacing:-.01em;margin-bottom:10px;color:var(--ink)!important}
.subtitle{font-weight:700;font-size:clamp(17px,2.2vw,22px);color:var(--vermilion)!important;margin-bottom:22px}
.r-lede{color:var(--ink-soft);font-size:15.5px;font-weight:500;line-height:1.85;max-width:48ch;margin-bottom:24px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{font-family:"Space Mono",monospace;font-size:11.5px;color:var(--ink);display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:2px solid var(--ink);border-radius:6px;background:var(--paper-2);box-shadow:2px 2px 0 var(--ink)}
.chip .c-dot{width:7px;height:7px;border-radius:0;background:var(--accent);border:1px solid var(--ink)}
.cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.play-btn{display:inline-flex;align-items:center;gap:10px;font-family:"Space Mono",monospace;font-weight:700;font-size:13px;color:var(--paper)!important;background:var(--vermilion);border:2px solid var(--ink);padding:11px 20px;border-radius:6px;box-shadow:3px 3px 0 var(--ink);transition:transform .12s ease-out,box-shadow .12s ease-out}
.play-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}.play-btn svg{width:14px;height:14px}
.sub-link{font-family:"Space Mono",monospace;font-size:13px;color:var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);padding-bottom:1px;transition:color .15s,border-color .15s}
.sub-link:hover{color:var(--vermilion);border-color:var(--vermilion)}.sub-link svg{width:12px;height:12px}

/* phone */
.shot{width:230px;max-width:62vw;margin:0 auto;padding:8px;border-radius:18px;background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.shot .top{height:13px;display:flex;align-items:center;justify-content:center}
.shot .top span{width:42px;height:4px;border-radius:3px;background:var(--paper-edge)}
.shot .screen{border-radius:10px;overflow:hidden;aspect-ratio:390/844;background:var(--ink);border:1.5px solid var(--ink)}
.shot .screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.shot .cap{font-family:"Space Mono",monospace;font-size:10.5px;color:var(--ink-soft);text-align:center;margin-top:12px}
.shot .cap b{color:var(--vermilion);font-weight:700}

.rule-line{height:0;border-top:2px dashed var(--paper-edge)}

section{padding:52px 0}
.sec-tag{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--vermilion);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.sec-tag::after{content:"";flex:1;height:0;border-top:2px dashed var(--ink)}
.sec-head{font-family:"Archivo Black","Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(24px,3.4vw,34px);line-height:1.1;margin-bottom:30px;color:var(--ink)}

/* flow */
.flow{display:flex;flex-direction:column;gap:12px}
.flow .row{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding:20px 22px;border:2px solid var(--ink);border-radius:10px;background:var(--paper-2);box-shadow:4px 4px 0 var(--ink)}
.flow .n{font-family:"Archivo Black","Bricolage Grotesque",sans-serif;font-weight:800;font-size:34px;line-height:1;color:var(--accent);min-width:46px}
.flow h3{font-family:"Archivo Black","Bricolage Grotesque",sans-serif;font-weight:800;font-size:18px;margin-bottom:6px;color:var(--ink)}
.flow p{color:var(--ink-soft);font-size:14.5px;font-weight:500;line-height:1.75}
.flow b{color:var(--ink);font-weight:700}

/* cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:680px){.cards{grid-template-columns:1fr}}
.card{padding:22px;border:2px solid var(--ink);border-radius:10px;background:var(--paper-2);box-shadow:4px 4px 0 var(--ink)}
.card h3{font-family:"Archivo Black","Bricolage Grotesque",sans-serif;font-weight:800;font-size:18px;margin-bottom:12px;display:flex;align-items:center;gap:10px;color:var(--ink)}
.card h3 .ic{width:18px;height:18px;color:var(--vermilion)}
.card p{color:var(--ink-soft);font-size:14.5px;font-weight:500}
.card ul{list-style:none;margin-top:6px}
.card li{color:var(--ink-soft);font-size:14.5px;font-weight:500;padding:6px 0 6px 18px;position:relative;line-height:1.7}
.card li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;border-radius:0;background:var(--accent);border:1px solid var(--ink)}
.card b{color:var(--ink);font-weight:700}

/* ranks */
.ranks{display:flex;flex-direction:column;gap:7px}
.ranks .r{display:flex;align-items:center;gap:16px;padding:11px 16px;border:2px solid var(--ink);border-radius:8px;background:var(--paper-2);box-shadow:2px 2px 0 var(--ink)}
.ranks .r .k{font-family:"Space Mono",monospace;font-weight:700;font-size:12px;color:var(--vermilion);min-width:26px}
.ranks .r .nm{font-weight:700;color:var(--ink)}
.ranks .r .ds{color:var(--ink-soft);font-size:13px;margin-left:auto;text-align:right;font-family:"Space Mono",monospace}
@media(max-width:560px){.ranks .r .ds{display:none}}

.bignav{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:34px 0 0}
.bignav a{display:inline-flex;align-items:center;gap:10px;color:var(--ink-soft);font-family:"Space Mono",monospace;font-size:13px;transition:color .15s}
.bignav a:hover{color:var(--vermilion)}

footer{border-top:3px double var(--ink);padding:38px 0;margin-top:30px;font-family:"Space Mono",monospace;font-size:12px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease-out}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--vermilion);outline-offset:3px;border-radius:4px}