/* Counting & Comparing (counting-comparing.html) — page-scoped styles.
Loaded after assets/portal-chrome.css: the header, the footer and their fonts
come from the shared chrome. The only shared-chrome rules here are the two
footer overrides marked below (approved desktop five-column layout, and two
footer columns on the smallest phones).
Palette: navy #174A7E and white only, plus turquoise #D2F9F6 as a wash.
Headings Poppins Black 900, running text and chrome Fredoka.
The base rules use :where() so they carry no specificity: any class rule
below (button colours, margins, gaps) wins without !important. */
@font-face{font-family:"Poppins Black";src:url("../poppins-black-latin.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
/* Two purple accents only: the hero CTA and the "Show more" button. Every card
stripe, the nav and the footer stay navy/yellow/blue/green/white as approved. */
:root{--cc-navy:#174A7E;--cc-navy-deep:#123A63;--cc-turquoise:#D2F9F6;--cc-purple:#6244BB;--cc-purple-deep:#50369B;--cc-radius:16px;--cc-wrap-max:1200px}
html{scroll-behavior:smooth}
body.cc-page,body.cc-page *::before,body.cc-page *::after{box-sizing:border-box}
body.cc-page *{box-sizing:border-box}
body.cc-page{margin:0;background:#fff;color:var(--cc-navy);font:400 16px/1.6 Fredoka,system-ui,"Segoe UI",sans-serif}
:where(body.cc-page) :where(h1,h2,h3,p,ul,figure){margin:0}
:where(body.cc-page) ul{padding:0;list-style:none}
:where(body.cc-page) a{color:inherit;text-decoration:none}
:where(body.cc-page) img{display:block;max-width:100%}
body.cc-page [hidden]{display:none!important}
body.cc-page :is(a,button,summary):focus-visible{outline:3px solid var(--cc-navy);outline-offset:3px;border-radius:8px}
body.cc-page .cc-wrap{width:min(var(--cc-wrap-max),calc(100% - 96px));margin-inline:auto}
body.cc-page .cc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body.cc-page .skip-link{position:absolute;left:16px;top:-140px;z-index:60;background:#fff;color:var(--cc-navy);font-weight:600;padding:14px 20px;border-radius:12px;box-shadow:0 10px 26px rgba(23,74,126,.25)}
body.cc-page .skip-link:focus{top:12px}
/* ---------- breadcrumb ---------- */
body.cc-page .cc-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:18px;font-size:15px;color:var(--cc-navy)}
body.cc-page .cc-crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
body.cc-page .cc-crumbs [aria-current]{color:var(--cc-navy)}
/* ---------- hero: full-bleed scene, copy in the clear sky top-left ---------- */
body.cc-page .cc-hero{position:relative;aspect-ratio:1672/941;background:#EAF7FB url("hero-desktop.webp") center/cover no-repeat;overflow:hidden}
body.cc-page .cc-hero-inner{width:100%;padding:6vw 6vw 0}
body.cc-page .cc-hero-copy{width:43%;max-width:620px}
body.cc-page .cc-hero h1{font-family:"Poppins Black",Poppins,Fredoka,system-ui,sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--cc-navy);font-size:clamp(38px,5.5vw,90px);line-height:1.16}
body.cc-page .cc-hero-lead{margin-top:clamp(12px,1.4vw,22px);max-width:34ch;font-size:clamp(18px,1.7vw,26px);line-height:1.4;color:var(--cc-navy)}
body.cc-page .cc-hero-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:clamp(16px,2vw,30px);min-height:58px;padding:16px 32px;border-radius:999px;background:var(--cc-purple);color:#fff;font:600 clamp(17px,1.6vw,22px)/1.2 Fredoka,system-ui,sans-serif;box-shadow:0 10px 24px rgba(98,68,187,.24)}
body.cc-page .cc-hero-cta:hover{background:var(--cc-purple-deep)}
body.cc-page .cc-hero-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* ---------- counting adventures ---------- */
body.cc-page .cc-catalog{padding:clamp(38px,6vw,84px) 0 clamp(30px,4vw,56px);scroll-margin-top:16px}
body.cc-page .cc-catalog h2{font-family:"Poppins Black",Poppins,Fredoka,system-ui,sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--cc-navy);font-size:clamp(32px,5.2vw,58px);line-height:1.05}
body.cc-page .cc-filters{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(18px,2.4vw,28px) 0 clamp(22px,3vw,34px)}
body.cc-page .cc-filters button{min-height:48px;padding:12px 30px;border:2px solid var(--cc-navy);border-radius:999px;background:#fff;color:var(--cc-navy);font:600 18px/1 Fredoka,system-ui,sans-serif;cursor:pointer}
body.cc-page .cc-filters button:hover{background:var(--cc-turquoise)}
body.cc-page .cc-filters button[aria-pressed="true"]{background:var(--cc-navy);color:#fff}
body.cc-page .cc-filters button[aria-pressed="true"]:hover{background:var(--cc-navy-deep)}
body.cc-page .cc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
/* Card frame is white: the navy shadow does the separating, no turquoise UI. */
body.cc-page .cc-card{display:flex;flex-direction:column;background:#fff;border:2px solid #fff;border-radius:var(--cc-radius);overflow:hidden;box-shadow:0 12px 28px rgba(23,74,126,.08)}
/* Every category stripe is the full card width and one fixed 44px row. */
body.cc-page .cc-stripe{display:flex;align-items:center;justify-content:center;height:44px;padding:0 14px;background:var(--cc-navy);color:#fff;text-align:center;font:600 18px/1.2 Fredoka,system-ui,sans-serif}
/* Category name and colour come from assets/world-cards.json, with one
page-specific user correction: Counting is sunny yellow on this page. */
body.cc-page .cc-stripe[data-category="counting"]{background:#FFD45A;color:#174A7E}
body.cc-page .cc-stripe[data-category="balance"]{background:#2F6BD8}
body.cc-page .cc-stripe[data-category="patterns"]{background:#2B713F;color:#fff}
/* The frame keeps its fixed 3:2 box and carries the same 16px white separator on
its top edge, so every card gets one identical white band under the stripe. */
body.cc-page .cc-preview{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:#fff;border-top:16px solid #fff}
/* Scene files ship everything from 16:9 to 3:2. Pinned top-left at full width with
its native height, the artwork starts exactly 16px under the stripe on every
card, keeps every character whole, and is never stretched or cropped. */
body.cc-page .cc-preview img{position:absolute;left:0;top:0;width:100%;height:auto}
/* Title bar spans the full image width and reserves the same two-line height on
every card, so one-line and two-line titles line up and nothing is clipped. */
body.cc-page h3.cc-title{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;min-height:72px;padding:10px 14px;background:rgba(23,74,126,.88);color:#fff;font-family:Fredoka,system-ui,"Segoe UI",sans-serif;font-weight:600;letter-spacing:0;font-size:clamp(15px,1.4vw,20px);line-height:1.25;text-align:center}
body.cc-page .cc-body{display:flex;flex-direction:column;padding:16px 18px 20px}
body.cc-page .cc-caption{margin-top:0;font-weight:600;font-size:clamp(17px,1.5vw,20px);color:var(--cc-navy)}
body.cc-page .cc-age{margin-top:6px;font-size:16px;color:var(--cc-navy)}
body.cc-page a.cc-play{display:flex;align-items:center;justify-content:center;margin-top:18px;min-height:52px;border-radius:12px;background:var(--cc-navy);color:#fff;font:600 clamp(18px,1.6vw,22px)/1 Fredoka,system-ui,sans-serif}
body.cc-page a.cc-play:hover{background:var(--cc-navy-deep)}
body.cc-page a.cc-play:focus-visible{outline:3px solid var(--cc-navy);outline-offset:4px}
body.cc-page .cc-show-more{display:flex;align-items:center;justify-content:center;margin:30px auto 0;min-height:58px;padding:16px 38px;border:0;border-radius:999px;background:var(--cc-purple);color:#fff;font:600 clamp(18px,1.6vw,21px)/1.2 Fredoka,system-ui,sans-serif;cursor:pointer}
body.cc-page .cc-show-more:hover{background:var(--cc-purple-deep)}
body.cc-page .cc-show-more:focus-visible{outline:3px solid var(--cc-purple);outline-offset:4px}
/* ---------- more ways to explore counting: open white composition ---------- */
body.cc-page .cc-more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,4vw,52px) 0}
body.cc-page .cc-more h2{font-family:"Poppins Black",Poppins,Fredoka,system-ui,sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--cc-navy);font-size:clamp(28px,4.2vw,50px);line-height:1.06}
body.cc-page .cc-more-lead{margin-top:16px;font-size:clamp(16px,2vw,22px);color:var(--cc-navy)}
body.cc-page .cc-more-materials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,40px);align-items:end}
/* Soft pale wash behind the real paper, no bordered panel and no framing. */
body.cc-page .cc-mat{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}
body.cc-page .cc-mat img{position:relative;width:100%;height:auto;max-height:clamp(180px,24vw,320px);object-fit:contain;border-radius:0;filter:drop-shadow(0 14px 20px rgba(23,74,126,.22)) drop-shadow(0 0 26px rgba(210,249,246,.95));transform:rotate(-2.4deg)}
body.cc-page .cc-mat--book img{transform:rotate(1.8deg)}
body.cc-page .cc-mat figcaption{position:relative}
body.cc-page a.cc-arrow-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:clamp(17px,1.7vw,21px);line-height:1.2;color:var(--cc-navy);text-decoration:underline;text-underline-offset:6px}
/* ---------- a little help for you ---------- */
body.cc-page .cc-parent{padding:clamp(26px,4vw,56px) 0}
body.cc-page .cc-parent-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,60px);align-items:center}
body.cc-page .cc-parent h2{font-family:"Poppins Black",Poppins,Fredoka,system-ui,sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--cc-navy);font-size:clamp(28px,4.2vw,52px);line-height:1.06}
body.cc-page .cc-parent-tip{margin:18px 0 22px;max-width:46ch;font-size:clamp(16px,2vw,22px);color:var(--cc-navy)}
body.cc-page .cc-parent-preview{width:clamp(200px,22vw,300px);height:auto;filter:drop-shadow(0 18px 28px rgba(23,74,126,.24));transform:rotate(1.6deg)}
/* ---------- what shall we explore next? ---------- */
body.cc-page .cc-next{padding:clamp(30px,5vw,64px) 0 32px}
body.cc-page .cc-next h2{font-family:"Poppins Black",Poppins,Fredoka,system-ui,sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--cc-navy);font-size:clamp(28px,4.6vw,54px);line-height:1.05}
body.cc-page .cc-next-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,30px);margin-top:clamp(20px,3vw,34px)}
body.cc-page .cc-next-item a{display:flex;flex-direction:column}
/* True alpha art: no corner clipping, the organic edge does the framing. */
body.cc-page .cc-next-media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden}
/* Absolute fill: an intrinsic square (the Ori cutout) cannot stretch the 3:2 box. */
body.cc-page .cc-next-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
body.cc-page .cc-next-title{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:"Poppins Black",Poppins,Fredoka,system-ui,sans-serif;font-weight:900;letter-spacing:-.02em;color:var(--cc-navy);font-size:clamp(17px,1.55vw,23px);line-height:1.2}
body.cc-page .cc-next-sub{margin-top:6px;font-size:clamp(14px,1.3vw,17px);color:var(--cc-navy)}
body.cc-page .cc-next-item a:hover .cc-next-title{text-decoration:underline;text-underline-offset:5px}
/* ---------- wave above the shared navy footer ---------- */
body.cc-page .cc-wave{line-height:0;background:#fff}
body.cc-page .cc-wave svg{display:block;width:100%;height:clamp(28px,4.5vw,86px)}
@media (max-width:1024px){
body.cc-page .cc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body.cc-page .cc-next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
body.cc-page .cc-more{grid-template-columns:minmax(0,1fr);gap:20px}
body.cc-page .cc-more-materials{gap:12px}
body.cc-page .cc-mat img{max-height:none}
body.cc-page a.cc-arrow-link{gap:7px;font-size:16px}
}
/* Tablets keep the desktop scene (same illustration) but the copy sits higher
in the quiet sky and runs smaller, so the lead never reaches Ori's brow and
the CTA stays clear of his face. Desktop >1024px and phones <=760px unchanged. */
@media (min-width:761px) and (max-width:1024px){
body.cc-page .cc-hero-inner{padding-top:4vw}
body.cc-page .cc-hero h1{font-size:clamp(34px,4.5vw,46px)}
body.cc-page .cc-hero-lead{font-size:16px}
}
@media (max-width:760px){
body.cc-page .cc-wrap{width:calc(100% - 40px)}
body.cc-page .cc-crumbs{padding-top:12px;font-size:14px}
/* Portrait scene with the copy centred in the sky above it. */
body.cc-page .cc-hero{aspect-ratio:941/1672;background-image:url("hero-mobile.webp")}
body.cc-page .cc-hero-inner{padding:clamp(22px,6vw,40px) 20px 0;text-align:center}
body.cc-page .cc-hero-copy{width:100%;max-width:32rem;margin-inline:auto}
body.cc-page .cc-hero h1{font-size:clamp(32px,9vw,46px)}
body.cc-page .cc-hero-lead{margin-top:12px;margin-inline:auto;font-size:clamp(15px,4vw,18px);max-width:30ch}
body.cc-page .cc-hero-cta{margin-top:18px;min-height:52px;padding:14px 26px}
body.cc-page .cc-filters{gap:10px}
body.cc-page .cc-filters button{padding:12px 22px;font-size:17px}
body.cc-page .cc-parent-inner{grid-template-columns:minmax(0,1fr) minmax(0,42%)}
body.cc-page .cc-parent h2{font-size:clamp(24px,7.4vw,34px)}
body.cc-page .cc-parent-tip{margin:12px 0 16px;font-size:15px}
body.cc-page .cc-parent-preview{width:100%}
}
@media (max-width:700px){
body.cc-page .cc-grid{grid-template-columns:minmax(0,1fr)}
body.cc-page .cc-next-grid{gap:14px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
body.cc-page *,body.cc-page *::before,body.cc-page *::after{transition:none!important;animation:none!important}
}