* { margin: 0; padding: 0; box-sizing: border-box; }
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/baloo2.woff2') format('woff2');
}
:root {
  --font-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --ink: #33303a;          /* body text: cool graphite */
  --ink-soft: #6d6880;
  --violet: #6b4de6;       /* the house colour: ink on paper */
  --violet-dark: #4c33b8;
  --sun: #ffb703;          /* the call to action */
  --sun-dark: #d98d00;
  --rose: #e0457b;         /* solutions, answers, the line through the maze */
  --teal: #12b0a0;
  --line: #e4dff3;
  --paper: #fdfbff;
}
h1, h2, h3, .brand-name, .btn-primary, .pill { font-family: var(--font-display); }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: linear-gradient(160deg, #efeaff 0%, #f8f5ff 46%, #fff6e4 100%) fixed;
  color: var(--ink);
  min-height: 100vh; display: flex; flex-direction: column;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; width: 100%; }
main.wrap { flex: 1; padding-bottom: 60px; }
a { color: var(--violet-dark); }

/* header */
.site-header { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; }
.site-header::after { content: ""; display: block; height: 5px;
  background: linear-gradient(90deg, var(--violet), var(--teal), var(--sun), var(--rose), var(--violet)); }
.header-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand-mark { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 2px 5px rgba(107,77,230,.3)); transition: transform .25s ease; }
.brand:hover .brand-mark { transform: scale(1.06) rotate(-4deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-name { font-weight: 800; font-size: 1.38rem; letter-spacing: -.01em; color: var(--violet-dark); white-space: nowrap; }
.brand-name b { color: var(--sun-dark); font-weight: 800; }
.brand-tagline { font-size: .64rem; font-weight: 600; color: #96909f; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; white-space: nowrap; }
.nav-open { display: none; }
.nav-burger { display: none; flex-direction: column; gap: 4px; cursor: pointer; padding: 8px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--violet-dark); border-radius: 2px; }
.header-nav { display: flex; align-items: center; gap: 18px; }
.header-nav a { text-decoration: none; color: var(--ink); font-size: .92rem; font-weight: 600; }
.header-nav a:hover { color: var(--violet); }
.nav-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--violet); color: #fff !important;
  padding: 8px 14px; border-radius: 999px; }
.nav-cta:hover { background: var(--violet-dark); }
@media (max-width: 879px) {
  .brand-name { font-size: 1.2rem; } .brand-mark { width: 38px; height: 38px; }
  .nav-burger { display: flex; }
  .header-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: #fff; border-top: 1px solid var(--line); padding: 8px 20px 14px; }
  .header-nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .nav-cta { justify-content: center; margin-top: 10px; border-bottom: 0; }
  .nav-open:checked ~ .header-nav { display: flex; }
}
/* Mobile header CTA: the desktop nav pill collapses into the burger below the nav
   breakpoint; this compact twin keeps one primary action visible. */
.nav-cta-mobile { display: none; align-items: center; padding: 7px 13px;
  border-radius: 999px; font-size: .85rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 879px) { .nav-cta-mobile { display: inline-flex; } }

/* hero */
.hero { text-align: center; padding: 44px 0 26px; }
.hero h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; color: var(--violet-dark); }
.lead { color: var(--ink-soft); font-size: 1.08rem; max-width: 700px; margin: 12px auto 0; line-height: 1.65; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; background: var(--sun);
  color: #4a3200; text-decoration: none; font-weight: 700; padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(255,183,3,.4); }
.btn-primary:hover { background: var(--sun-dark); color: #fff; }

/* breadcrumbs */
.crumbs { font-size: .85rem; color: var(--ink-soft); padding: 16px 0 4px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--violet); text-decoration: underline; }
.crumbs .sep { margin: 0 7px; opacity: .5; }

/* pills */
.pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px; text-decoration: none; color: var(--violet-dark); font-weight: 700; font-size: .95rem;
  transition: transform .15s ease, box-shadow .15s ease; }
.pill:hover { border-color: var(--violet); box-shadow: 0 4px 12px rgba(107,77,230,.18); transform: translateY(-1px); }
.pills .pill:nth-child(5n+1) { background: #efeaff; border-color: #d8ccfa; }
.pills .pill:nth-child(5n+2) { background: #fff3d6; border-color: #f6e0a2; }
.pills .pill:nth-child(5n+3) { background: #ddf6f2; border-color: #b3e7de; }
.pills .pill:nth-child(5n+4) { background: #fde7ef; border-color: #f7c4d7; }
.pills .pill:nth-child(5n+5) { background: #eaf1ff; border-color: #c9d9fa; }

/* section headings */
.sec-h { display: flex; align-items: center; gap: 9px; margin: 34px 0 6px; color: var(--violet-dark); font-size: 1.35rem; }
.sec-note { color: var(--ink-soft); font-size: .92rem; margin-bottom: 16px; }

/* home: one block per mechanic, one card per collection */
.mech-block { margin-top: 10px; }
.col-cards { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
@media (max-width: 860px) { .col-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .col-cards { grid-template-columns: 1fr; } }
.col-card { display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 16px 12px 12px; text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.col-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(107,77,230,.16); border-color: #cbb9f7; }
.col-card-media { flex: none; width: 62px; height: 80px; border-radius: 8px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); }
.col-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.col-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.col-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--violet-dark); line-height: 1.25; }
.col-card-meta { color: var(--ink-soft); font-size: .84rem; }

/* collection hero */
.col-hero { padding: 18px 0 8px; }
.col-hero-row { display: flex; align-items: flex-start; gap: 16px; }
.col-icon { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 18px; background: #efeaff; color: var(--violet); }
@media (max-width: 700px) { .col-hero-row { gap: 12px; } .col-icon { width: 52px; height: 52px; border-radius: 14px; } }
.col-hero h1 { font-size: clamp(1.6rem, 4.4vw, 2.3rem); color: var(--violet-dark); letter-spacing: -.02em; line-height: 1.15; }
.col-hero .lead { margin: 10px 0 0; max-width: none; text-align: left; }
.byline { margin-top: 14px; font-size: .86rem; color: var(--ink-soft); }
.byline a { color: var(--violet-dark); }
.byline .dot { margin: 0 6px; opacity: .5; }

/* sheet cards. Not links: the download IS the action (see inc_sheets_grid.php). */
.grid { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); margin-top: 16px; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
.card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(107,77,230,.18); border-color: #cbb9f7; }
.card-media { display: block; position: relative; background: #fff; border-bottom: 1px solid var(--line); }
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 210/297; object-fit: contain; }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--violet-dark); line-height: 1.25; }
.card-desc { color: var(--ink-soft); font-size: .84rem; line-height: 1.5; flex: 1; }
.card-dl { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }

/* download buttons */
.dl-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: .82rem; font-weight: 700;
  color: var(--violet-dark); text-decoration: none; cursor: pointer; line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.dl-btn svg { flex: none; }
.dl-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(107,77,230,.16); }
.dl-btn.primary { background: var(--violet); border-color: var(--violet); color: #fff; }
.dl-btn.primary:hover { background: var(--violet-dark); border-color: var(--violet-dark); }

/* pinterest pill on cards (house C13) */
.pin-btn { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center;
  gap: 5px; background: #bd081c; color: #fff; font-size: .74rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; opacity: 0; cursor: pointer; transition: opacity .15s ease; }
.card:hover .pin-btn, .pin-btn:focus { opacity: 1; }

/* prose + how it works */
.prose { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 24px 28px; margin-top: 30px; line-height: 1.75; color: var(--ink); }
.prose h2, .prose h3 { color: var(--violet-dark); margin: 18px 0 8px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin-bottom: 12px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 12px 22px; }
.how { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 26px 30px; margin-top: 32px; }
.how h2 { color: var(--violet-dark); margin-bottom: 12px; }
.how ol { padding-left: 22px; color: var(--ink-soft); line-height: 2; }
.how-more { margin-top: 10px; font-size: .9rem; }

/* share row */
.share-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
.share-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--ink);
  text-decoration: none; cursor: pointer; line-height: 1;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.share-btn svg { flex: none; }
.share-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.sb-pin:hover  { color: #bd081c; border-color: #bd081c; }
.sb-fb:hover   { color: #1877f2; border-color: #1877f2; }
.sb-wa:hover   { color: #25d366; border-color: #25d366; }
.sb-copy:hover { color: var(--violet-dark); border-color: var(--violet); }

/* forms */
.sp-body form { margin-top: 26px; }
.sp-body form label { display: block; margin: 16px 0 6px; font-weight: 600; font-size: .92rem;
  color: var(--violet-dark); }
.sp-body form input[type="text"], .sp-body form input[type="email"], .sp-body form textarea {
  display: block; width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; background: #fff; color: var(--ink); box-sizing: border-box; }
.sp-body form input:focus, .sp-body form textarea:focus { outline: 0; border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(107,77,230,.14); }
.sp-body form textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.sp-body form input[name="website"] { position: absolute; left: -9999px; }   /* honeypot */
.sp-body form button { display: inline-flex; align-items: center; margin-top: 20px;
  background: var(--violet); color: #fff; border: 0; border-radius: 999px; padding: 12px 26px;
  font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(107,77,230,.32); }
.sp-body form button:hover { background: var(--violet-dark); }
.form-ok { margin-top: 22px; padding: 16px 20px; border-radius: 14px; background: #e8fbf6;
  border: 1px solid #b7ecdf; color: #0d6a5b; }

/* static / legal pages */
.static-page { max-width: 740px; margin: 8px auto 0; background: var(--paper);
  border: 1px solid var(--line); border-radius: 20px; padding: 42px 48px 46px; }
@media (max-width: 700px) { .static-page { padding: 26px 22px 30px; border-radius: 16px; } }
.sp-head { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 26px; }
.sp-head h1 { color: var(--violet-dark); font-size: clamp(1.7rem, 4.2vw, 2.2rem);
  letter-spacing: -.02em; line-height: 1.18; }
.sp-lead { margin-top: 12px; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.6; }
.creator-card { display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 0 0 28px; }
.creator-card img { width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: #f3f0fa; padding: 5px; box-sizing: border-box; }
.creator-card span { display: flex; flex-direction: column; line-height: 1.45; }
.creator-card strong { color: var(--violet-dark); font-size: 1.03rem; }
.creator-card em { font-style: normal; color: var(--ink-soft); font-size: .88rem; }
.sp-body { color: var(--ink); font-size: 1.03rem; line-height: 1.78; }
.sp-body > *:first-child { margin-top: 0; }
.sp-body p { margin: 0 0 18px; }
.sp-body h2 { color: var(--violet-dark); font-size: 1.28rem; margin: 34px 0 12px;
  padding-top: 6px; line-height: 1.3; }
.sp-body h3 { color: var(--violet-dark); font-size: 1.08rem; margin: 26px 0 8px; }
.sp-body ul, .sp-body ol { margin: 0 0 20px; padding-left: 4px; list-style: none; }
.sp-body ol { counter-reset: sp; }
.sp-body li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.sp-body ul > li::before { content: ""; position: absolute; left: 4px; top: .72em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }
.sp-body ol > li { counter-increment: sp; }
.sp-body ol > li::before { content: counter(sp); position: absolute; left: 0; top: .1em;
  width: 19px; height: 19px; border-radius: 50%; background: var(--violet); color: #fff;
  font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sp-body a { color: var(--violet-dark); text-decoration: underline;
  text-decoration-color: #c3b0f5; text-underline-offset: 3px; }
.sp-body a:hover { color: var(--violet); text-decoration-color: currentColor; }
.sp-body strong { color: var(--violet-dark); }
.sp-body hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }
/* House rule: no left-border stripes on callouts. A symmetric filled card instead. */
.sp-body blockquote { margin: 0 0 20px; padding: 16px 20px; background: #f4f0ff;
  border: 1px solid var(--line); border-radius: 14px; color: var(--ink-soft); }
.sp-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .95rem; }
.sp-body th, .sp-body td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.sp-body th { color: var(--ink-soft); font-weight: 600; }
.sp-body > p:last-child > em:only-child { display: block; margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .88rem; font-style: normal; }
.sp-more { max-width: 740px; margin: 40px auto 0; text-align: center; }
.sp-more h2 { color: var(--violet-dark); font-size: 1.1rem; margin-bottom: 4px; justify-content: center; }

/* footer */
.site-footer { background: #fff; border-top: 1px solid var(--line); margin-top: auto; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 34px 20px 22px; }
@media (max-width: 760px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
.fcol h4 { color: var(--violet-dark); font-size: .95rem; margin-bottom: 10px; }
.fcol a, .fcol .lang-current { display: block; color: var(--ink-soft); text-decoration: none; font-size: .88rem; padding: 4px 0; }
.fcol a:hover { color: var(--violet); }
.fcol .lang-current { font-weight: 700; color: var(--violet-dark); }
.footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: 14px 20px 22px; color: var(--ink-soft); font-size: .82rem; }

/* ── Maze Maker ───────────────────────────────────────────────────────────── */
.mk-hero { padding: 18px 0 6px; }
.mk-hero h1 { font-size: clamp(1.6rem, 4.4vw, 2.3rem); color: var(--violet-dark); letter-spacing: -.02em; }
.mk-hero .lead { margin: 12px 0 0; max-width: none; text-align: left; }
.mk-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 22px; }
@media (max-width: 860px) { .mk-wrap { grid-template-columns: 1fr; } }
.mk-form { background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(18px, 3vw, 24px); }
.mk-label { display: block; font-family: var(--font-display); font-weight: 700;
  color: var(--violet-dark); font-size: 1.02rem; margin: 0 0 10px; }
.mk-tiers { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.mk-tier { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.mk-tier:hover { border-color: var(--violet); }
/* The selected state is driven by the RADIO ITSELF via the adjacent-sibling combinator, so it
   follows the click with no JavaScript and no server round trip. An earlier version nested the
   input inside the label and used :has(input:checked): the selector matched in the DOM but the
   repaint did not follow the click, so picking a size looked like it did nothing. This pattern
   has no such ambiguity. The input must stay a SIBLING before its label for it to work. */
.mk-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mk-radio:checked + .mk-tier {
  border-color: var(--violet); box-shadow: 0 0 0 3px rgba(107,77,230,.14); background: #f6f2ff; }
/* The input is visually hidden, so without this a keyboard user has no idea where they are. */
.mk-radio:focus-visible + .mk-tier { outline: 3px solid var(--violet); outline-offset: 2px; }
.mk-tier .mk-check { flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #cdc4e8; background: #fff; align-self: center; transition: all .15s ease; }
.mk-radio:checked + .mk-tier .mk-check {
  border-color: var(--violet); box-shadow: inset 0 0 0 3px #fff; background: var(--violet); }
.mk-tier b { font-family: var(--font-display); font-size: .98rem; color: var(--violet-dark); }
.mk-tier em { font-style: normal; margin-left: auto; font-size: .82rem; color: var(--ink-soft); }
.mk-hint { font-size: .84rem; color: var(--ink-soft); margin: 14px 0 0; }
.mk-hint code { font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace; font-size: .86rem;
  background: #f1ecfd; border-radius: 6px; padding: 1px 6px; color: var(--violet-dark); }
.mk-submit { margin-top: 16px; width: 100%; justify-content: center; }
.mk-result { min-width: 0; }
/* The maze is capped by VIEWPORT HEIGHT, not column width. At full width an expert maze (34x45)
   rendered taller than the screen and pushed the download buttons, the entire point of the page,
   below the fold. Height-capping keeps the whole maze and its actions visible together. */
.mk-canvas { display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(14px, 3vw, 26px); box-shadow: 0 10px 30px rgba(107,77,230,.08); }
/* 50vh, not more: the target is that the maze AND the download buttons fit together on a
   1280x800 laptop, which is the smallest common desktop viewport. Verified by screenshot at
   that exact size, because this is the kind of thing that only shows up in a render. */
.mk-canvas svg { display: block; width: auto; height: auto; max-width: 100%;
  max-height: 50vh; min-height: 260px; }
@media (max-width: 860px) { .mk-canvas svg { max-height: 62vh; } }
.mk-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin: 0 0 12px; }
.mk-meta { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .86rem;
  color: var(--ink-soft); }
.mk-badge { display: inline-flex; align-items: center; gap: 6px; background: #efeaff;
  color: var(--violet-dark); font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.mk-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; }
.mk-actions .dl-btn { padding: 9px 16px; font-size: .86rem; }
.mk-note { margin-top: 12px; font-size: .84rem; color: var(--ink-soft); }
.mk-ready { margin-top: 34px; }

/* footer social row (driven by $CREATOR['sameAs'], see inc_footer.php) */
.footer-social { display: inline-flex; gap: 14px; margin: 6px 0 0; }
.social-link { display: inline-flex; align-items: center; color: var(--ink-soft); padding: 4px 0;
  transition: color .15s ease, transform .15s ease; }
.social-link:hover { color: var(--violet); transform: translateY(-1px); }