/* =====================================================================
   SoKids: Afternoon Edition base (css/case-study.css), one spot color (the purple
   from the game's buttons: outlines, dots, progress pips, small details).
   The game's pastels stay inside images. No floating margin pieces.
   ===================================================================== */
.so{--pur:#5F5AC1}
.so-h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;margin:0 0 12px}
.so .lede{max-width:68ch;font-size:17px;line-height:1.7;margin-bottom:16px}
.so .by-label{margin-bottom:14px}

/* ---------- header ---------- */
.so-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:44px;align-items:center;padding-top:34px}
.so-line{font-family:var(--hand);font-size:27px;line-height:1.1;color:var(--ink-soft);margin-top:12px}
.so-head h1{margin-top:2px}
.so-badge{display:inline-block;font-family:var(--type);font-size:12px;letter-spacing:.05em;line-height:1.35;margin-top:18px;padding:6px 10px 4px;border:1px solid var(--pur);box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px var(--pur)}
.so-facts.cs-facts{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr))}
.so-facts.cs-facts > div:nth-child(n+4){border-top:1px solid var(--rule)}
.so-facts.cs-facts > div:nth-child(3n+1){border-left:0}
.so-facts dd{font-size:14.5px}

/* the invitation: drawn envelope, her card. Final state is the default; the opening only plays on the first view */
.inv{position:relative;margin:0;width:100%;aspect-ratio:1/.78;--ease2:cubic-bezier(.3,.8,.3,1)}
.env-back,.env-pocket,.env-flap,.env-flap-open{position:absolute;left:5%;right:5%;display:block}
.env-back{top:34%;bottom:3%;background:#E9DDC8;box-shadow:0 0 0 1px var(--ink),0 14px 22px -14px rgba(62,39,35,.5)}
.env-flap-open{top:10%;height:24.2%;background:var(--pur);clip-path:polygon(0 100%,50% 0,100% 100%);transform-origin:50% 100%}
.inv-card{position:absolute;left:8%;top:6%;width:84%;height:auto;display:block;border:5px solid var(--paper-card);box-shadow:0 0 0 1px rgba(62,39,35,.3),0 14px 18px -12px rgba(62,39,35,.5);transform:rotate(-1.5deg)}
/* front of the envelope: only seen during the opening */
.env-pocket{top:34%;bottom:3%;display:none;background:#F1E7D5;clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,0 100%);filter:drop-shadow(0 -1px 0 rgba(62,39,35,.5))}
.env-flap{top:34%;height:42%;display:none;background:#E2D4BC;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0}
.inv-play .env-pocket,.inv-play .env-flap{display:block}
.inv-play .env-flap{animation:inv-flap .2s ease-in .15s both}
.inv-play .env-flap-open{animation:inv-flap-o .2s ease-out .35s both}
.inv-play .inv-card{animation:inv-card .65s var(--ease2) .45s both}
.inv-play .env-pocket{animation:inv-fade .3s ease 1s both}
@keyframes inv-flap{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes inv-flap-o{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes inv-card{from{transform:translateY(46%) scale(.86) rotate(0)}to{transform:rotate(-1.5deg)}}
@keyframes inv-fade{to{opacity:0}}

/* ---------- two users ---------- */
.users{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.user{background:var(--paper-card);border:1px solid rgba(62,39,35,.28);padding:14px 16px 18px}
.user .pic{padding:0;border:0;box-shadow:none}
.user h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;margin:14px 0 6px}
.user p{font-size:15.5px;line-height:1.5}
.success{max-width:68ch;font-size:16px;line-height:1.6;margin-top:20px;border-left:3px double var(--ink);padding-left:14px}
.success b{font-weight:600}

/* ---------- house rules ---------- */
.rules{position:relative;border:4px double var(--ink);background:var(--paper-card);padding:26px 30px 22px}
.rules-stamp{position:absolute;right:20px;top:-22px;display:grid;place-items:center;padding:8px 12px 6px;background:var(--paper);border:2px solid var(--pur);color:var(--pur);font-family:var(--type);font-size:12.5px;letter-spacing:.1em;transform:rotate(3deg)}
.rules-lead{font-family:var(--type);font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:6px}
.rules ol{list-style:none;padding:0;counter-reset:r}
.rules li{counter-increment:r;position:relative;padding:12px 0 12px 44px;font-size:16.5px;line-height:1.5;border-top:1px solid var(--hair)}
.rules li:first-child{border-top:0}
.rules li::before{content:counter(r);position:absolute;left:0;top:7px;font-family:var(--serif);font-size:32px;line-height:1.1;font-variant-numeric:lining-nums}
.rules li b{font-weight:600}
.rules-credit{font-family:var(--type);font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);border-top:1px solid var(--rule);padding-top:10px;margin-top:2px}

/* ---------- research to mechanic ---------- */
.mech{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.mech-t{width:100%;border-collapse:collapse;border-top:3px double var(--ink);border-bottom:1px solid var(--ink)}
.mech-t thead th{font-family:var(--type);font-weight:400;font-size:11.5px;letter-spacing:.08em;text-align:left;padding:9px 10px 7px;border-bottom:1px solid var(--ink)}
.mech-t tbody tr + tr th,.mech-t tbody tr + tr td{border-top:1px solid var(--hair)}
.mech-t tbody th{padding:0;font-weight:400;text-align:left;vertical-align:top;width:34%}
.mech-t td{font-size:14.5px;line-height:1.42;padding:10px;vertical-align:top}
.m-row{display:block;width:100%;height:100%;padding:10px;background:none;border:0;color:var(--ink);font-family:var(--serif);font-size:17.5px;line-height:1.2;text-align:left;cursor:pointer}
.m-row:focus-visible{outline:2px solid var(--raspberry);outline-offset:-2px}
.mech-t tr{transition:background-color .2s ease}
.mech-t tr.on{background:var(--paper-card);box-shadow:inset 3px 0 0 var(--pur)}
.m-thumb{display:none}
.mech-prev{margin:0;position:sticky;top:24px}
.mech-prev .pic{padding:8px}

/* ---------- the party, scene by scene ---------- */
.sc-nav{display:flex;justify-content:flex-end;gap:8px;margin:-44px 0 8px}
.sc-btn{display:grid;place-items:center;width:40px;height:40px;background:var(--paper-card);border:1px solid var(--ink);border-radius:50%;color:var(--ink);font-size:17px;cursor:pointer}
.sc-btn:disabled{opacity:.3;cursor:default}
.sc-btn:focus-visible,.sc-strip:focus-visible{outline:2px solid var(--raspberry);outline-offset:3px}
.sc-strip{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;padding:16px 4px 12px}
.sc-strip ol{list-style:none;padding:0;display:flex;gap:24px;width:max-content;align-items:flex-start}
.sc-strip li{flex:none;width:320px;scroll-snap-align:start}
.sc{transform:rotate(var(--tilt))}
.sc .pic{padding:7px}
.sc-open{display:block;width:100%;padding:0;background:none;border:0;cursor:zoom-in}
.sc-open:focus-visible{outline:2px solid var(--raspberry);outline-offset:3px}
.so .sc figcaption{font-family:var(--sans);font-size:14.5px;letter-spacing:0;line-height:1.45;color:var(--ink);margin-top:12px}
.sc figcaption b{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.15;margin-bottom:5px}
.sc-no{display:inline-grid;place-items:center;flex:none;width:23px;height:23px;border-radius:50%;background:var(--pur);color:#fff;font-family:var(--type);font-size:12.5px}
.sc figcaption em{display:block;font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.4;color:var(--ink-soft);margin-top:7px}
.sc figcaption strong{font-weight:600}

/* lightbox */
.lb{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--newsprint);color:var(--ink)}
.lb::backdrop{background:rgba(42,29,26,.6)}
.lb[open]{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center}
.lb figure{margin:0;grid-column:2;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.lb img{display:block;max-width:100%;max-height:calc(100dvh - 130px);width:auto;height:auto;border:1px solid rgba(62,39,35,.3)}
.lb figcaption{font-family:var(--serif);font-size:20px;text-align:center;line-height:1.2}
.lb-close{position:fixed;top:12px;right:14px;z-index:2;font-family:var(--type);font-size:13px;letter-spacing:.06em;background:var(--paper-card);border:1px solid var(--ink);color:var(--ink);padding:9px 14px 7px;cursor:pointer}
.lb-arrow{justify-self:center;width:44px;height:44px;background:var(--paper-card);border:1px solid var(--ink);border-radius:50%;color:var(--ink);font-size:18px;cursor:pointer}
.lb-arrow.prev{grid-column:1;grid-row:1}.lb-arrow.next{grid-column:3;grid-row:1}
.lb figure{grid-row:1}
.lb button:focus-visible{outline:2px solid var(--raspberry);outline-offset:3px}

/* ---------- palette ---------- */
.palette{margin:22px 0 24px}
.skin{height:42px;border:1px solid var(--ink);background:linear-gradient(90deg,#F8CDBF,#F3AD8E,#CB896C,#985F45,#763E2D,#4A2618)}
.pal-src{font-family:var(--type);font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);margin:7px 0 18px}
.hairs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;border-bottom:1px solid var(--pur);padding-bottom:8px}
.hairs img{display:block;width:100%;height:auto}

@media (max-width:1100px){
}
@media (max-width:900px){
  .so-head{grid-template-columns:minmax(0,1fr)}
  .inv{max-width:500px;margin:24px auto 18px}
  .so-facts.cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .so-facts.cs-facts > div:nth-child(n){border-left:0;border-top:0}
  .so-facts.cs-facts > div:nth-child(even){border-left:1px solid var(--rule)}
  .so-facts.cs-facts > div:nth-child(n+3){border-top:1px solid var(--rule)}
  .so-facts .so-tags{grid-column:1 / -1;border-left:0!important}
  .hairs{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:700px){
  .users{grid-template-columns:minmax(0,1fr)}
  .rules{padding:28px 18px 18px}
  .rules li{padding-left:36px;font-size:15.5px}
  /* research to mechanic: rows stack as cards, each with its still */
  .mech{grid-template-columns:minmax(0,1fr)}
  .mech-prev{display:none}
  .mech-t,.mech-t tbody,.mech-t tr,.mech-t tbody th,.mech-t td{display:block;width:auto}
  .mech-t thead{display:none}
  .mech-t{border:0}
  .mech-t tr,.mech-t tr.on{background:var(--paper-card);border:1px solid rgba(62,39,35,.28);box-shadow:none;margin-bottom:12px}
  .mech-t tbody tr + tr th,.mech-t tbody tr + tr td{border-top:0}
  .m-row{cursor:auto;padding:12px 14px 2px;font-size:20px}
  .mech-t td{padding:2px 14px 14px}
  /* scenes: vertical */
  .sc-nav{display:none}
  .sc-strip{overflow:visible;padding:14px 0 0}
  .sc-strip ol{flex-direction:column;width:auto;gap:30px}
  .sc-strip li{width:auto}
  .lb[open]{grid-template-columns:50% 50%;grid-template-rows:minmax(0,1fr) auto;padding-bottom:14px}
  .lb figure{grid-column:1 / -1;padding:50px 8px 0}
  .lb-arrow.prev,.lb-arrow.next{grid-row:2;grid-column:auto}
}
@media (max-width:420px){
  .hairs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .mech-t tr{transition:none}
}

/* =====================================================================
   Part 2: Process, Iteration
   ===================================================================== */
.games{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.gm .pic{padding:4px}
.so .gm figcaption{font-size:11px;letter-spacing:.02em;line-height:1.3;margin-top:6px}
.takes{list-style:none;padding:0;counter-reset:t;max-width:68ch}
.takes li{counter-increment:t;position:relative;padding:9px 0 9px 38px;font-size:16.5px;line-height:1.5;border-top:1px solid var(--hair)}
.takes li:first-child{border-top:0}
.takes li::before{content:counter(t);position:absolute;left:0;top:7px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--pur);color:#fff;font-family:var(--type);font-size:13px}
.takes b{font-weight:600}
.credit-line{font-family:var(--type);font-size:11.5px;letter-spacing:.03em;line-height:1.5;color:var(--ink-soft);margin-top:10px;max-width:68ch}

/* timeline: each stretch of line and its dot draw in as they arrive */
.tl{list-style:none;padding:0}
.tl > li{position:relative;padding:0 0 26px 34px}
.tl > li::before{content:"";position:absolute;left:5px;top:8px;bottom:-8px;width:2px;background:var(--ink);transform-origin:top}
.tl > li:last-child::before{display:none}
.tl > li::after{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--pur);box-shadow:0 0 0 1.5px var(--paper),0 0 0 2.5px var(--ink)}
.anim .tl > li:not(.in)::before{transform:scaleY(0)}
.anim .tl > li:not(.in)::after{transform:scale(0)}
.anim .tl > li:not(.in) > *{opacity:0}
.anim .tl > li.in::before{transition:transform .7s var(--ease) .1s}
.anim .tl > li.in::after{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.anim .tl > li.in > *{transition:opacity .45s ease}
.tl h4{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15;margin:0 0 3px}
.tl p{font-size:15.5px;line-height:1.5;max-width:60ch}
.tl-notes{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.tl-notes li{padding:9px 13px 8px;background:#F4F0B4;box-shadow:0 5px 8px -6px rgba(62,39,35,.55);font-family:var(--hand);font-size:21px;line-height:1;transform:rotate(var(--t))}
.tl-notes b{display:block;font-family:var(--type);font-weight:400;font-size:10.5px;letter-spacing:.06em;margin-bottom:4px}

/* ---------- avatar builder ---------- */
.iter{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:22px;align-items:start}
.av{background:var(--paper-card);border:4px double var(--ink);padding:14px 16px 16px;min-width:0}
.av-title{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;margin:0 0 10px}
/* big segmented control */
.av-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1.5px solid var(--ink)}
.av-seg-b{position:relative;min-height:50px;padding:8px 10px;background:var(--paper-card);border:0;color:var(--ink);font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.2;cursor:pointer}
.av-seg-b + .av-seg-b{border-left:1.5px solid var(--ink)}
.av-seg-b[aria-checked="true"]{background:var(--pur);color:#fff}
.av-seg-b:focus-visible{outline:3px solid var(--raspberry);outline-offset:2px;z-index:1}
.av-seg-b::after{content:"";position:absolute;inset:0;box-shadow:0 0 0 3px var(--pur);opacity:0;pointer-events:none}
.anim .av-seg-b.nudge{animation:av-nudge 1.1s ease}
.anim .av-seg-b.nudge::after{animation:av-ring 1.1s ease}
@keyframes av-nudge{0%,100%{transform:scale(1)}45%{transform:scale(1.035)}}
@keyframes av-ring{0%{opacity:0;transform:scale(1)}40%{opacity:.8}100%{opacity:0;transform:scale(1.06,1.2)}}
.av-cap{font-family:var(--type);font-size:12.5px;letter-spacing:.02em;line-height:1.4;margin:9px 0 12px}
.av-body{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:14px;align-items:stretch}
.av-doll{background:#FDEBC3 url(../images/sokids-web/ui-bg.webp) 14% 0/auto 125% no-repeat;display:flex;align-items:flex-end;justify-content:center;min-height:330px;padding:6px 4px 10px}
#av-canvas{display:block;width:100%;height:auto}
.av-side{display:flex;flex-direction:column;min-width:0}
.av-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.av[data-mode="after"] .av-tabs{display:none}
.av[data-mode="before"] .av-step{display:none}
.av-tab{padding:6px 7px 5px;background:none;border:1px solid var(--rule);color:var(--ink);font-family:var(--type);font-size:11px;letter-spacing:.01em;cursor:pointer}
.av-tab[aria-selected="true"]{background:var(--pur);border-color:var(--pur);color:#fff}
.av-step{font-family:var(--serif);font-size:20px;line-height:1.15;margin:0 0 8px}
.av-book{flex:1;background:#BFE8C3;border:4px solid #FEF9EA;border-radius:16px;padding:10px;box-shadow:0 0 0 1px rgba(62,39,35,.15)}
.av-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.av-opt{position:relative;display:block;aspect-ratio:1;padding:5px;background:#FEF9EA;border:3px solid transparent;border-radius:10px;cursor:pointer;min-width:0}
.av-opt img{display:block;width:100%;height:100%;object-fit:contain}
.av-opt[aria-checked="true"]{border-color:var(--pur)}
.av-opt.sw i{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(62,39,35,.2)}
@media (hover:hover) and (pointer:fine){.av-opt:hover{border-color:rgba(95,90,193,.5)}.av-opt[aria-checked="true"]:hover{border-color:var(--pur)}}
.av-foot{display:flex;align-items:center;gap:8px;margin-top:10px;min-height:48px}
.av-dots{list-style:none;padding:0;display:flex;gap:6px;flex:1;min-width:0}
.av-dots li{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--pur)}
.av-dots li.done{background:var(--pur)}
.av-dots li.now{box-shadow:inset 0 0 0 1.5px var(--pur),0 0 0 2px var(--paper-card),0 0 0 3.5px var(--pur)}
.av[data-mode="before"] .av-dots{visibility:hidden}
.av[data-mode="before"] .av-back{display:none}
.av-next,.av-back{flex:none;width:86px;padding:0;background:none;border:0;cursor:pointer;line-height:0}
.av-next img,.av-back img{display:block;width:100%;height:auto}
.av-back img{transform:scaleX(-1)}
.av-back{width:66px}
.av-back[disabled]{visibility:hidden}
.av-next[aria-disabled="true"]{cursor:not-allowed}
.av-next[aria-disabled="true"] img{filter:grayscale(1) opacity(.42)}
.anim .av-next.pop img{animation:av-pop .46s cubic-bezier(.3,1.6,.5,1)}
@keyframes av-pop{0%{transform:scale(.86)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.av-next.finish img{content:url(../images/sokids-web/d-check.webp);width:50px;margin-left:auto;border-radius:6px}
.av-status{font-family:var(--type);font-size:12.5px;letter-spacing:.02em;line-height:1.4;min-height:2.8em;margin-top:10px}
.av-done{display:none;width:92px;height:auto;margin:auto;border-radius:10px}
.av[data-mode="after"].is-done .av-done{display:block}
.is-done .av-step,.is-done .av-dots,.is-done .av-book,.is-done .av-tabs,.is-done .av-foot{display:none!important}
.av-again{font-family:var(--type);font-size:12px;letter-spacing:.05em;background:none;border:1px solid var(--ink);color:var(--ink);padding:7px 11px 5px;cursor:pointer}
.saw h3{font-family:var(--type);font-weight:400;font-size:12.5px;letter-spacing:.1em;color:var(--ink-soft);margin:0 0 12px}
.saw ul{list-style:none;padding:0;display:grid;gap:12px}
.saw li{padding:10px 12px 9px;background:#F4F0B4;box-shadow:0 6px 9px -7px rgba(62,39,35,.55);font-size:13.5px;line-height:1.38;transform:rotate(var(--t))}
.saw li strong{font-weight:600}
.saw li span{display:block;font-family:var(--type);font-size:10.5px;letter-spacing:.04em;color:var(--ink-soft);margin-top:4px}

/* designing against learning */
.three{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:n;border-top:3px double var(--ink);border-bottom:1px solid var(--ink);margin:22px 0 0}
.three li{counter-increment:n;padding:14px 18px 20px;font-size:16px;line-height:1.42}
.three li:first-child{padding-left:0}
.three li:last-child{padding-right:0}
.three li + li{border-left:1px solid var(--rule)}
.three li::before{content:counter(n);display:block;font-family:var(--serif);font-size:58px;line-height:1;font-variant-numeric:lining-nums;margin-bottom:6px}
.three b{display:block;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.13;margin-bottom:5px}
.three .never::before{color:var(--pur)}

@media (max-width:1100px){
  .iter{grid-template-columns:minmax(0,1fr)}
  .saw ul{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
}
@media (max-width:700px){
  .games{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gm:last-child{grid-column:1 / -1;width:calc(50% - 6px);justify-self:center}
  .av{padding:12px 10px 14px}
  .av-body{grid-template-columns:minmax(0,1fr)}
  /* the avatar stays beside nothing: small and centered above the options */
  .av-doll{min-height:0;height:230px;padding:6px;background-position:10% 65%;background-size:auto 200%}
  #av-canvas{width:auto;height:100%}
  .three{grid-template-columns:minmax(0,1fr)}
  .three li,.three li:first-child,.three li:last-child{padding:14px 0 16px}
  .three li + li{border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:420px){
  .av-opts{gap:5px}
  .av-next{width:76px}
  .av-back{width:58px}
}
@media (prefers-reduced-motion:reduce){
  }

/* =====================================================================
   Part 3: Observations, Outcome
   ===================================================================== */
.obs{list-style:none;padding:0;border-top:3px double var(--ink);border-bottom:1px solid var(--ink);margin-top:22px;max-width:760px}
.obs li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0}
.obs li + li{border-top:1px solid var(--hair)}
.obs p{font-size:16.5px;line-height:1.5}
.obs strong{font-weight:600}
.tmw{font-weight:600}
.res{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}
.res .lede + .lede{margin-top:10px}
.metrics{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.metrics li{background:var(--paper-card);border:1px solid rgba(62,39,35,.28);border-top:3px solid var(--pur);padding:12px 14px 14px;font-size:14px;line-height:1.4}
.metrics b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.15;margin-bottom:5px}
.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center}
.clipping{background:var(--paper-card);border:1px solid rgba(62,39,35,.3);padding:18px 22px 20px;transform:rotate(.8deg);clip-path:polygon(0 1.5%,12% 0,30% 1.2%,52% 0,74% 1%,100% .2%,99.4% 34%,100% 66%,99.3% 100%,74% 98.8%,50% 100%,26% 98.6%,0 100%,.6% 62%,0 30%)}
.clip-k{font-family:var(--type);font-size:11.5px;letter-spacing:.1em;color:var(--raspberry);margin-bottom:8px}
.clipping h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.5vw,31px);line-height:1.14;margin:0 0 10px}
.clip-b{font-size:14.5px;line-height:1.45;border-top:1px solid var(--hair);padding-top:9px}
.tvs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.so .listing{padding:12px 12px 16px;gap:12px}
.so .listing .play span{background:var(--pur)}
.so .listing .tv{font-size:11px;line-height:1.4;letter-spacing:.07em;color:var(--ink-soft)}
.so .listing h3{font-size:23px;margin:4px 0 0}
.listing .screen video{position:absolute;inset:0;width:100%;height:100%;background:var(--ink)}
/* the team: masthead box */
.sr-h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0!important}
/* The Team: a compact credits strip at the end of Outcome */
.credits{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:10px 0 12px}
.credits-h{font-family:var(--serif);font-size:clamp(34px,4.2vw,52px);line-height:1.06;letter-spacing:-.012em;text-align:center;border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:10px}
.credits dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px}
.credits dl > div{display:flex;align-items:center;gap:8px;padding:4px 6px;min-width:0}
.credits dl > div > div{min-width:0}
.credits dt{font-family:var(--serif);font-size:16px;line-height:1.2}
.credits .dd{width:30px;height:30px;flex:none}
.credits dd{margin:2px 0 0;font-family:var(--type);font-size:11.5px;letter-spacing:.02em;line-height:1.35;color:var(--ink-soft)}
.credits .me{background:var(--lime-tape)}
.credits .me dd{color:var(--ink)}

/* crayon doodles */
.dd{display:block;flex:none;overflow:visible}
.dd path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.dd-1 path,.dd-2 path{stroke:var(--ink)}
.dd-1 path{stroke-width:1.9}
.dd-2 path{stroke-width:1.1;opacity:.55}
.dd path.dd-fill{stroke-width:2.5;opacity:.72}
.metrics .dd{margin-bottom:6px}

/* website shapes as a divider band */
.shape-band{height:48px;margin:-24px 0 44px;background:url(../images/sokids-web/band-shapes.webp) 0 50%/auto 48px repeat-x}
.fact-link{color:var(--raspberry);overflow-wrap:anywhere}
.so-facts > div{min-width:0}

/* project website */
.browser{margin:0;border:1px solid var(--ink);background:var(--paper-card);box-shadow:0 14px 24px -18px rgba(62,39,35,.45);max-width:800px}
.br-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--ink)}
.br-bar i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.2px var(--ink)}
.br-bar span{flex:1;min-width:0;margin-left:6px;padding:2px 10px;border:1px solid var(--hair);border-radius:10px;font-family:var(--type);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser img{display:block;width:100%;height:auto}
.browser figcaption{font-size:15px;line-height:1.45;padding:10px 12px;border-top:1px solid var(--ink)}
.browser a{color:var(--raspberry);font-weight:500}

/* art: kids peek over the rule; stars beside the timeline */
.so .cs-article > section{position:relative}
.tl-wrap{position:relative}
.peek .deco img{filter:none}
.anim .peek .deco img{animation:none}
.anim .peek .deco:not(.in){transform:translateY(24px);opacity:0;clip-path:inset(0 0 24px 0)}
.anim .peek .deco.in{transition:opacity .5s ease,transform .9s cubic-bezier(.3,1.2,.4,1)}

/* the fireworks nod: only exists with motion on */
.pop-burst{position:absolute;left:min(440px,62%);top:4px;width:62px;height:66px;display:none;pointer-events:none}
.anim .pop-burst{display:block}
.pop-burst img{position:relative;z-index:1;display:block;width:100%;height:auto;opacity:0}
.pop-burst i{position:absolute;left:50%;top:6px;width:9px;height:9px;border-radius:3px;background:var(--pc);opacity:0}
.pop-burst.go img{animation:pop-in 1.5s ease both}
.pop-burst.go i{animation:pop-out 1.3s cubic-bezier(.15,.7,.3,1) .22s both}
@keyframes pop-in{0%{opacity:0;transform:scale(.3) rotate(-20deg)}18%{opacity:1;transform:scale(1.14) rotate(5deg)}30%{transform:scale(1) rotate(0)}78%{opacity:1}100%{opacity:0;transform:scale(1)}}
@keyframes pop-out{0%{opacity:1;transform:rotate(var(--a)) translateX(0)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) rotate(120deg)}}

@media (max-width:1100px){
  .credits dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:800px){
  .res,.stage{grid-template-columns:minmax(0,1fr)}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .tvs{grid-template-columns:minmax(0,1fr)}
  .credits{padding:12px 10px 14px}
  .credits dl{grid-template-columns:minmax(0,1fr)}
  .pop-burst{left:auto;right:6px;top:-30px;width:48px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  .pop-burst{display:none!important}
}

.av-tab:focus-visible,.av-opt:focus-visible,.av-next:focus-visible,.av-back:focus-visible,.av-again:focus-visible{outline:2px solid var(--raspberry);outline-offset:2px}

/* ---------- logo, website shapes, parallel prototyping ---------- */
.so-logo{display:block;height:clamp(64px,7.6vw,104px);width:auto;max-width:100%;margin:8px 0 2px}
.sh .deco img{filter:drop-shadow(1px 0 0 #FBF6EE) drop-shadow(-1px 0 0 #FBF6EE) drop-shadow(0 1px 0 #FBF6EE) drop-shadow(0 -1px 0 #FBF6EE) drop-shadow(0 3px 3px rgba(62,39,35,.28))}
.anim .sh .deco img{animation:none}
.sit .deco img{filter:drop-shadow(0 -1px 0 #FBF6EE)}
.anim .sit .deco:not(.in){opacity:0;transform:translateY(20px);clip-path:inset(0 0 20px 0)}
.anim .sit .deco.in{transition:opacity .5s ease,transform .9s cubic-bezier(.3,1.2,.4,1),clip-path .9s ease}
.why2{margin-top:26px}
.why2 > div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.why2 > div > div{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;align-items:start}
.why2 p{margin-top:3px}
.why2 .dd{grid-row:1 / span 2}
.why2 h4{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.15;margin:0}
.why2 p{font-size:15px;line-height:1.45}
.why2 strong{font-weight:600}
@media (max-width:900px){
}
@media (max-width:700px){
  .so-logo{height:58px}
  .why2 > div{grid-template-columns:minmax(0,1fr)}
  .shape-band{background-size:auto 36px;height:36px}
}

/* ---------- from paper to digital: a stack of taped sheets ---------- */
.flip{display:grid;justify-items:center;gap:6px;margin-top:10px}
.stack{position:relative;width:min(640px,100%);aspect-ratio:16/10.4;margin:14px 0 26px;touch-action:pan-y;outline:none}
.stack:focus-visible{outline:2px solid var(--raspberry);outline-offset:10px}
.sheet{--d:0;position:absolute;inset:0;margin:0;padding:3.4% 3.4% 4%;background:#fff;box-shadow:0 1px 0 rgba(62,39,35,.18),0 10px 16px -12px rgba(62,39,35,.5);
  transform:translate(calc(var(--d) * 8px),calc(var(--d) * 7px)) rotate(calc(var(--r) + var(--d) * .9deg));transition:transform .55s var(--ease),opacity .45s ease}
.sheet::before{content:"";position:absolute;z-index:2;top:0;left:50%;width:96px;height:auto;aspect-ratio:var(--kt-ar);margin-left:-48px;background:var(--kt) center/100% 100% no-repeat;opacity:var(--kt-o);transform:translateY(-50%) rotate(var(--tape-r,var(--kt-r)))}
.sheet.far{opacity:0}
.sheet.gone{transform:translate(-112%,-6%) rotate(-10deg);opacity:0;pointer-events:none}
.sheet-art{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(62,39,35,.15)}
.sheet-art img{position:absolute;inset:0;width:100%;height:100%;display:block}
.sheet .digital{clip-path:inset(0 100% 0 0);transition:clip-path .65s var(--ease)}
.sheet.dig .digital{clip-path:inset(0 0 0 0)}
.end-note{display:grid;place-content:center;gap:12px;text-align:center;background:var(--paper-card);padding:0 8%}
.end-note span{font-family:var(--serif);font-size:clamp(20px,2.6vw,30px);line-height:1.2}
.end-note a{font-family:var(--type);font-size:13px;letter-spacing:.04em;color:var(--raspberry)}
.edge{position:absolute;z-index:30;top:0;bottom:0;width:16%;display:flex;align-items:center;padding:0 6px;background:none;border:0;color:var(--ink);font-size:22px;cursor:pointer;opacity:.0;transition:opacity .2s ease}
.edge.prev{left:-6%;justify-content:flex-start}.edge.next{right:-6%;justify-content:flex-end}
.edge span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper-card);border:1px solid var(--ink)}
.stack:hover .edge,.edge:focus-visible{opacity:1}
.edge:focus-visible span{outline:2px solid var(--raspberry);outline-offset:2px}
.edge[disabled]{visibility:hidden}
@media (hover:none){.edge{opacity:1}}
.fl-bar{display:grid;justify-items:center;gap:4px}
.fl-count{font-family:var(--type);font-size:14px;letter-spacing:.06em}
.fl-name{font-family:var(--serif);font-size:20px;line-height:1.2;text-align:center}
/* what each scene measures (merged in from the old research-to-mechanic table) */
.fl-meas{max-width:52ch;text-align:center;font-size:15px;line-height:1.45;color:var(--ink);margin-top:2px}
.fl-meas b{font-family:var(--type);font-weight:400;font-size:12px;letter-spacing:.08em;color:var(--pur);text-transform:uppercase}
.fl-seg{width:min(300px,100%);margin-top:8px}
.fl-seg[hidden]{display:none}
.paper-tv{max-width:520px;margin:30px auto 0}
.paper-tv .screen{aspect-ratio:960/778}

/* ---------- parallel prototyping: two ink diagrams ---------- */
.pp2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch;border-top:3px double var(--ink);padding-top:16px}
.ppc{display:flex;flex-direction:column;background:var(--paper-card);border:1px solid rgba(62,39,35,.28);padding:16px 18px 18px;min-width:0}
.ppc h4{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.25;margin:0}
.ppk{font-family:var(--type);font-size:11.5px;letter-spacing:.12em;color:var(--pur);margin-top:6px}
.dwrap{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 0}
.dwrap svg{display:block;width:100%;height:auto;overflow:visible}
.d2{max-width:330px}
.dwrap text{font-family:var(--type);font-size:12.5px;fill:var(--ink)}
.dwrap .dh text{text-anchor:start;font-size:21px}
.dwrap .dh .tag{font-size:16px;text-anchor:middle}
.dwrap .d2 text:not([text-anchor]){text-anchor:middle}
.dwrap .l{text-anchor:start}
.dwrap .tag{font-size:9.5px;letter-spacing:.1em;fill:var(--pur)}
.dwrap .ln,.dwrap line{stroke:var(--ink);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.dwrap .stop{fill:var(--paper-card);stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dwrap .node-sh{fill:var(--pur);stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dwrap .hub{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.dwrap .hubt{font-family:var(--serif);font-size:15px}
.dwrap .runner,.dwrap .runner2{fill:var(--pur);opacity:0}
.dwrap .dv{display:none;max-width:260px}
.ppc dl{margin:6px 0 0;border-top:1px solid var(--ink)}
.ppc dl > div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--hair)}
.ppc dt{font-family:var(--type);font-size:11.5px;letter-spacing:.05em;color:var(--ink-soft);padding-top:2px}
.ppc dd{margin:0;font-size:15px;line-height:1.4}
/* motion: plays once when the cards arrive */
.anim .pp2:not(.in) .dh .draw{clip-path:inset(0 100% 0 0)}
.anim .pp2:not(.in) .dv .draw{clip-path:inset(0 0 100% 0)}
.anim .pp2.in .draw{clip-path:inset(0 0 0 0);transition:clip-path 1.8s linear}
.anim .pp2.in .runner{animation:pp-run 1.8s linear both}
.anim .pp2.in .runner.v{animation-name:pp-run-v}
@keyframes pp-run{0%{opacity:1;transform:translateX(0)}92%{opacity:1}100%{opacity:0;transform:translateX(var(--run))}}
@keyframes pp-run-v{0%{opacity:1;transform:translateY(0)}92%{opacity:1}100%{opacity:0;transform:translateY(var(--run))}}
.spoke{transform-box:view-box;transform-origin:170px 205px}
.anim .pp2:not(.in) .spoke{transform:scale(0);opacity:0}
.anim .pp2.in .spoke{transition:transform .6s cubic-bezier(.3,1.3,.5,1),opacity .3s ease;transition-delay:calc(.3s + var(--k) * 110ms)}
.anim .pp2.in .runner2{animation:pp-hub 1.6s ease-in-out 1.3s both}
@keyframes pp-hub{0%{opacity:1;transform:translateX(0)}50%{opacity:1;transform:translateX(56px)}95%{opacity:1;transform:translateX(0)}100%{opacity:0}}
@media (max-width:900px){
  .pp2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .dwrap .dh{display:none}.dwrap .dv{display:block}
  .stack{width:100%;margin:12px 0 22px}
  .sheet{transform:rotate(var(--r))}
  .sheet.far,.sheet:not(.top){opacity:0}
  .sheet.gone{transform:translate(-112%,-4%) rotate(-8deg)}
  .edge{width:20%}
  .edge.prev{left:-2%}.edge.next{right:-2%}
  .edge span{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .sheet,.sheet .digital,.edge{transition:none}
}

/* ---------- reading first: the research pile ---------- */
.research{margin-bottom:52px}
.piles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start;margin-top:8px}
.piles{--room:110px}
.pile{position:relative;min-width:0;padding-top:var(--room)}
.pile-h{position:absolute;left:0;right:0;top:calc(var(--room) - 34px);font-family:var(--type);font-size:12px;letter-spacing:.06em;line-height:1.3;color:var(--ink)}
.pile-st{position:relative;--off:16px;--lift:70px}
.ps{position:absolute;left:0;right:0;top:calc(var(--k) * var(--off));z-index:calc(20 - var(--k));height:var(--h,170px);padding:14px 14px 12px;background:var(--paper-tex);border:1px solid rgba(62,39,35,.35);box-shadow:0 2px 4px -1px rgba(62,39,35,.22);
  transform:rotate(var(--rot));transform-origin:80% 100%;transition:transform .25s ease-out,box-shadow .25s ease-out;transition-delay:var(--dl,0ms);outline:none;cursor:default}
.ps.up{transform:translateY(calc(var(--lift) * -1)) rotate(calc(var(--rot) - 1.5deg));box-shadow:0 14px 18px -10px rgba(62,39,35,.45)}
.ps:focus-visible{box-shadow:0 0 0 2px var(--raspberry),0 2px 4px -1px rgba(62,39,35,.22)}
.ps.up:focus-visible{box-shadow:0 0 0 2px var(--raspberry),0 14px 18px -10px rgba(62,39,35,.45)}
.ps-in{position:absolute;left:14px;right:14px;bottom:calc(var(--off) + 10px)}
.ps h4{font-family:var(--serif);font-weight:400;font-size:15.5px;line-height:1.22;margin:0}
.ps .src{font-family:var(--type);font-size:10.5px;letter-spacing:.02em;line-height:1.35;color:var(--ink-soft);margin-top:5px}
.ps .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ps .who{font-family:var(--type);font-size:10.5px;letter-spacing:.04em;line-height:1;padding:3px 6px 2px;background:var(--pur);color:#fff}
.ps .who.mine{background:none;color:var(--pur);box-shadow:inset 0 0 0 1px var(--pur)}
.ps .tk{font-size:13px;line-height:1.38;margin-top:7px}
.ps strong{font-weight:600}
.pclip{position:absolute;right:16px;top:-14px;z-index:2}
/* the takeaway of the paper being read, under its pile */
.pile-tk{min-height:5.5em;font-size:13.5px;line-height:1.4;margin-top:calc((var(--n-1,3)) * 0px + 12px);padding-top:8px;border-top:1px solid var(--hair)}
.pile-tk strong{font-weight:600}
.anim .ps .tk{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* in the pile each sheet shows its title (up to three lines); source and takeaway of the paper being read sit in the slip under the pile */
.anim .ps .src{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.anim .ps h4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.pile-tk .s{display:block;font-family:var(--type);font-size:11px;letter-spacing:.02em;color:var(--ink-soft);margin-bottom:4px}
.pile-tk .t{display:block;font-family:var(--serif);font-size:15px;line-height:1.25;margin-bottom:4px}
html:not(.anim) .pile{padding-top:0}
html:not(.anim) .pile-h{position:static;margin-bottom:10px}
html:not(.anim) .pile-st{display:grid;gap:8px}
html:not(.anim) .ps{position:relative;top:auto;height:auto;transform:none;transition:none}
html:not(.anim) .ps-in{position:static}
html:not(.anim) .pclip{display:none}
html:not(.anim) .pile-tk{display:none}
.research .pull{margin-top:30px}
@media (max-width:1100px){
  .piles{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
}
@media (max-width:600px){
  .piles{grid-template-columns:minmax(0,1fr)}
  .pile-st{--off:10px;--lift:48px}
}

/* ---------- designing for children who can't read yet ---------- */
.vo-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:10px}
.vo-frame{margin:0;min-width:0}
.vo-scr,.sc-wrap{position:relative;display:block}
.vo-scr{background:var(--paper-card);padding:6px;border:1px solid rgba(62,39,35,.28);box-shadow:0 10px 18px -14px rgba(62,39,35,.5)}
.vo-scr img{display:block;width:100%;height:auto}
.vo{position:absolute;right:12px;bottom:12px;z-index:3;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--pur);cursor:pointer;box-shadow:0 0 0 2px #fff,0 4px 10px -4px rgba(0,0,0,.5)}
.vo:focus-visible{outline:3px solid var(--raspberry);outline-offset:3px}
.vo-ring{position:absolute;inset:0;width:100%;height:100%}
.vo-ring circle{fill:none;stroke:rgba(255,255,255,.28);stroke-width:2.5}
.vo .ic{position:absolute;left:50%;top:50%;width:14px;height:16px;margin:-8px 0 0 -5px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.vo.on .ic{margin-left:-6px;clip-path:polygon(0 0,38% 0,38% 100%,0 100%,0 0,62% 0,100% 0,100% 100%,62% 100%,62% 0)}
/* progress ring: two halves turned by transform only */
.pr{position:absolute;inset:0;opacity:0}
.vo.on .pr{opacity:1}
.pr .h{position:absolute;inset:0}
.pr .r{clip-path:inset(0 0 0 50%)}
.pr .l{clip-path:inset(0 50% 0 0)}
.pr i{position:absolute;inset:1px;border-radius:50%;border:2.5px solid #fff;transform:rotate(var(--a,0deg))}
.pr .r i{clip-path:inset(0 50% 0 0)}
.pr .l i{clip-path:inset(0 0 0 50%)}
.vo-cap{display:block;font-family:var(--type);font-size:12.5px;letter-spacing:.02em;line-height:1.4;min-height:2.8em;margin-top:8px;opacity:0;transition:opacity .25s ease}
.playing .vo-cap{opacity:1}
.vo-note{font-family:var(--type);font-size:12.5px;letter-spacing:.03em;line-height:1.5;color:var(--ink-soft);margin-top:4px;max-width:68ch}
.sc-wrap .vo{right:14px;bottom:14px}
.dc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:start;margin-top:26px}
.dc-t{width:100%;border-collapse:collapse;border-top:3px double var(--ink);border-bottom:1px solid var(--ink)}
.dc-t thead th{font-family:var(--type);font-weight:400;font-size:11.5px;letter-spacing:.08em;text-align:left;padding:9px 10px 7px 0;border-bottom:1px solid var(--ink)}
.dc-t tbody tr{outline:none;transition:background-color .2s ease}
.dc-t tbody tr + tr > *{border-top:1px solid var(--hair)}
.dc-t tbody th{font-weight:400;text-align:left;vertical-align:top;padding:10px 12px 10px 0;width:26%}
.dc-h{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:17px;line-height:1.2}
.dc-h .dd{width:40px;height:40px}
.dc-t td{font-size:14px;line-height:1.45;padding:10px 12px 10px 0;vertical-align:top}
.dc-t td + td{padding-right:0}
.dc-t strong{font-weight:600}
.dc-t tbody tr.on{background:rgba(251,246,238,.9)}
.dc-t tbody tr:focus-visible{box-shadow:inset 0 0 0 2px var(--raspberry)}
.dc-ex{position:sticky;top:30px;margin:0;opacity:0;transition:opacity .25s ease}
.dc-ex.on{opacity:1}
.dc-ex img{display:block;width:100%;height:auto;border:1px solid rgba(62,39,35,.25);background:var(--paper-card)}
.dc-ex img.lock{filter:grayscale(1) opacity(.45)}
@media (max-width:900px){
  .vo-row{grid-template-columns:minmax(0,1fr);max-width:480px}
  .dc{grid-template-columns:minmax(0,1fr)}
  .dc-ex{display:none}
  .dc-t,.dc-t tbody,.dc-t tr,.dc-t tbody th,.dc-t td{display:block;width:auto}
  .dc-t thead{display:none}
  .dc-t{border:0}
  .dc-t tbody tr{background:var(--paper-card);border:1px solid rgba(62,39,35,.28);padding:12px 14px;margin-bottom:12px}
  .dc-t tbody tr + tr > *{border-top:0}
  .dc-t tbody th,.dc-t td{padding:0}
  .dc-t td{margin-top:8px}
  .dc-t td::before{content:attr(data-l);display:block;font-family:var(--type);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:2px}
}
@media (prefers-reduced-motion:reduce){
  .vo-cap,.dc-ex,.dc-t tbody tr{transition:none}
}
/* top sheet of each research pile: Angie's torn note with a paper clip (shared/collage.css);
   a smaller clip than the About page, and the text wraps before it */
.ps.note-paper.note-paper.note-paper{border-image-width:50px 46px 18px 10px;padding-right:48px}
.ps.note-paper .ps-in{right:46px}
.pile .pclip{display:none}   /* the note brings its own paper clip */
/* iteration result line */
.result{margin-top:18px;padding:12px 16px;border-left:3px solid var(--pur);max-width:62ch;font-size:16.5px;line-height:1.55;background:rgba(251,246,238,.6)}
.result b{font-family:var(--type);font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* ================= review fixes (Nov 2026) ================= */
/* former h4s: same look, no longer headings (two heading levels per section) */
.tl .h4{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15;margin:0 0 3px}
.why2 .h4{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.15;margin:0}
.ppc .h4{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.25;margin:0}
.ps .h4{font-family:var(--serif);font-weight:400;font-size:15.5px;line-height:1.22;margin:0}
.anim .ps .h4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* at a glance, under the facts strip */
.glance{grid-column:1 / -1;margin-top:26px;border:1px solid var(--ink);background:var(--paper-card);padding:16px 22px 18px}
.glance-h{font-family:var(--type);font-size:13px;letter-spacing:.12em;color:#9A1F4E;margin-bottom:10px}
.glance dl{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.glance dl > div{padding:0 18px}
.glance dl > div:first-child{padding-left:0}
.glance dl > div + div{border-left:1px solid var(--hair)}
.glance dt{font-family:var(--serif);font-size:19px;margin-bottom:4px}
.glance dd{margin:0;font-size:15px;line-height:1.5}
@media (max-width:900px){ .glance dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:14px} .glance dl > div:nth-child(3){padding-left:0;border-left:0} }
@media (max-width:600px){ .glance dl{grid-template-columns:minmax(0,1fr)} .glance dl > div{padding:0;border-left:0 !important} .glance dl > div + div{border-top:1px solid var(--hair);padding-top:12px} }

/* research and games: summary + takeaways, the full set behind a button */
.sum-takes{margin:6px 0 16px;padding-left:20px;display:grid;gap:4px;font-size:17px;line-height:1.5;max-width:62ch}
.more-btn{font:inherit;font-family:var(--type);font-size:13.5px;letter-spacing:.06em;color:var(--ink);background:var(--paper-card);border:1px solid var(--ink);padding:9px 14px;min-height:44px;cursor:pointer}
.more-btn::after{content:" ↓";color:#9A1F4E}
.more-btn[aria-expanded="true"]::after{content:" ↑"}
.more-btn:hover{border-color:var(--raspberry)}
.more-btn:focus-visible{outline:2px solid var(--raspberry);outline-offset:3px}
.more-body{margin-top:22px}
.more-body .games{margin-top:6px}

/* Prototype 1 diagram: horizontal labels, alternating above and below the line */
.dwrap .dh .lab.hz text{text-anchor:middle;font-size:22.5px;font-family:var(--sans)}
.dwrap .dh .lab.hz .tag{font-family:var(--type)}
.dwrap svg.d1{max-width:600px}

/* decorations live in the right margin, never on text; hidden where there's no margin */
.so .deco-spot .deco{right:auto;left:calc(100% + 28px);top:var(--y,0)}
.so .deco-spot.sit .deco{top:-20px}
@media (max-width:1320px){ .so .deco-spot{display:none} }

/* reveals: at most 300ms */

/* captions, notes and labels that carry meaning: at least 13px */
.so :is(.so-badge,.by-label,.pile-h,.ps .src,.credit-line,.ppk,.rules-lead,.rules-credit,.tv,.pal-src,.vo-note,.av-cap,.av-tab,.clip-k,.kick,.result b,.ppc dt,.ppc dd,.cs-tags span,.dc-t th,.credits dd,.games figcaption,.tl-notes b,.so-facts dt,figcaption){font-size:13px}
.so .ps .src i{font-size:inherit}
.so main h3:not([class]){font-size:max(13px,1rem)}
.so .saw li span,.so main li > span:last-child:not([class]){font-size:13px}

/* reveals: start at 10% into the window (data-reveal on body), last at most 300ms; none under reduced motion */
.anim .so .printed [data-print],.anim .so [data-print].printed,
.anim .so .cs-article h2.printed,.anim .so .pull.revealed span,.anim .so .deco.in,
.anim .so .tl > li.in *,.anim .so .tl-notes,.anim .so .pp2.in .draw{transition-duration:.3s !important;transition-delay:0s !important}
.anim .so .pp2.in .draw{animation-duration:.3s !important}
.anim .so .clip.printed .pic img,.anim .so .tl > li.in::before,.anim .so .tl > li.in::after,.anim .so .tl > li.in > *,.anim .so .pp2.in g,.anim .so .pp2.in .draw *{transition-duration:.3s !important;transition-delay:0s !important}
.so .fl-meas b{font-size:13px}