/* ============================================================================
   CAPTAIN CLEO, THE TYPE AND THE WIDE SCREEN (assets/type.css, 31 Oct 2026)
   ----------------------------------------------------------------------------
   Loaded last on every public page. Two jobs, both Maheshika's asks of 31 Oct:
   1. A thinner, more elegant display face: Quicksand 700 for headings, the
      brand mark, buttons and nav, instead of Baloo 2 at 800. Body copy drops
      from Nunito 600 to 500. Still round, still friendly, no longer heavy.
   2. Wide screens use the width: from 1100px the text sections become two
      columns, the heading on the left and the content on the right, instead
      of a narrow middle strip with empty sides. Below 1100px nothing changes.
   The game interiors (games/, play/) keep their own type; this is the site.
   ============================================================================ */
@font-face{font-family:'Quicksand';font-style:normal;font-weight:300 700;src:url('fonts/quicksand.woff2') format('woff2');font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--f-display:"Quicksand","Trebuchet MS","Segoe UI Rounded",system-ui,sans-serif}

h1,h2,h3,h4,.cc-head,.cc-foot,.cc-fmark,.eyebrow,.btn{font-family:var(--f-display)}
h1,h2,h3,h4{font-weight:700;letter-spacing:0}
h1{letter-spacing:-.005em}
p,li,dd,td,label,summary{font-weight:500}
b,strong,th{font-weight:700}
.eyebrow,.badges span,.door-world,.door-stats li,.price-eyebrow,.cmp-av{font-weight:600}
.btn,.cc-play,.cc-brand,.cc-brand b,.cc-fmark,.cc-fmark b,.door-word,.door-stats b,.doors-all a,.price-big,.price-term,.cmp thead th,.cmp tbody th,
.ticks li b,.price-points li b,.ticks li a{font-family:var(--f-display);font-weight:700}
/* the form's answer line ("Your code is on its way"): body face, medium weight, still gold */
.sf .say,.waitform .say{font-family:var(--f-body);font-weight:500}
.cc-list a,.cc-flinks a,.cc-flinks button,.cc-foot .company a{font-weight:600}
.cc-list a[aria-current="page"]{font-weight:700}
.price-big{letter-spacing:-.02em}

/* ---- the wide screen: heading left, content right ---- */
@media (min-width:1100px){
  :root{--maxw:1180px}
  .sect .wrap{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);column-gap:64px;align-items:start}
  .sect .wrap>h2,.sect .wrap>.eyebrow{grid-column:1}
  .sect .wrap>h2{margin-top:0;font-size:clamp(1.75rem,2.1vw,2.25rem);line-height:1.1}
  .sect .wrap>:not(h2):not(.eyebrow){grid-column:2;min-width:0}
  .sect .wrap>p,.sect .wrap>h3,.sect .wrap>ul,.sect .wrap>ol,.sect .wrap>details,.sect .wrap>.links{max-width:68ch}
  .sect .wrap>h3{margin-top:26px}
  .sect .wrap>h2+p,.sect .wrap>h2+h3,.sect .wrap>h2+ul{margin-top:0}
  /* sections that are a single composed block (a price card, a form, a table) span the full width */
  .sect.price .wrap,.sect .wrap.one{display:block}
}
@media (min-width:1100px){
  /* the home page: its centred sections grow to the same width as the rest of the site */
  .sec{max-width:1180px}
  .sec>p{max-width:68ch}
}
/* the home page's four doors: the same face, one step lighter */
.gate b{font-weight:700;letter-spacing:.01em}
.gate small{font-weight:500}