/* ============================================================
   Mr Sudz - Blog & Gallery
   ------------------------------------------------------------
   These two pages live inside the existing site theme, so they
   borrow its faces (Play for display, Manrope for body) and its
   cyan. What is new here is the surface language: wet, dark
   glass with a single band of light travelling across it, which
   is what a touchless wash actually looks like at 2am.

   Everything is namespaced .mz- so nothing leaks into the theme.
   ============================================================ */

.mz {
    --cyan: #00f0ff;
    --cyan-dim: rgba(0, 240, 255, 0.16);
    --cyan-line: rgba(0, 240, 255, 0.28);

    --ink: #04070f;
    --deep: #071120;
    --panel: rgba(11, 22, 40, 0.66);
    --panel-solid: #0b1628;
    --line: rgba(180, 214, 255, 0.12);

    --text: #eaf3ff;
    --muted: rgba(226, 238, 255, 0.62);
    --faint: rgba(226, 238, 255, 0.38);

    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 10px;

    --shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
    --ease: cubic-bezier(0.22, 0.85, 0.3, 1);

    background: var(--ink);
    color: var(--text);
    font-family: var(--body-font, "Manrope", Helvetica, Arial, sans-serif);
}

/* The whole page sits on one continuous dark field, lit from two
   corners the way the bays are lit from the gantry. */
.mz-field {
    position: relative;
    background: var(--ink);
    overflow: hidden;
}

.mz-field::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 620px at 8% -10%, rgba(0, 240, 255, 0.13), transparent 62%),
        radial-gradient(880px 560px at 96% 6%, rgba(56, 96, 220, 0.16), transparent 60%),
        radial-gradient(1000px 800px at 55% 112%, rgba(0, 170, 210, 0.10), transparent 62%);
}

.mz-field > * { position: relative; z-index: 1; }

.mz-wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-inline: 24px;
}

/* ---------- Type ----------
   Scoped to .mz-field, not to .mz on the body: the page hero is the theme's
   own jarallax block and sits outside it. A bare `.mz h1 { margin: 0 }` beats
   Bootstrap's .mb-4 on specificity and would flatten the hero's spacing. */
.mz-field h1, .mz-field h2, .mz-field h3, .mz-field h4 {
    font-family: var(--title-font, "Play", Helvetica, Arial, sans-serif);
    color: var(--text);
    letter-spacing: -0.01em;
    margin: 0;
}

.mz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--cyan);
    margin: 0 0 18px;
}

.mz-eyebrow::before {
    content: '';
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan));
}

.mz-lede {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75;
    max-width: 62ch;
    margin: 0;
}

/* Inline SVG stand-ins for the icons the icofont subset has no glyph for.
   They inherit colour from the text and sit on the same baseline as a real
   icon would, so callers do not have to special-case them. */
.mz-svg {
    display: inline-block;
    vertical-align: -0.18em;
    flex-shrink: 0;
}

.mz-search button .mz-svg { vertical-align: 0; }
.mz-empty .mz-svg { display: block; margin: 0 auto 16px; color: var(--cyan); }

/* The site talks in chips - the nav buttons, the gallery filters, the
   category tag on a post card are all rounded and outlined. A bare
   letter-spaced eyebrow was the odd one out, so the article's category
   and its "keep reading" marker use the same shape.

   The backing is dark rather than tinted because one of these sits on
   top of the cover photo, where a translucent cyan wash would take
   whatever colour happened to be behind it. */
.mz-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(4, 12, 28, 0.72);
    border: 1px solid var(--cyan-line);
    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    line-height: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
}

.mz-post-hero .mz-pill { margin-bottom: 16px; }

/* ---------- Page head ---------- */
.mz-head {
    padding: 190px 0 64px;
    border-bottom: 1px solid var(--line);
}

.mz-head h1 {
    font-size: clamp(38px, 6vw, 68px);
    line-height: 1.04;
    margin-bottom: 20px;
}

.mz-head h1 em {
    font-style: normal;
    color: var(--cyan);
}

.mz-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 26px;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 600;
}

.mz-head-meta b { color: var(--text); font-weight: 700; }

/* ---------- Filter rail ---------- */
.mz-rail {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(4, 7, 15, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
}

.mz-rail-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.mz-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.mz-chips::-webkit-scrollbar { display: none; }

.mz-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}

.mz-chip:hover { color: var(--text); border-color: var(--cyan-line); }

.mz-chip.is-on {
    color: var(--ink);
    background: var(--cyan);
    border-color: var(--cyan);
    font-weight: 800;
}

.mz-chip span {
    font-size: 11px;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* ---------- Search ---------- */
.mz-search {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    padding: 8px 8px 8px 16px;
    flex: 0 0 auto;
}

.mz-search input {
    background: none;
    border: 0;
    outline: none;
    color: var(--text);
    font-size: 13.5px;
    width: 180px;
    font-family: inherit;
}

.mz-search input::placeholder { color: var(--faint); }

.mz-search button {
    border: 0;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    background: var(--cyan);
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 14px;
    transition: transform .2s var(--ease);
}

.mz-search button:hover { transform: scale(1.08); }

/* ============================================================
   Signature: the light sweep
   A single band of light crosses any media tile on hover, the
   way the gantry light crosses a wet roof. One effect, used
   everywhere, nothing else animates.
   ============================================================ */
.mz-sheen { position: relative; overflow: hidden; }

.mz-sheen::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -70%;
    width: 42%;
    height: 220%;
    pointer-events: none;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.10) 42%,
        rgba(0, 240, 255, 0.34) 50%,
        rgba(255, 255, 255, 0.10) 58%,
        transparent 100%);
    transform: translateX(0) rotate(8deg);
    opacity: 0;
    transition: transform .85s var(--ease), opacity .3s var(--ease);
}

.mz-sheen:hover::after,
.mz-sheen:focus-visible::after,
.mz-card:hover .mz-sheen::after,
.mz-tile:hover .mz-sheen::after {
    opacity: 1;
    transform: translateX(340%) rotate(8deg);
}

/* ============================================================
   Blog
   ============================================================ */
.mz-section { padding: 72px 0; }

/* The blog index intro. Stacked ledes rather than one long paragraph, and
   a little wider than a lede on its own, since nothing sits beside it. */
.mz-intro {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mz-intro .mz-lede { max-width: 76ch; }

/* Sits directly above the post grid, which brings its own top padding. */
.mz-section--intro { padding: 64px 0 0; }

.mz-section--tight { padding: 48px 0 88px; }

/* Featured post - the only asymmetric block on the page */
.mz-feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.mz-feature-media {
    position: relative;
    min-height: 420px;
    background: var(--deep);
}

.mz-feature-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mz-feature-body {
    padding: 46px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.mz-feature-body h2 {
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.14;
}

.mz-feature-body h2 a { color: inherit; text-decoration: none; }
.mz-feature-body h2 a:hover { color: var(--cyan); }

/* Post cards */
.mz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 26px;
}

.mz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    overflow: hidden;
    transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.mz-card:hover {
    transform: translateY(-4px);
    border-color: var(--cyan-line);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5);
}

.mz-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--deep);
}

/* Pinned rather than sized - an aspect-ratio box gives its child an
   indefinite height, and a portrait cover would stretch the card. */
.mz-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mz-card-body {
    padding: 22px 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.mz-card-body h3 {
    font-size: 19px;
    line-height: 1.3;
}

.mz-card-body h3 a { color: inherit; text-decoration: none; }
.mz-card-body h3 a:hover { color: var(--cyan); }

/* The title is the card's only link, stretched over the whole card so the
   cover stays clickable without being a second, nameless anchor to the
   same post. .mz-card is already position:relative. */
.mz-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Keep the tag above the stretched link so its text stays selectable. */
.mz-card .mz-tag { z-index: 2; }

.mz-card-body p {
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.68;
    margin: 0;
}

.mz-tag {
    display: inline-block;
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(4, 7, 15, 0.78);
    border: 1px solid var(--cyan-line);
    color: var(--cyan);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(6px);
}

.mz-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 11.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 600;
}

.mz-meta i { color: var(--cyan); font-size: 13px; }
.mz-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }

/* A post with no cover image: no empty frame, a hairline of cyan instead,
   so the card still reads as deliberate next to the image cards.
   These rules sit after .mz-card and .mz-tag on purpose - they are
   overrides and would lose the cascade higher up the file. */
.mz-feature--text { grid-template-columns: 1fr; }
.mz-feature--text .mz-feature-body { padding: 44px 42px; }

.mz-card.mz-card--text { border-top: 2px solid var(--cyan); }
.mz-card--text .mz-card-body { padding-top: 24px; }

.mz-card--text .mz-tag--inline {
    position: static;
    align-self: flex-start;
    backdrop-filter: none;
    margin-bottom: 2px;
}

/* Read link */
.mz-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--cyan);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    align-self: flex-start;
}

.mz-more i { transition: transform .25s var(--ease); }
.mz-more:hover { color: var(--cyan); }
.mz-more:hover i { transform: translateX(5px); }

/* ---------- Pagination ---------- */
.mz-pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 52px;
    flex-wrap: wrap;
}

.mz-pager a, .mz-pager span {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: all .2s var(--ease);
}

.mz-pager a:hover { color: var(--text); border-color: var(--cyan-line); }

.mz-pager .is-on {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--ink);
}

/* ---------- Empty state ---------- */
.mz-empty {
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    padding: 64px 32px;
    text-align: center;
    color: var(--muted);
}

.mz-empty i { font-size: 34px; color: var(--cyan); display: block; margin-bottom: 16px; }
.mz-empty h3 { margin-bottom: 8px; font-size: 20px; }

/* One measure for everything in the article column. Sizing each block
   in `ch` looked right in isolation but drifted: 74ch at the lede's 20px
   is wider than 74ch at the prose's 17px, so the two left edges did not
   line up. */
.mz-lede-in,
.mz-prose,
.mz-tags,
.mz-post-end,
.mz-cta {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Article
   ============================================================ */

/* Reading progress - a cyan waterline filling across the top */
.mz-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 999;
    background: transparent;
    pointer-events: none;
}

.mz-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.35), var(--cyan));
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.75);
    transition: width .1s linear;
}

/* ============================================================
   Article

   The cover carries the title instead of sitting under it, so a post
   opens the way every other page on the site opens - and the photo
   sets the scene rather than being a band of decoration between the
   headline and the words.
   ============================================================ */
.mz-post { background: var(--ink); }

.mz-post-hero {
    /* The theme styles every `header` element globally as
       `position:absolute; z-index:1001` for the site navbar. This is a
       <header> too, so without pinning it back down it inherits that
       z-index, ties with the navbar, wins on document order and paints
       straight over it. */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    min-height: 62vh;
    padding: 190px 0 56px;
    background: var(--deep);
    overflow: hidden;
}

.mz-post-hero--bare {
    min-height: 0;
    padding: 180px 0 40px;
    border-bottom: 1px solid var(--line);
}

.mz-post-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Deep navy, heaviest at the foot where the words are. It sits on the
   hero rather than on the image, so the cover-less version gets it too. */
.mz-post-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(3, 14, 36, 0.55) 0%,
        rgba(3, 12, 30, 0.72) 45%,
        rgba(4, 7, 15, 0.96) 100%);
}

.mz-post-hero-inner { position: relative; z-index: 2; }

/* Both of these are inline-flex, so left alone they sit shoulder to
   shoulder and read as one confused line. */
.mz-post-hero .mz-back { display: flex; margin-bottom: 16px; }
.mz-post-hero .mz-eyebrow { margin-bottom: 14px; }

.mz-post-hero h1 {
    font-family: var(--title-font, "Play", sans-serif);
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 20ch;
    margin: 0 0 20px;
    text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
}

.mz-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(226, 238, 255, 0.72);
}

.mz-post-meta i { color: var(--cyan); font-size: 13px; margin-right: 5px; }

/* The summary again, set larger - it is the paragraph that decides
   whether the rest gets read. */
.mz-lede-in {
    margin: 0 auto 34px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--line);
    font-size: 20px;
    line-height: 1.65;
    color: var(--text);
}

.mz-post-end {
    margin: 44px auto 0;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.mz-post-end .mz-back { margin-bottom: 0; }

.mz-prose {
    margin: 0 auto;
    color: rgba(232, 242, 255, 0.82);
    font-size: 17px;
    line-height: 1.85;
}

.mz-prose > *:first-child { margin-top: 0; }
.mz-prose p { margin: 0 0 26px; }

.mz-prose h2 {
    font-size: 27px;
    line-height: 1.25;
    margin: 48px 0 18px;
    padding-left: 18px;
    border-left: 2px solid var(--cyan);
}

.mz-prose h3 { font-size: 21px; margin: 36px 0 14px; }

.mz-prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

.mz-prose ul, .mz-prose ol { margin: 0 0 26px; padding-left: 22px; }
.mz-prose li { margin-bottom: 10px; }
.mz-prose li::marker { color: var(--cyan); }

.mz-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
    margin: 12px 0 28px;
    border: 1px solid var(--line);
}

.mz-prose blockquote {
    margin: 34px 0;
    padding: 22px 26px;
    border-left: 2px solid var(--cyan);
    background: rgba(0, 240, 255, 0.05);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--text);
    font-size: 18px;
}

.mz-prose blockquote p:last-child { margin-bottom: 0; }

.mz-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 28px;
    font-size: 15px;
}

.mz-prose th, .mz-prose td {
    border: 1px solid var(--line);
    padding: 10px 14px;
    text-align: left;
}

.mz-prose th { background: rgba(255, 255, 255, 0.04); color: var(--text); }

.mz-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 44px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.mz-tags b {
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--faint);
    align-self: center;
    margin-right: 4px;
}

.mz-tags span {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
}

/* Wash-club call to action at the foot of every article */
.mz-cta {
    margin: 56px auto 0;
    padding: 34px 36px;
    border-radius: var(--r-lg);
    border: 1px solid var(--cyan-line);
    background:
        linear-gradient(135deg, rgba(0, 240, 255, 0.10), rgba(0, 240, 255, 0.02));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
}

/* Let the copy and the button share a row whenever there is room for both. */
.mz-cta > div { flex: 1 1 330px; min-width: 0; }

.mz-cta h3 { font-size: 22px; margin-bottom: 6px; }
.mz-cta p { color: var(--muted); margin: 0; font-size: 14.5px; }

.mz-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    background: var(--cyan);
    color: var(--ink);
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

.mz-btn:hover {
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 240, 255, 0.32);
}

.mz-btn--ghost {
    background: transparent;
    border: 1px solid var(--cyan-line);
    color: var(--cyan);
}

.mz-btn--ghost:hover { color: var(--ink); background: var(--cyan); }

.mz-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--faint);
    font-size: 12.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 22px;
}

.mz-back:hover { color: var(--cyan); }

/* ============================================================
   Gallery

   A Pinterest-style wall: every tile is as tall as its photo
   actually is, and the columns pack tight with no leftover holes.
   The old version forced every tile into a 210px row grid, so a
   portrait shot was cropped to landscape and any row with a tall
   tile left a gap beside it.

   Every tile is one column wide and as tall as its photo needs -
   there is nothing to choose and nothing to get wrong, which is
   what makes a wall of mixed photos look deliberate.
   ============================================================ */
.mz-mason {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* A fine row unit is what lets a tile land on its true height
       instead of snapping to a coarse step. The vertical gap is the
       tile's own padding rather than row-gap, so the span arithmetic
       stays exact instead of accumulating a gap-sized error. */
    grid-auto-rows: 4px;
    column-gap: 16px;
    row-gap: 0;
}

.mz-tile {
    position: relative;
    display: block;
    padding: 0;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    align-self: start;
    padding-bottom: 16px;
    /* Before the script measures anything this is the tile height, so the
       first paint is already close and nothing jumps far.
       grid-row-end, not the grid-row shorthand: the shorthand would put
       the span on grid-row-START, which then fights the end value the
       script sets and the tile overflows its track. */
    grid-row-end: span 56;
}

.mz-tile-frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--deep);
    transition: border-color .3s var(--ease), transform .3s var(--ease);
}

.mz-tile:hover .mz-tile-frame { border-color: var(--cyan-line); transform: translateY(-3px); }
.mz-tile:focus-visible .mz-tile-frame { outline: 2px solid var(--cyan); outline-offset: 3px; }

.mz-tile img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .7s var(--ease);
}

.mz-tile:hover img { transform: scale(1.04); }

/* Caption: a deep navy haze that gathers at the foot of the tile and
   fades out before it reaches the middle, so the photo stays the
   subject and the words stay readable over any part of it. */
.mz-tile-cap {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 52px 18px 16px;
    background: linear-gradient(180deg,
        rgba(3, 18, 44, 0) 0%,
        rgba(3, 18, 44, 0.55) 42%,
        rgba(2, 13, 33, 0.94) 100%);
    backdrop-filter: blur(2.5px) saturate(1.1);
    -webkit-backdrop-filter: blur(2.5px) saturate(1.1);
    /* The blur has to fade with the colour, otherwise its top edge
       shows as a hard horizontal line across the photo. */
    mask-image: linear-gradient(180deg, transparent 0%, #000 46%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 46%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .32s var(--ease), transform .32s var(--ease);
}

.mz-tile:hover .mz-tile-cap,
.mz-tile:focus-visible .mz-tile-cap { opacity: 1; transform: translateY(0); }

.mz-tile-cap strong {
    display: block;
    font-family: var(--title-font, "Play", sans-serif);
    font-size: 15px;
    color: #fff;
    margin-bottom: 3px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.mz-tile-cap small {
    display: block;
    color: rgba(226, 238, 255, 0.82);
    font-size: 12px;
    line-height: 1.5;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.mz-play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.mz-play i {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(3, 18, 44, 0.6);
    border: 1px solid var(--cyan-line);
    color: var(--cyan);
    font-size: 22px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ---------- Lightbox ---------- */
.mz-box {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(2, 5, 11, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mz-box.is-open { display: flex; }

.mz-box-stage {
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mz-box-stage img,
.mz-box-stage video {
    max-width: 100%;
    max-height: 76vh;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    display: block;
    margin: 0 auto;
}

.mz-box-cap {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.mz-box-cap strong {
    display: block;
    font-family: var(--title-font, "Play", sans-serif);
    color: var(--text);
    font-size: 18px;
    margin-bottom: 5px;
}

.mz-box-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(11, 22, 40, 0.8);
    color: var(--text);
    font-size: 20px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all .2s var(--ease);
}

.mz-box-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.mz-box-prev { left: 20px; }
.mz-box-next { right: 20px; }

.mz-box-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .mz-mason { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .mz-head { padding: 150px 0 52px; }
    .mz-post-hero { min-height: 52vh; padding: 150px 0 44px; }
    .mz-post-hero--bare { padding: 140px 0 32px; }

    .mz-feature { grid-template-columns: 1fr; }
    .mz-feature-media { min-height: 280px; aspect-ratio: 16 / 9; }
    .mz-feature-body { padding: 32px 28px 38px; }

    .mz-mason { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .mz-wrap { padding-inline: 18px; }
    .mz-section { padding: 52px 0; }
    .mz-head { padding: 130px 0 42px; }

    .mz-rail-inner { flex-direction: column; align-items: stretch; }
    .mz-search { width: 100%; }
    .mz-search input { width: 100%; }

    .mz-grid { grid-template-columns: 1fr; gap: 20px; }

    .mz-mason { column-gap: 12px; }
    .mz-tile { padding-bottom: 12px; }

    .mz-prose { font-size: 16px; }
    .mz-cta { padding: 26px 22px; }
    .mz-box { padding: 14px; }
    .mz-box-btn { width: 40px; height: 40px; }
    .mz-box-prev { left: 8px; }
    .mz-box-next { right: 8px; }
}

/* ---------- Accessibility floor ---------- */
.mz a:focus-visible,
.mz button:focus-visible,
.mz input:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .mz *,
    .mz *::before,
    .mz *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }

    .mz-sheen::after { display: none; }
}