/* ========================================================================== Lost Grid Labs — "Sheet", the site's style layer Not a recolor. This is the grey-contours reference in images/inspiration taken as a whole design: charcoal ground, chalk linework carrying the composition, and a typographic system of wide uppercase grotesque over heavily tracked monospace marginalia — a printed survey sheet, not a brochure. It replaces site.css's palette and both its typefaces, and changes no structure or markup. The [data-theme="sheet"] scoping is a leftover from when this was one of five previewable looks, and index.html now states the attribute on so it always applies. Keeping the prefix is deliberate for now: flattening 300 lines of selectors drops their specificity from (0,2,0) to (0,1,0), which changes who wins against site.css rules like .stop:last-child. That is a mechanical cleanup, but it wants a browser to verify, so it is a follow-up rather than part of shipping. What the reference actually does, and what each part below answers to: - dense nested rings, not fine texture -> assets/topo-dense.svg - one short word, filled with terrain -> clipped h1 + topo-fill.svg - measurement, not decoration -> mono marginalia + indices - sharp corners, quiet hairlines -> no radii, solid rules ========================================================================== */ [data-theme="sheet"] { /* Charcoal, not black — the reference sits around #2B2B2B, which is what keeps the white linework from vibrating the way it does on pure #000. */ --page: #242525; --card: #2C2E2D; --ink: #F4F2EC; --muted: #9CA09B; --primary: #D8D4C8; --accent: #EDE9DE; /* bone. The only "color" is the terrain. */ --accent-ink: #1A1B1B; /* 15.9:1 */ --contour: #E9E6DC; --line: rgba(244, 242, 236, .15); --line-2: rgba(244, 242, 236, .24); --tint: rgba(237, 233, 222, .06); --page-rgb: 36, 37, 37; --art-filter: grayscale(1) invert(1) brightness(1.06); --topo-opacity: .42; --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --body: "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --measure: 1060px; /* the sheet runs wider than the brochure */ } /* ------------------------------------------------------------- terrain -- */ /* The plate-art density that reads as texture at hero scale is exactly what the reference is not: it wants few, broad landforms with many rings stacked tight. tools/gen-topo.mjs emits that as topo-dense.svg, which js/theme-preview.js swaps into .hero-topo's src for this theme — CSS content:url() on a replaced element is not reliable enough to trust. */ [data-theme="sheet"] .hero-topo { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 5%, #000 76%, transparent 100%); } [data-theme="sheet"] .hero { padding-block: 104px 96px; } /* The scrim is doing more work here than in the light palettes: at .5 the contours would run straight through the headline, so the left third is pulled almost fully back to the ground color. */ [data-theme="sheet"] .hero::after { background: radial-gradient( 82% 116% at 20% 50%, rgba(var(--page-rgb), .97) 0%, rgba(var(--page-rgb), .92) 44%, rgba(var(--page-rgb), .5) 72%, rgba(var(--page-rgb), 0) 94% ); } /* ---------------------------------------------------------------- type -- */ [data-theme="sheet"] h1, [data-theme="sheet"] h2, [data-theme="sheet"] h3 { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 108; text-transform: uppercase; letter-spacing: .005em; } /* Sized for the production sentence: three lines of caps, as large as 48 characters allow. */ [data-theme="sheet"] h1 { font-size: clamp(2.05rem, 5.2vw, 3.7rem); font-weight: 800; line-height: .98; letter-spacing: -.008em; max-width: 20ch; } /* The reference fills its display word with the contour art itself, so the headline IS a piece of the map rather than type sitting on one. The terrain is clipped to the glyphs, so its lines run through the bone letterforms — hatched in a mid grey rather than the page color, which keeps each letter a single solid shape instead of one with holes in it. Guarded: without background-clip the rule never applies and the headline stays solid --contour. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { [data-theme="sheet"] h1 { background-color: var(--contour); background-image: url("/assets/topo-fill.svg"); background-repeat: no-repeat; /* Sized in em rather than %, so the rings hold their scale against the type instead of against the column. Small, so the hatching stays fine relative to the glyphs. Zooming out to fewer, larger contours is the wrong instinct and was the bug in the first pass: a ring big enough to read as a ring cuts clean through a stem, and the word stops being a word. This sets the art's WIDTH; its height follows from the file's aspect, so the art has to be tall enough for the tallest headline block or it runs out and leaves the first and last lines flat. topo-fill.svg covers 6em here, against a worst case of six lines (5.88em) at a 320px viewport — which is why the phone clamp below matters to this rule, and why loosening it would mean regenerating the art. */ background-size: 13em auto; background-position: 38% 44%; -webkit-background-clip: text; background-clip: text; color: transparent; } } [data-theme="sheet"] .sec-head h2 { font-size: clamp(1.5rem, 2.7vw, 2.05rem); line-height: 1.08; letter-spacing: .002em; max-width: 20ch; } [data-theme="sheet"] .contact-side h2 { line-height: 1.08; letter-spacing: .002em; } [data-theme="sheet"] .lede { font-size: 14px; line-height: 1.75; letter-spacing: .04em; max-width: 48ch; } [data-theme="sheet"] .sec-head p, [data-theme="sheet"] .contact-side p { font-size: 13.5px; line-height: 1.7; letter-spacing: .02em; } /* Marginalia is the second voice of the sheet: mono, tracked hard, always small. Every label, index and caption switches over. */ [data-theme="sheet"] .eyebrow, [data-theme="sheet"] .marg, [data-theme="sheet"] .sheet, [data-theme="sheet"] .proj .meta, [data-theme="sheet"] label, [data-theme="sheet"] .nav-links a, [data-theme="sheet"] .btn, [data-theme="sheet"] .link, [data-theme="sheet"] .form-msg, [data-theme="sheet"] .work-empty, [data-theme="sheet"] .nav-toggle { font-family: var(--mono); } [data-theme="sheet"] .eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .3em; color: var(--muted); } [data-theme="sheet"] .eyebrow::after { max-width: 120px; opacity: .5; } [data-theme="sheet"] .marg, [data-theme="sheet"] .sheet, [data-theme="sheet"] .proj .meta, [data-theme="sheet"] label { font-weight: 500; letter-spacing: .18em; } /* --------------------------------------------------- rules and corners -- */ /* Nothing on a survey sheet is rounded. The rules stay solid hairlines though — dashing every border read as a dotted-line mess and fought the contours, which are the only broken lines that should be on the page. */ [data-theme="sheet"] .btn, [data-theme="sheet"] input, [data-theme="sheet"] select, [data-theme="sheet"] textarea, [data-theme="sheet"] .nav-toggle, [data-theme="sheet"] .pin { border-radius: 0; } [data-theme="sheet"] .sec { padding-block: 76px; } /* ----------------------------------------------------------------- nav -- */ /* The wordmark carries the sheet's identity, so it is set as a mark rather than as a nav item. Tracking eases back as it grows — .16em is right at 15px and starts to read as gappy by 21px. The tracking is a variable because .brand-o has to cancel it; see below. */ [data-theme="sheet"] .brand { font-family: var(--display); font-weight: 700; font-size: 21px; --track: .13em; text-transform: uppercase; letter-spacing: var(--track); } /* letter-spacing is inserted between typographic characters, and the contour "o" is an inline rather than a character — so the browser adds the tracking after the L but not after the mark, and the o sits hard against the s with a hole in front of it. The trailing margin puts the missing step back. site.css has the same asymmetry, but its tracking is -.01em, so it is a tenth of a pixel rather than three. The size is Sheet's own problem: site.css sets .64em, which is scaled to the LOWERCASE o of "Lost" in the Fraunces wordmark, and Sheet sets the whole mark in caps. So the rings were sitting next to cap-height letters at lowercase size. Measured rather than eyeballed, since none of it is guessable from the markup: the three rings ink 91% of their 20x20 viewBox and sit centred in it, and Archivo's cap height is .731em. At stroke-width 2.1 the ink is 94.2% of the box, so a .78em box draws rings .735em tall — cap height — and centring those on the cap band puts the box .027em below the baseline. The stroke is heavier than the 1.5 the markup carries because at cap size the hairline reads far lighter than the 700-weight stems beside it. It cannot match them outright: the rings are ~4 viewBox units apart, so a true stem weight would close the gaps and the contour would read as a blob. 2.1 is as close as it goes while the rings stay rings. */ [data-theme="sheet"] .brand-o { color: var(--contour); width: .78em; height: .78em; vertical-align: -.027em; stroke-width: 2.1; margin-inline: .045em calc(.045em + var(--track)); } [data-theme="sheet"] .nav { padding-block: 22px; } [data-theme="sheet"] .nav-links a { font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; } [data-theme="sheet"] .btn { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 13px 22px; } [data-theme="sheet"] .nav .btn { padding: 9px 16px; font-size: 9.5px; } [data-theme="sheet"] .link { font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); } /* -------------------------------------------------------------- legend -- */ /* A real legend keys its symbols. Numbering them turns the services list into the sheet's index without touching the markup — the counter sits in the symbol cell so the three columns stay intact. */ [data-theme="sheet"] .legend-list { counter-reset: legend; } [data-theme="sheet"] .legend-row { counter-increment: legend; padding-block: 30px; } [data-theme="sheet"] .sym { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; } [data-theme="sheet"] .sym::before { content: counter(legend, decimal-leading-zero); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--muted); } [data-theme="sheet"] .legend-row h3 { font-size: 14.5px; letter-spacing: .07em; line-height: 1.35; } [data-theme="sheet"] .legend-row p { font-size: 13.5px; line-height: 1.7; letter-spacing: .02em; } /* --------------------------------------------------------------- plates -- */ [data-theme="sheet"] .proj h3 { font-size: 14px; letter-spacing: .07em; line-height: 1.35; } [data-theme="sheet"] .proj .desc, [data-theme="sheet"] .stop .desc { font-size: 13px; line-height: 1.7; letter-spacing: .02em; } [data-theme="sheet"] .proj .meta { font-size: 9.5px; color: var(--muted); } /* ---------------------------------------------------------------- route -- */ /* Square stations rather than round pins — a plotted traverse marks its points with ticks and boxes, and the circle was the brochure's idea. */ [data-theme="sheet"] .pin { width: 30px; height: 30px; border-color: var(--line-2); color: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; } [data-theme="sheet"] .trail { border-top-color: var(--line-2); } [data-theme="sheet"] .dest { color: var(--ink); } [data-theme="sheet"] .stop h3 { font-size: 14.5px; letter-spacing: .07em; } /* -------------------------------------------------------------- contact -- */ [data-theme="sheet"] .mail { font-family: var(--mono); font-size: 14px; letter-spacing: .06em; color: var(--ink); } [data-theme="sheet"] label { font-size: 9.5px; } [data-theme="sheet"] input, [data-theme="sheet"] select, [data-theme="sheet"] textarea { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; background: transparent; /* the sheet, ruled — not a filled card */ border-color: var(--line-2); } [data-theme="sheet"] .form-msg { font-size: 11px; letter-spacing: .1em; } /* --------------------------------------------------------------- footer -- */ [data-theme="sheet"] .sheet { font-size: 9.5px; } [data-theme="sheet"] .foot .brand { font-size: 15px; } /* ----------------------------------------------------------- responsive -- */ @media (max-width: 700px) { /* site.css rotates the route here: the dashed trail becomes a vertical rule and the pins straddle it. That costs 37px of indent on every line of copy while the section head and the pins themselves stay flush, so the section reads as two ragged left edges — which is what it looks like at phone width. Keep the relationship the route already has at full width instead: marker row, then the text beneath it, both flush to the same edge as everything else on the page. The trail simply runs horizontally, as it does on desktop, so the metaphor survives the stack. */ [data-theme="sheet"] .route { padding-left: 0; } [data-theme="sheet"] .stop { padding-left: 0; padding-bottom: 36px; border-left: 0; } /* site.css already zeroes this, but .stop:last-child and [data-theme="sheet"] .stop score the same specificity, so the rule above would win on source order and hang 36px off the last waypoint */ [data-theme="sheet"] .stop:last-child { padding-bottom: 0; } [data-theme="sheet"] .stop-mark { margin-left: 0; margin-bottom: 15px; } /* both are hidden by site.css once the trail goes vertical; horizontal again, they have their meaning back — and the destination mark lands at the end of the last row rather than vanishing */ [data-theme="sheet"] .trail, [data-theme="sheet"] .dest { display: block; } } @media (max-width: 640px) { [data-theme="sheet"] .hero { padding-block: 60px 52px; } /* Not just taste: at 15vw/3.6rem the headline took seven lines at 360px, which buries the lede and both CTAs below the fold AND overruns the fill art, leaving the first and last lines flat. Four or five lines here — and a much cheaper fill, since the art only has to cover what the headline can actually reach. */ [data-theme="sheet"] h1 { font-size: clamp(2.1rem, 11vw, 3rem); } [data-theme="sheet"] .sec { padding-block: 54px; } [data-theme="sheet"] .nav-links { background: var(--card); } /* the mark plus the Menu button is a tight fit at 400px once the wordmark is tracked out this far */ /* --track, not letter-spacing: .brand-o's trailing margin reads it */ [data-theme="sheet"] .brand { font-size: 17px; --track: .11em; } [data-theme="sheet"] .nav { padding-block: 16px; } }