/* canopy.css — Tree Lizard ($IGGY): from the top of the tree down to the roots. Bangers for the shouting, Gluten
   for the hand-made poster, Signika for reading. */
@font-face { font-family: "Bangers"; src: url("../assets/fonts/Bangers-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gluten"; src: url("../assets/fonts/Gluten-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Signika"; src: url("../assets/fonts/Signika-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Signika"; src: url("../assets/fonts/Signika-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ink: #1E2A14; --leaf: #43A047; --leaf2: #2E7D32; --skin: #7CB342; --bark: #6D4C41; --bark2: #4E342E; --red: #D7261E; --red2: #A31B15;
  --amber: #FFC107; --sky: #9ED3EE; --sky2: #E3F4FB; --paper: #FFF8E1; --cream: #F4F1E4; --steel: #B0BEC5; --steel2: #546E7A; --soil: #3E2A20;
  --big: "Bangers", "Gluten", system-ui, sans-serif; --hand: "Gluten", "Signika", sans-serif; --sans: "Signika", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 18px/1.55 var(--sans); overflow-x: hidden; }
[hidden] { display: none !important; }
a { color: var(--red2); }
b { font-weight: 600; }
img, svg { max-width: 100%; }
.btn { font: 400 21px/1 var(--big); letter-spacing: .04em; background: var(--red); color: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 11px 18px 9px; cursor: pointer; box-shadow: 0 4px 0 var(--ink); }
.btn:hover { background: var(--red2); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.ghost { background: var(--paper); color: var(--ink); }
.btn.ghost:hover { background: #fff; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.lede { max-width: 820px; margin: 0 0 22px; }

/* ---------------------------------------------------------------- 1. the canopy */
.canopy { background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 72%, #CDE8B5 100%); position: relative; overflow: hidden; border-bottom: 6px solid var(--ink); }
.canopy::before { content: ""; position: absolute; left: 6%; top: 40px; width: 180px; height: 54px; background: #fff; border-radius: 40px; box-shadow: 70px 18px 0 -6px #fff, 560px 60px 0 -8px rgba(255,255,255,.8); opacity: .85; }
.cn-in { position: relative; max-width: 1280px; margin: 0 auto; padding: 56px 28px 0; display: grid; grid-template-columns: 1.05fr .95fr .8fr; gap: 10px 28px; align-items: end; }
.cn-copy { align-self: center; padding-bottom: 48px; }
.cn-k { font: 600 15px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--leaf2); margin: 0 0 10px; }
h1 { font: 400 clamp(64px, 9vw, 132px)/.88 var(--big); letter-spacing: .02em; margin: 0 0 18px; color: var(--skin); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 6px 0 var(--ink); }
h1 span { display: block; color: var(--bark); }
.cn-sub { font-size: 20px; max-width: 470px; margin: 0 0 16px; }
.cn-tick { display: inline-block; font: 700 20px/1.2 var(--hand); background: var(--amber); border: 3px solid var(--ink); border-radius: 999px; padding: 8px 16px; margin: 0; transform: rotate(-2deg); }
.cn-tree { align-self: end; margin-bottom: -6px; }
.cn-tree svg { display: block; width: 100%; height: auto; }
.ladder { align-self: stretch; display: flex; flex-direction: column; padding-bottom: 28px; }
.ld-h { font: 400 26px/1 var(--big); letter-spacing: .06em; margin: 0 0 10px; text-align: center; }
.ladder ol { list-style: none; margin: 0; padding: 0 22px; position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.ladder ol::before, .ladder ol::after { content: ""; position: absolute; top: -8px; bottom: -28px; width: 14px; background: linear-gradient(90deg, #ECEFF1, var(--steel) 60%, var(--steel2)); border: 3px solid var(--ink); border-radius: 6px; }
.ladder ol::before { left: 0; } .ladder ol::after { right: 0; }
.ladder li { position: relative; z-index: 1; }
.ladder a { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, #F5F7F8, #CFD8DC); border: 3px solid var(--ink); border-radius: 8px; padding: 7px 10px; margin: 0 -10px; font-size: 15px; line-height: 1.2; transition: transform .15s, background .15s; }
.ladder a b { font: 400 20px/1 var(--big); letter-spacing: .03em; color: var(--red); }
.ladder a:hover { transform: translateX(-6px); background: var(--amber); }
.ladder a[aria-current] { background: var(--skin); }

/* ---------------------------------------------------------------- sections: the altitude tag */
main > section { max-width: 1280px; margin: 0 auto; padding: 70px 28px 60px; }
main > section + section { border-top: 4px dashed rgba(109,76,65,.35); }
.alt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: 26px; }
.alt > span { font: 400 26px/1 var(--big); letter-spacing: .04em; color: #fff; background: var(--bark); border: 3px solid var(--ink); border-radius: 50%; width: 88px; height: 88px; display: grid; place-items: center; transform: rotate(-6deg); box-shadow: inset 0 0 0 5px var(--bark2); }
h2 { font: 400 clamp(40px, 5vw, 64px)/1 var(--big); letter-spacing: .03em; margin: 0; }
.climb { font: 600 15px var(--sans); white-space: nowrap; }
.climb::before { content: "\2191  "; }

/* ---------------------------------------------------------------- 2. the poster */
.ps-grid { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 40px; align-items: start; }
.poster { position: relative; background: #FFFDF2; border: 2px solid #C9BFA0; box-shadow: 0 16px 30px rgba(62,42,32,.18); padding: 30px 30px 0; transform: rotate(-1.2deg); text-align: center; }
.poster::before, .poster::after { content: ""; position: absolute; top: -14px; width: 110px; height: 30px; background: rgba(255,224,130,.75); border: 1px solid rgba(0,0,0,.06); }
.poster::before { left: 20px; transform: rotate(-8deg); } .poster::after { right: 20px; transform: rotate(7deg); }
.ps-lost { font: 400 104px/.9 var(--big); color: var(--red); margin: 0; letter-spacing: .06em; }
.ps-what { font: 700 26px/1.2 var(--hand); margin: 4px 0 8px; }
.ps-pic { border: 4px solid var(--ink); background: #E8F5E9; padding: 10px; margin: 0 0 12px; }
.ps-pic svg { display: block; width: 100%; height: auto; }
.ps-small { font: 700 19px/1.3 var(--hand); margin: 0 0 18px; }
.tabs { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); margin: 0 -30px; padding: 0; border-top: 2px dashed #8D8166; }
.tabs li + li { border-left: 2px dashed #8D8166; }
.tabs button { width: 100%; height: 130px; background: #FFFDF2; border: 0; cursor: pointer; font: 700 15px/1 var(--hand); color: var(--ink); padding: 0; transition: transform .25s, opacity .25s; }
.tabs button span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.tabs button:hover { background: #FFF3C4; }
.tabs button.gone { opacity: .18; transform: translateY(16px) rotate(4deg); background: transparent; }
.ps-side { padding-top: 30px; }
.ps-read { background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; padding: 18px 22px; min-height: 160px; box-shadow: 6px 6px 0 var(--bark); }
.ps-read p { margin: 0 0 8px; }
.ps-rh { font: 400 30px/1 var(--big); letter-spacing: .04em; color: var(--leaf2); }
.ps-all { font: 700 18px var(--hand); color: var(--red); }
.ps-count { font-weight: 600; margin: 18px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 3. the report */
.rp-grid { display: grid; grid-template-columns: minmax(0, 620px) 1fr; gap: 36px; align-items: start; }
.sheet { position: relative; background: #8D6E63; border: 4px solid var(--ink); border-radius: 18px; padding: 50px 22px 22px; box-shadow: 0 10px 0 var(--bark2); }
.sh-clip { position: absolute; left: 50%; top: -18px; width: 150px; height: 52px; transform: translateX(-50%); background: linear-gradient(180deg, #ECEFF1, var(--steel) 55%, var(--steel2)); border: 4px solid var(--ink); border-radius: 12px 12px 18px 18px; }
.sh-t { font: 400 30px/1 var(--big); letter-spacing: .04em; background: var(--paper); margin: 0; padding: 18px 20px 12px; border-radius: 6px 6px 0 0; border-bottom: 3px solid var(--red); }
.sh-row, .sh-act, .sh-three, .sh-sign { background: var(--paper) repeating-linear-gradient(180deg, transparent 0 33px, rgba(41,98,255,.18) 33px 34px); padding: 10px 20px; margin: 0; }
.sh-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; }
.sh-l { font: 600 13px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: #6D6455; }
.sh-v { font: 700 20px/1.3 var(--hand); color: #1A237E; }
.sh-ca { grid-template-columns: 1fr; }
.sh-ca code { font: 600 16px/1.4 var(--mono); color: #1A237E; overflow-wrap: anywhere; background: #fff; border: 2px dashed #9FA8DA; border-radius: 8px; padding: 8px 10px; }
.sh-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sh-ok { font: 700 18px var(--hand); color: var(--leaf2); }
.sh-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sh-three b { display: block; font: 700 21px/1.2 var(--hand); color: #1A237E; }
.sh-sign { border-radius: 0 0 6px 6px; padding-bottom: 18px; display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.dials { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dial { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 56%, #ECEFF1 57% 62%, var(--steel) 63% 74%, var(--steel2) 75%); border: 3px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px; }
.dial b { font: 600 16px/1.1 var(--sans); }
.dial b sub { font-size: .7em; }
.dial span { font: 600 11px/1.1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--steel2); margin-top: 4px; }
.dial .up { color: var(--leaf2); } .dial .down { color: var(--red); }
.dl-at { font-size: 14px; color: #6D6455; margin: 10px 0 18px; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.tags a { position: relative; display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; background: var(--red); border: 3px solid var(--ink); border-radius: 6px 22px 22px 6px; padding: 8px 18px 8px 34px; font: 400 20px/1 var(--big); letter-spacing: .05em; box-shadow: 0 4px 0 var(--ink); }
.tags a::before { content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--cream); border: 3px solid var(--ink); }
.tags img { width: 34px; height: 34px; border-radius: 8px; background: #fff; border: 2px solid var(--ink); object-fit: cover; }
.tags a:hover { background: var(--red2); }
.cab { margin: 40px 0 0; background: #263238; border: 5px solid var(--ink); border-radius: 22px; padding: 14px; box-shadow: inset 0 0 0 4px #37474F, 0 10px 0 var(--ink); background-image: radial-gradient(circle at 14px 14px, var(--steel) 3px, transparent 4px), radial-gradient(circle at calc(100% - 14px) 14px, var(--steel) 3px, transparent 4px); }
.cab-top { display: block; color: #CFD8DC; font: 400 20px/1 var(--big); letter-spacing: .08em; padding: 4px 8px 12px; }
.cab-led { display: inline-block; margin-right: 10px; vertical-align: 1px; width: 12px; height: 12px; border-radius: 50%; background: #66BB6A; box-shadow: 0 0 10px #66BB6A; }
.cab-screen { position: relative; height: 520px; border: 4px solid #000; border-radius: 10px; overflow: hidden; background: #0E1215; }
.cab-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cab-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #90A4AE; font: 400 24px var(--big); letter-spacing: .08em; background: #0E1215; transition: opacity .4s; }
.cab-wait.off { opacity: 0; pointer-events: none; }
.cab-bot { margin: 10px 8px 0; text-align: right; }
.cab-bot a { color: var(--amber); font-weight: 600; }

/* ---------------------------------------------------------------- 4. the game */
.rig { background: #455A64 repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 14px); border: 5px solid var(--ink); border-radius: 22px; padding: 16px; box-shadow: 0 10px 0 var(--ink); }
.rig-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.rig-msg { margin: 0; color: #fff; font-weight: 600; min-height: 1.5em; flex: 1 1 360px; }
.wind { display: inline-flex; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--paper); }
.wind button { font: 400 19px/1 var(--big); letter-spacing: .05em; border: 0; background: transparent; padding: 9px 14px 7px; cursor: pointer; color: var(--ink); }
.wind button + button { border-left: 3px solid var(--ink); }
.wind button[aria-pressed="true"] { background: var(--amber); }
#pole-cv { display: block; width: 100%; height: auto; border: 4px solid var(--ink); border-radius: 12px; background: var(--sky); touch-action: none; }
.rig-bot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.btn.big { font-size: 26px; padding: 14px 24px 11px; }
.btn.loop { background: var(--amber); color: var(--ink); }
.gauges { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; color: #fff; margin-left: auto; }
.gauges p { margin: 0; display: flex; flex-direction: column; }
.gauges span { font: 600 11px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: #B0BEC5; }
.gauges b { font: 400 24px/1.1 var(--big); letter-spacing: .04em; }
.mood { min-width: 180px; }
.mood > span { font: 600 13px var(--sans); color: #CFD8DC; }
.mood b { font: 600 13px var(--sans); color: #fff; }
.meter { height: 14px; background: #263238; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; margin-top: 4px; }
.meter i { display: block; height: 100%; width: 0; background: #66BB6A; }
.meter.mid i { background: var(--amber); } .meter.hot i { background: var(--red); }
.log { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.log div { background: var(--paper); border: 3px solid var(--ink); border-radius: 10px; padding: 6px 14px; display: flex; gap: 10px; align-items: baseline; }
.log dt { font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: #6D6455; }
.log dd { margin: 0; font: 400 22px/1 var(--big); }

/* ---------------------------------------------------------------- 5. how high */
.hh-grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 40px; align-items: stretch; }
.hh-ctrl label { font-weight: 600; display: block; margin-bottom: 10px; }
.hh-ctrl input { width: 100%; accent-color: var(--red); height: 30px; }
.hh-big { font: 400 92px/1 var(--big); margin: 10px 0 6px; color: var(--leaf2); }
.hh-big small { font: 600 22px var(--sans); color: var(--ink); }
.hh-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.hh-list li { background: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 8px 14px; }
.hh-list b { font: 400 24px/1 var(--big); color: var(--red); letter-spacing: .03em; }
.hh-note { font-size: 14px; color: #6D6455; margin: 0; }
.hh-stack { position: relative; min-height: 560px; background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 100%); border: 4px solid var(--ink); border-radius: 16px; padding: 24px 20px 30px 60px; }
.hh-rule { position: relative; height: 100%; border-left: 4px solid var(--ink); }
.hh-tick { position: absolute; left: -48px; width: 40px; text-align: right; font: 600 13px/1 var(--sans); transform: translateY(50%); }
.hh-tick::after { content: ""; position: absolute; right: -14px; top: 50%; width: 10px; border-top: 3px solid var(--ink); }
.hh-mark { position: absolute; right: 0; transform: translateY(50%); font: 600 13px/1 var(--sans); background: rgba(255,255,255,.85); border: 2px solid var(--ink); border-radius: 6px; padding: 3px 7px; }
.hh-col { position: absolute; left: 24px; bottom: 0; width: 36px; display: flex; flex-direction: column-reverse; justify-content: space-between; transition: height .3s; }
.hh-col i { display: block; flex: 1; margin: 1px 0; background: var(--skin); border: 2px solid var(--ink); border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; }
.hh-him { position: absolute; left: 4px; width: 120px; transform: translateY(8%); transition: bottom .3s; }
.hh-him svg { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- 6. the checklist */
.ck-grid { display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start; }
.ck { list-style: none; counter-reset: ck; margin: 0; padding: 18px 22px; background: #fff repeating-linear-gradient(180deg, transparent 0 46px, rgba(41,98,255,.14) 46px 47px); border: 3px solid var(--ink); border-left: 40px solid #FFCDD2; border-radius: 6px; box-shadow: 8px 8px 0 var(--bark); }
.ck li { counter-increment: ck; }
.ck label { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 9px 0; cursor: pointer; }
.ck input { width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--leaf2); cursor: pointer; }
.ck input:checked + span { text-decoration: line-through; text-decoration-color: var(--red); color: #6D6455; }
.ck-side { position: sticky; top: 20px; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; padding: 20px; }
.ck-n { font: 400 64px/1 var(--big); margin: 0 0 6px; color: var(--leaf2); }
.ck-n small { font: 600 16px var(--sans); color: var(--ink); margin-left: 8px; }
.ck-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.ck-ok { font: 700 17px var(--hand); color: var(--leaf2); min-height: 1.4em; margin: 0; }
.ck-note { font-size: 14px; color: #6D6455; margin: 10px 0 0; }

/* ---------------------------------------------------------------- 7. the roots */
.roots { position: relative; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='300' fill='none' stroke='%235D4037' stroke-linecap='round'%3E%3Cpath d='M600 0 C590 60 520 90 430 120 C360 140 300 190 250 260' stroke-width='14'/%3E%3Cpath d='M610 0 C640 70 720 100 820 130 C900 150 960 200 1020 280' stroke-width='12'/%3E%3Cpath d='M430 120 C400 160 410 210 380 290 M820 130 C840 180 820 230 850 300 M520 80 C480 40 380 30 300 50 M700 80 C760 40 880 40 960 60' stroke-width='6'/%3E%3C/svg%3E") 50% 0 / 1200px 300px no-repeat, var(--soil); color: #EFE6DA; margin-top: 40px; }
.rt-grass { position: absolute; left: 0; right: 0; top: -30px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34'%3E%3Cpath d='M0 34 L6 8 L12 34 L18 2 L26 34 L32 12 L38 34 L46 0 L52 34 L56 14 L60 34Z' fill='%237CB342'/%3E%3C/svg%3E") 0 0 / 60px 34px repeat-x; }
.rt-in { max-width: 1280px; margin: 0 auto; padding: 50px 28px 40px; position: relative; }
.rt-t { font: 400 40px/1 var(--big); letter-spacing: .04em; margin: 0 0 18px; color: var(--skin); }
.rt-t span:first-child { color: #BCAAA4; }
.rt-links { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.rt-links a { color: #FFE082; font-weight: 600; text-decoration: none; border-bottom: 3px solid #8D6E63; padding-bottom: 2px; }
.rt-links a:hover { border-color: #FFE082; }
.rt-small { font-size: 14px; max-width: 900px; color: #BCAAA4; margin: 0; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1080px) {
  .cn-in { grid-template-columns: 1fr 1fr; }
  .ladder { grid-column: 1 / -1; padding-bottom: 40px; }
  .ladder ol { gap: 8px; }
}
@media (max-width: 820px) {
  body { font-size: 17px; }
  .cn-in { grid-template-columns: 1fr; padding: 36px 18px 0; }
  .cn-copy { padding-bottom: 0; }
  .cn-tree { max-width: 320px; margin: 0 auto -6px; order: 3; }
  .ladder { order: 2; padding-bottom: 20px; }
  main > section { padding: 48px 16px 40px; }
  .alt { grid-template-columns: auto 1fr; }
  .alt > span { width: 70px; height: 70px; font-size: 21px; }
  .climb { grid-column: 1 / -1; }
  .ps-grid, .rp-grid, .hh-grid, .ck-grid { grid-template-columns: 1fr; gap: 26px; }
  .poster { padding: 22px 18px 0; }
  .ps-lost { font-size: 76px; }
  .tabs { margin: 0 -18px; }
  .tabs button { height: 110px; font-size: 13px; }
  .sh-row, .sh-sign { grid-template-columns: 1fr; gap: 2px; }
  .sh-three { grid-template-columns: 1fr 1fr; }
  .cab-screen { height: 420px; }
  .gauges { margin-left: 0; }
  .dials { grid-template-columns: repeat(3, 1fr); }
  .hh-stack { min-height: 460px; }
  .ck-side { position: static; }
  .ck { border-left-width: 18px; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ladder a, .tabs button, .cab-wait, .hh-col, .hh-him { transition: none; }
}