/* macXcapture - red-accent variant of macXserver's clean-light look */

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --accent-primary: #dc2626;
    --accent-hover: #b91c1c;
    --accent-x: #dc2626;          /* the X in macXserver, matches site accent */
    --accent-claude: #16a34a;     /* green sidebar for Claude responses in deep dives */
    --border-color: #dee2e6;
    --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'acumin-pro', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
    --font-sans: var(--font-body);
    --max-width: 1200px;
    --content-width: 800px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

@media (min-width: 769px) {
    html { scroll-padding-top: 13.5rem; }
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container.narrow {
    max-width: var(--content-width);
}

/* Header */
.site-header {
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

@media (min-width: 769px) {
    .site-header .container {
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
    }
    .site-nav {
        border-top: 1px solid var(--border-color);
        padding-top: 0.4rem;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .site-nav-row {
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: -0.75rem;
    }
}

.site-branding {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.site-logo {
    font-family: var(--font-heading);
    text-decoration: none;
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1.1;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.site-logo .logo-text {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.site-logo .logo-icon {
    width: 2.4rem;
    height: 2.4rem;
    vertical-align: middle;
    flex-shrink: 0;
}

.site-logo .logo-x {
    color: var(--accent-x);
    font-weight: 500;
}

.site-logo:hover { color: var(--accent-primary); }
.site-logo:hover .logo-x { color: var(--accent-primary); }

.site-tagline {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-secondary);
    margin: 0;
}

.site-nav {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.site-nav-row {
    display: flex;
    gap: 0.25rem;
}

.site-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.site-nav a:hover,
.site-nav a.active {
    color: var(--accent-primary);
    background: rgba(37, 99, 235, 0.08);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Main */
.site-main {
    min-height: calc(100vh - 200px);
    padding: 1rem 0 2rem;
}

/* Home pitch */
.home-pitch {
    max-width: none;
    margin: 1.5rem 0 2rem;
    text-align: left;
}

.home-pitch p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 0.85rem;
}

.home-pitch p strong {
    color: var(--text-primary);
}

.home-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hero image */
.hero-image {
    margin: 0 0 2.5rem 0;
    padding: 0;
}

.hero-image img,
.hero-placeholder {
    width: 100%;
    height: auto;
    display: block;
}

/* The hero screenshot already has its own macOS window chrome AND
   drop shadow rendered into the captured PNG (transparent rounded
   corners, native window shadow). We leave it completely bare — no
   border, no border-radius, no extra box-shadow — so it sits flat
   against the page without double-framing or double-shadowing.
   The placeholder still gets framed since it's a stand-in box without
   its own chrome. */
.hero-placeholder {
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.hero-placeholder {
    aspect-ratio: 16/9;
    background: var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 1rem;
}

.hero-placeholder small {
    font-size: 0.85rem;
}

.hero-image figcaption {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    text-align: center;
}

@media (max-width: 768px) {
    body.home .hero-image img,
    .hero-placeholder {
        border-radius: 8px;
    }
}

/* Stats strip */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    margin: 0 0 3rem 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.stats-strip .stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stats-strip .stat-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1;
}

.stats-strip .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .stats-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    .stats-strip .stat-value { font-size: 1.5rem; }
}

/* Home sections */
.home-section {
    margin-bottom: 4rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: normal;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.section-intro {
    color: var(--text-secondary);
    margin: 0 0 2rem;
}

.section-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.section-link:hover {
    text-decoration: underline;
}

/* Collection grid (oldsilicon-style cards) */
.collection-title {
    font-family: var(--font-heading);
    text-align: center;
    font-size: 2rem;
    font-weight: 300;
    margin: 0 0 1rem;
    color: var(--text-primary);
}

.collection-intro {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 1.75rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

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

a.collection-item {
    display: block;
    text-align: center;
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 1rem 1rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    cursor: pointer;
}

a.collection-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.collection-image-link {
    display: block;
    margin-bottom: 1rem;
}

.collection-image-link img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    aspect-ratio: 16/10;
    object-fit: cover;
    object-position: top left;
    background: var(--bg-secondary);
    display: block;
}

.card-placeholder {
    width: 100%;
    aspect-ratio: 16/10;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 1rem;
    text-align: center;
}

.collection-item-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 300;
    margin: 0 0 0.75rem;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

a.collection-item:hover .collection-item-title {
    color: var(--accent-primary);
}

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

@media (max-width: 900px) {
    .collection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 600px) {
    .collection-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .collection-title { font-size: 1.5rem; }
}

/* Ledger CTA */
.ledger-cta { text-align: center; }
.ledger-cta .section-link { font-size: 1.05rem; }

/* Page headers (interior pages) */
.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.page-header h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 300;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.page-description {
    color: var(--text-secondary);
    font-size: 1.125rem;
    margin: 0;
}

.day-meta-chip {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.75rem 0 0;
    padding: 0.4rem 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    display: inline-block;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 0.875rem;
    margin: 1.5rem 0 1rem;
}

.breadcrumb a {
    color: var(--accent-primary);
    text-decoration: none;
}

.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .separator { color: var(--text-muted); margin: 0 0.5rem; }
.breadcrumb .current { color: var(--text-muted); }

/* Prose */
.prose {
    max-width: var(--content-width);
    margin: 0 auto;
}

.prose h1, .prose h2, .prose h3, .prose h4 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 300;
}

.prose h2 {
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.prose h3 { font-size: 1.25rem; }

.prose p { margin-bottom: 1.25rem; }

.prose a {
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

.prose img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    display: block;
}

.prose figure figcaption {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    text-align: center;
}

.prose ul, .prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.prose li { margin-bottom: 0.5rem; }

.prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-left: 4px solid var(--accent-primary);
    font-style: italic;
    color: var(--text-secondary);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}

.prose th, .prose td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid var(--border-color);
}

.prose th {
    background: var(--bg-secondary);
    font-weight: 600;
}

.prose code {
    font-family: var(--font-mono);
    background: var(--bg-secondary);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.875em;
}

.prose pre {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.prose pre code {
    background: none;
    padding: 0;
    color: #ffb000;
}

/* Ledger layout (long page with side nav) */
.ledger-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    align-items: start;
}

.ledger-nav {
    position: sticky;
    top: 7rem;
    align-self: start;
}

@media (min-width: 769px) {
    .ledger-nav { top: 13.5rem; }
}

.ledger-nav h4 {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}

.ledger-nav ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.25rem;
}

.ledger-nav li { margin: 0; }

.ledger-nav a {
    display: block;
    text-align: center;
    padding: 0.35rem 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.15s ease;
}

.ledger-nav a:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.ledger-prose {
    max-width: none;
}

.ledger-prose h2 {
    scroll-margin-top: 7rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    margin-top: 3rem;
}

@media (min-width: 769px) {
    .ledger-prose h2 { scroll-margin-top: 13.5rem; }
}

.ledger-prose h2 .day-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.5rem;
}

@media (max-width: 900px) {
    .ledger-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .ledger-nav {
        position: static;
        margin-bottom: 1rem;
    }
    .ledger-nav ol {
        grid-template-columns: repeat(10, 1fr);
    }
}

/* Page footer (interior nav) */
.page-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

/* Site footer */
.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: 4rem;
}

.footer-content {
    text-align: center;
}

.site-footer p {
    margin: 0 0 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.site-footer a {
    color: var(--accent-primary);
    text-decoration: none;
}

.site-footer a:hover { text-decoration: underline; }

/* Wide prose (used on deep-dive single pages where the body should
   fill the container instead of staying in the 800px reading column). */
.prose.prose-wide {
    max-width: none;
    margin: 0;
}

/* Claude responses in conversational deep dives. Green sidebar to
   distinguish from Todd's blockquote question (which uses the site's
   blue accent via .prose blockquote). Same shape, different color. */
.prose .claude-response {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
    border-left: 4px solid var(--accent-claude);
}

.prose .claude-response > :first-child {
    margin-top: 0;
}

.prose .claude-response > :last-child {
    margin-bottom: 0;
}

/* Deep-dives list (section index) */
.rss-link {
    margin: 0.5rem 0 0;
}

.rss-link a {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.rss-link a:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.deep-dives-list {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0;
    display: grid;
    gap: 1rem;
}

.deep-dives-list li a {
    display: block;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.deep-dives-list li a:hover {
    border-color: var(--accent-primary);
    background: var(--bg-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.deep-dive-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 300;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.deep-dive-desc {
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    line-height: 1.55;
}

.deep-dive-date {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Page list (about etc.) */
.page-list-items {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    display: grid;
    gap: 1rem;
}

.page-list-items li a {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.page-list-items li a:hover {
    border-color: var(--accent-primary);
    background: var(--bg-primary);
}

.page-list-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-primary);
}

.page-list-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* Article container helpers used by single layouts */
.page-article {
    padding-top: 1rem;
}

.page-article-header h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 300;
    margin: 0 0 0.5rem;
}

.lede {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin: 0 0 2rem;
}

/* macXcapture additions: non-link cards, inline code sample, CTA link, two-line placeholder */

div.collection-item {
    display: block;
    text-align: left;
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Cards on this page show full screenshots of different aspect ratios
   (a portrait wizard, a squarish menu, a landscape replay form). Let
   the whole screenshot show inside a fixed 16:10 box with contain
   letterboxing rather than cropping anything off. */
div.collection-item .collection-image-link img {
    object-fit: contain;
    object-position: center;
    background: var(--bg-secondary);
    padding: 0.5rem;
}

div.collection-item .collection-item-title {
    font-size: 1.4rem;
    margin: 1rem 0 0.5rem;
    color: var(--text-primary);
}

div.collection-item .collection-item-desc {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

div.collection-item .collection-item-desc code {
    background: var(--bg-secondary);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85em;
}

.card-placeholder span {
    display: block;
    font-weight: 600;
}

.card-placeholder small {
    display: block;
    margin-top: 0.4rem;
    opacity: 0.75;
    font-size: 0.8rem;
}

pre.code-sample {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 1.5rem 0;
}

pre.code-sample code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* Single-page macxcapture: every section spans the full container width
   so the hero, card grid, prose blocks, and code samples all share one
   left edge and one right edge. Wider than typographic ideal for prose,
   but visual consistency wins on a single-page layout. */
.home-section .prose,
.home-section .collection-intro {
    max-width: none;
}

.home-section .prose ul {
    margin: 1rem 0 1.5rem 1.5rem;
}

.home-section .prose li {
    margin-bottom: 0.6rem;
    line-height: 1.65;
}

.home-section .prose p code,
.home-section p code {
    background: var(--bg-secondary);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85em;
}

a.cta-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--accent-x);
    text-decoration: none;
    font-size: 1.05rem;
}

a.cta-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Lightbox triggers (cards become clickable). The trigger element is a
   <button> for accessibility; strip the default button chrome and add a
   subtle hover lift so it reads as a clickable preview. */
button.lightbox-trigger {
    display: block;
    width: 100%;
    margin: 0 0 1rem 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: zoom-in;
    border-radius: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button.lightbox-trigger:hover,
button.lightbox-trigger:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    outline: 0;
}

button.lightbox-trigger:focus-visible {
    outline: 2px solid var(--accent-x);
    outline-offset: 3px;
}

button.lightbox-trigger img {
    pointer-events: none; /* clicks register on the button, not the img */
}

/* Hero variant: suppress the hover lift / shadow that the card triggers
   carry. The hero screenshot already brings its own native macOS window
   shadow rendered into the PNG; adding another would re-introduce the
   double-frame look we removed earlier. The zoom-in cursor stays as
   the click affordance. Margin overrides the card's 0 0 1rem 0 too —
   the hero figure already provides the bottom spacing. */
.hero-image button.lightbox-trigger {
    margin: 0;
}

.hero-image button.lightbox-trigger:hover,
.hero-image button.lightbox-trigger:focus-visible {
    transform: none;
    box-shadow: none;
}

.hero-image button.lightbox-trigger:focus-visible {
    outline: 2px solid var(--accent-x);
    outline-offset: 4px;
}

/* Lightbox overlay: full-viewport dark backdrop with the full-size image
   centered. Hidden by default; toggled via .is-open. */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 22, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2.5rem;
    cursor: zoom-out;
}

.lightbox-overlay.is-open {
    display: flex;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: zoom-out;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    outline: 0;
}

@media (max-width: 600px) {
    .lightbox-overlay { padding: 1rem; }
    .lightbox-close { top: 0.5rem; right: 0.5rem; }
}

/* Contact form (Formspree). Same shape as oldsilicon.com's contact form
   so all three Todd sites read as one family. Colors are picked up from
   the site's CSS vars — red on macXcapture, blue on macXserver. */
.contact-form {
    max-width: 500px;
    margin-top: 1.5rem;
}

.contact-form .form-group {
    margin-bottom: 1rem;
}

.contact-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: border-color 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.contact-form textarea {
    resize: vertical;
}

.contact-form button {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.contact-form button:hover {
    background: var(--accent-hover);
}

/* Download CTA. Big, accent-colored, leans into the macOS "primary
   action" affordance. Used inline on the home page and on /download/. */
.download-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 2rem;
    background: var(--accent-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-family: var(--font-body);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.download-button:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    color: #fff;
    text-decoration: none;
}

.download-button:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 4px;
}

.download-button .download-label {
    font-size: 1.1rem;
    line-height: 1.2;
}

.download-button .download-version {
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

.download-button--unreleased {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    box-shadow: none;
    cursor: default;
}

.download-button--unreleased:hover {
    transform: none;
    box-shadow: none;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* Wrapper section for the hero CTA so the button gets some breathing room. */
.download-cta {
    text-align: center;
    margin: 1rem 0 2.5rem;
}

.download-cta .download-secondary {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.download-cta .download-secondary a {
    color: var(--text-secondary);
}

/* Mobile nav: collapse the horizontal nav into the hamburger dropdown.
   Desktop-first: base styles above are the desktop nav with the toggle
   hidden; everything here only applies below 769px. */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        padding: 0.75rem 1.5rem 1rem;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        z-index: 100;
    }
    .site-nav.active {
        display: flex;
    }
    .site-nav-row {
        flex-direction: column;
    }
}