/* v1 — News + Learn in ONE card: the daily paper (left) and the whiteboard (right). Phones stack them with a clear divider. */
html body #news .av-grid:has(.av-duo){display:block}
html body #news .av-duo{display:grid;grid-template-columns:minmax(0,1.04fr) 1px minmax(0,1fr);width:min(1500px,calc(100vw - 40px));max-width:none;position:relative;left:50%;transform:translateX(-50%);margin:6px 0 0;border-radius:30px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#f7faff 0%,#eaf1ff 52%,#f8f4ec 100%);border:1px solid rgba(36,81,201,.16);box-shadow:0 36px 70px -34px rgba(15,31,74,.45),0 2px 0 rgba(255,255,255,.8) inset}
html[data-theme="dark"] body #news .av-duo{background:linear-gradient(160deg,#0b1430 0%,#0a1227 52%,#17120c 100%);border-color:rgba(93,150,255,.26);box-shadow:0 40px 80px -36px rgba(0,0,0,.8),0 1px 0 rgba(168,200,255,.12) inset}
html body #news .av-duo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 8% 0%,rgba(93,150,255,.20),transparent 70%),radial-gradient(55% 50% at 96% 100%,rgba(214,150,70,.18),transparent 70%)}
html body #news .av-pane{display:flex;flex-direction:column;gap:18px;min-width:0;padding:26px 26px 30px}
html body #news .av-pane-head{display:flex;align-items:center;gap:14px}
html body #news .av-pane-ic{flex:0 0 auto;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;box-shadow:0 10px 22px -8px rgba(15,31,74,.55),inset 0 1px 0 rgba(255,255,255,.35)}
html body #news .av-pane-news .av-pane-ic{background:linear-gradient(145deg,#5d96ff,#2451c9 60%,#16318a)}
html body #news .av-pane-learn .av-pane-ic{background:linear-gradient(145deg,#e0a35a,#b9762d 60%,#7e4a17);box-shadow:0 10px 22px -8px rgba(90,50,10,.6),inset 0 1px 0 rgba(255,255,255,.4)}
html body #news .av-pane-ic::before{content:"";width:26px;height:26px;background:center/contain no-repeat}
html body #news .av-pane-news .av-pane-ic::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h13a1 1 0 0 1 1 1v13H6a2 2 0 0 1-2-2V5z'/><path d='M18 9h2a0 0 0 0 1 0 0v8a2 2 0 0 1-2 2'/><path d='M7 9h8M7 12h8M7 15h5'/></svg>")}
html body #news .av-pane-learn .av-pane-ic::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='12' rx='1.5'/><path d='M8 20l4-4 4 4M7 8h6M7 11h9'/></svg>")}
html body #news .av-pane-tx{min-width:0}
html body #news .av-pane-title{font-family:Lato,Arial,sans-serif;font-size:24px;font-weight:900;letter-spacing:-.01em;line-height:1.1;color:var(--text,#0f1f4a)}
html[data-theme="dark"] body #news .av-pane-title{color:#eaf1ff}
html body #news .av-pane-news .av-pane-title{background:linear-gradient(90deg,#2451c9,#5d96ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html body #news .av-pane-learn .av-pane-title{background:linear-gradient(90deg,#a1611f,#e0a35a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html body #news .av-pane-sub{margin-top:4px;font-family:Lato,Arial,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft,#51608a);opacity:.9}
html[data-theme="dark"] body #news .av-pane-sub{color:#9fb4e6}
html body #news .av-pane-body{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
html body #news .av-pane-body>.av-card{width:100%;max-width:100%!important;margin:0!important}
html body #news .av-duo .av-np{max-width:100%!important;margin:0!important}
html body #news .av-duo .lb-series{width:100%;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
html body #news .av-pane-wait{margin:0;padding:46px 18px;text-align:center;font-size:15px;line-height:1.6;color:var(--text-soft,#51608a);border:1px dashed rgba(36,81,201,.3);border-radius:18px;width:100%;box-sizing:border-box}
html[data-theme="dark"] body #news .av-pane-wait{color:#9fb4e6;border-color:rgba(93,150,255,.35)}
/* the seam between the two halves: a thin line with a glowing diamond, like the hinge of a folder */
html body #news .av-duo-seam{position:relative;margin:30px 0;background:linear-gradient(180deg,transparent,rgba(93,150,255,.55) 20%,rgba(214,150,70,.55) 80%,transparent)}
html body #news .av-duo-seam::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-6px 0 0 -6px;transform:rotate(45deg);border-radius:2px;background:linear-gradient(135deg,#5d96ff,#e0a35a);box-shadow:0 0 14px rgba(93,150,255,.7)}
@media (max-width:900px){
  html body #news .av-duo{grid-template-columns:1fr;border-radius:22px;margin-top:2px;width:100%;left:0;transform:none}
  html body #news .av-pane{padding:18px 12px 22px;gap:14px}
  html body #news .av-pane-ic{width:42px;height:42px;border-radius:13px}
  html body #news .av-pane-ic::before{width:23px;height:23px}
  html body #news .av-pane-title{font-size:21px}
  html body #news .av-pane-sub{font-size:10.5px}
  html body #news .av-pane-head{padding:0 6px}
  html body #news .av-duo-seam{height:1px;width:auto;margin:2px 22px;background:linear-gradient(90deg,transparent,rgba(93,150,255,.6) 20%,rgba(214,150,70,.6) 80%,transparent)}
  html body #news .av-pane-learn{background:linear-gradient(180deg,rgba(214,150,70,.08),transparent 40%)}
}
@media (prefers-reduced-motion:no-preference){
  html body #news .av-duo .av-pane{animation:avDuoIn .8s cubic-bezier(.16,.8,.24,1) both}
  html body #news .av-duo .av-pane-learn{animation-delay:.12s}
}
@keyframes avDuoIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* v2: scenes */
html body #news .av-news-scene{width:100%;max-width:680px;margin:0 auto;display:flex;flex-direction:column}
html body #news .av-reader{position:relative;pointer-events:none;margin:0 0 -34px}
html body #news .av-reader-back{position:relative;z-index:1}
html body #news .av-reader-front{position:absolute;left:0;right:0;bottom:0;z-index:6}
html body #news .av-reader svg{display:block;width:100%;height:auto}
html body #news .av-news-scene .av-np{position:relative;z-index:3}
html body #news .av-news-scene .av-np{max-width:100%!important;margin:0!important}
html body #news .av-steam path{animation:avSteam 3.4s ease-in-out infinite}
html body #news .av-steam path:nth-child(2){animation-delay:1.1s}
@keyframes avSteam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-8px)}}
@media (max-width:900px){
  html body #news .av-reader{margin-bottom:-28px}
}
@media (prefers-reduced-motion:reduce){html body #news .av-steam path{animation:none;opacity:.6}}

/* v3 (desktop): a long portrait newspaper (5:7) and a wide landscape board (16:9) like a real classroom */
@media (min-width:901px){
  html body #news .av-duo{grid-template-columns:minmax(0,.86fr) 1px minmax(0,1.14fr)}
  html body #news .av-news-scene{max-width:660px}
  html body #news .av-duo .np-stack{container-type:inline-size}
  html body #news .av-duo .np-front{min-height:104cqw;box-sizing:border-box}
  html body #news .av-duo .np-deck{font-size:clamp(16px,1.3vw,20px);line-height:1.45}
  html body #news .av-duo .np-headline{font-size:clamp(22px,2.1vw,31px);margin:4px 0 12px}
  html body #news .av-duo .av-lb .lb-text{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"k k" "t d" "l d" "b d" "f f";column-gap:24px;align-content:start}
  html body #news .av-duo .av-lb .lb-kicker{grid-area:k;font-size:clamp(22px,2vw,28px)}
  html body #news .av-duo .av-lb .lb-title{grid-area:t;font-size:clamp(30px,3.3vw,50px)}
  html body #news .av-duo .av-lb .lb-line{grid-area:l;margin-bottom:12px}
  html body #news .av-duo .av-lb .lb-dia{grid-area:d;align-self:center;width:100%;height:auto}
  html body #news .av-duo .av-lb .lb-body{grid-area:b;font-size:clamp(23px,2.3vw,33px)}
  html body #news .av-duo .av-lb .lb-foot{grid-area:f;margin-top:10px}
  html body #news .av-duo .av-lb .lb-board{aspect-ratio:16/10;min-height:0;padding:22px 30px 18px}
}

/* one alarm clock */
html body #news .av-clocks{display:flex;justify-content:center;margin:0 0 12px}
html body #news .av-clk{display:flex;flex-direction:column;align-items:center;gap:6px}
html body #news .av-clk svg{display:block;width:clamp(64px,7vw,96px);height:auto;filter:drop-shadow(0 5px 7px rgba(0,0,40,.35))}
html body #news .ck-bell path{fill:#e0a35a;stroke:#85633d;stroke-width:2}
html body #news .ck-hammer{fill:#85633d}
html body #news .ck-legs{stroke:#85633d}
html body #news .ck-body{fill:#2451c9;stroke:#16318a;stroke-width:3}
html body #news .ck-face{fill:#fbfdff}
html body #news .ck-ticks{stroke:#1b2a55}
html body #news .ck-h,html body #news .ck-m{stroke:#10213f}
html body #news .ck-s{stroke:#d8222a}
html body #news .ck-pin{fill:#d8222a}
html body #news .ck-led{font-family:"Share Tech Mono","Courier New",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:clamp(14px,1.5vw,19px);font-weight:700;letter-spacing:.08em;color:#7be3ff;background:linear-gradient(180deg,#0a1431,#0f1f4a);border:2px solid #2451c9;border-radius:8px;padding:3px 10px;box-shadow:inset 0 0 10px rgba(93,150,255,.35);text-shadow:0 0 8px rgba(123,227,255,.8);min-width:8ch;text-align:center}
html[data-theme="dark"] body #news .ck-face{fill:#e9f0ff}

/* the paper sits on a wooden table, centred in its half, with space around it (not glued to the edges) */
@media (min-width:901px){
  html body #news .av-pane-news{padding:26px 26px 0}
  html body #news .av-pane-news .av-pane-body{flex:1 1 auto;justify-content:center;padding:14px 22px 46px;position:relative;margin:0 -26px;
    background:linear-gradient(180deg,transparent 0,transparent 58%,rgba(133,99,61,.0) 58%),linear-gradient(180deg,transparent 0 60%,#b98a4d 60% 62%,#c9985a 62% 100%)}
  html[data-theme="dark"] body #news .av-pane-news .av-pane-body{background:linear-gradient(180deg,transparent 0 60%,#6b4a26 60% 62%,#7a5630 62% 100%)}
  html body #news .av-news-scene{max-width:640px;padding:0}
}
@media (max-width:900px){
  html body #news .av-news-scene{padding:0 6px}
  html body #news .av-pane-news .av-pane-body{padding-bottom:18px}
}

/* Learn classroom. The real lesson board stays in document flow on the back wall. */
html body #news .av-pane-learn{
  --room-wall:var(--blue-2);
  --room-side:var(--blue-1);
  --room-ceiling:color-mix(in srgb,var(--blue-2),var(--blue-3) 28%);
  --room-trim:var(--blue-3);
  --room-light:var(--blue-5);
  --room-line:color-mix(in srgb,var(--blue-4),var(--blue-1) 65%);
  --room-floor-far:var(--blue-2);
  --room-floor-near:var(--blue-1);
  --room-aisle:color-mix(in srgb,var(--blue-3),var(--blue-1) 38%);
  --room-desk:color-mix(in srgb,var(--blue-5),var(--blue-2) 38%);
  --room-chair:color-mix(in srgb,var(--em-2),var(--blue-1) 38%);
  padding:0;gap:0;background:var(--room-side);
}
html[data-theme="light"] body #news .av-pane-learn{
  --room-wall:var(--light-bg-2);
  --room-side:color-mix(in srgb,var(--blue-5),var(--blue-4) 24%);
  --room-ceiling:var(--text-main);
  --room-light:var(--text-main);
  --room-line:var(--blue-5);
  --room-floor-far:var(--blue-5);
  --room-floor-near:color-mix(in srgb,var(--blue-5),var(--blue-3) 30%);
  --room-aisle:color-mix(in srgb,var(--blue-4),var(--blue-5) 36%);
  --room-desk:var(--light-bg-2);
  --room-chair:var(--orange);
}
html body #news .av-pane-learn .av-pane-head{padding:18px 26px 12px;background:var(--bg)}
html body #news .av-pane-learn .av-pane-body{flex:1;align-items:stretch;gap:0}
html body #news .av-pane-learn .lb-series{padding:0 26px 10px;background:var(--bg)}
html body #news .av-class{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
html body #news .av-class-ceiling svg,
html body #news .av-class-floor svg{display:block;width:100%;height:100%}
html body #news .av-class-ceiling{height:clamp(36px,6vw,76px)}
html body #news .av-class-wall{
  position:relative;isolation:isolate;padding:0 12% 12px;
  background:linear-gradient(90deg,transparent 12%,var(--room-wall) 12% 88%,transparent 88%);
  border-bottom:3px solid var(--room-trim);
}
html body #news .av-class-windows{position:absolute;inset:0 0 0 88%;z-index:-1;pointer-events:none}
html body #news .av-class-windows svg{display:block;width:100%;height:100%}
html body #news .av-class .av-clocks{margin:0 0 8px}
html body #news .av-class .av-clk{gap:3px}
html body #news .av-class .av-clk svg{width:clamp(36px,4vw,52px)}
html body #news .av-class .ck-led{font-size:12px;padding:2px 6px}
html body #news .av-class .av-card{width:100%;margin:0!important;max-width:none!important}
html body #news .av-duo .av-class .av-lb .lb-board{aspect-ratio:auto;min-height:0}
html body #news .av-class-floor{flex:1 0 auto;aspect-ratio:600/254}
@media (max-width:600px){
  html body #news .av-pane-learn .av-pane-head{padding:14px 16px 10px}
  html body #news .av-class-wall{padding-inline:5%;background:linear-gradient(90deg,transparent 5%,var(--room-wall) 5% 95%,transparent 95%)}
  html body #news .av-class-windows{left:95%}
}

/* Learn entrance and perspective. The live board sits on the back wall. */
html body #news .av-class{
  position:relative;
  perspective:1000px;
  perspective-origin:50% 38%;
  background:var(--room-side);
}
html body #news .av-class-scene{
  display:flex;
  flex:1;
  flex-direction:column;
  transform-style:preserve-3d;
  transform-origin:50% 36%;
  transform:scale(1.015) rotateX(var(--room-rx,0deg)) rotateY(var(--room-ry,0deg));
  transition:transform .28s ease-out;
}
html body #news .av-class.has-entry .av-class-scene{transform:scale(.88) translateZ(-65px)}
html body #news .av-class.is-entering .av-class-scene{
  transform:scale(1.015) translateZ(0);
  animation:avWalkIntoClass 1.65s both;
}
html body #news .av-class-ceiling{transform:translateZ(7px)}
html body #news .av-class-wall{transform:translateZ(1px)}
html body #news .av-class-floor{transform:translateZ(12px);transform-origin:50% 0}

html body #news .av-class-entry{
  position:absolute;
  z-index:5;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  perspective:850px;
  background:
    linear-gradient(90deg,transparent 49.75%,var(--room-line) 50%,transparent 50.25%) 0 0 / 112px 100%,
    radial-gradient(ellipse at 50% 14%,var(--room-wall),var(--room-side) 76%);
  transition:opacity .8s ease .85s;
}
html body #news .av-class-entry::before{
  content:"";
  position:absolute;
  inset:72% 0 0;
  background:linear-gradient(180deg,var(--room-trim),transparent 3%),linear-gradient(var(--room-floor-far),var(--room-floor-near));
  opacity:.85;
}
html body #news .av-class-door{
  position:relative;display:block;width:100%;height:100%;
  border:0;background:none;color:var(--text-main);
  cursor:pointer;transform-style:preserve-3d;
}
html body #news .av-class-door:focus-visible{outline:3px solid var(--orange);outline-offset:8px}
html body #news .av-door-leaf{
  position:absolute;inset:0 50% 0 0;
  display:flex;justify-content:center;align-items:flex-start;padding-top:22%;
  border:3px solid var(--room-trim);
  border-radius:7px 0 0 2px;
  background:linear-gradient(110deg,var(--blue-2),var(--blue-1));
  box-shadow:inset 0 0 0 2px var(--blue-1),inset 0 1px 0 var(--blue-5);
  transform-origin:left center;backface-visibility:hidden;
  transition:transform .95s cubic-bezier(.29,.05,.24,1);
}
html body #news .av-door-leaf-right{
  inset:0 0 0 50%;border-radius:0 7px 2px 0;
  transform-origin:right center;transition-delay:.07s;
}
html body #news .av-class.is-entering .av-door-leaf-left{transform:rotateY(104deg)}
html body #news .av-class.is-entering .av-door-leaf-right{transform:rotateY(-104deg)}
@keyframes avWalkIntoClass{
  0%,17%{transform:scale(.88) translateZ(-65px)}
  60%{transform:translateY(3%) scale(.98) translateZ(-15px);animation-timing-function:cubic-bezier(.18,.65,.25,1)}
  100%{transform:scale(1.015) translateZ(0)}
}
html body #news .av-door-plate{
  position:absolute;top:7%;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--blue-2);
  padding:6px 10px;border:1px solid var(--blue-5);border-radius:4px;
  color:var(--text-main);font-size:clamp(11px,1.5vw,15px);font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
html body #news .av-door-glass{
  width:57%;height:49%;border:3px solid var(--blue-3);border-radius:6px;
  background:linear-gradient(135deg,var(--blue-4),var(--blue-2) 55%,var(--blue-5) 56%,var(--blue-2) 62%);
  box-shadow:inset 0 0 0 2px var(--blue-1);
}
html body #news .av-door-handle{
  position:absolute;right:10%;top:59%;width:20%;height:7px;
  border-radius:6px;background:var(--orange);box-shadow:0 2px 3px var(--blue-1);
}
html body #news .av-door-leaf-right .av-door-handle{right:auto;left:10%}
html body #news .av-door-label{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--blue-2);padding:6px 10px;border-radius:5px;font-size:clamp(12px,1.6vw,16px);font-weight:800;color:var(--blue-5)}
html body #news .av-class.is-entering .av-class-entry{opacity:0;pointer-events:none}
html body #news .av-class.is-entering .av-door-label,
html body #news .av-class.is-entering .av-door-plate{opacity:0;transition:opacity .2s ease}

html body #news .av-class .av-lb .lb-title,
html body #news .av-class .av-lb .lb-title *{
  font-family:"Permanent Marker","Caveat","Segoe Print","Bradley Hand","Comic Sans MS",cursive!important;
}
@media (prefers-reduced-motion:reduce){
  html body #news .av-class .av-class-scene,
  html body #news .av-class .av-class-entry,
  html body #news .av-class .av-door-leaf{transition:none}
  html body #news .av-class .av-class-scene{transform:none;animation:none}
}
html body #news .av-class-floor{position:relative;transform-style:preserve-3d}
html body #news .av-class-row{position:absolute;inset:0;pointer-events:none;transform:translateZ(4px)}
html body #news .av-class-row:nth-of-type(2){transform:translateZ(10px)}
html body #news .av-class-row:nth-of-type(3){transform:translateZ(18px)}
html body #news .av-class-row:nth-of-type(4){transform:translateZ(28px)}

/* The open doorway exposes the classroom while the door is still swinging. */
html body #news .av-class-entry{background:none;overflow:hidden}
html body #news .av-class-entry::before{display:none}
html body #news .av-door-frame{
  width:min(84%,360px);
  aspect-ratio:4/5;
  position:relative;
  perspective:800px;
  border-radius:10px 10px 2px 2px;
  box-shadow:0 0 0 5px var(--room-trim),0 0 0 120vmax var(--room-side);
}

/* Align the working whiteboard with the screen in the classroom photograph. */
html body #news .av-class-real .av-class-scene{display:block}
html body #news .av-class-photo-stage{position:relative}
html body #news .av-class-photo{
  aspect-ratio:1532/1026;
  background:center / 100% 100% no-repeat url("./learn-classroom-blue.jpg");
  filter:brightness(.82);
  position:relative;
}
html body #news .av-class-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(36,81,201,.25),rgba(93,150,255,.12) 55%,rgba(5,10,28,.2));
  mix-blend-mode:color;
}
html[data-theme="light"] body #news .av-class-photo{filter:none}
html body #news .av-class-real .av-class-wall{padding:12px 6% 20px;background:var(--room-wall);border:0}
html body #news .av-class-real .av-class-photo-stage>.av-class-wall{
  position:absolute;inset:33.14% 43.69% 45.50% 32.48%;
  padding:0;overflow:hidden;border:0;border-radius:3px;
  background:#86562e;box-shadow:0 3px 7px rgba(5,10,28,.42);
}
html body #news .av-class-real .av-class-photo-stage>.av-class-wall>.av-lb{
  position:absolute;top:50%;left:50%;width:480px;
  transform:translate(-50%,-50%) scale(var(--classroom-board-scale-x,.22),var(--classroom-board-scale-y,.22));
}
html body #news .av-photo-board-toggle{
  display:block;width:100%;padding:12px 16px;border:0;
  background:var(--bg);color:var(--text);font:700 15px/1.4 Lato,Arial,sans-serif;cursor:pointer;
}
html body #news .av-photo-board-toggle:focus-visible{outline:2px solid var(--em);outline-offset:-4px}
html body #news .av-class-real .av-door-frame{width:min(65%,310px)}

/* live wall clock over the photographed clock */
html body #news .av-wall-clock{position:absolute;left:41.9%;top:23.4%;width:5.4%;aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(5,10,28,.35))}
html body #news .av-wall-clock svg{display:block;width:100%;height:100%}
html[data-theme="dark"] body #news .av-wall-clock{filter:brightness(.82) drop-shadow(0 1px 2px rgba(5,10,28,.35))}

/* the whole lesson fits the photographed screen: fixed 5:3 board, scaled evenly */
html body #news .av-class-real .av-class-photo-stage>.av-class-wall>.av-lb{width:960px!important;height:576px!important;max-height:none!important}
html body #news .av-class-real .av-class-photo-stage .lb-frame{height:100%!important;display:flex;flex-direction:column}
html body #news .av-class-real .av-class-photo-stage .lb-board{flex:1 1 auto;height:auto!important;aspect-ratio:auto!important;min-height:0!important}

/* paper beside the classroom: compact, fits its column, same height as the classroom */
@media(min-width:901px){html body #news .av-duo{grid-template-columns:minmax(0,.84fr) 1px minmax(0,1.16fr)!important}html body #news .av-duo .np-stack{grid-template-columns:minmax(0,1fr)}html body #news .av-duo .np-page{min-width:0}html body #news .av-duo .np-front{min-height:0!important;padding:14px 22px 12px 38px}html body #news .av-duo .np-deck{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(13px,1.05vw,16px)}html body #news .av-duo .np-headline{font-size:clamp(17px,1.45vw,23px);margin:2px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}html body #news .av-pane-news{padding:20px 14px 0}html body #news .av-pane-news .av-pane-body{margin:0 -14px;padding:14px 18px 36px}}
html body #news .av-pane-learn,html body #news .av-class-real{background:var(--bg)!important}
html body #news .av-class-real .av-class-scene{display:flex!important;flex-direction:column}
html body #news .av-photo-board-toggle{flex:1 1 auto}

/* ===== v16: two separate cards. News = a big real newspaper. Learn = the classroom, readable on the wall screen. ===== */
html body #news .av-duo{display:flex!important;flex-direction:column;gap:30px;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important;border-radius:0}
html body #news .av-duo::before,html body #news .av-duo-seam{display:none!important}
html body #news .av-duo .av-pane{border-radius:30px;border:1px solid rgba(36,81,201,.16);box-shadow:0 36px 70px -34px rgba(15,31,74,.45),0 2px 0 rgba(255,255,255,.8) inset;overflow:hidden}
html body #news .av-duo .av-pane-news{background:linear-gradient(160deg,#f7faff 0%,#eaf1ff 60%,#f1ebe0 100%)}
html body #news .av-duo .av-pane-learn{background:var(--bg)!important;padding-bottom:0}
html[data-theme="dark"] body #news .av-duo .av-pane{border-color:rgba(93,150,255,.26);box-shadow:0 40px 80px -36px rgba(0,0,0,.8)}
html[data-theme="dark"] body #news .av-duo .av-pane-news{background:linear-gradient(160deg,#0b1430,#0a1227 60%,#17120c)}
/* the long paper: tall, centred on a wooden table */
html body #news .av-duo .av-news-scene{max-width:720px}
html body #news .av-duo .np-stack{container-type:inline-size;grid-template-columns:minmax(0,1fr)}
html body #news .av-duo .np-page{min-width:0}
html body #news .av-duo .np-front{min-height:128cqw!important;padding:22px 34px 18px 50px}
html body #news .av-duo .np-deck{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:clamp(17px,1.35vw,21px);line-height:1.5}
html body #news .av-duo .np-headline{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:clamp(26px,2.5vw,38px);margin:6px 0 14px}
@media(min-width:901px){html body #news .av-pane-news{padding:26px 26px 0}html body #news .av-pane-news .av-pane-body{margin:0 -26px;padding:14px 22px 50px}}
/* the classroom: full-width photo, no button; the lesson is written big on the wall screen (virtual 480x288) */
html body #news .av-duo .av-class-real{max-width:1280px;margin:0 auto}
html body #news .av-class-real .av-class-photo-stage>.av-class-wall>.av-lb{width:520px!important;height:312px!important}
html body #news .av-class-real .av-class-photo-stage .lb-pen,html body #news .av-class-real .av-class-photo-stage .lb-foot{display:none!important}
html body #news .av-class-real .av-class-photo-stage .lb-board{padding:12px 18px!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden}
html body #news .av-class-real .av-class-photo-stage .lb-text{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"k k" "t d" "l d" "b d";column-gap:14px;align-content:start;height:100%}
html body #news .av-class-real .av-class-photo-stage .lb-kicker{grid-area:k;font-size:18px!important;margin:0 0 4px!important}
html body #news .av-class-real .av-class-photo-stage .lb-date{font-size:16px!important}
html body #news .av-class-real .av-class-photo-stage .lb-title{grid-area:t;font-size:34px!important;line-height:1.05!important;margin:0!important}
html body #news .av-class-real .av-class-photo-stage .lb-line{grid-area:l;margin:6px 0 8px!important}
html body #news .av-class-real .av-class-photo-stage .lb-body{grid-area:b;font-size:22px!important;line-height:1.2!important;margin:0!important;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
html body #news .av-class-real .av-class-photo-stage .lb-dia{grid-area:d;align-self:center;width:100%!important;height:auto;max-height:200px!important;margin:0!important}
html body #news .av-class-real .av-class-scene{display:block!important}
html body #news .av-duo .av-pane-learn .av-pane-body,html body #news .av-duo .av-class-real{flex:0 0 auto!important;width:100%}
html body #news .av-duo .av-class-real .av-class-scene{flex:0 0 auto!important}

/* ===== v17: the classroom is its own world: doors open, the room fills the screen, only a Return button ===== */
html body #news .av-duo{left:0!important;transform:none!important;margin-left:auto;margin-right:auto}
html body #news .av-duo .av-pane-learn{animation:none!important}
html.ks-class-immersive,html.ks-class-immersive body{overflow:hidden!important}
html body #news .av-class.is-immersive{position:fixed!important;inset:0;z-index:2147483000;width:auto!important;max-width:none!important;margin:0!important;display:flex;align-items:center;justify-content:center;overflow:auto;background:#040816;animation:avRoomIn .6s ease both}
@keyframes avRoomIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
html body #news .av-class.is-immersive .av-class-scene{width:min(100vw,calc(100vh * 1532 / 1026))!important;flex:0 0 auto!important;margin:auto}
html body #news .av-class-return{position:fixed;top:max(14px,env(safe-area-inset-top));left:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(10,20,50,.72);color:#fff;font:700 15px/1 Lato,Arial,sans-serif;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html body #news .av-class-return::before{content:"\2190";font-size:18px}
html body #news .av-class-return:hover,html body #news .av-class-return:focus-visible{background:#2451c9;outline:2px solid #fff;outline-offset:2px}
/* lights: windows bright by day; at night the room is dark and the lights switch on when you walk in */
html body #news .av-class-photo-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
html body #news .av-class-real .av-class-photo-stage>.av-class-wall,html body #news .av-wall-clock{z-index:2}
html[data-theme="light"] body #news .av-class-photo-stage::before{opacity:1;mix-blend-mode:screen;background:radial-gradient(ellipse 22% 55% at 96% 28%,rgba(255,255,255,.75),transparent 70%),radial-gradient(ellipse 12% 40% at 80% 40%,rgba(255,255,255,.35),transparent 70%)}
html[data-theme="dark"] body #news .av-class-photo{filter:brightness(.36) saturate(.85)!important}
html[data-theme="dark"] body #news .av-class-photo::after{opacity:.5}
html[data-theme="dark"] body #news .av-class-photo-stage::before{mix-blend-mode:screen;background:
 radial-gradient(ellipse 9% 6% at 25.5% 5.8%,rgba(255,255,255,.95),transparent 70%),radial-gradient(ellipse 9% 6% at 27.3% 12.7%,rgba(255,255,255,.9),transparent 70%),radial-gradient(ellipse 9% 6% at 30% 18%,rgba(255,255,255,.85),transparent 70%),
 radial-gradient(ellipse 9% 6% at 62.5% 6%,rgba(255,255,255,.95),transparent 70%),radial-gradient(ellipse 9% 6% at 61% 12.7%,rgba(255,255,255,.9),transparent 70%),radial-gradient(ellipse 9% 6% at 59% 18%,rgba(255,255,255,.85),transparent 70%),
 radial-gradient(ellipse 60% 50% at 50% 22%,rgba(120,170,255,.28),transparent 75%)}
html[data-theme="dark"] body #news .av-class.is-lit .av-class-photo-stage::before{opacity:1}
html[data-theme="dark"] body #news .av-class-real .av-class-photo-stage>.av-class-wall{box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 60px 14px rgba(150,195,255,.45)}
@media(max-width:700px){html body #news .av-class.is-immersive{align-items:flex-start;padding-top:64px;box-sizing:border-box}}
html body #news .av-duo{isolation:auto!important}
html.ks-class-immersive body #news{z-index:2147483000!important}
html body #news .av-class.is-immersive .av-class-entry{display:none!important}
html body #news .av-class.is-immersive{animation:none}
html body #news .av-duo .av-class-real.is-immersive{background:#040816!important}
html body #news .av-duo .av-class-real.is-immersive .av-class-photo-stage{box-shadow:0 0 80px rgba(0,0,0,.6)}

/* ===== v18 (desktop): News on one side as before, the Learn card beside it; opening the door builds the classroom world ===== */
@media(min-width:901px){
  html body #news .av-duo{display:grid!important;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)!important;gap:24px;align-items:stretch}
  html body #news .av-duo .av-news-scene{max-width:640px}
  html body #news .av-duo .np-front{min-height:0!important;padding:14px 22px 12px 38px}
  html body #news .av-duo .np-deck{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(13px,1.05vw,16px);line-height:1.45}
  html body #news .av-duo .np-headline{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(17px,1.45vw,23px);margin:2px 0 8px}
  html body #news .av-pane-news{padding:20px 14px 0}
  html body #news .av-pane-news .av-pane-body{margin:0 -14px;padding:14px 18px 36px}
  html body #news .av-duo .av-pane-learn .av-pane-body{flex:1 1 auto!important}
  html body #news .av-duo .av-class-real{flex:1 1 auto!important;max-width:none;min-height:360px}
  html body #news .av-duo .av-class-real:not(.is-immersive) .av-class-scene{min-height:360px}
}
/* no wooden table behind the newspaper */
html body #news .av-pane-news .av-pane-body,html[data-theme="dark"] body #news .av-pane-news .av-pane-body{background:none!important}
/* before you open the doors the card shows only the doors, nothing of the room behind them */
html body #news .av-class.has-entry .av-class-scene{visibility:hidden}
/* no big blue wash behind the doors: just the doors until you open them */
html body #news .av-door-frame{box-shadow:0 0 0 5px var(--room-trim),0 24px 50px -18px rgba(15,31,74,.5)!important}
html body #news .av-class.has-entry{background:transparent!important}

/* ===== v20: the newspaper is NOT inside a card: a long, normal newspaper standing on the page, with the Learn card beside it ===== */
html body #news .av-duo .av-pane-news,html[data-theme="dark"] body #news .av-duo .av-pane-news{background:none!important;border:0!important;box-shadow:none!important;border-radius:0;overflow:visible;padding:0}
html body #news .av-duo .av-pane-news .av-pane-body{margin:0!important;padding:8px 0 24px!important}
html body #news .av-duo .av-pane-news .av-pane-head{padding:0 4px}
html body #news .av-duo .av-news-scene{max-width:640px}
html body #news .av-duo .np-front{min-height:132cqw!important;padding:22px 32px 18px 48px}
html body #news .av-duo .np-deck{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:clamp(16px,1.3vw,20px);line-height:1.5}
html body #news .av-duo .np-headline{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:clamp(24px,2.3vw,35px);margin:6px 0 14px}
@media(min-width:901px){
  html body #news .av-duo{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;align-items:start}
  html body #news .av-duo .av-pane-learn{align-self:stretch}
  html body #news .av-duo .av-pane-news .av-pane-body{margin:0!important;padding:8px 0 24px!important}
}

/* Learn card (the doors): a site-blue background instead of white */
html body #news .av-duo .av-pane-learn{background:radial-gradient(120% 90% at 50% 38%,#e3edff 0%,#bcd3ff 55%,#8fb4f7 100%)!important;border-color:rgba(36,81,201,.3)}
html[data-theme="dark"] body #news .av-duo .av-pane-learn{background:radial-gradient(120% 90% at 50% 38%,#16296b 0%,#0d1c4d 55%,#07102e 100%)!important;border-color:rgba(93,150,255,.35)}
html body #news .av-class.has-entry,html body #news .av-duo .av-class-real:not(.is-immersive){background:transparent!important}
html body #news .av-duo .av-pane-learn .av-pane-sub{color:#2a3f78}
html[data-theme="dark"] body #news .av-duo .av-pane-learn .av-pane-sub{color:#a9c1f5}

/* phones: the Learn card is compact (just the doors) instead of reserving the room's height */
html body #news .av-class.has-entry{min-height:440px!important}
html body #news .av-class.has-entry .av-class-scene{position:absolute!important;inset:0;height:100%;min-height:0!important;overflow:hidden}
@media(max-width:900px){html body #news .av-duo .av-pane-learn .av-pane-body{flex:0 0 auto!important}html body #news .av-duo .av-class-real:not(.has-entry){min-height:0!important}}

/* ===== v23 ===== */
/* desktop: the paper first stands alone; as you scroll the Learn card slides in beside it */
@media(min-width:901px){
  html body #news .av-duo{transition:grid-template-columns 1s cubic-bezier(.2,.8,.2,1)}
  html body #news .av-duo.is-solo{grid-template-columns:minmax(0,1fr) minmax(0,0fr)!important;gap:0}
  html body #news .av-duo.is-solo .av-news-scene{margin-left:auto;margin-right:auto}
  html body #news .av-duo .av-pane-learn{transition:opacity .9s ease .15s,transform .9s cubic-bezier(.2,.8,.2,1) .15s}
  html body #news .av-duo.is-solo .av-pane-learn{opacity:0;transform:translateX(70px);overflow:hidden;min-width:0;padding-left:0;padding-right:0;border-width:0}
}
/* phones: the classroom fills the screen zoomed on the wall screen, so the lesson is written big ON the screen */
@media(max-width:700px){
  html body #news .av-class.is-immersive{overflow:hidden;display:block;padding-top:0}
  html body #news .av-class.is-immersive .av-class-scene{position:absolute!important;width:calc((100vw - 24px) / .2381)!important;max-width:none;left:50%;top:50%;transform:translate(-44.4%,-43.6%);margin:0}
  html body #news .av-class.is-immersive .av-class-photo{filter:none}
  html[data-theme="dark"] body #news .av-class.is-immersive .av-class-photo{filter:brightness(.36) saturate(.85)!important}
}

/* v24: desktop: the paper sits in the left corner (not centred); phones: only the paper first, the Learn card slides up as you scroll to it */
@media(min-width:901px){
  html body #news .av-duo.is-solo .av-news-scene{margin-left:0;margin-right:auto}
  html body #news .av-duo .av-news-scene{margin-left:0;margin-right:auto}
}
@media(max-width:900px){
  html body #news .av-duo .av-pane-learn{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
  html body #news .av-duo.is-solo .av-pane-learn{opacity:0;transform:translateY(70px)}
}

/* v25: paper flush in the left corner (same left edge as the section title); the doors fill the whole Learn card; readable door sign */
html body #news .av-duo{width:100%!important;max-width:1700px;margin-left:0!important;margin-right:auto}
html body #news .av-duo .av-pane-news .av-pane-body{align-items:flex-start!important}
html body #news .av-duo .av-news-scene{margin-left:0!important;margin-right:auto!important}
html body #news .av-duo .av-pane-news .av-pane-head{padding-left:0}
html body #news .av-class-real .av-class-entry{padding:0!important;background:none!important}
html body #news .av-class-real .av-class-entry::before{display:none}
html body #news .av-class-real .av-door-frame{width:100%!important;max-width:none!important;height:100%;aspect-ratio:auto!important;border-radius:0;box-shadow:none!important}
html body #news .av-duo .av-pane-learn{padding-bottom:0}
html body #news .av-class-real .av-door-plate{background:#10224f!important;color:#fff!important;border-color:#7fb0ff!important;font-size:clamp(13px,1.6vw,20px)!important;padding:8px 16px!important;top:6%}
html body #news .av-class-real .av-door-label{background:#10224f!important;color:#8fe3ff!important;font-size:clamp(15px,1.8vw,22px)!important;padding:10px 18px!important;border:1px solid #7fb0ff;bottom:7%}
@media(min-width:901px){html body #news .av-class.has-entry{min-height:560px!important}}
html body #news .av-class.is-entering .av-class-scene{visibility:hidden}

/* v26: the section container is no longer a centred 1160px box: the paper sits in the left corner, the Learn card takes the rest of the width */
html body #news .av-grid:has(.av-duo){max-width:none!important;width:100%!important;margin-inline:0!important}
@media(min-width:901px){
  html body #news .av-duo:not(.is-solo){grid-template-columns:minmax(0,min(640px,46%)) minmax(0,1fr)!important}
  html body #news .av-duo{max-width:none!important}
}
/* door panels keep a tall door shape on wide cards */
html body #news .av-class-real .av-door-glass{height:56%!important;width:auto!important;aspect-ratio:1/1.9;max-width:70%}

/* ===== v27: normal classroom doors (wood leaves, narrow vision window, lever handle, kick plate, metal hinges) + stacked newspaper layout on desktop ===== */
html body #news .av-class-real .av-door-leaf{
  padding:0!important;display:block!important;
  background:linear-gradient(90deg,#b98146,#c9955a 18%,#c08a50 60%,#a8733c)!important;
  border:0!important;border-radius:0!important;
  box-shadow:inset 0 0 0 6px #8a5a2b,inset 0 0 0 8px rgba(255,214,160,.35),inset 0 -2px 10px rgba(0,0,0,.25)!important;
  overflow:hidden;
}
html body #news .av-class-real .av-door-leaf-left{inset:0 50% 0 0!important}
html body #news .av-class-real .av-door-leaf-right{inset:0 0 0 50%!important}
/* recessed lower panel + kick plate */
html body #news .av-class-real .av-door-leaf::before{
  content:"";position:absolute;left:14%;right:14%;top:56%;bottom:16%;
  border:3px solid #8a5a2b;border-radius:2px;
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(255,255,255,.08));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
}
html body #news .av-class-real .av-door-leaf::after{
  content:"";position:absolute;left:8px;right:8px;bottom:8px;height:9%;
  background:linear-gradient(180deg,#e4e8ee,#9aa3b2);border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
/* narrow tall vision window with wired glass, near the centre edge */
html body #news .av-class-real .av-door-glass{
  position:absolute;top:9%;left:50%;transform:translateX(-50%);
  width:26%!important;max-width:none!important;height:36%!important;aspect-ratio:auto!important;
  border:5px solid #6f6f78;border-radius:3px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.28) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 12px),
    linear-gradient(135deg,#a9d3ee,#7fb0d4 55%,#e5f3fb 56%,#8dbbdc)!important;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.35)!important;
}
/* metal lever handle by the meeting edge of the two leaves, plus a lock plate */
html body #news .av-class-real .av-door-handle{
  top:52%!important;right:9%!important;left:auto!important;width:7px!important;height:13%!important;
  border-radius:4px;background:linear-gradient(90deg,#f1f3f6,#8e97a6)!important;box-shadow:0 2px 3px rgba(0,0,0,.45)!important;
}
html body #news .av-class-real .av-door-handle::before{
  content:"";position:absolute;left:-9px;top:-6px;width:25px;height:14px;border-radius:4px;
  background:linear-gradient(180deg,#e4e8ee,#8e97a6);box-shadow:0 1px 2px rgba(0,0,0,.4);
}
html body #news .av-class-real .av-door-leaf-right .av-door-handle{right:auto!important;left:9%!important}
/* hinges on the outer edges */
html body #news .av-class-real .av-door-leaf-left{background-image:linear-gradient(90deg,#b98146,#c9955a 18%,#c08a50 60%,#a8733c)!important}
html body #news .av-class-real .av-door-frame{
  background:#7a4f26!important;
  box-shadow:inset 0 0 0 10px #6a421d,inset 0 0 0 12px rgba(255,214,160,.25)!important;
  padding:12px;box-sizing:border-box;
}
/* sign above the door looks like a metal room sign */
html body #news .av-class-real .av-door-plate{background:#e9edf3!important;color:#10224f!important;border:2px solid #6f7684!important;border-radius:3px!important}

/* newspaper on desktop: same stacked layout as on phones (headline on top, photo in the middle, short post under it) */
html body #news .av-card.av-np .np-body{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
html body #news .av-card.av-np .np-body .np-photo{aspect-ratio:3/2}

/* v28: "Open the doors" is a brushed-metal door sign (like the old Classroom plate) */
html body #news .av-class-real .av-door-label.av-door-label{
  background:linear-gradient(180deg,#f4f6f9 0%,#d3d9e1 48%,#bcc4cf 52%,#e4e8ee 100%)!important;
  color:#10224f!important;border:2px solid #6f7684!important;border-radius:4px!important;
  font-family:var(--ks-font)!important;font-weight:800!important;letter-spacing:.09em;text-transform:uppercase;
  font-size:clamp(12px,1.5vw,16px)!important;padding:9px 18px!important;
  box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(0,0,0,.35)!important;
}