/* ==========================================================================
   Nubble · MODEL SHEET
   The site is a set of production model sheets: gridded stock, graphite
   linework, non-photo blue construction ink, callouts on leader lines, and a
   ruled title block carrying the document's own facts. The application window
   is the built object, dropped onto the sheet as the only lit thing on it.

   1. Face + tokens      6. Callouts + leaders     11. Schedule table
   2. Base               7. Title block            12. Plates (gallery)
   3. Sheet frame        8. Stamps                 13. Revision table
   4. Type               9. Actions                14. Lightbox
   5. Header + index    10. App window             15. Motion + responsive
   ========================================================================== */

/* 1. Face + tokens ====================================================== */

@font-face {
    font-family: "Overpass";
    src: url("../fonts/Overpass-var.woff2") format("woff2-variations");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Overpass Mono";
    src: url("../fonts/OverpassMono-var.woff2") format("woff2-variations");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/*
 * Two themes, one token list. Every colour is written light-dark(day, night):
 * daylight on the drawing board, and the same sheet under a lamp. The night
 * values are not a filter of the day ones, they are the world re-inked, and
 * the window stays the darkest object in both so the figure/ground rule holds.
 */
:root {
    color-scheme: light dark;

    /* Stock ---------------------------------------------------------- */
    --sheet: light-dark(#f4f1e9, #14181f);
    --sheet-lit: light-dark(#fbf9f3, #1b2029);
    --sheet-sunk: light-dark(#ebe7dd, #0f131a);
    --edge: light-dark(rgba(22, 24, 29, 0.2), rgba(255, 255, 255, 0.17));
    --edge-soft: light-dark(rgba(22, 24, 29, 0.1), rgba(255, 255, 255, 0.09));

    /* Ink ------------------------------------------------------------ */
    --ink: light-dark(#16181d, #eef2f7);
    --ink-2: light-dark(#464c55, #b4bdc9);
    --ink-3: light-dark(#585f68, #8c95a2);

    /* Construction blue: the brand colour, used as drawing ink -------- */
    --blue: light-dark(#2e9bff, #4fa8ff);
    --blue-ink: light-dark(#0f5fbe, #86c5ff);   /* the weight that carries text */
    --blue-wash: light-dark(rgba(46, 155, 255, 0.12), rgba(79, 168, 255, 0.13));
    --blue-line: light-dark(rgba(46, 155, 255, 0.42), rgba(79, 168, 255, 0.5));
    --grid: light-dark(rgba(46, 155, 255, 0.14), rgba(79, 168, 255, 0.09));
    --grid-major: light-dark(rgba(46, 155, 255, 0.17), rgba(79, 168, 255, 0.15));

    /* Revision red: changes and not-yet-built only -------------------- */
    --rev: light-dark(#c0412a, #ff7d66);
    --rev-wash: light-dark(rgba(192, 65, 42, 0.1), rgba(255, 125, 102, 0.13));

    /* The lit object -------------------------------------------------- */
    --dark: light-dark(#0c0f14, #090c11);
    --table: light-dark(#0c0f14, #222936);   /* the one inverted sheet */
    --dark-2: light-dark(#141922, #10141b);
    --dark-3: #1c232e;
    --dark-edge: rgba(255, 255, 255, 0.14);
    --dark-ink: #eef2f7;
    --dark-ink-2: #98a2b0;
    --on-blue: #04121f;   /* ink drawn on top of --blue */

    /*
     * The drawn window's own sub-system. It depicts a different product's
     * interface at reduced scale, so it carries its own chrome ramp and its
     * own three type steps rather than borrowing the sheet's.
     */
    --win-ink: #98a2b0;
    --win-ink-2: #6d7684;
    --win-ink-3: #77808e;
    --win-sunk: rgba(0, 0, 0, 0.24);
    --win-swatch: #ff9438;   /* the logo's cube, where the app would show it */
    --win-fs: 0.72rem;
    --win-fs-sm: 0.66rem;
    --win-fs-xs: 0.62rem;

    /* Measure --------------------------------------------------------- */
    --cell: 26px;                 /* the sheet's minor grid */
    --sheet-w: 1320px;
    --text-w: 68ch;
    --gutter: clamp(1rem, 3.2vw, 2.75rem);
    --header-h: 60px;

    /* Type ------------------------------------------------------------ */
    --font: "Overpass", "Segoe UI", system-ui, sans-serif;
    --mono: "Overpass Mono", ui-monospace, Consolas, monospace;

    --fs-display: clamp(2.6rem, 1.4rem + 4.4vw, 4.75rem);
    --fs-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
    --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
    --fs-h4: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
    --fs-brand: 1.1rem;
    --fs-lead: clamp(1.05rem, 0.99rem + 0.36vw, 1.2rem);
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;
    --fs-tag: 0.6875rem;

    --ease: cubic-bezier(0.16, 0.84, 0.34, 1);
}

/*
 * The switch only changes which side of every light-dark() pair is used.
 * With no stored choice the root carries no attribute and the operating
 * system decides, so the site is correct before any script runs.
 */
:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

/* The theme switch, sitting in the header rule like another index cell.
   It only appears when the script that drives it is running. */
.theme-toggle {
    display: none;
}

html.js .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3rem;
    border: 0;
    border-left: 1px solid var(--edge-soft);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.theme-toggle:hover {
    background: var(--blue-wash);
    color: var(--ink);
}

.theme-toggle .icon--sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon--sun {
    display: block;
}

:root[data-theme="dark"] .theme-toggle .icon--moon {
    display: none;
}

/* 2. Base =============================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1.25rem);
}

body {
    margin: 0;
    /* The stock: gridded drawing paper, minor and major rules. */
    background-color: var(--sheet);
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px),
        linear-gradient(var(--grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
    background-size:
        var(--cell) var(--cell),
        var(--cell) var(--cell),
        calc(var(--cell) * 5) calc(var(--cell) * 5),
        calc(var(--cell) * 5) calc(var(--cell) * 5);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

.icon {
    inline-size: 1.15em;
    block-size: 1.15em;
    flex: none;
}

a {
    color: var(--blue-ink);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--ink);
}

button {
    font: inherit;
    color: inherit;
}

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

::selection {
    background: var(--blue);
    color: #fff;
}

code {
    font-family: var(--mono);
    font-size: 0.86em;
    background: var(--blue-wash);
    padding: 0.1em 0.35em;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: 0;
    translate: 0 -120%;
    z-index: 200;
    background: var(--ink);
    color: var(--sheet);
    padding: 0.6rem 1rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: translate 0.2s var(--ease);
}

.skip-link:focus-visible {
    translate: 0 0;
    color: var(--sheet);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 3. Sheet frame ======================================================== */

.sheet {
    position: relative;
    width: min(100% - (var(--gutter) * 2), var(--sheet-w));
    margin: 0 auto;
    padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
    border-inline: 1px solid var(--edge);
    padding-inline: clamp(1.25rem, 0.6rem + 2.4vw, 3.25rem);
}

.sheet + .sheet {
    border-block-start: 1px solid var(--edge);
}

/* Registration ticks at the sheet's corners. */
.sheet::before,
.sheet::after {
    content: "";
    position: absolute;
    inline-size: 14px;
    block-size: 14px;
    pointer-events: none;
}

.sheet::before {
    inset-block-start: -1px;
    inset-inline-start: -1px;
    border-block-start: 2px solid var(--ink);
    border-inline-start: 2px solid var(--ink);
}

.sheet::after {
    inset-block-end: -1px;
    inset-inline-end: -1px;
    border-block-end: 2px solid var(--ink);
    border-inline-end: 2px solid var(--ink);
}

/* A sheet flipped to the drafting table: the lit side of the document. */
.sheet--dark {
    background: var(--table);
    color: var(--dark-ink);
    border-color: var(--dark-edge);
    background-image:
        linear-gradient(rgba(46, 155, 255, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46, 155, 255, 0.09) 1px, transparent 1px);
    background-size: var(--cell) var(--cell);
    width: 100%;
    max-width: none;
    padding-inline: max(var(--gutter), calc((100vw - var(--sheet-w)) / 2 + 1.5rem));
}

.sheet--dark::before,
.sheet--dark::after {
    border-color: var(--blue);
}

.sheet--dark a {
    color: var(--blue);
}

/*
 * The sheet's number lives in the corner block where a drawing puts it, * never stacked above the heading as a label.
 */
.sheet__mark {
    position: absolute;
    inset-block-start: 0;
    /* Inset by a cell so the block never fouls the corner registration tick. */
    inset-inline-end: 1.75rem;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
    padding: 0.4rem 0.85rem 0.45rem;
    border-inline-start: 1px solid var(--edge);
    border-block-end: 1px solid var(--edge);
    background: var(--sheet-lit);
    font-family: var(--mono);
    font-size: var(--fs-tag);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.sheet--dark .sheet__mark {
    color: var(--dark-ink-2);
}

.sheet__mark b {
    color: var(--blue-ink);
    font-weight: 700;
}

.sheet--dark .sheet__mark b {
    color: var(--blue);
}

.sheet--dark .sheet__mark {
    background: var(--dark-2);
    border-color: var(--dark-edge);
}

/* 4. Type =============================================================== */

h1,
h2,
h3 {
    margin: 0;
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
}

p {
    margin: 0 0 1rem;
    max-width: var(--text-w);
}

p:last-child {
    margin-bottom: 0;
}

.lead {
    font-size: var(--fs-lead);
    color: var(--ink-2);
    max-width: 56ch;
}

.sheet--dark .lead {
    color: var(--dark-ink-2);
}

.note-text {
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.fig {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
}

.prose {
    max-width: var(--text-w);
    color: var(--ink-2);
}

.prose h2 {
    color: var(--ink);
    font-size: var(--fs-h4);
    margin: 3rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--edge-soft);
}

.prose > :first-child {
    margin-top: 0;
}

.prose ul {
    padding-left: 1.1rem;
    margin: 0 0 1rem;
}

.prose li {
    margin-bottom: 0.35rem;
}

/* 5. Header + sheet index =============================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--sheet);
    border-bottom: 1px solid var(--edge);
    transition: box-shadow 0.25s var(--ease);
}

.site-header.is-scrolled {
    box-shadow: 0 1px 0 var(--edge), 0 10px 24px -20px rgba(22, 24, 29, 0.7);
}

.site-header__inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: min(100% - (var(--gutter) * 2), var(--sheet-w));
    margin: 0 auto;
    block-size: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding-right: 1.1rem;
    border-right: 1px solid var(--edge);
    color: var(--ink);
    text-decoration: none;
    font-weight: 800;
    font-size: var(--fs-brand);
    letter-spacing: -0.03em;
}

.brand img {
    inline-size: 26px;
    block-size: 26px;
}

.index {
    display: flex;
    align-items: stretch;
    margin-left: auto;
}

.index__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    border-left: 1px solid var(--edge-soft);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.index__link i {
    font-family: var(--mono);
    font-style: normal;
    font-size: var(--fs-tag);
    font-weight: 700;
    color: var(--blue-ink);
}

.index__link:hover {
    background: var(--blue-wash);
    color: var(--ink);
}

.index__link[aria-current="page"] {
    color: var(--ink);
    box-shadow: inset 0 -3px 0 var(--blue);
}

.header__issue {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.1rem;
    background: var(--ink);
    color: var(--sheet);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: background 0.15s var(--ease);
}

.header__issue:hover {
    background: var(--blue-ink);
    color: var(--sheet);
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    inline-size: 3rem;
    border: 0;
    border-left: 1px solid var(--edge);
    background: none;
    cursor: pointer;
}

.nav-toggle .icon--close,
.nav-toggle[aria-expanded="true"] .icon--menu {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon--close {
    display: block;
}

.mobile-index {
    display: none;
    border-bottom: 1px solid var(--edge);
    background: var(--sheet-lit);
}

.mobile-index.is-open {
    display: block;
}

.mobile-index a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem var(--gutter);
    border-top: 1px solid var(--edge-soft);
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
}

.mobile-index a i {
    font-family: var(--mono);
    font-style: normal;
    font-size: var(--fs-tag);
    color: var(--blue-ink);
}

/* Sheet 01: the general arrangement ------------------------------------ */

.sheet--title {
    padding-block-start: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.title-grid {
    display: grid;
    /* The drawing gets the larger half: it is the evidence, the copy is the claim. */
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(1.5rem, 0.8rem + 3vw, 3.25rem);
    align-items: center;
}

.title-head {
    font-size: var(--fs-display);
    letter-spacing: -0.05em;
    line-height: 0.95;
}

/* Secondary sheets open one step down from the title sheet. */
.title-head--sm {
    font-size: var(--fs-h2);
}

.title-object {
    position: relative;
}

/* Callouts hang below the drawing, leaders running up into it. */
.title-callouts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: calc(1.5rem + 0.9rem);
}

.title-callouts .callout {
    position: relative;   /* keeps the leader anchored to its own card */
    max-inline-size: none;
}

.ortho {
    margin-top: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--edge-soft);
    max-inline-size: 30rem;
}

.ortho__labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0.5rem 0 0;
    color: var(--ink-3);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Titles the whole figure, so it matches the callout caption beside it. */
.title-figref {
    color: var(--ink-2);
    align-self: end;
    text-align: right;
}

.showcase {
    position: relative;
}

/* The drawing is inset so its callouts have margin to live in. */
.showcase__frame {
    inline-size: min(100%, 68%);
    margin-inline: auto;
}

/* Narrower cards, because the wider frame leaves them a narrower margin. */
.showcase .callout {
    max-inline-size: 12rem;
}

/* 6. Callouts + leader lines ============================================ */

.callout {
    position: absolute;
    z-index: 3;
    max-inline-size: 14rem;
    font-size: var(--fs-xs);
    line-height: 1.45;
}

.callout__tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--sheet-lit);
    border: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: var(--fs-tag);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.callout__body {
    display: block;
    margin-top: 0.35rem;
    color: var(--ink-2);
}

.sheet--dark .callout__tag {
    background: var(--dark-2);
    border-color: var(--blue);
    color: var(--blue);
}

.sheet--dark .callout__body {
    color: var(--dark-ink-2);
}

/* The leader: a hairline from the label to the thing it names. */
.callout::before {
    content: "";
    position: absolute;
    inset-block-start: 0.65rem;
    block-size: 1px;
    inline-size: var(--leader, 3rem);
    background: var(--blue);
}

.callout::after {
    content: "";
    position: absolute;
    inset-block-start: calc(0.65rem - 3px);
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--blue);
}

/* Cards sit in the sheet's margin; the leader reaches in to the drawing. */
.callout--left {
    inset-inline-start: 0;
}

.callout--left::before {
    inset-inline-start: 100%;
}

.callout--left::after {
    inset-inline-start: calc(100% + var(--leader, 3rem) - 3px);
}

.callout--right {
    inset-inline-end: 0;
    text-align: right;
}

.callout--right::before {
    inset-inline-end: 100%;
}

.callout--right::after {
    inset-inline-end: calc(100% + var(--leader, 3rem) - 3px);
}

/* A callout sitting below the drawing, its leader running up into it. */
.callout--under::before {
    inset-block-start: auto;
    inset-block-end: 100%;
    inset-inline-start: var(--anchor, 1.6rem);
    inline-size: 1px;
    block-size: var(--leader, 2rem);
}

.callout--under::after {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--leader, 2rem) - 3px);
    inset-inline-start: calc(var(--anchor, 1.6rem) - 3px);
}

/* Same information, listed, when the drawing is too small for leaders. */
.callout-list {
    display: none;
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

.callout-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--dark-edge);
    font-size: var(--fs-sm);
    color: var(--dark-ink-2);
}

.callout-list b {
    color: var(--dark-ink);
}

/* A flagged note, in revision ink. */
.flag {
    border: 1px solid var(--rev);
    background: var(--rev-wash);
    padding: 0.9rem 1.1rem;
    font-size: var(--fs-sm);
    color: var(--ink-2);
    max-width: var(--text-w);
}

.flag b {
    color: var(--rev);
}

/* 7. Title block ======================================================== */

.titleblock {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    border: 1px solid var(--ink);
    background: var(--sheet-lit);
}

.titleblock > div {
    padding: 0.6rem 0.85rem;
    border-right: 1px solid var(--edge);
}

.titleblock > div:last-child {
    border-right: 0;
}

.titleblock dt {
    font-family: var(--mono);
    font-size: var(--fs-tag);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.titleblock dd {
    margin: 0.2rem 0 0;
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: -0.01em;
}

.titleblock dd.is-rev {
    color: var(--rev);
}

/* 8. Stamps ============================================================= */

.stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.6rem;
    border: 2px solid currentColor;
    font-family: var(--mono);
    font-size: var(--fs-tag);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-ink);
}

.stamp--built {
    color: var(--blue-ink);
}

.stamp--progress {
    color: var(--rev);
}

.stamp--planned {
    color: var(--ink-3);
    border-style: dashed;
}

.sheet--dark .stamp--built {
    color: var(--blue);
}

.stamp--big {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    rotate: -3deg;
}

/* 9. Actions ============================================================ */

.action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--ink);
    background: var(--ink);
    color: var(--sheet);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s var(--ease), color 0.16s var(--ease),
        border-color 0.16s var(--ease), translate 0.16s var(--ease);
}

/*
 * Optical centring for the icon beside a label. align-items centres the icon
 * on the line box, but these labels are sentence case with no descenders, so
 * their ink sits high in that box and the icon reads as low. Lifting it by
 * half the unused descent puts it on the cap-height centre. Measured at
 * 2.5px against a 15px label, hence 0.167em.
 */
.action .icon,
.header__issue .icon {
    translate: 0 -0.167em;
}

.action:hover {
    background: var(--blue-ink);
    border-color: var(--blue-ink);
    color: var(--sheet);
    translate: 0 -1px;
}

.action--ghost {
    background: none;
    color: var(--ink);
}

.action--ghost:hover {
    background: var(--ink);
    color: var(--sheet);
    border-color: var(--ink);
}

.sheet--dark .action {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--on-blue);
}

.sheet--dark .action--ghost {
    background: none;
    border-color: var(--dark-edge);
    color: var(--dark-ink);
}

.sheet--dark .action--ghost:hover {
    background: var(--dark-ink);
    color: var(--dark);
}

.action:disabled,
.action.is-off {
    background: none;
    border-style: dashed;
    border-color: var(--ink-3);
    color: var(--ink-2);
    cursor: not-allowed;
    translate: 0;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* 10. The application window ============================================ */

.window {
    position: relative;
    background: var(--dark);
    border: 1px solid var(--ink);
    /* A cast with offset and blur the plate sitting proud of the sheet. */
    box-shadow: 12px 14px 28px -14px rgba(22, 24, 29, 0.34), 0 30px 60px -40px rgba(12, 15, 20, 0.9);
    font-family: var(--font);
    font-size: var(--win-fs);
    color: var(--dark-ink-2);
    line-height: 1.45;
    user-select: none;
}

.sheet--dark .window {
    border-color: var(--dark-edge);
}

.window__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    background: var(--dark-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.window__bar img {
    inline-size: 15px;
    block-size: 15px;
}

.window__bar span {
    font-size: var(--win-fs);
}

.window__controls {
    margin-left: auto;
    display: flex;
    gap: 0.75rem;
    color: var(--win-ink-3);
}

.window__controls i {
    inline-size: 9px;
    block-size: 9px;
    border: 1px solid currentColor;
}

.window__controls i:first-child {
    border-width: 0 0 1px;
    block-size: 5px;
}

.window__menu {
    display: flex;
    gap: 0.1rem;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.window__menu span {
    padding: 0.1rem 0.4rem;
    color: var(--win-ink-2);
    white-space: nowrap;
    font-size: var(--win-fs);
}

.window__menu span:first-child {
    color: var(--dark-ink);
    background: rgba(255, 255, 255, 0.06);
}

.window__body {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) 12.5rem;
}

.window__rail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.4rem 0.3rem;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--win-sunk);
}

.window__rail i {
    display: grid;
    place-items: center;
    block-size: 1.7rem;
    color: var(--win-ink-3);
}

.window__rail i .icon {
    inline-size: 0.9rem;
    block-size: 0.9rem;
}

.window__rail i.on {
    color: var(--blue);
    background: rgba(46, 155, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(46, 155, 255, 0.4);
}

.window__view {
    position: relative;
    min-inline-size: 0;
    background: #0e1218;
}

.window__view img {
    inline-size: 100%;
    aspect-ratio: 14 / 10;
    object-fit: cover;
}

.window__viewbar {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.5rem;
    background: linear-gradient(180deg, rgba(10, 13, 18, 0.9), transparent);
}

.window__chip {
    padding: 0.05rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--win-fs-sm);
    color: var(--win-ink);
    white-space: nowrap;
}

.window__chip.on {
    color: var(--blue);
    border-color: rgba(46, 155, 255, 0.5);
    background: rgba(46, 155, 255, 0.12);
}

.window__stat {
    margin-left: auto;
    font-family: var(--mono);
    font-size: var(--win-fs-xs);
    color: var(--win-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.window__axis {
    position: absolute;
    inset-block-end: 0.45rem;
    inset-inline-end: 0.5rem;
    inline-size: 2.4rem;
    block-size: 2.4rem;
}

.window__panel {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--win-sunk);
    min-inline-size: 0;
}

.window__ph {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: var(--win-fs-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #98a2b0;
    text-transform: uppercase;
}

.window__ph .icon {
    inline-size: 0.8rem;
    block-size: 0.8rem;
}

.window__tree {
    padding: 0.3rem 0.45rem 0.5rem;
    display: grid;
    gap: 0.1rem;
}

.window__tree span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.3rem;
    font-size: var(--win-fs-sm);
    color: var(--win-ink-2);
    white-space: nowrap;
    overflow: hidden;
}

.window__tree span .icon {
    inline-size: 0.75rem;
    block-size: 0.75rem;
}

.window__tree .kid {
    padding-left: 1rem;
}

.window__tree .on {
    color: var(--dark-ink);
    background: rgba(46, 155, 255, 0.16);
}

.window__props {
    padding: 0.35rem 0.45rem 0.5rem;
    display: grid;
    gap: 0.28rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.window__prop {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--win-fs-sm);
    color: var(--win-ink-2);
}

.window__slider {
    block-size: 0.45rem;
    background: rgba(255, 255, 255, 0.07);
    position: relative;
    overflow: hidden;
}

.window__slider::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    inline-size: var(--v, 50%);
    background: var(--blue);
    opacity: 0.8;
}

.window__swatch {
    block-size: 0.8rem;
    background: var(--win-swatch);
}

.window__status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: var(--win-fs-sm);
    color: var(--win-ink-3);
}

.window__status b {
    inline-size: 0.35rem;
    block-size: 0.35rem;
    border-radius: 50%;
    background: var(--blue);
}

.window__status em {
    margin-left: auto;
    font-style: normal;
    font-family: var(--mono);
}

/* 11. Notes and schedules =============================================== */

/* Drafting "general notes": numbered, ruled, no cards. */
.notes {
    counter-reset: note;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notes li {
    counter-increment: note;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--edge-soft);
}

.notes li::before {
    content: counter(note, decimal-leading-zero);
    font-family: var(--mono);
    font-size: var(--fs-tag);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--blue-ink);
    padding-top: 0.35rem;
}

.notes h3 {
    margin-bottom: 0.4rem;
}

.notes p {
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.schedule {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.schedule caption {
    text-align: left;
    padding-bottom: 0.9rem;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    max-width: var(--text-w);
}

.schedule th,
.schedule td {
    text-align: left;
    padding: 0.85rem 1rem 0.85rem 0;
    border-bottom: 1px solid var(--edge-soft);
    vertical-align: top;
}

.schedule thead th {
    border-bottom: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: var(--fs-tag);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: 0.5rem;
}

.schedule tbody th {
    font-weight: 700;
    inline-size: 30%;
}

.schedule td {
    color: var(--ink-2);
}

.schedule td:last-child {
    inline-size: 1%;
    white-space: nowrap;
    padding-right: 0;
}

.schedule tbody tr:hover {
    background: var(--blue-wash);
}

/* Two-column ruled list, used for the audience sheet. */
.spec-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 0 3rem;
}

.spec-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--edge-soft);
}

.spec-row .fig {
    color: var(--blue-ink);
    padding-top: 0.3rem;
}

.spec-row h3 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.spec-row p {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    margin: 0;
}

/* 12. Views and plates ================================================== */

/* A feature "view": the drawing large, the notes ruled beside it. */
.view {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 0.8rem + 3vw, 3.5rem);
    align-items: center;
    padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem);
    border-top: 1px solid var(--edge-soft);
}

.view:first-of-type {
    border-top: 0;
    padding-block-start: 0;
}

.view:nth-of-type(even) .view__plate {
    order: -1;
}

.view__plate {
    position: relative;
    border: 1px solid var(--ink);
    background: var(--sheet-lit);
}

.view__plate img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.view__caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.7rem;
    border-top: 1px solid var(--edge);
    font-family: var(--mono);
    font-size: var(--fs-tag);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.view__keys {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 1.25rem;
}

.key {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: var(--fs-tag);
    font-weight: 600;
    background: var(--sheet-lit);
}

.sheet--dark .key {
    border-color: var(--dark-edge);
    background: var(--dark-2);
    color: var(--dark-ink);
}

.view__list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}

.view__list li {
    padding: 0.5rem 0 0.5rem 1.4rem;
    border-top: 1px solid var(--edge-soft);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    position: relative;
}

.view__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 1.05rem;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--blue);
}

/* Gallery: specimens laid out as plates on the dark table. */
/* Wide plates: application screenshots, so two to a row rather than three. */
.plates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    gap: 1.25rem;
}

.plate {
    display: block;
    inline-size: 100%;
    padding: 0;
    border: 1px solid var(--ink);
    background: var(--sheet-lit);
    text-align: left;
    cursor: zoom-in;
    transition: border-color 0.2s var(--ease), translate 0.2s var(--ease);
}

.sheet--dark .plate {
    border-color: var(--dark-edge);
    background: var(--dark-2);
}

.plate img {
    inline-size: 100%;
    /* Matches the screenshots' own proportions, so nothing is cropped away. */
    aspect-ratio: 1602 / 932;
    object-fit: cover;
}

.plate:hover,
.plate:focus-visible {
    border-color: var(--blue);
    translate: 0 -3px;
}

.plate__cap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--edge);
    color: var(--ink);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.plate__cap span:last-child {
    font-family: var(--mono);
    font-size: var(--fs-tag);
    font-weight: 400;
    color: var(--ink-3);
}

.sheet--dark .plate__cap {
    border-color: var(--dark-edge);
    color: var(--dark-ink);
}

.sheet--dark .plate__cap span:last-child {
    color: var(--dark-ink-2);
}

/* 13. Revision table ==================================================== */

.revisions {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.revisions caption {
    text-align: left;
    font-family: var(--mono);
    font-size: var(--fs-tag);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: 0.6rem;
}

.revisions th,
.revisions td {
    text-align: left;
    padding: 0.7rem 1rem 0.7rem 0;
    border-bottom: 1px solid var(--edge-soft);
}

.revisions thead th {
    border-bottom: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: var(--fs-tag);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.revisions td:first-child {
    font-family: var(--mono);
    color: var(--blue-ink);
    inline-size: 3.5rem;
}

.revisions td:last-child {
    inline-size: 1%;
    white-space: nowrap;
    padding-right: 0;
}

.revisions tr.is-now th,
.revisions tr.is-now td {
    background: var(--rev-wash);
}

/* 14. Lightbox ========================================================== */

.lightbox {
    inline-size: min(94vw, 1080px);
    max-inline-size: none;
    max-block-size: 92vh;
    padding: 0;
    border: 1px solid var(--ink);
    background: var(--dark);
    color: var(--dark-ink);
    overflow: hidden;
}

.lightbox::backdrop {
    background: rgba(20, 22, 26, 0.86);
}

.lightbox img {
    inline-size: 100%;
    max-block-size: 74vh;
    object-fit: contain;
    background: #0a0d12;
}

.lightbox__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--dark-edge);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.lightbox__count {
    margin-left: auto;
    font-family: var(--mono);
    font-size: var(--fs-tag);
    font-weight: 400;
    color: var(--dark-ink-2);
}

.lightbox__btn {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    border: 1px solid var(--dark-edge);
    background: none;
    color: var(--dark-ink);
    cursor: pointer;
}

.lightbox__btn:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--on-blue);
}

.lightbox__btn--prev .icon {
    rotate: 180deg;
}

.lightbox__close {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    background: rgba(12, 15, 20, 0.8);
}

/* Footer, set as the document's own title block ========================= */

.site-footer {
    border-top: 1px solid var(--ink);
    background: var(--sheet-lit);
}

.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    width: min(100% - (var(--gutter) * 2), var(--sheet-w));
    margin: 0 auto;
}

.footer__grid > * {
    padding: 1.75rem 1.25rem;
    border-left: 1px solid var(--edge-soft);
}

.footer__grid > *:first-child {
    border-left: 0;
    padding-left: 0;
}

.footer h2 {
    font-family: var(--mono);
    font-size: var(--fs-tag);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.9rem;
}

.footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.footer__list a {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    text-decoration: none;
}

.footer__list a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.footer__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    width: min(100% - (var(--gutter) * 2), var(--sheet-w));
    margin: 0 auto;
    padding: 1rem 0;
    border-top: 1px solid var(--edge);
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.footer__end .fig {
    margin-left: auto;
}

/* 15. Motion + responsive =============================================== */

/*
 * One authored moment: the sheet prints. Construction lines draw in, then the
 * plate lands. Content is visible by default; only the drawn lines animate.
 */
@keyframes draw-in {
    from {
        stroke-dashoffset: var(--len, 800);
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Content is visible throughout: the plate settles, it does not fade in. */
@keyframes plate-land {
    from {
        translate: 0 18px;
    }
    to {
        translate: 0 0;
    }
}

.js .drawing path,
.js .drawing line,
.js .drawing circle,
.js .drawing rect {
    stroke-dasharray: var(--len, 800);
    animation: draw-in 1.5s var(--ease) forwards;
    animation-delay: var(--d, 0s);
}

.js .lands {
    animation: plate-land 0.7s var(--ease) both;
    animation-delay: var(--d, 0.15s);
}

@media (max-width: 1080px) {
    .window {
        --panel: 11rem;
    }

    .callout {
        max-inline-size: 11rem;
    }
}

@media (max-width: 900px) {
    .index,
    .header__issue {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .title-grid,
    .view,
    .footer__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .title-object {
        margin-top: 1rem;
    }

    .view:nth-of-type(even) .view__plate {
        order: 0;
    }

    .footer__grid > * {
        border-left: 0;
        border-top: 1px solid var(--edge-soft);
        padding-inline: 0;
    }

    .footer__grid > *:first-child {
        border-top: 0;
    }

    /* Leaders over the drawing stop working at this width; the list replaces
       them. The hero's callouts sit below the drawing and still read. */
    .showcase .callout {
        display: none;
    }

    .callout-list {
        display: block;
    }

    .title-callouts {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .title-figref {
        text-align: left;
    }

    .showcase__frame {
        inline-size: 100%;
    }
}

@media (max-width: 720px) {
    .window__body {
        grid-template-columns: 2.2rem minmax(0, 1fr);
    }

    .window__panel {
        display: none;
    }

    .window__menu span:nth-child(n + 5),
    .window__chip:nth-child(n + 2) {
        display: none;
    }

    /* Only the sheet number survives in the corner block at this width, so it
       cannot wrap over the headline below it. */
    .sheet__mark {
        inset-inline-end: 0;
        padding: 0.3rem 0.6rem 0.35rem;
    }

    .sheet__mark span {
        display: none;
    }

    .notes li {
        grid-template-columns: 1.9rem minmax(0, 1fr);
        gap: 0.9rem;
    }

    .schedule tbody th {
        inline-size: 45%;
    }

    .lightbox {
        inline-size: 100vw;
        max-block-size: 100vh;
        border: 0;
    }
}

@media (max-width: 520px) {
    :root {
        --cell: 22px;
    }

    .action-row > .action {
        flex: 1 1 100%;
    }

    .schedule,
    .revisions {
        font-size: var(--fs-xs);
    }
}

@media (min-width: 1800px) {
    :root {
        --sheet-w: 1440px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .js .drawing path,
    .js .drawing line,
    .js .drawing circle,
    .js .drawing rect {
        stroke-dasharray: none;
    }
}

@media print {
    .site-header,
    .nav-toggle {
        display: none;
    }

    body {
        background: #fff;
    }
}