/* FollowDon flipbook · Prompts from our McLean class
   Pages are 4:5. Type is sized in --u (a share of the page width, times --k), so a page keeps its layout at any size;
   on tall phone screens --k grows a little so body type stays near 16px.
   Brand: FollowDon Brand Guidelines v1.0 (Oct 2026). Bebas Neue / Roboto Condensed / IBM Plex Mono (prompt blocks only).
 */

@font-face{font-family:"Bebas Neue";src:url("fonts/BebasNeue-Regular.ttf") format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"Roboto Condensed";src:url("fonts/RobotoCondensed-VariableFont_wght.ttf") format("truetype");font-weight:100 900;font-display:block}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-normal-400.woff2") format("woff2");font-weight:400;font-display:block}

:root{
  --ink:#111111; --graphite:#3a3a3a; --muted:#6b6b6b; --rule:#e3e3e1;
  --stone:#e9e9e6; --paper:#fafaf9; --white:#ffffff; --marker:#f9e03f;
  --head:"Bebas Neue",Impact,sans-serif;
  --sans:"Roboto Condensed","Arial Narrow",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --bar:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--stone);color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-text-size-adjust:100%}
a{color:inherit}

/* ---------- stage + toolbar ---------- */
#stage{touch-action:manipulation;position:fixed;left:0;right:0;top:0;bottom:var(--bar);display:flex;align-items:center;justify-content:center;padding:16px}
#book{position:relative;flex:none}
#book.spread{perspective:3200px}
#book.single{overflow:hidden;box-shadow:0 1px 2px rgba(17,17,17,.06),0 6px 24px rgba(17,17,17,.07)}
.slot{position:absolute;top:0;height:100%;width:var(--pw)}
.slot.left{left:0}
.slot.right{left:50%}
.slot.single{left:0;width:100%}
#book.spread .slot:not(:empty){box-shadow:0 1px 2px rgba(17,17,17,.06),0 6px 24px rgba(17,17,17,.07)}
/* the turning sheet: flat, matte, no sheen */
.leaf{position:absolute;top:0;height:100%;width:var(--pw);transform-style:preserve-3d;z-index:3;will-change:transform}
.leaf.turn-fwd{left:50%;transform-origin:left center}
.leaf.turn-back{left:0;transform-origin:right center}
.face{position:absolute;inset:0;background:var(--white);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 2px 14px rgba(17,17,17,.08)}
.face-back{transform:rotateY(180deg)}
.shade{position:absolute;inset:0;background:#111;opacity:0;pointer-events:none;z-index:5}
.pg.moving{box-shadow:-6px 0 22px rgba(17,17,17,.10)}
.slot .pg pre{cursor:text}
.bar{position:fixed;left:0;right:0;bottom:0;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px;background:var(--white);border-top:1px solid var(--rule)}
.bar .grp{display:flex;gap:8px;align-items:center}
.btn{font:600 14px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;background:var(--white);color:var(--ink);border:1px solid var(--ink);border-radius:0;height:44px;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--white)}
.btn:disabled{opacity:.3;cursor:default;background:var(--white);color:var(--ink)}
.btn:focus-visible{outline:3px solid var(--marker);outline-offset:2px}
.count{font:500 15px/1 var(--sans);letter-spacing:.06em;color:var(--graphite);min-width:7.5em;text-align:center}
.hint{position:fixed;left:50%;bottom:calc(var(--bar) + 10px);transform:translateX(-50%);background:var(--ink);color:#fff;font:500 14px/1.3 var(--sans);padding:10px 14px;transition:opacity .4s;pointer-events:none;white-space:nowrap}
.hint.gone{opacity:0}
.btn .ico{display:none}
@media (max-width:520px){
  .btn .lbl{display:none}
  .btn .ico{display:inline}
  .count{min-width:5.5em;font-size:14px}
  .hint{white-space:normal;width:calc(100% - 32px);text-align:center}
}
noscript{display:block;padding:24px;font-size:18px}

/* ---------- pages ---------- */
.pg{position:absolute;inset:0;background:var(--white);container-type:size;overflow:hidden;--u:calc(var(--k, 1) * 0.864cqw)}
.pg.cover,.pg.back{background:var(--white)}
.in{position:absolute;inset:0;padding:calc(7 * var(--u)) calc(7.5 * var(--u)) calc(10 * var(--u));display:flex;flex-direction:column}
.foot{position:absolute;left:calc(7.5 * var(--u));right:calc(7.5 * var(--u));bottom:calc(4.6 * var(--u));display:flex;justify-content:space-between;font:500 calc(2.3 * var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.eb{font:600 calc(2.7 * var(--u))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-family:var(--head);font-weight:400;text-transform:uppercase;line-height:.92;text-wrap:balance}
h1{font-size:calc(15.5 * var(--u))}
h2{font-size:calc(10.5 * var(--u));margin-top:calc(1.2 * var(--u))}
h3{font-size:calc(7 * var(--u));margin-top:calc(1 * var(--u))}
p,li{font-size:calc(4.4 * var(--u));line-height:1.5}
.lede{font-size:calc(4.6 * var(--u));line-height:1.42;color:var(--graphite);margin-top:calc(2.6 * var(--u));text-wrap:pretty}
.head{border-bottom:1px solid var(--ink);padding-bottom:calc(3.4 * var(--u));margin-bottom:calc(3.6 * var(--u))}
.mt{margin-top:calc(5 * var(--u))}
.muted{color:var(--muted)}
.mark{background:var(--marker);padding:0 .12em}
.cont{font:600 calc(2.6 * var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:calc(3 * var(--u))}

/* steps */
ol.steps{list-style:none;counter-reset:s}
ol.steps[start]{counter-reset:s var(--start)}
ol.steps>li{counter-increment:s;display:grid;grid-template-columns:calc(8 * var(--u)) 1fr;gap:calc(2.5 * var(--u));padding:calc(2.3 * var(--u)) 0;border-top:1px solid var(--rule)}
ol.steps>li:first-child{border-top:0;padding-top:0}
ol.steps>li::before{content:counter(s);font-family:var(--head);font-size:calc(8 * var(--u));line-height:.85}
ol.steps b{font-weight:600}

/* prompt block: the only place Plex Mono appears */
.prompt .label{font:600 calc(2.6 * var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:calc(2 * var(--u))}
.prompt pre{background:var(--ink);color:#eeeeee;font-family:var(--mono);font-size:calc(3.55 * var(--u));line-height:1.6;padding:calc(4.2 * var(--u)) calc(4.6 * var(--u));white-space:pre-wrap;overflow-wrap:anywhere}
.prompt .caret{color:#8a8a8a}
.nw{white-space:nowrap}

/* cards with QR */
.card{display:grid;grid-template-columns:calc(21 * var(--u)) 1fr;gap:calc(4.5 * var(--u));align-items:center;border:1px solid var(--rule);padding:calc(3.4 * var(--u));margin-top:calc(3 * var(--u))}
.card img{width:calc(21 * var(--u));height:calc(21 * var(--u));display:block}
.card .k{font:600 calc(2.5 * var(--u))/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card .t{font-weight:600;font-size:calc(5.2 * var(--u));line-height:1.15;margin-top:calc(.8 * var(--u))}
.card .d{font-size:calc(3.9 * var(--u));line-height:1.4;color:var(--graphite);margin-top:calc(1 * var(--u))}
.go{display:inline-block;margin-top:calc(2.4 * var(--u));font:600 calc(3 * var(--u))/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);padding:calc(2 * var(--u)) calc(3 * var(--u));text-decoration:none}
.go:hover{background:var(--ink);color:#fff}

.box{background:var(--stone);padding:calc(4.2 * var(--u)) calc(4.6 * var(--u));margin-top:calc(4 * var(--u));font-size:calc(4.2 * var(--u));line-height:1.5}
figure img{width:100%;display:block;border:1px solid var(--rule)}
figcaption{font-size:calc(3.5 * var(--u));line-height:1.4;color:var(--muted);margin-top:calc(2 * var(--u))}
.ideas div{border-bottom:1px solid var(--rule);padding:calc(2.6 * var(--u)) 0;font-size:calc(4.1 * var(--u));line-height:1.45}
.ideas b{display:block;font:600 calc(2.5 * var(--u))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:calc(.6 * var(--u))}

/* cover */
.cover .top{display:flex;justify-content:space-between;align-items:flex-start}
.cover .top img{width:calc(24 * var(--u));display:block}
.cover .top .eb{text-align:right;line-height:1.75;padding-top:calc(2 * var(--u))}
.cover h1{margin-top:calc(12 * var(--u))}
.cover .lede{margin-top:calc(5 * var(--u))}
.disc{width:calc(30 * var(--u));height:calc(30 * var(--u));border-radius:50%;clip-path:circle(50% at 50% 50%);background:var(--stone);overflow:hidden;position:relative;flex:none}
.disc img{position:absolute;width:96%;left:2%;top:9%;display:block}
.cover .who{margin-top:auto;display:flex;gap:calc(5 * var(--u));align-items:center}
.cover .who p{font-size:calc(4.2 * var(--u))}

/* contents */
.toc{list-style:none;border-top:1px solid var(--ink)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:grid;grid-template-columns:calc(10 * var(--u)) 1fr auto;gap:calc(3 * var(--u));align-items:baseline;padding:calc(2.4 * var(--u)) 0;text-decoration:none}
.toc .n{font-family:var(--head);font-size:calc(7 * var(--u));line-height:1}
.toc .t{font-weight:500;font-size:calc(4.6 * var(--u));line-height:1.25}
.toc .p{font-size:calc(3.4 * var(--u));color:var(--muted)}
.toc a:hover .t{text-decoration:underline}

/* service */
.opt{border:1px solid var(--ink);padding:calc(4.5 * var(--u));margin-top:calc(3.5 * var(--u))}
.opt h3{font-size:calc(8.5 * var(--u));margin-top:calc(.6 * var(--u))}
.perk{background:var(--stone);padding:calc(4.2 * var(--u)) calc(4.6 * var(--u));margin-top:calc(4.5 * var(--u))}
.perk p{font-size:calc(4.4 * var(--u))}
.perk .eb{font-size:calc(2.6 * var(--u));margin-bottom:calc(1.2 * var(--u))}
.price{display:flex;align-items:baseline;gap:calc(2.4 * var(--u));flex-wrap:wrap;margin:calc(1.6 * var(--u)) 0 calc(1 * var(--u))}
.price .now{font-family:var(--head);font-size:calc(12 * var(--u));line-height:1}
.price s{color:var(--muted);font-size:calc(4.2 * var(--u))}
.price .with{font:600 calc(2.7 * var(--u))/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bk{display:flex;gap:calc(4 * var(--u));align-items:center;margin-top:calc(3 * var(--u));padding-top:calc(3 * var(--u));border-top:1px solid var(--rule)}
.bk img{width:calc(19 * var(--u));height:calc(19 * var(--u));display:block;flex:none}
.bk .go{margin-top:0}
.book{background:var(--ink);color:#fff;padding:calc(5.5 * var(--u));margin-top:calc(4.5 * var(--u))}
.book h3{font-size:calc(9 * var(--u))}
.book .ph{display:inline-block;margin-top:calc(3.5 * var(--u));background:var(--stone);color:var(--ink);font:600 calc(3.6 * var(--u))/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:calc(3 * var(--u)) calc(4 * var(--u));text-decoration:none}

/* back cover */
.pg.back .in{justify-content:center;align-items:center;text-align:center}
.pg.back img.logo{width:calc(34 * var(--u))}
.pg.back h2{font-size:calc(16 * var(--u));margin-top:calc(10 * var(--u))}
.pg.back p{margin-top:calc(4 * var(--u));color:var(--graphite)}
.pg.back .eb{margin-top:calc(12 * var(--u))}

/* Taps inside a link go to the link. */
.pg a *{pointer-events:none}
.prompt pre .fill{color:#F9E03F}
.fill-demo{font-family:var(--mono);font-size:.92em;background:var(--ink);color:#F9E03F;padding:0 .3em;white-space:nowrap}