/* Plansheet info site. The default pair from the product: vellum in the light, night drafting in the dark, switched by prefers-color-scheme. Gorton Perfected (the proportional revival of engraving instrument lettering) carries the drafting layer: the lockup, headings, annotations, buttons, and the title blocks. IBM Plex Sans carries the body copy. Both faces are self-hosted. Amber is measurement ink: dimensions, revisions, stamps, nothing else. */ @font-face { font-family: 'Gorton Perfected'; src: url('/GortonPerfected-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Gorton Perfected'; src: url('/GortonPerfected-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Gorton Perfected'; src: url('/GortonPerfected-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Gorton Perfected'; src: url('/GortonPerfected-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Gorton Perfected'; src: url('/GortonPerfected-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* The content face: IBM Plex Sans (SIL OFL), self-hosted, paired with Gorton. Gorton carries the drafting layer; Plex carries everything read. */ @font-face { font-family: 'IBM Plex Sans'; src: url('/IBMPlexSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('/IBMPlexSans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('/IBMPlexSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; } :root { /* Vellum (warm tracing paper, graphite ink, Staedtler cobalt) and night drafting (graphite ground, brightened cobalt) tokens together via light-dark(). The color-scheme below picks which: "light dark" follows the OS; the footer toggle forces it with [data-theme] on (see below). */ color-scheme: light dark; --bg: light-dark(#F5F0E4, #14171C); --panel: light-dark(#FBF8F0, #1B1F26); --ink: light-dark(#2B2D2F, #E9ECF0); --mut: light-dark(#6C6A60, #98A2AE); --pri: light-dark(#1D5FA8, #4F95E8); --pri-hover: light-dark(#174E8C, #6BA7EE); --mea: light-dark(#A8780E, #F2C84B); --grid: light-dark(rgba(75, 100, 140, 0.14), rgba(120, 160, 210, 0.13)); --sil: light-dark(#A39D8F, #7D8894); --ln: light-dark(rgba(43, 45, 47, 0.25), rgba(233, 236, 240, 0.22)); --ln-strong: light-dark(rgba(43, 45, 47, 0.55), rgba(233, 236, 240, 0.5)); --cta-bg: light-dark(#1D5FA8, #4F95E8); --cta-tx: light-dark(#FFFFFF, #0E1116); --gor: 'Gorton Perfected', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --max-width: 1080px; /* Drafting-sheet measure: a wide main reading column and a slim sidenote margin (Tufte keeps the margin narrow -- roughly a third of the text column). */ --col-main: 640px; --col-gap: 56px; --col-margin: 240px; } /* The footer toggle forces a scheme by setting data-theme on ; light-dark() above resolves every token from it. "System" just removes the attribute, so the OS preference (color-scheme: light dark) governs again. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; } a { color: var(--pri); } a:hover { color: var(--pri-hover); } .gor { font-family: var(--gor); } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 22px; } /* ---- Drafting-margin layout (opt-in: ) ------------------- Editorial pages (why, terms, the deep-dive examples) get a reading column plus a right margin that carries figure captions, case-study links, and drafting asides, top-aligned to what they annotate. Structural pages (index, method, features, the examples gallery) keep the plain full-width flow. */ body.tufte .wrap, body.tufte .wrap > section, body.tufte .wrap > .hero { display: grid; grid-template-columns: minmax(0, var(--col-main)) var(--col-margin); column-gap: var(--col-gap); align-content: start; } body.tufte .wrap > *, body.tufte .wrap > section > *, body.tufte .wrap > .hero > * { grid-column: 1; min-width: 0; } body.tufte .wrap > section, body.tufte .wrap > .hero, body.tufte .wrap > .band { grid-column: 1 / -1; } /* full-bleed structural blocks span both columns */ body.tufte .wrap > .plate, body.tufte .wrap > .pillars, body.tufte .wrap > .iset, body.tufte .wrap > .imeta, body.tufte .wrap > .dimline, body.tufte .wrap > section > .plate, body.tufte .wrap > section > .pillars, body.tufte .wrap > section > .iset { grid-column: 1 / -1; } /* the right margin: captions, case-study links, drafting asides, the margin pull, the sheet eyebrow */ body.tufte .wrap > .shot-cap, body.tufte .wrap > .shot-from, body.tufte .wrap > .aside, body.tufte .wrap > .pull-aside, body.tufte .wrap > section > .shot-cap, body.tufte .wrap > section > .shot-from, body.tufte .wrap > section > .aside, body.tufte .wrap > section > .pull-aside, body.tufte .wrap > .hero > .eyebrow { grid-column: 2; align-self: start; } /* ONE dashed drafting rule down the gutter between the content and its margin. Dashed (not a solid rule) and continuous, so it reads as "beside the content" consistently -- including next to the direct-child shots like SHT S-01 that the old per-section line skipped. Sits behind the content (z-index -1). It stops a clear margin ABOVE the closing .band CTA (the :has rule below) so it never runs into that box. */ /* size the sheet to exactly the two columns so there is no empty strip on the right */ body.tufte .wrap { position: relative; z-index: 0; max-width: calc(var(--col-main) + var(--col-gap) + var(--col-margin) + 44px); } body.tufte .wrap::before { content: ''; position: absolute; z-index: -1; top: 22px; bottom: 0; left: calc(22px + var(--col-main) + (var(--col-gap) / 2)); width: 0; border-left: 1px dashed var(--ln-strong); } /* end the rule a clear margin above the closing CTA band, never into it */ body.tufte .wrap:has(> .band)::before { bottom: 280px; } @media (max-width: 920px) { body.tufte .wrap, body.tufte .wrap > section, body.tufte .wrap > .hero { grid-template-columns: 1fr; } body.tufte .wrap > .shot-cap, body.tufte .wrap > .shot-from, body.tufte .wrap > .aside, body.tufte .wrap > .pull-aside, body.tufte .wrap > section > .shot-cap, body.tufte .wrap > section > .shot-from, body.tufte .wrap > section > .aside, body.tufte .wrap > section > .pull-aside, body.tufte .wrap > .hero > .eyebrow, body.tufte .wrap .note .note-shot, body.tufte .wrap .note figcaption { grid-column: 1; } body.tufte .wrap::before { display: none; } } /* ---- Top bar ---------------------------------------------------------- */ .topbar { border-bottom: 1px solid var(--ln); background: var(--bg); position: sticky; top: 0; z-index: 10; } .topbar-inner { max-width: var(--max-width); margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; gap: 18px; } .lockup { display: flex; align-items: stretch; border: 1.6px solid var(--ink); color: var(--ink); text-decoration: none; background: var(--panel); } .lockup:hover { color: var(--ink); } .lockup .wm { font-family: var(--gor); padding: 7px 12px 6px; font-size: 15px; font-weight: 700; letter-spacing: 4px; border-right: 1.6px solid var(--ink); } .lockup .cells { display: flex; flex-direction: column; justify-content: center; } .lockup .cells span { font-family: var(--gor); font-size: 8.5px; letter-spacing: 1px; color: var(--mut); padding: 2px 8px; line-height: 1.25; } .lockup .cells span:first-child { border-bottom: 1px solid var(--ln); } .topbar-nav { margin-left: auto; display: flex; align-items: center; gap: 16px; } .topbar-nav a:not(.btn) { font-family: var(--gor); font-size: 11.5px; letter-spacing: 1.8px; color: var(--ink); text-decoration: none; white-space: nowrap; } .topbar-nav a:not(.btn):hover { color: var(--pri); } .topbar-nav a.here { color: var(--pri); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } /* ---- Buttons ---------------------------------------------------------- */ .btn { display: inline-block; font-family: var(--gor); font-size: 12px; letter-spacing: 2px; font-weight: 700; padding: 11px 18px 10px; border-radius: 6px; text-decoration: none; border: 1px solid transparent; } .btn-cta { background: var(--cta-bg); color: var(--cta-tx); } .btn-cta:hover { background: var(--pri-hover); color: var(--cta-tx); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ln-strong); } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } /* ---- Hero ------------------------------------------------------------- */ .hero { padding: 64px 0 18px; } .eyebrow { font-family: var(--gor); font-size: 12px; letter-spacing: 3px; color: var(--pri); margin: 0 0 16px; } h1 { font-family: var(--gor); font-size: clamp(30px, 5.4vw, 52px); font-weight: 700; letter-spacing: 3px; line-height: 1.15; margin: 0 0 16px; } .sub { font-size: 18px; color: var(--mut); max-width: 620px; margin: 0 0 26px; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } /* ---- The plate (sheet panel: grid, stamp, title block) ----------------- */ .plate { position: relative; border: 1.5px solid var(--ln-strong); background: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; background-color: var(--panel); padding: 30px 20px 14px; margin: 34px 0; } .plate-title { font-family: var(--gor); font-size: 12px; letter-spacing: 3px; color: var(--mut); text-align: center; margin: 0 0 10px; } .rowlab { font-family: var(--gor); font-size: 11px; letter-spacing: 2.5px; color: var(--mut); margin: 14px 6px 6px; } .figs { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; align-items: flex-end; } .fig { text-align: center; } .fig svg { display: block; margin: 0 auto; color: var(--ink); } .fig .cap { font-family: var(--gor); font-size: 11px; letter-spacing: 1.5px; color: var(--mut); margin-top: 4px; } .pri-ink { color: var(--pri); } .mea-ink { color: var(--mea); } .sil-ink { color: var(--sil); } .stamp { position: absolute; top: 12px; right: 14px; transform: rotate(6deg); border: 2px solid var(--mea); color: var(--mea); font-family: var(--gor); font-size: 11px; letter-spacing: 2.5px; padding: 4px 10px; background: transparent; } /* ---- Title block (footers, section seams) ------------------------------ */ .tblock { display: flex; flex-wrap: wrap; border-top: 1.5px solid var(--ln-strong); font-family: var(--gor); } .plate .tblock { margin-top: 16px; } .tcell { flex: 1 1 130px; border-right: 1px solid var(--ln); border-bottom: 1px solid var(--ln); padding: 8px 12px; min-width: 110px; } .tcell:last-child { border-right: none; } .tcell b { display: block; font-size: 10px; letter-spacing: 1.5px; color: var(--mut); font-weight: 400; margin-bottom: 1px; } .tcell span { font-size: 12.5px; letter-spacing: 1px; } /* ---- Pillars ------------------------------------------------------------ */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border: 1.5px solid var(--ln-strong); background: var(--panel); margin: 26px 0; } .pillar { border-right: 1px solid var(--ln); padding: 20px 18px 18px; } .pillar:last-child { border-right: none; } .pillar .num { font-family: var(--gor); font-size: 11px; letter-spacing: 2px; color: var(--mea); margin-bottom: 8px; } .pillar h3 { font-family: var(--gor); font-size: 15px; font-weight: 700; letter-spacing: 2.5px; margin: 0 0 8px; } .pillar p { font-size: 14px; color: var(--mut); margin: 0; } /* ---- Sections ------------------------------------------------------------ */ section { padding: 30px 0; } h2 { font-family: var(--gor); font-size: 22px; font-weight: 700; letter-spacing: 2.5px; margin: 0 0 10px; } .lede { font-size: 17px; color: var(--mut); max-width: 680px; margin: 0 0 22px; } .dimline { display: flex; align-items: center; gap: 10px; color: var(--mea); font-family: var(--gor); font-size: 11px; letter-spacing: 2px; margin: 8px 0 18px; } .dimline::before, .dimline::after { content: ''; flex: 1; border-top: 1px solid var(--mea); } /* ---- Long-form prose (the why) ----------------------------------------- */ .prose { max-width: 680px; } .prose p { margin: 0 0 18px; font-size: 18px; line-height: 1.72; } .prose p:last-child { margin: 0; } .pull { font-family: var(--gor); font-size: clamp(17px, 2.3vw, 21px); font-weight: 600; letter-spacing: 1px; line-height: 1.4; color: var(--ink); max-width: 780px; margin: 24px 0; } /* ---- Feature index (the drawing set) ----------------------------------- */ .iset { display: grid; grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); border: 1.5px solid var(--ln-strong); background: var(--panel); margin: 14px 0 30px; } .icell { border-right: 1px solid var(--ln); border-bottom: 1px solid var(--ln); padding: 16px 16px 15px; display: block; text-decoration: none; color: var(--ink); } a.icell:hover { background: var(--bg); color: var(--ink); } div.icell { cursor: default; } .icell .sht { font-family: var(--gor); font-size: 10px; letter-spacing: 2px; color: var(--mea); margin-bottom: 7px; } .icell h3 { font-family: var(--gor); font-size: 14px; font-weight: 700; letter-spacing: 2px; margin: 0 0 7px; } .icell p { font-size: 13.5px; color: var(--mut); margin: 0 0 9px; } .icell .open { font-family: var(--gor); font-size: 10.5px; letter-spacing: 1.5px; color: var(--pri); } .icell .open.soon { color: var(--mut); } /* ---- Feature page: a framed plate for a representation or a screenshot --- */ .shot { border: 1.5px solid var(--ln-strong); background: var(--panel); margin: 24px 0 8px; } .shot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1.5px solid var(--ln-strong); padding: 9px 14px 8px; font-family: var(--gor); } .shot-head .nm { font-size: 12px; font-weight: 700; letter-spacing: 2px; } .shot-head .no { font-size: 10px; letter-spacing: 1.5px; color: var(--mut); } .shot-body { padding: 18px; background: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 22px 22px; } .shot-body img { display: block; width: 100%; height: auto; border: 1px solid var(--ln); } .shot-body video { display: block; width: 100%; height: auto; border: 1px solid var(--ln); } .shot-body .sheet { background-image: none; max-width: 600px; margin: 0 auto; } .shot-body .duo { display: flex; gap: 14px; } .shot-body .duo figure { flex: 1; margin: 0; } .shot-body .duo img { height: 260px; object-fit: cover; cursor: zoom-in; } .shot-body figcaption { font-family: var(--gor); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mut); margin-top: 6px; } .shot.tall .shot-body img { max-width: 600px; margin: 0 auto; } .shot.app .shot-body img { box-shadow: 0 2px 16px rgba(43, 45, 47, 0.16); } @media (max-width: 600px) { .shot-body .duo { flex-direction: column; } .shot-body .duo img { height: auto; } } .shot-cap { font-family: var(--gor); font-size: 11px; line-height: 1.75; letter-spacing: 1.4px; color: var(--mut); margin: 2px 0 22px; } .shot-cap .mea-ink { color: var(--mea); } .shot-cap.tight { margin-bottom: 8px; } /* Drafting aside: a short note penciled into the sheet margin (a definition, a measure, an as-built note). An optional .lab gives it a small yellow tag. */ .aside { font-size: 14px; line-height: 1.58; color: var(--mut); border-top: 1.5px solid var(--ln-strong); padding-top: 8px; margin: 5px 0 26px; } .aside b { color: var(--ink); font-weight: 600; } .aside .lab { display: block; font-family: var(--gor); font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mea); margin-bottom: 5px; } .shot-from { font-family: var(--gor); font-size: 11px; letter-spacing: 1.5px; margin: 0 0 28px; } .shot-from a { color: var(--pri); text-decoration: none; border-bottom: 1px solid var(--pri); padding-bottom: 2px; } .shot-from a:hover { color: var(--pri-hover); border-color: var(--pri-hover); } /* Notebook scans on the Why page. Deliberately NOT the formal .shot plate: a real page sitting in the reading, left in the prose column, with a plain sentence-case caption in the offhand voice. The point is "I do this all the time," not a gallery. */ /* Notebook scans. The .note-shot wrapper carries the frame + height crop + zoom affordance (see the zoomable-figures block); the caption sits in the margin on Tufte pages, below the image otherwise. */ .note { margin: 26px 0 36px; max-width: 480px; } /* The scan is a cut-out page (its black photo backdrop is removed to transparency), so it is not boxed in a rectangular frame. A drop shadow follows the page's own silhouette (rounded corners, slight tilt and all) to lift it off the sheet. */ .note .note-shot { display: block; filter: drop-shadow(0 5px 15px light-dark(rgba(43, 45, 47, 0.32), rgba(0, 0, 0, 0.6))); } .note img { display: block; width: 100%; height: auto; } .note figcaption { font-size: 14.5px; line-height: 1.6; color: var(--mut); margin-top: 9px; } .note figcaption b { color: var(--ink); font-weight: 600; } body.tufte .note { display: contents; max-width: none; } body.tufte .note .note-shot { grid-column: 1; margin: 22px 0 16px; } body.tufte .note figcaption { grid-column: 2; align-self: start; margin-top: 22px; } @media (max-width: 920px) { body.tufte .note figcaption { margin: 9px 0 30px; font-size: 15px; } } /* ---- Zoomable figures: full column width, capped height (show the top), and a click-to-enlarge lightbox to the high-res version. Applies to notebook scans and to real screenshots (.shot-body that actually holds an , so the CSS-drawn as-built plates are left alone). -------------------------------- */ .note-shot, .shot-body:has(> img), .shot-body:has(> video) { position: relative; display: block; overflow: hidden; } .note-shot img, .shot-body:has(> img) img { max-height: var(--fig-cap, 340px); object-fit: cover; object-position: top center; cursor: zoom-in; } /* Notebook cutouts (see below) are shown a little taller and, because they are always taller than the cap, dissolve at the crop line instead of ending in a hard bar. The soft alpha at the foot also fades the page's drop shadow, so it reads as a sheet continuing past the fold rather than a cropped rectangle. */ .note-shot { --fig-cap: 430px; } .note-shot img { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); } .note-shot::before, .shot-body:has(> img)::before { content: ''; position: absolute; top: 8px; right: 8px; z-index: 2; width: 27px; height: 27px; border-radius: 50%; background: rgba(8, 12, 18, 0.62) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='6'/%3E%3Cline%20x1='15'%20y1='15'%20x2='20'%20y2='20'/%3E%3C/svg%3E") center / 15px no-repeat; pointer-events: none; } /* ---- Lightbox (click any figure to see the full sheet) ----------------------- */ .lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(8, 11, 16, 0.93); display: none; align-items: center; justify-content: center; padding: 28px; cursor: zoom-out; } .lightbox.is-open { display: flex; } .lightbox img { max-width: 95vw; max-height: 92vh; object-fit: contain; box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5); } .lightbox-x { position: fixed; top: 14px; right: 20px; font: 400 32px/1 var(--sans); color: #fff; background: none; border: none; cursor: pointer; padding: 4px 10px; } /* ---- Margin pull-quote (a .pull moved into the Tufte margin, same spot) ------ */ .pull-aside { font-family: var(--gor); font-size: 14px; line-height: 1.5; letter-spacing: 0.5px; color: var(--ink); border-top: 2px solid var(--mea); padding-top: 9px; margin: 5px 0 26px; } /* ---- Board representation ----------------------------------------------- */ .brd { display: flex; gap: 8px; overflow-x: auto; } .lane { flex: 1 0 144px; border: 1px solid var(--ln); background: var(--bg); display: flex; flex-direction: column; } .lanehd { font-family: var(--gor); font-size: 9.5px; letter-spacing: 1px; color: var(--mut); padding: 7px 8px 6px; border-bottom: 1px solid var(--ln); } .lane-cards { padding: 7px; display: flex; flex-direction: column; gap: 7px; min-height: 64px; } .card { border: 1px solid var(--ln); border-left: 3px solid var(--pri); background: var(--panel); padding: 7px 8px; font-size: 12px; line-height: 1.35; } .card .k { display: block; font-family: var(--gor); font-size: 8.5px; letter-spacing: 1px; color: var(--mut); margin-top: 3px; } /* ---- Whiteboard representation ------------------------------------------ */ .wb { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; padding: 6px 2px; } .wb-note { border: 1px solid var(--ln-strong); background: var(--panel); padding: 10px 12px; max-width: 210px; font-size: 13px; box-shadow: 3px 3px 0 var(--grid); } .wb-note.a { transform: rotate(-1.4deg); } .wb-note.b { transform: rotate(1.1deg); } .wb-note.c { transform: rotate(-0.6deg); } .wb-note .t { display: block; font-family: var(--gor); font-size: 9.5px; letter-spacing: 1px; color: var(--mut); margin-bottom: 5px; } /* ---- Method page ---------------------------------------------------------- */ .method-step { display: grid; grid-template-columns: 200px 1fr; gap: 26px; border: 1.5px solid var(--ln-strong); border-bottom: none; background: var(--panel); padding: 24px 22px; align-items: center; } .method-step:last-of-type { border-bottom: 1.5px solid var(--ln-strong); } .method-step svg { color: var(--ink); display: block; margin: 0 auto; } .method-step h3 { font-family: var(--gor); font-size: 16px; font-weight: 700; letter-spacing: 2.5px; margin: 0 0 8px; } .method-step .num { font-family: var(--gor); font-size: 11px; letter-spacing: 2px; color: var(--mea); margin-bottom: 6px; } .method-step p { margin: 0 0 8px; color: var(--mut); font-size: 15px; } .method-step p:last-child { margin-bottom: 0; } /* ---- Draft sheets (use-case cards) ---------------------------------------- */ .sheets { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 26px 0; } /* Examples gallery is split into two categories: the deep dives (with a walkthrough) and everything else. The headings make it obvious there is more to open. */ .cat-head { margin: 48px 0 0; } .cat-head + .lede { margin-top: 6px; } .cat-head.cat-more { margin-top: 60px; padding-top: 26px; border-top: 1.5px solid var(--ln-strong); } .sheet { border: 1.5px solid var(--ln-strong); background: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 20px 20px; background-color: var(--panel); display: flex; flex-direction: column; } .sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1.5px solid var(--ln-strong); padding: 10px 14px 8px; background: var(--panel); } .sheet-head .no { font-family: var(--gor); font-size: 10px; letter-spacing: 1.5px; color: var(--mut); } .sheet-head .nm { font-family: var(--gor); font-size: 13px; font-weight: 700; letter-spacing: 2px; } .sheet-vision { font-size: 13.5px; color: var(--mut); font-style: italic; padding: 10px 14px 4px; } .sheet-rows { padding: 6px 14px 12px; flex: 1; } .sheet-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--ln); } .sheet-row:last-child { border-bottom: none; } .sheet-row .st { font-family: var(--gor); font-size: 9.5px; letter-spacing: 1.5px; color: var(--mut); white-space: nowrap; padding-top: 3px; } .sheet-row .st.done { color: var(--pri); } .sheet-row .st.rev { color: var(--mea); } .sheet-foot { border-top: 1px solid var(--ln); padding: 6px 14px; display: flex; justify-content: space-between; font-family: var(--gor); font-size: 9.5px; letter-spacing: 1.5px; color: var(--mut); } .sheet-foot .rev { color: var(--mea); } /* Deep-dive cards: the few sheets that link to a full walkthrough. */ .sheet.is-link { text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .sheet.is-link:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(43, 45, 47, 0.14); border-color: var(--pri); } .sheet.is-link:hover .sheet-dive { background: var(--pri); color: #fff; } .sheet-dive { font-family: var(--gor); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--pri); border-top: 1.5px solid var(--ln-strong); padding: 9px 14px; transition: background 0.12s ease, color 0.12s ease; } /* Gallery sheets (drafts.html): the graph ruling lives behind the rows and each row is exactly one ruling tall, so the line under every row lands on the paper instead of floating between lines. Scoped to .sheets so the feature-page plates are untouched. */ .sheets .sheet { background-image: none; } .sheets .sheet-rows { padding: 0 14px; background-image: linear-gradient(var(--ln) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; background-position: 0 0; } .sheets .sheet-row { line-height: 24px; padding: 0; border-bottom: none; align-items: baseline; } .sheets .sheet-row .st { padding-top: 0; } /* ---- Closing band + footer -------------------------------------------------- */ .band { border: 1.5px solid var(--ln-strong); background: var(--panel); padding: 34px 26px; text-align: center; margin: 30px 0 46px; } .band h2 { margin-bottom: 8px; } .band p { color: var(--mut); margin: 0 0 20px; } footer { border-top: 1.5px solid var(--ln-strong); background: var(--panel); } footer .tblock { border-top: none; max-width: var(--max-width); margin: 0 auto; } footer .legal { max-width: var(--max-width); margin: 0 auto; padding: 10px 22px 18px; font-family: var(--gor); font-size: 9.5px; letter-spacing: 1.5px; color: var(--mut); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } footer .legal a { color: var(--mut); text-decoration: none; } footer .legal a:hover { color: var(--ink); } /* Day / night / system theme toggle, sitting beside the TYPE line in the footer. */ .theme-toggle { display: inline-flex; gap: 1px; vertical-align: middle; margin-left: 10px; } .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; padding: 0; background: none; border: 1px solid transparent; border-radius: 4px; color: var(--mut); cursor: pointer; -webkit-appearance: none; appearance: none; } .theme-toggle button:hover { color: var(--ink); } .theme-toggle button[aria-pressed="true"] { color: var(--pri); border-color: var(--ln); background: var(--bg); } .theme-toggle svg { display: block; width: 14px; height: 14px; } /* ---- Small screens ----------------------------------------------------------- */ @media (max-width: 720px) { /* Stack the bar: lockup on top, the nav (links + CTA) wraps onto its own ruled row below it, so the links stay reachable instead of vanishing. */ .topbar-inner { flex-wrap: wrap; gap: 8px 16px; } .topbar-nav { width: 100%; margin-left: 0; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding-top: 10px; border-top: 1px solid var(--ln); } .topbar-nav .btn-cta { margin-left: auto; } .hero { padding: 40px 0 10px; } .method-step { grid-template-columns: 1fr; } .method-step svg { margin: 0 0 6px; } .pillar { border-right: none; border-bottom: 1px solid var(--ln); } .pillar:last-child { border-bottom: none; } } /* ---- Print -------------------------------------------------------------------- On paper the drafting-sheet grid was pinning every figure in the left reading column with a wide empty margin beside it, and the screen-only crop, fade, drop shadow and zoom badge were all coming through. Print a plain single column: full pages, no screen chrome, forced to the light palette so a page sent from night mode is not a slab of graphite. */ @media print { :root { color-scheme: light !important; } html, body { background: #fff; } .topbar, .band, .theme-toggle, .lightbox { display: none !important; } /* Collapse the two-column drafting grid so content (and figures) use the full page width; margin notes fall inline beneath what they annotate. */ .wrap, body.tufte .wrap, .wrap > section, .wrap > .hero, .hero, section { display: block !important; max-width: none !important; } body.tufte .wrap::before, .wrap > section::before, .hero::before { display: none !important; } .eyebrow, .shot-cap, .shot-from, .aside, .pull-aside, .note figcaption { grid-column: auto !important; max-width: none; } /* Figures print whole and never split across a page break: no height cap, cover-crop, alpha fade, drop shadow or zoom badge. */ .note, figure, .shot { break-inside: avoid; page-break-inside: avoid; } .note { display: block !important; } .note-shot, .shot-body:has(> img) { overflow: visible !important; filter: none !important; } .note .note-shot { filter: none !important; max-width: 5.6in; } .note-shot img, .shot-body:has(> img) img { width: auto; height: auto; max-width: 100%; max-height: 7.5in; object-fit: contain; -webkit-mask-image: none !important; mask-image: none !important; filter: none; cursor: auto; } .note-shot::before, .shot-body:has(> img)::before { display: none !important; } }