/* ============================================================
   FIELD — the "field report" visual layer (Nov 2026 redesign)

   Loaded after every other layer, so it re-skins the whole site
   without touching how any page works. Three moves:

     1. Type: tight, heavy Inter Tight for headlines, with
        Instrument Serif italic kept for emphasised words.
     2. Surfaces: deeper blacks, glass panels, larger radii,
        pill buttons.
     3. Photography: cinematic stills (generated with Higgsfield)
        carry the dark sections; components below lay type over
        them with enough shade to stay readable.

   Every photo is replaceable from the on-page editor; the
   paths here are only the defaults.
   ============================================================ */

:root {
    --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-accent:  'Instrument Serif', 'Iowan Old Style', Georgia, serif;

    --text-display-1: clamp(2.9rem, 7.2vw, 6.75rem);
    --text-display-2: clamp(2.1rem, 4.4vw, 3.75rem);
    --leading-display: 0.98;
    --tracking-display: -0.045em;

    --ink:        #05070A;
    --ink-raised: #0C1016;
    --ink-sunken: #080B10;
    --ink-line:   #18202A;
    --signal-on-dark: #3BE6F2;

    --radius:    14px;
    --radius-lg: 22px;
    --radius-xl: 30px;

    --glass-bg:     rgb(12 16 22 / .58);
    --glass-line:   rgb(255 255 255 / .09);
    --glass-blur:   saturate(140%) blur(18px);
    --shade-strong: rgb(5 7 10 / .92);
}

/* ------------------------------------------------------------
   TYPE
   ------------------------------------------------------------ */
.display-1, .display-2, .h-serif {
    font-family: var(--font-display);
    font-weight: 650;
    letter-spacing: var(--tracking-display);
}
.h-serif { line-height: 1.04; }
.display-1 em, .display-2 em, .h-serif em,
.display-1 .em, .display-2 .em {
    font-family: var(--font-accent);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.01em;
    color: var(--accent);
    padding-right: .04em;            /* italic overhang */
}
.stat-value { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.04em; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.2rem); }

/* ------------------------------------------------------------
   BUTTONS — pills, with a soft glow on the accent
   ------------------------------------------------------------ */
.btn { border-radius: 999px; font-weight: 550; }
.btn-accent {
    color: #031418;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent),
                0 8px 28px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn-accent:hover { box-shadow: 0 0 0 1px var(--accent), 0 12px 36px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-glass {
    color: #fff;
    background: rgb(255 255 255 / .06);
    border: 1px solid rgb(255 255 255 / .16);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
.btn-glass:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .28); }

/* ------------------------------------------------------------
   NAV — glass bar
   ------------------------------------------------------------ */
.nav.is-scrolled, .nav.nav-invert.is-scrolled {
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
.nav-brand { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.03em; }

/* ------------------------------------------------------------
   CARDS + GLASS
   ------------------------------------------------------------ */
.card { border-radius: var(--radius-lg); }
.surface-dark .card, html[data-theme="dark"] .card {
    background: linear-gradient(180deg, rgb(255 255 255 / .035), rgb(255 255 255 / .01));
}
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Photo sections are always dark, whatever the page around them is.
   Without this they inherited the light-surface accent (dark teal),
   which nearly disappears on a night photograph. */
.fr-hero, .photo-band, .page-hero {
    --bg: var(--ink);
    --bg-raised: var(--ink-raised);
    --fg: #FAFAF9;
    --fg-muted: #BDB7B2;
    --fg-subtle: #8F8984;
    --line: rgb(255 255 255 / .12);
    --accent: var(--signal-on-dark);
    --accent-quiet: var(--signal-quiet-on-dark);
}

/* ============================================================
   HERO — full-bleed photograph, headline left, stats in glass
   ============================================================ */
.fr-hero {
    position: relative;
    min-height: max(100svh, 680px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background: var(--ink);
    isolation: isolate;
}
.fr-hero-media, .fr-hero-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}
.fr-hero-media { z-index: -2; }
.fr-hero-media img {
    object-fit: cover;
    object-position: 68% 50%;
    transform-origin: 68% 45%;
    animation: fr-drift 22s var(--ease-in-out) infinite alternate;
    will-change: transform;
}
@keyframes fr-drift {
    from { transform: scale(1.08) translate3d(0, 0, 0); }
    to   { transform: scale(1.0)  translate3d(-1.2%, -0.6%, 0); }
}
.fr-hero-shade {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, var(--shade-strong) 0%, rgb(5 7 10 / .72) 34%, rgb(5 7 10 / .2) 62%, rgb(5 7 10 / 0) 78%),
        linear-gradient(180deg, rgb(5 7 10 / .55) 0%, transparent 22%, transparent 62%, var(--ink) 100%);
}

/* Signal rings radiating from the antenna in the photo. */
.fr-rings {
    position: absolute;
    left: 69%; top: 46%;
    width: 0; height: 0;
    z-index: -1;
    pointer-events: none;
}
.fr-rings span {
    position: absolute;
    left: 50%; top: 50%;
    width: 46vmin; height: 46vmin;
    margin: -23vmin 0 0 -23vmin;
    border-radius: 50%;
    border: 1px solid rgb(59 230 242 / .55);
    box-shadow: 0 0 24px rgb(59 230 242 / .18) inset;
    opacity: 0;
    animation: fr-ring 6s cubic-bezier(.2, .7, .3, 1) infinite;
}
.fr-rings span:nth-child(2) { animation-delay: 2s; }
.fr-rings span:nth-child(3) { animation-delay: 4s; }
@keyframes fr-ring {
    0%   { transform: scale(.12); opacity: 0; }
    12%  { opacity: .9; }
    100% { transform: scale(1.9); opacity: 0; }
}

.fr-hero-inner { padding-top: clamp(6rem, 14vh, 9rem); padding-bottom: clamp(9rem, 22vh, 12rem); }
.fr-hero-copy { max-width: 40rem; }
.fr-hero .display-1 { color: #fff; }
.fr-hero .lead { color: rgb(255 255 255 / .78); max-width: 46ch; }

.fr-status {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .45rem .9rem .45rem .7rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: #d6fbff;
    background: rgb(59 230 242 / .1);
    border: 1px solid rgb(59 230 242 / .3);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Stats bar pinned to the bottom of the hero. */
.fr-statbar {
    position: absolute;
    left: 0; right: 0; bottom: clamp(1.25rem, 4vh, 2.5rem);
}
.fr-statbar-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
}
.fr-stat { padding: 1.1rem 1.4rem; }
.fr-stat + .fr-stat { border-left: 1px solid var(--glass-line); }
.fr-stat .stat-value { font-size: clamp(1.7rem, 3vw, 2.6rem); color: #fff; line-height: 1; }
.fr-stat .stat-label { margin-top: .45rem; color: rgb(255 255 255 / .6); }

@media (max-width: 767px) {
    .fr-hero { justify-content: flex-end; }
    .fr-hero-media img { object-position: 50% 30%; transform-origin: 50% 30%; }
    .fr-hero-shade {
        background: linear-gradient(180deg, rgb(5 7 10 / .2) 0%, rgb(5 7 10 / .35) 35%, rgb(5 7 10 / .92) 70%, var(--ink) 100%);
    }
    .fr-rings { left: 62%; top: 26%; }
    .fr-hero-inner { padding-bottom: 2rem; }
    .fr-statbar { position: static; padding-bottom: 2rem; }
    .fr-statbar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fr-stat:nth-child(3) { border-left: 0; }
    .fr-stat:nth-child(n+3) { border-top: 1px solid var(--glass-line); }
}

/* ============================================================
   ABOUT — portrait card + editorial copy
   ============================================================ */
.fr-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.fr-portrait { position: relative; }
/* The location tag is pinned to the photo, not the whole column (which also holds the certificates). */
.fr-portrait-photo { position: relative; }
.fr-portrait-photo img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--lift-4);
}
.fr-portrait-tag {
    position: absolute; left: 1rem; bottom: 1rem;
    padding: .55rem .85rem;
    font-family: var(--font-mono); font-size: var(--text-micro);
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: #fff;
}
.fr-certs { display: grid; gap: .6rem; margin-top: 2rem; }
.fr-cert {
    display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    padding: .9rem 1.1rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-raised);
}
@media (max-width: 899px) { .fr-about { grid-template-columns: 1fr; } .fr-portrait { max-width: 26rem; } }

/* ============================================================
   BENTO — capabilities with photo tiles
   ============================================================ */
.bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}
.bento-tile {
    position: relative;
    grid-column: span 4;
    min-height: 15rem;
    padding: 1.6rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--bg-raised);
    display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
    transition: transform var(--dur) var(--ease-out-expo), border-color var(--dur), box-shadow var(--dur);
    overflow: hidden;
}
a.bento-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--lift-3); }
.bento-tile h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.025em; }
.bento-tile p { color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.6; }
.bento-num { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-label); color: var(--accent); }
.bento-photo { padding: 0; border: 0; color: #fff; background: var(--ink); }
.bento-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); }
.bento-photo:hover img { transform: scale(1.04); }
.bento-photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgb(5 7 10 / .85) 100%);
}
.bento-photo .bento-caption { position: relative; z-index: 1; margin-top: auto; padding: 1.5rem; }
.bento-photo .bento-caption p { color: rgb(255 255 255 / .75); }
.bento-wide { grid-column: span 8; }
.bento-tall { grid-row: span 2; }
@media (max-width: 1023px) { .bento-tile, .bento-wide { grid-column: span 6; } }
@media (max-width: 639px)  { .bento-tile, .bento-wide { grid-column: span 12; } .bento-tall { grid-row: auto; min-height: 18rem; } }

/* ============================================================
   WORK — media cards
   ============================================================ */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.media-card {
    display: flex; flex-direction: column;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--bg-raised);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur), border-color var(--dur);
}
.media-card:hover { transform: translateY(-3px); box-shadow: var(--lift-3); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.media-card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.media-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); }
.media-card:hover .media-card-img img { transform: scale(1.04); }
.media-card-body { padding: 1.5rem 1.6rem 1.7rem; display: grid; gap: .6rem; }
.media-card-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.025em; line-height: 1.2; }
.media-card-body p { color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.6; }
/* The whole card is one link: the title's <a> stretches over the card. */
.media-card { position: relative; cursor: pointer; }
.media-card-link { color: inherit; text-decoration: none; }
.media-card-link::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.media-card-link:focus-visible { outline: none; }
.media-card:has(.media-card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.media-card-cta { margin-top: .4rem; font-size: var(--text-sm); font-weight: 600; color: var(--accent); display: inline-flex; gap: .35rem; align-items: center; }
.media-card-cta .arrow { transition: transform .3s var(--ease-out-expo); }
.media-card:hover .media-card-cta .arrow { transform: translateX(3px); }
/* While editing the page, the card must not swallow clicks meant for its text and photo. */
html.dpe-editing .media-card-link::after { display: none; }
.media-card-featured { grid-column: span 2; display: grid; grid-template-columns: 7fr 5fr; }
.media-card-featured .media-card-img { aspect-ratio: auto; min-height: 22rem; }
.media-card-featured .media-card-body { align-content: center; padding: 2.4rem; }
.media-card-featured h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.media-card-text { padding: 1.6rem; justify-content: space-between; min-height: 12rem; }
@media (max-width: 899px) {
    .work-grid { grid-template-columns: 1fr; }
    .media-card-featured { grid-column: auto; grid-template-columns: 1fr; }
    .media-card-featured .media-card-img { min-height: 0; aspect-ratio: 16 / 9; }
}

/* ============================================================
   PHOTO BAND — full-bleed photograph behind a dark section
   ============================================================ */
.photo-band { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.photo-band-media { position: absolute; inset: 0; z-index: -2; }
.photo-band-media img { width: 100%; height: 100%; object-fit: cover; }
.photo-band::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, var(--shade-strong) 0%, rgb(5 7 10 / .8) 45%, rgb(5 7 10 / .66) 100%);
}
/* Contact band: the photo's interest (skyline, lit tower) is along its
   bottom edge, so anchor it there and keep the shade light at the bottom
   and heavy at the top, behind the heading. */
.photo-band.shade-bottom .photo-band-media img { object-position: 50% 100%; }
.photo-band.shade-bottom::before {
    background:
        linear-gradient(90deg, rgb(5 7 10 / .5) 0%, rgb(5 7 10 / 0) 55%),
        linear-gradient(180deg, var(--shade-strong) 0%, rgb(5 7 10 / .72) 40%, rgb(5 7 10 / .25) 100%);
}
.photo-band .lead { color: rgb(255 255 255 / .75); }
.tool-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.tool-chip {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: 1rem 1.15rem;
    font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono);
    color: #e8fdff;
    transition: background var(--dur), border-color var(--dur), transform var(--dur) var(--ease-out-expo);
}
.tool-chip:hover { background: rgb(59 230 242 / .12); border-color: rgb(59 230 242 / .45); transform: translateY(-2px); }
.tool-chip .arrow { color: var(--signal-on-dark); }

/* ============================================================
   WRITING — photo + list
   ============================================================ */
.fr-writing { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.fr-writing-photo { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 22rem; }
.fr-writing-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-rows { display: grid; }
.post-row {
    display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline;
    padding: 1.6rem 0;
    border-top: 1px solid var(--line);
    transition: padding var(--dur) var(--ease-out-expo);
}
.post-row:last-child { border-bottom: 1px solid var(--line); }
.post-row:hover { padding-left: .5rem; }
.post-row h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.post-row p { color: var(--fg-muted); font-size: var(--text-sm); margin-top: .35rem; }
.post-row .arrow { color: var(--accent); transition: transform var(--dur) var(--ease-out-expo); }
.post-row:hover .arrow { transform: translateX(4px); }
@media (max-width: 899px) {
    .fr-writing { grid-template-columns: 1fr; }
    .fr-writing-photo { min-height: 14rem; }
    .post-row { grid-template-columns: 1fr auto; }
    .post-row time { grid-column: 1 / -1; }
}

/* ============================================================
   CONTACT — night skyline behind a glass form
   ============================================================ */
.fr-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.fr-contact-form { padding: clamp(1.4rem, 3vw, 2.4rem); }
.fr-contact-form .input {
    background: rgb(255 255 255 / .05);
    border-color: rgb(255 255 255 / .14);
    color: #fff;
}
.fr-contact-form .input::placeholder { color: rgb(255 255 255 / .38); }
.fr-contact-form .input:focus { border-color: var(--signal-on-dark); background: rgb(255 255 255 / .08); }
.fr-contact-form .field-label { color: rgb(255 255 255 / .6); }
@media (max-width: 899px) { .fr-contact { grid-template-columns: 1fr; } }

/* ============================================================
   PAGE HERO — photo header for inner pages
   ============================================================ */
.page-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--ink); }
.page-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.page-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, var(--shade-strong) 0%, rgb(5 7 10 / .78) 45%, rgb(5 7 10 / .4) 100%),
                linear-gradient(180deg, transparent 55%, var(--ink) 100%);
}
.page-hero .lead { color: rgb(255 255 255 / .76); }

/* ------------------------------------------------------------
   Reduced motion: no drift, no rings, no hover travel.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .fr-hero-media img { animation: none; transform: none; }
    .fr-rings { display: none; }
    .bento-tile, .media-card, .post-row, .tool-chip,
    .bento-photo img, .media-card-img img { transition: none; }
}

/* Work index: case-study cards lead with their photo. */
.card-with-photo { padding-top: 0; overflow: hidden; }
.card-photo {
    margin: 0 calc(var(--s-8) * -1) var(--s-8);
    aspect-ratio: 21 / 8; overflow: hidden; background: var(--ink);
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); }
.card-with-photo:hover .card-photo img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .card-photo img { transition: none; } }

/* ============================================================
   WRITING — topic filter, featured post, post cards
   ============================================================ */
.topic-bar { display: flex; flex-wrap: wrap; gap: .5rem; }
.topic-chip {
    --topic-hue: 190;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--bg-raised);
    color: var(--fg); font-size: var(--text-sm); font-weight: 550; text-decoration: none;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.topic-chip:hover { border-color: hsl(var(--topic-hue) 60% 45%); transform: translateY(-1px); }
.topic-chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.topic-chip[data-topic=""][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.topic-count { font-family: var(--font-mono); font-size: .72em; opacity: .65; }
.topic-status { min-height: 1.5rem; margin-top: 1rem; }
.topic-empty { margin-top: 2rem; }

.post-feature {
    display: grid; grid-template-columns: 7fr 5fr; margin-top: 2rem;
    border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden;
    background: var(--bg-raised); color: inherit; text-decoration: none;
    transition: transform .4s var(--ease-out-expo), box-shadow .4s, border-color .3s;
}
.post-feature:hover { transform: translateY(-3px); box-shadow: var(--lift-3); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.post-feature-body { padding: clamp(1.5rem, 3vw, 2.75rem); display: grid; gap: 1rem; align-content: center; }
.post-feature-body h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; letter-spacing: -.03em; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.post-card {
    position: relative; display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-raised);
    transition: transform .4s var(--ease-out-expo), box-shadow .4s, border-color .3s;
}
.post-card[hidden] { display: none; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--lift-3); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.post-card-body { padding: 1.25rem 1.35rem 1.4rem; display: grid; gap: .6rem; align-content: start; flex: 1; }
.post-card h3 { font-family: var(--font-display); font-weight: 620; font-size: 1.28rem; line-height: 1.22; letter-spacing: -.02em; }
.post-card-link { color: inherit; text-decoration: none; }
.post-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post-card-excerpt { color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.6; }
.post-meta { font-size: .78rem; margin-top: auto; padding-top: .3rem; }

/* The picture strip: a photo, or a generated "signal" pattern in the topic's colour. */
.post-card-art, .post-feature-art {
    --topic-hue: 190;
    position: relative; aspect-ratio: 16 / 8; overflow: hidden;
    background:
        radial-gradient(120% 90% at 85% 10%, hsl(var(--topic-hue) 70% 55% / .55), transparent 60%),
        radial-gradient(90% 70% at 10% 100%, hsl(calc(var(--topic-hue) + 40) 60% 40% / .45), transparent 65%),
        repeating-radial-gradient(circle at 85% 10%, hsl(var(--topic-hue) 80% 70% / .14) 0 1px, transparent 1px 22px),
        hsl(var(--topic-hue) 30% 10%);
}
.post-feature-art { aspect-ratio: auto; min-height: 20rem; }
.post-card-art img, .post-feature-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo); }
.post-card:hover .post-card-art img, .post-feature:hover .post-feature-art img { transform: scale(1.04); }
.post-card-mark {
    position: absolute; left: 1.1rem; bottom: .9rem;
    font-family: var(--font-display); font-weight: 650; font-size: 1.6rem; letter-spacing: -.03em;
    color: rgb(255 255 255 / .9);
}

.post-tags { display: flex; flex-wrap: wrap; gap: .35rem; position: relative; z-index: 2; }
.post-tag {
    --topic-hue: 190;
    padding: .18rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; text-decoration: none;
    color: hsl(var(--topic-hue) 55% 32%); background: hsl(var(--topic-hue) 60% 50% / .12);
    transition: background .2s;
}
.post-tag:hover { background: hsl(var(--topic-hue) 60% 50% / .24); }
[data-theme="dark"] .post-tag, .surface-dark .post-tag { color: hsl(var(--topic-hue) 70% 72%); background: hsl(var(--topic-hue) 60% 50% / .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .post-tag { color: hsl(var(--topic-hue) 70% 72%); background: hsl(var(--topic-hue) 60% 50% / .16); } }

@media (max-width: 899px) {
    .post-feature { grid-template-columns: 1fr; }
    .post-feature-art { min-height: 0; aspect-ratio: 16 / 8; }
}
.preview-banner { margin-bottom: 1.5rem; padding: .7rem 1rem; border-radius: var(--radius); background: rgb(251 191 36 / .14); border: 1px solid rgb(251 191 36 / .4); color: #fde68a; font-size: var(--text-sm); }
.preview-banner a { color: #fff; text-decoration: underline; }
.post-edit-link { margin-left: 1.25rem; }
.page-hero .post-tag { color: hsl(var(--topic-hue) 75% 78%); background: hsl(var(--topic-hue) 60% 50% / .2); }

/* ============================================================
   BACKGROUND VIDEOS + SCROLL MOTION
   ============================================================ */
/* A video sits exactly over its section's photo and fades in once playing. */
.bg-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 1.4s ease;
    pointer-events: none;
}
.bg-video.is-playing { opacity: 1; }
.fr-hero-video { z-index: -2; object-position: 68% 50%; }

/* Scroll-linked motion (browsers that support scroll timelines; others keep the still layout). */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        /* Hero: as you scroll away, the picture eases in and dims, the words lift off. */
        .fr-hero-media, .fr-hero-video {
            animation: fr-hero-away linear both;
            animation-timeline: scroll(root);
            animation-range: 0 100vh;
        }
        @keyframes fr-hero-away {
            to { transform: scale(1.14); filter: brightness(.55) saturate(.85); }
        }
        .fr-hero-copy {
            animation: fr-copy-away linear both;
            animation-timeline: scroll(root);
            animation-range: 0 75vh;
        }
        @keyframes fr-copy-away {
            to { transform: translateY(-14vh); opacity: 0; }
        }
        .fr-rings {
            animation: fr-rings-away linear both;
            animation-timeline: scroll(root);
            animation-range: 0 90vh;
        }
        @keyframes fr-rings-away { to { transform: scale(1.6); opacity: 0; } }

        /* Photo sections: the picture drifts against the scroll (parallax). */
        .photo-band-media img, .photo-band-media .bg-video,
        .page-hero-media img, .page-hero-media .bg-video {
            animation: band-drift linear both;
            animation-timeline: view();
            animation-range: cover;
        }
        @keyframes band-drift {
            from { transform: translate3d(0, -7%, 0) scale(1.16); }
            to   { transform: translate3d(0, 7%, 0) scale(1.16); }
        }
    }
}

/* The contact video is anchored to its bottom edge like the photo (the skyline is there). */
.photo-band.shade-bottom .photo-band-media .bg-video { object-position: 50% 100%; }