:root{
    --milk:#FFF8EC;
    --cloud:#FFFFFF;
    --rail:#3B2A20;
    --rail-soft:#8A6549;
    --sage:#7FB069;
    --sage-deep:#33501F;
    --sage-tint:#E4F1DA;
    --cookie:#F4A825;
    --cookie-deep:#7A4A06;
    --cookie-tint:#FFECC2;
    --blush:#F5949E;
    --blush-deep:#8E1F33;
    --blush-tint:#FFE0E4;
    --sky:#6EC6DE;
    --sky-deep:#0D5468;
    --sky-tint:#DCF3F8;
    --grape:#B98CD9;
    --grape-deep:#4A2B67;
    --ink:#2E241C;
    --ink-soft:#5C5045;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--milk);
    color:var(--ink);
    font-family:'Karla',sans-serif;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:600;
    margin:0;
    color:var(--ink);
  }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.8rem;
    letter-spacing:0.06em;
    text-transform:lowercase;
    display:inline-block;
    padding:4px 12px;
    border-radius:20px;
    background:var(--cookie-tint);
    color:var(--cookie-deep);
    transform:rotate(-2deg);
  }
  a{color:inherit;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 32px;}

  .rail{width:100%;height:36px;display:block;}

  nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 32px;max-width:1080px;margin:0 auto;
  }
  .logo{
    font-family:'Fraunces',serif;font-weight:700;font-size:1.2rem;
    display:flex;align-items:center;gap:10px;
  }
  .logo-mark{width:34px;height:34px;flex-shrink:0;}
  .nav-links{display:flex;gap:28px;align-items:center;font-size:0.94rem;font-weight:600;}
  .nav-links a{text-decoration:none;color:var(--ink-soft);}
  .nav-links a:hover{color:var(--blush-deep);}
  .fork-btn{
    font-family:'IBM Plex Mono',monospace;font-size:0.82rem;font-weight:500;
    background:var(--rail);color:var(--milk);
    padding:9px 18px;border-radius:20px;text-decoration:none;
    border:2px solid var(--rail);
    transform:rotate(-1.5deg);
    display:inline-block;
  }

  .confetti{position:absolute;pointer-events:none;}

  .hero{
    position:relative;
    padding:60px 32px 30px;max-width:1080px;margin:0 auto;text-align:center;
  }
  .hero h1{
    font-size:clamp(2.8rem,7vw,5.2rem);
    line-height:1.02;
    letter-spacing:-0.01em;
  }
  .hero h1 .accent1{color:var(--blush-deep);}
  .hero h1 .accent2{color:var(--sage-deep);}
  .hero h1 .accent3{color:var(--sky-deep);}
  .hero p{
    max-width:520px;margin:22px auto 0;color:var(--ink-soft);font-size:1.1rem;
  }
  .hero-ctas{display:flex;gap:16px;justify-content:center;margin-top:32px;flex-wrap:wrap;}
  .btn{
    font-family:'Karla',sans-serif;font-weight:700;font-size:0.98rem;
    padding:14px 28px;border-radius:30px;text-decoration:none;
    display:inline-block;border:2.5px solid var(--rail);
  }
  .btn-primary{background:var(--blush);color:var(--blush-deep);border-color:var(--blush-deep);transform:rotate(-1deg);}
  .btn-secondary{background:var(--milk);color:var(--ink);border-color:var(--rail);transform:rotate(1deg);}
  .btn-primary:hover, .btn-secondary:hover{transform:rotate(0deg) scale(1.03);}

  .sticker{
    position:absolute;font-family:'IBM Plex Mono',monospace;font-size:0.78rem;font-weight:500;
    background:var(--sky-tint);color:var(--sky-deep);padding:8px 14px;border-radius:14px;
    border:2px dashed var(--sky-deep);
  }

  .preamble{
    display:grid;grid-template-columns:1fr 1.3fr;gap:56px;
    padding:70px 32px;max-width:1080px;margin:0 auto;align-items:start;
  }
  .preamble blockquote{
    font-family:'Fraunces',serif;font-style:italic;font-weight:500;
    font-size:1.7rem;color:var(--sage-deep);margin:14px 0 0;line-height:1.3;
    background:var(--sage-tint);padding:24px;border-radius:18px;
    transform:rotate(-1deg);
  }
  .preamble .body p{color:var(--ink-soft);margin:14px 0 0;font-size:1.03rem;}

  .relics{padding:20px 0 70px;background:var(--sky-tint);}
  .relics .wrap{padding-top:56px;padding-bottom:56px;}
  .relics .wrap > h2{text-align:center;margin-bottom:6px;color:var(--sky-deep);}
  .relics-sub{text-align:center;color:var(--sky-deep);opacity:0.75;margin:0 0 34px;}
  .relic-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  }
  .relic-card{
    background:var(--cloud);border-radius:20px;padding:28px 18px;text-align:center;
    border:2.5px solid var(--ink);
    box-shadow:5px 5px 0 var(--ink);
  }
  .relic-card:nth-child(1){transform:rotate(-2deg);}
  .relic-card:nth-child(2){transform:rotate(1.5deg);}
  .relic-card:nth-child(3){transform:rotate(-1deg);}
  .relic-card:nth-child(4){transform:rotate(2deg);}
  .relic-icon{width:48px;height:48px;margin:0 auto 14px;}
  .relic-card h3{font-size:1.05rem;font-weight:600;}
  .relic-card p{font-size:0.87rem;color:var(--ink-soft);margin:6px 0 0;}

  .pews{padding:70px 32px;max-width:1080px;margin:0 auto;}
  .pews > .eyebrow{display:block;text-align:center;margin:0 auto 10px;width:fit-content;}
  .pews > h2{text-align:center;margin-bottom:40px;}
  .pew-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
  .pew-card{
    border-radius:22px;padding:36px 32px;border:2.5px solid var(--ink);
  }
  .pew-card.toddler{background:var(--blush);color:var(--blush-deep);transform:rotate(-1deg);}
  .pew-card.caregiver{background:var(--grape);color:var(--grape-deep);transform:rotate(1deg);}
  .pew-card h3{font-size:1.5rem;color:inherit;margin-bottom:12px;}
  .pew-card p{font-size:0.98rem;margin:0 0 20px;}
  .pew-card a{
    font-family:'IBM Plex Mono',monospace;font-size:0.84rem;text-decoration:none;font-weight:500;
    background:rgba(255,255,255,0.55);padding:8px 14px;border-radius:14px;
    display:inline-block;
  }

  .commandments{padding:20px 32px 70px;max-width:1080px;margin:0 auto;}
  .commandments > .eyebrow{display:block;margin:0 auto 10px;width:fit-content;}
  .commandments > h2{text-align:center;margin:8px 0 40px;}
  .commandment-list{display:flex;flex-direction:column;gap:16px;}
  .commandment{
    display:grid;grid-template-columns:64px 1fr;gap:20px;
    padding:22px 24px;border-radius:18px;border:2px solid var(--ink);
    background:var(--cloud);
  }
  .commandment:nth-child(1){background:var(--cookie-tint);}
  .commandment:nth-child(2){background:var(--sage-tint);}
  .commandment:nth-child(3){background:var(--sky-tint);}
  .commandment .num{
    font-family:'IBM Plex Mono',monospace;color:var(--ink);font-size:1.3rem;font-weight:500;padding-top:2px;
  }
  .commandment h3{font-size:1.2rem;margin-bottom:6px;}
  .commandment p{color:var(--ink-soft);font-size:0.96rem;margin:0;}
  .see-all{text-align:center;margin-top:34px;}
  .see-all a{
    font-family:'IBM Plex Mono',monospace;font-size:0.88rem;text-decoration:none;font-weight:500;
    color:var(--milk);background:var(--rail);padding:10px 20px;border-radius:20px;
  }

  .cta-band{background:var(--rail);color:var(--milk);padding:70px 32px;text-align:center;position:relative;overflow:hidden;}
  .cta-band h2{color:var(--milk);font-size:clamp(1.9rem,4.2vw,2.8rem);}
  .cta-band p{color:#E8D8C4;max-width:440px;margin:14px auto 28px;}
  .cta-band .btn-primary{background:var(--cookie);color:var(--cookie-deep);border-color:var(--cookie-deep);}

  footer{padding:48px 32px 60px;max-width:1080px;margin:0 auto;}
  .footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
  .footer-grid .logo{font-size:1.05rem;}
  footer p.license{color:var(--ink-soft);font-size:0.86rem;max-width:340px;}
  .footer-links{display:flex;gap:22px;font-size:0.9rem;font-weight:600;}
  .footer-links a{text-decoration:none;color:var(--ink-soft);}

  @media (max-width:760px){
    .preamble{grid-template-columns:1fr;gap:24px;}
    .relic-row{grid-template-columns:repeat(2,1fr);}
    .pew-grid{grid-template-columns:1fr;}
    .commandment{grid-template-columns:44px 1fr;}
    .nav-links{display:none;}
    .sticker{display:none;}
  }

/* doctrine page */
.page-hero{padding:56px 32px 20px;max-width:1080px;margin:0 auto;text-align:center;}
  .page-hero h1{font-size:clamp(2.4rem,5.5vw,3.6rem);line-height:1.05;}
  .page-hero p{max-width:520px;margin:16px auto 0;color:var(--ink-soft);font-size:1.05rem;}
  .doc-section{padding:56px 32px;max-width:820px;margin:0 auto;}
  .doc-section > .eyebrow{display:block;width:fit-content;margin:0 auto 14px;}
  .doc-section > h2{text-align:center;margin-bottom:8px;}
  .doc-sub{text-align:center;color:var(--ink-soft);max-width:560px;margin:0 auto 40px;}
  .commandment-full{
    display:grid;grid-template-columns:80px 1fr;gap:22px;
    padding:26px 26px;border-radius:20px;border:2.5px solid var(--ink);margin-bottom:18px;
  }
  .commandment-full .num{font-family:'Fraunces',serif;font-weight:600;font-size:2.1rem;line-height:1;}
  .commandment-full h3{font-size:1.3rem;margin-bottom:4px;}
  .commandment-full .tag{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;opacity:0.7;display:block;margin-bottom:10px;}
  .commandment-full p{color:var(--ink-soft);font-size:0.98rem;margin:0;}
  .cA{background:var(--blush-tint);color:var(--blush-deep);}
  .cA .num{color:var(--blush-deep);}
  .cB{background:var(--cookie-tint);color:var(--cookie-deep);}
  .cB .num{color:var(--cookie-deep);}
  .cC{background:var(--sage-tint);color:var(--sage-deep);}
  .cC .num{color:var(--sage-deep);}
  .cD{background:var(--sky-tint);color:var(--sky-deep);}
  .cD .num{color:var(--sky-deep);}
  .cE{background:#F2E7FA;color:var(--grape-deep);}
  .cE .num{color:var(--grape-deep);}
  .commandment-full p, .commandment-full .tag{color:inherit;opacity:0.85;}
  .codex-band{background:var(--grape);padding:60px 0;margin-top:10px;}
  .codex-band .doc-section{padding-top:0;}
  .codex-band .eyebrow{background:var(--milk);color:var(--grape-deep);}
  .codex-band h2, .codex-band .doc-sub{color:var(--grape-deep);}
  .codex-band .commandment-full{background:var(--milk);border-color:var(--grape-deep);color:var(--ink);}
  .codex-band .commandment-full .num{color:var(--grape-deep);}
  .codex-band .commandment-full p, .codex-band .commandment-full .tag{color:var(--ink-soft);opacity:1;}
  .thesis-band{background:var(--rail);color:var(--milk);padding:70px 32px;text-align:center;}
  .thesis-band p{font-family:'Fraunces',serif;font-size:1.5rem;font-style:italic;line-height:1.6;max-width:600px;margin:0 auto;color:var(--milk);}
  .license-note{max-width:600px;margin:0 auto;padding:50px 32px;text-align:center;color:var(--ink-soft);font-size:0.92rem;}

/* join page */
  .steps{padding:56px 32px;max-width:820px;margin:0 auto;}
  .steps > .eyebrow{display:block;width:fit-content;margin:0 auto 14px;}
  .steps > h2{text-align:center;margin-bottom:40px;}
  .step-list{display:flex;flex-direction:column;gap:18px;}
  .step{
    display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;
    padding:24px;border-radius:18px;border:2.5px solid var(--ink);background:var(--cloud);
  }
  .step:nth-child(1){transform:rotate(-0.6deg);}
  .step:nth-child(2){transform:rotate(0.6deg);}
  .step:nth-child(3){transform:rotate(-0.6deg);}
  .step:nth-child(4){transform:rotate(0.6deg);}
  .step-num{
    width:56px;height:56px;border-radius:50%;background:var(--cookie);border:2.5px solid var(--ink);
    display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;font-size:1.4rem;color:var(--cookie-deep);
  }
  .step h3{font-size:1.1rem;margin-bottom:6px;}
  .step p{color:var(--ink-soft);font-size:0.95rem;margin:0;}

  .roles-band{background:var(--sky-tint);padding:60px 32px;}
  .roles-band .wrap > h2{text-align:center;color:var(--sky-deep);margin-bottom:8px;}
  .roles-band .doc-sub{text-align:center;color:var(--sky-deep);opacity:0.8;max-width:520px;margin:0 auto 36px;}
  .role-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1080px;margin:0 auto;}
  .role-card{
    background:var(--cloud);border-radius:20px;padding:30px 26px;border:2.5px solid var(--ink);
    box-shadow:5px 5px 0 var(--ink);
  }
  .role-card:nth-child(1){transform:rotate(-1.2deg);}
  .role-card:nth-child(2){transform:rotate(1.2deg);}
  .role-card h3{font-size:1.2rem;margin-bottom:8px;}
  .role-card p{color:var(--ink-soft);font-size:0.95rem;margin:0 0 16px;}
  .role-card .btn{padding:10px 20px;font-size:0.88rem;}

  .card-band{padding:70px 32px;text-align:center;max-width:1080px;margin:0 auto;}
  .membership-card{
    max-width:380px;margin:0 auto;background:var(--rail);color:var(--milk);border-radius:20px;
    padding:30px 28px;text-align:left;transform:rotate(-2deg);border:2.5px solid var(--ink);
    box-shadow:6px 6px 0 var(--cookie);
  }
  .membership-card .eyebrow{background:var(--cookie);color:var(--cookie-deep);margin-bottom:14px;}
  .membership-card h3{color:var(--milk);font-size:1.3rem;margin-bottom:4px;}
  .membership-card p{color:#D8C9BA;font-size:0.9rem;margin:4px 0 0;}
  .membership-card .line{border-top:1px dashed #6B5847;margin:18px 0;}
.playcorner{padding:70px 32px 80px;max-width:1080px;margin:0 auto;text-align:center;}
.playcorner > .eyebrow{display:inline-block;margin-bottom:10px;}
.playcorner-sub{color:var(--ink-soft);max-width:420px;margin:0 auto 30px;font-size:0.98rem;}
.playcorner-actions{margin-top:22px;}

.ring-toy{
  position:relative;
  max-width:520px;
  height:320px;
  margin:0 auto;
  user-select:none;
  touch-action:none;
}
.ring-toy-base{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:220px;
  height:34px;
  background:var(--rail-soft);
  border:2.5px solid var(--ink);
  border-radius:40%;
}
.ring-toy-peg{
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  width:18px;
  height:210px;
  background:var(--cookie-tint);
  border:2.5px solid var(--ink);
  border-radius:9px 9px 4px 4px;
}
.ring-toy-tray{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.ring{
  position:absolute;
  border-radius:50%;
  background:transparent;
  box-sizing:border-box;
  cursor:grab;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ring:active{cursor:grabbing;}
.ring.dragging{z-index:50;}

/* toybox */
.toy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:10px;}
.toy-card{
  background:var(--cloud);border-radius:20px;padding:28px 18px;text-align:center;
  border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  cursor:pointer;font-family:inherit;-webkit-appearance:none;appearance:none;
}
.toy-card:nth-child(1){transform:rotate(-2deg);}
.toy-card:nth-child(2){transform:rotate(1.5deg);}
.toy-card:nth-child(3){transform:rotate(-1deg);}
.toy-card:nth-child(4){transform:rotate(2deg);}
.toy-card:hover, .toy-card:focus-visible{transform:rotate(0deg) scale(1.03);outline:none;}
.toy-icon{font-size:2.2rem;display:block;margin-bottom:12px;}
.toy-card h3{font-size:1.05rem;font-weight:600;color:var(--ink);}
.toy-card p{font-size:0.87rem;color:var(--ink-soft);margin:6px 0 0;}

.toy-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.toy-modal.open{display:flex;}
.toy-modal-backdrop{position:absolute;inset:0;background:rgba(46,36,28,0.65);}
.toy-modal-frame{
  position:relative;width:min(94vw,560px);height:min(90vh,720px);
  background:var(--milk);border-radius:24px;border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);overflow:hidden;
}
.toy-modal-close{
  position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;
  background:var(--cookie);border:2.5px solid var(--ink);font-size:1rem;line-height:1;cursor:pointer;
}
.toy-modal iframe{width:100%;height:100%;border:0;display:block;}

@media (max-width:760px){
  .toy-grid{grid-template-columns:repeat(2,1fr);}
}