:root{
  --ink:#141013; --ink2:#211a20; --paper:#F4EEE2; --paper2:#EADFC9;
  --blaze:#E93D2C; --blaze-d:#B92C1E; --gold:#C89543; --muted:#7d7268;
  --line:rgba(20,16,19,.14); --card:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.display{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;line-height:.92}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--blaze)}
.eyebrow.ink{color:var(--ink)}
.accent{color:var(--blaze)}
strong{font-weight:700}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper)}
.brand .bname{font-family:'Anton';text-transform:uppercase;letter-spacing:.04em;font-size:18px}
.brand .bname b{color:var(--blaze)}
.navlinks{display:flex;gap:26px;font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.06em}
.navlinks a{text-decoration:none;color:var(--paper2);padding:4px 0;border-bottom:2px solid transparent}
.navlinks a:hover,.navlinks a.active{color:#fff;border-color:var(--blaze)}

/* hero */
.hero{background:var(--ink);color:var(--paper);padding:64px 0 68px;position:relative;overflow:hidden}
.hero .big1{position:absolute;right:-10px;top:-20px;font-family:'Bebas Neue';font-size:400px;color:rgba(233,61,44,.11);line-height:1;pointer-events:none;letter-spacing:.01em}
.hero .inner{position:relative;z-index:2}
.hero h1{font-family:'Anton';text-transform:uppercase;font-size:60px;line-height:.95;margin:12px 0;max-width:16ch}
.hero h1 .accent{color:var(--blaze)}
.hero p{font-size:18px;color:var(--paper2);max-width:54ch}
.btn{display:inline-block;font-family:'Anton';text-transform:uppercase;letter-spacing:.04em;background:var(--blaze);color:#fff;text-decoration:none;padding:12px 22px 10px;font-size:17px;border-radius:6px;margin-top:18px}
.btn.ghost{background:transparent;border:2px solid var(--blaze);color:#fff;margin-left:10px}
/* photo hero */
.hero.photo .inner{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}
.hero.photo .hshot{border-radius:16px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.45);aspect-ratio:1/1;border:1px solid rgba(244,238,226,.14)}
.hero.photo .hshot img{width:100%;height:100%;object-fit:cover;display:block}
.hero.photo h1{max-width:14ch}
@media(max-width:820px){.hero.photo .inner{grid-template-columns:1fr}.hero.photo .hshot{aspect-ratio:16/10}}
/* story figures */
.storyfig{margin:0}
.storyfig img{width:100%;border-radius:14px;display:block;box-shadow:0 14px 34px rgba(0,0,0,.14)}
.storyfig figcaption{font-size:12px;color:var(--muted);margin-top:9px;font-style:italic;line-height:1.4}
.mantra{font-family:'Anton',Impact;text-transform:uppercase;font-size:clamp(24px,4.4vw,40px);line-height:1.02;margin:0}
.mantra .accent{color:var(--blaze)}
/* progression cycler — the mastery arc, visualized */
.cycler{margin:0;position:relative}
.cycler .frames{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.2);background:var(--ink)}
.cycler.sq .frames{aspect-ratio:1/1}
.cycler .frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}
.cycler .frames img.on{opacity:1}
.cycler .badge{position:absolute;top:12px;left:12px;z-index:3;background:rgba(20,16,19,.72);color:var(--paper);font-family:'Anton',Impact;text-transform:uppercase;font-size:11px;letter-spacing:.06em;padding:5px 11px;border-radius:99px}
.cycler .capbar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:22px 14px 12px;background:linear-gradient(to top,rgba(20,16,19,.85),transparent)}
.cycler .cap{font-family:'Anton',Impact;text-transform:uppercase;font-size:16px;color:#fff;line-height:1}
.cycler .cap .age{color:var(--blaze)}
.cycler .dots{display:flex;gap:7px;flex:0 0 auto}
.cycler .dots i{width:8px;height:8px;border-radius:50%;background:rgba(244,238,226,.4);cursor:pointer;transition:background .2s}
.cycler .dots i.on{background:var(--blaze)}

/* generic block */
section.block{padding:52px 0}
h2.sec{font-family:'Anton';text-transform:uppercase;font-size:36px;line-height:.95;margin:6px 0 2px}
.rule{height:3px;width:60px;background:var(--blaze);margin:12px 0 22px}
.lead{font-size:17px;max-width:62ch;color:#2a2126}

/* category grid */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.cat{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;transition:transform .12s ease,box-shadow .12s ease}
.cat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.cat .k{font-family:'Anton';font-size:26px;text-transform:uppercase}
.cat .d{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45}
.cat .n{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--blaze);margin-top:14px}
.cat.soon{opacity:.6;cursor:default}
.cat.soon:hover{transform:none;box-shadow:none}
.cat.soon .n{color:var(--muted)}

/* skill cards */
.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
.skill{display:flex;gap:16px;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blaze);border-radius:10px;padding:16px;transition:transform .12s ease,box-shadow .12s ease}
.skill:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.1)}
.skill.soon{opacity:.6;border-left-color:var(--muted);cursor:default}
.skill.soon:hover{transform:none;box-shadow:none}
.skill .thumb{flex:0 0 76px;height:58px;border-radius:8px;background:var(--ink);display:flex;align-items:center;justify-content:center;color:var(--blaze);font-size:26px}
.skill h3{font-family:'Anton';text-transform:uppercase;font-size:19px;margin:0 0 4px;line-height:1}
.skill p{font-size:12.5px;color:var(--muted);margin:0}

/* tags */
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tag{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:10px;padding:5px 10px;border-radius:99px}
.tag.typical{background:var(--paper2);color:var(--ink)}
.tag.hack{background:var(--blaze);color:#fff}
.tag.prodigy{background:var(--ink);color:var(--paper)}
.tag.soon{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* featured shatterers strip */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.fcard{text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
.fcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.fcard .vid{aspect-ratio:16/9;background:var(--ink);display:flex;align-items:center;justify-content:center;color:var(--blaze);position:relative}
.fcard .vid .play{width:44px;height:44px;border-radius:50%;background:var(--blaze);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.fcard .body{padding:14px 16px}
.fcard h3{font-family:'Anton';text-transform:uppercase;font-size:18px;margin:0 0 4px;line-height:1.02}
.fcard p{font-size:12.5px;color:var(--muted);margin:0}

/* entry page */
.crumb{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding-top:22px}
.crumb a{color:var(--blaze);text-decoration:none}
.entry h1{font-family:'Anton';text-transform:uppercase;font-size:52px;line-height:.95;margin:6px 0}
.entry .sub{font-size:17px;color:#2a2126;max-width:60ch}
.esec{padding:26px 0;border-top:1px solid var(--line)}
.esec .lab{font-family:'Anton';text-transform:uppercase;font-size:13px;color:var(--blaze);letter-spacing:.05em}
.esec h2{font-family:'Anton';text-transform:uppercase;font-size:26px;margin:4px 0 12px}
.video{aspect-ratio:16/9;background:var(--ink);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--paper2);text-align:center;gap:10px;border:1.5px dashed rgba(244,238,226,.28)}
.video .play{width:56px;height:56px;border-radius:50%;background:var(--blaze);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
.video .cap{font-size:12px;letter-spacing:.05em;text-transform:uppercase;max-width:40ch}
.video.small{aspect-ratio:16/10}
.embed{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line)}
.embed iframe{width:100%;height:100%;border:0;display:block}
.credit{font-size:11px;color:var(--muted);margin-top:6px}
.credit a{color:var(--blaze)}

/* foundations page */
.reftable{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.reftable th{background:var(--ink);color:#fff;font-family:'Anton',Impact;text-transform:uppercase;letter-spacing:.02em;font-size:13px;text-align:left;padding:10px 12px}
.reftable td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top;line-height:1.4}
.reftable td:first-child{font-family:'Anton',Impact;text-transform:uppercase;font-size:15px;white-space:nowrap;color:var(--ink)}
.reftable .drill{color:var(--muted)}
.reftable .tls{font-size:12px;color:#2a2126}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.tool{background:#fff;border:1px solid var(--line);border-top:4px solid var(--blaze);border-radius:12px;padding:18px}
.tool h3{font-family:'Anton',Impact;text-transform:uppercase;font-size:22px;margin:0 0 8px;line-height:1}
.tool .blocks{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tool .blocks .b{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:9px;padding:4px 8px;border-radius:99px;background:var(--paper2);color:var(--ink)}
.tool p{font-size:12.5px;margin:0 0 8px}
.tool .unlock{font-size:12.5px} .tool .unlock b{color:var(--ink)}
.tool .drill{font-size:12.5px;color:#2a2126;margin:8px 0}
.tool .pb{font-size:12px;color:#2a2126;border-left:3px solid var(--blaze);padding-left:10px;margin-top:10px;font-style:italic}
.tool .meta{display:flex;gap:8px;font-size:10.5px;margin-top:10px;flex-wrap:wrap}
.tool .meta span{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.tool .meta .safe{color:var(--blaze-d);border-color:rgba(233,61,44,.3)}
@media(max-width:820px){.tools{grid-template-columns:1fr}.reftable{font-size:12px}}

/* flip-the-pyramid play menu */
.menu{margin-top:22px}
.mrow{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;align-items:flex-start}
.mrow .rank{flex:0 0 46px;height:46px;border-radius:10px;background:var(--ink);color:#fff;font-family:'Anton',Impact;font-size:22px;display:flex;align-items:center;justify-content:center}
.mrow.top{border-color:var(--blaze)} .mrow.top .rank{background:var(--blaze)}
.mrow h3{font-family:'Anton',Impact;text-transform:uppercase;font-size:19px;margin:0 0 3px;line-height:1.02}
.mrow .do{font-size:12.5px;color:var(--muted);font-style:italic;margin:0 0 6px}
.mrow .across{font-size:12.5px;line-height:1.45} .mrow .across b{color:var(--ink)}
.mrow .age{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--blaze);margin-top:6px}
.mrow .scale{font-size:12px;line-height:1.45;color:#2a2126;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.mrow .scale .lvl{font-family:'Anton',Impact;text-transform:uppercase;font-size:10px;letter-spacing:.05em;color:var(--ink);background:var(--paper2);padding:2px 7px;border-radius:99px;margin-right:5px;white-space:nowrap}
.mrow .scale .lvl.top{background:var(--ink);color:#fff}
.mrow .scale span.seg{display:inline-block;margin:2px 10px 2px 0}
.ceil{list-style:none;padding:0;margin:14px 0}
.ceil li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blaze);border-radius:9px;padding:11px 14px;margin-bottom:9px;font-size:13.5px}
.ceil li .no{text-decoration:line-through;color:var(--muted)}
.ceil li .yes{font-weight:700;color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.cue{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blaze);border-radius:10px;padding:13px 15px;margin-bottom:10px}
.cue .c{font-family:'Anton';text-transform:uppercase;font-size:19px;line-height:1}
.cue .f{font-size:12.5px;color:var(--muted);margin-top:4px}
.cue .age{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--blaze);margin-top:6px}
.callout{background:var(--ink);color:var(--paper);border-radius:12px;padding:18px 20px}
.callout .lab{color:var(--blaze);font-family:'Anton';text-transform:uppercase;font-size:13px;letter-spacing:.05em}
.callout p{margin:6px 0 0}
ul.clean{padding-left:18px;margin:8px 0}
ul.clean li{margin-bottom:7px;font-size:14px}
ul.clean li::marker{color:var(--blaze)}
.assume{font-size:14px}.assume b{color:var(--ink)}
.src{font-size:12px;color:var(--muted);line-height:1.5}
.pill-note{display:inline-block;background:var(--paper2);border-radius:99px;padding:4px 12px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:8px}

/* footer */
footer{background:var(--ink);color:var(--paper2);padding:34px 0;margin-top:44px;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .brand .bname{font-size:16px}
footer a{color:var(--paper2)}

@media(max-width:820px){
  .cats,.feat{grid-template-columns:1fr 1fr}
  .skills,.grid2{grid-template-columns:1fr}
  .hero h1{font-size:42px}
  .entry h1{font-size:38px}
  .navlinks{display:none}
}