/* wrenfield.brightkidzhub.com
 *
 * THESIS. The site is Wrenfield's own display wall, not an app-store landing
 * page. It refuses the category default -- a pastel gradient, a glossy phone
 * mockup and a grid of feature icons -- because that page could sell any
 * app, and this one has to show a painted village and a face worth reading.
 *
 * OWN-WORLD. Inherited from Wrenfield's DESIGN.md, not invented here:
 * saturated sugar-paper grounds, one per place (street tangerine, rec green,
 * classroom blue, hall violet, kitchen red, gate slate); one cream card
 * (#FFFDF7) with a snipped edge and a red drawing pin carries the words; the
 * pictures are the app's own paintings, framed by a crimped sunflower border;
 * one paper shadow, one direction; Andika, the app's reading face. No
 * rounded corners, no gradients, no glass, no glow, no dark mode (sugar
 * paper has no dark counterpart -- DESIGN.md records why).
 *
 * STORY. A parent sees the exact moment the free story opens on, understands
 * in one card what their child will do, walks through the four questions
 * with the real screen text, meets the six children, and plays the story.
 *
 * FIRST VIEWPORT. Street-tangerine paper. The pinned card on the left:
 * title line, the question as the headline, one paragraph, the Play button.
 * On the right, the painted high street with Jonah and Dara, in a crimped
 * sunflower frame the card overlaps. On a phone: picture, then the card
 * pulled up over its lower edge.
 *
 * FORM. Cut-paper display wall, the app's committed world, extended to a
 * Persuade surface. Brief-pinned (a sibling of brightkidzhub.com carrying
 * Wrenfield's own world), so no concept roll. The BrightKidz family marks --
 * six-ink hairline and publisher footer -- close every page, as on the apex
 * and the library.
 */

@font-face {
  font-family: "Andika";
  src: url("/static/fonts/Andika-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("/static/fonts/Andika-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --card: #FFFDF7;
  --ink: #1E1B18;
  --ink-soft: #4a433c;
  --paper-classroom: #2C4EB8;
  --paper-gate: #3E4B5E;
  --paper-hall: #6A3B8F;
  --paper-kitchen: #B7433B;
  --paper-rec: #1F7A47;
  --paper-street: #D9701A;
  --sunflower: #FFC72C;
  --poppy: #E8453C;

  /* The library's six subject inks, for the family hairline only. */
  --s1: #12676f; --s2: #5b3fa8; --s3: #1d7533;
  --s4: #935824; --s5: #b8324c; --s6: #3a5794;

  --paper: var(--paper-street);
  --on-paper: var(--card);

  --cut-edge: polygon(
    0% 1.2%, 12% 0%, 27% 1.4%, 41% 0.2%, 58% 1.6%, 73% 0.3%, 88% 1.5%, 100% 0.4%,
    99% 14%, 100% 31%, 98.8% 48%, 100% 66%, 98.9% 83%, 100% 98.6%,
    87% 100%, 71% 98.5%, 55% 100%, 39% 98.6%, 24% 100%, 9% 98.7%, 0% 100%,
    1.2% 82%, 0% 65%, 1.3% 47%, 0.2% 30%, 1.1% 15%
  );
  --shadow-card: drop-shadow(0 3px 0 rgb(30 27 24 / .24)) drop-shadow(0 12px 14px rgb(30 27 24 / .22));
  --shadow-paper: drop-shadow(0 3px 0 rgb(30 27 24 / .22));
  --crimp: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --target: 56px;
  --measure: 66ch;
  --font: "Andika", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

/* The per-place grounds, and the label colour Wrenfield measured for each
   (tokens.css --paper-label-*): white on every ground but the street, ink
   on the street. */
[data-paper="classroom"] { --paper: var(--paper-classroom); --on-paper: #FFFFFF; }
[data-paper="gate"]      { --paper: var(--paper-gate);      --on-paper: #FFFFFF; }
[data-paper="hall"]      { --paper: var(--paper-hall);      --on-paper: #FFFFFF; }
[data-paper="kitchen"]   { --paper: var(--paper-kitchen);   --on-paper: #FFFFFF; }
[data-paper="rec"]       { --paper: var(--paper-rec);       --on-paper: #FFFFFF; }
[data-paper="street"]    { --paper: var(--paper-street);    --on-paper: var(--ink); }

@media (prefers-contrast: more) {
  :root { --card: #FFFFFF; --shadow-card: none; --shadow-paper: none; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .16em; text-decoration-thickness: .08em; }
.card a { color: #1d3f9e; }
.card a:hover { color: var(--ink); }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--sunflower);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--card); color: var(--ink);
  padding: .8rem 1.2rem; font-weight: 700;
}
.skip-link:focus { left: .6rem; top: .6rem; }

/* ── the masthead: a sunflower strip cut with pinking shears ─────────── */

.mast {
  background: var(--sunflower);
  padding-bottom: var(--crimp);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--crimp) * 2) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--crimp) * 2) 100%;
  position: relative; z-index: 2;
}
.mast-in {
  max-width: 76rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem;
  padding: .9rem clamp(1rem, 4vw, 2.5rem) .7rem;
}
.mark { display: inline-flex; min-height: var(--target); align-items: center; }
.mark svg { width: clamp(11rem, 26vw, 15.5rem); height: auto; filter: drop-shadow(0 2px 0 rgb(30 27 24 / .22)); }
.mast nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.mast nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .35rem .9rem; text-decoration: none; font-weight: 700;
  color: var(--ink); background: var(--card);
  clip-path: var(--cut-edge);
}
.mast nav a:hover { background: #fff; text-decoration: underline; }
.mast nav a[aria-current="page"] { background: var(--ink); color: var(--card); }

/* ── cards: cream paper, snipped edge, red pin, one shadow ──────────────── */

.card {
  position: relative; isolation: isolate;
  padding: clamp(1.4rem, 3.5vw, 2.2rem) clamp(1.2rem, 3.5vw, 2.2rem);
  filter: var(--shadow-card);
  color: var(--ink);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--card); clip-path: var(--cut-edge);
}
.pin {
  position: absolute; top: -12px; left: 50%; width: 28px; height: 28px;
  margin-left: -14px; z-index: 2;
  filter: drop-shadow(1px 2px 0 rgb(30 27 24 / .3));
}
.card > :last-child { margin-bottom: 0; }

h1, h2, h3 { font-weight: 700; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.3rem); margin: .2rem 0 1rem; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.3rem); margin: 0 0 1rem; }
h3 { font-size: 1.3rem; margin: 0 0 .6rem; }
p { margin: 0 0 1rem; }
.kicker { font-weight: 700; font-size: 1rem; color: var(--ink-soft); margin-bottom: .4rem; }
.lede { font-size: clamp(1.15rem, 1.7vw, 1.3rem); }

/* ── buttons: a sunflower tab you could peel off the wall ─────────────── */

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.4rem 0 1rem; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target); padding: .7rem 1.4rem;
  font-weight: 700; font-size: 1.1rem; text-decoration: none;
  color: var(--ink) !important;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.button.go {
  background: var(--sunflower);
  box-shadow: 0 4px 0 var(--ink);
}
.button.go:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.button.go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.button.quiet { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.button.quiet:hover { background: #fff3cc; }
.soon, .fine { font-size: .98rem; color: var(--ink-soft); }

/* ── the hero ──────────────────────────────────────────────────────────── */

.hero {
  max-width: 76rem; margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem);
  display: grid; align-items: center;
}
.hero-picture, .rec {
  margin: 0; background: var(--sunflower); padding: var(--crimp) 10px;
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--crimp) * 2) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--crimp) * 2) 51% repeat-x;
          mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--crimp) * 2) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--crimp) * 2) 51% repeat-x;
}
.hero-picture img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-card { margin: -1.2rem .4rem 0; transform: rotate(-.8deg); }
.hero h1 span { display: block; }

@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hero-picture { grid-column: 2; grid-row: 1; }
  .hero-picture img { aspect-ratio: 5 / 4; object-position: 46% 60%; }
  .hero-card { grid-column: 1 / span 1; grid-row: 1; margin: 0 -4.5rem 0 0; z-index: 1; }
}

/* THE ONE AUTHORED MOMENT: the card is pinned up. It starts where it ends --
   visible, in place -- and only its last half-degree of settle is animated,
   so reduced motion, a failed animation or no CSS animation support all show
   the same finished wall. */
@media (prefers-reduced-motion: no-preference) {
  .hero-card { animation: pin-up .9s var(--ease) .15s backwards; }
  .hero-card .pin { animation: pin-in .5s var(--ease) .75s backwards; }
}
@keyframes pin-up {
  from { transform: translateY(-14px) rotate(-3deg); filter: drop-shadow(0 18px 18px rgb(30 27 24 / .28)); }
  to   { transform: rotate(-.8deg); }
}
@keyframes pin-in {
  from { transform: translateY(-10px) scale(1.25); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── bands: one ground per place ──────────────────────────────────────── */

.band { background: var(--paper); color: var(--on-paper); padding: clamp(3rem, 7vw, 5.5rem) 0; }
.band-in { max-width: 76rem; margin-inline: auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.label { color: var(--on-paper); font-size: clamp(1.8rem, 4.4vw, 3rem); max-width: 22ch; margin-bottom: 1rem; }
.band-lede { max-width: 60ch; font-size: 1.2rem; margin-bottom: 2.4rem; }
.band .after { max-width: 60ch; margin-top: 2.4rem; font-size: 1.15rem; }
.band .after a { color: var(--on-paper); font-weight: 700; }

.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.framed { margin: 0; background: var(--card); padding: 10px 10px 0; filter: var(--shadow-card); }
.framed img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.framed figcaption { color: var(--ink); font-size: 1rem; padding: .7rem .3rem .9rem; font-weight: 700; }
.framed.tilt { transform: rotate(1.4deg); }
.card.wide { max-width: 46rem; }
.card.wide p, .card.wide li { max-width: var(--measure); }

/* The four questions. Numbered because the ORDER is the lesson. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6rem 1.6rem; }
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .step h3 { font-size: 1.15rem; } }
.step:nth-child(1) { transform: rotate(-1.1deg); }
.step:nth-child(2) { transform: rotate(.9deg) translateY(.8rem); }
.step:nth-child(3) { transform: rotate(-.5deg); }
.step:nth-child(4) { transform: rotate(1.2deg) translateY(.6rem); }
.step h3 { display: flex; gap: .6rem; align-items: flex-start; }
.n {
  flex: none; display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; background: var(--sunflower); color: var(--ink);
  font-size: 1.1rem; clip-path: var(--cut-edge);
}
.step img { width: 5.5rem; margin: .4rem auto 0; }
.said { list-style: none; padding: 0; margin: .8rem 0 0; }
.said li {
  padding: .45rem 0 .45rem 1.4rem; position: relative;
  border-top: 2px dashed rgb(30 27 24 / .22); font-size: 1.02rem;
}
.said li::before { content: "\201C"; position: absolute; left: 0; top: .25rem; font-weight: 700; font-size: 1.3rem; color: var(--paper-kitchen); }

.rules { padding-left: 1.2rem; }
.rules li { margin: .7rem 0; }

/* The village. */
.rec { margin: 0 0 2.8rem; padding-inline: 10px; }
.rec img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cast {
  list-style: none; margin: 0 0 3.5rem; padding: 0;
  display: grid; gap: 2rem 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40rem) { .cast { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .cast { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cast li { display: grid; justify-items: start; gap: .5rem; align-content: start; }
.cast img { height: 11rem; width: auto; filter: var(--shadow-paper); }
.cast .who {
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 1.15rem;
  padding: .25rem .9rem; clip-path: var(--cut-edge);
}
.cast .line { font-size: 1.02rem; line-height: 1.45; color: var(--on-paper); max-width: 26ch; }

.places {
  list-style: none; margin: 0; padding: 0 0 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 20rem);
  gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.places li { scroll-snap-align: start; position: relative; filter: var(--shadow-paper); }
.places li:nth-child(odd) { transform: rotate(-.7deg); }
.places li:nth-child(even) { transform: rotate(.6deg); }
.places img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 8px solid var(--card); border-bottom-width: 2.6rem; }
.places span { position: absolute; left: 10px; right: 10px; bottom: .45rem; color: var(--ink); font-weight: 700; font-size: 1rem; }
@media (min-width: 60rem) {
  .places { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
}

/* The play band: the card, and the phone the story plays on. */
.phones { margin: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 30rem; justify-self: center; }
.phones img { width: 100%; background: var(--sunflower); padding: 8px; filter: var(--shadow-card); }
.phones .p1 { transform: rotate(-2.5deg); }
.phones .p2 { transform: rotate(2deg) translateY(1.6rem); }
.phones figcaption { grid-column: 1 / -1; margin-top: 2.2rem; text-align: center; font-weight: 700; color: var(--on-paper); }

.facts { display: grid; gap: 2.4rem 2rem; }
@media (min-width: 56rem) { .facts { grid-template-columns: 1fr 1fr; } }
.facts .card:nth-child(1) { transform: rotate(-.6deg); }
.facts .card:nth-child(2) { transform: rotate(.7deg); }
.facts ul { padding-left: 1.2rem; margin: 0; }
.facts li { margin: .6rem 0; }
.soon-card { transform: rotate(-.5deg); }

/* ── the Play page ─────────────────────────────────────────────────────── */

.stage {
  max-width: 76rem; margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 4.5rem);
  display: grid; gap: 2.5rem; align-items: start;
}
@media (min-width: 56rem) { .stage { grid-template-columns: minmax(0, 1fr) auto; } }
.stage-card { transform: rotate(-.5deg); }
.stage-card h2.small { font-size: 1.2rem; margin: 1.4rem 0 .4rem; }
.ready { padding-left: 1.2rem; }
.ready li { margin: .5rem 0; }
.device {
  justify-self: center; width: min(390px, 100%);
  background: var(--sunflower); padding: 12px; filter: var(--shadow-card);
}
.device-screen { aspect-ratio: 390 / 740; background: var(--ink); position: relative; }
.device-screen iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--card); }
.poster { position: absolute; inset: 0; display: block; }
.poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.poster-play {
  position: absolute; left: 50%; top: 50%; width: 5.5rem; height: 5.5rem;
  margin: -2.75rem 0 0 -2.75rem; display: grid; place-items: center;
  background: var(--sunflower); box-shadow: 0 5px 0 var(--ink);
  clip-path: var(--cut-edge);
}
.poster-play svg { width: 2.6rem; fill: var(--ink); }
.poster:hover .poster-play { background: #ffd65c; }
@media (max-width: 55.99rem) { .device { display: none; } }

/* ── documents: long reading on one pinned sheet ───────────────────────── */

.doc { max-width: 76rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.5rem) clamp(.6rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.doc .sheet {
  position: relative; isolation: isolate; max-width: 50rem; margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.3rem, 5vw, 3.6rem);
  filter: var(--shadow-card);
}
/* A long sheet gets a snipped edge measured in PIXELS: the card's percentage
   edge scales with height, and on a 3,000px page 1.6% is a 48px notch. */
.doc .sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--card);
  clip-path: polygon(
    0 6px, 12% 0, 27% 7px, 41% 1px, 58% 8px, 73% 1px, 88% 7px, 100% 2px,
    calc(100% - 5px) 14%, 100% 31%, calc(100% - 6px) 48%, 100% 66%, calc(100% - 5px) 83%, 100% calc(100% - 7px),
    87% 100%, 71% calc(100% - 7px), 55% 100%, 39% calc(100% - 7px), 24% 100%, 9% calc(100% - 6px), 0 100%,
    6px 82%, 0 65%, 6px 47%, 1px 30%, 5px 15%);
}
.doc h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); }
.doc h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 2.8rem 0 .7rem; }
.doc p, .doc li { max-width: var(--measure); }
.doc ul, .doc ol { padding-left: 1.3rem; }
.doc li { margin: .5rem 0; }
.doc a { color: #1d3f9e; }
.doc code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; background: #f3eee2; padding: .05em .3em; }

/* ── the family footer: shared with brightkidzhub.com and the library ─── */

.foot { background: var(--card); color: var(--ink); }
.inks { display: flex; height: 4px; }
.inks span { flex: 1; }
.ink1 { background: var(--s1); } .ink2 { background: var(--s2); } .ink3 { background: var(--s3); }
.ink4 { background: var(--s4); } .ink5 { background: var(--s5); } .ink6 { background: var(--s6); }
.foot .inner { max-width: 76rem; margin-inline: auto; padding: 2rem clamp(1rem, 4vw, 2.5rem) 2.6rem; font-size: 1rem; line-height: 1.55; }
.foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 1rem; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.foot p { margin: 0 0 .4rem; max-width: 52rem; }
.foot .family a { font-weight: 700; color: #1d3f9e; }
.foot .reg { color: var(--ink-soft); }

/* A clip-path clips the focus ring with it, so a focused tab drops its snipped
   edge rather than hide where the keyboard is. */
.mast nav a:focus-visible { clip-path: none; }