/*
Theme Name: Blocksy Child - Midnight VFX
Theme URI: https://mnvfx.com
Description: Child theme of Blocksy for the Midnight VFX website. Custom code lives here so Blocksy updates never overwrite it.
Author: Midnight VFX
Template: blocksy
Version: 1.13.3
Text Domain: blocksy-child
*/

/* Custom CSS below this line. Site-wide styles can also go in
   Customizer > Additional CSS - use this file for anything substantial. */

/* ==========================================================================
   0. Self-hosted fonts (Latin-only, variable — Google serves one file
   covering the whole weight range per family, so font-weight is a range
   here rather than one @font-face per weight). Replaces the Google Fonts
   CDN link used during build — same files, just served from our own
   domain: faster (no extra DNS/connection to fonts.gstatic.com), and no
   visitor IPs sent to Google on every page load.
   ========================================================================== */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('fonts/archivo-variable-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/jetbrains-mono-variable-latin.woff2') format('woff2');
}

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
    --mnvfx-bg: #1a1817;
    --mnvfx-bg-raised: #221f1d;
    --mnvfx-text: #edeae4;
    --mnvfx-text-muted: #a39d94;
    --mnvfx-accent: #e8622c;
    --mnvfx-border: #3a3532;

    /* Macbeth-chart-inspired micro-palette — data-sheet contexts only, never used as UI accent colors. */
    --mnvfx-swatch-skin: #c39b7d;
    --mnvfx-swatch-sky: #6f8fa6;
    --mnvfx-swatch-foliage: #6b7f4f;
    --mnvfx-swatch-red: #a8433a;
    --mnvfx-swatch-yellow: #d9a441;

    --mnvfx-font-display: 'Archivo', sans-serif;
    --mnvfx-font-mono: 'JetBrains Mono', monospace;

    --mnvfx-container-max: 1200px;
    --mnvfx-space: 1.5rem;

    /* Blocksy's fixed/sticky header doesn't reserve document-flow space.
       Our full-bleed templates (which skip Blocksy's own hero section,
       avoiding a separate bug where it renders the site title twice into
       the content area) need to clear it explicitly. Real measured height
       via getBoundingClientRect: 120px — 9rem gives a bit of buffer. */
    --mnvfx-header-clearance: 9rem;
}

/* ==========================================================================
   2. Base + typography
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: var(--mnvfx-bg);
    color: var(--mnvfx-text);
    font-family: var(--mnvfx-font-display);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mnvfx-font-display);
    font-stretch: condensed;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--mnvfx-text);
}

nav, time, code, .mono,
.mnvfx-data-sheet, .mnvfx-caption, .mnvfx-credits {
    font-family: var(--mnvfx-font-mono);
}

a {
    color: var(--mnvfx-text);
    text-decoration-color: var(--mnvfx-accent);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--mnvfx-accent);
}

/* ==========================================================================
   3. Film grain overlay
   Inline SVG noise, near-zero bytes (no separate image request).
   pointer-events: none so it can never intercept a click regardless of
   its visual stacking — this is what "never above interactive elements"
   actually means here, not that it can't render on top visually.
   ========================================================================== */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* ==========================================================================
   4. On-set ephemera: tracking-marker bullets + dividers
   Opt-in via class, not applied to all lists sitewide (editorial content
   in post bodies keeps normal bullets).
   ========================================================================== */
.mnvfx-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mnvfx-list li {
    position: relative;
    padding-left: 1.4em;
}

.mnvfx-list li::before {
    content: "\00D7"; /* × tracking marker */
    position: absolute;
    left: 0;
    color: var(--mnvfx-accent);
    font-family: var(--mnvfx-font-mono);
}

.mnvfx-divider {
    text-align: center;
    margin: var(--mnvfx-space) 0;
    color: var(--mnvfx-text-muted);
    font-family: var(--mnvfx-font-mono);
    letter-spacing: 0.3em;
}

.mnvfx-divider::before {
    content: "\25CB \2500\2500\2500\2500\2500\2500\2500 \25CB"; /* ○ ─── ○ */
}

/* ==========================================================================
   5. Mono data-sheet block (camera-report metadata)
   ========================================================================== */
.mnvfx-data-sheet {
    font-size: 0.875rem;
    border: 1px solid var(--mnvfx-border);
    background: var(--mnvfx-bg-raised);
    padding: var(--mnvfx-space);
}

.mnvfx-data-sheet dt {
    color: var(--mnvfx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    margin: 0;
}

.mnvfx-data-sheet dd {
    margin: 0 0 0.75em;
    color: var(--mnvfx-text);
}

.mnvfx-data-sheet dd:last-child {
    margin-bottom: 0;
}

.mnvfx-swatch-row {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.mnvfx-swatch {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--mnvfx-border);
}

/* Light "paper" variant of the mono data-sheet block — same treatment as
   the Training application sheet, applied via an opt-in modifier class
   rather than changing .mnvfx-data-sheet itself (which stays dark for any
   future context that wants it). Currently used on the homepage footer,
   Contact page, and project stats sidebar. */
.mnvfx-data-sheet--paper {
    --mnvfx-paper: #e9e4da;
    --mnvfx-paper-line: #c9c2b4;
    --mnvfx-paper-ink: #1c1a18;
    --mnvfx-paper-ink-soft: #6e675c;

    position: relative;
    background: var(--mnvfx-paper);
    border-color: var(--mnvfx-paper-line);
}

.mnvfx-data-sheet--paper::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-1.5deg);
    width: 90px;
    height: 20px;
    background: var(--mnvfx-accent);
    opacity: 0.92;
}

.mnvfx-data-sheet--paper dt {
    color: var(--mnvfx-paper-ink-soft);
}

.mnvfx-data-sheet--paper dt:not(:first-of-type) {
    border-top: 1px dashed var(--mnvfx-paper-line);
    padding-top: 0.75em;
}

.mnvfx-data-sheet--paper dd {
    color: var(--mnvfx-paper-ink);
}

.mnvfx-data-sheet--paper a {
    color: var(--mnvfx-paper-ink);
    text-decoration-color: var(--mnvfx-accent);
}

.mnvfx-data-sheet--paper a:hover {
    color: var(--mnvfx-accent);
}

/* ==========================================================================
   6. Gaffer-tape caption
   ========================================================================== */
.mnvfx-caption,
.mnvfx-project__body figcaption {
    display: inline-block;
    font-family: var(--mnvfx-font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--mnvfx-accent);
    color: var(--mnvfx-bg);
    padding: 0.2em 0.6em;
    transform: rotate(-1deg);
    margin-top: 0.5rem;
}

/* ==========================================================================
   7. Buttons / CTAs
   ========================================================================== */
.mnvfx-btn {
    display: inline-block;
    font-family: var(--mnvfx-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--mnvfx-accent);
    color: var(--mnvfx-accent);
    padding: 0.6em 1.2em;
    background: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mnvfx-btn:hover {
    background: var(--mnvfx-accent);
    color: var(--mnvfx-bg);
}

/* ==========================================================================
   8. Single project template
   ========================================================================== */
.mnvfx-project {
    padding-top: var(--mnvfx-header-clearance);
    padding-bottom: var(--mnvfx-space);
}

.mnvfx-hero {
    margin-bottom: var(--mnvfx-space);
}

.mnvfx-hero__image {
    width: 100%;
    height: auto;
    display: block;
}

.mnvfx-project__title {
    margin-bottom: var(--mnvfx-space);
}

/* Data sheet + write-up side by side, not stacked — was leaving most of a
   wide screen blank while cramming the write-up into a narrow column
   below the data sheet. Sidebar is sticky so it stays visible while
   scrolling through a long write-up. */
.mnvfx-project__columns {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    align-items: start;
    gap: calc(var(--mnvfx-space) * 2);
    margin-bottom: calc(var(--mnvfx-space) * 2);
}

.mnvfx-project__sidebar {
    position: sticky;
    top: calc(var(--mnvfx-header-clearance) + 1rem);
}

@media (max-width: 900px) {
    .mnvfx-project__columns {
        grid-template-columns: 1fr;
    }

    .mnvfx-project__sidebar {
        position: static;
    }
}

.mnvfx-data-sheet {
    max-width: none;
}

.mnvfx-project__body {
    max-width: 46rem;
    line-height: 1.6;
}

.mnvfx-project__body :is(h1, h2, h3, h4) {
    margin-top: 1.5em;
}

.mnvfx-video {
    margin-bottom: calc(var(--mnvfx-space) * 2);
}

.mnvfx-video__embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--mnvfx-bg-raised);
}

.mnvfx-video__embed iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.mnvfx-credits {
    margin-bottom: calc(var(--mnvfx-space) * 2);
}

.mnvfx-credits__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--mnvfx-font-mono);
    font-size: 0.875rem;
}

.mnvfx-credits__list li {
    display: flex;
    gap: 1em;
    padding: 0.35em 0;
    border-bottom: 1px solid var(--mnvfx-border);
}

.mnvfx-credits__role {
    color: var(--mnvfx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 0 0 40%;
}

.mnvfx-project-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--mnvfx-space);
    font-family: var(--mnvfx-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    border-top: 1px solid var(--mnvfx-border);
    padding-top: var(--mnvfx-space);
}

.mnvfx-project-nav__next {
    margin-left: auto;
}

/* ==========================================================================
   9. Projects archive grid
   ========================================================================== */
.mnvfx-archive {
    padding-top: var(--mnvfx-header-clearance);
    padding-bottom: var(--mnvfx-space);
}

.mnvfx-archive__title {
    margin-bottom: var(--mnvfx-space);
}

.mnvfx-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: calc(var(--mnvfx-space) * 1.5);
    font-family: var(--mnvfx-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
}

.mnvfx-filter__link {
    border: 1px solid var(--mnvfx-border);
    padding: 0.4em 0.9em;
    color: var(--mnvfx-text-muted);
}

.mnvfx-filter__link:hover,
.mnvfx-filter__link.is-active {
    border-color: var(--mnvfx-accent);
    color: var(--mnvfx-accent);
}

.mnvfx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--mnvfx-space);
}

.mnvfx-grid__item {
    display: block;
    color: var(--mnvfx-text);
}

.mnvfx-grid__item:hover {
    color: var(--mnvfx-accent);
}

.mnvfx-grid__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Grid thumbnail aspect ratio follows the Poster/16:9 site-wide switch
   (Customizer -> Midnight VFX Settings), reflected as a body class. */
body.mnvfx-thumb-poster .mnvfx-grid__image img {
    aspect-ratio: 2 / 3;
}

body.mnvfx-thumb-16x9 .mnvfx-grid__image img {
    aspect-ratio: 16 / 9;
}

.mnvfx-grid__title {
    margin: 0.6em 0 0.2em;
    font-size: 1.1rem;
}

.mnvfx-grid__services {
    margin: 0;
    font-family: var(--mnvfx-font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mnvfx-text-muted);
}

/* ==========================================================================
   10. News archive (home.php's own card markup)
   ========================================================================== */
.mnvfx-news-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mnvfx-space) * 2);
}

/* Each post sits inside its own dark-matte frame, gaffer-taped at the
   top — the same treatment as the paper data-sheets, just kept dark
   here instead of switching to paper. !important is deliberate: Blocksy's
   base styles apply a white background/color to the hentry microformat
   class at a specificity/load-order that plain overrides kept losing to,
   verified via computed styles. */
.mnvfx-news-card {
    position: relative;
    display: flex;
    gap: calc(var(--mnvfx-space) * 1.5);
    padding: calc(var(--mnvfx-space) * 1.25);
    background: var(--mnvfx-bg-raised) !important;
    color: var(--mnvfx-text) !important;
    border: 1px solid var(--mnvfx-border);
}

.mnvfx-news-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-1.5deg);
    width: 80px;
    height: 18px;
    background: var(--mnvfx-accent);
    opacity: 0.92;
}

.mnvfx-news-card__thumb {
    flex: 0 0 260px;
    align-self: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: block;
    background: var(--mnvfx-bg);
}

.mnvfx-news-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mnvfx-news-card__body {
    flex: 1;
    min-width: 0;
}

.mnvfx-news-card__date {
    display: block;
    font-family: var(--mnvfx-font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mnvfx-text-muted);
    margin-bottom: 0.6em;
}

.mnvfx-news-card__title {
    margin: 0 0 0.5em;
}

.mnvfx-news-card__title a {
    color: var(--mnvfx-text);
}

.mnvfx-news-card__title a:hover {
    color: var(--mnvfx-accent);
}

.mnvfx-news-card__excerpt {
    color: var(--mnvfx-text-muted);
    max-width: 42rem;
    margin: 0 0 var(--mnvfx-space);
}

@media (max-width: 640px) {
    .mnvfx-news-card {
        flex-direction: column;
    }

    .mnvfx-news-card__thumb {
        flex-basis: auto;
        width: 100%;
    }
}

/* ==========================================================================
   11. Studio & People grid (About page)
   ========================================================================== */
.mnvfx-people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--mnvfx-space);
    margin: var(--mnvfx-space) 0;
}

.mnvfx-person-card__headshot img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin-bottom: 0.75em;
}

.mnvfx-person-card__name {
    margin: 0 0 0.15em;
    font-size: 1.05rem;
}

.mnvfx-person-card__role {
    margin: 0 0 0.5em;
    font-family: var(--mnvfx-font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mnvfx-text-muted);
}

.mnvfx-person-card__links {
    margin: 0 0 0.35em;
    font-family: var(--mnvfx-font-mono);
    font-size: 0.75rem;
}

.mnvfx-person-card__links a {
    color: var(--mnvfx-accent);
}

.mnvfx-person-card__email {
    margin: 0;
    font-family: var(--mnvfx-font-mono);
    font-size: 0.75rem;
    color: var(--mnvfx-text-muted);
}

/* ==========================================================================
   12. Homepage
   ========================================================================== */
.mnvfx-hero-reel {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--mnvfx-bg);
}

.mnvfx-hero-reel__player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mnvfx-home {
    padding-block: calc(var(--mnvfx-space) * 2);
}

.mnvfx-home-section {
    margin-bottom: calc(var(--mnvfx-space) * 3);
}

.mnvfx-home-section__title {
    margin-bottom: var(--mnvfx-space);
}

.mnvfx-contact__people {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--mnvfx-space) * 2);
    margin-bottom: var(--mnvfx-space);
}

.mnvfx-contact__name {
    font-weight: 700;
    margin: 0 0 0.15em;
}

.mnvfx-contact__role,
.mnvfx-contact__email,
.mnvfx-contact__phone {
    font-family: var(--mnvfx-font-mono);
    font-size: 0.875rem;
    margin: 0;
}

.mnvfx-contact__role {
    color: var(--mnvfx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35em;
}

.mnvfx-contact__email a,
.mnvfx-contact__phone a {
    color: var(--mnvfx-accent);
}

.mnvfx-contact__phone {
    margin-bottom: var(--mnvfx-space);
}

.mnvfx-contact__phone-label {
    display: block;
    color: var(--mnvfx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35em;
}

.mnvfx-clocks {
    display: flex;
    gap: calc(var(--mnvfx-space) * 1.5);
    font-family: var(--mnvfx-font-mono);
}

.mnvfx-clocks__zone {
    display: flex;
    flex-direction: column;
}

.mnvfx-clocks__city {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mnvfx-text-muted);
}

.mnvfx-clocks__time {
    font-size: 1.25rem;
}

.mnvfx-home-section .mnvfx-news-list {
    margin-bottom: var(--mnvfx-space);
}

/* ==========================================================================
   13. 404
   ========================================================================== */
.mnvfx-404 {
    padding-top: var(--mnvfx-header-clearance);
    padding-bottom: calc(var(--mnvfx-space) * 3);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mnvfx-404__code {
    font-family: var(--mnvfx-font-mono);
    color: var(--mnvfx-text-muted);
    letter-spacing: 0.1em;
    margin: 0 0 0.5em;
}

.mnvfx-404__title {
    margin: 0 0 var(--mnvfx-space);
}

.mnvfx-404__body {
    max-width: 32rem;
    margin: 0 0 calc(var(--mnvfx-space) * 1.5);
    color: var(--mnvfx-text-muted);
}

.mnvfx-404__links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   14. Standard pages / single posts (Blocksy's own hero-section, unstyled by us)
   Same underlying issue as the custom templates: Transparent Header mode
   plus no real hero image collapses the header's reserved space, pushing
   the page title too close to the nav. Scoped to body.page/body.single so
   it doesn't touch our own custom templates (which have their own fix).
   ========================================================================== */
/* .ct-container-full carries Blocksy's own responsive content-spacing as
   padding-top (an unstable value — measured 50px and 60px on different
   loads), which was compounding with our own clearance below. Zeroed out
   here so our padding is the only thing controlling the gap. */
body.page .ct-container-full,
body.single .ct-container-full {
    padding-top: 0;
}

body.page .hero-section,
body.single .hero-section {
    padding-top: var(--mnvfx-header-clearance);
}

/* Blocksy's own .page-title shrinks to 30px by default — bring it back up
   to match the 40px h1 size used on our custom templates (Projects, News,
   single-project) so page titles read consistently site-wide. */
.page-title {
    font-size: 2.5rem;
}

/* Hide author/date/category on individual News post pages (Blocksy's own
   single-post hero meta row) — the News archive listing already has its
   own separate, deliberately date-only meta markup, untouched by this. */
body.single .hero-section .entry-meta {
    display: none;
}

/* Inserted images default to WordPress's "Large" size (1024px wide),
   which is narrower than this theme's actual content column — so they
   sat short of the paragraph text's right edge instead of lining up
   with it. Stretching to fill the column (not just capping at 100%)
   fixes the ragged edge without needing to re-upload/re-insert images
   at a different size. Covers both single Posts (News) and Pages
   (About, the SEO landing pages) — same underlying content-width gap. */
body.single .entry-content img,
body.page .entry-content img {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   15. Contact page
   ========================================================================== */
.mnvfx-contact-page {
    padding-top: var(--mnvfx-header-clearance);
    padding-bottom: calc(var(--mnvfx-space) * 3);
}

.mnvfx-contact-page__title {
    margin: 0 0 var(--mnvfx-space);
}

.mnvfx-contact-page__columns {
    margin-top: calc(var(--mnvfx-space) * 1.5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--mnvfx-space) * 3);
    align-items: start;
}

.mnvfx-contact-page__people {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mnvfx-space) * 1.5);
}

@media (max-width: 720px) {
    .mnvfx-contact-page__columns {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   16. Training application sheet ([mnvfx_training_application] shortcode)
   A deliberate light "paper" exception to the site's dark palette — same
   idea as the Macbeth micro-palette (design system doc): contained to
   this one data-sheet context, not reused elsewhere. Tokens scoped
   locally so they can't leak into or tempt reuse in the rest of the
   (dark) design system.
   ========================================================================== */
.mnvfx-application {
    --mnvfx-paper: #e9e4da;
    --mnvfx-paper-line: #c9c2b4;
    --mnvfx-paper-ink: #1c1a18;
    --mnvfx-paper-ink-soft: #6e675c;

    max-width: 40rem;
    margin: calc(var(--mnvfx-space) * 2) 0;
}

.mnvfx-application__sheet {
    position: relative;
    background: var(--mnvfx-paper);
    color: var(--mnvfx-paper-ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Gaffer tape holding the sheet in place. */
.mnvfx-application__sheet::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(-1.5deg);
    width: 110px;
    height: 26px;
    background: var(--mnvfx-accent);
    opacity: 0.92;
}

.mnvfx-application__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid var(--mnvfx-paper-line);
    font-family: var(--mnvfx-font-mono);
}

.mnvfx-application__title {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

.mnvfx-application__meta {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--mnvfx-paper-ink-soft);
}

.mnvfx-application__row {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 1rem;
    padding: 1rem 1.75rem;
    border-bottom: 1px dashed var(--mnvfx-paper-line);
    font-family: var(--mnvfx-font-mono);
    align-items: baseline;
}

.mnvfx-application__row:last-of-type {
    border-bottom: none;
}

.mnvfx-application__label {
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mnvfx-paper-ink-soft);
}

.mnvfx-application__value {
    font-size: 0.875rem;
    line-height: 1.55;
}

.mnvfx-application__stamp {
    display: inline-block;
    border: 1.5px solid var(--mnvfx-accent);
    color: var(--mnvfx-accent);
    padding: 0.15em 0.6em;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    transform: rotate(-0.6deg);
}

.mnvfx-application__tag {
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-left: 0.6em;
}

.mnvfx-application__tag--required {
    color: var(--mnvfx-accent);
}

.mnvfx-application__tag--optional {
    color: var(--mnvfx-paper-ink-soft);
}

.mnvfx-application__hint {
    display: block;
    font-size: 0.75rem;
    color: var(--mnvfx-paper-ink-soft);
    margin-top: 0.3em;
}

.mnvfx-application__foot {
    padding: 1.25rem 1.75rem 1.5rem;
    border-top: 1px solid var(--mnvfx-paper-line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.mnvfx-application__btn {
    display: inline-block;
    font-family: var(--mnvfx-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    padding: 0.9em 1.4em;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mnvfx-application__btn:focus-visible {
    outline: 2px solid var(--mnvfx-accent);
    outline-offset: 2px;
}

.mnvfx-application__btn--primary {
    background: var(--mnvfx-paper-ink);
    color: var(--mnvfx-paper);
    text-decoration: none;
}

.mnvfx-application__btn--primary:hover {
    background: var(--mnvfx-accent);
    color: #fff;
}

.mnvfx-application__btn--ghost {
    background: transparent;
    color: var(--mnvfx-paper-ink-soft);
    border: 1px solid var(--mnvfx-paper-line);
}

.mnvfx-application__btn--ghost:hover {
    border-color: var(--mnvfx-paper-ink);
    color: var(--mnvfx-paper-ink);
}

.mnvfx-application__copied {
    border-color: var(--mnvfx-accent) !important;
    color: var(--mnvfx-accent) !important;
}

.mnvfx-application__note {
    font-family: var(--mnvfx-font-mono);
    font-size: 0.8rem;
    color: var(--mnvfx-text-muted);
    line-height: 1.6;
    margin-top: var(--mnvfx-space);
}

@media (max-width: 640px) {
    .mnvfx-application__row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .mnvfx-application__head,
    .mnvfx-application__foot {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ==========================================================================
   17. Header logo — mobile overlap fix
   Blocksy sizes the logo purely by height (--logo-max-height, default
   50px) with width:auto and no max-width at all. Our logo file's
   intrinsic aspect ratio is very wide (2560x365, ~7:1), so a 50px-tall
   render forces ~350px of width — on a 375px phone that runs straight
   into the hamburger trigger. Overriding the height var (not adding a
   max-width) keeps Blocksy's own sizing mechanism intact, just tuned
   for the width this specific logo file needs. 999.98px matches the
   exact breakpoint Blocksy's own dynamic CSS uses for the offcanvas
   mobile menu width, i.e. where the burger trigger takes over from the
   inline nav.
   ========================================================================== */
@media (max-width: 999.98px) {
    .site-logo-container {
        --logo-max-height: 32px;
    }
}