@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root{
    --mz-ease:cubic-bezier(.16,1,.3,1);
    --mz-sans:'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; overflow-x:hidden; }

body{
    min-height:100vh;
    font-family:var(--mz-sans);
    -webkit-font-smoothing:antialiased;
    overflow-wrap:break-word;
    word-break:break-word;
    background:var(--mz-bg);
    color:var(--mz-fg);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

/* Each page sets body class="theme-dark" or "theme-light" (see includes/head-open.php).
   Everything below reads its colors from these variables, so a page only has to
   pick a theme once instead of re-declaring every color. */
body.theme-dark{
    --mz-bg:#0a0a0b;
    --mz-fg:#ECE9E2;
    --mz-fg-dim:rgba(236,233,226,.5);
    --mz-line:rgba(236,233,226,.08);
    --mz-line-strong:rgba(236,233,226,.22);
}
body.theme-light{
    --mz-bg:#fff;
    --mz-fg:#111;
    --mz-fg-dim:#767676;
    --mz-line:rgba(17,17,17,.08);
    --mz-line-strong:rgba(17,17,17,.22);
}

/* film-grain overlay used on dark pages (see includes/head-open.php) */
.mz-grain{ position:fixed; inset:0; z-index:0; pointer-events:none; mix-blend-mode:overlay; opacity:.55; }

/* the wide, centered wrapper used by "gallery style" pages (home, the Fourth Wall) */
.mz-page{ position:relative; z-index:1; max-width:1600px; margin:0 auto; padding:20px 48px 100px; }

/* ============ intro loader, site-wide ============ */
body::before{
    content:"";
    position:fixed;
    inset:0;
    /* iOS Safari's bottom bar can shrink/grow the visible area without
       resizing a plain 100vh/inset:0 box, leaving a sliver uncovered at
       the bottom. 100dvh tracks the real, current visible area instead. */
    height:100vh;
    height:100dvh;
    background:#000;
    z-index:2147483645;
    animation:mzIntroScreen 2s ease 2s forwards;
}
body::after{
    content:"";
    position:fixed;
    inset:0;
    height:100vh;
    height:100dvh;
    background-image:url("/assets/images/2026MZXIVW2.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:170px auto;
    z-index:2147483647;
    pointer-events:none;
    animation:mzIntroFade 2s ease 1s forwards;
}
html::before{
    content:"";
    position:fixed;
    top:calc(50% + 100px);
    left:calc(50% - 60px);
    width:120px;
    height:2px;
    border-radius:1px;
    background:#fff;
    transform-origin:left center;
    transform:scaleX(0);
    z-index:2147483646;
    pointer-events:none;
    animation:mzBarFill .7s cubic-bezier(.4,0,.2,1) .2s forwards, mzIntroFade 2s ease 1s forwards;
}
@keyframes mzBarFill{ to{ transform:scaleX(1); } }
@keyframes mzIntroFade{ 0%{ opacity:1; visibility:visible; } 100%{ opacity:0; visibility:hidden; } }
@keyframes mzIntroScreen{
    0%{ opacity:1; visibility:visible; pointer-events:auto; }
    49%{ pointer-events:auto; }
    50%{ pointer-events:none; }
    100%{ opacity:0; visibility:hidden; pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){
    body::before, body::after, html::before{ animation-duration:.01ms !important; }
}

/* ============ header ============ */

.mz-header{
    position:relative;
    z-index:2; /* stays clickable above anything that overlaps it, like a banner using negative margin */
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    max-width:1600px;
    margin:0 auto;
    padding:18px 48px;
}
.mz-header--bordered{ border-bottom:1px solid var(--mz-line); margin-bottom:48px; }

.mz-logo-wrap{ grid-column:2; display:flex; justify-content:center; }
.mz-logo-wrap a{ display:flex; transition:opacity .25s ease; }
.mz-logo-wrap a:hover{ opacity:.8; }
.mz-logo-wrap a:focus-visible{ outline:1px solid var(--mz-fg); outline-offset:6px; }
.mz-logo{ display:block; height:76px; width:auto; }

.mz-left{ grid-column:1; justify-self:start; display:flex; align-items:center; gap:8px; }
.mz-right{ grid-column:3; justify-self:end; }

/* the hover-reveal "< Return Home" link */
.mz-back{ display:inline-flex; align-items:center; text-decoration:none; color:var(--mz-fg); }
.mz-back-icon{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0; }
.mz-back-icon svg{ width:15px; height:15px; display:block; }
.mz-back:focus-visible{ outline:1px solid var(--mz-fg); outline-offset:4px; }
.mz-back-label{
    font-weight:400;
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    white-space:nowrap;
    color:var(--mz-fg);
    opacity:0;
    max-width:0;
    margin-left:0;
    overflow:hidden;
    transition:opacity .25s ease, max-width .3s ease, margin-left .3s ease;
}
@media (hover:hover) and (pointer:fine){
    .mz-back:hover .mz-back-label,
    .mz-back:focus-visible .mz-back-label{
        opacity:1;
        max-width:160px;
        margin-left:10px;
    }
}

/* the +/x and @/x corner toggle buttons */
.mz-toggle{
    all:unset;
    cursor:pointer;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    color:var(--mz-fg-dim);
    transition:color .3s ease;
}
.mz-toggle:hover{ color:var(--mz-fg); }
.mz-toggle.is-active{ color:var(--mz-fg); }
.mz-toggle:focus-visible{ outline:1px solid var(--mz-fg); outline-offset:4px; }

.mz-bar{ position:absolute; top:50%; left:50%; width:14px; height:1.75px; border-radius:1px; background:currentColor; }
.mz-bar--h{ transform:translate(-50%,-50%) rotate(0deg); transition:transform .4s var(--mz-ease); }
.mz-bar--v{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .4s var(--mz-ease); }
.mz-toggle.is-active .mz-bar--h{ transform:translate(-50%,-50%) rotate(45deg); }
.mz-toggle.is-active .mz-bar--v{ transform:translate(-50%,-50%) rotate(135deg); }

.mz-glyph{
    position:absolute; top:50%; left:50%;
    font-size:19px; font-weight:300; line-height:1;
    transform:translate(-50%,-50%) rotate(0deg) scale(1);
    opacity:1;
    transition:opacity .3s ease, transform .35s var(--mz-ease);
}
.mz-toggle.is-active .mz-glyph{ transform:translate(-50%,-50%) rotate(-90deg) scale(.5); opacity:0; }
.mz-bar--x1{ transform:translate(-50%,-50%) rotate(0deg) scale(.6); opacity:0; transition:opacity .35s ease, transform .45s var(--mz-ease); }
.mz-bar--x2{ transform:translate(-50%,-50%) rotate(90deg) scale(.6); opacity:0; transition:opacity .35s ease, transform .45s var(--mz-ease); }
.mz-toggle.is-active .mz-bar--x1{ transform:translate(-50%,-50%) rotate(-45deg) scale(1); opacity:1; }
.mz-toggle.is-active .mz-bar--x2{ transform:translate(-50%,-50%) rotate(45deg) scale(1); opacity:1; }

/* pop-out panels that slide out beside a corner toggle */
.mz-panel{
    position:absolute;
    top:50%;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s var(--mz-ease), transform .35s var(--mz-ease);
    z-index:20;
}
.mz-panel--left{
    left:136px;
    /* keeps the panel from reaching the centered logo on narrower desktop
       windows — it shrinks the panel's ceiling as the window narrows, and
       the links below wrap onto a second line rather than overlapping */
    max-width:calc(50vw - 180px);
    transform:translateY(-50%) translateX(-10px);
}
.mz-panel--left.is-open{ opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0); }
.mz-panel--right{
    right:90px;
    max-width:calc(50vw - 180px);
    transform:translateY(-50%) translateX(10px);
}
.mz-panel--right.is-open{ opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0); }
.mz-panel nav{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; white-space:nowrap; }
.mz-panel--left nav{ justify-content:flex-start; }
.mz-panel--right nav{ justify-content:flex-end; }
.mz-panel a{ font-weight:300; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mz-fg-dim); transition:color .25s ease; }
.mz-panel a:hover{ color:var(--mz-fg); }
.mz-panel a:focus-visible{ outline:1px solid var(--mz-fg); outline-offset:4px; }

.mz-filter{
    all:unset;
    cursor:pointer;
    font-weight:300;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--mz-fg-dim);
    transition:color .25s ease;
}
.mz-filter:hover{ color:var(--mz-fg); }
.mz-filter.is-active{ color:var(--mz-fg); }

/* ============ the outlined CTA button used across the site ============ */
.mz-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:18px 38px;
    border:1.5px solid var(--mz-fg);
    background:transparent;
    color:var(--mz-fg);
    text-decoration:none;
    font-weight:700;
    font-size:13px;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
    transition:box-shadow .28s ease;
}
.mz-btn:hover{ box-shadow:0 8px 32px rgba(163,45,150,.18); }
.mz-btn:focus-visible{ outline:1px solid var(--mz-fg); outline-offset:4px; }
.mz-btn:disabled{ opacity:.5; cursor:default; }
.mz-btn:disabled:hover{ box-shadow:none; }
.mz-btn svg{ width:14px; height:14px; flex-shrink:0; }

/* ============ post card — used by the home feed and every profile
   page's "Latest" section. Size variants (--feature, --large) live in
   each page that needs them, since only the home feed uses those. ============ */
.mz-card{ display:flex; flex-direction:column; min-width:0; text-decoration:none; color:inherit; }
.mz-card-media{
    position:relative;
    overflow:hidden;
    border-radius:2px;
    background-size:cover;
    background-position:center;
    aspect-ratio:4/5;
    margin-bottom:18px;
    --glow:rgba(255,255,255,.22);
    box-shadow:0 0 20px 1px var(--glow);
    transition:transform .55s cubic-bezier(.33,1,.68,1), box-shadow .5s ease;
}
.mz-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mz-card-media::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(6,6,7,0) 55%, rgba(6,6,7,.55) 100%);
}
.mz-card:hover .mz-card-media, .mz-card:active .mz-card-media, .mz-card:focus-visible .mz-card-media{
    transform:scale(1.015);
    box-shadow:0 0 54px 9px var(--glow);
    transition:transform .65s var(--mz-ease), box-shadow .5s ease;
}
.mz-card-badge{
    position:absolute; left:14px; z-index:2;
    font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--mz-fg);
    background:rgba(10,10,11,.55);
    padding:5px 10px;
    border:1px solid var(--mz-line);
    border-radius:999px;
}
.mz-card-tag{ top:14px; }
.mz-card-date{ bottom:14px; }
.mz-card-title{
    font-size:clamp(.95rem, 1.3vw, 1.1rem);
    font-weight:400;
    letter-spacing:.02em;
    text-transform:uppercase;
    line-height:1.4;
    margin:0 0 8px;
    transition:opacity .3s ease;
}
.mz-card:hover .mz-card-title, .mz-card:focus-visible .mz-card-title{ opacity:.7; }
.mz-card-excerpt{ font-size:13.5px; line-height:1.6; color:var(--mz-fg-dim); margin:0; max-width:60ch; }
.mz-card:focus-visible{ outline:1px solid var(--mz-fg); outline-offset:6px; }
@media (prefers-reduced-motion: reduce){
    .mz-card-media, .mz-card-title{ transition-duration:.01ms !important; }
}

/* ============ back to top ============ */
.mz-top{ display:flex; justify-content:center; padding:64px 24px 0; }
.mz-top-btn{
    all:unset;
    cursor:pointer;
    font-weight:300;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--mz-fg-dim);
    padding-bottom:6px;
    border-bottom:1px solid var(--mz-line);
    transition:color .25s ease, border-color .25s ease;
}
.mz-top-btn:hover{ color:var(--mz-fg); border-color:var(--mz-fg); }
.mz-top-btn:focus-visible{ outline:1px solid var(--mz-fg); outline-offset:4px; }

/* ============ footer ============ */
.mz-footer{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    padding:28px 24px 64px;
    font-size:10.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--mz-fg-dim);
}
.mz-footer a{ transition:color .25s ease; }
.mz-footer a:hover{ color:var(--mz-fg); }
.mz-footer a:focus-visible{ outline:1px solid var(--mz-fg); outline-offset:3px; }
.mz-footer-dot{ opacity:.6; }

/* ============ reduced motion, header/footer pieces ============ */
@media (prefers-reduced-motion: reduce){
    .mz-bar, .mz-glyph, .mz-panel{ transition-duration:.01ms !important; }
}

/* ============ mobile ============ */
@media (max-width:860px){
    .mz-page{ padding:16px 22px 64px; }
    .mz-header{ padding:14px 22px; }
    .mz-header--bordered{ margin-bottom:28px; }
    .mz-logo{ height:70px; }
    .mz-toggle, .mz-back-icon{ width:30px; height:30px; }
    .mz-back-icon svg{ width:13px; height:13px; }
    .mz-back-label{ display:none; }

    /* On mobile these now open as a light banner floating just under the
       header, instead of pushing the rest of the page down. Animating
       opacity + a small slide is smooth on a phone; animating height (the
       old approach) forces a layout recalculation on every frame, which is
       what was making it feel laggy. */
    .mz-panel--left, .mz-panel--right{
        position:absolute;
        top:100%;
        left:-22px;
        right:-22px;
        max-width:none;
        background:var(--mz-bg);
        border-bottom:1px solid var(--mz-line);
        opacity:0;
        pointer-events:none;
        transform:translateY(-6px);
        padding:14px 20px;
        display:flex;
        justify-content:center;
        transition:opacity .25s ease, transform .3s var(--mz-ease);
    }
    .mz-panel--left.is-open, .mz-panel--right.is-open{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }
    .mz-panel nav{ gap:10px; flex-wrap:wrap; justify-content:center; }
    .mz-panel a{ font-size:10.5px; }

    .mz-btn{ width:100%; justify-content:center; }

    .mz-footer{ flex-direction:column; gap:10px; padding:24px 24px 48px; }
    .mz-footer-dot{ display:none; }
}