/* The marketing page in the live site's layout, in the Notebook theme. Its materials (plates, notes, sticky notes, tape,
   highlighter, marker button, store badges, prints and motion) are drawn from the picked phone Home
   (iteration 5) and iPad Pro Home (iteration 7). Colours and faces come from tokens.css; light is loose-leaf, dark is
   chalkboard, and the two change roles only. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { color: var(--ink); font-family: var(--hand); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 4px; }
/* A digit takes the number face (type.md); the minutes on the task notes keep the hand face, as on the picked Homes. */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.9em; letter-spacing: -0.01em; }
img { display: block; }

/* ---------- the ground ----------
   Light: one loose-leaf sheet the whole page long. The plate's own head (its worn top edge, first rule and first
   hole) sits at the top, and a band of exactly twenty of its rules repeats below it, blended at the join, so the
   rules and the holes run on unbroken and scroll with the writing. The sheet has no margin rule. page.js sets --tile-y.
   Dark: a chalkboard is a wall, not a sheet, so the board stays still behind the page, as on the live site. */
body { background-color: var(--paper); background-image: url("assets/art/paper-wide-cap.webp"), url("assets/art/paper-wide-tile.webp"); background-size: var(--plate-w, 100%) auto, var(--plate-w, 100%) auto; background-repeat: no-repeat, repeat-y; background-position: 0 0, 0 var(--tile-y, 172px); }
.ground { position: fixed; inset: 0; z-index: -1; display: none; background: var(--paper) url("assets/art/chalk-wide.webp") left top / cover no-repeat; }
:root[data-theme="dark"] body { background-image: none; }
:root[data-theme="dark"] .ground { display: block; }
.ground span { display: none; }

/* The page sits centred on the sheet with equal gutters, clear of the punch holes on the left. */
:root { --gutter: clamp(76px, 6vw, 110px); }
.page, .top { padding-left: var(--gutter); padding-right: var(--gutter); margin-left: auto; margin-right: auto; }
/* Shadows and tilts never make the page scroll sideways. */
.page { overflow-x: clip; }

/* ---------- top: the switches on the left; Feedback & ideas and Log in on the right ---------- */
.top { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding-top: 14px; }
.toggles { display: flex; gap: 22px; }
.toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--press); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pencil); white-space: nowrap; }
.toggle:first-child { gap: 22px; }
.toggle__box { width: 40px; height: 22px; overflow: visible; }
.toggle__frame { fill: none; stroke: var(--pencil); stroke-width: 1.6; stroke-linecap: round; }
.toggle__dot { fill: var(--pencil); transition: transform 0.2s ease; }
.toggle[aria-checked="true"] .toggle__frame { stroke: var(--ink); }
.toggle[aria-checked="true"] .toggle__dot { fill: var(--ink); transform: translateX(18px); }
.toggle[aria-checked="true"] .toggle__word { color: var(--ink); }
.toggle__word > span { display: inline-block; min-width: 3.2ch; }
.ink-path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.slab { position: relative; display: inline-flex; align-items: center; min-height: 50px; background: var(--slab); color: var(--on-slab); text-decoration: none; }
.slab-frame { position: absolute; left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); pointer-events: none; color: var(--on-slab); opacity: 0.8; }
.slab-frame .ink-path { stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.login { padding: 0 26px; transform: rotate(1deg); box-shadow: var(--sh-card); }
.login span { position: relative; font-family: var(--press); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; }
.login:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- type ---------- */
.h2 { text-wrap: balance; margin: 0; font-family: var(--display); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.h3 { margin: 0; font-family: var(--hand); font-weight: 700; font-size: 25px; line-height: 1.15; }
.lead { max-width: 660px; margin: 12px 0 0; font-family: var(--hand); font-size: 20px; line-height: 1.4; color: var(--ink); }
/* The highlighter is swiped across every line, behind the letters, as on the picked Homes. */
.swipe { background: url("assets/art/highlighter.webp") 0 31% / 100% 190% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 6px; margin: 0 -6px; color: var(--on-card); }
.tape { position: absolute; top: 0; left: 40%; width: 96px; height: auto; aspect-ratio: 512 / 50; transform: translateY(-50%) rotate(-3deg); opacity: 0.92; pointer-events: none; z-index: 2; }


/* The mark's drips hang below its frame, so the headline keeps clear of them. */
.sticker { position: relative; width: 396px; aspect-ratio: 1.568; margin: 0 0 12px -12px; transform: rotate(-3deg); }
/* The mark's lockup fills 84.5% by 53.9% of its square SVG; this frame crops to it. It never moves. */
.sticker img { position: absolute; width: 118.3%; left: -9.47%; top: -50.8%; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(var(--sh-vinyl)); }

/* The 360° card: the signature and the everyday promise, bold, on a torn note. The note is paper in both themes, so
   the swipe keeps its shape and the ink stays dark on it. */
.sig { --tilt: -0.8deg; margin-top: 20px; padding: 30px 28px 18px; transform: rotate(var(--tilt)); }

/* Scoped to the card, so the note body size doesn't override the signature. */
.sig .sig__for { margin: 6px 0 0; font-family: var(--hand); font-weight: 700; font-size: 19px; line-height: 1.35; }


/* The world on one taped print, the loop inside it. */

/* A cast member stands still on the paper, feet on a soft contact shadow. Under the pointer it hops. */
.stand { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
.stand img { height: 330px; width: auto; transform-origin: 50% 100%; filter: drop-shadow(0 6px 5px rgba(var(--sh-rgb), 0.22)); }
.stand__shadow { width: 76%; height: 14px; margin-top: -8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--sh-rgb), 0.34), rgba(var(--sh-rgb), 0)); }

/* The stores: each mark at its true geometry inside the page's own button frame. */
.stores { display: contents; }
.store { position: relative; display: flex; align-items: center; gap: 13px; height: 76px; padding: 0 22px 0 17px; background: var(--slab); color: var(--on-slab); text-decoration: none; box-shadow: var(--sh-card); }
.store:nth-child(1) { transform: rotate(-1deg); }
.store:nth-child(2) { transform: rotate(0.8deg); }
.store:nth-child(3) { transform: rotate(-0.6deg); }
.store__frame { position: absolute; left: 4px; top: 4px; width: calc(100% - 8px); height: calc(100% - 8px); pointer-events: none; opacity: 0.8; }
.store__frame .ink-path { stroke: var(--on-slab); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.store__glyph { position: relative; flex: none; }
.store__glyph--apple { width: 31px; height: 38px; }
.store__glyph--play { width: 33px; height: 36px; }
.store__glyph--microsoft { width: 30px; height: 30px; }
.store__txt { position: relative; text-align: left; }
.store__k { display: block; font-family: var(--press); font-weight: 800; font-size: 9.5px; letter-spacing: 0.19em; text-transform: uppercase; color: color-mix(in srgb, var(--on-slab) 72%, transparent); white-space: nowrap; }
.store__n { display: block; margin-top: 4px; font-family: var(--display); font-size: 24px; line-height: 1.05; color: var(--on-slab); white-space: nowrap; }
.store:active { translate: 0 2px; }

/* The marker button: the token orange cut to a real marker swath, a cartoon hop on a beat, drawn emphasis marks. */
.marker { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 76px; margin-right: 22px; padding: 0 30px 0 26px; transform-origin: 50% 100%; font-family: var(--press); font-weight: 900; font-size: 24px; line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; color: var(--on-marker); transform: rotate(-1deg); animation: hop 2.6s linear 1.2s infinite; }
.marker__ink { position: absolute; inset: 0 -8px 0 -3px; z-index: -1; background: var(--marker); -webkit-mask: url("assets/art/marker-mask.webp") center / 100% 100% no-repeat; mask: url("assets/art/marker-mask.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--marker) 50%, #000)); }
.marker__label { position: relative; white-space: nowrap; }
.marker__zing { position: absolute; right: -32px; top: 6px; width: 28px; height: 24px; overflow: visible; }
.marker__zing path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; transform-origin: 0 100%; transform: scale(0); animation: zing 2.6s ease-out 1.2s infinite; }
.marker__zing path:nth-child(2) { animation-delay: 1.24s; }
.marker__zing path:nth-child(3) { animation-delay: 1.28s; }
.marker::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -10px; height: 7px; z-index: -2; border-radius: 50%; background: rgba(var(--sh-rgb), 0.28); animation: hop-shadow 2.6s linear 1.2s infinite; }
.marker:active { transform: rotate(-1deg) scale(0.96); animation: none; }
@keyframes hop {
  0%, 44%, 100% { transform: rotate(-1deg); animation-timing-function: ease-out; }
  50% { transform: rotate(1deg) scale(1.1, 0.84); animation-timing-function: cubic-bezier(0.2, 0.9, 0.4, 1); }
  58% { transform: translateY(-4px) rotate(-1deg) scale(0.94, 1.06); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
  66% { transform: rotate(-3deg) scale(1.14, 0.82); animation-timing-function: ease-out; }
  72% { transform: translateY(-2px) rotate(-1deg) scale(0.97, 1.03); animation-timing-function: ease-in; }
  78% { transform: rotate(-1deg) scale(1.05, 0.95); }
  83% { transform: rotate(1.2deg); }
  88% { transform: rotate(-2deg); }
  93% { transform: rotate(-0.6deg); }
}
@keyframes hop-shadow { 0%, 44%, 50%, 66%, 78%, 100% { transform: none; opacity: 1; } 58% { transform: translateY(4px) scaleX(0.72); opacity: 0.4; } 72% { transform: translateY(2px) scaleX(0.9); opacity: 0.8; } }
@keyframes zing { 0%, 56% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 68% { transform: scale(1); opacity: 0.9; } 72%, 100% { transform: scale(0); opacity: 0; } }


.note { position: relative; isolation: isolate; padding: 38px 28px 28px; color: var(--on-card); }
.note::before { content: ""; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: 34px 8px 6px 8px; border-image: url("assets/art/note-flat.webp") 90 20 12 20 fill / 34px 8px 6px 8px stretch round; filter: drop-shadow(0 1px 1px rgba(var(--sh-rgb), 0.34)) drop-shadow(0 10px 18px rgba(var(--sh-rgb), 0.3)); }
.note p { margin: 8px 0 0; font-family: var(--hand); font-size: 17.5px; line-height: 1.4; }

.extra { --tilt: 0.8deg; position: relative; display: flex; align-items: center; min-height: 132px; padding: 16px 20px 16px 184px; background: var(--card); color: var(--on-card); box-shadow: var(--sh-card); transform: rotate(var(--tilt)); }
.extra > .tape { left: auto; right: 22%; width: 90px; top: 0; transform: translateY(-50%) rotate(-4deg); }
.extra__art { position: absolute; left: -6px; bottom: 8px; width: 170px; filter: drop-shadow(0 5px 5px rgba(var(--sh-rgb), 0.22)); pointer-events: none; }
.extra__words { display: grid; gap: 3px; }
.extra__kind { font-family: var(--press); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-card-dim); }
.extra__t { margin: 0; font-family: var(--hand); font-weight: 700; font-size: 25px; line-height: 1.1; }
.extra__s { margin: 0; font-family: var(--hand); font-size: 17px; line-height: 1.35; color: var(--on-card); }
/* The TV and the tablet are toons: a canvas redraws each one dancing; the still stands in until it runs. */
.toon { position: relative; display: block; aspect-ratio: 577 / 500; }
.toon__still { display: block; width: 100%; }
.toon__canvas { position: absolute; left: -14%; top: -16%; width: 128%; height: 120%; visibility: hidden; }
.toon[data-live="true"] .toon__canvas { visibility: visible; }
.toon[data-live="true"] .toon__still { visibility: hidden; }
.toon__lines { position: absolute; left: -24%; top: -8%; width: 140%; height: 100%; overflow: visible; opacity: 0; transition: opacity 0.12s; }
.toon__lines path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.toon[data-boing="true"] .toon__lines { opacity: 0.9; }


.fact { --tilt: -1.4deg; position: relative; padding: 9px 9px 14px; background: var(--card); color: var(--on-card); box-shadow: var(--sh-card); transform: rotate(var(--tilt)); }
.fact:nth-child(2) { --tilt: 1.2deg; }
.fact:nth-child(3) { --tilt: -0.6deg; }
.fact:nth-child(4) { --tilt: 1.6deg; }
.fact:nth-child(5) { --tilt: -1.6deg; }
.fact::before { content: ""; position: absolute; top: -4px; left: calc(var(--tape-x, 50%) - 36px); width: 72px; height: 7px; background: url("assets/art/tape.webp") center / 100% 100% no-repeat; transform: rotate(var(--tape-r, -3deg)); opacity: 0.92; z-index: 2; }
.fact img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }


.pc { position: relative; }
.pc > a { --tilt: -1.4deg; position: relative; display: block; height: 100%; padding: 8px 8px 11px; background: var(--card); color: var(--on-card); text-decoration: none; box-shadow: var(--sh-card); transform: rotate(var(--tilt)); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.25s; }
.wall > li:nth-child(3n + 2) > a { --tilt: 1.6deg; }
.wall > li:nth-child(3n) > a { --tilt: -0.5deg; }
.wall > li:nth-child(5n + 1) > a { --tilt: 1.2deg; }
/* The tape is stuck on by hand: each strip sits at its own spot and angle. */
.pc:nth-child(3n + 1), .fact:nth-child(3n + 1) { --tape-x: 30%; --tape-r: -7deg; }
.pc:nth-child(3n + 2), .fact:nth-child(3n + 2) { --tape-x: 64%; --tape-r: 5deg; }
.pc:nth-child(4n), .fact:nth-child(4n) { --tape-x: 46%; --tape-r: -2deg; }
.pc > a::before { content: ""; position: absolute; top: -3px; left: calc(var(--tape-x, 50%) - 34px); width: 68px; height: 7px; background: url("assets/art/tape.webp") center / 100% 100% no-repeat; transform: rotate(var(--tape-r, -3deg)); opacity: 0.92; z-index: 2; }
.pc img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pc__c { display: block; margin-top: 8px; font-family: var(--press); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-card-dim); }
.pc__l { display: block; margin-top: 2px; font-family: var(--hand); font-weight: 700; font-size: 18px; line-height: 1.12; hyphens: manual; }
/* Under the pointer a postcard lifts, straightens and bobs, as the website's cards do; the tape stays on. */
.pc > a:hover, .pc > a:focus-visible { transform: translateY(-8px) rotate(0deg); box-shadow: 0 16px 22px rgba(var(--sh-rgb), 0.22); animation: lift-bob 1.6s ease-in-out 0.25s infinite; }
@keyframes lift-bob { 50% { transform: translateY(-12px) rotate(0.6deg); } }

/* ---------- the footer: the live site's columns, faces and site-language row, with the whole course list ---------- */
.foot { margin: 96px 0 0; padding-bottom: 60px; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); gap: 34px 30px; }
.foot__h { margin: 0 0 14px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot__col--social ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.foot a:not(.slab) { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--press); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); text-decoration: none; }
.foot a:not(.slab):hover, .foot a:not(.slab):focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* Each block below the columns opens on a pencil line across the sheet. */
.foot__langs, .foot__end { margin-top: 38px; padding-top: 30px; border-top: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
/* Only English is written; the others are listed, not linked. */
.foot__lang-row { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 14px; }
.foot__lang-row li { font-family: var(--press); font-size: 15px; font-weight: 700; color: var(--pencil); }
/* The live site marks English in orange; here orange stays the page's one call to action, so the pen marks it. */
.foot__lang-row li[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.foot__end { display: flex; align-items: center; gap: 26px; }
.sticker--foot { width: 190px; margin: 0; flex: none; }
.foot__line { margin: 0; font-family: var(--press); font-size: 13px; font-weight: 500; color: var(--pencil); }


/* ---------- things pop onto the page as they scroll in: squash, overshoot, settle ----------
   The pop runs on the translate and scale properties, so each note keeps its own tilt (its transform). */
.js .pop { opacity: 0; translate: 0 18px; scale: 0.86; }
.js .pop.in { animation: pop-in 0.62s cubic-bezier(0.3, 1.5, 0.5, 1) var(--d, 0s) both; }
@keyframes pop-in {
  0% { opacity: 0; translate: 0 18px; scale: 0.86 0.8; }
  55% { opacity: 1; translate: 0 -6px; scale: 1.05 0.95; }
  78% { translate: 0 1px; scale: 0.98 1.02; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}






















































/* ================= iteration 9: one fixed canvas per kind of screen, scaled to fit =================
   Five sections and little bare paper: the hero with the globe and the cast sitting under it; the method (the four
   pillars, the recall rating and the optional extras); the reasons (your level beside a busy day and starting higher);
   culture and interests side by side; every postcard, then the close.
   Each kind of screen has one canvas: desktops 1440 px wide, landscape tablets 1180, portrait tablets 820 and phones 390
   (page.js picks it and sets --canvas, --gutter and --z). The page is laid out at that width and scaled to the window, so
   resizing scales it instead of reflowing it; on landscape screens it also scales down until the whole first screen
   fits. The rules for the narrower canvases sit in blocks that the build turns into :root[data-canvas] selectors. */

.page, .top, .foot__in { zoom: var(--z, 1); box-sizing: border-box; width: var(--canvas, auto); max-width: none; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 20; padding: 12px 18px; background: var(--slab) url("assets/art/card-stock-light.webp") center / cover; color: var(--on-slab); font-family: var(--press); font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
p { text-wrap: pretty; }

/* Controls sit on the live site's quiet card; every print and postcard in the postcard frame plate. */
.slab, .store { background: var(--slab) url("assets/art/card-stock-light.webp") center / cover; }
:root[data-theme="dark"] .slab, :root[data-theme="dark"] .store { background-image: url("assets/art/card-stock-dark.webp"); }
.login { min-height: 48px; }
.fact, .pc > a { border: 11px solid transparent; border-image: url("assets/art/frame-postcard.webp") 80 80 92 80 / 11px 11px 13px 11px stretch; background: var(--card) url("assets/art/card-stock-light.webp") center / cover padding-box; }
.fact { padding: 0 0 8px; }
.pc > a { padding: 0 0 6px; }
.fact p, .pc__c, .pc__l { padding: 0 6px; }
.fact p { margin: 5px 0 0; font-family: var(--hand); font-size: 16.5px; line-height: 1.35; }
.more-line { margin: 18px 0 0; text-align: right; font-family: var(--hand); font-weight: 700; font-size: 19px; }

/* ---------- the four ways in: four small, equal cells in a square, the button and the three badges the same size ----------
   Two by two at every size. The block is only as wide as its cells, so it never runs the width of the screen.
   The cells stand straight so the block reads as one clean set. */
.get { --cell: 224px; --cell-h: 60px; display: grid; grid-template-columns: repeat(2, minmax(0, var(--cell))); gap: 12px; width: max-content; max-width: 100%; }
.get .marker, .get .store { width: 100%; height: var(--cell-h); margin: 0; padding: 0 12px; justify-content: center; transform: none; }
.get .marker { font-size: 21px; animation-name: hop; }
.get .marker__zing, .get .marker::after { display: none; }
.marker__ink { inset: 0; }
.get .store:nth-child(n) { transform: none; }
.get--row { margin: 0 auto; }


/* Characters stand still; the pictures take the pointer back from their containers for the hop. */
/* The top bar: the switches on the left, Feedback & ideas and Log in together on the right. */
.top { flex-wrap: wrap; row-gap: 10px; }
.feedback { margin-left: auto; margin-right: 14px; min-height: 48px; padding: 0 20px; transform: rotate(-1deg); box-shadow: var(--sh-card); }
.feedback span { position: relative; font-family: var(--press); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.feedback:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.stand img, .pillar__art img, .note__cast, .close__cast { pointer-events: auto; }
.stand img:hover, .pillar__art img:hover, .note__cast:hover, .close__cast:hover { animation: hop 1.3s linear infinite; }

/* A hand-drawn box; ticked where its task is done. */
.tick { position: relative; display: inline-block; flex: none; width: 24px; height: 24px; border: 2.2px solid currentColor; transform: rotate(-3deg) skewX(-2deg); }
.tick svg { position: absolute; left: -3px; top: -9px; width: 32px; height: 32px; overflow: visible; }
.tick path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- drawn lines: every divider and side bar is a pencil stroke with a slight wobble, never a straight CSS rule ---------- */
.block::before, .foot__langs::before, .foot__end::before { height: 10px; top: -4px; background: color-mix(in srgb, var(--ink) 34%, transparent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none'%3E%3Cpath d='M2 5.6C90 3 190 8.2 330 4.4S560 2.4 700 6.6S900 3.2 998 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none'%3E%3Cpath d='M2 5.6C90 3 190 8.2 330 4.4S560 2.4 700 6.6S900 3.2 998 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.foot__langs, .foot__end { position: relative; border-top: 0; }
.foot__langs::before, .foot__end::before { content: ""; position: absolute; left: 0; right: 0; }
.plan__body, .ruled { position: relative; border-left: 0; }
.plan__body::before, .ruled::before { content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 10px; background: color-mix(in srgb, var(--ink) 72%, transparent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 1000' preserveAspectRatio='none'%3E%3Cpath d='M5 2C2.4 140 7.4 300 4.2 480S2.2 790 6.2 998' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 1000' preserveAspectRatio='none'%3E%3Cpath d='M5 2C2.4 140 7.4 300 4.2 480S2.2 790 6.2 998' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* ---------- hover: every button, badge, postcard, note and sticky note lifts a little under the pointer, straightens and
   bobs, as the course postcards do; Try for free keeps its own bigger hop and quickens it. A keyboard focus gets the same. ---------- */
.store, .login, .feedback, .fact, .note, .pillar, .extra, .daypage { transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease; }
.get .store:hover, .get .store:focus-visible, .login:hover, .login:focus-visible, .feedback:hover, .feedback:focus-visible { transform: translateY(-4px) rotate(-0.6deg); box-shadow: 0 10px 14px rgba(var(--sh-rgb), 0.22); }
.fact:hover, .note:hover, .pillar:hover, .extra:hover, .daypage:hover { transform: translateY(-6px) rotate(0deg); box-shadow: 0 16px 22px rgba(var(--sh-rgb), 0.2); animation: lift-bob 1.6s ease-in-out 0.25s infinite; }
.get .marker:hover, .get .marker:focus-visible { animation-duration: 1.1s; }
.foot a:not(.slab) { transition: transform 0.18s ease; }
.foot a:not(.slab):hover, .foot a:not(.slab):focus-visible { transform: translateX(3px); }

/* While page.js sets the words on the ruled lines it measures every pop-in in its resting place, and nothing transitions,
   so each margin it sets lands at once (reduced motion otherwise gives every property a short transition). */
.js.measuring .pop { translate: none; scale: none; animation: none; }
.js.measuring *, .js.measuring *::before, .js.measuring *::after { transition: none !important; }

/* ---------- type on the page ---------- */
/* Words written straight on the loose-leaf are sized to fill its ruled lines the way handwriting does. */
/* canvases d, l (was (min-width: 1100px)) */
  :where(:root[data-canvas="d"], :root[data-canvas="l"]) .lead, :where(:root[data-canvas="d"], :root[data-canvas="l"]) .body, :where(:root[data-canvas="d"], :root[data-canvas="l"]) .ruled p, :where(:root[data-canvas="d"], :root[data-canvas="l"]) .pillars__head .lead { font-size: 21px; }
  :where(:root[data-canvas="d"], :root[data-canvas="l"]) .ruled .h3 { font-size: 27px; }

.h2 { position: relative; font-size: 56px; line-height: 0.98; text-wrap: balance; }
/* A number in a display heading takes the display face: it is a word of the title, not a count that changes. */
.h2 .num { font-family: inherit; font-size: 1em; letter-spacing: inherit; }
.lead { max-width: 36em; margin: 16px 0 0; font-size: 20px; line-height: 1.45; }
.body { max-width: 32em; margin: 14px 0 0; font-family: var(--hand); font-size: 19px; line-height: 1.45; }

/* ---------- the hero: the headline and the signature set large down the left, the four ways in two by two under them; on
   the right the cast mid-conversation, each pair above its own city's postcard, never in front of it ----------
   Every piece of the words column starts on the same edge and none is turned, so the column reads as one block. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "words scene"; column-gap: 40px; align-items: start; padding-top: 4px; }
.hero__words { grid-area: words; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sticker--hero { width: 410px; margin: -8px 0 0 -14px; }
.hero__title { max-width: 100%; overflow-wrap: break-word; margin: 0; font-family: var(--display); font-weight: 400; font-size: 80px; line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; }
/* The headline always breaks as THE BEST / LANGUAGE / LEARNING APP / IN THE WORLD. */
.hero__title > span { display: block; }
.hero__sig { margin: 14px 0 0; font-family: var(--hand); font-weight: 700; font-size: 28px; line-height: 1.28; text-wrap: balance; }
/* On the chalkboard the swipe runs the letters' full height, so no dark ink shows against the dark ground. */
/* The promise always starts its own line under the highlighted one. */
.hero__rest { display: block; }
.get--hero { margin-top: 22px; }
/* The globe: a cartoon Earth turning in place, lit from the upper left, with each course's landmark popping up from its
   country as it comes round to the front and dropping back as it turns away (page.js). Without WebGL or with reduced motion
   the map shows still inside the same circle. */
.hero__globe { grid-area: scene; position: relative; align-self: center; justify-self: end; width: min(122%, 820px); margin-right: -36px; aspect-ratio: 1; }
.globe__still, .globe__canvas { position: absolute; inset: 7%; width: 86%; height: 86%; }
.globe__still { clip-path: circle(50%); background: url("assets/art/globe-map.webp") 38% 50% / 200% 100% no-repeat; box-shadow: inset -18px -24px 40px rgba(0, 20, 50, 0.35); }
.globe__canvas { display: block; }
.globe[data-live="true"] .globe__still { visibility: hidden; }
.globe::before { content: ""; position: absolute; inset: 4%; clip-path: circle(50%); background: radial-gradient(circle at 50% 50%, rgba(120, 200, 255, 0) 62%, rgba(120, 200, 255, 0.28) 70%, rgba(120, 200, 255, 0) 76%); }
.globe__pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; width: var(--pin, 110px); height: var(--pin, 110px); will-change: transform; }
.pin__art { position: absolute; inset: 0; background: url("assets/art/globe-landmarks.webp") no-repeat; background-size: 400% 400%; transform-origin: 50% 100%; transform: scale(0); transition: transform 0.2s cubic-bezier(0.5, 0, 0.9, 0.4); filter: drop-shadow(0 4px 3px rgba(0, 30, 40, 0.28)); }
.pin.up .pin__art { transform: scale(1); animation: pin-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both, pin-bob 1.9s ease-in-out 0.5s infinite; }
/* A character pops up beside its country's landmark, a beat after it, or stands alone on a country with no landmark. */
.pin__cast { position: absolute; bottom: 3%; right: 2%; height: 96%; width: auto; transform-origin: 50% 100%; transform: scale(0); transition: transform 0.2s cubic-bezier(0.5, 0, 0.9, 0.4); filter: drop-shadow(0 4px 3px rgba(0, 30, 40, 0.28)); }
.pin--pair .pin__art { right: auto; width: 69%; }
.pin--cast .pin__cast { right: auto; left: 50%; translate: -50% 0; }
.pin.up .pin__cast { transform: scale(1); animation: pin-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.14s both, pin-bob 2.2s ease-in-out 0.7s infinite; }
@keyframes pin-pop { 0% { transform: scale(0.2, 0); } 45% { transform: scale(0.86, 1.22); } 68% { transform: scale(1.14, 0.88); } 84% { transform: scale(0.97, 1.04); } 100% { transform: scale(1); } }
@keyframes pin-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5%) scale(1.02, 0.98); } }
/* The optional extras' pictures hop in front of their note's tape, not under it. */
.extra__art { z-index: 5; }
/* A speech bubble: card stock in a drawn ink frame, the line in the hand face and its English under it. */
.bubble { position: relative; z-index: 3; align-self: flex-start; max-width: none; margin: 0 0 18px; padding: 12px 18px 11px; background: var(--card) url("assets/art/card-stock-light.webp") center / cover; color: var(--on-card); border: 2.5px solid var(--on-card); box-shadow: 3px 4px 0 rgba(var(--sh-rgb), 0.18); transform: rotate(-1.5deg); }
.talk--br .bubble { transform: rotate(1.5deg); }
.bubble::after { content: ""; position: absolute; left: 34%; bottom: -14px; width: 20px; height: 20px; background: inherit; border-right: 2.5px solid var(--on-card); border-bottom: 2.5px solid var(--on-card); transform: skewX(-14deg) rotate(45deg); }
.talk--br .bubble { align-self: flex-end; }
.talk--br .bubble::after { left: auto; right: 38%; }
.bubble__say { display: block; font-family: var(--hand); font-weight: 700; font-size: 22px; line-height: 1.15; white-space: nowrap; }
.bubble__gloss { display: block; margin-top: 4px; font-family: var(--press); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-card-dim); }
/* A speech bubble is drawn, not an object: in dark it becomes a chalk outline on the slate, its words in chalk. */
:root[data-theme="dark"] .bubble { background: var(--balloon); color: var(--ink); border-color: var(--ink); box-shadow: none; }
:root[data-theme="dark"] .bubble::after { background: var(--balloon); border-color: var(--ink); }
:root[data-theme="dark"] .bubble__gloss { color: color-mix(in srgb, var(--ink) 72%, transparent); }

/* The sample day: the app's Home, on its day page, the first task done and the second the one to do now. */
.daypage { --tilt: 2deg; position: relative; width: min(100%, 470px); margin: 0; padding: 46px 28px 30px calc(12% + 22px); color: var(--on-card); background: url("assets/art/paper-day-page.1536px.webp") center top / cover; box-shadow: var(--sh-card); transform: rotate(var(--tilt)); }
.daypage > .tape { top: 0; left: 40%; width: 110px; }
.daypage .daypage__h { margin: 0 0 16px; font-family: var(--hand); font-weight: 700; font-size: 32px; line-height: 1; }
.daypage__list, .daypage__opt { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.daypage__row, .daypage__opt li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.daypage__opt li { grid-template-columns: minmax(0, 1fr) auto; padding-left: 42px; }
.daypage__t { display: grid; justify-items: start; font-family: var(--hand); font-weight: 700; font-size: 20px; line-height: 1.15; }
.daypage__w { font-family: var(--hand); font-weight: 700; font-size: 16px; color: var(--on-card-dim); white-space: nowrap; }
.daypage__row--now .daypage__name { background: url("assets/art/highlighter.webp") 0 40% / 100% 150% no-repeat; padding: 1px 6px 0; margin: 0 -6px; }
.daypage__now { margin-top: 3px; font-family: var(--press); font-weight: 800; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.daypage__row--next .daypage__t { color: var(--on-card-dim); }
.daypage .daypage__sum { margin: 14px 0 0; padding-top: 10px; border-top: 2px solid var(--on-card); font-family: var(--hand); font-weight: 700; font-size: 19px; text-align: right; }
.daypage__opt { margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed color-mix(in srgb, var(--on-card) 45%, transparent); }
.daypage__opt .daypage__t { font-size: 17px; color: var(--on-card-dim); }
.daypage__opt .daypage__w { font-size: 14px; }
/* ---------- blocks: each section opens on a pencil line across the sheet ---------- */
.block { position: relative; margin-top: 64px; padding-top: 60px; }
.block::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: color-mix(in srgb, var(--ink) 24%, transparent); }

/* ---------- the method opens on the plan: no guesswork, the day decided for you ---------- */
/* The words keep to the top of their column so they can be set on the ruled lines; the day page centres beside them. */
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
.plan__art { align-self: center; }
.plan__body { margin-top: 22px; }
/* The day it plans: the sample day page with Alexia standing beside it. */
.plan__art { display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.plan__art .daypage { flex: 0 1 430px; }
.plan__stand { margin-left: -26px; z-index: 3; }
.plan__stand img { height: 380px; }
.plan__t { margin: 0; max-width: 13ch; }
.plan__body { margin: 0; padding: 6px 0 6px 30px; border-left: 3px solid color-mix(in srgb, var(--ink) 70%, transparent); font-family: var(--hand); font-size: 22px; line-height: 1.5; }
.pillars__head { margin-top: 64px; }

/* ---------- the method: the four pillars as one row of sticky notes ---------- */
.pillars__row { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 26px; align-items: stretch; }
.pillar { --tilt: -1deg; position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 30px 30px 56px 22px; color: var(--on-card); transform: rotate(var(--tilt)); }
.pillar:nth-child(2) { --tilt: 0.8deg; }
.pillar:nth-child(3) { --tilt: -0.6deg; }
.pillar:nth-child(4) { --tilt: 1.1deg; }
.pillar__paper { position: absolute; z-index: -1; inset: 0; border-style: solid; border-width: 26px 44px 56px 6px; border-image-slice: 110 170 220 20 fill; border-image-width: 26px 44px 56px 6px; border-image-repeat: stretch; filter: drop-shadow(0 3px 5px rgba(var(--sh-rgb), 0.12)); }
.pillar--speaking .pillar__paper { border-image-source: url("assets/art/sticky-yellow.webp"); }
.pillar--reading .pillar__paper { border-image-source: url("assets/art/sticky-pink.webp"); }
.pillar--texting .pillar__paper { border-image-source: url("assets/art/sticky-blue.webp"); }
.pillar--listening .pillar__paper { border-image-source: url("assets/art/sticky-green.webp"); }
.pillar > .tape { top: 0; left: 30%; width: 110px; transform: translateY(-50%) rotate(4deg); }
.pillar__art { position: relative; z-index: 3; height: 240px; display: flex; align-items: flex-end; justify-content: center; }
.pillar__art img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; transform-origin: 50% 100%; filter: drop-shadow(0 6px 6px rgba(var(--sh-rgb), 0.25)); }
.pillar--speaking .pillar__art img { height: 100%; }
.pillar--reading .pillar__art img { max-height: 72%; margin-bottom: 18px; }
.pillar__top { margin: 16px 0 0; display: flex; align-items: center; justify-content: space-between; }
.pillar__n { font-size: 15px; color: var(--on-card-dim); }
.pillar__min { font-family: var(--hand); font-size: 18px; font-weight: 700; color: var(--on-card-dim); }
.pillar__t { margin: 8px 0 0; font-family: var(--hand); font-weight: 700; font-size: 29px; line-height: 1.1; }
.pillar__lead { margin: 10px 0 0; font-family: var(--hand); font-size: 18px; line-height: 1.4; }

/* What extends the four, right under them: the recall rating on a torn note with Inés, the two optional extras
   stacked beside it on the picked iPad Home's cards. */
.extend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 54px; }
.extend__pace { --tilt: -0.6deg; display: flex; flex-direction: column; justify-content: center; min-height: 340px; padding: 50px calc(38% + 36px) 34px 34px; transform: rotate(var(--tilt)); }
.extend__t { margin: 0; font-family: var(--hand); font-weight: 700; font-size: 32px; line-height: 1.1; }
.extend__pace p { font-size: 19px; line-height: 1.45; margin-top: 12px; }
.note__cast { position: absolute; z-index: 3; right: 24px; bottom: 14px; height: calc(100% + 30px); width: auto; max-width: 38%; object-fit: contain; object-position: bottom right; transform-origin: 50% 100%; rotate: calc(var(--tilt, 0deg) * -1); filter: drop-shadow(0 6px 6px rgba(var(--sh-rgb), 0.25)); }
.extra { min-height: 0; height: 100%; padding-top: 22px; padding-bottom: 22px; }

/* ---------- the reasons: your level on the left, a busy day and starting higher on notes on the right ---------- */
.reasons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
.reasons__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title cast" "list cast"; grid-template-rows: auto 1fr; column-gap: 16px; align-items: start; }
.reasons__title { grid-area: title; }
.reasons__stand { grid-area: cast; align-self: start; }
.reasons__main .ruled { grid-area: list; margin-top: 8px; }
.reasons__stand img { height: 520px; }
.ruled { list-style: none; margin: 24px 0 0; padding: 4px 0 4px 28px; display: grid; gap: 6px; }
.ruled .h3 { font-size: 25px; }
.ruled p { max-width: 30em; margin: 0; font-family: var(--hand); font-size: 18.5px; line-height: 1.45; }
.reasons__side { display: grid; gap: 40px; padding-top: 30px; }
.side-note { --tilt: 0.6deg; min-height: 250px; padding: 44px calc(34% + 36px) 26px 30px; transform: rotate(var(--tilt)); }
.side-note:nth-child(2) { --tilt: -0.6deg; }
.side-note__t { margin: 0; font-family: var(--hand); font-weight: 700; font-size: 26px; line-height: 1.12; }
.side-note p { font-size: 17.5px; line-height: 1.42; margin-top: 8px; }
.side-note .note__cast { max-width: 34%; height: calc(100% + 26px); }

/* ---------- culture and interests side by side: one square. Both columns share three rows (heading, prints, the "more" line),
   so the headings start level and the prints end level; Catalonia and Italy grow to meet Christianity and Islam. ---------- */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 48px; }
.pair__half { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 24px; }
.pair__art { display: contents; }
.pair__words { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; grid-template-areas: "title cast" "body cast"; column-gap: 14px; align-items: start; }
.pair__words .h2 { grid-area: title; font-size: 48px; }
.pair__words .body { grid-area: body; }
.pair__stand { grid-area: cast; align-self: end; }
.pair__stand img { height: 440px; }
.pair .more-line { margin: 0; }
.pair--solo .pair__half { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; column-gap: 48px; align-items: center; }
.world__head .body { margin: 10px 0 0; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 22px 18px; }
.facts .fact:first-child { grid-column: 1 / -1; }
.facts .fact:first-child p { font-size: 18.5px; }
.fact { --tilt: -1.2deg; display: flex; flex-direction: column; transform: rotate(var(--tilt)); }
.fact:nth-child(2) { --tilt: 1deg; }
.fact:nth-child(3) { --tilt: -0.6deg; }
.fact img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.facts .fact:first-child img { aspect-ratio: 16 / 8; }
/* The two smaller prints take whatever height the row gives them, so the print fills the row beside the words. */
.facts .fact:not(:first-child) img { flex: 1 1 auto; min-height: 150px; aspect-ratio: auto; }

/* ---------- pick your language, then the close ---------- */
/* Every row starts at the left edge, so a short last row lines up under the full ones. */
.wall { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 26px 18px; }
/* The heading takes the first two cells of the course grid, so every row of postcards is full at every width:
   8 across with the heading in row one (6 + 8 + 8), 6 across on a sideways tablet, 4 in portrait and 2 on a phone. */
.world { --cols: 8; }
.world__grid, .english { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 26px 18px; align-items: stretch; }
/* Every postcard in a row stands the same height, however its name wraps. */
.world .pc { display: flex; }
.world .pc > a { flex: 1 1 auto; }
.world__head { grid-column: span 2; }
.world__head .h2 { font-size: 44px; }
.wall--learn { display: contents; }
/* A size under the English cards' names, so the longest course name, Metropolitan French, fits its postcard at every width. */
.wall--learn .pc__l { font-size: 15px; }
/* The English courses share the course grid's columns, so every postcard on the page is one size. */
.english { margin-top: 44px; }
.english__words { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; align-items: flex-start; }
.english__title { margin: 0; font-size: 30px; }
.english__pair { display: flex; align-items: flex-end; margin-top: auto; }
.english__pair .stand img { height: 300px; }
.english__pair .stand + .stand { margin-left: -30px; }
.wall--english { display: contents; }
.close { display: flex; flex-direction: column; align-items: center; margin-top: 64px; }
.close__top { display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; margin-bottom: 30px; }
.close__cast { display: block; width: min(56%, 720px); height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 10px 8px rgba(var(--sh-rgb), 0.25)); }
/* The big mark opens the close, centred over the signature card, right after the English postcards. */
.sticker--close { flex: none; width: 380px; margin: 0; transform: rotate(-3deg); }
/* The footer keeps a small mark, since the big one sits just above it. */
.sticker--foot { width: 112px; }
.sig--close { --tilt: 0.6deg; padding: 32px 44px 22px; text-align: center; }
.sig--close .close__t { margin: 0; font-family: var(--hand); font-weight: 700; font-size: 38px; line-height: 1.3; text-wrap: balance; }
.sig.sig--close .sig__for { font-size: 22px; margin-top: 8px; }
.close .get { margin-top: 30px; }

/* The footer is a plain, torn-edged sheet of card laid across the whole width, over the loose-leaf, so its links read
   without ruled lines behind them and no loose-leaf shows at either end. Its words keep the page's column. In dark the
   chalkboard carries it, as before. The copyright and the language names take the full ink. */
.foot { position: relative; isolation: isolate; margin-top: calc(72px * var(--z)); padding: calc(96px * var(--z)) 0 calc(40px * var(--z)); }
.foot__in { margin-left: auto; margin-right: auto; }
.foot::before { content: ""; position: absolute; z-index: -1; inset: 0; border-image: url("assets/art/foot-sheet.webp") 110 0 0 0 fill / 70px 0 0 0 stretch; filter: drop-shadow(0 -1px 3px rgba(var(--sh-rgb), 0.16)); }
:root[data-theme="dark"] .foot::before { display: none; }
.foot__line, .foot__lang-row li { color: var(--ink); }

/* Counts of minutes are numbers that count, so they take the mono face whole, as the picked iPad Home sets them. */
.daypage__w, .pillar__min, .daypage .daypage__sum { font-family: var(--mono); font-weight: 400; letter-spacing: -0.01em; }
.daypage__w .num, .pillar__min .num, .daypage__sum .num { font-size: 1em; }
.daypage__w { font-size: 14px; }
.pillar__min { font-size: 15px; }
.daypage .daypage__sum { font-size: 16px; }
.daypage__opt .daypage__w { font-family: var(--press); font-weight: 800; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
/* Small labels take one face: the spaced print capitals. */
.foot__h { font-family: var(--press); font-weight: 800; font-size: 11px; letter-spacing: 0.2em; }
/* Footer links and the language names are navigation, so they take the bold hand face. */
.foot a:not(.slab), .foot__lang-row li { font-family: var(--hand); font-weight: 700; font-size: 16px; }


/* ================= up to 1299 px ================= */
/* canvases l, p, m (was (max-width: 1299px)) */
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .hero__title { font-size: 70px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .hero__sig { font-size: 26px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .sticker--hero { width: 360px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .reasons__title { font-size: 44px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .reasons__stand img { height: 440px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .pillar { padding: 28px 26px 52px 18px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .pillar__art { height: 200px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .pillar__t { font-size: 25px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .pillar__lead { font-size: 17px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .world { --cols: 6; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .english__words { grid-column: span 2; grid-row: span 1; flex-direction: row; align-items: flex-end; gap: 8px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .english__pair { margin-top: 0; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .english__pair .stand img { height: 190px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .pair__words .h2 { font-size: 42px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .pair__stand img { height: 380px; }


/* On a sideways tablet the headline and signature drop a size so the words and the block fit the first screen. */
/* canvases l (was (min-width: 900px) and (max-width: 1279px)) */
  :where(:root[data-canvas="l"]) .hero__title { font-size: 60px; }
  :where(:root[data-canvas="l"]) .sticker--hero { width: 330px; margin-bottom: 10px; }
  :where(:root[data-canvas="l"]) .hero__sig { font-size: 26px; }

/* ================= under 1100 px: the hero, the reasons and the pair stack; the pillars two by two ================= */
/* canvases p, m (was (max-width: 1099px)) */
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero { column-gap: 28px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero__title { font-size: 54px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .sticker--hero { width: 300px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .get { --cell: 196px; --cell-h: 58px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .get .marker { font-size: 19px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .get .store { gap: 10px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .get .store__glyph--apple { width: 26px; height: 32px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .get .store__glyph--play { width: 28px; height: 30px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .get .store__glyph--microsoft { width: 25px; height: 25px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .get .store__k { font-size: 8.5px; letter-spacing: 0.15em; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .get .store__n { font-size: 20px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .plan__stand img { height: 320px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .reasons__stand img { height: 340px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .pillars__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .pillar__art { height: 230px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .extend { grid-template-columns: minmax(0, 1fr); }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .plan { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .plan__t { max-width: none; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .extend__pace { grid-row: auto; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .reasons { grid-template-columns: minmax(0, 1fr); row-gap: 50px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .pair__stand img { height: 320px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .reasons__side { padding-top: 0; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .world { --cols: 4; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .wall--english .pc__l { font-size: 14px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .foot__h { letter-spacing: 0.16em; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .block { margin-top: 44px; padding-top: 44px; }


/* ================= under 1000 px: the hero stacks with the globe under the words, and culture and interests stack ================= */
/* canvases p, m (was (max-width: 999px)) */
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "words" "scene"; row-gap: 30px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero__globe { justify-self: center; width: min(100%, 600px); margin-right: 0; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 50px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .pair__half { grid-row: auto; grid-template-rows: none; row-gap: 22px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .pair__stand img { height: 300px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .pair--solo .pair__half { grid-template-columns: minmax(0, 1fr); }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .facts .fact:not(:first-child) img { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .close__top { flex-direction: column; gap: 18px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .close__cast { width: min(100%, 600px); }


/* ================= a phone ================= */
/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) body { background-image: url("assets/art/paper-real-cap.webp"), url("assets/art/paper-real-tile.webp"); }
  :where(:root[data-canvas="m"]) .ground { background-image: url("assets/art/chalk-real.webp"); }
  :where(:root[data-canvas="m"]) { --gutter: 26px; }
  :where(:root[data-canvas="m"]) .top { min-height: 60px; padding-top: 8px; }
  :where(:root[data-canvas="m"]) .toggles { gap: 12px; }
  :where(:root[data-canvas="m"]) .toggle:first-child { gap: 18px; }
  :where(:root[data-canvas="m"]) .toggle { font-size: 10.5px; gap: 7px; }
  :where(:root[data-canvas="m"]) .toggle__box { width: 34px; height: 19px; }
  :where(:root[data-canvas="m"]) .login { padding: 0 14px; min-height: 48px; }
  :where(:root[data-canvas="m"]) .login span { font-size: 12px; }
  :where(:root[data-canvas="m"]) .h2, :where(:root[data-canvas="m"]) .pair__words .h2 { font-size: 40px; }
  :where(:root[data-canvas="m"]) .h3 { font-size: 22px; }
  :where(:root[data-canvas="m"]) .lead, :where(:root[data-canvas="m"]) .body { font-size: 17px; }
  :where(:root[data-canvas="m"]) .sticker--hero { width: 260px; margin: 0 0 10px -10px; }
  :where(:root[data-canvas="m"]) .hero__title { font-size: 44px; }
  :where(:root[data-canvas="m"]) .hero__sig { font-size: 23px; margin-top: 18px; }
  :where(:root[data-canvas="m"]) .get--hero { margin-top: 22px; }
  :where(:root[data-canvas="m"]) .top { flex-wrap: wrap; column-gap: 8px; }
  :where(:root[data-canvas="m"]) .toggles { flex-direction: column; align-items: flex-start; gap: 0; }
  :where(:root[data-canvas="m"]) .toggle:first-child { gap: 7px; }
  :where(:root[data-canvas="m"]) .feedback { flex: 1 1 0; min-width: min-content; padding: 0 10px; margin-right: 8px; min-height: 44px; white-space: nowrap; }
  :where(:root[data-canvas="m"]) .feedback span { font-size: 11.5px; letter-spacing: 0.02em; }
  :where(:root[data-canvas="m"]) .login { padding: 0 12px; min-height: 44px; }
  :where(:root[data-canvas="m"]) .get { --cell: 142px; --cell-h: 50px; gap: 10px; }
  :where(:root[data-canvas="m"]) .get .marker { font-size: 15.5px; padding: 0 8px; }
  :where(:root[data-canvas="m"]) .get .store { gap: 7px; padding: 0 8px; }
  :where(:root[data-canvas="m"]) .get .store__glyph--apple { width: 18px; height: 22px; }
  :where(:root[data-canvas="m"]) .get .store__glyph--play { width: 19px; height: 21px; }
  :where(:root[data-canvas="m"]) .get .store__glyph--microsoft { width: 17px; height: 17px; }
  :where(:root[data-canvas="m"]) .get .store__k { display: none; }
  :where(:root[data-canvas="m"]) .get .store__n { margin-top: 0; font-size: 16px; }
  :where(:root[data-canvas="m"]) .marker__zing { display: none; }
  :where(:root[data-canvas="m"]) .daypage { padding: 42px 18px 24px calc(12% + 14px); }
  :where(:root[data-canvas="m"]) .daypage__t { font-size: 18px; }
  :where(:root[data-canvas="m"]) .plan__art { justify-content: flex-start; }
  :where(:root[data-canvas="m"]) .block { margin-top: 48px; padding-top: 48px; }
  :where(:root[data-canvas="m"]) .pillars__row { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 34px; }
  :where(:root[data-canvas="m"]) .pillar__art { height: 170px; }
  :where(:root[data-canvas="m"]) .pillar__t { font-size: 27px; }
  :where(:root[data-canvas="m"]) .pillar__lead { font-size: 17px; }
  :where(:root[data-canvas="m"]) .extend__pace, :where(:root[data-canvas="m"]) .side-note { min-height: 0; margin-top: 30px; padding: 40px 20px 24px; }
  :where(:root[data-canvas="m"]) .extend { margin-top: 20px; gap: 26px; }
  :where(:root[data-canvas="m"]) .note__cast, :where(:root[data-canvas="m"]) .side-note .note__cast { top: -30px; bottom: auto; right: 8px; height: 170px; max-width: none; }
  :where(:root[data-canvas="m"]) .extend__t, :where(:root[data-canvas="m"]) .side-note__t { font-size: 24px; min-height: 104px; padding-right: 92px; }
  :where(:root[data-canvas="m"]) .plan__body { padding-left: 18px; font-size: 18px; }
  :where(:root[data-canvas="m"]) .pillars__head { margin-top: 44px; }
  :where(:root[data-canvas="m"]) .extend__pace p, :where(:root[data-canvas="m"]) .side-note p { font-size: 17px; }
  :where(:root[data-canvas="m"]) .extra { flex-direction: column; align-items: stretch; padding: 12px 18px 18px; min-height: 0; height: auto; }
  :where(:root[data-canvas="m"]) .extra__art { position: relative; left: auto; bottom: auto; width: 180px; margin: -26px auto 6px; }
  :where(:root[data-canvas="m"]) .extra__t { font-size: 22px; }
  :where(:root[data-canvas="m"]) .extra__s { font-size: 16.5px; }
  :where(:root[data-canvas="m"]) .reasons__stand img { height: 220px; }
  :where(:root[data-canvas="m"]) .reasons__main { grid-template-areas: "title cast" "list list"; }
  :where(:root[data-canvas="m"]) .ruled { padding-left: 18px; }
  :where(:root[data-canvas="m"]) .ruled .h3 { font-size: 22px; }
  :where(:root[data-canvas="m"]) .ruled p { font-size: 17px; }
  :where(:root[data-canvas="m"]) .reasons__side { gap: 26px; }
  :where(:root[data-canvas="m"]) .pair__words { display: flow-root; }
  :where(:root[data-canvas="m"]) .pair__stand { float: right; margin: 0 -4px 6px 12px; }
  :where(:root[data-canvas="m"]) .pair__stand img { height: 200px; }
  :where(:root[data-canvas="m"]) .facts { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  :where(:root[data-canvas="m"]) .facts .fact:not(:first-child) { display: grid; grid-template-columns: 42% minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 0 6px 0 0; }
  :where(:root[data-canvas="m"]) .facts .fact:not(:first-child) img { grid-row: 1 / span 2; height: 100%; min-height: 120px; aspect-ratio: auto; }
  :where(:root[data-canvas="m"]) .facts .fact:not(:first-child) p { padding: 0; }
  :where(:root[data-canvas="m"]) .fact p, :where(:root[data-canvas="m"]) .facts .fact:first-child p { font-size: 17px; }
  :where(:root[data-canvas="m"]) .world { --cols: 2; }
  :where(:root[data-canvas="m"]) .world__grid, :where(:root[data-canvas="m"]) .english { gap: 22px 14px; }
  :where(:root[data-canvas="m"]) .world__head { grid-column: 1 / -1; }
  :where(:root[data-canvas="m"]) .world__head .h2 { font-size: 40px; }
  :where(:root[data-canvas="m"]) .pc > a::before { width: 56px; left: calc(var(--tape-x, 50%) - 28px); height: 6px; top: -3px; }
  :where(:root[data-canvas="m"]) .pc__c { font-size: 11px; letter-spacing: 0.06em; margin-top: 6px; }
  :where(:root[data-canvas="m"]) .pc__l { font-size: 16px; }
  :where(:root[data-canvas="m"]) .english__words { grid-column: 1 / -1; justify-content: center; align-items: center; gap: 16px; }
  :where(:root[data-canvas="m"]) .english__pair .stand img { height: 200px; }
  :where(:root[data-canvas="m"]) .close { align-items: stretch; }
  :where(:root[data-canvas="m"]) .sig--close { padding: 30px 18px 18px; text-align: left; }
  :where(:root[data-canvas="m"]) .sig--close .close__t { font-size: 24px; }
  :where(:root[data-canvas="m"]) .sig.sig--close .sig__for { font-size: 18px; }
  :where(:root[data-canvas="m"]) .more-line { font-size: 18px; }
  :where(:root[data-canvas="m"]) .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  :where(:root[data-canvas="m"]) .foot__col--social { grid-column: 1 / -1; }
  :where(:root[data-canvas="m"]) .foot a:not(.slab) { font-size: 16px; }
  :where(:root[data-canvas="m"]) .foot__lang-row { gap: 8px 18px; }
  :where(:root[data-canvas="m"]) .foot__lang-row li { font-size: 16px; }
  :where(:root[data-canvas="m"]) .foot__line { font-size: 15px; }
  :where(:root[data-canvas="m"]) .foot__end { flex-direction: column; align-items: flex-start; gap: 14px; }
  :where(:root[data-canvas="m"]) .sticker--close { width: 250px; align-self: center; }
  :where(:root[data-canvas="m"]) .sticker--foot { width: 100px; }


/* The narrowest phones: the two top buttons tighten so the top bar stays one row. */




/* ================= iteration 10 ================= */
/* Pick your language heads its postcards, centred right over them; a short last row sits centred under the full ones
   (22 cards: 8, 8 and 6 on desktop; 6, 6, 6 and 4 on sideways screens; rows of 4 and a last 2 on upright tablets;
   rows of 3 and a last 1 on phones, which set three postcards a row so the list stays short). */
.world__head { grid-column: 1 / -1; justify-self: center; text-align: center; margin-bottom: -6px; }
.wall--learn .pc:nth-child(17) { grid-column-start: 2; }
/* canvases l, p, m (was (max-width: 1299px)) */
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .wall--learn .pc:nth-child(17) { grid-column-start: auto; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .wall--learn .pc:nth-child(19) { grid-column-start: 2; }

/* canvases p, m (was (max-width: 999px)) */
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .wall--learn .pc:nth-child(19) { grid-column-start: auto; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .wall--learn .pc:nth-child(21) { grid-column-start: 2; }

/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .wall--learn .pc:nth-child(21) { grid-column-start: auto; }
  :where(:root[data-canvas="m"]) .wall--learn .pc:nth-child(22) { grid-column-start: 2; }
  :where(:root[data-canvas="m"]) .world { --cols: 3; }
  :where(:root[data-canvas="m"]) .world__grid, :where(:root[data-canvas="m"]) .english { gap: 16px 10px; }
  :where(:root[data-canvas="m"]) .english__words { grid-column: span 2; flex-direction: row; justify-content: flex-end; align-items: stretch; gap: 6px; text-align: right; }
  :where(:root[data-canvas="m"]) .english__words .english__title { align-self: center; font-size: 20px; }
  :where(:root[data-canvas="m"]) .english__pair { flex: 1 1 0; width: auto; height: auto; align-self: stretch; }
  :where(:root[data-canvas="m"]) .pc__l { font-size: 13px; }


/* On phones each pillar note sets its character beside its words, so the character stands taller and the note is shorter. */
/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .pillar { display: grid; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "art top" "art title" "art lead"; column-gap: 14px; align-items: start; padding: 24px 22px 46px 14px; }
  :where(:root[data-canvas="m"]) .pillar__art { grid-area: art; height: 220px; align-self: end; }
  :where(:root[data-canvas="m"]) .pillar__top { grid-area: top; margin-top: 4px; }
  :where(:root[data-canvas="m"]) .pillar__t { grid-area: title; font-size: 24px; }
  :where(:root[data-canvas="m"]) .pillar__lead { grid-area: lead; font-size: 15.5px; }


/* Small labels never render under 12 px after the page is scaled (the store badges' small line, like a real store badge's, 9.5 px). */
:root .toggle__word, :root .feedback span, :root .login span { font-size: max(12px, calc(12px / var(--z, 1))); }
:root .daypage__now, :root .daypage__opt .daypage__w, :root .extra__kind, :root .pc__c, :root .foot__h { font-size: max(11px, calc(12px / var(--z, 1))); }
:root .store__k { font-size: max(8.5px, calc(9.5px / var(--z, 1))); letter-spacing: 0.08em; }
/* canvases l, p, m (was (max-width: 1299px)) */
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .store__k { letter-spacing: 0.03em; }

/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .pc__c { letter-spacing: 0.06em; }


/* One highlighter geometry in both themes. */
.hero__sig .swipe { padding-top: 0.2em; padding-bottom: 0.12em; background-size: 100% 175%; background-position: 0 36%; }

/* The store badges keep both lines at every size; the name shrinks to fit a small cell instead. */
/* canvases p, m (was (max-width: 999px)) */
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .get .store__n { font-size: 18px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero .get .store { gap: 6px; padding-left: 8px; padding-right: 8px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero .get .store__glyph--apple { width: 19px; height: 24px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero .get .store__glyph--play { width: 21px; height: 23px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero .get .store__glyph--microsoft { width: 19px; height: 19px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero .get .store__n { font-size: 14.5px; margin-top: 2px; }
  :where(:root[data-canvas="p"]) .hero .get .store__k { font-size: max(8px, calc(8.4px / var(--z, 1))); }

/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .get { --cell: 162px; --cell-h: 54px; gap: 10px; }
  :where(:root[data-canvas="m"]) .hero .get { --cell: 162px; --cell-h: 54px; }
  :where(:root[data-canvas="m"]) .get .store { gap: 6px; padding-left: 8px; padding-right: 6px; }
  :where(:root[data-canvas="m"]) .get .store__glyph--apple { width: 16px; height: 20px; }
  :where(:root[data-canvas="m"]) .get .store__glyph--play { width: 17px; height: 19px; }
  :where(:root[data-canvas="m"]) .get .store__glyph--microsoft { width: 16px; height: 16px; }
  :where(:root[data-canvas="m"]) .get .store__k { display: block; }
  :where(:root[data-canvas="m"]) .get .store__n { font-size: 15.5px; margin-top: 2px; }



/* Speech bubbles never render under 12 px; page.js stacks them so none touches another. */
:root .crowd__say { font-size: max(clamp(12px, 2.4cqw, 18px), calc(12px / var(--z, 1))); }

/* Paper keeps its look: the optional cards are card stock with a hard shadow, and a done task is struck through in pen. */
.extra { background: var(--card) url("assets/art/card-stock-light.webp") center / cover; box-shadow: 3px 4px 0 rgba(var(--sh-rgb), 0.16); }
.daypage__row--done .daypage__name { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--ink); }
/* The section dividers are drawn in pencil. */
.block::before, .foot__langs::before, .foot__end::before { background: var(--pencil); opacity: 0.55; }
/* The close's card needs no tape: the celebrating cast stand on it. */
.close__stack .sig--close > .tape { display: none; }

/* Tighter space before Pick your language and before the footer. */
.world.block { margin-top: 40px; padding-top: 44px; }
.foot { margin-top: calc(24px * var(--z)); }
/* The footer's words keep the page's margins; the sheet runs the full width. */
.foot__in { padding-left: var(--gutter); padding-right: var(--gutter); }
.foot a:not(.slab) { min-width: 44px; }

/* Headings on notes wrap evenly, so no last word stands alone. */
.note h3, .side-note__t, .extend__t, .extra__t, .pillar__t { text-wrap: balance; }
/* canvases l, p, m (was (max-width: 1299px)) */
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .plan__t { font-size: 48px; }


/* ================= iteration 8 ================= */
/* Screen-reader text: the English of each line the cast say. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The mark stands clear of the headline; the signature sits right under the headline, the four ways in right after it. */
.sticker--hero { margin-bottom: 26px; }
.hero__sig { margin-top: 4px; }

/* The globe with eight of the cast sitting under it, exactly as wide as the sphere, over its bottom sixth, their feet
   level with the bottom of the four ways in. page.js sizes the pair from the height of the words column (--scene-w). Each
   says something short in their own language. */
.hero__scene { grid-area: scene; justify-self: end; align-self: end; display: flex; flex-direction: column; width: min(var(--scene-w, 660px), calc(100% + 36px)); margin-right: -36px; }
.hero__scene .hero__globe { width: 100%; margin: 0; align-self: auto; justify-self: auto; }
.hero__crowd { position: relative; z-index: 2; container-type: inline-size; width: 88.4%; align-self: center; margin: -16% 0 0; }
/* The speech bubbles and the group always sit above anything that pops out of the globe. */
.hero__scene .hero__globe { position: relative; z-index: 1; }
.crowd__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 8px rgba(var(--sh-rgb), 0.22)); }
/* The bubbles scale with the group, so they keep the same spacing over its heads at any width. */
.crowd__say { position: absolute; left: var(--x); bottom: calc(100% - var(--y) + var(--lift, 14px)); margin: 0; padding: 0.35em 0.65em 0.3em; font-size: clamp(11px, 2cqw, 17px); transform: translateX(calc(-50% + var(--slide, 0px))) rotate(var(--tilt, -1.5deg)); background: var(--card) url("assets/art/card-stock-light.webp") center / cover; color: var(--on-card); border: 2px solid var(--on-card); box-shadow: 2px 3px 0 rgba(var(--sh-rgb), 0.18); white-space: nowrap; }
.crowd__say::after { content: ""; position: absolute; left: calc(var(--tail, 50%) - 7px); bottom: -9px; width: 12px; height: 12px; background: inherit; border-right: 2px solid var(--on-card); border-bottom: 2px solid var(--on-card); transform: skewX(-12deg) rotate(45deg); }
.crowd__said { display: block; font-family: var(--hand); font-weight: 700; font-size: 1em; line-height: 1.15; }
:root[data-theme="dark"] .crowd__say { background: var(--balloon); color: var(--ink); border-color: var(--ink); box-shadow: none; }
:root[data-theme="dark"] .crowd__say::after { background: var(--balloon); border-color: var(--ink); }

/* The cast on the globe move as their poses do: wavers rock from the feet, dancers bounce and sway, the rest hop. */
.pin.up.pin--wave .pin__cast { animation: pin-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.14s both, cast-wave 1.4s ease-in-out 0.7s infinite; }
.pin.up.pin--dance .pin__cast { animation: pin-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.14s both, cast-dance 0.9s linear 0.7s infinite; }
.pin.up.pin--hop .pin__cast { animation: pin-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.14s both, cast-hop 1.1s ease-in-out 0.7s infinite; }
@keyframes cast-wave { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes cast-dance { 0%, 100% { transform: translateY(0) rotate(-6deg); } 25% { transform: translateY(-9%) rotate(0deg) scale(0.98, 1.03); } 50% { transform: translateY(0) rotate(6deg) scale(1.03, 0.97); } 75% { transform: translateY(-9%) rotate(0deg) scale(0.98, 1.03); } }
@keyframes cast-hop { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(0) scale(1.06, 0.92); } 55% { transform: translateY(-15%) scale(0.95, 1.06); } 80% { transform: translateY(0) scale(1.04, 0.96); } }

/* Learning English? sits right over James and Jessica, and the pair stand as tall as the space beside the postcards,
   right against them. */
.english__words { align-items: flex-end; text-align: right; }
.english__pair { position: relative; flex: 1 1 0; min-height: 0; align-self: flex-end; aspect-ratio: 0.8; margin-top: 6px; }
.english__cast { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: flex-end; }
.english__cast .stand { height: 100%; }
.english__cast .stand img { height: 100%; width: auto; }
.english__cast .stand + .stand { margin-left: -4%; }

/* Alexia points at the day page from beside it, so her hand stays clear of its minutes. On landscape tablets the words
   take a narrower column so the day page and Alexia stay beside them. */
.plan__stand { margin-left: 0; }
/* canvases l, p, m (was (max-width: 1299px)) */
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .plan { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 32px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .plan__art .daypage { flex: 0 1 400px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .plan__stand { margin-left: 6px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .plan__stand img { height: 300px; }

/* Upright tablets keep the day page and Alexia beside the words; only phones stack them. */
/* canvases p, m (was (max-width: 999px)) */
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .plan { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); column-gap: 16px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .plan__t { max-width: none; font-size: 34px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .plan__body { font-size: 16px; padding-left: 16px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .plan__art .daypage { flex: 0 0 330px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .plan__stand { margin-left: -18px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .plan__stand img { height: 230px; }

/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .plan { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  :where(:root[data-canvas="m"]) .plan__t { font-size: 40px; }
  :where(:root[data-canvas="m"]) .plan__body { font-size: 18px; }
  :where(:root[data-canvas="m"]) .plan__art .daypage { flex: 1 1 0; min-width: 0; }
  :where(:root[data-canvas="m"]) .plan__stand { display: block; flex: none; margin-left: -14px; }
  :where(:root[data-canvas="m"]) .plan__stand img { height: 200px; }
  :where(:root[data-canvas="m"]) .daypage__opt li { padding-left: 28px; column-gap: 8px; }
  :where(:root[data-canvas="m"]) .daypage__opt .daypage__t { font-size: 15px; }


/* The close fits one laptop screen: the mark, then the cast celebrating behind the signature card at its full width,
   shown from the head to about the knee with the card over the cut, then the four ways in. */
.sticker--close { width: 280px; margin-bottom: 6px; }
.close__stack { display: flex; flex-direction: column; align-items: stretch; }
.close__stack .close__cast { width: 100%; contain: inline-size; aspect-ratio: 2048 / 800; object-fit: cover; object-position: 50% 0; margin: 0 0 -26px; position: relative; z-index: 1; }
.close__stack .sig--close { position: relative; z-index: 2; margin-top: 0; }

/* The copyright takes the footer's bold hand face, its year included. */
.foot__line { font-family: var(--hand); font-weight: 700; font-size: 16px; }
.foot__line .num { font-family: inherit; font-weight: inherit; font-size: 1em; letter-spacing: inherit; }


/* One postcard row high: the title beside the pair, the pair as tall as the row. */
/* canvases l, p, m (was (max-width: 1299px)) */
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .english__words { flex-direction: row; align-items: stretch; justify-content: flex-end; gap: 10px; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .english__words .english__title { align-self: center; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"], :root[data-canvas="m"]) .english__pair { flex: none; align-self: stretch; margin: 0; }

/* Portrait tablets keep the desktop's first screen: the words on the left, the globe and the cast sitting under it on
   the right, their feet level with the bottom of the four ways in. Phones stack them, the cast across the full width. */
/* canvases p, m (was (max-width: 999px)) */
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero { grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "words scene"; column-gap: 14px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero__title { font-size: 42px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .sticker--hero { width: 232px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero .get { --cell: 164px; --cell-h: 50px; }
  :where(:root[data-canvas="p"], :root[data-canvas="m"]) .hero__scene { justify-self: end; align-self: end; margin-right: -62px; }

/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "words" "scene"; }
  :where(:root[data-canvas="m"]) .hero__title { font-size: 44px; }
  :where(:root[data-canvas="m"]) .sticker--hero { width: 260px; }
  :where(:root[data-canvas="m"]) .hero .get { --cell: 142px; --cell-h: 50px; }
  :where(:root[data-canvas="m"]) .hero__scene { justify-self: center; align-self: auto; width: min(100%, 600px); margin-right: 0; }

/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .sticker--hero { margin-bottom: 20px; }
  :where(:root[data-canvas="m"]) .crowd__say { border-width: 1.5px; padding: 0.25em 0.45em 0.2em; }
  :where(:root[data-canvas="m"]) .sticker--close { margin-bottom: 12px; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .js .pop { opacity: 1; translate: none; scale: none; }
}

/* ================= iteration 11 ================= */
/* A bubble page.js leaves out where the seated group is too narrow for all eight in two rows. */
.crowd__say--off { display: none; }

/* Every control keeps a tap area at least 44 px tall once the page is scaled, however small it is drawn. */

.feedback::after, .login::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, calc(44px / var(--z, 1))); transform: translateY(-50%); }

/* Every row of postcards stands the same height as the others, and a postcard never grows past its column. */
.world__grid { grid-template-rows: auto; grid-auto-rows: 1fr; }
.world .pc, .english .pc { min-width: 0; }

/* Small type never draws under 12 px once the page is scaled. */
:root .daypage__w { font-size: max(14px, calc(12px / var(--z, 1))); }
:root .pillar__n, :root .pillar__min { font-size: max(15px, calc(12px / var(--z, 1))); }
/* canvases d, l, p (was (min-width: 701px)) */
  :where(:root[data-canvas="d"], :root[data-canvas="l"], :root[data-canvas="p"]) .wall--learn .pc__l { font-size: max(15px, calc(12px / var(--z, 1))); }


/* Controls stay at least 44 px tall once the page is scaled. */
.toggle { min-height: max(44px, calc(44px / var(--z, 1))); }
.get .marker, .get .store { min-height: calc(44px / var(--z, 1)); }

/* On a phone, "Learning English?" wraps beside James and Jessica instead of reaching past the page's edge. */
/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .english__words { justify-content: flex-start; }
  :where(:root[data-canvas="m"]) .english__words .english__title { flex: 1 1 0; min-width: 0; }


/* On an upright tablet, "Learning English?" heads a block two postcard rows tall, so James and Jessica stand large. */
/* canvases p (was (min-width: 701px) and (max-width: 999px)) */
  :where(:root[data-canvas="p"]) .english__words { grid-row: span 2; flex-direction: column; align-items: flex-start; }
  :where(:root[data-canvas="p"]) .english__pair { margin-top: auto; }
  :where(:root[data-canvas="p"]) .english__pair .stand img { height: 290px; }

/* canvases l, p (was (min-width: 701px) and (max-width: 1299px)) */
  :where(:root[data-canvas="l"], :root[data-canvas="p"]) .wall--english .pc__l { font-size: max(14px, calc(12px / var(--z, 1))); }

/* Numbers set a size under their words, never under 12 px. */
.num { font-size: max(0.9em, calc(12px / var(--z, 1))); }

/* A store badge keeps its two lines inside the drawn frame: when the small line grows to stay readable on a small
   scale, the gap between the lines gives the room back. A phone's first two badges are as wide as the close's. */
/* canvases d, l (was (min-width: 1000px)) */
  :where(:root[data-canvas="d"], :root[data-canvas="l"]) .store__n { margin-top: clamp(1px, calc(15.2px - 9.5px / var(--z, 1)), 4px); }

/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .hero .get { --cell: 162px; --cell-h: 54px; }


/* The section dividers' pencil stroke is heavy enough to draw unbroken on a screen of ordinary pixel density. */
.block::before, .foot__langs::before, .foot__end::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none'%3E%3Cpath d='M2 5.6C90 3 190 8.2 330 4.4S560 2.4 700 6.6S900 3.2 998 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none'%3E%3Cpath d='M2 5.6C90 3 190 8.2 330 4.4S560 2.4 700 6.6S900 3.2 998 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* ================= iteration 12 ================= */
/* Phones set the postcards two a row, so every course name fits its card whole. */
/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .world { --cols: 2; }
  :where(:root[data-canvas="m"]) .wall--learn .pc:nth-child(22) { grid-column-start: auto; }


/* The English postcards keep one height a row, the same as the course postcards, and a short last row sits centred.
   On sideways and upright tablets "Learning English?" heads a block two postcard rows tall, so James and Jessica stand
   large. */
.english { grid-auto-rows: 1fr; }
/* canvases l, p (was (min-width: 701px) and (max-width: 1299px)) */
  :where(:root[data-canvas="l"], :root[data-canvas="p"]) .english__words { grid-row: span 2; flex-direction: column; align-items: flex-start; text-align: left; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"]) .english__pair { margin-top: auto; }
  :where(:root[data-canvas="l"], :root[data-canvas="p"]) .english__pair .stand img { height: 300px; }

/* On desktop the second row begins beside the cast; shorter final rows stay centred. */
  :where(:root[data-canvas="d"]) .wall--english .pc:nth-child(7) { grid-column-start: 4; }
/* canvases l (was (min-width: 1000px) and (max-width: 1299px)) */
  :where(:root[data-canvas="l"]) .wall--english .pc:nth-child(9) { grid-column-start: 2; }

/* canvases p (was (min-width: 701px) and (max-width: 999px)) */
  :where(:root[data-canvas="p"]) .wall--english .pc:nth-child(9) { grid-column-start: 2; }

/* Eleven English postcards leave one centred card in the last phone row. */
  :where(:root[data-canvas="m"]) .wall--english .pc:last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 10px) / 2); }


/* On a phone the Today note gives the task names the room: a narrower tick column and gap, with the minutes clear. */
/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .daypage__row { grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 10px; }
  :where(:root[data-canvas="m"]) .daypage__row .daypage__t, :where(:root[data-canvas="m"]) .daypage__row .daypage__name { font-size: 17px; }
  :where(:root[data-canvas="m"]) .daypage__row .daypage__w { font-size: max(12.5px, calc(12px / var(--z, 1))); }


/* Controls stay a clear 44 px tall once scaled: the switches, the two top buttons, the four ways in and the footer's links. */
.toggle { min-height: max(46px, calc(46px / var(--z, 1))); }
.feedback, .login { min-height: max(50px, calc(46px / var(--z, 1))); }
.get .marker, .get .store { min-height: calc(46px / var(--z, 1)); }
.foot a:not(.slab) { display: inline-flex; align-items: center; min-height: calc(44px / var(--z, 1)); }

/* The celebrating cast's straight bottom edge tucks behind the card's torn top. */
.close__stack .close__cast { margin-bottom: -32px; }

/* ================= iteration 13: what Pisith saw in Safari on his iPhone and iPad ================= */
/* Safari never enlarges the page's type on its own. On a sideways iPad it did, and the badges' words left their frames. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The chalkboard reaches past the window's top and bottom, so it also fills the space under a phone browser's see-through
   bars. */
.ground { top: -160px; bottom: -160px; }
/* On a phone, James and Jessica's box has its own width beside "Learning English?". Safari gives a box sized only from
   its height no width, which laid the pair over the title. */
/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .english__pair { flex: 0 0 46%; aspect-ratio: auto; min-height: 170px; }


/* ================= iteration 14 ================= */
/* The footer's links and copyright and the Today note's total keep 12 px or more in a short laptop window. */
/* canvases d, l, p (was (min-width: 701px)) */
  :where(:root[data-canvas="d"], :root[data-canvas="l"], :root[data-canvas="p"]) .foot a:not(.slab), :where(:root[data-canvas="d"], :root[data-canvas="l"], :root[data-canvas="p"]) .foot__lang-row li { font-size: max(16px, calc(12px / var(--z, 1))); }
  :where(:root[data-canvas="d"], :root[data-canvas="l"], :root[data-canvas="p"]) .foot__line { font-size: max(16px, calc(12px / var(--z, 1))); }

:root .daypage .daypage__sum { font-size: max(16px, calc(12px / var(--z, 1))); }
/* On the narrowest phones "Log in" stays on one line. */
/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .login span { white-space: nowrap; }
  :where(:root[data-canvas="m"]) .feedback span { white-space: normal; }

/* On the chalkboard the dividers are drawn in chalk strong enough to see. */
:root[data-theme="dark"] .block::before, :root[data-theme="dark"] .foot__langs::before, :root[data-theme="dark"] .foot__end::before { opacity: 0.85; }

/* ================= iteration 15 ================= */
/* The numbers in the bold signatures take the number face's own bold (600), so no browser has to fake one. */
.hero__sig .num, .sig__for .num { font-weight: 600; }
/* On the chalkboard the page under the board is the board's own grey, so any edge a phone browser shows past it
   matches. */
:root[data-theme="dark"] { background-color: #2b2e33; }
:root[data-theme="dark"] body { background-color: transparent; }
/* On the narrowest phones the top bar keeps inside the page. */
/* canvases m (was (max-width: 700px)) */
  :where(:root[data-canvas="m"]) .login { padding-left: 10px; padding-right: 10px; }
  :where(:root[data-canvas="m"]) .feedback { margin-right: 6px; }

/* The visible border describes the full tap target after canvas scaling. */
.get .store__frame { top: 1px; height: calc(100% - 2px); }

/* Compact landscape keeps the first action visible without reacting to browser chrome. */
@media (orientation: landscape) and (max-width: 999px) {
  :root[data-canvas="p"] .sticker--hero { width: 160px; margin-bottom: 4px; }
  :root[data-canvas="p"] .hero__title { font-size: 38px; }
  :root[data-canvas="p"] .hero__sig { font-size: 24px; margin-top: 0; }
  :root[data-canvas="p"] .get--hero { margin-top: 12px; }
}

/* The account entry shares the Try for free marker and its hop. */
.login-entry { position: relative; }
.login-entry .login.marker { margin: 0; height: auto; min-height: max(50px, calc(46px / var(--z, 1))); padding: 0 24px; box-shadow: none; color: var(--on-marker); }
.login-entry .login.marker span { font-size: max(15px, calc(14px / var(--z, 1))); white-space: nowrap; }
.login-callout { position: absolute; right: calc(50% + 64px); top: 100%; width: 168px; margin: 8px 0 0; color: var(--ink); font: 17px/1.3 var(--hand); text-align: right; pointer-events: none; }
.login-arrow { position: absolute; width: 68px; height: auto; left: 50%; margin-left: -57.8px; top: calc(100% + 6px); overflow: visible; pointer-events: none; transform-origin: 85% 0; animation: login-point 2.6s ease-in-out 1.2s infinite; }
.login-arrow path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes login-point { 0%, 44%, 78%, 100% { transform: none; } 58%, 70% { transform: translateY(-5px) rotate(-3deg); } }
:where(:root[data-canvas="m"]) .login-entry { margin-left: auto; }
:where(:root[data-canvas="m"]) .login-callout { right: calc(50% + 44px); width: 157px; font-size: max(13px, calc(12px / var(--z, 1))); }
:where(:root[data-canvas="m"]) .login-arrow { width: 48px; margin-left: -40.8px; }
@media (prefers-reduced-motion: reduce) { .login-entry .login.marker, .login-arrow { animation: none; } }

.login-entry .login .marker__ink { position: absolute; }