/* Phone nav: the link row folds behind a three-line button (nav.js adds the button
   and .js-nav, so without JS the links simply wrap as before). Shared by every page
   with a .site-nav; selectors carry the extra `nav` so they win over each page's own
   inline nav rules regardless of load order. */
.sn-toggle {
    display: none;
}

nav.site-nav .sn-brand {
    white-space: nowrap;
}

/* 1000px: leave room for the full name and all six navigation links */
@media (max-width: 1000px) {
    nav.site-nav.js-nav .sn-inner {
        flex-wrap: nowrap;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    nav.site-nav .sn-toggle {
        display: block;
        position: relative;
        width: 40px;
        height: 40px;
        margin-right: -11px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--palette-fg-f2f2f2);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    nav.site-nav .sn-toggle:focus-visible {
        outline: 1px solid var(--palette-line-f2f2f2);
        outline-offset: -4px;
    }

    nav.site-nav .sn-toggle i {
        position: absolute;
        left: 11px;
        width: 18px;
        height: 1.5px;
        background: currentColor;
        transition: transform .22s ease, opacity .15s ease;
    }

    nav.site-nav .sn-toggle i:nth-child(1) { top: 13px; }
    nav.site-nav .sn-toggle i:nth-child(2) { top: 19px; }
    nav.site-nav .sn-toggle i:nth-child(3) { top: 25px; }

    nav.site-nav.open .sn-toggle i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    nav.site-nav.open .sn-toggle i:nth-child(2) { opacity: 0; }
    nav.site-nav.open .sn-toggle i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    nav.site-nav.js-nav .sn-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        background: var(--palette-surface-0c0c0c);
        border-bottom: 1px solid var(--palette-line-2a2a2a);
    }

    nav.site-nav.js-nav.open .sn-links {
        display: flex;
    }

    nav.site-nav.js-nav .sn-links a {
        padding: 15px 20px;
        border-top: 1px solid var(--palette-line-1f1f1f);
        font-size: calc((12px) * var(--text-scale, 1));
        letter-spacing: .14em;
    }
}

@media (prefers-reduced-motion: reduce) {
    nav.site-nav .sn-toggle i {
        transition: none;
    }
}

/* Seven links, including Letter, fit the desktop navigation. */
@media (min-width: 1001px) {
    nav.site-nav .sn-links { gap: 18px; }
}
/* Reading controls sit outside the existing nav rows, preserving their geometry. */
nav.site-nav > .sn-reading,
.reading-nav .sn-reading {
    position: absolute;
    top: 0;
    right: 8px;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 71;
}
.sn-reading button {
    font-family: 'Carbon', 'IBM Plex Mono', Menlo, monospace;
    font-size: calc(10px * var(--text-scale, 1));
    line-height: 1.4;
    padding: 6px;
    min-height: 32px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
}
.sn-reading button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--bg);
}
.sn-reading button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.reading-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
}
@media (min-width: 1001px) and (max-width: 1350px) {
    nav.site-nav > .sn-reading { top: 100%; min-height: 36px; }
}
@media (max-width: 1000px) {
    nav.site-nav.js-nav > .sn-reading { display: none; }
    nav.site-nav.js-nav.open > .sn-reading {
        display: flex;
        top: 100%;
        right: 12px;
        min-height: 44px;
    }
    /* Avoid the menu links: controls occupy the right side of the first row. */
    nav.site-nav.js-nav.open .sn-links a:first-child { padding-right: 160px; }
}

/* Grouped menu (nav.js renders it): About · Writing ▾ · Learn ▾ · Work with me.
   Desktop groups open on hover or click; each item carries a one-line note so a
   first-time visitor knows what is behind it. */
nav.site-nav .sn-links { align-items: center; }
nav.site-nav .sn-group { position: relative; }
nav.site-nav .sn-trigger {
    font: inherit;
    font-size: calc((12px) * var(--text-scale, 1));
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color .2s;
}
nav.site-nav .sn-trigger::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s steps(2);
}
nav.site-nav .sn-trigger:hover,
nav.site-nav .sn-trigger.on,
nav.site-nav .sn-group.open .sn-trigger { color: var(--ink); }
nav.site-nav .sn-group.open .sn-trigger::after { transform: translateY(0) rotate(225deg); }
nav.site-nav .sn-trigger:focus-visible,
nav.site-nav .sn-links a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

nav.site-nav .sn-menu {
    display: none;
    position: absolute;
    top: calc(100% + 16px);
    left: -19px;
    min-width: 330px;
    background: var(--bg);
    border: 1px solid var(--line);
    z-index: 72;
}
/* Invisible bridge so the pointer can travel from the trigger into the panel. */
nav.site-nav .sn-group::before {
    content: '';
    position: absolute;
    left: -19px;
    right: -19px;
    top: 100%;
    height: 18px;
}
/* The right-most group opens leftward so the panel never leaves the page. */
nav.site-nav .sn-group:last-of-type .sn-menu { left: auto; right: -19px; }
nav.site-nav .sn-group.open .sn-menu { display: block; }
@media (hover: hover) and (min-width: 1001px) {
    nav.site-nav .sn-group:hover .sn-menu { display: block; }
    nav.site-nav .sn-group:hover .sn-trigger { color: var(--ink); }
}

nav.site-nav .sn-links a.sn-item {
    display: grid;
    gap: 4px;
    padding: 15px 18px;
    border-top: 1px solid var(--line);
    text-transform: none;
    letter-spacing: 0;
    color: var(--dim);
}
nav.site-nav .sn-links a.sn-item:first-child { border-top: 0; }
nav.site-nav .sn-item-name {
    font-size: calc((12px) * var(--text-scale, 1));
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
}
nav.site-nav .sn-item-note {
    font-size: calc((13px) * var(--text-scale, 1));
    line-height: 1.5;
}
nav.site-nav .sn-item[aria-current="page"] .sn-item-name::before { content: '■ '; }
nav.site-nav .sn-links a.sn-item:hover { background: var(--ink); color: var(--bg); }
nav.site-nav .sn-links a.sn-item:hover .sn-item-name { color: var(--bg); }

/* The one primary action: outlined, inverts on hover; filled on its own page. */
nav.site-nav .sn-links a.sn-cta {
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 7px 14px;
}
nav.site-nav .sn-links a.sn-cta:hover,
nav.site-nav .sn-links a.sn-cta.on { background: var(--ink); color: var(--bg); }

@media (max-width: 1000px) {
    /* Phone: groups lie open, their names become small section labels. */
    nav.site-nav.js-nav .sn-links { align-items: stretch; }
    nav.site-nav.js-nav .sn-group { border-top: 1px solid var(--line); }
    nav.site-nav.js-nav .sn-group::before { display: none; }
    nav.site-nav.js-nav .sn-trigger {
        display: block;
        width: 100%;
        text-align: left;
        padding: 16px 20px 4px;
        font-size: calc((10px) * var(--text-scale, 1));
        color: var(--dim);
        pointer-events: none;
    }
    nav.site-nav.js-nav .sn-trigger::after { display: none; }
    nav.site-nav.js-nav .sn-menu {
        display: block;
        position: static;
        min-width: 0;
        border: 0;
        background: none;
    }
    nav.site-nav.js-nav .sn-links a.sn-item {
        padding: 10px 20px;
        border-top: 0;
        font-size: inherit;
    }
    nav.site-nav.js-nav .sn-links a.sn-item:last-child { padding-bottom: 16px; }
    nav.site-nav.js-nav .sn-links a.sn-cta {
        margin: 4px 20px 20px;
        padding: 14px 20px;
        text-align: center;
        border: 1px solid var(--ink);
        background: var(--ink);
        color: var(--bg);
    }
}

/* Phone menu (approved mockup m4): a full-screen, opaque sheet under the bar.
   Bold uppercase titles with quiet notes, WRITING / LEARN labels, About on its
   own line, Work with me, then one square LIGHT | DARK | A+ control.
   Desktop (min-width: 1001px) is untouched; the control is phone-only. */
nav.site-nav .sn-seg { display: none; }
@media (max-width: 1000px) {
    html.sn-locked, html.sn-locked body { overflow: hidden; }
    nav.site-nav.js-nav.open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        background: var(--bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 0;
    }
    /* The bar keeps brand left and close right across the full width. */
    nav.site-nav.js-nav.open .sn-inner {
        align-self: stretch;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
    nav.site-nav.js-nav.open .sn-links {
        position: fixed;
        top: var(--sn-top, 56px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        border-top: 1px solid var(--ink);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 0 22px max(22px, env(safe-area-inset-bottom));
        background: var(--bg);
        border-bottom: 0;
        overscroll-behavior: contain;
    }
    /* Old phone placement of the small reading buttons gives way to .sn-seg. */
    nav.site-nav.js-nav.open > .sn-reading { display: none; }
    nav.site-nav.js-nav.open .sn-links a:first-child { padding-right: 0; }

    nav.site-nav.js-nav.open .sn-group { order: 1; border-top: 0; }
    nav.site-nav.js-nav.open .sn-group + .sn-group { order: 2; }
    nav.site-nav.js-nav.open .sn-trigger {
        padding: 18px 0 4px;
        font-size: calc((11px) * var(--text-scale, 1));
        letter-spacing: .18em;
        color: var(--dim);
    }
    nav.site-nav.js-nav.open .sn-links a.sn-item,
    nav.site-nav.js-nav.open .sn-links a.sn-about {
        display: block;
        padding: 12px 0;
        border-top: 0;
        border-bottom: 1px solid var(--line);
        background: none;
        color: var(--dim);
        text-transform: none;
        letter-spacing: 0;
    }
    nav.site-nav.js-nav.open .sn-links a.sn-item:last-child { padding-bottom: 12px; }
    nav.site-nav.js-nav.open .sn-item-name,
    nav.site-nav.js-nav.open .sn-links a.sn-about {
        font-family: 'IBM Plex Mono', Menlo, monospace;
        font-weight: 500;
        font-size: calc((17px) * var(--text-scale, 1));
        line-height: 1.35;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink);
    }
    nav.site-nav.js-nav.open .sn-item-name { display: block; }
    nav.site-nav.js-nav.open .sn-item-note {
        display: block;
        margin-top: 4px;
        font-family: 'IBM Plex Mono', Menlo, monospace;
        font-weight: 400;
        font-size: calc((12.5px) * var(--text-scale, 1));
        line-height: 1.45;
        letter-spacing: 0;
        color: var(--dim);
    }
    /* About stands apart from Learn: extra space above, one divider below. */
    nav.site-nav.js-nav.open .sn-links a.sn-about {
        order: 3;
        margin-top: 22px;
    }
    nav.site-nav.js-nav.open .sn-links a.sn-item:hover,
    nav.site-nav.js-nav.open .sn-links a.sn-about:hover { background: none; }
    nav.site-nav.js-nav.open .sn-links a.sn-item:hover .sn-item-name { color: var(--ink); }

    nav.site-nav.js-nav.open .sn-links a.sn-cta {
        order: 4;
        margin: auto 0 14px;
        padding: 18px;
        border: 1px solid var(--ink);
        border-radius: 0;
        background: var(--ink);
        color: var(--bg);
        text-align: center;
        font-family: 'IBM Plex Mono', Menlo, monospace;
        font-weight: 500;
        font-size: calc((14px) * var(--text-scale, 1));
        letter-spacing: .16em;
        text-transform: uppercase;
    }
    /* Keep breathing room above the button when the list fills the screen. */
    nav.site-nav.js-nav.open .sn-links a.sn-about { margin-bottom: 28px; }

    nav.site-nav.js-nav.open .sn-seg {
        order: 5;
        display: flex;
        flex: 0 0 auto;
        border: 1px solid var(--ink);
        border-radius: 0;
    }
    nav.site-nav .sn-seg button {
        flex: 1 1 0;
        min-height: 46px;
        padding: 12px 0;
        margin: 0;
        border: 0;
        border-right: 1px solid var(--ink);
        border-radius: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: 'IBM Plex Mono', Menlo, monospace;
        font-weight: 400;
        font-size: calc((13px) * var(--text-scale, 1));
        letter-spacing: .12em;
        text-transform: uppercase;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    nav.site-nav .sn-seg button:last-child { flex: .6 1 0; border-right: 0; }
    nav.site-nav .sn-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
    nav.site-nav .sn-seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; }
    nav.site-nav.js-nav.open .sn-seg button[aria-pressed="true"]:focus-visible { outline-color: var(--bg); }
}