:root { --ink:#3b3128; --paper:#fff6e3; --cream:#fbeed3; --red:#e8573f; --blue:#3f7fd6; --yellow:#f6b832; --green:#5aa15e; --muted:#7d6f5c; --line:rgba(59,49,40,.2); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; overflow-x:clip; background:var(--paper); color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.7; }
a { color:inherit; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:10px 16px; color:white; background:var(--ink); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
a:focus-visible { outline:3px dashed var(--blue); outline-offset:3px; }
.site-header { width:min(1100px,calc(100% - 40px)); min-height:72px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:2.5px dashed var(--line); }
.logo { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; text-decoration:none; letter-spacing:.04em; }
.logo-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--red); color:#fffdf6; font-size:15px; transform:rotate(-6deg); }
nav { display:flex; align-items:center; gap:22px; }
nav a { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; font-size:14px; font-weight:650; }
.nav-button { padding:0 16px; border:2.5px solid var(--ink); border-radius:99px; box-shadow:3px 3px 0 var(--ink); transition:transform .15s ease,box-shadow .15s ease; }
.nav-button:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.eyebrow { margin:0 0 14px; color:var(--red); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3 { margin-top:0; font-weight:800; line-height:1.22; letter-spacing:.02em; }
h1 { margin:0 0 20px; font-size:clamp(38px,9vw,64px); }
h2 { margin:0 0 14px; font-size:clamp(30px,6vw,44px); }
.scribble { position:relative; display:inline-block; color:var(--blue); }
.scribble-line { position:absolute; left:0; bottom:-.35em; width:100%; height:.35em; color:var(--yellow); }
.section-head { max-width:700px; margin-bottom:36px; }
.section-head p:not(.eyebrow) { color:var(--muted); }
.button { min-height:48px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; border-radius:99px; border:2.5px solid var(--ink); text-decoration:none; font-size:15px; font-weight:750; box-shadow:4px 4px 0 var(--ink); transition:transform .15s ease,box-shadow .15s ease; }
.button:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.button-primary { background:var(--ink); color:#fffdf6; }
.button-primary:hover { background:var(--red); }
.button-ghost { background:#fffdf6; color:var(--ink); }
.hero { padding:56px max(20px,calc((100% - 1100px)/2)) 72px; display:grid; gap:40px; }
.hero-copy>p:not(.eyebrow) { max-width:560px; color:var(--muted); font-size:17px; }
.hero-actions { margin-top:28px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero-meta { margin:24px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; font-size:13px; }
.hero-meta li { padding:6px 12px; border:2px dashed var(--line); border-radius:99px; background:#fffdf6; }
.hero-art { position:relative; min-height:320px; display:grid; place-items:center; overflow:hidden; background:var(--cream); border:2.5px solid var(--ink); border-radius:32px; }
.hero-art svg { width:86%; height:auto; }
.art-caption { position:absolute; bottom:18px; left:18px; padding:8px 14px; border:2px solid var(--ink); border-radius:99px; background:var(--yellow); font-size:13px; font-weight:700; transform:rotate(-2deg); }
.classes { padding:72px max(20px,calc((100% - 1100px)/2)); background:#fff; }
.class-grid { display:grid; gap:24px; }
.paper-card { position:relative; padding:30px 24px 24px; border:2.5px dashed var(--ink); border-radius:20px; background:#fffdf6; box-shadow:5px 5px 0 rgba(59,49,40,.12); }
.paper-card::before { content:""; position:absolute; top:-12px; left:50%; width:84px; height:22px; border-radius:3px; background:rgba(246,184,50,.65); transform:translateX(-50%) rotate(-2deg); }
.tilt-left { transform:rotate(-1.2deg); }
.tilt-right { transform:rotate(1.1deg); }
.sticker { display:inline-block; padding:5px 14px; border-radius:99px; color:#fff; font-size:12px; font-weight:800; transform:rotate(-2deg); box-shadow:2px 2px 0 rgba(59,49,40,.25); }
.sticker-red { background:var(--red); }
.sticker-blue { background:var(--blue); }
.sticker-green { background:var(--green); }
.paper-card h3 { margin:14px 0 8px; font-size:23px; }
.paper-card>p { margin:0 0 16px; color:var(--muted); }
.paper-card dl { margin:0; border-top:2px dashed var(--line); }
.paper-card dl div { padding:10px 0; display:flex; justify-content:space-between; gap:16px; border-bottom:2px dashed var(--line); font-size:14px; }
dt { color:var(--muted); }
dd { margin:0; font-weight:700; text-align:right; }
.studio { padding:72px max(20px,calc((100% - 1100px)/2)); display:grid; gap:40px; background:var(--cream); }
.studio-art { position:relative; min-height:300px; overflow:hidden; border:2.5px solid var(--ink); border-radius:32px; background:linear-gradient(160deg,#f9efdb,#edd9b6); }
.sun-dot { position:absolute; top:8%; right:8%; width:64px; aspect-ratio:1; border-radius:50%; background:var(--yellow); }
.easel-canvas { position:absolute; top:16%; left:24%; width:52%; height:44%; border:8px solid var(--ink); border-radius:6px; background:#fffdf6; transform:rotate(-1.5deg); }
.easel-canvas i { position:absolute; top:22%; left:18%; width:64%; height:14%; border-radius:99px; background:var(--red); transform:rotate(-8deg); }
.easel-canvas i+i { top:46%; width:48%; background:var(--blue); }
.easel-canvas i+i+i { top:70%; width:56%; background:var(--yellow); }
.easel-leg { position:absolute; bottom:12%; width:8px; height:38%; border-radius:8px; background:var(--ink); }
.leg-left { left:36%; transform:rotate(9deg); }
.leg-right { right:36%; transform:rotate(-9deg); }
.doodle-star { position:absolute; bottom:14%; left:12%; width:34px; aspect-ratio:1; background:var(--red); clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%); }
.teacher-list { margin:20px 0 0; padding:0; list-style:none; }
.teacher-list li { padding:14px 0; display:grid; gap:2px; border-bottom:2px dashed var(--line); }
.teacher-list b { font-size:17px; }
.teacher-list span { color:var(--muted); font-size:14px; }
.room-list { margin:20px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.room-list li { position:relative; padding-left:26px; color:var(--muted); }
.room-list li::before { content:""; position:absolute; left:0; top:.55em; width:12px; height:12px; border-radius:50%; background:var(--blue); }
.pricing { padding:72px max(20px,calc((100% - 1100px)/2)); background:var(--yellow); }
.pricing .eyebrow { color:var(--ink); }
.price-grid { display:grid; gap:24px; margin-top:8px; }
.ticket { position:relative; padding:30px 24px 24px; border:2.5px dashed var(--ink); border-radius:20px; background:#fffdf6; box-shadow:5px 5px 0 rgba(59,49,40,.18); }
.ticket h3 { margin:0 0 10px; font-size:22px; }
.price { margin:0 0 12px; color:var(--red); font-size:clamp(34px,7vw,46px); font-weight:800; }
.price span { color:var(--muted); font-size:15px; font-weight:600; }
.ticket p:last-child { margin:0; color:var(--muted); }
.early-bird { margin-top:26px; padding:20px 22px; display:grid; gap:6px; border:2.5px solid var(--ink); border-radius:20px; background:var(--red); color:#fff8f0; box-shadow:4px 4px 0 var(--ink); transform:rotate(-.6deg); }
.early-bird b { font-size:18px; }
.price-note { margin:24px 0 0; color:#6b5522; font-size:13px; }
.visit { padding:72px max(20px,calc((100% - 1100px)/2)); display:grid; gap:40px; background:var(--cream); }
.visit-copy>p:not(.eyebrow) { color:var(--muted); }
.visit dl { margin:24px 0; border-top:2px dashed var(--line); }
.visit dl div { padding:12px 0; display:grid; gap:2px; border-bottom:2px dashed var(--line); }
.visit dt { font-size:13px; }
.visit dd { text-align:left; }
.map { position:relative; align-self:center; padding:20px; border:2.5px solid var(--ink); border-radius:24px; background:#eadfc3; }
.map svg { display:block; width:100%; height:auto; border-radius:16px; }
.map span { position:absolute; right:30px; bottom:26px; padding:8px 12px; border:2px solid var(--ink); border-radius:99px; background:var(--ink); color:var(--paper); font-size:12px; }
footer { min-height:80px; padding:20px max(20px,calc((100% - 1100px)/2)); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; color:var(--muted); font-size:13px; border-top:2.5px dashed var(--line); }
footer a { min-height:44px; display:inline-flex; align-items:center; text-underline-offset:5px; }
.reveal-ready [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .45s ease-out,transform .45s ease-out; }
.reveal-ready [data-reveal].is-visible { opacity:1; transform:translateY(0); }
.reveal-ready .tilt-left.is-visible { transform:rotate(-1.2deg); }
.reveal-ready .tilt-right.is-visible { transform:rotate(1.1deg); }
@media(min-width:700px){ .price-grid{grid-template-columns:1fr 1fr} }
@media(min-width:900px){ .hero{grid-template-columns:1.05fr .95fr;align-items:center;padding-top:88px;padding-bottom:88px}.hero-art{min-height:480px}.classes,.studio,.pricing,.visit{padding-top:96px;padding-bottom:96px}.class-grid{grid-template-columns:repeat(3,1fr)}.studio{grid-template-columns:.95fr 1.05fr;align-items:center}.studio-art{min-height:460px}.visit{grid-template-columns:.9fr 1.1fr;align-items:center} }
@media(max-width:640px){ nav>a:not(.nav-button){display:none} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }