/* Don Wilder — shared site design system (tokens + nav + components) */
/* Single source of truth for color/type tokens. notes.css imports this file. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --ink: #1a1a1a;
    --paper: #f7f5f0;
    --gray: #6b6b6b;
    --gray-light: #d8d4cb;
    --steel: #7a8089;
    --steel-deep: #525861;
    /* Type system. Monospaced metadata is the shared anchor with Beast Creative
       (and suits the lab-notebook feel). The body face is deliberately NOT
       Beast's — Figtree is more editorial and already in use on Field Notes /
       Connect, so it unifies this site while keeping it distinct. Display stays
       Space Grotesk: a family resemblance to Beast, not a copy of it. */
    --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --font-body: 'Figtree', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
}

html, body { min-height: 100vh; overflow-x: hidden; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#mesh {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

a { color: inherit; }

/* ===== Grain overlay — injected by site.js on every page ===== */
.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
}

/* ===== Scroll-reveal utility ===== */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(.16,.8,.24,1), transform 0.7s cubic-bezier(.16,.8,.24,1);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal-group] > [data-reveal]:nth-child(1) { transition-delay: 0s; }
[data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-group] > [data-reveal]:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-group] > [data-reveal]:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ===== Primary nav header (shared across Home / Field Notes / About / Connect) ===== */
.site-nav-header {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 2rem;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    animation: fadeUp 0.6s ease forwards;
}

.site-nav-header .wordmark {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    line-height: 1;
}

.site-nav-header .wordmark small {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--steel-deep);
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 1.85rem;
    list-style: none;
}

.site-nav-links a {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-nav-links a:hover,
.site-nav-links a.is-active { color: var(--ink); }

.site-nav-links .btn { padding: 0.6rem 1.1rem; font-size: 0.66rem; }

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--gray-light);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
}

@media (max-width: 760px) {
    /* Open/closed is a display swap, not an animated max-height. The old
       version relied on a max-height transition completing; when transitions
       don't tick (throttled tab, some reduced-motion setups) the panel stayed
       clamped at 0 and the menu simply never opened — no links reachable on a
       phone. A display toggle cannot get stuck half-way. */
    .site-nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--paper); border-bottom: 1px solid var(--gray-light); padding: 0; max-height: calc(100vh - 100%); overflow-y: auto; }
    .site-nav-links.is-open { display: flex; padding: 0.5rem 0; }
    .site-nav-links a { width: 100%; padding: 0.9rem 2rem; border-top: 1px solid var(--gray-light); }
    .site-nav-links .btn { width: calc(100% - 4rem); margin: 0.75rem 2rem; border-top: none; justify-content: center; }
    .nav-toggle { display: block; }
    .site-nav-header { padding: 1.25rem; }
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.9rem 1.6rem;
    border: 1px solid var(--ink);
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--steel-deep); border-color: var(--steel-deep); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* ===== Section scaffolding ===== */
.section {
    position: relative;
    z-index: 1;
    padding: 5rem 2rem;
    border-top: 1px solid var(--gray-light);
}

.section-inner { max-width: 1180px; margin: 0 auto; width: 100%; }

.section-eyebrow {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

/* Small solid mono numeral. Was an oversized outlined figure (transparent fill
   + text-stroke); the hollow outline read as decoration rather than metadata. */
.section-num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--steel);
    line-height: 1;
}

.section-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--steel-deep);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 1rem;
}

.section-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--steel-deep);
    max-width: 640px;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .section { padding: 3.5rem 1.25rem; }
}

/* ===== Hero ===== */
/* .hero is full-bleed so the mesh canvas can cover its whole width;
   .hero-inner holds the actual centered/padded content above it. */
.hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 4rem;
    width: 100%;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hero-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3.15rem, 8.2vw, 7.2rem);
    letter-spacing: 0;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--ink);
    max-width: 1040px;
}

.hero-headline .line { display: block; overflow: hidden; }
.hero-headline .line-inner {
    display: block;
    transform: translateY(115%);
    animation: lineUp 0.9s cubic-bezier(.16,.8,.24,1) forwards;
}
.hero-headline .line:nth-child(1) .line-inner { animation-delay: 0.15s; }
.hero-headline .line:nth-child(2) .line-inner { animation-delay: 0.32s; }
@keyframes lineUp { to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .hero-headline .line-inner { animation: none; transform: none; }
}

/* ===== Hero — split variant (homepage): kinetic mesh column + big photo/video column ===== */
.hero--split {
    padding: 0;
}
@media (min-width: 901px) {
    /* The headline shares the fold with the portrait here, so it is sized to
       break in three lines rather than six — at the full-bleed scale the copy
       column pushes the hero ~250px past the viewport and the figure's body
       falls below the fold. */
    .hero--split .hero-headline { font-size: clamp(2.5rem, 4.4vw, 4rem); }

    .hero--split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(430px, 1fr);
        min-height: calc(100vh - 88px);
        border-top: 1px solid var(--gray-light);
        border-bottom: 1px solid var(--gray-light);
    }
    .hero--split .hero-inner {
        max-width: none;
        padding: 5.75rem 3.5rem 4rem max(2rem, calc((100vw - 1180px) / 2 + 2rem));
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
}
@media (max-width: 900px) {
    .hero--split {
        border-top: 1px solid var(--gray-light);
        border-bottom: 1px solid var(--gray-light);
    }
    .hero--split .hero-inner { padding: 4.5rem 1.5rem 2.5rem; position: relative; overflow: hidden; }
}

.hero-copy { position: relative; z-index: 1; }

.hero-kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel-deep);
    margin-bottom: 1rem;
}

/* The portrait is not a framed block — it stands directly on the paper.
   The source is shot on a near-white studio background (#fefefe), and
   `mix-blend-mode: multiply` maps that white onto whatever is behind it:
   white x paper = paper, so the backdrop dissolves and no cutout mask is
   needed. Anything darker than the paper survives, which is why a black
   shirt reads as a clean silhouette while keeping its fold detail.
   Grayscale keeps it monochrome per the rest of the page. */
.hero-media {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 440px;
    overflow: hidden;
    /* Must paint the paper itself rather than inheriting it. .hero runs an
       opacity keyframe on load, which makes it a stacking context — inside
       one, the blend's backdrop starts transparent, so the photo's white
       would have nothing to multiply against and stay opaque white. */
    background: var(--paper);
}
@media (max-width: 900px) { .hero-media { min-height: 420px; } }
@media (max-width: 560px) { .hero-media { min-height: 340px; } }

.hero-photo {
    display: block;
    width: 100%;
    max-width: 700px;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;   /* stands on the hero's bottom rule */
    mix-blend-mode: multiply;
    /* Monochrome and the midtone lift are baked into the file (see the build
       step in git history) — a CSS contrast bump here would just re-darken the
       face, which is the thing the lift is correcting. grayscale stays as a
       guard in case the source is ever swapped for a colour shot. */
    filter: grayscale(100%);
}

/* Safari/Chrome composite blend layers against the nearest stacking context,
   so the hero column must not create one of its own (no opacity/transform
   on .hero-media) or the multiply would resolve against white instead of
   the paper and leave a visible rectangle. */
@supports not (mix-blend-mode: multiply) {
    .hero-photo { mix-blend-mode: normal; }
}

.hero-sub {
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1.7vw, 1.34rem);
    color: var(--steel-deep);
    line-height: 1.5;
    max-width: 560px;
    margin-top: 1.75rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.75rem;
}

.hero-current {
    margin-top: 3.25rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--gray);
}

.hero-current .label {
    display: block;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 0.6rem;
    font-size: 0.65rem;
}

.hero-current span.item { color: var(--ink); }
.hero-current .sep { color: var(--gray-light); margin: 0 0.5rem; }

.marquee {
    position: relative;
    z-index: 1;
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    padding: 1.1rem 0;
    white-space: nowrap;
}
.marquee-track {
    display: inline-flex;
    width: max-content;
    animation: marqueeScroll 26s linear infinite;
}
.marquee-track span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    padding: 0 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}
.marquee-track span::after { content: '—'; color: var(--steel); font-weight: 400; }
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* ===== Field Note cards ===== */
.fn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--gray-light);
    border: 1px solid var(--gray-light);
}

/* Two-up variant: larger cards, calmer rhythm — used where there are four
   builds and a 3-column grid would leave an orphan on the second row. */
.fn-grid--two { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) { .fn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fn-grid, .fn-grid--two { grid-template-columns: 1fr; } }

/* Placeholder art for a build with no screenshot yet. The ::before shimmer
   below animates over this hatch on hover. */
.fn-card-image.ph,
.fn-large-image.ph {
    background-image: repeating-linear-gradient(135deg, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 14px);
    background-color: #efece3;
}

.fn-card {
    background: var(--paper);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ink);
    padding: 1.75rem;
    overflow: hidden;
    position: relative;
    transition: background 0.2s ease, transform 0.35s cubic-bezier(.16,.8,.24,1), box-shadow 0.35s ease;
}

.fn-card:hover {
    background: #efece3;
    transform: translateY(-5px);
    box-shadow: 0 18px 32px -20px rgba(26,26,26,0.4);
    z-index: 2;
}

.fn-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--gray-light) center/cover no-repeat;
    margin-bottom: 1.5rem;
    filter: grayscale(45%);
    position: relative;
    overflow: hidden;
    transition: filter 0.2s ease, transform 0.5s cubic-bezier(.16,.8,.24,1);
}

.fn-card:hover .fn-card-image { filter: grayscale(0%); transform: scale(1.07); }

.fn-card-image.ph::before,
.fn-large-image.ph::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.6) 45%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.7s ease;
}
.fn-card:hover .fn-card-image.ph::before,
.fn-large-card:hover .fn-large-image.ph::before {
    transform: translateX(120%);
}

.fn-card-cat {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--steel-deep);
    margin-bottom: 0.65rem;
}

.fn-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}

.fn-card-desc {
    font-size: 0.85rem;
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex: 1;
}

.fn-card-link {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

/* ===== Current focus ===== */
.focus-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--gray-light);
}

.focus-item {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--gray-light);
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.focus-item .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--steel);
    flex-shrink: 0;
}

/* ===== Three Worlds ===== */
.worlds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--gray-light);
    border: 1px solid var(--gray-light);
}

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

.world-panel {
    background: var(--paper);
    padding: 2.75rem 2rem;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    min-height: 280px;
    transition: background 0.2s ease;
}

.world-panel:hover { background: #efece3; }

.world-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
}

.world-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--gray);
    margin-bottom: auto;
}

.world-cta {
    margin-top: 1.75rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel-deep);
}

/* ===== Principles ===== */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 3rem;
}

@media (max-width: 700px) { .principles-grid { grid-template-columns: 1fr; } }

.principle-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.5rem;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--gray-light);
    line-height: 1;
    margin-bottom: 1rem;
}

.principle-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}

.principle-body {
    font-size: 0.88rem;
    color: var(--gray);
    line-height: 1.65;
    max-width: 40ch;
}

/* ===== Connect / inquiry form (lifted from the original Work-with-Don modal) ===== */
.work-form { display: flex; flex-direction: column; gap: 1.75rem; max-width: 560px; }

.work-field-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--steel-deep);
    margin-bottom: 0.85rem;
    display: block;
}

.work-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (max-width: 500px) { .work-radio-group { grid-template-columns: 1fr; } }

.work-radio { position: relative; }
.work-radio input { position: absolute; opacity: 0; pointer-events: none; }
.work-radio label {
    display: block;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--gray-light);
    font-size: 0.78rem;
    font-family: var(--font-mono);
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.work-radio label:hover { border-color: var(--ink); }
.work-radio input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.work-input,
.work-textarea {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 0.75rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s ease;
}
.work-input:focus, .work-textarea:focus { border-bottom-color: var(--steel-deep); }
.work-input::placeholder, .work-textarea::placeholder { color: var(--gray); }
.work-textarea { resize: vertical; min-height: 100px; line-height: 1.6; font-family: var(--font-mono); }

.work-submit-row { display: flex; justify-content: flex-start; align-items: center; gap: 1rem; margin-top: 0.5rem; }

.work-submit {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.95rem 2rem;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}
.work-submit:hover { background: var(--steel-deep); border-color: var(--steel-deep); }

/* ===== Field Notes index — large stacked cards ===== */
.fn-large-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--gray-light);
}

.fn-large-card {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--gray-light);
    text-decoration: none;
    color: var(--ink);
    align-items: center;
}

@media (max-width: 760px) {
    .fn-large-card { grid-template-columns: 1fr; gap: 1.25rem; }
}

.fn-large-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--gray-light) center/cover no-repeat;
    filter: grayscale(45%);
    position: relative;
    overflow: hidden;
    transition: filter 0.2s ease, transform 0.5s cubic-bezier(.16,.8,.24,1);
}
.fn-large-card:hover .fn-large-image { filter: grayscale(0%); transform: scale(1.05); }
.fn-large-card { overflow: hidden; }

.fn-large-image.ph {
    background-image: repeating-linear-gradient(135deg, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 14px);
    background-color: #efece3;
}

.fn-large-index {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: var(--gray);
    margin-bottom: 0.5rem;
    display: block;
}

.fn-large-cat {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--steel-deep);
    margin-bottom: 0.6rem;
}

.fn-large-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}
.fn-large-card:hover .fn-large-title { color: var(--steel-deep); }

.fn-large-desc {
    font-size: 0.95rem;
    color: var(--gray);
    line-height: 1.65;
    max-width: 60ch;
    margin-bottom: 1rem;
}

.fn-large-link {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

/* ===== Case study page ===== */
.case-hero {
    padding: 1rem 0 3rem;
    border-bottom: 1px solid var(--gray-light);
    margin-bottom: 3rem;
}

.case-cat {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--steel-deep);
    margin-bottom: 1rem;
}

.case-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4rem);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 1.25rem;
}

.case-dek {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--steel-deep);
    max-width: 640px;
    line-height: 1.6;
}

.case-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--gray-light) center/cover no-repeat;
    margin-bottom: 3.5rem;
}
.case-image.ph {
    background-image: repeating-linear-gradient(135deg, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 16px);
    background-color: #efece3;
}

.case-block { padding: 2.5rem 0; border-top: 1px solid var(--gray-light); display: grid; grid-template-columns: 220px 1fr; gap: 2rem; }
@media (max-width: 700px) { .case-block { grid-template-columns: 1fr; gap: 0.75rem; } }

.case-block-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--steel);
}

.case-block-body { font-size: 1rem; line-height: 1.8; color: var(--ink); max-width: 680px; }
.case-block-body p { margin-bottom: 1.25rem; }
.case-block-body p:last-child { margin-bottom: 0; }

.case-placeholder {
    border: 1px dashed var(--gray-light);
    padding: 1.25rem 1.5rem;
    font-style: italic;
    color: var(--steel);
    font-size: 0.9rem;
}

.case-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 0;
    border-top: 1px solid var(--gray-light);
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.case-foot a {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}

.case-page {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

@media (max-width: 700px) {
    .case-page { padding: 2rem 1.25rem 3rem; }
}

/* ===== About page ===== */
.about-page {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}
@media (max-width: 700px) { .about-page { padding: 2rem 1.25rem 3rem; } }

.about-portrait {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 2.5rem;
}
.about-portrait img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
    transition: filter 0.3s ease;
}
.about-portrait:hover img { filter: grayscale(0%) contrast(1); }

.about-body { font-size: 1.05rem; line-height: 1.9; color: var(--ink); margin-bottom: 3.5rem; }
.about-body p { margin-bottom: 1.5rem; }
.about-body p:last-child { margin-bottom: 0; }

.mini-timeline {
    border-top: 1px solid var(--gray-light);
    margin-top: 1rem;
}
.mini-timeline-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--gray-light);
}
@media (max-width: 560px) { .mini-timeline-item { grid-template-columns: 1fr; gap: 0.35rem; } }
.mini-timeline-when {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--steel-deep);
}
.mini-timeline-what { font-size: 0.95rem; color: var(--ink); line-height: 1.6; }

/* ===== Footer — bold closing statement + thin utility bar ===== */
/* Shared across Home / Field Notes / About / Connect / case studies.
   Inverted (ink bg, paper text) to echo the marquee and give the page a
   deliberate, weighted close instead of trailing off. */
.footer-block {
    position: relative;
    z-index: 1;
    background: var(--ink);
    color: var(--paper);
}

.footer-cta {
    max-width: 1180px;
    margin: 0 auto;
    padding: 5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-cta-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    letter-spacing: -0.03em;
    line-height: 1;
    text-transform: uppercase;
    max-width: 640px;
    color: var(--paper);
}

.footer-cta .btn-primary {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
    flex-shrink: 0;
}
.footer-cta .btn-primary:hover { background: var(--gray-light); border-color: var(--gray-light); }

/* Was a thin 1.5rem strip, which read as an afterthought now that the closing
   CTA sits above it on paper rather than inside this band. */
.footer-utility {
    border-top: 1px solid rgba(247,245,240,0.15);
    padding: 3.25rem 2rem;
}

.footer-utility-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: rgba(247,245,240,0.55);
}

.footer-utility a {
    color: var(--paper);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-left: 1.5rem;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.footer-utility a:hover { opacity: 1; }

@media (max-width: 700px) {
    .footer-cta { padding: 3.5rem 1.25rem; flex-direction: column; align-items: flex-start; }
    .footer-utility { padding: 1.25rem; }
    .footer-utility-inner { flex-direction: column; align-items: flex-start; }
    .footer-utility a { margin-left: 0; margin-right: 1.5rem; }
}

/* ===== Work index (homepage) =====
   A bordered row list rather than a card grid — the same structural pattern
   Beast Creative uses for "what gets built", so the two sites read as one
   design system. Reads as an index of work, not a portfolio gallery. */
.build-list { border-top: 1px solid var(--ink); }

.build-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.5fr) 1.5rem;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.9rem 0;
    border-bottom: 1px solid var(--gray-light);
    text-decoration: none;
    color: var(--ink);
    transition: background 0.15s ease, padding 0.15s ease;
}
a.build-row:hover { background: #efece3; padding-left: 0.9rem; padding-right: 0.9rem; }

/* Rows for products that don't have a write-up of their own. Same rhythm as a
   linked row, but inert — not everything needs a subpage to be worth listing. */
div.build-row { cursor: default; }
div.build-row .build-row-name { color: var(--ink); }

.build-row-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--steel);
}

.build-row-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 0.45rem;
}

.build-row-cat {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--steel-deep);
}

.build-row-desc { font-size: 0.92rem; line-height: 1.65; color: var(--gray); }

/* Thin all-caps rule separating Current work / Experiments and tools /
   Previous chapter — grouping without cards, filters, or extra chrome. */
.build-group-label {
    grid-column: 1 / -1;
    padding: 1.9rem 0 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--steel);
}
.build-list > .build-group-label:first-child { padding-top: 0.9rem; }

/* Progressive disclosure. The extra groups are visible in the markup and are
   collapsed by script on load, so with JS unavailable the full index still
   renders rather than disappearing — the same failure mode that used to hide
   the reveal-animated sections. */
.build-more[hidden] { display: none; }

.build-toggle {
    margin-top: 1.75rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--steel);
    padding: 0 0 2px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel-deep);
    cursor: pointer;
}
.build-toggle:hover { color: var(--ink); border-bottom-color: var(--ink); }

.build-row-arrow {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--steel);
    text-align: right;
}

@media (max-width: 760px) {
    .build-row {
        grid-template-columns: 2rem 1fr;
        gap: 0.5rem 1rem;
        padding: 1.5rem 0;
    }
    .build-row-desc { grid-column: 2; }
    .build-row-arrow { display: none; }
}

/* ===== Thesis strip =====
   Sits between the hero and Now. Replaced a four-metric credential bar that
   read as generic landing-page proof; a statement of practice bridges the two
   sections instead of interrupting them. */
.thesis-strip {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--gray-light);
    padding: clamp(2.5rem, 5vw, 4rem) 2rem;
    position: relative;
    z-index: 1;
}

.thesis-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
}

.thesis-lead {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--ink);
    max-width: 20ch;
}

.thesis-body {
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--gray);
    max-width: 54ch;
}

@media (max-width: 760px) {
    .thesis-inner { grid-template-columns: 1fr; }
    .thesis-strip { padding: 2.5rem 1.25rem; }
}

/* ===== Now grid (homepage teaser + /now page) =====
   Three bordered columns rather than loose text blocks — reads as a spec
   sheet, which is the register the rest of the system is in. */
.now-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--ink);
}

.now-item {
    padding: 1.9rem 1.75rem 1.9rem 0;
    border-right: 1px solid var(--gray-light);
}
.now-item:last-child { border-right: none; padding-right: 0; }
.now-item:not(:first-child) { padding-left: 1.75rem; }

.now-item-label {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 0.9rem;
}
.now-item-label i {
    font-style: normal;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: var(--steel);
}

.now-item-body {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gray);
    max-width: 46ch;
}

@media (max-width: 860px) {
    .now-grid { grid-template-columns: 1fr; }
    .now-item {
        padding: 1.5rem 0;
        border-right: none;
        border-bottom: 1px solid var(--gray-light);
    }
    .now-item:not(:first-child) { padding-left: 0; }
    .now-item:last-child { border-bottom: none; }
}

/* ===== Notes teaser (homepage) ===== */
.notes-teaser-list { border-top: 1px solid var(--gray-light); }
.note-teaser-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--gray-light);
    text-decoration: none;
    color: inherit;
}
.note-teaser-meta {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel-deep);
    padding-top: 0.2rem;
    line-height: 1.6;
}
.note-teaser-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
    transition: color 0.15s ease;
}
.note-teaser-row:hover .note-teaser-title { color: var(--steel-deep); }
.note-teaser-excerpt { display: block; font-size: 0.9rem; line-height: 1.6; color: var(--gray); max-width: 60ch; }
@media (max-width: 700px) { .note-teaser-row { grid-template-columns: 1fr; gap: 0.4rem; } }

/* ===== Quiet italic bridge line between sections ===== */
.section-bridge {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--steel-deep);
    max-width: 62ch;
    margin-top: 2.5rem;
    line-height: 1.7;
}

/* ===== Small underlined mono text link (section CTAs) ===== */
.text-link {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--steel);
    padding-bottom: 2px;
}
.text-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ===== About preview (homepage) ===== */
.about-preview-body { font-size: 1.02rem; line-height: 1.85; color: var(--ink); max-width: 68ch; margin-bottom: 1.5rem; }
.about-preview-links { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }

/* Copy beside a blended standing figure — same multiply treatment as the hero,
   and the same device Beast Creative uses in its "who you're hiring" section.
   Figure sits on the LEFT deliberately: he is looking to his left, i.e. toward
   the right of frame, so the gaze runs into the copy instead of off the page.
   Mirroring the photo would fix the direction but reverse the beanie's
   lettering and move the watch to the wrong wrist. */
/* ===== Closing block: About + subscribe as one composition =====
   Figure runs the full height on the left; the right column stacks the About
   copy over a subscribe panel. Previously these were two separate bands (a
   short About beside a very tall figure, then a dark footer CTA), which left
   pools of white on both sides of the copy. */
.closing-block {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: stretch;
    border-top: 1px solid var(--ink);
    padding-top: clamp(1.75rem, 3vw, 2.75rem);
}

.closing-figure {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--paper);   /* backdrop for the multiply — see .hero-media */
    min-height: 0;
}

.closing-figure img {
    display: block;
    width: 100%;
    /* This width also sets the block's height, because the figure is taller
       than the copy beside it: every extra pixel of width adds ~2.6px of
       height, and the surplus shows up as a gap between the About copy and
       the subscribe panel. 280 leaves a divider-sized gap rather than a void.
       (Source is 406px wide, so this is already a ~1.4x upscale at 2x DPR.) */
    max-width: 280px;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
    mix-blend-mode: multiply;
    filter: grayscale(100%);
}

/* Upper ~two-thirds About, lower third subscribe.
   Rows are auto, not 1fr — a 1fr top row absorbed whatever slack the figure's
   intrinsic height created and pooled it as dead space under the About copy.
   space-between puts any remaining slack at the divider, where it reads as
   deliberate separation rather than a gap. */
.closing-copy {
    display: grid;
    grid-template-rows: auto auto;
    align-content: space-between;
    gap: clamp(1.75rem, 3vw, 2.5rem);
    min-width: 0;
}

.closing-about .section-title { margin-bottom: 1.25rem; }
.closing-about .about-preview-body { max-width: 62ch; margin-bottom: 1.15rem; }

.closing-subscribe {
    border-top: 1px solid var(--gray-light);
    padding-top: clamp(1.5rem, 2.5vw, 2rem);
}

@media (max-width: 860px) {
    .closing-block { grid-template-columns: 1fr; padding-top: 1.5rem; }
    /* Centred once stacked — left-aligned under full-width copy left the
       figure hanging off the edge of an otherwise symmetrical column. */
    .closing-figure { justify-content: center; order: 2; }
    .closing-figure img { max-width: 220px; height: auto; }
    .closing-copy { order: 1; }
}

/* ===== Closing subscribe block (sits inside .footer-cta) ===== */
/* Sentence case, unlike Beast's all-caps selling moments — the hero is this
   site's one maximal display statement; the close should read calmer. */
.subscribe-cta-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    max-width: 22ch;
    color: var(--ink);
    margin-bottom: 0.7rem;
}
.subscribe-cta-sub {
    font-size: 0.92rem;
    color: var(--gray);
    max-width: 56ch;
    line-height: 1.65;
    margin-bottom: 1.4rem;
}
.subscribe-form { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.subscribe-form input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--gray-light);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.92rem;
    padding: 0.6rem 0.1rem;
    min-width: 190px;
}
.subscribe-form input::placeholder { color: var(--gray); }
.subscribe-form input:focus { outline: none; border-bottom-color: var(--ink); }
.subscribe-form button {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.75rem 1.4rem;
    cursor: pointer;
    white-space: nowrap;
}
.subscribe-form button:hover { background: var(--steel-deep); border-color: var(--steel-deep); }
.subscribe-form button:disabled { opacity: 0.6; cursor: default; }
.subscribe-micro { font-family: var(--font-mono); font-size: 0.68rem; color: var(--gray); margin-top: 0.85rem; }
.subscribe-micro a { color: var(--ink); border-bottom: 1px solid var(--steel); text-decoration: none; }

@media (max-width: 700px) {
    .subscribe-form { flex-direction: column; align-items: stretch; }
    .subscribe-form input { min-width: 0; }
}

/* Page load animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero { animation: fadeUp 0.8s ease 0.1s forwards; opacity: 0; }