/* Dunia Anura — "Katalog Lapangan": the sketchbook mechanic from ThreeUI's
   MengToSketchbookLandingPage (canonical source SHA-256 e0330548b1ac…6dd1),
   ported verbatim except for two things it has to survive here:

     • everything is scoped under `.sbk`, because this is a band inside an
       existing page rather than a whole document — the source's :root
       variables, its fixed .wash and its bare-element rules would otherwise
       repaint the whole site;
     • the painted ground is a light wash of its own rather than the source's
       botanical photograph — nothing here competes with the book;
     • the draggable magnifier and the magnified second copy of the book it
       needed are gone — the book is drawn large enough to read unaided.

   The geometry the page-turn depends on is untouched: --bw --span --n --tt
   --td --shade --lit --a1 --a2 --pg and the strip chain.  What did change is
   the plate the sheet is drawn on — 1760x920 rather than 1760x1240 — so --pg,
   .sb-book's aspect-ratio and the three .sb-cast pools below are all set to
   agree with js/sketchbook-plate.js. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif-italic.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(../fonts/newsreader.woff2) format('woff2')}

.sbk{
  --paper:#ece7dc;
  --ink:#2b2721;
  --ink-soft:rgba(43,39,33,.58);
  --ink-faint:rgba(43,39,33,.36);
  --hairline:rgba(43,39,33,.14);
  --earth:#9a6a3e;
  --display:'Instrument Serif',"New York",Georgia,'Times New Roman',serif;
  --font:'Newsreader',"New York",Georgia,'Times New Roman',serif;
  --track-caps:.24em;
  /* the sheet's top inset on the plate — see js/sketchbook-plate.js */
  --pg:11.96%;

  position:relative;isolation:isolate;
  font-family:var(--font);font-weight:400;color:var(--ink);
  background:transparent;   /* the page is already this paper — see below */
  -webkit-font-smoothing:antialiased;
  overflow:clip;
}
.sbk *{box-sizing:border-box}
.sbk a{color:inherit;text-decoration:none}
.sbk button{font:inherit}
.sbk ::selection{background:rgba(43,39,33,.85);color:var(--paper)}

/* The ground the band sits on.  The source paints a botanical watercolour
   here; this page wants nothing competing with the book, so it is only a
   lift: warm where the sheet is, settling into the page's own paper. The band
   needs no edge fades any more, because the page is the same paper. */
.sbk .wash{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* one soft fall of light, originating above the band so its own top edge
     never draws a line across the paper */
  background:radial-gradient(150% 84% at 50% -14%,
    rgba(255,252,246,.72) 0%, rgba(249,244,234,.34) 42%, rgba(236,231,220,0) 74%);
}

.sbk > :not(.wash){position:relative;z-index:1}

/* ---------------- the band as the page's opening ---------------- */
/* The book is the first thing on a detail page, so everything above it costs
   it height directly — hence only a slim breadcrumb, and no title repeating
   what is already set on the paper. The band is deliberately a little shorter
   than the viewport: the price and the Adopt button below it show at the
   bottom edge, which both invites the scroll and keeps the shop working. */
.sbk-hero{padding:0 0 16px}
/* The notes panel is a `.sbk` only so it inherits the book's ink and type;
   it must not also inherit the paper ground, which would paint a cream band
   across a page that has gone back to being the shop. */
.sbk-notes{background:transparent;padding:0}

/* ---------------- the stage ---------------- */
/* The plate carries its own margin around the sheet, so the band adds little. */
.sbk .hero{
  position:relative;display:grid;justify-items:center;align-content:center;
  overflow-anchor:none;
  padding:6px 0 0;
}
.sbk .hero,.sbk .hero *{-webkit-user-select:none;-moz-user-select:none;user-select:none}
.sbk .hero img{-webkit-user-drag:none;user-drag:none}
.sbk .sb-wrap{display:grid;justify-items:center;gap:12px;width:100%;position:relative;z-index:2}
.sbk .sb-stage{
  display:flex;align-items:center;justify-content:center;width:100%;
  position:relative;touch-action:pan-y;
}
/* The arrows sit in the plate's own transparent margin rather than beside it,
   so the sheet itself gets the full width of the band. */
.sbk .sb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;padding:14px 8px;
  border:0;background:transparent;color:var(--ink-faint);cursor:pointer;transition:color .2s;
  -webkit-tap-highlight-color:transparent;z-index:8;
}
.sbk .sb-arrow.left{left:0}
.sbk .sb-arrow.right{right:0}
.sbk .sb-arrow:hover{color:var(--ink);background:rgba(255,252,244,.72)}
.sbk .sb-arrow{border-radius:999px;transition:color .2s ease,background-color .2s ease}

/* The box is the book's own untransformed frame; only .sb-tilt leans and
   scales underneath it. The plate is 1760x920 and its sheet fills the middle
   90% x 76%, so the box is a little wider than what you actually read; 1.913
   is the plate's own aspect. The height clamp keeps the whole spread on
   screen at once — a book you have to scroll to see is a book you cannot
   read. */
.sbk .sb-3d{
  position:relative;flex:1 1;min-width:0;
  /* Two things are being balanced. 320px is what the page spends around the
     book — nav, breadcrumb, index strip — plus ~120px of the counter left
     showing at the bottom edge, which is enough to reach the price; since the
     plate is 1.913:1, subtracting that from the viewport height gives the
     book's height directly, so the peek stays constant as the screen grows.
     But on a short screen (1366x768 is still the commonest laptop) that
     arithmetic would shrink the book until its body type fell under 15px and
     the book would not be drawn at all. So 1090px is a floor: below that,
     the spread simply runs past the fold and you scroll to the counter —
     the right way round, because the book has to be readable first and the
     peek is only a courtesy. */
  max-width:min(1660px, calc(100vw - 104px), max(1090px, calc((100svh - 320px) * 1.913)));
  perspective:2600px;perspective-origin:50% 46%;
}
.sbk .sb-tilt{
  position:relative;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--zoom,1));
  will-change:transform;
}
.sbk .sb-book{position:relative;width:100%;aspect-ratio:1760/920;transform-style:preserve-3d;z-index:1}

/* The lifting corner. It sits over the outer edge of the right-hand leaf —
   the .051/.949 x .12/.88 inset the sheet occupies — and is only a hint: the
   whole leaf is still the drag target underneath it. */
.sbk .sb-peel{
  position:absolute;right:5.1%;bottom:12%;width:clamp(54px,5.4%,96px);aspect-ratio:1;
  z-index:7;cursor:pointer;opacity:0;transition:opacity .22s ease;
  background:
    linear-gradient(315deg, rgba(255,252,245,.96) 0 46%, rgba(214,203,182,.9) 52%, rgba(0,0,0,0) 53%),
    linear-gradient(315deg, rgba(58,44,26,0) 46%, rgba(58,44,26,.16) 60%, rgba(58,44,26,0) 76%);
  -webkit-mask-image:linear-gradient(315deg,#000 0 52%,transparent 52%);
  mask-image:linear-gradient(315deg,#000 0 52%,transparent 52%);
  filter:drop-shadow(-3px -3px 5px rgba(58,44,26,.22));
}
.sbk .sb-peel.on{opacity:1}
@media (prefers-reduced-motion:reduce){.sbk .sb-peel{transition:none}}

/* The book sits on a surface, so its shadow is a soft pool underneath —
   no box, no filter on the artwork, nothing with an edge of its own. */
.sbk .sb-cast{position:absolute;pointer-events:none;z-index:0}
.sbk .sb-cast.ambient{
  left:5%;right:5%;top:19%;bottom:-14.7%;
  background:radial-gradient(50% 50% at 50% 58%,
    rgba(58,44,26,.34) 0%,rgba(58,44,26,.19) 40%,rgba(58,44,26,0) 74%);
  filter:blur(26px);
  opacity:calc(1 - var(--shade,0) * .42);
}
.sbk .sb-cast.contact{
  left:9%;right:9%;top:66.2%;bottom:-3.9%;
  background:radial-gradient(50% 44% at 50% 42%,
    rgba(44,32,14,.40) 0%,rgba(44,32,14,.17) 48%,rgba(44,32,14,0) 78%);
  filter:blur(11px);
  opacity:calc(1 - var(--shade,0) * .5);
}
.sbk .sb-cast.hair{
  left:12%;right:12%;top:76.9%;bottom:5.5%;
  background:radial-gradient(50% 52% at 50% 40%,
    rgba(40,28,10,.34) 0%,rgba(40,28,10,0) 76%);
  filter:blur(4px);
  opacity:calc(1 - var(--shade,0) * .62);
}
.sbk .sb-full{position:absolute;inset:0}
.sbk .sb-full img{width:100%;height:auto;display:block}
.sbk .sb-half{position:absolute;top:0;bottom:0;width:50%;overflow-x:clip;overflow-y:visible}
.sbk .sb-half.left{left:0}
.sbk .sb-half.right{left:50%}
.sbk .sb-half-img{width:200%;max-width:none;height:auto;display:block}
.sbk .sb-half-img.right{margin-left:-100%}
/* the shadow the lifting leaf throws onto the page beneath it */
.sbk .gutter-shade{
  position:absolute;top:var(--pg,21.8%);bottom:var(--pg,21.8%);width:46%;
  pointer-events:none;opacity:calc(var(--shade,0) * .62);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5.2%,#000 94.8%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 5.2%,#000 94.8%,transparent 100%);
}
.sbk .gutter-shade.left{right:0;background:linear-gradient(270deg,rgba(52,38,20,.30),rgba(52,38,20,0) 82%)}
.sbk .gutter-shade.right{left:0;background:linear-gradient(90deg,rgba(52,38,20,.24),rgba(52,38,20,0) 82%)}

/* ---- the turning leaf: nested strips forming a curved surface ---- */
.sbk .curl{
  position:absolute;top:0;height:100%;
  width:calc(var(--bw,0px) * var(--span));
  transform-style:preserve-3d;z-index:6;
}
.sbk .curl.next{left:50%;transform-origin:left center;transform:rotateY(calc(-1 * var(--tt,0deg)))}
.sbk .curl.prev{right:50%;transform-origin:right center;transform:rotateY(var(--tt,0deg))}
.sbk .strip{
  position:absolute;top:0;height:100%;
  width:calc(var(--bw,0px) * var(--span) / var(--n));
  transform-style:preserve-3d;
}
.sbk .curl.next .strip{transform-origin:left center}
.sbk .curl.prev .strip{transform-origin:right center}
.sbk .curl.next>.strip{left:0}
.sbk .curl.prev>.strip{right:0;left:auto}
.sbk .curl.next .strip .strip{left:100%;transform:rotateY(var(--td,0deg))}
.sbk .curl.prev .strip .strip{right:100%;transform:rotateY(calc(-1 * var(--td,0deg)))}
.sbk .face{
  position:absolute;top:0;bottom:0;left:0;right:-1.1px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-repeat:no-repeat;background-size:var(--bw,0px) auto;
}
.sbk .face.back{transform:rotateY(180deg)}
.sbk .face .sh,.sbk .face .gl{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5.2%,#000 94.8%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 5.2%,#000 94.8%,transparent 100%);
}
.sbk .strip.edge .face .sh,.sbk .strip.edge .face .gl{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%),var(--hf);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%),var(--hf);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.sbk .curl.next .strip.edge .face.front,.sbk .curl.prev .strip.edge .face.back{
  --hf:linear-gradient(90deg,#000 0 22%,transparent 96%);
}
.sbk .curl.next .strip.edge .face.back,.sbk .curl.prev .strip.edge .face.front{
  --hf:linear-gradient(270deg,#000 0 22%,transparent 96%);
}
.sbk .face .sh{position:absolute;left:0;right:0;top:var(--pg,21.8%);bottom:var(--pg,21.8%);pointer-events:none}
.sbk .curl.next .face.front .sh,.sbk .curl.prev .face.back .sh{
  background:linear-gradient(90deg,rgba(58,43,20,var(--a1,0)),rgba(58,43,20,var(--a2,0)));
}
.sbk .curl.next .face.back .sh,.sbk .curl.prev .face.front .sh{
  background:linear-gradient(90deg,rgba(58,43,20,var(--a2,0)),rgba(58,43,20,var(--a1,0)));
}
.sbk .face .gl{
  position:absolute;left:0;right:0;top:var(--pg,21.8%);bottom:var(--pg,21.8%);
  pointer-events:none;background:#fffaf0;
  opacity:calc(var(--shade,0) * var(--lit,1) * var(--lit,1) * .20);
}

/* ---- controls ---- */
.sbk .sb-tools{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--hairline);border-radius:999px;
  padding:5px 7px;background:transparent;
}
.sbk .tool{
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:transparent;color:var(--ink-soft);
  cursor:pointer;transition:background-color .18s ease,color .18s ease;
}
.sbk .tool:hover{background:rgba(255,252,244,.9);color:var(--ink)}
.sbk .tool[aria-pressed="true"]{background:rgba(154,106,62,.16);color:var(--earth)}
.sbk .tool:disabled{opacity:.32;cursor:default;background:transparent}
.sbk .tool svg{width:15px;height:15px;display:block}
.sbk .tool-sep{width:1px;height:17px;background:var(--hairline);margin:0 2px}
.sbk .zoom-read{
  font-size:var(--fs-read);letter-spacing:.1em;color:var(--ink-faint);
  min-width:40px;text-align:center;font-variant-numeric:tabular-nums;
}

/* ---------------- the live windows on the film leaf ----------------
   The plate draws a perforated white card with a dark well in it and, under
   the note, a disc with the call traced out beside it. These are what goes
   into those two holes: a real <video> and a real play control, positioned
   in the plate's own coordinates (js/sketchbook-plate.js exports them) so
   they sit exactly inside the drawn frame at any size the book is drawn at.
   A hair of Z puts them in front of the leaf they lie on rather than fighting
   it for the same plane. */
.sbk .sbk-film{
  position:absolute;z-index:70;transform:translateZ(1px);
  background:#221e18;overflow:hidden;display:flex;
}
.sbk .sbk-film video{width:100%;height:100%;display:block;object-fit:contain;background:#221e18}
.sbk .sbk-filmplay{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:0;background:transparent;cursor:pointer;color:rgba(250,246,238,.88);
  font-family:var(--font);font-size:clamp(var(--fs-read),1.05vw,16px);letter-spacing:.04em;
  transition:color .2s ease,background-color .2s ease;
}
.sbk .sbk-filmplay svg{
  width:clamp(44px,4.4vw,64px);height:clamp(44px,4.4vw,64px);fill:currentColor;
  border:1.5px solid currentColor;border-radius:50%;padding:clamp(9px,.9vw,13px);
  box-sizing:content-box;transition:transform .2s ease;
}
.sbk .sbk-filmplay:hover{color:#fffaf0;background:rgba(255,250,240,.06)}
.sbk .sbk-filmplay:hover svg{transform:scale(1.06)}
.sbk .sbk-voiceplay{
  position:absolute;z-index:70;transform:translateZ(1px);
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:transparent;cursor:pointer;
  color:var(--earth);-webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease,color .2s ease;
}
.sbk .sbk-voiceplay svg{width:44%;height:44%;fill:currentColor}
.sbk .sbk-voiceplay:hover{background:rgba(154,106,62,.14);color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .sbk .sbk-filmplay,.sbk .sbk-filmplay svg,.sbk .sbk-voiceplay{transition:none}
}

.sbk .sb-zone{position:absolute;top:0;bottom:0;border:0;background:transparent;cursor:grab;z-index:60;-webkit-tap-highlight-color:transparent}
.sbk .sb-zone:active{cursor:grabbing}
.sbk .sb-prev{left:0;width:50%}
.sbk .sb-next{right:0;width:50%}

/* The strip is the caption and the table of contents at once: the leaf you
   are on is the one marked, and every other one is a place you can go. */
/* The strip is the desk's first line, so it takes the desk's measure: leaf
   names start at the left edge everything below them will use, and the zoom
   pill pins to the right edge. css/detail.css defines --dsr-w. */
.sbk .sb-bar{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:24px;
  width:var(--dsr-w,100%);margin-inline:auto;padding-inline:0;
  margin-bottom:clamp(18px,2.4vh,30px);
}
.sbk .sb-strip{
  display:flex;align-items:baseline;gap:2px;list-style:none;margin:0;padding:0;
  flex-wrap:wrap;justify-content:flex-start;row-gap:2px;
}
.sbk .sb-strip .plate{
  display:inline-flex;align-items:baseline;gap:7px;
  border:0;background:transparent;cursor:pointer;color:var(--ink-soft);
  padding:7px 11px;border-radius:999px;
  font-family:var(--font);font-size:14px;letter-spacing:.02em;
  transition:color .18s ease,background-color .18s ease;
}
.sbk .sb-strip .plate .n{font-size:var(--fs-min);letter-spacing:.1em;opacity:.75;font-variant-numeric:tabular-nums}
.sbk .sb-strip .plate:hover{color:var(--ink);background:rgba(255,252,244,.7)}
.sbk .sb-strip .plate[aria-current="true"]{
  color:var(--ink);background:rgba(255,252,244,.92);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.sbk .sb-strip .plate[aria-current="true"] .n{color:var(--earth);opacity:1}

.sbk .sb-wrap.intro .sb-full img,.sbk .sb-wrap.intro .sb-half-img{filter:url(#sbk-mblur-1)}
.sbk .sb-wrap.intro.b2 .sb-full img,.sbk .sb-wrap.intro.b2 .sb-half-img{filter:url(#sbk-mblur-2)}
.sbk .sb-wrap.intro .sb-caption{animation:none}
.sbk .sb-wrap.intro .sb-caption.cap-out{display:none}

/* ---------------- the transcript panel ---------------- */
.sbk .sbk-transcript{max-width:1060px;margin:0 auto}
.sbk .sbk-transcript > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-read);letter-spacing:.04em;color:var(--ink);
  border:1px solid rgba(43,39,33,.22);border-radius:999px;padding:9px 18px;
  background:rgba(255,252,246,.9);transition:color .2s ease,background-color .2s ease;
}
.sbk .sbk-transcript > summary::-webkit-details-marker{display:none}
.sbk .sbk-transcript > summary:before{content:"+";font-size:15px;line-height:1;color:var(--ink-faint)}
.sbk .sbk-transcript[open] > summary:before{content:"\2212"}
.sbk .sbk-transcript > summary:hover{color:var(--ink);background:rgba(255,252,244,.92)}
/* inside the panel the page's own markup takes back its own styling */
/* Inside the panel the record is the page's own markup again, so it takes
   back the page's own body face rather than inheriting the book's serif. */
.sbk .sbk-transcript #sdRecord,.sbk .sbk-transcript #pdRecord{
  padding:26px 0 0;max-width:none;
  font-family:var(--font-body);color:var(--color-text);
}

@media (prefers-reduced-motion:reduce){
  .sbk .sb-caption{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   The page as paper.

   The book's ground is now the whole detail page, so the band is not a warm
   rectangle sitting on a cool one — everything from the nav down to the
   footer's rounded shoulders is the same desk. That means retuning the
   surfaces, not just the background: the design system's greys and tints are
   mixed toward green, and left alone on cream they go muddy.

   Two deliberate departures from the system:
   • cards and inputs are LIGHTER than the page here, not darker. On a paper
     ground a panel reads as a fresh slip laid on the desk, and it buys back
     the contrast headroom the darker cream would have cost.
   • the secondary-text step is darker than the system's. At #798172 it was
     3.3:1 on this ground (it is only 3.8:1 on the green one, so it never
     passed AA); at #6b7060 it is 4.6:1 on a card. On the bare desk it reaches
     4.1:1 — better than today, still short of AA, and closing that last gap
     would flatten this step into the one below it.

   Only the grounds and the tints move. The ink stays the brand's green-black,
   because dark green on warm paper is what the book itself is doing.
   ══════════════════════════════════════════════════════════════════════ */
body[data-page="species-detail"],
body[data-page="product-detail"]{
  --color-bg:#ece7dc;              /* the same value as .sbk's --paper */
  --color-surface:#f6f2e9;
  --color-neutral-100:#f2ece0;
  --color-neutral-200:#e4dccc;
  --color-neutral-300:#cfc6b1;
  --color-neutral-400:#b3a992;
  --color-neutral-500:#8d8873;
  --color-neutral-600:#6b7060;
  --color-divider:color-mix(in srgb, #3a342a 16%, transparent);
  --color-accent-100:#e9f1de;
  --color-accent-2-100:#edf0dc;
}
/* the search pill and the cart panel are surfaces too, and the nav sits above
   the paper rather than on it */
body[data-page="species-detail"] .card,
body[data-page="product-detail"] .card{box-shadow:0 1px 2px rgba(58,44,26,.10),0 6px 18px rgba(58,44,26,.07)}