/* =========================================================
     CFC v2 — editorial zine layout. Same palette as styles.css.
     ========================================================= */
  :root {
    --cfc-yellow:  #FFD23F;
    --cfc-pink:    #EC008C;
    --cfc-blue:    #1AAEEF;
    --cfc-orange:  #F58220;
    --cfc-purple:  #5E2D91;
    --cfc-green:   #8DC63F;
    --cfc-ink:     #14110F;
    --cream:       #FFF6E1;
    --cream-2:     #FCE9B3;
    --cloud:       #FFFCF2;
    --font-display: "Bagel Fat One", "Lilita One", system-ui, sans-serif;
    --font-body:    "Fredoka", "Quicksand", system-ui, sans-serif;
    --font-hand:    "Caveat", cursive;
    --stroke: 3.5px;
  }
  * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
  html, body { margin: 0; padding: 0; font-family: var(--font-body); background: var(--cream); color: var(--cfc-ink); overflow-x: hidden; }
  body { font-size: 17px; line-height: 1.5; }
  img { display: block; max-width: 100%; }
  button { font-family: inherit; cursor: pointer; }
  a { color: inherit; text-decoration: none; }

  /* paper grain */
  body::before {
    content: "";
    position: fixed; inset: 0;
    background-image:
      radial-gradient(rgba(20,17,15,0.08) 1px, transparent 1.4px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
  }
  /* faint registration crosses (printer marks) */
  body::after {
    content: "";
    position: fixed; inset: 0;
    background-image:
      linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(20,17,15,0.04) calc(50% - 0.5px), rgba(20,17,15,0.04) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
      linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(20,17,15,0.04) calc(50% - 0.5px), rgba(20,17,15,0.04) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    background-size: 280px 280px;
    pointer-events: none;
    z-index: 0;
  }
  main { position: relative; z-index: 2; }

  /* =========================================================
     1. BROADCAST STRIP (top)
     ========================================================= */
  .strip {
    position: sticky; top: 0; z-index: 50;
    background: var(--cfc-ink); color: var(--cream);
    border-bottom: var(--stroke) solid var(--cfc-ink);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 60px;
    padding: 0 18px 0 14px;
    gap: 12px;
  }
  .strip__logo {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.01em;
  }
  .strip__logo img { width: 36px; height: 36px; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4)); }
  .strip__logo small {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cfc-yellow);
    line-height: 1;
    margin-top: 2px;
  }

  .ticker {
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex; align-items: center;
    border-left: 2px dashed rgba(255,255,255,0.18);
    border-right: 2px dashed rgba(255,255,255,0.18);
    padding: 0 14px;
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent);
  }
  .ticker__track {
    display: flex; align-items: center; gap: 28px;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    animation: tickerSlide 38s linear infinite;
  }
  .ticker__track span { display: inline-flex; align-items: center; gap: 28px; }
  .ticker__dot { color: var(--cfc-pink); font-size: 18px; }
  @keyframes tickerSlide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  .menu-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 8px 12px 8px 18px;
    background: var(--cfc-yellow);
    color: var(--cfc-ink);
    border: var(--stroke) solid var(--cfc-yellow);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: transform .15s, background .2s;
  }
  .menu-btn:hover { transform: translateY(-1px) rotate(-1deg); }
  .menu-btn:active { transform: translateY(1px); }
  .menu-btn__bars {
    display: inline-grid;
    grid-template-rows: repeat(5, 4px);
    gap: 2px;
    width: 26px; height: 30px;
    align-content: center;
  }
  .menu-btn__bars i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: var(--cfc-ink);
    animation: barCycle 3s ease-in-out infinite;
  }
  .menu-btn__bars i:nth-child(1) { width: 70%; animation-delay: 0s;   background: var(--cfc-purple); }
  .menu-btn__bars i:nth-child(2) { width: 100%; animation-delay: .15s; background: var(--cfc-green); }
  .menu-btn__bars i:nth-child(3) { width: 60%;  animation-delay: .30s; background: var(--cfc-orange); }
  .menu-btn__bars i:nth-child(4) { width: 90%;  animation-delay: .45s; background: var(--cfc-pink); }
  .menu-btn__bars i:nth-child(5) { width: 75%;  animation-delay: .60s; background: var(--cfc-blue); }
  @keyframes barCycle {
    0%, 100% { transform: scaleX(1); transform-origin: left; }
    50%      { transform: scaleX(1.15); transform-origin: left; }
  }
  .menu-btn.is-open .menu-btn__bars i {
    animation: none;
  }
  .menu-btn.is-open .menu-btn__bars {
    grid-template-rows: 4px;
  }

  /* =========================================================
     2. CASCADING MENU OVERLAY
     ========================================================= */
  .menu-overlay {
    position: fixed; inset: 0;
    z-index: 60;
    pointer-events: none;
  }
  .menu-overlay__scrim {
    position: absolute; inset: 0;
    background: rgba(20,17,15,0.0);
    transition: background .35s ease;
  }
  .menu-overlay.is-open { pointer-events: auto; }
  .menu-overlay.is-open .menu-overlay__scrim { background: rgba(20,17,15,0.55); }

  .menu-overlay__bars {
    position: absolute;
    inset: 0;
  }
  /* Each bar is absolutely positioned at its own 20vh slot.
     Uniform transform: translateY(-100%) closed → translateY(0) open.
     Same translate semantics for every bar = clean interpolation, no flex. */
  .menu-bar {
    position: absolute;
    left: 0; right: 0;
    height: calc(100vh / var(--menu-n, 6));
    top: calc(-100vh / var(--menu-n, 6) - 2vh);  /* closed: one bar-height above viewport (extra 2vh hides the border) */
    overflow: hidden;
    transition: top .55s cubic-bezier(.32,1.5,.45,1), filter .25s, transform .25s;
    border-bottom: var(--stroke) solid var(--cfc-ink);
    cursor: pointer;
  }
  .menu-bar:last-child { border-bottom: 0; }
  /* Count-agnostic cascade: each bar carries --menu-i (its index) and the
     container sets --menu-n (total bars). Position + stagger derive from both,
     so adding or removing menu items needs no CSS changes. */
  .menu-overlay.is-open .menu-bar {
    top: calc(var(--menu-i) * 100vh / var(--menu-n, 6));
    transition-delay: calc(var(--menu-i) * .07s);
  }
  .menu-overlay:not(.is-open) .menu-bar {
    transition-delay: calc((var(--menu-n, 6) - 1 - var(--menu-i)) * .07s);
  }

  .menu-bar--home     { background: var(--cfc-yellow); color: var(--cfc-ink); }
  .menu-bar--watch    { background: var(--cfc-purple); color: #fff; }
  .menu-bar--draw     { background: var(--cfc-green);  color: var(--cfc-ink); }
  .menu-bar--play     { background: var(--cfc-orange); color: #fff; }
  .menu-bar--read     { background: var(--cfc-pink);   color: #fff; }
  .menu-bar--connect  { background: var(--cfc-blue);   color: #fff; }
  .menu-bar--explore  { background: var(--cfc-orange); color: #fff; }
  .menu-bar--learn    { background: var(--cfc-purple); color: #fff; }

  .menu-bar__inner {
    height: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 60px 0 40px;
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: 28px;
    position: relative;
  }
  .menu-bar__num {
    font-family: var(--font-display);
    font-size: clamp(56px, 7vw, 96px);
    line-height: 0.85;
    letter-spacing: -0.02em;
    opacity: 0.85;
    transition: transform .35s cubic-bezier(.5,1.6,.5,1);
  }
  .menu-bar__title {
    font-family: var(--font-display);
    font-size: clamp(34px, 5.5vw, 86px);
    line-height: 0.9;
    margin: 0;
    letter-spacing: -0.005em;
    font-weight: 400;
    transition: transform .35s cubic-bezier(.5,1.6,.5,1);
  }
  .menu-bar__sub {
    display: block;
    font-family: var(--font-hand);
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1;
    margin-top: 8px;
    opacity: 0.9;
    font-weight: 700;
  }
  .menu-bar__arrow {
    width: 64px; height: 64px;
    border-radius: 999px;
    border: var(--stroke) solid currentColor;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 28px;
    transition: transform .35s cubic-bezier(.5,1.6,.5,1), background .2s;
  }
  .menu-bar:hover {
    transform: translateY(0) scaleY(1.12);
    z-index: 4;
    filter: brightness(1.05) saturate(1.08);
  }
  .menu-bar:hover ~ .menu-bar { transform: translateY(8px); }
  .menu-bar:hover .menu-bar__num { transform: translateX(-6px) rotate(-4deg); }
  .menu-bar:hover .menu-bar__title { transform: translateX(8px); }
  .menu-bar:hover .menu-bar__arrow {
    transform: translateX(10px) rotate(-30deg);
    background: rgba(255,255,255,0.18);
  }
  .menu-bar--draw:hover .menu-bar__arrow,
  .menu-bar--home:hover .menu-bar__arrow { background: rgba(20,17,15,0.12); }

  /* decorative big stamp on each bar */
  .menu-bar__stamp {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%) rotate(-15deg);
    font-size: clamp(120px, 18vw, 240px);
    line-height: 1;
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(4px 6px 0 rgba(0,0,0,0.2));
  }

  /* close X — sits on top right of the overlay */
  .menu-close {
    position: absolute;
    top: 14px; right: 18px;
    width: 56px; height: 56px;
    border-radius: 999px;
    background: var(--cfc-ink);
    color: var(--cfc-yellow);
    border: var(--stroke) solid var(--cfc-yellow);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 22px;
    z-index: 5;
    box-shadow: 4px 5px 0 0 rgba(0,0,0,0.4);
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
    transition: opacity .2s, transform .35s cubic-bezier(.5,1.6,.5,1);
  }
  .menu-overlay.is-open .menu-close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: .42s;
  }
  .menu-close:hover { background: var(--cfc-pink); color: #fff; transform: scale(1.08) rotate(90deg); }

  /* tiny "press M / Esc" hint */
  .menu-hint {
    position: absolute;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.7);
    background: rgba(20,17,15,0.55);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px dashed rgba(255,255,255,0.4);
    z-index: 5;
    opacity: 0;
    transition: opacity .2s ease .55s;
    pointer-events: none;
  }
  .menu-overlay.is-open .menu-hint { opacity: 1; }

  /* =========================================================
     3. MAGAZINE COVER HERO
     ========================================================= */
  .cover {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 36px 60px;
  }
  .cover__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 28px;
    border-bottom: 3px solid var(--cfc-ink);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .cover__meta .l, .cover__meta .r {
    display: inline-flex; align-items: center; gap: 12px;
  }
  .cover__meta .pip {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--cfc-pink);
    animation: pip 1.4s ease-in-out infinite;
  }
  @keyframes pip {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.5); opacity: 0.5; }
  }
  .cover__meta b { font-weight: 400; }

  .cover__grid {
    display: grid;
    grid-template-columns: 0.6fr 1.4fr 0.9fr;
    gap: 28px;
    align-items: stretch;
  }
  @media (max-width: 980px) {
    .cover__grid { grid-template-columns: 1fr; }
  }

  /* — left: huge issue numeral — */
  .cover__num {
    position: relative;
    display: grid;
    align-content: start;
    padding-top: 8px;
  }
  .cover__num-big {
    font-family: var(--font-display);
    font-size: clamp(140px, 22vw, 280px);
    line-height: 0.78;
    color: var(--cfc-pink);
    letter-spacing: -0.04em;
    text-shadow:
      4px 4px 0 var(--cfc-ink),
      8px 8px 0 var(--cfc-yellow),
      12px 12px 0 var(--cfc-ink);
    transform: rotate(-3deg);
    margin: 0;
    font-weight: 400;
  }
  .cover__num-label {
    margin-top: 36px;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .cover__num-label .rule {
    display: inline-block;
    width: 28px; height: 0; border-top: 3px solid var(--cfc-ink);
    vertical-align: middle;
    margin: 0 8px 4px 0;
  }
  .cover__byline {
    margin-top: 26px;
    font-family: var(--font-hand);
    font-size: 22px;
    line-height: 1.15;
    color: var(--cfc-purple);
    transform: rotate(-1deg);
    max-width: 300px;
  }

  /* — center: massive headline — */
  .cover__title {
    font-family: var(--font-display);
    font-size: clamp(56px, 8vw, 132px);
    line-height: 0.86;
    letter-spacing: -0.01em;
    margin: 0;
    font-weight: 400;
    color: var(--cfc-ink);
    position: relative;
  }
  .cover__title em {
    font-style: normal;
    color: var(--cfc-pink);
    position: relative;
    display: inline-block;
    transform: rotate(-2deg);
  }
  .cover__title em::after {
    content: "";
    position: absolute;
    left: -4px; right: -4px; bottom: 6%;
    height: 18%;
    background: var(--cfc-yellow);
    z-index: -1;
    transform: skewX(-8deg);
    border-radius: 4px;
  }
  .cover__title .small-line {
    display: block;
    font-family: var(--font-hand);
    font-size: clamp(22px, 2.4vw, 36px);
    color: var(--cfc-purple);
    margin-bottom: 12px;
    transform: rotate(-1deg);
    transform-origin: left;
    line-height: 1;
  }
  .cover__lede {
    margin-top: 22px;
    font-size: 19px;
    line-height: 1.45;
    max-width: 520px;
  }
  .cover__ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-top: 22px;
  }
  .cbtn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    border: var(--stroke) solid var(--cfc-ink);
    background: var(--cfc-yellow);
    color: var(--cfc-ink);
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.02em;
    box-shadow: 4px 5px 0 0 var(--cfc-ink);
    transition: transform .15s cubic-bezier(.5,1.6,.5,1), box-shadow .15s;
    white-space: nowrap;
  }
  .cbtn:hover { transform: translate(-2px,-2px); box-shadow: 6px 7px 0 0 var(--cfc-ink); }
  .cbtn:active { transform: translate(2px,2px); box-shadow: 1px 2px 0 0 var(--cfc-ink); }
  .cbtn--pink { background: var(--cfc-pink); color: #fff; }
  .cbtn--ghost { background: var(--cloud); }

  /* — right: stack of polaroid stickers — */
  .stickers {
    position: relative;
    min-height: 460px;
  }
  .sticker {
    position: absolute;
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    box-shadow: 6px 8px 0 0 var(--cfc-ink);
    padding: 10px;
    font-family: var(--font-hand);
    font-size: 16px;
    transition: transform .25s cubic-bezier(.5,1.6,.5,1), box-shadow .25s;
  }
  .sticker:hover { transform: translateY(-4px) rotate(0deg) scale(1.04) !important; box-shadow: 10px 12px 0 0 var(--cfc-ink); z-index: 10; }
  .sticker--polaroid {
    width: 220px;
    padding: 12px 12px 36px;
  }
  .sticker--polaroid .frame {
    width: 100%; aspect-ratio: 1;
    border: 2px solid var(--cfc-ink);
    background: var(--bg, var(--cfc-yellow));
    display: grid; place-items: center;
    font-size: 90px;
    overflow: hidden;
    position: relative;
  }
  .sticker--polaroid .caption {
    text-align: center;
    margin-top: 8px;
    font-family: var(--font-hand);
    font-size: 17px;
    color: var(--cfc-ink);
  }

  .sticker.s-logo {
    top: 0; right: 0;
    transform: rotate(6deg);
    z-index: 4;
  }
  .sticker.s-logo .frame { background: var(--cream-2); animation: bigWave 4.5s ease-in-out infinite; transform-origin: 50% 85%; }
  .sticker.s-sheet {
    top: 70px; left: -10px;
    transform: rotate(-7deg);
    z-index: 2;
  }
  .sticker.s-cassette {
    bottom: 0; right: 30px;
    transform: rotate(3deg);
    z-index: 3;
    width: 200px;
    padding: 10px 12px;
    background: var(--cfc-ink);
    color: var(--cfc-yellow);
  }
  .cassette {
    position: relative;
    aspect-ratio: 16/10;
    background: var(--cfc-pink);
    border: 2px solid var(--cfc-yellow);
    border-radius: 6px;
    display: grid;
    grid-template-rows: 1fr 22px;
    overflow: hidden;
  }
  .cassette__reels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 18px 18px 6px;
    align-items: center;
  }
  .cassette__reel {
    aspect-ratio: 1;
    border-radius: 999px;
    background: var(--cfc-ink);
    border: 2px solid var(--cfc-yellow);
    position: relative;
    animation: spin 6s linear infinite;
  }
  .cassette__reel::before, .cassette__reel::after {
    content: ""; position: absolute; inset: 25%;
    border: 2px solid var(--cfc-yellow);
    border-radius: 999px;
  }
  .cassette__reel::after { inset: 42%; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .cassette__strip {
    background: var(--cfc-yellow); color: var(--cfc-ink);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.1em;
    display: grid; place-items: center;
    border-top: 2px solid var(--cfc-yellow);
  }
  .sticker.s-cassette .caption { color: var(--cfc-yellow); margin-top: 6px; }

  @keyframes bigWave {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(8deg); }
  }

  /* dotted tape strips on stickers */
  .tape {
    position: absolute;
    width: 70px; height: 20px;
    background: rgba(255,210,63,0.7);
    border: 1.5px dashed rgba(20,17,15,0.4);
    top: -10px; left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    pointer-events: none;
  }

  /* — bottom of cover: contents list — */
  .contents {
    margin-top: 40px;
    border-top: 3px solid var(--cfc-ink);
    padding-top: 22px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
  }
  @media (max-width: 760px) { .contents { grid-template-columns: 1fr; } }
  .contents__head {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1;
    margin: 0;
    font-weight: 400;
  }
  .contents__head small {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 4px;
    color: rgba(20,17,15,0.7);
  }
  .contents__list {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 30px;
  }
  @media (max-width: 760px) { .contents__list { grid-template-columns: 1fr; } }
  .contents__list li {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1.5px dashed rgba(20,17,15,0.25);
    font-family: var(--font-body);
    font-size: 16px;
  }
  .contents__list .n {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--c, var(--cfc-pink));
  }
  .contents__list .t { font-weight: 600; }
  .contents__list .p {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: rgba(20,17,15,0.55);
  }

  /* =========================================================
     4. CINEMA MARQUEE / LIVE
     ========================================================= */
  .marquee-wrap {
    max-width: 1180px;
    margin: 36px auto 0;
    padding: 0 36px;
  }
  .marquee {
    background: var(--cfc-ink);
    color: var(--cfc-yellow);
    border-radius: 18px;
    padding: 28px 34px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    position: relative;
    box-shadow: 8px 10px 0 0 rgba(20,17,15,0.5);
    overflow: hidden;
  }
  /* row of bulbs */
  .bulbs {
    position: absolute;
    left: 14px; right: 14px;
    height: 12px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    pointer-events: none;
  }
  .bulbs.top { top: 10px; }
  .bulbs.bottom { bottom: 10px; }
  .bulbs i {
    height: 8px; border-radius: 999px;
    background: var(--cfc-yellow);
    animation: bulbFlash 2.4s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255,210,63,0.6);
  }
  .bulbs i:nth-child(2n)   { background: var(--cfc-pink); animation-delay: .3s;  box-shadow: 0 0 8px rgba(236,0,140,0.6); }
  .bulbs i:nth-child(3n)   { background: var(--cfc-orange); animation-delay: .6s; box-shadow: 0 0 8px rgba(245,130,32,0.6); }
  .bulbs i:nth-child(5n)   { background: var(--cfc-blue); animation-delay: .9s; box-shadow: 0 0 8px rgba(26,174,239,0.6); }
  @keyframes bulbFlash {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.85); }
  }

  .marquee__title {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 26px);
    line-height: 1;
    letter-spacing: 0.04em;
  }
  .marquee__title small {
    display: block;
    margin-top: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,210,63,0.7);
  }
  .marquee__live {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--cfc-pink);
    color: #fff;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
  }
  .marquee__live .dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: #fff;
    animation: pip 1.6s ease-in-out infinite;
  }
  .marquee__count {
    display: grid;
    grid-auto-flow: column;
    gap: 6px;
    justify-content: center;
  }
  .marquee__count > div {
    display: grid; justify-items: center;
  }
  .marquee__count .digit {
    background: var(--cfc-ink);
    border: 2px solid var(--cfc-yellow);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: 'Lilita One', var(--font-display);
    font-size: 24px;
    color: var(--cfc-yellow);
    min-width: 38px; text-align: center;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 6px rgba(255,210,63,0.4);
  }
  .marquee__count .label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,210,63,0.7);
    margin-top: 4px;
  }
  .marquee__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--cfc-yellow);
    color: var(--cfc-ink);
    border: 2.5px solid var(--cfc-yellow);
    font-family: var(--font-display);
    font-size: 14px;
    cursor: pointer;
    transition: transform .15s, background .15s;
  }
  .marquee__cta:hover { background: var(--cfc-pink); color: #fff; transform: translate(-1px,-1px); }

  @media (max-width: 760px) {
    .marquee { grid-template-columns: 1fr; text-align: center; }
    .marquee__count { justify-content: center; }
  }

  /* =========================================================
     5. POSTCARD ARC (doorways reimagined)
     ========================================================= */
  .arc {
    max-width: 1320px;
    margin: 90px auto 60px;
    padding: 0 36px;
  }
  .arc__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 20px;
    margin-bottom: 36px;
    border-bottom: 3px solid var(--cfc-ink);
    padding-bottom: 14px;
  }
  .arc__head h2 {
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 64px);
    line-height: 0.92;
    margin: 0;
    font-weight: 400;
  }
  .arc__head h2 em {
    font-style: normal; color: var(--cfc-blue);
    transform: rotate(-3deg); display: inline-block;
  }
  .arc__head p {
    margin: 0;
    font-family: var(--font-hand);
    font-size: 22px;
    color: var(--cfc-purple);
    max-width: 360px;
    text-align: right;
  }
  @media (max-width: 760px) {
    .arc__head { grid-template-columns: 1fr; }
    .arc__head p { text-align: left; }
  }

  .arc__deck {
    position: relative;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (max-width: 980px) { .arc__deck { height: auto; flex-wrap: wrap; gap: 18px; padding: 18px 0; } }

  .postcard {
    position: absolute;
    width: 240px;
    height: 320px;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 14px;
    box-shadow: 6px 8px 0 0 var(--cfc-ink);
    background: var(--bg, var(--cfc-yellow));
    color: var(--fg, var(--cfc-ink));
    padding: 22px 18px 18px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    transition:
      transform .35s cubic-bezier(.5,1.6,.5,1),
      box-shadow .35s,
      z-index 0s;
    cursor: pointer;
    overflow: hidden;
  }
  @media (max-width: 980px) {
    .postcard { position: static !important; width: calc(50% - 9px); transform: rotate(0) !important; }
  }
  @media (max-width: 600px) {
    .postcard { width: 100%; height: 260px; }
  }

  /* the arc positions: count-agnostic fan — offsets come from inline --tx/--ty/--rot/--z */
  .postcard {
    left: 50%;
    transform: translateX(-50%) translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg));
    z-index: var(--z, 1);
  }

  .postcard:hover {
    transform: translateX(-50%) translate(var(--tx, 0), -40px) rotate(0deg) scale(1.06) !important;
    box-shadow: 12px 14px 0 0 var(--cfc-ink);
    z-index: 100;
  }

  .postcard__stamp {
    position: absolute;
    top: 14px; right: 14px;
    width: 56px; height: 64px;
    background: #fff;
    border: 2px solid var(--cfc-ink);
    border-radius: 4px;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 22px;
    box-shadow: 2px 3px 0 0 rgba(0,0,0,0.3);
    background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(20,17,15,0.06) 4px 5px);
  }
  .postcard__stamp::after {
    content: "";
    position: absolute;
    inset: -3px;
    background-image:
      radial-gradient(circle at 0 50%, transparent 3px, var(--bg, var(--cfc-yellow)) 3.5px),
      radial-gradient(circle at 100% 50%, transparent 3px, var(--bg, var(--cfc-yellow)) 3.5px),
      radial-gradient(circle at 50% 0, transparent 3px, var(--bg, var(--cfc-yellow)) 3.5px),
      radial-gradient(circle at 50% 100%, transparent 3px, var(--bg, var(--cfc-yellow)) 3.5px);
    background-size: 8px 100%, 8px 100%, 100% 8px, 100% 8px;
    background-position: left center, right center, center top, center bottom;
    background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
    pointer-events: none;
  }
  .postcard__num {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.9;
  }
  .postcard__glyph {
    font-size: 90px;
    line-height: 1;
    align-self: end;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.18));
  }
  .postcard__name {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 0.95;
    margin: 6px 0 4px;
    font-weight: 400;
  }
  .postcard__sub {
    font-size: 13px;
    line-height: 1.3;
    opacity: 0.9;
    margin: 0 0 12px;
  }
  .postcard__arrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    align-self: end;
  }
  .postcard__arrow span {
    width: 32px; height: 32px;
    border-radius: 999px;
    border: 2.5px solid currentColor;
    display: grid; place-items: center;
    transition: transform .25s cubic-bezier(.5,1.6,.5,1);
  }
  .postcard:hover .postcard__arrow span { transform: rotate(-45deg) scale(1.1); }

  /* postcard color tones */
  .pc--watch    { --bg: var(--cfc-purple); --fg: #fff; }
  .pc--draw     { --bg: var(--cfc-green);  --fg: var(--cfc-ink); }
  .pc--play     { --bg: var(--cfc-orange); --fg: #fff; }
  .pc--read     { --bg: var(--cfc-pink);   --fg: #fff; }
  .pc--connect  { --bg: var(--cfc-blue);   --fg: #fff; }
  .pc--explore  { --bg: var(--cfc-orange); --fg: #fff; }
  .pc--learn    { --bg: var(--cfc-purple); --fg: #fff; }

  /* =========================================================
     6. ZINE GRID — scrapbook of latest stuff
     ========================================================= */
  .zine {
    max-width: 1320px;
    margin: 80px auto 40px;
    padding: 0 36px;
  }
  .zine__head {
    display: flex; align-items: baseline; justify-content: space-between;
    border-bottom: 3px solid var(--cfc-ink);
    padding-bottom: 12px;
    margin-bottom: 28px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .zine__head h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 0.95;
    margin: 0;
    font-weight: 400;
  }
  .zine__head .small {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .zine__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
    gap: 16px;
  }
  @media (max-width: 980px) { .zine__grid { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 640px) { .zine__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } }

  .tile {
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 16px;
    box-shadow: 5px 6px 0 0 var(--cfc-ink);
    background: #fff;
    position: relative;
    overflow: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: transform .25s cubic-bezier(.5,1.6,.5,1), box-shadow .25s;
    cursor: pointer;
  }
  .tile:hover {
    transform: translate(-3px,-4px) rotate(-1deg);
    box-shadow: 8px 10px 0 0 var(--cfc-ink);
    z-index: 5;
  }
  .tile__tag {
    display: inline-block;
    align-self: flex-start;
    background: var(--cfc-ink); color: var(--cfc-yellow);
    padding: 3px 10px; border-radius: 999px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .tile__title {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.05;
    margin: auto 0 4px;
    font-weight: 400;
  }
  .tile__meta {
    font-size: 12px;
    opacity: 0.65;
    margin-top: auto;
  }

  /* tile spans */
  .tile.big   { grid-column: span 3; grid-row: span 2; }
  .tile.wide  { grid-column: span 3; }
  .tile.tall  { grid-row: span 2; grid-column: span 2; }
  .tile.med   { grid-column: span 2; }
  @media (max-width: 980px) {
    .tile.big  { grid-column: span 4; }
    .tile.wide { grid-column: span 4; }
    .tile.tall { grid-column: span 2; grid-row: span 2; }
    .tile.med  { grid-column: span 2; }
  }
  @media (max-width: 640px) {
    .tile.big, .tile.wide, .tile.tall, .tile.med { grid-column: span 2; grid-row: span 1; }
    .tile.big, .tile.tall { grid-row: span 2; }
  }

  /* tile flavors */
  .tile--feature {
    background: linear-gradient(135deg, var(--cfc-yellow), var(--cfc-orange));
    color: var(--cfc-ink);
  }
  .tile--feature .glyph {
    font-size: 110px;
    line-height: 1;
    align-self: center;
    margin: auto;
    filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.2));
  }
  .tile--sheet {
    background: linear-gradient(135deg, var(--cfc-blue), var(--cfc-purple));
    color: #fff;
  }
  .tile--sheet .glyph { font-size: 64px; align-self: center; margin: auto; }
  .tile--quote {
    background: #fff;
    border-style: dashed;
  }
  .tile--quote .q {
    font-family: var(--font-hand);
    font-size: 24px;
    line-height: 1.15;
    margin: auto 0;
    color: var(--cfc-purple);
  }
  .tile--quote .who {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-top: 8px;
    opacity: 0.7;
  }
  .tile--circle { background: var(--cfc-green); }
  .tile--game { background: var(--cfc-pink); color: #fff; }
  .tile--game .glyph { font-size: 64px; align-self: center; margin: auto; }
  .tile--read { background: #fff; }
  .tile--read .num {
    font-family: var(--font-display);
    font-size: 56px;
    color: var(--cfc-pink);
    line-height: 0.9;
    margin: auto 0 4px;
  }

  /* =========================================================
     6. PRAYER (replaces zine grid)
     ========================================================= */
  .prayer-wrap {
    max-width: 1180px;
    margin: 80px auto 40px;
    padding: 0 36px;
  }
  .prayer-eyebrow {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--cfc-ink);
    padding-bottom: 12px;
    margin-bottom: 28px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .prayer-eyebrow .l { color: var(--cfc-pink); }
  .prayer-eyebrow .pip { color: var(--cfc-pink); animation: pip 1.6s ease-in-out infinite; }
  .prayer-eyebrow .r { margin-left: auto; opacity: 0.7; }

  .prayer-card {
    position: relative;
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 28px;
    box-shadow: 10px 12px 0 0 var(--cfc-ink);
    padding: 56px 64px 64px;
    /* lined-paper feel */
    background-image:
      repeating-linear-gradient(transparent 0 47px, rgba(20,17,15,0.06) 47px 48px);
    background-position: 0 60px;
  }
  /* left margin red rule */
  .prayer-card::before {
    content: "";
    position: absolute;
    left: 38px; top: 28px; bottom: 28px;
    width: 2px;
    background: rgba(236,0,140,0.45);
  }
  /* corner doodles */
  .prayer-card .corner {
    position: absolute;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .prayer-card .corner.tl { top: 22px; left: 64px; }
  .prayer-card .corner.tr { top: 22px; right: 28px; text-align: right; }
  .prayer-card .corner b { color: var(--cfc-pink); font-weight: 400; }

  .prayer-body {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    font-family: var(--font-body);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.5;
    color: var(--cfc-ink);
    max-width: 900px;
  }
  .prayer-body p { margin: 0 0 18px; }
  .prayer-body p.intro {
    font-family: var(--font-hand);
    font-size: clamp(28px, 3.2vw, 44px);
    color: var(--cfc-purple);
    line-height: 1.05;
    transform: rotate(-1deg);
    transform-origin: left;
    margin-bottom: 22px;
  }
  .prayer-body p.amen {
    margin-top: 26px;
    font-family: var(--font-display);
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1;
    color: var(--cfc-ink);
  }
  .prayer-body p.amen em {
    font-style: normal;
    color: var(--cfc-pink);
    position: relative;
    display: inline-block;
    transform: rotate(-3deg);
  }
  .prayer-body p.amen em::after {
    content: "";
    position: absolute;
    left: -4px; right: -4px; bottom: 8%;
    height: 16%;
    background: var(--cfc-yellow);
    z-index: -1;
    transform: skewX(-8deg);
    border-radius: 4px;
  }

  /* highlighted keywords — chunky color underline */
  .kw {
    position: relative;
    display: inline-block;
    padding: 0 2px;
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 0.95em;
    letter-spacing: 0.005em;
    color: var(--cfc-ink);
    white-space: nowrap;
  }
  .kw::after {
    content: "";
    position: absolute;
    left: -2px; right: -2px; bottom: 4%;
    height: 32%;
    background: var(--kwc, var(--cfc-yellow));
    border-radius: 4px;
    z-index: -1;
    transform: skewX(-6deg);
  }
  .kw--yellow  { --kwc: var(--cfc-yellow); }
  .kw--pink    { --kwc: var(--cfc-pink);   color: #fff; }
  .kw--blue    { --kwc: var(--cfc-blue);   color: #fff; }
  .kw--orange  { --kwc: var(--cfc-orange); color: #fff; }
  .kw--purple  { --kwc: var(--cfc-purple); color: #fff; }
  .kw--green   { --kwc: var(--cfc-green); }
  .kw--pink, .kw--blue, .kw--orange, .kw--purple { padding: 0 6px; }
  .kw--pink::after, .kw--blue::after, .kw--orange::after, .kw--purple::after {
    height: 100%; bottom: 0;
    border-radius: 6px;
  }

  /* floating decor */
  .prayer-decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }
  .prayer-decor.s1 { top: 36px;   right: 80px;  font-size: 32px; transform: rotate(-12deg); animation: floatY 5s ease-in-out infinite; }
  .prayer-decor.s2 { bottom: 30px; left: -10px; font-size: 28px; transform: rotate(8deg);   animation: floatY 6s ease-in-out infinite reverse; }
  .prayer-decor.s3 { top: 50%;    right: -14px; font-size: 30px; transform: rotate(-20deg); animation: floatY 4.5s ease-in-out infinite; }
  @keyframes floatY {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%      { transform: translateY(-10px) rotate(var(--r, 0deg)); }
  }

  @media (max-width: 760px) {
    .prayer-card { padding: 40px 28px 44px; border-radius: 22px; }
    .prayer-card::before { left: 16px; }
    .prayer-card .corner.tl { left: 28px; }
  }


  .colophon {
    max-width: 1180px;
    margin: 60px auto 40px;
    padding: 0 36px;
  }
  .letter-card {
    background: var(--cfc-yellow);
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 22px;
    box-shadow: 8px 10px 0 0 var(--cfc-ink);
    padding: 36px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 760px) { .letter-card { grid-template-columns: 1fr; padding: 24px; } }
  /* Newsletter variant — pink envelope */
  .letter-card--news {
    background: var(--cfc-pink);
    color: #fff;
    margin-bottom: 24px;
  }
  .letter-card--news .stamp {
    background: var(--cfc-yellow);
    color: var(--cfc-ink);
  }
  .letter-card--news button {
    background: var(--cfc-yellow);
    color: var(--cfc-ink);
  }
  .letter-card--news .small {
    color: rgba(255, 255, 255, 0.92);
  }
  /* envelope flap on top */
  .letter-card::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 60px;
    background:
      linear-gradient(135deg, transparent calc(50% - 1.5px), var(--cfc-ink) calc(50% - 1.5px), var(--cfc-ink) calc(50% + 1.5px), transparent calc(50% + 1.5px)) center/50% 100% no-repeat,
      linear-gradient(225deg, transparent calc(50% - 1.5px), var(--cfc-ink) calc(50% - 1.5px), var(--cfc-ink) calc(50% + 1.5px), transparent calc(50% + 1.5px)) center/50% 100% no-repeat;
    pointer-events: none;
    opacity: 0.18;
  }

  .letter-card h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 0.95;
    margin: 0 0 8px;
    font-weight: 400;
  }
  .letter-card .stamp {
    position: absolute;
    top: 16px; right: 22px;
    background: var(--cfc-pink); color: #fff;
    width: 70px; height: 80px;
    border-radius: 4px;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 13px;
    text-align: center;
    line-height: 1.1;
    box-shadow: 3px 4px 0 0 var(--cfc-ink);
    transform: rotate(8deg);
  }
  .letter-card form {
    display: flex;
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 999px;
    overflow: hidden;
    padding: 4px;
  }
  .letter-card input {
    flex: 1; font: inherit; font-size: 16px; border: 0; padding: 10px 16px;
    outline: none; background: transparent;
  }
  .letter-card button {
    border: 0;
    background: var(--cfc-ink);
    color: var(--cfc-yellow);
    font-family: var(--font-display);
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 999px;
    cursor: pointer;
  }
  /* Message-textarea variant (contact form) */
  .letter-card form.is-message {
    flex-direction: column;
    align-items: stretch;
    border-radius: 20px;
    padding: 14px 14px 12px;
    gap: 10px;
  }
  .letter-card form.is-message textarea {
    flex: 1; width: 100%;
    font: inherit; font-size: 16px;
    border: 0;
    padding: 6px 8px;
    outline: none;
    background: transparent;
    resize: vertical;
    min-height: 96px;
    line-height: 1.4;
    color: var(--cfc-ink);
    font-family: var(--font-body);
  }
  .letter-card form.is-message textarea::placeholder {
    color: rgba(20,17,15,0.45);
    font-family: var(--font-hand);
    font-size: 19px;
  }
  .letter-card form.is-message input {
    font: inherit; font-size: 15px;
    border: 0;
    border-top: 1.5px solid rgba(20,17,15,0.12);
    padding: 10px 8px 4px;
    outline: none;
    background: transparent;
    color: var(--cfc-ink);
  }
  .letter-card form.is-message input::placeholder { color: rgba(20,17,15,0.42); }
  .letter-card form.is-message input:focus { border-top-color: rgba(20,17,15,0.35); }
  .letter-card form.is-message button {
    align-self: flex-end;
  }
  .letter-card .small {
    font-family: var(--font-hand);
    font-size: 18px;
    color: var(--cfc-purple);
    margin-top: 10px;
  }

  /* Inline thank-you shown in place of a form after submit */
  .form-thanks {
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 20px;
    box-shadow: 4px 5px 0 0 var(--cfc-ink);
    padding: 18px 22px;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.15;
    color: var(--cfc-ink);
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: thanks-pop .32s cubic-bezier(.2,.9,.3,1.2) both;
  }
  .form-thanks span {
    font-family: var(--font-hand);
    font-size: 18px;
    font-weight: 500;
    color: var(--cfc-purple);
    line-height: 1.35;
  }
  @keyframes thanks-pop {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .form-thanks { animation: none; }
  }
  .letter-card input:disabled,
  .letter-card textarea:disabled,
  .letter-card button:disabled { opacity: 0.6; cursor: default; }

  .footrow {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 3px double var(--cfc-ink);
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 28px;
    font-size: 13px;
    align-items: start;
  }
  @media (max-width: 760px) { .footrow { grid-template-columns: 1fr 1fr; } }
  .footrow h4 {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 10px;
    font-weight: 400;
  }
  .footrow a { display: block; padding: 3px 0; opacity: 0.78; }
  .footrow a:hover { color: var(--cfc-pink); opacity: 1; }

  .footrow .imp {
    font-family: var(--font-hand);
    font-size: 19px;
    color: var(--cfc-purple);
    max-width: 320px;
  }
  .ext-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .ext-icons a {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 2px solid var(--cfc-ink);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 13px;
    text-decoration: none;
    box-shadow: 2px 2px 0 0 var(--cfc-ink);
    padding: 0;
    background: var(--bg, var(--cfc-yellow));
    color: var(--fg, var(--cfc-ink));
    transition: transform .12s;
  }
  .ext-icons a:hover { transform: translate(-1px,-1px) rotate(-4deg); }

  /* =========================================================
     Floating social rail — left edge of every page
     ========================================================= */
  .side-rail {
    position: fixed;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 40;
  }
  .side-rail a {
    width: 42px; height: 42px;
    border-radius: 13px;
    border: 2px solid var(--cfc-ink);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 3px 3px 0 0 var(--cfc-ink);
    background: var(--bg, var(--cfc-yellow));
    color: var(--fg, var(--cfc-ink));
    animation: rail-wave 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.22s);
    transition: transform .14s, box-shadow .14s;
  }
  .side-rail a svg { width: 21px; height: 21px; fill: currentColor; display: block; }
  .side-rail a:hover {
    transform: translate(1px, -2px) rotate(5deg) scale(1.07);
    box-shadow: 4px 6px 0 0 var(--cfc-ink);
    animation-play-state: paused;
  }
  .side-rail.is-still a { animation: none; }

  @keyframes rail-wave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-7px) rotate(-3deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .side-rail a { animation: none; }
  }
  @media (max-width: 900px) {
    .side-rail { right: 8px; gap: 9px; }
    .side-rail a {
      width: 35px; height: 35px;
      font-size: 15px; border-radius: 11px;
      box-shadow: 2px 2px 0 0 var(--cfc-ink);
    }
    .side-rail a svg { width: 18px; height: 18px; }
  }
  @media (max-width: 560px) {
    .side-rail { display: none; }
  }

  .signoff {
    text-align: center;
    margin: 40px 0 30px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
  }

  /* =========================================================
     Reduced motion
     ========================================================= */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition-duration: 0.001s !important; }
    .fx-layer { display: none !important; }
  }
  

  /* =========================================================
     INTERIOR PAGE HERO BANNER (color band per section)
     ========================================================= */
  .page-banner {
    position: relative;
    overflow: hidden;
    border-bottom: var(--stroke) solid var(--cfc-ink);
    padding: 64px 0 80px;
  }
  .page-banner.tone-watch    { background: var(--cfc-purple); color: #fff; }
  .page-banner.tone-draw     { background: var(--cfc-green);  color: var(--cfc-ink); }
  .page-banner.tone-play     { background: var(--cfc-orange); color: #fff; }
  .page-banner.tone-read     { background: var(--cfc-pink);   color: #fff; }
  .page-banner.tone-connect  { background: var(--cfc-blue);   color: #fff; }
  .page-banner.tone-draw .crumb,
  .page-banner.tone-draw .pb-kicker { color: var(--cfc-ink); opacity: 0.78; }

  .page-banner .pb-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 36px;
    position: relative;
    z-index: 2;
  }
  .crumb {
    display: inline-flex; gap: 8px; align-items: center;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 18px;
  }
  .crumb a:hover { text-decoration: underline; }
  .pb-kicker {
    display: inline-block;
    font-family: var(--font-hand);
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1;
    margin-bottom: 10px;
    transform: rotate(-1deg);
    transform-origin: left;
    opacity: 0.95;
  }
  .pb-title {
    font-family: var(--font-display);
    font-size: clamp(50px, 7.5vw, 110px);
    line-height: 0.88;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
    font-weight: 400;
    max-width: 14ch;
  }
  .pb-title em { font-style: normal; position: relative; display: inline-block; transform: rotate(-2deg); }
  .pb-title em::after {
    content: ""; position: absolute;
    left: -4px; right: -4px; bottom: 6%;
    height: 18%;
    background: var(--cfc-yellow);
    z-index: -1; transform: skewX(-8deg);
    border-radius: 4px;
  }
  .pb-title em.ink-em::after { background: var(--cfc-ink); }
  .pb-sub {
    font-size: clamp(17px, 1.8vw, 21px);
    max-width: 640px;
    margin: 0;
    line-height: 1.45;
    opacity: 0.94;
  }
  .pb-stats {
    margin-top: 28px;
    display: flex; gap: 36px; flex-wrap: wrap;
    font-family: var(--font-display);
  }
  .pb-stats .s strong {
    display: block;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
  }
  .pb-stats .s span {
    font-family: var(--font-body); font-weight: 600;
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    opacity: 0.85;
  }
  /* big background glyph */
  .pb-bigglyph {
    position: absolute;
    right: -40px; top: 50%;
    transform: translateY(-50%) rotate(-12deg);
    font-size: clamp(220px, 30vw, 420px);
    line-height: 1;
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    filter: drop-shadow(8px 10px 0 rgba(0,0,0,0.18));
  }
  @media (max-width: 700px) { .pb-bigglyph { display: none; } }

  /* repeating wavy bottom edge for the banner */
  .pb-wave {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 28px;
    background-image: radial-gradient(circle at 14px 0, var(--cream) 14px, transparent 15px);
    background-size: 28px 28px;
    background-repeat: repeat-x;
    z-index: 3;
    pointer-events: none;
  }

  /* =========================================================
     SHELL WRAPPERS for interior pages
     ========================================================= */
  .shell-page {
    max-width: 1320px;
    margin: 0 auto;
    padding: 56px 36px 40px;
    position: relative;
  }
  .shell-narrow {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 36px;
  }

  .section-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 20px;
    margin: 60px 0 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--cfc-ink);
  }
  .section-head:first-child { margin-top: 0; }
  .section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 0.95;
    margin: 0;
    font-weight: 400;
  }
  .section-head h2 .ix {
    display: inline-block;
    color: var(--accent, var(--cfc-pink));
    font-size: 0.7em;
    transform: translateY(-4px);
    margin-right: 10px;
  }
  .section-head .meta {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.65;
    text-align: right;
  }
  @media (max-width: 760px) {
    .section-head { grid-template-columns: 1fr; }
    .section-head .meta { text-align: left; }
  }

  /* =========================================================
     SONGS PAGE — featured player + group lists
     ========================================================= */
  .song-feature {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 24px;
    box-shadow: 8px 10px 0 0 var(--cfc-ink);
    background: #fff;
    overflow: hidden;
    margin-bottom: 60px;
  }
  @media (max-width: 880px) { .song-feature { grid-template-columns: 1fr; } }
  .song-feature__embed {
    background: #000;
    aspect-ratio: 16/9;
    border-right: var(--stroke) solid var(--cfc-ink);
  }
  @media (max-width: 880px) { .song-feature__embed { border-right: 0; border-bottom: var(--stroke) solid var(--cfc-ink); } }
  .song-feature__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
  .song-feature__body { padding: 28px; display: grid; align-content: center; gap: 12px; }
  .song-feature__tag {
    display: inline-block; align-self: start;
    padding: 4px 12px;
    background: var(--cfc-ink); color: var(--cfc-yellow);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 12px; letter-spacing: 0.16em;
  }
  .song-feature__title {
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 48px);
    line-height: 0.95; margin: 0; font-weight: 400;
  }
  .song-feature__ref {
    font-family: var(--font-hand);
    font-size: 22px;
    color: var(--cfc-purple);
  }

  /* ----- Spotify reference link in the banner ----- */
  .pb-spotify-link {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 22px;
    padding: 8px 16px 8px 9px;
    background: #1DB954;
    color: #062b14;
    border: 2px solid var(--cfc-ink);
    border-radius: 999px;
    box-shadow: 3px 3px 0 0 var(--cfc-ink);
    font-family: var(--font-display);
    font-size: 14px;
    text-decoration: none;
    transition: transform .14s, box-shadow .14s;
  }
  .pb-spotify-link b { font-weight: inherit; text-decoration: underline; }
  .pb-spotify-link:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 0 var(--cfc-ink); }
  .pb-spotify-link__mark {
    width: 26px; height: 26px; flex: none;
    display: grid; place-items: center;
    color: #1DB954; background: #fff;
    border: 2px solid var(--cfc-ink); border-radius: 50%;
  }
  .pb-spotify-link__mark svg { width: 16px; height: 16px; fill: currentColor; display: block; }

  /* ----- Spotify embed feature (songs page) ----- */
  .spotify-feature {
    margin: 4px 0 44px;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 26px;
    background:
      radial-gradient(130% 150% at 100% 0%, rgba(29,185,84,0.20), transparent 58%),
      #fff;
    box-shadow: 8px 10px 0 0 var(--cfc-ink);
    overflow: hidden;
    scroll-margin-top: 88px;
  }
  .spotify-feature__intro { padding: 26px 28px 4px; }
  .spotify-feature__tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: #1DB954; color: #062b14;
    border: 2px solid var(--cfc-ink); border-radius: 999px;
    padding: 6px 14px 6px 9px;
    font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em;
  }
  .spotify-feature__tag svg { width: 17px; height: 17px; fill: #062b14; display: block; }
  .spotify-feature__title {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 30px);
    margin: 14px 0 6px; line-height: 1.06;
  }
  .spotify-feature__note {
    margin: 0; max-width: 660px; line-height: 1.5; font-size: 15px; opacity: 0.9;
  }
  .spotify-feature__note a { color: #0a7a32; font-weight: 600; text-decoration: underline; }
  .spotify-feature__embed { padding: 18px 28px 26px; }
  .spotify-feature__embed iframe { display: block; width: 100%; border: 0; }
  @media (max-width: 560px) {
    .spotify-feature__intro { padding: 20px 18px 4px; }
    .spotify-feature__embed { padding: 14px 18px 20px; }
  }

  .song-group {
    margin-bottom: 56px;
  }
  .song-group__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 18px 22px;
    background: var(--c, var(--cfc-pink));
    color: var(--fg, #fff);
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 22px;
    box-shadow: 6px 8px 0 0 var(--cfc-ink);
    margin-bottom: 20px;
  }
  .song-group__head .gly {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: rgba(255,255,255,0.18);
    border: 2.5px solid currentColor;
    display: grid; place-items: center;
    font-size: 28px;
  }
  .song-group--draw .song-group__head { color: var(--cfc-ink); }
  .song-group--draw .song-group__head .gly { background: rgba(20,17,15,0.1); }
  .song-group__head h3 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1; margin: 0; font-weight: 400;
  }
  .song-group__head p {
    margin: 6px 0 0; opacity: 0.92; font-size: 14px;
  }
  .song-group__head .count {
    font-family: var(--font-display);
    font-size: 36px; line-height: 1; opacity: 0.85;
  }

  .song-list {
    display: grid;
    gap: 10px;
  }
  .song-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 18px;
    box-shadow: 4px 5px 0 0 var(--cfc-ink);
    transition: transform .15s, box-shadow .15s;
  }
  .song-row:hover {
    transform: translate(-2px, -3px);
    box-shadow: 6px 8px 0 0 var(--cfc-ink);
  }
  .song-row .num {
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--cfc-pink);
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
  }
  .song-row .body { min-width: 0; }
  .song-row .title {
    font-family: var(--font-display);
    font-size: 19px; line-height: 1.1;
    margin: 0 0 2px;
  }
  .song-row .ref {
    font-size: 13px;
    opacity: 0.7;
  }
  .song-row .langs {
    display: flex; gap: 8px;
  }
  .lang-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 8px;
    border: 2.5px solid var(--cfc-ink);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.05em;
    background: var(--bg, var(--cfc-yellow));
    color: var(--fg, var(--cfc-ink));
    transition: transform .12s;
  }
  .lang-pill:hover { transform: translate(-1px, -1px) rotate(-2deg); }
  .lang-pill.is-missing {
    opacity: 0.35;
    background: repeating-linear-gradient(45deg, #fff 0 6px, var(--cream-2) 6px 7px);
    pointer-events: none;
  }
  .lang-pill .play { font-size: 11px; }

  /* =========================================================
     CDBS PAGE
     ========================================================= */
  .cdbs-explainer {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: center;
    margin-bottom: 60px;
  }
  @media (max-width: 880px) { .cdbs-explainer { grid-template-columns: 1fr; } }
  .cdbs-questions {
    display: grid;
    gap: 12px;
  }
  .cdbs-q {
    padding: 22px 26px;
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 22px;
    box-shadow: 5px 6px 0 0 var(--cfc-ink);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    transition: transform .15s;
  }
  .cdbs-q:hover { transform: translate(-2px,-3px); }
  .cdbs-q .ix {
    width: 56px; height: 56px;
    border-radius: 999px;
    background: var(--accent, var(--cfc-green));
    border: var(--stroke) solid var(--cfc-ink);
    color: #fff;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 26px;
  }
  .cdbs-q h3 { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.1; font-weight: 400; }
  .cdbs-q p { margin: 4px 0 0; font-size: 14px; opacity: 0.75; }

  .cdbs-playlists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  @media (max-width: 880px) { .cdbs-playlists { grid-template-columns: 1fr; } }
  .cdbs-playlist {
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 22px;
    box-shadow: 6px 8px 0 0 var(--cfc-ink);
    overflow: hidden;
  }
  .cdbs-playlist__embed {
    aspect-ratio: 16/9;
    background: #000;
    border-bottom: var(--stroke) solid var(--cfc-ink);
  }
  .cdbs-playlist__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
  .cdbs-playlist__body { padding: 20px 22px; }
  .cdbs-playlist__body h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 4px; font-weight: 400; }
  .cdbs-playlist__body p  { margin: 0 0 12px; font-size: 14px; opacity: 0.8; }

  .thanks-note {
    margin: 60px 0 0;
    padding: 36px 42px;
    background: var(--cfc-yellow);
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 24px;
    box-shadow: 8px 10px 0 0 var(--cfc-ink);
    font-family: var(--font-hand);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.3;
    text-align: center;
    transform: rotate(-1deg);
  }

  /* =========================================================
     SOCHO KIDS PAGE
     ========================================================= */
  .socho-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  @media (max-width: 1080px) { .socho-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 760px)  { .socho-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 460px)  { .socho-grid { grid-template-columns: 1fr; } }

  .socho-card {
    position: relative;
    padding: 22px 22px 24px;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 22px;
    box-shadow: 6px 8px 0 0 var(--cfc-ink);
    background: var(--bg, var(--cfc-yellow));
    color: var(--fg, var(--cfc-ink));
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    min-height: 270px;
    transition: transform .2s cubic-bezier(.5,1.6,.5,1), box-shadow .2s;
    overflow: hidden;
  }
  .socho-card:hover { transform: translate(-3px,-4px) rotate(-1.5deg); box-shadow: 10px 12px 0 0 var(--cfc-ink); }
  .socho-card .num {
    font-family: var(--font-display);
    font-size: 13px; letter-spacing: 0.2em;
    opacity: 0.85;
  }
  .socho-card .glyph {
    font-size: 70px;
    line-height: 1;
    filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.18));
    margin: 4px 0;
  }
  .socho-card h3 {
    font-family: var(--font-display);
    font-size: 26px;
    margin: 0 0 8px;
    line-height: 0.95;
    font-weight: 400;
  }
  .socho-card .songs {
    display: grid;
    gap: 6px;
  }
  .socho-card .songs a, .socho-card .songs .pend {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.85);
    color: var(--cfc-ink);
    padding: 4px 10px;
    border-radius: 999px;
    border: 2px solid var(--cfc-ink);
    font-family: var(--font-display);
    font-size: 12px;
    text-decoration: none;
  }
  .socho-card .songs .pend {
    background: repeating-linear-gradient(45deg, #fff 0 5px, rgba(20,17,15,0.05) 5px 6px);
    opacity: 0.7;
  }
  .socho-card .lang-tag {
    display: inline-block;
    background: var(--cfc-ink); color: var(--cfc-yellow);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px; letter-spacing: 0.1em;
    margin-right: 4px;
  }

  .socho-questions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 30px;
  }
  @media (max-width: 980px) { .socho-questions { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .socho-questions { grid-template-columns: 1fr; } }
  .socho-q {
    padding: 20px 22px;
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 18px;
    box-shadow: 4px 5px 0 0 var(--cfc-ink);
  }
  .socho-q .q {
    font-family: var(--font-hand);
    font-size: 24px;
    color: var(--cfc-purple);
    line-height: 1.1;
    margin: 0 0 4px;
  }
  .socho-q .p {
    font-size: 13px; opacity: 0.7;
  }

  /* =========================================================
     PROJECTS PAGE
     ========================================================= */
  .project-card {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    padding: 30px 32px;
    background: var(--bg, var(--cfc-pink));
    color: var(--fg, #fff);
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 26px;
    box-shadow: 8px 10px 0 0 var(--cfc-ink);
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 780px) {
    .project-card { grid-template-columns: 1fr; padding: 24px; }
  }
  .project-card__icon {
    width: 100%; aspect-ratio: 1;
    background: rgba(255,255,255,0.15);
    border: var(--stroke) solid currentColor;
    border-radius: 22px;
    display: grid; place-items: center;
    font-size: 96px;
    align-self: center;
    overflow: hidden;
  }
  .project-card__icon img {
    width: 72%; height: 72%; object-fit: contain;
    border-radius: 16px;
  }
  .project-card__icon img.is-shot {
    width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  }
  @media (max-width: 780px) {
    .project-card__icon { aspect-ratio: 2/1; font-size: 70px; }
  }
  .project-card__tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(20,17,15,0.5);
    color: #fff;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.18em;
    margin-bottom: 12px;
  }
  .project-card.state-soon .project-card__tag {
    background: var(--cfc-ink); color: var(--cfc-yellow);
  }
  .project-card__title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 0.95;
    margin: 0 0 12px;
    font-weight: 400;
  }
  .project-card__blurb {
    font-size: 16px; line-height: 1.5; max-width: 720px;
    margin: 0 0 18px;
  }
  .project-card__bullets {
    list-style: none; padding: 0; margin: 0 0 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 18px;
    font-family: var(--font-display);
    font-size: 14px;
  }
  @media (max-width: 600px) { .project-card__bullets { grid-template-columns: 1fr; } }
  .project-card__bullets li::before {
    content: "✦  "; color: var(--cfc-yellow);
  }
  .project-card.state-soon .project-card__bullets li::before { color: var(--cfc-ink); }
  .project-card__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--cfc-ink);
    color: var(--cfc-yellow);
    border: var(--stroke) solid var(--cfc-ink);
    font-family: var(--font-display);
    font-size: 15px;
    box-shadow: 4px 5px 0 0 rgba(0,0,0,0.4);
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
  }
  .project-card__cta:hover { transform: translate(-2px,-2px); box-shadow: 6px 7px 0 0 rgba(0,0,0,0.5); }

  /* =========================================================
     CONTEST PAGE
     ========================================================= */
  .contest-marquee {
    background: var(--cfc-ink);
    color: var(--cfc-yellow);
    border-radius: 24px;
    padding: 34px 38px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 28px;
    box-shadow: 10px 12px 0 0 rgba(20,17,15,0.5);
    margin-bottom: 60px;
    overflow: hidden;
    position: relative;
  }
  @media (max-width: 760px) { .contest-marquee { grid-template-columns: 1fr; text-align: center; } }
  .contest-marquee h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1; margin: 8px 0 4px;
    font-weight: 400;
  }
  .contest-marquee p {
    margin: 0; opacity: 0.85; font-size: 14px;
    font-family: var(--font-body);
  }

  .cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 60px;
  }
  @media (max-width: 760px) { .cats { grid-template-columns: 1fr; } }
  .cat-card {
    padding: 32px;
    background: var(--bg, var(--cfc-yellow));
    color: var(--fg, var(--cfc-ink));
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 24px;
    box-shadow: 8px 10px 0 0 var(--cfc-ink);
    transition: transform .2s cubic-bezier(.5,1.6,.5,1), box-shadow .2s;
  }
  .cat-card:hover { transform: translate(-3px,-4px) rotate(-1deg); box-shadow: 12px 14px 0 0 var(--cfc-ink); }
  .cat-card h3 {
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 56px);
    line-height: 0.9;
    margin: 0 0 6px;
    font-weight: 400;
  }
  .cat-card .age {
    font-family: var(--font-hand);
    font-size: 22px;
    margin: 0 0 12px;
    opacity: 0.85;
  }
  .cat-card ul {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 6px;
    font-family: var(--font-display);
    font-size: 14px;
  }
  .cat-card ul li::before { content: "✦  "; opacity: 0.7; }

  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
  .step {
    padding: 18px 20px;
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 22px;
    box-shadow: 6px 8px 0 0 var(--cfc-ink);
    position: relative;
    transition: transform .2s;
    --step-color: var(--cfc-pink);
  }
  .step:nth-child(1) { --step-color: var(--cfc-blue);   background: color-mix(in srgb, var(--cfc-blue) 12%, #fff); }
  .step:nth-child(2) { --step-color: var(--cfc-orange); background: color-mix(in srgb, var(--cfc-orange) 12%, #fff); }
  .step:nth-child(3) { --step-color: var(--cfc-green);  background: color-mix(in srgb, var(--cfc-green) 14%, #fff); }
  .step:nth-child(4) { --step-color: var(--cfc-purple); background: color-mix(in srgb, var(--cfc-purple) 12%, #fff); }
  .step:hover { transform: translate(-2px,-3px) rotate(-1deg); }
  .step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
  }
  .step .n {
    font-family: var(--font-display);
    font-size: clamp(44px, 4.6vw, 58px);
    color: var(--step-color);
    line-height: 0.85;
  }
  .step h3 {
    font-family: var(--font-display);
    font-size: 19px; line-height: 1.1;
    margin: 0 0 8px; font-weight: 400;
  }
  .step p { margin: 0; font-size: 14px; line-height: 1.45; opacity: 0.78; }
  .step-qr {
    display: block;
    width: 86px;
    height: 86px;
    flex: none;
    padding: 6px;
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 12px;
    box-shadow: 3px 4px 0 0 var(--cfc-ink);
  }

  /* =========================================================
     CONTEST ENTRY FORM (contest2026.html)
     ========================================================= */
  .cform-wrap { max-width: 880px; margin: 0 auto; }

  /* "opens July 1st" lock banner */
  .cform-lock {
    display: flex; align-items: center; gap: 18px;
    background: var(--cfc-yellow);
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 22px;
    box-shadow: 6px 8px 0 0 var(--cfc-ink);
    padding: 20px 24px;
    margin-bottom: 30px;
  }
  .cform-lock .lk-glyph {
    font-size: 40px; line-height: 1; flex: none;
    width: 64px; height: 64px;
    display: grid; place-items: center;
    background: var(--cfc-ink); border-radius: 16px;
  }
  .cform-lock h3 {
    font-family: var(--font-display); font-weight: 400;
    margin: 0 0 4px; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.05;
  }
  .cform-lock p { margin: 0; font-size: 15px; line-height: 1.4; }

  /* a form section card */
  .cform-sec {
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 22px;
    box-shadow: 6px 8px 0 0 var(--cfc-ink);
    padding: 26px 28px 30px;
    margin-bottom: 22px;
  }
  .cform-sec__head {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--cfc-ink);
  }
  .cform-sec__num {
    font-family: var(--font-display); font-weight: 400;
    font-size: 26px; line-height: 1; color: #fff;
    flex: none; width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 3px solid var(--cfc-ink);
    border-radius: 14px;
    background: var(--sec-color, var(--cfc-pink));
    transform: rotate(-3deg);
  }
  .cform-sec__head h2 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(22px, 2.8vw, 30px); line-height: 1; margin: 0;
  }

  .field { margin-bottom: 22px; }
  .field:last-child { margin-bottom: 0; }
  .field > .lab {
    display: block;
    font-family: var(--font-body); font-weight: 600;
    font-size: 16px; margin-bottom: 6px;
  }
  .field .lab .req { color: var(--cfc-pink); margin-left: 3px; }
  .field .help {
    display: block; font-size: 13.5px; line-height: 1.45;
    opacity: 0.7; margin-bottom: 10px; max-width: 64ch;
  }
  .cform input[type="text"],
  .cform input[type="tel"],
  .cform input[type="email"],
  .cform input[type="date"],
  .cform input[type="url"] {
    width: 100%; font: inherit; font-size: 16px;
    padding: 13px 16px;
    background: var(--cloud);
    border: 3px solid var(--cfc-ink);
    border-radius: 14px;
    outline: none;
    transition: box-shadow .15s, transform .15s;
  }
  .cform input:focus {
    box-shadow: 4px 5px 0 0 var(--cfc-ink);
    transform: translate(-1px,-1px);
  }
  .cform input:disabled { background: #f3efe4; opacity: 0.85; cursor: not-allowed; }

  /* auto-filled age category readout */
  .age-readout {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 400;
    font-size: 17px;
    padding: 11px 18px;
    border: 3px solid var(--cfc-ink); border-radius: 14px;
    background: var(--cream-2);
  }
  .age-readout.is-empty { background: #f3efe4; opacity: 0.7; font-family: var(--font-body); font-weight: 500; font-size: 15px; }
  .age-readout .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cfc-green); border: 2px solid var(--cfc-ink); }

  /* radio option pills */
  .opt-row { display: flex; gap: 12px; flex-wrap: wrap; }
  .opt {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    border: 3px solid var(--cfc-ink); border-radius: 14px;
    background: var(--cloud); cursor: pointer;
    font-weight: 600; font-size: 16px;
    transition: transform .12s, box-shadow .12s;
    user-select: none;
  }
  .opt:hover { transform: translate(-2px,-2px); box-shadow: 5px 6px 0 0 var(--cfc-ink); }
  .opt input { accent-color: var(--cfc-pink); width: 18px; height: 18px; }
  .opt.is-on { background: var(--cfc-pink); color: #fff; box-shadow: 4px 5px 0 0 var(--cfc-ink); }

  /* file drop zone */
  .dropzone {
    border: 3px dashed var(--cfc-ink); border-radius: 16px;
    background: var(--cloud);
    padding: 28px; text-align: center;
  }
  .dropzone .dz-glyph { font-size: 38px; }
  .dropzone .dz-main { font-family: var(--font-display); font-weight: 400; font-size: 19px; margin: 6px 0 2px; }
  .dropzone .dz-sub { font-size: 13.5px; opacity: 0.7; }
  .or-divider {
    display: flex; align-items: center; gap: 14px;
    margin: 16px 0; font-family: var(--font-display); font-size: 14px; opacity: 0.6;
  }
  .or-divider::before, .or-divider::after {
    content: ""; flex: 1; height: 2px; background: var(--cfc-ink); opacity: 0.25;
  }

  /* consent checkboxes */
  .consent { display: flex; flex-direction: column; gap: 14px; }
  .consent label {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 14px 16px;
    border: 3px solid var(--cfc-ink); border-radius: 14px;
    background: var(--cloud); cursor: pointer;
    font-size: 14.5px; line-height: 1.5;
    transition: background .12s;
  }
  .consent label:hover { background: var(--cream); }
  .consent input { margin-top: 2px; width: 20px; height: 20px; flex: none; accent-color: var(--cfc-green); }
  .consent .muted { opacity: 0.7; }

  /* submit area */
  .cform-submit {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    text-align: center; margin: 32px 0 8px;
  }
  .cbtn--submit {
    font-family: var(--font-display); font-weight: 400;
    font-size: 22px; padding: 18px 40px;
    background: var(--cfc-pink); color: #fff;
  }
  .cbtn:disabled, .cbtn--submit:disabled {
    background: #cdc6b6; color: #6f6857;
    cursor: not-allowed; box-shadow: 4px 5px 0 0 rgba(20,17,15,0.35);
    transform: none;
  }
  .cbtn:disabled:hover, .cbtn--submit:disabled:hover { transform: none; box-shadow: 4px 5px 0 0 rgba(20,17,15,0.35); }
  .cform-submit .sub-note { font-size: 13.5px; opacity: 0.7; max-width: 50ch; }

  @media (max-width: 600px) {
    .cform-sec { padding: 22px 18px 24px; }
    .cform-lock { flex-direction: column; align-items: flex-start; }
  }

  .judging {
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 24px;
    box-shadow: 8px 10px 0 0 var(--cfc-ink);
    overflow: hidden;
  }
  .judging table { width: 100%; border-collapse: collapse; }
  .judging th, .judging td { padding: 18px 22px; text-align: left; }
  .judging thead { background: var(--cfc-ink); color: var(--cfc-yellow); }
  .judging th {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 400;
  }
  .judging tbody tr { border-top: 2px dashed rgba(20,17,15,0.18); }
  .judging tbody tr:first-child { border-top: 0; }
  .judging td .crit {
    font-family: var(--font-display);
    font-size: 19px; line-height: 1.05;
  }
  .judging td .note { font-size: 13px; opacity: 0.7; margin-top: 2px; }
  .judging td.weight {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--cfc-pink);
    text-align: right;
    white-space: nowrap;
  }

  .prizes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  @media (max-width: 980px) { .prizes { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px) { .prizes { grid-template-columns: 1fr; } }
  .prize {
    padding: 22px 22px 24px;
    background: var(--bg, var(--cfc-yellow));
    color: var(--fg, var(--cfc-ink));
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 22px;
    box-shadow: 5px 6px 0 0 var(--cfc-ink);
    transition: transform .15s;
  }
  .prize:hover { transform: translate(-2px,-3px) rotate(-1deg); }
  .prize .glyph { font-size: 52px; line-height: 1; margin-bottom: 10px; }
  .prize h3 { font-family: var(--font-display); font-size: 19px; line-height: 1.1; margin: 0 0 6px; font-weight: 400; }
  .prize p { margin: 0; font-size: 13px; opacity: 0.88; line-height: 1.4; }

  .qr-block {
    background: var(--cfc-blue);
    color: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 24px;
    box-shadow: 8px 10px 0 0 var(--cfc-ink);
    padding: 36px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: center;
  }
  @media (max-width: 760px) { .qr-block { grid-template-columns: 1fr; text-align: center; } }
  .qr-box {
    width: 180px; height: 180px;
    background: #fff;
    border: var(--stroke) solid var(--cfc-ink);
    border-radius: 16px;
    display: grid; place-items: center;
    color: var(--cfc-ink);
    font-family: var(--font-display);
    font-size: 13px;
    background-image:
      linear-gradient(45deg, var(--cfc-ink) 25%, transparent 25%),
      linear-gradient(-45deg, var(--cfc-ink) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--cfc-ink) 75%),
      linear-gradient(-45deg, transparent 75%, var(--cfc-ink) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    background-color: #fff;
    position: relative;
    margin: 0 auto;
  }
  .qr-box span {
    position: relative; z-index: 1;
    background: #fff; padding: 6px 12px; border-radius: 6px;
    border: 2px solid var(--cfc-ink);
  }
  .qr-box img {
    position: relative; z-index: 1;
    width: 88%; height: 88%; object-fit: contain;
    background: #fff; border-radius: 8px; padding: 4px;
  }
  .qr-block h3 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 6px; line-height: 1; font-weight: 400; }
  .qr-block p { margin: 0 0 14px; opacity: 0.92; }
  .qr-block .cbtn {
    background: var(--cfc-yellow);
    color: var(--cfc-ink);
    border-color: var(--cfc-ink);
  }


  /* Socho card — obtain (free / buy) pill */
  .socho-card .obtain {
    display: flex;
  }
  .socho-card .obtain__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 2.5px solid var(--cfc-ink);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: var(--cfc-ink);
    color: var(--cfc-yellow);
    transition: transform .12s, box-shadow .12s;
    box-shadow: 2px 3px 0 0 var(--cfc-ink);
  }
  .socho-card .obtain__pill:hover {
    transform: translate(-1px, -1px) rotate(-2deg);
    box-shadow: 4px 5px 0 0 var(--cfc-ink);
  }
  .socho-card .obtain__pill--free { background: var(--cfc-green); color: var(--cfc-ink); }
  .socho-card .obtain__pill--paid { background: var(--cfc-yellow); color: var(--cfc-ink); }
  .socho-card .obtain__pill span { font-size: 14px; line-height: 1; }


  /* Project card — screenshot variant (wide preview image on top) */
  .project-card--shot {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 0;
  }
  .project-card--shot .project-card__icon {
    width: 100%;
    aspect-ratio: 16/9;
    border: 0;
    border-bottom: var(--stroke) solid var(--cfc-ink);
    border-radius: 22px 22px 0 0;
    background: var(--cfc-ink);
    padding: 0;
    overflow: hidden;
  }
  .project-card--shot > div:last-child {
    padding: 28px 32px 30px;
  }
  @media (max-width: 780px) {
    .project-card--shot > div:last-child { padding: 22px; }
  }


  /* Project CTA row + interest "like" button */
  .project-card__ctarow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .like-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 8px 10px 16px;
    border-radius: 999px;
    border: var(--stroke) solid var(--cfc-ink);
    background: #fff;
    color: var(--cfc-ink);
    font-family: var(--font-display);
    font-size: 14px;
    cursor: pointer;
    box-shadow: 4px 5px 0 0 rgba(0,0,0,0.35);
    transition: transform .15s, box-shadow .15s, background .15s;
  }
  .like-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 7px 0 0 rgba(0,0,0,0.4); }
  .like-btn:active { transform: translate(1px,1px); box-shadow: 2px 3px 0 0 rgba(0,0,0,0.35); }
  .like-btn__heart { font-size: 18px; line-height: 1; color: var(--cfc-pink); transition: transform .2s; }
  .like-btn.is-liked { background: var(--cfc-pink); color: #fff; }
  .like-btn.is-liked .like-btn__heart { color: #fff; animation: likePop .35s cubic-bezier(.5,1.7,.5,1); }
  @keyframes likePop {
    0% { transform: scale(1); }
    45% { transform: scale(1.5); }
    100% { transform: scale(1); }
  }
  .like-btn__count {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--cfc-ink);
    color: var(--cfc-yellow);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }
  .like-btn.is-liked .like-btn__count { background: #fff; color: var(--cfc-pink); }

  /* =========================================================
     FX LAYER — cursor pixie trail / click burst / slow drifters
     (mounted by renderV2Page on every v2 page)
     ========================================================= */
  .fx-layer {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
  }
  .fx-trail {
    position: fixed;
    transform: translate(-50%, -50%);
    animation: fxTrail 750ms ease-out forwards;
    filter: drop-shadow(0 0 6px rgba(255,210,63,0.7));
    user-select: none;
  }
  @keyframes fxTrail {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
    40%  { opacity: 1; transform: translate(-50%, -75%) scale(1.1) rotate(180deg); }
    100% { opacity: 0; transform: translate(-50%, -160%) scale(0.3) rotate(360deg); }
  }
  .fx-burst {
    position: fixed;
    transform: translate(-50%, -50%);
    animation: fxBurst 950ms cubic-bezier(.16,.84,.36,1) forwards;
    filter: drop-shadow(2px 3px 0 rgba(20,17,15,.18)) drop-shadow(0 0 8px rgba(255,210,63,.5));
    user-select: none;
  }
  @keyframes fxBurst {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
    18%  { opacity: 1; }
    100% { opacity: 0;
           transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)))
                      scale(0.6) rotate(var(--rot, 90deg)); }
  }
  .fx-drift {
    position: fixed;
    white-space: nowrap;
    filter: drop-shadow(2px 3px 0 rgba(20,17,15,.1));
    will-change: transform;
    user-select: none;
    opacity: 0.8;
  }
  .fx-drift.from-left  { left:  -100px; animation-name: fxDriftLeft;  animation-timing-function: linear; }
  .fx-drift.from-right { right: -100px; animation-name: fxDriftRight; animation-timing-function: linear; }
  @keyframes fxDriftLeft {
    0%   { transform: translateX(0)                     translateY(0)                        rotate(-8deg); }
    25%  { transform: translateX(calc(25vw + 25px))     translateY(var(--wobble))            rotate(6deg); }
    50%  { transform: translateX(calc(50vw + 50px))     translateY(calc(var(--wobble) * -1)) rotate(-4deg); }
    75%  { transform: translateX(calc(75vw + 75px))     translateY(var(--wobble))            rotate(8deg); }
    100% { transform: translateX(calc(100vw + 200px))   translateY(0)                        rotate(-2deg); }
  }
  @keyframes fxDriftRight {
    0%   { transform: translateX(0)                     translateY(0)                        rotate(8deg); }
    25%  { transform: translateX(calc(-25vw - 25px))    translateY(var(--wobble))            rotate(-6deg); }
    50%  { transform: translateX(calc(-50vw - 50px))    translateY(calc(var(--wobble) * -1)) rotate(4deg); }
    75%  { transform: translateX(calc(-75vw - 75px))    translateY(var(--wobble))            rotate(-8deg); }
    100% { transform: translateX(calc(-100vw - 200px))  translateY(0)                        rotate(2deg); }
  }

  /* =========================================================
     EXPLORE (explore.html) + HOW WE LEARN (learn.html)
     Kid-facing hobby explorer + learning playbook.
     ========================================================= */

  /* Banner tones for the two new pages */
  .page-banner.tone-explore { background: var(--cfc-orange); color: #fff; }
  .page-banner.tone-learn   { background: var(--cfc-purple); color: #fff; }

  /* Entrance animation. Self-contained (animation-fill-mode: both) so the
     element ALWAYS ends visible — never depends on a JS observer, which would
     risk trapping content hidden if it didn't fire. */
  .pop-in { animation: popIn .6s cubic-bezier(.2,.9,.3,1) both; animation-delay: var(--d, 0s); }
  @keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .pop-in { animation: none; } }

  /* ---------- Explore controls ---------- */
  .xcontrols {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    margin: 4px 0 26px;
  }
  .xsearch {
    display: flex; align-items: center; gap: 8px; flex: 1 1 280px;
    background: var(--cloud); border: var(--stroke) solid var(--cfc-ink);
    border-radius: 999px; padding: 0 16px; height: 52px;
    box-shadow: 4px 5px 0 0 var(--cfc-ink);
  }
  .xsearch span { font-size: 19px; }
  .xsearch input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--cfc-ink);
  }
  .xsearch__clear {
    border: 0; background: var(--cfc-ink); color: var(--cream);
    width: 24px; height: 24px; border-radius: 50%; font-size: 12px; line-height: 1;
  }
  .xfilters { display: flex; flex-wrap: wrap; gap: 8px; }
  .xfilter {
    display: inline-flex; align-items: center; gap: 6px;
    border: var(--stroke) solid var(--cfc-ink); background: var(--cloud);
    border-radius: 999px; padding: 9px 15px; font-weight: 700; font-size: 14px;
    box-shadow: 3px 4px 0 0 var(--cfc-ink); transition: transform .12s, box-shadow .12s, background .12s;
  }
  .xfilter:hover { transform: translate(-1px,-1px); box-shadow: 5px 6px 0 0 var(--cfc-ink); }
  .xfilter.is-on { background: var(--cfc-yellow); transform: translate(1px,1px); box-shadow: 1px 2px 0 0 var(--cfc-ink); }
  .xfilter__g { font-size: 13px; letter-spacing: -1px; }
  .xdice {
    border: var(--stroke) solid var(--cfc-ink); background: var(--cfc-pink); color: #fff;
    border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 15px;
    box-shadow: 4px 5px 0 0 var(--cfc-ink); transition: transform .12s, box-shadow .12s;
  }
  .xdice:hover { transform: translate(-2px,-2px) rotate(-2deg); box-shadow: 6px 7px 0 0 var(--cfc-ink); }
  .xdice:active { transform: translate(2px,2px); box-shadow: 1px 2px 0 0 var(--cfc-ink); }

  /* ---------- Random pick callout ---------- */
  .xpick {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: var(--bg); color: var(--fg);
    border: var(--stroke) solid var(--cfc-ink); border-radius: 22px;
    padding: 18px 22px; margin-bottom: 30px;
    box-shadow: 8px 10px 0 0 var(--cfc-ink);
    animation: xpickPop .4s cubic-bezier(.2,1.4,.4,1);
  }
  @keyframes xpickPop { from { transform: scale(.94) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
  .xpick__spark { font-size: 40px; animation: spin360 6s linear infinite; }
  @keyframes spin360 { to { transform: rotate(360deg); } }
  .xpick > div { flex: 1; min-width: 220px; }
  .xpick__label { font-family: var(--font-hand); font-size: 22px; font-weight: 700; opacity: .9; }
  .xpick h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px,3vw,30px); margin: 2px 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .xpick p { margin: 0; font-size: 15px; opacity: .9; }
  .xpick__again {
    border: 2.5px solid currentColor; background: rgba(255,255,255,.18); color: inherit;
    border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 14px; white-space: nowrap;
  }
  .xpick__again:hover { background: rgba(255,255,255,.3); }

  /* ---------- Explore grid + cards ---------- */
  .xfamily { margin-bottom: 12px; }
  .xgrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 22px; margin-bottom: 38px;
  }
  .xcard {
    background: var(--cloud);
    border: var(--stroke) solid var(--cfc-ink); border-radius: 22px;
    box-shadow: 7px 8px 0 0 var(--cfc-ink);
    overflow: hidden; align-self: start;
    transition: transform .15s, box-shadow .15s;
  }
  .xcard:hover { transform: translate(-2px,-3px); box-shadow: 10px 12px 0 0 var(--cfc-ink); }
  .xcard__head {
    width: 100%; text-align: left; border: 0; cursor: pointer;
    background: var(--bg); color: var(--fg);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
    padding: 16px 18px;
  }
  .xcard__glyph {
    font-size: 40px; line-height: 1;
    filter: drop-shadow(2px 3px 0 rgba(0,0,0,.22));
    transition: transform .25s cubic-bezier(.5,1.6,.5,1);
  }
  .xcard:hover .xcard__glyph { transform: rotate(-8deg) scale(1.12); }
  .xcard__num { font-family: var(--font-display); font-size: 13px; opacity: .8; letter-spacing: .04em; }
  .xcard__title { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1; margin: 3px 0 5px; }
  .xcard__blurb { margin: 0; font-size: 13px; line-height: 1.35; opacity: .92; }
  .xcard__count { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; }
  .xcard__count b { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; }
  .xcard__count small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
  .xcard__chev { font-size: 18px; margin-top: 4px; transition: transform .25s; }
  .xcard.is-open .xcard__chev { transform: rotate(180deg); }

  .xcard__body { padding: 8px 18px 18px; background: var(--cloud); }
  .xsub { padding-top: 12px; }
  .xsub__title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cfc-ink); opacity: .65; margin-bottom: 8px;
  }
  .xsub__title .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cfc-ink); opacity: .4; }
  .xchips { display: flex; flex-wrap: wrap; gap: 7px; }
  .xchip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--cream); border: 2px solid var(--cfc-ink);
    border-radius: 999px; padding: 5px 10px 5px 12px; font-size: 13.5px; font-weight: 500;
    transition: transform .1s, background .1s;
  }
  .xchip:hover { transform: translateY(-2px); background: #fff; }
  .xchip.s1 { box-shadow: 2px 2px 0 0 var(--cfc-green); }
  .xchip.s2 { box-shadow: 2px 2px 0 0 var(--cfc-orange); }
  .xchip.s3 { box-shadow: 2px 2px 0 0 var(--cfc-pink); }
  .sk-stars { display: inline-flex; gap: 1px; font-size: 11px; line-height: 1; }
  .sk-stars i { color: rgba(20,17,15,.18); font-style: normal; }
  .sk-stars i.on { color: var(--cfc-orange); }

  /* ---------- Explore → learn CTA ---------- */
  .xlearn-cta {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: var(--cfc-ink); color: var(--cream);
    border: var(--stroke) solid var(--cfc-ink); border-radius: 24px;
    padding: 24px 26px; margin: 8px 0 30px;
    box-shadow: 8px 10px 0 0 var(--cfc-yellow);
  }
  .xlearn-cta__glyphs { display: flex; gap: 4px; font-size: 38px; }
  .xlearn-cta__glyphs span { animation: floaty 3.5s ease-in-out infinite; }
  .xlearn-cta__glyphs span:nth-child(2) { animation-delay: .4s; }
  .xlearn-cta__glyphs span:nth-child(3) { animation-delay: .8s; }
  .xlearn-cta > div { flex: 1; min-width: 240px; }
  .xlearn-cta .kick { font-family: var(--font-hand); font-size: 22px; color: var(--cfc-yellow); font-weight: 700; }
  .xlearn-cta h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px,2.6vw,28px); margin: 2px 0 6px; line-height: 1.05; }
  .xlearn-cta p { margin: 0; font-size: 15px; opacity: .85; max-width: 560px; }
  @keyframes floaty { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }

  /* ---------- Learn: beliefs ---------- */
  .belief-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-bottom: 38px; }
  .belief {
    background: var(--cloud); border: var(--stroke) solid var(--cfc-ink); border-radius: 20px;
    padding: 20px; box-shadow: 6px 7px 0 0 var(--cfc-ink);
    transition: transform .15s, box-shadow .15s;
  }
  .belief:hover { transform: translate(-2px,-3px); box-shadow: 9px 11px 0 0 var(--cfc-ink); }
  .belief__icon { font-size: 38px; line-height: 1; margin-bottom: 10px; display: inline-block; }
  .belief:hover .belief__icon { animation: wiggle .5s ease; }
  .belief h3 { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.05; margin: 0 0 6px; }
  .belief p { margin: 0; font-size: 14px; line-height: 1.45; opacity: .85; }
  @keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

  /* ---------- Learn: 5 stages ---------- */
  .stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 38px; }
  .stage {
    position: relative; background: var(--bg); color: var(--fg);
    border: var(--stroke) solid var(--cfc-ink); border-radius: 20px; padding: 18px;
    box-shadow: 6px 7px 0 0 var(--cfc-ink);
  }
  .stage__n {
    font-family: var(--font-display); font-size: 40px; line-height: 0.9; opacity: .9;
  }
  .stage h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 4px 0 6px; }
  .stage p { margin: 0; font-size: 14px; line-height: 1.4; opacity: .92; }
  .stage__arrow {
    position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
    font-family: var(--font-display); font-size: 26px; color: var(--cfc-ink);
    z-index: 3; animation: nudge 1.4s ease-in-out infinite;
  }
  @keyframes nudge { 0%,100% { transform: translate(0,-50%); } 50% { transform: translate(5px,-50%); } }
  @media (max-width: 640px) { .stage__arrow { display: none; } }

  /* ---------- Learn: thinking moves ---------- */
  .moves { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 38px; }
  .move {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--cloud); border: var(--stroke) solid var(--cfc-ink); border-radius: 18px;
    padding: 16px 18px; box-shadow: 5px 6px 0 0 var(--cfc-ink);
    transition: transform .15s, box-shadow .15s;
  }
  .move:hover { transform: translate(-2px,-2px); box-shadow: 8px 9px 0 0 var(--cfc-ink); }
  .move__icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
  .move:hover .move__icon { animation: wiggle .5s ease; }
  .move h3 { font-family: var(--font-display); font-weight: 400; font-size: 18px; margin: 0 0 4px; line-height: 1.05; }
  .move p { margin: 0; font-size: 14px; line-height: 1.4; opacity: .85; }

  /* ---------- Learn: daily game card ---------- */
  .game-card {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--cfc-yellow), var(--cfc-orange));
    color: var(--cfc-ink);
    border: var(--stroke) solid var(--cfc-ink); border-radius: 26px;
    padding: 30px 32px; margin-bottom: 40px;
    box-shadow: 10px 12px 0 0 var(--cfc-ink);
    display: flex; align-items: center; gap: 24px;
  }
  .game-card__text { flex: 1 1 auto; min-width: 0; }
  /* art sits in the free space on the right; capped so it never grows the box */
  .game-card__art {
    flex: 0 0 clamp(160px, 24%, 280px);
    align-self: stretch;
    display: flex; align-items: center; justify-content: center;
  }
  .game-card__art svg { width: 100%; height: auto; max-height: 230px; }
  @media (max-width: 760px) {
    .game-card { display: block; }
    .game-card__art { display: none; }
  }
  .game-card__props { position: absolute; top: 10px; right: 16px; display: flex; gap: 6px; font-size: 30px; opacity: .55; }
  .game-card__props span { animation: floaty 3s ease-in-out infinite; }
  .game-card__props span:nth-child(2){animation-delay:.3s}
  .game-card__props span:nth-child(3){animation-delay:.6s}
  .game-card__props span:nth-child(4){animation-delay:.9s}
  .game-card__props span:nth-child(5){animation-delay:1.2s}
  .game-card__kick { font-family: var(--font-hand); font-size: 24px; font-weight: 700; }
  .game-card h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px,3.4vw,36px); line-height: 1.02; margin: 4px 0 12px; max-width: 760px; }
  .game-card p { margin: 0 0 14px; font-size: 16px; line-height: 1.5; max-width: 720px; }
  .game-card__note {
    background: var(--cfc-ink); color: var(--cream); border-radius: 14px;
    padding: 12px 16px; font-size: 14px; line-height: 1.45; max-width: 720px;
  }

  /* ---------- Learn: rhythm ---------- */
  .rhythm { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 38px; }
  .rhythm__col {
    background: var(--bg); color: var(--fg);
    border: var(--stroke) solid var(--cfc-ink); border-radius: 20px; padding: 18px 20px;
    box-shadow: 6px 7px 0 0 var(--cfc-ink);
  }
  .rhythm__col h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 0 0 12px; }
  .rhythm__col ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
  .rhythm__col li { font-size: 14px; line-height: 1.35; }

  /* ---------- Learn: pick by interest ---------- */
  .interests { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 14px; }
  .interest {
    background: var(--cloud); border: var(--stroke) solid var(--cfc-ink); border-radius: 18px;
    padding: 16px 18px; box-shadow: 5px 6px 0 0 var(--cfc-ink);
    transition: transform .15s, box-shadow .15s;
  }
  .interest:hover { transform: translate(-2px,-2px); box-shadow: 8px 9px 0 0 var(--cfc-ink); }
  .interest__love { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 400; font-size: 19px; }
  .interest__emoji { font-size: 26px; }
  .interest__arrow { font-family: var(--font-display); color: var(--cfc-pink); font-size: 20px; margin: 4px 0 4px 6px; }
  .interest__start { font-size: 14px; line-height: 1.4; opacity: .85; font-weight: 500; }

  /* ---------- Learn: tips ---------- */
  .tips { list-style: none; counter-reset: tip; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
  .tips li {
    counter-increment: tip; position: relative;
    background: var(--cloud); border: 2.5px solid var(--cfc-ink); border-radius: 14px;
    padding: 14px 16px 14px 52px; font-size: 14.5px; line-height: 1.4;
    box-shadow: 4px 5px 0 0 var(--cfc-ink);
  }
  .tips li::before {
    content: counter(tip); position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--cfc-yellow); border: 2.5px solid var(--cfc-ink);
    display: grid; place-items: center; font-family: var(--font-display); font-size: 14px;
  }

  /* ---------- Shareable contest poster card ---------- */
  .poster-card {
    display: grid; grid-template-columns: auto auto; gap: 26px; align-items: center;
    justify-content: center;
    border: var(--stroke) solid var(--cfc-ink); border-radius: 24px;
    background: #fff; box-shadow: 8px 10px 0 0 var(--cfc-ink);
    padding: 22px; margin: 28px auto;
    width: fit-content; max-width: 100%;
  }
  .poster-card__thumb {
    display: block; line-height: 0; border: 3px solid var(--cfc-ink);
    border-radius: 14px; overflow: hidden; box-shadow: 4px 5px 0 0 var(--cfc-ink);
    transition: transform .14s;
  }
  .poster-card__thumb:hover { transform: translate(-1px,-2px) rotate(-1deg); }
  .poster-card__thumb img { display: block; width: 200px; max-width: 40vw; height: auto; }
  .poster-card__kicker {
    font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--cfc-pink);
  }
  .poster-card__body h3 { font-family: var(--font-display); font-size: clamp(20px, 3vw, 26px); margin: 6px 0 8px; }
  .poster-card__body p { margin: 0 0 14px; line-height: 1.5; max-width: 460px; opacity: 0.9; }
  .poster-card__btns { display: flex; gap: 10px; flex-wrap: wrap; }
  .poster-card__btns button { cursor: pointer; font: inherit; }
  @media (max-width: 620px) {
    .poster-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .poster-card__thumb img { width: 240px; max-width: 72vw; }
    .poster-card__body p { margin-left: auto; margin-right: auto; }
    .poster-card__btns { justify-content: center; }
  }