/* Comet & Crow shared styles (free/ and full/). Brand tokens here. */
@font-face{font-family:'Gloock';src:url(fonts/Gloock-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Newsreader';src:url(fonts/Newsreader-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Newsreader';src:url(fonts/Newsreader-400-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url(fonts/Newsreader-500.woff2) format('woff2');font-weight:500;font-display:swap}
:root{--ink:#1E1B17;--oxblood:#8A2A22;--deep:#5A1A16;--paper:#FFFFFF;--muted:#655D50;--line:#CDC7BD;
 --display:'Gloock',Georgia,serif;--text:'Newsreader',Georgia,serif;
 --card-ratio:15/26;--card-radius:4%;}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--text);font-variant-numeric:lining-nums}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0 0 1rem}
a{color:var(--oxblood);text-underline-offset:.18em;text-decoration-thickness:1px}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
.eyebrow{font:500 .75rem/1.4 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7rem 1.3rem;border:1px solid var(--oxblood);border-radius:2px;background:var(--oxblood);color:#fff;text-decoration:none;font:500 1.0625rem/1.2 var(--text);text-align:center}
.btn:hover{background:var(--deep);border-color:var(--deep)}
.btn.secondary{background:var(--paper);color:var(--oxblood)}
.btn.secondary:hover{background:#F7F3EF}
.text-btn{background:none;border:0;color:var(--oxblood);text-decoration:underline;text-underline-offset:.2em;min-height:44px;padding:.5rem .25rem;font:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ----- one card box for fronts and backs: 15:26, radius 4% of width ----- */
.cardbox{position:relative;display:block;width:100%;aspect-ratio:var(--card-ratio);border-radius:4%/2.31%;overflow:hidden}
.art{display:block;width:100%;height:100%;background:#F4F1EC}
.art img{display:block;width:100%;height:100%;object-fit:cover}
.art.reversed img{transform:rotate(180deg)}
.art-fallback{display:grid;place-items:center;height:100%;padding:8px;text-align:center;font:400 .8rem/1.2 var(--display)}
/* flip */
.flip{position:relative;display:block;width:100%;aspect-ratio:var(--card-ratio);perspective:1100px;background:none;border:0;padding:0;border-radius:0}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:4%/2.31%;box-shadow:0 0 0 1px var(--line)}
.face.back img{display:block;width:100%;height:100%;object-fit:cover}
.face.front{transform:rotateY(180deg);background:#F4F1EC}
/* card picker: 20 face-down cards, flat grid, whole back visible */
.pick-grid{--cols:7;--gap:4px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px var(--gap);max-width:560px;margin:0 -.75rem;padding:4px 2px}
@media(min-width:560px){.pick-grid{margin:0 auto}}
.pick-card{display:block;flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - .1px);aspect-ratio:var(--card-ratio);padding:0;border:0;background:none;border-radius:4%/2.31%;overflow:hidden;
 transform:rotate(var(--t,0deg));transition:transform .2s ease,opacity .2s ease;box-shadow:0 0 0 1px rgba(30,27,23,.22),0 1px 2px rgba(30,27,23,.12)}
.pick-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pick-card:hover:not(:disabled),.pick-card:focus-visible{transform:translateY(-4px) rotate(var(--t,0deg))}
.pick-card.is-picked{transform:translateY(-14px) scale(1.05);opacity:0;pointer-events:none}
.pick-card:disabled{cursor:default}
@media(min-width:600px){.pick-grid{--cols:10;--gap:10px;row-gap:12px;max-width:760px}}
/* card back switch */
.back-switch{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--muted)}
.back-switch-group{display:flex;gap:.35rem}
.back-choice{display:flex;align-items:center;gap:.4rem;min-height:44px;min-width:44px;padding:4px 8px 4px 4px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--muted);font-size:.8rem}
.back-choice img{width:22px;height:38px;border-radius:1px;display:block}
.back-choice[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
/* reading lines */
.line-card{border-top:1px solid var(--line);padding:1.25rem 0}
.line-head{display:flex;gap:1rem;align-items:center;margin-bottom:.75rem}
.line-thumb{flex:0 0 56px;width:56px;aspect-ratio:var(--card-ratio);border-radius:4%/2.31%;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.line-head h3{font-size:1.45rem}
.orientation{margin:.15rem 0 0;font-size:.85rem;color:var(--oxblood)}
.pos-line{color:var(--muted);font-style:italic;margin-bottom:.6rem}
.topic-line{font-size:1.125rem;margin-bottom:.6rem}
.topic-tag{display:inline-block;font:500 .7rem/1.6 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--oxblood);border:1px solid var(--oxblood);padding:0 .45em;margin-right:.2em;vertical-align:.15em;border-radius:2px}
.rev-line{border-left:2px solid var(--line);padding-left:.8rem;color:var(--ink)}
.rev-tag{color:var(--muted);border-color:var(--muted)}
.tagline{font-family:var(--display);font-size:1.05rem;margin:.25rem 0 .5rem}
.keywords{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.keywords li{padding:2px 10px;border:1px solid var(--line);font-size:.85rem;border-radius:2px}
.keywords li{text-transform:lowercase}.keywords li::first-letter{text-transform:uppercase}
.verdict{border:1px solid var(--ink);padding:1.25rem 1.25rem 1rem;margin:1.25rem 0;text-align:center}
.verdict .v-text{font:400 clamp(1.4rem,5.5vw,1.9rem)/1.25 var(--display);margin:.25rem 0 0}
/* saved-image dialog */
.img-dialog{border:1px solid var(--line);padding:1rem;max-width:min(560px,calc(100% - 24px));max-height:calc(100svh - 24px);overflow:auto;border-radius:2px}
.img-dialog::backdrop{background:rgba(30,27,23,.6)}
.img-dialog img{display:block;width:100%;height:auto;border:1px solid var(--line);margin:.75rem 0}
.img-dialog .row{display:flex;gap:.5rem;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
