h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    margin: 0 0 15px 0;
    text-transform: lowercase;
    letter-spacing: -0.04em;
    line-height: 1.1;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.brand-regular {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.newsletter-wrapper p {
    font-family: var(--font-code);
    font-size: 1rem;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.book-description .slogan {
    text-align: left;
    margin-bottom: 0;
}

.exec-prompt { font-weight: bold; font-size: 120%; }

.llm-footer-terminal {
    font-family: monospace;
    font-size: 0.75rem;
    color: #666;
    background-color: #f4f5f7;
    padding: 15px;
    border-top: 1px solid #ccc;
    margin-top: 40px;
}

.deployments-section > .terminal-header-inline { margin-top: 17px; }

.status-notice {
    margin-bottom: 10px;
    font-family: var(--font-code);
    font-size: 0.95rem;
    color: var(--brand-orange);
    background: rgba(var(--brand-orange-rgb), 0.05);
    padding: 15px;
    border-left: 3px solid var(--brand-orange);
}

.deployment-desc a { color: inherit; text-decoration: underline; }

.bom-banner--accent {
    margin-top: 30px;
    margin-bottom: 60px;
    border-color: rgba(var(--brand-orange-rgb), 0.3);
}
.bom-banner--accent .bom-badge {
    color: var(--brand-orange);
    background: rgba(var(--brand-orange-rgb), 0.1);
}
.bom-banner--accent .bom-btn { background: var(--brand-orange); }

.love-protocol-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 10px 0 15px 0;
}
.love-protocol-header h3 {
    margin: 0;
    font-size: 1.4rem;
    color: var(--text-main);
    font-weight: 700;
    text-transform: uppercase;
}
.love-protocol-logo { height: 35px; width: auto; }

.deployments-section {
    margin: 60px 0 40px 0;
    padding-top: 40px;
    border-top: 1px dashed var(--border-color);
}

.deployment-card {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 40px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.deployment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border-color: rgba(var(--brand-blue-rgb), 0.4);
}

.deployment-image-wrapper {
    flex: 0 0 180px;
    background: rgba(var(--dark-teal-rgb), 0.03);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
}

.deployment-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.deployment-content {
    flex: 1;
}

.deployment-status {
    display: inline-block;
    font-family: var(--font-code);
    font-size: 0.75rem;
    color: var(--brand-orange);
    background: rgba(var(--brand-orange-rgb), 0.08);
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.deployment-title {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    color: var(--dark-teal);
    font-weight: 700;
}

.deployment-desc {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.stack-section { margin-top: 100px; text-align: left; }

.stack-header-main {
    font-family: var(--font-code);
    font-size: 0.85rem;
    color: var(--mid-sepia);
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

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

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

.dir-title {
    font-family: var(--font-code);
    font-size: 0.8rem;
    color: var(--brand-orange);
    margin-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(var(--brand-orange-rgb), 0.1);
}

.stack-item { margin-bottom: 10px; border-left: 2px solid #eee; padding-left: 10px; }

.stack-item .label { font-size: 0.7rem; color: var(--text-dim); display: block; }

.stack-item .name { font-size: 0.95rem; font-weight: 600; }

@media (max-width: 768px) {
    .deployment-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        padding: 20px;
    }
    .deployment-image-wrapper {
        flex: 0 0 auto;
        width: 100%;
        max-width: 250px;
    }
}

.bom-banner {
    background: rgba(var(--brand-blue-rgb), 0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 80px;
    transition: border-color 0.3s ease;
}

.bom-banner:hover { border-color: var(--brand-blue); }

.bom-banner-content { flex: 1; min-width: 250px; text-align: left; }

.bom-badge {
    display: inline-block;
    font-family: var(--font-code);
    font-size: 0.75rem;
    color: var(--brand-blue);
    background: rgba(var(--brand-blue-rgb), 0.1);
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.bom-btn {
    background: var(--brand-blue);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-code);
    padding: 14px 28px;
    border-radius: 4px;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
}

.bom-btn:hover { background: var(--dark-teal); transform: translateY(-2px); }

.version-link {
    color: #fff;
    text-decoration: underline dotted #fff;
    text-underline-offset: 3px;
    font-weight: 700;
}
.version-link:hover,
.version-link:focus,
.version-link:active {
    color: #fffdff;
    outline: 2px solid rgba(255,255,255,0.75);
    outline-offset: 3px;
}
.version-link:visited {
    color: #e1f0ff;
}
.version-label {
    font-weight: 400;
    font-size: 0.85rem;
}

.log-header {
    align-items: center;
    gap: 12px;
}

.log-header-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Single-line status link ("Status: vX.Y.Z"): the header never stacks —
   .log-header-main's min-width:0 + ellipsis absorbs any squeeze. */
.log-header-status {
    min-width: 0;
    white-space: nowrap;
    font-family: var(--font-code);
    font-weight: 700;
    font-size: 0.95rem;
}

@media (max-width: 480px) {
    .log-container {
        /* Fixed height like desktop: the log scrolls inside its frame and
           must never grow line-by-line while the boot sequence types. */
        height: 35vh;
        max-height: 35vh;
    }
}

.hero-section.no-lowercase h1 {
    text-transform: none;
}

.section-heading {
    font-family: var(--font-code);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--dark-teal);
    letter-spacing: -0.02em;
    margin: 0 0 18px 0;
    line-height: 1.15;
    text-align: left;
}

.section-panel {
    background: rgba(var(--brand-blue-rgb), 0.04);
    border: 1px solid rgba(var(--brand-blue-rgb), 0.12);
    border-radius: 18px;
    padding: 28px 30px;
    margin-bottom: 40px;
}

.section-panel--roadmap {
    background: rgba(var(--brand-blue-rgb), 0.06);
}

.section-panel--history {
    background: rgba(var(--brand-orange-rgb), 0.04);
}

.section-panel p {
    max-width: 900px;
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 18px;
}

.roadmap-phase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 26px;
}

.roadmap-phase {
    background: #fff;
    border: 1px solid rgba(var(--brand-blue-rgb), 0.12);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 250px;
}

.roadmap-phase:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(0,0,0,0.06);
}

.roadmap-phase--current {
    border-color: var(--brand-blue);
    box-shadow: 0 24px 50px rgba(53,134,145,0.14);
}

.roadmap-phase-label {
    font-family: var(--font-code);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    color: var(--brand-orange);
    margin-bottom: 12px;
}

.roadmap-phase-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-teal);
    margin-bottom: 14px;
}

.roadmap-phase p {
    margin: 0;
    color: var(--text-dim);
}

.roadmap-details {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--brand-blue-rgb), 0.12);
}

.roadmap-details .list-protocol {
    margin: 0;
}

.manual-update-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    background: rgba(var(--brand-orange-rgb), 0.08);
    border: 1px solid rgba(var(--brand-orange-rgb), 0.2);
    border-radius: 18px;
    padding: 28px 32px;
    margin: 32px 0;
}

.manual-update-copy {
    flex: 1 1 360px;
    min-width: 260px;
}

.manual-update-chip {
    display: inline-block;
    font-family: var(--font-code);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    color: var(--brand-orange);
    background: rgba(var(--brand-orange-rgb), 0.14);
    border-radius: 999px;
    padding: 8px 14px;
    margin-bottom: 16px;
}

.manual-update-copy p {
    color: var(--text-dim);
    line-height: 1.8;
    margin-bottom: 16px;
}

.manual-update-cta {
    flex: 0 0 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
}

.cta-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--brand-blue);
    color: #fff;
    text-decoration: none;
    padding: 18px 24px;
    border-radius: 14px;
    font-family: var(--font-code);
    font-weight: 700;
    box-shadow: 0 20px 45px rgba(53,134,145,0.18);
    transition: transform 0.2s ease, background 0.2s ease;
    text-align: center;
}

.cta-button:hover,
.cta-button:focus {
    background: var(--dark-teal);
    transform: translateY(-2px);
}

.cta-button small {
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255,255,255,0.9);
}

@media (max-width: 720px) {
    .manual-update-panel {
        flex-direction: column;
    }
    .manual-update-cta {
        width: 100%;
    }
    .cta-button {
        width: 100%;
    }
}

/* Changelog history: one compact row per shipped build, each expanding in place
   to its full log. Rows stack vertically so the list keeps working as finished
   phases accumulate (a horizontal card grid stopped fitting past four). */
.history-log {
    list-style: none;
    margin: 24px 0 8px 0;
    padding: 0;
    border-top: 1px solid rgba(var(--brand-blue-rgb), 0.12);
}

.history-log > li {
    border-bottom: 1px solid rgba(var(--brand-blue-rgb), 0.12);
}

.history-row-head {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 4px 20px;
    align-items: baseline;
    padding: 16px 4px;
    cursor: pointer;
    transition: background 0.2s ease;
    list-style: none; /* removes the default <summary> triangle */
}

.history-row-head::-webkit-details-marker {
    display: none;
}

.history-row--static .history-row-head {
    cursor: default;
}

.history-row-head:hover {
    background: rgba(var(--brand-blue-rgb), 0.04);
}

.history-row[open] > .history-row-head {
    background: rgba(var(--brand-blue-rgb), 0.06);
}

.history-row-head:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: -2px;
}

.history-row-version {
    font-family: var(--font-code);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-orange);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.history-row-main {
    display: block;
    min-width: 0;
}

.history-row-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-teal);
    margin-bottom: 4px;
}

.history-row-period {
    font-family: var(--font-code);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-dim);
    white-space: nowrap;
}

.history-row-copy {
    display: block;
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Explicit label, not just an arrow — the affordance has to be readable.
   Both labels are real text; CSS swaps which one shows on open. */
.history-row-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: center;
    white-space: nowrap;
    font-family: var(--font-code);
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--brand-blue);
    border: 1px solid rgba(var(--brand-blue-rgb), 0.35);
    border-radius: 999px;
    padding: 7px 12px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.history-row-head:hover .history-row-toggle {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

.history-row-toggle-hide {
    display: none;
}

.history-row[open] .history-row-toggle-show {
    display: none;
}

.history-row[open] .history-row-toggle-hide {
    display: inline;
}

.history-row-chevron {
    font-size: 0.8rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.history-row[open] .history-row-chevron {
    transform: rotate(180deg);
}

/* Expanded log: indented to line up with the title column on desktop. */
.history-row-body {
    padding: 4px 4px 24px 170px;
    color: var(--text-dim);
}

.history-row-body p {
    margin: 0 0 12px 0;
    line-height: 1.75;
}

.history-row-body .list-protocol {
    margin: 0;
}

/* Status notice + the phase it describes, framed as one unit. */
.current-phase {
    border: 1px solid rgba(var(--brand-blue-rgb), 0.2);
    border-radius: 16px;
    padding: 8px 22px 22px 22px;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 0 20px 42px rgba(0,0,0,0.05);
}

.current-phase .status-summary {
    margin: 14px 0 18px 0;
}

.current-phase-body {
    padding-top: 4px;
    border-top: 1px solid rgba(var(--brand-blue-rgb), 0.12);
}

.current-phase-label {
    font-family: var(--font-code);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    color: var(--brand-orange);
    margin: 16px 0 8px 0;
}

.current-phase-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-teal);
    margin: 0 0 12px 0;
}

.current-phase-body p {
    color: var(--text-dim);
    line-height: 1.8;
    margin: 0 0 12px 0;
}

.current-phase-note {
    font-size: 0.9rem;
    padding-top: 12px;
    border-top: 1px dashed rgba(var(--brand-blue-rgb), 0.15);
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 24px 0 20px 0;
}

.status-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.06);
    text-align: left;
}

.status-card-label {
    font-family: var(--font-code);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
    color: var(--mid-sepia);
    margin-bottom: 10px;
}

.status-card-value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--brand-blue);
    margin-bottom: 6px;
}

.status-card-meta {
    font-size: 0.95rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.status-summary {
    background: rgba(var(--brand-blue-rgb), 0.08);
    border-left: 4px solid var(--brand-blue);
    padding: 18px 22px;
    border-radius: 8px;
    margin-bottom: 30px;
}

@media (max-width: 900px) {
    .status-grid,
    .roadmap-phase-grid {
        grid-template-columns: 1fr;
    }
    /* Version label moves above its title instead of squeezing a 150px rail;
       the chevron keeps its own column, spanning both rows. */
    .history-row-head {
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
    }
    .history-row-version,
    .history-row-main {
        grid-column: 1;
    }
    .history-row-toggle {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
    .history-row-body {
        padding-left: 4px;
    }
}

.incident-report {
    background: #111a2a;
    color: #f7fbff;
    border-radius: 18px;
    padding: 28px;
    margin: 30px 0;
    border: 1px solid rgba(255,255,255,0.1);
}

.incident-report-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.incident-report-title {
    font-family: var(--font-code);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #70d1ff;
    font-size: 0.85rem;
}

.incident-report-severity {
    font-weight: 900;
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    color: #ffcf82;
}

.incident-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-family: var(--font-code);
    color: rgba(255,255,255,0.75);
    margin-bottom: 20px;
}

.incident-report-meta span {
    display: inline-flex;
    gap: 6px;
}

.incident-report-body p {
    margin-bottom: 16px;
    color: rgba(255,255,255,0.88);
    line-height: 1.7;
}

/* ==========================================================
   Simulator teaser terminal (homepage only — .terminal-section
   exists solely in index.php, so unscoped rules are safe even
   though this stylesheet is shared with version-control.php)
   ========================================================== */
.terminal-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch; /* equal-height cards: the preview's aspect ratio sets the row */
    margin-bottom: 60px;
}

/* base.css gives .log-wrapper `margin: 0 auto 60px` — the section
   now owns the bottom gap */
.terminal-section .log-wrapper {
    margin: 0 auto;
}

/* Grid items default to min-width:auto, so the 1145px-wide preview image
   sets the track's MINIMUM size and pushes the section past the viewport
   on phones (horizontal scroll). min-width:0 lets the columns shrink so
   the image's width:100% actually applies. */
.sim-teaser-col,
.terminal-col {
    min-width: 0;
}

/* The preview sits inside a .log-wrapper card (which provides border,
   radius, shadow and corner clipping) under its own header strip. */
.sim-teaser-link {
    display: block;
}

.sim-teaser-link img {
    transition: opacity 0.2s;
}

.sim-teaser-link:hover img {
    opacity: 0.85;
}

.sim-teaser-img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--bg-light);
}

.terminal-cta-wrapper {
    grid-column: 1 / -1; /* centered under both cards */
    text-align: center;
    margin-top: 1.5rem;
}

/* .bom-btn is white-space:nowrap — the long CTA label must be
   allowed to wrap inside the terminal column */
.terminal-cta-wrapper .bom-btn {
    display: inline-block;
    white-space: normal;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Mobile failsafe: LAUNCH DREAM MACHINE OS SIMULATOR is a long label —
   ease padding/size on narrow phones so it never overflows the viewport */
@media (max-width: 480px) {
    .terminal-cta-wrapper .bom-btn {
        display: block;
        padding: 12px 16px;
        font-size: 0.85rem;
        letter-spacing: 0;
        overflow-wrap: break-word;
    }
}

@media (max-width: 900px) {
    .terminal-section {
        grid-template-columns: 1fr;
    }
    .sim-teaser-col {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }
}

/* Desktop equal heights: lock the log body to the preview image's aspect
   ratio. Both columns are equal width and both cards carry the same header
   strip, so the two cards compute to identical heights — and stay identical
   while the boot sequence types, because the log's height is geometric, not
   content-driven (overflowing lines scroll inside as before). Mobile keeps
   the fixed 240px / 35vh log heights from base.css; older browsers without
   aspect-ratio fall back to the fixed 240px. */
@media (min-width: 901px) {
    .terminal-col .log-container {
        height: auto;
        max-height: none;
        /* border-box so the ratio governs the OUTER box: the log body then
           computes to exactly the image's rendered height — with default
           content-box sizing the 20px padding left it ~9px taller */
        box-sizing: border-box;
        aspect-ratio: 1150 / 899; /* = simulator-preview2.jpg */
    }
}

/* ==========================================================
   Sticky book cover split layout. Scoped to .book-section--split
   because version-control.php loads this file and has its own
   bare .book-section. Desktop-only: below 901px base.css's
   stacked flex column remains untouched and sticky is inert.
   ========================================================== */
@media (min-width: 901px) {
    .book-section--split {
        display: grid;
        grid-template-columns: minmax(320px, 1fr) 2fr;
        gap: 4rem;
        align-items: start;
        max-width: none; /* lifts base.css 800px cap; .container still caps at 1000px */
        margin: 60px auto;
    }

    .book-section--split .book-cover-wrapper {
        position: sticky;
        top: 24px; /* no fixed chrome on this site — small offset, not a nav clearance */
        margin-bottom: 0; /* grid gap replaces base.css's 50px */
    }
}

/* ==========================================================
   Protocol list -> module card grid. CSS-only: the <ul> ships
   from dm_block('index.book_copy'), so the live DB may override
   the copy — no markup dependency beyond ul/li/strong. Scoped
   to .book-copy so version-control.php's .list-protocol keeps
   its plain "> " treatment.
   ========================================================== */
.book-copy .list-protocol {
    display: grid;
    /* min(280px, 100%) keeps the hard card minimum from forcing
       horizontal overflow on sub-320px viewports */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.book-copy .list-protocol li {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.book-copy .list-protocol li::before {
    content: none; /* drop base.css's "> " bullet marker in card mode */
}

.book-copy .list-protocol li strong {
    display: block;
    color: var(--dark-teal);
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

/* ==========================================================
   Book heading demoted h1 -> h2 ("The Operations Manual").
   As an h2 it no longer inherits the h1 brand typography, so
   the class carries the sizing itself; lowercase render keeps
   the wordmark idiom while markup stays Title Case.
   ========================================================== */
h2.book-hero-heading {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 900;
    margin: 0 0 5px 0;
    text-transform: lowercase;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-align: left;
}

/* ==========================================================
   Mobile horizontal-overflow fix. This stylesheet's h1 override
   (nowrap, min 1.8rem) loads after base.css and therefore also
   defeats base's 600px shrink rule — on phones the wordmark was
   wider than the viewport. Scale with the viewport and allow the
   trailing "| SYSTEMS" flex item to wrap; "dreammachine" itself
   always fits one line at 6.5vw on >=320px screens.
   ========================================================== */
@media (max-width: 600px) {
    h1 {
        font-size: clamp(1.1rem, 6.5vw, 1.8rem);
        white-space: normal;
        flex-wrap: wrap;
    }
}