/* MAG designer resources. Tokens: brand/tokens.css. Mobile first. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font);color:var(--mag-black);background:var(--mag-white)}
body>footer{margin-top:auto}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.dark :focus-visible{outline-color:var(--mag-white)}
.skip{position:absolute;left:var(--space-4);top:-100px;background:var(--mag-black);color:var(--mag-white);padding:var(--space-3) var(--space-4);z-index:9}
.skip:focus{top:var(--space-2)}
.wrap{max-width:76rem;width:100%;margin:0 auto;padding:0 var(--space-4)} /* width:100% so the header, a flex child of body, does not shrink to its content */
.logo{display:block;background:currentColor;-webkit-mask:var(--logo) left center/contain no-repeat;mask:var(--logo) left center/contain no-repeat}

/* header */
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-4)}
.bar .logo{--logo:url(brand/logo/mag-single-line.svg);width:110px;aspect-ratio:659/80;flex:none}
.bar nav{display:flex;margin-left:auto;gap:var(--space-4);font-weight:var(--fw-bold);font-size:.9375rem}
.bar a{text-decoration:none;padding-block:var(--space-2)}
.bar a:hover,.bar a[aria-current]{text-decoration:underline;text-decoration-thickness:3px}

/* blocks */
.dark{background:var(--mag-black);color:var(--mag-white)}
.grey{background:var(--mag-grey)}
section{padding-block:var(--space-6)}
h1,h2,h3{font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);margin:0}
h1{font-size:clamp(2.5rem,8vw,4.5rem);line-height:.95}
h2{font-size:var(1.5rem);line-height:1.05}
h3{font-size:var(--fs-h3);line-height:1.2;margin-bottom:var(--space-2)}
p{margin:0 0 var(--space-4);max-width:var(--measure)}
.lead{font-size:1.125rem;line-height:1.4}
.meta{font-size:var(--fs-meta)}
.btn{display:inline-block;border:var(--border-strong) solid currentColor;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-5);font-weight:var(--fw-bold);text-decoration:none}
.btn:hover{background:var(--mag-white);color:var(--mag-black)}
.dark .btn:hover{background:var(--mag-white);color:var(--mag-black)}
.btn:not(.dark *):hover{background:var(--mag-black);color:var(--mag-white)}

/* hero */
.hero{padding-block:var(--space-6)}
.hero h1{max-width:9ch}
.hero .lead{margin-top:var(--space-4);max-width:34rem}
.hero .btn{margin-top:var(--space-4)}
.page-head{padding-block:var(--space-6)}
.page-head h1{font-size:clamp(2.25rem,7vw,4rem)}
.page-head p{margin-top:var(--space-5)}

/* text sections */
.split{display:grid;gap:var(--space-5)}
.split>h2{margin-bottom:var(--space-2)}
.split ul{margin:0 0 var(--space-4);padding-left:1.2em;max-width:var(--measure)}
.split li{margin-bottom:var(--space-2)}
.kits{display:grid;gap:var(--space-5);margin-top:var(--space-5)}
figure{margin:0}
figure img{border-radius:var(--radius-md);width:100%}
figcaption{margin-top:var(--space-3);font-weight:var(--fw-bold)}
figcaption span{display:block;font-weight:var(--fw-regular);font-size:var(--fs-meta)}
.legends{display:grid;gap:var(--space-5);align-items:center}
.legends img{width:100%}

/* downloads */
.dl{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.dl li{background:var(--mag-grey);border-radius:var(--radius-md);padding:var(--space-5);display:grid;gap:var(--space-2)}
.dl h2{font-size:var(--fs-h3)}
.dl p{margin:0}
.dl .meta{font-weight:var(--fw-bold)}
@media(min-width:860px){.dl .meta{text-align:right}}
.dl .soon{opacity:1}
.dl .soon h2::after{content:"Coming soon";display:block;font-size:var(--fs-meta);font-weight:var(--fw-regular);font-style:italic;color:var(--mag-muted-text,#6b6966);margin-top:2px}
.dl .soon .meta{font-weight:var(--fw-regular)}

/* footer */
footer{padding-block:var(--space-7)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);justify-content:space-between}
footer p{margin:0}

@media(min-width:860px){
  .wrap{padding:0 var(--space-6)}
  .bar .logo{width:140px}
  section{padding-block:var(--space-7)}
    .split{grid-template-columns:1fr 2fr;gap:var(--space-6)}
  .kits{grid-template-columns:1fr 1fr;gap:var(--space-6)}
  .legends{grid-template-columns:1fr 1fr;gap:var(--space-7)}
  .dl li{grid-template-columns:1fr 2fr 8rem;align-items:center;gap:var(--space-5)}
}
@media(prefers-reduced-motion:no-preference){.btn{transition:background .15s,color .15s}}

/* zoom: click a kit render to see it full-screen (a.zoom links to the full image, so it works without JS too) */
a.zoom{display:block;cursor:zoom-in}
dialog.zoom{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh}
dialog.zoom::backdrop{background:rgba(18,17,16,.92)}
dialog.zoom img{display:block;max-width:96vw;max-height:96vh;width:auto;height:auto;cursor:zoom-out}