/* Students' Wall — shared scroll-driven post templates
   Three patterns, one shared mechanic set: a field-guide trail, a ribbon-bound
   storybook, and a market-visit walkthrough. Reused by:
   flying-visitors-of-bms, magical-kerchief, market-visit, cha-history-of-tea.
   Fonts/accent follow the site's existing system (Poppins, #c1272d red). */

.st-eyebrow{
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:#c1272d; font-weight:700; margin:0 0 6px;
}
.st-lede{ max-width:62ch; color:#555; margin:10px 0 0; }
.st-zoomable{ cursor:zoom-in; }

/* generic fade-up-on-scroll, for content that isn't a trail/story/market */
.st-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.st-reveal.in-view{ opacity:1; transform:translateY(0); }

/* click-to-enlarge, shared by every template */
.st-lightbox{position:fixed;inset:0;background:rgba(10,10,10,.92);display:none;align-items:center;justify-content:center;z-index:1000;padding:40px;}
.st-lightbox.open{display:flex;}
.st-lightbox img{max-width:100%;max-height:100%;border-radius:4px;object-fit:contain;}
.st-lightbox-close{position:absolute;top:20px;right:24px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.st-lightbox-close:hover{background:rgba(255,255,255,.22);}
.st-lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.st-lightbox-arrow:hover{background:rgba(255,255,255,.22);}
.st-lightbox-arrow.prev{left:20px;} .st-lightbox-arrow.next{right:20px;}
.st-lightbox-counter{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;opacity:.8;}
.st-lightbox-caption{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;opacity:.85;max-width:70vw;text-align:center;}
@media (max-width:640px){ .st-lightbox-arrow{width:38px;height:38px;font-size:19px;} }

/* =========================================================
   FIELD GUIDE — specimens pinned along a trail
========================================================= */
.st-trail{ position:relative; max-width:880px; margin:0 auto; }
.st-trail-line{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:repeating-linear-gradient(to bottom,#ddd 0 6px,transparent 6px 14px);
  transform:translateX(-50%);
}
.st-counter{
  position:sticky; top:148px; float:right; z-index:5;
  font-size:12px; color:#666; background:#fff; border:1px solid #e5e0d5;
  padding:6px 12px; border-radius:100px; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.st-counter b{ color:#c1272d; }
.st-specimen{
  position:relative; width:46%; margin-bottom:64px;
  opacity:0; transform:translateY(26px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.st-specimen.in-view{ opacity:1; transform:translateY(0); }
.st-specimen.left{ margin-right:auto; } .st-specimen.right{ margin-left:auto; }
.st-pin{
  position:absolute; top:30px; width:10px; height:10px; border-radius:50%;
  background:#fff; border:2px solid #ddd; z-index:2;
  transition:background .35s ease,border-color .35s ease;
}
.st-specimen.in-view .st-pin{ background:#c1272d; border-color:#c1272d; }
.st-specimen.left .st-pin{ right:-31px; } .st-specimen.right .st-pin{ left:-31px; }
.st-specimen-card{
  background:#fff; border:1px solid #eee; border-radius:6px;
  padding:14px 14px 18px; box-shadow:0 10px 26px -16px rgba(0,0,0,.25);
}
.st-specimen-photo{ aspect-ratio:4/3; overflow:hidden; border-radius:3px; background:#f7f5f0; }
.st-specimen-photo img{ width:100%; height:100%; object-fit:contain; transform:scale(1.06); transition:transform 1s ease; }
.st-specimen.in-view .st-specimen-photo img{ transform:scale(1); }
.st-specimen-num{ display:inline-block; margin-top:12px; font-size:11px; letter-spacing:.05em; color:#c1272d; font-weight:600; }
.st-specimen h3{ font-size:1.25rem; margin:3px 0 0; }
.st-specimen p{ margin-top:6px; color:#666; font-size:.92rem; }
.st-note-img-wrap{ margin-top:10px; border:1px solid #eee; border-radius:4px; overflow:hidden; background:#fff; }
.st-note-img{ display:block; width:100%; height:auto; }

@media (max-width:820px){
  .st-trail-line{ display:none; }
  .st-specimen{ width:100%; }
  .st-pin{ display:none; }
  .st-counter{ float:none; display:inline-block; margin-bottom:18px; }
}

/* =========================================================
   STORYBOOK — pages held together by a ribbon
========================================================= */
.st-story-shell{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:26px; max-width:720px; margin:0 auto; }
.st-ribbon-rail{ position:relative; background:#eee; border-radius:3px; overflow:hidden; }
.st-ribbon-fill{ position:absolute; top:0; left:0; right:0; height:6%; background:linear-gradient(180deg,#8fae3a,#4c6e22); border-radius:3px 3px 0 0; transition:height .15s ease-out; }
.st-ribbon-rail::after{ content:""; position:absolute; left:50%; bottom:-6px; width:14px; height:14px; background:#8fae3a; transform:translateX(-50%) rotate(45deg); }
.st-story-track{ display:flex; flex-direction:column; gap:78px; padding:2vh 0 8vh; }
.st-story-page{
  --sx:-46px; --sr:-4deg;
  opacity:0; transform:translateX(var(--sx)) scale(.88) rotate(var(--sr));
  transition:opacity .9s cubic-bezier(.19,.82,.24,1), transform .9s cubic-bezier(.19,.82,.24,1);
}
.st-story-page:nth-child(even){ --sx:46px; --sr:4deg; }
.st-story-page.active{ opacity:1; transform:translateX(0) scale(1) rotate(0deg); }
.st-story-frame{
  display:flex; align-items:center; justify-content:center; max-height:64vh;
  border:8px solid #fff; outline:1px solid #e5e0d5; border-radius:2px; overflow:hidden;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.3); background:#fff;
}
.st-story-frame img{ width:auto; max-width:100%; max-height:64vh; object-fit:contain; transform:scale(1); transition:transform 9s cubic-bezier(.19,.66,.4,1); }
.st-story-page.active .st-story-frame img{ transform:scale(1.055); }
.st-story-text{
  margin:16px 2px 0; font-size:1.05rem; line-height:1.65; color:#333; max-width:56ch;
  opacity:0; transform:translateY(12px); transition:opacity .6s ease .3s, transform .6s ease .3s;
}
.st-story-page.active .st-story-text{ opacity:1; transform:translateY(0); }
.st-story-num{
  font-size:11px; letter-spacing:.05em; color:#c1272d; font-weight:700; text-transform:uppercase; margin:0 2px;
  opacity:0; transition:opacity .5s ease .12s;
}
.st-story-page.active .st-story-num{ opacity:1; }

@media (max-width:820px){
  .st-story-shell{ grid-template-columns:16px minmax(0,1fr); gap:14px; }
}

/* =========================================================
   BOOK — a page-flip reader, click a corner or use the arrows
========================================================= */
.st-book-wrap{ display:flex; flex-direction:column; align-items:center; max-width:640px; margin:0 auto; }
.st-book-stage{ perspective:2400px; width:100%; display:flex; justify-content:center; padding-left:14px; }
.st-book{ position:relative; width:min(420px,84vw); aspect-ratio:3/4; }
.st-book-wrap.st-book-spread{ max-width:880px; }
.st-book-wrap.st-book-spread .st-book{ width:min(820px,94vw); aspect-ratio:4/3; }
.st-book::before{
  content:""; position:absolute; left:-13px; top:8px; bottom:8px; width:13px;
  background:linear-gradient(90deg,#4c6e22,#6c8f3a); border-radius:3px 0 0 3px;
  box-shadow:inset -3px 0 6px rgba(0,0,0,.25);
}
.st-book-leaf{
  position:absolute; inset:0; transform-style:preserve-3d; transform-origin:left center;
  transition:transform .85s cubic-bezier(.4,.05,.2,1); border-radius:0 3px 3px 0;
}
.st-book-leaf.flipped{ transform:rotateY(-176deg); }
.st-book-face{
  position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; cursor:pointer;
  background:#fff; border:1px solid #e5e0d5; border-left:none;
  box-shadow:3px 0 14px -6px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center;
}
.st-book-face img{ width:100%; height:100%; object-fit:contain; background:#fff; }
.st-book-face.spread{ gap:0; }
.st-book-face.spread img{ width:50%; height:100%; object-fit:contain; padding:16px; box-sizing:border-box; }
.st-book-face.spread img:first-child{ border-right:1px solid #e5e0d5; }
@media (max-width:600px){
  .st-book-face.spread{ flex-direction:column; }
  .st-book-face.spread img{ width:100%; height:50%; padding:8px; }
  .st-book-face.spread img:first-child{ border-right:none; border-bottom:1px solid #e5e0d5; }
}
.st-book-controls{ margin-top:20px; display:flex; align-items:center; justify-content:center; gap:14px; }
.st-book-btn{
  font-size:12px; letter-spacing:.04em; background:#4c6e22; color:#fff; border:none;
  padding:9px 15px; border-radius:4px; cursor:pointer;
}
.st-book-btn:disabled{ opacity:.35; cursor:default; }
.st-book-btn:not(:disabled):hover{ background:#3a5519; }
.st-book-page-n{ font-size:12px; color:#888; min-width:64px; text-align:center; }
.st-book-caption{ margin-top:16px; max-width:58ch; text-align:center; color:#333; font-size:.98rem; line-height:1.6; }
.st-book-num{ display:block; font-size:11px; letter-spacing:.05em; color:#c1272d; font-weight:700; text-transform:uppercase; margin-bottom:4px; }

@media (max-width:600px){
  .st-book-stage{ padding-left:10px; }
  .st-book::before{ left:-10px; width:10px; }
}

/* =========================================================
   MARKET WALK — a photo held while stops scroll past
========================================================= */
.st-market-rail{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:44px; align-items:start; }
.st-market-photo-wrap{ position:sticky; top:148px; }
.st-market-photo{ position:relative; width:100%; aspect-ratio:4/5; border-radius:5px; overflow:hidden; border:1px solid #eee; box-shadow:0 18px 36px -18px rgba(0,0,0,.3); background:#fafafa; }
.st-market-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.1); transition:opacity 1s ease, transform 5s ease; pointer-events:none; }
.st-market-photo img.active{ opacity:1; transform:scale(1); pointer-events:auto; cursor:zoom-in; }
.st-market-photo .st-frame-label{ position:absolute; left:0; right:0; bottom:0; padding:12px 14px; background:linear-gradient(0deg,rgba(0,0,0,.6),transparent); color:#fff; font-size:11.5px; letter-spacing:.03em; z-index:3; }
.st-stall-nav{ margin-top:16px; display:flex; flex-direction:column; gap:2px; }
.st-stall-nav button{ all:unset; cursor:pointer; display:flex; align-items:center; gap:8px; padding:8px 4px; font-size:12px; letter-spacing:.02em; color:#777; border-left:2px solid #eee; padding-left:12px; }
.st-stall-nav button .st-n{ color:#ccc; }
.st-stall-nav button.active{ color:#c1272d; border-left-color:#c1272d; }
.st-stall-nav button.active .st-n{ color:#c1272d; }
.st-stall{ min-height:56vh; display:flex; flex-direction:column; justify-content:center; padding:34px 0; opacity:.4; transition:opacity .5s ease; }
.st-stall:first-child{ padding-top:4px; }
.st-stall.active{ opacity:1; }
.st-stall-eyebrow{ font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:#4c6e22; font-weight:700; }
.st-stall h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin:6px 0 0; }
.st-stall .st-quote{ margin:14px 0 0; font-size:1.02rem; color:#222; max-width:52ch; font-style:italic; line-height:1.55; }
.st-stall .st-quote span{ color:#c1272d; font-style:normal; font-weight:600; }
.st-stall .st-by{ margin-top:12px; font-size:.88rem; color:#888; }

@media (max-width:820px){
  .st-market-rail{ grid-template-columns:1fr; }
  .st-market-photo-wrap{ position:static; margin-bottom:6px; }
}

@media (prefers-reduced-motion: reduce){
  .st-specimen, .st-specimen-photo img,
  .st-story-page, .st-story-frame img, .st-story-text, .st-story-num,
  .st-market-photo img, .st-stall, .st-reveal, .st-book-leaf{
    transition-duration:.01ms !important;
  }
}