/* ============================================================================
   WHAT'S NEW  —  page-specific styles
   Scoped under .wn-page / the .wn- prefix so they can't affect the rest of the
   site, and other pages can't affect this one.
   ============================================================================ */

.wn-page {
    --wn-blue:      #00b1db;
    --wn-blue-dark: #0076d7;
    --wn-cyan:      #3cc6ef;        /* big hero headline */
    --wn-orange:    #e8722a;
    --wn-ink:       #102033;
    --wn-bg:        #0a1018;
    --wn-panel:     #121b26;
    --wn-nav-clear: 92px;

    margin: 0;
    background: var(--wn-bg);
    color: #fff;
    font-family: "Open Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.wn-page * { box-sizing: border-box; }
.wn-page img { display: block; max-width: 100%; }

/* Site nav is transparent + white text (.scroll-old); float it over the hero. */
.wn-page #header-main { position: absolute; top: 0; left: 0; right: 0; z-index: 60; }
.wn-page .navbar-collapse.in,
.wn-page .navbar-collapse.collapsing { background: rgba(8, 13, 19, .97); }

#wn-main { background: var(--wn-bg); overflow: hidden; }

/* ------------------------------------------------------------------ HERO -- */
.wn-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 70vh;
    max-height: 740px;
    overflow: hidden;
    background: var(--wn-bg);
}
.wn-hero-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
.wn-hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(6,11,17,.95) 0%, rgba(6,11,17,.72) 46%, rgba(6,11,17,.22) 82%),
        linear-gradient(0deg, var(--wn-bg) 2%, transparent 32%);
}
.wn-hero-inner {
    position: relative; z-index: 2;
    width: min(820px, 92%);
    padding: calc(var(--wn-nav-clear) + 14px) clamp(20px, 6vw, 96px) 60px;
}
.wn-hero h1 {
    margin: 0 0 18px;
    color: var(--wn-cyan);
    font-family: "Khand", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: clamp(64px, 11vw, 156px);
    line-height: .84;
    letter-spacing: -.01em;
    text-transform: uppercase;
    text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.wn-hero p {
    max-width: 560px;
    margin: 0;
    color: #d4dee7;
    font-size: clamp(16px, 1.7vw, 21px);
    line-height: 1.55;
}
.wn-scroll-cue {
    position: absolute; z-index: 2;
    right: 5vw; bottom: 34px;
    color: #dbe3e9;
    font-size: 10px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    text-decoration: none;
}
.wn-scroll-cue span { margin-left: 9px; color: var(--wn-blue); font-size: 17px; }

/* ------------------------------------------------------------- THE GRID -- */
.wn-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(34px, 5vw, 64px) 0 80px;
}
.wn-size-full      { grid-column: span 12; }
.wn-size-twothirds { grid-column: span 8; }
.wn-size-half      { grid-column: span 6; }
.wn-size-third     { grid-column: span 4; }

/* ------------------------------------------------------------- THE CARDS - */
.wn-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--wn-panel);
    isolation: isolate;
}
.wn-card-media { position: relative; overflow: hidden; }
.wn-media { width: 100%; height: 100%; }

.wn-card-body { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 40px); }
.wn-card-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.wn-card-title {
    margin: 0 0 12px;
    color: inherit;
    font-family: "Khand", "Arial Narrow", sans-serif;
    font-weight: 600;
    font-size: clamp(25px, 2.5vw, 38px);
    line-height: 1.02;
    text-wrap: balance;
}
.wn-card-sum { margin: 0 0 16px; font-size: 14px; line-height: 1.62; }
.wn-card-meta {
    margin: auto 0 0;
    color: inherit;
    font-size: 10px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    opacity: .6;
}

/* ---- format: CINEMATIC (full-bleed image, text overlaid) ---- */
.wn-fmt-cinematic { justify-content: flex-end; color: #fff; }
.wn-fmt-cinematic .wn-card-media { position: absolute; inset: 0; z-index: -2; }
.wn-fmt-cinematic .wn-media { object-fit: cover; }
.wn-fmt-cinematic::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(5,9,14,.95) 6%, rgba(5,9,14,.3) 58%, rgba(5,9,14,.05) 100%);
}
.wn-fmt-cinematic .wn-card-sum { color: #c3d0db; }
.wn-size-third.wn-fmt-cinematic     { min-height: 400px; }
.wn-size-half.wn-fmt-cinematic      { min-height: 440px; }
.wn-size-twothirds.wn-fmt-cinematic { min-height: 470px; }

/* ---- format: SPLIT (image panel + copy panel; media_side controls order) -- */
.wn-fmt-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; }
.wn-fmt-split .wn-card-media { min-height: 220px; background: #0e1722; }
.wn-fmt-split .wn-card-body { justify-content: center; }
.wn-fmt-split.wn-tone-light { background: #fff; color: var(--wn-ink); }
.wn-fmt-split.wn-tone-light .wn-card-media { background: #e9eff4; }
.wn-fmt-split.wn-tone-light .wn-card-sum  { color: #5a6775; }
.wn-fmt-split.wn-media-right .wn-card-media { order: 2; }
.wn-fmt-split.wn-media-right .wn-card-body  { order: 1; }

/* ---- format: STACK (image on top, copy below) ---- */
.wn-fmt-stack { display: flex; flex-direction: column; }
.wn-fmt-stack .wn-card-media { height: 250px; flex: 0 0 auto; background: #0e1722; }
.wn-fmt-stack .wn-card-body { flex: 1 1 auto; }
.wn-fmt-stack.wn-tone-light { background: #fff; color: var(--wn-ink); }
.wn-fmt-stack.wn-tone-light .wn-card-media { background: #e9eff4; }
.wn-fmt-stack.wn-tone-light .wn-card-sum  { color: #5a6775; }
.wn-fmt-stack.wn-tone-dark .wn-card-media { background: #0a1119; }

/* media fit shared by split + stack */
.wn-fit-cover .wn-media   { object-fit: cover; }
.wn-fit-contain .wn-media { object-fit: contain; padding: 20px; }

/* ---- format: TEXT (no image) ---- */
.wn-fmt-text { justify-content: center; min-height: 300px; }
.wn-tone-dark.wn-fmt-text { background: linear-gradient(155deg, #16212e, #0d141d); }
.wn-tone-blue.wn-fmt-text { background: linear-gradient(150deg, var(--wn-blue), var(--wn-blue-dark)); color: #042530; }
.wn-tone-blue.wn-fmt-text .wn-card-sum  { color: #073847; }
.wn-tone-blue.wn-fmt-text .wn-card-meta { opacity: .8; }
.wn-fmt-text::before {
    content: "\201C";
    position: absolute; top: -.18em; right: .12em;
    font-family: Georgia, serif; font-size: 130px; line-height: 1;
    opacity: .12; pointer-events: none;
}

/* ---- format: FEATURE (screenshot | text | character) ---- */
.wn-fmt-feature {
    display: grid;
    grid-template-columns: 1.15fr 0.78fr 280px;   /* screenshot | narrow text | character */
    align-items: stretch;
    min-height: 480px;
    color: #fff;
    background: #0b1118;
}
.wn-feat-report { overflow: hidden; background: #0e1722; }
.wn-feat-report .wn-media { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.wn-fmt-feature .wn-card-body { justify-content: center; }
.wn-fmt-feature .wn-card-sum { max-width: 360px; }   /* keep text column narrow */
.wn-feat-char {
    position: relative;
    display: flex; align-items: flex-end; justify-content: center;
    padding-top: 18px;
    background: radial-gradient(120% 75% at 50% 100%, rgba(0,177,219,.22), transparent 62%), #060c12;
}
.wn-feat-char .wn-charimg { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.wn-flip { transform: scaleX(-1); }   /* horizontally mirror a character */

/* ---- format: FLANK (character | text | character) ---- */
.wn-fmt-flank {
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    align-items: stretch;
    min-height: 330px;
    color: #fff;
    background: linear-gradient(155deg, #16212e, #0d141d);
}
.wn-flank-char { display: flex; align-items: flex-end; }
.wn-flank-char .wn-charimg { height: 100%; width: 100%; object-fit: contain; object-position: bottom; }
.wn-flank-left  { justify-content: flex-start; }
.wn-flank-right { justify-content: flex-end; }
.wn-fmt-flank .wn-card-body { justify-content: center; align-items: center; text-align: center; padding: 26px 18px; }
.wn-fmt-flank .wn-card-title { max-width: 720px; }
.wn-fmt-flank .wn-card-sum   { max-width: 600px; text-wrap: balance; }
.wn-fmt-flank .wn-card-meta  { margin-top: 14px; }

/* ---- in-progress accent ---- */
.wn-is-progress { box-shadow: inset 0 0 0 1px rgba(239,157,50,.45); }

/* ---- status badge (only "In progress" ever shows) ---- */
.wn-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
}
.wn-st-progress { color: #f3a847; }
.wn-tone-blue .wn-status { color: #063846; }
.wn-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(243,168,71,.18); }

/* --------------------------------------------------------------- FOOTER -- */
.wn-footer { background: #06090e; border-top: 1px solid rgba(255,255,255,.07); }
.wn-footer-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0;
}
.wn-footer-copy { color: #7d8994; font-size: 12px; }
.wn-footer-links { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.wn-footer-links a { color: #aeb8c2; font-size: 12px; text-decoration: none; }
.wn-footer-links a:hover { color: var(--wn-blue); }

/* ------------------------------------------------------ FOCUS / MOTION -- */
.wn-page a:focus-visible, .wn-scroll-cue:focus-visible {
    outline: 3px solid var(--wn-blue); outline-offset: 3px; border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
    .wn-fmt-cinematic .wn-media { transition: transform .45s ease; }
    .wn-fmt-cinematic.wn-card:hover .wn-media { transform: scale(1.04); }
    html { scroll-behavior: smooth; }
}

/* --------------------------------------------------------- RESPONSIVE -- */
@media (max-width: 1024px) {
    .wn-size-twothirds { grid-column: span 12; }
    .wn-size-half      { grid-column: span 6; }
    .wn-size-third     { grid-column: span 6; }
    .wn-fmt-feature { grid-template-columns: 1fr; }
    .wn-feat-report { min-height: 300px; }
    .wn-feat-char   { min-height: 340px; }
}
@media (max-width: 720px) {
    .wn-hero { min-height: 64vh; }
    .wn-grid { gap: 14px; }
    .wn-size-full, .wn-size-twothirds, .wn-size-half, .wn-size-third { grid-column: span 12; }
    .wn-fmt-split, .wn-fmt-feature { grid-template-columns: 1fr; }
    .wn-fmt-split.wn-media-right .wn-card-media { order: 0; }
    .wn-fmt-split.wn-media-right .wn-card-body  { order: 0; }
    .wn-fmt-split .wn-card-media { min-height: 200px; }
    .wn-feat-char { min-height: 320px; }
    .wn-card { min-height: 0; }
    .wn-size-third.wn-fmt-cinematic,
    .wn-size-half.wn-fmt-cinematic,
    .wn-size-twothirds.wn-fmt-cinematic { min-height: 380px; }
    /* flank: text on top, two characters side by side below */
    .wn-fmt-flank { grid-template-columns: 1fr 1fr; }
    .wn-fmt-flank .wn-card-body { grid-column: 1 / -1; order: -1; }
    .wn-flank-char { height: 280px; }
    .wn-footer-inner { flex-direction: column; align-items: flex-start; }
}