:root{
  --ink:#151723;--cream:#FFF8EC;--cream-deep:#EBE7DF;--tomato:#FC553C;--lemon:#FEEA39;--cucumber:#52D273;--onion:#D982F4;--carrot:#FF9738;--aubergine:#6540B8;--subtle:#EBE7DF;--disabled:#CBC8C0;--correct:#087862;--skip:#A52F62;--destructive:#A72835;--muted:#5B5D67;--line:#D6D1C8;--white:#fff;--violet:var(--tomato);--violet-dark:var(--ink);--violet-soft:#FFF0EB;--gold:var(--lemon);--blue:var(--aubergine);--orange:var(--carrot);--coral:var(--onion);--green:var(--cucumber);--red:var(--destructive);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:40px;--space-8:48px;--space-9:64px;--space-10:80px;--space-11:96px;--space-12:128px;
  --shape-s:12px;--shape-m:16px;--shape-l:24px;--shape-xl:28px;--shape-full:999px;
  --layout-max:1280px;--gutter:32px;--grid-gap:24px;
  --type-display:clamp(3.5rem,6vw,5.5rem);--type-headline:clamp(2.25rem,4.4vw,3.5rem);--type-title:1.75rem;--type-body-lg:1.125rem;--type-body:1rem;--type-label:.8125rem;
  --font-display:"Asap Condensed","Avenir Next Condensed","Arial Narrow",sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
  --shadow-card:-6px 6px 0 var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5;overflow-x:hidden}
.shell{width:min(var(--layout-max),calc(100% - (var(--gutter) * 2)));margin-inline:auto}
a{color:var(--violet)}
a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:var(--shape-s)}

.topbar{position:relative;overflow:hidden;background:var(--violet);color:var(--cream);border-bottom:3px solid var(--ink)}
.topbar:before{content:"";position:absolute;right:max(3vw,var(--space-5));top:124px;width:112px;height:112px;background:url('/assets/celebrity-star.svg') center/contain no-repeat;transform:rotate(10deg)}
.topbar:after{content:"";position:absolute;right:-76px;bottom:-120px;width:304px;height:288px;background:url('/assets/tomato.svg') center/contain no-repeat;opacity:.14;transform:rotate(10deg)}
.topbar>.shell{position:relative;z-index:1}
header{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.brand{display:block;width:168px;height:88px;background:url('/assets/celebrity-salad-wordmark.svg') center/contain no-repeat;text-decoration:none;line-height:0;flex:0 0 auto}
.brand .mark,.brand>span:last-child{display:none}
nav{display:flex;gap:var(--space-2);align-items:center}
nav a{min-height:48px;display:inline-flex;align-items:center;padding-inline:var(--space-3);color:var(--cream);text-decoration:none;font-size:14px;font-weight:800;border-radius:var(--shape-s)}
nav a:hover,nav a[aria-current="page"]{background:rgba(255,255,255,.1);text-decoration:none}

.hero{max-width:840px;padding:var(--space-10) 0 var(--space-11)}
.eyebrow{margin:0 0 var(--space-4);color:var(--ink);font:800 var(--type-label)/1.25 var(--font-display);letter-spacing:.1em;text-transform:uppercase}
h1{margin:0;max-width:840px;font:800 var(--type-display)/.96 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.hero .lede{margin:var(--space-5) 0 0;max-width:720px;color:rgba(255,248,234,.82);font-size:var(--type-body-lg);line-height:1.56}

main{padding:var(--space-11) 0 var(--space-12)}
.content-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
.article{grid-column:1 / span 8;max-width:720px}
.article h2{position:relative;margin:var(--space-10) 0 var(--space-4);padding-top:0;font:800 var(--type-headline)/1 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.article h2:first-child{margin-top:0}
.article h3{margin:var(--space-8) 0 var(--space-3);font:800 var(--type-title)/1.08 var(--font-display);letter-spacing:-.02em}
.article p{max-width:68ch;margin:var(--space-4) 0;color:#50525C;font-size:var(--type-body);line-height:1.6}
.article>p:first-of-type{font-size:var(--type-body-lg);line-height:1.58;color:#444650}
.article ul,.article ol{max-width:68ch;padding-left:var(--space-5);color:#50525C;font-size:var(--type-body);line-height:1.6}
.article li{margin:var(--space-2) 0}
.article strong{color:var(--ink)}
.article>a,.article p a{font-weight:800;text-underline-offset:3px}
.article h2:after{content:"";display:block;width:64px;height:6px;margin-top:var(--space-3);background:var(--gold);border:2px solid var(--ink)}

.callout{position:relative;margin:var(--space-8) 0;padding:var(--space-5) var(--space-6);border:3px solid var(--ink);border-radius:var(--shape-l);background:var(--violet-soft);box-shadow:var(--shadow-card);color:#50525C}
.callout:before{content:"";position:absolute;right:var(--space-5);top:-28px;width:52px;height:52px;background:url('/assets/celebrity-star.svg') center/contain no-repeat;transform:rotate(10deg)}
.callout strong{display:block;margin-bottom:var(--space-2);font:800 1.5rem/1.1 var(--font-display)}

.steps{counter-reset:step;list-style:none;padding:0!important;border-top:3px solid var(--ink)}
.steps li{position:relative;margin:0;padding:var(--space-5) 0 var(--space-5) 64px;border-bottom:2px solid var(--line);background:transparent}
.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:var(--space-5);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--gold);border:2px solid var(--ink);color:var(--ink);font-weight:900}

.toc{grid-column:10 / -1;position:sticky;top:var(--space-5);padding-left:var(--space-5);border-left:3px solid var(--ink)}
.toc strong{display:block;margin-bottom:var(--space-3);font:800 .75rem/1.3 var(--font-display);color:var(--violet);letter-spacing:.1em;text-transform:uppercase}
.toc a{min-height:48px;display:flex;align-items:center;padding:0 var(--space-2);text-decoration:none;font-size:13px;font-weight:750;color:#5d5368;border-radius:var(--shape-s)}
.toc a:hover{background:var(--violet-soft);color:var(--violet)}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:var(--space-5)}
.card{min-height:280px;padding:var(--space-6);border:3px solid var(--ink);border-radius:var(--shape-l);background:var(--white);display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease}
.card:nth-child(4n+1){background:var(--violet-soft)}.card:nth-child(4n+2){background:#fff1df}.card:nth-child(4n+3){background:#ffe5e1}.card:nth-child(4n+4){background:#e9f8e9}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-card)}
.card h2,.card h3{margin:0 0 var(--space-3);font:800 2rem/1.05 var(--font-display);letter-spacing:-.025em}
.card p{margin:0 0 var(--space-5);color:#5B5D67}
.card a{min-height:48px;display:inline-flex;align-items:center;width:fit-content;margin-top:auto;font-weight:800;text-decoration:none;border-radius:var(--shape-s)}

.names{columns:2;column-gap:var(--space-8)}
.names li{break-inside:avoid;padding:var(--space-1) 0}
.related{margin-top:var(--space-10);padding-top:var(--space-6);border-top:3px solid var(--ink)}
.related h3{font-size:1.875rem}
.related-links{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.related-links a{min-height:48px;display:inline-flex;align-items:center;padding:0 var(--space-4);border:2px solid var(--ink);border-radius:var(--shape-full);background:var(--white);color:var(--ink);text-decoration:none;font-size:13px;font-weight:800}
.related-links a:hover{background:var(--gold)}

/* Shared table treatment for comparison pages */
.game-table,.alt-table,.compare{width:100%;border-collapse:collapse;margin:var(--space-6) 0 var(--space-8);font-size:14px}
.game-table th,.game-table td,.alt-table th,.alt-table td,.compare th,.compare td{padding:var(--space-4);border-bottom:2px solid var(--line);text-align:left;vertical-align:top}
.game-table th,.alt-table th,.compare th{font:800 1rem/1.25 var(--font-display)}
.game-table tr:first-child th,.alt-table tr:first-child th,.compare tr:first-child th{border-top:3px solid var(--ink)}
.game-table tr:last-child td,.alt-table tr:last-child td,.compare tr:last-child td{border-bottom:3px solid var(--ink)}

/* Page-specific utilities normalised to the same spacing system */
.name-tool{margin:var(--space-8) 0!important;padding:var(--space-6)!important;border:2px solid var(--ink);border-radius:var(--shape-l)!important;background:var(--lemon);box-shadow:none!important}
.name-tool h2{margin:0!important;padding:0!important}.name-tool h2:after{display:none}.name-tool p{color:var(--ink)}
.name-tool-controls{display:flex;flex-wrap:wrap}
.name-tool-controls{gap:var(--space-3)!important;margin-top:var(--space-5)!important}
.name-tool button{min-height:56px!important;padding:0 var(--space-5)!important;border:0;border-radius:18px!important;background:var(--ink);color:var(--cream);font-weight:800;cursor:pointer;box-shadow:none}
.name-tool button:hover{background:#292B38}
.picked-names{display:flex;flex-wrap:wrap;gap:var(--space-2)!important;margin-top:var(--space-5)!important}
.picked-names span{display:inline-flex;align-items:center;padding:var(--space-2) var(--space-3);border:2px solid var(--ink);border-radius:var(--shape-full);background:var(--white);font-weight:800}
.difficulty,.size-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)!important;margin:var(--space-5) 0!important}
.difficulty div,.size-grid div{padding:var(--space-4);border:2px solid var(--ink);border-radius:var(--shape-m);background:var(--white)}
.difficulty strong,.size-grid strong{display:block;font:800 var(--type-title)/1.08 var(--font-display)}
.difficulty p,.size-grid p{margin:var(--space-2) 0 0;font-size:14px}
.difficulty div{padding:var(--space-4)!important;border-radius:var(--shape-m)!important}
.policy-section{margin-bottom:var(--space-10)!important}
.policy-section h2{margin-top:0}.policy-section .section-number{display:inline-grid;place-items:center;width:40px;height:40px;margin-bottom:var(--space-3);border:2px solid var(--ink);border-radius:50%;background:var(--lemon);font-weight:900}
.updated{display:inline-block;padding:var(--space-2) var(--space-3);border:1px solid rgba(21,23,35,.22);border-radius:var(--shape-full);color:var(--ink);font-size:12px;font-weight:750}
.updated{margin-top:var(--space-5)!important}
main.shell>section+section{margin-top:var(--space-10)!important}
main.shell>section>.eyebrow{margin-bottom:var(--space-4)!important}
main.shell>section>h2{margin:0 0 var(--space-6)!important;font:800 var(--type-headline)/1 var(--font-display)!important;letter-spacing:-.03em!important}

footer{border-top:3px solid var(--ink);padding:var(--space-6) 0 var(--space-7);color:#6A6C75;font-size:12px;background:var(--cream)}
.footer-inner{display:flex;justify-content:space-between;gap:var(--space-5);align-items:center}
.footer-inner div{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.footer-inner a,.cookie-settings-link{min-height:48px;display:inline-flex;align-items:center;padding:0 var(--space-3);text-decoration:none;font-weight:800;color:#5B5D67;border-radius:var(--shape-s)}
.cookie-settings-link{border:0;background:transparent;cursor:pointer;opacity:1!important}
.footer-inner a:hover,.cookie-settings-link:hover{background:var(--violet-soft)}
.cookie-banner{gap:var(--space-5)!important;padding:var(--space-5)!important;border-radius:var(--shape-l)!important}
.cookie-actions{gap:var(--space-2)!important}
.cookie-button{min-height:48px!important;padding:0 var(--space-4)!important;border-radius:var(--shape-s)!important}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}

/* Extra-large / large */
@media(min-width:1600px){:root{--gutter:64px;--grid-gap:40px}.shell{--layout-max:1280px}}
@media(min-width:1200px) and (max-width:1599px){:root{--gutter:48px;--grid-gap:32px}}

/* Expanded */
@media(min-width:840px) and (max-width:1199px){
  :root{--gutter:40px;--grid-gap:24px}
  .topbar:before{width:96px;height:96px;top:132px}
  .topbar:after{display:none}
  .hero{padding:var(--space-9) 0 var(--space-10)}
  main{padding:var(--space-10) 0 var(--space-11)}
  .article{grid-column:2 / span 10;max-width:720px}
  .toc{display:none}
}

/* Medium */
@media(min-width:600px) and (max-width:839px){
  :root{--gutter:32px;--grid-gap:24px}
  .topbar:before{width:84px;height:84px;top:132px}.topbar:after{display:none}
  .hero{padding:var(--space-9) 0 var(--space-10)}
  main{padding:var(--space-10) 0 var(--space-11)}
  .content-grid{grid-template-columns:1fr}.article{grid-column:auto;max-width:700px}.toc{display:none}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
}

/* Compact */
@media(max-width:599px){
  :root{--gutter:24px;--grid-gap:16px;--type-display:clamp(3rem,14vw,4rem);--type-headline:clamp(2rem,10vw,2.75rem)}
  header{min-height:80px;gap:var(--space-4)}.brand{width:136px;height:72px}
  nav{gap:0}nav a{padding-inline:var(--space-2);font-size:13px}nav a:first-child{display:none}
  .topbar:before{display:none}.topbar:after{display:none}
  .hero{padding:var(--space-8) 0 var(--space-9)}.hero .lede{font-size:1rem}
  main{padding:var(--space-9) 0 var(--space-10)}
  .content-grid{grid-template-columns:1fr}.article{grid-column:auto;max-width:none}.toc{display:none}
  .article h2{margin-top:var(--space-9)}.article h3{margin-top:var(--space-7)}
  .article p,.article ul,.article ol{font-size:1rem}.article>p:first-of-type{font-size:1.0625rem}
  .callout{padding:var(--space-5)}
  .cards{grid-template-columns:1fr;gap:var(--space-4)}.card{min-height:0;padding:var(--space-5)}
  .names{columns:1}.difficulty,.size-grid{grid-template-columns:1fr!important}
  .game-table,.alt-table,.compare{display:block;overflow-x:auto;white-space:nowrap;margin-inline:0}
  .footer-inner{align-items:flex-start;flex-direction:column;gap:var(--space-3)}
  .cookie-banner{align-items:stretch!important;flex-direction:column!important}.cookie-actions{width:100%!important}.cookie-button{flex:1}
}