@import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap');
/* Insights "atlas": cinematic hero + guide pile for #edu-page.
   Layout adapted from the Wanderlust template (1440 frame, 24px page inset), set in the
   LVL UP RX Didone type system and brand colours. Every frame number is a Figma pixel at
   1440 wide, expressed through --px (one design pixel at the current width). */

#edu-page .atlas-hero,#edu-page .atlas-pile{
  --cream:#f5f2ec;
  --cream-40:rgb(245 242 236 / .4);
  --cream-50:rgb(245 242 236 / .5);
  --cream-80:rgb(245 242 236 / .8);
  --signal:#ff3b30;
  --ink:#0d0d0d;
  container-type:inline-size;
  position:relative;
  overflow:hidden;
  color:var(--cream);
}
#edu-page .atlas-hero *,#edu-page .atlas-pile *{box-sizing:border-box}
#edu-page .atlas-hero .atlas-scene,#edu-page .atlas-pile .atlas-scene{--px:calc(100cqw / 1440)}

/* Small text: Inter Tight tracked caps, the site's label voice. */
#edu-page .atlas-ui{
  font-family:var(--font-sans)!important;font-size:max(11px,var(--fs-label,.72rem))!important;font-weight:400!important;
  letter-spacing:.22em!important;line-height:1.4!important;text-transform:uppercase!important;white-space:nowrap;
  color:var(--cream-40);
}
#edu-page .atlas-ui--on{color:var(--cream)}
/* Display: Bodoni Moda, leading capital of each word in the italic cut. */
#edu-page .atlas-display{
  font-family:var(--font-voice)!important;font-weight:400!important;font-style:normal!important;
  letter-spacing:-.025em!important;text-transform:none!important;margin:0;color:var(--cream);
}
#edu-page .atlas-display i{font-style:italic;font-weight:400}

/* ─── Hero ─────────────────────────────────────────────────────────── */
#edu-page .atlas-hero{background:#000;height:max(600px,100svh);min-height:600px}
/* The scene starts below the site's fixed header (measured by atlas.js into --atlas-top). */
#edu-page .atlas-hero .atlas-scene{position:absolute;inset:var(--atlas-top,92px) 0 0 0}
#edu-page .atlas-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
#edu-page .atlas-veil{position:absolute;inset:0;background:rgb(0 0 0 / .5);pointer-events:none}
#edu-page .atlas-grain{
  position:absolute;inset:-60px;pointer-events:none;opacity:.3;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.9'/%3E%3C/svg%3E");
  background-size:200px 200px;animation:atlas-grain .8s steps(1) infinite;
}
@keyframes atlas-grain{
  0%{translate:0 0}12.5%{translate:41px 0}25%{translate:0 41px}37.5%{translate:-41px 41px}
  50%{translate:41px -41px}62.5%{translate:-41px 0}75%{translate:0 -41px}87.5%{translate:41px 41px}
}

/* The window: a brighter, more saturated view of the same photograph, registered to it. */
#edu-page .atlas-window{
  position:absolute;left:calc(50% - 220 * var(--px));top:calc(50% - 157.5 * var(--px));
  width:calc(440 * var(--px));height:calc(315 * var(--px));border-radius:4px;overflow:hidden;
  transform-origin:50% 50%;will-change:transform;z-index:3;
}
#edu-page .atlas-window img{
  position:absolute;max-width:none;object-fit:cover;object-position:50% 50%;
  filter:brightness(1.18) saturate(1.25);will-change:transform;
}
#edu-page .atlas-rec{
  position:absolute;left:calc(14 * var(--px));top:calc(14 * var(--px));width:7px;height:7px;border-radius:50%;
  background:var(--signal);animation:atlas-rec .62s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes atlas-rec{from{opacity:1}to{opacity:.18}}

#edu-page .atlas-caprow{
  position:absolute;left:calc(50% - 220 * var(--px));width:calc(440 * var(--px));
  display:flex;justify-content:space-between;align-items:center;z-index:4;will-change:transform;
}
#edu-page .atlas-caprow--top{top:calc(50% - 178.5 * var(--px))}
#edu-page .atlas-caprow--bottom{top:calc(50% + 169.5 * var(--px))}



#edu-page .atlas-modes{position:absolute;left:calc(24 * var(--px));bottom:calc(24 * var(--px));display:flex;gap:18px;z-index:4}
#edu-page .atlas-explore{position:absolute;right:calc(24 * var(--px));top:calc(24 * var(--px));z-index:4}
#edu-page .atlas-hero a,#edu-page .atlas-hero button{background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
#edu-page .atlas-hero :is(a,button):hover .atlas-ui,#edu-page .atlas-hero a.atlas-ui:hover,#edu-page .atlas-hero button.atlas-ui:hover{color:var(--cream)}
#edu-page .atlas-hero :is(a,button):focus-visible{outline:1px solid var(--cream-80);outline-offset:4px}

/* Assembly: groups start hidden only once the script has taken over (no-JS shows the final frame). */
#edu-page .atlas-hero.is-armed [data-group]{opacity:0}

/* ─── Guide pile ───────────────────────────────────────────────────── */
/* Same olive philosophy texture and wash as the Start Here block. */
#edu-page .atlas-pile{padding-top:clamp(56px,7vw,104px);background-color:#313a2b;
  background-image:linear-gradient(90deg,rgba(8,12,8,.52),rgba(8,12,8,.2) 55%,rgba(8,12,8,.42)),url('../../home-philosophy-texture.jpg');
  background-size:cover;background-position:center}
/* Small labels sit on textured olive here, so they need more contrast than over the hero photo. */
#edu-page .atlas-pile{--cream-40:rgb(245 242 236 / .64)}
/* Section joins: both sides of a seam fade through the same dark, so no hard edge shows between photographs. */
#edu-page .atlas-hero::after,#edu-page .atlas-pile::before,#edu-page .atlas-pile::after{
  content:"";position:absolute;left:0;right:0;height:clamp(72px,10vw,150px);pointer-events:none;
}
#edu-page .atlas-hero::after{bottom:0;z-index:2;background:linear-gradient(to bottom,transparent,#0d0e0a)}
#edu-page .atlas-pile::before{top:0;background:linear-gradient(to top,transparent,#0d0e0a)}
#edu-page .atlas-pile::after{bottom:0;background:linear-gradient(to bottom,transparent,#0d0e0a)}
#edu-page .atlas-pile-head{text-align:center;font-size:clamp(40px,6.25vw,90px)!important;line-height:.94!important;position:relative;z-index:30}
#edu-page .atlas-pile-head>span{display:block}
#edu-page .atlas-pile-sub{text-align:center;margin-top:22px;position:relative;z-index:30}
#edu-page .atlas-pile .atlas-scene{position:relative;height:calc(760 * var(--px));margin-top:calc(-20 * var(--px))}

#edu-page .atlas-card{
  position:absolute;left:calc(var(--cx) * var(--px));top:calc(var(--cy) * var(--px));width:calc(var(--w) * var(--px));
  translate:-50% -50%;rotate:var(--r);z-index:var(--z);
  display:block;text-decoration:none;color:var(--ink);cursor:pointer;
}
#edu-page .atlas-card.is-raised{z-index:60}
#edu-page .atlas-card-body{
  display:block;background:#f4f1ea;padding:calc(var(--w) * .045 * var(--px)) calc(var(--w) * .045 * var(--px)) 0;
  box-shadow:0 18px 40px -18px rgb(0 0 0 / .9),0 2px 6px rgb(0 0 0 / .35);
  will-change:transform,filter;transform-origin:50% 50%;
}
#edu-page .atlas-card-photo{display:block;aspect-ratio:1/1;overflow:hidden;background:#222}
#edu-page .atlas-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Guide title, hand-written on the polaroid's strip in the same fountain-pen hand as the Start Here note. */
#edu-page .atlas-card-name{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
  min-height:calc(var(--w) * .26 * var(--px));
  padding:calc(var(--w) * .045 * var(--px)) 4px calc(var(--w) * .06 * var(--px));
  font-family:"La Belle Aurore",cursive!important;font-size:max(13px,calc(var(--w) * .092 * var(--px)))!important;font-weight:400!important;
  font-style:normal!important;letter-spacing:0!important;line-height:1.18!important;text-transform:none!important;
  text-align:center;color:#26291f;
}
#edu-page .atlas-card:focus-visible{outline:none}
#edu-page .atlas-card:focus-visible .atlas-card-body{outline:2px solid var(--cream);outline-offset:4px}

#edu-page .atlas-list{position:absolute;top:50%;translate:0 -50%;display:grid;gap:12px;z-index:40;list-style:none;margin:0;padding:0}
#edu-page .atlas-list--left{left:calc(24 * var(--px))}
#edu-page .atlas-list--right{right:calc(24 * var(--px));text-align:right}
/* Titles wrap rather than truncate, in a column narrow enough to stay clear of the pile. */
#edu-page .atlas-list a{text-decoration:none;display:inline-flex;align-items:baseline;gap:10px;max-width:calc(225 * var(--px))}
#edu-page .atlas-list a .atlas-ui:first-child{flex:none}
#edu-page .atlas-list a .atlas-ui:last-child{white-space:normal;text-wrap:balance;letter-spacing:.12em!important}
#edu-page .atlas-list--right a{flex-direction:row-reverse}
#edu-page .atlas-list a:hover .atlas-ui,#edu-page .atlas-list a.is-on .atlas-ui,#edu-page .atlas-list a:focus-visible .atlas-ui{color:var(--cream)}
#edu-page .atlas-list a:focus-visible{outline:1px solid var(--cream-80);outline-offset:4px}

/* ─── Tablet: tighten the hero, keep the pile ───────────────────────── */
@media (max-width:1024px){
  /* Larger polaroids on tablets so their hand-written titles read easily. */
  #edu-page .atlas-card{width:calc(var(--w) * 1.3 * var(--px));left:calc((720 + (var(--cx) - 720) * .74) * var(--px))}
  #edu-page .atlas-card-body{padding:calc(var(--w) * .058 * var(--px)) calc(var(--w) * .058 * var(--px)) 0}
  #edu-page .atlas-card-name{font-size:max(13px,calc(var(--w) * .12 * var(--px)))!important}
  /* Keep both guide lists beside the pile on tablets; tighter tracking so titles fit. */
  #edu-page .atlas-pile .atlas-scene{height:calc(820 * var(--px))}
  #edu-page .atlas-list{gap:7px}
  #edu-page .atlas-list .atlas-ui{letter-spacing:.1em!important;font-size:10px!important}
  #edu-page .atlas-list a{max-width:calc(320 * var(--px))}
}
@media (max-width:640px){#edu-page .atlas-list{display:none}}

/* ─── Mobile: stacked hero, scattered pile in three columns ──────────── */
@media (max-width:640px){
  #edu-page .atlas-hero{height:max(640px,100svh)}
  #edu-page .atlas-hero .atlas-scene{--cw:min(100cqw - 4.5rem,22rem)}
  #edu-page .atlas-window{
    width:var(--cw);height:calc(var(--cw) * .74);
    left:calc(50% - var(--cw) / 2);top:calc(50% - var(--cw) * .37);
  }
  #edu-page .atlas-caprow{left:calc(50% - var(--cw) / 2);width:var(--cw)}
  #edu-page .atlas-caprow .atlas-ui{letter-spacing:.14em!important}
  #edu-page .atlas-caprow--top{top:calc(50% - var(--cw) * .37 - 1.5rem)}
  #edu-page .atlas-caprow--bottom{top:calc(50% + var(--cw) * .37 + .75rem)}
          #edu-page .atlas-explore{top:auto;bottom:1.5rem;right:1.5rem}
      #edu-page .atlas-hero .atlas-modes{left:50%;translate:-50% 0;bottom:auto;top:1.25rem}

  #edu-page .atlas-pile{padding-bottom:24px}
  #edu-page .atlas-pile-head{font-size:clamp(38px,11.5vw,48px)!important;line-height:.88!important;padding:0 16px}
  #edu-page .atlas-pile .atlas-scene{--rh:min(49vw,226px);height:calc(var(--mrows,6.5) * var(--rh) + 36px);margin-top:12px}
  #edu-page .atlas-card{left:calc(var(--mx) * 1%);top:calc((var(--mrow) + .5) * var(--rh) + 20px + var(--my) * 1px);width:min(32vw,148px);z-index:var(--mz)}
  #edu-page .atlas-card.is-raised{z-index:60}
  #edu-page .atlas-card-body{padding:6px 6px 0;filter:none!important;transform:none!important}
  #edu-page .atlas-card-name{font-size:13px!important;line-height:1.15!important;padding:6px 12px 9px;min-height:0}
  #edu-page .atlas-card:active .atlas-card-body{transform:translateY(-6px) scale(1.025)!important;transition:transform .25s}
}

@media (prefers-reduced-motion:reduce){
  #edu-page .atlas-grain,#edu-page .atlas-rec{animation:none}
  #edu-page .atlas-hero.is-armed [data-group]{opacity:1}
  #edu-page .atlas-card:active .atlas-card-body{transform:none!important}
}

/* Pile / List view modes */
#edu-page .atlas-modes button{background:none;border:0;padding:0;cursor:pointer}
#edu-page .atlas-modes button:hover,#edu-page .atlas-modes .atlas-ui--on{color:var(--cream,#f5f2ec)}
#edu-page .atlas-modes--pile{position:relative;left:auto;bottom:auto;display:flex;justify-content:center;gap:22px;margin-top:14px;z-index:30}
#edu-page.has-atlas:not(.atlas-list-mode) :is(#gd-pill-bar,#gd-count,#gd-grid){display:none!important}
#edu-page.atlas-list-mode .atlas-pile .atlas-scene{display:none}
#edu-page.atlas-list-mode .atlas-pile{padding-bottom:40px}