/* Families page ("Helping at home…"), ported from site/families.html. Scoped under .pg-families. */
/* the whole page sits on pink paper, header included */
body:has(.pg-families) { background: #e19b90 url(/img/tile_pink.webp) 0 0/1200px auto repeat; }
.pg-families {
  & { --h-fides: #3a8a4e; --h-potens: #7b4fa0; --h-zelus: #c9403a; --h-constantia: #3c78a8; --h-bonitas: #e2ac22; }
  .hero { padding-block: 10px 56px; }
  .hero .wrap { display: grid; grid-template-columns: 1fr .9fr; gap: 30px; align-items: center; }
  .hero h1 { font: 400 clamp(2.2rem, 5.6vw, 4rem)/1.02 var(--f-slab); margin: 14px 0 12px; }
  .hero .lede { margin: 0; }
  .myyear { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
  .myyear .hand-note { margin-right: 4px; font-size: 1.75rem; }
  .years { display: flex; gap: 10px; }
  .years button { cursor: pointer; border: 0; font: 400 1.75rem/1 var(--f-label); color: var(--ink); background: var(--label); width: 96px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 3px 0 rgba(0,0,0,.2); display: grid; place-items: center; align-content: center; transition: transform .15s; }
  .years button small { font: 600 1.15rem/1 var(--f-hand); }
  .years button[aria-pressed="true"] { background: var(--navy); color: var(--label); transform: rotate(-6deg); }
  .hero .jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .hero .jump a { text-decoration: none; font-size: .8rem; }
  .hero .more { display: inline-block; margin-top: 14px; font-size: .88rem; }
  .sec { padding-block: 64px 56px; scroll-margin-top: 10px; }
  .sec .lede { margin: 8px 0 24px; }
  .what-ff { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px; align-items: center; margin: 14px 0 22px; padding: 20px 22px; background: #fffdf6; box-shadow: 0 6px 16px rgba(40,25,5,.14); border-left: 8px solid var(--s-maths); }
  .what-ff h3 { font: 400 1.35rem/1.1 var(--f-slab); margin: 0 0 8px; }
  .what-ff p { margin: 0 0 8px; max-width: 58ch; }
  .what-ff .frame { width: 100%; }
  @media (max-width: 760px) { .what-ff { grid-template-columns: 1fr; } }
  .sec h2.big + .lede { margin-top: 8px; }
  .remember { font: 700 1.1rem/1.2 var(--f-hand); color: #8a6f4c; }

  /* ---------- Flip & Fetch together ---------- */
  .howto { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 20px; }
  .howto span { display: inline-flex; gap: 8px; align-items: center; background: #fffdf6; padding: 6px 12px 6px 6px; box-shadow: 0 2px 5px rgba(0,0,0,.1); font-size: .9rem; }
  .howto b { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--c); font: 400 1rem/1 var(--f-label); transform: rotate(-4deg); }
  .howto .film { cursor: pointer; border: 0; font: 400 .82rem/1 var(--f-label); letter-spacing: .03em; background: var(--navy); color: #fff; padding: 10px 12px 9px; }
  .fft { display: grid; grid-template-columns: 230px minmax(0, 1fr) 170px; gap: 20px; align-items: start; background: rgba(255,253,246,.85); padding: 18px; box-shadow: 0 8px 20px rgba(40,25,5,.14); }
  .fft .ctrl { display: grid; gap: 12px; align-content: start; }
  .fft label { display: grid; gap: 5px; font: 400 .76rem/1 var(--f-label); letter-spacing: .06em; color: #6d5638; }
  .fft select { font: 400 .95rem var(--f-body); padding: 8px 9px; border: 2px solid #cdbfa5; background: #fff; color: var(--ink); letter-spacing: 0; }
  .wkchips { display: flex; flex-wrap: wrap; gap: 5px; }
  .wkchips button { cursor: pointer; border: 2px solid #cdbfa5; background: #fff; font: 400 .74rem/1 var(--f-label); padding: 6px 8px 5px; color: var(--ink); }
  .wkchips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .fft .count { font-size: .84rem; color: #6d5638; }
  /* ruled index card: every line of text is exactly one rule tall, nudged down so it sits on the rule (offsets measured per font) */
  .ffcard { --lh: 46px; perspective: 1100px; height: calc(var(--lh) * 7 + 12px); }
  .ffcard .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.4,1.3,.6,1); }
  .ffcard.flipped .in { transform: rotateY(180deg); }
  .ffcard .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: block; padding: 0 28px; box-shadow: 0 6px 14px rgba(0,0,0,.15); border-top: 12px solid var(--c); overflow: auto;
                  background: #fffdf6 repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 2px), #e3d7c2 calc(var(--lh) - 2px) var(--lh)); background-attachment: local; }
  .ffcard .face > * { display: block; margin: 0; line-height: var(--lh); }
  .ffcard .meta { font: 400 13px/var(--lh) var(--f-label); letter-spacing: .06em; color: var(--c); transform: translateY(18px); }
  .ffcard .topic { font: 700 22px/var(--lh) var(--f-hand); color: #8a6f4c; transform: translateY(13px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ffcard .q { font: 600 30px/var(--lh) var(--f-body); transform: translateY(9px); }
  .ffcard .q.long { font-size: 23px; transform: translateY(12px); }
  .ffcard .back { transform: rotateY(180deg); color: #fff; background: var(--c) repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 2px), rgba(255,255,255,.28) calc(var(--lh) - 2px) var(--lh)); background-attachment: local; }
  .ffcard .back .meta { color: rgba(255,255,255,.9); }
  .ffcard .a { font: 700 38px/var(--lh) var(--f-hand); transform: translateY(8px); }
  .ffcard .a.long { font-size: 30px; transform: translateY(10px); }
  .ffbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
  .pill { cursor: pointer; border: 0; font: 400 .86rem/1 var(--f-label); letter-spacing: .03em; padding: 11px 14px 10px; background: var(--navy); color: #fff; }
  .pill.coral { background: var(--coral); } .pill.alt { background: #efe3cb; color: var(--ink); }
  .pill:disabled { opacity: .4; cursor: default; }
  .ffside { text-align: center; display: grid; gap: 8px; justify-items: center; align-content: start; }
  .ffside img { width: 130px; }
  .ffside b { font: 400 1rem/1.15 var(--f-label); }
  .dots { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 150px; }
  .dots i { width: 12px; height: 12px; border-radius: 50%; background: #e3d8c3; }
  .dots i.now { box-shadow: 0 0 0 2px var(--ink); } .dots i.ok { background: var(--teal); } .dots i.again { background: var(--mustard); }
  .fft .keys { font-size: .76rem; color: #8a6f4c; margin-top: 10px; }

  /* ---------- this half term (flip cards) ---------- */
  .deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; }
  .fc { --lh: 34px; perspective: 900px; height: calc(var(--lh) * 7 + 10px); }
  .fc button { all: unset; box-sizing: border-box; display: block; width: 100%; height: 100%; cursor: pointer; position: relative; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,1.4,.6,1); }
  .fc button:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }
  .fc.flipped button { transform: rotateY(180deg); }
  .fc .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 0 14px; display: block; box-shadow: 0 5px 12px rgba(80,30,20,.18);
              background: #fffaf0 repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 2px), #e6dccb calc(var(--lh) - 2px) var(--lh)); }
  .fc .face > small, .fc .face > b, .fc .face > q, .fc .face > .tapme { display: block; margin: 0; line-height: var(--lh); }
  .fc .face.front { border-top: 10px solid var(--c); }
  .fc .face.front img { position: absolute; right: 8px; bottom: 8px; width: 74px; transform: rotate(6deg); filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
  .fc .face.front small { font: 400 12px/var(--lh) var(--f-label); letter-spacing: .06em; color: var(--c); transform: translateY(12px); }
  .fc .face.front b { font: 600 19px/var(--lh) var(--f-body); padding-right: 8px; transform: translateY(7px); }
  .fc .face.front .tapme { position: absolute; left: 14px; bottom: 0; font: 700 20px/var(--lh) var(--f-hand); color: #8b7b64; transform: translateY(8px); }
  .fc .face.back { transform: rotateY(180deg); color: #fff; background: var(--c) repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 2px), rgba(255,255,255,.25) calc(var(--lh) - 2px) var(--lh)); }
  .fc .face.back small { font: 400 12px/var(--lh) var(--f-label); letter-spacing: .08em; opacity: .9; transform: translateY(12px); }
  .fc .face.back q { font: 700 25px/var(--lh) var(--f-hand); transform: translateY(6px); }
  .fc .face.back .kw { position: absolute; left: 12px; right: 12px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
  .fc .face.back .kw span { font-size: .74rem; background: rgba(255,255,255,.24); padding: 3px 7px; }

  .nowhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 24px; align-items: end; }
  .nowhead img { width: 100%; filter: drop-shadow(0 8px 10px rgba(40,25,5,.3)); margin-bottom: -30px; }

  /* ---------- ask me about ---------- */
  .fridgewrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 30px; align-items: center; }
  .fridge { background: #dfe7ea; padding: 22px; border-radius: 8px; box-shadow: inset 0 0 0 7px #cfd9dd, 0 10px 24px rgba(0,0,0,.15); }
  .fridge .sheet2 { background: #fffdf6; padding: 18px 18px 20px; box-shadow: 0 6px 14px rgba(0,0,0,.18); position: relative; transform: rotate(-.8deg); }
  .fridge .magnet { position: absolute; top: -12px; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 3px 4px rgba(0,0,0,.3); }
  .fridge h3 { font: 400 1.7rem/1.1 var(--f-slab); text-align: center; margin: 4px 0 4px; }
  .fridge h3 input { font: inherit; width: 6.5em; border: 0; border-bottom: 3px dashed var(--coral); background: transparent; text-align: center; color: var(--coral); }
  .fridge .sub { text-align: center; font: 700 1.1rem/1 var(--f-hand); color: #8a6f4c; margin: 0 0 14px; }
  .askgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
  .askgrid div { display: grid; justify-items: center; gap: 4px; text-align: center; }
  .askgrid img { width: 58px; height: 58px; object-fit: contain; }
  .askgrid b { font: 400 .66rem/1 var(--f-label); letter-spacing: .05em; color: var(--c); }
  .askgrid span { font-size: .76rem; line-height: 1.2; }
  .fridgewrap aside ol { padding-left: 1.2em; display: grid; gap: 8px; margin: 12px 0 0; }
  .pdfrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
  .pdfrow .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
  .pdfnote { font: 700 1.1rem/1.2 var(--f-hand); color: #6d5638; }

  /* ---------- kit ---------- */
  .kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
  .kit div { background: #fffdf6; padding: 12px; display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.1); }
  .kit img { width: 64px; height: 56px; object-fit: contain; }
  .kit b { font: 400 .86rem/1.1 var(--f-label); letter-spacing: .03em; }
  .kit span { display: block; font-size: .82rem; line-height: 1.3; margin-top: 3px; }

  /* ---------- reading ladder ---------- */
  .readhead { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
  .quote { display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: start; max-width: 440px; }
  /* the tail points left, at Ada's face, rather than down */
  .quote .bubble { margin-top: 6px; }
  .quote .bubble::after { left: -16px; top: 18px; bottom: auto; border-width: 9px 17px 9px 0; border-color: transparent #fffdf6 transparent transparent; }
  .quote img { width: 90px; }
  .ladder { display: grid; gap: 14px; margin-top: 20px; }
  .rung { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: stretch; }
  .rung > b { display: grid; place-items: center; font: 400 1.05rem/1.1 var(--f-label); color: #fff; text-align: center; padding: 6px; }
  .rung.y7 > b { background: color-mix(in srgb, var(--teal) 70%, #fff); } .rung.y8 > b { background: var(--mustard); } .rung.y9 > b { background: var(--hach-blue); }
  .rung.on > b { box-shadow: inset 0 0 0 4px var(--coral); }
  .rung.on > b::after { content: "YOUR YEAR"; display: block; font-size: .62rem; letter-spacing: .08em; margin-top: 4px; }
  .books { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .book { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; background: #fffdf6; padding: 9px 12px; box-shadow: 0 2px 6px rgba(0,0,0,.08); text-decoration: none; color: inherit; transition: transform .15s;
          cursor: pointer; border: 0; font: inherit; text-align: left; width: 100%; }
  .book:focus-visible { outline: 3px dashed var(--coral); outline-offset: 2px; }
  .book:hover { transform: translateY(-2px); }
  .book .spine { height: 66px; background: var(--c); display: grid; place-items: center; box-shadow: inset -5px 0 0 rgba(0,0,0,.15); }
  .book .spine img { width: 38px; height: 38px; object-fit: contain; }
  .book b { display: block; font-size: .9rem; line-height: 1.2; }
  .book i { font-style: normal; font-size: .78rem; color: #6d5638; }
  .book small { display: block; font: 400 .66rem/1.2 var(--f-label); letter-spacing: .04em; color: var(--c); margin-top: 3px; }
  .draft { font-size: .82rem; color: #6d5638; margin-top: 14px; }

  /* book card */
  & dialog.bookdlg { border: 0; padding: 0; background: transparent; width: min(780px, calc(100vw - 24px)); max-width: none; }
  & dialog.bookdlg::backdrop { background: rgba(15, 20, 45, .6); }
  .bk { display: grid; grid-template-columns: 250px 1fr; gap: 26px; background: #fffdf6; padding: 24px; box-shadow: 0 20px 40px rgba(0,0,0,.35); position: relative; border-top: 12px solid var(--c); }
  .bk .x { position: absolute; top: 8px; right: 10px; cursor: pointer; border: 0; background: none; font: 400 1.1rem/1 var(--f-label); color: #8a6f4c; padding: 6px 8px; }
  .cover { position: relative; aspect-ratio: 2 / 3; background: var(--c) url(/img/bg_kraft.webp) center/400px; background-blend-mode: multiply; box-shadow: 8px 10px 0 rgba(0,0,0,.12), inset 10px 0 0 rgba(0,0,0,.18), inset 13px 0 0 rgba(255,255,255,.15);
           display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 22px 16px 16px 26px; transform: rotate(-2deg); }
  .cover .tape { top: -12px; left: 36%; transform: rotate(-4deg); }
  .cover .t { font: 400 1.25rem/1.1 var(--f-slab); text-align: center; --torn-bg: var(--label); }
  .cover img { align-self: center; width: 72%; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
  .cover .au { font: 700 1.3rem/1 var(--f-hand); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
  .bk .rl { font: 400 .76rem/1 var(--f-label); letter-spacing: .08em; color: var(--c); }
  .bk h2 { font: 400 1.9rem/1.05 var(--f-slab); margin: 8px 0 4px; padding-right: 30px; }
  .bk .by { font-size: .95rem; color: #6d5638; margin: 0 0 14px; }
  .bk h3 { font: 400 .76rem/1 var(--f-label); letter-spacing: .08em; color: #8a6f4c; margin: 14px 0 6px; }
  .bk p { margin: 0; }
  .bk .link { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; background: color-mix(in srgb, var(--c) 12%, #fffdf6); border-left: 6px solid var(--c); padding: 10px 12px; }
  .bk .link img { width: 64px; height: 64px; object-fit: contain; }
  .bk .link b { display: block; font: 400 .76rem/1.2 var(--f-label); letter-spacing: .04em; color: var(--c); }
  .bk .link span { font-size: .92rem; }
  .bk .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
  .bk .acts a { text-decoration: none; }
  .bk .note { font-size: .78rem; color: #8a6f4c; margin-top: 14px; }
  @media (max-width: 640px) { .bk { grid-template-columns: 1fr; } .cover { width: 60%; margin: 0 auto; } }

  /* ---------- house points at home ---------- */
  .hp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .hp button { cursor: pointer; border: 0; font: inherit; color: inherit; background: #fffdf6; padding: 12px 10px 14px; display: grid; gap: 7px; justify-items: center; text-align: center; box-shadow: 0 3px 8px rgba(0,0,0,.1); border-top: 8px solid var(--hc); transition: transform .15s; }
  .hp button:hover, .hp button:focus-visible { transform: translateY(-3px); outline: none; }
  .hp button:focus-visible { box-shadow: 0 0 0 3px var(--hc); }
  .hp .sh { width: 70px; aspect-ratio: .86; background: var(--hc) url(/img/bg_cream.webp) center/300px; background-blend-mode: multiply; display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
  .hp .sh img { width: 72%; margin-top: -14%; }
  .hp b { font: 400 .85rem/1 var(--f-label); color: var(--hc); }
  .hp .house { font: 700 1rem/1 var(--f-hand); color: #8a6f4c; }
  .hp .eg { font-size: .8rem; line-height: 1.3; }
  .hp .stars { font-size: 1.2rem; min-height: 1.4em; letter-spacing: 1px; color: var(--hc); }
  .hptools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
  .hptotal { font: 700 1.35rem/1.2 var(--f-hand); }

  /* ---------- crossroads chats ---------- */
  .xgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .xc { background: #fffaf0; padding: 14px; box-shadow: 0 3px 8px rgba(0,0,0,.12); display: grid; gap: 8px; }
  .xc .pair { display: flex; gap: 6px; align-items: center; }
  .xc .pair img { width: 56px; height: 56px; object-fit: contain; }
  .xc .pair img.sp { width: 36px; height: 40px; }
  .xc q { font: 700 1.25rem/1.15 var(--f-hand); }
  .xc p { margin: 0; font-size: .9rem; }

  /* ---------- glossary ---------- */
  .glosswrap { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 30px; align-items: start; }
  .gsearch { width: 100%; font: 400 1rem var(--f-body); padding: 11px 12px; border: 2px solid var(--ink); background: #fff; margin-bottom: 12px; }
  .gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
  .gloss div { background: #fffdf6; padding: 11px 13px; border-left: 5px solid var(--hach-sky); box-shadow: 0 2px 5px rgba(0,0,0,.07); }
  .gloss b { display: block; font: 400 .92rem/1.2 var(--f-label); letter-spacing: .03em; margin-bottom: 3px; }
  .gloss span { font-size: .9rem; }
  .gloss mark { background: #ffe39a; }

  @media (max-width: 980px) {
    .fft { grid-template-columns: 1fr; }
    .ffside { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; } .ffside img { width: 80px; grid-row: span 2; }
    .hp { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 900px) { .hero .wrap, .fridgewrap, .readhead, .glosswrap, .nowhead { grid-template-columns: 1fr; } .nowhead img { max-width: 440px; margin: 0 auto -20px; } .xgrid { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .hp { grid-template-columns: 1fr 1fr; } .ffcard { height: calc(var(--lh) * 8 + 12px); } .ffcard .q { font-size: 25px; } .ffcard .a { font-size: 32px; } .rung { grid-template-columns: 70px 1fr; } }
  @media (prefers-reduced-motion: reduce) { .fc button, .ffcard .in { transition: none; } }
}