/* ==========================================================================
   LEARN SECTION CHROME.
   Everything above the .lr- glue is lifted VERBATIM from the landing page's
   own stylesheet by mkcss.py, in its original cascade order, so the learn
   pages and the landing cannot drift apart. Do not hand-edit this file.
   ========================================================================== */

@font-face{
  font-family:'Inter Fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:107%; ascent-override:90.2%; descent-override:22.5%; line-gap-override:0%;
}

:root{
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI','Inter','Inter Fallback',Roboto,'Helvetica Neue',sans-serif;   /* v5.0.71: San Francisco where it lives; Inter everywhere else. The JOURNAL keeps Inter. */
  --font-name:'Inter';
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,'Cascadia Code',Consolas,'Liberation Mono',monospace;
  --e:cubic-bezier(.22,.85,.25,1); --e-spring:cubic-bezier(.34,1.5,.5,1);
  --e-out:cubic-bezier(.16,1,.3,1);--e-soft:cubic-bezier(.22,1,.36,1);
  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:26px;
  --eq-gut:56px;
  --rail:76px; --rail-open:236px;
  --topbar-h:66px; --view-pb:90px;
  --pad:clamp(14px,2.4vw,26px);
  --wash-1:transparent; --wash-2:transparent;
}

html[data-theme="dark"]{
  /* v5.0.74 - pitch black, and the signature purple/pink.
     Ground is true #000; the accent pair is the house violet and magenta. */
  --bg:#000000; --bg-deep:#000000;
  --surface:#0E0E11; --surface-2:#16161B; --surface-3:#1F1F26;
  --text:#F5F4F7; --text-2:#B9B6C2; --text-3:#8A8794;
  --line:rgba(245,244,247,.10); --line-2:rgba(245,244,247,.20);
  --up:#31C48D; --up-2:#63DCAF; --up-soft:rgba(49,196,141,.16);
  --down:#F05252; --down-2:#F98080; --down-soft:rgba(240,82,82,.14);
  --mag-up:#3F8F6E; --mag-dn:#9A5252;
  --sheen:#EA5FB4;
  --eq-body:#221838; --eq-water:#1B1430; --eq-line:#9F6CFF; --eq-peak:#6E6486;
  --eq-a:.88; --eq-m:.34; --eq-b:.03; --eq-wa:.16; --eq-pk:.34;
  --eq-wc:#F5F4F7;
  --dsh-wash:rgba(159,108,255,.14);
  --uw-a:.14; --uw-b:.58;
  --water:#5B8FE0; --deep:#9F6CFF;
  --brass:#EA5FB4; --brass-2:#C24397; --brass-soft:rgba(234,95,180,.16);
  --accent:#9F6CFF; --accent-2:#EA5FB4; --accent-soft:rgba(159,108,255,.15);
  --accent-grad:linear-gradient(140deg,#9F6CFF,#EA5FB4);
  --accent-glow:0 0 22px rgba(159,108,255,.35);
  --wash-1:transparent; --wash-2:transparent;
  --on-accent:#FFFFFF;
  --grid:rgba(245,244,247,.07);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px -6px rgba(0,0,0,.5),0 22px 48px -22px rgba(0,0,0,.65);
  --shadow-lg:0 10px 26px -10px rgba(0,0,0,.55),0 40px 90px -30px rgba(0,0,0,.7);
  --scrim:rgba(0,0,0,.64);
  --tint:rgba(245,244,247,.06);
  --shade-key:#9F6CFF;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background-color:var(--bg);color:var(--text);
  background-image:
    radial-gradient(1100px 620px at 88% -8%, var(--wash-2), transparent 62%),
    radial-gradient(900px 520px at 4% -6%, var(--wash-1), transparent 58%);
  background-attachment:fixed;background-repeat:no-repeat;
  font-family:var(--font);font-size:14px;font-weight:450;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  transition:background-color .4s var(--e),color .4s var(--e);
  overflow-x:hidden;
}
button,input,select,textarea{font:inherit;color:inherit;font-variant-numeric:inherit}
button{background:none;border:none;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
svg{display:block}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:0}
:focus:not(:focus-visible){outline:none}

*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:0;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:padding-box}

/* ---------- type roles (one family, many voices) ---------- */
.eyebrow{
  font-size:10.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);line-height:1.4;
}
.num{font-weight:750;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.display{font-size:clamp(34px,5.2vw,52px);font-weight:800;letter-spacing:-.025em;line-height:.98}
h1{font-size:22px;font-weight:700;letter-spacing:-.016em;line-height:1.2}
h2{font-size:14.5px;font-weight:650;letter-spacing:-.012em}
h3{font-size:13px;font-weight:650;letter-spacing:-.01em}
.faint{color:var(--text-3)}
.up{color:var(--up)} .down{color:var(--down)} .brass{color:var(--brass)}

/* ============================================================
   SHELL
   ============================================================ */
.app{display:flex;min-height:100dvh;position:relative}

/* (the left rail retired in v5.0.63 — the section links live in the topbar now) */

/* ---------- main column ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:10px;
  padding:13px var(--pad);min-height:var(--topbar-h);
  border-bottom:1px solid var(--line);
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
}
.tb-title{display:flex;flex-direction:row;align-items:baseline;gap:10px;min-width:0;margin-right:auto}
.tb-title .eyebrow{color:var(--text-3)}
.tb-title h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- controls ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 15px;border-radius:0;
  border:1px solid var(--line-2);background:var(--surface);
  font-size:13px;font-weight:620;letter-spacing:-.008em;color:var(--text-2);
  transition:color .16s var(--e),border-color .16s var(--e),background .16s var(--e);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{color:var(--text);border-color:var(--text-3);background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--on-accent);font-weight:680;background-image:var(--accent-grad);box-shadow:var(--accent-glow)}
.btn.primary:hover{filter:brightness(1.07);color:var(--on-accent)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--tint);border-color:transparent}
.btn.sm{height:30px;padding:0 12px;font-size:12px;border-radius:0}
.btn.sm svg{width:14px;height:14px}
.btn.icon{width:36px;padding:0}

/* ---- lifted components ---- */
.brand{color:var(--text); text-decoration:none; display:inline-flex; align-items:center}
.brand-logo{
  --logo:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAACOCAMAAAB32yHoAAAA/1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD64ociAAAAQHRSTlMA7dMrsW1MjwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA56VV7wAAC1VJREFUeNrtXdmC4ygMTACh///jje3OJI51lDA49Mz62Z3GRemW4Hb7t55ca823/59W+KiklAr/D2HbU8t9ewpNvc2zLozS/fkknnWPibkUypPj93imRLDytsZU6oSL2+E3JYJ/VMwDwumUTC57/O6pTr3E6RDk++czHQXp2xuclwcU4GWFeW4ZKRet7+Ea08N0LcZrfVjcuXI/PpMJCX3s8QVCnB9Gf/GMk8t9SgKAPDUBx1Iw/2B3l56jbGaJgJMBeNzjQVrQxE5Bhu7TAyjtMY2S2bvzfFJQJuBcAEpKhgcQ7448n9zn+/QAintcLiaexsCs/CVNTsA+AEbBE6hFymt1cgKeBnCR2ih2gvnXCDiTI11Tbx3zAI9bwFsyVRnSgP00zJBA8wyALVL7RK/Qp2BqBJxJBcoEbAtFcFv7+e/SI4rL6ObOJcEEORMA9ZrBK0xKrUglYJndhMRCuVaxffDuAV7OQe3SLsF5SV2sSQvulniXJRhXgSfAU4nnErBBgg/rTJ3Ke3xii3OjzgOwM33AqIVT9pgHSrCvAhvB26xFPrO2kII2Ez89nHFKDUq60c1DieesDTQhm74zl9nDFyrBn86ZLgHPWJv74Vvqwl9lDwbWELnzWJWHrc0yIUuFAIGunzNJuIw80LuIeS0+DMq6zkZEMyHHJT7L7heBF/BhYqy7RoKPXjSluLWlc61ovg/TDF0/L4bQskS6FjzHh8mAhY3mzcY6gRSSWwG85YsfT6A/suoZr3ISun5lRziMAxmopFTeXO4EN3/xfejTJ45jVLlWAMAkW4z8kZdOWH+kmonuhN/FiRhVIdnUW+Hzs84hE9Lj6dV3oQgmxb4n6WKp+T4+gjkNxK9bAyTj2lWVKI16tuvIrSa4C/16ZQLlVSr0Fthq+8nZMjyGDK0hxTj+Je5XD5W/UDPvu7fdbKik+7z/svrF3MNFMXR1z3JysOfkgck6p7Gkwz13rro5B5KydiMVX8iHOlONy2aeKCO5UCRuflGwsQDfoWY6VTkYVH6H1ozFTRyO3apwrqnGnQ9wKmhANxmmMpx4TGPm60SenPYwM2xAeX17LO/w8sssBKw4ocpAb+/HSRjavSATsF5Evw1AGoLccOgaCJi3KTpHE9cQoUpXAm49DvUK6Cwnmm5OLcRKpQST1kXP+E2NnBnFSbm8jzqclkrJ0fCLT0rwl5B7+oBgT6XkEovRUA2LY20GMG024pvD/2BLoMIqwdQ44pvEWbcWEd5o9+3mQCyRqkcUnwg67lxi4ZcKlubeu8QTYGfxheF0yh5qW3wXpcmyvYqIfeJ5zutA2jmcfACh+K35I21aNaAEy/RTDXtaeS7J27vmq5vXwwrbcUdwqgF17Ys54JK87I2Zd95cHomAFLPdM811aar7tckVSDAxgN9T7FhnMIhg+gUC/JJKKKIo7rt/ajfZmmTE/O+JCKh7HByKKDa4DfxeWpJsRlWg5XAiArLj26FaacVHx++tdChRvggFkdFtLGMNCECp4+u6I/zudEhvUUAy7jONdRm+P8cSKmw5Ibt8A0FJCysqmWesy/C7FgmOJFTI6N8jr3jKIfzmMSHZDs4i+c2k51I+8BN+9eiUmP96Gh/GJBjHElIl54R9bgYGhOytK9Mb4JU2sYQea/2PyR/4Pb5SAj0MMxrgNeaPNUFXLSMGSCfH8JvFhHgpTzgTuklwRVOtByNScgi/WUwINfVPFCqReoac7E9m2tvtfZ3DhNTGAyBUojH+rWwRyjX95ffyb+EKax/Fcuq+Ct1buyCDQ8UAy4Rkojo1/5RU8s9HFb1gVpj21cZXceWzJuq7npoJWX2yq07zbeLf+ql6EzUDlcdX6XHrYTt01wKue7FjApoVv40qxrlpWFvVVsFdSmnSIe6I60l2THWFj9OEHxl/utqKSFH8p4cgFn+YAPGFXnYTftX6Qm5Sq4e2dCj0YU+nD6dgC35Pd85ylpsGYdJbnzIWOrqO0eCzXjOfwM+ew2ntLU3biTcYg2V+7f52qCFuasD7E2pVcxCsNreGL8MGh78ugSP4+CpHu7bg9/LUnEGwE+3Nh9RFInmv5X7FdFGuod39uxlajk7RW1Ua4n+TwbnozPUm9fdezSBPK9VeCC6kDpxCWi4peTbNX7xHWsDhw304mEhVCKKBqFfUjNvot6umEZDwy5R6iK+qL5Bz9bucXUK0c1Fbv2sX6WODYPXknNaT8xVWgYdD/+t5YV3Sxq9BxObhsx1+cMa5nprtfWJEqAQfb2bJvYR1G4Vtn93bp9oZz42cGhdk49+Rm53t4AfSLgF/YtR7j59iH7S4aTkOr5GCVf13knAeBeNkJBIqhgf6d2LD7H8WUtabVUKD00UN7KDDQ86qQNwXS2zWhevN68cwc0c/UrzahJx/ZvexMWrSAGTPh+6hAuGI9BEssZv/80xI9r2m98IcdsLV8quEbVftfwwq6rBowZKSE4pdgVLtC8G8Y3612hWSgT3txIAAqsFSpFdAW+yHGkny8Yh6D+VjcQXiOztuQc7gmQ5REV7bRQ1zc9DWodsJDi9rQGfFZVRSMciq3jcrbzdcqTeDadoHDZZ0qI8fzJCcN+glOcRkyIZIKqjIqY3I6TAuBZ/Bkj74RphvJPsw0ruWYpIQTAwAmO275Si16kavaYi8/Cd6WCDhfigF3S7k/7FJwMOS8b50M/HyKmXr1yLkGybBGdcg1CFH/sEhaVPfRoNSYBMDCL6pAkqoAgzcg5eD5/DXWBOxp6nYVI+nk3/7g6IKXnjFz/NgeFPiKezk5oZesiN6QefSz+ljvDYnWIBlWKQXKfCjFn7JS+dXe0tFtz8E4EdGaekByNC3Sq4JbBdU1cExaycb4WIhn3YC3OVSsu0g9PWuFmksPnA7IJochg8E8DW1DWB1vKqOV2+qgUzk0hA64+uou2KN+NgAVieuzNHMUcekDQFFG0XUOd1xv8ieKr6ZALpLbzgGMf5ETpuF4lK283sRV5VMAP3zMQLFh855azm4ReJSKwIX7jEoTlHEAJDdyxIyPG/RXYIL0DghLsdMzdZYiTplA8Bc/PNFlG/r3KYQ2CRuLTjJXPVC9WrYfSh6ogsIGDrqrnio2JOVORR7bFpEbizSK4zku/238RKs3ZqUnBVXT6MFau4/WlhRYxjJeTwBlc6nDIP9vh5bJN9/FOjPISdQR6wUD/cBlU0iHOy3I58dUCjUn8OAU+RuPA0XYFlCtIQjm2kjNmXr9aMZ6K5728LIfTnAPHLvnlVKAZaz8aVuOooCzTLvIoD3WwvajUHZ6izB2i4V9V1fKLcXsV6jPRKoEpTA+US/e9t+dh0T5+VNMIFsKIPCez9MFlM7fp8S1v+QHkoBO5+VQ0qQltfHj6LNghycWscz3QMOOeKACRENDoG0SmhznUAkirN2F+88e0cG9OzniAmRT1pDG9bxPh24vALLZl4vwuEBHechCRYB7HzXB16g3+f9b196QhI89DKoV59OvMUife3wGKcj4moAjaYV5CzMLzxibJujuevR9POqLF88e4eC6pi/Qz9LitM38cvRZAXUsZma7gn3b9SqPJf4KvGD6Sshk+h2v/X9BI2ODmffi8z6qEDbocLSKNFxa5hGu0g6fRs+WSI5nrs5EDhmrUO3WW496aWMuMmsC4COS+VB88Ml7i29hxaLOU69064BaKbgEwx8QIVnOga/hx/t5iuwgRz+F+AT+UQNoAumALs0/LfDJ2W8660RwQ9dRv8EfAc0oKhcdPMOF6Jxb9PxGxBEsxqHuobkkRlH6TP9LfDd1FnKDg6tnGmdwP3t7sysY2Qldq3T89Jpy6E9hF7p7+Leac/U/7Nl2H8d8ktz3Pj2S3dnOZ4y/0bs/gMvRnVj5uGHCQAAAABJRU5ErkJggg==);
  display:block; height:30px; aspect-ratio:2.2535/1; flex:0 0 auto;
  background:currentColor;
  -webkit-mask-image:var(--logo); mask-image:var(--logo);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  transition:opacity .16s var(--e);
}
.brand:hover .brand-logo{opacity:.75}
.topbar .brand{margin-right:18px; margin-left:calc(14px - var(--pad))}
.tb-nav{display:flex; align-items:center; gap:4px; margin-right:16px}
.tb-nav .nav-item{
  padding:9px 15px; border-radius:99px;
  font-size:15px; font-weight:490; letter-spacing:-.008em;
  color:var(--text-2); transition:color .16s var(--e);
}
.tb-nav .nav-item:hover{color:var(--text)}
.tb-nav .nav-item.on{color:var(--accent); font-weight:560}
.tb-name{
  font-size:21px; font-weight:650; letter-spacing:-.016em; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ld-foot{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:clamp(22px,3vw,36px) var(--pad) calc(var(--view-pb) - 40px);
  max-width:1360px; margin:0 auto; width:100%;
  font-size:12px; font-weight:550; color:var(--text-3);
}
.ld-foot .brand-logo{height:22px}
.ld-eyebrow{
  display:block; margin-bottom:12px; text-align:center;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.ld-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:22px; box-shadow:var(--lift);
}
.ld-sec{max-width:1360px; margin:0 auto; width:100%; padding:clamp(22px,3.5vh,44px) var(--pad)}
.ld-hero{
  position:relative; overflow:hidden; isolation:isolate;   /* v5.0.72: keeps the z:-1 photo INSIDE this section — without it the layer fell behind .main's opaque paper and the photograph vanished */
  max-width:none;
  min-height:min(88vh,860px); display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(54px,8vw,110px); padding-bottom:clamp(16px,2.6vw,32px);
  padding-left:max(var(--pad), calc((100% - 1360px)/2 + var(--pad)));
  padding-right:max(var(--pad), calc((100% - 1360px)/2 + var(--pad)));
}
.ld-hero.pg{align-items:center; text-align:center; justify-content:flex-start;
  padding-top:clamp(40px,6vh,84px); min-height:min(94vh,940px)}
.ld-hero .ld-eyebrow{color:#BCA8F0}
.ld-hero .ld-h{
  background:linear-gradient(180deg,#FFFFFF 8%,#C9BEE6 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ld-hero .ld-ink{
  background:linear-gradient(120deg,#C2A4FF,#EBAEDD);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:normal;
}
.ld-hero .ld-sub{color:#E6E2EE}
.ld-h{
  max-width:15ch; text-wrap:balance; margin-inline:auto; text-align:center;
  font-size:clamp(52px,7.6vw,116px); font-weight:600;
  letter-spacing:-.021em; line-height:1.03;
}
.ld-h2{
  font-size:clamp(27px,3.5vw,48px); font-weight:600; letter-spacing:-.018em;
  line-height:1.07; max-width:22ch; text-wrap:balance;
  margin-inline:auto; text-align:center;
}
.ld-sub{
  max-width:56ch; margin-top:14px; margin-inline:auto; text-align:center;
  font-size:clamp(15.5px,1.4vw,18px); font-weight:480; line-height:1.5; color:var(--text-2);
  letter-spacing:.001em; text-wrap:pretty;
}
.pg{
  min-height:100%;
  display:flex; flex-direction:column; justify-content:center;
  scroll-snap-align:start; scroll-snap-stop:always;
}
.ld-acts{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:34px}
.ld-acts .btn.primary{height:50px; padding:0 26px; font-size:15px}
.ld-acts .btn.ghost{
  height:50px; padding:0 24px; font-size:15px; color:var(--text);
  border:1px solid var(--line-2); background:none; border-radius:99px;
}
.ld-cue{
  position:absolute; left:0; right:0; bottom:16px; margin:0 auto; width:max-content;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--text-3); font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; pointer-events:none;
}
.ld-cue svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  animation:cueBob 2.4s var(--e-soft) infinite;
}
.scroll{flex:1; min-height:0; overflow-y:auto; scroll-behavior:smooth}
.scroll{scroll-snap-type:y mandatory}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
:root{--lift:0 1px 2px rgba(0,0,0,.20);}

/* ---- .lr- : learn-section glue ---- */
/* ---------------- the photograph plate (section front) ---------------- */
.lr-herobg{
  position:absolute; inset:0; z-index:-1;
  background-color:#000;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,0) 62%, #000 99%),
    url("/learn-hero-2x.jpg");
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,0) 62%, #000 99%),
    image-set(url("/learn-hero-1x.jpg") 1x, url("/learn-hero-2x.jpg") 2x);
  background-position:center, center top;
  background-size:100% 100%, cover;
  background-repeat:no-repeat;
}

/* ---------------- shared page furniture ---------------- */
.lr-main{flex:1;width:100%;max-width:1360px;margin:0 auto;
  padding:clamp(30px,4.4vw,58px) var(--pad) clamp(48px,6vw,86px)}
.lr-col{max-width:70ch;margin:0 auto}
.lr-wide{max-width:1180px;margin:0 auto}
.topbar .tb-title{margin-right:auto}
.tb-nav .nav-item{white-space:nowrap}

/* ---------------- article head ---------------- */
.lr-crumbs{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:20px}
.lr-crumbs a{color:var(--text-3);transition:color .16s var(--e)}
.lr-crumbs a:hover{color:var(--text-2)}
.lr-crumbs .sep{opacity:.45;padding:0 8px}
.lr-kicker{display:block;font-family:var(--mono);font-size:10.5px;font-weight:650;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:15px}
.lr-h1{font-size:clamp(30px,3.9vw,45px);font-weight:750;letter-spacing:-.028em;line-height:1.06;
  text-wrap:balance;
  background:linear-gradient(180deg,#FFFFFF 10%,#CFC6E6 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lr-h1 em{background:linear-gradient(120deg,#C2A4FF,#EBAEDD);-webkit-background-clip:text;
  background-clip:text;color:transparent;font-style:normal}
.lr-lede{margin-top:16px;font-size:clamp(16px,1.4vw,18.5px);font-weight:450;line-height:1.6;
  color:var(--text-2);text-wrap:pretty;max-width:62ch}
.lr-meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:26px 0 0;
  padding-bottom:26px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-3)}
.lr-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}

/* ---------------- article body ---------------- */
.lr-body{padding-top:30px;font-size:16.5px;line-height:1.76;color:var(--text-2);text-wrap:pretty}
.lr-body h2{position:relative;font-size:clamp(21px,2.2vw,27px);font-weight:720;letter-spacing:-.022em;
  line-height:1.22;color:var(--text);margin:46px 0 14px}
.lr-body h2::before{content:"";position:absolute;top:-16px;left:0;width:32px;height:2px;
  background:var(--accent-grad);opacity:.95}
.lr-body h3{font-size:17.5px;font-weight:700;letter-spacing:-.014em;color:var(--text);margin:30px 0 9px}
.lr-body p{margin:0 0 16px}
.lr-body ul,.lr-body ol{margin:0 0 18px;padding-left:24px}
.lr-body li{margin:0 0 9px;padding-left:2px}
.lr-body li::marker{color:var(--accent)}
.lr-body strong{color:var(--text);font-weight:640}
.lr-body a{color:var(--text);text-decoration:none;
  background-image:linear-gradient(90deg,var(--accent),var(--accent-2));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;transition:background-size .2s var(--e),color .16s var(--e)}
.lr-body a:hover{color:var(--accent-2);background-size:100% 2px}
.lr-body code{font-family:var(--mono);font-size:14px;background:var(--surface-2);
  border:1px solid var(--line);padding:2px 7px;color:var(--text)}
.lr-body table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:14.5px}
.lr-body th,.lr-body td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left}
.lr-body th{font-family:var(--mono);font-size:10px;font-weight:650;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

.lr-note{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:var(--r);padding:16px 18px;margin:26px 0;font-size:14.5px;line-height:1.65;color:var(--text-2)}
.lr-note strong{color:var(--text)}
.lr-tie{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),var(--surface) 70%);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  border-radius:var(--r-lg);padding:20px 22px;margin:34px 0}
.lr-tie::after{content:"";position:absolute;inset:-70% -25% auto auto;width:58%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,var(--accent-soft),transparent 68%)}
.lr-tie b{display:block;font-family:var(--mono);font-size:10px;font-weight:650;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.lr-tie p{margin:0;color:var(--text-2)}

/* ---------------- article foot ---------------- */
.lr-rel{margin-top:52px;padding-top:28px;border-top:1px solid var(--line)}
.lr-rel .eyebrow{display:block;margin-bottom:18px;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;color:var(--accent)}
.lr-rel ul{list-style:none;padding:0;display:grid;gap:9px;grid-template-columns:repeat(2,minmax(0,1fr))}
.lr-rel li{margin:0}
.lr-rel a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;font-size:14.5px;font-weight:560;color:var(--text-2);
  transition:border-color .18s var(--e),color .18s var(--e),background .18s var(--e)}
.lr-rel a::after{content:"\2192";color:var(--text-3);transition:transform .18s var(--e)}
.lr-rel a:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 32%,var(--line-2));
  background:var(--surface-2)}
.lr-rel a:hover::after{transform:translateX(3px)}
.lr-back{display:inline-flex;align-items:center;gap:8px;margin-top:30px;padding:10px 17px;
  border:1px solid var(--line-2);border-radius:99px;font-size:13.5px;font-weight:600;
  color:var(--text-2);transition:color .16s var(--e),border-color .16s var(--e)}
.lr-back:hover{color:var(--text);border-color:var(--text-3)}
.lr-disc{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.65;color:var(--text-3)}

/* ---------------- hub card grid ---------------- */
.lr-hub{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(26px,3.4vw,42px);text-align:left}
.lr-hub a{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:9px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 22px 24px;
  transition:border-color .2s var(--e),background .2s var(--e),transform .2s var(--e)}
.lr-hub a::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 60%,transparent),transparent);
  transition:opacity .2s var(--e)}
.lr-hub a:hover{transform:translateY(-2px);background:var(--surface-2);
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line-2))}
.lr-hub a:hover::before{opacity:1}
.lr-hub .t{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:680;
  letter-spacing:-.016em;color:var(--text)}
.lr-hub .t::after{content:"\2192";font-weight:500;color:var(--text-3);opacity:0;
  transform:translateX(-5px);transition:opacity .2s var(--e),transform .2s var(--e)}
.lr-hub a:hover .t::after{opacity:1;transform:none}
.lr-hub .d{font-size:13.5px;line-height:1.58;color:var(--text-3)}

/* ---------------- section front pages ---------------- */
.lr-pages .ld-sec.pg{padding-top:clamp(34px,5vh,64px);padding-bottom:clamp(34px,5vh,64px)}
.lr-pages .lr-hub{max-width:1180px;margin-left:auto;margin-right:auto}
.lr-pages .ld-hero .ld-h{font-size:clamp(38px,5.4vw,78px);max-width:17ch;letter-spacing:-.03em}
.lr-pages .ld-hero .ld-sub{max-width:54ch}
.lr-pages .ld-h2{margin-top:14px;font-size:clamp(24px,3vw,40px);font-weight:640;max-width:20ch}
.lr-pages .ld-h2 em{background:linear-gradient(120deg,#C2A4FF,#EBAEDD);-webkit-background-clip:text;
  background-clip:text;color:transparent;font-style:normal}
.lr-pages .lr-disc{max-width:76ch;margin-inline:auto;text-align:center;border-top:0;margin-top:8px}

/* a gradient band for the hubs that carry no photograph */
.lr-band{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding-top:clamp(46px,6.4vw,86px);padding-bottom:clamp(30px,4vw,50px)}
.lr-band::after{content:"";position:absolute;inset:-75% -25% auto auto;width:66%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,var(--accent-soft),transparent 66%)}
.lr-band .lr-crumbs{margin-bottom:16px}

/* the numbers rail under the School */
.lr-facts{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-top:34px}
.lr-facts div{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:2px clamp(20px,2.8vw,38px);border-left:1px solid var(--line)}
.lr-facts div:first-child{border-left:0}
.lr-facts .n{font-size:clamp(24px,2.5vw,31px);font-weight:760;letter-spacing:-.032em;
  color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.lr-facts .k{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3)}

@media (prefers-reduced-motion:reduce){ .scroll{scroll-behavior:auto} }
@media (max-width:960px){
  .scroll{scroll-snap-type:none}
  .pg{min-height:0}
  .pg:not(.ld-hero){display:block}
  .ld-cue{display:none}
  .lr-hub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-title{display:none}
}
@media (max-width:700px){
  .lr-herobg{background-position:center, 65% center}
  .lr-hub{grid-template-columns:1fr}
  .lr-rel ul{grid-template-columns:1fr}
  .lr-facts div{padding:2px 16px}
  .tb-nav{gap:0;overflow-x:auto;scrollbar-width:none}
  .tb-nav::-webkit-scrollbar{display:none}
  .tb-nav .nav-item{padding:8px 11px;font-size:14px}
  .lr-body{font-size:16px}
}

/* ---------------- motion: reveal on arrival ----------------
   Gated on html.mo, which a head script sets ONLY when IntersectionObserver
   exists and the visitor has not asked for reduced motion - so with JS off,
   with an old browser, or with reduced motion, nothing is ever hidden.
   Each element rises 12px and fades over ~.5s on the landing's own ease;
   the group's stagger arrives per-element as --mi from the observer script. */
html.mo{scroll-behavior:smooth}   /* anchor jumps glide; mo is never set under reduced motion */
html.mo :is(.ld-hero,.lr-band) > :not(.lr-herobg):not(.in),
html.mo .lr-pages .ld-sec:not(.ld-hero) > :not(.lr-hub):not(.lr-facts):not(.in),
html.mo .lr-facts > div:not(.in),
html.mo .lr-hub > a:not(.in),
html.mo .lr-col > article > :not(.lr-body):not(.in),
html.mo .lr-body > :not(.in),
html.mo .lr-rel li:not(.in){
  opacity:0; transform:translateY(12px);
}
html.mo :is(.ld-hero,.lr-band) > *,
html.mo .lr-pages .ld-sec:not(.ld-hero) > *,
html.mo .lr-facts > div,
html.mo .lr-hub > a,
html.mo .lr-col > article > *,
html.mo .lr-body > *,
html.mo .lr-rel li{
  transition:opacity .52s var(--e-out), transform .52s var(--e-out);
  transition-delay:calc(var(--mi, 0) * 70ms);
}
html.mo .lr-hub > a{transition-property:opacity,transform,border-color,background}
@media (prefers-reduced-motion:reduce){
  html.mo *{transition-duration:.01ms !important; transition-delay:0ms !important}
}