/* March Marmots — base styles. Corporate design palette (official red #FF1420 ramp).
   TODO: Replace headings with a licensed Shuttleblock (Typodermic Fonts) cut or the
   Marchmarmots.otf (Fort Foundry / Clark Orr) webfont once the Vorstand confirms web
   embedding is covered. Until then Chakra Petch (free, Google Fonts) stands in for the
   blocky condensed logo face. Body font Chivo stays; the CD specifies no body font. */
/* deploy-nudge 2026-07-24: force Pages rebuild for the responsive nav commit */
:root{
  --bg:#0e0708; --panel:#150a0b; --panel-2:#110809;
  --card:#1d0f10; --card-2:#1a0d0e; --border:#341a1b; --border-2:#3c1e1f;
  --red:#ff1420; --red-600:#b50a11; --red-700:#8a060a; --red-900:#540100; --grey-brand:#808080;
  --red-line:#540100; --red-soft:#ff7a80;
  --text:#f5ece9; --text-2:#d8bfbd; --text-3:#c2a9a7; --muted:#9a827f; --muted-2:#ab938f;
  --head:"Chakra Petch",sans-serif; --body:"Chivo",sans-serif;
  --content:1440px; --pad-x:max(22px,calc((100% - var(--content))/2));
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);}
img{display:block;}
a{color:var(--red);text-decoration:none;}
a:hover{color:var(--red-soft);}
@keyframes mmfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes mmpulse{0%,100%{box-shadow:0 0 6px var(--red);opacity:1}50%{box-shadow:0 0 14px var(--red);opacity:.7}}
@keyframes mmview{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mm404spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.mm-404-spin{animation:mm404spin 1.7s linear infinite;transform-style:preserve-3d;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;}
}

/* Interaction states (the .dc export used a runtime feature for these). */
.nav-a:hover,.foot-a:hover{color:#fff !important;}
.btn-red{transition:box-shadow .15s;}
.btn-red:hover{box-shadow:0 0 26px rgba(255,20,32,.55);}
.btn-ghost{transition:border-color .15s;}
.btn-ghost:hover{border-color:var(--red) !important;}
.card-lift{transition:transform .18s,border-color .18s;}
.card-lift:hover{transform:translateY(-5px);border-color:var(--red) !important;}
.social-card{transition:transform .15s,border-color .15s;}
.social-card:hover{transform:translateY(-3px);border-color:var(--red) !important;}

/* ---- responsive: the design ships fixed-column grids inline; collapse them
   as the viewport narrows (override the inline value with !important). ---- */
@media (max-width:1024px){
  [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(3,1fr) !important;}
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:680px){
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:88px 1fr"]{grid-template-columns:60px 1fr !important;}
  h1{font-size:40px !important;}
}

/* ---- top navigation: deliberate layout at every width ----
   Desktop is one row (brand | links | actions). Below 900px the links move to
   their own centered second row, so the bar can no longer wrap unpredictably from
   one phone/browser to the next. Below 440px the five links shrink a touch so they
   still fit on that single row on the narrowest phones. */
.mm-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.mm-nav-brand{margin-right:auto;flex:none;}
.mm-nav-links{display:flex;align-items:center;gap:2px;}
.mm-nav-actions{display:flex;align-items:center;flex:none;}
@media (max-width:900px){
  .mm-nav-actions{order:2;}
  .mm-nav-links{order:3;flex-basis:100%;justify-content:center;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid var(--border);}
}
@media (max-width:500px){
  /* Logo mark only on narrow phones so the top row = logo + Discord + language
     comfortably fits on one line (the wordmark + both would overflow). */
  .mm-nav-brand span{display:none;}
}
@media (max-width:440px){
  .mm-nav-links .nav-a{padding:8px 9px !important;font-size:12px !important;}
}

/* ---- scroll reveal: blocks fade + rise in as they enter the viewport ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform;}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ---- 404: Minecraft-style "advancement" toast ----
   Mimics the challenge-tier toast (light-purple header + pixel font) that pops
   for the real "How did we get here?" advancement. Slides in top-right, holds, slides out. */
@keyframes mm-ach-in{
  0%{transform:translateX(125%);}
  8%{transform:translateX(0);}
  87%{transform:translateX(0);}
  100%{transform:translateX(125%);}
}
.mm-ach{position:fixed;top:20px;right:20px;z-index:120;display:flex;align-items:center;gap:12px;
  width:300px;max-width:calc(100vw - 40px);padding:12px 14px;background:#241726;color:#fff;
  border:2px solid #100810;box-shadow:0 0 0 2px #a742d6,0 0 20px rgba(167,66,214,.4),0 8px 22px rgba(0,0,0,.55);
  transform:translateX(125%);animation:mm-ach-in 6.6s cubic-bezier(.22,1,.36,1) .7s forwards;}
.mm-ach-slot{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;background:#0d060e;border:2px solid #000;}
.mm-ach-slot img{width:26px;height:26px;filter:drop-shadow(0 0 5px rgba(255,20,32,.6));}
.mm-ach-txt{min-width:0;}
.mm-ach-head{font-family:"Press Start 2P","Chakra Petch",monospace;font-size:8px;line-height:1.5;color:#e6a9ff;}
.mm-ach-name{font-family:"Press Start 2P","Chakra Petch",monospace;font-size:9px;line-height:1.7;margin-top:6px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---- 404: pokeable marmot + speech bubble ---- */
.mm-404-marm{cursor:pointer;outline:none;}
.mm-404-marm:focus-visible{filter:drop-shadow(0 0 9px var(--red));}
@keyframes mm-poke{0%{transform:translateY(0) rotate(0)}22%{transform:translateY(-28px) rotate(-9deg)}52%{transform:translateY(0) rotate(7deg)}74%{transform:translateY(-9px) rotate(-4deg)}100%{transform:translateY(0) rotate(0)}}
.mm-poked{animation:mm-poke .6s ease !important;}
.mm-bubble{position:absolute;left:50%;bottom:calc(100% - 6px);transform:translate(-50%,8px) scale(.85);
  background:#fff;color:#160a0b;font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.3px;
  padding:8px 13px;border-radius:12px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;box-shadow:0 8px 20px rgba(0,0,0,.45);z-index:3;}
.mm-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff;}
.mm-bubble.show{opacity:1;transform:translate(-50%,0) scale(1);}
@media (prefers-reduced-motion: reduce){
  .mm-ach{transform:none !important;} /* no slide → show it parked in place */
}