@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* Visually-hidden: present for screen readers and SEO (e.g. page H1) but not shown */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sprint service page */
.sprint-intro {
    max-width: 920px;
    margin: 0 auto 5rem;
    padding-top: 1.5rem;
}

.sprint-eyebrow {
    margin: 0 0 0.8rem;
    color: var(--accent, #ff4d8d);
    font-family: 'Roboto Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.sprint-intro > h1 {
    max-width: 800px;
    margin: 0 0 2.75rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.sprint-definition {
    display: grid;
    grid-template-columns: minmax(170px, 0.55fr) minmax(0, 1.45fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    max-width: 800px;
    padding: 2rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.sprint-definition > h2 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.sprint-definition-copy {
    max-width: 570px;
}

.sprint-definition-copy p {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.65;
}

.sprint-definition-copy p:last-child {
    margin-bottom: 0;
}

.sprint-definition-copy .sprint-lede {
    color: var(--text-primary);
    font-size: clamp(1.3rem, 2.4vw, 1.65rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.sprint-process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 3rem 0;
}

.sprint-process article,
.sprint-fit {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.48);
}

.sprint-process span {
    color: var(--accent, #ff4d8d);
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
}

.sprint-process h2,
.sprint-fit h2,
.projects-heading h2 {
    margin: 0.65rem 0;
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.15;
}

.sprint-process p,
.sprint-fit p {
    margin-bottom: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.sprint-fit {
    display: grid;
    grid-template-columns: minmax(180px, 0.65fr) 1.35fr auto;
    gap: 1.5rem;
    align-items: center;
}

.sprint-fit h2,
.sprint-fit p {
    margin: 0;
}

.sprint-cta {
    color: inherit;
    font-weight: 650;
    white-space: nowrap;
}

.projects-heading {
    margin-bottom: 1.5rem;
}

@media (max-width: 760px) {
    .sprint-intro {
        margin-bottom: 3rem;
    }

    .sprint-process,
    .sprint-fit,
    .sprint-definition {
        grid-template-columns: 1fr;
    }

    .sprint-intro > h1 {
        margin-bottom: 2rem;
    }

    .sprint-definition {
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .sprint-fit {
        align-items: start;
    }
}

:root {
    --bg-primary: #F5F5F5;
    --bg-secondary: #EBEBEB;
    --bg-tertiary: #E0E0E0;
    --text-primary: #1E1E1E;
    --text-secondary: #5A5A5A;
    --accent: #E5A9B2;
    --accent-hover: #D6949E;
    
    --border-color: rgba(0, 0, 0, 0.15);
    --font-main: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: 'Newsreader', 'Times New Roman', Times, serif;
    --font-mono: 'Roboto Mono', monospace;
    /* Display/heading face. BNBoop is parked (accent use only, one word max) —
       headings now use Space Grotesk. Swap this token to bring BNBoop back. */
    --font-custom: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@font-face {
    font-family: 'BNBoop';
    src: url('fonts/BNBoop.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

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

body {
    /* Subtle symmetric gradient: slightly darker at the top, lightening to
       the base tone by ~760px, flat light through the middle, then mirroring
       back to the darker tone at the footer. */
    background-color: var(--bg-primary);
    background-image: linear-gradient(180deg, #E4E5EB 0px, var(--bg-primary) 760px, var(--bg-primary) calc(100% - 760px), #E4E5EB 100%);
    background-repeat: no-repeat;
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 4rem;
    margin-left: 320px; /* Offset for the side navigation cards */
}

/* Navbar (Sidebar) */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 2rem 1.5rem;
    background: transparent;
    z-index: 100;
    border-right: none;
    overflow-y: auto;
    gap: 1.5rem;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    scrollbar-color: transparent transparent;
    /* Feather the right edge so any scrollbar/seam at the sidebar-content
       boundary fades out instead of reading as a hard dividing line. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.navbar::-webkit-scrollbar {
    display: none;
}

/* Navigation Cards */
.nav-card {
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.06);
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* Prevents card from squishing */
}

/* Experimental liquid-glass treatment for the left nav tiles.
   Translucent frosted surface + SVG turbulence refraction + glassy bevel rim. */
.glass-nav .nav-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(1.9);
    backdrop-filter: url(#container-glass) blur(14px) saturate(1.9);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.16),
        inset 3px 3px 1px -2px rgba(255, 255, 255, 1),
        inset -3px -3px 1px -2px rgba(255, 255, 255, 0.8),
        inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.9),
        inset 0 0 16px 6px rgba(255, 255, 255, 0.25),
        0 0 18px rgba(255, 255, 255, 0.22);
}

/* Glossy sheen across the top of each glass tile */
.glass-nav .nav-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%);
    pointer-events: none;
    z-index: 2;
}

.glass-nav .nav-card {
    position: relative;
}

/* Keep the actual content above the sheen overlay */
.glass-nav .profile-hero-image,
.glass-nav .profile-info,
.glass-nav .nav-links-list {
    position: relative;
    z-index: 3;
}

/* Profile Card */
.profile-card {
    padding: 0.75rem;
    padding-bottom: 1.25rem;
}

/* Profile card as a home link */
.profile-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.profile-card-link:active {
    transform: translateY(0);
}

.profile-hero-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1rem;
    flex-shrink: 0; /* Prevents image from squishing */
}

.portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portrait-name {
    position: absolute;
    top: 1.5rem;
    left: 0;
    width: 100%;
    text-align: center;
    color: #FFF;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.portrait-logo {
    height: 55px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0 0.5rem;
}

.avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-details {
    display: flex;
    flex-direction: column;
}

.profile-role {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
}

.profile-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

.location-icon, .time-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

/* Links Card */
.links-card {
    padding: 0.75rem;
    padding-bottom: 1.25rem;
}

.signature-img {
    width: 80%;
    margin: 0 0 1rem 0;
    display: block;
}

.nav-links-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.nav-link-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 1.05rem;
    transition: var(--transition-smooth);
    text-decoration: none;
}

.contact-link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    color: var(--text-primary);
    font-weight: 400;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
    text-decoration: none;
}

.nav-link-item:hover, .contact-link-item:hover {
    background-color: rgba(0,0,0,0.05);
}

.nav-link-item .icon, .contact-title .icon {
    margin-right: 1.5rem;
    font-size: 1.1rem;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
}

.nav-divider {
    height: 1px;
    background: rgba(0,0,0,0.06);
    margin: 0.2rem 0;
}

.contact-section {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.contact-title {
    padding: 0.5rem 0.5rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 400;
    display: flex;
    align-items: center;
}

.contact-label {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.contact-icon {
    display: inline-block;
    width: 20px;
    text-align: center;
    margin-right: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.icon-external {
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Typography */
.accent {
    color: var(--accent);
}

.section-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

/* Hero Section */
.hero {
    padding: 12rem 0 6rem;
    max-width: 800px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    font-weight: 300;
    max-width: 600px;
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.dot-separator {
    opacity: 0.4;
}

.time-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-secondary);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.live-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* Experience */
.experience {
    padding: 4rem 0;
}

.timeline {
    display: flex;
    flex-direction: column;
}

.timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    transition: var(--transition-smooth);
}

.timeline-item:hover {
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: rgba(0, 0, 0, 0.02);
}

.timeline-company {
    font-weight: 500;
    font-size: 1.1rem;
}

.timeline-role {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.timeline-date {
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.08);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

/* Projects */
.projects {
    padding: 2rem 0 6rem 0; /* Align top padding with the sidebar's 2rem padding */
}

.projects-grid {
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.project-image-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background-color: var(--bg-secondary);
}

.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-image {
    transform: scale(1.05);
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(245, 245, 245, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-smooth);
    backdrop-filter: blur(4px);
}

.project-overlay span {
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    font-weight: 500;
    font-size: 0.9rem;
    transform: translateY(20px);
    transition: var(--transition-smooth);
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-card:hover .project-overlay span {
    transform: translateY(0);
}

.project-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.project-name {
    font-size: 1.25rem;
    font-weight: 500;
}

.project-role {
    font-size: 0.85rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.project-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Sprint portfolio: a stronger section handoff, with the original project layout. */
.sprint-intro + .projects {
    max-width: 920px;
    margin: 0 auto;
    padding-top: 0;
}

.sprint-intro + .projects .projects-heading {
    display: grid;
    grid-template-columns: minmax(150px, 0.48fr) minmax(0, 1.52fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: end;
    margin: 0 0 3.25rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.sprint-intro + .projects .projects-heading .sprint-eyebrow,
.sprint-intro + .projects .projects-heading h2 {
    margin: 0;
}

.sprint-intro + .projects .projects-heading h2 {
    font-size: clamp(2rem, 4.4vw, 3.35rem);
    letter-spacing: -0.045em;
}

@media (max-width: 760px) {
    .sprint-intro + .projects .projects-heading {
        grid-template-columns: 1fr;
        gap: 0.7rem;
        margin-bottom: 2.5rem;
        padding-bottom: 1.5rem;
    }

    .sprint-intro + .projects .projects-heading h2 {
        font-size: 2.15rem;
    }
}

/* Contact */
.contact {
    padding: 6rem 0 8rem;
    max-width: 700px;
}

.contact-text {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
}

.contact-link {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.3);
    text-underline-offset: 4px;
}

.contact-link:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-btn {
    padding: 0.8rem 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-weight: 500;
    background: var(--bg-secondary);
    transition: var(--transition-smooth);
}

.social-btn:hover {
    background: var(--bg-tertiary);
    border-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Footer — charcoal band. Sits under the fixed glass nav, whose
   backdrop-blur lets the dark tone glow through the frosted tiles. */
.footer {
    text-align: center;
    padding: 3rem 0;
    background: var(--text-primary);
    color: rgba(245, 245, 245, 0.75);
    font-size: 0.85rem;
}

.footer p {
    padding: 0 2rem;
}

/* Homepage footer carries the Beat Grid, so the band drops to the machine's
   own near-black — otherwise the panel would vanish into the charcoal. */
.footer--machine {
    background: #141416;
}

/* Footer content column: mirrors .container so anything sitting in the footer
   lines up with the home prose above it, clear of the fixed sidebar. */
.footer-inner {
    max-width: 1000px;
    margin: 0 auto 3rem;
    margin-left: 320px;
    padding: 0 4rem;
    text-align: left;
}

.footer-inner #beatgrid {
    max-width: 720px;
}

/* Animations */
@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(229, 169, 178, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(229, 169, 178, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(229, 169, 178, 0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        margin-left: 0;
        padding: 0 2rem;
    }

    .footer-inner {
        margin-left: 0;
        padding: 0 2rem;
    }

    
    .navbar {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: column;
        padding: 1rem 2rem;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
    }

    .nav-brand {
        margin-bottom: 0;
    }
    
    .hero {
        padding-top: 8rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .dot-separator {
        display: none;
    }
    
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .nav-links {
        display: none; /* In a real app, implement a hamburger menu here */
    }
}

/* ==========================================================================
   Case Study Layout (WellNest)
   ========================================================================== */

.case-study-container {
    max-width: 680px; /* Thinner for comfortable reading */
    margin: 0;
    margin-left: 2rem; /* Align closer to the nav rather than floating in middle */
    padding: 2rem 0 6rem 0;
}

.about-container {
    max-width: 820px; /* Wider to accommodate side-by-side mini cards */
}

.case-study-card {
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.03);
    padding: 3.5rem;
    margin-bottom: 3.5rem; /* Generous spacing between sections */
}

.case-study-title {
    font-family: var(--font-custom);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    letter-spacing: normal;
}

/* "Shy Boy" movie-poster placeholder (MY STORY hero) */
.story-poster {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    width: 100%;
    margin: 0 0 2.5rem;
    border-radius: 16px;
    background: var(--accent); /* soft brand-pink riso poster */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.14);
}

/* Paper grain over the poster (riso print feel) */
.story-poster::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='paperGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperGrain)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.3;
    mix-blend-mode: multiply;
}

.story-poster-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-custom);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #FBF4EC; /* cream ink on pink */
    font-size: clamp(3.5rem, 12vw, 6rem);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}

/* Centered heading band (leaflet-style kicker + title, grainy paper texture) */
.story-heading-band {
    position: relative;
    overflow: hidden;
    text-align: center;
    /* Rounded at the top, near-pointed at the bottom */
    border-radius: 24px 24px 3px 3px;
    padding: 2.5rem 2rem;
    margin: 0 auto 2.5rem;
    /* Soft riso blue — complementary to the brand pink (#E5A9B2) */
    background: var(--band-blue, #9DC3E0);
}

/* Grainy paper-grain overlay (fractal-noise filter, blended over the blue) */
.story-heading-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='paperGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperGrain)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.3;
    mix-blend-mode: multiply;
}

.story-heading-band > * {
    position: relative;
    z-index: 1;
}

.story-heading-band .section-label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    opacity: 0.7;
}

.story-heading-band .story-heading-title {
    font-family: var(--font-main); /* Space Grotesk */
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: normal;
    color: var(--text-primary);
    /* Two 1.6× steps up from the 0.75rem kicker (0.75 → 1.2 → 1.92rem) */
    font-size: 1.92rem;
    margin: 0;
}

/* Full-width banner image placeholder (half-height landscape strip) */
.story-banner-image {
    position: relative;
    aspect-ratio: 32 / 9;
    width: 100%;
    margin: 2.5rem 0;
    border-radius: 16px;
    overflow: hidden;
    background: #F1EBDF; /* cream paper */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Soft-pink riso wash — shows on empty placeholders; sits behind any image */
.story-banner-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(229,169,178,0.6) 0%, rgba(229,169,178,0.18) 100%);
}

/* Paper grain over everything, including dropped-in images, for print cohesion */
.story-banner-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='paperGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperGrain)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.26;
    mix-blend-mode: multiply;
}

.story-banner-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-banner-image .mini-image-placeholder-text {
    position: relative;
    z-index: 3;
    margin: 0;
}

/* Split layout for about cards (now using floats for text wrapping) */
.card-split-layout {
    display: block;
}

.card-text-column {
    display: block;
}

.card-image-column {
    width: 240px; /* Fixed width for the mini card */
    float: right;
    margin-left: 3rem;
    margin-bottom: 1rem;
}

.mini-image-card {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.mini-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-image-card.ratio-square {
    aspect-ratio: 1 / 1;
}

.mini-image-placeholder-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 1rem;
}

@media (max-width: 900px) {
    .card-image-column {
        width: 100%;
        max-width: 300px;
        float: none;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
    }
}

.case-study-intro {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 2rem;
    font-weight: 400;
}

.case-study-meta {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.meta-item {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.meta-item strong {
    color: var(--text-primary);
    font-weight: 600;
    margin-right: 0.5rem;
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.case-study-card h2 {
    font-family: var(--font-custom);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    letter-spacing: normal;
}

.case-study-card h3 {
    font-family: var(--font-main);
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.case-study-card p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.case-study-card p:last-child {
    margin-bottom: 0;
}

.case-study-card ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

.case-study-card li {
    margin-bottom: 0.5rem;
}

.case-study-image-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: var(--bg-secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
    padding: 2rem;
    margin: 2rem 0;
    border: 1px dashed rgba(0,0,0,0.1);
}

/* Live-site captures (WellNest et al) — stills and auto-scrolling panes.
   .wn-scroll shows a tall full-page screenshot inside a fixed frame and
   slowly scrolls through it (pauses on hover); feels like a screen
   recording but loads as a single lazy image. */
.wn-fig { margin: 1.75rem 0 2.75rem; }

.wn-fig figcaption {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 0.9rem;
}

.wn-shot,
.wn-scroll {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    background: var(--bg-secondary);
}

.wn-shot img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.wn-shot.wn-zoom:hover img { transform: scale(1.03); }

.wn-scroll { height: 460px; }

.wn-scroll img {
    display: block;
    width: 100%;
    height: auto;
    animation: wn-scroll-y var(--wn-dur, 26s) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
    animation-delay: 1.2s;
}

.wn-scroll:hover img { animation-play-state: paused; }

@keyframes wn-scroll-y {
    from { transform: translateY(0); }
    to   { transform: translateY(calc(-100% + 460px)); }
}

@media (prefers-reduced-motion: reduce) {
    .wn-scroll img { animation: none; }
    .wn-shot.wn-zoom:hover img { transform: none; }
}

/* ==========================================================================
   Offers Layout
   ========================================================================== */

.offers-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 6rem 0;
}

.offers-page-header {
    margin-bottom: 4rem;
}

.offers-page-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.offers-page-subtitle {
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-secondary);
}

.offers-section {
    margin-bottom: 5rem;
}

.offers-section-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

.reading-category {
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid #ccc;
}

.reading-category:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.offers-grid {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 2rem;
    /* Bleed to the right edge of the screen */
    margin-right: -50vw; 
    padding-right: 50vw;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    z-index: 1;
    scroll-behavior: smooth;
}

.offers-grid::-webkit-scrollbar {
    display: none;
}

/* Carousel Controls */
.carousel-wrapper {
    position: relative;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.carousel-wrapper:hover .carousel-btn {
    opacity: 1;
}

.carousel-btn:hover {
    background: #FFFFFF;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.carousel-btn.left {
    left: -24px;
}

.carousel-btn.right {
    right: 0;
}

.offer-card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 2.5rem 2.5rem 0 2.5rem;
    display: flex;
    flex-direction: column;
    min-height: 520px;
    min-width: 400px;
    max-width: 400px;
    flex-shrink: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}

.offer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.06);
}

.offer-card.dark {
    background: #000000;
    color: #FFFFFF;
}

.offer-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.offer-label.orange { color: #E56B25; }
.offer-label.gray { color: #86868B; }

.offer-title {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    color: inherit;
}

.offer-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: inherit;
    opacity: 0.9;
}

.offer-pricing {
    font-size: 0.9rem;
    font-weight: 400;
    color: inherit;
    opacity: 0.6;
    margin-bottom: 2rem;
}

.offer-image-placeholder {
    margin-top: auto;
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    margin-bottom: 0;
    align-self: stretch;
    flex-grow: 1;
    min-height: 240px;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.offer-card.dark .offer-image-placeholder {
    background: #1A1A1A;
}

/* --- Real offers: clickable cards, CTA affordance, branded visual panels --- */
a.offer-card {
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
}
a.offer-card.dark { color: #FFFFFF; }

.offer-cta {
    font-size: 0.95rem;
    font-weight: 600;
    color: #E56B25;
    margin-top: -1rem;
    margin-bottom: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: gap 0.25s ease;
}
.offer-card:hover .offer-cta { gap: 0.7rem; }
.offer-card.dark .offer-cta { color: #FF8A4C; }

.offer-visual {
    margin-top: auto;
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    align-self: stretch;
    flex-grow: 1;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.offer-visual img { width: 100%; height: 100%; object-fit: cover; }
.offer-visual .panel-word {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: -0.03em;
}
.offer-visual.panel-voc { background: #FFF3EC; }
.offer-visual.panel-voc .panel-word { color: #E56B25; }
.offer-visual.panel-call { background: #F6EDEF; }
.offer-visual.panel-call .panel-word { color: #C98A95; }
.offer-visual.panel-sprint { background: #141414; }
.offer-visual.panel-sprint .panel-word { color: #FF8A4C; }

@media (max-width: 1100px) {
    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .offers-grid {
        grid-template-columns: 1fr;
    }
    .offers-page-title, .offers-page-subtitle {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Homepage (intro letter — Chris-style prose with inline badges + carousels)
   ========================================================================== */

.home {
    max-width: 720px;
    padding: 2.5rem 0 5rem;
}

.home-line {
    font-size: clamp(1.35rem, 2.1vw, 1.6rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin-bottom: 1.6rem;
}

/* Slightly tighter gap when a line leads directly into a media block */
.home-line.leads {
    margin-bottom: 0.6rem;
}

.home-link {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: var(--transition-smooth);
}

.home-link:hover {
    color: var(--accent);
}

/* Inline link-preview triggers — bolded, linked words that reveal an image preview on hover */
.link-preview {
    font-weight: 600;
    cursor: pointer;
}

/* Floating preview card (vanilla port of the Aceternity LinkPreview effect) */
.link-preview-card {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    padding: 4px;
    background: #FFFFFF;
    border: 2px solid transparent;
    border-radius: 14px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: translateY(12px) scale(0.85);
    transform-origin: bottom center;
    transition: opacity 0.18s ease, transform 0.3s cubic-bezier(0.18, 1.25, 0.4, 1);
    pointer-events: none;
}

.link-preview-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.link-preview-card:hover {
    border-color: var(--bg-tertiary);
}

.link-preview-card img {
    display: block;
    width: 230px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--bg-secondary);
}

@media (max-width: 640px) {
    .link-preview-card img { width: 180px; height: 118px; }
}

/* A subtle fill-in blank for copy still to be written ("___") */
.blank {
    display: inline-block;
    min-width: 5rem;
    border-bottom: 2px dotted rgba(0, 0, 0, 0.25);
    margin: 0 0.15em;
}

/* Inline placeholder badges — rounded app-icon chips (Chris example) */
.ibadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 40px;
    padding: 0 9px;
    margin: 0 4px;
    vertical-align: middle;
    border-radius: 11px;
    background: #FFFFFF;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.ibadge:hover {
    transform: translateY(-2px) rotate(-2deg);
}

.ibadge.round {
    border-radius: 50%;
    padding: 0;
}

.ibadge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vitruvian badge tile — keeps the white chip card of the sibling badges.
   Fixed square (the SVG's intrinsic 1080px width would otherwise stretch it)
   and inset padding so the mark's ring doesn't crowd the rounded corners. */
.ibadge.vm {
    width: 44px;
    height: 44px;
    padding: 4px;
    flex-shrink: 0;
}

.ibadge.vm img {
    object-fit: contain;
}

.ibadge.dark {
    background: #000000;
    color: #FFFFFF;
    border-color: transparent;
}

.ibadge.accent {
    background: var(--accent);
    color: #FFFFFF;
    border-color: transparent;
}

/* Row of social badges sitting inline with the text */
.badge-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    margin-left: 4px;
}

.badge-row .ibadge {
    margin: 0;
    padding: 0;
}

/* Brand-coloured social tiles with white logos */
.badge-row .ibadge svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: #FFFFFF;
}

.ibadge.x,
.ibadge.ig,
.ibadge.yt,
.ibadge.li,
.ibadge.sub {
    border-color: transparent;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.ibadge.x   { background: #000000; }
.ibadge.yt  { background: #FF0000; }
.ibadge.li  { background: #0A66C2; }
.ibadge.sub { background: #FF6719; }
.ibadge.ig  {
    background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
}

.ibadge.ig svg {
    width: 20px;
    height: 20px;
}

/* Carousels on the homepage reuse the offers-page carousel components.
   Just add vertical breathing room around them. */
.home .carousel-wrapper {
    margin: 0.6rem 0 3rem;
}

/* Single image placeholders (one big rounded image, Sprints-style) */
/* One-image blocks — same 16:9 model as the Sprints project images,
   so every single image on the page is consistent. */
.single-media {
    margin: 0.8rem 0 3rem;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-align: center;
    padding: 1.5rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Creative Examples — library tile grid (modeled on writingexamples.com)
   ========================================================================== */

.examples-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 0 6rem;
}

.examples-header {
    margin-bottom: 2rem;
}

.examples-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-top: 0.75rem;
    max-width: 640px;
}

.examples-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 2.5rem;
}

.example-filter {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #FFFFFF;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.example-filter:hover {
    background: var(--bg-secondary);
}

.example-filter.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.example-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    /* button resets (cards are <button> for accessible modal triggering) */
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
    font: inherit;
    cursor: pointer;
}

.example-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);
}

.example-thumb {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    background: var(--bg-secondary);
}

.example-thumb.tint-pink  { background: #F3DDE2; color: #9A6B74; }
.example-thumb.tint-blue  { background: #D9E6F2; color: #5E7C93; }
.example-thumb.tint-cream { background: #F1EBDF; color: #998E78; }

/* Greyed-out placeholder thumbnail (until real images are added) */
.example-thumb--placeholder {
    background: linear-gradient(135deg, #E4E4E4 0%, #D8D8D8 100%);
    color: #B0B0B0;
}
.example-card:hover .example-thumb--placeholder {
    color: #9C9C9C;
}

.example-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.1rem 1.25rem;
}

.example-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-hover);
}

.example-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

.example-source {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

@media (max-width: 980px) {
    .examples-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* --------------------------------------------------------------------------
   Creative Examples — floating modal (Notion-style centered window)
   -------------------------------------------------------------------------- */
.example-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background: rgba(20, 20, 20, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.example-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.example-modal {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 88vh;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.30);
    transform: translateY(12px) scale(0.985);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Single white surface — rounds the corners and scrolls. Keeping the white on
   this one element (not also on .example-modal) stops a white arc peeking at the corners. */
.example-modal-content {
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #FFFFFF;
    border-radius: 18px;
    /* Hide the scrollbar but keep scrolling functional */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE / old Edge */
}

.example-modal-content::-webkit-scrollbar {
    display: none;              /* Chrome / Safari / Edge */
}

.example-modal-overlay.is-open .example-modal {
    transform: translateY(0) scale(1);
}

/* Close button sits on the dark backdrop, top-right of the viewport */
.example-modal-close {
    position: fixed;
    top: 1.5rem;
    right: 1.75rem;
    z-index: 1010;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.example-modal-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

/* Hero header — full-bleed image area with title overlaid */
.example-modal-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 8;
    padding: 1.5rem;
    background-size: cover;
    background-position: center;
}

.example-modal-hero--placeholder {
    background: linear-gradient(135deg, #C9C9C9 0%, #ABABAB 100%);
}

/* Scrim so the white title stays legible over any image */
.example-modal-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0.40) 100%);
}

.example-modal-title {
    position: relative;
    z-index: 1;
    max-width: 90%;
    text-align: center;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.15;
    color: #FFFFFF;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    margin: 0;
}

.example-modal-meta {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

.example-modal-readtime {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.example-modal-pill {
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: var(--accent);
    color: #1E1E1E;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.example-modal-body {
    padding: 2.5rem 3rem 3rem;
}

.example-modal-body p {
    font-family: var(--font-main);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0 0 1.1rem;
}

.example-modal-body blockquote {
    margin: 1.6rem 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--accent);
    font-family: var(--font-main);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .example-modal-hero { aspect-ratio: 16 / 9; }
    .example-modal-title { font-size: 1.6rem; }
    .example-modal-body { padding: 2rem 1.5rem 2.25rem; }
    .example-modal-body p { font-size: 1.05rem; }
    .example-modal-body blockquote { font-size: 1.15rem; }
    .example-modal-close { top: 0.75rem; right: 0.75rem; }
}

/* Comparison Mockups for Case Study */
.comparison-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 2.5rem 0;
    width: 100%;
}

.comparison-box {
    flex: 1;
    background: #F8F9FA;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 1.5rem;
}

.comparison-box h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-arrow {
    font-size: 1.8rem;
    color: var(--text-secondary);
    font-weight: 300;
}

.old-nav-mock, .new-nav-mock {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-family: var(--font-mono);
}

.old-nav-mock span, .new-nav-mock span {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    color: var(--text-secondary);
}

.new-nav-mock span {
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
    font-weight: 500;
}

.new-nav-mock .btn-mock {
    background: var(--text-primary);
    color: #FFFFFF;
    border: none;
}

.membership-comparison {
    display: flex;
    gap: 1.5rem;
    margin: 2.5rem 0;
    width: 100%;
}

.membership-col {
    flex: 1;
    background: #F8F9FA;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 1.5rem;
}

.membership-col h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.membership-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.membership-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

.membership-item.highlight {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(229, 169, 178, 0.25);
}

.membership-item.dark-mock {
    background: #000000;
    color: #FFFFFF;
    border-color: transparent;
}

.membership-item span.title {
    font-weight: 600;
}

.membership-item span.price {
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.membership-item.dark-mock span.price {
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 640px) {
    .comparison-container {
        flex-direction: column;
        align-items: stretch;
    }
    .comparison-arrow {
        text-align: center;
        transform: rotate(90deg);
    }
    .membership-comparison {
        flex-direction: column;
    }
}

/* ==========================================================================
   Reading List — Modern Wisdom-style book entries
   ========================================================================== */
.reading-intro {
    max-width: 640px;
    margin: 0 0 4.5rem;
}
.reading-intro p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 1.1rem;
}
.reading-intro .reading-signature {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-top: 1.5rem;
}

/* Big category section header (the PDF's full-bleed divider title) */
.reading-section-divider {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 4.5rem 0 3rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--text-primary);
}
.reading-section-divider:first-of-type { margin-top: 0; }

/* Individual book entry */
.book-entry {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--border-color);
}
.book-entry:last-child { border-bottom: none; }

.book-head { margin-bottom: 1.5rem; }
.book-title {
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.book-author {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 0.45rem;
}

.book-body {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.book-entry--reverse .book-body { flex-direction: row-reverse; }

.book-cover {
    flex: 0 0 225px;
    width: 225px;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    overflow: hidden;
}
.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.book-detail { flex: 1; min-width: 0; }

/* The accent tag bar */
.book-tags {
    display: block;
    background: var(--accent);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    padding: 0.7rem 1.1rem;
    border-radius: 6px;
    margin-bottom: 1.1rem;
}

.book-desc {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-primary);
    margin-bottom: 1.1rem;
}
.book-desc.is-placeholder { color: var(--text-secondary); font-style: italic; }

.book-buy {
    display: inline-block;
    font-weight: 600;
    color: var(--accent-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: var(--transition-smooth);
}
.book-buy:hover { color: var(--accent); }

@media (max-width: 640px) {
    .book-body,
    .book-entry--reverse .book-body { flex-direction: column; }
    .book-cover { width: 175px; flex-basis: 175px; }
}

/* ==========================================================================
   Reading List — "Book I'm Reading Now" featured window
   ========================================================================== */
.reading-now {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    padding: 2.25rem 2.5rem;
    margin: 0 0 4.5rem;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(229, 169, 178, 0.20) 0%, rgba(229, 169, 178, 0.04) 100%);
    border: 1px solid rgba(229, 169, 178, 0.55);
    box-shadow: 0 20px 55px rgba(229, 169, 178, 0.20);
}

.reading-now-cover {
    flex: 0 0 170px;
    width: 170px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.reading-now-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.reading-now-info { flex: 1; min-width: 0; }

.reading-now-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-hover);
    margin-bottom: 0.85rem;
}
.reading-now-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-hover);
    animation: readingPulse 1.8s ease-out infinite;
}
@keyframes readingPulse {
    0%   { box-shadow: 0 0 0 0 rgba(214, 148, 158, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(214, 148, 158, 0); }
    100% { box-shadow: 0 0 0 0 rgba(214, 148, 158, 0); }
}

.reading-now-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.reading-now-author {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}
.reading-now-note {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 1.15rem 0;
    max-width: 46ch;
}
.reading-now-note.is-placeholder { color: var(--text-secondary); font-style: italic; }
.reading-now-buy {
    display: inline-block;
    font-weight: 600;
    color: var(--accent-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: var(--transition-smooth);
}
.reading-now-buy:hover { color: var(--accent); }

@media (max-width: 640px) {
    .reading-now { flex-direction: column; align-items: flex-start; gap: 1.75rem; padding: 1.75rem; }
}

/* ===========================================================================
   Typographic polish — site-wide orphan/widow control
   `text-wrap: pretty` tells the browser to use a higher-quality line breaker
   that avoids leaving a single dangling word on the last line of body copy.
   `text-wrap: balance` evens out the line lengths of short headings so they
   never break to a lone orphan word either. A house-style default — applies
   everywhere, so any text added later inherits it automatically.
   =========================================================================== */
p,
li,
blockquote,
figcaption,
.project-desc,
.case-study-intro,
.profile-role {
    text-wrap: pretty;
}

/* .home-line uses balance, not pretty: these are short headline-style statements
   that end in inline-flex badges, and `pretty` won't keep a lone word+badge off
   its own line. `balance` evens the two lines so nothing orphans. */
h1, h2, h3, h4, h5, h6,
.home-line,
.case-study-title,
.story-heading-title {
    text-wrap: balance;
}

/* ===========================================================================
   Left navigation: one continuous surface.

   The profile and link groups remain separate for their semantics, but they
   no longer paint their own cards. The outer nav now owns the background,
   border, blur, highlight and shadow, which removes the doubled glass seam.
   =========================================================================== */
.navbar {
    gap: 0;
    border-radius: 24px;
    -webkit-mask-image: none;
    mask-image: none;
}

.navbar > .nav-card,
.glass-nav .navbar > .nav-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.navbar > .nav-card::after,
.glass-nav .navbar > .nav-card::after {
    display: none;
}

.navbar > .profile-card {
    padding-bottom: 0.75rem;
}

.navbar > .links-card {
    padding-top: 0;
}

.navbar > .profile-card-link:hover,
.navbar > .profile-card-link:active {
    transform: none;
    box-shadow: none;
}

body:not(.glass-nav) .navbar {
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}

.glass-nav .navbar {
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.9);
    backdrop-filter: url(#container-glass) blur(14px) saturate(1.9);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.16),
        inset 3px 3px 1px -2px rgba(255, 255, 255, 1),
        inset -3px -3px 1px -2px rgba(255, 255, 255, 0.8),
        inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.9),
        inset 0 0 16px 6px rgba(255, 255, 255, 0.25),
        0 0 18px rgba(255, 255, 255, 0.22);
}

/* A single highlight spans the full panel instead of restarting above About. */
.glass-nav .navbar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%);
    pointer-events: none;
    z-index: 2;
}

@media (min-width: 769px) {
    .navbar {
        top: 2rem;
        left: 1.5rem;
        width: 272px;
        height: auto;
        max-height: calc(100vh - 4rem);
        padding: 0;
        align-items: stretch;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

@media (max-width: 768px) {
    .navbar {
        width: calc(100% - 2rem);
        max-height: none;
        margin: 1rem;
        padding: 0;
        overflow: hidden;
    }
}

/* The adaptive visual layer is cloned outside the fixed navbar by script.js so
   it can sit above the unified glass surface and stay crisp while blending. */
body.glass-nav > .adaptive-nav-overlay {
    position: fixed;
    /* Paint above the single blurred surface so the shared backdrop filter
       does not soften the cloned labels and icons. */
    z-index: 101;
    color: #FFFFFF;
    pointer-events: none;
    mix-blend-mode: difference;
}

body.glass-nav > .adaptive-nav-overlay .nav-link-item,
body.glass-nav > .adaptive-nav-overlay .contact-link-item,
body.glass-nav > .adaptive-nav-overlay .contact-title,
body.glass-nav > .adaptive-nav-overlay .contact-label,
body.glass-nav > .adaptive-nav-overlay .nav-link-item .icon,
body.glass-nav > .adaptive-nav-overlay .contact-title .icon,
body.glass-nav > .adaptive-nav-overlay .icon-external,
body.glass-nav > .adaptive-nav-overlay .profile-role,
body.glass-nav > .adaptive-nav-overlay .profile-meta,
body.glass-nav > .adaptive-nav-overlay .location-icon,
body.glass-nav > .adaptive-nav-overlay .time-icon {
    color: inherit;
}

body.glass-nav > .adaptive-nav-overlay .nav-divider {
    background: rgba(255, 255, 255, 0.14);
}

/* Keep the semantic links in the real nav for clicking, keyboard focus and
   screen readers. Only their duplicate visual layer is painted above. */
.glass-nav .adaptive-nav-source .nav-link-item,
.glass-nav .adaptive-nav-source .contact-link-item,
.glass-nav .adaptive-nav-source .contact-title,
.glass-nav .adaptive-nav-source .contact-label,
.glass-nav .adaptive-nav-source .nav-link-item .icon,
.glass-nav .adaptive-nav-source .contact-title .icon,
.glass-nav .adaptive-nav-source .icon-external,
.glass-nav .adaptive-nav-source .profile-role,
.glass-nav .adaptive-nav-source .profile-meta,
.glass-nav .adaptive-nav-source .location-icon,
.glass-nav .adaptive-nav-source .time-icon {
    color: transparent;
}

.glass-nav .adaptive-nav-source .nav-divider {
    background: transparent;
}

.glass-nav .adaptive-nav-source a:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: -2px;
    box-shadow: 0 0 0 1px #111111;
}

/* ===========================================================================
   Link preview card: size to each image's own aspect ratio instead of a fixed
   crop box. Fixed width + auto height means wide banners and 16:9 covers alike
   show in full, with no cropping and no letterbox padding.
   =========================================================================== */
.link-preview-card img {
    width: 300px;
    height: auto;
    object-fit: fill;
}

@media (max-width: 640px) {
    .link-preview-card img { width: 220px; height: auto; }
}

/* ==========================================================================
   Sprint case-study template (v2)
   Back button · single clickable cover image (+ lightbox) · pill row ·
   high-contrast Outcomes box · airy content sections. Shared by every
   /sprints case study. Proven on people-efficient.html first.
   ========================================================================== */
.cs-wrap { padding: 2rem 0 6rem; }

/* Back button */
.cs-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem 0.55rem 0.9rem;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    transition: var(--transition-smooth);
}
.cs-back:hover { background: var(--bg-secondary); transform: translateX(-2px); }
.cs-back svg { width: 16px; height: 16px; }

/* Cover image: one clickable card, standard across every sprint */
.cs-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0 2.5rem;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: 0 12px 34px rgba(0,0,0,0.06);
    cursor: zoom-in;
    padding: 0;
}
.cs-cover img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1);
}
.cs-cover:hover img { transform: scale(1.03); }

/* Lead paragraph + meta strip under the title */
.cs-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 0 1.75rem;
}
.cs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    margin: 0 0 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.cs-meta .meta-item { font-size: 0.9rem; color: var(--text-secondary); }
.cs-meta .meta-item strong { color: var(--text-primary); font-weight: 600; margin-right: 0.4rem; }

/* Approach tags: one horizontal row between cover and content */
.cs-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 3.5rem;
}
.cs-pill {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}
.cs-pill--sm {
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    background: var(--bg-secondary);
}

/* Facts card: every project detail grouped in one place under the lead */
.cs-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem 2.5rem;
    margin: 0 0 3.5rem;
    padding: 1.9rem 2.1rem;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.03);
}
.cs-fact { display: flex; flex-direction: column; gap: 0.35rem; }
.cs-fact--wide {
    grid-column: 1 / -1;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(0,0,0,0.07);
}
.cs-fact-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.cs-fact-value {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.cs-fact-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.cs-body { display: block; }

.cs-title {
    font-family: var(--font-custom);
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1;
    margin: 0 0 0.75rem;
    color: var(--text-primary);
}
.cs-subtitle {
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 2.5rem;
}

/* Black Outcomes box */
.cs-outcomes {
    background: #141414;
    border-radius: 24px;
    padding: 2.5rem;
    margin: 0 0 3.5rem;
}
.cs-outcomes h2 {
    font-family: var(--font-custom);
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1;
    color: #FFFFFF;
    margin: 0 0 1.5rem;
}
.cs-outcomes ul { list-style: none; margin: 0; padding: 0; }
.cs-outcomes li {
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 1.02rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.82);
}
.cs-outcomes li:first-child { border-top: none; padding-top: 0; }
.cs-outcomes li:last-child { padding-bottom: 0; }
.cs-outcomes strong { color: #FFFFFF; font-weight: 600; }

/* Content sections (airy, no per-section card) */
.cs-section { margin: 0 0 3rem; }
.cs-section h2 {
    font-family: var(--font-custom);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1;
    margin: 0 0 1rem;
    color: var(--text-primary);
}
.cs-section h3 {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.75rem 0 0.5rem;
    color: var(--text-primary);
}
.cs-section p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
}
.cs-section p:last-child { margin-bottom: 0; }
.cs-section ul:not(.cs-list) {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0 0 1.25rem;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Divider list — editorial rows instead of bullet dots */
ul.cs-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
ul.cs-list li {
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
ul.cs-list li:last-child { border-bottom: 1px solid var(--border-color); }
ul.cs-list strong { color: var(--text-primary); font-weight: 600; }

/* Numbered list — for ordered principles/checklists */
ul.cs-numbered {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    counter-reset: csn;
}
ul.cs-numbered li {
    position: relative;
    padding: 0.85rem 0 0.85rem 2.8rem;
    border-top: 1px solid var(--border-color);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
ul.cs-numbered li:last-child { border-bottom: 1px solid var(--border-color); }
ul.cs-numbered li::before {
    counter-increment: csn;
    content: counter(csn);
    position: absolute;
    left: 0;
    top: 0.8rem;
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}
ul.cs-numbered strong { color: var(--text-primary); font-weight: 600; }

/* Inline figures + captions (mid-content screenshots, clickable) */
.cs-figure { margin: 2.5rem 0 0.5rem; }
.cs-shot {
    width: 100%;
    display: block;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    cursor: zoom-in;
}
.cs-figcap { font-size: 0.9rem; color: var(--text-secondary); margin: 0.7rem 0 0; }

/* Scoreboard — big numbers for benchmarks/results */
.cs-scoreboard {
    display: flex;
    gap: 1.5rem;
    margin: 1.75rem 0 0.5rem;
    flex-wrap: wrap;
}
.cs-score {
    flex: 1;
    min-width: 120px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
}
.cs-score .num { font-family: var(--font-custom); font-weight: 600; font-size: 2.6rem; line-height: 1; color: var(--text-primary); }
.cs-score .lbl { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); margin-top: 0.5rem; }
.cs-score.win .num { color: var(--accent-hover); }

/* Lightbox: click the cover (or any .cs-shot) to open it large */
.cs-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 4vmin;
    background: rgba(12,12,12,0.88);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    cursor: zoom-out;
}
.cs-lightbox.open { opacity: 1; visibility: visible; }
.cs-lightbox img {
    max-width: 100%; max-height: 90vh;
    border-radius: 14px;
    box-shadow: 0 30px 90px rgba(0,0,0,0.55);
    transform: scale(0.97); transition: transform 0.25s ease;
}
.cs-lightbox.open img { transform: scale(1); }
.cs-lightbox-close {
    position: fixed; top: 1.5rem; right: 1.75rem;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #FFFFFF; border: none; cursor: pointer;
    transition: background 0.2s ease;
}
.cs-lightbox-close:hover { background: rgba(255,255,255,0.24); }

@media (max-width: 900px) {
    .cs-pills-row { margin-bottom: 2.5rem; }
    .cs-title { font-size: 2.2rem; }
    .cs-scoreboard { gap: 1rem; }
    .cs-facts { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.6rem 1.5rem; }
}

/* ============================================
   Writing / Essays (index + essay pages)
   ============================================ */

.wr-wrap {
    max-width: 900px;
    padding-bottom: 6rem;
}

/* Index list — editorial divider rows */
.wr-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wr-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--border-color);
    text-decoration: none;
    transition: var(--transition-smooth);
}
.wr-list li:last-child .wr-row {
    border-bottom: 1px solid var(--border-color);
}
.wr-row-title {
    font-family: var(--font-custom);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    transition: var(--transition-smooth);
}
.wr-row:hover .wr-row-title {
    color: var(--accent-hover);
}
.wr-row-meta {
    display: flex;
    gap: 1.25rem;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Essay page */
.wr-essay {
    max-width: 680px;
}
.wr-date {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 2.5rem 0 1rem;
}
.wr-essay-title {
    font-family: var(--font-custom);
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 2.5rem;
}
.wr-body p {
    font-family: var(--font-custom);
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--text-primary);
    margin: 0 0 1.5rem;
}
.wr-body p:last-child {
    margin-bottom: 0;
}
.wr-body strong { font-weight: 600; }
.wr-body em { font-style: italic; }
.wr-body blockquote {
    margin: 2rem 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--accent);
}
.wr-body blockquote p {
    font-style: italic;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .wr-essay-title { font-size: 2.2rem; }
    .wr-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}
/* Footer content block (.fmk) — Astralis-style columns + massive wordmark,
   inverted to the machine's dark palette. Shares the beat grid's 720px
   column so everything lines up with the home prose above. */
.fmk {
    max-width: 720px;
    margin-top: 56px;
    color: #F5F1EA;
}

.fmk-cols {
    display: grid;
    grid-template-columns: 1.15fr 0.65fr 1.2fr;
    gap: 40px;
}

.fmk-head {
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #F5F1EA;
    margin-bottom: 14px;
}

.fmk-col p {
    font-size: 0.8rem;
    line-height: 1.55;
    color: #8a8a92;
    margin-bottom: 10px;
    padding: 0; /* cancel the global .footer p side-padding */
}

.fmk-socials {
    display: flex;
    gap: 14px;
    margin-top: 16px;
}

.fmk-socials a {
    color: #8a8a92;
    display: inline-flex;
}

.fmk-socials a:hover {
    color: var(--accent);
}

.fmk-nav ul {
    list-style: none;
}

.fmk-nav li {
    margin-bottom: 9px;
}

.fmk-nav a {
    font-size: 0.8rem;
    color: #8a8a92;
}

.fmk-nav a:hover {
    color: #F5F1EA;
}

.fmk-form input {
    width: 100%;
    background: #F5F1EA;
    border: 1px solid #F5F1EA;
    border-radius: 10px;
    padding: 13px 14px;
    font-family: var(--font-main);
    font-size: 0.8rem;
    color: #1E1E1E;
    outline: none;
    transition: var(--transition-smooth);
}

.fmk-form input::placeholder {
    color: #5A5A5A;
}

.fmk-form input:focus {
    border-color: var(--accent);
}

.fmk-form input:disabled {
    opacity: 0.5;
}

.fmk-form-status {
    font-size: 0.75rem;
    margin-top: 10px;
    color: #8a8a92;
}

.fmk-form-status.is-success { color: #A8DCC4; }
.fmk-form-status.is-error { color: #E56B25; }

.fmk-note {
    margin-top: 14px;
}

/* Massive wordmark — the Astralis move, in the machine's off-white with a
   pink full stop echoing the beat grid's $ accent. Sized to fill the 720px
   column edge-to-edge. */
.fmk-wordmark {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: clamp(56px, 12vw, 168px);
    line-height: 0.95;
    letter-spacing: -0.045em;
    color: #F5F1EA;
    margin-top: 56px;
    white-space: nowrap;
    user-select: none;
}

.fmk-wordmark .fmk-dot {
    color: var(--accent);
}

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

    .fmk-join {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .fmk-cols {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .fmk-wordmark {
        font-size: clamp(48px, 15vw, 96px);
        margin-top: 40px;
    }
}