/* Mpala Field Guide — clean responsive flipbook styles v1.3.2 */

.mpfg-widget,
.mpfg-widget *,
.mpfg-sp,
.mpfg-sp *{
  box-sizing:border-box;
}

.mpfg-widget{
  --mpfg-rust:#a04020;
  --mpfg-rust-2:#c45a2c;
  --mpfg-ink:#24302f;
  --mpfg-ink-2:#4f5c59;
  --mpfg-ink-3:#7c8984;
  --mpfg-paper:#f8f3ee;
  --mpfg-paper-2:#fffaf4;
  --mpfg-paper-3:#e8ded2;
  --mpfg-line:rgba(36,48,47,.16);
  --mpfg-blue:#384360;
  --mpfg-yellow:#e3b23c;
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:clamp(24px,4vw,54px) 0;
  color:var(--mpfg-ink);
  font-family:"Ubuntu",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  isolation:isolate;
}

.mpfg-widget a,
.mpfg-widget button{
  font-family:inherit;
}

.mpfg-section-head{
  width:min(920px, calc(100% - 32px));
  margin:0 auto clamp(22px,3vw,36px);
  text-align:center;
}

.mpfg-section-head h2{
  margin:0;
  color:var(--mpfg-blue) !important;
  font-family:"Ubuntu",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:clamp(38px,4vw,54px) !important;
  line-height:1.05 !important;
  font-weight:700 !important;
  letter-spacing:-.03em !important;
  text-transform:none !important;
}

.mpfg-section-head .mpfg-sub{
  margin-top:4px;
  color:var(--mpfg-blue) !important;
  font-size:clamp(18px,2vw,26px);
  font-weight:700;
  letter-spacing:-.02em;
}

.mpfg-section-head p{
  max-width:760px;
  margin:12px auto 0;
  color:var(--mpfg-ink-2) !important;
  font-size:15px;
  line-height:1.65;
}

/* Filters */
.mpfg-filter-bar{
  width:min(1080px, calc(100% - 28px));
  margin:0 auto -1px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  border-bottom:0;
  padding-bottom:0;
  position:relative;
  z-index:12;
}

.mpfg-filter{
  appearance:none;
  border:0 !important;
  background:transparent !important;
  color:var(--mpfg-rust) !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:72px;
  min-height:76px;
  padding:10px 10px 12px !important;
  border-radius:12px 12px 0 0 !important;
  cursor:pointer;
  transform:translateY(2px);
  transition:background .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.mpfg-filter:hover{
  color:var(--mpfg-rust) !important;
  transform:translateY(0);
}

.mpfg-filter[aria-pressed="true"]{
  background:var(--mpfg-rust) !important;
  color:#fff !important;
  box-shadow:0 14px 28px -24px rgba(36,48,47,.7);
  transform:translateY(0);
}

.mpfg-filter .mpfg-ico{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:2px solid var(--mpfg-rust);
  border-radius:999px;
  background:transparent;
  transition:border-color .22s ease, background .22s ease, transform .22s ease;
}

.mpfg-filter:hover .mpfg-ico{
  transform:translateY(-1px);
}

.mpfg-filter .mpfg-ico img{
  display:block;
  width:25px;
  height:25px;
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(29%) sepia(58%) saturate(1311%) hue-rotate(346deg) brightness(86%) contrast(90%);
}

.mpfg-filter[aria-pressed="true"] .mpfg-ico{
  border-color:#fff;
}

.mpfg-filter[aria-pressed="true"] .mpfg-ico img{
  filter:brightness(0) invert(1);
}

.mpfg-filter .mpfg-label{
  display:block;
  font-size:10px;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  white-space:nowrap;
}

/* Stage and book */
.mpfg-stage{
  width:min(1180px, calc(100% - 24px));
  margin:0 auto;
  position:relative;
  padding:0 clamp(0px,3vw,44px);
  z-index:1;
}

.mpfg-book{
  width:min(1060px,100%);
  margin:0 auto;
  padding:clamp(14px,2vw,24px);
  background:linear-gradient(135deg,#263130,#17201f);
  border:1px solid rgba(255,255,255,.08);
  border-radius:clamp(24px,3vw,38px);
  box-shadow:0 28px 70px -42px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.05);
  perspective:1800px;
  -webkit-perspective:1800px;
}

.mpfg-book-inner{
  position:relative;
  height:clamp(560px,56vw,720px);
  overflow:hidden;
  border-radius:clamp(14px,1.8vw,22px);
  background:var(--mpfg-paper);
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}

.mpfg-book-inner.is-filtering .mpfg-pages{
  opacity:.25;
  transform:scale(.985);
}

.mpfg-pages{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:linear-gradient(90deg,#fbf7f1 0%,#f7f0e8 49.7%,#ded2c6 50%,#f7f0e8 50.3%,#fbf7f1 100%);
  transition:opacity .22s ease, transform .22s ease;
}

.mpfg-page{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(12px,1.5vw,18px);
  padding:clamp(14px,2vw,24px);
  position:relative;
}

.mpfg-left{
  box-shadow:inset -14px 0 22px -24px rgba(0,0,0,.55);
}

.mpfg-right{
  box-shadow:inset 14px 0 22px -24px rgba(0,0,0,.55);
}

.mpfg-single{
  grid-template-rows:minmax(0,1fr);
}

.mpfg-card{
  position:relative;
  z-index:1;
  display:flex !important;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
  padding:clamp(10px,1.4vw,16px) !important;
  border:1px solid rgba(36,48,47,.13) !important;
  border-radius:clamp(16px,2vw,24px) !important;
  background:linear-gradient(180deg,#fffaf4,#f5ece2) !important;
  color:var(--mpfg-ink) !important;
  text-decoration:none !important;
  text-align:center;
  box-shadow:0 16px 34px -32px rgba(0,0,0,.8);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mpfg-card:hover,
.mpfg-card:focus-visible,
.mpfg-card.is-touched{
  transform:translateY(-2px);
  border-color:rgba(160,64,32,.32) !important;
  box-shadow:0 22px 42px -34px rgba(0,0,0,.85);
  outline:none;
}

.mpfg-card.mpfg-layout-full{
  grid-row:1 / -1;
}

.mpfg-feature-dots{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;
  display:flex;
  gap:5px;
}

.mpfg-dot{
  width:8px;
  height:8px;
  display:block;
  border-radius:999px;
  background:var(--mpfg-rust);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}

.mpfg-dot.is-sound{background:#384360;}
.mpfg-dot.is-tracks{background:#5f7f6a;}
.mpfg-dot.is-trivia{background:#e3b23c;}
.mpfg-dot.is-dyk{background:#a04020;}

.mpfg-art{
  position:relative;
  display:block;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  margin:2px auto 12px;
  overflow:visible;
}

.mpfg-art img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  transition:opacity .22s ease, transform .22s ease;
}

.mpfg-color{
  opacity:0;
}

.mpfg-card:hover .mpfg-color,
.mpfg-card:focus-visible .mpfg-color,
.mpfg-card.is-touched .mpfg-color{
  opacity:1;
}

.mpfg-card:hover .mpfg-bw,
.mpfg-card:focus-visible .mpfg-bw,
.mpfg-card.is-touched .mpfg-bw{
  opacity:0;
}

.mpfg-name{
  flex:0 0 auto;
  display:block;
  color:var(--mpfg-rust) !important;
  font-family:"Indie Flower","Comic Sans MS",cursive !important;
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.08;
  letter-spacing:.01em;
  font-weight:400;
  text-transform:none;
}

.mpfg-placeholder,
.mpfg-empty{
  height:100%;
  min-height:160px;
  display:grid;
  place-items:center;
  color:var(--mpfg-ink-3) !important;
  font-size:13px;
  font-style:italic;
  border:1px dashed rgba(36,48,47,.18);
  border-radius:16px;
  background:rgba(255,255,255,.35);
}

.mpfg-empty-side{
  visibility:hidden;
}

/* Page-turn leaf: a real temporary page layer, not a whole-book fade. */
.mpfg-turn-leaf{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:50% !important;
  height:100% !important;
  z-index:20 !important;
  background:#fbf7f1;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  will-change:transform, box-shadow;
  pointer-events:none !important;
  overflow:hidden;
}

.mpfg-turn-leaf.is-next{
  left:50% !important;
  transform-origin:left center;
  box-shadow:-18px 0 28px -30px rgba(0,0,0,.9);
}

.mpfg-turn-leaf.is-prev{
  left:0 !important;
  transform-origin:right center;
  box-shadow:18px 0 28px -30px rgba(0,0,0,.9);
}

.mpfg-turn-leaf.is-next.is-animating{animation:mpfgLeafNext .66s cubic-bezier(.45,.04,.2,1) both;}
.mpfg-turn-leaf.is-prev.is-animating{animation:mpfgLeafPrev .66s cubic-bezier(.45,.04,.2,1) both;}

@keyframes mpfgLeafNext{
  0%{transform:rotateY(0deg); box-shadow:-8px 0 18px -20px rgba(0,0,0,.8);}
  45%{transform:rotateY(-92deg); box-shadow:-34px 0 42px -22px rgba(0,0,0,.65);}
  100%{transform:rotateY(-178deg); box-shadow:-4px 0 12px -16px rgba(0,0,0,.4);}
}

@keyframes mpfgLeafPrev{
  0%{transform:rotateY(0deg); box-shadow:8px 0 18px -20px rgba(0,0,0,.8);}
  45%{transform:rotateY(92deg); box-shadow:34px 0 42px -22px rgba(0,0,0,.65);}
  100%{transform:rotateY(178deg); box-shadow:4px 0 12px -16px rgba(0,0,0,.4);}
}

/* Navigation */
.mpfg-turn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:9;
  width:58px;
  height:88px;
  border:0 !important;
  border-radius:0 !important;
  display:grid;
  place-items:center;
  background:transparent !important;
  color:var(--mpfg-rust) !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease, color .2s ease;
}

.mpfg-turn:hover{
  background:transparent !important;
  color:var(--mpfg-rust-2) !important;
  transform:translateY(-50%) scale(1.06);
}

.mpfg-turn:disabled{
  opacity:.25;
  cursor:not-allowed;
}

.mpfg-turn svg{
  width:34px;
  height:48px;
}

.mpfg-turn svg path{
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mpfg-prev{left:0;}
.mpfg-next{right:0;}

.mpfg-mobile-nav{
  position:relative;
  display:flex !important;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:28px auto 8px;
  padding:0;
  z-index:8;
}

.mpfg-mobile-nav button{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  padding:0 !important;
  border:2px solid var(--mpfg-rust) !important;
  border-radius:50% !important;
  background:transparent !important;
  color:var(--mpfg-rust) !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,opacity .18s ease;
}

.mpfg-mobile-nav button:hover{
  background:var(--mpfg-rust) !important;
  color:#fff !important;
}

.mpfg-mobile-nav button:disabled{
  opacity:.28;
  cursor:not-allowed;
  background:transparent !important;
  color:var(--mpfg-rust) !important;
}

.mpfg-navico{
  display:block;
  width:24px;
  height:24px;
}

.mpfg-indicator{
  min-width:118px;
  height:44px;
  padding:0 16px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--mpfg-rust);
  color:#fff !important;
  font-size:20px;
  line-height:1;
  font-weight:900;
  letter-spacing:.02em;
}

.mpfg-pager{
  display:none !important;
}

.mpfg-pager button{
  min-width:34px;
  height:34px;
  padding:0 10px !important;
  border:1px solid rgba(160,64,32,.28) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--mpfg-rust) !important;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.mpfg-pager button[aria-current="true"]{
  background:var(--mpfg-rust) !important;
  color:#fff !important;
}

.mpfg-pager button:disabled{
  opacity:.28;
  cursor:not-allowed;
}

.mpfg-summary{
  max-width:980px;
  margin:14px auto 0;
  text-align:center;
  color:var(--mpfg-ink-3) !important;
  font-size:13px;
}

@media (max-width:1199px){
  .mpfg-stage{width:min(900px, calc(100% - 22px)); padding:0;}
  .mpfg-book{width:min(780px,100%); padding:18px; border-radius:28px;}
  .mpfg-book-inner{height:clamp(520px,75vw,680px);}
  .mpfg-page{padding:18px; gap:14px;}
  .mpfg-turn{display:none !important;}
  .mpfg-pager{display:none;}
  .mpfg-name{font-size:clamp(24px,3.4vw,32px);}
  .mpfg-filter-bar{justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-left:4px; padding-right:4px;}
}

@media (max-width:767px){
  .mpfg-widget{padding:30px 0;}
  .mpfg-section-head{width:calc(100% - 28px);}
  .mpfg-section-head h2{font-size:clamp(38px,12vw,48px) !important;}
  .mpfg-filter-bar{width:calc(100% - 20px); margin-bottom:-1px;}
  .mpfg-filter{min-width:70px; min-height:68px; padding:9px 8px 11px !important;}
  .mpfg-filter .mpfg-label{font-size:9px;}
  .mpfg-stage{width:100%; padding:0 12px;}
  .mpfg-book{width:min(440px,100%); padding:14px; border-radius:24px;}
  .mpfg-book-inner{height:min(620px,76vh); min-height:500px; border-radius:18px;}
  .mpfg-pages{grid-template-columns:1fr; background:#fbf7f1;}
  .mpfg-page{grid-template-rows:minmax(0,1fr); padding:16px; gap:0; box-shadow:none;}
  .mpfg-card.mpfg-layout-full,
  .mpfg-card.mpfg-layout-half{grid-row:auto;}
  .mpfg-name{font-size:30px;}
  .mpfg-mobile-nav{gap:8px; margin-top:20px;}
  .mpfg-mobile-nav button{width:40px !important; height:40px !important; min-width:40px !important;}
  .mpfg-indicator{min-width:94px; height:40px; font-size:17px;}
  .mpfg-turn-leaf{width:100% !important; left:0 !important;}
}

@media (prefers-reduced-motion: reduce){
  .mpfg-widget *, .mpfg-sp *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* --------------------------------------------------------------------------
   Single species page — clean adaptive layout
   -------------------------------------------------------------------------- */
.mpfg-sp{
  --mpfg-rust:#a04020;
  --mpfg-rust-2:#c45a2c;
  --mpfg-ink:#24302f;
  --mpfg-ink-2:#4f5c59;
  --mpfg-ink-3:#7c8984;
  --mpfg-paper:#f8f3ee;
  --mpfg-paper-2:#fffaf4;
  --mpfg-line:rgba(36,48,47,.14);
  --mpfg-blue:#384360;
  margin:0;
  padding:0 0 64px;
  background:#f6f1e8;
  color:var(--mpfg-ink);
  font-family:"Ubuntu",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.mpfg-sp a{color:inherit;}

.mpfg-sp-mast{
  min-height:clamp(280px,34vw,440px);
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  isolation:isolate;
}

.mpfg-sp-mast::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.38));
  z-index:-1;
}

.mpfg-sp-mast-inner{text-align:center;color:#fff; padding:60px 20px 80px;}
.mpfg-sp-livepill{
  display:inline-flex;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(160,64,32,.95);
  color:#fff !important;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.mpfg-sp-masttitle{
  margin:12px 0 0;
  font-family:"Ubuntu",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  color:#fff !important;
  font-size:clamp(54px,8vw,104px) !important;
  line-height:.95 !important;
  font-weight:700 !important;
  letter-spacing:-.04em !important;
  text-transform:none !important;
}
.mpfg-sp-brush{position:absolute; left:0; right:0; bottom:-1px; height:90px; background-repeat:repeat-x; background-size:auto 100%; pointer-events:none;}

.mpfg-sp-shell{width:min(1180px, calc(100% - 28px)); margin:-38px auto 0; position:relative; z-index:2;}
.mpfg-sp-crumbrow{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap;}
.mpfg-sp-crumb{font-size:12px; color:#fff; display:flex; gap:8px; align-items:center; flex-wrap:wrap; text-shadow:0 1px 3px rgba(0,0,0,.35);}
.mpfg-sp-crumb a{color:#fff !important; text-decoration:none !important;}
.mpfg-sp-crumb-current{font-weight:900;}
.mpfg-sp-back{display:inline-flex; align-items:center; gap:7px; text-decoration:none !important; color:#fff !important; background:var(--mpfg-rust) !important; border-radius:999px; padding:10px 16px; font-size:12px; font-weight:900;}

.mpfg-sp-titleblock{background:var(--mpfg-paper-2); border:1px solid var(--mpfg-line); border-radius:28px; padding:28px clamp(22px,4vw,46px); box-shadow:0 28px 70px -58px rgba(0,0,0,.65);}
.mpfg-sp-eyebrow{display:block; color:var(--mpfg-rust) !important; font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;}
.mpfg-sp-name{margin:6px 0 6px; color:var(--mpfg-ink) !important; font-size:clamp(34px,5vw,68px) !important; line-height:.95 !important; letter-spacing:-.04em !important; text-transform:none !important;}
.mpfg-sp-sci{margin:0; color:var(--mpfg-ink-2) !important; font-size:15px; line-height:1.5;}
.mpfg-sp-sci-sep{opacity:.42; padding:0 7px;}

.mpfg-sp-grid{display:grid; grid-template-columns:minmax(320px,430px) minmax(0,1fr); gap:clamp(24px,4vw,48px); align-items:start; margin-top:28px;}
.mpfg-sp-flipshell{position:sticky; top:96px; perspective:1500px;}
.mpfg-sp-flipbtn{position:absolute; right:18px; top:18px; z-index:7; border:0 !important; border-radius:999px !important; background:var(--mpfg-rust) !important; color:#fff !important; padding:9px 14px !important; font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;}
.mpfg-sp-card{height:clamp(620px,62vw,740px); position:relative; transform-style:preserve-3d; transition:transform .56s cubic-bezier(.45,.04,.2,1);}
.mpfg-sp-card.is-flipped{transform:rotateY(180deg);}
.mpfg-sp-face{position:absolute; inset:0; overflow:auto; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:linear-gradient(180deg,#fffaf4,#f5ece2); border:1px solid var(--mpfg-line); border-radius:28px; box-shadow:0 24px 60px -48px rgba(0,0,0,.75); padding:24px;}
.mpfg-sp-rear{transform:rotateY(180deg);}
.mpfg-sp-badges{display:flex; gap:8px; margin-bottom:12px;}
.mpfg-sp-badge{width:38px; height:38px; border-radius:999px; background:var(--mpfg-ink); display:grid; place-items:center;}
.mpfg-sp-badge img{width:22px; height:22px; object-fit:contain; filter:brightness(0) invert(1);}
.mpfg-sp-illus{height:clamp(220px,23vw,300px); position:relative; margin:8px 0 18px;}
.mpfg-sp-illus img{width:100%; height:100%; object-fit:contain; object-position:center; display:block;}
.mpfg-sp-cardname{font-size:clamp(26px,3vw,40px); line-height:1; color:var(--mpfg-ink) !important; font-weight:900; letter-spacing:-.04em; margin-bottom:16px;}
.mpfg-sp-facts{display:grid; gap:9px; margin:0;}
.mpfg-sp-fact{display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px; padding:10px 0; border-top:1px solid var(--mpfg-line);}
.mpfg-sp-fact dt{color:var(--mpfg-rust) !important; font-size:10px; line-height:1.25; font-weight:900; letter-spacing:.12em; text-transform:uppercase;}
.mpfg-sp-fact dd{margin:0; color:var(--mpfg-ink-2) !important; font-size:13px; line-height:1.45;}
.mpfg-sp-audio{margin-top:14px;}
.mpfg-sp-audio audio{width:100%;}
.mpfg-sp-backsec{margin-bottom:24px;}
.mpfg-sp-backsec h3{margin:0 0 10px; color:var(--mpfg-blue) !important; font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;}
.mpfg-sp-backsec p{margin:0; color:var(--mpfg-ink-2) !important; font-size:14px; line-height:1.6;}
.mpfg-sp-backsec img{max-width:100%; height:auto; display:block; margin:0 0 12px;}
.mpfg-sp-trivia{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px;}
.mpfg-sp-trivopt{display:flex; gap:8px; align-items:flex-start; padding:10px 12px; background:#fff; border:1px solid var(--mpfg-line); border-radius:12px; color:var(--mpfg-ink-2) !important;}
.mpfg-sp-trivopt.is-correct{border-color:#6f8f79; background:#eaf1e8; color:var(--mpfg-ink) !important;}
.mpfg-sp-trivopt.is-wrong{border-color:#a04020; background:#f7e7df;}
.mpfg-sp-answer summary{cursor:pointer; color:var(--mpfg-rust) !important; font-weight:900; font-size:12px; margin-top:12px;}

.mpfg-sp-main{min-width:0;}
.mpfg-sp-tabbar{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px;}
.mpfg-sp-tab{border:1px solid rgba(160,64,32,.25) !important; background:#fff !important; color:var(--mpfg-rust) !important; border-radius:999px !important; padding:10px 15px !important; font-size:12px; font-weight:900; cursor:pointer;}
.mpfg-sp-tab.is-active{background:var(--mpfg-rust) !important; color:#fff !important;}
.mpfg-sp-panels{background:var(--mpfg-paper-2); border:1px solid var(--mpfg-line); border-radius:26px; padding:clamp(22px,3vw,36px); min-height:360px;}
.mpfg-sp-panel{display:none; max-height:460px; overflow:auto; padding-right:8px;}
.mpfg-sp-panel.is-active{display:block;}
.mpfg-sp-panel p{margin:0; color:var(--mpfg-ink-2) !important; font-size:16px; line-height:1.78;}
.mpfg-sp-gallery{margin-top:22px; background:var(--mpfg-ink); border-radius:24px; padding:24px; color:#fff;}
.mpfg-sp-gallery-label{display:block; margin-bottom:12px; color:#fff !important; font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;}
.mpfg-sp-gallery-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.mpfg-sp-gallery figure{margin:0; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:#111;}
.mpfg-sp-gallery img{width:100%; height:100%; object-fit:cover; display:block;}
.mpfg-sp-dyk{margin-top:22px; display:grid; gap:8px; background:var(--mpfg-rust); color:#fff; border-radius:24px; padding:24px;}
.mpfg-sp-dyk strong{color:#fff !important; font-size:12px; letter-spacing:.16em; text-transform:uppercase;}
.mpfg-sp-dyk span{color:#fff !important; font-size:16px; line-height:1.6;}
.mpfg-sp-share{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;}
.mpfg-sp-sharebtn:hover{filter:brightness(1.08);}
.mpfg-sp-tags{display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0;}
.mpfg-sp-tag{display:inline-flex; border:1px solid var(--mpfg-line); border-radius:999px; padding:8px 12px; background:#fff; color:var(--mpfg-ink-2) !important; font-size:12px; font-weight:800;}
.mpfg-sp-related{margin-top:40px;}
.mpfg-sp-related h2{margin:0 0 16px; color:var(--mpfg-ink) !important; font-size:clamp(24px,3vw,36px) !important; text-transform:none !important;}
.mpfg-sp-related-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
.mpfg-sp-relcard{display:block; text-decoration:none !important; background:var(--mpfg-paper-2); border:1px solid var(--mpfg-line); border-radius:22px; padding:14px; color:var(--mpfg-ink) !important;}
.mpfg-sp-relimg{display:block; aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:#eee; margin-bottom:12px;}
.mpfg-sp-relimg img{width:100%; height:100%; object-fit:cover; display:block;}
.mpfg-sp-releyebrow{display:block; color:var(--mpfg-rust) !important; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;}
.mpfg-sp-relname{display:block; color:var(--mpfg-ink) !important; font-size:18px; line-height:1.15; font-weight:900; margin-top:4px;}
.mpfg-sp-rellink{display:block; color:var(--mpfg-rust) !important; font-size:12px; font-weight:900; margin-top:10px;}

@media (max-width:1024px){
  .mpfg-sp-grid{grid-template-columns:1fr;}
  .mpfg-sp-flipshell{position:relative; top:auto; max-width:520px; width:100%; margin:0 auto;}
  .mpfg-sp-card{height:680px;}
  .mpfg-sp-panels{min-height:auto;}
  .mpfg-sp-panel{max-height:none; overflow:visible; padding-right:0;}
}

@media (max-width:767px){
  .mpfg-sp-shell{width:calc(100% - 24px); margin-top:-28px;}
  .mpfg-sp-titleblock{border-radius:22px; padding:22px;}
  .mpfg-sp-crumb{color:var(--mpfg-ink-2); text-shadow:none;}
  .mpfg-sp-crumb a{color:var(--mpfg-ink-2) !important;}
  .mpfg-sp-card{height:700px;}
  .mpfg-sp-face{padding:20px; border-radius:22px;}
  .mpfg-sp-fact{grid-template-columns:1fr; gap:4px;}
  .mpfg-sp-gallery-row{grid-template-columns:1fr;}
  .mpfg-sp-related-row{grid-template-columns:1fr;}
  .mpfg-sp-share{display:grid; grid-template-columns:1fr 1fr;}
  .mpfg-sp-sharebtn{text-align:center;}
}

@media print{
  .mpfg-sp-mast,.mpfg-sp-crumbrow,.mpfg-sp-flipbtn,.mpfg-sp-share,.mpfg-sp-related{display:none !important;}
  .mpfg-sp{background:#fff; padding:0;}
  .mpfg-sp-shell{width:100%; margin:0;}
  .mpfg-sp-grid{grid-template-columns:1fr;}
  .mpfg-sp-flipshell{position:relative; top:auto;}
  .mpfg-sp-card{height:auto; transform:none !important;}
  .mpfg-sp-face{position:relative; inset:auto; transform:none !important; box-shadow:none; page-break-inside:avoid;}
  .mpfg-sp-rear{display:none;}
}