/* JawnLam.com — Unigrid
 * One 12-column modular grid; solid black title bands; black-and-white type and rules.
 * Color is used only as the subject code (see DESIGN.md). Flat everywhere: no texture,
 * shadow, gradient, rounded corner or drawn object (PRODUCT.md: no skeuomorphism).
 */

@font-face {
    font-family: "Archivo";
    src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("/assets/fonts/archivo-latin-wdth-italic.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: italic;
    font-display: swap;
}

:root {
    --black: #000;
    --white: #fff;
    --text-2: #3b3b3b;
    --text-3: #5c5c5c;
    --rule-light: #d6d6d6;
    --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --gutter: clamp(16px, 3vw, 40px);
    --col-gap: 24px;
    --max: 1440px;
    --band-h: 64px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-color: var(--black) var(--white);
    scroll-padding-top: calc(var(--band-h) + 16px);
}

body {
    margin: 0;
    background: var(--white);
    color: var(--black);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--black);
    color: var(--white);
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 3px solid var(--black);
    outline-offset: 2px;
}

.nav-band :focus-visible,
.title-band :focus-visible,
.foot-band :focus-visible {
    outline-color: var(--white);
}

.title-band--subject :focus-visible {
    outline-color: var(--ink);
}

.wrap {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: var(--gutter);
    top: -60px;
    z-index: 100;
    background: var(--white);
    color: var(--black);
    font-weight: 700;
    padding: 10px 14px;
}

.skip:focus {
    top: 10px;
}

/* ─── Bands ─── */

.nav-band {
    background: var(--black);
    color: var(--white);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid #333;
}

.nav-band .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--band-h);
    gap: 16px;
}

.mark {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.nav-band ul {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 34px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-band ul a {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    padding-block: 6px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s var(--ease);
}

.nav-band ul a:hover,
.nav-band ul a[aria-current="page"] {
    border-bottom-color: var(--white);
}

.nav-band .nav-call {
    background: var(--white);
    color: var(--black);
    padding: 9px 14px;
    border: 0;
}

.nav-band .nav-call:hover {
    background: #d4d4d4;
}

.title-band {
    background: var(--black);
    color: var(--white);
}

.title-band .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
    padding-block: 48px 36px;
}

.title-band h1 {
    grid-column: 1 / 9;
    margin: 0;
    font-weight: 800;
    font-size: clamp(48px, 7.5vw, 112px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.title-band p {
    grid-column: 9 / 13;
    margin: 0;
    font-size: 17px;
    color: #d4d4d4;
    font-variant-numeric: tabular-nums;
}

.title-band--home .wrap {
    padding-block: 56px 40px;
}

.title-band--home h1 {
    grid-column: 1 / 8;
    font-size: clamp(56px, 9vw, 132px);
    line-height: 0.88;
    letter-spacing: -0.045em;
}

.title-band--home p {
    grid-column: 8 / 13;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.4;
    max-width: 30ch;
}

.title-band--subject {
    background: var(--c);
    color: var(--ink);
}

.title-band--subject .wrap {
    padding-block: 48px 36px;
}

.title-band--subject h1 {
    grid-column: 1 / -1;
    max-width: 18ch;
}

.band-meta {
    grid-column: 1 / -1 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 22px 0 0 !important;
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 700;
}

.band-meta a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* ─── The subject key ─── */

.key {
    display: grid;
    grid-template-columns: repeat(var(--keys, 8), minmax(0, 1fr));
}

.key a {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    min-height: 96px;
    padding: 12px 14px;
    background: var(--c);
    color: var(--ink);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.15;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.key-count {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.key a:hover {
    background: var(--black);
    color: var(--white);
}

/* ─── Subject sections (home) ─── */

.subject {
    padding-top: 72px;
}

.subject:first-of-type {
    padding-top: 40px;
}

.subject-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    border-top: 12px solid var(--c);
    padding-top: 14px;
    margin-bottom: 24px;
}

.subject-head h2 {
    margin: 0;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.subject-head h2 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.subject-head span {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.more {
    display: inline-block;
    margin-top: 20px;
    font-weight: 700;
    border-bottom: 2px solid var(--c);
    padding-bottom: 2px;
}

.more:hover {
    background: var(--c);
    color: var(--ink);
}

/* ─── Modules ─── */

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px var(--col-gap);
}

.grid--page {
    padding-block: 40px 24px;
}

.mod {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 150px;
    padding: 12px 0 10px;
    border-top: 4px solid var(--c);
    outline: 12px solid transparent;
    outline-offset: 0;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), outline-color 0.2s var(--ease);
}

.mod--M { grid-column: span 6; }
.mod--L { grid-column: span 9; }
.mod--XL { grid-column: span 12; min-height: 220px; }

.mod:hover {
    background: var(--c);
    color: var(--ink);
    outline-color: var(--c);
}

.mod:focus-visible {
    outline: 3px solid var(--black);
    outline-offset: 4px;
}

.mod-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: auto;
    padding-top: 8px;
}

.fmt {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
}

.mod:hover .fmt,
.lib-row a:hover .fmt {
    color: inherit;
}

.mod h2,
.mod h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.mod--M :is(h2, h3) { font-size: 26px; }
.mod--L :is(h2, h3) { font-size: 34px; letter-spacing: -0.02em; }
.mod--XL :is(h2, h3) { font-size: clamp(44px, 6vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; }

.mod p {
    margin: 0;
    font-size: 15px;
    color: var(--text-2);
    max-width: 58ch;
}

.mod:hover p {
    color: inherit;
}

/* ─── Chips (subject code) ─── */

.chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    display: inline-block;
    background: var(--c);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 7px 4px;
    white-space: nowrap;
}

a.chip:hover {
    outline: 2px solid var(--black);
    outline-offset: 1px;
}

/* ─── Piece pages ─── */

.piece {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    padding-block: 48px 24px;
}

.piece-body {
    grid-column: 1 / 8;
}

.piece-side {
    grid-column: 9 / 13;
    border-top: 4px solid var(--black);
    padding-top: 12px;
    align-self: start;
}

.piece-side h2 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.piece-side .chips {
    margin-bottom: 28px;
}

.related {
    margin: 0;
    padding: 0;
    list-style: none;
}

.related a {
    display: block;
    padding: 9px 0;
    border-top: 1px solid var(--rule-light);
    font-weight: 600;
    line-height: 1.25;
}

.related a span {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
    margin-top: 2px;
}

.related a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose {
    max-width: 66ch;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote {
    margin: 0 0 1.15em;
    font-size: 19px;
    line-height: 1.6;
}

.prose--lead p:first-child {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.prose h2 {
    margin: 1.8em 0 0.6em;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.prose h3 {
    margin: 1.6em 0 0.5em;
    font-size: 21px;
    font-weight: 700;
}

.prose ul,
.prose ol {
    padding-left: 1.2em;
}

.prose li {
    margin-bottom: 0.4em;
}

.prose a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.prose blockquote {
    margin-left: 0;
    padding-left: 20px;
    border-left: 1px solid var(--black);
}

.small-note {
    font-size: 14px;
    color: var(--text-3);
}

/* ─── Buttons ─── */

.button {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    font-weight: 700;
    font-size: 17px;
    padding: 14px 20px;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.button:hover {
    background: #333;
}

.button--inverse {
    background: var(--white);
    color: var(--black);
}

.button--inverse:hover {
    background: #d4d4d4;
}

/* ─── Subjects index ─── */

.subject-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--col-gap);
    padding-block: 40px 24px;
}

.subject-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 260px;
    padding: 16px 16px 18px;
    background: var(--c);
    color: var(--ink);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.subject-tile h2 {
    margin: 0;
    min-height: 2.1em;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.subject-tile .count {
    font-size: 14px;
    font-weight: 700;
}

.subject-tile ul {
    margin: 16px 0 0;
    padding: 10px 0 0;
    list-style: none;
    border-top: 2px solid currentColor;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.subject-tile:hover {
    background: var(--black);
    color: var(--white);
}

/* ─── Library ─── */

.library {
    padding-block: 32px 24px;
}

.lib-controls {
    display: grid;
    gap: 14px;
    padding-bottom: 24px;
    border-bottom: 4px solid var(--black);
}

.lib-controls[hidden] {
    display: none;
}

.search input {
    width: 100%;
    font: inherit;
    font-size: 20px;
    padding: 12px 0;
    border: 0;
    border-bottom: 2px solid var(--black);
    background: transparent;
    color: var(--black);
    border-radius: 0;
}

.search input::placeholder {
    color: var(--text-3);
}

.search input:focus {
    outline: none;
    border-bottom-width: 4px;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter {
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 10px;
    border: 2px solid var(--c, var(--black));
    background: var(--white);
    color: var(--black);
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.filter[aria-pressed="true"] {
    background: var(--c, var(--black));
    color: var(--ink, var(--white));
}

.filter:hover:not([aria-pressed="true"]) {
    background: #eee;
}

.lib-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lib-row[hidden] {
    display: none;
}

.lib-row a {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px var(--col-gap);
    align-items: baseline;
    padding: 14px 12px 12px;
    border-bottom: 1px solid var(--rule-light);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.lib-row a:hover {
    background: var(--c);
    color: var(--ink);
}

.lib-row a:hover .lib-summary,
.lib-row a:hover .lib-len {
    color: inherit;
}

.lib-title {
    grid-column: span 4;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
}

.lib-summary {
    grid-column: span 4;
    font-size: 15px;
    color: var(--text-2);
}

.lib-meta {
    grid-column: span 4;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 10px;
}

.lib-meta .chips {
    justify-content: flex-end;
}

.lib-len {
    white-space: nowrap;
    font-size: 13px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.lib-empty {
    padding: 24px 0;
    font-size: 18px;
}

/* ─── Footer ─── */

.foot-band {
    background: var(--black);
    color: var(--white);
    margin-top: 96px;
}

.foot-band .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
    padding-block: 64px 48px;
}

.foot-band h2 {
    grid-column: 1 / 8;
    margin: 0;
    font-size: clamp(44px, 6vw, 84px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.foot-cta {
    grid-column: 9 / 13;
    display: grid;
    gap: 18px;
    justify-items: start;
}

.foot-links {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 600;
    font-size: 15px;
}

.foot-links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.foot-cta small {
    color: #a8a8a8;
    font-size: 13px;
}

/* ─── Responsive ─── */

@media (max-width: 1080px) {
    .key {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .subject-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .title-band h1,
    .title-band p,
    .title-band--home h1,
    .title-band--home p {
        grid-column: 1 / -1;
    }

    .title-band p {
        margin-top: 18px;
    }

    .mod,
    .mod--M,
    .mod--L {
        grid-column: span 6;
    }

    .piece-body,
    .piece-side {
        grid-column: 1 / -1;
    }

    .piece-side {
        margin-top: 40px;
    }

    .foot-band h2,
    .foot-cta {
        grid-column: 1 / -1;
    }

    .foot-cta {
        margin-top: 28px;
    }

    .lib-row a {
        grid-template-columns: 1fr;
    }

    .lib-title,
    .lib-summary,
    .lib-meta {
        grid-column: 1 / -1;
    }

    .subject .grid .mod:nth-child(n+4) {
        display: none;
    }

    .lib-meta .chips {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    body {
        font-size: 16px;
    }

    .nav-band ul {
        gap: 12px;
    }

    .nav-band ul a {
        font-size: 13.5px;
        font-stretch: 85%;
    }

    .nav-band .nav-call {
        padding: 7px 9px;
    }

    .mark {
        font-size: 16px;
    }

    .key {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .key a {
        min-height: 64px;
    }

    .key a:last-child:nth-child(odd) {
        grid-column: span 2;
    }

    .mod,
    .mod--M,
    .mod--L,
    .mod--XL {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .subject-tiles {
        grid-template-columns: 1fr;
    }

    .subject-tile {
        min-height: 0;
    }

    .prose p,
    .prose ul,
    .prose ol {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
    }
}