/*
Theme Name:   Alligator Park Child
Theme URI:    https://alligatorpark.net/
Description:  Child theme for AlligatorPark.Net. Carries the roadside-attraction design
              system, the hand-drawn character SVGs and the front-end scripts for the
              exhibit interactives. Built on Divi.
Author:       Grimm Productions
Version:      1.0.0
Template:     Divi
Text Domain:  alligator-park-child
*/

/* --------------------------------------------------------------------------
   NOTE ON DIVI GLOBAL COLOURS
   The :root variables below are the single source of truth for the palette.
   divi/global-colors.json maps the same six values onto Divi's global colour
   slots so the Builder colour picker and this stylesheet agree. Change one,
   change the other.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   AlligatorPark.Net — Roadside Attraction Theme  (Phase 1 preview)
   --------------------------------------------------------------------------
   DIVI MAPPING NOTES
   Each :root variable below maps to a Divi Theme Options > Colors slot or a
   Theme Builder global colour. Component blocks are labelled with the Divi
   module they are intended to become, so the CSS can move into
   Divi > Theme Options > Custom CSS with class names intact.
   ========================================================================== */

:root{
  /* --- Divi global palette slots --- */
  --ink:        #2A1F16;   /* Divi Global 1 — all headings, borders          */
  --swamp-900:  #14210F;   /* Divi Global 2 — darkest section background    */
  --swamp-800:  #1D3218;
  --swamp-700:  #2C4A22;
  --moss:       #6EA33F;   /* Divi Global 3 — primary brand green           */
  --moss-d:     #4E7A2B;
  --duckweed:   #A8BE3C;
  --cream:      #F7EFDC;   /* Divi Global 4 — page background / sign paint  */
  --cream-2:    #EDE0C2;
  --gold:       #F2A93B;   /* Divi Global 5 — accent / buttons              */
  --gold-d:     #D98A19;
  --rust:       #C2431F;   /* Divi Global 6 — alerts, "croc" side           */
  --teal:       #2E6B6B;
  --wood:       #6B4A34;
  --paper:      #FFFDF5;

  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);
  --radius: 18px;
  --maxw: 1180px;
  --border: 4px solid var(--ink);

  --f-display: 'Luckiest Guy', 'Arial Black', system-ui, sans-serif;
  --f-sign: 'Rye', Georgia, serif;
  --f-hand: 'Patrick Hand', 'Comic Sans MS', cursive;
  --f-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--f-body); font-size:18px; line-height:1.65;
  color:var(--ink); background:var(--cream);
  background-image:radial-gradient(circle at 12% 8%, rgba(168,190,60,.16) 0 38%, transparent 39%),
                   radial-gradient(circle at 88% 4%, rgba(242,169,59,.14) 0 30%, transparent 31%);
  background-repeat:no-repeat;
}
img{max-width:100%;display:block}
a{color:var(--moss-d);text-decoration-thickness:2px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.05;letter-spacing:.5px;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.4rem,2.6vw,2rem)}
p{margin:0 0 1.1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.narrow{max-width:820px}
.center{text-align:center}
.stack>*+*{margin-top:1.2rem}

/* ---------- SKIP LINK / A11Y ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:10px 16px;font-weight:900;z-index:999}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:4px solid var(--gold);outline-offset:3px}

/* ==========================================================================
   DIVI: Section > Row > Text  |  wooden sign panel
   ========================================================================== */
.sign{
  position:relative;
  background:var(--wood) url('assets/img/tex-wood-slats.jpg') center/cover;
  border:6px solid var(--ink); border-radius:14px;
  box-shadow:var(--shadow-hard), inset 0 0 60px rgba(0,0,0,.45);
  padding:34px 40px; color:var(--paper);
}
.sign::before,.sign::after{
  content:'';position:absolute;top:12px;bottom:12px;width:12px;border-radius:50%;
  background:radial-gradient(circle at 40% 30%, #d8cdb5, #6e6152 60%, #2a1f16);
  box-shadow:0 0 0 2px rgba(0,0,0,.4);
}
.sign::before{left:12px}
.sign::after{right:12px}
.sign h1,.sign h2,.sign h3{color:var(--gold);text-shadow:3px 3px 0 rgba(0,0,0,.55)}
.sign--tilt{transform:rotate(-1.2deg)}
.sign--tilt-r{transform:rotate(1deg)}

/* ---------- bunting / pennants ---------- */
.bunting{height:34px;display:flex;overflow:hidden;border-bottom:4px solid var(--ink)}
.bunting span{flex:1 0 auto;width:44px;height:34px;clip-path:polygon(0 0,100% 0,50% 100%)}
.bunting span:nth-child(4n+1){background:var(--rust)}
.bunting span:nth-child(4n+2){background:var(--gold)}
.bunting span:nth-child(4n+3){background:var(--moss)}
.bunting span:nth-child(4n+4){background:var(--teal)}

/* ==========================================================================
   DIVI: Menu module  |  sticky park header
   ========================================================================== */
.topbar{position:sticky;top:0;z-index:60;background:var(--swamp-900);border-bottom:5px solid var(--ink)}
.topbar .row{display:flex;align-items:center;gap:18px;max-width:var(--maxw);margin:0 auto;padding:10px 22px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .logo{width:56px;height:56px;flex:none}
.brand b{font-family:var(--f-sign);color:var(--gold);font-size:1.35rem;line-height:1;letter-spacing:.5px}
.brand small{display:block;font-family:var(--f-hand);color:var(--duckweed);font-size:.85rem;letter-spacing:1px}
.nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.nav a{
  font-family:var(--f-body);font-weight:900;font-size:.86rem;text-transform:uppercase;letter-spacing:.6px;
  color:var(--cream);text-decoration:none;padding:9px 13px;border-radius:10px;border:3px solid transparent;
}
.nav a:hover,.nav a:focus{background:var(--moss-d);border-color:var(--ink);color:#fff}
.nav a[aria-current="page"]{background:var(--gold);color:var(--ink);border-color:var(--ink)}

/* ==========================================================================
   DIVI: Fullwidth Header w/ background video  |  hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;border-bottom:6px solid var(--ink);background:var(--swamp-900)}
.hero video,.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,20,8,.55),rgba(10,20,8,.35) 40%,rgba(10,20,8,.85));
}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:82px 22px 96px;display:grid;gap:26px;grid-template-columns:1.25fr .75fr;align-items:center}
.hero h1{color:var(--paper);text-shadow:5px 5px 0 rgba(0,0,0,.6)}
.hero h1 em{display:block;font-style:normal;color:var(--gold);font-size:.62em}
.hero p.lede{color:var(--cream);font-size:1.2rem;max-width:44ch;font-weight:600}
.hero .kicker{
  display:inline-block;font-family:var(--f-sign);color:var(--ink);background:var(--gold);
  border:4px solid var(--ink);border-radius:999px;padding:6px 20px;font-size:.95rem;
  transform:rotate(-2deg);box-shadow:var(--shadow-hard-sm);margin-bottom:14px;
}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr;padding:56px 22px 68px}}

/* ==========================================================================
   DIVI: Button module
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--f-display);font-size:1.05rem;letter-spacing:.5px;
  background:var(--gold);color:var(--ink);text-decoration:none;
  padding:13px 26px;border:4px solid var(--ink);border-radius:999px;
  box-shadow:var(--shadow-hard);transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover,.btn:focus{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn--moss{background:var(--moss);color:#fff}
.btn--rust{background:var(--rust);color:#fff}
.btn--ghost{background:var(--paper)}
.btn--sm{font-size:.9rem;padding:9px 18px;border-width:3px;box-shadow:var(--shadow-hard-sm)}

/* ==========================================================================
   DIVI: Section backgrounds
   ========================================================================== */
.sec{padding:74px 0;position:relative}
.sec--cream{background:var(--cream)}
.sec--paper{background:var(--paper)}
.sec--swamp{background:var(--swamp-800);color:var(--cream)}
.sec--swamp h2,.sec--swamp h3{color:var(--gold)}
.sec--moss{background:var(--moss);color:#fff}
.sec--moss h2{color:var(--paper);text-shadow:3px 3px 0 rgba(0,0,0,.25)}
.sec--gold{background:var(--gold)}
.sec-head{max-width:760px;margin:0 auto 44px;text-align:center}
.sec-head .eyebrow{
  font-family:var(--f-hand);font-size:1.15rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--rust);margin:0 0 6px;
}
.sec--swamp .sec-head .eyebrow{color:var(--duckweed)}

/* water divider */
.wave{display:block;width:100%;height:52px}
.wave path{fill:currentColor}

/* ==========================================================================
   DIVI: Blurb / Blog grid  |  exhibit cards
   ========================================================================== */
.grid{display:grid;gap:26px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.card{
  background:var(--paper);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-hard);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease;
}
a.card{text-decoration:none;color:inherit}
a.card:hover,a.card:focus{transform:translate(-3px,-4px) rotate(-.5deg);box-shadow:10px 12px 0 var(--ink)}
.card figure{margin:0;position:relative;aspect-ratio:16/10;background:var(--swamp-700);overflow:hidden}
.card figure img{width:100%;height:100%;object-fit:cover}
.card .body{padding:20px 22px 24px}
.card h3{margin-bottom:.35em}
.card p{margin:0;font-size:1rem}
.card .tag{
  position:absolute;left:12px;top:12px;z-index:2;
  font-family:var(--f-display);font-size:.78rem;letter-spacing:.6px;
  background:var(--gold);border:3px solid var(--ink);border-radius:999px;padding:4px 13px;
  box-shadow:3px 3px 0 var(--ink);
}
.card .tag--soon{background:var(--cream-2)}
.card--soon{opacity:.92}
.card--soon figure img{filter:grayscale(.55) contrast(.95)}
.exh-no{font-family:var(--f-sign);color:var(--rust);font-size:.9rem;letter-spacing:1px;display:block;margin-bottom:2px}

/* ==========================================================================
   DIVI: Blurb  |  fact cards, index-card style
   ========================================================================== */
.facts{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.fact{
  background:var(--paper);border:3px solid var(--ink);border-radius:10px;padding:18px 20px 20px;
  box-shadow:var(--shadow-hard-sm);position:relative;
  background-image:repeating-linear-gradient(180deg,transparent 0 30px,rgba(46,107,107,.14) 30px 31px);
}
.fact:nth-child(2n){transform:rotate(.7deg)}
.fact:nth-child(3n){transform:rotate(-.9deg)}
.fact b{display:block;font-family:var(--f-display);font-size:1.9rem;color:var(--rust);line-height:1}
.fact span{font-family:var(--f-hand);font-size:1.12rem;display:block;margin-top:4px}
.fact .pin{position:absolute;right:-8px;top:-8px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff8f6b,var(--rust));border:3px solid var(--ink)}

/* ==========================================================================
   DIVI: Text module  |  exhibit chapter body
   ========================================================================== */
.chapter{border-top:5px dashed rgba(42,31,22,.28);padding-top:44px;margin-top:44px}
.chapter:first-of-type{border-top:0;margin-top:0;padding-top:0}
.chapter-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;background:var(--moss);color:#fff;
  border:4px solid var(--ink);font-family:var(--f-display);font-size:1.5rem;
  box-shadow:var(--shadow-hard-sm);margin-bottom:12px;
}
.split{display:grid;gap:34px;grid-template-columns:1fr 1fr;align-items:center}
.split--wide-l{grid-template-columns:1.35fr 1fr}
.split--wide-r{grid-template-columns:1fr 1.35fr}
@media (max-width:860px){.split,.split--wide-l,.split--wide-r{grid-template-columns:1fr}}

/* photo frame */
.frame{margin:0;border:5px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-hard);background:var(--swamp-700)}
.frame img,.frame video{width:100%;display:block}
.frame figcaption{
  font-family:var(--f-hand);font-size:1rem;padding:10px 14px;background:var(--paper);
  border-top:4px solid var(--ink);color:var(--ink)
}
.frame--tilt{transform:rotate(-1.4deg)}
.frame--tilt-r{transform:rotate(1.2deg)}
.credit{font-size:.8rem;opacity:.7;font-family:var(--f-body)}

/* pull quote / ranger note */
.note{
  display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;
  background:var(--cream-2);border:4px solid var(--ink);border-radius:var(--radius);
  padding:20px 24px;box-shadow:var(--shadow-hard-sm);
}
.note .who{font-family:var(--f-display);font-size:.95rem;color:var(--rust);display:block}
.note p{font-family:var(--f-hand);font-size:1.25rem;margin:0}
@media (max-width:640px){.note{grid-template-columns:84px 1fr}}

/* ==========================================================================
   MASCOTS — inline SVG with hover / click variants
   (Divi: place as Code module; the CSS below drives all interaction states)
   ========================================================================== */
.mascot{display:block;width:100%;height:auto;overflow:visible}
.mascot g[class^="m-"]{transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.mascot .m-lids{display:none}

.mascot-btn{
  background:none;border:0;padding:0;cursor:pointer;display:block;position:relative;
  width:100%;
}
.mascot-hold{position:relative}

/* Chomp: waves, blinks, chomps */
.m-chomp .m-arm-l{transform-box:fill-box;transform-origin:85% 95%}
.m-chomp:hover .m-arm-l,.m-chomp:focus-visible .m-arm-l{animation:wave 1s ease-in-out infinite}
.m-chomp:hover .m-head,.m-chomp:focus-visible .m-head{transform:translateY(-4px) rotate(-1.5deg)}
.m-chomp.is-chomping .m-head{animation:chomp .42s ease-in-out 2}
.m-chomp.is-blinking .m-eyes{opacity:0}
.m-chomp.is-blinking .m-lids{display:block}
@keyframes wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-22deg)}65%{transform:rotate(10deg)}}
@keyframes chomp{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-9px) rotate(-6deg)}}

/* every character gives a little bob when clicked, not just Chomp */
.mascot.is-chomping{animation:talkbob .38s ease-in-out 2}
@keyframes talkbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Pinch: snapping claws */
.m-pinch .m-claw-l{transform-box:fill-box;transform-origin:90% 90%}
.m-pinch .m-claw-r{transform-box:fill-box;transform-origin:10% 90%}
.m-pinch:hover .m-claw-l,.m-pinch:focus-visible .m-claw-l{animation:snapL .55s ease-in-out infinite}
.m-pinch:hover .m-claw-r,.m-pinch:focus-visible .m-claw-r{animation:snapR .55s ease-in-out infinite}
@keyframes snapL{0%,100%{transform:rotate(0)}50%{transform:rotate(-13deg)}}
@keyframes snapR{0%,100%{transform:rotate(0)}50%{transform:rotate(13deg)}}

/* Rex: flicking tongue */
.m-rex .m-tongue{transform-box:fill-box;transform-origin:100% 0%;opacity:.25}
.m-rex:hover .m-tongue,.m-rex:focus-visible .m-tongue{animation:flick .7s ease-in-out infinite}
@keyframes flick{0%,100%{opacity:0;transform:scale(.5)}40%{opacity:1;transform:scale(1)}}

/* Billy: chewing head bob */
.m-billy .m-head{transform-box:fill-box;transform-origin:80% 60%}
.m-billy:hover .m-head,.m-billy:focus-visible .m-head{animation:chew .5s ease-in-out infinite}
@keyframes chew{0%,100%{transform:rotate(0)}50%{transform:rotate(-3.5deg) translateY(3px)}}

/* Nugget: hops, shell wobbles */
.m-nugget:hover,.m-nugget:focus-visible{animation:hop .6s ease-in-out infinite}
.m-nugget .m-shell{transform-box:fill-box;transform-origin:50% 100%}
.m-nugget:hover .m-shell{animation:wobble .6s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-11px)}}
@keyframes wobble{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* speech bubble */
.speech{
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%) translateY(-6px) scale(.9);
  width:min(280px,72vw);background:var(--paper);border:4px solid var(--ink);border-radius:16px;
  padding:14px 16px;font-family:var(--f-hand);font-size:1.1rem;line-height:1.4;
  box-shadow:var(--shadow-hard-sm);opacity:0;pointer-events:none;transition:.2s ease;z-index:5;
  /* must be stated: on dark sections the bubble would otherwise inherit white
     text onto its own near-white background and read as empty */
  color:var(--ink);text-align:left;
}
.speech b{
  display:block;font-family:var(--f-display);font-weight:400;font-size:.92rem;
  color:var(--rust);letter-spacing:.4px;margin-bottom:3px;
}
/* lift whichever character is talking above its neighbours */
.mascot-hold.is-talking{z-index:30}
.speech::after{
  content:'';position:absolute;left:50%;top:100%;margin-left:-12px;
  border:14px solid transparent;border-top-color:var(--ink);
}
.speech.show{opacity:1;transform:translateX(-50%) translateY(-14px) scale(1)}

/* variant: bubble hangs below the character (used inside clipped hero sections) */
.speech-below .speech{bottom:auto;top:100%;transform:translateX(-50%) translateY(6px) scale(.9)}
.speech-below .speech.show{transform:translateX(-50%) translateY(14px) scale(1)}
.speech-below .speech::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ink)}

/* ---------- hero characters ----------
   A hero clips its own box so the background video stays inside it. That also
   clipped the speech bubble, in BOTH directions — above it was cut by the top
   edge, below by the section border. The video and the gradient overlay are
   both position:absolute; inset:0 with object-fit:cover, so neither can spill
   on its own; the clipping was only ever needed for the bubble's sake. Heroes
   that contain a character therefore opt out of it. */
.hero--talker{overflow:visible}

/* the bubble sits above the character and is allowed to run past the hero */
.hero .speech{
  width:auto;
  max-width:min(300px,80vw);
  white-space:nowrap;
  text-align:center;
  font-size:1.35rem;
  z-index:120;                 /* clears the sticky header, which sits at 60 */
}
.hero .mascot-hold.is-talking{z-index:120}

/* character strip */
.cast{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:end}
.cast figure{margin:0;text-align:center}
.cast .mascot-hold{max-width:210px;margin:0 auto}
.cast figcaption{margin-top:6px}
.cast b{font-family:var(--f-display);display:block;font-size:1.15rem}
.cast span{font-family:var(--f-hand);font-size:1rem;opacity:.85}

/* ==========================================================================
   INTERACTIVE: hover-reveal camouflage
   ========================================================================== */
.reveal{position:relative;cursor:crosshair;overflow:hidden;border:5px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-hard)}
.reveal img{display:block;width:100%}
.reveal .top{position:absolute;inset:0;transition:opacity .35s ease}
.reveal:hover .top,.reveal.on .top{opacity:0}
.reveal .hint{
  position:absolute;right:12px;bottom:12px;z-index:3;font-family:var(--f-display);font-size:.85rem;
  background:var(--gold);border:3px solid var(--ink);border-radius:999px;padding:5px 14px;box-shadow:3px 3px 0 var(--ink);
}
.reveal .marker{
  position:absolute;border:4px dashed var(--gold);border-radius:999px;
  opacity:0;transition:opacity .3s ease .1s;pointer-events:none;
}
.reveal:hover .marker,.reveal.on .marker{opacity:1}

/* ==========================================================================
   INTERACTIVE: gator-vs-croc sorter
   ========================================================================== */
.sorter{display:grid;gap:26px;grid-template-columns:1fr}
.sort-stage{display:grid;gap:20px;grid-template-columns:1fr 240px 1fr;align-items:start}
@media (max-width:900px){.sort-stage{grid-template-columns:1fr}}
.bin{
  border:5px dashed var(--ink);border-radius:var(--radius);padding:14px;min-height:190px;
  background:rgba(255,255,255,.55);
}
.bin h4{font-family:var(--f-display);font-size:1.25rem;margin:0 0 10px;text-align:center}
.bin--gator{border-color:var(--moss-d);background:rgba(110,163,63,.16)}
.bin--croc{border-color:var(--rust);background:rgba(194,67,31,.13)}
.bin .drop{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
.bin .drop img{border:3px solid var(--ink);border-radius:8px;aspect-ratio:1;object-fit:cover}
.sort-card{
  background:var(--paper);border:5px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-hard);
  overflow:hidden;text-align:center;
}
.sort-card img{aspect-ratio:1;object-fit:cover;width:100%}
.sort-card .q{font-family:var(--f-hand);padding:8px 10px;font-size:1.05rem}
.sort-actions{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.sort-feedback{min-height:2.6em;font-family:var(--f-hand);font-size:1.15rem;text-align:center;margin-top:10px}
.sort-feedback.good{color:var(--moss-d);font-weight:700}
.sort-feedback.bad{color:var(--rust);font-weight:700}

/* comparison table */
.vs{width:100%;border-collapse:separate;border-spacing:0;border:4px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.vs th,.vs td{padding:13px 16px;text-align:left;border-bottom:3px solid rgba(42,31,22,.2);font-size:1rem}
.vs thead th{font-family:var(--f-display);font-size:1.05rem;background:var(--cream-2)}
.vs thead th:nth-child(2){background:rgba(110,163,63,.3)}
.vs thead th:nth-child(3){background:rgba(194,67,31,.22)}
.vs tbody tr:last-child td{border-bottom:0}
.vs td:first-child{font-weight:800}

/* ==========================================================================
   INTERACTIVE: size / bite-force meters
   ========================================================================== */
.meter-row{display:grid;gap:10px;margin-bottom:18px}
.meter-row .lbl{display:flex;justify-content:space-between;font-weight:800;font-size:.95rem}
.meter{height:30px;border:4px solid var(--ink);border-radius:999px;background:var(--paper);overflow:hidden;box-shadow:var(--shadow-hard-sm)}
.meter i{display:block;height:100%;width:0;border-radius:999px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.meter i.g{background:repeating-linear-gradient(45deg,var(--moss) 0 12px,var(--moss-d) 12px 24px)}
.meter i.r{background:repeating-linear-gradient(45deg,var(--rust) 0 12px,#8f2f13 12px 24px)}
.meter i.y{background:repeating-linear-gradient(45deg,var(--gold) 0 12px,var(--gold-d) 12px 24px)}

.slider-demo{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-hard)}
.slider-demo input[type=range]{width:100%;accent-color:var(--moss-d)}
/* 16 ft of container = 16 ft of alligator, so the 6.25% ruler lines are true feet */
.gator-scale{position:relative;height:92px;margin:14px 0 8px;max-width:700px}
.gator-scale .silo{position:absolute;left:0;bottom:0;width:100%;height:auto;transform-origin:left bottom;transition:transform .25s ease}
.readout{font-family:var(--f-display);font-size:1.6rem;color:var(--rust)}

/* ==========================================================================
   TRIVIA GAME MODULE  (future WordPress plugin: [gator_trivia id="…"])
   ========================================================================== */
.quiz{
  background:var(--swamp-800);color:var(--cream);border:5px solid var(--ink);border-radius:22px;
  box-shadow:var(--shadow-hard);padding:26px 26px 30px;position:relative;overflow:hidden;
}
.quiz::before{
  content:'';position:absolute;inset:0;opacity:.14;pointer-events:none;
  background:repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.6) 18px 20px);
}
.quiz-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px;position:relative}
.quiz-head .badge{
  font-family:var(--f-display);background:var(--gold);color:var(--ink);border:4px solid var(--ink);
  border-radius:999px;padding:5px 16px;box-shadow:3px 3px 0 var(--ink);font-size:.9rem;transform:rotate(-2deg);
}
.quiz h3{color:var(--gold);margin:0}
.quiz-progress{margin-left:auto;font-family:var(--f-hand);font-size:1.1rem;color:var(--duckweed)}
.quiz-q{font-family:var(--f-display);font-size:1.35rem;line-height:1.25;margin:16px 0 18px;position:relative}
.quiz-opts{display:grid;gap:12px;position:relative}
.opt{
  display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;cursor:pointer;
  background:var(--paper);color:var(--ink);border:4px solid var(--ink);border-radius:14px;
  padding:13px 16px;font-family:var(--f-body);font-size:1.02rem;font-weight:700;
  box-shadow:var(--shadow-hard-sm);transition:transform .12s ease,box-shadow .12s ease,background .2s;
}
.opt:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.opt .ltr{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--cream-2);border:3px solid var(--ink);
  display:grid;place-items:center;font-family:var(--f-display);font-size:.95rem;
}
.opt.correct{background:var(--moss);color:#fff}
.opt.correct .ltr{background:var(--paper);color:var(--ink)}
.opt.wrong{background:var(--rust);color:#fff}
.opt:disabled{cursor:default}
.quiz-explain{
  margin-top:16px;background:rgba(255,253,245,.94);color:var(--ink);border:4px solid var(--ink);
  border-radius:14px;padding:14px 16px;font-family:var(--f-hand);font-size:1.13rem;position:relative;
  display:none;
}
.quiz-explain.show{display:block}
.quiz-explain b{font-family:var(--f-display);display:block;font-size:1rem;color:var(--rust);margin-bottom:2px}
.quiz-foot{display:flex;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap;position:relative}
.quiz-result{text-align:center;padding:10px 0 0;position:relative}
.quiz-result .score{font-family:var(--f-display);font-size:3rem;color:var(--gold);line-height:1}
.quiz-result .rank{font-family:var(--f-hand);font-size:1.35rem;color:var(--paper)}
.stamp{
  display:inline-block;margin:14px auto 6px;border:6px double var(--gold);color:var(--gold);
  font-family:var(--f-sign);font-size:1.1rem;padding:10px 22px;border-radius:12px;transform:rotate(-6deg);
  letter-spacing:1px;
}

/* ==========================================================================
   PRINTABLES / TICKET CALLOUT
   ========================================================================== */
.ticket{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  background:var(--gold);border:5px solid var(--ink);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow-hard);position:relative;
}
.ticket::before,.ticket::after{
  content:'';position:absolute;width:28px;height:28px;border-radius:50%;background:var(--cream);
  border:5px solid var(--ink);top:50%;margin-top:-14px;
}
.ticket::before{left:-19px}
.ticket::after{right:-19px}
.ticket h3{margin:0 0 4px}
.ticket p{margin:0;font-weight:700}
@media (max-width:640px){.ticket{grid-template-columns:1fr}}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--swamp-900);color:var(--cream);border-top:6px solid var(--ink);padding:52px 0 26px}
.foot a{color:var(--duckweed)}
.foot .cols{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.foot h4{color:var(--gold);font-size:1.15rem}
.foot ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.foot li{margin-bottom:6px}
.foot .fine{border-top:2px solid rgba(247,239,220,.2);margin-top:34px;padding-top:16px;font-size:.82rem;opacity:.8}

/* ==========================================================================
   PREVIEW-ONLY BANNER
   ========================================================================== */
.preview-flag{
  background:var(--rust);color:#fff;text-align:center;font-family:var(--f-body);font-weight:900;
  font-size:.82rem;letter-spacing:1px;text-transform:uppercase;padding:7px 14px;border-bottom:4px solid var(--ink);
}
.preview-flag span{opacity:.85;text-transform:none;letter-spacing:0;font-weight:700}

/* ==========================================================================
   PHASE 2 ADDITIONS
   ========================================================================== */

/* ---------- DIVI: Menu module with dropdown ---------- */
.nav .has-sub{position:relative}
.nav .has-sub>a{display:inline-block}
.nav .sub{
  position:absolute;left:0;top:calc(100% + 4px);margin:0;padding:8px;list-style:none;
  background:var(--swamp-900);border:4px solid var(--ink);border-radius:14px;min-width:275px;
  box-shadow:var(--shadow-hard);z-index:70;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav .sub li{margin:0}
.nav .sub a,.nav .sub span{
  display:block;padding:9px 12px;border-radius:9px;font-size:.85rem;font-weight:800;
  color:var(--cream);text-decoration:none;border:3px solid transparent;letter-spacing:.3px;
}
.nav .sub a:hover,.nav .sub a:focus{background:var(--moss-d);border-color:var(--ink);color:#fff}
.nav .sub a[aria-current="page"]{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.nav .sub span{opacity:.45;cursor:default}
@media (max-width:760px){.nav .sub{position:static;opacity:1;visibility:visible;transform:none;display:none}
  .nav .has-sub:focus-within .sub{display:block}}

/* ---------- generic interactive panel ---------- */
.play{
  background:var(--paper);border:5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-hard);padding:24px 26px 26px;position:relative;
}
.play h3{margin:0 0 6px}
.play .how{font-family:var(--f-hand);font-size:1.1rem;margin:0 0 18px;opacity:.85}
.play--dark{background:var(--swamp-800);color:var(--cream)}
.play--dark h3{color:var(--gold)}

/* ---------- EX 04: ambush reaction test ---------- */
.reaction{
  position:relative;height:230px;border:5px solid var(--ink);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;background:#14210F;box-shadow:var(--shadow-hard);
  display:grid;place-items:center;user-select:none;
}
.reaction img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.reaction .msg{
  position:relative;z-index:2;font-family:var(--f-display);font-size:1.6rem;color:var(--cream);
  text-align:center;text-shadow:3px 3px 0 rgba(0,0,0,.6);padding:0 20px;line-height:1.2;
}
.reaction.armed{background:#0d1a09}
.reaction.strike{background:var(--rust)}
.reaction.strike .msg{color:#fff;font-size:2.4rem}
.reaction.strike img{opacity:.18}
.rt-scores{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;font-family:var(--f-hand);font-size:1.05rem}
.rt-scores span{background:var(--cream-2);border:3px solid var(--ink);border-radius:999px;padding:3px 14px}

/* ---------- EX 04: death roll ---------- */
.roll-stage{
  height:210px;display:grid;place-items:center;border:5px solid var(--ink);border-radius:var(--radius);
  background:linear-gradient(180deg,#2E6B6B,#14210F);box-shadow:var(--shadow-hard);overflow:hidden;position:relative;
}
.roll-stage svg{width:min(420px,86%);transform-origin:50% 50%}
.roll-stage.rolling svg{animation:deathroll 1.5s cubic-bezier(.5,0,.5,1) 2}
.roll-stage .bubbles span{
  position:absolute;bottom:-30px;width:12px;height:12px;border-radius:50%;
  background:rgba(255,255,255,.4);opacity:0;
}
.roll-stage.rolling .bubbles span{animation:rise 1.6s ease-in infinite}
@keyframes deathroll{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:.7}100%{opacity:0;transform:translateY(-230px) scale(1.3)}}

/* ---------- EX 05: nest temperature dial ---------- */
.dial{background:var(--paper);border:5px solid var(--ink);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow-hard)}
.thermo{
  height:34px;border:4px solid var(--ink);border-radius:999px;margin:6px 0 4px;
  background:linear-gradient(90deg,#3E7BB8 0%,#4FA3B8 26%,#C9B24A 44%,#E08A2E 62%,#C2431F 100%);
  position:relative;box-shadow:var(--shadow-hard-sm);
}
.thermo .needle{
  position:absolute;top:-9px;bottom:-9px;width:8px;background:var(--ink);border-radius:4px;
  transform:translateX(-50%);transition:left .2s ease;
}
.thermo-scale{display:flex;justify-content:space-between;font-size:.8rem;font-weight:800;opacity:.7}
.clutch{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:22px 0 6px}
.egg{width:46px;height:60px;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;border:4px solid var(--ink);
  background:#F0DFAE;display:grid;place-items:center;font-family:var(--f-display);font-size:1.15rem;
  transition:background .35s ease,transform .35s ease;box-shadow:3px 3px 0 rgba(42,31,22,.5)}
.egg.f{background:#7FB2D8}
.egg.m{background:#E68A3C}
.egg.x{background:#CBBF7A}
.dial-out{font-family:var(--f-display);font-size:1.7rem;color:var(--rust);line-height:1.1}
.dial-note{font-family:var(--f-hand);font-size:1.15rem;margin:6px 0 0;min-height:3em}

/* ---------- EX 05: life-cycle timeline ---------- */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{
  display:grid;grid-template-columns:70px 1fr;gap:18px;padding:0 0 26px;position:relative;
}
.timeline li::before{
  content:'';position:absolute;left:34px;top:56px;bottom:-6px;width:5px;background:rgba(42,31,22,.25);border-radius:3px;
}
.timeline li:last-child{padding-bottom:0}
.timeline li:last-child::before{display:none}
.timeline .dot{
  width:68px;height:68px;border-radius:50%;background:var(--moss);border:5px solid var(--ink);
  display:grid;place-items:center;font-family:var(--f-display);font-size:.82rem;color:#fff;
  text-align:center;line-height:1.05;box-shadow:var(--shadow-hard-sm);z-index:2;padding:4px;
}
.timeline li:nth-child(2n) .dot{background:var(--teal)}
.timeline li:nth-child(3n) .dot{background:var(--gold);color:var(--ink)}
.timeline h4{font-family:var(--f-display);font-size:1.3rem;margin:6px 0 4px;font-weight:400}
.timeline p{margin:0;font-size:1rem}

/* ---------- EX 06: bellow synthesiser ---------- */
.bellow{display:grid;gap:20px;grid-template-columns:1fr 1fr;align-items:center}
@media (max-width:760px){.bellow{grid-template-columns:1fr}}
.viz{
  height:130px;display:flex;align-items:flex-end;gap:5px;justify-content:center;
  background:var(--swamp-900);border:5px solid var(--ink);border-radius:var(--radius);padding:12px;
  box-shadow:var(--shadow-hard);overflow:hidden;
}
.viz i{flex:1;max-width:16px;background:var(--duckweed);border-radius:4px 4px 0 0;height:4px;
  transition:height .07s linear,background .3s}
.viz.on i{background:var(--gold)}
.bellow-btn{
  width:100%;font-size:1.35rem;justify-content:center;padding:20px 26px;
}
.bellow-meta{font-family:var(--f-hand);font-size:1.12rem;margin:10px 0 0;min-height:2.6em}
.no-audio{font-size:.86rem;opacity:.75;margin-top:8px}

/* ---------- EX 06: signal matching game ---------- */
.match{display:grid;gap:20px;grid-template-columns:1fr 1fr}
@media (max-width:760px){.match{grid-template-columns:1fr}}
.match h4{font-family:var(--f-display);font-size:1.15rem;margin:0 0 10px;text-align:center}
.match-col{display:grid;gap:10px;align-content:start}
.chip{
  text-align:left;cursor:pointer;background:var(--paper);border:4px solid var(--ink);border-radius:12px;
  padding:12px 15px;font-family:var(--f-body);font-weight:700;font-size:1rem;color:var(--ink);
  box-shadow:var(--shadow-hard-sm);transition:transform .12s ease,box-shadow .12s ease,background .2s;
}
.chip:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.chip.sel{background:var(--gold);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.chip.done{background:var(--moss);color:#fff;cursor:default;opacity:.85;box-shadow:none;transform:none}
.chip.miss{background:var(--rust);color:#fff}
.match-status{font-family:var(--f-hand);font-size:1.15rem;text-align:center;margin-top:16px;min-height:2.4em}

/* ---------- EX 04: menu board ---------- */
.menu-board{
  background:var(--swamp-900);border:6px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-hard);padding:22px;color:var(--cream);text-align:center;
}
.menu-board .dish{
  font-family:var(--f-sign);font-size:clamp(1.4rem,3.4vw,2.1rem);color:var(--gold);
  padding:26px 10px;line-height:1.15;min-height:3.4em;display:grid;place-items:center;
  border-top:3px dashed rgba(247,239,220,.3);border-bottom:3px dashed rgba(247,239,220,.3);
}
.menu-board .tally{font-family:var(--f-hand);font-size:1.05rem;margin:12px 0 0;color:var(--duckweed)}

/* ---------- safety call-out ---------- */
.warn{
  background:var(--rust);color:#fff;border:5px solid var(--ink);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow-hard);
}
.warn h3{color:var(--gold);margin-top:0}
.warn ul{margin:0;padding-left:22px}
.warn li{margin-bottom:8px;font-weight:700}

/* ==========================================================================
   PARK FINDER
   DIVI: one Code module for the map + toolbar, one Blog/Blurb grid for cards.
   ========================================================================== */
.finder{display:grid;gap:26px}

.map-wrap{
  background:var(--paper);border:5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-hard);padding:16px;position:relative;
}
.map-wrap svg{display:block;width:100%;height:auto}

.st{fill:#CFC7AE;transition:fill .18s ease,opacity .18s ease}
.st--gator{fill:#8FB35A;cursor:pointer}
.st--gator:hover,.st--gator:focus-visible{fill:var(--duckweed)}
.st--gator.is-on{fill:var(--gold)}
.st--nopark{cursor:default}
.st--nopark:hover,.st--nopark:focus-visible{fill:#8FB35A}
.states.has-filter .st--gator:not(.is-on){opacity:.45}

.pin{cursor:pointer}
.pin-body{fill:var(--rust);stroke:var(--ink);stroke-width:2.5;transition:fill .18s ease}
.pin-dot{fill:var(--cream);stroke:var(--ink);stroke-width:2}
.pin{transition:opacity .18s ease}
.pin:hover .pin-body,.pin:focus-visible .pin-body,.pin.is-on .pin-body{fill:var(--gold)}
.pin.is-off{opacity:.16}

.map-legend{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:center;
  font-family:var(--f-hand);font-size:1.02rem;margin-top:10px;
}
.map-legend i{display:inline-block;width:16px;height:16px;border:3px solid var(--ink);border-radius:4px;vertical-align:-3px;margin-right:6px}
.map-legend .k-gator{background:#8FB35A}
.map-legend .k-pin{background:var(--rust);border-radius:50%}

/* ---------- toolbar ---------- */
.finder-bar{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  background:var(--cream-2);border:4px solid var(--ink);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow-hard-sm);
}
.finder-bar input[type=search]{
  flex:1 1 220px;min-width:180px;font-family:var(--f-body);font-size:1rem;font-weight:700;
  padding:10px 14px;border:3px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);
}
.state-chips{display:flex;gap:8px;flex-wrap:wrap}
.state-chip{
  cursor:pointer;font-family:var(--f-body);font-weight:900;font-size:.85rem;letter-spacing:.4px;
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:999px;
  padding:7px 14px;box-shadow:3px 3px 0 var(--ink);transition:transform .12s ease,background .18s ease;
}
.state-chip:hover{transform:translate(-1px,-1px)}
.state-chip.is-on{background:var(--gold)}
.state-chip small{opacity:.6;font-weight:800}
.finder-count{font-family:var(--f-hand);font-size:1.12rem;margin:0}

/* ---------- park cards ---------- */
.park-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.park{
  background:var(--paper);border:5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-hard);padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;
  scroll-margin-top:120px;transition:transform .15s ease,box-shadow .15s ease;
}
.park.is-flash{transform:translate(-3px,-4px);box-shadow:11px 13px 0 var(--gold)}
.park h3{margin:0;font-size:1.35rem}
.park .where{font-family:var(--f-sign);color:var(--rust);font-size:.92rem;letter-spacing:.5px}
.park .tag-line{font-family:var(--f-hand);font-size:1.1rem;margin:0}
.park dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.97rem}
.park dt{font-weight:900;opacity:.6}
.park dd{margin:0}
.park .pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.park .pills span{
  font-size:.76rem;font-weight:900;letter-spacing:.3px;background:var(--cream-2);
  border:2px solid var(--ink);border-radius:999px;padding:3px 10px;
}
.park .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.park .dist{
  font-family:var(--f-display);color:var(--moss-d);font-size:1.05rem;
}
.verify{
  display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:900;
  border:2px solid var(--ink);border-radius:999px;padding:3px 10px;
}
.verify--official{background:var(--moss);color:#fff}
.verify--listing{background:var(--gold)}
.park .src{font-size:.78rem;opacity:.65}
.finder-empty{
  grid-column:1/-1;text-align:center;font-family:var(--f-hand);font-size:1.3rem;padding:40px 20px;
}

.data-note{
  background:var(--cream-2);border:4px dashed var(--ink);border-radius:var(--radius);
  padding:20px 24px;font-size:.97rem;
}
.data-note h3{margin-top:0}

/* ==========================================================================
   PHASE 3 ADDITIONS — exhibits 07 & 08
   ========================================================================== */

/* ---------- EX 07: clickable whole-animal yield diagram ---------- */
.yield{display:grid;gap:22px;grid-template-columns:1.25fr .75fr;align-items:start}
@media (max-width:860px){.yield{grid-template-columns:1fr}}
.yield-stage{
  background:var(--cream);border:5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-hard);padding:14px;
}
.yield-stage svg{display:block;width:100%;height:auto}
.hot{cursor:pointer;fill:transparent;stroke:var(--ink);stroke-width:3;stroke-dasharray:7 6;
  transition:fill .2s ease,stroke .2s ease}
.hot:hover,.hot:focus-visible{fill:rgba(242,169,59,.45);stroke:var(--rust)}
.hot.is-on{fill:rgba(242,169,59,.72);stroke:var(--rust);stroke-dasharray:none}
.hot-label{font-family:var(--f-display);font-size:15px;fill:var(--ink);pointer-events:none}
.yield-info{
  background:var(--paper);border:5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-hard);padding:22px 24px;min-height:260px;
}
.yield-info h4{font-family:var(--f-display);font-size:1.45rem;margin:0 0 4px;color:var(--rust)}
.yield-info .lead{font-family:var(--f-hand);font-size:1.15rem;margin:0 0 12px}
.yield-info ul{margin:0;padding-left:20px}
.yield-info li{margin-bottom:6px}
.yield-info .idle{font-family:var(--f-hand);font-size:1.2rem;opacity:.7}

/* ---------- EX 07: egg-ranching cycle ---------- */
.cycle{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cyc{
  background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);
  padding:16px 16px 18px;box-shadow:var(--shadow-hard-sm);position:relative;
  opacity:.4;transition:opacity .3s ease,transform .3s ease;
}
.cyc.is-live{opacity:1;transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--ink)}
.cyc b{display:block;font-family:var(--f-display);font-size:1.05rem;margin-bottom:4px}
.cyc .n{
  position:absolute;right:-10px;top:-12px;width:34px;height:34px;border-radius:50%;
  background:var(--gold);border:4px solid var(--ink);display:grid;place-items:center;
  font-family:var(--f-display);font-size:.95rem;
}
.cyc p{margin:0;font-size:.95rem}

/* ---------- EX 08: Punnett square ---------- */
.punnett{display:grid;gap:24px;grid-template-columns:1fr 1fr;align-items:start}
@media (max-width:820px){.punnett{grid-template-columns:1fr}}
.pun-grid{
  display:grid;grid-template-columns:52px 1fr 1fr;grid-template-rows:52px 1fr 1fr;
  gap:6px;max-width:340px;margin:0 auto;
}
.pun-grid div{
  display:grid;place-items:center;font-family:var(--f-display);font-size:1.25rem;
  border:4px solid var(--ink);border-radius:10px;background:var(--paper);min-height:74px;
}
.pun-grid .hdr{background:var(--cream-2);border-radius:999px;min-height:0;font-size:1.15rem}
.pun-grid .corner{border:0;background:none}
.pun-cell.albino{background:#F3EFE2}
.pun-cell.carrier{background:#CFE0B8}
.pun-cell.normal{background:#8FB35A;color:#fff}
.pun-cell small{display:block;font-family:var(--f-body);font-size:.66rem;font-weight:900;opacity:.75}
.parent-pick{display:grid;gap:10px;margin-bottom:18px}
.parent-pick .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.parent-pick label{font-weight:900;min-width:78px}
.gsel{
  cursor:pointer;font-family:var(--f-body);font-weight:900;font-size:.86rem;
  background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:7px 13px;
  box-shadow:3px 3px 0 var(--ink);color:var(--ink);
}
.gsel.is-on{background:var(--gold)}
.pun-out{
  background:var(--swamp-800);color:var(--cream);border:4px solid var(--ink);border-radius:var(--radius);
  padding:16px 18px;margin-top:16px;font-family:var(--f-hand);font-size:1.15rem;
}
.pun-out b{font-family:var(--f-display);color:var(--gold);display:block;font-size:1.05rem}
.pun-key{display:flex;gap:14px;flex-wrap:wrap;font-size:.86rem;font-weight:800;margin-top:12px}
.pun-key i{display:inline-block;width:15px;height:15px;border:3px solid var(--ink);border-radius:4px;vertical-align:-3px;margin-right:5px}

/* ---------- EX 08: myth buster + truth-o-meter ---------- */
.myth{
  background:var(--paper);border:5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-hard);padding:24px 26px 26px;text-align:center;
}
.meter-dial{width:min(300px,80%);margin:0 auto 6px;display:block}
.meter-dial .needle{
  transform-box:view-box;transform-origin:150px 130px;
  transition:transform .7s cubic-bezier(.34,1.3,.64,1);
}
.myth-claim{
  font-family:var(--f-display);font-size:clamp(1.25rem,3vw,1.75rem);line-height:1.25;
  margin:8px 0 18px;min-height:2.6em;display:grid;place-items:center;
}
.myth-verdict{
  font-family:var(--f-hand);font-size:1.18rem;min-height:4.4em;margin:16px auto 0;max-width:60ch;
}
.myth-verdict.good{color:var(--moss-d)}
.myth-verdict.bad{color:var(--rust)}
.myth-tally{font-family:var(--f-hand);font-size:1.05rem;opacity:.8}

/* ---------- EX 08: count-up figures ---------- */
.bignum{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));text-align:center}
.bignum div{
  background:var(--paper);border:5px solid var(--ink);border-radius:var(--radius);
  padding:22px 18px;box-shadow:var(--shadow-hard);
}
.bignum b{display:block;font-family:var(--f-display);font-size:2.5rem;color:var(--rust);line-height:1}
.bignum span{font-family:var(--f-hand);font-size:1.08rem;display:block;margin-top:6px}

/* ==========================================================================
   DIVI THEME BUILDER — global header & footer
   --------------------------------------------------------------------------
   The header uses a real Divi Menu module so your team manages navigation in
   Appearance -> Menus. These rules restyle Divi's own menu markup (.et-menu,
   .sub-menu, .et_mobile_menu) to match the preview's hand-built nav.
   ========================================================================== */

/* ---------- header shell ---------- */
.ap-header.et_pb_section{padding:0}
.ap-header .et_pb_row{padding-top:0;padding-bottom:0;margin-left:auto;margin-right:auto}
.ap-header .et_pb_column{margin-bottom:0}
.ap-header .ap-bunting-row{width:100%;max-width:none;padding:0}
.ap-header .ap-header-row{display:flex;align-items:center;flex-wrap:wrap}
.ap-header .ap-header-row .et_pb_column{display:flex;align-items:center}
.ap-header .ap-header-row .et_pb_column:last-child{justify-content:flex-end;flex:1}
.ap-brand .et_pb_code_inner{width:100%}

/* ---------- Divi Menu module, restyled ----------
   Complete and verified against the live site. Hooks .et_pb_menu rather than
   .ap-nav, because Divi 5's migration drops module_class on the Menu module.
   Full reasoning: divi/theme-builder/menu-final.css
   -------------------------------------------------------------------------- */

/* base pill styling for the top-level links */
#page-container .et_pb_menu ul.et-menu > li > a{
  font-family:var(--f-body);font-weight:900;font-size:.86rem;letter-spacing:.6px;
  text-transform:uppercase;color:var(--cream);border-radius:10px;
  border:3px solid transparent;opacity:1;
  transition:background .18s ease,border-color .18s ease;
}
#page-container .et_pb_menu ul.et-menu > li > a:hover{
  background:var(--moss-d);border-color:var(--ink);color:#fff;
}
#page-container .et_pb_menu ul.et-menu > li.current-menu-item:not(.menu-item-has-children) > a{
  background:var(--gold);color:var(--ink);border-color:var(--ink);
}
#page-container .et_pb_menu ul.et-menu > li > a:before,
#page-container .et_pb_menu ul.et-menu > li > a:after{content:none}

/* ==========================================================================
   1. TOP-LEVEL ITEMS
   ========================================================================== */

/* even vertical padding — Divi's default is 9px top / 8px bottom */
#page-container .et_pb_menu ul.et-menu > li > a{
  padding:9px 13px !important;
}

/* A parent that is only a custom link must NOT claim the current-page pill.
   Without this, "Exhibits" (-> /#exhibits) is gold on the home page at the
   same time as "Home", because WordPress considers both to be the front page.

   Note the :not(:hover). Without it this rule's `background:transparent
   !important` also wins while you are hovering, and the item loses the green
   hover pill that every other inactive link gets. Excluding hover here lets
   the normal hover rule below take over, which is what the preview did. */
#page-container .et_pb_menu ul.et-menu > li.menu-item-has-children.menu-item-type-custom.current-menu-item > a:not(:hover),
#page-container .et_pb_menu ul.et-menu > li.menu-item-has-children.menu-item-type-custom.current_page_item > a:not(:hover){
  background:transparent !important;
  color:#F7EFDC !important;              /* AP Cream */
  border-color:transparent !important;
}

/* hover — the green pill, on every top-level item */
#page-container .et_pb_menu ul.et-menu > li > a:hover{
  background:#4E7A2B !important;         /* AP Moss, darker */
  color:#ffffff !important;
  border-color:#2A1F16 !important;
}

/* ...but a parent SHOULD light up gold when you are actually inside one of its
   children, i.e. on any exhibit page. This is the preview's behaviour. */
#page-container .et_pb_menu ul.et-menu > li.current-menu-ancestor > a,
#page-container .et_pb_menu ul.et-menu > li.current-menu-parent > a{
  background:#F2A93B !important;         /* AP Gold */
  color:#2A1F16 !important;              /* AP Ink */
  border-color:#2A1F16 !important;
}

/* the current page keeps its gold pill on hover rather than turning green,
   which is how the preview behaved */
#page-container .et_pb_menu ul.et-menu > li.current-menu-item:not(.menu-item-has-children) > a:hover,
#page-container .et_pb_menu ul.et-menu > li.current-menu-ancestor > a:hover,
#page-container .et_pb_menu ul.et-menu > li.current-menu-parent > a:hover{
  background:#F2A93B !important;
  color:#2A1F16 !important;
  border-color:#2A1F16 !important;
}


/* ==========================================================================
   2. THE CARET — matched to the static preview
   --------------------------------------------------------------------------
   The preview put a solid small triangle inline after the label:

       Exhibits <span aria-hidden="true">&#9662;</span>

   &#9662; is U+25BE BLACK DOWN-POINTING SMALL TRIANGLE, and because it sat in
   the normal text flow it simply inherited the link's font — Nunito 900.

   Divi instead uses content:"3" from its ETmodules icon font, positioned
   absolutely at top:0 right:0. That is the thin chevron you are seeing.

   These rules swap the glyph AND put it back in the text flow, so it sits on
   the same baseline as the label exactly as the preview did. Because it is
   inline again, the extra right-hand padding is no longer needed and the pill
   returns to the same 9px 13px as every other item.
   ========================================================================== */

#page-container .et_pb_menu ul.et-menu > li.menu-item-has-children > a{
  padding:9px 13px !important;           /* no longer needs room for an absolute icon */
}

#page-container .et_pb_menu li.menu-item-has-children > a:after{
  content:"\25BE" !important;            /* ▾  U+25BE */
  font-family:'Nunito',sans-serif !important;   /* NOT ETmodules */
  font-size:.95em !important;
  font-weight:900 !important;
  position:static !important;            /* back into the text flow */
  display:inline !important;
  top:auto !important;
  right:auto !important;
  transform:none !important;
  margin-left:7px !important;            /* the space that was in the preview markup */
  line-height:1 !important;
  vertical-align:baseline !important;
  color:#F2A93B !important;              /* gold on the dark bar */
}

/* The caret follows the label, exactly as the preview's inline <span> did:
   white on the green hover pill, ink on a gold pill. */
#page-container .et_pb_menu ul.et-menu > li.menu-item-has-children > a:hover:after{
  color:#ffffff !important;
}
#page-container .et_pb_menu ul.et-menu > li.current-menu-ancestor > a:after,
#page-container .et_pb_menu ul.et-menu > li.current-menu-ancestor > a:hover:after,
#page-container .et_pb_menu ul.et-menu > li.current-menu-parent > a:after{
  color:#2A1F16 !important;
}


/* ==========================================================================
   3. THE DROPDOWN PANEL
   ========================================================================== */

#page-container .et_pb_menu ul.sub-menu,
#page-container .ap-nav ul ul{
  background-color:#14210F !important;   /* AP Swamp, darkest */
  border:4px solid #2A1F16 !important;
  border-top:4px solid #2A1F16 !important;   /* Divi puts a 2.4px blue rule here */
  border-radius:14px !important;
  padding:8px !important;                /* Divi uses 20px 0 */
  width:290px !important;                /* Divi uses 240px */
  box-shadow:6px 6px 0 #2A1F16 !important;
}

#page-container .et_pb_menu ul.sub-menu li,
#page-container .ap-nav ul ul li{
  padding:0 !important;
  margin:0 !important;
  width:100% !important;
}

#page-container .et_pb_menu ul.sub-menu li a,
#page-container .ap-nav ul ul li a{
  display:block !important;
  font-family:'Nunito',sans-serif !important;
  font-weight:800 !important;
  font-size:.85rem !important;
  letter-spacing:.3px !important;
  line-height:1.3 !important;
  text-transform:none !important;        /* Divi forces uppercase */
  color:#F7EFDC !important;
  background:transparent !important;
  width:auto !important;                 /* Divi hard-codes 200px */
  padding:9px 12px !important;           /* Divi uses 6px 20px */
  border-radius:9px !important;
  border:3px solid transparent !important;
  opacity:1 !important;
  transition:background .18s ease,border-color .18s ease;
}

#page-container .et_pb_menu ul.sub-menu li a:hover,
#page-container .et_pb_menu ul.sub-menu li a:focus,
#page-container .ap-nav ul ul li a:hover{
  background:#4E7A2B !important;         /* AP Moss, darker */
  border-color:#2A1F16 !important;
  color:#ffffff !important;
}

#page-container .et_pb_menu ul.sub-menu li.current-menu-item > a,
#page-container .et_pb_menu ul.sub-menu li.current_page_item > a{
  background:#F2A93B !important;
  color:#2A1F16 !important;
  border-color:#2A1F16 !important;
}

/* keep a right-edge dropdown on screen — the panel is 290px wide */
#page-container .et_pb_menu ul.et-menu > li:last-child ul.sub-menu,
#page-container .et_pb_menu ul.et-menu > li:nth-last-child(2) ul.sub-menu{
  left:auto !important;
  right:0 !important;
}


/* ==========================================================================
   4. MOBILE MENU
   The mobile panel carries its own copy of the same markup.
   ========================================================================== */

#page-container .et_pb_menu ul.et_mobile_menu{
  background-color:#14210F !important;
  border:4px solid #2A1F16 !important;
  border-radius:14px !important;
  padding:8px !important;
  box-shadow:6px 6px 0 #2A1F16 !important;
}
#page-container .et_pb_menu ul.et_mobile_menu li a{
  color:#F7EFDC !important;
  font-weight:800 !important;
  border-bottom:2px solid rgba(247,239,220,.12) !important;
}
#page-container .et_pb_menu ul.et_mobile_menu li a:hover{
  background:#4E7A2B !important;
  color:#ffffff !important;
}


/* ---------- footer ---------- */
/* the section carries .foot as well, so the existing footer rules apply;
   these only fix what Divi's column markup changes */
.ap-footer.et_pb_section{padding:0;border-top:6px solid var(--ink)}
.ap-footer .et_pb_row{margin-left:auto;margin-right:auto}
.ap-footer .et_pb_column{margin-bottom:0}
.ap-footer .et_pb_text{color:var(--cream)}
.ap-footer h4{color:var(--gold);font-size:1.15rem;margin-bottom:.6em}
.ap-footer ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.ap-footer li{margin-bottom:6px}
.ap-footer a{color:var(--duckweed)}
.ap-footer .fine{
  border-top:2px solid rgba(247,239,220,.2);padding-top:16px;font-size:.82rem;opacity:.8;margin:0;
}
@media (max-width:980px){
  .ap-footer .et_pb_column{margin-bottom:26px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* ==========================================================================
   DIVI INTEROP
   Divi ships opinionated defaults for p, a, h1-h6 and .et_pb_module. These
   rules re-assert the design system inside the builder's wrappers without
   using !important where it can be avoided.
   ========================================================================== */
#page-container .ap-scope p{margin-bottom:1.1em;line-height:1.65}
#page-container .ap-scope a:not(.btn):not(.card):not(.chip){color:var(--moss-d)}
#page-container .ap-scope h1,#page-container .ap-scope h2,
#page-container .ap-scope h3,#page-container .ap-scope h4{
  font-family:var(--f-display);font-weight:400;line-height:1.05;padding-bottom:0;
}
/* Divi's Text module adds a bottom margin that breaks our section rhythm */
.ap-scope .et_pb_text_inner>*:last-child{margin-bottom:0}
.et_pb_section.ap-section{padding:0}
.et_pb_row.ap-row{padding:0;width:100%;max-width:none}
.ap-row .et_pb_column{margin-bottom:0}
/* our sections manage their own width, so neutralise Divi's row gutters */
.ap-section .et_pb_row{margin-left:auto;margin-right:auto}

/* --- wpautop artefacts -----------------------------------------------------
   Divi runs Text module content through wpautop, which inserts a <br> at every
   newline and an empty <p> at every blank line. In prose that is the point; in
   our markup it lands inside <figure> and after inline <span>s, adding a stray
   line box and 1.1em of dead margin that nothing in the design asks for.

   These rules only ever hide things that are already empty, so they cannot
   swallow real content. The structural half of this problem — anchors holding
   block-level children, which wpautop shatters into phantom duplicates — is
   fixed in the converter instead, by emitting those blocks as Code modules.
   -------------------------------------------------------------------------- */
#page-container .ap-scope p:empty{display:none}
#page-container .ap-scope figure>br,
#page-container .ap-scope .tag+br,
#page-container .ap-scope img+br{display:none}