/* The book: johnkaranja.com told as a short story. A foil-stamped cover opens onto a two-page spread;
   the reader picks a path and the pages follow it. One screen per page, nothing scrolls.
   Colours and fonts come from brand-tokens.css. Without scripts this is an ordinary scrolling page. */
@property --lvl{syntax:'<percentage>';inherits:true;initial-value:100%}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.5 var(--body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
p,h1,h2,h3,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);font-variation-settings:"SOFT" 70,"WONK" 1;font-weight:550;line-height:1.14;letter-spacing:-.008em;overflow-wrap:break-word}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.bar :focus-visible,.tome :focus-visible{outline-color:var(--yellow)}
h1:focus,h2:focus,.qtext:focus,#q-rh:focus{outline:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--yellow);padding:10px 14px;z-index:60}
.skip:focus{left:8px}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the reader's path: show only the pieces written for it */
html[data-path="any"] [data-for]:not([data-for~="any"]),
html[data-path="pay"] [data-for]:not([data-for~="pay"]),
html[data-path="ai"] [data-for]:not([data-for~="ai"]),
html[data-path="lead"] [data-for]:not([data-for~="lead"]),
html[data-path="invest"] [data-for]:not([data-for~="invest"]),
html[data-path="team"] [data-for]:not([data-for~="team"]){display:none !important}

/* ---------- the frame: an ink bar above and below ---------- */
.bar{background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:10px;padding:0 max(12px,env(safe-area-inset-left)) 0 max(12px,env(safe-area-inset-right));position:relative;z-index:10}
.top{height:54px;justify-content:space-between;border-bottom:3px solid var(--yellow);position:sticky;top:0}
.top .brand{display:block;flex:none;padding:8px 0}
.top .brand img{height:26px;width:auto}
.tools{display:flex;align-items:center;gap:8px}
.tool{display:inline-flex;align-items:center;gap:7px;min-height:40px;min-width:44px;justify-content:center;padding:6px 12px;border:1.5px solid #4A463C;border-radius:999px;background:transparent;color:#FBF4DD;font:400 13.5px/1 var(--body);letter-spacing:.03em;text-decoration:none;cursor:pointer}
.tool:hover{border-color:var(--yellow)}
.tool svg{width:19px;height:19px;flex:none}
.tool .note{fill:currentColor}
.tool[aria-pressed="true"]{border-color:var(--yellow);color:var(--yellow)}
.tool[aria-pressed="true"] .note{animation:bob .5s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-2px) rotate(-6deg)}}
.tool.contact{background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-weight:500}
#theme-toggle .ico{display:none}
[data-theme-preference="auto"] #theme-toggle .i-auto,[data-theme-preference="light"] #theme-toggle .i-day,[data-theme-preference="dark"] #theme-toggle .i-night{display:block}

.strip{height:58px;justify-content:center;border-top:3px solid var(--yellow);padding-bottom:env(safe-area-inset-bottom)}
.strip ol{display:flex;align-items:center;gap:2px}
.strip a{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:34px;justify-content:center;padding:0 8px;border-radius:999px;color:#CFC6B2;font:400 13.5px/1 var(--body);letter-spacing:.03em;text-decoration:none}
.strip a i{width:17px;height:19px;flex:none;background:#6B6557;-webkit-mask:var(--pot) center/contain no-repeat;mask:var(--pot) center/contain no-repeat;transition:background .3s}
.strip a.seen i{background:var(--honey)}
.strip a[aria-current="page"]{color:var(--yellow)}
.strip a[aria-current="page"] i{background:var(--yellow)}
.strip a:hover{color:var(--paper)}
.turn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1.5px solid #4A463C;border-radius:50%;background:transparent;color:#FBF4DD;cursor:pointer}
.turn:hover:not(:disabled){border-color:var(--yellow);color:var(--yellow)}
.turn:disabled{opacity:.3;cursor:default}
.turn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.strip .prev{margin-right:auto}
.strip .next{margin-left:auto}
html:not(.js) .turn{display:none}
@media (max-width:1500px){
  .strip a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media (max-width:760px){
  .tool .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tool{padding:6px 9px}
  .tool.contact{padding:6px 14px}
  .top .brand img{height:22px}
}
@media (max-width:350px){.tools{gap:5px}.tool{min-width:40px;padding:6px 7px}.tool.contact{padding:6px 10px}.top .brand img{height:20px}}
/* phones: the pot strip always fits between the arrows (it overflowed at 371-417 px) */
@media (max-width:520px){
  .strip{gap:6px}
  .strip ol{flex:1 1 auto;min-width:0;justify-content:center;gap:0}
  .strip li{flex:0 1 34px;min-width:0;display:flex;justify-content:center}
  .strip a{min-width:0;width:100%;padding:0}
  .turn{width:40px;height:40px}
}

/* ---------- shared pieces ---------- */
.page{position:relative;font-size:17px;border-bottom:1px solid var(--line);background:var(--surface)}
.leaf{display:grid;gap:.9em;align-content:center;padding:28px 20px;min-width:0}
.scene,.boards{display:none}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font:400 .76em/1.3 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.eyebrow i{width:1.1em;height:1.25em;flex:none;background:var(--honey);-webkit-mask:var(--pot) center/contain no-repeat;mask:var(--pot) center/contain no-repeat}
.leaf h2{font-size:clamp(1.5em,calc(1.05em + 1.1vw),2.3em)}
.leaf h3{font-size:1.08em;line-height:1.25}
h2 em,h1 em{font-style:italic;color:var(--accent)}
.lead{color:var(--text-2);max-width:34em}
.story{font:italic 400 1.12em/1.4 var(--display);color:var(--text-2);max-width:26em}
.fine{font-size:.84em;color:var(--muted);max-width:44em}
.leaf a:not(.btn){text-decoration:underline;text-decoration-color:var(--honey);text-underline-offset:.22em}
.sprig{width:7.5em;height:1.5em;background:var(--accent);-webkit-mask:url("/assets/chapter-sprig.svg") left center/contain no-repeat;mask:url("/assets/chapter-sprig.svg") left center/contain no-repeat}
.emblem{width:min(100%,15em);height:auto;color:var(--text);overflow:visible}
.emblem .dash{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1.5 9}
.emblem .ink{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:44px;padding:.55em 1.25em;border-radius:var(--hand);font:500 .95em/1.25 var(--body);letter-spacing:.03em;text-decoration:none;border:2px solid var(--text);background:var(--surface);color:var(--text);cursor:pointer;box-shadow:2px 3px 0 var(--plate);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:3px 4px 0 var(--plate)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--plate)}
.btn-solid{background:var(--solid-bg);color:var(--solid-fg);border-color:var(--solid-bg);box-shadow:4px 4px 0 var(--honey-deep)}
.btn-solid:hover{box-shadow:6px 6px 0 var(--honey-deep)}
.btn svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.cta{display:flex;flex-wrap:wrap;gap:.7em .9em;align-items:center}
.quiet{background:none;border:0;padding:.5em .2em;min-height:44px;display:inline-flex;align-items:center;font:400 .92em/1.2 var(--body);color:inherit;text-decoration:underline;text-decoration-color:var(--honey);text-underline-offset:.25em;cursor:pointer;justify-self:start}
.ticks{display:grid;gap:.25em;font-size:.93em;color:var(--text-2)}
.ticks li{padding-left:1.25em;position:relative}
.ticks li::before{content:"";position:absolute;left:.1em;top:.52em;width:.48em;height:.48em;border-radius:50%;background:var(--honey)}
.card{padding:.85em 1em;display:grid;gap:.4em;align-content:start;background:color-mix(in srgb,var(--bg) 55%,var(--surface));border:1px solid color-mix(in srgb,var(--text) 40%,transparent);border-radius:var(--hand)}
[data-theme="dark"] .card{border-color:var(--line)}


/* ---------- before we begin: the author ---------- */
.portrait{margin:0;width:min(100%,19em);justify-self:center;aspect-ratio:4/5;border:1.5px solid var(--ink);border-radius:var(--hand);overflow:hidden;box-shadow:7px 8px 0 var(--honey-deep);transform:rotate(-1.2deg);background:var(--wax)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.caption{text-align:center;font-size:.92em;color:var(--text-2)}
.facts{display:grid;gap:.4em;font-size:.94em}
.facts li{display:grid;grid-template-columns:3.6em 1fr;gap:.7em}
.facts b{font:550 1em/1.45 var(--display);color:var(--accent)}
.record{display:grid;gap:.35em}
.record h3{font:400 .78em/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.record ul{display:grid;gap:.3em}
.record li{display:grid;font-size:.92em;line-height:1.3}
.record li span{font-size:.86em;color:var(--muted)}
.stage[data-page="author"]{--wash:var(--wash-sky)}

/* ---------- chapter one: the signpost ---------- */
.signpost{position:relative;display:grid;gap:.85em;padding:.2em 0 .6em}
.signpost::before{content:"";position:absolute;left:50%;top:-1.3em;bottom:-1.8em;width:.85em;margin-left:-.42em;background:var(--trunk);border:1.5px solid var(--ink);border-radius:.35em .35em 0 0}
[data-theme="dark"] .signpost::before{background:#3A2A1B;border-color:rgba(247,222,110,.4)}
.board{position:relative;display:grid;gap:.12em;width:88%;padding:.7em 1.1em;text-align:left;background:var(--wax);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--hand);box-shadow:3px 4px 0 color-mix(in srgb,var(--bark) 38%,transparent);cursor:pointer;transition:transform .2s var(--ease),background .2s}
.board:nth-child(odd){justify-self:end;transform:rotate(-1.1deg);padding-right:2.4em}
.board:nth-child(even){justify-self:start;transform:rotate(.9deg);padding-left:2.4em}
.board::after{content:"";position:absolute;top:50%;width:.7em;height:.7em;margin-top:-.35em;border:solid currentColor;border-width:2.5px 2.5px 0 0}
.board:nth-child(odd)::after{right:1em;transform:rotate(45deg)}
.board:nth-child(even)::after{left:1em;transform:rotate(-135deg)}
.board b{font:550 1.14em/1.2 var(--display);font-variation-settings:"SOFT" 70,"WONK" 1}
.board span{font-size:.86em;line-height:1.35}
.board:hover{transform:rotate(0) translateY(-2px)}
.board[aria-pressed="true"]{background:var(--ink);color:var(--yellow);border-color:var(--yellow);transform:rotate(0)}
.board[aria-pressed="true"] span{color:#FBF4DD}

/* ---------- chapter two: the five questions ---------- */
.comb{width:min(100%,12.5em);height:auto;overflow:visible}
.comb .cell{fill:var(--surface);stroke:var(--text);stroke-width:2;stroke-linejoin:round;transition:fill .4s}
.comb text{font:550 17px var(--display);fill:var(--muted);text-anchor:middle;dominant-baseline:central}
.comb .sound .cell{fill:var(--honey)}
.comb .sound text{fill:var(--ink)}
.comb .weak .cell{fill:none;stroke:var(--accent);stroke-dasharray:5 5}
.comb .weak text{fill:var(--accent)}
.comb .now .cell{stroke:var(--accent);stroke-width:4}
.comb .now text{fill:var(--text)}
.quiz{display:grid;gap:.4em;list-style:decimal;padding-left:1.4em;font-size:.95em}
.js .quiz{display:none}
.qcard{display:grid;gap:1em}
.qask,.qresult{display:grid;gap:.9em}
.qtext{font:550 clamp(1.25em,calc(1em + .8vw),1.65em)/1.22 var(--display);font-variation-settings:"SOFT" 70,"WONK" 1;min-height:3.7em}
.answers{display:flex;flex-wrap:wrap;gap:.6em}
.answers .btn{flex:1 1 5.5em}
.joints{display:grid;gap:.55em;counter-reset:j}
.joints li{display:grid;grid-template-columns:auto 1fr;gap:0 .7em;counter-increment:j;align-items:start}
.joints li::before{content:counter(j);display:grid;place-items:center;width:1.7em;height:1.7em;grid-row:1 / span 2;border-radius:50%;background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);font:550 .9em/1 var(--display)}
.joints b{font:550 1.04em/1.25 var(--display);font-variation-settings:"SOFT" 70,"WONK" 1}
.joints span{font-size:.9em;color:var(--text-2);grid-column:2}

/* ---------- chapter three: the sample review ---------- */
.stamp{display:inline-flex;align-items:center;gap:.5em;justify-self:start;padding:.3em .8em;border:1.5px dashed var(--accent);border-radius:6px 9px 7px 10px;font:400 .74em/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);transform:rotate(-1deg)}
.map{display:grid;gap:.5em}
.map figcaption{font:italic 400 .95em/1.3 var(--display);color:var(--text-2)}
.trailwrap{position:relative}
.trail{position:relative;display:grid;gap:.55em;padding:.2em 0}
.trailpath{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.trailpath path{fill:none;stroke:var(--text);stroke-width:1.8;stroke-dasharray:1.5 7;stroke-linecap:round;opacity:.65}
.trail li{position:relative;z-index:1;width:58%;padding:.4em .8em;background:var(--surface);border:1.5px solid var(--text);border-radius:6px 10px 7px 11px;font-size:.92em;line-height:1.25}
.trail li:nth-of-type(even){justify-self:end}
.trail li small{display:block;font:italic 400 .86em/1.25 var(--display);color:var(--accent)}
.trail li[data-pin]{border-color:var(--honey-deep);border-style:dashed;background:var(--wax);color:var(--ink)}
.trail li[data-pin] small{color:var(--honey-deep)}
.trail li[data-pin]::after,.pin{content:attr(data-pin);display:grid;place-items:center;width:1.75em;height:1.75em;border-radius:50% 50% 50% 8%;background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);font:550 .9em/1 var(--display);box-shadow:2px 2px 0 var(--honey-deep)}
.trail li[data-pin]::after{position:absolute;top:-.7em;right:-.7em;transform:rotate(8deg)}
.findings{display:grid;gap:.7em}
.finding{display:grid;grid-template-columns:auto 1fr;gap:.1em .7em;align-items:start}
.finding .pin{grid-row:1 / span 3;margin-top:.1em}
.finding h3{font-size:1.02em}
.finding h3 i{font:400 .68em/1 var(--body);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:.25em .5em;margin-left:.5em;border-radius:4px;background:var(--ink);color:var(--yellow);vertical-align:.15em;white-space:nowrap}
.finding h3 i.med{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.finding p{font-size:.88em;line-height:1.4;color:var(--text-2)}
.finding p b{font-weight:500;color:var(--text)}
.brief{padding:.7em .95em;border:1.5px dashed color-mix(in srgb,var(--text) 55%,transparent);border-radius:var(--hand);background:color-mix(in srgb,var(--bg) 55%,var(--surface));font-size:.86em;display:grid;gap:.25em}
.brief h3{font:400 .82em/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.brief ol{list-style:decimal;padding-left:1.3em;display:grid;gap:.1em}
.views{display:none;gap:.4em}
.views button{flex:1;min-height:40px;padding:.3em .5em;border:1.5px solid color-mix(in srgb,var(--text) 55%,transparent);border-radius:999px;background:var(--surface);font:400 .88em/1.2 var(--body);cursor:pointer}
.views button[aria-pressed="true"]{background:var(--solid-bg);color:var(--solid-fg);border-color:var(--solid-bg)}

/* ---------- chapter four: the offer ---------- */
.tag{position:relative;display:inline-grid;justify-self:start;gap:.15em;padding:.75em 1.3em .8em 2.4em;background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--hand);transform:rotate(-2deg);box-shadow:4px 5px 0 var(--honey-deep)}
.tag::before{content:"";position:absolute;left:.8em;top:50%;width:.7em;height:.7em;margin-top:-.35em;border-radius:50%;background:var(--surface);border:1.5px solid var(--ink)}
.tag b{font:550 2.1em/1 var(--display);font-variation-settings:"SOFT" 70,"WONK" 1;letter-spacing:-.01em}
.tag span{font:400 .76em/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase}
.promise{font:italic 400 1.05em/1.4 var(--display)}
.starts{display:grid;gap:.3em;font-size:.9em;color:var(--text-2);counter-reset:s}
.starts li{display:grid;grid-template-columns:auto 1fr;gap:.6em;counter-increment:s}
.starts li::before{content:counter(s);display:grid;place-items:center;width:1.5em;height:1.7em;padding-top:.3em;font:550 .85em/1 var(--display);color:var(--ink);background:var(--honey);-webkit-mask:var(--pot) center/contain no-repeat;mask:var(--pot) center/contain no-repeat}

/* ---------- chapter five: the honey pots ---------- */
.shelf{display:flex;align-items:flex-end;gap:.5em;padding-bottom:.35em;border-bottom:3px solid var(--text);width:min(100%,13em)}
.shelf i{background:var(--honey);-webkit-mask:var(--pot) center bottom/contain no-repeat;mask:var(--pot) center bottom/contain no-repeat;width:2.4em;height:2.8em}
.shelf i:nth-child(2){width:3.3em;height:3.8em;background:var(--yellow)}
.shelf i:nth-child(3){width:2em;height:2.3em;background:var(--honey-deep)}
[data-theme="light"] .shelf i:nth-child(2){background:var(--ink)}
.jars{display:flex;flex-wrap:wrap;gap:.45em}
.jar{display:inline-flex;align-items:center;gap:.45em;min-height:40px;padding:.3em .85em;border:1.5px solid color-mix(in srgb,var(--text) 55%,transparent);border-radius:999px;background:var(--surface);font:400 .88em/1.2 var(--body);cursor:pointer}
.jar b{font:500 .82em/1 var(--display);color:var(--accent)}
.jar[aria-pressed="true"]{background:var(--solid-bg);color:var(--solid-fg);border-color:var(--solid-bg)}
.jar[aria-pressed="true"] b{color:inherit}
.notes{display:grid}
.js .jarnote{grid-area:1/1}
.jarnote .kind{font:400 .74em/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.jarnote p{font-size:.94em}
.jarnote .honey{display:flex;gap:.6em;align-items:baseline}
.jarnote .honey em{font:italic 500 1em/1 var(--display);color:var(--accent);flex:none}
.flow{display:flex;flex-wrap:wrap;gap:.35em .2em;align-items:center;font-size:.8em}
.flow li{padding:.25em .65em;border:1.5px solid var(--text);border-radius:6px 9px 7px 10px;background:var(--surface)}
.flow li:last-child{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.flow li+li{margin-left:1.1em;position:relative}
.flow li+li::before{content:"";position:absolute;left:-1.05em;top:50%;width:.75em;border-top:1.5px solid var(--text)}


/* screenshots of the named sites, in a small browser frame */
.shot{margin:.15em 0 .2em;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--ink);box-shadow:3px 4px 0 color-mix(in srgb,var(--bark) 30%,transparent)}
.shot .bar{display:flex;align-items:center;gap:5px;padding:5px 9px;background:#2A2722;color:#CFC6B2;font:400 .7em/1 var(--body);letter-spacing:.03em}
.shot .bar i{width:7px;height:7px;border-radius:50%;background:#6B6557}
.shot .bar i:first-child{background:var(--honey)}
.shot .bar b{font-weight:400;margin-left:6px}
.shot img{width:100%;height:auto;max-height:min(11em,20vh);object-fit:cover;object-position:top}
@media (max-width:899px),(max-height:479px){.shot img{max-height:min(7.5em,14vh)}}


/* ---------- phase 2: the cover's reader line, face and two doors ---------- */
.for-whom{font-size:1.02em;color:#E2D6BC;max-width:32em}
.face{display:flex;align-items:center;gap:.75em;text-align:left;max-width:32em}
.face img{width:3.2em;height:3.2em;flex:none;border-radius:50%;object-fit:cover;object-position:50% 14%;border:2px solid var(--yellow)}
.face p{font-size:.88em;color:#E2D6BC;line-height:1.35}
.doors .btn small{font-weight:400;opacity:.8;margin-left:.3em}
.tome .doors .btn:not(.btn-solid){background:transparent;color:#FBF4DD;border-color:#FBF4DD;box-shadow:none}
.tome .tune-ctl{color:#CFC6B2;font-size:.85em;min-height:40px}

/* contents and edition */
.toc{display:grid;gap:.35em;counter-reset:t}
.toc a{display:grid;gap:.05em;padding:.45em .1em .45em 0;text-decoration:none !important;border-bottom:1px dotted color-mix(in srgb,var(--text) 35%,transparent)}
.toc span{font:550 1.02em/1.25 var(--display);font-variation-settings:"SOFT" 70,"WONK" 1}
.toc i{font:italic 400 .88em/1.3 var(--display);color:var(--muted)}
.toc a:hover span{color:var(--accent)}
.edition-h{font-size:1.15em}
.board.general{justify-self:stretch;width:100%;transform:none;padding:.55em 1.1em;background:var(--surface);color:var(--text)}
.board.general::after{display:none}
.board.general[aria-pressed="true"]{background:var(--ink);color:var(--yellow)}
.ribbon{display:none}
.js .ribbon{display:flex;flex-direction:column;align-items:center;position:absolute;top:0;right:clamp(14px,4vw,64px);z-index:6;padding:.35em .6em .9em;background:var(--yellow);color:var(--ink);font:400 11px/1.15 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);box-shadow:none}
.ribbon b{font:600 12px/1.2 var(--body);text-transform:none;letter-spacing:0}
.stage[data-page="cover"] .ribbon{display:none}

/* the short version */
.mini-me{display:grid;grid-template-columns:5.2em 1fr;gap:1em;align-items:center}
.mini-me img{width:5.2em;height:5.2em;border-radius:50%;object-fit:cover;object-position:50% 14%;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--honey-deep)}
.brief-list{display:grid;gap:.25em .9em;grid-template-columns:auto 1fr;margin:0}
.brief-list dt{font:400 .74em/1.9 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.brief-list dd{margin:0 0 .5em;font-size:.97em}
@media (max-width:520px){.brief-list{grid-template-columns:1fr}.brief-list dd{margin-bottom:.6em}}

/* the request slip */
.slip{display:grid;gap:.6em}
.slip label{display:grid;gap:.25em;font:500 .92em/1.3 var(--body)}
.slip small{font-weight:400;color:var(--muted)}
.slip input,.slip textarea,.slip select{width:100%;padding:.5em .7em;background:var(--surface);color:var(--text);border:1.5px solid var(--text);border-radius:7px 11px 8px 12px;font:400 16px/1.35 var(--body)}
.slip textarea{resize:vertical;min-height:2.8em}
.stage[data-page="request"]{--wash:var(--yellow)}
.stage[data-page="colophon"],.stage[data-page="contents"]{--wash:var(--wash-sage)}
.stage[data-page="short"]{--wash:var(--wash-yellow)}
[data-theme="dark"] .stage[data-page="request"]{--wash:var(--wash-yellow)}

/* the landed note, for a link that opens at an inner page */
.landed{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:7;display:flex;flex-wrap:wrap;gap:.3em .9em;align-items:center;justify-content:center;max-width:calc(100% - 24px);padding:.4em .5em .4em 1em;background:var(--ink);color:#FBF4DD;border:1.5px solid var(--yellow);border-radius:999px;font:400 13.5px/1.3 var(--body)}
.landed a{color:var(--yellow)}
.landed .x{background:none;border:0;color:#FBF4DD;font-size:20px;line-height:1;min-width:32px;min-height:32px;cursor:pointer}

/* the strip: a page label and a contents button on phones */
.where{display:none;margin:0;align-items:center;gap:.7em;color:#CFC6B2;font:400 13.5px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 .9em;border:1.5px solid #4A463C;border-radius:999px;color:#FBF4DD;text-decoration:none}
@media (max-width:640px){
  .js .strip ol{display:none}
  .js .where{display:flex;flex:1 1 auto;min-width:0;justify-content:center}
  .flybee{display:none !important}
}

/* phones: a spread too full for one screen shows one leaf at a time */
.js .page[data-split="1"][data-sub="0"] > .leaf.right,.js .page[data-split="1"][data-sub="1"] > .leaf.left{display:none !important}

/* plain page: one scrolling document */
.plain .ribbon,.plain .landed,.plain .boards,.plain .flybee,.plain .turn,.plain .where{display:none !important}
.plain .page{border-bottom:1px solid var(--line)}
.plain .jarnote[hidden]{display:grid !important}


/* short screens: tighter spacing, so pages fit without deleting anything */
@media (max-height:780px){
  .tome{gap:.7em;padding-top:clamp(22px,3.2vh,40px);padding-bottom:clamp(22px,3.2vh,40px)}
  .logo3d{width:min(340px,70%,calc(13vh * 2.96))}
  .face img{width:2.6em;height:2.6em}
  .tome h1{font-size:clamp(1.35em,calc(.9em + 1.3vw),2em)}
  .toc{gap:.1em}.toc a{padding:.28em .1em .28em 0}
  .slip{gap:.4em}.slip textarea{min-height:2.3em}
  .slip input,.slip textarea,.slip select{padding:.38em .6em}
  .portrait{width:min(100%,15em)}
  .record ul{gap:.15em}
}
@media (min-width:900px) and (max-height:780px){
  .js .leaf{gap:.7em;padding-top:clamp(16px,2.6vh,34px);padding-bottom:clamp(24px,3.4vh,40px)}
  .leaf h2{font-size:clamp(1.4em,calc(.95em + 1vw),2em)}
}
@media (max-width:899px) and (max-height:760px){
  .tome{padding:22px 18px 20px 34px;gap:.6em}
  .for-whom{font-size:.95em}
}


@media (max-height:780px){
  .shot img{max-height:min(11em,15vh)}
  .jar{min-height:34px;padding:.15em .7em}
  .jars{gap:.3em}
  .slip label{font-size:.86em;gap:.15em}
}
@media (max-height:690px){
  .logo3d{width:min(300px,60%,calc(10vh * 2.96))}
  .tome{gap:.5em}
  .tome h1{font-size:clamp(1.3em,calc(.85em + 1.1vw),1.75em)}
  .portrait{width:min(100%,11.5em)}
  .facts{gap:.2em}
  .record h3{display:none}
  .slip{grid-template-columns:1fr 1fr;column-gap:.7em}
  .slip label:nth-of-type(1),.slip label:nth-of-type(3),.slip label:nth-of-type(4),.slip .cta,.slip .copied{grid-column:1 / -1}
}


.tome .tune-ctl{justify-self:center}
@media (max-width:520px){.tool.contact .long{display:none}}
@media (max-height:690px){.logo3d{width:min(240px,50%,calc(8vh * 2.96))}.for-whom{font-size:.92em}}

@media (max-width:640px){.landed{top:auto;bottom:10px;border-radius:12px;font-size:12.5px;gap:.2em .7em;padding:.35em .4em .35em .8em;width:calc(100% - 28px)}}

/* ---------- phase 3: the reading, the offer ladder, team "Day" tags ---------- */
.score{font:550 clamp(1.3em,calc(1em + .9vw),1.8em)/1.2 var(--display);font-variation-settings:"SOFT" 70,"WONK" 1}
.sound-list{display:grid;gap:.25em;font-size:.92em;color:var(--text-2)}
.sound-list li{padding-left:1.4em;position:relative}
.sound-list li::before{content:"";position:absolute;left:.15em;top:.45em;width:.7em;height:.8em;background:var(--honey);-webkit-mask:var(--pot) center/contain no-repeat;mask:var(--pot) center/contain no-repeat}
.weakest{display:grid;gap:.35em;padding:.9em 1.1em;background:var(--wax);color:var(--ink);border:1.5px dashed var(--honey-deep);border-radius:var(--hand)}
.weakest .eyebrow{color:var(--honey-deep)}
.weakest h3{font-size:1.25em}
.qdone{display:grid;gap:.8em}
.offer-door{display:grid;gap:.75em}
.ladder{font-size:.92em;color:var(--text-2)}
.ladder b{display:inline-block;margin-right:.45em;font:400 .78em/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.finding h3 i.day{display:none}
.stage[data-page="reading"],.stage[data-page="findings"]{--wash:var(--wash-sky)}
.stage[data-page="how"]{--wash:var(--wash-yellow)}


/* five doors: compact signposts; the edition line replaces the general reader line on the cover */
#contents .signpost{gap:.45em;padding:0}
#contents .signpost::before{display:none}
#contents .board,#contents .board:nth-child(odd),#contents .board:nth-child(even){width:100%;justify-self:stretch;transform:none;padding:.42em 2.2em .42em .9em}
#contents .board:nth-child(even)::after{left:auto;right:1em;transform:rotate(45deg)}
#contents .board b{font-size:1em}
#contents .board span{font-size:.8em}
html:not([data-path="any"]) .for-whom{display:none}
@media (min-width:900px) and (max-height:780px){#contents .signpost{grid-template-columns:1fr 1fr}#contents .board span{display:block}}
@media (max-height:780px){
  .slip{grid-template-columns:1fr 1fr;column-gap:.7em}
  .slip label:nth-of-type(1),.slip label:nth-of-type(3),.slip label:nth-of-type(4),.slip .cta,.slip .copied{grid-column:1 / -1}
}

.full-sample{font-size:.95em;padding:.6em .9em;border:1.5px solid var(--yellow);border-radius:var(--hand);background:color-mix(in srgb,var(--yellow) 14%,transparent)}
.full-sample a{font-weight:500}

/* ---------- phase 5: page furniture ---------- */
@media (min-width:900px) and (min-height:480px){
  .js .leaf{align-content:start;padding-top:clamp(46px,7.5vh,86px)}
  .js .leaf[data-head]::before{content:attr(data-head);position:absolute;top:clamp(16px,2.6vh,28px);font:italic 400 .76em/1 var(--display);letter-spacing:.05em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
  .js .leaf.left[data-head]::before{left:2em}
  .js .leaf.right[data-head]::before{right:2em}
  .js .leaf.left[data-head]::after,.js .leaf.right[data-head]::after{font-style:normal;font-family:var(--display);font-weight:550}
}
@media (min-width:900px) and (max-height:780px){.js .leaf{padding-top:50px}.js .leaf[data-head]::before{top:16px}}
/* chapter openers: a sprig under the heading and a drop cap on the first paragraph */
.opener .leaf.left > h2::after{content:"";display:block;width:5.5em;height:1.1em;margin-top:.45em;background:var(--accent);-webkit-mask:url("/assets/chapter-sprig.svg") left center/contain no-repeat;mask:url("/assets/chapter-sprig.svg") left center/contain no-repeat}
.opener .leaf.left > .lead::first-letter{float:left;font:550 3.15em/.8 var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;margin:.07em .1em 0 0;color:var(--accent)}
/* one spot drawing per chapter: the bee doing the chapter's job, one ink weight */
.spot{width:min(100%,12.5em);height:auto;color:var(--text);margin-top:.3em;overflow:visible}
.spot .ink{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spot .dot{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:1.5 7}
.spot .honey{fill:var(--honey)}
.spot .wax{fill:var(--wax)}
@media (max-height:780px){.js .spot{display:none}}
.print-only{display:none}

/* ---------- print: the whole book as a clean document, in the reader's edition ---------- */
@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  html[data-theme]{--bg:#fff;--surface:#fff;--text:#161616;--text-2:#2A2722;--muted:#5F5546;--accent:#8A4808;--line:#161616;--plate:#161616;--solid-bg:#161616;--solid-fg:#F7DE6E;--hero:#fff}
  html,body,.js,.js body{height:auto !important;overflow:visible !important;display:block !important;background:#fff !important}
  .bar,.ribbon,.landed,.flybee,.scene,.boards,.skip,.tune-ctl,.slip,.views,.jars,.qcard,.doors .btn:not(.btn-solid),#announce{display:none !important}
  .stage{display:block !important;overflow:visible !important;background:#fff !important}
  .js .page,.plain .page{position:static !important;visibility:visible !important;display:block !important;width:auto !important;height:auto !important;transform:none !important;animation:none !important;border:0 !important;box-shadow:none !important;padding:0 0 6mm !important;margin:0 !important;break-before:page;background:#fff !important}
  .js .page.cover{break-before:auto}
  .leaf{display:block !important;padding:0 !important;overflow:visible !important;background:none !important}
  .js .page[data-split="1"][data-sub] > .leaf.left,.js .page[data-split="1"][data-sub] > .leaf.right{display:block !important}
  .trail{padding-right:6mm}
  .leaf + .leaf{margin-top:5mm}
  .leaf > * + *{margin-top:3mm}
  .leaf::before,.leaf::after{display:none !important}
  .tome{max-height:none !important;box-shadow:none !important;margin:0 auto}
  .js .quiz,.plain .quiz{display:block !important;list-style:decimal;padding-left:6mm}
  .jarnote[hidden]{display:grid !important;margin-bottom:3mm}
  .plate{display:block !important}
  a{color:inherit !important;text-decoration:none}
  .print-only{display:block !important}
  .finding,.card,.plate,.board,.trail li{break-inside:avoid}
}

.tag{width:fit-content;max-width:100%}
.tag span{overflow-wrap:anywhere}
/* ---------- the last page ---------- */
.more{display:flex;flex-wrap:wrap;gap:.3em 1.4em;font-size:.9em}
.copied{font-style:italic;color:var(--accent);font-size:.9em}
.closing{font:italic 400 .92em/1.4 var(--display);color:var(--text-2)}
.theend{font:italic 500 clamp(1.5em,calc(1em + 1.6vw),2.4em)/1.2 var(--display);font-variation-settings:"SOFT" 100,"WONK" 1}
.theend em{color:var(--accent)}

/* ---------- the cover: an ink-bound book, the title stamped in honey ---------- */
.cover{background:var(--hero);display:grid;place-items:center;padding:24px 16px;border:0}
.tome{position:relative;display:grid;gap:1em;justify-items:center;text-align:center;align-content:center;width:min(100%,800px);padding:clamp(34px,calc(3vh + 2.4vw),72px) clamp(30px,calc(1vh + 4vw),84px);
  background:linear-gradient(90deg,#0B0B0A 0,#2A2722 14px,#161616 26px,#161616 100%);color:#FBF4DD;border-radius:6px 12px 12px 6px;
  box-shadow:5px 5px 0 #F3E8C8,6px 6px 0 #8A7F68,9px 9px 0 #F3E8C8,10px 10px 0 #8A7F68,18px 20px 0 color-mix(in srgb,var(--bark) 30%,transparent);transform-origin:0 50%}
[data-theme="dark"] .tome{box-shadow:5px 5px 0 #CFC6B2,6px 6px 0 #4A463C,9px 9px 0 #CFC6B2,10px 10px 0 #4A463C,0 0 0 1px rgba(247,222,110,.35),0 0 60px rgba(247,222,110,.12)}
.tome::before{content:"";position:absolute;inset:14px 14px 14px 36px;border:1.5px solid rgba(247,222,110,.85);border-radius:4px 9px 9px 4px;pointer-events:none}
.tome::after{content:"";position:absolute;inset:19px 19px 19px 41px;border:1px solid rgba(247,222,110,.35);border-radius:3px 7px 7px 3px;pointer-events:none}
.tome>*{position:relative;z-index:1}
.tome h1{font-size:clamp(1.45em,calc(1em + 1.5vw),2.35em);max-width:17em;font-weight:550;line-height:1.12;color:#FBF4DD}
.tome h1 em{color:var(--yellow)}
.tome .for{font:400 .78em/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.tome .by{font-size:.95em;color:#E2D6BC}
.tome .fine{color:#BCAE92;max-width:30em}
.tome .cta{justify-content:center}
.tome .btn-solid{background:var(--yellow);color:var(--ink);border-color:var(--yellow);box-shadow:4px 4px 0 var(--honey-deep)}
.tome .quiet{color:#FBF4DD}
.tome .sprig{background:var(--yellow);-webkit-mask-position:center;mask-position:center;opacity:.85}
.logo3d{width:min(400px,80%,calc(17vh * 2.96))}
.honeylogo{position:relative;width:100%;aspect-ratio:1400/473;--logo:url("/assets/logo-tagline-ink.webp");--ghost:rgba(247,222,110,.17);--honey-fill:linear-gradient(180deg,#FFE18A 0%,#F7C44F 40%,#D98A1E 100%)}
.honeylogo .ghost,.honeylogo .liquid{position:absolute;inset:0;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.honeylogo .ghost{background:var(--ghost)}
.honeylogo .shadow{position:absolute;inset:0}
.honeylogo .fill{position:absolute;inset:0;background:var(--honey-fill);clip-path:inset(var(--lvl) 0 0 0)}
.honeylogo .surface{position:absolute;left:0;right:0;height:14px;top:calc(var(--lvl) - 8px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 8C20 2 40 2 60 8S100 14 120 8V14H0Z' fill='%23FFE18A'/%3E%3C/svg%3E") 0 0/120px 14px repeat-x;animation:wave 1.2s linear infinite}
@keyframes wave{to{background-position-x:120px}}
.honeylogo .glint{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,250,230,.9) 50%,transparent 60%) 0 0/300% 100% no-repeat;background-position:150% 0;mix-blend-mode:soft-light}
.honeylogo .stream{position:absolute;left:50%;bottom:62%;width:7px;margin-left:-3.5px;height:52vh;max-height:420px;border-radius:4px;background:linear-gradient(90deg,#D98A1E,#FFE18A 45%,#F7C44F);clip-path:inset(0 0 100% 0);pointer-events:none}
.js .honeylogo.pour{--lvl:100%;animation:rise 3.4s cubic-bezier(.45,.05,.3,1) .5s forwards}
.js .honeylogo.pour .stream{animation:pourin 4.2s ease-in-out .1s forwards}
.js .honeylogo.poured .glint{animation:glint 9s ease-in-out 1s infinite}
.js .honeylogo.poured .surface{display:none}
html:not(.js) .honeylogo,.honeylogo.poured{--lvl:-8%}
html:not(.js) .honeylogo .surface{display:none}
@keyframes rise{0%{--lvl:100%}100%{--lvl:-8%}}
@keyframes pourin{0%{clip-path:inset(0 0 100% 0)}12%{clip-path:inset(0 0 0 0)}78%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(100% 0 0 0)}}
@keyframes glint{0%,70%{background-position:150% 0}90%,100%{background-position:-50% 0}}
.honeylogo .singwrap{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(0 0 5px rgba(247,222,110,.95)) drop-shadow(0 0 16px rgba(232,163,61,.8))}
.honeylogo .sing{position:absolute;inset:0;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;background:#FFF6D0;clip-path:inset(0 100% 11% 0);transition:clip-path .12s ease-out}
.js .honeylogo{cursor:pointer}

/* ---------- the bee: born on the Q, then keeps your place ---------- */
.flybee{display:none}
.js .flybee{display:block;position:fixed;left:0;top:0;z-index:30;width:34px;height:34px;pointer-events:none;opacity:0;filter:var(--bee-halo);
  transform:translate(var(--bx,50vw),var(--by,50vh)) scale(.2);transition:transform .35s var(--ease),opacity .3s}
.js .flybee.out{opacity:1;transform:translate(var(--bx,50vw),var(--by,50vh)) scale(1)}
.flybee svg{width:100%;height:100%;overflow:visible}
.flybee .wl,.flybee .wr{animation:none !important}
.flybee .wl{transform-origin:28px 30px;animation:flapl .11s ease-in-out infinite alternate}
.flybee .wr{transform-origin:36px 30px;animation:flapr .11s ease-in-out infinite alternate}
@keyframes flapl{from{transform:rotate(-16deg)}to{transform:rotate(14deg)}}
@keyframes flapr{from{transform:rotate(16deg)}to{transform:rotate(-14deg)}}
@keyframes hover{50%{transform:translateY(-3px)}}

/* =====================================================================
   With scripts: one page per screen, nothing scrolls
   ===================================================================== */
.js,.js body{height:100%;overflow:hidden;overscroll-behavior:none}
.js body{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100vh;height:100dvh}
.js .top{position:relative}
.js .stage{position:relative;overflow:hidden;background:var(--hero);--p:0}
.js .scene{display:block;position:absolute;inset:0;pointer-events:none}
.js .scene img{width:100%;height:100%;object-fit:cover;object-position:center}
[data-theme="dark"] .scene img{opacity:.22}
.js .scene::after{content:"";position:absolute;inset:0;background:var(--wash,transparent);opacity:.7;transition:opacity .6s}
.stage[data-page="cover"] .scene::after{opacity:0}
.stage[data-page="path"],.stage[data-page="work"]{--wash:var(--wash-sage)}
.stage[data-page="check"],.stage[data-page="offer"]{--wash:var(--wash-yellow)}
.stage[data-page="sample"]{--wash:var(--wash-sky)}
.stage[data-page="ask"]{--wash:var(--yellow)}
[data-theme="dark"] .stage[data-page="ask"]{--wash:var(--wash-yellow)}

.js .page{position:absolute;inset:0;margin:auto;border:0;visibility:hidden;background:none;
  --base:clamp(16px,calc(.85vh + .42vw + 4px),18px);font-size:calc(var(--base) * var(--fit,1));line-height:1.5}
.js .page.is-active,.js .page.t{visibility:visible}
.js .page.cover{width:100%;height:100%;display:grid;place-items:center;padding:clamp(14px,3vh,40px) clamp(14px,3vw,48px)}
.js .tome{max-height:100%;overflow:hidden}
.js .tight .opt,.js .tighter .opt2{display:none !important}
.js .page.scrolls,.js .page.scrolls .leaf,.js .page.scrolls .tome{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.js .page.scrolls .leaf{justify-content:flex-start}

/* the cover opens; the book rises */
.js .cover.cover-out .tome{animation:tomeopen .5s cubic-bezier(.5,.05,.4,1) forwards}
.js .cover.cover-in .tome{animation:tomeopen .45s cubic-bezier(.3,.6,.3,1) reverse both}
.js .page.from-cover{animation:bookin .5s var(--ease) both}
.js .page.to-cover{animation:bookin .35s ease-in reverse both}
@keyframes tomeopen{0%{transform:perspective(2400px) rotateY(0)}70%{opacity:1}100%{transform:perspective(2400px) rotateY(-104deg);opacity:0}}
@keyframes bookin{0%{opacity:0;transform:scale(.965)}45%{opacity:0;transform:scale(.965)}100%{opacity:1;transform:scale(1)}}
@keyframes liftR{to{transform:perspective(2600px) rotateY(-90deg);filter:brightness(.72)}}
@keyframes liftL{to{transform:perspective(2600px) rotateY(90deg);filter:brightness(.72)}}
@keyframes layL{from{transform:perspective(2600px) rotateY(90deg);filter:brightness(.72)}to{transform:perspective(2600px) rotateY(0);filter:brightness(1)}}
@keyframes layR{from{transform:perspective(2600px) rotateY(-90deg);filter:brightness(.72)}to{transform:perspective(2600px) rotateY(0);filter:brightness(1)}}
@keyframes turnout{0%{transform:perspective(2200px) rotateY(0)}70%{opacity:1}100%{transform:perspective(2200px) rotateY(-96deg);opacity:0}}

/* ----- wide screens: an open book, two leaves and a spine ----- */
@media (min-width:900px) and (min-height:480px){
  .js .page:not(.cover),.js .boards{width:min(calc(100% - 84px),1320px);height:min(calc(100% - 52px),800px)}
  .js .page:not(.cover){display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr)}
  .js .boards{display:block;position:absolute;inset:0;margin:auto;z-index:0;transition:opacity .5s,transform .6s var(--ease)}
  .js .boards::before{content:"";position:absolute;inset:-10px -17px;background:var(--ink);border-radius:9px;box-shadow:10px 12px 0 color-mix(in srgb,var(--bark) 28%,transparent)}
  [data-theme="dark"] .boards::before{box-shadow:0 0 0 1px rgba(247,222,110,.35),10px 12px 0 rgba(0,0,0,.5)}
  .boards i{position:absolute;top:4px;bottom:4px;background:repeating-linear-gradient(90deg,#F3E8C8 0 2px,#B9AE92 2px 3px)}
  .boards .l{right:100%;width:calc(2px + 10px * var(--p));border-radius:2px 0 0 2px}
  .boards .r{left:100%;width:calc(12px - 10px * var(--p));border-radius:0 2px 2px 0}
  .stage[data-page="cover"] .boards{opacity:0;transform:scale(.965)}
  .js .leaf{position:relative;z-index:1;overflow:hidden;min-height:0;padding:clamp(20px,calc(1.8vh + 1.7vw),54px) clamp(22px,calc(1vh + 2.4vw),60px) clamp(30px,calc(2.6vh + 1.7vw),58px);background-color:var(--surface)}
  .js .leaf.left{border-radius:5px 0 0 5px;transform-origin:100% 50%;background-image:linear-gradient(to left,rgba(74,53,36,.2),rgba(74,53,36,.05) 6%,transparent 15%)}
  .js .leaf.right{border-radius:0 5px 5px 0;transform-origin:0 50%;background-image:linear-gradient(to right,rgba(74,53,36,.24),rgba(74,53,36,.06) 6%,transparent 15%)}
  [data-theme="dark"].js .leaf.left{background-image:linear-gradient(to left,rgba(0,0,0,.6),transparent 14%)}
  [data-theme="dark"].js .leaf.right{background-image:linear-gradient(to right,rgba(0,0,0,.65),transparent 14%)}
  .leaf[data-folio]::after{content:attr(data-folio);position:absolute;bottom:.9em;font:italic 400 .78em/1 var(--display);color:var(--muted);letter-spacing:.06em}
  .leaf.left[data-folio]::after{left:2em}
  .leaf.right[data-folio]::after{right:2em}
  /* a leaf lifts off one side and lies down on the other */
  .js .leaving-fwd .right,.js .leaving-back .left,.js .entering-fwd .left,.js .entering-back .right{z-index:4}
  .js .leaving-fwd .left,.js .leaving-back .right{z-index:2}
  .js .leaving-fwd .right{animation:liftR .2s cubic-bezier(.5,0,.85,.45) forwards}
  .js .entering-fwd .left{animation:layL .24s cubic-bezier(.15,.55,.3,1) .2s both}
  .js .leaving-back .left{animation:liftL .2s cubic-bezier(.5,0,.85,.45) forwards}
  .js .entering-back .right{animation:layR .24s cubic-bezier(.15,.55,.3,1) .2s both}
}

/* ----- phones and short screens: one sheet at a time ----- */
@media (max-width:899px),(max-height:479px){
  .top{height:50px}.strip{height:54px}
  .js .page:not(.cover){width:calc(100% - 16px);height:calc(100% - 16px);display:flex;flex-direction:column;justify-content:center;gap:.8em;padding:16px 16px 20px;overflow:hidden;
    background:var(--surface);border:1.5px solid var(--line);border-radius:var(--hand);box-shadow:5px 6px 0 color-mix(in srgb,var(--bark) 20%,transparent);transform-origin:0 50%}
  .js .leaf{padding:0;gap:.7em;flex:none;align-content:start}
  .js .plate{display:none !important}
  #author .leaf.left{display:grid;grid-template-columns:4.6em 1fr;align-items:center;gap:.8em}
  .portrait{width:4.6em;aspect-ratio:1;border-radius:50%;box-shadow:3px 3px 0 var(--honey-deep);transform:none}
  .caption{text-align:left}
  #author .caption.opt{display:block !important}
  .views{display:flex}
  .js .page[data-view="map"] .v:not(.v-map),.js .page[data-view="findings"] .v:not(.v-findings),.js .page[data-view="brief"] .v:not(.v-brief){display:none}
  .comb{width:9em}
  .signpost::before{display:none}
  .board,.board:nth-child(odd),.board:nth-child(even){width:100%;transform:none;justify-self:stretch;padding:.6em 2.4em .6em 1em}
  .board:nth-child(even)::after{left:auto;right:1em;transform:rotate(45deg)}
  .qtext{min-height:0}
  .tome{padding:34px 26px 30px 44px}
  .cta .btn{padding:.5em .95em}
  .js .page:not(.cover).leaving-fwd{z-index:3;animation:turnout .38s cubic-bezier(.5,.05,.4,1) forwards}
  .js .page:not(.cover).entering-fwd,.js .page:not(.cover).leaving-back{z-index:2}
  .js .page:not(.cover).entering-back{z-index:3;animation:turnout .38s cubic-bezier(.3,.6,.3,1) reverse both}
}
/* a phone on its side */
@media (max-height:479px){
  .top{height:44px}.strip{height:48px}
  .strip a,.turn{min-height:40px;height:40px}
  .turn{width:40px}
  .js .page:not(.cover){flex-direction:row;align-items:center;justify-content:flex-start;gap:1.6em;padding:10px 20px}
  .js .leaf{flex:1.25 1 0;gap:.45em}
  .js .leaf.left{flex:.85 1 0}
  #sample h2,#sample .views,.js #sample .v-brief{display:none}
  .js #sample[data-view] .v-map,.js #sample[data-view] .v-findings{display:grid}
  .trail{gap:.3em;padding:0}
  .trail li{padding:.15em .7em}
  #sample .map figcaption,#sample .leaf.right>.fine{display:none}
  .findings{gap:.4em}
  #work .leaf.left>:not(h2){display:none}
  #work .leaf.left{flex:.5 1 0}
  .jars{gap:.3em}
  .jar{min-height:32px;padding:.15em .7em;font-size:.82em}
  .js .leaf>.eyebrow{display:none}
  .leaf h2{font-size:1.35em}
  .tome{padding:20px 30px 18px 48px;gap:.5em;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);text-align:left;justify-items:start;width:min(100%,760px)}
  .tome>*{grid-column:2}
  .tome>.logo3d{grid-column:1;grid-row:1 / span 5;align-self:center;width:100%}
  .tome .cta{justify-content:flex-start}
  .tome .sprig{display:none}
}

/* calm mode: the visitor's system setting or their stored choice */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .honeylogo{--lvl:-8%}
}
[data-motion="paused"] *,[data-motion="paused"] *::before,[data-motion="paused"] *::after{animation:none !important;transition:none !important}
[data-motion="paused"] .honeylogo{--lvl:-8%}

/* @qwainaina key under the cover portrait line */
.cover .cue{margin:.2em 0 0;font-style:italic;font-size:.88em;opacity:.85}
@media (max-height:690px){.cover .cue{display:none}}

/* Phones: the Ask button needs the room; "Hear my name" stays on the cover and the colophon. */
@media (max-width:559px){.top .social{display:none!important}}   /* narrow phones: the profile links are on the last page */

/* ---------- 11 Nov: small text never below 13 px, and wide screens use their space ---------- */
.eyebrow{font-size:max(13px,.76em)}
.stamp,.jarnote .kind,.brief-list dt{font-size:max(13px,.74em)}
.shot .bar{font-size:max(12px,.7em)}
.page small,.slip small,.doors .btn small,.trail small{font-size:max(13px,.8em)}
.slip label{font-size:max(13px,.86em)}
[data-wide="left"]{margin-top:.4em}
@media (min-width:900px) and (min-height:480px){
  #short .mini-me{grid-template-columns:1fr;justify-items:start;gap:.9em}
  #short .mini-me img{width:min(11em,26vh);height:min(11em,26vh)}
  #author .portrait{width:min(100%,17em,38vh)}
  #check .leaf.right{align-content:center}
  #check .qtext{font-size:clamp(1.5em,calc(1em + 1.3vw),2.2em)}
  #check .answers .btn{min-height:3em;font-size:1.05em}
  #colophon .leaf.left{align-content:center}
  #colophon .emblem{width:min(100%,21em,34vh)}
}
.fine{font-size:max(13px,.84em)}
.quiet{font-size:max(13px,.92em)}
.tag span{font-size:max(13px,.76em)}
@media (min-width:900px) and (min-height:480px){#work .shelf{display:none}}
/* Centred content that does not fit falls back to the top instead of being clipped out of reach. */
.leaf,.tome{align-content:safe center}
@media (min-width:900px) and (min-height:480px){#check .leaf.right,#colophon .leaf.left{align-content:safe center}}
/* The header carries "Hear my name" from 420 px wide; on short screens the cover's own copy steps aside. */
@media (min-width:420px) and (max-height:700px){.cover .tune-ctl{display:none !important}}
/* A phone on its side: a narrower logo column and a tighter cover so the headline and buttons both show. */
@media (max-height:479px){
  .tome{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
  .tome>.logo3d{grid-row:1 / span 6}
  .cover h1{font-size:clamp(1.25em,calc(4vh + .55em),1.7em);line-height:1.12}
  .cover .for-whom{font-size:.86em;line-height:1.35}
  .tome .cta.doors{flex-wrap:nowrap;gap:.5em}
}
.board span{font-size:max(13px,.86em)}
#contents .board span{font-size:max(13px,.8em)}
.record li span{font-size:max(13px,.86em)}
.starts{font-size:max(13px,.9em)}
/* Small phones: the cover's two buttons share one row and the intro tightens, so everything fits. */
@media (max-width:520px) and (max-height:760px){
  .tome{gap:.55em}
  .cover .for-whom{font-size:.9em;line-height:1.4}
  .cover .cta.doors{flex-wrap:nowrap;gap:.45em;justify-content:center}
  .cover .cta.doors .btn{padding:.55em .8em;white-space:nowrap}
  .cover .cta.doors small{display:none}
  .cover .tune-ctl{min-height:36px;padding:.2em}
}
.onphone{display:none}
@media (max-width:520px){.cover .onphone{display:inline}.cover .nophone{display:none}}
/* Short laptop screens: a little less air between the edition boards and in the request form. */
@media (min-width:900px) and (max-height:700px){
  #contents .signpost{gap:.45em;padding-bottom:.2em}
  #contents .board{padding:.42em .9em}
  .slip{gap:.3em}
  .slip input,.slip textarea,.slip select{padding:.3em .55em}
  .slip textarea{min-height:2.1em}
}
/* Smallest phones: the cover's logo gives way a little more. */
@media (max-width:340px) and (max-height:600px){.logo3d{width:min(200px,56%)}.cover h1{font-size:1.45em}}

/* Links to the field guide */
.rule-ref{font-size:max(13px,.85em);white-space:nowrap}
.rule-link{margin-top:.2em;font-weight:500}
@media (min-width:900px) and (max-height:760px){#contents .toc{grid-template-columns:1fr 1fr;column-gap:1.4em}}
@media (prefers-reduced-motion:reduce){.js .honeylogo.poured .glint{animation:none}}

/* ---------- 11 Nov: profile links in the header ---------- */
.tool.social{padding:6px 10px}
.tool.social svg{width:17px;height:17px;fill:currentColor}
.tool.social:hover{border-color:var(--yellow);color:var(--yellow)}
@media (min-width:900px){.tools .social+.tool:not(.social){margin-left:6px}}

/* ---------- 11 Nov: the simplest backdrop ("simpler still") ----------
   Every page, the cover included, sits on plain warm parchment (walnut at night), with soft light behind the
   book and a faint honeycomb only at the far edges. No painting is loaded. The bee and honey live in the book. */
:root{--desk:radial-gradient(110% 85% at 50% 46%,#FAF4E2 0%,#F1E5C7 60%,#E7D5AA 100%);--comb-alpha:.13;--glow:rgba(247,222,110,.30)}
[data-theme="dark"]{--desk:radial-gradient(110% 85% at 50% 46%,#29221A 0%,#1C1712 60%,#120F0B 100%);--comb-alpha:.07;--glow:rgba(247,222,110,.08)}
.js .stage{background:var(--desk)}
.js .scene{z-index:0}   /* its own layer: the honeycomb never draws over the book */
.js .scene::after{display:none}
.js .scene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--comb-alpha);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 0v34' fill='none' stroke='%23A9773A' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/56px 100px;
  -webkit-mask:radial-gradient(80% 75% at 50% 50%,transparent 45%,#000 95%);mask:radial-gradient(80% 75% at 50% 50%,transparent 45%,#000 95%)}
[data-theme="dark"] .scene::before{filter:brightness(1.6)}
.js .stage[data-page="cover"]::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(40% 46% at 50% 50%,var(--glow) 0%,transparent 100%)}
@media print{.js .scene::before,.js .stage::before{display:none}}
/* the "cue Wainaina" line sits on its own row under the author line, not beside it */
.cover .face{flex-wrap:wrap;justify-content:center}
.cover .face .cue{flex:1 1 100%;text-align:center;margin-top:.1em}
.cover .face > p:not(.cue){flex:1 1 0;min-width:0}

/* ---------- 11 Nov: the backdrop: my name as music, and a bee's dance (drawn by book.js) ---------- */
:root{--bd-ink:#A9773A}
[data-theme="dark"]{--bd-ink:#E9C46A}
.backdrop{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.backdrop .staff line{stroke:var(--bd-ink);stroke-opacity:.2;stroke-width:1.2}
.backdrop .ln{fill:var(--bd-ink);stroke:var(--bd-ink);opacity:.28;transition:opacity .25s,fill .25s,stroke .25s}
.backdrop .ln circle,.backdrop .ln ellipse{stroke:none}
.backdrop .ln .stem,.backdrop .ln .ledger{fill:none;stroke-width:1.6}
.backdrop .ln.on{opacity:1;fill:#C77A12;stroke:#C77A12;filter:drop-shadow(0 0 6px rgba(247,222,110,.95))}
.backdrop .dance{fill:none;stroke:var(--bd-ink);stroke-opacity:.5;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:0 13}
.backdrop .dance-reveal{fill:none;stroke:#fff;stroke-width:44;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 3s cubic-bezier(.45,.05,.35,1)}
[data-theme="dark"] .backdrop .ln{opacity:.22}
[data-theme="dark"] .backdrop .dance{stroke-opacity:.35}
@media (prefers-reduced-motion:reduce){.backdrop .dance-reveal,.backdrop .ln{transition:none}}
@media print{.backdrop{display:none}}

/* ---------- 11 Nov: chapter three, the rules behind it (cells and cards built by tools/build_guide.py) ---------- */
.comb16{list-style:none;margin:0;padding:0;display:grid;gap:.4em}
.cell16{display:flex;align-items:center;gap:.55em;width:100%;min-height:44px;padding:.45em .8em;border:1.5px solid var(--text);border-radius:999px;background:var(--wax);color:var(--ink);font:400 max(13px,.82em)/1.2 var(--body);text-align:left;cursor:pointer}
.cell16 b{font:550 1.05em/1 var(--display);color:var(--honey-deep);flex:none}
.cell16[aria-pressed="true"]{background:var(--yellow);border-color:var(--ink)}
.cell16:hover{background:#F7E9A8}
.cell16:focus-visible{outline:3px solid var(--honey-deep);outline-offset:2px}
.comb16{grid-template-columns:1fr 1fr}
/* wider screens: a honeycomb, four to a row, every second row set half a cell over */
/* wider but shorter screens (most laptops): a compact grid, four to a row, numbers in small honey hexagons */
@media (min-width:900px) and (min-height:480px) and (max-height:899px){
  .comb16{grid-template-columns:repeat(4,1fr);gap:.35em}
  .cell16{min-height:0;padding:.35em .55em;border-radius:10px 14px 11px 15px;font-size:max(13px,.74em);line-height:1.15;gap:.45em}
  .cell16 b{display:grid;place-items:center;width:1.9em;height:2.1em;font-size:.95em;background:var(--yellow);color:var(--ink);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
  .cell16[aria-pressed="true"] b{background:var(--ink);color:var(--yellow)}
  #rules .leaf.left > h2::after{display:none}
}
/* tall screens: a honeycomb, four to a row, every second row set half a cell over */
@media (min-width:900px) and (min-height:900px){
  .comb16{grid-template-columns:repeat(9,1fr);gap:0 .3em;max-width:31em;margin:.2em 0}
  .comb16 li{grid-column:span 2}
  .comb16 li:nth-child(8n+5){grid-column:2 / span 2}
  .comb16 li:nth-child(n+5){margin-top:-.95em}
  .cell16{flex-direction:column;justify-content:center;gap:.15em;aspect-ratio:1/1.12;min-height:0;padding:.4em .9em;border:0;border-radius:0;text-align:center;
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);font-size:max(13px,.72em);line-height:1.12}
  .cell16 b{font-size:1.25em}
  .cell16:focus-visible{outline:none;background:var(--yellow);box-shadow:inset 0 0 0 4px var(--ink)}
}
.rulecard{display:grid;gap:.55em;align-content:start}
.rulecard .kind{font:400 max(13px,.74em)/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rulecard h3{font-size:1.25em}
.rule-short{font-style:italic;font-family:var(--display)}
.rule-wrong{padding:.55em .8em;background:color-mix(in srgb,var(--honey) 14%,transparent);border-left:4px solid var(--honey-deep);border-radius:0 8px 8px 0}
.rule-ask-h{margin:.2em 0 0;font:600 .95em/1.3 var(--display)}
.rule-ask{margin:0;padding-left:1.25em;display:grid;gap:.3em}
.rule-more{display:flex;flex-wrap:wrap;gap:.4em 1.2em;align-items:center}
.cover-more{margin:0;font-size:max(13px,.85em)}
.cover-more a{color:var(--yellow);text-underline-offset:.2em}
@media (max-height:600px),(min-width:900px) and (max-height:860px){.cover-more{display:none}}   /* the contents and the short version carry it there */
.plain .rulecard[hidden]{display:grid!important}
@media print{.rulecard[hidden]{display:grid!important}.comb16{display:none}}

/* 11 Nov: the honeycomb returns, barely there, under the stave and the dance */
:root{--comb-alpha:.10}
[data-theme="dark"]{--comb-alpha:.06}

/* ---------- 11 Nov: depth in the backdrop only (set by book.js; nothing else moves) ---------- */
.js .stage{--mx:0;--my:0}
.js .scene::before{transform:translate(calc(var(--mx) * -5px),calc(var(--my) * -4px)) scale(1.02);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.backdrop .staff,.backdrop .ln{transform:translate(calc(var(--mx) * -10px),calc(var(--my) * -7px));transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .25s,fill .25s,stroke .25s}
.backdrop .dance{transform:translate(calc(var(--mx) * -18px),calc(var(--my) * -12px));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.js .scene::before,.backdrop .staff,.backdrop .ln,.backdrop .dance{transform:none!important;transition:none!important}}