:root{
--bg:#ffffff; --paper:#ffffff; --aged:#e4d3ae; --ink:#0d0d0d; --ink2:#615a4d; --line:#e4e0d8;
--pink:#ff7bc3; --lime:#d8ff45; --sticker:#0d0d0d; --sticker-t:#fffdf8;
--spine:54px; --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){--bg:#15130f;--paper:#1f1c17;--aged:#2e2618;--ink:#f2ede2;--ink2:#a0977f;--line:#39342b;}
}
:root[data-theme="dark"]{--bg:#15130f;--paper:#1f1c17;--aged:#2e2618;--ink:#f2ede2;--ink2:#a0977f;--line:#39342b;}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;overflow-anchor:none;scroll-behavior:auto}
body{overflow-anchor:none}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-feature-settings:"tnum" 1,"ss01" 1;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;transform:translateZ(0);
background-image:url("data:image/svg+xml;utf8,")}
button,input,textarea{font:inherit;color:inherit}
html{-webkit-tap-highlight-color:transparent}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a,.book,.sq{touch-action:manipulation}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
a{color:inherit}
/* ---------- top ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
/* ---- site header, as in the Wall Mockup ---- */
.site-wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,2.6vw,36px)}
.site{display:flex;align-items:center;gap:26px;padding-block:18px 10px}
.brand{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:22px;letter-spacing:-.01em;white-space:nowrap;text-decoration:none;color:var(--ink)}
nav.primary{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:500;flex:1;scrollbar-width:none}
nav.primary::-webkit-scrollbar{display:none}
nav.primary a{text-decoration:none;color:var(--ink2);padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap}
nav.primary a:hover{color:var(--ink)}
nav.primary a.is-active{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.searchbox{display:flex;align-items:center;gap:9px;background:color-mix(in oklab,var(--bg),var(--ink) 6%);border-radius:999px;padding:0 16px;min-width:250px;max-width:320px;flex:1;color:var(--ink2);font-size:13.5px;height:38px;cursor:text}
.searchbox svg{flex-shrink:0;opacity:.6}
.searchbox input{border:0;background:transparent;outline:none;width:100%;font-size:16px;color:var(--ink);min-width:0}
.searchbox input::placeholder{color:var(--ink2);opacity:.8}
.searchbox:focus-within{box-shadow:0 0 0 2px var(--ink)}
.header-actions{display:flex;align-items:center;gap:15px;margin-left:6px}
.btn-create{display:flex;align-items:center;gap:7px;background:var(--ink);color:var(--paper);border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;white-space:nowrap}
.btn-create:hover{background:var(--pink);color:#0d0d0d}
.icon-btn{position:relative;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;color:var(--ink)}
.icon-btn .dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:999px;background:var(--pink);box-shadow:0 0 0 2px var(--bg)}
.who{display:flex;align-items:center;gap:9px}
.who .avatar-fallback{width:36px;height:36px;border-radius:999px;flex-shrink:0;background:linear-gradient(150deg,#2c2c2c,#000)}
.who small{display:block;font-size:12px;line-height:1.35;font-weight:600;white-space:nowrap}
.subbar{display:flex;align-items:center;gap:14px;padding:0 0 10px}
.bdot{color:#ff7bc3}
#brand{display:flex;flex-direction:column;gap:3px;line-height:1}
#brand .slogan{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;font-size:12.5px;letter-spacing:0;color:var(--ink2);white-space:nowrap}
.site-foot .brand{color:#0d0d0d}
@media(max-width:700px){
.site{flex-wrap:wrap;row-gap:10px;padding-block:14px 8px}
.header-actions{margin-left:auto}
nav.primary{order:3;flex-basis:100%;overflow-x:auto;gap:18px}
.searchbox{order:4;flex-basis:100%;max-width:none;min-width:0;height:36px}
.who small{display:none}
}
/* ---------- the Fivehundrd card: your own shelf today ---------- */
.lc{position:relative;background:#f3ead3;color:#141210;border:1.5px solid #141210;border-radius:6px;padding:18px 18px 16px;
box-shadow:4px 4px 0 #141210;
background-image:radial-gradient(circle at 20% 10%,rgba(255,255,255,.35),transparent 55%)}
.lc::before{content:"";position:absolute;top:14px;right:16px;width:12px;height:12px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px #141210}
.lc-top{display:flex;justify-content:space-between;gap:10px;white-space:nowrap;font-size:12px;font-weight:600;color:rgba(20,18,16,.62);padding-right:30px}
.lc-h{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:28px;line-height:1;letter-spacing:-.02em;margin:10px 0 14px}
.lc-h .bdot{color:#ff7bc3}
.lc-entry{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;width:100%;
background:#141210;color:#f3ead3;border-radius:4px;padding:11px 14px}
.lc-entry span{font-size:12px;opacity:.72;grid-column:1}
.lc-entry b{font-size:24px;font-weight:900;letter-spacing:-.03em;grid-column:1;line-height:1}
.lc-entry em{grid-column:2;grid-row:1/3;font-style:normal;font-size:13px;font-weight:700;background:#d8ff45;color:#141210;border-radius:999px;padding:7px 12px}
.lc-entry:hover em{background:#ff7bc3}
.lc-entry:focus-visible,.lc-row:focus-visible{outline:2px solid #ff7bc3;outline-offset:2px}
.lc-stamps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 12px}
.lc-stamps div{border:1.5px dashed rgba(20,18,16,.55);border-radius:4px;padding:8px 8px 7px;transform:rotate(var(--r,0deg));background:rgba(255,253,248,.55)}
.lc-stamps div:nth-child(1){--r:-1.2deg}.lc-stamps div:nth-child(2){--r:.8deg;border-color:#e0559f}.lc-stamps div:nth-child(3){--r:-.5deg}
.lc-stamps b{display:block;font-size:26px;font-weight:900;letter-spacing:-.04em;line-height:1}
.lc-stamps div:nth-child(2) b{color:#c42f7e}
.lc-stamps span{display:block;font-size:11.5px;font-weight:600;color:rgba(20,18,16,.68);margin-top:4px;line-height:1.2}
.lc-lanes{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px}
.lc-lanes span{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:4px 8px 4px 6px;border-radius:999px;background:var(--lb);color:var(--lt)}
.lc-lanes span.zero{background:transparent;color:rgba(20,18,16,.4);box-shadow:inset 0 0 0 1px rgba(20,18,16,.18)}
.lc-lanes svg{width:13px;height:13px}
.lc-row{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:1px 10px;width:100%;padding:10px 0;border-top:1.5px solid #141210}
.lc-row span{font-size:11.5px;font-weight:600;color:rgba(20,18,16,.62)}
.lc-row b{font-size:16px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-column:1}
.lc-row em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:12.5px;font-weight:700}
.lc-row:hover b{text-decoration:underline;text-underline-offset:3px}
.lc-row.mine{background:#ff7bc3;border:0;border-radius:4px;padding:10px 12px;margin:2px 0 8px}
.lc-row.mine span{color:rgba(20,18,16,.75)}
.sv-box{border-top:1.5px solid #141210;padding-top:10px;margin-bottom:12px}
.sv-head{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:600;color:rgba(20,18,16,.62);margin-bottom:6px}
.sv-head b{font-size:13px;font-weight:900;color:#141210;background:#ff7bc3;border-radius:999px;padding:1px 8px}
.sv-list{list-style:none;margin:0;padding:0;max-height:none}
.sv-list{list-style:none;margin:0;padding:4px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 8px}
.msp{position:relative;list-style:none;min-width:0}
.sq{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;width:100%;position:relative;text-decoration:none;color:#141210}
.sq-art{position:relative;display:block;aspect-ratio:1;border-radius:5px;overflow:hidden;background:var(--c1);border:1px solid rgba(20,18,16,.18);border-bottom:3px solid var(--c1);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.sq-art svg,.sq-art img{display:block;width:100%;height:100%;object-fit:cover}
.sq-ini{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:900;color:var(--st)}
.sq-t{position:absolute;left:4px;top:4px;font-size:9.5px;font-weight:900;background:#fff;color:#141210;border-radius:3px;padding:1px 4px;line-height:1.3}
.sq-t.soon{background:#141210;color:#d8ff45}
.sq-t.off{background:#141210;color:#fff}
.sq-n{display:block;font-size:10.5px;font-weight:800;letter-spacing:-.02em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.msp:not(.gone) .sq:hover .sq-art{transform:translateY(-2px);box-shadow:0 6px 10px -6px rgba(0,0,0,.45)}.sq-art{transition:transform .15s,box-shadow .15s}}
.sq:focus-visible{outline:2px solid #ff7bc3;outline-offset:2px;border-radius:5px}
.msp.gone .sq-art{filter:grayscale(.85);opacity:.55}
.msp .sv-x{position:absolute;right:-5px;top:-5px;width:20px;height:20px;font-size:13px;line-height:1;border-radius:50%;z-index:2;background:#fff;color:#141210;border:1px solid rgba(20,18,16,.25);display:grid;place-items:center;padding:0}
.msp .sv-x:hover{background:#ff7bc3}
@media (hover:hover){.msp .sv-x{opacity:0;transition:opacity .12s}.msp:hover .sv-x,.msp .sv-x:focus-visible{opacity:1}}
.msp.landing{visibility:hidden}
.msp.landed .sq-art{animation:land .38s cubic-bezier(.2,1.4,.4,1)}
@keyframes land{0%{transform:translateY(-6px) scale(1.03)}100%{transform:none}}
/* ---------- mobile: bottom bar and the card as a sheet ---------- */
.tabbar,.card-veil,.sheet-handle{display:none}
@media (max-width:979px){
body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
.header-actions .btn-create{display:none}
.tabbar{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;color:#0d0d0d;border-top:1px solid #e4e0d8;
padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));gap:6px;box-shadow:0 -6px 16px -12px rgba(0,0,0,.25)}
.tabbar button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:52px;border-radius:10px;font-size:11.5px;font-weight:700;color:rgba(13,13,13,.55);position:relative}
.tabbar button svg{width:22px;height:22px}
.tabbar button.on{color:#0d0d0d}
.tabbar button.on::after{content:"";position:absolute;bottom:3px;width:18px;height:3px;border-radius:2px;background:#ff7bc3}
.tabbar button:focus-visible{outline:2px solid #ff7bc3;outline-offset:-2px}
.tabbar .tb-create{background:#d8ff45;color:#0d0d0d;margin:2px 4px}
.tabbar .tb-create.on::after{display:none}
.tb-ic{position:relative;display:grid}
.tb-n{position:absolute;top:-6px;right:-12px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ff7bc3;color:#0d0d0d;font-size:11px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.tb-n[hidden]{display:none}
.tb-n.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
aside.colophon{position:fixed;left:0;right:0;bottom:0;z-index:85;max-height:calc(100% - 70px);overflow-y:auto;overscroll-behavior:contain;
background:var(--bg);border-radius:16px 16px 0 0;padding:8px 14px calc(82px + env(safe-area-inset-bottom,0px));
box-shadow:0 -18px 40px -12px rgba(0,0,0,.45);transform:translateY(105%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s .32s}
aside.colophon.on{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s}
.sheet-handle{display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 12px;border:0;padding:0}
.card-veil{display:block;position:fixed;inset:0;z-index:84;background:rgba(13,13,13,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.card-veil.on{opacity:1;pointer-events:auto}
body .code{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:979px) and (prefers-reduced-motion:reduce){aside.colophon,aside.colophon.on{transition:none}}
/* ---------- the wall: clean tiles ---------- */
.head{display:none}
.rack{padding-top:16px}
.shelf-row{list-style:none;margin:0 0 14px}
.books{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));align-items:start;gap:10px}
.books .spot{min-width:0}
.stand{position:relative}
.book{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;width:100%;
background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
transition:border-color .15s,box-shadow .15s,transform .15s}
.bk-art{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--c1)}
.bk-art svg,.bk-art img{display:block;width:100%;height:100%;object-fit:cover}
.bk-logo{position:absolute;inset:0;display:grid;place-items:center;background:var(--c1)}
.bk-logo img{width:58%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:6px}
.bk-strip{display:flex;flex-direction:column;gap:1px;padding:8px 9px 9px;min-width:0;color:var(--ink);border-top:3px solid var(--c1)}
.bk-strip b{font-size:13px;font-weight:900;letter-spacing:-.035em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-strip small{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--ink2);white-space:nowrap;overflow:hidden}
.bk-strip small svg{width:10px;height:10px;flex:none}
.bk-no{position:absolute;right:6px;top:6px;z-index:2;font-size:10px;font-weight:900;color:#0d0d0d;background:#fff;padding:2px 5px;border-radius:3px}
.book .new{position:absolute;left:7px;top:7px;z-index:2;width:10px;height:10px;border-radius:50%;background:#ff7bc3;box-shadow:0 0 0 2px #0d0d0d}
.book .prog{position:absolute;left:0;bottom:0;height:3px;background:var(--c1);opacity:.9}
.book:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
@media (hover:hover){.spot:not(.open):not(.vacant) .book:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 16px -10px rgba(0,0,0,.35)}}
.spot.open .book{border-color:#ff7bc3;box-shadow:0 0 0 2px #ff7bc3}
.cap{padding:7px 2px 4px;min-width:0;cursor:pointer}
.cap-l{display:flex;justify-content:space-between;align-items:center;gap:4px;flex-wrap:wrap}
.cap-l .t{font-size:11.5px;font-weight:800;color:var(--ink)}
.cap .meta{display:flex;gap:3px}
.cap .meta i{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:10.5px;font-weight:800;background:#ff7bc3;color:#0d0d0d;padding:1px 6px 1px 5px;border-radius:999px}
.cap .meta svg{width:10px;height:10px;stroke-width:2.8}
.vbook{background:transparent;border:1.5px dashed var(--line);aspect-ratio:1/1.28;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--ink2);text-align:center;padding:6px}
@media (hover:hover){.vacant .vbook:hover{border-color:#ff7bc3;color:var(--ink)}}
.vacant .cap{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.vacant .vno{font-size:12px;color:var(--ink2)}
.vacant .v2{font-size:11px;font-weight:800;background:#ff7bc3;color:#0d0d0d;border-radius:999px;padding:3px 9px;white-space:nowrap}
.filler .stand{pointer-events:none}
/* the opened tile, full size under its row, a notch points at the one you picked */
.panel{list-style:none;position:relative;margin:4px 0 24px}
.panel::before{content:"";position:absolute;top:-9px;left:calc(var(--nx,50%) - 10px);width:20px;height:10px;z-index:2;background:var(--c1);clip-path:polygon(50% 0,100% 100%,0 100%)}
.panel .cover{margin:0;padding:6px;border-radius:8px;background:var(--c1);box-shadow:0 18px 30px -22px rgba(0,0,0,.45)}
.panel .cover::before,.panel .cover::after{display:none}
.panel .cover>.art,.panel .cover>.body{box-shadow:none}
.panel .cover>.art{border-radius:4px 0 0 4px}
.panel .cover>.body{border-radius:0 4px 4px 0}
@media (max-width:699px){.panel .cover>.art{border-radius:4px 4px 0 0}.panel .cover>.body{border-radius:0 0 4px 4px}}
@media (min-width:640px){.bk-strip b{font-size:14px}.bk-strip small{font-size:11px}}
@media (prefers-reduced-motion:reduce){.book{transition:none}}
/* ---------- phones: the opened tile comes forward ---------- */
.dveil{position:fixed;inset:0;z-index:91;background:rgba(13,13,13,.45);-webkit-backdrop-filter:blur(4px) saturate(.9);backdrop-filter:blur(4px) saturate(.9);opacity:0;pointer-events:none;transition:opacity .3s}
.dveil.on{opacity:1;pointer-events:auto}
.dsheet{position:fixed;left:0;right:0;bottom:0;z-index:92;display:flex;flex-direction:column;
max-height:calc(100dvh - 40px - env(safe-area-inset-top,0px));border-radius:22px 22px 0 0;background:var(--c1,#0d0d0d);
padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));transform:translateY(105%);box-shadow:0 -24px 48px -16px rgba(0,0,0,.5)}
.dsheet[hidden]{display:none}
.dsheet .grab{flex:none;width:42px;height:5px;border-radius:3px;margin:2px auto 8px;background:var(--st,#fff);opacity:.55}
.dsheet-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:14px}
.dsheet .cover{margin:0;padding:0;background:none;box-shadow:none;animation:none;border-radius:14px;overflow:hidden}
.dsheet .cover::before,.dsheet .cover::after{display:none}
.dsheet .cover>.art,.dsheet .cover>.body{box-shadow:none}
.dsheet .art{aspect-ratio:1/1}
.dsheet .body{padding:18px 16px 20px}
.dsheet .title{font-size:clamp(32px,10vw,44px)}
.dclose{position:absolute;top:24px;right:20px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#0d0d0d;font-size:24px;line-height:1;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.dclose:active{transform:scale(.94)}
.dclose:focus-visible{outline:2px solid #ff7bc3;outline-offset:2px}
.art-ghost{z-index:93}
.art-ghost svg,.art-ghost img{display:block;width:100%;height:100%;object-fit:cover}
html.sheet-lock,html.sheet-lock body{overflow:hidden}
.act.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@media (min-width:700px){.dsheet,.dveil{display:none!important}}
.flyer{position:fixed;z-index:95;pointer-events:none;margin:0;will-change:transform,opacity}
.sv{all:unset;box-sizing:border-box;cursor:pointer;flex:1;min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 0;text-decoration:none;color:inherit}
.sv-logo{width:28px;height:28px;border-radius:3px;display:grid;place-items:center;font-size:10.5px;font-weight:900;overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.3)}
.sv-logo img{width:100%;height:100%;object-fit:cover}
.sv-t{min-width:0;display:flex;flex-direction:column}
.sv-t b{font-size:14px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-t small{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:rgba(20,18,16,.6);white-space:nowrap;overflow:hidden}
.sv-t small svg{width:11px;height:11px;flex:none}
.sv em{font-style:normal;font-size:12px;font-weight:700}
.sv em.soon{background:#141210;color:#d8ff45;border-radius:999px;padding:2px 7px}
.sv:hover b{text-decoration:underline;text-underline-offset:3px}
.sv:focus-visible,.sv-x:focus-visible,.sv-more:focus-visible,.keep button:focus-visible{outline:2px solid #ff7bc3;outline-offset:2px}
.sv-x{border:0;background:transparent;width:28px;height:28px;border-radius:50%;font-size:17px;line-height:1;color:rgba(20,18,16,.55);flex:none}
.sv-x:hover{background:rgba(20,18,16,.08);color:#141210}
.gone .sv{opacity:.55}
.sv-more{display:block;width:100%;margin-top:8px;border:1.5px solid #141210;background:transparent;border-radius:999px;padding:7px;font-size:13px;font-weight:700;color:#141210}
.sv-more:hover{background:#141210;color:#f3ead3}
.sv-empty{font-size:13px;line-height:1.45;margin:2px 0 0;color:rgba(20,18,16,.7)}
.keep{margin-top:10px;background:#d8ff45;border-radius:4px;padding:10px 12px;box-shadow:inset 0 0 0 1.5px #141210}
.keep p{margin:0 0 8px;font-size:12.5px;line-height:1.45;font-weight:600}
.keep button{border:0;background:#141210;color:#d8ff45;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:800}
.keep button:hover{background:#ff7bc3;color:#141210}
.kept{font-size:12px;font-weight:600;margin:8px 0 0;color:rgba(20,18,16,.7)}
.remind{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.4;margin:14px 0 4px}
.remind input{margin-top:2px;accent-color:#141210}
@media (min-width:980px){.colophon{max-height:calc(100vh - var(--headY,90px) - 8px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:6px;padding-bottom:12px}}
.lc-wall{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:rgba(20,18,16,.72);padding-top:10px;border-top:1.5px solid #141210}
.lc-wall b{color:#141210;font-weight:800}
.lc-help{font-size:12px;line-height:1.55;color:var(--ink2);margin:14px 2px 0}
.lc-help kbd{font:inherit;font-weight:700;border:1px solid var(--line);border-radius:4px;padding:0 5px;background:var(--paper)}
.no-hits{list-style:none;padding:28px 6px;font-size:15px;color:var(--ink2)}
.ring-note{list-style:none;font-size:13px;line-height:1.45;color:var(--ink2);padding:2px 4px 12px}
.ring-note b{color:var(--ink);font-weight:800}
.ring-note.end{padding:14px 4px 0}
.ring-wrap{list-style:none;display:flex;align-items:center;gap:10px;margin:10px 0 12px;font-size:12px;font-weight:700;color:var(--ink2)}
.ring-wrap::before,.ring-wrap::after{content:"";flex:1;height:0;border-top:1px dashed color-mix(in oklab,var(--ink2),transparent 40%)}
.mk-e{background:#d8ff45;height:3px;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.no-hits b{color:var(--ink)}
/* ---- site footer, in the same voice ---- */
.site-foot{position:relative;z-index:1;margin-top:10px;background:#fff;color:#0d0d0d;border-top:1px solid #0d0d0d}
.site-foot a{color:#0d0d0d}
.code,.head{transition:opacity .2s}
.at-foot .code,.at-foot .head{opacity:0;pointer-events:none}
.site-foot .in{max-width:1240px;margin:0 auto;padding:34px clamp(16px,2.6vw,36px) calc(28px + env(safe-area-inset-bottom,0px));display:grid;gap:28px;grid-template-columns:1fr}
.site-foot .brand{font-size:28px}
.site-foot .tag{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;font-size:18px;margin:8px 0 0;line-height:1.25}
.site-foot h2{font-size:12px;font-weight:700;margin:0 0 10px;color:#615a4d}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-foot ul a{text-decoration:none;font-size:14px;font-weight:500}
.site-foot ul a:hover{text-decoration:underline;text-underline-offset:3px}
.site-foot .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.site-foot .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:12px;color:#615a4d;border-top:1px solid #e4e0d8;padding-top:16px;grid-column:1/-1}
@media(min-width:760px){.site-foot .in{grid-template-columns:1.2fr 2fr}}
.bar{display:flex;align-items:center;gap:14px;padding:12px 16px 8px;max-width:1240px;margin:0 auto}
.wm{display:inline-block;background:var(--sticker);color:var(--sticker-t);text-decoration:none;font-weight:900;font-size:21px;letter-spacing:-.055em;padding:5px 11px 6px 9px;transform:skewX(-8deg);border-radius:2px;line-height:1}
.wm span{display:inline-block}
.wm .p{color:var(--pink)} .wm .l{color:var(--lime)}
.pulse{font-size:12px;color:var(--ink2);line-height:1.3;flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:700px){.pulse{font-size:12.5px}}
.pulse b{color:var(--ink);font-weight:700}
.claim-btn{margin-left:auto;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:9px 15px;font-weight:700;font-size:13.5px;white-space:nowrap}
.claim-btn:hover{background:var(--pink);color:#0d0d0d}
.lanes{display:flex;gap:6px;padding:4px 16px 10px;overflow-x:auto;scrollbar-width:none;max-width:1240px;margin:0 auto}
.lanes::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--ink2)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.drop{border-style:dashed;color:var(--ink)}
.chip.drop:hover{background:var(--lime);color:#0d0d0d;border-color:var(--lime)}
/* ---------- layout ---------- */
.stage{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px))}
.code,.scrub{display:none!important}
.colophon{display:block;padding:16px 2px 18px}
@media (min-width:980px){
.stage{grid-template-columns:320px minmax(0,820px);gap:44px;padding:0 24px;justify-content:center}
.colophon{position:sticky;top:calc(var(--headY,90px) + 4px);align-self:start;padding:18px 8px 14px 0}
}
kbd{font:inherit;font-weight:700;border:1px solid var(--line);border-radius:4px;padding:0 5px;background:var(--paper)}
/* ---------- the rack ---------- */
.rack{list-style:none;margin:0;padding:10px 0 45vh}
.spot{position:relative}
/* each spot is a real book lying on the shelf: cloth spine, raised bands, a library label */
.spine{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:40px 32px minmax(0,1fr) auto;align-items:center;gap:11px;
width:100%;height:var(--h,54px);padding:0 16px 0 14px;margin-bottom:5px;border-radius:7px 3px 3px 7px/50% 3px 3px 50%;color:var(--st,#fffdf8);position:relative;overflow:hidden;
background:
/* rounded spine: light catches the top, the belly falls into shadow */
linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.12) 14%,rgba(255,255,255,0) 36%,rgba(0,0,0,0) 58%,rgba(0,0,0,.14) 78%,rgba(0,0,0,.46) 100%),
/* book cloth weave */
repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
repeating-linear-gradient(-45deg,rgba(0,0,0,.045) 0 1px,transparent 1px 3px),
color-mix(in oklab,var(--c1,#0d0d0d),var(--aged) calc(var(--age,0)*28%));
box-shadow:0 1px 0 rgba(0,0,0,.3),0 5px 8px -5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18);
transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s}
/* headbands at both ends, then two raised bands near head and tail, like a bound book */
.spine::before{content:"";position:absolute;inset:0;pointer-events:none;
background:
repeating-linear-gradient(180deg,var(--c2,#ff7bc3) 0 2px,rgba(0,0,0,.6) 2px 4px) left 0 top 0/4px 100% no-repeat,
repeating-linear-gradient(180deg,var(--c2,#ff7bc3) 0 2px,rgba(0,0,0,.6) 2px 4px) right 0 top 0/4px 100% no-repeat,
linear-gradient(90deg,rgba(0,0,0,.34) 0 1px,rgba(255,255,255,.28) 1px 2px) left 8px top 0/2px 100% no-repeat,
linear-gradient(90deg,rgba(0,0,0,.34) 0 1px,rgba(255,255,255,.28) 1px 2px) left 11px top 0/2px 100% no-repeat,
linear-gradient(90deg,rgba(0,0,0,.34) 0 1px,rgba(255,255,255,.28) 1px 2px) right 8px top 0/2px 100% no-repeat,
linear-gradient(90deg,rgba(0,0,0,.34) 0 1px,rgba(255,255,255,.28) 1px 2px) right 11px top 0/2px 100% no-repeat}
.spine:focus-visible{outline:2px solid var(--pink);outline-offset:1px}
.spine .no{font-size:11.5px;font-weight:800;color:#1a1712;background:#f3ead3;text-align:center;padding:4px 0;border-radius:2px;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 1px 1px rgba(0,0,0,.3);position:relative;z-index:1}
.spine .logo{width:32px;height:32px;border-radius:3px;overflow:hidden;display:grid;place-items:center;font-weight:900;font-size:13px;letter-spacing:-.05em;
background:var(--c3);color:var(--c1);box-shadow:0 0 0 1.5px color-mix(in oklab,var(--st,#fff),transparent 55%),0 1px 2px rgba(0,0,0,.4);position:relative;z-index:1}
.spine .logo img{width:100%;height:100%;object-fit:cover;display:block}
.spine .meta{display:flex;gap:10px;align-items:center;font-size:11.5px;color:var(--sm);font-weight:500;white-space:nowrap}
.spine .meta i{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-weight:800;background:var(--pill,#ff7bc3);color:var(--pillt,#0d0d0d);padding:1px 6px 1px 5px;border-radius:999px;box-shadow:0 1px 1px rgba(0,0,0,.35);text-shadow:none}
.spine .meta i svg{stroke-width:2.8}
.lane{display:inline-flex;align-items:center;gap:4px}
.lane svg{width:13px;height:13px;flex:none}
.spine .meta svg{width:12px;height:12px;flex:none}
.spine .nm{min-width:0;display:flex;flex-direction:column;gap:2px;position:relative;z-index:1}
.spine .nm strong{font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--emb,0 1px 0 rgba(0,0,0,.35))}
.spine .nm small{font-size:11.5px;font-weight:600;color:inherit}
.spine .tl{font-size:12px;font-weight:700;color:var(--sm);display:flex;align-items:center;gap:7px;position:relative;z-index:1}
.spine .chev{width:14px;height:14px;transition:transform .2s;opacity:.8}
.spine .new{width:8px;height:8px;border-radius:50%;background:var(--pill,#ff7bc3);box-shadow:0 0 0 2px rgba(0,0,0,.6)}
.spine::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:calc(var(--left,1)*100%);background:var(--st,#fff);opacity:.35}
/* the book under the pink line slides a little way off the shelf */
.spot.reading .spine{transform:translateX(9px);box-shadow:-3px 0 0 var(--pink),0 10px 18px -10px rgba(0,0,0,.7)}
.spot.reading .spine::after{background:var(--pink);opacity:1}
@media (hover:hover){.spot:not(.open):not(.vacant) .spine:hover{transform:translateX(6px);box-shadow:-3px 0 0 var(--pink),0 8px 16px -10px rgba(0,0,0,.6)}}
@media (prefers-reduced-motion:reduce){.spine{transition:none}}
.vacant .spine{height:30px;background:transparent;box-shadow:none;border:1px dashed color-mix(in oklab,var(--ink2),transparent 45%);grid-template-columns:40px minmax(0,1fr) auto;color:var(--ink)}
.vacant .spine::before,.vacant .spine::after{display:none}
.vacant .spine .no{background:transparent;box-shadow:none;color:var(--ink2);padding:0}
.vacant .spine .v{font-size:12px;color:var(--ink2)}
.vacant .spine .v2{font-size:12px;font-weight:800;background:#ff7bc3;color:#0d0d0d;border-radius:999px;padding:3px 10px;box-shadow:0 1px 1px rgba(0,0,0,.25)}
.vacant .spine:hover .v2,.vacant.reading .spine .v2{background:#0d0d0d;color:#ff7bc3}
@media (hover:hover){.vacant .spine:hover{border-color:var(--ink)}}
.vacant.reading .spine{transform:none;box-shadow:none;border-color:var(--pink)}
/* ---------- the pulled-out book: a hardcover front board ---------- */
.open .spine{margin-bottom:0;border-radius:7px 3px 0 0/50% 3px 0 0;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.open .spine .chev{transform:rotate(180deg)}
.open .spine::after{background:var(--lime);opacity:1}
.cover{position:relative;margin:0 12px 34px 0;padding:10px 10px 10px 26px;border-radius:0 0 6px 3px;
background:
/* hinge groove where the board meets the spine */
linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.14) 6px,rgba(255,255,255,.2) 11px,rgba(0,0,0,.38) 15px,rgba(0,0,0,.08) 20px,transparent 26px),
/* worn corners */
radial-gradient(circle at 100% 100%,rgba(255,255,255,.22),transparent 16px),
radial-gradient(circle at 100% 0,rgba(255,255,255,.14),transparent 14px),
linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,rgba(0,0,0,.24)),
repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
repeating-linear-gradient(-45deg,rgba(0,0,0,.045) 0 1px,transparent 1px 3px),
color-mix(in oklab,var(--c1,#0d0d0d),var(--aged) calc(var(--age,0)*28%));
/* the page block: thin layers of paper under the board, then the book's shadow on the shelf */
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.18),
2px 2px 0 0 #f7f0de,3px 3px 0 0 #d5c6a2,4px 4px 0 0 #f7f0de,5px 5px 0 0 #d5c6a2,6px 6px 0 0 #f2e9d2,7px 7px 0 0 #c9b88f,
8px 8px 0 0 color-mix(in oklab,var(--c1,#0d0d0d),#000 25%),
10px 30px 40px -22px rgba(0,0,0,.7);
display:grid;grid-template-columns:1fr;animation:pull .42s cubic-bezier(.2,.8,.2,1) backwards;transform-origin:top center}
/* ribbon bookmark hanging out of the book */
.cover::after{content:"";position:absolute;right:22%;bottom:-24px;width:14px;height:28px;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 40%,rgba(255,255,255,.18) 60%,rgba(0,0,0,.12)),var(--c2,#ff7bc3);
clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);box-shadow:none}
/* the printed jacket wraps around the board: a fold shadow on the left, paper on top */
.cover>.art,.cover>.body{box-shadow:0 1px 2px rgba(0,0,0,.35),inset 7px 0 9px -7px rgba(0,0,0,.35)}
.cover>.body{background:var(--paper)}
@keyframes pull{from{transform:perspective(1400px) rotateX(-16deg);clip-path:inset(0 -20px 100% -10px);opacity:.5}to{transform:none;clip-path:inset(0 -20px -50px -10px);opacity:1}}
@media (prefers-reduced-motion:reduce){.cover{animation:none}}
.art{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--aged)}
.art svg,.art img{display:block;width:100%;height:100%;object-fit:cover}
.art::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.22;mix-blend-mode:multiply;
background-image:radial-gradient(circle at center,#000 .9px,transparent 1.3px);background-size:4px 4px}
.art .stamp{position:absolute;z-index:3;left:12px;bottom:12px;background:var(--lime);color:#0d0d0d;font-weight:800;font-size:12px;padding:5px 8px;transform:rotate(-2deg);border-radius:2px}
.body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.issue{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink2);border-bottom:1px solid var(--ink);padding-bottom:9px}
.issue strong{color:var(--ink);font-weight:800}
.issue .live{margin-left:auto;font-weight:600;color:var(--ink)}
.title{font-size:clamp(34px,9vw,58px);line-height:.94;letter-spacing:-.055em;font-weight:900;margin:0;overflow-wrap:anywhere}
.snip{font-size:17px;line-height:1.5;margin:0;max-width:44ch}
.snip::before{content:"";display:block;width:26px;height:3px;background:var(--pink);margin-bottom:10px}
.links{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:700;font-size:15px}
.links a span{font-weight:500;font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.links a:hover{background:color-mix(in oklab,var(--lime),transparent 35%)}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.act{border:1px solid var(--ink);background:transparent;border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px}
.act.solid{background:var(--ink);color:var(--paper)}
.act.solid:hover{background:var(--pink);color:#0d0d0d;border-color:var(--pink)}
.act:hover{border-color:var(--pink)}
.act[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:#0d0d0d}
/* music + podcasts: preview bar */
.player{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);border-radius:999px;padding:7px 16px 7px 7px}
.pp{width:40px;height:40px;border-radius:50%;border:0;background:var(--lime);color:#0d0d0d;display:grid;place-items:center;flex:none}
.pp svg{width:16px;height:16px;fill:currentColor}
.pp .pa{display:none}.playing .pp .pl{display:none}.playing .pp .pa{display:block}
.playing .pp{background:var(--pink)}
.wave{position:relative;flex:1;height:30px;cursor:pointer;min-width:0}
.bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px;pointer-events:none}
.bars span{flex:1;background:currentColor;border-radius:1px;opacity:.3}
.bars.on{color:var(--pink);clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}.bars.on span{opacity:1}
.ptime{font-size:12px;font-weight:600;flex:none;opacity:.8;min-width:64px;text-align:right}
.pcap{font-size:12px;color:var(--ink2);margin:-6px 0 0}
/* writers + newsletters: read the first page */
.read{border:1px solid var(--line);background:color-mix(in oklab,var(--paper),var(--aged) 28%);padding:16px 16px 10px;border-radius:2px}
.read h3{font-size:13px;font-weight:700;margin:0 0 12px;color:var(--ink2);display:flex;justify-content:space-between;gap:10px}
.read h3 b{color:var(--ink)}
.page{max-height:190px;overflow:hidden;position:relative;font-size:16px;line-height:1.68;max-width:62ch}
.page p{margin:0 0 .85em}
.page p:first-child::first-letter{float:left;font-size:3.2em;line-height:.86;font-weight:900;margin:.07em .09em 0 0}
.page::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,color-mix(in oklab,var(--paper),var(--aged) 28%))}
.read.full .page{max-height:none}.read.full .page::after{display:none}
.more{border:0;background:none;font-weight:700;font-size:14px;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
/* creators + games: trailer */
.trailer{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none;z-index:2}
.trailer .play{width:74px;height:74px;border-radius:50%;background:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 7px color-mix(in oklab,var(--paper),transparent 45%);transition:transform .15s}
.trailer .play svg{width:26px;fill:var(--lime);margin-left:5px}
.trailer:hover .play{background:var(--pink);transform:scale(1.05)}
.trailer .len{position:absolute;right:12px;bottom:12px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;padding:5px 8px;border-radius:2px}
@media (min-width:700px){
.cover{grid-template-columns:minmax(0,44%) minmax(0,1fr)}
.art{aspect-ratio:auto;min-height:100%}
.body{padding:22px 24px 24px}
.spine{grid-template-columns:48px 36px minmax(0,1fr) auto;gap:14px;padding-left:12px}
.cover{padding:12px 12px 12px 32px}
.spine .logo{width:36px;height:36px}
.spine .nm{flex-direction:row;align-items:baseline;gap:12px}
.spine .nm strong{font-size:21px}
}
/* ---------- reading head + index strip ---------- */
.head{position:fixed;left:0;right:0;height:0;z-index:20;pointer-events:none;top:var(--headY,120px)}
.head::before{content:"";position:absolute;left:0;top:-1px;width:10px;height:3px;background:var(--pink)}
.head::after{content:"";position:absolute;right:6px;top:-1px;width:24px;height:3px;background:var(--pink)}
.code{position:fixed;right:6px;width:18px;z-index:25;touch-action:none;cursor:ns-resize;top:calc(var(--headY,120px) + 8px);bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.code canvas{width:100%;height:100%;display:block}
.mk{position:absolute;left:-2px;right:-2px;top:0;height:4px;background:#ff7bc3;pointer-events:none;will-change:transform;display:none}
.mk-o{box-shadow:inset 0 1px 0 #d8ff45,inset 0 -1px 0 #d8ff45}
@media (min-width:980px){.code{right:22px;width:22px}}
.scrub{position:fixed;right:34px;z-index:26;background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:3px;pointer-events:none;opacity:0;transform:translateY(-50%);white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis}
.scrub.on{opacity:1}
@media (min-width:980px){.scrub{right:54px}}
/* ---------- sheets ---------- */
.veil{position:fixed;inset:0;background:rgba(13,13,13,.5);z-index:80;display:none;align-items:flex-end;justify-content:center}
.veil.on{display:flex}
.sheet{background:var(--bg);width:100%;max-width:980px;max-height:94%;overflow:auto;border-radius:14px 14px 0 0;
padding:18px 18px calc(22px + env(safe-area-inset-bottom,0px));position:relative;animation:up .28s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
@media (min-width:760px){.veil{align-items:center}.sheet{border-radius:10px;max-height:90%;padding:26px}}
.sheet h2{font-size:28px;letter-spacing:-.045em;font-weight:900;margin:0 0 4px;line-height:1}
.sheet .sub{color:var(--ink2);font-size:14px;margin:0 0 18px}
.x{position:absolute;right:12px;top:12px;border:0;background:transparent;font-size:22px;width:40px;height:40px;border-radius:50%}
.x:hover{background:var(--paper)}
/* iPhone 17 / 17 Pro (402pt wide): comfortable touch targets, no zoom on focus */
@media (max-width:440px){
.books{gap:9px}
.bk-strip{padding:7px 8px 8px}
.bk-strip b{font-size:12.5px}
.cap .meta i{font-size:10px;padding:1px 5px 1px 4px}
.msp .sv-x{width:26px;height:26px;right:-7px;top:-7px;font-size:15px}
.panel .body{padding:16px 14px 18px}
.panel .title{font-size:clamp(30px,9vw,40px)}
.act{padding:10px 16px}
.lc{padding:16px 14px 14px}
aside.colophon{max-height:calc(100dvh - 60px)}
}
.claim-grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.sheet{overflow-x:hidden}
.drop-art>span:last-child{min-width:0}
.drop-art input[type=file]{width:100%}
@media (min-width:760px){.claim-grid{grid-template-columns:minmax(0,1fr) 340px}}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.f label,.f .lbl{font-size:13px;font-weight:700}
.f .hint{font-size:12px;color:var(--ink2);font-weight:500}
.f input[type=text],.f input[type=url],.f textarea{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:11px 12px;font-size:16px;width:100%}
.f textarea{resize:vertical;min-height:78px;line-height:1.45}
.f input:focus,.f textarea:focus{outline:2px solid var(--ink);outline-offset:-1px}
.lanepick{display:flex;flex-wrap:wrap;gap:6px}
.drop-art{display:flex;align-items:center;gap:12px;border:1px dashed var(--ink2);border-radius:6px;padding:10px;background:var(--paper)}
.drop-art .th{width:56px;height:56px;border-radius:3px;overflow:hidden;background:var(--aged);flex:none}
.drop-art .th img,.drop-art .th svg{width:100%;height:100%;object-fit:cover;display:block}
.drop-art input{font-size:13px;max-width:100%}
.err{color:#c21f6a;font-size:13px;font-weight:600;min-height:18px;margin:0 0 8px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{color:var(--pink)}}
.pay{width:100%;border:0;background:var(--ink);color:var(--paper);border-radius:999px;padding:15px;font-weight:800;font-size:16px}
.pay:hover{background:var(--pink);color:#0d0d0d}
.pay[disabled]{opacity:.6;cursor:progress}
.promise{margin:-8px 0 18px;padding:10px 12px;border-left:3px solid var(--pink);background:var(--paper);font-size:14px;font-weight:600;line-height:1.45;max-width:60ch}
.fine{font-size:12px;color:var(--ink2);text-align:center;margin-top:10px}
.preview{position:sticky;top:0;align-self:start}
.preview .cap{font-size:12px;color:var(--ink2);margin:0 0 8px}
.preview .cover{grid-template-columns:1fr;animation:none;margin:0 12px 34px 0;padding:10px 10px 10px 26px;border-radius:3px 6px 6px 3px}
.preview .art{aspect-ratio:4/3}
.preview .title{font-size:36px}
.preview .snip{font-size:15px}
.done{display:grid;gap:22px}
@media (min-width:760px){.done{grid-template-columns:minmax(0,1fr) 360px;align-items:start}}
.card-img{width:100%;border-radius:6px;display:block;box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.sharerow{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.sharelist{display:flex;flex-direction:column}
.sharelist a,.sharelist button{display:flex;justify-content:space-between;padding:14px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;text-decoration:none;font-weight:700;font-size:16px;text-align:left;width:100%}
.sharelist a:hover,.sharelist button:hover{background:var(--paper)}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;z-index:100;opacity:0;transition:.2s;pointer-events:none;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/*
* Approved changes on top of reference.html. wall.css stays the reference's
* CSS verbatim; everything that deliberately differs lives here, and the
* visual suite applies this file to the reference as well, so the baselines
* are "the reference plus these approved changes".
*/
/* Keep my card: the official Google and Apple marks before the button text. */
.sharelist .login{justify-content:flex-start;align-items:center;gap:12px}
.sharelist .login svg{width:20px;height:20px;flex:none}
/*
* Art direction (approved change): the same wall, printed. A light, fresh
* page; warm paper cards that sit on it; ink that reads as printed rather
* than screen black; a little grain and halftone on cards and artwork.
* Layout, sizes, spacing and hierarchy are untouched.
*/
:root{
--bg:#fbf9f4; /* the page: very light warm off-white */
--paper:#f6efe1; /* cream: the open story's text side, fields, text on ink */
--card:#f3e9d6; /* warm paper: spot cards */
--ink:#1c1b18; /* washed charcoal, like printed ink */
--ink2:#5d564a;
--line:#e2d8c4;
--grain:url("data:image/svg+xml;utf8,");
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){--bg:#15130f;--paper:#1f1c17;--card:#211d17;--ink:#f2ede2;--ink2:#a0977f;--line:#39342b}
}
:root[data-theme="dark"]{--bg:#15130f;--paper:#1f1c17;--card:#211d17;--ink:#f2ede2;--ink2:#a0977f;--line:#39342b}
/* spot cards: warm paper with a little tooth, lifted off the page */
.book{background:var(--card);border-color:color-mix(in oklab,var(--line),var(--ink) 6%);box-shadow:0 1px 0 rgba(28,27,24,.05)}
.book::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grain);background-size:160px;opacity:.07;mix-blend-mode:multiply}
.book.vbook{background:transparent;box-shadow:none}
.book.vbook::after{display:none}
.bk-no{background:#fbf7ee;color:#1c1b18;box-shadow:0 0 0 1px rgba(28,27,24,.12)}
/* artwork: a fine halftone screen and slightly softer colour, as if offset printed */
.bk-art img,.bk-art svg{filter:saturate(.94) contrast(1.03)}
.bk-art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.11;mix-blend-mode:multiply;
background-image:radial-gradient(circle at center,#1c1b18 .7px,transparent 1.1px);background-size:3px 3px}
.art img,.art svg{filter:saturate(.95) contrast(1.03)}
.art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grain);background-size:180px;opacity:.12;mix-blend-mode:multiply}
/* the Fivehundrd card: the same paper, a touch of grain */
.lc{box-shadow:4px 4px 0 #1c1b18;border-color:#1c1b18}
.lc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:var(--grain);background-size:160px;opacity:.09;mix-blend-mode:multiply}
/* dark UI in washed charcoal, never screen black */
.btn-create{background-color:#1d1c19;color:#fbf7ee;background-image:var(--grain);background-size:120px;background-blend-mode:soft-light;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.btn-create:hover{background-color:var(--pink);color:#1c1b18}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-create{background-color:#f2ede2;color:#1c1b18}}
:root[data-theme="dark"] .btn-create{background-color:#f2ede2;color:#1c1b18}
/*
* One spot, everywhere (approved change): the Create preview and share cards
* show the wall's own tile. .still is that tile as a picture: no hover, no
* clicks. The Create sheet's caption style must not reach the tile's caption.
*/
.spot.still{pointer-events:none}
.preview .spot .cap{font-size:inherit;color:inherit;margin:0}
.prev-tile{margin:0 0 18px}
/*
* Share cards (app/wall/shareCard.tsx): the wall's tile on a social canvas,
* always in the light paper look whatever the viewer's theme.
*/
.sc{--bg:#fbf9f4;--paper:#f6efe1;--card:#f3e9d6;--ink:#1c1b18;--ink2:#5d564a;--line:#e2d8c4;
position:relative;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;
background:#fbf9f4;color:#1c1b18;font-family:var(--font);padding:20px 20px 18px}
.sc::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:120px;opacity:.06;mix-blend-mode:multiply}
.sc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sc-brand{display:flex;flex-direction:column;gap:3px;font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:18px;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.sc-brand small{font-style:italic;font-weight:500;font-size:9.5px;letter-spacing:0;color:#5d564a}
.sc-id{align-self:flex-start;font-size:9px;font-weight:800;line-height:1;white-space:nowrap;background:#1c1b18;color:#fbf7ee;border-radius:999px;padding:5px 8px}
.sc-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:0}
.sc-tile{transform:rotate(-1.6deg);filter:drop-shadow(0 14px 16px rgba(28,27,24,.22))}
.sc-snip{margin:0;max-width:270px;text-align:center;font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;font-size:15px;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sc-url{min-width:0;font-size:9.5px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#d8ff45;color:#1c1b18;border-radius:999px;padding:5px 9px}
.sc-cta{flex:none;font-size:9.5px;font-weight:700;color:#5d564a}
.sc-square{padding:16px 16px 14px}
.sc-square .sc-main{gap:0}
.sc-wide{flex-direction:row;align-items:center;gap:22px;padding:10px 22px 10px 26px}
.sc-wide .sc-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sc-wide .sc-brand{font-size:15px;margin-bottom:4px}
.sc-name{font-size:26px;font-weight:900;letter-spacing:-.05em;line-height:.95;max-width:100%;overflow-wrap:anywhere}
.sc-wide .sc-snip{text-align:left;font-size:12px;max-width:none;-webkit-line-clamp:2}
.sc-wide .sc-url{max-width:100%}
/* the share sheet: pick a size, see the card, share or save it */
.sc-pick{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.sc-pick .chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15;text-align:left}
.sc-pick .chip small{font-size:11px;font-weight:600;opacity:.7}
.sc-preview{display:grid;place-items:center;min-height:160px;margin:0 0 14px;padding:14px;border-radius:12px;background:color-mix(in oklab,var(--paper),var(--ink) 5%)}
.sc-preview img{display:block;max-width:100%;max-height:min(52vh,460px);width:auto;height:auto;border-radius:6px;box-shadow:0 18px 34px -22px rgba(0,0,0,.55)}
.sc-actions{display:flex;flex-direction:column;gap:10px;margin:0 0 10px}
.sc-row{display:flex;flex-wrap:wrap;gap:8px}
.sc-row .act:disabled,.sc-actions .pay:disabled{opacity:.5}
.card-img{max-height:72vh;width:auto;max-width:100%;margin:0 auto}
.sc-pick .chip{border-radius:12px;padding:7px 12px}
/*
* Phones (approved change): an open spot is an overlay above the wall, not a
* bottom sheet. It grows out of its tile and shrinks back into it; the wall
* stays put behind it, and there is room around it to tap to close.
*/
@media (max-width:699px){
.dsheet{left:10px;right:10px;top:calc(env(safe-area-inset-top,0px) + 52px);bottom:auto;
max-height:calc(100dvh - 52px - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
border-radius:18px;padding:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.dsheet .grab{margin:2px auto 6px}
.dclose{top:20px;right:16px}
}
/* a story's lasting link after its 72 hours (app/s/[lane]/[no]/[slug]) */
.disc{min-height:100dvh}
.disc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1080px;margin:0 auto;padding:18px clamp(16px,2.6vw,36px) 10px}
.disc-main{max-width:1080px;margin:0 auto;padding:8px clamp(16px,2.6vw,36px) 60px}
.disc-note{font-size:15px;line-height:1.45;max-width:62ch;margin:0 0 18px;color:var(--ink2)}
.disc-note b{color:var(--ink)}
.disc-spot::before{display:none}
.disc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.disc-acts .act{text-decoration:none;display:inline-flex;align-items:center}
.disc-gone{text-align:center;padding-top:14vh}
.disc-gone h1{font-size:clamp(30px,6vw,48px);letter-spacing:-.04em;line-height:1;margin:0 0 12px}
.disc-gone p{color:var(--ink2);margin:0 0 24px}
.disc-cta{display:inline-block;width:auto;padding:14px 26px;text-decoration:none}
.disc .btn-create{text-decoration:none}
/*
* Phones and tablets (approved change, mobile audit): sheets open above the
* tab bar and above an open spot; the tab bar is in the paper look (light
* and dark) and keeps clear of the iPhone home indicator.
*/
@media (max-width:979px){
.veil{z-index:96;touch-action:none}
.veil .sheet{touch-action:pan-y;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.tabbar{background:var(--bg);color:var(--ink);border-top-color:var(--line);box-shadow:0 -8px 20px -16px rgba(28,27,24,.35)}
.tabbar button{color:color-mix(in oklab,var(--ink),transparent 30%);min-height:48px}
.tabbar button.on{color:var(--ink)}
.tabbar .tb-create{background:#d8ff45;color:#1c1b18}
.tb-n{box-shadow:0 0 0 2px var(--bg)}
.card-veil,.dveil{touch-action:none}
}
/*
* Phones (approved change, mobile audit): a compact header. One line with
* the brand and a search button, then the lanes with thumb-sized tabs. The
* avatar was a desktop decoration; search opens in place of the brand.
*/
.search-toggle{display:none}
@media (max-width:699px){
.site{padding-block:8px 0;column-gap:10px;row-gap:0}
#brand{gap:2px}
#brand .slogan{font-size:11px}
.who{display:none}
.header-actions{gap:0}
.search-toggle{all:unset;box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;border-radius:999px;color:var(--ink);cursor:pointer}
.search-toggle svg{width:21px;height:21px}
.search-toggle .st-close,.top.searching .search-toggle .st-open{display:none}
.top.searching .search-toggle .st-close{display:block}
.searchbox{display:none}
.top.searching #brand{display:none}
.top.searching .searchbox{display:flex;order:1;flex:1 1 0;min-width:0;max-width:none;height:42px;margin:1px 0}
.top.searching .header-actions{order:2}
nav.primary{gap:22px;margin:0 calc(-1 * clamp(16px,2.6vw,36px));padding:0 clamp(16px,2.6vw,36px);
-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
nav.primary a{padding:13px 0 11px;font-size:15px}
/* iPhone pass: short lane names still get a 44px-wide target (half the gap on each side) */
nav.primary a{position:relative}
nav.primary a::before{content:"";position:absolute;inset:0 -11px -2px}
/* thumb-sized controls: 44px or more */
.dsheet .act{min-height:44px;padding:11px 18px}
.dclose{width:44px;height:44px}
.player .pp{width:44px;height:44px}
.claim-grid .chip,.sheet .chip{min-height:44px;padding:10px 14px}
.sv-x::before{content:"";position:absolute;inset:-12px}
.links a{min-height:48px}
}
/* the smallest phones: the price label fits its column */
@media (max-width:359px){
.vacant .v2{font-size:10px;padding:3px 7px}
.vacant .vno{font-size:11px}
}
@media (max-width:699px){
#q::-webkit-search-cancel-button{display:none}
}
/*
* Phones (mobile audit): the wall scrolls on the compositor. Rows out of view
* skip layout and paint (sized from the first row, so nothing jumps), with a
* few pixels of room so an open tile's ring isn't clipped. Grain and halftone
* are plain see-through layers instead of blend modes, and the backdrop is a
* tint instead of a blur, which costs every frame of the overlay's motion.
*/
@media (max-width:699px){
.shelf-row{content-visibility:auto;contain-intrinsic-size:auto var(--row-est,240px);padding:4px 3px;margin:-4px -3px 10px}
.book::after,.lc::after,.art::before{mix-blend-mode:normal;background-image:var(--grain-a);opacity:.06}
.bk-art::after,.art::after{mix-blend-mode:normal;opacity:.09}
.dveil{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,18,15,.55)}
.dsheet{will-change:transform,opacity}
}
:root{--grain-a:url("data:image/svg+xml;utf8,")}
@media (max-width:699px){
/* the wall holds a screen's height from the first paint, so nothing below it jumps when it fills */
.rack{min-height:100dvh}
}
/* Create on phones, one step at a time (app/wall/Claim.tsx, Steps) */
.steps{display:flex;flex-direction:column;gap:12px;min-height:min(560px,78dvh)}
.st-top{display:flex;align-items:center;gap:6px;margin:-4px -8px 0}
.st-top .x{position:static;flex:none;width:44px;height:44px}
.st-back{all:unset;box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;cursor:pointer;color:var(--ink)}
.st-back[hidden]{visibility:hidden;display:grid}
.st-back svg{width:22px;height:22px}
.st-where{flex:1;text-align:center;font-size:13px;color:var(--ink2)}
.st-where b{color:var(--ink)}
.st-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.st-bar i{height:4px;border-radius:2px;background:var(--line)}
.st-bar i.on{background:var(--ink)}
.st-live{align-self:center;margin:6px 0 2px;pointer-events:none}
.st-body{display:flex;flex-direction:column;gap:10px;outline:none}
.st-h{font-size:26px;line-height:1.05;letter-spacing:-.035em;font-weight:900;margin:4px 0 0}
.st-sub{margin:0 0 4px;font-size:15px;color:var(--ink2);line-height:1.4}
.st-body input[type=text],.st-body input[type=url],.st-body textarea{border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:13px 14px;font-size:16px;width:100%}
.st-body textarea{min-height:96px;resize:vertical}
.st-lanes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-lane{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);font-weight:800;font-size:16px;cursor:pointer;color:var(--ink)}
.st-lane svg{width:20px;height:20px;flex:none}
.st-lane[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.st-lane:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.st-note{margin:4px 0 0;font-size:14px;color:var(--ink2);line-height:1.5}
.st-link{all:unset;cursor:pointer;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:12px 0}
.st-upload{position:relative;display:block;cursor:pointer}
.st-upload input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.st-btn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:800;font-size:16px}
.st-quiet span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1.5px dashed var(--line);border-radius:12px;font-weight:700;font-size:15px;color:var(--ink2)}
.st-upload:focus-within .st-btn,.st-upload:focus-within span{outline:2px solid var(--pink);outline-offset:2px}
.st-next{margin-top:auto}
.st-prev{align-self:center}
.st-cover{position:static}
.steps .err{margin:0;min-height:0}
.steps .err:empty{display:none}
.st-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
.st-head .st-live{margin:2px 0 0}
.st-next.alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.st-pay{position:sticky;bottom:calc(-22px - env(safe-area-inset-bottom,0px));margin:0 -18px calc(-22px - env(safe-area-inset-bottom,0px));padding:12px 18px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg);box-shadow:0 -10px 18px -14px rgba(28,27,24,.35);z-index:3}
.st-pay .fine{margin:8px 0 0}
/* the opened preview in Create is framed exactly like the phone's overlay (.dsheet) */
.st-cover{background:var(--c1);border-radius:18px;padding:6px;box-shadow:0 30px 60px -28px rgba(0,0,0,.45)}
.st-cover .cover{margin:0;padding:0;background:none;box-shadow:none;animation:none;border-radius:14px;overflow:hidden;grid-template-columns:1fr}
.st-cover .cover::before,.st-cover .cover::after{display:none}
.st-cover .cover>.art,.st-cover .cover>.body{box-shadow:none}
.st-cover .art{aspect-ratio:1/1}
.st-cover .body{padding:18px 16px 20px}
.st-cover .title{font-size:clamp(32px,10vw,44px)}
@media (max-width:699px){
#brand{min-height:44px;justify-content:center}
}
/* the footer (approved change): what Fivehundrd is, in plain words, and real links */
.site-foot .what{max-width:44ch;margin:14px 0 0;font-size:14px;line-height:1.5;color:#3d3830}
.site-foot .facts{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0}
.site-foot .facts span{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid #0d0d0d;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.01em}
.site-foot ul a[href^="mailto:"]{font-weight:400;color:#615a4d;word-break:break-all}
@media (max-width:699px){.site-foot .cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}.site-foot ul a{display:inline-block;padding:3px 0}}
/* info pages: How it works, Pricing, Rules, Questions, About, Contact, Terms, Privacy */
.info{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink)}
.info-top{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:1080px;margin:0 auto;padding:18px clamp(16px,2.6vw,36px) 10px}
.info-top .brand{font-size:26px;text-decoration:none;color:var(--ink)}
.info-top nav{display:flex;gap:8px;align-items:center}
.info-top nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:700;text-decoration:none;border:1px solid var(--ink);color:var(--ink)}
.info-top nav a.info-claim{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.info-main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:18px clamp(16px,2.6vw,36px) 56px}
.info-main .crumbs{font-size:13px;color:var(--ink2);margin:0 0 18px}
.info-main .crumbs a{color:var(--ink2)}
.info-main h1{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:clamp(34px,6vw,52px);line-height:1.02;letter-spacing:-.02em;margin:0 0 16px}
.info-main .lede{font-size:clamp(18px,2.4vw,21px);line-height:1.45;margin:0 0 30px;max-width:60ch}
.info-main h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:34px 0 10px}
.info-main p,.info-main li{font-size:16px;line-height:1.6;max-width:66ch}
.info-main ol,.info-main ul{padding-left:1.2em;margin:0 0 8px;display:flex;flex-direction:column;gap:8px}
.info-main article a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.info-main .muted{color:var(--ink2);font-size:14px}
.info-main .qa{border-bottom:1px solid var(--line)}
.info-main .qa:first-of-type{border-top:1px solid var(--line);margin-top:20px}
.info-main .qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:12px 2px;cursor:pointer}
.info-main .qa summary::-webkit-details-marker{display:none}
.info-main .qa summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.info-main .qa[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.info-main .qa summary:focus-visible{outline:2px solid #ff7bc3;outline-offset:2px;border-radius:4px}
.info-main .qa h2{font-size:18px;margin:0}
.info-main .qa p{margin:0 0 16px}
@media (prefers-reduced-motion:reduce){.info-main .qa summary::after{transition:none}}
.info-main .price-box{display:inline-flex;flex-direction:column;gap:4px;padding:18px 22px;border:1px solid var(--ink);border-radius:14px;background:var(--card)}
.info-main .price-box b{font-family:"Fraunces",Georgia,serif;font-size:44px;line-height:1}
.info-main .price-box span{font-size:14px;color:var(--ink2)}
@media (max-width:520px){.info-top nav a.info-wall{display:none}}
/* Report a spot (approved change, 2026-10-01): the one way to report, in every footer */
.foot-report{all:unset;cursor:pointer;font-size:14px;font-weight:500;color:#0d0d0d}
.foot-report:hover,.foot-report:focus-visible{text-decoration:underline;text-underline-offset:3px}
.foot-report:focus-visible{outline:2px solid #ff7bc3;outline-offset:2px}
.foot-report-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;max-width:260px}
.foot-report-form label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:700;color:#615a4d}
.foot-report-form select,.foot-report-form input{font:inherit;font-size:14px;color:#0d0d0d;background:#fff;border:1px solid #0d0d0d;border-radius:8px;padding:8px 10px;min-height:40px;box-sizing:border-box}
.foot-report-form input{width:90px}
.foot-report-form button{font:inherit;font-size:14px;font-weight:700;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid #0d0d0d;background:#0d0d0d;color:#fff;cursor:pointer}
.foot-report-form button:disabled{opacity:.6}
.foot-report-err{flex-basis:100%;margin:2px 0 0;font-size:13px;color:#b42318}
.foot-report-done{margin:0;font-size:14px;font-weight:600}
@media (max-width:699px){.foot-report{min-height:44px;display:inline-flex;align-items:center}.foot-report-form select,.foot-report-form input,.foot-report-form button{min-height:44px}}
/* polish (2026-10-03): the header buttons stay on one line on the narrowest phones */
.info-top nav a{white-space:nowrap}
@media (max-width:360px){.info-top .brand{font-size:22px}.info-top nav a{padding:0 12px;font-size:13px}}
/* above the wall (approved change): its own band, over the card and the wall,
a few shades off the page; Hotspots / Newest and what changed since your last visit */
.spotlight{background:color-mix(in oklab,var(--bg),#1c1b18 5.5%);border-bottom:1px solid var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spotlight{background:color-mix(in oklab,var(--bg),#fff 4%)}}
:root[data-theme="dark"] .spotlight{background:color-mix(in oklab,var(--bg),#fff 4%)}
.sl-in{max-width:1240px;margin:0 auto;padding:16px max(12px,env(safe-area-inset-right,0px)) 18px max(12px,env(safe-area-inset-left,0px));display:grid;gap:12px}
.sl-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
/* one segmented control: two equal capsules, same height, padding and baseline; only the fill says which is on */
.sl-tabs{display:inline-grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.sl-tabs button{box-sizing:border-box;height:32px;min-width:84px;padding:0 14px;border:1px solid transparent;border-radius:999px;background:transparent;
font:inherit;font-size:13px;font-weight:800;line-height:1;letter-spacing:-.01em;color:var(--ink);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;transition:background-color .18s,color .18s}
.sl-tabs button.on{background:var(--ink);color:var(--paper)}
.sl-tabs button:not(.on):not(:disabled):hover{background:color-mix(in oklab,var(--ink),transparent 93%)}
.sl-tabs button:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.sl-tabs button:disabled{opacity:.45;cursor:default}
.sl-since{margin:0;font-size:13px;color:var(--ink2)}
.sl-since b{color:var(--ink);font-weight:800}
.sl-note{display:none;margin:0;font-size:13px;line-height:1.4;color:var(--ink2)}
.sl-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.sl-item{display:flex;flex-direction:column;gap:6px;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.sl-item .spot.still{pointer-events:none;width:100%}
.sl-item:focus-visible{outline:none}
/* in the rail every time label takes the countdown pill's height, so a card in its last hours doesn't make the row 1px taller */
.sl-row .cap-l .t{padding-top:1px;padding-bottom:1px}
.sl-why{display:block;height:1.3em;font-size:11.5px;line-height:1.3;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the one thing that changed for you: a quiet link in the since line */
.sl-mine{display:inline;padding:0;border:0;background:none;font:inherit;font-weight:800;color:var(--ink);text-align:left;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--pink);text-underline-offset:3px;cursor:pointer}
.sl-mine:hover{text-decoration-color:var(--ink)}
/* Call it on an opened spot: as quiet as the other actions; its question inline */
.act.call.done{border-style:dashed;color:var(--ink2);cursor:default}
.act.call.done:hover{border-color:var(--ink)}
.call-q{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:700}
.call-x{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;font:inherit;font-weight:700;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.call-note{display:inline-flex;align-items:center;min-height:40px;font-size:13.5px;font-weight:700;color:var(--ink2)}
/* approved change: the maker's own numbers under "Your story" */
.lc-row.mine .mine-nums{grid-column:1/3;margin-top:4px;font-size:11.5px;font-weight:700;line-height:1.35;color:rgba(20,18,16,.8);white-space:normal}
/* desktop: the controls and their line on top, then seven spots across the page (the card's and the wall's width together) */
@media (min-width:980px){
.sl-in{grid-template-columns:minmax(0,1184px);gap:14px;padding:20px 24px 24px;justify-content:center}
.sl-head{justify-content:flex-start;gap:8px 16px}
.sl-note{display:block;white-space:nowrap}
.sl-since{margin-left:auto}
.sl-row{grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
}
/* one footprint below desktop, set by the taller state: the rail and its placeholder (while the wall
loads) take the same room, so neither loading nor switching Hotspots / Newest moves the wall */
.sl-wait{display:none}
@media (max-width:699px){.sl-wait{display:block}.spotlight{min-height:282px}}
@media (max-width:453px){.spotlight{min-height:298px}}
/* below desktop: five, as before */
@media (max-width:979px){.sl-row li:nth-child(n+6){display:none}}
/* phones: a strip to swipe */
@media (max-width:699px){
.sl-in{padding:12px 0 14px;gap:10px}
.sl-head{padding:0 16px}
.sl-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:104px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 2px;scroll-padding:0 16px;scrollbar-width:none}
.sl-row::-webkit-scrollbar{display:none}
.sl-row li{scroll-snap-align:start}
}
.sq-r{display:block;font-size:10px;font-weight:700;color:var(--ink2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/*
* Craft pass (approved change): the wall responds to curiosity, and time is
* a material. Only transform and opacity move; everything is still under
* prefers-reduced-motion.
*/
/* the tile says less: art, name, time. Opens stay in the markup for the counters,
the scouts are quiet ink instead of a pink pill, and inside one lane the
lane label is not repeated on every tile */
.cap .meta .m-o{display:none}
.cap .meta i.m-v{background:none;color:var(--ink2);padding:1px 0 1px 2px;font-weight:800}
.cap .meta i.m-v svg{stroke-width:2.4}
.rack[data-lane]:not([data-lane="all"]) .bk-strip small{display:none}
.bk-no{background:color-mix(in oklab,#fbf7ee,transparent 10%);font-weight:800;letter-spacing:.03em;font-variant-numeric:tabular-nums;transition:background-color .2s,color .2s}
/* Last chance: the final six hours read to the minute on a printed label
and the time bar breathes. The maker's artwork is never altered. No red. */
.spot[data-phase="last"] .cap-l .t{background:#1c1b18;color:#d8ff45;padding:1px 6px;border-radius:2px;font-variant-numeric:tabular-nums}
.spot[data-phase="last"] .book .prog{animation:fh-breathe 2.4s ease-in-out infinite}
@keyframes fh-breathe{50%{opacity:.35}}
/* narrow tiles: the label and the scouts stay on one line */
@media (max-width:453px){.spot[data-phase="last"] .cap-l .t{padding:1px 4px;font-size:10.5px;letter-spacing:-.01em}.spot[data-phase="last"] .cap-l{flex-wrap:nowrap}}
/* Rising: its first three hours; the new dot has a soft halo that fades as it settles */
.spot[data-phase="rising"] .book .new{box-shadow:0 0 0 2px #1c1b18,0 0 0 5px color-mix(in oklab,#ff7bc3,transparent 55%)}
/* touch it and it reacts: a small lift with the tile's own slight lean, the
artwork shifting a few pixels against the pointer (app/wall/feel.ts), the
number chip inking in and the time bar thickening */
.book{transition:border-color .2s,box-shadow .35s,transform .5s cubic-bezier(.2,1.5,.4,1)}
.bk-art img,.bk-art svg{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}
.book .prog{transition:height .3s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
.spot:not(.open):not(.vacant) .book:hover{border-color:var(--ink);transform:translateY(-3px) rotate(calc(var(--rot,0deg) * .22));box-shadow:0 16px 24px -16px rgba(28,27,24,.5)}
.spot:not(.vacant) .book:hover .bk-art img,.spot:not(.vacant) .book:hover .bk-art svg{transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.06)}
.spot:not(.vacant) .book:hover .bk-no{background:#1c1b18;color:#fbf7ee}
.spot:not(.vacant) .book:hover .prog{height:5px}
}
.spot:not(.open):not(.vacant) .book:focus-visible{transform:translateY(-3px)}
.spot:not(.vacant) .book:focus-visible .prog{height:5px}
/* pressed: the paper gives a little, then springs back */
.spot:not(.vacant) .book:active{transform:translateY(0) scale(.975);transition-duration:.08s}
.book{-webkit-tap-highlight-color:transparent}
.vbook{transition:border-color .2s,color .2s,letter-spacing .4s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.vacant .vbook:hover{letter-spacing:.04em}}
@media (prefers-reduced-motion:reduce){
.book,.bk-art img,.bk-art svg,.book .prog,.bk-no,.vbook{transition:none}
.spot[data-phase="last"] .book .prog{animation:none}
.spot:not(.vacant) .book:hover .bk-art img,.spot:not(.vacant) .book:hover .bk-art svg{transform:none}
.spot:not(.open):not(.vacant) .book:hover{transform:none}
}
/* opening a spot (desktop): the tile's artwork flies into the panel
(controller.ts, morphOpen), the panel unfolds down from the notch and its
text settles in, line by line */
.morph{position:fixed;z-index:60;overflow:hidden;border-radius:6px;pointer-events:none;background:var(--c1);box-shadow:0 24px 40px -24px rgba(0,0,0,.55)}
.morph>svg,.morph>img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:700px){
.panel .cover{animation:fh-unfold .4s cubic-bezier(.2,.9,.25,1) backwards}
.panel .body>*{animation:fh-rise .45s cubic-bezier(.2,.8,.2,1) backwards}
.panel .body>:nth-child(1){animation-delay:.08s}
.panel .body>:nth-child(2){animation-delay:.12s}
.panel .body>:nth-child(3){animation-delay:.16s}
.panel .body>:nth-child(4){animation-delay:.2s}
.panel .body>:nth-child(5){animation-delay:.24s}
.panel .body>:nth-child(n+6){animation-delay:.28s}
}
@keyframes fh-unfold{from{clip-path:inset(0 0 100% 0 round 8px)}}
@keyframes fh-rise{from{opacity:0;transform:translateY(12px)}}
/* the Timeheart (now Scout it and a flag, 20-scout-it.css): a heart with a clock's hands. Kept, it fills pink; the
moment you give one it beats twice, its hands sweep a full turn, one ring
goes out in the lane's colour, and the time left answers */
.act.th{position:relative;display:inline-flex;align-items:center;gap:7px}
.th-ic{width:17px;height:17px;flex:none;overflow:visible}
.th-line path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.th-hands path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.th-hands{transform-box:view-box;transform-origin:12px 13.2px}
.th-fill path{fill:#ff7bc3}
.th-fill{transform-box:fill-box;transform-origin:50% 60%;transform:scale(.2);opacity:0;transition:transform .45s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.act.th[aria-pressed="true"] .th-fill{transform:none;opacity:1}
@media (hover:hover){.act.th:not([aria-pressed="true"]):hover .th-hands{transform:rotate(90deg);transition:transform .5s cubic-bezier(.2,1.4,.4,1)}}
.act.th::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--c1,#ff7bc3);opacity:0;pointer-events:none}
.act.th.beat{animation:fh-beat .56s cubic-bezier(.3,.7,.3,1)}
.act.th.beat .th-hands{animation:fh-sweep .75s cubic-bezier(.3,.9,.3,1)}
.act.th.beat::after{animation:fh-ring .65s cubic-bezier(.2,.8,.2,1)}
.issue .live.beat{animation:fh-tick .8s cubic-bezier(.2,.8,.2,1)}
.spot.beat .book .prog{animation:fh-glow .9s cubic-bezier(.2,.8,.2,1)}
.spot.beat .cap .meta .m-v{animation:fh-count .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes fh-beat{18%{transform:scale(1.09)}34%{transform:scale(.98)}50%{transform:scale(1.05)}}
@keyframes fh-sweep{from{transform:rotate(-360deg)}}
@keyframes fh-ring{0%{opacity:.75;transform:none}100%{opacity:0;transform:scale(1.3,1.9)}}
@keyframes fh-tick{25%{color:#ff7bc3;transform:translateY(-2px)}}
@keyframes fh-glow{30%{height:6px;opacity:1;box-shadow:0 0 10px var(--c1)}}
@keyframes fh-count{40%{transform:scale(1.25)}}
.cap .meta .m-v{transform-origin:left center}
@media (prefers-reduced-motion:reduce){
.panel .cover,.panel .body>*{animation:none}
.th-fill,.act.th .th-hands{transition:none}
.act.th.beat,.act.th.beat .th-hands,.act.th.beat::after,.issue .live.beat,.spot.beat .book .prog,.spot.beat .cap .meta .m-v{animation:none}
}
/*
* Craft pass, part 2: rhythm. A spot with traction right now takes two by
* two places and reads like a feature (a kicker, a bigger name, its one
* line); open spots side by side are one quiet slot; the price only speaks
* up when you reach for it. Phones show two columns, so tiles read as covers.
*/
.spot.big{grid-column:span 2;grid-row:span 2}
.spot.big .bk-strip{gap:4px;padding:12px 14px 14px;border-top-width:4px}
.spot.big .bk-strip b{font-size:clamp(19px,2.1vw,27px);letter-spacing:-.045em;line-height:1.02}
.spot.big .bk-no{right:10px;top:10px;font-size:12px;padding:3px 7px}
.spot.big .cap-l .t{font-size:13px}
.spot.big .book .prog{height:4px}
.bk-kick{display:inline-flex;align-items:center;gap:7px;font-style:normal;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.bk-kick::before{content:"";width:16px;height:3px;background:#ff7bc3}
.bk-snip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;margin-top:2px;
font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;font-size:15px;line-height:1.3;letter-spacing:0;color:var(--ink2)}
@media (max-width:699px){
.shelf-row.feature{contain-intrinsic-size:auto calc(var(--row-est,240px) * 2)}
.spot.big .bk-snip{font-size:14px}
}
/* open spots: quiet until you reach for one */
.vbook{border-color:color-mix(in oklab,var(--line),var(--ink) 4%)}
.vacant .vno{font-weight:800;color:var(--ink2)}
.vacant .v2{background:none;color:var(--ink2);padding:0;border-radius:0;font-weight:700;transition:color .2s}
.vacant.run .vbook span{font-weight:800}
@media (hover:hover){
.vacant:hover .vbook{border-color:#ff7bc3;color:var(--ink)}
.vacant:hover .v2{color:var(--ink);text-decoration:underline;text-decoration-color:#ff7bc3;text-decoration-thickness:2px;text-underline-offset:3px}
}
/* two columns on phones (the wall is two columns below a 430px rack, a
453px screen): a little more room inside each cover, and names get two
lines instead of being cut, every tile the same height */
@media (max-width:453px){
.books{gap:12px}
.bk-strip b{font-size:14px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.bk-strip{min-height:66px}
.spot.big .bk-strip{min-height:0}
.bk-strip small{font-size:11px}
.cap-l .t{font-size:12px}
}
/* the wall's column never grows past the screen for a long name */
@media (max-width:979px){.stage{grid-template-columns:minmax(0,1fr)}.stage>main{min-width:0}}
/*
* Craft pass, part 3: Finds are your discovery history, not bookmarks.
* Three to a row so each find has room; its line of history ("Found at 12 ·
* now 340", "Called 3rd · 5h early") is the caption, in ink; an ended find is
* stamped like a library card. Read them leaving first or as you found them.
*/
.sv-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
.sq-n{font-size:12px;margin-top:5px}
.sq-r{font-size:11px;font-weight:800;color:rgba(20,18,16,.78);margin-top:2px;letter-spacing:-.01em}
.sq-r.early,.sq-r.called{color:#141210;text-decoration:underline;text-decoration-color:#ff7bc3;text-decoration-thickness:2px;text-underline-offset:3px}
.sq-r.back{color:#141210}
.sq-t.off{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);background:none;color:#141210;border:1.5px solid #141210;border-radius:3px;padding:2px 6px;
font-size:10px;letter-spacing:.12em;text-transform:uppercase;z-index:2;box-shadow:0 0 0 2px rgba(243,233,214,.8)}
.msp.gone .sq-art{opacity:.62}
.sv-order{display:flex;gap:14px;margin:0 0 8px}
.sv-order button{all:unset;cursor:pointer;font-size:11.5px;font-weight:700;color:rgba(20,18,16,.55);padding:4px 0;border-bottom:2px solid transparent}
.sv-order button[aria-checked="true"]{color:#141210;border-bottom-color:#ff7bc3}
.sv-order button:focus-visible{outline:2px solid #ff7bc3;outline-offset:2px}
@media (max-width:979px){.sv-order button{min-height:44px;padding:0;display:inline-flex;align-items:center}}
/*
* Craft pass, part 4: phones. Create is a lime disc in the tab bar instead
* of the loudest block on the screen; the wall's covers lead.
*/
@media (max-width:979px){
.tabbar .tb-create{background:none;margin:0;color:var(--ink)}
.tabbar .tb-create svg{width:18px;height:18px;padding:6px;box-sizing:content-box;border-radius:50%;background:#d8ff45;color:#1c1b18;
transition:transform .35s cubic-bezier(.2,1.5,.4,1)}
.tabbar .tb-create:active svg{transform:scale(.9) rotate(90deg);transition-duration:.1s}
.tabbar button:active{opacity:.75}
}
@media (prefers-reduced-motion:reduce){.tabbar .tb-create svg{transition:none}}
/* the Hotspots strip on phones: time left on one line, the count left to the wall */
.cap-l .t{white-space:nowrap}
@media (max-width:699px){.sl-row .cap .meta{display:none}}
/*
* Scout (docs/scout.md): the Scout Card is the old library card, now proof
* of taste. Its outline is the tier's ink, printed rather than shiny: warm
* gold, restrained steel, muted copper, or the usual charcoal. A tier move
* re-inks the outline slowly, once.
*/
/* --tier prints the outline; --tier-text is the same ink, dark enough to read at 12px */
.lc{--tier:#1c1b18;--tier-text:#141210;transition:border-color 1.2s ease,box-shadow 1.2s ease}
.lc.tier-gold{--tier:#a4812f;--tier-text:#6f5518}
.lc.tier-silver{--tier:#7a8086;--tier-text:#4d5257}
.lc.tier-bronze{--tier:#9b5d3a;--tier-text:#74401f}
.lc[data-tier]{border-color:var(--tier);box-shadow:4px 4px 0 var(--tier),inset 0 0 0 3px #f3ead3,inset 0 0 0 4px var(--tier)}
.sc-card{margin:4px 0 14px}
.sc-card .lc-h{margin:10px 0 8px;overflow-wrap:anywhere}
.sc-status{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.sc-status b{font-size:22px;font-weight:900;letter-spacing:-.03em;color:var(--tier-text)}
.sc-status span{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tier-text)}
.sc-status.building b{font-size:15px;letter-spacing:-.01em;color:#141210}
.sc-status.building span{letter-spacing:0;text-transform:none;font-weight:600;color:rgba(20,18,16,.62)}
.sc-facts{margin:0 0 12px;font-size:13px;font-weight:700;color:rgba(20,18,16,.78)}
.sc-move{margin:0 0 10px;padding:8px 10px;border-left:3px solid var(--tier);background:rgba(20,18,16,.04);font-size:13px;line-height:1.4}
.sc-move b{font-weight:900;color:var(--tier-text)}
.sc-pitch{margin:0 0 12px;font-size:13.5px;line-height:1.45;color:rgba(20,18,16,.75)}
.sc-out .lc-h{font-size:24px;line-height:1.05}
.sc-best{display:grid;grid-template-columns:1fr auto;gap:1px 10px;align-items:baseline;padding:10px 0;border-top:1px solid rgba(20,18,16,.18);border-bottom:1px solid rgba(20,18,16,.18);margin:0 0 12px}
.sc-best span{grid-column:1/-1;font-size:11px;font-weight:700;color:rgba(20,18,16,.62)}
.sc-best b{font-size:18px;font-weight:900;letter-spacing:-.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-best em{grid-column:1;font-style:normal;font-size:12px;font-weight:700;color:rgba(20,18,16,.78)}
.sc-best .sc-link{grid-column:2;grid-row:2 / span 2;align-self:center}
.sc-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.sc-cta{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:#141210;color:#f3ead3;font-size:13.5px;font-weight:800}
.sc-cta:hover{background:#ff7bc3;color:#141210}
.sc-link{all:unset;cursor:pointer;font-size:12.5px;font-weight:800;color:#141210;text-decoration:underline;text-decoration-color:#ff7bc3;text-decoration-thickness:2px;text-underline-offset:3px}
.sc-cta:focus-visible,.sc-link:focus-visible{outline:2px solid #ff7bc3;outline-offset:2px}
.sv-local{margin:-2px 0 8px;font-size:11.5px;line-height:1.35;color:rgba(20,18,16,.62)}
@media (max-width:979px){.sc-cta{min-height:44px}.sc-link{padding:12px 0}}
/* after a scout without an account: one quiet line, never a wall */
.scout-nudge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 0;padding:10px 6px 10px 12px;border-radius:10px;background:color-mix(in oklab,var(--paper),var(--ink) 5%);font-size:13.5px;line-height:1.4;color:var(--ink2)}
.scout-nudge span{flex:1 1 220px}
.scout-nudge b{color:var(--ink)}
.scout-in{all:unset;cursor:pointer;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:800}
.scout-in:hover{background:#ff7bc3;color:#1c1b18}
.scout-x{all:unset;cursor:pointer;display:grid;place-items:center;width:36px;height:36px;font-size:20px;color:var(--ink2)}
.scout-in:focus-visible,.scout-x:focus-visible{outline:2px solid #ff7bc3;outline-offset:2px}
@media (max-width:699px){.scout-in,.scout-x{min-height:44px}.scout-x{width:44px}}
/* what a shared card shows: the sheet's preview, and the page behind the link */
.scs{--tier:#1c1b18;--tier-text:#141210;display:flex;flex-direction:column;gap:4px;margin:4px 0 14px;padding:18px 18px 16px;border:2px solid var(--tier);border-radius:8px;
background:#f3ead3;color:#141210;box-shadow:5px 5px 0 var(--tier)}
.scs.tier-gold{--tier:#a4812f;--tier-text:#6f5518}.scs.tier-silver{--tier:#7a8086;--tier-text:#4d5257}.scs.tier-bronze{--tier:#9b5d3a;--tier-text:#74401f}
.scs-brand{font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--tier-text)}
.scs-kick{margin-top:6px;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.scs-story{font-size:30px;font-weight:900;letter-spacing:-.045em;line-height:1;margin:0;overflow-wrap:anywhere}
.scs-name{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:26px;line-height:1.05;letter-spacing:-.02em;margin:8px 0 0;overflow-wrap:anywhere}
.scs-status{font-size:13px;font-weight:800;color:var(--tier-text)}
.scs-line{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;font-size:15px;color:#5d564a}
.scs-best{display:flex;flex-direction:column;gap:2px;margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(20,18,16,.18)}
.scs-best span{font-size:11px;font-weight:700;color:rgba(20,18,16,.62)}
.scs-best a{font-size:22px;font-weight:900;letter-spacing:-.03em;color:#141210}
.scs-best em{font-style:normal;font-size:13px;font-weight:700;color:rgba(20,18,16,.78)}
.scout-page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px 16px;background:var(--bg);color:var(--ink)}
.scs.big{width:min(560px,100%);padding:28px 28px 24px;box-shadow:8px 8px 0 var(--tier)}
.scs.big .scs-name{font-size:clamp(34px,8vw,52px)}
.scs.big .scs-story{font-size:clamp(40px,10vw,68px)}
.scout-page-cta .btn-create{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;text-decoration:none}
@media (prefers-reduced-motion:reduce){.lc{transition:none}}
/* the desktop card scrolls on its own; always its own layer, so its text is
rasterised the same way on every render (it wasn't, run to run) */
@media (min-width:980px){.colophon{will-change:transform}}
/*
* The first screen (approved change, docs/copy.md): what Fivehundrd is in one
* line, two ways in, today's real numbers and the loop in three steps. Only
* for a first visit (.fh-back hides it before the first paint), and short, so
* Hotspots and the wall are still in view.
*/
.fh-back .hero{display:none}
.hero{border-bottom:1px solid var(--line);background:var(--bg)}
.hero-in{max-width:1480px;margin:0 auto;padding:26px clamp(16px,2.6vw,36px) 24px;display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr) minmax(0,1.1fr);gap:22px 40px;align-items:start}
.hero-h{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:clamp(30px,3.3vw,46px);line-height:1.02;letter-spacing:-.025em;margin:0 0 10px;text-wrap:balance}
.hero-sub{margin:0;font-size:15px;line-height:1.45;color:var(--ink2);max-width:46ch}
.proof-cta{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:800;white-space:nowrap}
.proof-cta:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.proof{align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.proof>div{display:flex;flex-direction:column;gap:6px}
.proof-wait{visibility:hidden}
.proof-h{margin:0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.proof-n{margin:0;display:flex;flex-direction:column;gap:2px}
.proof-n b{font-size:18px;font-weight:900;letter-spacing:-.02em}
.proof-line{margin:0;font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;font-size:15px;line-height:1.3}
.proof-sub{margin:0;font-size:13px;line-height:1.4;color:var(--ink2)}
.proof-cta{margin-top:4px;min-height:36px;padding:0;border-radius:0;font-size:13px;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.steps3-h{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.steps3 ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.steps3 li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;font-size:13.5px;line-height:1.4;color:var(--ink2)}
.steps3 li b{color:var(--ink);font-weight:900}
@media (max-width:1179px){
.hero-in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.steps3{grid-column:1/-1}
.steps3 ol{flex-direction:row;gap:24px}
.steps3 li{display:flex;flex-direction:column;gap:2px;flex:1}
}
@media (max-width:699px){
.hero-in{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px 16px 18px}
.hero-h{font-size:clamp(27px,8vw,34px);margin-bottom:8px}
.hero-sub{font-size:14px}
.proof{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 12px}
.proof-h{width:100%}
.proof>div{width:100%}
.proof-n{flex-direction:row;flex-wrap:wrap;gap:0 10px}
.proof-n b{font-size:15px}
.proof-line{font-size:14px}
.proof-cta{margin:0;min-height:44px}
.steps3 ol{flex-direction:column;gap:6px}
.steps3 li{display:grid;grid-template-columns:98px minmax(0,1fr);gap:8px;font-size:13px;line-height:1.35}
/* iPhone pass: the promise breaks between its two sentences, not inside them */
.hero-h span{display:block}
.proof-sub{width:100%}
}
/* the Scout Card, in the copy pass's words: the explainer, the promotion, Your Wall Today */
.sc-out .sc-pitch{margin:0 0 6px}
.sc-tiers{list-style:none;margin:10px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.sc-tiers li{font-size:11px;font-weight:700;padding:3px 7px;white-space:nowrap;border-radius:999px;border:1.5px solid var(--t);color:var(--tt)}
.sc-tiers b{font-weight:900}
.sc-tiers .t-bronze{--t:#9b5d3a;--tt:#74401f}
.sc-tiers .t-silver{--t:#7a8086;--tt:#4d5257}
.sc-tiers .t-gold{--t:#a4812f;--tt:#6f5518}
.sc-receipts{margin:0 0 12px;font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;font-size:15px;color:#141210}
.sc-proven{margin:-4px 0 10px;font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;font-size:14px;color:rgba(20,18,16,.7)}
.sc-move p{margin:0 0 4px}
.sc-move .sc-move-h{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:16px;color:#141210}
.sc-move-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.sc-facts b{color:#141210}
.lc-today{margin:0 0 12px;padding:10px 0;border-top:1px solid rgba(20,18,16,.18)}
.lc-today-h{margin:0 0 6px;font-size:12px;line-height:1.35;color:rgba(20,18,16,.62)}
.lc-today-h b{display:block;font-size:14px;font-weight:900;color:#141210}
.lc-today ul{margin:0;padding:0 0 0 16px;font-size:13px;line-height:1.45;font-weight:600;color:rgba(20,18,16,.82)}
.sv-sub{margin:-2px 0 8px;font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;font-size:13px;color:rgba(20,18,16,.7)}
.sv-empty p{margin:0 0 10px}
.sv-empty b{color:#141210}
.sv-explore{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid #141210;color:#141210;font-size:13px;font-weight:800}
.sv-explore:hover{background:#141210;color:#f3ead3}
.sv-explore:focus-visible{outline:2px solid #ff7bc3;outline-offset:2px}
@media (max-width:979px){.sv-explore{min-height:44px}}
.lc-row.mine .mine-kept{grid-column:1/3;margin-top:2px;font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;font-size:12.5px;line-height:1.35;color:rgba(20,18,16,.75);white-space:normal}
/* the nudge after a scout: a short question, not a wall */
.scout-nudge small{display:block;margin-top:2px;font-size:12.5px}
.scout-x{width:auto;padding:0 10px;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:699px){.scout-x{width:auto}}
/* an Open Spot: an invitation, with its price and time */
.vbook{align-content:center;gap:5px}
.vbook .v-h{font-size:10.5px;font-weight:500;line-height:1.3;color:var(--ink2);max-width:15ch}
.vbook .v-cta{font-style:normal;font-size:11px;font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:699px){.vbook .v-h{display:none}}
/* a quiet day (under 25 visitors, 2026-10-04): the line for makers sits in the numbers' reserved room, so the card keeps its height */
.proof>.proof-slot{display:grid;width:100%}
.proof-slot>*{grid-area:1/1}
.proof-slot>div{display:flex;flex-direction:column;gap:6px}
.proof-slot>.proof-sub{align-self:center}
/*
* The Hotspots / Newest rail only (approved change, 2026-09-29): each spot in
* a frame, like a printed museum label. A thin outer line with its top left
* corner cut, a margin of paper, and an inner line in the artwork's own colour
* (--c1; darker on light paper, lighter on dark). The card keeps its height:
* the paper margin takes from the artwork what it adds around it. Hover and
* focus lift it 3px and darken the outer line. No glow, no zoom. Wall tiles
* are not touched (everything here is under .sl-row).
*/
.sl-row{--fr-line:color-mix(in oklab,var(--ink),transparent 35%);--fr-cut:15px}
.sl-row .book{padding:7px;border:1px solid var(--fr-line);border-radius:2px;box-shadow:none;
--fr-in:color-mix(in oklab,var(--c1),#000 25%);
/* the outer line across the cut corner */
background:linear-gradient(to bottom right,transparent calc(50% - .7px),var(--fr-line) calc(50% - .7px) calc(50% + .7px),transparent calc(50% + .7px)) -1px -1px/var(--fr-cut) var(--fr-cut) no-repeat,var(--card);
clip-path:polygon(var(--fr-cut) 0,100% 0,100% 100%,0 100%,0 var(--fr-cut));
transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s}
.sl-row .spot.still{filter:drop-shadow(0 1px 1px rgba(28,27,24,.12)) drop-shadow(0 10px 12px rgba(28,27,24,.16))}
.sl-row .book::before{content:"";position:absolute;inset:3px;z-index:3;pointer-events:none;border:1.5px solid var(--fr-in);border-radius:1px;
clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);
background:linear-gradient(to bottom right,transparent calc(50% - .9px),var(--fr-in) calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px)) -1.5px -1.5px/10px 10px no-repeat}
.sl-row .bk-strip{border-top-color:var(--fr-in)}
/* the new dot sits on the artwork, as on the wall, clear of the cut corner */
.sl-row .book .new{left:14px;top:14px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sl-row .book{--fr-in:color-mix(in oklab,var(--c1),#fff 30%)}}
:root[data-theme="dark"] .sl-row .book{--fr-in:color-mix(in oklab,var(--c1),#fff 30%)}
@media (hover:hover){.sl-item:hover .book{transform:translateY(-3px);--fr-line:var(--ink)}}
.sl-item:focus-visible .book{transform:translateY(-3px);--fr-line:var(--ink)}
.sl-item:focus-visible{outline:2px solid var(--pink,#ff7bc3);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){.sl-row .book{transition:none}}
/* iPhone pass: 44px targets where the look stays smaller (the toggle, the sheet's grabber) */
@media (max-width:699px){
.sl-tabs button{position:relative}
.sl-tabs button::before{content:"";position:absolute;inset:-7px -1px}
}
/* the grabber: an 88x44 button with the same 40x5 bar at the same place; the card below doesn't move */
@media (max-width:979px){
.sheet-handle{position:relative;z-index:2;width:88px;height:44px;margin:-8px auto -15px;background:none;border-radius:0}
.sheet-handle::after{content:"";position:absolute;left:24px;right:24px;top:12px;height:5px;border-radius:3px;background:var(--line)}
}
/*
* Phones (approved change, 2026-09-29): in an open spot, Share, Scout it and
* Next spot stay in reach. The row sticks to the bottom of the overlay while
* the story scrolls under it, and settles into its place at the end. Elsewhere
* .acts-bar is not a box of its own, so the row is unchanged.
*/
.acts-bar{display:contents}
@media (max-width:699px){
.dsheet .cover{overflow:clip}
.dsheet .acts{display:contents}
.dsheet .acts-bar{position:sticky;bottom:0;z-index:3;display:flex;gap:8px;margin:0 -16px;padding:10px 16px 12px;
background:var(--paper);box-shadow:0 -12px 18px -14px rgba(0,0,0,.28)}
.dsheet .acts-bar .act{flex:1 1 auto;min-width:0;padding-inline:10px;justify-content:center;white-space:nowrap}
.dsheet .acts-bar .act.th{flex-grow:1.6}
.dsheet-scroll{scroll-padding-bottom:76px}
}
@media (max-width:359px){.dsheet .acts-bar{gap:6px}.dsheet .acts-bar .act{padding-inline:7px}.dsheet .acts-bar .act.th{gap:5px}}
/*
* Speed pass (2026-10-01): until the wall is in, what sits under it waits
* unseen. The Hotspots row and the wall arrive together and push the Scout
* card and the footer down; while those were already on screen, the whole
* page jumped. Nothing changes once the wall is there (html[data-wall-wait]:
* set before the first paint by WallPage, cleared by the rack; a :has() rule
* on body here made every change re-check the page).
*/
html[data-wall-wait] .stage,html[data-wall-wait] .stage~.site-foot{visibility:hidden}
/*
* "Your story" after its 72 hours (approved 2026-10-02): the same pink row,
* not a link any more (the spot has left the wall), with its final numbers
* and "Put it on again", which opens Create with the same story.
*/
.lc-row.ended{cursor:default}
.lc-row.ended:hover b{text-decoration:none}
.lc-row.ended em{color:rgba(20,18,16,.75)}
.mine-again{all:unset;box-sizing:border-box;cursor:pointer;grid-column:1/3;justify-self:start;margin-top:10px;padding:8px 14px;border-radius:999px;
background:#141210;color:#ff7bc3;font-size:12.5px;font-weight:800;letter-spacing:-.005em;touch-action:manipulation}
.mine-again:hover{background:#000}
.mine-again:focus-visible{outline:2px solid #141210;outline-offset:2px}
.mine-again:active{transform:scale(.98)}
@media (max-width:699px){.mine-again{min-height:44px;display:inline-flex;align-items:center}}
/*
* "Keep it 72 more hours" (approved 2026-10-03): under a live "Your story"
* in its last 24 hours, the same black pill, close under the pink row.
*/
.mine-extend{margin:-2px 0 10px}
.mine-extend:disabled{opacity:.6;cursor:default}
/*
* The Scout card, calmer (approved 2026-10-02): no "You walked in at · Take
* me back" block (the founder's call: the side reads clearer without it).
* Removed from the card itself; hidden here too so the reference matches.
*/
.lc-entry{display:none}
/*
* The maker's tools (approved 2026-10-05).
*
* In an open spot: what's coming up, in the lime of the "Just arrived"
* stamp, with its day in the quiet ink; and for Art and Games, small squares
* top left that switch the big image (the phone sheet's close button keeps
* the top right, the trailer's length the bottom right, the stamp the
* bottom left).
*/
.mile{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 9px;margin:0;font-size:13px;line-height:1.3}
.mile b{background:var(--lime);color:#0d0d0d;font-weight:800;padding:4px 8px;border-radius:2px;transform:rotate(-1deg)}
.mile span{color:var(--ink2);font-weight:700}
.art .gal{position:absolute;z-index:3;top:12px;left:12px;display:flex;gap:8px}
.art .gal-i{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:42px;height:42px;border-radius:3px;overflow:hidden;
box-shadow:0 0 0 2px rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.25);opacity:.82;transition:opacity .15s,transform .15s;touch-action:manipulation}
.art .gal-i:hover{opacity:1}
.art .gal-i[aria-pressed=true]{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 4px #141210,0 2px 8px rgba(0,0,0,.25)}
.art .gal-i:focus-visible{outline:2px solid #ff7bc3;outline-offset:3px}
.art .gal-i img,.art .gal-i svg{width:100%;height:100%;object-fit:cover}
@media (max-width:699px){.art .gal-i{width:44px;height:44px}}
/*
* The Create form's new parts: "Coming up" with its day beside it, and up
* to two more images as small squares with a remove cross. Editing uses the
* same form, words and links only.
*/
.mile-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.mile-in input[type=date]{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:10px 10px;font-size:16px;font-family:inherit;color:inherit;min-width:0}
.mile-in input[type=date]:focus{outline:2px solid var(--ink);outline-offset:-1px}
@media (max-width:420px){.mile-in{grid-template-columns:minmax(0,1fr)}}
.more-imgs{display:flex;gap:8px;flex-wrap:wrap}
.more-imgs .mi{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:6px;overflow:hidden;background:var(--aged)}
.more-imgs .mi img{width:100%;height:100%;object-fit:cover;display:block}
.more-imgs .mi button{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
display:grid;place-items:center;background:#141210;color:#fff;font-size:15px;font-weight:700;line-height:1}
.more-imgs .mi button:focus-visible{outline:2px solid #ff7bc3;outline-offset:1px}
.more-imgs .mi-add{cursor:pointer;border:1.5px dashed var(--line);background:var(--paper);font-size:24px;font-weight:700;color:var(--ink2)}
.more-imgs .mi-add:hover{border-color:var(--ink);color:var(--ink)}
.more-imgs .mi-add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.more-imgs .mi-add:focus-within{outline:2px solid var(--ink);outline-offset:1px}
/*
* "Your story": which link people went to, under the numbers; "Fix a typo
* or link" in its first hour and "Share my card" (every size, the 9:16 story
* one included), as the same black pills, side by side.
*/
.lc-row.mine .mine-links{grid-column:1/3;margin-top:3px;font-size:11.5px;font-weight:700;line-height:1.35;color:rgba(20,18,16,.68);white-space:normal}
.mine-acts{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 10px}
.mine-acts .mine-again{margin-top:0}
.mine-acts+.mine-extend{margin-top:-4px}
/*
* After its 72 hours: the report, its numbers as small stamps, then what
* they mean in words (a Hotspot, next to its lane), then per link.
*/
.lc-row.ended .rep{grid-column:1/3;display:flex;flex-direction:column;gap:6px;margin-top:8px}
.lc-row.ended .rep-n{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;margin:0}
.lc-row.ended .rep-n div{background:rgba(255,255,255,.42);border-radius:3px;padding:6px 8px;min-width:0}
.lc-row.ended .rep-n dt{font-size:10.5px;font-weight:700;line-height:1.2;color:rgba(20,18,16,.68);white-space:normal}
.lc-row.ended .rep-n dd{margin:1px 0 0;font-size:17px;font-weight:900;letter-spacing:-.02em;color:#141210}
.lc-row.ended .rep-l{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;font-size:12.5px;line-height:1.35;color:rgba(20,18,16,.8)}
.lc-row.ended .rep .mine-links{margin-top:0}
/*
* Scout it (approved 2026-10-06): the Timeheart's name and its heart with a
* clock's hands become "Scout it" and a flag, "I was here first". Scouted,
* the cloth fills pink as the heart did; the pole stays a line and no longer
* turns like the hands did; giving one waves the flag instead of sweeping.
* The tile's count uses the same flag.
*/
.th-line,.th-fill{transform-box:fill-box}
.th-line{transform-origin:0% 60%}
.th-hands path{stroke-width:2.2}
@media (hover:hover){.act.th:not([aria-pressed="true"]):hover .th-hands{transform:none}
.act.th:not([aria-pressed="true"]):hover .th-line{animation:fh-wave .6s cubic-bezier(.3,.9,.3,1)}}
.act.th.beat .th-hands{animation:none}
.act.th.beat .th-line{animation:fh-wave .7s cubic-bezier(.3,.9,.3,1)}
@keyframes fh-wave{30%{transform:skewY(-9deg) scaleX(.94)}65%{transform:skewY(5deg)}}
@media (prefers-reduced-motion:reduce){.act.th .th-line,.act.th:hover .th-line{animation:none}}