/* ============================================================
   LiNDi Books — garden-signboard design system (2026-07-12)
   Door → Branch nav → short pages. Shared by all new pages.
   Loaded AFTER fonts.css and consent.css.
   ============================================================ */

:root{
  /* --- garden palette (from Linda's signboard graphics) --- */
  --forest:#2E5E3A;        /* deep signboard green — headings */
  --forest-deep:#234A2D;
  --leaf:#7FB03F;          /* bright sprout green */
  --leaf-deep:#5A8A2E;
  --wood:#7A5230;          /* branch / "BOOKS" brown */
  --wood-dark:#4E3620;
  --cream:#F5ECD6;         /* parchment signboard */
  --cream-2:#FBF6EA;       /* lighter paper */
  --rose:#B65569;          /* heart / accent pink */
  --rose-deep:#9E4257;
  --sun:#F2B705;           /* sunflower yellow (Hilltop) */
  --sun-soft:#FCE39B;
  --sky:#3E7CB1;           /* "Come on in" blue / Teachers */
  --sky-soft:#CFE4F2;
  --plum:#6E5AA6;          /* Organizations purple */
  --ink:#2A2018;           /* warm near-black text */
  --ink-soft:#4A3E33;
  /* LiNDi wordmark letter colors */
  --w1:#7C4DBF; --w2:#6BB13F; --w3:#F08A24; --w4:#2FA9C9; --w5:#E5568A; --wbooks:#6A4A2E;
  --r:20px;
  --stroke:3px;
  --maxw:1060px;
  --shadow:0 10px 24px rgba(42,32,24,.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream-2);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
h1,h2,h3,.disp{
  font-family:'Fraunces','Georgia',serif;
  font-optical-sizing:auto;line-height:1.1;letter-spacing:-.01em;
  font-weight:600;color:var(--forest);
}
.hand{font-family:'Patrick Hand',cursive;}
a{color:var(--forest);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.center{text-align:center;}
.lead{font-size:1.12rem;color:var(--ink-soft);max-width:60ch;}

/* ---------- soft garden page backdrop ---------- */
.garden-bg{
  background:
    radial-gradient(1200px 380px at 50% -140px, var(--sun-soft) 0%, rgba(252,227,155,0) 70%),
    linear-gradient(180deg,#FBF6EA 0%,#F3ECD8 100%);
}

/* ============================================================
   LiNDi wordmark (hand-lettered multicolor)
   ============================================================ */
.wordmark{
  font-family:'Fredoka',system-ui,sans-serif;font-weight:600;
  letter-spacing:.01em;line-height:1;white-space:nowrap;
}
.wordmark b{font-weight:700;}
.wordmark .c1{color:var(--w1);}
.wordmark .c2{color:var(--w2);}
.wordmark .c3{color:var(--w3);}
.wordmark .c4{color:var(--w4);}
.wordmark .c5{color:var(--w5);position:relative;}
.wordmark .c5::after{        /* tiny heart over the last i */
  content:"♥";position:absolute;top:-.34em;left:50%;transform:translateX(-50%);
  font-size:.4em;color:var(--w5);pointer-events:none;
}
.wordmark .cbooks{color:var(--wbooks);}

/* ============================================================
   BRANCH NAV — Linda's hanging-signs graphic as the main nav.
   The branch.jpg art IS the nav; transparent hotspot links are
   overlaid on each of the 6 wooden signs (percentages of the
   1800×600 artwork, so they track the image as it scales).
   ============================================================ */
.branchnav{
  background:linear-gradient(180deg,#FBF6EA 0%,#F5ECD6 100%);
  border-bottom:var(--stroke) solid var(--wood-dark);
  box-shadow:0 6px 16px rgba(42,32,24,.10);
}
.branchmap{
  position:relative;display:block;line-height:0;
  max-width:1000px;margin:0 auto;
}
.branch-img{width:100%;height:auto;display:block;}
/* transparent clickable hotspots over each sign */
.hot{
  position:absolute;display:block;border-radius:14px;
  text-decoration:none;transition:background .15s,box-shadow .15s;
}
.hot:hover{background:rgba(255,246,205,.20);box-shadow:0 0 0 3px rgba(35,74,45,.28);}
.hot:focus-visible{outline:3px solid var(--forest);outline-offset:2px;}
.hot.is-active{box-shadow:0 0 0 4px var(--sun),0 0 0 6px rgba(42,32,24,.18);}
/* sign positions — left/width/top/height as % of the artwork */
.hot-home    {left:1.6%; width:20.5%;top:32%;  height:49.5%;}
.hot-garden  {left:23.5%;width:13.7%;top:33.5%;height:38.5%;}
.hot-library {left:41.2%;width:13.9%;top:31.5%;height:44.5%;}
.hot-teachers{left:56.5%;width:12.5%;top:33%;  height:39.5%;}
.hot-seed    {left:70.7%;width:11.9%;top:32.8%;height:41.5%;}
.hot-orgs    {left:84%;  width:14.6%;top:35.2%;height:34.5%;}

@media(max-width:720px){
  /* keep signs big enough to tap: hold a min width and scroll sideways */
  .branchnav{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .branchmap{min-width:620px;}
}
@media(prefers-reduced-motion:reduce){
  .hot{transition:none;}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:1.02rem;
  border:none;border-radius:999px;padding:14px 26px;min-height:48px;cursor:pointer;
  text-decoration:none;color:#fff;background:var(--forest);
  box-shadow:0 6px 0 rgba(35,74,45,.35);transition:transform .08s,box-shadow .08s,filter .12s;
}
.btn:hover{filter:brightness(1.05);}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(35,74,45,.35);}
.btn-rose{background:var(--rose);box-shadow:0 6px 0 rgba(158,66,87,.4);}
.btn-sky{background:var(--sky);box-shadow:0 6px 0 rgba(43,86,124,.4);}
.btn-sun{background:var(--sun);color:var(--ink);box-shadow:0 6px 0 rgba(180,135,4,.4);}
.btn-plum{background:var(--plum);box-shadow:0 6px 0 rgba(70,56,110,.4);}
.btn-ghost{background:#fff;color:var(--forest);border:2.5px solid var(--forest);box-shadow:0 6px 0 rgba(35,74,45,.22);}
.btn-lg{font-size:1.15rem;padding:17px 34px;min-height:56px;}
.btn-sm{font-size:.9rem;padding:10px 18px;min-height:44px;box-shadow-width:4px;}

/* ============================================================
   PAGE HERO (short pages)
   ============================================================ */
.page{padding:44px 0 60px;}
.page-narrow{max-width:900px;}
.eyebrow{
  font-family:'Nunito',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:.78rem;color:var(--rose);margin:0 0 10px;
}
.h-title{font-size:clamp(2rem,5vw,3.2rem);margin:0 0 12px;}
.h-sub{font-family:'Patrick Hand',cursive;color:var(--wood);font-size:clamp(1.2rem,3vw,1.7rem);margin:0 0 18px;}

.hero-figure{
  border:5px solid #fff;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);background:#fff;
}
.hero-figure img{width:100%;height:auto;}

/* two-column split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;}
.split.rev .split-media{order:2;}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:26px;}.split.rev .split-media{order:0;}}

/* ============================================================
   POSTER — one of Linda's designed graphics used AS the page.
   The artwork carries the headline + body copy; the .poster-copy
   block below repeats that same wording as real, selectable,
   screen-reader-readable text (her art is 1536×1024, so the
   baked-in paragraphs are unreadable on a phone).
   ============================================================ */
.poster{max-width:1100px;margin:0 auto;padding:36px 22px 0;}
.poster figure{
  margin:0;background:#fff;border:6px solid #fff;border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);
}
.poster figure img{width:100%;height:auto;}
.poster-copy{max-width:62ch;margin:28px auto 0;text-align:center;}
.poster-copy h1,.poster-copy h2{font-size:clamp(1.7rem,4.2vw,2.6rem);margin:0 0 12px;}
.poster-copy p{color:var(--ink-soft);font-size:1.08rem;margin:0 0 14px;}
.poster-copy p:last-of-type{margin-bottom:0;}
.poster-copy .said{font-family:'Fraunces',serif;font-style:italic;color:var(--rose-deep);font-size:1.15rem;}
.poster-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:24px;}

/* ---------- Lindi Books circular badge logo ---------- */
.logo-badge{display:block;width:clamp(120px,17vw,168px);height:auto;margin:0 auto 16px;}

/* ---------- signboard card (parchment) ---------- */
.board{
  background:var(--cream);border:2px solid rgba(122,82,48,.35);border-radius:16px;
  padding:26px 28px;box-shadow:var(--shadow);position:relative;
}
.board h2,.board h3{color:var(--forest-deep);}
.flourish{color:var(--leaf-deep);text-align:center;font-size:1.1rem;margin:6px 0 16px;}
.flourish span{color:var(--rose);}

/* ---------- feature list (icon + text) ---------- */
.features{list-style:none;margin:0;padding:0;display:grid;gap:18px;}
.features li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;}
.features .fico{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--forest);color:#fff;font-size:1.4rem;
}
.features h3{margin:0 0 3px;font-size:1.15rem;}
.features p{margin:0;color:var(--ink-soft);}

/* ---------- step chips (read it / imagine it / grow it / share it) ---------- */
.steps{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:8px 0;}
.chip{
  display:flex;flex-direction:column;align-items:center;gap:6px;min-width:120px;
  background:#fff;border-radius:16px;padding:16px 14px;box-shadow:var(--shadow);
}
.chip .cico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;}
.chip b{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;}

/* ---------- book grid ---------- */
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;}
.books-lg{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:26px;}
.books-lg .meta b{font-size:1.15rem;}
.books-lg .meta small{font-size:.95rem;}
.book{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .12s;}
.book:hover{transform:translateY(-4px);}
.book .cover{aspect-ratio:3/4;background:linear-gradient(160deg,var(--leaf),var(--forest));overflow:hidden;}
.book .cover img{width:100%;height:100%;object-fit:cover;}
.book .meta{padding:12px 14px 16px;}
.book .meta b{display:block;font-family:'Fraunces',serif;color:var(--forest-deep);font-size:1rem;line-height:1.2;}
.book .meta small{color:var(--ink-soft);}

/* ---------- ribbon / quote strip ---------- */
.ribbon{
  background:var(--rose);color:#fff;text-align:center;border-radius:14px;
  padding:20px 24px;font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.2rem,3vw,1.7rem);
  box-shadow:var(--shadow);
}
.ribbon b{color:var(--sun);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{background:var(--wood-dark);color:#F3E7C6;padding:72px 0 64px;text-align:center;margin-top:20px;}
.site-foot .wm{font-size:clamp(2.3rem,6vw,3.2rem);}
.site-foot .tag{font-family:'Patrick Hand',cursive;color:var(--sun);
  font-size:clamp(1.45rem,3.4vw,1.9rem);margin:14px 0 0;}
.site-foot a.email{color:var(--sky-soft);text-decoration:none;font-weight:700;font-size:clamp(1.05rem,2.4vw,1.25rem);}
.site-foot a.email:hover{color:var(--sun);}
.site-foot .home-link{display:inline-block;margin-top:26px;color:#F3E7C6;font-weight:700;
  text-decoration:none;font-size:clamp(1.05rem,2.4vw,1.2rem);}
.site-foot .home-link:hover{color:var(--sun);}
.site-foot .copyright{margin:24px 0 0;font-size:clamp(.95rem,2.2vw,1.05rem);color:#CBBB97;}
/* legal nav grows a little too, so it doesn't read as fine print next to the bigger mark */
.site-foot .pn-legal{margin-top:30px;}
.site-foot .pn-legal a,.site-foot .pn-legal button{font-size:1.02rem;}

/* ============================================================
   A11Y / MOTION
   ============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,.sign:focus-visible{
  outline:3px solid var(--sun);outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}