/* tarotdaily.io: one stylesheet for every page */
@font-face{font-family:Fraunces;font-weight:100 900;font-display:swap;src:url(/fonts/Fraunces-normal-800.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:100 900;font-display:swap;src:url(/fonts/Inter-normal-600.woff2) format("woff2")}
:root{--bg:#efe6ff;--ink:#191970;--violet:#8A2BE2;--indigo:#4B0082;--line:#cdb6f5;--muted:#5b4e8a;--dark:#2a0d5e;--edge:#6d34c4;--pink:#EE82EE;--paper:#F8F8FF;--green:#34d399;--green-ink:#053b2a}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{min-height:100vh;min-height:100dvh;background:var(--bg) url(/img/bg.png) center top/1088px 528px repeat;color:var(--ink);font:600 17px/1.5 Fraunces,Georgia,serif;display:flex;flex-direction:column;align-items:center}
@media (max-width:640px){body{background-size:816px 396px}}
/* the lockup and the sign-up window share one column, so their edges line up */
.col{width:100%;max-width:792px;padding:clamp(18px,3.4vw,38px) 16px 0;display:flex;flex-direction:column;gap:clamp(18px,3vw,28px);flex:1}
.lockup{text-decoration:none;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3.4vw,38px);background:rgba(248,248,255,.93);border:3px solid #C9A3F5;border-radius:clamp(22px,4vw,34px);padding:clamp(16px,3vw,28px) clamp(14px,3vw,34px);box-shadow:0 14px 44px rgba(75,0,130,.2)}
.fan{flex:0 0 auto;width:clamp(100px,30vw,258px);height:auto;overflow:visible}
.brand{min-width:0}
.wordmark{font:800 clamp(25px,7.7vw,64px)/1.05 Fraunces,Georgia,serif;letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.wordmark b{color:var(--violet);font-weight:800}
/* the tagline as on the Facebook cover: Inter 600 capitals at 29/92 of the wordmark's size, tracked 7/29 em, set 4/92 em in */
.tagline{margin:1.4em 0 0 .14em;font:600 clamp(8.5px,2.62vw,21.8px)/1 Inter,system-ui,sans-serif;letter-spacing:.241em;text-transform:uppercase;white-space:nowrap;color:var(--violet)}
h1.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.panel{position:relative;background:var(--dark);border:2px solid var(--edge);border-radius:28px;padding:clamp(32px,5.4vw,52px) clamp(22px,4.8vw,52px) clamp(32px,5.2vw,48px);box-shadow:0 22px 60px rgba(42,13,94,.34);text-align:center;color:var(--paper)}
.pill{display:inline-block;font:800 17px/1 Fraunces,Georgia,serif;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);-webkit-text-stroke:.7px var(--pink);padding:4px 0 4px .18em}
form{margin-top:clamp(24px,3.6vw,34px);display:flex;gap:12px;flex-wrap:wrap}
label.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
input[type=email]{flex:1 1 260px;min-width:0;font:600 18px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff;border:2px solid var(--edge);border-radius:14px;padding:16px 18px}
input[type=email]::placeholder{color:#8f84b8}
input[type=email]:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
button{flex:0 1 190px;font:800 19px/1.5 Fraunces,Georgia,serif;color:var(--dark);background:var(--pink);border:0;border-radius:14px;padding:16px 26px;cursor:pointer;transition:background .15s,transform .15s}
button:hover{background:#f6a6f6}
button:active{transform:translateY(1px)}
button[disabled]{opacity:.6;cursor:progress}
@media (max-width:560px){button{flex:1 1 100%}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.offer{margin-top:clamp(24px,3.6vw,32px);font-size:clamp(16px,2.2vw,17.5px);line-height:1.9;color:#e9d5ff;text-wrap:balance}
.offer b{display:inline-block;font-weight:800;line-height:1;color:var(--green-ink);background:var(--green);border-radius:999px;padding:6px 12px;margin:0 2px;white-space:nowrap}
.msg{font-size:15px;color:#ffb4ab}.msg:not(:empty){margin-top:14px}
.done{display:none;margin-top:clamp(20px,3vw,28px);font:800 clamp(22px,4.4vw,27px)/1.3 Fraunces,Georgia,serif;color:#f3d9ff}
.sent form{display:none}.sent .done{display:block}
a{color:var(--indigo)}
footer{width:100%;padding:clamp(34px,5vw,52px) 20px clamp(30px,4vw,40px);text-align:center;font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}
footer span{background:rgba(239,230,255,.88);border-radius:10px;padding:4px 10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* ---- the free games ---- */
.games{margin-top:clamp(40px,7vw,72px)}
.games-head{text-align:center;background:rgba(248,248,255,.93);border:3px solid #C9A3F5;border-radius:clamp(22px,4vw,30px);padding:clamp(22px,3.8vw,32px) 20px clamp(24px,4vw,34px);box-shadow:0 14px 44px rgba(75,0,130,.16)}
.games-head h1,.games-head h2{font:800 clamp(30px,6.6vw,40px)/1.1 Fraunces,Georgia,serif;color:var(--ink)}
.games-head p{margin-top:10px;font-size:clamp(16px,2.4vw,18px);color:var(--indigo)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,28px);margin-top:clamp(18px,3vw,28px)}
@media (max-width:620px){.grid{grid-template-columns:1fr}}
.game{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--dark);border:2px solid var(--edge);border-radius:26px;padding:clamp(28px,4.4vw,40px) clamp(22px,3.8vw,34px) clamp(26px,4vw,36px);box-shadow:0 18px 44px rgba(42,13,94,.28);color:var(--paper)}
.game h3{font:800 clamp(22px,4.6vw,25px)/1.2 Fraunces,Georgia,serif;color:var(--pink)}
.blurb{margin-top:10px;font-size:16.5px;line-height:1.5;color:#e9d5ff;text-wrap:balance}
.slot{position:relative;width:min(100%,208px);aspect-ratio:420/704;margin:28px 0 0;perspective:900px}
.slot .back,.slot .face{position:absolute;inset:0;width:100%;height:100%;border-radius:13px;backface-visibility:hidden;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.slot .back{background:#1d0844;border:3px solid var(--paper);box-shadow:inset 0 0 0 7px #1d0844,inset 0 0 0 9px var(--paper),0 10px 26px rgba(0,0,0,.4);display:grid;place-items:center}
.slot .back span{font:800 44px/1 Fraunces,Georgia,serif;color:var(--paper)}
.slot .face{object-fit:cover;background:#f3ead8;transform:rotateY(180deg);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.slot.up .back{transform:rotateY(-180deg)}.slot.up .face{transform:rotateY(0)}
.running .slot .back{animation:riffle .5s ease-in-out infinite}
@keyframes riffle{50%{transform:translateY(-7px) rotate(-1.5deg)}}
.ticker{min-height:1.5em;margin-top:0;font:800 18px/1.5 Fraunces,Georgia,serif;color:var(--pink)}
.ticker:empty{display:none}
.result{margin-top:0}
.verdict{display:inline-block;font:800 15px/1 Fraunces,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dark);background:var(--pink);border-radius:999px;padding:9px 16px;margin-bottom:14px}
.verdict[hidden]{display:none}
.verdict[data-v=n]{background:#ffb4ab}.verdict[data-v=m]{background:#e9d5ff}
.cardname{font:800 21px/1.25 Fraunces,Georgia,serif}
.cardline{margin-top:8px;font-size:16.5px;line-height:1.5;color:#e9d5ff;text-wrap:balance}
.game input,.game select{flex:0 0 auto;width:100%;min-width:0;font:600 17px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff;border:2px solid var(--edge);border-radius:14px;padding:13px 14px}
.game .row{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.game select:focus-visible,.game input:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.formmsg{font-size:14.5px;color:#ffb4ab}.formmsg:empty{display:none}
.more{margin:clamp(22px,3.6vw,34px) 0 0;text-align:center;font-size:17px;line-height:2;color:var(--ink);background:rgba(248,248,255,.93);border:3px solid #C9A3F5;border-radius:22px;padding:clamp(18px,3vw,24px) 22px;text-wrap:balance}
.more b{display:inline-block;font-weight:800;line-height:1;color:var(--paper);background:var(--dark);border-radius:999px;padding:6px 12px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.slot .back,.slot .face{transition:none}.running .slot .back{animation:none}}
/* wide screens: the headline and the offer each sit on one line */
@media (min-width:780px){.offer{font-size:17px;text-wrap:nowrap}}
@media (prefers-reduced-motion:reduce){button{transition:none}}
/* ---- sharing a drawn card, and the link to a game's own page ---- */
.game h3 a{color:inherit;text-decoration:none}.game h3 a:hover{text-decoration:underline}
.share{margin-top:16px;width:auto;flex:0 0 auto;font:800 16px/1.4 Fraunces,Georgia,serif;color:var(--paper);background:transparent;border:2px solid var(--pink);border-radius:999px;padding:9px 22px;visibility:hidden}
.share.on{visibility:visible}
.share:hover{background:rgba(238,130,238,.16)}
/* ---- a game's own page ---- */
.head,.prose{background:rgba(248,248,255,.95);border:3px solid #C9A3F5;border-radius:clamp(22px,4vw,30px);box-shadow:0 14px 44px rgba(75,0,130,.16);color:var(--ink)}
.head{text-align:center;padding:clamp(26px,4.4vw,40px) clamp(20px,4vw,40px)}
.head h1{font:800 clamp(32px,7vw,46px)/1.1 Fraunces,Georgia,serif;text-wrap:balance}
.head p{margin:14px auto 0;max-width:34em;font-size:clamp(17px,2.4vw,19px);line-height:1.55;color:var(--indigo);text-wrap:pretty}
.solo{display:flex;justify-content:center;margin-top:clamp(18px,3vw,28px)}
.solo .game{width:100%;max-width:470px}
.solo .slot{width:min(100%,250px)}
.prose{margin-top:clamp(18px,3vw,28px);padding:clamp(26px,4.4vw,42px) clamp(22px,4.4vw,44px)}
.prose h2{font:800 clamp(24px,5vw,30px)/1.2 Fraunces,Georgia,serif;margin-top:1.5em}
.prose h2:first-child{margin-top:0}
.prose h3{font:800 19px/1.35 Fraunces,Georgia,serif;margin-top:1.4em}
.prose p{margin-top:.7em;font-weight:500;font-size:17.5px;line-height:1.65;color:#2b2466;max-width:38em}
.others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:1.1em}
@media (max-width:620px){.others{grid-template-columns:1fr}}
.others a{display:block;text-align:center;text-decoration:none;font:800 17px/1.3 Fraunces,Georgia,serif;color:var(--paper);background:var(--dark);border:2px solid var(--edge);border-radius:16px;padding:16px 12px}
.others a:hover{background:#3a1480}
.cta{margin-top:1.4em;text-align:center;font-size:17px;line-height:2}
.cta b{display:inline-block;font-weight:800;line-height:1;color:var(--green-ink);background:var(--green);border-radius:999px;padding:6px 12px;white-space:nowrap}


/* ---- game cards: the same parts in the same order, so play buttons share a row and Share sits under each ---- */
.out{width:100%;margin-top:22px}
.play{width:100%;margin-top:22px;display:flex;flex-direction:column;flex-wrap:nowrap;gap:12px}
.play .inputs{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.play .inputs:empty{display:none}
.play button{flex:0 0 auto;width:100%}
/* side by side: reserve the same room in every card for the line, the result and the inputs */
@media (min-width:621px){
  .grid .blurb{min-height:3em}
  .grid .out{min-height:158px}
  .grid .play .inputs,.grid .play .inputs:empty{display:flex;min-height:58px}
}
/* ---- the nav bar ---- */
.nav{position:sticky;top:0;z-index:20;width:100%;background:rgba(248,248,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid #C9A3F5}
.nav-in{max-width:1040px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:8px 18px}
.nav .home{font:800 23px/1 Fraunces,Georgia,serif;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav .home b{color:var(--violet);font-weight:800}
.nav ul{list-style:none;display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav ul::-webkit-scrollbar{display:none}
.nav li a{display:block;font:700 16px/1 Fraunces,Georgia,serif;color:var(--indigo);text-decoration:none;white-space:nowrap;padding:10px 13px;border-radius:999px}
.nav li a:hover{background:#e9dcff}
.nav li a[aria-current]{background:#e2d2ff;color:var(--ink)}
.nav .cta{flex:0 0 auto;margin-top:0;font:800 15.5px/1 Fraunces,Georgia,serif;color:var(--green-ink);background:var(--green);text-decoration:none;white-space:nowrap;padding:10px 15px;border-radius:999px}
.nav .cta:hover{filter:brightness(1.06)}
@media (max-width:760px){
  .nav-in{flex-wrap:wrap;padding:9px 12px 7px}
  .nav .cta{margin-left:auto}
  .nav ul{order:3;width:100%;margin-left:0;justify-content:space-between}
  .nav ul{gap:0}
  .nav li a{padding:8px 6px;font-size:13.5px}
}
html{scroll-padding-top:90px}

/* ---- the sign-up pop-up ---- */
.pop{margin:auto;width:min(92vw,460px);border:2px solid var(--edge);border-radius:28px;background:var(--dark);color:var(--paper);padding:clamp(30px,6vw,44px) clamp(22px,5vw,38px) clamp(24px,5vw,32px);text-align:center;box-shadow:0 30px 90px rgba(20,4,56,.6)}
.pop::backdrop{background:rgba(26,8,66,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pop-x{position:absolute;right:12px;top:10px;flex:none;width:44px;height:44px;padding:0;font:600 28px/1 Inter,system-ui,sans-serif;color:#e9d5ff;background:transparent;border-radius:50%}
.pop-x:hover{background:rgba(238,130,238,.18)}
.pop-k{font:800 15px/1 Fraunces,Georgia,serif;letter-spacing:.18em;text-transform:uppercase;color:var(--pink)}
.pop h2{margin-top:16px;font:800 clamp(27px,6.4vw,33px)/1.25 Fraunces,Georgia,serif;text-wrap:balance}
.pop h2 b{display:inline-block;font-weight:800;line-height:1.05;color:var(--green-ink);background:var(--green);border-radius:999px;padding:5px 14px 7px}
.pop-p{margin-top:14px;font-size:17.5px;line-height:1.5;color:#e9d5ff;text-wrap:balance}
.pop form{margin-top:24px;display:flex;flex-direction:column;flex-wrap:nowrap;gap:12px}
.pop form input[type=email]{flex:0 0 auto;width:100%}
.pop form button{flex:0 0 auto;width:100%}
.pop-m{font-size:15px;color:#ffb4ab}.pop-m:not(:empty){margin-top:12px}
.pop-no{margin-top:16px;flex:none;width:auto;font:700 15.5px/1.4 Fraunces,Georgia,serif;color:#d9c2ff;background:transparent;text-decoration:underline;padding:8px 12px}
.pop-no:hover{background:transparent;color:var(--paper)}
.pop.ok .pop-no{text-decoration:none;color:var(--dark);background:var(--pink);border-radius:14px;padding:14px 24px;font-weight:800;font-size:18px;margin-top:24px}

/* ---- a drawn card's link to its meaning ---- */
.cardmore{display:inline-block;margin-top:10px;font:700 15.5px/1.4 Fraunces,Georgia,serif;color:var(--pink);text-underline-offset:3px}
.cardmore:empty{display:none}
.game .row.three{grid-template-columns:1.5fr .8fr 1fr;gap:8px}
.game .row.three input,.game .row.three select{padding-left:10px;padding-right:8px}
/* ---- the three-card reading ---- */
.reading{margin-top:clamp(4px,1vw,10px)}
.rbox{margin-top:clamp(18px,3vw,28px);display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--dark);border:2px solid var(--edge);border-radius:26px;padding:clamp(24px,4vw,36px) clamp(16px,3.6vw,34px) clamp(26px,4vw,36px);box-shadow:0 18px 44px rgba(42,13,94,.28);color:var(--paper)}
.rstep{font:800 clamp(20px,4.4vw,24px)/1.3 Fraunces,Georgia,serif;color:var(--pink)}
.rstep a{color:var(--paper)}
.spread{width:100%;margin-top:22px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(7px,1.4vw,12px)}
.spread[hidden],.rcards[hidden],.again[hidden]{display:none}
.spread button{flex:none;width:100%;aspect-ratio:420/704;padding:0;font:800 clamp(17px,3.4vw,24px)/1 Fraunces,Georgia,serif;color:var(--dark);background:#1d0844;border:2px solid var(--paper);border-radius:8px;box-shadow:inset 0 0 0 3px #1d0844,inset 0 0 0 4px rgba(248,248,255,.75),0 4px 10px rgba(0,0,0,.35);transition:transform .15s,background .15s}
.spread button:hover{background:#34127a;transform:translateY(-4px)}
.spread button.picked,.spread button.picked:hover{opacity:1;cursor:default;background:var(--pink);border-color:var(--pink);box-shadow:0 6px 14px rgba(0,0,0,.4);transform:translateY(-8px)}
@media (max-width:560px){.spread{grid-template-columns:repeat(5,minmax(0,1fr))}.spread button:nth-child(21){display:none}}
.rcards{list-style:none;width:100%;margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,28px)}
.rcards li{display:flex;flex-direction:column;align-items:center}
.pos{font:800 15px/1 Fraunces,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dark);background:var(--pink);border-radius:999px;padding:8px 15px}
.rcards .slot{width:min(100%,190px);margin-top:16px}
.rtext{margin-top:16px}
.rbox .again{flex:0 0 auto;width:min(100%,340px);margin-top:28px}
@media (max-width:560px){
  .rcards{grid-template-columns:1fr;gap:22px}
  .rcards li{display:grid;grid-template-columns:104px 1fr;column-gap:16px;align-items:center;text-align:left}
  .rcards .pos{grid-column:1/-1;justify-self:start}
  .rcards .slot{width:104px}
  .rtext{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.spread button{transition:none}}
/* ---- the link tile among the draw cards ---- */
.game.tile{text-decoration:none;justify-content:flex-start}
.game.tile:hover{border-color:var(--pink)}
.trio{display:flex;justify-content:center;gap:10px;margin-top:28px;width:100%}
.trio img{width:calc((100% - 20px)/3);max-width:96px;height:auto;border-radius:7px;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.go{margin-top:auto;width:100%;font:800 19px/1.5 Fraunces,Georgia,serif;color:var(--dark);background:var(--pink);border-radius:14px;padding:16px 26px}
.game.tile .trio{margin-bottom:28px}
/* ---- a card's own page, and the list of all cards ---- */
.crumb{margin:0 0 12px!important;font-size:15px!important}
.crumb a{color:var(--indigo)}
.meaning{margin-top:clamp(18px,3vw,28px);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:center;background:var(--dark);border:2px solid var(--edge);border-radius:26px;padding:clamp(24px,4.4vw,40px);box-shadow:0 18px 44px rgba(42,13,94,.28);color:var(--paper)}
.meaning img{width:100%;height:auto;border-radius:13px;background:#f3ead8;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.meaning h2{font:800 15px/1 Fraunces,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-top:24px}
.meaning h2:first-child{margin-top:0}
.kw{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kw li{font:700 16px/1.2 Fraunces,Georgia,serif;color:var(--dark);background:#e9d5ff;border-radius:999px;padding:8px 14px}
.kw.rev li{color:#e9d5ff;background:transparent;box-shadow:inset 0 0 0 2px #7d4fd0}
.meaning .verdict{margin:12px 0 0}
.where{margin-top:24px;font-size:16px;line-height:1.55;color:#e9d5ff}
@media (max-width:620px){.meaning{grid-template-columns:1fr;justify-items:center}.meaning img{max-width:250px}.meaning .facts{width:100%}}
.prose a{color:var(--indigo)}
.prose .small{font-size:15.5px;color:var(--muted)}
.prose.wide p{max-width:44em}
.prose h2 small{font:600 16px/1 Inter,system-ui,sans-serif;color:var(--muted);margin-left:8px;white-space:nowrap}
.family{display:flex;flex-wrap:wrap;gap:8px;max-width:none!important}
.family a{font:700 15.5px/1.2 Fraunces,Georgia,serif;text-decoration:none;color:var(--ink);background:#e9dcff;border-radius:999px;padding:8px 13px}
.family a:hover{background:#dcc8ff}
.prevnext{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:none!important;margin-top:1.6em!important;font-weight:700!important}
.jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:none!important}
.jump a{font:700 15.5px/1.2 Fraunces,Georgia,serif;text-decoration:none;color:var(--paper);background:var(--dark);border-radius:999px;padding:9px 15px}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:22px 16px;margin-top:1.2em}
.cardgrid a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.cardgrid img{width:100%;height:auto;border-radius:9px;background:#f3ead8;box-shadow:0 6px 16px rgba(42,13,94,.28);transition:transform .15s}
.cardgrid a:hover img{transform:translateY(-4px)}
.cardgrid b{margin-top:10px;font:800 16.5px/1.25 Fraunces,Georgia,serif}
.cardgrid span{margin-top:4px;font-weight:500;font-size:14.5px;line-height:1.4;color:#4a4285}
@media (max-width:420px){.cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.cardgrid img{transition:none}}
/* the home page's write-up sits a little apart from the draws */
.games + .prose{margin-top:clamp(28px,5vw,48px)}
/* phones: the three nav links share the second row */
@media (max-width:760px){
  .nav ul{justify-content:space-around;gap:2px}
  .nav li a{padding:8px 10px;font-size:15px}
}
/* fixes: link buttons keep their own colour inside write-ups; the wider nav fits seven links */
.prose .others a{color:var(--paper)}
.nav-in{max-width:1040px}
.kw li::first-letter{text-transform:uppercase}
.game.tile .trio{margin:auto 0;padding:28px 0}
.trio img{max-width:112px}
@media (max-width:370px){.nav li a{padding:8px 5px;font-size:13.5px}}
/* ---- the home page's link to the three-card reading ---- */
.promo{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,30px);text-decoration:none;background:var(--dark);border:2px solid var(--edge);border-radius:26px;padding:clamp(22px,3.6vw,32px) clamp(22px,4vw,38px);box-shadow:0 18px 44px rgba(42,13,94,.28);color:var(--paper)}
.promo:hover{border-color:var(--pink)}
.promo-cards{display:flex;gap:7px}
.promo-cards i{width:clamp(34px,6vw,46px);aspect-ratio:420/704;border-radius:6px;background:#1d0844;border:2px solid var(--paper);box-shadow:inset 0 0 0 3px #1d0844,inset 0 0 0 4px rgba(248,248,255,.75)}
.promo-cards i:nth-child(1){transform:rotate(-7deg)}.promo-cards i:nth-child(3){transform:rotate(7deg)}
.promo-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.promo-text b{font:800 clamp(23px,4.6vw,29px)/1.15 Fraunces,Georgia,serif;color:var(--pink)}
.promo-text span{font-size:16.5px;line-height:1.45;color:#e9d5ff}
.promo .go{margin-top:0;width:auto;white-space:nowrap;padding:14px 22px;font-size:18px}
@media (max-width:680px){.promo{grid-template-columns:auto 1fr}.promo .go{grid-column:1/-1;text-align:center}}
.promo + .games{margin-top:clamp(18px,3vw,28px)}
.promo{margin-top:clamp(18px,3vw,28px)}
/* the reading panel shows the same three fanned cards as the logo (drawn once, in the lockup) */
.promo-fan{width:clamp(96px,17vw,150px);height:auto;overflow:visible}
/* the pop-up, with more room between its parts */
.pop{padding:clamp(40px,7vw,52px) clamp(24px,5.4vw,42px) clamp(26px,5vw,34px)}
.pop h2{margin-top:24px}
.pop h2{font-size:clamp(20px,5.6vw,30px)}
.pop h2 b{padding:9px 18px 11px;white-space:nowrap}
.pop-p{margin-top:22px;font-size:18px;line-height:1.55}
.pop form{margin-top:30px;gap:14px}
.pop-no{margin-top:22px}
/* the pop-up's line of text stays on one line */
.pop{width:min(94vw,500px)}
@media (min-width:480px){.pop-p{white-space:nowrap;text-wrap:nowrap;font-size:17px}}
/* narrower phones can't fit it at a readable size, so there it stays as two even lines */