/* ===========================================================
   MiniBoo · Field Notes · Sightings  (prototype, 8.10.2026)
   A naturalist's field journal lying on a sage desk. Every section
   is a page of that journal: running head, folio, ink rules, tape,
   photo corners, stamps and hand-ticked checkmarks. Type and header
   come from mini-boo.com (Newsreader + Manrope, the glass pill nav);
   the journal adds one voice of its own: typed specimen labels.
   No black anywhere: ink is warm brown, buttons are caramel.
   =========================================================== */

:root{
  --desk:#a9b69b; --desk-hi:#c6cfba; --desk-lo:#9aa88c;
  --paper:#f4ecdd; --mat:#fbf7ef; --kraft:#c9a77f; --kraft-lo:#b48d63;
  --ink:#3d362f; --ink-2:#5b5046; --ink-3:#7c7164;
  --caramel:#8a5f3f; --caramel-hi:#a2734f; --stamp:#9c6b47;
  --rule:rgba(138,95,63,.36); --hair:rgba(61,54,47,.16);
  --cover:#76846b; --foil:#ead4ae;
  --display:"Newsreader",ui-serif,Georgia,serif;
  --body:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --type:"Courier Prime","American Typewriter",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.7,.2,1); --ease-soft:cubic-bezier(.32,.72,0,1);
  --page-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 34px 60px -34px rgba(61,54,47,.62),0 6px 14px -8px rgba(61,54,47,.32);
  --gap:clamp(14px,4vw,56px);
  --sheet:min(1180px,calc(100vw - 2 * var(--gap)));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(1500px 1100px at 50% -8%,var(--desk-hi),rgba(198,207,186,0) 72%),var(--desk)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,h4,dl,dd,figure{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--caramel);outline-offset:3px;border-radius:6px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ============ site header (ported from mini-boo.com, same markup) ============ */
.skip{position:fixed;left:-999px;top:10px;z-index:300;background:var(--caramel);color:#fdfaf4;padding:.6em 1em;border-radius:10px;font-weight:600}
.skip:focus{left:12px}
.nav{position:fixed;z-index:120;top:14px;left:50%;transform:translateX(-50%);width:min(1200px,calc(100vw - 28px));height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 12px 8px 22px;border-radius:999px;
  border:1px solid rgba(255,255,255,.55);background:rgba(250,246,238,.62);
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 14px 40px -26px rgba(94,72,52,.55);transition:background .4s var(--ease)}
.nav.scrolled{background:rgba(250,246,238,.88)}
.brand img{height:46px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:12px}
.nav-links a:not(.btn){font-weight:500;font-size:.9rem;color:var(--ink);padding:.5em .8em;border-radius:999px;transition:.25s}
.nav-links a:not(.btn):hover,.nav-links a.current{background:rgba(255,255,255,.65);color:var(--caramel)}
/* the site's menu has no room for a 7th item between 901 and 1179 px: there the item waits (same rule on every page) */
@media (min-width:901px) and (max-width:1179px){.nav-links a.nav-fg{display:none}}
.nav .btn{padding:.78em 1.3em;font-size:.9rem}
.langsel{position:relative;margin-left:6px}
.langsel .lang{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hair);border-radius:999px;padding:.44em .8em;
  font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--ink);background:transparent;cursor:pointer;transition:.25s}
.langsel .lang svg{width:14px;height:14px}
.langsel .lang:hover{background:rgba(255,255,255,.65);color:var(--caramel)}
.langmenu{position:absolute;top:calc(100% + 10px);right:0;min-width:168px;background:rgba(250,246,238,.97);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.85);border-radius:16px;
  box-shadow:0 22px 60px -28px rgba(94,72,52,.45);padding:7px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.langsel.open .langmenu{opacity:1;visibility:visible;transform:none}
.langmenu a{display:block;padding:.55em .85em;border-radius:10px;font-size:.92rem;font-weight:500;color:var(--ink)}
.langmenu a:hover{background:rgba(255,255,255,.8);color:var(--caramel)}
.langmenu a[aria-current]{color:var(--caramel);font-weight:600;background:rgba(162,115,79,.1)}
a.cartbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--hair);border-radius:999px;color:var(--ink);margin:0 6px;transition:.25s}
a.cartbtn svg{width:18px;height:18px}
a.cartbtn:hover{background:rgba(255,255,255,.65)}
.fab,.cartbtn-m{display:none;position:fixed;top:14px;z-index:130;width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 14px 32px -12px rgba(94,72,52,.55),inset 0 1px 0 rgba(255,255,255,.9);align-items:center;justify-content:center;cursor:pointer}
.fab{right:14px}
.cartbtn-m{right:78px;color:var(--ink)}
.cartbtn-m svg{width:21px;height:21px}
.fab span{position:relative;display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
.fab span::before,.fab span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px}
.fab span::before{top:-6px}.fab span::after{top:6px}
.brand-m{display:none;position:absolute;top:22px;left:20px;z-index:20}
.brand-m img{height:30px;width:auto}
.mmenu{position:fixed;inset:0;z-index:125;background:rgba(250,246,238,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:grid;place-content:center;gap:14px;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),visibility .4s}
.mmenu.open{opacity:1;visibility:visible;pointer-events:auto}
.mmenu a{font-family:var(--display);font-size:2rem;font-weight:460;color:var(--ink)}
.mmenu a.btn{font-family:var(--body);font-size:.95rem;font-weight:600;color:#fdfaf4;justify-self:center;margin-top:12px;min-height:44px}
.mlang{display:flex;gap:16px;justify-content:center;margin-top:4px}
.mlang a{font-family:var(--body);font-size:1rem;font-weight:600;letter-spacing:.06em;color:var(--ink-2)}
.mlang a[aria-current]{color:var(--caramel)}

/* buttons: caramel pill with ivory text (never black), ghost pill for the quieter action */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;cursor:pointer;font-family:var(--body);font-weight:600;font-size:.96rem;
  padding:.95em 1.55em;border-radius:999px;border:0;line-height:1;white-space:nowrap;
  transition:transform .4s var(--ease-soft),box-shadow .4s var(--ease-soft),background .3s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--caramel);color:#fdfaf4;box-shadow:0 16px 34px -16px rgba(138,95,63,.85)}
.btn-primary:hover{transform:translateY(-2px);background:#7d5537}
.btn-ghost{background:rgba(251,247,239,.55);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(138,95,63,.42)}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(251,247,239,.9)}
.btn .play{width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;background:var(--caramel);color:#fdfaf4;margin-left:-.35em}
.btn .play svg{width:.72em;height:.72em;margin-left:.1em}
.btn small{font-weight:500;color:var(--ink-2);font-size:.84em}

/* ============ the journal page ============ */
.pg{position:relative;background:var(--paper) url(tex/paper.jpg) 0 0/640px;color:var(--ink);border-radius:6px 12px 12px 6px;box-shadow:var(--page-shadow)}
.sheet{width:var(--sheet);margin:0 auto var(--gap);padding:clamp(22px,4.2vw,64px) clamp(18px,4.6vw,70px) clamp(52px,6vw,78px)}
.rh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:11px;margin-bottom:clamp(20px,3.2vw,34px);border-bottom:1.5px solid var(--rule)}
.rh b{font:500 .72rem/1.25 var(--display);letter-spacing:.26em;text-transform:uppercase;color:var(--caramel)}
.rh i{font:italic 400 .98rem/1.2 var(--display);color:var(--ink-2);text-align:right}
.folio{position:absolute;left:0;right:0;bottom:18px;text-align:center;font:italic 400 .86rem/1 var(--display);color:var(--ink-3)}
.h2{font-family:var(--display);font-weight:440;font-size:clamp(2rem,4.1vw,3.3rem);line-height:1.05;letter-spacing:-.018em;text-wrap:balance;max-width:20ch}
.lead{font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.68;color:var(--ink-2);max-width:56ch}
.typed{font-family:var(--type);font-size:.9rem;line-height:1.55;color:var(--ink)}
.typed b{font-weight:400;color:var(--caramel)}

/* photo mat with kraft photo corners (the V30 plate) */
.mat{position:relative;background:var(--mat);padding:10px;box-shadow:0 0 0 1px rgba(61,54,47,.22),0 18px 26px -18px rgba(61,54,47,.55)}
.mat img{width:100%;height:100%;object-fit:cover;display:block;background:#efe2d3}
.mat .k{position:absolute;width:0;height:0;border:16px solid transparent;filter:drop-shadow(0 1px 1px rgba(61,54,47,.25))}
.mat .k1{left:-5px;top:-5px;border-top-color:var(--kraft);border-left-color:var(--kraft)}
.mat .k2{right:-5px;top:-5px;border-top-color:var(--kraft);border-right-color:var(--kraft)}
.mat .k3{left:-5px;bottom:-5px;border-bottom-color:var(--kraft);border-left-color:var(--kraft)}
.mat .k4{right:-5px;bottom:-5px;border-bottom-color:var(--kraft);border-right-color:var(--kraft)}
/* washi tape */
.tape{position:absolute;height:26px;width:118px;background:rgba(201,167,127,.62);
  box-shadow:0 1px 2px rgba(61,54,47,.12);mix-blend-mode:multiply;
  clip-path:polygon(0 8%,5% 0,10% 9%,15% 1%,20% 8%,80% 6%,85% 0,90% 8%,95% 1%,100% 7%,100% 93%,95% 100%,90% 92%,85% 99%,80% 93%,20% 94%,15% 100%,10% 91%,5% 99%,0 92%)}

/* rubber stamp: live text (localisable) pressed through a wear mask */
.stamp{position:absolute;display:inline-grid;place-items:center;padding:.38em .8em .32em;border:3px solid currentColor;border-radius:9px;
  outline:1.5px solid currentColor;outline-offset:-8px;color:var(--stamp);font:800 1.32rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(-10deg);pointer-events:none;opacity:.9;
  -webkit-mask-image:url(tex/wear.png);mask-image:url(tex/wear.png);-webkit-mask-size:150px;mask-size:150px}

/* hand-drawn tick in an ink circle */
.tk{width:100%;height:100%;overflow:visible;fill:none;stroke:var(--caramel);stroke-linecap:round;stroke-linejoin:round}
.tk .c{stroke-width:1.6;opacity:.85}
.tk .t{stroke-width:2.6}

/* ============ HERO: the journal opens ============ */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:98px var(--gap) 34px;overflow:hidden}
.book{position:relative;width:var(--sheet)}
.book-in{position:relative;perspective:2600px;perspective-origin:50% 40%}
.spread{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:min(760px,calc(100svh - 136px))}
.spread .pg{display:flex;flex-direction:column;padding:clamp(22px,2.8vw,36px) clamp(22px,3vw,44px) 52px}
.pg-l{border-radius:12px 3px 3px 12px}
.pg-r{border-radius:3px 12px 12px 3px}
.pg-l::after,.pg-r::after{content:"";position:absolute;top:0;bottom:0;width:9%;pointer-events:none}
.pg-l::after{right:0;background:linear-gradient(to left,rgba(96,70,46,.17),rgba(96,70,46,0))}
.pg-r::after{left:0;background:linear-gradient(to right,rgba(96,70,46,.2),rgba(96,70,46,0) )}
.spread::before{content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:2px;margin-left:-1px;background:rgba(96,70,46,.22);z-index:2;pointer-events:none}
/* stacked page edges under the spread */
.spread::after{content:"";position:absolute;left:5px;right:5px;bottom:-6px;height:12px;z-index:-1;border-radius:0 0 12px 12px;
  background:repeating-linear-gradient(180deg,#efe5d3 0 2px,#ddcfb7 2px 3px);box-shadow:0 12px 24px -12px rgba(61,54,47,.5)}

/* left page: the title page */
.title-page{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.compass{width:clamp(50px,4.6vw,64px);height:auto;margin:clamp(0px,1vh,12px) auto clamp(8px,1.6vh,16px);overflow:visible;
  fill:none;stroke:var(--caramel);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.compass .n{fill:var(--caramel);stroke:none;font:600 11px/1 var(--display)}
.kicker{display:block;font:500 clamp(.8rem,1.05vw,.92rem)/1.2 var(--display);letter-spacing:.32em;text-transform:uppercase;color:var(--caramel)}
.h1{margin:0;font-weight:inherit}
.h1-main{display:block;margin-top:.2em;font:italic 420 clamp(3rem,5.4vw,5rem)/.98 var(--display);letter-spacing:-.02em;color:var(--ink)}
.h1-main span{display:block}
.dbl{width:min(300px,70%);height:8px;margin:clamp(14px,2.2vh,22px) auto clamp(10px,1.6vh,14px);border-top:1.5px solid rgba(138,95,63,.62);border-bottom:1.5px solid rgba(138,95,63,.62)}
.vol{font:italic 400 1.05rem/1.4 var(--display);color:var(--ink-2)}
.intro{margin:clamp(10px,1.6vh,16px) auto 0;max-width:46ch;font-size:clamp(.96rem,1.08vw,1.04rem);line-height:1.64;color:var(--ink-2)}
.ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(16px,2.6vh,26px)}
.ctas .btn{padding:.9em 1.3em;font-size:.93rem}
.tally{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:14px;justify-content:center}
.tally-l{font:italic 400 .95rem/1.2 var(--display);color:var(--ink-2);white-space:nowrap}
.tally-l b{font:600 1.05rem/1 var(--display);font-style:normal;color:var(--caramel);margin-left:.2em}
.tally ol{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.tally li{width:19px;height:19px}

/* right page: Plate I */
.plate1{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.p1-photo{position:relative;height:clamp(240px,45vh,430px);aspect-ratio:4/5;transform:rotate(-1.4deg);margin-top:clamp(0px,1vh,10px)}
.p1-photo .mat{height:100%}
.p1-photo .stamp{right:-30px;bottom:24px;font-size:1.45rem}
.p1-label{position:relative;margin-top:clamp(16px,2.4vh,24px);text-align:center;width:100%}
.latin,.loupe-txt{font:italic 430 clamp(1.7rem,2.6vw,2.25rem)/1.15 var(--display);letter-spacing:-.005em;color:var(--ink);white-space:nowrap}
.latin{position:relative;display:inline-block}
.common{display:block;margin-top:.5em;font:500 .74rem/1.2 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--caramel)}
.p1-fields div{white-space:nowrap}
.p1-fields{display:grid;width:max-content;margin:12px auto 0;gap:1px;text-align:left}
.p1-shop{display:table;margin:14px auto 0;font-weight:600;font-size:.9rem;color:var(--caramel);border-bottom:1.5px solid rgba(138,95,63,.38);padding-bottom:2px;transition:border-color .3s}
.p1-shop:hover{border-color:var(--caramel)}

/* the loupe (decorative; the real name is plain text underneath) */
.loupe{position:absolute;left:0;top:0;width:var(--lr2,112px);height:var(--lr2,112px);z-index:6;pointer-events:none;visibility:hidden}
.loupe-ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg,#c79c6c,#f0d6ad 18%,#a77a4e 36%,#8a5f3f 52%,#d6b083 70%,#9b6f48 86%,#c79c6c);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));
  filter:drop-shadow(0 12px 14px rgba(61,54,47,.45))}
.loupe-glass{position:absolute;inset:7px;border-radius:50%;overflow:hidden;background:rgba(236,244,240,.12);
  box-shadow:inset 0 0 0 1px rgba(61,54,47,.35),inset 0 6px 14px rgba(61,54,47,.18)}
.loupe-paper{position:absolute;inset:0;background:var(--paper) url(tex/paper.jpg) 0 0/640px}
.loupe.parked{visibility:visible}
.loupe.parked .loupe-paper,.loupe.parked .loupe-txt{opacity:0}
.loupe-glass::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(60% 45% at 32% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),radial-gradient(90% 90% at 50% 50%,rgba(255,255,255,0) 62%,rgba(120,98,72,.18))}
.loupe-txt{position:absolute;left:0;top:0;transform-origin:0 0;white-space:nowrap}
.loupe-handle{position:absolute;width:22px;height:86px;left:calc(50% - 11px);top:calc(100% - 6px);transform-origin:50% -50px;transform:rotate(-38deg);
  border-radius:8px 8px 11px 11px;background:linear-gradient(90deg,#6e4a30,#9c6c45 45%,#7a5134);box-shadow:0 14px 20px -12px rgba(61,54,47,.6)}
.loupe-handle::before{content:"";position:absolute;left:-3px;right:-3px;top:-4px;height:14px;border-radius:4px;background:linear-gradient(90deg,#b38552,#ecd0a4 45%,#a77a4e)}

/* the closed cover (decorative, sits over the right page and hinges at the spine) */
.cover{position:absolute;top:0;bottom:0;left:50%;width:50%;z-index:8;transform-origin:0 50%;transform-style:preserve-3d;pointer-events:none;display:none}
.cv{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cv-front{border-radius:4px 14px 14px 4px;background:var(--cover) url(tex/linen.jpg) 0 0/360px;
  box-shadow:inset 7px 0 10px -6px rgba(40,46,34,.45),inset 0 0 0 1px rgba(255,255,255,.06),0 30px 50px -28px rgba(46,52,40,.75),0 4px 10px -4px rgba(46,52,40,.45)}
.cv-back{transform:rotateY(180deg);border-radius:14px 4px 4px 14px;background:var(--paper) url(tex/paper.jpg) 0 0/640px}
.cv-shade{position:absolute;inset:0;border-radius:inherit;background:rgba(40,36,30,1);opacity:0}
.cv-front .cv-shade{background:linear-gradient(90deg,rgba(30,34,26,.7),rgba(30,34,26,.25))}
.cv-back .cv-shade{background:linear-gradient(270deg,rgba(96,70,46,.45),rgba(96,70,46,.12))}
.cv-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4vh,26px);padding:9% 10%}
.cv-top{font:600 clamp(.72rem,1vw,.86rem)/1 var(--display);letter-spacing:.42em;text-transform:uppercase;color:var(--foil);text-shadow:0 1px 0 rgba(40,46,34,.35)}
.cv-label{position:relative;width:min(78%,330px);padding:clamp(18px,2.6vh,28px) 16px clamp(16px,2.4vh,24px);text-align:center;color:var(--ink);
  background:#efe5d1 url(tex/paper.jpg) 0 0/400px;border-radius:3px;box-shadow:0 2px 3px rgba(40,46,34,.35),0 10px 18px -12px rgba(40,46,34,.6)}
.cv-label::before{content:"";position:absolute;inset:6px;border:1.5px solid rgba(138,95,63,.55);outline:1px solid rgba(138,95,63,.35);outline-offset:-5px;border-radius:2px;pointer-events:none}
.cv-l1{display:block;font:500 .7rem/1.2 var(--display);letter-spacing:.32em;text-transform:uppercase;color:var(--caramel)}
.cv-l2{display:block;margin:.28em 0 .18em;font:italic 430 clamp(1.9rem,3vw,2.6rem)/1 var(--display);color:var(--ink)}
.cv-l3{display:block;font:italic 400 .98rem/1.3 var(--display);color:var(--ink-2)}
.cv-logo{width:min(46%,190px);aspect-ratio:960/252;background:linear-gradient(100deg,#d8bb8e,#f6e6c6 40%,#cfae7f 62%,#efdcb8);
  -webkit-mask:url(tex/logo-mask.png) center/contain no-repeat;mask:url(tex/logo-mask.png) center/contain no-repeat;opacity:.95}
.band{position:absolute;top:-2px;bottom:-2px;right:13%;width:13px;border-radius:3px;background:linear-gradient(90deg,#6b4a32,#8a5f3f 50%,#6b4a32);
  box-shadow:0 0 0 1px rgba(40,30,20,.15),2px 0 6px rgba(30,20,12,.35)}

/* intro choreography: html.fn-pending is set before first paint by an inline script;
   fn.js takes over with Web Animations, and a failsafe reveals everything if it never does */
html.fn-pending .cover{display:block}
html.fn-pending .book{transform:translateX(-25%)}
html.fn-pending .book-in,html.fn-pending .pg-l{opacity:0}
html.fn-pending .loupe{visibility:hidden}
html.fn-pending .p1-label>*,html.fn-pending .p1-photo .stamp{opacity:0}
html.fn-pending .tally li,html.fn-pending .title-page>*{opacity:0}
html.fn-playing .cover{display:block}
html.fn-playing .loupe{visibility:visible}
html.fn-pending .spread::after,html.fn-playing .spread::after{opacity:0}
.spread::after{transition:opacity .5s var(--ease)}

/* ============ catalogue ============ */
.cat-head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,60px);align-items:end}
.cat-head .lead{margin-top:0}
.legend{display:flex;align-items:center;gap:12px;margin-top:18px;font:italic 400 .98rem/1.3 var(--display);color:var(--ink-2)}
.legend .tkw{width:30px;height:30px;flex:0 0 auto}
.chapter .rh{margin-bottom:clamp(16px,2.6vw,26px)}
.ch-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px clamp(20px,3vw,40px);margin-bottom:clamp(22px,3.2vw,38px)}
.ch-title{font:italic 430 clamp(1.9rem,3.4vw,2.7rem)/1.05 var(--display);letter-spacing:-.012em;white-space:nowrap}
/* the chapter one-liner: written in by ink, punchline underlined in pencil, a margin N.B. (once per visit) */
.ch-note{position:relative;max-width:52ch;margin:0;font:italic 400 clamp(1.18rem,1.72vw,1.56rem)/1.48 var(--display);color:var(--ink);
  border-left:1.5px solid var(--rule);padding:2px 0 2px clamp(16px,2vw,26px)}
.ch-punch{padding-bottom:.12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8.6C64 6.1 122 9.9 186 7.3S318 6.2 397 8.1' fill='none' stroke='%236f6254' stroke-width='2.3' stroke-linecap='round' opacity='.82' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9 10.8C98 9 214 11.4 392 9.7' fill='none' stroke='%236f6254' stroke-width='1.1' stroke-linecap='round' opacity='.45' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 100%/100% .46em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ch-note .w{display:inline}
.nb{position:absolute;left:-46px;top:-30px;width:62px;height:42px;display:grid;place-items:center;transform:rotate(-9deg);pointer-events:none;
  font:italic 600 1rem/1 var(--display);color:var(--caramel);letter-spacing:.02em}
.nb svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--caramel);stroke-width:1.5;stroke-linecap:round;opacity:.85}
.nb span{position:relative;top:1px}
html.js .ch-note.armed .w{opacity:0}
html.js .ch-note.armed .ch-punch{background-size:0% .46em}
html.js .ch-note.armed .nb{opacity:0}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.8vw,40px) clamp(18px,2.4vw,34px)}
.sp{position:relative;display:flex;flex-direction:column;padding:16px 16px 18px;background:rgba(251,247,239,.5);border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(138,95,63,.14)}
.sp-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.sp-no{font:500 .68rem/1 var(--display);letter-spacing:.28em;text-transform:uppercase;color:var(--caramel)}
.sp-fam{font:italic 400 .86rem/1 var(--display);color:var(--ink-2)}
.sp-photo{position:relative;aspect-ratio:4/5}
.sp-photo .mat{height:100%;transform:rotate(var(--r,-.8deg))}
.sp-photo .stamp{right:-6px;bottom:18px;font-size:1.08rem;opacity:0;transform:rotate(-12deg) scale(1.6)}
.sp.is-spotted .sp-photo .stamp{animation:fn-stamp .32s cubic-bezier(.55,.06,.68,.19) forwards}
.sp-name{margin-top:18px}
.sp-latin{font:italic 430 clamp(1.32rem,1.75vw,1.6rem)/1.15 var(--display);letter-spacing:-.005em;color:var(--ink)}
.sp-common{display:block;margin-top:.45em;font:500 .72rem/1.2 var(--display);letter-spacing:.28em;text-transform:uppercase;color:var(--caramel)}
.sp-fields{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(138,95,63,.35);display:grid;gap:2px;font-family:var(--type);font-size:.86rem;line-height:1.5}
.sp-fields div{display:grid;grid-template-columns:5.6em 1fr;gap:6px}
.sp-fields dt{color:var(--caramel)}
.sp-fields dd{margin:0}
.sp-note{margin-top:12px;font:italic 400 1.04rem/1.45 var(--display);color:var(--ink-2)}
.sp-act{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.spot{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:.86rem;font-weight:600;color:var(--ink-2);user-select:none;-webkit-tap-highlight-color:transparent;min-height:44px}
.spot input{position:absolute;opacity:0;width:1px;height:1px}
.spot .tkw{position:relative;width:30px;height:30px;flex:0 0 auto}
.spot .tk .t{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .38s var(--ease) .05s}
.spot input:checked+.tkw .tk .t{stroke-dashoffset:0}
.spot input:focus-visible+.tkw{outline:2.5px solid var(--caramel);outline-offset:3px;border-radius:50%}
.spot input:checked~.spot-t{color:var(--caramel)}
.sp-shop{display:inline-flex;align-items:center;min-height:40px;padding:.62em 1.1em;border-radius:999px;font-size:.86rem;font-weight:600;
  background:var(--caramel);color:#fdfaf4;box-shadow:0 12px 24px -14px rgba(138,95,63,.9);transition:transform .35s var(--ease-soft),background .3s}
.sp-shop:hover{transform:translateY(-2px);background:#7d5537}
@keyframes fn-stamp{0%{opacity:0;transform:rotate(-16deg) scale(1.7)}100%{opacity:.9;transform:rotate(-12deg) scale(1)}}


/* koala comparison: two magnified faces */
.compare,.keycard{position:relative;display:flex;flex-direction:column;gap:14px;padding:34px 24px 26px;border-radius:3px;align-self:start;
  background:#fbf6ea url(tex/paper.jpg) 0 0/640px;transform:rotate(-.7deg);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 30px -18px rgba(61,54,47,.55)}
.compare .tape,.keycard .tape{top:-12px;left:calc(50% - 59px);transform:rotate(-2.5deg)}
.compare h4,.keycard h4{font:italic 430 1.55rem/1.15 var(--display)}
.compare p,.keycard p{color:var(--ink-2);line-height:1.6}
.zooms{display:flex;gap:clamp(18px,2vw,28px);justify-content:center;margin-top:8px}
.zoom{display:flex;flex-direction:column;align-items:center;gap:14px;font:italic 400 1rem/1.2 var(--display);color:var(--ink-2)}
.zoom i{position:relative;display:block;overflow:hidden;width:clamp(108px,9.4vw,128px);aspect-ratio:1;border-radius:50%;background:#efe2d3;
  box-shadow:0 0 0 6px #c79c6c,0 0 0 7px rgba(61,54,47,.25),0 14px 22px -12px rgba(61,54,47,.6)}
.zoom img{position:absolute;width:250%;max-width:none;height:auto;left:-75%;top:-44.6%}
.keycard{transform:rotate(.6deg)}
.keycard ol{list-style:none;margin:6px 0 0;padding:0;font-family:var(--type);font-size:.8rem;line-height:1.4}
.keycard li{display:grid;grid-template-columns:2.2em auto minmax(12px,1fr) auto;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid rgba(138,95,63,.16)}
.keycard li:nth-child(even){padding-bottom:10px}
.keycard .kn{color:var(--caramel)}
.keycard .kl{border-bottom:1.5px dotted rgba(61,54,47,.35);transform:translateY(-4px)}
.keycard .kd a{font:italic 500 1rem/1.2 var(--display);color:var(--caramel);border-bottom:1px solid rgba(138,95,63,.35)}
.keycard .kd a:hover{border-color:var(--caramel)}
.keycard .to{font-family:var(--type);color:var(--ink)}

/* the appendix specimen (washcloths) */
.sp.appx .sp-no{color:var(--ink-2)}

/* mobile carousel controls (hidden on desktop) */
.rail-ui{display:none}

/* ============ film ============ */
.film-sheet{display:grid;grid-template-columns:1fr minmax(0,.86fr);gap:clamp(24px,5vw,80px);align-items:center}
.film-copy .lead{margin-top:16px}
.film-copy .btn{margin-top:26px}
.credits{margin-top:22px;display:grid;gap:3px;max-width:400px;font-family:var(--type);font-size:.88rem}
.credits div{display:grid;grid-template-columns:auto minmax(16px,1fr) auto;align-items:baseline;gap:8px}
.credits div::before{content:"";grid-column:2;grid-row:1;border-bottom:1.5px dotted rgba(61,54,47,.32);transform:translateY(-4px)}
.credits dt{grid-column:1;grid-row:1;color:var(--caramel)}
.credits dd{grid-column:3;grid-row:1;margin:0;text-align:right}
.print{position:relative;justify-self:center;width:min(100%,400px);padding:14px 14px 56px;background:var(--mat);transform:rotate(2deg);
  box-shadow:0 0 0 1px rgba(61,54,47,.18),0 30px 44px -26px rgba(61,54,47,.65);cursor:pointer;border:0;display:block;text-align:left}
.print img{width:100%;aspect-ratio:4/5;object-fit:cover}
.print .tape{top:-12px;left:calc(50% - 59px);transform:rotate(-3deg)}
.print-cap{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:baseline;font:italic 400 1rem/1 var(--display);color:var(--ink-2)}
.print-cap b{font-family:var(--type);font-weight:400;font-style:normal;font-size:.86rem;color:var(--caramel)}
.print .playbtn{position:absolute;left:50%;top:calc(50% - 21px);transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:rgba(251,247,239,.42);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 18px 40px -16px rgba(61,54,47,.6),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .4s var(--ease-soft)}
.print .playbtn svg{width:30px;height:30px;margin-left:4px;fill:var(--caramel)}
.print:hover .playbtn{transform:translate(-50%,-50%) scale(1.07)}
dialog.film{padding:0;border:0;background:transparent;max-width:min(94vw,560px);width:100%;overflow:visible}
dialog.film::backdrop{background:rgba(52,58,46,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog.film video{width:100%;aspect-ratio:4/5;max-height:84vh;border-radius:14px;background:#e9dfd2;box-shadow:0 40px 90px -30px rgba(30,34,26,.8)}
dialog.film .x{position:absolute;top:-58px;right:0;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:rgba(250,246,238,.25);color:#fbf7ef;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
dialog.film .x svg{width:20px;height:20px}

/* ============ field log + Fig. 1 ============ */
.spread-flat{width:var(--sheet);margin:0 auto var(--gap);display:grid;grid-template-columns:1fr 1fr;position:relative}
.spread-flat::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(96,70,46,.22);z-index:2}
.spread-flat>.pg{padding:clamp(26px,3.6vw,52px) clamp(24px,3.6vw,54px) 70px}
.log{list-style:none;margin:26px 0 0;padding:0;position:relative}
.log::before{content:"";position:absolute;left:4.25em;top:.6em;bottom:.6em;width:1.5px;background:repeating-linear-gradient(180deg,var(--rule) 0 5px,transparent 5px 10px)}
.log li{display:grid;grid-template-columns:3.6em 1fr;gap:1.4em;padding:0 0 18px;position:relative}
.log time{font-family:var(--type);font-size:.95rem;color:var(--caramel);padding-top:.2em}
.spread-flat>.pg{display:flex;flex-direction:column}
.spread-flat .btn,.spread-flat .clear{align-self:flex-start}
.cond{margin-top:auto;align-self:flex-start;padding:14px 18px;border:1.5px dashed rgba(138,95,63,.45);border-radius:4px;transform:rotate(-.6deg);
  display:grid;gap:3px;font-family:var(--type);font-size:.86rem;background:rgba(251,247,239,.45)}
.cond div{display:grid;grid-template-columns:auto 1fr;gap:10px}
.cond dt{color:var(--caramel)}
.cond dd{margin:0}
.compass-end{display:block;margin:0 auto 14px}
.log li::before{content:"";position:absolute;left:calc(4.25em - 4px);top:.62em;width:9px;height:9px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1.5px var(--caramel)}
.log p{font:400 1.12rem/1.55 var(--display);color:var(--ink)}
.log p em{font-style:italic;color:var(--caramel)}
.fig{position:relative;margin:22px auto 0;width:min(100%,420px)}
.fig .mat{transform:rotate(.8deg)}
.fig .mat img{aspect-ratio:4/5}
.hot{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;display:grid;place-items:center;
  font:italic 600 .95rem/1 var(--display);color:#fdfaf4;background:var(--caramel);box-shadow:0 0 0 3px rgba(251,247,239,.85),0 6px 12px -4px rgba(61,54,47,.5)}
.figcap{margin-top:16px;text-align:center;font:italic 400 .98rem/1.4 var(--display);color:var(--ink-2)}
.key{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.key li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:.92rem;line-height:1.45;color:var(--ink-2)}
.key b{font:italic 600 1rem/1.3 var(--display);color:var(--caramel)}

/* ============ sightings checklist + gift note ============ */
.ledger{list-style:none;margin:22px 0 0;padding:0}
.ledger li{border-bottom:1px solid rgba(138,95,63,.2)}
.ledger label{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:14px;padding:8px 2px;cursor:pointer;min-height:48px;-webkit-tap-highlight-color:transparent}
.ledger input{position:absolute;opacity:0;width:1px;height:1px}
.ledger .tkw{width:28px;height:28px}
.ledger .tk .t{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .38s var(--ease) .05s}
.ledger input:checked+.tkw .tk .t{stroke-dashoffset:0}
.ledger input:focus-visible+.tkw{outline:2.5px solid var(--caramel);outline-offset:3px;border-radius:50%}
.lg-lat{font:italic 430 1.12rem/1.25 var(--display);color:var(--ink)}
.lg-com{font:500 .68rem/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--caramel);white-space:nowrap}
.tally2{margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.tally2 .n{font:430 2.6rem/1 var(--display);color:var(--caramel)}
.tally2 .of{font:italic 400 1.1rem/1 var(--display);color:var(--ink-2)}
.rank{margin-top:6px;font:italic 400 1.12rem/1.45 var(--display);color:var(--ink)}
.wild{margin-top:18px;font-size:.95rem;color:var(--ink-2);line-height:1.7}
.wild a{color:var(--caramel);font-weight:600;border-bottom:1px solid rgba(138,95,63,.35)}
.wild a:hover{border-color:var(--caramel)}
.clear{margin-top:18px;background:none;border:0;padding:0;font-size:.86rem;font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:40px}
.gift .lead+.lead{margin-top:14px}
.drawer{margin:26px 0 0}
.drawer-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;border-radius:14px;
  background:repeating-linear-gradient(90deg,rgba(255,236,206,.0) 0 7px,rgba(255,236,206,.07) 7px 9px),linear-gradient(90deg,#a77a52,#b98a5f 22%,#9c7049 46%,#b5875d 72%,#a0744e);
  box-shadow:0 26px 40px -24px rgba(61,54,47,.7),inset 0 0 0 3px rgba(255,236,206,.16)}
.cell{display:flex;flex-direction:column;background:#f7f0e3;border-radius:6px;padding:6px 6px 7px;box-shadow:inset 0 0 0 1.5px rgba(138,95,63,.22),0 3px 6px -3px rgba(61,54,47,.5);transition:transform .35s var(--ease-soft)}
.cell:hover{transform:translateY(-2px)}
.cell img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 36%;border-radius:3px;background:#efe2d3}
.cell span{margin-top:6px;min-height:2.3em;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--type);font-size:.68rem;line-height:1.15;color:var(--ink);
  overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}   /* long German names (Streifenbärchen) hyphenate inside the tile */
.drawer figcaption{margin-top:12px;text-align:center;font:italic 400 .96rem/1.4 var(--display);color:var(--ink-2)}
.proof{margin-top:28px;padding:18px 0 0;border-top:1.5px solid var(--rule)}
.stars{font-size:1.2rem;letter-spacing:.12em;color:var(--caramel)}
.proof p{margin-top:6px;color:var(--ink-2);font-size:.98rem}
.gift .btn{margin-top:26px}
.slip{position:relative;margin-top:30px;padding:18px 20px;background:#fbf6ea;transform:rotate(-1.2deg);box-shadow:0 14px 24px -16px rgba(61,54,47,.55)}
.slip .tape{top:-13px;left:24px;width:92px;transform:rotate(-4deg)}
.slip p{font:italic 400 1.06rem/1.5 var(--display);color:var(--ink-2)}

/* ============ the diploma panel: a small certificate (8.10: realistic seal, quiet format choice, hero button) ============ */
.dip{position:relative;margin-top:44px;filter:drop-shadow(0 20px 22px rgba(52,44,34,.17)) drop-shadow(0 2px 2px rgba(52,44,34,.16))}
.dip-card{position:relative;padding:40px clamp(22px,3.4vw,40px) 30px;text-align:center;
  background:linear-gradient(135deg,rgba(255,251,243,.55),rgba(255,251,243,0) 46%,rgba(196,150,96,.10)),radial-gradient(120% 90% at 50% 45%,rgba(120,92,60,0) 55%,rgba(120,92,60,.12)),#f6eedf url(tex/paper.jpg) 0 0/520px;
  clip-path:polygon(0.00% 1.7px,2.08% 0.9px,4.17% 0.6px,6.25% 0.1px,8.33% 2.1px,10.42% 1.8px,12.50% 2.6px,14.58% 1.5px,16.67% 0.6px,18.75% 0.9px,20.83% 0.2px,22.92% 1.8px,25.00% 1.9px,27.08% 3.0px,29.17% 1.7px,31.25% 0.9px,33.33% 0.6px,35.42% 0.0px,37.50% 2.1px,39.58% 1.4px,41.67% 2.6px,43.75% 1.4px,45.83% 0.6px,47.92% 0.7px,50.00% 0.1px,52.08% 2.2px,54.17% 1.7px,56.25% 2.9px,58.33% 1.5px,60.42% 1.0px,62.50% 0.7px,64.58% 0.1px,66.67% 2.3px,68.75% 1.9px,70.83% 3.0px,72.92% 1.6px,75.00% 0.8px,77.08% 0.5px,79.17% 0.1px,81.25% 1.9px,83.33% 1.8px,85.42% 2.8px,87.50% 1.6px,89.58% 0.8px,91.67% 0.8px,93.75% 0.4px,95.83% 1.9px,97.92% 1.5px,calc(100% - 1.0px) 0.00%,calc(100% - 1.0px) 2.50%,calc(100% - 0.1px) 5.00%,calc(100% - 1.7px) 7.50%,calc(100% - 1.5px) 10.00%,calc(100% - 2.6px) 12.50%,calc(100% - 2.3px) 15.00%,calc(100% - 0.7px) 17.50%,calc(100% - 0.8px) 20.00%,calc(100% - 0.0px) 22.50%,calc(100% - 2.0px) 25.00%,calc(100% - 1.8px) 27.50%,calc(100% - 2.4px) 30.00%,calc(100% - 2.0px) 32.50%,calc(100% - 0.6px) 35.00%,calc(100% - 0.8px) 37.50%,calc(100% - 0.1px) 40.00%,calc(100% - 1.6px) 42.50%,calc(100% - 1.7px) 45.00%,calc(100% - 2.5px) 47.50%,calc(100% - 1.9px) 50.00%,calc(100% - 0.9px) 52.50%,calc(100% - 0.8px) 55.00%,calc(100% - 0.0px) 57.50%,calc(100% - 1.6px) 60.00%,calc(100% - 1.6px) 62.50%,calc(100% - 2.5px) 65.00%,calc(100% - 1.9px) 67.50%,calc(100% - 1.0px) 70.00%,calc(100% - 1.1px) 72.50%,calc(100% - 0.0px) 75.00%,calc(100% - 2.0px) 77.50%,calc(100% - 1.5px) 80.00%,calc(100% - 2.6px) 82.50%,calc(100% - 2.2px) 85.00%,calc(100% - 0.9px) 87.50%,calc(100% - 0.7px) 90.00%,calc(100% - 0.2px) 92.50%,calc(100% - 1.7px) 95.00%,calc(100% - 1.5px) 97.50%,100.00% calc(100% - 0.8px),97.92% calc(100% - 0.2px),95.83% calc(100% - 2.1px),93.75% calc(100% - 1.5px),91.67% calc(100% - 2.6px),89.58% calc(100% - 1.4px),87.50% calc(100% - 0.7px),85.42% calc(100% - 0.7px),83.33% calc(100% - 0.2px),81.25% calc(100% - 2.1px),79.17% calc(100% - 1.9px),77.08% calc(100% - 2.8px),75.00% calc(100% - 1.4px),72.92% calc(100% - 1.0px),70.83% calc(100% - 0.4px),68.75% calc(100% - 0.2px),66.67% calc(100% - 2.4px),64.58% calc(100% - 1.9px),62.50% calc(100% - 2.7px),60.42% calc(100% - 1.1px),58.33% calc(100% - 1.0px),56.25% calc(100% - 0.8px),54.17% calc(100% - 0.2px),52.08% calc(100% - 2.4px),50.00% calc(100% - 1.9px),47.92% calc(100% - 2.9px),45.83% calc(100% - 1.2px),43.75% calc(100% - 0.7px),41.67% calc(100% - 0.3px),39.58% calc(100% - 0.6px),37.50% calc(100% - 2.1px),35.42% calc(100% - 1.8px),33.33% calc(100% - 2.7px),31.25% calc(100% - 1.4px),29.17% calc(100% - 0.9px),27.08% calc(100% - 0.4px),25.00% calc(100% - 0.3px),22.92% calc(100% - 2.3px),20.83% calc(100% - 1.5px),18.75% calc(100% - 2.7px),16.67% calc(100% - 1.2px),14.58% calc(100% - 1.1px),12.50% calc(100% - 0.5px),10.42% calc(100% - 0.4px),8.33% calc(100% - 2.4px),6.25% calc(100% - 1.6px),4.17% calc(100% - 2.6px),2.08% calc(100% - 1.0px),1.8px 100.00%,1.9px 97.50%,0.0px 95.00%,0.9px 92.50%,0.5px 90.00%,1.6px 87.50%,2.4px 85.00%,2.1px 82.50%,2.4px 80.00%,0.2px 77.50%,1.0px 75.00%,0.5px 72.50%,1.6px 70.00%,2.2px 67.50%,1.7px 65.00%,2.3px 62.50%,0.2px 60.00%,1.2px 57.50%,0.2px 55.00%,1.9px 52.50%,2.4px 50.00%,2.0px 47.50%,2.0px 45.00%,0.4px 42.50%,0.8px 40.00%,0.5px 37.50%,2.0px 35.00%,2.6px 32.50%,2.1px 30.00%,2.1px 27.50%,0.3px 25.00%,1.2px 22.50%,0.3px 20.00%,2.0px 17.50%,2.6px 15.00%,2.1px 12.50%,2.0px 10.00%,0.2px 7.50%,1.2px 5.00%,0.5px 2.50%)}
.dip-card::before{content:"";position:absolute;inset:13px;border:1.6px solid rgba(138,95,63,.5);pointer-events:none}
.dip-card::after{content:"";position:absolute;inset:18px;border:.8px solid rgba(138,95,63,.3);pointer-events:none}
.dip-c{position:absolute;width:11px;height:11px;transform:rotate(45deg);background:#f6eedf;border:1.2px solid rgba(138,95,63,.6);z-index:1}
.dip-c::after{content:"";position:absolute;inset:2.5px;background:rgba(138,95,63,.55)}
.dip-c.c1{top:8px;left:8px}.dip-c.c2{top:8px;right:8px}.dip-c.c3{bottom:8px;left:8px}.dip-c.c4{bottom:8px;right:8px}
.dip-seal{position:absolute;z-index:3;top:-30px;right:-16px;width:92px;height:108px;pointer-events:none;
  filter:drop-shadow(0 1.5px 1px rgba(46,26,12,.45)) drop-shadow(0 7px 9px rgba(46,26,12,.28));transform:rotate(-8deg)}
.dip-seal svg{display:block;width:100%;height:100%}
/* attention cue (8.10): the seal is pressed once when the panel first comes into view; the button catches the light
   a few times while nobody touches it. transform/opacity only; nothing at all with reduced motion */
.dip-seal svg{transform-origin:50% 36%}
.dip-seal::after{content:"";position:absolute;left:12%;right:12%;top:52%;height:20%;border-radius:50%;z-index:-1;opacity:0;
  background:radial-gradient(closest-side,rgba(52,30,14,.55),rgba(52,30,14,0))}
.dip.cue-seal .dip-seal svg{animation:sealPress .62s cubic-bezier(.3,.7,.3,1) both}
.dip.cue-seal .dip-seal::after{animation:sealShade .62s ease-out both}
@keyframes sealPress{0%{transform:translateY(-9px) scale(1.07)}38%{transform:translateY(1px) scale(1.04,.9)}64%{transform:translateY(0) scale(.98,1.03)}100%{transform:none}}
@keyframes sealShade{0%{opacity:0;transform:scale(.7)}38%{opacity:.9;transform:scale(1.15)}100%{opacity:0;transform:scale(1)}}
.dip-go{overflow:hidden;isolation:isolate}
.dip-go::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;z-index:1;pointer-events:none;opacity:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,rgba(255,240,222,0),rgba(255,240,222,.38) 50%,rgba(255,240,222,0))}
.dip-go.sheen::after{animation:goSheen 1.05s cubic-bezier(.45,.05,.3,1) both}
@keyframes goSheen{0%{opacity:0;transform:translateX(-120%) skewX(-18deg)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(330%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){.dip.cue-seal .dip-seal svg,.dip.cue-seal .dip-seal::after,.dip-go.sheen::after{animation:none}}
.dip-over{position:relative;font:500 .66rem/1.3 var(--display);letter-spacing:.28em;text-transform:uppercase;color:var(--caramel);padding:0 40px}
.dip-h{position:relative;margin-top:10px;font:italic 430 clamp(1.62rem,2.3vw,2.02rem)/1.08 var(--display);color:var(--ink);letter-spacing:-.005em}
.dip-orn{position:relative;display:block;width:150px;height:10px;margin:13px auto 0;
  background:linear-gradient(rgba(138,95,63,.55),rgba(138,95,63,.55)) 0 3px/62px 1px no-repeat,linear-gradient(rgba(138,95,63,.55),rgba(138,95,63,.55)) 0 6px/62px 1px no-repeat,
  linear-gradient(rgba(138,95,63,.55),rgba(138,95,63,.55)) 100% 3px/62px 1px no-repeat,linear-gradient(rgba(138,95,63,.55),rgba(138,95,63,.55)) 100% 6px/62px 1px no-repeat}
.dip-orn::after{content:"";position:absolute;left:50%;top:1px;width:7px;height:7px;margin-left:-3.5px;transform:rotate(45deg);border:1.2px solid rgba(138,95,63,.7)}
.dip-p{position:relative;max-width:34ch;margin:14px auto 0;color:var(--ink-2);font-size:.95rem;line-height:1.6}
.dip-l{position:relative;display:block;margin-top:22px;font:600 .66rem/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.dip-in{position:relative;display:block;width:min(100%,330px);margin:4px auto 0;padding:.3em .2em .25em;text-align:center;
  font:italic 430 1.42rem/1.3 var(--display);color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid rgba(61,54,47,.42);border-radius:0;transition:border-color .25s,background .25s}
.dip-in::placeholder{color:rgba(91,80,70,.5)}
.dip-in:focus{outline:none;border-bottom-color:var(--caramel);background:linear-gradient(0deg,rgba(138,95,63,.08),rgba(138,95,63,0) 70%)}
.dip-in:focus-visible{box-shadow:0 2px 0 0 var(--caramel)}
.dip-hint{position:relative;margin-top:8px;font:italic 400 .84rem/1.4 var(--display);color:var(--ink-3,#7c7164)}
/* a diploma without a name (8.10): a small note under the field, over the controls below it, so nothing moves */
.dip-field{position:relative}
.dip-warn{position:absolute;z-index:4;left:50%;top:calc(100% + 8px);width:min(100%,360px);transform:translateX(-50%);padding:14px 16px;
  background:#fffaf2;border-radius:10px;text-align:center;box-shadow:0 0 0 1px rgba(138,95,63,.32),0 18px 30px -14px rgba(61,54,47,.5);animation:dipWarnIn .22s ease-out}
.dip-warn[hidden]{display:none}
.dip-warn::before{content:"";position:absolute;left:50%;top:-6px;width:11px;height:11px;margin-left:-5.5px;transform:rotate(45deg);background:#fffaf2;
  box-shadow:-1px -1px 0 0 rgba(138,95,63,.32)}
.dip-warn p{position:relative;font:italic 400 .98rem/1.42 var(--display);color:var(--ink)}
.dip-warn-b{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:11px}
.dip-warn-b button{min-height:40px;padding:0 1.05em;border:0;border-radius:999px;font:600 .82rem/1 var(--body);cursor:pointer}
.dip-warn-name{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(138,95,63,.45)}
.dip-warn-anon{background:var(--caramel);color:#fffaf3}
.dip-warn-b button:focus-visible{outline:2.5px solid var(--caramel);outline-offset:3px}
@keyframes dipWarnIn{from{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.dip-warn{animation:none}}
/* the format: a small, quiet segmented choice */
.dip-fmt{position:relative;margin:18px 0 0;padding:0;border:0;min-width:0}
.dip-fmt .seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(138,95,63,.08);box-shadow:inset 0 0 0 1px rgba(138,95,63,.22)}
.dip-fmt label{cursor:pointer;position:relative}
.dip-fmt input{position:absolute;opacity:0;width:1px;height:1px}
.dip-fmt .seg span{display:inline-flex;align-items:center;min-height:30px;padding:0 .95em;border-radius:999px;font:600 .76rem/1 var(--body);letter-spacing:.02em;color:var(--ink-2);transition:background .2s,color .2s,box-shadow .2s}
.dip-fmt label:hover span{color:var(--ink)}
.dip-fmt input:checked+span{background:#fffaf2;color:var(--ink);box-shadow:0 1px 2px rgba(61,54,47,.2),0 0 0 1px rgba(138,95,63,.28)}
.dip-fmt input:focus-visible+span{outline:2px solid var(--caramel);outline-offset:2px}
/* the hero: one obvious, warm button */
.dip-go{position:relative;display:flex;align-items:center;justify-content:center;gap:.6em;width:min(100%,340px);min-height:58px;margin:20px auto 0;padding:0 1.6em;
  border:0;border-radius:999px;cursor:pointer;font:650 1.06rem/1 var(--body);letter-spacing:.01em;color:#fffaf3;
  background:linear-gradient(180deg,#a3744e 0%,#8a5f3f 52%,#7a5236 100%);
  box-shadow:inset 0 1px 0 rgba(255,236,214,.45),inset 0 -2px 0 rgba(60,36,20,.22),0 16px 28px -14px rgba(122,82,54,.85),0 3px 8px -3px rgba(61,40,24,.35);
  transition:transform .25s cubic-bezier(.3,.7,.4,1),box-shadow .25s,filter .25s}
.dip-go svg{width:21px;height:21px;flex:0 0 auto}
.dip-go:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,236,214,.5),inset 0 -2px 0 rgba(60,36,20,.22),0 22px 32px -14px rgba(122,82,54,.9),0 4px 10px -3px rgba(61,40,24,.35)}
.dip-go:active{transform:translateY(1px);filter:brightness(.97)}
.dip-go:focus-visible{outline:3px solid rgba(138,95,63,.5);outline-offset:4px}
.dip-go[aria-disabled="true"]{filter:saturate(.55) brightness(1.06);opacity:.72;cursor:not-allowed;transform:none}
.dip-need{position:relative;margin-top:10px;min-height:1.2em;font:italic 400 .98rem/1.4 var(--display);color:var(--caramel)}
/* Species of the Month (8.10): one quiet line under the button, and one under the share buttons */
.dip-gw{position:relative;max-width:36ch;margin:6px auto 0;font:italic 400 .9rem/1.45 var(--display);color:var(--ink-2)}
.dip-gw a,.dipdlg-gw a{color:var(--caramel);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.dipdlg-gw{margin:10px 6px 0;text-align:center;font:italic 400 .88rem/1.42 var(--display);color:var(--ink-2)}
/* the rules page */
.rules-body main{padding:clamp(96px,11vw,128px) 0 clamp(40px,6vw,72px)}
.pg.rules{max-width:820px;margin:0 auto;padding:clamp(26px,4vw,52px) clamp(22px,4.6vw,60px) clamp(30px,4vw,48px)}
.rules-h{margin-top:clamp(18px,2.4vw,28px);font:400 clamp(2rem,4.2vw,3rem)/1.06 var(--display);color:var(--ink);letter-spacing:-.01em}
.rules .lead{margin-top:14px}
.rules-list{margin:26px 0 0;padding:0;list-style:none;counter-reset:r}
.rules-list li{counter-increment:r;position:relative;padding:16px 0 16px 46px;border-top:1px solid rgba(138,95,63,.22)}
.rules-list li::before{content:counter(r);position:absolute;left:0;top:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:500 .86rem/1 var(--type);color:var(--caramel);box-shadow:inset 0 0 0 1.2px rgba(138,95,63,.5)}
.rules-list h2{font:italic 430 1.18rem/1.25 var(--display);color:var(--ink)}
.rules-list p{margin-top:6px;font-size:.97rem;line-height:1.65;color:var(--ink-2)}
.rules-list a,.rules .lead a{color:var(--caramel);text-decoration:underline;text-underline-offset:3px}
.rules-upd{margin-top:22px;font:400 .86rem/1.4 var(--type);color:var(--ink-3,#7c7164)}
.rules-back{margin-top:18px}
@media (max-width:860px){
  .dip{margin-top:48px}
  .dip-card{padding:42px 20px 26px}
  .dip-seal{width:78px;height:92px;top:-28px;right:-8px}
  .dip-over{padding:0 60px 0 0;text-align:left;font-size:.6rem;letter-spacing:.16em;text-wrap:balance}
  .dip-go{width:100%}
}
dialog.dipdlg{padding:0;border:0;background:transparent;width:min(94vw,520px);max-height:96vh;overflow:visible}
dialog.dipdlg::backdrop{background:rgba(52,58,46,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dipdlg-in{background:var(--paper) url(tex/paper.jpg) 0 0/640px;border-radius:14px;padding:16px 16px 18px;box-shadow:0 40px 90px -30px rgba(30,34,26,.8)}
.dipdlg-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dipdlg-top h3{font:italic 430 1.4rem/1.2 var(--display)}
.dipdlg .x{width:44px;height:44px;border-radius:50%;border:0;background:rgba(138,95,63,.12);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.dipdlg .x svg{width:18px;height:18px}
.dipdlg-img{position:relative;display:grid;place-items:center;min-height:240px;max-height:min(62vh,640px);border-radius:8px;overflow:hidden;background:transparent}
.dipdlg-img img{display:block;max-width:100%;max-height:min(58vh,620px);width:auto;height:auto;box-shadow:0 14px 30px -18px rgba(61,54,47,.7);
  -webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}   /* press and hold on iPhone: Save to Photos */
.dipdlg-lp{margin:8px 4px 0;text-align:center;font:italic 400 .86rem/1.35 var(--display);color:var(--ink-2)}
.dipdlg-lp[hidden]{display:none}
.dipdlg-act{margin-top:14px}
.dipdlg-to{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dipdlg-to .btn{min-height:52px;padding:.55em .8em;font-size:.9rem;line-height:1.12;gap:.55em;white-space:normal;text-align:center;justify-content:center}
.dipdlg-to .btn svg{width:19px;height:19px;flex:0 0 auto}
.dipdlg-hint{margin:9px 4px 0;min-height:1.35em;text-align:center;font:italic 400 .92rem/1.35 var(--display);color:var(--caramel)}
.dipdlg-more{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.dipdlg-more .btn{min-height:46px;padding:.55em .7em;font-size:.84rem;line-height:1.12;gap:.45em;white-space:normal;text-align:center;justify-content:center}
.dipdlg-more .btn svg{width:17px;height:17px;flex:0 0 auto}
@media (max-width:380px){.dipdlg-to .btn{font-size:.84rem;padding:.8em .6em}.dipdlg-more .btn{font-size:.8rem}}
.dip-wait{position:absolute;width:38px;height:38px;border-radius:50%;border:3px solid rgba(138,95,63,.25);border-top-color:var(--caramel);animation:fnspin .9s linear infinite}
.dipdlg.ready .dip-wait{display:none}
@keyframes fnspin{to{transform:rotate(360deg)}}

/* ============ final page + footer ============ */
.final{text-align:center;padding-bottom:84px}
.final .h2{margin:6px auto 0}
.final .ctas{margin-top:26px}
.foot-wrap{width:var(--sheet);margin:0 auto;padding:26px 0 46px;border-top:1px solid rgba(61,54,47,.18);display:flex;justify-content:space-between;align-items:center;gap:18px 28px;flex-wrap:wrap}
.foot-wrap img{height:32px;width:auto}
.foot-wrap p{color:var(--ink);font-size:.94rem;max-width:52ch;line-height:1.5}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.92rem;font-weight:500;color:var(--ink)}
.foot-links a:hover{color:var(--caramel)}

.sticky{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:110;width:min(420px,calc(100vw - 32px));
  transform:translate(-50%,180%);transition:transform .45s var(--ease);display:none}
.sticky .btn{width:100%}
.sticky.show{transform:translate(-50%,0)}

/* ============ responsive ============ */
@media (max-width:1060px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav{display:none}
  .fab,.cartbtn-m{display:flex}
  .sticky{display:block}
}
@media (min-width:861px) and (max-height:820px){
  .hero{padding-top:92px;padding-bottom:22px}
  .spread{min-height:calc(100svh - 118px)}
  .spread .pg{padding-top:18px;padding-bottom:40px}
  .spread .rh{margin-bottom:12px}
  .compass{width:40px;margin:0 auto 4px}
  .h1-main{font-size:clamp(2.7rem,8.4vh,4.4rem)}
  .dbl{margin:10px auto 6px}
  .vol{font-size:.94rem}
  .intro{font-size:.93rem;line-height:1.55;margin-top:6px}
  .ctas{margin-top:12px}
  .tally{padding-top:10px}
  .p1-photo{height:clamp(200px,41vh,380px)}
  .p1-label{margin-top:12px}
  .p1-fields{margin-top:8px}
  .p1-shop{margin-top:8px}
  .folio{bottom:12px}
}
@media (max-width:860px){
  .hero{padding:84px 10px 18px;place-items:start center;min-height:0}
  .brand-m{display:block}
  .book{width:100%}
  /* one page on phones: both halves of the spread flow into a single sheet, plate between title and buttons */
  .spread{display:flex;flex-direction:column;min-height:0;background:var(--paper) url(tex/paper.jpg) 0 0/640px;border-radius:8px 14px 14px 8px;box-shadow:var(--page-shadow);padding:20px 18px 26px}
  .spread::before{display:none}
  .spread .pg{display:contents}
  .pg-l::after,.pg-r::after{display:none}
  .title-page,.plate1{display:contents}
  .spread .rh{order:0;margin-bottom:14px}
  .pg-r .rh{display:none}
  .compass{display:none}
  .h1{order:1;text-align:center}
  .kicker{font-size:.76rem}
  .h1-main{font-size:clamp(2.7rem,12.6vw,3.6rem);margin-top:.16em}
  .p1-photo{order:3;align-self:center;height:auto;width:min(60vw,330px);margin-top:16px}
  .p1-label{order:4;margin-top:16px}
  .latin,.loupe-txt{font-size:1.62rem}
  .p1-fields{display:none}
  .p1-shop{display:none}
  .dbl{order:5;margin:14px auto 10px;width:46%}
  .vol{display:none}
  .intro{order:6;margin-top:4px;text-align:center;font-size:.98rem}
  .ctas{order:7;margin-top:18px;width:100%;max-width:440px;align-self:center}
  .ctas .btn{flex:1 1 100%}
  .tally{order:8;padding-top:20px;flex-direction:column;gap:8px}
  .tally li{width:17px;height:17px}
  .folio{display:none}
  .cover{left:0;width:100%;bottom:auto;height:calc(100svh - 102px)}
  .cv-top{font-size:.64rem;letter-spacing:.28em;text-align:center;line-height:1.5}
  html.fn-pending .book{transform:none}
  .p1-photo .stamp{right:-22px;bottom:16px;font-size:1.15rem}

  .sheet{width:calc(100vw - 20px);margin-bottom:16px;border-radius:8px 14px 14px 8px}
  .cat-head{grid-template-columns:1fr}
  .h2{font-size:clamp(1.9rem,8.6vw,2.6rem)}

  /* chapters become swipeable rails of full plates */
  .chapter{padding-left:0;padding-right:0;overflow:hidden}
  .chapter .rh,.chapter .ch-head{margin-left:18px;margin-right:18px}
  .ch-head{grid-template-columns:1fr;gap:12px}
  .ch-note{font-size:1.16rem}
  .nb{left:auto;right:-4px;top:-46px}
  .ch-title{white-space:normal}
  .p1-photo .stamp{right:auto;left:-14px}
  .drawer-in{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:11px}
  .grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 18px 10px;scroll-padding:0 18px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .grid::-webkit-scrollbar{display:none}
  .grid>*{flex:0 0 min(80vw,330px);scroll-snap-align:start}
  .compare{padding:22px 18px}
  .rail-ui{display:flex;align-items:center;justify-content:space-between;margin:12px 18px 0}
  .rail-n{font:italic 400 .98rem/1 var(--display);color:var(--ink-2)}
  .rail-b{display:flex;gap:10px}
  .rail-b button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(251,247,239,.7);box-shadow:inset 0 0 0 1.5px rgba(138,95,63,.42);display:grid;place-items:center;cursor:pointer;color:var(--caramel)}
  .rail-b button:disabled{opacity:.35;cursor:default}
  .rail-b svg{width:18px;height:18px}

  .film-sheet{grid-template-columns:1fr}
  .print{width:min(100%,330px);margin-top:6px}
  .spread-flat{width:calc(100vw - 20px);grid-template-columns:1fr;margin-bottom:16px;gap:16px}
  .spread-flat::before{display:none}
  .spread-flat>.pg{border-radius:8px 14px 14px 8px;padding:22px 18px 60px}
  .log p{font-size:1.04rem}
  .key{grid-template-columns:1fr}
  .final{padding-bottom:70px}
  .foot-wrap{width:calc(100vw - 32px);padding-bottom:100px}
}
@media (max-width:380px){
  .h1-main{font-size:2.55rem}
  .ctas .btn{font-size:.92rem;padding:.92em 1.2em}
}

/* reduced motion: no intro, no stamp flight (states still change) */
@media (prefers-reduced-motion:reduce){
  .sp.is-spotted .sp-photo .stamp{animation:none;opacity:.9;transform:rotate(-12deg)}
  .spot .tk .t,.ledger .tk .t{transition:none}
  .btn,.sp-shop,.print .playbtn{transition:none}
}
.sp.is-spotted.no-anim .sp-photo .stamp{animation:none;opacity:.9;transform:rotate(-12deg)}