@font-face { font-family: Fraunces; src: url(/fonts/Fraunces-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(/fonts/DMSans-latin.woff2) format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: Caveat; src: url(/fonts/Caveat-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --paper: #fbf7ee;
  --sheet: #fffdf8;
  --line: #d6e3f0;
  --margin: #e8928a;
  --ink: #1f2a44;
  --pen: #2348a8;
  --red: #c8372d;
  --pencil: #6f6a60;
  --saffron: #f4b42f;
  --green: #2f7d4f;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 "DM Sans", system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.hand { font-family: Caveat, cursive; color: var(--pen); font-weight: 700; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-variation-settings: "SOFT" 100; font-weight: 700; letter-spacing: -.015em; }

.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--pen); color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; padding: 15px 26px; border-radius: 12px; box-shadow: 0 3px 0 #142c6e; transition: transform .1s, box-shadow .1s; }
.btn:hover { transform: translateY(1px); box-shadow: 0 2px 0 #142c6e; }
.btn.paper { background: var(--sheet); color: var(--ink); box-shadow: 0 3px 0 #d8d0bf; border: 1.5px solid #d8d0bf; }

/* Header */
.top { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; }
.top nav { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 16px; }
.top nav a:not(.btn) { text-decoration: none; }
.top .btn { padding: 10px 18px; font-size: 15px; min-height: 44px; }

/* Hero: an exercise book page with a report card on it */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 40px 0 96px; }
h1 { font-size: clamp(46px, 6vw, 80px); line-height: 1.02; margin: 0 0 22px; }
h1 .u { position: relative; white-space: nowrap; }
h1 .u::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .02em; height: .2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14C60 6 140 4 297 9' fill='none' stroke='%23c8372d' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.hero .lead { font-size: 21px; color: #45506b; margin: 0 0 30px; max-width: 30em; }
.hero .acts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .note { margin-top: 26px; font-size: 26px; transform: rotate(-2deg); display: inline-block; }

.card { position: relative; background: var(--sheet); border-radius: 6px; padding: 34px 34px 30px 64px; box-shadow: 0 1px 0 #e9e1d0, 0 24px 50px -18px rgba(31,42,68,.35); transform: rotate(1.5deg);
  background-image: linear-gradient(90deg, transparent 46px, var(--margin) 46px, var(--margin) 48px, transparent 48px), repeating-linear-gradient(transparent 0 33px, var(--line) 33px 34px); background-position: 0 0, 0 18px; }
.card::before { content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; margin-left: -60px; background: rgba(244,180,47,.55); transform: rotate(-3deg); }
.card .title { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 6px; }
.card .title .rc-title { display: block; margin: 0; font-family: Fraunces, Georgia, serif; font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 30px; letter-spacing: .02em; }
.card .title span { font-size: 14px; color: var(--pencil); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.card table { width: 100%; border-collapse: collapse; font-size: 17px; }
.card td { height: 34px; padding: 0; }
.card td.g { text-align: right; width: 140px; }
.card .art { font-weight: 700; }
.der { color: #2f6fb5; } .die { color: #b0368f; } .das { color: #23774a; }
.card .stage { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--pencil); }
.card .stage svg { width: 22px; height: 22px; }
.card .remark { padding-right: 110px; margin-top: 10px; font-size: 26px; line-height: 1.1; }
.stampmark { position: absolute; right: 26px; bottom: 22px; width: 104px; height: 104px; border: 3px solid var(--red); border-radius: 50%; color: var(--red); display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 13px; line-height: 1.15; text-transform: uppercase; letter-spacing: .06em; transform: rotate(-14deg); opacity: .85; }
.stampmark b { display: block; font-family: Fraunces, serif; font-size: 30px; letter-spacing: 0; }

/* Numbers on a ruler */
.ruler { position: relative; background: #f2d68c; border-radius: 6px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 30px 0 22px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.08);
  background-image: repeating-linear-gradient(90deg, rgba(31,42,68,.55) 0 1.5px, transparent 1.5px 12px), repeating-linear-gradient(90deg, rgba(31,42,68,.7) 0 2px, transparent 2px 60px); background-size: 100% 10px, 100% 18px; background-repeat: no-repeat; }
.ruler div { text-align: center; padding: 6px 12px 0; }
.ruler b { display: block; font-family: Fraunces, serif; font-size: 44px; line-height: 1; }
.ruler span { font-size: 15px; font-weight: 600; color: #4a3e1f; }

section { padding: 120px 0 0; }
.kick { font-size: 30px; margin: 0 0 4px; }
h2 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.05; margin: 0 0 16px; max-width: 15em; text-wrap: balance; }
.intro { font-size: 20px; color: #45506b; max-width: 36em; margin: 0 0 44px; }

/* Stages as a school year on a lined page */
.year { background: var(--sheet); border-radius: 8px; padding: 40px 40px 34px; box-shadow: 0 18px 40px -22px rgba(31,42,68,.35); position: relative; }
.year ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; }
.year ol::before { content: ""; position: absolute; left: 6%; right: 6%; top: 52px; height: 3px; background: repeating-linear-gradient(90deg, var(--pen) 0 14px, transparent 14px 22px); opacity: .45; }
.year li { position: relative; text-align: center; }
.year .ob { width: 104px; height: 104px; margin: 0 auto 14px; background: var(--paper); border: 2px solid #e6dcc8; border-radius: 26px; display: grid; place-items: center; transform: rotate(var(--r, 0deg)); }
.year .ob svg { width: 72px; height: 72px; }
.year h3 { margin: 0; font-size: 24px; }
.year .de { font-size: 26px; line-height: 1; display: block; margin: 2px 0 8px; }
.year p { margin: 0; font-size: 15.5px; color: #45506b; }
.year li:last-child .ob { background: var(--ink); border-color: var(--ink); }
.year .foot { margin-top: 30px; padding-top: 18px; border-top: 1.5px dashed #d8d0bf; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.year .foot p { margin: 0; font-size: 18px; max-width: 40em; }

/* Features as a timetable */
.plan { background: var(--sheet); border-radius: 8px; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(31,42,68,.35); }
.plan table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.plan th { font-family: Fraunces, serif; font-weight: 700; font-size: 20px; padding: 16px 12px; background: var(--ink); color: #fff; text-align: left; }
.plan th small { display: block; font-family: "DM Sans"; font-size: 13px; font-weight: 500; opacity: .7; }
.plan td { vertical-align: top; padding: 18px 16px 20px; border-right: 1.5px solid #ece4d3; border-bottom: 1.5px solid #ece4d3; font-size: 15.5px; color: #45506b; }
.plan td:last-child { border-right: 0; }
.plan td b { display: block; font-family: Fraunces, serif; font-size: 21px; color: var(--ink); margin-bottom: 4px; }
.plan td.s1 { background: #fff4d6; } .plan td.s2 { background: #e8f0fb; } .plan td.s3 { background: #f6e7f1; } .plan td.s4 { background: #e7f3ec; } .plan td.s5 { background: #fbe7e4; }
.after { margin: 32px 0 0; }

/* Wherever you learn: every version, with a stamp on the ones still to come */
.shelf { font-size: 26px; margin: 44px 0 6px; }
.shelf-note { color: #45506b; margin: 0 0 4px; max-width: 40em; }
.kit { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kit.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .kit.four, .kit.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kit.four, .kit.three { grid-template-columns: 1fr; } }
.kit li { position: relative; background: var(--sheet); border-radius: 8px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 0 #e9e1d0, 0 14px 30px -20px rgba(31,42,68,.35); }
.kit li:not(.ready) { background: #f6f1e5; }
.kit svg { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.kit li.ready svg { stroke: var(--pen); }
.kit h4 { margin: 0 0 2px; font-family: Fraunces, Georgia, serif; font-variation-settings: "SOFT" 100; font-size: 21px; }
.kit p { margin: 0; font-size: 15.5px; color: #45506b; }
.kit .btn { align-self: flex-start; margin-top: auto; padding: 11px 18px; font-size: 15px; min-height: 44px; }
.badge { position: absolute; top: 16px; right: 14px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 4px 9px; border-radius: 6px; border: 2px solid; line-height: 1.2; }
.badge.soon { color: var(--red); border-color: var(--red); transform: rotate(-6deg); background: rgba(255,253,248,.7); }
.badge.now { color: #fff; background: var(--green); border-color: var(--green); }

/* House rules */
.rules { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.rules ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1.5px solid #e6dcc8; }
.rules li::before { content: counter(r) "."; font-family: Fraunces, serif; font-size: 40px; line-height: 1; color: var(--red); font-weight: 800; }
.rules h3 { margin: 0 0 4px; font-size: 24px; }
.rules p { margin: 0; color: #45506b; }
.rules .side { font-size: 30px; line-height: 1.2; transform: rotate(-2deg); margin-top: 26px; }

.end { margin: 120px 0 0; background: var(--ink); color: #fff; border-radius: 18px; padding: 72px 56px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.end h2 { color: #fff; margin: 0 0 10px; }
.end p { color: #c9d0e3; margin: 0; font-size: 19px; }
.end .btn { background: var(--saffron); color: var(--ink); box-shadow: 0 3px 0 #b07e12; font-size: 19px; padding: 18px 30px; }
.end .cone { position: absolute; right: 36px; top: 28px; width: 92px; transform: rotate(14deg); }
.end .hand { color: var(--saffron); font-size: 30px; display: block; margin-top: 14px; }
footer { padding: 40px 0 48px; font-size: 15px; color: var(--pencil); }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
footer nav a { display: inline-block; padding: 10px 0; min-width: 44px; min-height: 44px; box-sizing: border-box; }
.end :focus-visible { outline-color: #fff; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }


/* In action: the report card fills in, one word moves up, the stamp lands. */
@media (prefers-reduced-motion: no-preference) {
  h1 .u::after { clip-path: inset(0 100% 0 0); animation: draw .7s .5s cubic-bezier(.6,0,.3,1) forwards; }
  .card { animation: drop .8s cubic-bezier(.2,.8,.2,1) both; }
  .card tr { opacity: 0; transform: translateX(-10px); animation: row .45s ease-out forwards; }
  .card tr:nth-child(1) { animation-delay: .7s; } .card tr:nth-child(2) { animation-delay: .85s; }
  .card tr:nth-child(3) { animation-delay: 1s; } .card tr:nth-child(4) { animation-delay: 1.15s; }
  .card tr:nth-child(5) { animation-delay: 1.3s; } .card tr:nth-child(6) { animation-delay: 1.45s; }
  .card .remark { clip-path: inset(0 100% 0 0); animation: draw 1.1s 3.4s steps(28) forwards; }
  .stampmark { opacity: 0; animation: stamp .35s 4.6s cubic-bezier(.3,1.6,.5,1) forwards; }
  .hero .note { clip-path: inset(0 100% 0 0); animation: draw 1s 1.6s steps(24) forwards; }
  .year li { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}
.up-row td:first-child { position: relative; z-index: 0; }
.up-row .hl { position: absolute; left: -6px; right: -10px; top: 6px; bottom: 6px; background: rgba(244,180,47,.45); border-radius: 4px; z-index: -1; transform-origin: left; transform: scaleX(0); }
.swap { position: relative; display: inline-grid; justify-items: end; }
.swap > span { grid-area: 1 / 1; }
.swap .was { opacity: 1; }
.swap .now { opacity: 0; }
.plus { display: inline-block; margin-left: 10px; font-family: Caveat, cursive; font-weight: 700; color: var(--red); font-size: 22px; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .up-row .hl { animation: hl .5s 2.2s ease-out forwards; }
  .swap .was { animation: out .3s 2.6s forwards; }
  .swap .now { animation: in .4s 2.75s cubic-bezier(.3,1.5,.5,1) forwards; transform: translateY(8px); }
  .plus { animation: plus 1.2s 2.9s ease-out forwards; }
}
@media (prefers-reduced-motion: reduce) { .swap .was { opacity: 0; } .swap .now { opacity: 1; } .up-row .hl { transform: none; } }
@keyframes draw { to { clip-path: inset(0 0 0 0); } }
@keyframes drop { from { opacity: 0; transform: translateY(-24px) rotate(-3deg); } to { opacity: 1; transform: rotate(1.5deg); } }
@keyframes row { to { opacity: 1; transform: none; } }
@keyframes stamp { from { opacity: 0; transform: rotate(-30deg) scale(2.4); } to { opacity: .85; transform: rotate(-14deg) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes hl { to { transform: scaleX(1); } }
@keyframes out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes in { to { opacity: 1; transform: none; } }
@keyframes plus { 0% { opacity: 0; transform: translateY(6px); } 25% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .top nav a:not(.btn) { display: none; }
  .hero { grid-template-columns: 1fr; gap: 0; padding-top: 20px; }
  .hero > div:first-child { display: contents; }
  .hero .kick { order: 1; } .hero h1 { order: 2; } .hero .card { order: 3; margin: 14px 0 36px; }
  .hero .lead { order: 4; } .hero .acts { order: 5; } .hero .note { order: 6; }
  .card { transform: none; }
  .ruler { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .year { padding: 28px 22px; }
  .year ol { grid-template-columns: 1fr; gap: 14px; }
  .year ol::before { display: none; }
  .year li { display: grid; grid-template-columns: 84px 1fr; gap: 0 16px; text-align: left; align-items: center; }
  .year .ob { width: 84px; height: 84px; margin: 0; grid-row: span 3; }
  .year .ob svg { width: 58px; height: 58px; }
  .plan { overflow: visible; background: none; box-shadow: none; }
  .plan table, .plan tr, .plan td { display: block; width: auto; }
  .plan thead { display: none; }
  .plan tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .plan tr { display: contents; }
  .plan tr:first-child td:nth-child(1) { order: 1; } .plan tr:last-child td:nth-child(1) { order: 2; }
  .plan tr:first-child td:nth-child(2) { order: 3; } .plan tr:last-child td:nth-child(2) { order: 4; }
  .plan tr:first-child td:nth-child(3) { order: 5; } .plan tr:last-child td:nth-child(3) { order: 6; }
  .plan tr:first-child td:nth-child(4) { order: 7; } .plan tr:last-child td:nth-child(4) { order: 8; }
  .plan tr:first-child td:nth-child(5) { order: 9; } .plan tr:last-child td:nth-child(5) { order: 10; }
  .plan td { border: 0; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 0 #e9e1d0; }
  .plan td::before { content: attr(data-day); display: block; font-family: Caveat, cursive; font-weight: 700; color: var(--pen); font-size: 22px; line-height: 1; margin-bottom: 4px; }
  .rules { grid-template-columns: 1fr; gap: 0; }
  .end { grid-template-columns: 1fr; padding: 48px 28px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .card { padding: 26px 18px 24px 52px; background-position: 0 0, 0 12px; }
  .card { background-image: linear-gradient(90deg, transparent 36px, var(--margin) 36px, var(--margin) 38px, transparent 38px), repeating-linear-gradient(transparent 0 33px, var(--line) 33px 34px); }
  .card td.g { width: 96px; }
  .card .stage svg { display: none; }
  .card .stage { font-size: 12px; }
  .stampmark { width: 84px; height: 84px; font-size: 11px; right: 14px; }
  .stampmark b { font-size: 24px; }
  .card .title { flex-wrap: wrap; gap: 2px 10px; }
  .plan tbody { grid-template-columns: 1fr; gap: 10px; }
  .hero .acts .btn { flex: 1 1 100%; justify-content: center; }
  .end .cone { width: 64px; right: 22px; top: 22px; }
  .top .btn { white-space: nowrap; padding: 9px 14px; font-size: 14px; }
  .plus { display: none !important; }
  .card .remark { padding-right: 84px; font-size: 24px; }
  .ruler span { display: block; line-height: 1.3; }
}

/* Shared by every page */
.brand { display: flex; align-items: center; min-height: 44px; gap: 12px; text-decoration: none; font-family: Fraunces, serif; font-variation-settings: "SOFT" 100; font-weight: 800; font-size: 23px; white-space: nowrap; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.btn.small { padding: 10px 18px; font-size: 15px; white-space: nowrap; }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }

/* Text pages (privacy, word list, 404): one sheet of exercise paper */
.page { position: relative; width: min(820px, calc(100% - 36px)); margin: 24px auto 0; padding: 48px 56px 56px 96px; background: var(--sheet); border-radius: 6px; box-shadow: 0 18px 40px -22px rgba(31,42,68,.35);
  background-image: linear-gradient(90deg, transparent 62px, var(--margin) 62px, var(--margin) 64px, transparent 64px); }
.page::before { content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; margin-left: -60px; background: rgba(244,180,47,.55); transform: rotate(-3deg); }
.page h1 { font-size: clamp(38px, 5vw, 56px); line-height: 1.05; margin: 0 0 16px; }
.page h2 { font-size: 26px; margin: 34px 0 6px; }
.page p, .page li { font-size: 18px; }
.page .lead { color: #45506b; font-size: 20px; }
.page a:not(.btn) { color: var(--pen); }
.page .kick { margin: 0 0 4px; font-size: 30px; }
@media (max-width: 640px) {
  .page { padding: 36px 20px 40px 48px; background-image: linear-gradient(90deg, transparent 30px, var(--margin) 30px, var(--margin) 32px, transparent 32px); }
  .brand { font-size: 19px; gap: 9px; }
  .brand img { width: 34px; height: 34px; }
}