/* ==========================================================================
   muchane.net  —  HTML/CSS only, no JavaScript.
   Colors from uchu (https://uchu.style). Typeface: Berkeley Mono (US Graphics).
   ========================================================================== */

@font-face {
    font-family: "Berkeley Mono";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("assets/fonts/BerkeleyMono-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Berkeley Mono";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("assets/fonts/BerkeleyMono-Bold.woff2") format("woff2");
}
@font-face {
    font-family: "Berkeley Mono";
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url("assets/fonts/BerkeleyMono-Italic.woff2") format("woff2");
}
:root {
    --yin: oklch(0.1438 0.007 256.88);
    --paper: oklch(0.985 0.006 90);
    --gray-1: oklch(0.9557 0.003 286.35);
    --gray-3: oklch(0.8828 0.003 286.34);
    --gray-5: oklch(0.8073 0.002 247.84);
    --yin-7: oklch(0.4387 0.005 271.3);

    --blue: oklch(0.4348 0.17 260.2);
    --orange: oklch(0.5828 0.128 52.2);
    --green: oklch(0.5883 0.158 145.05);
    --purple: oklch(0.3946 0.164 298.29);
    --red: oklch(0.458 0.177 17.7);
    --accent: var(--blue);

    --ink: var(--yin);
    --faint: var(--yin-7);

    --mono:
        "Berkeley Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas,
        monospace;
    --serif: "Times New Roman", Times, Georgia, serif;

    --measure: 42rem;
    --desk: oklch(
        0.905 0.009 250
    ); /* the engineering surface behind the plate */
}

body.t-home {
    --accent: var(--blue);
}
body.t-about {
    --accent: var(--orange);
}
body.t-proj {
    --accent: var(--green);
}
body.t-blog {
    --accent: var(--purple);
}
body.t-takes {
    --accent: var(--red);
}

@view-transition {
    navigation: auto;
}
* {
    box-sizing: border-box;
}

html,
body {
    background: var(--paper);
}
body {
    margin: 0;
    font-family: var(--mono);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
}
::selection {
    background: var(--accent);
    color: var(--paper);
}

/* ==========================================================================
   THE LEAF + FRAMING MODES  (A/B: fr-float vs fr-edge vs fr-flush)
   ========================================================================== */
.sheet {
    background: var(--paper);
    position: relative;
}
.leaf {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2.25rem clamp(1.1rem, 5vw, 2.5rem);
}

/* faint engineering pad ruling, applied to the paper itself (integrated) */
body.fr-edge .sheet,
body.fr-flush .sheet {
    background-image:
        linear-gradient(oklch(0 0 0 / 0.03) 1px, transparent 1px),
        linear-gradient(90deg, oklch(0 0 0 / 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* (A) FLOAT — a card resting on a graph-paper desk (the old look, for reference) */
body.fr-float {
    background: oklch(0.93 0.004 250);
}
body.fr-float .sheet {
    max-width: 46rem;
    margin: 2.5rem auto;
    border: 1px solid var(--ink);
    outline: 3px double var(--ink);
    outline-offset: 3px;
}

/* (B) EDGE — the journal page fills the window; border hugs the viewport */
body.fr-edge .sheet {
    margin: 1rem;
    border: 1px solid var(--ink);
    min-height: calc(100vh - 2rem);
}

/* (C) FLUSH — no box at all; the window IS the page; only typographic rules */
body.fr-flush .sheet {
    margin: 0;
    min-height: 100vh;
}

/* (D) PLATE — the card fills most of the page; the engineering grid is a
   different-colored surface that shows only at the edges, behind the plate */
body.fr-plate {
    min-height: 100vh; /* grid fills the full viewport */
    /* spacing is PADDING (not plate margin) so the grid reaches the very top/bottom
     instead of the plate's margin collapsing and exposing a bare strip */
    padding: 1.75rem 0;
    background-color: var(--desk);
    background-image:
        linear-gradient(
            color-mix(in oklch, var(--accent) 16%, transparent) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            color-mix(in oklch, var(--accent) 16%, transparent) 1px,
            transparent 1px
        );
    background-size: 22px 22px;
}
body.fr-plate .sheet {
    width: min(
        62rem,
        calc(100% - 3rem)
    ); /* between float (narrow) and edge (full) */
    margin: 0 auto; /* sizes to content; grid shows around + below */
    background: var(--paper); /* clean — no grid inside */
    border: 1px solid var(--ink);
    outline: 3px double var(--ink); /* fancier edge, like float */
    outline-offset: 3px;
    box-shadow: 0 3px 18px oklch(0 0 0 / 0.13);
}
body.fr-plate .sheet.wide {
    width: min(74rem, calc(100% - 3rem));
}

/* the running head + colophon span the leaf */
.runhead,
.colophon {
    max-width: var(--measure);
    margin: 0 auto;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem clamp(1.1rem, 5vw, 2.5rem);
}
.runhead {
    border-bottom: 1px solid var(--ink);
}
.colophon {
    border-top: 1px solid var(--ink);
}
.runhead a,
.colophon a {
    color: inherit;
    text-decoration: none;
}
.runhead a:hover,
.colophon a:hover {
    color: var(--accent);
}
.runhead .mid {
    color: var(--ink);
}

/* ── site menu: a ☰ disclosure in the running head that opens the mini site-map ── */
.rh-left {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.navmenu {
    position: relative;
    display: inline-flex;
}
.navmenu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.1rem;
}
.navmenu > summary::-webkit-details-marker {
    display: none;
}
.ham {
    display: block;
    width: 15px;
    height: 2px;
    background: currentColor;
    position: relative;
    color: var(--faint);
}
.navmenu > summary:hover .ham,
.navmenu[open] .ham {
    color: var(--accent);
}
.ham::before,
.ham::after {
    content: "";
    position: absolute;
    left: 0;
    width: 15px;
    height: 2px;
    background: currentColor;
}
.ham::before {
    top: -5px;
}
.ham::after {
    top: 5px;
}
.navmenu .minimap {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 30;
    border: 1px solid var(--ink);
    background: var(--paper);
    box-shadow: 0 4px 14px oklch(0 0 0 / 0.18);
    padding: 0.55rem 0.75rem;
    /* reset the running head's uppercase + letter-spacing so the ASCII stays aligned */
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink);
    font-size: 0.72rem;
    line-height: 1.25;
    white-space: pre;
}
.minimap .mm-cap {
    display: block;
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 0.4rem;
    white-space: normal;
}
.minimap pre {
    margin: 0;
    white-space: pre;
    line-height: 1.25;
    letter-spacing: normal;
}
.minimap a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}
.minimap a:hover {
    background: var(--accent);
    color: var(--paper);
}
.minimap .mm-home a {
    color: var(--faint);
    font-weight: 400;
}
.minimap .mm-home a:hover {
    background: var(--accent);
    color: var(--paper);
}
.minimap .mm-here {
    color: var(--accent);
    font-weight: 700;
}
/* in framed modes the rule should reach the frame edges, not the measure */
body.fr-edge .runhead,
body.fr-flush .runhead,
body.fr-plate .runhead,
body.fr-edge .colophon,
body.fr-flush .colophon,
body.fr-plate .colophon {
    max-width: none;
}

.pageno {
    text-align: center;
    font-size: 0.78rem;
    color: var(--faint);
    padding: 0.5rem 0 1.25rem;
}
body.fr-edge .pageno,
body.fr-flush .pageno,
body.fr-plate .pageno {
    padding-bottom: 0.5rem;
}

/* ==========================================================================
   TYPE
   ========================================================================== */
h1,
h2,
h3 {
    font-weight: 400;
    line-height: 1.15;
}

.title {
    text-align: center;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -0.01em;
    margin: 0.4rem 0 0.2rem;
}
.byline {
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 1.5rem;
}

h2.sec {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--gray-5);
    padding-bottom: 0.25rem;
    margin: 2rem 0 0.8rem;
}
h2.sec .no {
    color: var(--accent);
    margin-right: 0.5rem;
}

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

.label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}

/* reading prose — serif by default; body.prose-mono flips it for the A/B */
.prose p {
    margin: 0;
    font-family: var(--mono);
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
}
.prose p + p {
    margin-top: 1rem;
}

.proseblog p {
    margin: 0;
    font-family: "Geist", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
}
.proseblog p + p {
    margin-top: 1rem;
}
/* ==========================================================================
   FIGURES
   ========================================================================== */
.fig {
    margin: 1.5rem 0;
}
.figcap {
    text-align: center;
    font-size: 0.78rem;
    color: var(--ink);
    margin-top: 0.55rem;
}
.figcap b {
    font-weight: 700;
}

/* center the whole block, but keep its lines left-aligned so the
   trunk/bus stay locked to the boxes regardless of line length */
.diagram {
    line-height: 1.2;
    text-align: left;
    white-space: pre;
    font-size: clamp(0.58rem, 2vw, 0.88rem);
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}

/* site-map: central node WAY bigger, leaves a little bigger.
   two centered blocks — each centered, so the node center and the trunk align. */
.sitemap {
    margin: 0;
}
.sm-node,
.sm-tree {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
    white-space: pre;
    line-height: 1.05;
}
.sm-node {
    font-size: clamp(1rem, 3.1vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.sm-tree {
    font-size: clamp(0.68rem, 2.1vw, 0.95rem);
}
.sm-tree a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}
.sm-tree a:hover {
    background: var(--accent);
    color: var(--paper);
}
.diagram a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}
.diagram a:hover {
    background: var(--accent);
    color: var(--paper);
}

/* ==========================================================================
   CONTROLS
   ========================================================================== */
.brk {
    text-decoration: none;
}
.brk::before {
    content: "[ ";
    color: var(--faint);
}
.brk::after {
    content: " ]";
    color: var(--faint);
}

/* simple bordered button (no kitsch) */
.btn {
    display: inline-block;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    background: var(--paper);
}
.btn:hover {
    background: var(--accent);
    color: var(--paper);
    border-color: var(--accent);
}

/* Bell-style table */
.btable {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 0.25rem;
}
.btable caption {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    padding-bottom: 0.5rem;
    text-align: left;
}
.btable caption b {
    font-weight: 700;
}
.btable th,
.btable td {
    padding: 0.35rem 0.8rem;
    text-align: left;
    vertical-align: top;
}
.btable thead th {
    border-bottom: 1px solid var(--ink);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}
.btable td:first-child,
.btable th:first-child {
    color: var(--faint);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.findhim {
    display: inline-flex;
    border: 1px solid var(--ink);
}
.findhim a {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-right: 1px solid var(--ink);
    color: var(--ink);
}
.findhim a:last-child {
    border-right: none;
}
.findhim a:hover {
    background: var(--accent);
    color: var(--paper);
}
.findhim svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* dividers */
hr.rule {
    border: none;
    border-top: 1px solid var(--ink);
    margin: 1.75rem 0;
}
.taper {
    margin: 2rem 0;
}
.taper div {
    background: var(--accent);
}
.taper .b1 {
    height: 5px;
    opacity: 0.85;
}
.taper .b2 {
    height: 3px;
    opacity: 0.6;
    margin-top: 2px;
}
.taper .b3 {
    height: 1.5px;
    opacity: 0.38;
    margin-top: 2px;
}
.taper .b4 {
    height: 1px;
    opacity: 0.2;
    margin-top: 2px;
}

/* inline expanders (checkbox hack): clicking the dotted phrase reveals more
   text INLINE, growing the paragraph. Reads naturally collapsed or expanded. */
.x-cb {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.x-link {
    color: var(--accent);
    border-bottom: 1px dotted var(--accent);
    cursor: pointer;
}
.x-link:hover {
    background: color-mix(in oklch, var(--accent) 14%, transparent);
}
.x-exp {
    display: none;
}
#cb-research:checked ~ .exp-research,
#cb-every:checked ~ .exp-every {
    display: inline;
}
#cb-research:checked ~ .dot-research {
    display: none;
}
/* a small "(–)" affordance to signal it can be collapsed again */
#cb-research:checked ~ .x-link[for="cb-research"],
#cb-every:checked ~ .x-link[for="cb-every"] {
    background: color-mix(in oklch, var(--accent) 10%, transparent);
}

/* ==========================================================================
   BLOG / ARTICLE
   ========================================================================== */
.prose h2.sec {
    margin-top: 2.25rem;
}
.prose code {
    font-family: var(--mono);
    font-size: 0.9em;
    background: color-mix(in oklch, var(--accent) 13%, transparent);
    padding: 0.05em 0.32em;
    border-radius: 2px;
}
.prose em {
    font-style: italic;
}

.proseblog h2.sec {
    margin-top: 2.25rem;
}
.proseblog code {
    font-family: var(--mono);
    font-size: 0.9em;
    background: color-mix(in oklch, var(--accent) 13%, transparent);
    padding: 0.05em 0.32em;
    border-radius: 2px;
}
.proseblog em {
    font-style: italic;
}
/* footnote reference markers */
sup.cite {
    font-size: 0.7em;
    line-height: 0;
}
sup.cite a {
    text-decoration: none;
    color: var(--accent);
    padding: 0 0.08em;
}
sup.cite a:hover {
    text-decoration: underline;
}

/* article figure holding the inlined SVG */
.svg-fig {
    border: 1px solid var(--ink);
    background: #fff;
    padding: 0.9rem;
    max-width: 38rem;
    margin: 0 auto;
}
.svg-fig svg {
    display: block;
    width: 100%;
    height: auto;
}

/* notes & references list */
ol.footnotes {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink);
    padding-left: 1.5rem;
    margin: 0.5rem 0 0;
}
ol.footnotes li {
    margin-bottom: 0.6rem;
    padding-left: 0.2rem;
}
ol.footnotes li::marker {
    color: var(--faint);
}
ol.footnotes a {
    overflow-wrap: anywhere;
}
ol.footnotes code {
    font-size: 0.88em;
}
.fn-back {
    text-decoration: none;
    margin-left: 0.35rem;
    color: var(--faint);
}
.fn-back:hover {
    color: var(--accent);
}

/* blog index post list */
.post-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}
.post-list li {
    border-top: 1px solid var(--gray-5);
    padding: 0.9rem 0;
}
.post-list li:last-child {
    border-bottom: 1px solid var(--gray-5);
}
.post-date {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 0.2rem;
}
.post-list a {
    font-size: 1.1rem;
}
.post-desc {
    display: block;
    font-size: 0.9rem;
    color: var(--faint);
    margin-top: 0.25rem;
}

/* ==========================================================================
   RESPONSIVE — narrow screens / phones
   ========================================================================== */

/* the vertical site-map is for phones only; hidden by default */
.sm-v {
    display: none;
}

@media (max-width: 40rem) {
    /* let the plate take more of the viewport so the margins don't crowd */
    body.fr-plate {
        padding: 0.9rem 0;
    }
    body.fr-plate .sheet,
    body.fr-plate .sheet.wide {
        width: calc(100% - 1rem);
        outline-offset: 2px;
    }
    .leaf {
        padding: 1.6rem clamp(0.9rem, 4vw, 1.4rem);
    }
    .runhead,
    .colophon {
        padding: 0.5rem clamp(0.9rem, 4vw, 1.4rem);
        font-size: 0.66rem;
        gap: 0.6rem;
    }

    /* swap the wide horizontal nav diagram for the tall vertical one */
    .sm-node,
    .sm-h {
        display: none;
    }
    .sm-v {
        display: block;
        font-size: clamp(0.72rem, 3.6vw, 1.05rem);
        line-height: 1.4;
    }

    /* stack the homepage "executive summary" table — otherwise the icon strip
       and the paper list overflow the narrow plate side by side */
    body.t-home .btable,
    body.t-home .btable tbody,
    body.t-home .btable tr,
    body.t-home .btable td {
        display: block;
        width: 100%;
    }
    body.t-home .btable td {
        padding-left: 0;
        padding-right: 0;
    }
    body.t-home .btable td:first-child {
        border: none;
        padding: 0 0 0.3rem;
        color: var(--faint);
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }
    body.t-home .btable tr + tr td:first-child {
        padding-top: 1rem;
    }
}