/* /learning — a teaser at dawn: night sky, a sun cresting the horizon, huge type.
   Its own voice on purpose — not the homepage's neumorphism, not the Journal's notebook. */
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url("../assets/fonts/inter.woff2") format("woff2");}
:root{
  --night:#0b0a1f; --dusk:#1d1846; --sun:#ffb347; --ember:#ff6a3d;
  --text:#f4f1ff; --muted:rgba(244,241,255,.72);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;}
body{background:var(--night); color:var(--text); font-family:"Inter",system-ui,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column;}
a{color:var(--sun);}

/* sky: fixed backdrop — gradient night, a sun that rises once on load, a glowing horizon */
.sky{position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:radial-gradient(120% 70% at 50% 100%, #3a2466 0%, var(--dusk) 38%, var(--night) 75%);}
.sun{position:absolute; left:50%; bottom:-38vmin; width:76vmin; height:76vmin; margin-left:-38vmin; border-radius:50%;
  background:radial-gradient(circle, #ffe2a8 0%, var(--sun) 35%, var(--ember) 62%, transparent 72%);
  filter:blur(6px); opacity:.9; animation:rise 3.2s cubic-bezier(.2,.7,.2,1) both, breathe 6s ease-in-out 3.2s infinite;}
.horizon{position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--sun), transparent); box-shadow:0 0 40px 8px rgba(255,140,60,.35);}
@keyframes rise{from{transform:translateY(40vmin); opacity:0;} to{transform:none; opacity:.9;}}
@keyframes breathe{50%{opacity:.75; transform:scale(1.03);}}

.top{padding:18px 16px; max-width:1040px; width:100%; margin:0 auto; font-size:15px;}
.top a{color:var(--muted); text-decoration:none;}
.top a:hover{color:var(--text);}

.stage{flex:1; max-width:1040px; width:100%; margin:0 auto; padding:8vh 16px 26vh;}
.kicker{font-size:13px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--sun); animation:up .9s .2s both;}
h1{font-weight:900; font-size:clamp(46px,11vw,128px); line-height:.95; letter-spacing:-.045em; margin-top:18px; animation:up 1s .35s both;}
h1 span{background:linear-gradient(90deg, #ffe2a8, var(--sun) 45%, var(--ember)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.para{max-width:36em; margin-top:34px; font-size:clamp(17px,2.1vw,20px); color:var(--muted); animation:up 1s .6s both;}
.para strong{color:var(--text); font-weight:600;}
.para em{color:var(--sun); font-style:normal; font-weight:600;}
/* inset pill: pressed into the glass, not raised */
.pill{display:inline-flex; align-items:center; gap:10px; margin-top:30px; padding:10px 20px; border-radius:999px; font-size:15px; font-weight:500;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,179,71,.28);
  box-shadow:inset 3px 3px 8px rgba(0,0,0,.45), inset -2px -2px 6px rgba(255,255,255,.05); animation:up 1s .85s both;}
.dot{width:8px; height:8px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 3px rgba(255,179,71,.2), 0 0 12px var(--sun); animation:pulse 2s ease-in-out infinite;}
@keyframes up{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,179,71,.08), 0 0 18px var(--sun);}}

.foot{text-align:center; padding:0 16px 32px; font-size:14px; color:var(--muted);}
.foot .social{margin-top:4px;}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;}}