/* Local Font Declarations */
@font-face {
    font-family: 'PPEditorialNew';
    src: url('fonts/PPEditorialNew-Ultralight.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PPEditorialNew';
    src: url('fonts/PPEditorialNew-UltralightItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PPEditorialNew';
    src: url('fonts/PPEditorialNew-Ultrabold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PPEditorialNew';
    src: url('fonts/PPEditorialNew-UltraboldItalic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}


:root {
    --unit-line-height: 1.5em;
    --primary-blue-color: #0F172A;
    --bg-color: #EBE9E7;
    --text-color: black;
    --text-secondary: rgba(15, 23, 42, 0.65);
    --accent-color: #FB923C;
    --secondary-accent-color: #CEAB6C;
    --denim-dark-brown: #653418;
    --denim-dark-yellow: #8A6438;
    --denim-red: #8A1B35;
    --neutral-color: rgb(226, 232, 240);
    --mono-font: 'JetBrains Mono', monospace;
    --sans-font: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --serif-font: 'PPEditorialNew', serif;
}

* {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--serif-font);
    font-size: 16px;
    line-height: var(--unit-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 60rem;
    margin: 0 auto;
    position: relative;
}

/* ── Header ── */
body > header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: calc(5*var(--unit-line-height));
    line-height: var(--unit-line-height);
    padding-top: var(--unit-line-height);
}

.logo {
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
}

.ascii-art {
    font-family: var(--mono-font);
    color: var(--primary-blue-color);
    line-height: 1.2;
    white-space: pre;
    opacity: 1;
    font-size: 16px;
    font-weight: 800;
    font-style: italic;
    margin: 0;
    display: block;
    position: relative;
    border-bottom: 1px solid transparent;
    width: 5.8rem;
    padding-bottom: 2px;
    transition: border-color 0.2s ease;
}

.ascii-art:hover {
    border-bottom-color: var(--primary-blue-color);
    opacity: 1;
}

nav {
    display: flex;
    gap: 1.5rem;
}

nav div {
    display: inline;
}

nav a {
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--mono-font);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
}

nav a:hover {
    color: var(--denim-red);
    opacity: 1;
}

.italic {
    font-style: italic;
}

/* ── Main Content ── */
main {
    min-height: calc(100vh - 19*var(--unit-line-height));
}

.header-logo {
    font-style: normal;
    color: var(--primary-blue-color);
    font-family: var(--mono-font);
    font-weight: 500;
    font-size: 0.85em;
    letter-spacing: 0.02em;
}

h1 {
    font-family: var(--serif-font);
    font-size: 1.65rem;
    font-weight: 100;
    margin: 0 0 5rem;
    max-width: 20em;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text-color);
}

@media (min-width: 800px) {
    h1 {
        margin-left: calc(50% + 0.3*var(--unit-line-height));
    }
}

section {
    margin-top: calc(3*var(--unit-line-height));
    margin-bottom: calc(3*var(--unit-line-height));
}

.section-header {
    color: var(--text-color);
    font-family: var(--mono-font);
    font-weight: 400;
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

/* ── Typography ── */
p {
    margin: 0 0 1rem;
}

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

a:hover {
    opacity: 0.7;
    cursor: pointer;
}

@media (min-width: 1200px) {
    html {
        font-size: 18px;
    }
}

@media (max-width: 600px) {
    body {
        margin: 0 var(--unit-line-height);
    }

    body > header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--unit-line-height);
        margin-bottom: calc(3*var(--unit-line-height));
    }

    nav {
        flex-wrap: wrap;
    }

    h1 {
        margin-left: 0;
        font-size: 1.75rem;
    }

    .textured-background-plus {
        display: none;
    }
}

.textured-background-plus {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.04;
    background-color: #ebe9e7;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230f172a' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: -2;
    pointer-events: none;
}

/* ── Typography Enhancements ── */
.lead {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--primary-blue-color);
    max-width: 32em;
}

/* ── Writing Section: Two-Column Layout ── */

.writing-section-layout {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: calc(2 * var(--unit-line-height));
    align-items: start;
}

.writing-section-label {
    position: sticky;
    top: calc(2 * var(--unit-line-height));
    padding-top: 0.85rem;
}

.writing-label-text {
    display: block;
    font-family: var(--serif-font);
    font-weight: 100;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: var(--primary-blue-color);
    line-height: 1.2;
}

/* ── Essay List ── */

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

.essay-series-group {
    margin-bottom: 2rem;
}

.essay-series-group:last-child {
    margin-bottom: 0;
}

.essay-series-label {
    font-family: var(--mono-font);
    font-size: 0.75rem;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.03em;
    color: var(--denim-red);
    padding: 0 0 0.6rem;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.18) 0px,
        rgba(15, 23, 42, 0.18) 8px,
        transparent 8px,
        transparent 12px
    );
    background-size: 100% 1px;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* ── supercritical feature card (homepage link-out to the series' own home) ── */

.supercritical-feature {
    display: block;
    background-color: #0D141A;
    padding: 1.5rem 1.75rem;
    margin-bottom: 3rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.supercritical-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(10, 22, 32, 0.35);
}

.sc-feature-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sc-feature-logo {
    height: 18px;
    width: auto;
    display: block;
}

.sc-feature-arrow {
    font-family: var(--mono-font);
    font-size: 1.05rem;
    color: #7DD3E8;
    display: inline-block;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

.supercritical-feature:hover .sc-feature-arrow {
    transform: rotate(-45deg) translateX(3px);
}

.sc-feature-desc {
    font-family: var(--serif-font);
    font-style: italic;
    font-size: 0.95rem;
    color: rgba(214, 226, 232, 0.75);
    margin: 0.5rem 0 1.1rem;
}

.sc-feature-items {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-family: var(--mono-font);
    font-size: 0.78rem;
}

.sc-feature-item {
    color: #D6E2E8;
}

.sc-feature-item--upcoming {
    color: rgba(214, 226, 232, 0.45);
}

.sc-num {
    color: #7DD3E8;
    margin-right: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.sc-feature-item--upcoming .sc-num {
    color: rgba(125, 211, 232, 0.45);
}

.essay-list {
    margin: 0;
    padding: 0;
}

.essay-list-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.85rem 0;
    text-decoration: none;
    color: var(--text-color);
    transition: color 0.2s ease, transform 0.2s ease;
    border-bottom: none;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.18) 0px,
        rgba(15, 23, 42, 0.18) 8px,
        transparent 8px,
        transparent 12px
    );
    background-size: 100% 1px;
    background-position: bottom;
    background-repeat: no-repeat;
    animation: fadeInUp 0.4s ease both;
}

.essay-list-item:nth-child(1) { animation-delay: 0.05s; }
.essay-list-item:nth-child(2) { animation-delay: 0.12s; }
.essay-list-item:nth-child(3) { animation-delay: 0.19s; }

.essay-list-item:first-child {
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(15, 23, 42, 0.18) 0px,
            rgba(15, 23, 42, 0.18) 8px,
            transparent 8px,
            transparent 12px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(15, 23, 42, 0.18) 0px,
            rgba(15, 23, 42, 0.18) 8px,
            transparent 8px,
            transparent 12px
        );
    background-size: 100% 1px, 100% 1px;
    background-position: bottom, top;
    background-repeat: no-repeat, no-repeat;
}

.essay-list-item:hover {
    opacity: 1;
    transform: translateX(4px);
}

.essay-list-item:hover .essay-list-title {
    color: var(--denim-red);
}

.essay-list-item:hover .essay-list-date {
    opacity: 0.7;
}

.essay-list-title {
    font-family: var(--serif-font);
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-blue-color);
    letter-spacing: -0.015em;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.essay-list-detail {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    font-family: var(--mono-font);
    font-size: 0.75rem;
    white-space: nowrap;
    margin-left: 2rem;
    flex-shrink: 0;
}

.essay-list-tag {
    color: var(--denim-red);
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.03em;
}

.essay-list-date {
    color: var(--text-color);
    opacity: 0.45;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    transition: opacity 0.2s ease;
}

.essay-list-item--upcoming {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.essay-list-item--upcoming .essay-list-title {
    color: var(--text-color);
    font-weight: 100;
    font-style: italic;
}

.essay-list-status {
    font-family: var(--mono-font);
    font-size: 0.65rem;
    font-style: italic;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-color);
}

/* ── Page Transitions ── */
[data-barba="container"] {
    opacity: 1;
}

.homepage-section {
    background-color: transparent;
    padding: 1.5rem 0;
}

/* ── Contact Section ── */
#contact {
    margin-top: calc(5*var(--unit-line-height));
    padding-top: 2rem;
    border-top: none;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.18) 0px,
        rgba(15, 23, 42, 0.18) 8px,
        transparent 8px,
        transparent 12px
    );
    background-size: 100% 1px;
    background-position: top;
    background-repeat: no-repeat;
}

#contact a {
    color: var(--denim-red);
    transition: all 0.2s ease;
}

#contact a:hover {
    opacity: 0.7;
}

/* ── Email Newsletter ── */

.contact-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.email-card {
    display: block;
}

.newsletter-cta {
    display: block;
    text-align: left;
    padding: 0.5rem 0;
}

.newsletter-inputs {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: 0 auto;
    padding-bottom: 0.5rem;
}

#bd-email {
    flex-grow: 1;
    padding: 0.5rem;
    font-family: var(--mono-font);
    font-size: 0.8rem;
    border: 1px solid rgba(15, 23, 42, 0.2);
    border-radius: 4px;
    background: transparent;
    transition: border-color 0.2s ease;
}

#bd-email:focus {
    border-color: var(--primary-blue-color);
    outline: none;
}

#bd-submit {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    border: none;
    background-color: var(--primary-blue-color);
    color: white;
    font-family: var(--mono-font);
    font-size: 0.8rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

#bd-submit:hover {
    opacity: 0.8;
}

/* ── Footer ── */
.site-footer {
    text-align: center;
    padding: 3rem 0;
    opacity: 0.25;
    font-family: var(--mono-font);
    font-size: 0.9rem;
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .homepage-section {
        padding: 0;
    }
    .contact-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .writing-section-layout {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .writing-section-label {
        position: static;
        padding-top: 0;
    }
    .writing-label-text {
        font-size: 1.25rem;
    }
    .essay-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        padding: 0.75rem 0;
    }
    .essay-list-detail {
        margin-left: 0;
    }
}

/* ── supercritical landing page (/supercritical/) — dark brand ground ── */

body:has(.sc-page),
body:has(.essay-main--supercritical) {
    background-color: #0D141A;
    color: #D6E2E8;
}

body:has(.sc-page) .textured-background-plus,
body:has(.essay-main--supercritical) .textured-background-plus {
    display: none;
}

/* the tree band sits directly under the header on the landing page */

body:has(.sc-page) > header {
    margin-bottom: calc(3*var(--unit-line-height));
}

@media (min-width: 900px) {
    body:has(.sc-page) > header {
        margin-bottom: 0;
    }
}

body:has(.sc-page) .ascii-art,
body:has(.essay-main--supercritical) .ascii-art {
    color: #D6E2E8;
}

body:has(.sc-page) .ascii-art:hover,
body:has(.essay-main--supercritical) .ascii-art:hover {
    border-bottom-color: #7DD3E8;
}

body:has(.sc-page) nav a,
body:has(.essay-main--supercritical) nav a {
    color: rgba(214, 226, 232, 0.75);
}

body:has(.sc-page) nav a:hover,
body:has(.essay-main--supercritical) nav a:hover {
    color: #7DD3E8;
}

/* contact / subscribe section on the dark pages */
body:has(.sc-page) .section-header,
body:has(.essay-main--supercritical) .section-header {
    color: #D6E2E8;
}

body:has(.sc-page) .lead,
body:has(.essay-main--supercritical) .lead {
    color: rgba(214, 226, 232, 0.85);
}

body:has(.sc-page) #contact a,
body:has(.essay-main--supercritical) #contact a {
    color: #7DD3E8;
}

body:has(.sc-page) #bd-email,
body:has(.essay-main--supercritical) #bd-email {
    border-color: rgba(214, 226, 232, 0.3);
    color: #D6E2E8;
}

body:has(.sc-page) #bd-email:focus,
body:has(.essay-main--supercritical) #bd-email:focus {
    border-color: #7DD3E8;
}

body:has(.sc-page) #bd-submit,
body:has(.essay-main--supercritical) #bd-submit {
    background-color: #7DD3E8;
    color: #0D141A;
}

.sc-page {
    padding-top: 0;
    position: relative; /* anchors the tree rail */
}

/* live branching-cascade canvas: a full-bleed background layer behind the
   page content. Hidden until tree.js initializes and tags the page with
   .sc-tree-live (any width); the static banner is the no-JS fallback. */
.sc-tree-rail {
    display: none;
    position: absolute;
    top: 0;
    /* bleed into the viewport's right margin so the trunk can descend
       beside the text column rather than through it */
    right: calc(50% - 50vw + 18px);
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    /* soften the tree's entry from under the header */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, black 2rem);
    mask-image: linear-gradient(180deg, transparent 0, black 2rem);
}

.sc-tree-rail canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.sc-page.sc-tree-live .sc-tree-rail {
    display: block;
}

.sc-page.sc-tree-live .sc-banner {
    display: none;
}

/* the tree band: open dark space at the top of the page, where the banner
   art used to sit — the canopy cascades down into it. Scales with the
   viewport; the geometry reads this padding at runtime and sizes itself. */
.sc-page.sc-tree-live {
    padding-top: clamp(17rem, 55vw, 33rem);
}

/* keep the blurb's ragged right edge and the essay dates clear of the
   scroll filament at the right page edge */
.sc-page.sc-tree-live .sc-hero .sc-about {
    padding-right: 2rem;
}

.sc-page.sc-tree-live .sc-essay-item {
    padding-right: 2rem;
}

/* even, explicit rhythm — the global `section` margins are too loose here */
.sc-page section {
    margin-top: 0;
    margin-bottom: 0;
}

.sc-banner {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 20rem;
    margin: 0 0 3rem;
    /* fade the edges into the page ground (bg color matches the art's corners) */
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%),
        linear-gradient(180deg, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%),
        linear-gradient(180deg, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-composite: intersect;
}

/* hero: wordmark + tagline left, blurb right — mirrors the homepage's
   asymmetric writing layout */
.sc-hero {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 700px) {
    .sc-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.sc-page .sc-wordmark {
    font-family: var(--mono-font);
    font-weight: 500;
    font-size: 2.2rem;
    letter-spacing: 0.02em;
    color: #7DD3E8;
    text-shadow: 0 0 24px rgba(125, 211, 232, 0.45), 0 0 64px rgba(125, 211, 232, 0.2);
    margin: 0 0 1.25rem;
    max-width: none;
    line-height: 1.2;
}

.sc-tagline {
    font-family: var(--serif-font);
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #E6EEF2;
    margin: 0;
}

.sc-about {
    font-family: var(--sans-font);
    font-size: 0.97rem;
    line-height: 1.7;
    color: rgba(214, 226, 232, 0.72);
    margin: 0;
}

.sc-divider {
    height: 1px;
    margin: 3rem 0;
    background-color: rgba(214, 226, 232, 0.12);
}

.sc-section-label {
    font-family: var(--mono-font);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(125, 211, 232, 0.55);
    margin: 0 0 1rem;
}

.sc-essay-item {
    display: flex;
    align-items: baseline;
    padding: 0.85rem 0;
    text-decoration: none;
    border-bottom: 1px solid rgba(214, 226, 232, 0.12);
    transition: transform 0.2s ease;
}

.sc-essay-item:hover {
    transform: translateX(4px);
}

.sc-essay-item .sc-num {
    font-family: var(--mono-font);
    font-size: 0.78rem;
}

.sc-essay-title {
    font-family: var(--sans-font);
    font-weight: 500;
    font-size: 1rem;
    color: #E6EEF2;
    transition: color 0.2s ease;
}

.sc-essay-item:hover .sc-essay-title {
    color: #7DD3E8;
}

.sc-essay-date {
    margin-left: auto;
    padding-left: 2rem;
    font-family: var(--mono-font);
    font-size: 0.75rem;
    color: rgba(214, 226, 232, 0.45);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sc-page .sc-upcoming {
    margin-top: 3rem;
}

.sc-upcoming-item {
    font-family: var(--sans-font);
    font-size: 0.92rem;
    color: rgba(214, 226, 232, 0.5);
    padding: 0.35rem 0;
}

.sc-upcoming-item .sc-num {
    font-family: var(--mono-font);
    font-size: 0.75rem;
    color: rgba(125, 211, 232, 0.45);
}

.sc-substack {
    margin-top: 3rem;
    font-family: var(--mono-font);
    font-size: 0.78rem;
    color: rgba(214, 226, 232, 0.5);
}

.sc-substack a {
    color: #7DD3E8;
    text-decoration: none;
}

.sc-substack a:hover {
    opacity: 0.8;
}

/* ── supercritical header branding (landing + essay pages) ── */

/* Both logo variants live in every header (the header sits outside the
   Barba container and never gets swapped); :has() below picks the right
   one as the container changes. */
.sc-logo-group {
    display: none;
    align-items: center;
    gap: 0.75rem;
}

body:has(.sc-page) .sc-logo-group,
body:has(.essay-main--supercritical) .sc-logo-group {
    display: flex;
}

body:has(.sc-page) .logo,
body:has(.essay-main--supercritical) .logo {
    display: none;
}

.sc-logo {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.sc-logo img {
    height: 18px;
    width: auto;
    display: block;
}

.sc-logo-by {
    text-decoration: none;
    font-family: var(--mono-font);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--text-color);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.sc-logo-by:hover {
    opacity: 0.85;
}

body:has(.sc-page) .sc-logo-by,
body:has(.essay-main--supercritical) .sc-logo-by {
    color: #D6E2E8;
}