/* ==========================================================================
   Kaypoh Labs — design system

   The page is a blueprint on a workbench. Cool bond paper with real tooth and
   a scatter of dust, clean bars down either margin, column rules that run the
   full height, and a title block at the bottom instead of a footer. Every
   line of it is drawn in one blue.

   The hero carries no ornament — crop marks bound the plate and an
   interrupted centreline explains the symmetry. Nothing is decorated; things
   are drawn or they are absent. Same rule applies to the copy.

   Type is four faces from libre foundries, none of them the usual set:
   Zodiak italic names the thing, Technor claims it, Supreme carries the
   prose, Azeret Mono handles every annotation.
   ========================================================================== */

/* --- Tokens (spec §3, §4) ---
   Cool bond paper, blueprint ink. The accent is not a button colour that
   happens to be blue — it is the ink the whole drawing is made of. Every
   hairline, crop mark, speck of dust and state swatch is the accent at low
   alpha, which is what makes the page read as a blueprint on a bench rather
   than a page with a blue button on it. */
:root {
    --paper:    #F1F0EB;  /* cool bond — NEVER #fff */
    --paper-2:  #E7E6E0;  /* margin bars, announcement bar, title block */
    --ink:      #1C1917;  /* near-black — headlines only */
    --ink-2:    #635D56;  /* body text */
    --ink-3:    #6E7F96;  /* DRAWN MARKS ONLY — ticks, crop marks, swatches */
    --accent:   #1F4E85;  /* single accent — blueprint blue */
    --accent-2: #DBE4F0;  /* accent tint, button fills */

    /* Verified in-browser against the rendered --paper, per spec §10 —
       measured, not assumed. See the note beside each value in the report.
       --ink-3 may stay light because it only ever draws marks, never letters.
       The accent clears 4.5:1 on paper by itself, so accent text needs no
       separate darker shade — one blue does every job. */
    --ink-meta:   #6C645B;

    /* Sheet furniture — all of it blueprint ink, thinned. */
    --rule:       rgba(31, 78, 133, 0.26);
    --rule-hair:  rgba(31, 78, 133, 0.16);
    --rule-faint: rgba(31, 78, 133, 0.08);
    --margin-w:   34px;   /* clean bar either side */
    --content:    1100px;
    --pad:        1.5rem;

    --t-display: clamp(2.75rem, 1.4rem + 5.4vw, 5.25rem);
    --t-h3:      1.3125rem;
    --t-body:    1rem;
    --t-meta:    0.8125rem;
    --t-micro:   0.6875rem;   /* sheet annotations */

    --tracking-display: -0.025em;
    --tracking-meta:     0.02em;
    --leading-display:   1.05;
    --leading-body:      1.6;

    --radius-chip:    3px;
    --radius-control: 6px;
    --radius-card:    8px;

    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* --- Self-hosted fonts (spec §3, §10 — files in /fonts, no CDN) ---
   All four from Fontshare (Indian Type Foundry), free for commercial use and
   deliberately not the Google default set. All variable, all woff2. */
@font-face {
    font-family: 'Zodiak';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/zodiak-italic-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Technor';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('/fonts/technor-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Supreme';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/supreme-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Azeret Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/azeret-mono-variable.woff2') format('woff2');
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    position: relative;   /* containing block for the paper and the dust */
    background-color: var(--paper);
    color: var(--ink-2);
    font-family: 'Supreme', system-ui, -apple-system, sans-serif;
    font-size: var(--t-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Paper tooth (spec §5). Procedural — no request, no image file. Coarser and
   a touch stronger than a clean stock: this is shop paper that has been on a
   bench, not letterhead. Tiled at 260px so the turbulence rasterises once. */
body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
    background-size: 260px 260px;
}

img {
    max-width: 100%;
    height: auto;
}

p {
    margin: 0;
}

/* One global focus ring (spec §10) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--paper-2);
    color: var(--ink);
    border: 1px solid var(--rule);
    padding: 0.5rem 1rem;
    text-decoration: none;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

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

/* ==========================================================================
   The sheet — fixed furniture the content is drawn on top of
   ========================================================================== */

.sheet {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Clean bars either side. They carry no texture at all — they are the swept
   edge of the bench, and the dust between them only reads because of it. */
.sheet-margin {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--margin-w);
    background: var(--paper-2);
}

/* Dust on the bench. Absolute against the body, not fixed to the viewport —
   it is settled on the paper, so it travels with the paper. Confined between
   the margin bars: the bars stay clean, and that contrast is the whole trick.
   Generated by utils/gen-dust.mjs. */
.sheet-dust {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 0;
    bottom: 0;
    left: var(--margin-w);
    right: var(--margin-w);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' fill='none' stroke-linecap='round'%3E%3Cpath stroke-width='1' stroke='rgba(31,78,133,0.16)' d='M74 558h0M519 488h0M95 515h0M165 269h0M341 277h0M48 462h0M180 503h0M205 209h0M231 170h0M302 530h0M522 547h0M506 519h0M523 308h0M66 189h0M91 0h0M264 356h0M25 45h0M159 249h0M498 11h0M29 165h0M544 523h0M535 412h0M393 538h0M227 483h0M18 69h0M341 95h0M414 400h0M381 380h0M535 471h0M280 45h0M125 144h0M77 193h0M157 388h0M529 404h0M203 136h0M440 137h0M520 533h0M121 225h0M365 84h0M161 52h0M496 260h0M554 128h0M108 39h0M200 246h0M460 306h0M196 343h0M81 127h0M405 247h0M207 248h0M506 416h0M254 296h0M116 77h0M246 211h0M260 194h0M194 459h0M215 380h0M259 402h0M288 220h0M308 18h0M413 358h0M152 371h0M103 481h0M355 320h0M135 110h0M50 326h0M488 525h0M303 377h0M344 33h0M83 318h0M449 483h0M207 508h0M285 195h0M78 62h0M103 260h0M166 403h0M526 464h0M93 127h0M209 425h0M210 422h0M532 225h0M349 345h0M96 4h0M387 18h0M372 550h0M519 137h0M161 229h0M51 301h0M452 210h0M555 152h0M238 153h0M124 51h0M482 185h0M540 379h0M151 556h0M301 188h0M204 555h0M195 439h0M464 354h0M520 417h0M21 398h0M352 75h0M492 27h0M445 90h0M422 301h0M181 50h0M277 256h0M141 406h0M240 353h0M321 25h0M53 156h0M233 506h0M251 53h0M308 403h0M282 469h0M332 13h0M380 179h0M209 113h0M254 245h0M34 388h0M52 217h0M2 275h0M156 291h0M504 205h0M550 273h0M209 311h0M436 70h0M326 273h0M238 454h0M362 389h0M195 389h0M196 198h0M417 146h0M90 3h0M545 345h0M403 359h0M466 186h0M18 298h0M73 133h0M34 374h0M273 512h0M310 274h0M166 60h0M227 479h0M128 93h0M66 348h0M101 462h0M465 488h0M392 226h0M212 23h0M300 193h0M426 113h0M545 128h0M125 140h0M149 427h0M177 216h0M100 313h0M547 200h0M198 206h0M179 509h0M107 474h0M485 471h0M20 360h0M137 359h0M398 417h0M424 277h0M36 232h0M267 275h0M34 366h0M140 368h0M204 140h0M40 95h0M89 270h0M490 419h0M140 7h0M556 19h0M216 490h0M514 461h0M38 389h0M2 220h0M279 111h0M213 370h0M495 263h0M493 413h0M355 169h0M165 309h0M98 206h0M14 479h0M230 6h0M409 353h0M187 452h0M511 87h0M252 97h0M226 63h0M66 251h0M192 396h0M44 338h0M290 498h0M310 162h0M19 20h0M472 333h0M529 177h0M478 235h0M229 459h0M208 523h0M173 288h0M83 59h0M440 37h0M527 410h0M102 108h0M282 296h0M368 349h0M58 266h0M125 312h0M538 69h0M328 266h0M119 511h0M354 49h0M1 454h0M64 279h0M375 7h0M213 109h0M318 92h0M450 465h0M548 399h0M535 361h0M116 10h0M49 485h0M352 466h0M44 403h0M294 227h0M247 189h0M326 268h0M1 293h0M210 222h0M511 419h0M201 351h0M546 313h0M271 169h0M67 60h0M388 498h0M178 411h0M129 169h0M483 24h0M81 338h0M172 442h0M452 382h0M131 77h0M162 297h0M478 512h0M532 372h0M234 488h0'/%3E%3Cpath stroke-width='1.7' stroke='rgba(31,78,133,0.22)' d='M547 263h0M153 231h0M401 51h0M293 331h0M522 410h0M551 266h0M182 258h0M197 343h0M544 420h0M312 552h0M58 464h0M514 539h0M193 372h0M402 535h0M204 527h0M524 8h0M249 157h0M84 470h0M311 332h0M231 108h0M192 80h0M493 94h0M283 220h0M483 198h0M206 457h0M427 75h0M20 449h0M92 227h0M496 514h0M77 251h0M546 133h0M466 174h0M238 509h0M231 133h0M96 253h0M269 517h0M247 103h0M454 488h0M333 291h0M277 552h0M377 558h0M558 272h0M361 195h0M339 187h0M32 36h0M466 411h0M145 384h0M535 87h0M535 4h0M271 115h0M371 209h0M138 0h0M171 186h0M248 171h0M83 473h0M431 148h0M502 551h0M474 462h0M2 394h0M69 84h0M170 134h0M232 215h0M262 374h0M333 246h0M270 489h0M55 516h0M5 234h0M33 216h0M477 52h0M203 403h0M374 141h0M172 99h0M383 556h0M136 73h0M158 16h0M420 325h0M324 88h0M395 333h0M272 307h0M272 343h0M84 38h0M45 324h0M124 504h0M191 76h0M436 551h0M404 483h0M283 521h0M307 527h0M198 178h0M155 515h0M134 35h0M390 335h0M427 200h0M153 171h0M197 131h0M363 120h0M30 234h0M471 387h0M409 442h0M342 192h0M490 285h0M152 480h0M218 55h0M63 42h0M162 427h0M542 31h0M174 535h0'/%3E%3Cpath stroke-width='2.6' stroke='rgba(31,78,133,0.18)' d='M30 408h0M16 383h0M78 409h0M518 102h0M58 26h0M146 467h0M321 206h0M369 317h0M453 547h0M274 95h0M518 252h0M518 396h0M71 411h0M228 395h0M248 351h0M559 89h0M8 30h0M371 524h0M318 291h0M493 253h0M443 492h0M317 108h0M180 254h0M66 459h0M277 307h0M38 485h0M158 286h0M474 112h0M192 325h0M84 73h0M128 410h0M349 464h0M32 26h0M232 484h0M153 422h0M278 402h0M103 458h0M51 550h0M405 264h0M25 515h0M500 339h0M167 484h0M508 557h0M359 549h0M496 473h0M113 171h0M302 339h0M213 42h0M207 252h0M401 401h0M467 410h0M374 29h0M146 34h0M174 219h0M297 132h0M432 418h0M490 13h0M109 359h0M486 379h0'/%3E%3Cpath stroke-width='3.6' stroke='rgba(31,78,133,0.13)' d='M125 8h0M488 141h0M531 448h0M175 284h0M277 453h0M245 401h0M257 64h0M71 134h0M478 96h0M288 530h0M50 117h0M375 532h0M363 478h0'/%3E%3C/svg%3E");
    background-size: 560px 560px;
}
.sheet-margin--l {
    left: 0;
    border-right: 1px solid var(--rule-hair);
}
.sheet-margin--r {
    right: 0;
    border-left: 1px solid var(--rule-hair);
}

/* Column rules at the content edges, quarter rules inside. Full height, so
   the layout grid stays visible as you scroll instead of being implied. */
.sheet-cols {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--content), 100% - (var(--margin-w) * 2) - 2rem);
    border-left: 1px solid var(--rule-hair);
    border-right: 1px solid var(--rule-hair);
}
.sheet-cols i {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--rule-faint);
}
.sheet-cols i:nth-child(1) { left: 25%; }
.sheet-cols i:nth-child(2) { left: 50%; }
.sheet-cols i:nth-child(3) { left: 75%; }

/* Everything real sits above the furniture. */
.site-header,
#main,
.site-footer {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Shared primitives
   ========================================================================== */

/* Mono is the meta-voice: labels, dates, tags, captions, the gloss. Never
   body copy. (spec §2.3) */
.mono {
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-variant-ligatures: none;
}

/* Drafting leader arrow. Drawn, not typed — the mono's latin subset has no
   U+2192, and a real leader line suits the sheet better than a glyph. */
.arw {
    display: inline-block;
    position: relative;
    flex: none;
    width: 0.95em;
    height: 0.6em;
    translate: 0 0.03em;
}
.arw::before,
.arw::after {
    content: '';
    position: absolute;
    top: 50%;
}
.arw::before {
    left: 0;
    width: 100%;
    border-top: 1px solid currentColor;
}
.arw::after {
    right: 0;
    width: 0.3em;
    height: 0.3em;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

/* Corner registration ticks — L-brackets that mark a block's extent the way
   crop marks do. Applied to the hero and to every entry card. */
.ticks > b {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 0 solid var(--ink-3);
    opacity: 0.7;
    transition: opacity 160ms var(--ease), border-color 160ms var(--ease);
}
.ticks > b:nth-child(1) { top: -1px;    left: -1px;  border-top-width: 1px; border-left-width: 1px; }
.ticks > b:nth-child(2) { top: -1px;    right: -1px; border-top-width: 1px; border-right-width: 1px; }
.ticks > b:nth-child(3) { bottom: -1px; left: -1px;  border-bottom-width: 1px; border-left-width: 1px; }
.ticks > b:nth-child(4) { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* ==========================================================================
   Nav (spec §6, §7)
   ========================================================================== */

.nav {
    max-width: var(--content);
    margin: 0 auto;
    padding: 1.15rem var(--pad);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--rule-hair);
}

.nav-left  { display: flex; align-items: center; gap: 1rem; justify-self: start; }
.nav-right { display: flex; align-items: center; gap: 1rem; justify-self: end; }

.nav-link {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 140ms var(--ease);
}
.nav-link:hover {
    color: var(--ink);
}

/* Slash separators — the nav reads as a route, not a menu. */
.nav-sep {
    color: var(--rule);
    user-select: none;
    font-size: 0.9375rem;
}

/* Wordmark: command block + Kaypoh Labs, Technor 700 (spec §6) */
.wordmark {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Technor', sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.mark {
    width: 20px;
    height: 20px;
    image-rendering: auto;
    object-fit: contain;
    border-radius: 4px;
    flex: none;
}

/* Mobile menu (46rem breakpoint below) */
.nav-menu {
    display: none;
    justify-self: end;
    position: relative;
}
.nav-menu summary {
    list-style: none;
    cursor: pointer;
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: var(--t-micro);
    text-transform: uppercase;
    color: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-chip);
    padding: 0.55em 1em;
    background: var(--paper);
    user-select: none;
}
.nav-menu summary::-webkit-details-marker { display: none; }

.nav-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 50;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    box-shadow: 0 8px 24px rgba(26, 23, 20, 0.07);
}

/* ==========================================================================
   Buttons (spec §6)
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    position: relative;
    font-family: 'Supreme', sans-serif;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1;
    padding: 0.75em 1.35em;
    border-radius: var(--radius-control);
    text-decoration: none;
    transition: background-color 140ms var(--ease), border-color 140ms var(--ease),
                color 140ms var(--ease);
}

/* primary — offset outline only (spec §6). A plate stamped twice. The
   outline steps outward on hover instead of the fill doing all the work. */
.btn-primary {
    background: var(--accent-2);
    color: var(--ink);
    border: 1px solid var(--accent);
}
.btn-primary::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid var(--accent);
    border-radius: calc(var(--radius-control) + 3px);
    opacity: 0.35;
    pointer-events: none;
}
.btn-primary:hover {
    background: color-mix(in srgb, var(--accent-2) 86%, var(--accent));
}
.btn-primary:hover::after {
    inset: -7px;
    opacity: 0.55;
}
.btn-primary::after {
    transition: inset 160ms var(--ease), opacity 160ms var(--ease);
}

/* secondary — same geometry, no offset outline (spec §6) */
.btn-secondary {
    background: transparent;
    color: var(--ink-2);
    border: 1px solid var(--rule);
}
.btn-secondary:hover {
    color: var(--ink);
    border-color: var(--ink-3);
}

/* ==========================================================================
   Meta chip and state mark (spec §6)
   ========================================================================== */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: var(--t-micro);
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink-meta);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-chip);
    padding: 0.4em 0.55em;
    white-space: nowrap;
}

/* ==========================================================================
   The drawer — dimensional folders and dossier sheets

   Every project reads as a filed object with three planes only: board, slip,
   cover. The folder opens into a separate dossier so the inventory stays terse.
   ========================================================================== */

.drawer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.65rem;
}

.folder {
    --stack-shadow-x: 0.34rem;
    --stack-shadow-y: 0.36rem;
    position: relative;
    min-width: 0;
}

.project-toggle {
    display: none;
    margin: 1.5rem auto 0;
    padding: 0.65rem 0;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: transparent;
    color: var(--ink-meta);
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.js .project-toggle {
    display: block;
}

.js .drawer:not(.is-expanded) .folder[data-project-extra] {
    display: none;
}

.project-toggle:hover,
.project-toggle:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
}

.folder-trigger {
    position: relative;
    display: block;
    width: 100%;
    min-height: 18rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 200ms var(--ease);
}

.folder-trigger > b {
    z-index: 5;
    opacity: 0.42;
}

.folder-back,
.folder-slip,
.folder-cover {
    position: absolute;
    border: 1px solid var(--rule);
    transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.folder-back,
.folder-cover {
    background: var(--paper);
}

.folder-back::before,
.folder-cover::before {
    content: '';
    position: absolute;
    left: 1.15rem;
    top: -0.82rem;
    width: 4.5rem;
    height: 0.82rem;
    border: 1px solid var(--rule);
    border-bottom: 0;
    background: inherit;
}

.folder-back {
    inset: 1rem 0.75rem 0.25rem 0;
    background: color-mix(in srgb, var(--paper-2) 78%, var(--paper));
    box-shadow: var(--stack-shadow-x) var(--stack-shadow-y) 0 color-mix(in srgb, var(--paper-2) 88%, transparent);
}

.folder-slip {
    inset: 1.35rem 1.2rem 4.7rem 1.4rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem 1rem 0.8rem;
    background: color-mix(in srgb, var(--paper) 80%, var(--accent-2));
    box-shadow: 0.2rem 0.22rem 0 color-mix(in srgb, var(--accent-2) 55%, transparent);
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: var(--t-micro);
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-meta);
    transform: translateY(0.95rem);
}

.folder-slip-tags {
    display: block;
}

.folder-cover {
    inset: 3rem 0 0 0.7rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem 1.15rem;
    background: var(--paper);
    box-shadow: calc(var(--stack-shadow-x) * 1.14) calc(var(--stack-shadow-y) * 1.14) 0 color-mix(in srgb, var(--paper-2) 88%, transparent);
}

.folder-cover::after {
    content: '';
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    top: 1.95rem;
    border-top: 1px solid var(--rule-faint);
}

.folder-date {
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: var(--t-micro);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-meta);
}

.folder-title {
    min-width: 0;
    margin-top: auto;
    font-family: 'Supreme', sans-serif;
    font-weight: 560;
    font-size: clamp(1.3rem, 1.15rem + 0.55vw, 1.6rem);
    line-height: 1.16;
    letter-spacing: -0.015em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.folder-trigger:is(:hover, :focus-visible) .folder-back,
.folder-trigger:is(:hover, :focus-visible) .folder-cover {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--rule));
}

.folder-trigger:is(:hover, :focus-visible) {
    transform: translateY(-0.22rem);
}

.folder-trigger:is(:hover, :focus-visible) .folder-back {
    transform: translate(-0.1rem, -0.1rem);
}

.folder-trigger:is(:hover, :focus-visible) .folder-slip {
    transform: translateY(0.2rem);
    border-color: color-mix(in srgb, var(--accent) 26%, var(--rule));
}

.folder-trigger:is(:hover, :focus-visible) .folder-cover {
    transform: translateY(-0.24rem);
    box-shadow: calc(var(--stack-shadow-x) * 1.28) calc(var(--stack-shadow-y) * 1.28) 0 color-mix(in srgb, var(--paper-2) 90%, transparent);
}

.folder-trigger:is(:hover, :focus-visible) > b {
    opacity: 0.68;
    border-color: var(--accent);
}

.folder-trigger:focus-visible {
    outline-offset: 7px;
}

.dossier {
    width: min(70rem, calc(100% - 2rem));
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    overflow: hidden;
}

.dossier::backdrop {
    background: rgba(28, 25, 23, 0.24);
}

.dossier-motion {
    padding: 0 0.7rem 0.7rem 0;
}

.dossier-sheet {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    max-height: calc(100dvh - 2.7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: 0.6rem 0.65rem 0 color-mix(in srgb, var(--paper-2) 92%, transparent);
}

.dossier[open] .dossier-motion {
    animation: dossier-pull 220ms var(--ease) both;
}

@keyframes dossier-pull {
    from {
        opacity: 0;
        translate: 0 0.75rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

.dossier-close {
    position: absolute;
    top: 0.95rem;
    right: 0.95rem;
    z-index: 2;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink-meta);
    font-size: var(--t-micro);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.55rem 0.8rem;
    cursor: pointer;
}

.dossier-visual {
    padding: 1.35rem;
    border-right: 1px solid var(--rule-hair);
    background: color-mix(in srgb, var(--paper) 84%, var(--paper-2));
}

.dossier-plate {
    position: relative;
    height: 100%;
    min-height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 1px solid var(--rule);
    background: color-mix(in srgb, var(--paper) 86%, var(--accent-2));
}

.dossier-plate::before {
    content: '';
    position: absolute;
    inset: 0.55rem;
    border: 1px solid var(--rule-faint);
    pointer-events: none;
}

.dossier-image,
.dossier-blueprint {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
}

.dossier-image {
    object-fit: cover;
}

.dossier-blueprint {
    color: var(--accent);
}

.dossier-blueprint text {
    fill: currentColor;
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.dossier-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.45rem 1.45rem 1.35rem;
}

.dossier-label {
    margin: 0;
    font-size: var(--t-micro);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-meta);
}

.dossier-date {
    font-size: var(--t-micro);
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: var(--ink-meta);
}

.dossier-title {
    margin: 0;
    max-width: 18ch;
    font-family: 'Supreme', sans-serif;
    font-weight: 600;
    font-size: clamp(1.9rem, 1.55rem + 1vw, 2.45rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.dossier-summary {
    margin: 0;
    max-width: 60ch;
    font-family: 'Supreme', sans-serif;
    font-size: 0.96875rem;
    line-height: var(--leading-body);
    color: var(--ink-2);
}

.dossier-writeup {
    margin: 0;
}

.dossier-writeup a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--accent);
    font-family: 'Supreme', sans-serif;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.dossier-writeup a:hover {
    color: var(--ink);
    border-color: var(--ink);
}

.dossier-block {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--rule-hair);
}

.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
}

.tag {
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: var(--t-micro);
    color: var(--ink-meta);
}

.tag::before {
    content: '/';
    margin-right: 0.25em;
    color: var(--rule);
}

.entry-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
}

.entry-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: var(--t-micro);
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
    transition: color 140ms var(--ease);
}

.entry-link:hover {
    color: var(--accent);
}

/* Once the drawer itself arrives, its records settle in one after another.
   The index is supplied by Hugo, so newly filed projects join automatically. */
@keyframes file-record-in {
    from {
        opacity: 0;
        translate: 0 11px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

.js .drawer.reveal.in .folder {
    animation: file-record-in 420ms var(--ease) both;
    animation-delay: calc(var(--folder-index) * 55ms);
}

/* ==========================================================================
   Hero (spec §7)
   ========================================================================== */

.hero {
    position: relative;
    text-align: center;
    padding: clamp(3.5rem, 11vh, 6rem) var(--pad) 0;
    isolation: isolate;
}

/* The plate is the drawn area: crop marks bound it, the centreline runs
   through it, annotations hang off it. The cards sit outside it. */
.hero-plate {
    position: relative;
    max-width: var(--content);
    margin: 0 auto;
    padding: 3.25rem 0 clamp(3.5rem, 7vh, 4.75rem);
}

/* Plate crop marks sit further out than a card's, so they read as sheet
   registration rather than as a box drawn round the copy. */
.hero-plate.ticks > b {
    width: 14px;
    height: 14px;
    opacity: 0.55;
}
.hero-plate.ticks > b:nth-child(1) { top: -10px;    left: -10px; }
.hero-plate.ticks > b:nth-child(2) { top: -10px;    right: -10px; }
.hero-plate.ticks > b:nth-child(3) { bottom: -10px; left: -10px; }
.hero-plate.ticks > b:nth-child(4) { bottom: -10px; right: -10px; }

/* Centreline: long-short-long, the way a drawing marks an axis of symmetry.
   Masked away behind the copy, because a real centreline breaks for whatever
   it passes through — and because it must never cut the headline. */
.hero-axis {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        var(--rule) 0 16px,
        transparent 16px 22px,
        var(--rule) 22px 26px,
        transparent 26px 32px
    );
    -webkit-mask-image: linear-gradient(180deg, #000 0 12%, transparent 20% 82%, #000 92% 100%);
            mask-image: linear-gradient(180deg, #000 0 12%, transparent 20% 82%, #000 92% 100%);
}

.hero-title {
    margin: 0;
    font-size: var(--t-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
}

/* two-voice: serif names it, sans claims it (spec §2) */
.hero-serif {
    display: block;
    font-family: 'Zodiak', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--ink);
}

.hero-sans {
    display: block;
    font-family: 'Technor', sans-serif;
    font-weight: 700;
    color: var(--ink);
}

.hero-intro {
    max-width: 39rem;
    margin: 1.5rem auto 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-2);
}

.hero-intro a {
    color: var(--ink);
    text-decoration-color: var(--rule);
    text-underline-offset: 0.18em;
    transition: color 140ms var(--ease), text-decoration-color 140ms var(--ease);
}

.hero-intro a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

.hero-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
    max-width: var(--content);
    margin: 0 auto;
    padding-inline: var(--pad);
}

/* ==========================================================================
   The log — every entry, no heading, no preamble
   ========================================================================== */

.log {
    padding-top: 0;
    padding-bottom: clamp(5rem, 12vh, 7rem);
}

/* ==========================================================================
   Compute readout and footer exits
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--rule);
    background: var(--paper-2);
}

.footer-inner {
    max-width: var(--content);
    margin: 0 auto;
    padding: 1.5rem var(--pad) 1.75rem;
}

.compute-spend {
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 2vw, 1.5rem);
    width: 100%;
    margin: 0 0 1.75rem;
}

.compute-spend::before,
.compute-spend::after {
    content: '';
    flex: 1 1 auto;
    border-top: 1px solid var(--rule-hair);
}

.compute-reading {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    flex: none;
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-meta);
}

.compute-mark {
    width: 28px;
    height: 28px;
    margin-bottom: 0.3rem;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.compute-spark {
    stroke-width: 1.4;
}

.compute-spend strong {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0;
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: var(--t-micro);
    text-transform: uppercase;
}
.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    color: var(--ink-meta);
    text-decoration: none;
    transition: color 140ms var(--ease);
}
.footer-links a:hover {
    color: var(--accent);
}

/* ==========================================================================
   Motion — one fade-up on scroll (spec §10)
   ========================================================================== */

.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.js .reveal.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive — one breakpoint at 46rem (spec §10)
   ========================================================================== */

@media (max-width: 46rem) {
    :root {
        --margin-w: 0px;
        --pad: 1.25rem;
    }

    .sheet-margin { display: none; }
    .sheet-cols i:nth-child(1),
    .sheet-cols i:nth-child(3) { display: none; }

    .nav {
        grid-template-columns: 1fr auto;
    }
    .nav-left,
    .nav-right { display: none; }
    .wordmark { justify-self: start; }
    .nav-menu { display: block; }

    /* Keep the field's horizontal spread dominant, otherwise `slice` crops to
       the middle of the clearing and only a stray band of ticks survives. */
    .hero-plate.ticks > b { display: none; }

    .drawer { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .folder-trigger { min-height: 15.75rem; }
    .folder-slip { inset: 1.2rem 1rem 4.5rem 1.15rem; padding-inline: 0.85rem; }
    .folder-cover { inset: 2.8rem 0 0 0.55rem; padding-inline: 1rem; }

    .dossier {
        width: calc(100% - 1rem);
    }

    .dossier-sheet {
        grid-template-columns: minmax(0, 1fr);
    }

    .dossier-visual {
        border-right: 0;
        border-bottom: 1px solid var(--rule-hair);
        padding: 1rem;
    }

    .dossier-plate {
        min-height: auto;
    }

    .dossier-body {
        padding: 1.1rem 1rem 1rem;
    }

    .dossier-title {
        max-width: none;
    }

}