/* Lek o Lär: clay style (chunky, rounded, thick edge + double shadow), colour-coded sections.
   Fredoka for labels, Andika (made for beginning readers: single-storey a and g) for letters and words. */
:root {
  --bg: #eaf4ff; --ink: #1e2a5a; --card: #fff; --soft: #e3efff; --edge: #c3d9f5; --edge-d: #a9c5ea;
  --blue: #2563eb; --pink: #db2777; --green: #15803d; --amber: #f59e0b; --story: #b45309; --math: #0e7490;
  --good-bg: #dcfce7; --on-color: #fff; --glyph-v: #db2777; --glyph-c: #2563eb; --win: #15803d;
  --shadow: 0 6px 0 var(--edge-d), 0 12px 20px rgba(30, 42, 90, .12);
  --shadow-press: 0 2px 0 var(--edge-d);
  --r-card: 36px; --r-pill: 999px; --r-opt: 28px; --r-tile: 28px; --bad-bg: #fde8ec; --bad: #be123c;
  --ui: Fredoka, ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --read: Andika, "Comic Sans MS", system-ui, sans-serif;
  font-family: var(--read);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141b3d; --ink: #fff6df; --card: #222c5e; --soft: #2f3b7a; --edge: #3a468a; --edge-d: #0d1230;
    --blue: #3b6ef0; --pink: #d6307f; --green: #1f8f4c; --story: #f59e0b; --math: #22d3ee; --good-bg: #1c4a33; --bad-bg: #4a1c2b; --bad: #fda4af; --glyph-v: #f472b6; --glyph-c: #7fb0ff; --win: #4ade80;
    --shadow: 0 6px 0 var(--edge-d), 0 12px 20px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column; color: var(--ink);
  background: radial-gradient(1200px 500px at 50% -150px, var(--soft), transparent 70%), var(--bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; touch-action: manipulation; transition: transform .12s ease-out, box-shadow .12s ease-out; }
:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
svg { width: 1em; height: 1em; flex: none; }

/* header */
header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 12px; max-width: 900px; width: 100%; margin: 0 auto; }
h1 { margin: 0; font: 700 1.9rem/1 var(--ui); letter-spacing: .5px; }
h1 span:first-child { color: var(--blue); }
h1 span:nth-child(2) { color: var(--math); }
h1 span:last-child { color: var(--pink); }
.hr { display: flex; align-items: center; gap: 10px; }
.round { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem;
  background: var(--card); border: 3px solid var(--edge); box-shadow: var(--shadow-press), 0 6px 10px rgba(30, 42, 90, .1); }
#stars { display: flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: 999px; min-width: 72px; justify-content: center;
  font: 700 1.4rem/1 var(--ui); background: var(--card); border: 3px solid var(--edge); }
#stars svg { color: #f5b301; font-size: 1.6rem; }
#stars.pop { animation: pop .5s ease-out; }
.note { border: 0; background: var(--soft); color: var(--ink); font: 1rem/1.4 var(--read); padding: 12px 18px; margin: 0 16px 8px; border-radius: 18px; text-align: left; max-width: 868px; align-self: center; }

main { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 16px 32px; width: 100%; max-width: 900px; margin: 0 auto; }

/* clay surfaces */
.card, .padwrap, .mtile, .key, .opt, .mc, .tile, .slot { border: 3px solid var(--edge); }
.card { background: var(--card); border-radius: var(--r-card); padding: 22px 20px 24px; text-align: center; width: min(600px, 100%); box-shadow: var(--shadow); }
.pic { width: min(46vw, 11rem); aspect-ratio: 1; display: grid; place-items: center; margin: 0 auto 8px; background: var(--soft);
  border-radius: 50%; font-size: min(24vw, 5.8rem); line-height: 1; }
.cap { font: 600 1.7rem/1.25 var(--ui); margin: 8px 0 4px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.glyph { font: 700 min(34vw, 9rem)/1 var(--read); color: var(--glyph-c); }
.glyph.v { color: var(--glyph-v); }
.glyph.word { font-size: min(18vw, 5rem); color: var(--ink); }

/* buttons */
.pill { min-height: 60px; min-width: 60px; padding: 12px 26px; border-radius: var(--r-pill); background: var(--blue); color: var(--on-color); border: 3px solid rgba(0, 0, 0, .12);
  font: 700 1.4rem/1 var(--ui); display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.pill.alt { background: var(--card); color: var(--ink); border-color: var(--edge); box-shadow: 0 6px 0 var(--edge-d); }
.pill.go { background: var(--pink); }
.pill svg { font-size: 1.5rem; }
.pill[hidden] { display: none; }

/* menu */
.menu { width: 100%; }
.menu h2 { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font: 700 1.4rem/1 var(--ui); }
.menu h2::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.menu .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.mtile { position: relative; --c: var(--blue); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 140px; padding: 14px 10px;
  border-radius: var(--r-tile); background: var(--card); border-color: var(--c); box-shadow: 0 6px 0 var(--c), 0 12px 18px rgba(30, 42, 90, .12); text-align: center; }
.mtile .ico { font-size: 3.2rem; line-height: 1; }
.mtile .lbl { font: 600 1.2rem/1.2 var(--ui); }
.c-pink { --c: var(--pink); } .c-green { --c: var(--green); } .c-blue { --c: var(--blue); } .c-amber { --c: var(--story); } .c-teal { --c: var(--math); }
.menu h2.c-pink, .menu h2.c-green, .menu h2.c-blue { --c: inherit; }
.menu h2.c-blue::before { background: var(--blue); } .menu h2.c-pink::before { background: var(--pink); } .menu h2.c-green::before { background: var(--green); } .menu h2.c-amber::before { background: var(--story); } .menu h2.c-teal::before { background: var(--math); }

/* letters */
.letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 12px; width: 100%; }
.key { aspect-ratio: 1; border-radius: 22px; background: var(--card); font: 700 2.3rem/1 var(--read); color: var(--glyph-c); box-shadow: var(--shadow-press), 0 8px 0 -2px var(--edge-d); }
.key.v { color: var(--glyph-v); }

/* tracing */
.padwrap { position: relative; width: min(92vw, 62dvh); aspect-ratio: 1; background: var(--card); border-radius: 36px; box-shadow: var(--shadow); overflow: hidden; }
.padwrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

/* word building, quiz options */
.slots { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.slot, .tile { width: 66px; height: 80px; border-radius: 18px; display: grid; place-items: center; font: 700 2.5rem/1 var(--read); }
.slot { background: var(--soft); border: 3px dashed var(--edge-d); }
.slot.full { border: 3px solid var(--green); background: var(--card); color: var(--win); }
.tile { background: var(--card); box-shadow: 0 6px 0 var(--edge-d); }
.tile[hidden] { display: none; }
.opts { margin-top: 14px; }
.opt { min-width: 112px; min-height: 112px; padding: 8px 14px; border-radius: var(--r-opt); background: var(--card); font: 700 3.8rem/1 var(--read);
  box-shadow: 0 6px 0 var(--edge-d); display: grid; place-items: center; }
.opt small { font: 400 1rem/1.2 var(--read); display: block; }
.opt.good { background: var(--good-bg); border-color: var(--green); box-shadow: 0 6px 0 var(--green); }
.win { font: 700 2rem/1.2 var(--ui); color: var(--win); min-height: 2.4rem; margin: 10px 0 0; }

/* memory */
.mem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mc { aspect-ratio: 1; border-radius: 20px; background: var(--blue); color: #fff; border-color: rgba(0, 0, 0, .15); font: 700 2.4rem/1 var(--read);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .25); display: grid; place-items: center; padding: 2px; overflow: hidden; }
.mc.up { background: var(--card); color: var(--ink); border-color: var(--amber); }
.mc.up { font-size: 1.6rem; }
.mc.mc-pic.up { font-size: 2.8rem; }
.mc.done { color: var(--win); border-color: var(--green); }
@media (max-width: 480px) { .mem { grid-template-columns: repeat(3, minmax(0, 1fr)); } .menu .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* feedback motion: pressed, wrong, correct */
button:active:not(:disabled) { transform: translateY(4px); }
.round:active, .pill:active, .key:active, .opt:active, .tile:active, .mc:active { box-shadow: var(--shadow-press); }
.mtile:active { box-shadow: 0 2px 0 var(--c); }
@media (hover: hover) { .mtile:hover, .key:hover, .opt:hover, .pill:hover { transform: translateY(-2px); } }
.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes pop { 40% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .shake { outline: 4px solid var(--pink); }
  .opt.good { outline: 4px solid var(--amber); }
}

/* stories */
.pill:disabled { opacity: .35; box-shadow: none; }
.tick { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 1.1rem; }
.story { width: min(680px, 100%); }
.spic { display: inline-flex; gap: 10px; padding: 10px 26px; border-radius: 44px; background: var(--soft); font-size: min(15vw, 4.6rem); line-height: 1.2; animation: bounce-in .5s ease-out; }
.stext { font: 700 clamp(1.7rem, 5.4vw, 2.5rem)/1.7 var(--read); margin: 18px 0 8px; text-wrap: balance; }
.w { cursor: pointer; border-radius: 10px; padding: 0 4px; transition: background .15s; }
.w.lit { background: var(--amber); color: #1e2a5a; }
@media (hover: hover) { .w:hover { background: var(--soft); } }
.dots { display: flex; gap: 8px; justify-content: center; margin: 14px 0 4px; flex-wrap: wrap; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--edge-d); }
.dots i.on { background: var(--pink); }
.src { font-size: .95rem; opacity: .75; margin: 4px 0 0; }
@media (max-width: 480px) { .story .row { gap: 10px; } .story .pill { padding: 10px 16px; font-size: 1.15rem; min-width: 56px; min-height: 56px; } }

/* maths */
.objs { display: grid; gap: 4px 8px; width: fit-content; max-width: 100%; margin: 8px auto; justify-content: center; justify-items: center; font-size: 2.3rem; line-height: 1.15; }
.objs.sm { font-size: 1.5rem; margin: 0; gap: 2px 4px; }
.objs .x { position: relative; opacity: .35; }
.objs .x::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 5px; border-radius: 3px; background: var(--pink); transform: rotate(-35deg); }
.eq { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 6px 0; }
.eq .objs.sm { margin: 0; font-size: 2rem; }
.op { font: 700 2.6rem/1 var(--ui); color: var(--math); }
.cap.eqn { font: 700 2.6rem/1.2 var(--read); }
.ten { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(100%, 320px); margin: 8px auto; }
.ten span { aspect-ratio: 1; display: grid; place-items: center; font-size: 1.9rem; line-height: 1; border-radius: 12px; border: 3px dashed var(--edge-d); }
.ten .f { border: 3px solid var(--math); background: var(--soft); }
.opt.amt { min-width: 140px; min-height: 72px; padding: 10px 14px; }
.opt.shp { min-width: 112px; padding: 12px; }
.shape { width: 82px; height: 82px; display: block; }
.slots.seq .slot { width: 64px; }
.lv { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.lv i { width: 10px; height: 10px; border-radius: 50%; background: var(--edge-d); }
.lv i.on { background: var(--math); }
@media (max-width: 480px) { .opt { min-width: 88px; min-height: 96px; padding: 6px 10px; font-size: 3.2rem; } .opts { gap: 10px; } .opt.amt, .opt.shp { min-width: 88px; } }

/* ===== age groups: header badge, chooser, session screens ===== */
.titlebox { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.agebadge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: var(--card); border: 2px solid var(--edge); font: 700 .85rem/1.4 var(--ui); }
.agebadge[hidden] { display: none; }
body[data-age="choose"] #stars { visibility: hidden; }
.chooser { width: 100%; text-align: center; }
.chooser h2 { font: 700 2rem/1.2 var(--ui); margin: 12px 0 6px; }
.lead { font: 400 1.1rem/1.5 var(--read); margin: 0 auto; max-width: 34rem; opacity: .85; }
.agegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 22px; }
.agecard { --c: var(--pink); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 14px; border-radius: var(--r-tile); background: var(--card); border: 3px solid var(--c); box-shadow: 0 6px 0 var(--c), 0 12px 18px rgba(30, 42, 90, .12); }
.agecard:nth-child(2) { --c: var(--math); } .agecard:nth-child(3) { --c: var(--blue); } .agecard:nth-child(4) { --c: #7c3aed; }
.agecard .ico { font-size: 3.4rem; line-height: 1; }
.agecard .lbl { font: 700 1.5rem/1.2 var(--ui); }
.agecard .tag { font: 400 .95rem/1.4 var(--read); opacity: .8; }
.agecard:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--c); }
.best { position: absolute; top: 10px; right: 12px; padding: 1px 9px; border-radius: 999px; background: var(--soft); border: 2px solid var(--c); font: 700 .8rem/1.5 var(--ui); }

.sess { width: min(720px, 100%); text-align: left; }
.prog { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bar { flex: 1; height: 10px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--math); transition: width .3s; }
.cnt { font: 700 .95rem/1 var(--ui); opacity: .8; }
.q { font: 700 1.4rem/1.45 var(--read); margin: 8px 0 14px; }
.q.eqn { font-size: 2.2rem; text-align: center; }
.qpic { font-size: 3rem; line-height: 1; text-align: center; margin-bottom: 4px; }
.passage { background: var(--soft); border-radius: 14px; padding: 14px 16px; font: 400 1.05rem/1.65 var(--read); margin: 0 0 12px; }
.fig { display: block; width: min(100%, 360px); height: auto; margin: 6px auto 10px; color: var(--ink); }
.opts:not(.txt) { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.opts.txt { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .opts.txt { grid-template-columns: 1fr 1fr; } }
.opt.txt { min-width: 0; min-height: 58px; padding: 12px 16px; border-radius: 16px; font: 600 1.1rem/1.35 var(--read); text-align: left; display: flex; align-items: center; }
.opt.bad { background: var(--bad-bg); border-color: var(--bad); color: var(--ink); box-shadow: none; opacity: .75; }
.fb { min-height: 3.2rem; margin: 12px 0 0; font: 400 1.05rem/1.5 var(--read); }
.fb .ok { color: var(--win); } .fb .no { color: var(--bad); }
.typed { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.in { flex: 1 1 140px; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 3px solid var(--edge-d); background: var(--card); color: inherit; font: 700 1.6rem/1.2 var(--read); }
.in:focus { outline: 4px solid var(--amber); outline-offset: 2px; }
.u { font: 600 1.2rem/1 var(--read); }
.in.shake { animation: shake .3s; }
.sum { text-align: center; }
.sum h2 { font: 700 1.8rem/1.2 var(--ui); margin: 6px 0; }
.big-score { font: 800 5rem/1 var(--ui); color: var(--math); }
.big-score small { font-size: 2rem; opacity: .6; }

/* ===== age group looks =====  5-7 is the base above. */
body[data-age="8-10"], body[data-age="11-13"] { --ui: Nunito, system-ui, sans-serif; --read: Nunito, system-ui, sans-serif; }
body[data-age="14-15"] { --ui: Inter, system-ui, sans-serif; --read: Inter, system-ui, sans-serif; }

body[data-age="8-10"] { --bg: #e9f8f2; --soft: #dcf2e9; --edge: #b5e2d2; --edge-d: #8bcbb5; --r-card: 28px; --r-opt: 22px; --r-tile: 22px; }
body[data-age="11-13"] { --bg: #efebfb; --soft: #e5def8; --edge: #cdc2ee; --edge-d: #b0a2df; --r-card: 20px; --r-pill: 14px; --r-opt: 14px; --r-tile: 18px; --shadow: 0 3px 0 var(--edge-d), 0 8px 16px rgba(60, 40, 120, .1); }
body[data-age="14-15"] { --bg: #f2f4f8; --soft: #e8ebf2; --edge: #d5d9e5; --edge-d: #bcc2d3; --ink: #151a2c; --r-card: 14px; --r-pill: 10px; --r-opt: 12px; --r-tile: 14px; --shadow: 0 1px 0 var(--edge-d), 0 6px 14px rgba(20, 26, 44, .08); }
@media (prefers-color-scheme: dark) {
  body[data-age="8-10"] { --bg: #0f2a26; --soft: #1a3f38; --edge: #245249; --edge-d: #07130f; }
  body[data-age="11-13"] { --bg: #1a1530; --soft: #2a2250; --edge: #3a3070; --edge-d: #0d0a1c; }
  body[data-age="14-15"] { --bg: #0e1118; --card: #171b26; --soft: #202636; --edge: #2b3347; --edge-d: #060810; --ink: #e8ecf5; }
}
body[data-age="11-13"] h1, body[data-age="14-15"] h1 { letter-spacing: 0; }
body[data-age="14-15"] .card, body[data-age="14-15"] .opt, body[data-age="14-15"] .mtile, body[data-age="14-15"] .pill, body[data-age="14-15"] .agecard { border-width: 2px; }
body[data-age="11-13"] .mtile, body[data-age="14-15"] .mtile { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 84px; padding: 12px 16px; text-align: left; box-shadow: var(--shadow); }
body[data-age="11-13"] .mtile .ico, body[data-age="14-15"] .mtile .ico { font-size: 2rem; }
body[data-age="11-13"] .mtile .lbl, body[data-age="14-15"] .mtile .lbl { font-size: 1.05rem; }
body[data-age="11-13"] .menu .grid, body[data-age="14-15"] .menu .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
body[data-age="8-10"] #owl { width: clamp(44px, 8vw, 64px); }
body[data-age="11-13"] #owl, body[data-age="14-15"] #owl, body[data-age="choose"] #owl { display: none; }
body[data-age="11-13"] main, body[data-age="14-15"] main { padding-bottom: 32px; }
@media (max-width: 480px) { body[data-age="11-13"] .menu .grid, body[data-age="14-15"] .menu .grid { grid-template-columns: 1fr; } }
body:not([data-age="5-7"]) .opt:not(.txt) { min-width: 120px; min-height: 76px; font-size: 2.1rem; padding: 8px 18px; }
body:not([data-age="5-7"]) .opt.amt, body:not([data-age="5-7"]) .opt.shp { font-size: 1.5rem; }

.agecard { position: relative; }
.agecard .last { position: absolute; top: 10px; right: 12px; padding: 1px 9px; border-radius: 999px; background: var(--soft); border: 2px solid var(--c); font: 700 .8rem/1.5 var(--ui); }
h1 { cursor: pointer; }
h1 { white-space: nowrap; }
@media (max-width: 480px) { h1 { font-size: 1.55rem; } header { gap: 8px; } }
@media (max-width: 360px) { header { padding: 10px 10px; gap: 6px; } header .round { width: 44px; height: 44px; font-size: 1.4rem; } .hr { gap: 6px; } #stars { min-width: 0; padding: 4px 10px 4px 8px; font-size: 1.15rem; } h1 { font-size: 1.3rem; } .agebadge { font-size: .78rem; padding: 2px 9px; } }

/* ===== front page, copyright page, footer ===== */
body[data-age="choose"] #home { visibility: hidden; }
#foot { max-width: 900px; width: 100%; margin: 0 auto; padding: 8px 16px 20px; text-align: center; font: 400 .9rem/1.5 var(--read); opacity: .85; }
#foot a { color: inherit; text-underline-offset: 3px; }
body[data-age="5-7"] #foot, body[data-age="8-10"] #foot { padding-right: 90px; padding-left: 90px; }

.landing { width: 100%; display: flex; flex-direction: column; gap: 34px; }
.hero { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; padding-top: 6px; }
.hero-text { text-align: center; }
.eyebrow { display: inline-block; margin: 0 0 8px; padding: 4px 14px; border-radius: 999px; background: var(--soft); border: 2px solid var(--edge); font: 700 .95rem/1.4 var(--ui); }
.hero-title { margin: 6px 0 10px; font: 800 clamp(2.4rem, 8vw, 3.8rem)/1.05 var(--ui); }
.hero-lead { margin: 0 auto 16px; max-width: 34rem; font: 400 1.2rem/1.6 var(--read); }
.hero-art { max-width: 460px; width: 100%; margin: 0 auto; }
.hero-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-svg text { font: 800 24px var(--ui); fill: var(--ink); }
.hero-svg .fl { animation: float 4.5s ease-in-out infinite; }
.hero-svg .tw { animation: twinkle 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes float { 50% { transform: translateY(-7px); } }
@keyframes twinkle { 50% { opacity: .35; transform: scale(.8); } }
@media (min-width: 820px) { .hero { grid-template-columns: 1.05fr 1fr; gap: 24px; } .hero-text { text-align: left; } .hero-lead { margin-left: 0; } }

.block { scroll-margin-top: 12px; }
.block > h2 { margin: 0 0 8px; text-align: center; font: 800 1.9rem/1.2 var(--ui); }
.block > .lead { text-align: center; margin: 0 auto 6px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.feat { background: var(--card); border: 3px solid var(--edge); border-radius: var(--r-card); padding: 22px 20px; box-shadow: var(--shadow); text-align: center; }
.feat .ico { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; background: var(--soft); font-size: 2rem; }
.feat h3 { margin: 4px 0 6px; font: 700 1.3rem/1.3 var(--ui); }
.feat p { margin: 0; font: 400 1.05rem/1.55 var(--read); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 16px; }
.shot { margin: 0; background: var(--card); border: 3px solid var(--edge); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.shot img { display: block; width: 100%; height: auto; background: var(--soft); }
.shot figcaption { padding: 14px 18px 18px; }
.shot h3 { margin: 0 0 6px; font: 700 1.15rem/1.3 var(--ui); }
.shot p { margin: 0; font: 400 1rem/1.55 var(--read); }
.adult { margin: 14px auto 0; padding: 18px 22px 18px 40px; max-width: 46rem; background: var(--card); border: 3px solid var(--edge); border-radius: var(--r-card); font: 400 1.05rem/1.6 var(--read); box-shadow: var(--shadow); }
.adult li { margin: 8px 0; }
.adult a, .prose a { color: var(--blue); text-underline-offset: 3px; }
.prose { width: min(760px, 100%); text-align: left; }
.prose h2 { margin: 6px 0 2px; font: 800 1.9rem/1.2 var(--ui); }
.prose h3 { margin: 22px 0 4px; font: 700 1.2rem/1.3 var(--ui); }
.prose p, .prose li { font: 400 1.05rem/1.65 var(--read); }
.prose .meta { margin: 0 0 6px; opacity: .75; font-size: .95rem; }
.prose .back { font: 700 1rem var(--ui); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .hero-svg .fl, .hero-svg .tw { animation: none; } }
@media (max-width: 480px) { #foot { padding-left: 16px !important; padding-right: 16px !important; } .block > h2, .prose h2 { font-size: 1.6rem; } }
.hero-title { text-wrap: balance; }
.adult a, .prose a { color: var(--glyph-c); }