/* ChalkTalkFB — chalkboard landing page. Fonts: Cabin Sketch, Kalam, Source Sans 3 (SIL OFL 1.1, see /assets/fonts). */
@font-face{font-family:"Cabin Sketch";src:url("/assets/fonts/CabinSketch-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Kalam";src:url("/assets/fonts/Kalam-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/assets/fonts/SourceSans3-Variable.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --board:#20302a; --board-dk:#141f1b; --chalk:#f0f0e8; --chalk-dim:#c9cfc8;
  --yellow:#ffdd5a; --blue:#6eb4ff; --red:#ff695f; --teal:#5ae1c3;
  --wood:#78502c; --wood-dk:#4a2f18;
  --maxw:1100px;
  --sketch:"Cabin Sketch","Comic Sans MS",cursive;
  --hand:"Kalam","Comic Sans MS",cursive;
  --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--chalk);font-family:var(--body);font-size:1.0625rem;line-height:1.6;
  background-color:var(--board);
  background-image:
    radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.035),transparent 60%),
    radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.35) 100%),
    url("/assets/img/board-tile.webp");
  background-size:auto,auto,512px 512px;
  display:flex;flex-direction:column;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--yellow)}
a:focus-visible,.btn:focus-visible{outline:3px dashed var(--yellow);outline-offset:4px}

/* wood frame strips */
.wood{height:14px;flex:none;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.0) 0 60px,rgba(0,0,0,.10) 60px 62px,rgba(0,0,0,0) 62px 140px),
    linear-gradient(180deg,#8a5d34,#6c4626 55%,#5a3a1f)}
.wood--top{box-shadow:0 3px 0 #1e120a,0 5px 6px rgba(0,0,0,.5)}
.wood--bottom{box-shadow:0 -3px 0 #1e120a,0 -5px 6px rgba(0,0,0,.5);margin-top:auto}

/* chalk text: soft dusty glow */
.wordmark__chalk,.section__title,.card__title{text-shadow:0 0 1px rgba(240,240,232,.6),0 0 8px rgba(240,240,232,.12),0 2px 0 rgba(0,0,0,.35)}

/* HERO */
.hero{text-align:center;padding:2.5rem 1.25rem 2.25rem;max-width:var(--maxw);margin:0 auto;width:100%}
.hero__logo{width:clamp(128px,36vw,180px);margin:0 auto 1rem;border-radius:50%;
  box-shadow:0 0 0 3px rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.45)}
.wordmark{margin:0;display:flex;align-items:center;justify-content:center;gap:.25em;flex-wrap:nowrap;
  font-family:var(--sketch);font-weight:700;font-size:clamp(2.35rem,12vw,5.25rem);line-height:1;letter-spacing:.02em}
.wordmark__fb{display:inline-block;color:var(--board-dk);padding:.08em .16em .02em;border-radius:.16em;font-size:.86em;
  background:
    repeating-linear-gradient(-55deg,rgba(255,255,255,.18) 0 3px,transparent 3px 8px),
    var(--yellow);
  box-shadow:inset 0 0 0 3px rgba(255,240,170,.75),0 0 0 2px rgba(0,0,0,.25);
  transform:rotate(-2deg)}
.tagline{font-family:var(--hand);font-weight:700;color:var(--yellow);font-size:clamp(1.4rem,6vw,2.2rem);margin:.6rem 0 0;line-height:1.2;
  display:inline-block;padding-bottom:.15em;
  background:linear-gradient(90deg,transparent,var(--yellow) 8%,var(--yellow) 92%,transparent) bottom/100% 3px no-repeat}
.hero__sub{color:var(--chalk-dim);max-width:32rem;margin:1rem auto 1.5rem}

.cta{display:flex;flex-direction:column;gap:.75rem;max-width:22rem;margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.75rem 1.4rem;
  font-family:var(--hand);font-weight:700;font-size:1.2rem;text-decoration:none;border-radius:14px;
  border:3px solid currentColor;transition:transform .12s ease,background-color .12s ease}
.btn svg{width:1.4rem;height:1.4rem;fill:currentColor;flex:none}
.btn--yt{color:var(--board-dk);background:var(--yellow);border-color:#fff1a8;
  box-shadow:0 4px 0 #b39424,0 8px 18px rgba(0,0,0,.35)}
.btn--x{color:var(--chalk);background:rgba(20,31,27,.55)}
.btn:hover{transform:translateY(-2px)}
.btn--x:hover{background:rgba(240,240,232,.08)}
.btn:active{transform:translateY(1px)}
.btn--block{width:100%}

/* SECTIONS */
main{width:100%}
.section{max-width:var(--maxw);margin:0 auto;padding:2.5rem 1.25rem}
.section + .section{border-top:2px dashed rgba(240,240,232,.12)}
.section__title{font-family:var(--sketch);font-weight:700;text-align:center;font-size:clamp(1.85rem,7.5vw,2.75rem);line-height:1.15;margin:0 0 1.5rem;text-wrap:balance}

/* featured preview card */
.preview-card{margin:0 auto;max-width:360px;padding:14px 14px 18px;border-radius:22px;
  background:rgba(12,20,17,.45);border:2px solid rgba(240,240,232,.35);
  box-shadow:0 0 0 6px rgba(240,240,232,.04),0 18px 40px rgba(0,0,0,.45)}
.preview-card__frame{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:720/893;background:var(--board-dk)}
.preview-card__frame picture,.preview-card__frame img{width:100%;height:100%}
.preview-card__frame img{object-fit:cover;object-position:top}
.preview-card__badge{position:absolute;z-index:1;left:50%;bottom:13%;transform:translateX(-50%) rotate(-3deg);white-space:nowrap;
  font-family:var(--hand);font-weight:700;font-size:1rem;color:var(--board-dk);background:var(--yellow);padding:.1rem .7rem;border-radius:10px;
  box-shadow:0 3px 10px rgba(0,0,0,.4)}
.preview-card__caption{font-family:var(--hand);font-weight:700;color:var(--yellow);text-align:center;font-size:1.25rem;line-height:1.3;margin:1rem .25rem 1rem}

/* cards */
.cards{display:grid;gap:1.1rem;grid-template-columns:1fr}
.card{position:relative;padding:1.25rem 1.25rem 1.1rem;border-radius:18px;
  background:rgba(240,240,232,.035);
  border:2px solid rgba(240,240,232,.55);
  box-shadow:inset 0 0 0 1px rgba(240,240,232,.06),2px 3px 0 rgba(240,240,232,.12)}
.card:nth-child(2){border-color:rgba(255,221,90,.6)}
.card:nth-child(3){border-color:rgba(110,180,255,.6)}
.doodle{width:180px;height:120px;margin:0 auto .25rem}
.doodle .los{stroke:var(--blue);stroke-width:3.5}
.doodle .o circle{stroke:var(--chalk);stroke-width:3.2}
.doodle .x path{stroke:var(--yellow);stroke-width:4}
.doodle .x--big path{stroke-width:5}
.doodle .zone{stroke:var(--teal);stroke-width:3;stroke-dasharray:6 5}
.doodle .route{stroke:var(--red);stroke-width:3.5}
.doodle .route2{stroke:var(--chalk);stroke-width:3.2}
.doodle .ring{stroke:var(--yellow);stroke-width:2;stroke-dasharray:4 5;opacity:.8}
.doodle .label{fill:var(--chalk);stroke:none;font-family:var(--hand);font-weight:700;font-size:13px}
.card__title{font-family:var(--sketch);font-weight:700;text-align:center;font-size:1.75rem;margin:0 0 .5rem}
.card__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem}
.card__list li{font-family:var(--hand);font-weight:700;color:var(--yellow);font-size:1.05rem;padding:.1rem .7rem;
  border:1.5px dashed rgba(255,221,90,.45);border-radius:999px;line-height:1.5}

/* about */
.about{text-align:center}
.about p{max-width:38rem;margin:0 auto 1rem;color:var(--chalk-dim);font-size:1.125rem}
.about p:last-child{margin-bottom:0}

/* footer */
.footer{text-align:center;padding:2rem 1.25rem 2.25rem;border-top:2px solid rgba(240,240,232,.1);margin-top:1rem}
.footer__links{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;font-family:var(--hand);font-weight:700;font-size:1.15rem}
.footer__links a{color:var(--chalk);text-decoration:none;border-bottom:2px solid rgba(255,221,90,.6);padding:.3rem 0}
.footer__links a:hover{color:var(--yellow)}
.footer__links span{color:var(--chalk-dim);padding:.3rem 0}
.footer__copy{margin:.75rem 0 0;color:var(--chalk-dim);font-size:.95rem}

/* 404 */
.notfound{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 1.25rem}
.notfound .section__title{margin-bottom:.5rem}
.notfound p{color:var(--chalk-dim);margin:0 0 1.5rem}
.notfound .doodle{width:220px;height:146px;margin-bottom:1rem}

/* tablet / desktop */
@media (min-width:640px){
  .cta{flex-direction:row;max-width:none;justify-content:center}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards .card:last-child{grid-column:1/-1;max-width:calc(50% - .55rem);justify-self:center;width:100%}
}
@media (min-width:960px){
  .hero{padding:3.5rem 2rem 3rem}
  .section{padding:3.5rem 2rem}
  .cards{grid-template-columns:repeat(3,1fr)}
  .cards .card:last-child{grid-column:auto;max-width:none}
  .featured{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem}
  .featured .section__title{text-align:left;margin:0;font-size:3rem;justify-self:end;max-width:26rem}
  .preview-card{justify-self:start;margin:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn:hover{transform:none}}