/* ============================================================
   NOVL MAGAZINE — Main Stylesheet
   Design system from Figma (March 2026)
   ============================================================ */

/* ─── Custom Properties ──────────────────────────────────────────────────── */
:root {
    --color-black:      #000000;
    --color-surface:    #151515;
    --color-white:      #ffffff;
    --font-base:        "chamfer-gothic-ludlow", sans-serif;
    --fw-light:         300;
    --fw-regular:       500;
    --fw-bold:          700;
    --fw-extrabold:     700;
    --header-h:         80px;
    --novl-page-inline: 62px;
    --transition:       0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Typography — readability */
    --text-root-min:    17px;
    --text-root-max:    19px;
    --lh-root:          1.62;
    --text-prose-min:   20px;
    --text-prose-pref:  2vw;
    --text-prose-max:   34px;
    --lh-prose:         1.8;
    --measure-prose:    66ch;
    --text-lead-min:    19px;
    --text-lead-pref:   1.9vw;
    --text-lead-max:    30px;
    --lh-lead:          1.84;
    --text-secondary-min:  18px;
    --text-secondary-pref:   1.55vw;
    --text-secondary-max:    25px;
    --lh-secondary:     1.82;
    --text-label:       14px;
    --text-label-lg:    15px;
    /* Default tracking — inherited site-wide; explicit rules override */
    --track-site:       0.03em;
    --track-prose:      0.03em;
    --track-lead:       0.03em;
    --track-secondary:  0.03em;
    --track-label:      0.09em;
    --track-label-tight: 0.075em;
    /* Display / UI — large type, nav, buttons */
    --track-nav-menu:                 0.09em;
    --track-nav-menu-mobile:          0.07em;
    --track-display:                  0.065em;
    --track-display-tighter:          0.09em;
    --track-display-tighter-mobile:   0.08em;
    --track-home-hero-title-mobile:   0.055em;
    --track-ui-loose:                 0.05em;
    --track-section-title:            0.055em;
    --track-team-heading:             0.08em;
    --track-team-name:                0.07em;
    --track-contact-heading:          0.02em;
    --track-button:                   0.13em;
    --track-landing-tagline:          0.10em;
    --track-landing-tagline-mobile:   0.18em;
    --track-label-form-mobile:        0.075em;
    --track-label-topics-mobile:      0.09em;
    --color-text-muted: rgba(255, 255, 255, 0.88);
    --color-text-faint: rgba(255, 255, 255, 0.65);
    --color-text-dim:   rgba(255, 255, 255, 0.65);
}

/* ─── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-base);
    font-weight: var(--fw-regular);
    font-size: clamp(var(--text-root-min), 1.05vw, var(--text-root-max));
    line-height: var(--lh-root);
    letter-spacing: var(--track-site);
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--color-black);
    color: var(--color-white);
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: var(--font-base); }
input, select, textarea { font-family: var(--font-base); }

button,
input,
select,
textarea {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ─── Site Header ─────────────────────────────────────────────────────────── */
.novl-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(35px, env(safe-area-inset-top)) max(var(--novl-page-inline), env(safe-area-inset-right)) 35px max(var(--novl-page-inline), env(safe-area-inset-left));
    pointer-events: none; /* children re-enable */
    transition: background-color var(--transition), backdrop-filter var(--transition), box-shadow var(--transition), padding var(--transition);
}

/* Hide header while the nav overlay is open so the logo + menu icon
   don't bleed through the 96% backdrop. */
body.has-nav-open .novl-header { visibility: hidden; }
@supports selector(:has(*)) {
    body:has(.novl-nav-overlay.is-open) .novl-header { visibility: hidden; }
}

.novl-header.is-scrolled {
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.novl-logo,
.novl-menu-toggle {
    pointer-events: all;
}

.novl-logo img {
    width: 282px;
    height: 45px;
    object-fit: contain;
    object-position: left center;
}

.novl-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 11px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -11px -6px; /* reclaim added padding so visual position is unchanged */
    opacity: 1;
    transition: opacity var(--transition);
}
.novl-menu-toggle:hover { opacity: 0.7; }
.novl-menu-toggle img,
.novl-menu-toggle svg {
    width: 31px;
    height: 22px;
}

/* ─── Nav Overlay ─────────────────────────────────────────────────────────── */
.novl-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(0, 0, 0, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

.novl-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.novl-nav-close {
    position: absolute;
    top: max(28px, env(safe-area-inset-top));
    right: max(calc(var(--novl-page-inline) - 6px), env(safe-area-inset-right));
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    opacity: 0.7;
    transition: opacity var(--transition);
}
.novl-nav-close:hover { opacity: 1; }

.novl-nav-menu {
    text-align: center;
}

.novl-nav-menu li {
    margin: 20px 0;
}

.novl-nav-menu a {
    font-size: clamp(32px, 6vw, 72px);
    font-weight: var(--fw-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--track-nav-menu);
    line-height: 1.08;
    color: var(--color-white);
    transition: opacity var(--transition);
}
.novl-nav-menu a:hover { opacity: 0.5; }

/* ─── Hero Section (shared) ───────────────────────────────────────────────── */
.novl-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--color-black) center/cover no-repeat;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.novl-hero--no-image {
    background: #6b6b6b;
}

/* Dark gradient overlay so text stays legible */
.novl-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.05) 40%,
        rgba(0,0,0,0.4)  100%
    );
    pointer-events: none;
}

.novl-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    padding: 0 var(--novl-page-inline);
}

.novl-hero__title {
    font-size: clamp(48px, 9vw, 90px);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--track-display);
    text-transform: uppercase;
    line-height: 1.04;
    color: var(--color-white);
}

.novl-hero__scroll {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    width: fit-content;
    margin: 0 auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    font-weight: var(--fw-regular);
    color: var(--color-white);
    letter-spacing: var(--track-ui-loose);
    line-height: 1.35;
    animation: novl-bounce 2s ease-in-out infinite;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.novl-hero__scroll img,
.novl-hero__scroll svg {
    width: 34px;
    height: 19px;
}

/* "PLACEHOLDER" — outline / transparent second line (matching Figma) */
.novl-hero__title .title-outline {
    -webkit-text-stroke: 2px var(--color-white);
    color: transparent;
    display: block;
}

/* ─── Home: Nav Dots (right edge) ─────────────────────────────────────────── */
.novl-home {
    background: var(--color-black);
}

.novl-home-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    isolation: isolate;
}

/* Slide container clips the slight scale-up of inactive slides without
   forcing overflow:hidden on <body>. */
.novl-home-hero__slides { overflow: hidden; }

.novl-home-hero::after {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.12) 52%,
        rgba(0, 0, 0, 0.3) 100%
    );
}

.novl-home-hero__slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.novl-home-hero__slide {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 0.8s ease, transform 1.2s ease;
}

.novl-home-hero__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.novl-home-hero__slide--fallback {
    background:
        radial-gradient(circle at 50% 20%, #417fe3 0%, #2b5dbc 35%, #0f214d 100%);
}

.novl-home-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(var(--header-h) + 52px) var(--novl-page-inline) 80px;
    text-align: left;
}

.novl-home-hero__link {
    display: inline-block;
    transition: opacity var(--transition);
}

.novl-home-hero__link:hover {
    opacity: 0.88;
}

.novl-home-hero__title {
    font-size: clamp(80px, 14vw, 200px);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--track-display);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-white);
}

.novl-home-hero__title-line {
    display: block;
    white-space: nowrap;
}

.novl-home-hero__title-line + .novl-home-hero__title-line {
    margin-top: 8px;
}

.novl-home-hero__title-line--outline {
    -webkit-text-stroke: 1.8px var(--color-white);
    color: transparent;
}

.novl-home-hero__title-line.is-hidden {
    display: none;
}

.novl-home-dots {
    position: fixed;
    right: max(var(--novl-page-inline), env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.novl-home-dots__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

/* 36x36 invisible hit target for thumb-friendly tapping. */
.novl-home-dots__dot::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
}

.novl-home-dots__dot.is-active,
.novl-home-dots__dot:hover {
    background: var(--color-white);
    transform: scale(1.3);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
}

/* ─── Home: Slide Arrows ──────────────────────────────────────────────────── */
.novl-home-arrows {
    position: absolute;
    bottom: 34px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    pointer-events: none;
}

.novl-home-arrow {
    pointer-events: all;
    min-width: 44px;
    min-height: 44px;
    padding: 5px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    opacity: 0.92;
    transition: opacity var(--transition), transform var(--transition);
}
.novl-home-arrow:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.novl-home-arrow svg {
    width: 19px;
    height: 34px;
}

.novl-home-arrow--prev svg {
    transform: scaleX(-1);
}

.novl-home-arrow--next svg {
    transform: none;
}

/* ─── Article Header (hero + title + meta wrapper) ───────────────────────── */
.novl-article-header {
    position: relative;
}

/* ─── Article Hero ────────────────────────────────────────────────────────── */
.novl-article-hero {
    position: relative;
    width: 100%;
    height: 70vh;
    height: 70dvh;
    background: var(--color-black) center/cover no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.novl-article-hero--no-image {
    background-color: #6b6b6b;
}

.novl-article-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.0)  0%,
        rgba(0,0,0,0.15) 35%,
        rgba(0,0,0,0.75) 70%,
        rgba(0,0,0,1.0)  100%
    );
    pointer-events: none;
}

.novl-article-hero__title-wrap {
    position: absolute;
    top: 70vh;
    top: 70dvh;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
    text-align: center;
    padding: 0 var(--novl-page-inline);
}

.novl-article-hero__title {
    font-size: clamp(84px, 15vw, 260px);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--track-display-tighter);
    text-transform: uppercase;
    line-height: 0.96;
    color: var(--color-white);
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: balance;
}

.novl-article-hero__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    font-weight: var(--fw-regular);
    color: var(--color-white);
    letter-spacing: var(--track-ui-loose);
    animation: novl-bounce 2s ease-in-out infinite;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    /* now in normal flow below the title; margin clears the title's bottom half */
    margin-top: clamp(28px, 5vw, 100px);
    padding-bottom: 40px;
}

.novl-article-hero__scroll img,
.novl-article-hero__scroll svg {
    width: 34px;
    height: 19px;
}

@keyframes novl-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

/* ─── Article Metadata Row ────────────────────────────────────────────────── */
.novl-article-meta {
    background: var(--color-black);
    padding: clamp(80px, 10vw, 130px) var(--novl-page-inline) 50px;
    display: flex;
    flex-direction: row;
    gap: clamp(40px, 10vw, 240px);
}

.novl-article-meta__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.novl-article-meta__label {
    font-size: var(--text-label);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    line-height: 1.35;
    color: var(--color-text-muted);
}

.novl-article-meta__value {
    font-size: clamp(20px, 1.9vw, 24px);
    font-weight: var(--fw-regular);
    letter-spacing: var(--track-lead);
    line-height: 1.45;
    color: var(--color-white);
}

/* Keeps hero/title rhythm when Category/Published/Author row is turned off */
.novl-article-meta-spacer {
    background: var(--color-black);
    padding: clamp(80px, 10vw, 130px) var(--novl-page-inline) 50px;
}

/* ─── Article Quote ───────────────────────────────────────────────────────── */
.novl-article-quote {
    background: var(--color-black);
    padding: 0 var(--novl-page-inline) 60px;
}

.novl-article-quote__text {
    max-width: min(1100px, var(--measure-prose));
    margin: 0;
    font-size: clamp(26px, 3vw, 52px);
    font-weight: var(--fw-regular);
    line-height: 1.38;
    color: var(--color-white);
    text-wrap: balance;
}

.novl-article-quote__text p {
    margin: 0;
}

.novl-article-quote__text p + p {
    margin-top: 0.6em;
}

.novl-article-quote__open,
.novl-article-quote__close {
    font-weight: var(--fw-extrabold);
    color: var(--color-white);
}

.novl-article-quote__cite {
    display: block;
    margin-top: 1.25em;
    max-width: min(48ch, 100%);
    font-size: clamp(17px, 1.85vw, 22px);
    font-style: normal;
    font-weight: var(--fw-bold);
    line-height: 1.45;
    letter-spacing: var(--track-prose);
    text-transform: none;
    color: var(--color-white);
}

.novl-article-quote__cite::before {
    content: '\2014\00a0';
    color: rgba(255, 255, 255, 0.65);
}

/* ─── Article Body ────────────────────────────────────────────────────────── */
.novl-article-body {
    background: var(--color-black);
    padding: 60px var(--novl-page-inline) 80px;
}

.novl-article-body__text {
    font-size: clamp(var(--text-prose-min), var(--text-prose-pref), var(--text-prose-max));
    font-weight: var(--fw-regular);
    line-height: var(--lh-prose);
    letter-spacing: var(--track-prose);
    color: var(--color-white);
    max-width: min(1401px, var(--measure-prose));
}

.novl-article-body__text p + p {
    margin-top: 1.5em;
}

.novl-article-body__text ul,
.novl-article-body__text ol {
    list-style-position: outside;
    padding-left: 1.35em;
    margin: 1em 0 1.25em;
}

.novl-article-body__text ul {
    list-style: disc;
}

.novl-article-body__text ol {
    list-style: decimal;
}

.novl-article-body__text li {
    margin-bottom: 0.45em;
}

.novl-article-body__text a {
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-decoration-color: rgba(255, 255, 255, 0.58);
}

.novl-article-body__text a:hover {
    text-decoration-color: rgba(255, 255, 255, 0.85);
}

/* ─── Featured Video ─────────────────────────────────────────────────────── */
.novl-featured-video {
    background: var(--color-black);
    padding: 0 var(--novl-page-inline) 80px;
}

.novl-featured-video__inner {
    position: relative;
    width: 100%;
    max-width: 1401px;
    margin: 0 auto;
    overflow: hidden;
    background: #080808;
}

.novl-featured-video__inner .novl-masonry__link {
    aspect-ratio: 16 / 9;
}

.novl-featured-video__inner .novl-masonry__video {
    height: 100%;
    object-fit: cover;
}

/* ─── Article Gallery (Masonry) ───────────────────────────────────────────── */
.novl-gallery {
    background: var(--color-black);
    padding: 0 var(--novl-page-inline) 80px;
}

.novl-masonry {
    columns: 3;
    column-gap: 12px;
    max-width: 1400px;
}

.novl-gallery--editorial .novl-masonry {
    columns: initial;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 50px 40px;
    margin: 0 auto;
    width: 100%;
    max-width: 1401px;
    align-items: start;
}

.novl-masonry__item {
    break-inside: avoid;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.novl-gallery--editorial .novl-masonry__item {
    break-inside: auto;
    margin-bottom: 0;
    min-width: 0;
}

.novl-gallery--editorial {
    display: grid;
    gap: 40px;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(1) {
    grid-column: 1 / span 5;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(2) {
    grid-column: 8 / span 4;
    margin-top: 60px;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(3) {
    grid-column: 2 / span 10;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(4) {
    grid-column: 1 / span 6;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(5) {
    grid-column: 8 / span 4;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(6) {
    grid-column: 2 / span 10;
}

.novl-gallery--editorial .novl-masonry--count-1 .novl-masonry__item:first-child {
    grid-column: 2 / span 10;
    margin-top: 0;
}

.novl-gallery--editorial .novl-masonry--count-2 .novl-masonry__item:first-child {
    grid-column: 2 / span 4;
}

.novl-gallery--editorial .novl-masonry--count-2 .novl-masonry__item:nth-child(2) {
    grid-column: 8 / span 4;
}

.novl-masonry__link {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    background: #080808;
}

.novl-gallery--editorial .novl-masonry__link {
    height: 100%;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(1) .novl-masonry__link {
    aspect-ratio: 3 / 4;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(2) .novl-masonry__link {
    aspect-ratio: 4 / 5;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(3) .novl-masonry__link {
    aspect-ratio: 16 / 10;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(4) .novl-masonry__link {
    aspect-ratio: 4 / 5;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(5) .novl-masonry__link {
    aspect-ratio: 3 / 4;
}

.novl-gallery--editorial .novl-masonry__item:nth-child(6) .novl-masonry__link {
    aspect-ratio: 16 / 9;
}

.novl-gallery--editorial .novl-masonry--count-1 .novl-masonry__item:first-child .novl-masonry__link {
    aspect-ratio: 16 / 10;
}

.novl-masonry__img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s var(--transition), opacity 0.45s ease, filter 0.45s ease;
}

.novl-gallery--editorial .novl-masonry__img {
    height: 100%;
    object-fit: cover;
}

.novl-masonry__video {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s var(--transition), opacity 0.45s ease, filter 0.45s ease;
}

.novl-gallery--editorial .novl-masonry__video {
    height: 100%;
    object-fit: cover;
}

.novl-masonry__link--video {
    cursor: zoom-in;
}

.novl-masonry__link:hover .novl-masonry__img,
.novl-masonry__link:focus-visible .novl-masonry__img,
.novl-masonry__link--video:hover .novl-masonry__video {
    transform: scale(1.02);
    opacity: 0.82;
    filter: saturate(1.05);
}

.novl-masonry__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(116, 8, 14, 0.16) 0%, rgba(188, 26, 36, 0.28) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 34%);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.45s ease;
    pointer-events: none;
    transform: scale(1.02);
}

.novl-masonry__link:hover .novl-masonry__overlay,
.novl-masonry__link:focus-visible .novl-masonry__overlay {
    opacity: 1;
    transform: scale(1);
}

.novl-masonry__affordance {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    color: var(--color-white);
    transform: scale(0.985);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.45s ease;
    pointer-events: none;
}

.novl-masonry__affordance::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.novl-masonry__affordance-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    transform: translate(-50%, -50%);
}

.novl-masonry__affordance-icon svg {
    display: none;
}

.novl-masonry__affordance-icon::before,
.novl-masonry__affordance-icon::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
}

.novl-masonry__affordance-icon::before {
    width: 10px;
    height: 1px;
}

.novl-masonry__affordance-icon::after {
    width: 1px;
    height: 10px;
}

.novl-masonry__affordance-label {
    display: none;
}

.novl-masonry__link:hover .novl-masonry__affordance,
.novl-masonry__link:focus-visible .novl-masonry__affordance,
.novl-masonry__link--video:hover .novl-masonry__affordance {
    opacity: 1;
    transform: scale(1);
}

.novl-masonry__affordance--video .novl-masonry__affordance-icon::before,
.novl-masonry__affordance--video .novl-masonry__affordance-icon::after {
    display: none;
}

.novl-masonry__affordance--video .novl-masonry__affordance-icon {
    background: rgba(255, 255, 255, 0.04);
    width: 32px;
    height: 32px;
}

.novl-masonry__affordance--video .novl-masonry__affordance-icon::before {
    display: block;
    width: 0;
    height: 0;
    background: none;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
}

.novl-masonry__link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: 4px;
}

.novl-masonry__link--video:hover .novl-masonry__overlay,
.novl-masonry__link--video:focus-visible .novl-masonry__overlay {
    opacity: 1;
    transform: scale(1);
}

@media (hover: none) {
    .novl-masonry__img {
        opacity: 1;
        filter: none;
    }

    .novl-masonry__overlay,
    .novl-masonry__affordance {
        opacity: 0;
        transform: scale(0.985);
    }
}

/* ─── Lightbox ─────────────────────────────────────────────────────────────── */
.novl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.novl-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.novl-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    cursor: zoom-out;
}

.novl-lightbox__close {
    position: absolute;
    top: max(28px, env(safe-area-inset-top));
    right: max(32px, env(safe-area-inset-right));
    z-index: 10;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    opacity: 0.70;
    padding: 8px;
    transition: opacity var(--transition);
}
.novl-lightbox__close:hover { opacity: 1; }

.novl-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    opacity: 0.70;
    padding: 20px;
    transition: opacity var(--transition);
}
.novl-lightbox__nav:hover { opacity: 1; }
.novl-lightbox__prev { left: 16px; }
.novl-lightbox__next { right: 16px; }

.novl-lightbox__stage {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
    max-height: 90dvh;
}

.novl-lightbox__img {
    max-width: 90vw;
    max-height: 85vh;
    max-height: 85dvh;
    width: auto;
    height: 85vh;
    height: 85dvh;
    object-fit: contain;
    display: block;
    transition: opacity 0.2s ease;
}

.novl-lightbox__img.is-loading { opacity: 0; }

.novl-lightbox__video {
    max-width: 90vw;
    max-height: 85vh;
    max-height: 85dvh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    outline: none;
}

.novl-lightbox__caption {
    margin-top: 14px;
    font-size: var(--text-label);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--color-text-muted);
    text-align: center;
    min-height: 1em;
}

.novl-lightbox__counter {
    position: absolute;
    bottom: max(28px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-size: var(--text-label);
    letter-spacing: var(--track-label);
    color: var(--color-text-faint);
}

/* ─── Generic Page Content ────────────────────────────────────────────────── */
.novl-content {
    background: var(--color-black);
    padding: 80px var(--novl-page-inline);
}

.novl-content__inner {
    max-width: min(1200px, var(--measure-prose));
    color: var(--color-white);
}

.novl-content__inner h2 {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: var(--fw-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--track-section-title);
    line-height: 1.08;
    margin-bottom: 32px;
}

.novl-content__inner p {
    font-size: clamp(var(--text-lead-min), var(--text-lead-pref), var(--text-lead-max));
    font-weight: var(--fw-regular);
    line-height: var(--lh-lead);
    letter-spacing: var(--track-lead);
    margin-bottom: 1.5em;
}

.novl-content__inner ul,
.novl-content__inner ol {
    list-style-position: outside;
    padding-left: 1.35em;
    margin: 1em 0 1.25em;
    font-size: clamp(var(--text-lead-min), var(--text-lead-pref), var(--text-lead-max));
    line-height: var(--lh-lead);
    letter-spacing: var(--track-lead);
}

.novl-content__inner ul {
    list-style: disc;
}

.novl-content__inner ol {
    list-style: decimal;
}

.novl-content__inner li {
    margin-bottom: 0.45em;
}

.novl-content__inner a {
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-decoration-color: rgba(255, 255, 255, 0.58);
}

.novl-content__inner a:hover {
    text-decoration-color: rgba(255, 255, 255, 0.85);
}

/* ─── About Page ──────────────────────────────────────────────────────────── */
/*
 * Note: Do not use var(--measure-prose) as the section max-width — it is ~70ch and
 * shrinks the entire block to a single ultra-narrow column. Use a px cap + margin auto.
 */
.novl-about__statement {
    background: var(--color-black);
    padding: 100px var(--novl-page-inline) 60px;
    max-width: min(960px, 100%);
    margin-inline: auto;
    box-sizing: border-box;
}

.novl-about__statement h2 {
    font-size: clamp(36px, 5vw, 72px);
    font-weight: var(--fw-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--track-section-title);
    line-height: 1.12;
    margin-bottom: 48px;
    color: var(--color-white);
}

.novl-about__statement p {
    font-size: clamp(var(--text-lead-min), var(--text-lead-pref), var(--text-lead-max));
    font-weight: var(--fw-regular);
    line-height: var(--lh-lead);
    letter-spacing: var(--track-prose);
    word-spacing: 0.04em;
    margin-bottom: 1.5em;
    color: var(--color-white);
    max-width: none;
}

.novl-about__columns {
    background: var(--color-black);
    padding: 0 var(--novl-page-inline) 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: min(1200px, 100%);
    margin-inline: auto;
    box-sizing: border-box;
}

.novl-about__columns p {
    font-size: clamp(var(--text-secondary-min), var(--text-secondary-pref), var(--text-secondary-max));
    font-weight: var(--fw-regular);
    line-height: var(--lh-secondary);
    letter-spacing: var(--track-prose);
    word-spacing: 0.04em;
    color: var(--color-white);
}

.novl-about__columns--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: min(760px, 100%);
    gap: 0;
}

/* Team grid */
.novl-team {
    background: var(--color-black);
    padding: 60px var(--novl-page-inline) 100px;
    max-width: min(1200px, 100%);
    margin-inline: auto;
    box-sizing: border-box;
}

.novl-team__heading {
    font-size: clamp(28px, 4vw, 56px);
    font-weight: var(--fw-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--track-team-heading);
    line-height: 1.1;
    margin-bottom: 60px;
    color: var(--color-white);
}

.novl-team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 320px));
    gap: 40px;
    align-items: start;
    justify-content: center;
}

.novl-team__member {
    width: 100%;
    max-width: 320px;
}

.novl-team__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: grayscale(20%);
}

.novl-team__info {
    padding: 16px 0 0;
}

.novl-team__name {
    font-size: 21px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--track-team-name);
    line-height: 1.2;
    color: var(--color-white);
}

.novl-team__role {
    font-size: 17px;
    font-weight: var(--fw-regular);
    line-height: 1.45;
    letter-spacing: var(--track-site);
    color: var(--color-text-muted);
    margin-top: 6px;
}

/* ─── Contact Page ────────────────────────────────────────────────────────── */
.novl-contact-page {
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    background: var(--color-black);
    padding: calc(var(--header-h) + 60px) max(var(--novl-page-inline), env(safe-area-inset-right)) calc(80px + env(safe-area-inset-bottom)) max(var(--novl-page-inline), env(safe-area-inset-left));
}

.novl-contact__layout {
    width: 100%;
    max-width: 1320px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 8vw, 100px);
    align-items: start;
}

.novl-contact__layout--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: min(760px, 100%);
}

.novl-contact__layout--single .novl-contact__intro {
    border-right: 0;
    padding-right: 0;
}

.novl-contact__intro {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: clamp(40px, 6vw, 80px);
}

.novl-contact__heading {
    font-size: clamp(48px, 5vw, 80px);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--track-contact-heading);
    line-height: 1.08;
    color: var(--color-white);
    margin-bottom: 28px;
}

.novl-contact__body {
    font-size: clamp(var(--text-secondary-min), var(--text-secondary-pref), var(--text-secondary-max));
    line-height: var(--lh-secondary);
    letter-spacing: var(--track-lead);
    color: var(--color-white);
    max-width: min(560px, var(--measure-prose));
}

.novl-contact__body + .novl-contact__body {
    margin-top: 1.1em;
}

.novl-contact__topics {
    display: grid;
    gap: 16px;
    margin-top: 48px;
}

.novl-contact__topics li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--text-label-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--color-text-muted);
}

.novl-contact__topics li::before {
    content: '';
    width: 32px;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}

.novl-contact__form-col {
    width: 100%;
}

/* Contact Form 7 & native form styles */
.novl-contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wpcf7-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 20px;
    align-items: start;
}

.novl-contact-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.novl-contact-form .form-field,
.wpcf7-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wpcf7-form > p {
    margin: 0;
}

.wpcf7-form > p:nth-of-type(1),
.wpcf7-form > p:nth-of-type(2) {
    display: block;
    width: auto;
    min-width: 0;
}

.wpcf7-form > p:nth-of-type(1) {
    margin-right: 0;
}

.wpcf7-form > p:nth-of-type(n + 3) {
    display: block;
    width: auto;
    grid-column: 1 / -1;
}

.novl-contact-form label,
.wpcf7-form label {
    font-size: clamp(14px, 1.1vw, 15px);
    font-weight: var(--fw-regular);
    text-transform: none;
    letter-spacing: var(--track-site);
    line-height: 1.4;
    color: var(--color-text-muted);
}

.novl-contact-form input,
.novl-contact-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: clamp(17px, 1.45vw, 21px);
    font-weight: var(--fw-regular);
    letter-spacing: var(--track-lead);
    line-height: 1.38;
    padding: 8px 0 12px;
    width: 100%;
    outline: none;
    transition: border-color var(--transition);
}

.novl-contact-form input:focus,
.novl-contact-form textarea:focus,
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
    border-bottom-color: var(--color-white);
}

.novl-contact-form input::placeholder,
.novl-contact-form textarea::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-size: 1em;
    line-height: inherit;
    letter-spacing: inherit;
    opacity: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.novl-contact-form textarea,
.wpcf7-form textarea {
    resize: none;
    min-height: 150px;
}

.novl-btn,
.novl-contact-form button[type="submit"],
.wpcf7-form input[type="submit"] {
    display: inline-block;
    font-family: var(--font-base);
    font-size: var(--text-label-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-button);
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 16px 44px;
    background: transparent;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    align-self: flex-start;
    margin-top: 8px;
}

.novl-btn:hover,
.novl-contact-form button[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover {
    border-color: var(--color-white);
    background: var(--color-white);
    color: var(--color-black);
}

.wpcf7-spinner {
    margin: 8px 0 0 10px;
}

/* ── Custom Contact Form: honeypot, status, disabled ───────────────────── */
.novl-contact-form__hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.novl-contact-form__status {
    margin: 0 0 16px 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-text-muted);
    font-size: var(--text-label);
    line-height: 1.5;
}

.novl-contact-form__status[hidden] {
    display: none;
}

.novl-contact-form__status--success {
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-white);
}

.novl-contact-form__status--error {
    border-color: rgba(255, 90, 90, 0.55);
    color: #ff8a8a;
}

.novl-contact-form button[type="submit"][disabled],
.novl-contact-form button[type="submit"][aria-busy="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

.wpcf7-response-output {
    margin: 10px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-text-muted);
    font-size: var(--text-label);
    padding: 10px 14px;
}

/* CF7 overrides */
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}
.wpcf7-form p {
    margin: 0;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.novl-footer {
    background: var(--color-black);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 60px max(var(--novl-page-inline), env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(var(--novl-page-inline), env(safe-area-inset-left));
}

.novl-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

.novl-footer__logo img {
    width: 86px;
    height: auto;
}

.novl-footer__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    font-size: clamp(17px, 2.35vw, 22px);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-ui-loose);
    line-height: 1.35;
    color: var(--color-white);
}

.novl-footer__copy {
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-ui-loose);
    line-height: 1.35;
}

.novl-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    opacity: 1;
    transition: opacity var(--transition);
}

.novl-footer__social:hover {
    opacity: 0.82;
}

.novl-footer__social svg {
    height: 22px;
    width: auto;
    flex-shrink: 0;
}

/* ─── Archive fallback ────────────────────────────────────────────────────── */
.novl-archive {
    padding: calc(var(--header-h) + 40px) var(--novl-page-inline) 80px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 40px;
}

.novl-archive__item {}

.novl-archive__thumb img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
}

.novl-archive__info {
    padding: 20px 0 0;
}

.novl-archive__title {
    font-size: 24px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--track-section-title);
    line-height: 1.18;
    margin-bottom: 12px;
}

.novl-archive__excerpt {
    font-size: clamp(17px, 1.5vw, 18px);
    line-height: var(--lh-prose);
    letter-spacing: var(--track-lead);
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

/* ─── Portfolio Page ──────────────────────────────────────────────────────── */
.novl-portfolio {
    background: var(--color-black);
    padding: 80px var(--novl-page-inline) 100px;
    display: grid;
    gap: 80px;
}

.novl-portfolio-page--no-hero .novl-portfolio {
    padding-top: calc(var(--header-h) + 52px);
}

/* Each group of up to 6 cards mirrors the editorial masonry layout */
.novl-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 50px 40px;
    max-width: 1401px;
    margin: 0 auto;
    width: 100%;
    align-items: start;
}

/* ── Placement pattern (matches .novl-gallery--editorial) ── */
.novl-portfolio__card:nth-child(1) { grid-column: 1 / span 5; }
.novl-portfolio__card:nth-child(2) { grid-column: 8 / span 4; margin-top: 60px; }
.novl-portfolio__card:nth-child(3) { grid-column: 2 / span 10; }
.novl-portfolio__card:nth-child(4) { grid-column: 1 / span 6; }
.novl-portfolio__card:nth-child(5) { grid-column: 8 / span 4; }
.novl-portfolio__card:nth-child(6) { grid-column: 2 / span 10; }

.novl-portfolio__card {
    position: relative;
    min-width: 0;
}

.novl-portfolio__link {
    display: block;
    cursor: pointer;
    transition: opacity var(--transition);
}

.novl-portfolio__link:hover {
    opacity: 0.92;
}

/* ── Image container ── */
.novl-portfolio__media {
    position: relative;
    overflow: hidden;
    background: #080808;
}

/* Aspect ratios per position (matching editorial gallery) */
.novl-portfolio__card:nth-child(1) .novl-portfolio__media { aspect-ratio: 3 / 4; }
.novl-portfolio__card:nth-child(2) .novl-portfolio__media { aspect-ratio: 4 / 5; }
.novl-portfolio__card:nth-child(3) .novl-portfolio__media { aspect-ratio: 16 / 10; }
.novl-portfolio__card:nth-child(4) .novl-portfolio__media { aspect-ratio: 4 / 5; }
.novl-portfolio__card:nth-child(5) .novl-portfolio__media { aspect-ratio: 3 / 4; }
.novl-portfolio__card:nth-child(6) .novl-portfolio__media { aspect-ratio: 16 / 9; }

.novl-portfolio__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--transition), opacity 0.45s ease, filter 0.45s ease;
}

.novl-portfolio__link:hover .novl-portfolio__img,
.novl-portfolio__link:focus-visible .novl-portfolio__img {
    transform: scale(1.02);
    opacity: 0.82;
    filter: saturate(1.05);
}

/* Hover overlay (matching masonry) */
.novl-portfolio__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(116, 8, 14, 0.16) 0%, rgba(188, 26, 36, 0.28) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 34%);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.45s ease;
    pointer-events: none;
    transform: scale(1.02);
}

.novl-portfolio__link:hover .novl-portfolio__overlay,
.novl-portfolio__link:focus-visible .novl-portfolio__overlay {
    opacity: 1;
    transform: scale(1);
}

/* ── Article info (below image, editorial style) ── */
.novl-portfolio__info {
    padding: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.novl-portfolio__cat {
    font-size: var(--text-label);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--color-text-muted);
}

.novl-portfolio__title {
    font-size: clamp(24px, 3.1vw, 52px);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--track-section-title);
    color: var(--color-white);
    line-height: 1.18;
}

.novl-portfolio__date {
    font-size: 15px;
    font-weight: var(--fw-light);
    line-height: 1.35;
    letter-spacing: var(--track-site);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.novl-portfolio__link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: 4px;
}

.novl-portfolio__empty {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: var(--fw-regular);
    letter-spacing: var(--track-lead);
    color: var(--color-text-muted);
    text-align: center;
    padding: 80px 0;
    grid-column: 1 / -1;
}

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* Front-end plugin UI can ship its own font stacks; normalize them here. */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button,
.a-stats a.a-stats__link,
.a-stats a.a-stats__link:visited,
.a-stats a.a-stats__link:active {
    font-family: var(--font-base) !important;
    font-weight: var(--fw-regular);
    letter-spacing: var(--track-site) !important;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .novl-contact-page {
        align-items: flex-start;
        padding: calc(var(--header-h) + 40px) var(--novl-page-inline) 60px;
    }
    .novl-contact__layout { grid-template-columns: 1fr; gap: 40px; }
    .novl-contact__intro {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 40px;
    }
    .novl-contact__heading { margin-bottom: 16px; }
    .novl-contact__topics { margin-top: 24px; }
    .novl-contact-form__row { grid-template-columns: 1fr; gap: 20px; }
    .wpcf7-form { grid-template-columns: 1fr; }
    .wpcf7-form > p:nth-of-type(1),
    .wpcf7-form > p:nth-of-type(2) {
        display: block;
        width: auto;
    }
    .wpcf7-form > p:nth-of-type(1) { margin-right: 0; }
}

@media (max-width: 1100px) {
    .novl-masonry {
        columns: 2;
        column-gap: 20px;
    }

    .novl-masonry__item {
        margin-bottom: 20px;
    }

    .novl-gallery--editorial {
        gap: 24px;
    }

    .novl-gallery--editorial .novl-masonry {
        display: block;
        columns: 2;
        column-gap: 20px;
        gap: 0;
        max-width: none;
    }

    .novl-gallery--editorial .novl-masonry__item {
        grid-column: auto;
        margin-bottom: 20px;
        margin-top: 0;
    }

    /* Preserve the editorial rhythm of the desktop grid by letting the
       wide hero items (1st, 3rd, 6th of each group of 6) span both
       columns inside the CSS-columns flow. */
    .novl-gallery--editorial .novl-masonry__item:nth-child(1),
    .novl-gallery--editorial .novl-masonry__item:nth-child(3),
    .novl-gallery--editorial .novl-masonry__item:nth-child(6) {
        column-span: all;
        margin-bottom: 24px;
    }

    /* Override per-position aspect-ratio + height rules with matching
       specificity (nth-child(n)) so images render at their natural
       intrinsic ratio inside the CSS-columns flow. */
    .novl-gallery--editorial .novl-masonry__item:nth-child(n) .novl-masonry__link {
        aspect-ratio: auto;
        height: auto;
    }

    .novl-gallery--editorial .novl-masonry__img {
        height: auto;
        object-fit: initial;
    }

    .novl-gallery--editorial .novl-masonry__video {
        height: auto;
        object-fit: initial;
    }

    .novl-about__columns {
        grid-template-columns: 1fr;
    }

    .novl-team__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 280px));
        gap: 32px 24px;
    }

    .novl-team__member {
        max-width: 280px;
    }

    /* Portfolio: 2-column fallback */
    .novl-portfolio__grid {
        display: block;
        columns: 2;
        column-gap: 12px;
    }
    .novl-portfolio__card {
        break-inside: avoid;
        margin-bottom: 24px;
        margin-top: 0;
    }
    /* nth-child(n) bumps specificity to defeat the per-position
       aspect-ratio rules from the desktop layout. */
    .novl-portfolio__card:nth-child(n) .novl-portfolio__media {
        aspect-ratio: auto;
    }
    .novl-portfolio__img {
        height: auto;
        aspect-ratio: auto;
    }

    .novl-portfolio-page--no-hero .novl-portfolio {
        padding-top: calc(var(--header-h) + 36px);
    }
}

@media (max-width: 768px) {
    :root {
        --novl-page-inline: 24px;
    }

    .novl-header {
        padding: max(24px, env(safe-area-inset-top)) max(var(--novl-page-inline), env(safe-area-inset-right)) 24px max(var(--novl-page-inline), env(safe-area-inset-left));
    }

    .novl-logo img { width: 180px; height: 29px; }

    /* The scroll cue is meant for inner pages with a single hero;
       on the home carousel the arrows + dots already cue interaction. */
    .novl-home-hero .novl-hero__scroll { display: none; }

    .novl-hero__title { font-size: clamp(36px, 10vw, 72px); }

    .novl-home-hero__content {
        padding: calc(var(--header-h) + 16px) var(--novl-page-inline) 120px;
    }

    .novl-home-hero__title {
        font-size: clamp(60px, 16vw, 100px);
        line-height: 1;
        letter-spacing: var(--track-home-hero-title-mobile);
    }

    .novl-home-hero__title-line {
        white-space: normal;
    }

    .novl-article-hero__title {
        font-size: clamp(54px, 16vw, 132px);
        letter-spacing: var(--track-display-tighter-mobile);
        line-height: 0.98;
        max-width: 100%;
    }

    .novl-article-meta {
        flex-direction: column;
        gap: 20px;
        padding: clamp(60px, 10vw, 100px) var(--novl-page-inline) 40px;
    }

    .novl-article-meta__label {
        font-size: var(--text-label);
        letter-spacing: var(--track-label-tight);
    }

    .novl-article-meta__value {
        font-size: clamp(18px, 4.8vw, 22px);
    }

    .novl-article-meta-spacer {
        padding: clamp(60px, 10vw, 100px) var(--novl-page-inline) 40px;
    }

    .novl-article-quote { padding: 0 var(--novl-page-inline) 40px; }

    .novl-article-quote__cite {
        font-size: clamp(16px, 4.2vw, 20px);
        margin-top: 1.1em;
    }

    .novl-article-body { padding: 40px var(--novl-page-inline) 60px; }

    .novl-article-body__text {
        max-width: 100%;
    }

    .novl-portfolio__title {
        font-size: clamp(22px, 5.8vw, 40px);
        line-height: 1.2;
    }

    .novl-nav-menu a {
        letter-spacing: var(--track-nav-menu-mobile);
    }

    .novl-featured-video { padding: 0 var(--novl-page-inline) 60px; }
    .novl-gallery { padding: 0 var(--novl-page-inline) 60px; }

    .novl-lightbox__close {
        top: max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        padding: 10px;
    }
    .novl-lightbox__nav { padding: 12px; }
    .novl-lightbox__prev { left: max(4px, env(safe-area-inset-left)); }
    .novl-lightbox__next { right: max(4px, env(safe-area-inset-right)); }
    .novl-lightbox__img,
    .novl-lightbox__video { max-height: 80vh; max-height: 80dvh; }
    .novl-lightbox__img { height: 80vh; height: 80dvh; }
    .novl-lightbox__counter {
        bottom: max(16px, env(safe-area-inset-bottom));
    }

    .novl-contact-page { padding: calc(var(--header-h) + 32px) var(--novl-page-inline) 60px; }
    .novl-contact__heading { font-size: clamp(36px, 10vw, 56px); }

    .novl-contact-form label,
    .wpcf7-form label {
        font-size: 13px;
    }

    .novl-contact__topics li {
        font-size: 14px;
        letter-spacing: var(--track-label-topics-mobile);
    }
    .novl-content { padding: 60px var(--novl-page-inline); }

    .novl-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }

    .novl-team__member {
        max-width: none;
    }

    .novl-team__name {
        font-size: 17px;
    }

    .novl-team__role {
        font-size: 15px;
    }

    .novl-home-dots {
        right: 12px;
        gap: 10px;
    }

    .novl-home-arrows {
        bottom: 26px;
        padding: 0 12px;
    }

    .novl-home-arrow {
        width: 34px;
        height: 19px;
    }

    .novl-home-arrow svg {
        width: 19px;
        height: 34px;
    }

    /* Portfolio: tighter padding */
    .novl-portfolio {
        padding: 60px var(--novl-page-inline) 80px;
        gap: 60px;
    }

    .novl-portfolio-page--no-hero .novl-portfolio {
        padding-top: calc(var(--header-h) + 24px);
    }

    .novl-portfolio__grid {
        column-gap: 8px;
    }
    .novl-portfolio__card {
        margin-bottom: 16px;
    }
}

/* Phones (≤640px): collapse the editorial gallery to a single full-width
   column so each photo gets full bleed and a calm vertical rhythm. */
@media (max-width: 640px) {
    .novl-gallery {
        padding: 0 var(--novl-page-inline) 48px;
    }

    .novl-masonry,
    .novl-gallery--editorial .novl-masonry {
        columns: 1;
        column-gap: 0;
    }

    .novl-masonry__item,
    .novl-gallery--editorial .novl-masonry__item {
        margin-bottom: 16px;
        column-span: none;
    }

    /* Reset the rhythm-item override from the 1100px breakpoint so the
       single-column flow stays uniform. */
    .novl-gallery--editorial .novl-masonry__item:nth-child(1),
    .novl-gallery--editorial .novl-masonry__item:nth-child(3),
    .novl-gallery--editorial .novl-masonry__item:nth-child(6) {
        column-span: none;
        margin-bottom: 16px;
    }

    .novl-gallery--editorial .novl-masonry__item:last-child {
        margin-bottom: 0;
    }
}

/* ─── Coming Soon Landing Page ───────────────────────────────────────────── */
.novl-coming-soon-page {
    background: #000;
}

.novl-landing {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-image: url('../images/coming-soon-hero-bg.jpg');
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.novl-landing::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.2) 20%,
        rgba(0, 0, 0, 0.05) 40%,
        transparent 55%
    );
    pointer-events: none;
}

.novl-landing__content {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
    padding: 0 var(--novl-page-inline);
    margin-bottom: 8vh;
}

.novl-landing__logo {
    width: 100%;
    max-width: 1500px;
    height: auto;
    margin: 0 auto 12px;
}

.novl-landing__tagline {
    font-family: var(--font-base);
    font-weight: var(--fw-regular);
    font-style: normal;
    font-size: 40px;
    letter-spacing: var(--track-landing-tagline);
    text-transform: uppercase;
    line-height: 1.18;
    color: var(--color-white);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    margin: 0 0 16px;
}

.novl-landing__social {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.novl-landing__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 40px;
    color: var(--color-white);
    transition: opacity 0.2s ease;
}

.novl-landing__social a:hover {
    opacity: 0.7;
}

.novl-landing__social svg {
    width: 40px;
    height: 40px;
}

.admin-bar .novl-landing {
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
}

/* Phablet / mid-range (521-768): Coming-soon needs scaled tagline + logo
   so the desktop 40px tagline doesn't dominate. */
@media (max-width: 768px) and (min-width: 521px) {
    .novl-landing__tagline {
        font-size: clamp(28px, 4.6vw, 36px);
    }

    .novl-landing__logo {
        max-width: 92vw;
    }

    .novl-landing__social svg {
        width: 32px;
        height: 32px;
    }
}

/* Long single-word article titles (e.g. "TRANSCONTINENTAL") on small
   phones still risk overflow despite overflow-wrap:anywhere because of
   the wide letter-spacing. Tighten + tighten font as a safety net. */
@media (max-width: 480px) {
    .novl-article-hero__title {
        letter-spacing: 0.04em;
        font-size: clamp(44px, 14vw, 96px);
    }
}

@media (max-width: 520px) {
    .novl-team__grid {
        grid-template-columns: 1fr;
    }

    .novl-landing__content {
        padding: 0 var(--novl-page-inline);
        margin-bottom: 6vh;
    }

    .novl-landing__logo {
        max-width: 95vw;
        margin-bottom: 8px;
    }

    .novl-landing__tagline {
        font-size: 28px;
        letter-spacing: var(--track-landing-tagline-mobile);
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .novl-landing__social svg {
        width: 20px;
        height: 20px;
    }

    /* Portfolio: single column */
    .novl-portfolio__grid {
        columns: 1;
    }
}

/* Very small phones (<=360px) — scale logo down once more so it never
   crowds the menu icon. */
@media (max-width: 360px) {
    .novl-logo img { width: 150px; height: 24px; }
}

/* Keep the floating reCAPTCHA badge tucked into the corner so it never
   sits on top of contact-form inputs on narrow screens. */
.grecaptcha-badge {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
}