/* Insights "atlas" story: the template's last three blocks in the LVL UP RX system.
   Manifesto (pinned collage) · Pillars (widening panels) · Start here (pinned note) + frosted footer.
   Frame numbers are Figma pixels at 1440 wide, through --px. */

#edu-page :is(.as-manifesto,.as-pillars,.as-plan){
  --cream:#f5f2ec;--cream-40:rgb(245 242 236 / .4);--cream-50:rgb(245 242 236 / .5);--cream-80:rgb(245 242 236 / .8);
  position:relative;color:var(--cream);
}
#edu-page :is(.as-manifesto,.as-pillars,.as-plan) *{box-sizing:border-box}
/* The site's generic section padding must not inset these full-bleed blocks. */
#edu-page :is(.as-manifesto,.as-pillars,.as-plan){padding:0!important;margin-left:0;margin-right:0}
#edu-page .as-frame{position:absolute;inset:0;container-type:inline-size}
#edu-page .as-frame>.as-in{position:absolute;inset:0;--px:calc(100cqw / 1440)}
#edu-page .as-ui{font-family:var(--font-sans)!important;font-weight:400!important;font-size:max(11px,.75rem)!important;letter-spacing:.14em!important;line-height:1.75!important;text-transform:uppercase!important}
#edu-page .as-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}
#edu-page .as-display i{font-style:italic;font-weight:400}
#edu-page .as-hand{font-family:"La Belle Aurore",cursive!important;font-weight:500!important;font-style:normal!important;letter-spacing:0!important;text-transform:none!important}
#edu-page .as-word{display:inline-block;will-change:transform,opacity,filter}

/* ─── Manifesto: pinned, the backdrop pans, the headline writes itself ─── */
#edu-page .as-manifesto{height:280svh;background:#000}
#edu-page .as-sticky{position:sticky;top:var(--atlas-top,92px);height:calc(100svh - var(--atlas-top,92px));min-height:560px;overflow:hidden}
#edu-page .as-backdrop{position:absolute;left:-2%;right:-2%;top:0;height:135%;will-change:transform}
#edu-page .as-backdrop img{width:100%;height:100%;object-fit:cover;display:block}
#edu-page .as-backdrop::after{content:"";position:absolute;inset:0;background:rgb(0 0 0 / .52)}
#edu-page .as-m-head{position:absolute;left:0;right:0;top:calc(16% - 10 * var(--px));text-align:center;z-index:4;
  font-size:clamp(40px,calc(76 * var(--px)),76px)!important;line-height:.9!important}
#edu-page .as-m-head>span{display:block}
#edu-page .as-collage{position:absolute;left:50%;top:59.5%;width:calc(380 * var(--px));min-width:265px;aspect-ratio:380 / 460;translate:-50% -50%;z-index:3;will-change:transform}
#edu-page .as-collage>*{position:absolute}
#edu-page .as-polaroid{left:8%;top:2%;width:84%;background:#f6f4ee;padding:4.5% 4.5% 13%;rotate:-2.5deg;z-index:2;
  box-shadow:0 26px 50px -18px rgb(0 0 0 / .85),0 2px 6px rgb(0 0 0 / .3)}
/* The photo is cropped in around its printed line so the words read at polaroid size. */
#edu-page .as-photo{display:block;overflow:hidden;aspect-ratio:4 / 5}
#edu-page .as-polaroid img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.3);transform-origin:50% 51.6%}
/* Frosted vellum strip, matching the Start Here note's tape. */
#edu-page .as-tape{right:5%;top:2%;width:28%;height:8%;rotate:32deg;z-index:3;
  background:rgb(250 250 246 / .38);-webkit-backdrop-filter:blur(2.5px) saturate(.9);backdrop-filter:blur(2.5px) saturate(.9);
  border:1px solid rgb(255 255 255 / .35);box-shadow:0 1px 2px rgb(0 0 0 / .12);
  clip-path:polygon(0 0,100% 0,100% 100%,96% 92%,92% 100%,88% 93%,84% 100%,0 100%)}
#edu-page .as-flank{position:absolute;top:58%;translate:0 -50%;width:calc(280 * var(--px));min-width:200px;z-index:3;color:var(--cream-50)}
#edu-page .as-flank--left{right:calc(50% + 230 * var(--px));text-align:right}
#edu-page .as-flank--right{left:calc(50% + 230 * var(--px));text-align:left}
#edu-page .as-signoff{position:absolute;left:0;right:0;top:auto;bottom:max(18px,calc(30 * var(--px)));text-align:center;z-index:3;
  font-size:clamp(18px,calc(26 * var(--px)),26px)!important;line-height:1.05!important;color:var(--cream-80)}
#edu-page .as-signoff span{display:block}

/* ─── Pillars: five full-height panels; the pointed-at one widens ─── */
#edu-page .as-pillars{height:max(640px,calc(100svh - var(--atlas-top,92px)));background:#0c0c0c;overflow:hidden}
#edu-page .as-p-head{position:absolute;left:0;right:0;top:calc(44 * var(--px));z-index:5;text-align:center;pointer-events:none}
#edu-page .as-p-head .as-display{font-size:clamp(38px,calc(76 * var(--px)),76px)!important;line-height:.95!important;color:var(--cream)}
#edu-page .as-p-head .as-hand{display:block;margin-top:6px;font-size:clamp(17px,calc(24 * var(--px)),24px)!important;color:var(--cream-50)}
#edu-page .as-panels{position:absolute;inset:0;display:flex}
#edu-page .as-panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;background:#000;color:var(--cream);text-decoration:none;cursor:pointer}
#edu-page .as-panel img{position:absolute;top:0;left:50%;height:100%;width:calc(100cqw * .5);max-width:none;object-fit:cover;will-change:transform}
#edu-page .as-shade{position:absolute;inset:0;background:#000;pointer-events:none;will-change:opacity}
#edu-page .as-panel::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(to top,rgb(0 0 0 / .5),transparent);pointer-events:none}
#edu-page .as-p-foot{position:absolute;left:24px;right:24px;bottom:calc(44 * var(--px));z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
#edu-page .as-p-title{font-size:clamp(24px,calc(34 * var(--px)),34px)!important;line-height:1!important;white-space:nowrap;will-change:transform,opacity}
#edu-page .as-p-body{max-width:calc(440 * var(--px));min-width:220px;color:var(--cream-80)}
#edu-page .as-p-tag{font-size:clamp(18px,calc(24 * var(--px)),24px)!important;color:var(--cream)}
#edu-page :is(.as-p-body,.as-p-tag,.as-p-kicker){display:block}
#edu-page .as-p-kicker{color:var(--cream);letter-spacing:.24em!important;margin-bottom:10px}
#edu-page .as-panel:focus-visible{outline:1px solid var(--cream-80);outline-offset:-6px}

/* ─── Start here: pinned note over the footer photograph, frosted footer ─── */
#edu-page .as-plan{height:max(900px,calc(1000 * 100vw / 1440));max-height:1040px;background:#0a0a0a;overflow:hidden}
#edu-page .as-plan-layer{position:absolute;inset:-36px;will-change:transform}
#edu-page .as-plan-layer img{width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block}
#edu-page .as-plan{background-color:#313a2b}
#edu-page .as-plan-layer--photo img{object-position:center}
#edu-page .as-plan-layer--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,8,.52),rgba(8,12,8,.2) 55%,rgba(8,12,8,.42)),linear-gradient(0deg,rgb(8 12 8 / .55),transparent 45%)}
#edu-page .as-steam{position:absolute;inset:-10%;pointer-events:none;mix-blend-mode:screen;opacity:.55;will-change:transform,opacity;
  background:radial-gradient(40% 26% at 30% 62%,rgb(235 230 220 / .22),transparent 70%),radial-gradient(36% 22% at 72% 48%,rgb(235 230 220 / .18),transparent 70%),
             radial-gradient(50% 30% at 55% 78%,rgb(235 230 220 / .16),transparent 72%);
  filter:url(#as-steam-wisps) blur(6px);animation:as-drift 28s ease-in-out infinite alternate,as-breathe 25s ease-in-out infinite alternate}
@keyframes as-drift{from{translate:-1.5% 0;scale:1}to{translate:1.5% -1%;scale:1.04}}
@keyframes as-breathe{from{opacity:.42}to{opacity:.85}}
#edu-page .as-plan-title{position:absolute;left:0;right:0;top:calc(84 * var(--px));text-align:center;z-index:3;font-size:clamp(46px,calc(90 * var(--px)),90px)!important;line-height:.9!important;color:var(--cream)}
/* Note — "Vellum & Bone": warm uncoated card, frosted vellum tape, blind-embossed mark, olive-black ink. */
#edu-page .as-note{position:absolute;left:50%;top:calc(200 * var(--px));width:calc(400 * var(--px));min-width:280px;aspect-ratio:4 / 5;z-index:3;margin-left:calc(-200 * var(--px));
  transform-origin:51% 6%;background-color:#ece6da;color:#26291f;
  padding:max(58px,calc(78 * var(--px))) max(22px,calc(32 * var(--px))) max(18px,calc(26 * var(--px)));display:flex;flex-direction:column;align-items:center;text-align:center;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(115deg,rgb(255 255 255 / 0) 30%,rgb(255 255 255 / .22) 42%,rgb(255 255 255 / 0) 58%);
  box-shadow:0 1px 0 rgb(255 255 255 / .55) inset,0 -1px 0 rgb(0 0 0 / .06) inset,0 44px 70px -44px rgb(0 0 0 / .6),0 4px 10px -6px rgb(0 0 0 / .35)}
@media (max-width:1100px){#edu-page .as-note{margin-left:max(-140px,calc(-200 * var(--px)))}}
/* Frosted vellum strip: semi-clear, crisp edges, one torn end. */
#edu-page .as-note-tape{position:absolute;left:50%;top:-4%;width:30%;height:10%;translate:-50% 0;rotate:-2deg;z-index:2;
  background:rgb(250 250 246 / .38);-webkit-backdrop-filter:blur(2.5px) saturate(.9);backdrop-filter:blur(2.5px) saturate(.9);
  border:1px solid rgb(255 255 255 / .35);box-shadow:0 1px 2px rgb(0 0 0 / .12);
  clip-path:polygon(0 0,100% 0,100% 100%,96% 92%,92% 100%,88% 93%,84% 100%,0 100%)}
#edu-page .as-note-index{position:absolute;left:max(16px,calc(20 * var(--px)));top:max(14px,calc(18 * var(--px)));
  font-family:var(--font-mono,"IBM Plex Mono",monospace)!important;font-size:10px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:rgb(38 41 31 / .5)}
#edu-page .as-note-mark{margin-top:12px;font-family:var(--font-voice)!important;font-size:12px!important;letter-spacing:.3em!important;color:transparent;
  text-shadow:0 1px 0 rgb(255 255 255 / .7),0 -1px 0 rgb(0 0 0 / .12)}
#edu-page .as-note .as-script{font-family:"La Belle Aurore",cursive!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important;color:#26291f}
#edu-page .as-note-line{display:block;font-size:clamp(17px,calc(22 * var(--px)),22px)!important;line-height:1.45!important;text-transform:none!important;letter-spacing:.01em!important;
  clip-path:inset(-20% 100% -40% 0);position:relative}
#edu-page .as-note-line svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.35em;overflow:visible}
#edu-page .as-note-line path{fill:none;stroke:#4b5a3c;stroke-width:1.2;stroke-linecap:round}
#edu-page .as-note-aside{margin-top:auto;color:rgb(38 41 31 / .6);font-size:clamp(14px,calc(16 * var(--px)),16px)!important;opacity:0}
#edu-page .as-go{position:absolute;left:50%;top:calc(200 * var(--px) + max(350px,calc(500 * var(--px))) + 40px);translate:-50% 0;z-index:3;
  display:inline-flex;align-items:center;gap:10px;padding:11px 22px;border:1px solid var(--cream-80);border-radius:999px;color:var(--cream);text-decoration:none;white-space:nowrap}
#edu-page .as-go .as-ui{color:var(--cream)}
#edu-page .as-go i{display:inline-block;width:14px;overflow:hidden;font-style:normal}
#edu-page .as-go i b{display:inline-block;font-weight:400;transform:translateX(-50%);transition:transform .45s cubic-bezier(.2,0,0,1)}
@media (hover:hover) and (pointer:fine){#edu-page .as-go:hover i b{transform:translateX(0%)}#edu-page .as-go:hover{background:rgb(245 242 236 / .08)}}
#edu-page .as-go:focus-visible{outline:1px solid var(--cream);outline-offset:4px}



/* ─── Section joins: continue the fade through the same dark as the pile ─── */
#edu-page .as-manifesto::before,#edu-page .as-sticky::after,#edu-page .as-pillars::before,#edu-page .as-pillars::after,#edu-page .as-plan::before,#edu-page .as-plan::after{
  content:"";position:absolute;left:0;right:0;height:clamp(72px,10vw,150px);pointer-events:none;z-index:6;
}
#edu-page .as-manifesto::before,#edu-page .as-pillars::before,#edu-page .as-plan::before{top:0;background:linear-gradient(to top,transparent,#0d0e0a)}
#edu-page .as-sticky::after,#edu-page .as-pillars::after,#edu-page .as-plan::after{bottom:0;background:linear-gradient(to bottom,transparent,#0d0e0a)}
/* Stays behind the pinned collage and sign-off copy. */
#edu-page .as-sticky::after{z-index:1}

/* ─── Tablet and below ─── */
@media (max-width:1024px){
  #edu-page .as-flank{width:30%;min-width:0}
  #edu-page .as-flank--left{right:auto;left:24px}
  #edu-page .as-flank--right{left:auto;right:24px}
  #edu-page .as-plan{height:auto;max-height:none;min-height:100svh;padding-bottom:72px}
  #edu-page .as-plan .as-frame{position:relative;inset:auto;min-height:inherit}
  /* static, so the photo layers size to the whole section rather than to the copy: no bare band above the footer */
  #edu-page .as-plan .as-in{position:static;inset:auto;min-height:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px 24px 72px;gap:44px}
  #edu-page :is(.as-plan-title,.as-note,.as-go){position:relative;left:auto;top:auto;translate:none;margin:0}
  /* Square like the reference; aspect-ratio still lets it grow if the copy needs more room. */
  #edu-page .as-note{width:min(380px,100%)}
  #edu-page .as-note-line{font-size:clamp(16px,2.3vw,20px)!important}
      }
/* Tablet keeps the template's side-by-side widening panels; scale their type for the narrower row. */
@media (max-width:1024px) and (min-width:641px){
  #edu-page .as-p-title{font-size:22px!important}
  #edu-page .as-p-body{min-width:0;max-width:300px}
  #edu-page .as-p-foot{left:12px;right:12px;bottom:28px}
}
/* Phones: the template's stacked arrangement, sliding up over the pinned manifesto. */
@media (max-width:640px){
  #edu-page .as-manifesto{height:360svh}
  #edu-page .as-pillars{height:auto;overflow:visible;position:relative;z-index:10;width:100%;margin-top:-100svh!important}
  #edu-page .as-pillars .as-frame{position:relative;inset:auto}
  #edu-page .as-pillars .as-in{position:relative;inset:auto}
  #edu-page .as-p-head{position:relative;top:auto;padding:104px 24px 48px}
  #edu-page .as-panels{position:relative;flex-direction:column}
  #edu-page .as-panel{flex:none!important;height:62svh;min-height:26rem;isolation:isolate}
  #edu-page .as-panel img{left:0;top:-10%;width:100%;height:120%}
  #edu-page .as-shade{opacity:.25!important}
  #edu-page .as-p-foot{left:24px;right:24px;top:0;bottom:0;justify-content:center;gap:32px}
  #edu-page :is(.as-p-title,.as-p-body,.as-p-tag,.as-word){opacity:1!important;filter:none!important;transform:none!important}
  #edu-page .as-flank{display:none}
  /* Pillars slide up over the pinned manifesto on phones, so that one join stays a clean edge. */
  #edu-page .as-sticky::after,#edu-page .as-pillars::before{display:none}
  #edu-page .as-collage{top:56%}
  #edu-page .as-signoff{top:auto;bottom:6%}
  #edu-page .as-p-head{padding-top:88px}
  #edu-page .as-panel{height:56svh;min-height:22rem}
  #edu-page .as-p-foot{gap:24px}
      }
@media (prefers-reduced-motion:reduce){
  #edu-page .as-word{opacity:1!important;transform:none!important;filter:none!important}
  #edu-page .as-steam{animation:none}
  #edu-page .as-note-line{clip-path:none!important}
  #edu-page .as-note-aside{opacity:1!important}
  #edu-page .as-note-line path{stroke-dashoffset:0!important}
}