/* UNDER THE TREE — paper and ink.
 *
 * Warm white dot-grid paper, graphite handwriting, one red pen. No inline SVG anywhere:
 * every rule, tick, bullet, arrow and tape mark is CSS or canvas. The tree lives in its
 * own stage on the right (top, on phones) and the writing never sits on top of the ink.
 *
 * Breakpoints are laid out, not reflowed:
 *   >=1024  desktop  tree right 56%, writing in a left column
 *   760..1023 tablet  tree right 50%, writing left 48%
 *   <760    mobile   tree fixed in a panel across the top 44vh, writing scrolls beneath
 */

@font-face{font-family:'Caveat';src:url('../assets/fonts/caveat-400-700.woff2') format('woff2');
  font-weight:400 700;font-display:swap}
@font-face{font-family:'Kalam';src:url('../assets/fonts/kalam-300.woff2') format('woff2');
  font-weight:300;font-display:swap}
@font-face{font-family:'Kalam';src:url('../assets/fonts/kalam-400.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Kalam';src:url('../assets/fonts/kalam-700.woff2') format('woff2');
  font-weight:700;font-display:swap}

:root{
  --paper:#fbfaf7;
  --ink:#1a1a18;
  --ink-2:rgba(26,26,24,.72);
  --ink-3:rgba(26,26,24,.52);
  --ink-4:rgba(26,26,24,.3);
  --red:#b4342a;
  --dot:rgba(26,26,24,.13);
  --hand:'Caveat',cursive;
  --body:'Kalam',cursive;
  --col:clamp(320px,38vw,560px);      /* the writing column */
  --pad:clamp(20px,5vw,92px);
  --ease:cubic-bezier(.22,.72,.06,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);font-weight:300;
  font-size:clamp(15.5px,1.06vw,17.5px);line-height:1.82;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* the dot grid of the notebook itself */
  background-image:radial-gradient(var(--dot) 1.15px,transparent 1.15px);
  background-size:22px 22px;
  background-position:11px 11px;
}
body.pen,body.pen a,body.pen button,body.pen input,body.pen textarea{cursor:none}
@media(hover:none){body.pen{cursor:auto}}
a{color:inherit;text-decoration:none}
::selection{background:rgba(180,52,42,.18)}
img{max-width:100%;height:auto;display:block}

.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--paper);
  padding:12px 18px;font-family:var(--hand);font-size:20px;border:1.5px solid var(--ink)}
.skip:focus{left:12px;top:12px}

/* paper fibre. very faint, it stops the white reading as a screen */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background:url('../assets/paper.png') repeat;background-size:180px}

/* ---------------------------------------------------------------- the drawing */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  transition:opacity .6s var(--ease)}
/* story mode: the storyboard owns the stage while it is pinned */
body.story-mode #gl{opacity:.1}
body.story-mode .fruitlayer{opacity:0;pointer-events:none}
#trail{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* on phones the drawing sits in a fixed panel at the top with the paper behind it,
   so the writing slides underneath instead of colliding with the ink */
.stagemask{display:none}

/* ------------------------------------------------------------------- the fruits */
.fruitlayer{position:fixed;inset:0;z-index:6;pointer-events:none;transition:opacity .5s var(--ease)}
.fruit{
  position:absolute;left:0;top:0;pointer-events:auto;
  display:flex;align-items:center;gap:9px;
  transform:translate(-50%,-50%);
  font-family:var(--hand);font-size:clamp(17px,1.4vw,22px);line-height:1;
  color:var(--ink);background:none;border:0;padding:8px;cursor:pointer;
  opacity:0;transition:opacity .5s var(--ease);white-space:nowrap;
}
.fruit.on{opacity:1}
.fruit{display:none}
.fruit.on{display:flex}
.fruit .dot{width:30px;height:30px;flex:0 0 30px;border-radius:50%;position:relative}
.fruit .dot::before{content:"";position:absolute;inset:9px;border-radius:45% 55% 50% 48%;
  border:1.8px solid var(--ink);opacity:.55;transform:rotate(-8deg);
  transition:border-color .3s,opacity .3s,transform .35s var(--ease)}
.fruit:hover .dot::before,.fruit.here .dot::before{border-color:var(--red);opacity:.95;
  transform:rotate(6deg) scale(1.25)}
/* a label written on the drawing. the paper backdrop keeps it legible over ink. */
.fruit .flab{
  font-family:var(--hand);font-weight:400;
  transform:translateY(1px);
  padding:1px 7px 3px;
  background:var(--paper);
  box-shadow:0 0 0 4px var(--paper);
  transition:color .3s,transform .35s var(--ease);
}
.fruit .num{font-size:.66em;color:var(--ink-4);letter-spacing:.06em;margin-right:1px}
.fruit.flip{flex-direction:row-reverse}
.fruit:hover .flab,.fruit:focus-visible .flab{color:var(--red);transform:translateY(1px) scale(1.05)}
.fruit:focus-visible{outline:none}
.fruit:focus-visible .flab{box-shadow:0 0 0 4px var(--paper),0 2px 0 var(--red)}
.fruit.here .flab{color:var(--red)}

/* ------------------------------------------------------------- margin index */
.margin{position:fixed;left:14px;top:50%;transform:translateY(-50%);
  z-index:7;display:flex;gap:11px}
.margin-rule{width:1.5px;background:linear-gradient(180deg,transparent,var(--ink-4) 12%,
  var(--ink-4) 88%,transparent);border-radius:2px}
.margin ol{list-style:none;display:flex;flex-direction:column;gap:clamp(7px,.9vh,12px)}
.margin li{font-family:var(--hand);font-size:14px;line-height:1;color:var(--ink-4);
  transition:color .3s var(--ease),transform .3s var(--ease);transform-origin:left center}
.margin li a{display:block;padding:2px 4px}
.margin li.on{color:var(--red);transform:scale(1.34)}
.margin li:hover{color:var(--ink)}

/* ------------------------------------------------------------------- layout */
main{position:relative;z-index:4}
.sec{
  position:relative;
  width:var(--col);max-width:calc(100vw - var(--pad) * 2);
  margin-left:var(--pad);
  padding:clamp(64px,9vh,120px) 0;
}
.sec.wide{width:min(760px,calc(100vw - var(--pad) * 2))}

/* ------------------------------------------------------------------ the seed */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:12vh;padding-bottom:12vh}
.kicker{font-family:var(--hand);font-size:clamp(19px,1.6vw,24px);color:var(--ink-3);
  line-height:1.2;margin-bottom:2px}
.title{font-family:var(--hand);font-weight:400;
  font-size:clamp(58px,8.2vw,124px);line-height:.94;letter-spacing:-.005em;
  margin:0 0 6px -.04em}
.title .w{display:inline-block}
.lede{font-family:var(--hand);font-size:clamp(24px,2.5vw,40px);line-height:1.16;
  color:var(--ink);margin-bottom:clamp(28px,4vh,46px)}
.amp{font-family:var(--hand);font-style:italic}
.hero-body p{margin-bottom:1.05em;max-width:46ch;color:var(--ink-2)}
.scrollhint{font-family:var(--hand);font-size:19px;color:var(--ink-4);
  margin-top:clamp(24px,4vh,44px);display:flex;align-items:center;gap:10px}
.tick{width:1.5px;height:34px;background:var(--ink-4);display:block;border-radius:2px;
  animation:drip 2.4s var(--ease) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}42%{transform:scaleY(1)}
  58%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ------------------------------------------------------------------ headings */
.eyebrow{font-family:var(--hand);font-size:16px;color:var(--ink-4);letter-spacing:.1em;
  text-transform:lowercase;margin-bottom:6px}
.h2{font-family:var(--hand);font-weight:400;font-size:clamp(34px,4.2vw,60px);
  line-height:1.02;margin-bottom:clamp(20px,2.6vh,32px)}
.h3{font-family:var(--hand);font-weight:400;font-size:clamp(26px,2.6vw,36px);
  line-height:1.06;margin:clamp(34px,5vh,58px) 0 clamp(14px,2vh,22px)}

/* the notebook underlines its headings with a scrawl, not a border */
.rule-under{position:relative;display:inline-block;padding-bottom:.16em}
.rule-under::after,.rule-under::before{
  content:"";position:absolute;left:-.02em;right:-.04em;height:2px;border-radius:2px;
  background:var(--ink);opacity:.66;
  transform-origin:left center;transform:scaleX(var(--ru,1)) rotate(-.35deg)}
.rule-under::after{bottom:.04em}
.rule-under::before{bottom:-.02em;right:.24em;opacity:.3;transform:scaleX(calc(var(--ru,1) * .84)) rotate(.5deg)}
.quoted::before{content:"\201C"}
.quoted::after{content:"\201D"}

/* ------------------------------------------------------------------- copy */
p{margin-bottom:1.05em;max-width:47ch}
p:last-child{margin-bottom:0}
.big{font-family:var(--hand);font-size:clamp(22px,2.1vw,31px);line-height:1.36;
  color:var(--ink);max-width:30ch;margin-bottom:1em}
.verse{font-family:var(--hand);font-size:clamp(22px,2.05vw,30px);line-height:1.5;
  margin-bottom:1em}
.indent{padding-left:clamp(20px,3vw,52px);color:var(--ink-2)}
.caps{font-family:var(--body);font-weight:400;font-size:13.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin:clamp(30px,4.4vh,50px) 0 16px}

/* hand-drawn list marks */
ul,ol{list-style:none}
.becauses li{position:relative;padding-left:0;margin-bottom:.34em;
  font-family:var(--hand);font-size:clamp(20px,1.85vw,27px);line-height:1.42;max-width:34ch}
.dashed li{position:relative;padding-left:26px;margin-bottom:.72em;max-width:44ch;color:var(--ink-2)}
.dashed li::before{content:"";position:absolute;left:0;top:.86em;width:14px;height:2px;
  border-radius:2px;background:var(--ink-3);transform:rotate(-1.6deg)}
.dashed.tight li{margin-bottom:.42em}
.dashed li em{font-style:italic;color:var(--ink-3)}
.values{counter-reset:v;margin-top:6px}
.values li{counter-increment:v;position:relative;padding-left:38px;margin-bottom:1.1em;
  max-width:46ch;color:var(--ink-2)}
.values li::before{content:counter(v) ".";position:absolute;left:0;top:.1em;
  font-family:var(--hand);font-size:1.5em;color:var(--ink);line-height:1}
.values strong{font-weight:400;font-family:var(--hand);font-size:1.32em;color:var(--ink);
  display:inline-block;line-height:1.2;
  box-shadow:inset 0 -2px 0 rgba(26,26,24,.5)}

/* ------------------------------------------------------------- drawn cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);margin-top:8px}
.card{position:relative;padding:20px 20px 22px;background:rgba(251,250,247,.72)}
/* four hand-drawn edges, no border property */
.card::before,.card::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:12px 9px 13px 8px;
  border:1.6px solid var(--ink);opacity:.5}
.card::before{transform:rotate(-.35deg) scale(1.004)}
.card::after{transform:rotate(.4deg);opacity:.26}
.card-n{font-family:var(--hand);font-size:15px;color:var(--red);display:block;margin-bottom:4px;
  letter-spacing:.08em}
.card h3{font-family:var(--hand);font-weight:400;font-size:clamp(21px,1.7vw,26px);
  line-height:1.12;margin-bottom:5px}
.card p{font-size:.94em;color:var(--ink-3);margin:0;max-width:none}
.card em{font-style:italic}

/* ------------------------------------------------------------- the rhythm */
.sundays{margin:4px 0 0;position:relative;padding-left:22px}
.sundays::before{content:"";position:absolute;left:3px;top:.7em;bottom:.7em;width:1.5px;
  background:linear-gradient(180deg,var(--ink-4),rgba(26,26,24,.14));border-radius:2px}
.sundays li{position:relative;padding:0 0 1em 0}
.sundays li::before{content:"";position:absolute;left:-23px;top:.72em;width:9px;height:9px;
  border-radius:50%;border:1.6px solid var(--ink);opacity:.6;background:var(--paper)}
.sundays li:last-child::before{background:var(--red);border-color:var(--red);opacity:1}
.sun{display:block;font-family:var(--hand);font-size:clamp(21px,1.8vw,27px);line-height:1.16}
.what{display:block;color:var(--ink-3);font-size:.96em;line-height:1.6}
.what em{font-style:italic;color:var(--ink-4)}
.tags{display:flex;flex-wrap:wrap;gap:8px 10px;max-width:none}
.tags span{position:relative;font-family:var(--hand);font-size:clamp(17px,1.35vw,21px);
  padding:5px 15px 6px;color:var(--ink-2)}
.tags span::before{content:"";position:absolute;inset:0;border:1.5px solid var(--ink);
  opacity:.36;border-radius:999px 14px 999px 16px;transform:rotate(-.5deg)}
.tags .more{color:var(--red)}
.tags .more::before{border-style:dashed;border-color:var(--red);opacity:.5}

/* --------------------------------------------------- photos taped into the page */
.taped{position:relative;margin:clamp(26px,4vh,44px) 0 0;width:100%}
.taped picture{display:block}
.taped img{width:100%;
  /* the photocopy tone is baked into the asset, this only settles it onto the paper */
  mix-blend-mode:multiply;filter:contrast(1.02)}
.taped::before,.taped::after{content:"";position:absolute;z-index:3;
  width:74px;height:23px;background:rgba(26,26,24,.055);
  box-shadow:inset 0 0 0 1px rgba(26,26,24,.07)}
.taped::before{left:-16px;top:-11px;transform:rotate(-27deg)}
.taped::after{right:-16px;bottom:-11px;transform:rotate(-27deg)}
.taped figcaption{font-family:var(--hand);font-size:17px;color:var(--ink-4);
  margin-top:11px;transform:rotate(-.4deg)}
.taped.tilt{transform:rotate(-.7deg)}

/* ------------------------------------------------- story mode storyboard */
.board{position:relative;z-index:4;margin:clamp(6px,1.5vh,18px) 0 clamp(60px,9vh,110px);
  width:100%;
  /* the track is wider than the page on purpose. clip it, never let the page scroll. */
  overflow:hidden}
.board-track{display:flex;gap:clamp(14px,1.8vw,26px);width:max-content;
  padding:6px var(--pad) 4px;align-items:flex-start}
.frame{width:clamp(230px,25vw,340px);flex:0 0 auto;position:relative;padding-top:2px}
.frame-in{position:relative;aspect-ratio:4/3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:22px;overflow:hidden;
  background:rgba(251,250,247,.66)}
/* the frame border, drawn twice and slightly off, like a pencil rectangle */
.frame-in::before,.frame-in::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:1.7px solid var(--ink);opacity:.5;border-radius:5px 7px 4px 8px}
.frame-in::before{transform:rotate(-.28deg)}
.frame-in::after{transform:rotate(.34deg);opacity:.24}
.frame.art .frame-in{padding:0;background:none}
.frame.art img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.fn{position:absolute;top:-4px;right:4px;z-index:3;font-family:var(--hand);font-size:15px;
  color:var(--red);background:var(--paper);padding:0 5px}
.frame-big{font-family:var(--hand);font-size:clamp(24px,2.1vw,32px);line-height:1.1;
  margin:0 0 10px;max-width:none}
.frame-date{font-family:var(--hand);font-size:clamp(20px,1.7vw,25px);margin:0;color:var(--ink-2)}
.frame-date b{font-weight:400;color:var(--ink)}
.frame-num{font-family:var(--hand);font-size:clamp(44px,4.6vw,68px);line-height:1;margin:2px 0 8px}
.frame-note{font-size:.92em;color:var(--ink-3);margin:0;max-width:24ch}
.frame.end .frame-big{color:var(--red)}
.cap{font-family:var(--hand);font-size:clamp(16px,1.25vw,19.5px);line-height:1.34;
  color:var(--ink-3);margin:10px 2px 0;max-width:none}
.board-hint{position:absolute;right:var(--pad);bottom:-8px;font-family:var(--hand);
  font-size:16px;color:var(--ink-4)}

/* --------------------------------------------------------------- the join */
.join{padding-bottom:clamp(70px,10vh,130px)}
.water{color:var(--ink)}
.grow-h{font-size:clamp(30px,3.6vw,50px);margin-top:clamp(18px,2.6vh,30px)}
.plant{margin-top:clamp(28px,4vh,48px);display:grid;
  grid-template-columns:minmax(168px,215px) 1fr;gap:clamp(20px,2.6vw,38px);align-items:start}
.plant-art{position:sticky;top:calc(50vh - 150px)}
.pot{position:relative;width:100%;aspect-ratio:5/7;min-height:230px}
.pot canvas{position:absolute;inset:0;width:100%;height:100%}
.plant-cap{font-family:var(--hand);font-size:16.5px;line-height:1.28;color:var(--ink-4);
  margin:6px 0 9px;max-width:none;min-height:2.5em;transition:color .4s}
.plant-cap.done{color:var(--red)}
.plant-meter{position:relative;height:2px;background:rgba(26,26,24,.14);border-radius:2px;
  overflow:hidden;margin:0;max-width:none}
.plant-meter span{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);
  transition:width .5s var(--ease)}
.plant-meter span.full{background:var(--red)}

.form-lead{font-family:var(--hand);font-size:clamp(19px,1.5vw,23px);color:var(--ink-3);
  margin-bottom:clamp(14px,2vh,22px)}
.field{display:block;position:relative;margin-bottom:clamp(20px,2.8vh,30px)}
.lab{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.field input,.field textarea{
  width:100%;display:block;background:none;border:0;outline:none;
  font-family:var(--hand);font-size:clamp(23px,2vw,30px);line-height:1.34;color:var(--ink);
  padding:3px 2px 7px;resize:none}
.field textarea{font-size:clamp(20px,1.7vw,25px);line-height:1.44}
.field ::placeholder{color:rgba(26,26,24,.24)}
/* the ruled line you write on. it inks in when the field has something in it. */
.line{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:rgba(26,26,24,.22)}
.line::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);
  border-radius:2px;transition:width .55s var(--ease)}
.field.has .line::after{width:100%}
.field.bad .line::after{width:100%;background:var(--red)}
.nope{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.plantbtn{position:relative;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--hand);font-size:clamp(25px,2.2vw,34px);line-height:1;color:var(--ink);
  margin-top:6px}
.plantbtn-in{position:relative;display:inline-block;padding:12px 30px 14px}
.plantbtn-in::before,.plantbtn-in::after{content:"";position:absolute;inset:0;
  border:1.9px solid var(--ink);border-radius:999px 22px 999px 24px;
  transition:border-color .35s,transform .45s var(--ease)}
.plantbtn-in::before{transform:rotate(-.6deg)}
.plantbtn-in::after{transform:rotate(.7deg);opacity:.34}
.plantbtn:hover .plantbtn-in::before,.plantbtn:focus-visible .plantbtn-in::before{
  border-color:var(--red);transform:rotate(-1.1deg) scale(1.02)}
.plantbtn:hover .plantbtn-in,.plantbtn:focus-visible .plantbtn-in{color:var(--red)}
.plantbtn:focus-visible{outline:none}
.plantbtn:active .plantbtn-in{transform:scale(.98)}
.plantbtn[disabled]{opacity:.45;cursor:default}
.form-msg{font-family:var(--hand);font-size:clamp(19px,1.5vw,23px);line-height:1.3;
  margin:14px 0 0;min-height:1.4em;color:var(--ink)}
.form-msg.bad{color:var(--red)}
.form-fine{font-size:.86em;color:var(--ink-4);margin-top:10px}
.waiting{font-family:var(--hand);font-size:clamp(26px,3vw,44px);line-height:1.16;
  margin-top:clamp(46px,7vh,84px);max-width:22ch}

/* ------------------------------------------------------------------ footer */
footer{position:relative;z-index:4;margin-left:var(--pad);
  width:var(--col);max-width:calc(100vw - var(--pad) * 2);
  padding:clamp(34px,5vh,60px) 0 clamp(40px,6vh,70px)}
footer::before{content:"";display:block;height:2px;border-radius:2px;background:var(--ink-4);
  width:64px;margin-bottom:22px;transform:rotate(-.6deg)}
.foot-line{font-family:var(--hand);font-size:clamp(20px,1.7vw,26px);line-height:1.32;
  color:var(--ink-2);max-width:26ch}
.foot-meta{margin-top:18px;display:flex;flex-direction:column;gap:2px;
  font-size:13px;color:var(--ink-4)}

/* ------------------------------------------------------ pencil cursor */
.pencil{position:fixed;left:0;top:0;z-index:300;pointer-events:none;
  width:14px;height:14px;transform:translate(-2px,-2px)}
.pencil i{position:absolute;left:0;top:0;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:13px solid var(--ink);
  transform:rotate(215deg);transform-origin:50% 80%;opacity:.85}
body.press .pencil i{border-bottom-color:var(--red)}
@media(hover:none){.pencil{display:none}}

/* ------------------------------------------------------- reveal defaults */
.ink-in,[data-rv]{opacity:0;transform:translateY(16px)}
.title .w{opacity:0;transform:translateY(.34em) rotate(-1.5deg)}

/* ==================================================================== TABLET */
@media(max-width:1023px){
  :root{--col:clamp(300px,44vw,470px)}
  .margin{left:8px;gap:8px}
  .margin li{font-size:13px}
  .cards{grid-template-columns:1fr}
  .plant{grid-template-columns:minmax(130px,160px) 1fr}
  .plant-art{position:static}
  .frame{width:clamp(215px,30vw,290px)}
}

/* ==================================================================== MOBILE */
@media(max-width:759px){
  :root{--pad:20px;--col:auto}
  body{background-size:20px 20px}

  /* the drawing gets a fixed panel across the top. the writing slides under it. */
  #gl{height:44svh;bottom:auto;z-index:8}
  #trail{display:none}
  .stagemask{display:block;position:fixed;left:0;right:0;top:0;height:44svh;z-index:7;
    background:var(--paper);
    background-image:radial-gradient(var(--dot) 1.05px,transparent 1.05px);
    background-size:20px 20px;background-position:10px 10px;pointer-events:none}
  .stagemask::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--ink-4) 8%,var(--ink-4) 92%,transparent)}
  .stagemask::before{content:"";position:absolute;left:0;right:0;top:100%;height:46px;
    background:linear-gradient(180deg,var(--paper),rgba(251,250,247,0))}
  .fruitlayer{height:44svh;z-index:9}
  .fruit{font-size:16px;padding:4px}
  .fruit .dot{width:30px;height:30px;flex-basis:30px}
  .fruit .num{display:none}
  /* the panel is too small for eight markers. show only the one being read, and only
     once its branch has actually grown and been placed. */
  .fruit{display:none!important}
  .fruit.here.on{display:flex!important}

  .margin{left:auto;right:6px;top:auto;bottom:10px;transform:none;
    z-index:10;flex-direction:column-reverse;gap:6px}
  .margin-rule{display:none}
  .margin ol{flex-direction:row;gap:9px;background:rgba(251,250,247,.9);
    padding:5px 9px;border-radius:999px}
  .margin li{font-size:12.5px}
  .margin li.on{transform:scale(1.3)}

  main{padding-top:44svh}
  .sec,footer{width:auto;margin-left:var(--pad);margin-right:var(--pad);max-width:none}
  .sec.wide{width:auto}
  .hero{min-height:auto;padding-top:clamp(28px,5vh,52px);padding-bottom:clamp(40px,7vh,70px)}
  .title{font-size:clamp(50px,15vw,78px)}
  .lede{font-size:clamp(23px,6.6vw,31px)}
  .hero-body p,p{max-width:none}
  .big{max-width:none}
  .indent{padding-left:14px}
  .board{margin-left:0;margin-right:0}
  .board-track{padding:6px var(--pad) 14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    width:auto;scrollbar-width:none}
  .board-track::-webkit-scrollbar{display:none}
  .frame{width:min(74vw,300px);scroll-snap-align:center}
  .board-hint{display:none}
  .plant{grid-template-columns:1fr;gap:14px}
  .plant-art{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:center}
  .pot{min-height:150px}
  .plant-cap{margin:0 0 8px;min-height:0}
  .taped::before,.taped::after{width:56px;height:19px}
  .waiting{max-width:none}
}

@media(max-width:400px){
  .title{font-size:clamp(44px,14.5vw,58px)}
  .frame{width:82vw}
}

/* -------------------------------------------------------- reduced motion */
@media(prefers-reduced-motion:reduce){
  .tick{animation:none}
  .ink-in,[data-rv],.title .w{opacity:1;transform:none}
  .fruit{opacity:1}
  .pencil{display:none}
  *{transition-duration:.01ms!important}
}