/* survivalzomb.com/storefront: page chrome around the design's own markup
   (site/storefront.html is generated by tools/dc-to-storefront.mjs). Cream
   paper, ink outlines, hard shadows: the retro comic system of the brand. */
:root{--ink:#17130F;--paper:#F1ECE1;--cream:#FFF4DC;--butter:#FFD23F;--mute:#6b645b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);font-family:Fredoka,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}a:hover{color:#FF7A3D}
img{max-width:100%}

.sf-top{position:sticky;top:0;z-index:100;background:var(--butter);border-bottom:3px solid var(--ink);background-image:radial-gradient(rgba(23,19,15,.12) 1.4px,transparent 1.5px);background-size:14px 14px}
.sf-wrap{max-width:1400px;margin:0 auto;padding:10px 48px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.sf-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 22px 'Lilita One',sans-serif;letter-spacing:.02em}
.sf-brand img{width:34px;height:34px}
.sf-top nav{display:flex;align-items:center;gap:18px;font:700 14px Fredoka,sans-serif}
.sf-top nav a{text-decoration:none}
.sf-cta{background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px 14px;box-shadow:3px 3px 0 var(--ink)}
.sf-cta:hover{background:#7ED957;color:var(--ink)}

.sf{max-width:1400px;margin:0 auto;padding:40px 48px 80px;display:flex;flex-direction:column;gap:48px;align-items:flex-start;overflow-x:clip}
.sf-intro{display:flex;flex-direction:column;gap:6px}
.sf-kicker{font:400 12px ui-monospace,Menlo,monospace;color:#8a8378;letter-spacing:.06em}
.sf-intro h1{margin:0;font:700 30px/1.05 Fredoka,sans-serif}
.sf-intro p{margin:0;font:400 14px/1.5 Fredoka,sans-serif;color:#4a4540;max-width:720px}
.sf section{max-width:100%}
.sf section>div{max-width:100%}

/* download strip under each section */
.dl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.dl span{font:600 12px ui-monospace,Menlo,monospace;color:var(--mute);letter-spacing:.06em;margin-right:4px}
.dl a{font:700 12px Fredoka,sans-serif;text-decoration:none;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:5px 11px;box-shadow:2px 2px 0 var(--ink)}
.dl a:hover{background:var(--butter);color:var(--ink);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

/* fixed-size boards (phones, feature graphic) scale down on narrow screens */
.fit{position:relative;width:calc(var(--w)*var(--k,1)*1px);max-width:100%}
.fit>*{transform:scale(var(--k,1));transform-origin:top left}

.sf-foot{max-width:1400px;margin:0 auto;padding:24px 48px 40px;font:500 13px Fredoka,sans-serif;color:var(--mute);border-top:3px solid var(--ink);display:flex;flex-wrap:wrap;gap:6px 14px}
.sf-foot a{color:var(--ink);text-decoration:none;font-weight:700}

/* the design's nav/footer markup (written by tools/dc-to-site.mjs) */
header.top .hv1{transition:transform .15s,box-shadow .15s;white-space:nowrap}
header.top .hv1:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);color:var(--ink)}
@media (max-width:820px){
  header.top .navlinks{display:none!important}
  header.top>div{padding:10px 16px!important}
  footer.foot>div{padding:22px 16px!important}
  header.top [style*="font:400 22px 'Lilita One'"]{font-size:18px!important}
  .sf [style*="gap:16px;align-items:flex-end"]{flex-wrap:wrap}
  .sf-wrap{padding:8px 16px}
  .sf-top nav{gap:10px;font-size:13px}
  .sf-top nav a:not(.sf-cta){display:none}
  .sf{padding:24px 16px 60px;gap:36px}
  .sf-foot{padding:20px 16px 32px}
  .sf section>div[style*="padding:28px"]{padding:16px!important;border-radius:20px!important}
  .sf [style*="min-width:360px"]{min-width:0!important}
  .sf [style*="gap:36px"]{gap:24px!important}
}