/* @ai.transition reel system, adapted for reading:
   black ground, white rounded frame, Poppins caps with one red word.
   Caveat ONLY for short labels; every sentence is Poppins.
   Colour roles: red = the twist word, yellow = action, cyan = small labels, green = fixed (labs only). */
:root{
  --bg:#000; --fg:#fff; --text:#e6e6e6; --muted:#a6a6a6; --line:#2e2e2e;
  --red:#FF5252; --yellow:#FFD700; --cyan:#00FFFF; --green:#4ADE80;
  --head:"Poppins","Helvetica Neue",Arial,sans-serif;
  --hand:"Caveat","Bradley Hand","Comic Sans MS",cursive;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--head); font-size:17px; line-height:1.65}
img{max-width:100%}
p{margin:0}
a{color:var(--fg); text-decoration-color:rgba(255,255,255,.4); text-underline-offset:3px}
a:hover{text-decoration-color:var(--fg)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--yellow); outline-offset:3px}

.wrap{max-width:1180px; margin:0 auto; padding-block:clamp(16px,3vw,32px) 64px;
  padding-left:var(--gutter); padding-right:max(16px, env(safe-area-inset-right, 0px));
  display:flex; flex-direction:column; gap:clamp(56px,8vw,96px)}

/* type */
h1,h2,h3{font-family:var(--head); font-weight:800; margin:0; color:var(--fg); text-transform:uppercase; line-height:1.02; letter-spacing:-.01em; text-wrap:balance}
h1{font-size:clamp(42px,7vw,96px)}
h2{font-size:clamp(30px,4.6vw,56px)}
h3{font-size:clamp(20px,2.2vw,24px); text-transform:none; letter-spacing:0; line-height:1.25}
.red{color:var(--red)}
.label{font-family:var(--hand); font-size:clamp(24px,2.6vw,30px); color:var(--cyan); line-height:1}
.lede{font-size:clamp(18px,1.8vw,21px); line-height:1.55; color:var(--text); max-width:44ch}
.body{color:var(--text); max-width:64ch}
.muted{color:var(--muted)}

/* reel-cover frame */
.frame{border:3px solid var(--fg); border-radius:clamp(20px,3vw,32px); padding:clamp(20px,4vw,52px); display:flex; flex-direction:column; gap:clamp(18px,2.4vw,26px)}
.frame-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px 20px; flex-wrap:wrap}
.handle{font-family:var(--hand); font-weight:700; font-size:26px; color:var(--fg); text-decoration:none}
.track{font-family:var(--hand); font-size:clamp(30px,4vw,48px); color:var(--cyan); text-transform:uppercase; line-height:1}
.underline{display:block; width:min(420px,70%); height:14px}
.frame-foot{display:flex; justify-content:space-between; align-items:baseline; gap:8px 16px; flex-wrap:wrap}
.nohype{font-weight:600; color:var(--muted); font-size:16px}
.how{font-family:var(--hand); font-size:24px; color:var(--cyan)}
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:6px 20px; flex-wrap:wrap; font-size:15px; font-weight:500}
nav ul a{color:var(--muted); text-decoration:none}
nav ul a:hover, nav ul a[aria-current="page"]{color:var(--fg)}

.hero-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center}
.hero-text{display:flex; flex-direction:column; gap:clamp(18px,2.2vw,24px); min-width:0}
.portrait{width:100%; max-width:440px; justify-self:end; height:auto; aspect-ratio:4/5; object-fit:cover; border:3px solid var(--fg); border-radius:22px; display:block}

/* buttons */
.ctas{display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-block; font-weight:600; font-size:15px; padding:12px 20px; border-radius:10px; text-decoration:none; border:2px solid var(--fg); color:var(--fg)}
.btn.primary{background:var(--fg); color:var(--bg)}
.btn.yellow{background:var(--yellow); border-color:var(--yellow); color:var(--bg)}

section{display:flex; flex-direction:column; gap:22px; scroll-margin-top:16px}
.section-head{display:flex; flex-direction:column; gap:12px}

/* outro-style dashed yellow box = an action */
.cta-box{border:3px dashed var(--yellow); border-radius:18px; padding:clamp(20px,3vw,28px); display:flex; flex-direction:column; gap:12px; color:var(--text)}
a.cta-box{text-decoration:none}
a.cta-box:hover{background:#0d0d0d}
.cta-box h3{color:var(--yellow); font-size:clamp(22px,2.6vw,30px)}
.cta-row{display:flex; justify-content:space-between; align-items:center; gap:16px 32px; flex-wrap:wrap}
.cta-row > div{display:flex; flex-direction:column; gap:6px; min-width:0}
.reply{font-family:var(--hand); font-size:24px; border:2px solid var(--cyan); color:var(--cyan); padding:2px 14px; align-self:flex-start}

/* reels */
.reels{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.6vw,20px)}
.reel{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--muted); min-width:0; font-size:14px; font-weight:500}
.reel img{width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:12px; border:2px solid var(--line); display:block; background:#111}
.reel:hover img{border-color:var(--fg)}
.reel:hover{color:var(--fg)}

/* vault list */
.parts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; border-top:2px solid var(--fg)}
.part{display:grid; grid-template-columns:44px 1fr; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--text)}
.part .num{font-weight:800; color:var(--muted); font-size:15px; padding-top:1px}
.part b{font-weight:700; color:var(--fg); display:block}
.part span{color:var(--muted); font-size:15px; line-height:1.5; display:block; margin-top:2px}
a.part:hover b{color:var(--red)}

/* about */
.about-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start}
.about-grid > div{display:flex; flex-direction:column; gap:16px; min-width:0}
.summit{margin:0; display:flex; flex-direction:column; gap:6px; max-width:380px; justify-self:end}
.summit img{width:100%; height:auto; border:3px solid var(--fg); border-radius:22px; display:block}
.summit figcaption{font-size:14px; color:var(--muted)}

/* workshop: whiteboard boxes */
.facts{display:flex; flex-wrap:wrap; gap:10px}
.fact{font-family:var(--hand); font-size:22px; padding:2px 14px; border:2px solid var(--fg); line-height:1.35; color:var(--fg)}
.labs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.lab{border:2px solid var(--fg); padding:20px 22px; display:flex; flex-direction:column; gap:10px; min-width:0}
.lab:last-child:nth-child(odd){grid-column:1 / -1}
.lab .head{display:flex; align-items:center; gap:12px}
.lab .n{width:38px; height:38px; flex:none; border:2px solid var(--fg); border-radius:50%; display:grid; place-items:center; font-family:var(--hand); font-size:24px; line-height:1; color:var(--fg)}
.lab h3{font-size:20px}
.lab p{color:var(--text); font-size:16px}
.lab .run{display:flex; flex-wrap:wrap; gap:4px 18px; font-family:var(--hand); font-size:22px; margin-top:auto}
.run .bad{color:var(--red)} .run .good{color:var(--green)}
.rule{font-family:var(--hand); color:var(--yellow); font-size:clamp(24px,3vw,30px); line-height:1.25; display:inline; background-image:linear-gradient(var(--yellow),var(--yellow)); background-size:100% 2px; background-repeat:no-repeat; background-position:0 100%; padding-bottom:2px}
.rule-note{font-size:15px; color:var(--muted); margin-top:6px}
.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,40px); align-items:start}
.two > div{min-width:0; display:flex; flex-direction:column; gap:12px}
.tiers{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.tier{border:2px solid var(--fg); padding:24px; display:flex; flex-direction:column; gap:12px; min-width:0}
.tier.hi{border-color:var(--yellow)}
.tier .name{font-family:var(--hand); font-size:24px; color:var(--cyan)}
.price{font-weight:800; font-size:clamp(38px,4vw,48px); color:var(--fg); font-variant-numeric:tabular-nums; line-height:1}
ul.plain{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; color:var(--text)}
.byline{display:flex; gap:16px; align-items:center}
.avatar{width:80px; height:80px; flex:none; border-radius:50%; object-fit:cover; object-position:40% 25%; border:2px solid var(--fg)}

footer{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 20px; align-items:baseline; border-top:1px solid var(--line); padding-top:20px}
footer .links{display:flex; gap:8px 20px; flex-wrap:wrap; font-size:15px}
footer .links a{color:var(--muted); text-decoration:none}
footer .links a:hover{color:var(--fg)}

/* tablet */
@media (max-width:900px){
  .reels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .parts,.labs,.about-grid{grid-template-columns:1fr}
  .lab:last-child:nth-child(odd){grid-column:auto}
  .summit{justify-self:start}
}
/* phone */
@media (max-width:640px){
  .hero-grid,.two,.tiers{grid-template-columns:1fr}
  .portrait{order:-1; max-width:220px; justify-self:start}
  .reels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reels .reel:nth-child(5){display:none}
  .frame-top{flex-direction:column; gap:10px}
  .byline{align-items:flex-start}
}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

/* type-only hero, like a reel cover */
.hero-solo h1{font-size:clamp(46px,8vw,100px); text-wrap:wrap}