/* Robokids Coding — shared styles
   Layout idea: cut-paper tiles, tilted like the logo letters, on a pale sky sheet. */
:root {
  color-scheme: light;
  --navy: #2a3c8f;
  --ink: #1b2559;
  --sky: #1fabe2;
  --orange: #eb5e1b;
  --green: #8dc63f;
  --sun: #fab61f;
  --paper: #f3f8ff;
  --white: #ffffff;
  --muted: #4b5687;
  --line: #d5e2f7;
  --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --wrap: 1120px;
  --radius: 18px;
  --shadow: 0 6px 0 rgba(27, 37, 89, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--navy); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; }
h3 { font-size: 1.45rem; font-weight: 700; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-head { max-width: 640px; margin-bottom: 40px; display: grid; gap: 12px; }
.section-head p { color: var(--muted); font-size: 1.15rem; }

/* The cut-paper word: one tilted colour tile per heading, like the logo letters */
.tile {
  display: inline-block;
  padding: 0 0.28em;
  border-radius: 6px;
  transform: rotate(-2.5deg);
  background: var(--sky);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--navy);
}
.tile.orange { background: var(--orange); box-shadow: 4px 4px 0 var(--ink); transform: rotate(2deg); }
.tile.green  { background: var(--green); color: var(--ink); box-shadow: 4px 4px 0 var(--navy); }
.tile.sun    { background: var(--sun); color: var(--ink); box-shadow: 4px 4px 0 var(--navy); transform: rotate(2deg); }
.tile.navy   { background: var(--navy); box-shadow: 4px 4px 0 var(--sky); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  padding: 10px 22px 8px; border-radius: 14px; border: 3px solid var(--ink);
  background: var(--sun); color: var(--ink); text-decoration: none; cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.btn.ghost { background: var(--white); }
.btn.small { font-size: 1rem; padding: 6px 16px 4px; border-width: 2px; box-shadow: 0 4px 0 var(--ink); }

/* Header */
.site-header { background: var(--white); border-bottom: 3px solid var(--ink); position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand img { height: 54px; width: auto; }
.nav-toggle {
  display: none; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  background: var(--sky); color: var(--white); border: 2px solid var(--ink); border-radius: 12px; padding: 6px 14px 4px; cursor: pointer;
}
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav a {
  display: block; padding: 8px 12px 6px; border-radius: 10px; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--paper); color: var(--navy); }
.nav .has-sub { position: relative; }
.nav .sub {
  display: none; position: absolute; left: 0; top: 100%; min-width: 210px; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--white); border: 3px solid var(--ink); border-radius: 14px; padding: 6px; box-shadow: var(--shadow);
}
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { display: flex; }
.nav .caret { font-size: 0.7em; margin-left: 4px; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.eyebrow {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 0.95rem; color: var(--navy);
}
.hero-copy { display: grid; gap: 22px; }
.hero-copy .lead { font-size: 1.25rem; color: var(--muted); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

.stage { position: relative; }
.stage-sheet {
  position: absolute; inset: 0; background: var(--white); border: 3px solid var(--ink); border-radius: 22px; transform: rotate(-2deg);
}
.stage-sheet.two { background: var(--sky); transform: rotate(3deg); inset: 2% -2% -2% 2%; }
.stage-box { position: relative; }
h1 .line { display: block; }
.stage-inner {
  position: relative; display: grid; grid-template-columns: minmax(150px, 0.9fr) 1fr; gap: 12px; align-items: center;
  padding: 26px 18px 22px;
}
.program { display: grid; gap: 5px; justify-items: start; }
.block {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; text-align: left;
  color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-left-width: 10px;
  border-radius: 10px; padding: 8px 12px 6px; cursor: pointer; width: 100%; max-width: 190px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.block:hover { transform: translateX(4px); }
.block.hat { background: var(--sun); border-radius: 22px 22px 10px 10px; cursor: pointer; }
.block.b-sky { border-left-color: var(--sky); }
.block.b-orange { border-left-color: var(--orange); }
.block.b-green { border-left-color: var(--green); }
.block.b-sun { border-left-color: var(--sun); }
.block.is-running { transform: translateX(10px) scale(1.04); box-shadow: 0 0 0 4px var(--sun); }
.stage-hint {
  margin: 30px 8px 0; font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: 1.02rem; text-align: center;
}
.robot-box { position: relative; }
.robot { width: 100%; max-width: 250px; margin: 0 auto; overflow: visible; }
.bubble {
  position: absolute; right: 0; top: 0; background: var(--white); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 16px 16px 16px 4px; padding: 5px 12px 3px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  transform-origin: left bottom; transition: transform 0.2s ease;
}
.robot-box.do-say .bubble { animation: pop 1.3s ease; }

/* Robot parts move from fixed points in the drawing */
.robot .arm-r { transform-box: view-box; transform-origin: 222px 196px; }
.robot .antenna { transform-box: view-box; transform-origin: 150px 76px; }
.robot .eyes { transform-box: fill-box; transform-origin: center; }
.robot .whole { transform-box: view-box; transform-origin: 150px 400px; }
.robot-box.do-wave .arm-r { animation: wave 1.5s ease-in-out; }
.robot-box.do-blink .eyes { animation: blink 1.2s linear; }
.robot-box.do-wiggle .antenna { animation: wiggle 1.3s ease-in-out; }
.robot-box.do-jump .whole { animation: jump 1.2s ease-in-out; }

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  20%, 50%, 80% { transform: rotate(-150deg); }
  35%, 65% { transform: rotate(-120deg); }
}
@keyframes blink {
  0%, 20%, 50%, 70%, 100% { transform: scaleY(1); }
  30%, 40%, 80%, 90% { transform: scaleY(0.1); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  15%, 45%, 75% { transform: rotate(18deg); }
  30%, 60%, 90% { transform: rotate(-18deg); }
}
@keyframes jump {
  0%, 100% { transform: translateY(0); }
  25%, 65% { transform: translateY(-34px); }
  45%, 85% { transform: translateY(0); }
}
@keyframes pop {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.35) rotate(-4deg); }
  40% { transform: scale(1.15) rotate(3deg); }
}

/* Courses */
.courses { background: var(--white); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.course-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.course { grid-column: span 2; }
.course:nth-child(4) { grid-column: 2 / span 2; }
.course {
  --c: var(--sky);
  display: grid; grid-template-rows: auto 1fr; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s ease;
}
.course:nth-child(odd) { transform: rotate(-1deg); }
.course:nth-child(even) { transform: rotate(1deg); }
.course:hover { transform: rotate(0deg) translateY(-6px); }
.course-art { background: var(--c); border-bottom: 3px solid var(--ink); padding: 18px; display: grid; place-items: center; }
.course-art svg { width: 100%; max-width: 240px; height: auto; }
.course-body { padding: 18px 18px 20px; display: grid; gap: 10px; align-content: start; }
.age {
  justify-self: start; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  background: var(--white); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px 0;
}
.course-body p { font-size: 1rem; color: var(--muted); }
.tools { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.tools li { font-size: 0.85rem; font-weight: 700; background: var(--white); border: 1.5px solid var(--line); border-radius: 8px; padding: 2px 8px; color: var(--navy); }
.more { font-family: var(--font-display); font-weight: 700; text-decoration: none; margin-top: 4px; }
.more:hover { text-decoration: underline; }
.course.c-orange { --c: var(--orange); }
.course.c-green { --c: var(--green); }
.course.c-sun { --c: var(--sun); }
.course.c-navy { --c: var(--navy); }

/* Looping scenes on the course cards. Each one rests in its finished state when motion is off. */
.cb { animation-duration: 4.5s; animation-iteration-count: infinite; }
.cb1 { animation-name: lit1; } .cb2 { animation-name: lit2; } .cb3 { animation-name: lit3; }
@keyframes lit1 { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0.35; } }
@keyframes lit2 { 0%, 30% { opacity: 0.35; } 34%, 60% { opacity: 1; } 64%, 100% { opacity: 0.35; } }
@keyframes lit3 { 0%, 60% { opacity: 0.35; } 64%, 92% { opacity: 1; } 96%, 100% { opacity: 0.35; } }
.sprite { transform-box: fill-box; transform-origin: center; animation: sprite 4.5s ease-in-out infinite; }
@keyframes sprite {
  0% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(46px, 0) rotate(0deg); }
  45% { transform: translate(46px, -28px) rotate(0deg); }
  60%, 64% { transform: translate(46px, 0) rotate(0deg); }
  90% { transform: translate(46px, 0) rotate(360deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}
.rcar { animation: rcar 5s ease-in-out infinite; }
@keyframes rcar { 0%, 100% { transform: translateX(0); } 40%, 58% { transform: translateX(60px); } }
.rwheel, .rb-wheel { transform-box: fill-box; transform-origin: center; }
.rwheel { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rwave { animation: rwave 0.5s ease-in-out infinite alternate; }
@keyframes rwave { from { opacity: 0.15; } to { opacity: 1; } }
.print-cover { transform-box: fill-box; transform-origin: top; transform: scaleY(0); animation: uncover 5.5s linear infinite; }
@keyframes uncover { 0% { transform: scaleY(1); } 70%, 92% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
.gantry { transform: translateY(-58px); animation: rise 5.5s linear infinite; }
@keyframes rise { 0% { transform: translateY(0); } 70%, 92% { transform: translateY(-58px); } 100% { transform: translateY(0); } }
.nozzle2 { animation: sweep 0.8s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.sig { stroke-dasharray: 5 40; animation: flow 1.5s linear infinite; }
@keyframes flow { from { stroke-dashoffset: 45; } to { stroke-dashoffset: 0; } }
.ai-label { transform-box: fill-box; transform-origin: left center; animation: label 3.6s ease-in-out infinite; }
.ai-label text { font-family: var(--font-display); }
@keyframes label { 0%, 35% { transform: scale(0); } 45%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
.mk { animation-duration: 6s; animation-iteration-count: infinite; }
@keyframes m1 { 0%, 2% { opacity: 0; } 6%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.m1 { animation-name: m1; }
@keyframes m2 { 0%, 12% { opacity: 0; } 16%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.m2 { animation-name: m2; }
@keyframes m3 { 0%, 22% { opacity: 0; } 26%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.m3 { animation-name: m3; }
@keyframes m4 { 0%, 32% { opacity: 0; } 36%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.m4 { animation-name: m4; }
@keyframes m5 { 0%, 42% { opacity: 0; } 46%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.m5 { animation-name: m5; }
.winline { stroke-dasharray: 115; animation: win 6s infinite; }
@keyframes win { 0%, 60% { stroke-dashoffset: 115; opacity: 0; } 61% { opacity: 1; } 72%, 88% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Skills */
.skill-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.skill { background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow); }
.skill .ico { width: 52px; height: 52px; border-radius: 12px; border: 2px solid var(--ink); display: grid; place-items: center; transform: rotate(-4deg); background: var(--sky); }
.skill:nth-child(2) .ico { background: var(--orange); transform: rotate(3deg); }
.skill:nth-child(3) .ico { background: var(--sun); }
.skill:nth-child(4) .ico { background: var(--green); transform: rotate(3deg); }
.skill:nth-child(5) .ico { background: var(--sun); }
.skill:nth-child(6) .ico { background: var(--sky); transform: rotate(3deg); }
.skill .ico svg { width: 30px; height: 30px; }
.skill p { color: var(--muted); font-size: 1rem; }

/* How a class works */
.classes { background: var(--navy); color: var(--white); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.classes h2, .classes h3 { color: var(--white); }
.classes .section-head p { color: #d6e4ff; }
.class-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.class-item { border: 2px dashed rgba(255, 255, 255, 0.45); border-radius: var(--radius); padding: 20px; display: grid; gap: 8px; align-content: start; }
.class-item .big { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--sun); }
.class-item p { color: #d6e4ff; font-size: 1rem; }

/* Photos */
.photo-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; align-items: start; }
.polaroid { background: var(--white); border: 2px solid var(--ink); padding: 8px 8px 12px; border-radius: 6px; box-shadow: var(--shadow); margin: 0; }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.polaroid figcaption { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; text-align: center; padding-top: 8px; }
.polaroid:nth-child(odd) { transform: rotate(-2.5deg); }
.polaroid:nth-child(even) { transform: rotate(2deg) translateY(12px); }
.photo-note { margin-top: 34px; color: var(--muted); max-width: 60ch; }

/* Blog teaser */
.blog { background: var(--white); border-top: 3px solid var(--ink); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post { border: 3px solid var(--ink); border-radius: var(--radius); background: var(--paper); padding: 22px; display: grid; gap: 10px; align-content: start; }
.post .tag { justify-self: start; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--sun); border-radius: 6px; padding: 2px 8px; }
.post .for { color: var(--navy); font-weight: 700; font-size: 0.95rem; }
.post p { color: var(--muted); font-size: 1rem; }

/* Say hello */
.hello { background: var(--sun); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.hello .wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.hello-copy { display: grid; gap: 10px; max-width: 620px; }
.hello-copy p { font-size: 1.15rem; }
.hello-copy a { font-weight: 800; }

/* Instagram */
.insta-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; margin-bottom: 28px; }
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.insta-grid a { display: block; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.insta-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.25s ease; }
.insta-grid a:hover img { transform: scale(1.06); }

/* Footer */
.site-footer { background: var(--ink); color: #d6e4ff; padding: 48px 0 28px; }
.site-footer a { color: var(--white); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.foot-logo { background: var(--white); border-radius: 14px; padding: 10px 14px; display: inline-block; }
.foot-logo img { height: 48px; width: auto; }
.site-footer h3 { color: var(--sun); font-size: 1.15rem; margin-bottom: 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-about { display: grid; gap: 14px; align-content: start; justify-items: start; }
.foot-base { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.95rem; }

/* ---------- Course pages ---------- */
.hero.sub h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.15; }
.eyebrow a { color: inherit; }
.stage-sheet.two.orange { background: var(--orange); }
.stage-sheet.two.green { background: var(--green); }
.stage-sheet.two.navy { background: var(--navy); }
.stage-sheet.two.sun { background: var(--sun); }
.act-box { position: relative; }
.scene { width: 100%; max-width: 270px; margin: 0 auto; overflow: visible; }
.scene text { font-family: var(--font-display); }
.act-box .bubble { z-index: 2; }
.act-box:not(.robot-box) .bubble { top: -16px; right: -8px; }
.act-box[class*="do-"] .bubble { animation: pop 1.3s ease; }

.make-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.make { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); padding: 22px; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow); }
.make p { color: var(--muted); }
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.learn { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.learn li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 1.1rem; }
.learn li::before {
  content: "\2713"; font-weight: 800; color: var(--ink); background: var(--green); border: 2px solid var(--ink);
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 0.95rem; transform: rotate(-4deg);
}
.side-col { display: grid; gap: 28px; justify-items: start; }
.tool-box { background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); padding: 22px; display: grid; gap: 14px; box-shadow: var(--shadow); width: 100%; }
.small-h { font-size: 1.5rem; }
.tool h3 { font-size: 1.2rem; color: var(--navy); }
.tool p, .tool-note { color: var(--muted); font-size: 1rem; }
.tool-note { border-top: 2px dashed var(--line); padding-top: 12px; }
.polaroid.side { max-width: 260px; transform: rotate(2deg); }
.classes .wrap > .class-grid:first-child { margin-top: 0; }

/* ---------- Other pages ---------- */
.hero.plain .wrap { grid-template-columns: 1.3fr 1fr; }
.hero-side { display: grid; justify-items: center; }
.pol-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 420px; }
.pol-pair .polaroid:first-child { transform: rotate(-3deg); }
.pol-pair .polaroid:last-child { transform: rotate(3deg) translateY(16px); }
.tool-plain { color: var(--muted); }
.after-grid { margin-top: 28px; }
.post h3 a { color: var(--ink); text-decoration: none; }
.post h3 a:hover { color: var(--navy); text-decoration: underline; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 1.1rem; }
.contact-list strong { display: inline-block; min-width: 4.5em; font-family: var(--font-display); color: var(--navy); }

.form { width: 100%; background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); padding: 24px; display: grid; gap: 16px; box-shadow: var(--shadow); transform: rotate(0.6deg); }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--font-display); font-weight: 700; }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; width: 100%;
}
.field input:focus, .field textarea:focus { outline: 3px solid var(--sky); outline-offset: 1px; }
.form .btn { justify-self: start; }
.form-note { font-size: 0.92rem; color: var(--muted); }
.form-status { font-weight: 700; }
.form-status:empty { display: none; }
.form-status.ok { color: #2e6b12; }
.form-status.bad { color: #a8380a; }
.hp { position: absolute; left: -9999px; }

.article { padding-top: clamp(36px, 6vw, 64px); }
.prose { max-width: 720px; }
.wrap.split > .prose { max-width: none; }
.prose > * + * { margin-top: 1.05em; }
.prose h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); margin-top: 0.3em; }
.prose h2 { font-size: 1.7rem; margin-top: 1.6em; }
.prose .lead { font-size: 1.25rem; color: var(--muted); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.45em; }
.prose strong { color: var(--navy); }

/* Coding scene */
.sp, .sp-body { transform-box: fill-box; transform-origin: center; }
.do-move .sp { animation: c-move 1.5s ease-in-out; }
.do-jump .sp { animation: c-jump 1.4s ease-in-out; }
.do-spin .sp { animation: c-spin 1.4s ease-in-out; }
.do-colour .sp-body { animation: c-colour 1.5s linear; }
.do-say .sp { animation: c-nod 1.2s ease-in-out; }
@keyframes c-move { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(62px); } 72% { transform: translateX(-62px); } }
@keyframes c-jump { 0%, 100% { transform: translateY(0); } 30%, 70% { transform: translateY(-96px); } 50% { transform: translateY(-20px); } }
@keyframes c-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes c-colour { 0%, 100% { fill: #fab61f; } 25% { fill: #eb5e1b; } 50% { fill: #8dc63f; } 75% { fill: #1fabe2; } }
@keyframes c-nod { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18) rotate(-6deg); } 60% { transform: scale(1.1) rotate(6deg); } }

/* Robotics scene */
.rb-car { transform-box: view-box; transform-origin: 98px 236px; }
.do-drive .rb-car { animation: r-drive 1.6s ease-in-out; }
.do-drive .rb-wheel { animation: spin 0.4s linear 4; }
.do-lights .rb-beam { animation: r-flash 1.5s linear; }
.do-beep .rb-car { animation: r-shake 1.2s linear; }
.do-wheelie .rb-car { animation: r-wheelie 1.5s ease-in-out; }
.do-scan .rb-wave { animation: r-scan 0.5s ease-in-out 3 alternate; }
@keyframes r-drive { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(30px); } 75% { transform: translateX(-40px); } }
@keyframes r-flash { 0%, 100% { opacity: 0; } 10%, 40% { opacity: 0.9; } 50% { opacity: 0.2; } 60%, 90% { opacity: 0.9; } }
@keyframes r-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70% { transform: translateX(-4px) rotate(-1.5deg); } 20%, 40%, 60%, 80% { transform: translateX(4px) rotate(1.5deg); } }
@keyframes r-wheelie { 0%, 100% { transform: rotate(0deg); } 30%, 70% { transform: rotate(-24deg); } }
@keyframes r-scan { from { opacity: 0; } to { opacity: 1; } }

/* 3D design scene */
.model { transform-box: fill-box; transform-origin: bottom center; }
.do-taller .model { animation: d-taller 1.5s ease-in-out; }
.do-wider .model { animation: d-wider 1.5s ease-in-out; }
.do-turn .model { animation: d-turn 1.5s ease-in-out; }
.do-paint .m-body { animation: d-paint 1.5s linear; }
.do-print .model { animation: d-print 1.6s linear; }
.do-print .pr-noz { animation: d-noz 1.6s linear; }
.do-print .pr-head { animation: sweep 0.25s ease-in-out infinite alternate; }
@keyframes d-taller { 0%, 100% { transform: scaleY(1); } 35%, 70% { transform: scaleY(1.2); } }
@keyframes d-wider { 0%, 100% { transform: scaleX(1); } 35%, 70% { transform: scaleX(1.45); } }
@keyframes d-turn { 0%, 100% { transform: scaleX(1); } 25%, 75% { transform: scaleX(0.08); } 50% { transform: scaleX(-1); } }
@keyframes d-paint { 0%, 100% { fill: #fff; } 25% { fill: #fab61f; } 50% { fill: #eb5e1b; } 75% { fill: #1fabe2; } }
@keyframes d-print { 0% { clip-path: inset(100% -10% 0 -10%); } 80%, 100% { clip-path: inset(0 -10% 0 -10%); } }
@keyframes d-noz { 0% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(-150px); } 100% { opacity: 0; transform: translateY(-150px); } }

/* AI scene */
.ai-shape { opacity: 0; }
.act-box:not([class*="do-"]) .ai-star, .do-star .ai-star, .do-heart .ai-heart, .do-circle .ai-circle, .do-triangle .ai-triangle, .do-scribble .ai-scribble { opacity: 1; }
.ai-out { transform-box: fill-box; transform-origin: center; }
.act-box[class*="do-"] .ai-out { animation: a-out 1.5s ease-in-out; }
.do-scribble .ai-out { fill: #b9bcc4; }
@keyframes a-out { 0%, 100% { transform: scale(1); } 45% { transform: scale(0.8); } 65% { transform: scale(1.5); } }

/* Brain games scene */
.bg-front { opacity: 0; }
.bg-card { transform-box: fill-box; transform-origin: center; }
.do-flip .bg-front, .do-pair .pair .bg-front, .do-peek .bg-card:nth-of-type(3) .bg-front { animation: b-show 1.6s linear; }
.do-flip .bg-card, .do-peek .bg-card:nth-of-type(3) { animation: b-flip 1.6s linear; }
.do-pair .pair { animation: b-pulse 1.6s ease-in-out; }
.do-shuffle .bg-card { animation: b-shuffle 1.6s ease-in-out; }
.do-cheer .bg-card { animation: b-jump 0.7s ease-in-out; animation-delay: calc(var(--i) * 0.12s); }
@keyframes b-show { 0%, 12% { opacity: 0; } 13%, 87% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes b-flip { 0%, 25%, 75%, 100% { transform: scaleX(1); } 12%, 88% { transform: scaleX(0.05); } }
@keyframes b-pulse { 0%, 100% { transform: scale(1); } 30%, 60% { transform: scale(1.12) rotate(-3deg); } 45% { transform: scale(1.12) rotate(3deg); } }
@keyframes b-shuffle { 0%, 100% { transform: translate(0, 0); } 40%, 60% { transform: translate(var(--dx), var(--dy)); } }
@keyframes b-jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

/* Smaller screens */
@media (max-width: 1000px) {
  .course-grid, .class-grid { grid-template-columns: repeat(2, 1fr); }
  .course:nth-child(n) { grid-column: auto; }
  .photo-row { grid-template-columns: repeat(3, 1fr); }
  .photo-row .polaroid:nth-child(n + 4) { display: none; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1020px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 3px solid var(--ink); padding: 10px 20px 16px; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; }
  .nav .sub { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 0 16px; }
  .nav .caret { display: none; }
}
@media (max-width: 860px) {
  .hero .wrap, .hero.plain .wrap { grid-template-columns: 1fr; }
  .skill-grid, .post-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .course-grid, .class-grid, .skill-grid, .post-grid, .foot-grid, .make-grid { grid-template-columns: 1fr; }
  .photo-row { grid-template-columns: 1fr 1fr; }
  .photo-row .polaroid:nth-child(n + 3) { display: none; }
  .course:nth-child(n) { transform: none; }
  .brand img { height: 44px; }
  .stage-inner { grid-template-columns: 1fr 1fr; padding: 20px 10px; }
  .block { font-size: 0.92rem; padding: 7px 8px 5px; border-left-width: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}