/* ========================================================================== NEGUSTOLONOW — ARCHIVE 001 — THE LAST HUMAN UNIFORM site/css/negusto.css — the shared design system. Every page loads this first. Museum catalogue x obscure European fashion house x internet subculture x beautiful mistake. Law, stated once: - Tide colours and one interior colour. Nothing else. No neon, no glow, no gradient used as ornament, no glass, no rounded card, no shadow that implies elevation. border-radius is 0 except the door-lamp. - Typography is aggressive; everything else holds still. One display face, set too large, hard against an edge. - Negative space is a material. Default to more. Fonts (Google): Sofia Sans Extra Condensed (stands in for Mole Grotesque), Spectral (the Keepers' text), Courier Prime (accession numbers, the machine's typed hand). All three have system fallbacks; the site must survive offline over file://. Contents: 1 tokens · 2 reset/base · 3 type · 4 layout · 5 shell · 6 plate/caption · 7 labels, stamps, status · 8 spec, index, timeline, vocab · 9 ledger thread, lineage · 10 marginalia, hands · 11 slip, acquisition, buttons · 12 notice, intertitle, film beats · 13 furniture (km rule, lamp, ruled-empty) · 13b the surface and the fold · 13c the word, the card, the pocket · 13d the step · 14 utilities · 15 the colours · 16 motion · 17 print ========================================================================== */ /* 1. TOKENS ---------------------------------------------------------------- */ :root { /* colour law, Interior Colour Ordinance YR 14 */ --salt: #E9E5DA; --slack: #B8B2A3; --mole: #7C7B76; --former: #4A4F52; --lampblack: #1B1B1A; --iodine: #9A4B1C; /* stock: not colours, papers */ --buff: #D5C29A; --tissue: #DDD3BD; --board: #C9C3B4; --salt-deep: #DFDACD; --mimeo: #6A6080; --iodine-deep: #7E3C14; /* the four registered by the plan, and the only values added since the ordinance: iodine lit (the same ink on lampblack, where iodine does not carry: the accent inside the colours), gentian (Mercy Room's one colour, rationed as iodine is), and the aubergine of what is printed on the cloth, with its darker ink. */ --iodine-lit: #E2A46F; --gentian: #3E2A66; --aubergine: #513848; --aubergine-ink: #41212F; /* roles. Rooms re-assign these; primitives only ever read roles. */ --paper: var(--salt); --paper-2: var(--salt-deep); --ink: var(--lampblack); --ink-soft: #4A4945; --ink-faint: #605F5A; /* faint, but still 4.5:1 on salt and salt-deep: it carries field labels at micro size */ --accent: var(--iodine); --hair: rgba(27, 27, 26, 0.26); --line: rgba(27, 27, 26, 0.9); --grain: none; --f-display: "Sofia Sans Extra Condensed", "Haettenschweiler", "Impact", "Arial Narrow", "Helvetica Neue", sans-serif; --f-serif: "Spectral", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; --f-mono: "Courier Prime", "Courier New", Courier, ui-monospace, monospace; /* type scale. The top three are meant to be too large. THE TYPE RULE (comment only; no value here changed). Display scale carries a NAME or a NUMBER out of the world: a world's title, a person, a kilometre, a year, an accession number, a class, or a line a real poster in Ossel carried. It never carries a slogan, a claim about the house, or an abstract noun. Test any large line by reading it at body size; if it only works large, it was decoration. Pages enforce this in their own files (house.css states it in full). */ --t-mega: clamp(5rem, 23vw, 24rem); --t-giant: clamp(3.6rem, 13vw, 13rem); --t-huge: clamp(2.8rem, 8vw, 7.5rem); --t-large: clamp(2rem, 4.4vw, 3.8rem); --t-title: clamp(1.45rem, 2.3vw, 2.1rem); --t-lede: clamp(1.2rem, 1.65vw, 1.55rem); --t-body: 1.0625rem; --t-small: 0.875rem; --t-micro: 0.72rem; --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2.5rem; --s-7: 4rem; --s-8: 6.5rem; --s-9: clamp(7rem, 15vw, 13rem); --s-10: clamp(10rem, 30vw, 26rem); --gutter: clamp(1rem, 3.4vw, 3.25rem); --wrap: 100rem; --measure: 33rem; --rule-hair: 1px; --rule: 2px; --rule-heavy: 7px; --header-h: 3.25rem; --ease: cubic-bezier(0.2, 0.7, 0.1, 1); } /* 2. RESET / BASE ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--f-serif); font-size: var(--t-body); font-weight: 400; line-height: 1.55; font-feature-settings: "kern", "liga", "onum"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* the page is paper: a generated grain tile, set by NegustoArt.pageGrain(). Absent without JS; nothing depends on it. */ body::after { content: ""; position: fixed; inset: 0; z-index: 900; pointer-events: none; background-image: var(--grain); background-size: 220px 220px; mix-blend-mode: multiply; opacity: 0.32; } img, svg, canvas, video { display: block; max-width: 100%; } canvas { image-rendering: auto; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; } ol, ul { list-style: none; } table { border-collapse: collapse; width: 100%; } button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; } a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--ink-faint); transition: text-decoration-color 0.2s, color 0.2s; } a:hover { text-decoration-color: var(--accent); color: var(--accent); } hr { border: 0; border-top: var(--rule-hair) solid var(--line); margin: var(--s-6) 0; } hr.heavy { border-top-width: var(--rule-heavy); } ::selection { background: var(--iodine); color: var(--salt); } em { font-style: italic; } strong { font-weight: 500; } code { font-family: var(--f-mono); font-size: 0.92em; letter-spacing: -0.01em; } [hidden] { display: none !important; } /* focus: a ruled box in iodine. Never removed. */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .room--lampblack :focus-visible, .room--former :focus-visible { outline-color: var(--buff); } .skip-link { position: absolute; left: var(--gutter); top: -6rem; z-index: 1000; background: var(--ink); color: var(--paper); padding: var(--s-3) var(--s-4); font-family: var(--f-mono); font-size: var(--t-small); text-decoration: none; } .skip-link:focus { top: var(--s-3); color: var(--paper); } /* 3. TYPE ------------------------------------------------------------------ */ /* display: Mole Grotesque. Condensed capitals, too large. */ /* set by js/shell.js while the display face is absent: the one-weight fallbacks are not given a synthetic bold */ html.no-webfont { font-synthesis-weight: none; } .display, .mega, .giant, .huge, .headline { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; line-height: 0.82; letter-spacing: -0.012em; font-feature-settings: "kern", "lnum"; margin: 0; text-wrap: balance; overflow-wrap: anywhere; } .mega { font-size: var(--t-mega); line-height: 0.78; letter-spacing: -0.02em; } .giant { font-size: var(--t-giant); line-height: 0.8; } .huge { font-size: var(--t-huge); } .headline { font-size: var(--t-large); line-height: 0.9; } .display--light { font-weight: 400; } .display--iodine { color: var(--accent); } /* hard against the top edge: pulls the cap-height to the container's top. Use on the first child of a .room--flush-top. */ .to-top-edge { margin-top: -0.04em; } /* Under the sticky header the pull had nothing to pull against: the band painted over the cap tops (OBJECTS, PROCESS, at both widths). In the first room of a page the heading gives up the pull and keeps its glyph overflow clear of the band; the band itself is held to exactly var(--header-h) (§5), the offset the root already reserves in scroll-padding-top, so nothing sits under it. */ main > .room:first-child .to-top-edge { margin-top: 0; padding-top: 0.08em; } /* bleeds off the right edge and is cut by it. The parent must be .clip. */ .bleed-right { white-space: nowrap; overflow-wrap: normal; text-wrap: nowrap; } .clip { overflow: hidden; } .title { font-family: var(--f-display); font-weight: 700; font-size: var(--t-title); line-height: 1; text-transform: uppercase; letter-spacing: 0.005em; } .lede { font-family: var(--f-serif); font-weight: 300; font-size: var(--t-lede); line-height: 1.38; max-width: 36rem; } .prose { max-width: var(--measure); } .prose > * + * { margin-top: 1em; } .prose p { hyphens: auto; } .prose--wide { max-width: 44rem; } .small { font-size: var(--t-small); line-height: 1.5; } .micro { font-family: var(--f-display); font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.35; } .caps { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.95rem; line-height: 1.2; } .mono, .typed { font-family: var(--f-mono); font-size: 0.9375rem; line-height: 1.5; letter-spacing: -0.005em; font-feature-settings: normal; } .typed--small { font-size: var(--t-small); } .soft { color: var(--ink-soft); } .faint { color: var(--ink-faint); } .iodine { color: var(--accent); } .num { font-family: var(--f-display); font-weight: 800; font-feature-settings: "lnum", "tnum"; } .yr { font-family: var(--f-mono); white-space: nowrap; } .nowrap { white-space: nowrap; } /* 4. LAYOUT ---------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 62rem; } .wrap--text { max-width: 46rem; } .wrap--flush { padding-inline: 0; max-width: none; } /* a room: one full-bleed section of the world. Rooms re-assign the role tokens. */ .room { position: relative; width: 100%; padding-block: var(--s-9); background: var(--paper); color: var(--ink); } .room--tight { padding-block: var(--s-7); } .room--tall { min-height: 100vh; min-height: 100svh; } .room--flush-top { padding-top: 0; } .room--flush-bottom { padding-bottom: 0; } .room--ruled { border-top: var(--rule-hair) solid var(--line); } .room--heavy { border-top: var(--rule-heavy) solid var(--line); } .room--salt { --paper: var(--salt); --paper-2: var(--salt-deep); } .room--deep { --paper: var(--salt-deep); --paper-2: #D5CFC1; } .room--slack { --paper: var(--slack); --paper-2: #ADA798; --ink-soft: #3A3936; --ink-faint: #464440; --hair: rgba(27, 27, 26, 0.34); } .room--buff { --paper: var(--buff); --paper-2: #CBB78C; --ink-soft: #40392A; --ink-faint: #564E3A; --hair: rgba(40, 30, 10, 0.34); } .room--mole { --paper: var(--mole); --paper-2: #71706B; --ink: #141413; --ink-soft: #242422; --ink-faint: #3A3A37; --hair: rgba(20, 20, 19, 0.4); --accent: #5E2C0E; } .room--former { --paper: var(--former); --paper-2: #42474A; --ink: var(--salt); --ink-soft: #CFCBC0; --ink-faint: #C2C1B8; --hair: rgba(233, 229, 218, 0.28); --line: rgba(233, 229, 218, 0.9); --accent: #D08A5A; } .room--lampblack { --paper: var(--lampblack); --paper-2: #262625; --ink: var(--salt); --ink-soft: #C9C5BA; --ink-faint: #918F88; --hair: rgba(233, 229, 218, 0.24); --line: rgba(233, 229, 218, 0.9); --accent: #C97A45; } /* the one room with colour: where someone sits */ .room--iodine { --paper: var(--iodine); --paper-2: var(--iodine-deep); --ink: var(--salt); --ink-soft: #F0DCCB; --ink-faint: #EFDAC8; --hair: rgba(233, 229, 218, 0.35); --line: rgba(233, 229, 218, 0.92); --accent: var(--salt); } /* the room where the grey breaks: lampblack, the accent iodine lit, made to hold .colours (§15) */ .room--colours { --paper: var(--lampblack); --paper-2: color-mix(in srgb, var(--lampblack) 92%, var(--salt)); --ink: var(--salt); --ink-soft: color-mix(in srgb, var(--salt) 84%, var(--lampblack)); --ink-faint: color-mix(in srgb, var(--salt) 58%, var(--lampblack)); --hair: rgba(233, 229, 218, 0.24); --line: rgba(233, 229, 218, 0.9); --accent: var(--iodine-lit); position: relative; isolation: isolate; overflow: clip; } .room__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-4) var(--s-6); padding-bottom: var(--s-4); margin-bottom: var(--s-7); border-bottom: var(--rule) solid var(--line); } .room__no { font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink-soft); white-space: nowrap; } /* at phone width the number goes under the heading and may wrap; beside it, a long number squeezed the heading to one letter per line */ @media (max-width: 47.99rem) { .room__head { grid-template-columns: minmax(0, 1fr); } .room__head > * { min-width: 0; overflow-wrap: break-word; } .room__no { white-space: normal; } } /* deliberate emptiness. Specify it as you would specify cloth. */ .void { display: block; height: var(--s-9); } .void--s { height: var(--s-7); } .void--l { height: var(--s-10); } .void--xl { height: 70vh; } /* the catalogue grid: twelve columns; children place themselves. Below 48rem everything is one column. */ .cat-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-8); align-items: start; } .cat-grid--tight { row-gap: var(--s-6); } .cat-grid--end { align-items: end; } .cat-grid > * { grid-column: 1 / -1; min-width: 0; } @media (min-width: 48rem) { .span-2 { grid-column-end: span 2; } .span-3 { grid-column-end: span 3; } .span-4 { grid-column-end: span 4; } .span-5 { grid-column-end: span 5; } .span-6 { grid-column-end: span 6; } .span-7 { grid-column-end: span 7; } .span-8 { grid-column-end: span 8; } .span-9 { grid-column-end: span 9; } .span-10 { grid-column-end: span 10; } .span-12 { grid-column: 1 / -1; } .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; } .start-4 { grid-column-start: 4; } .start-5 { grid-column-start: 5; } .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; } .start-10 { grid-column-start: 10; } .drop-1 { margin-top: var(--s-7); } .drop-2 { margin-top: var(--s-9); } .drop-3 { margin-top: var(--s-10); } } @media (min-width: 30rem) and (max-width: 47.99rem) { .cat-grid--pairs > * { grid-column: span 6; } } /* two unequal columns: text and plate. */ .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--gutter); align-items: start; } @media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .split--narrow-left { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } .split--reverse > :first-child { order: 2; } .split__sticky { position: sticky; top: calc(var(--header-h) + var(--s-5)); } } .stack > * + * { margin-top: var(--gap, var(--s-5)); } .stack--s { --gap: var(--s-3); } .stack--l { --gap: var(--s-7); } .stack--xl { --gap: var(--s-9); } .cluster { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: baseline; } .between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3) var(--s-5); } /* a strip that is longer than the page: scrolls inside itself, never the page. */ .strip { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; padding-bottom: var(--s-3); } .strip > * { min-width: max(100%, var(--strip-w, 220rem)); } .strip:focus-visible { outline-offset: -2px; } /* 5. SHELL: header, nav, footer (injected by js/shell.js) ---------------- */ /* The band is exactly var(--header-h) tall, the offset the root reserves in scroll-padding-top; the rule at its foot is at its foot and never above it. */ [data-shell="header"] { position: sticky; top: 0; z-index: 800; min-height: var(--header-h); background: var(--salt); } .shell-header { background: var(--salt); color: var(--lampblack); border-bottom: var(--rule-hair) solid rgba(27, 27, 26, 0.9); min-height: var(--header-h); } /* The first row is a grid of three: the mark, where you are, and the word Pocket at the far right, in the fixed part of the header and never inside the nav. The nav sits between them on a wide screen and is the row below at 52rem. Pocket is set the same whether the pocket is empty or full: nothing here is a mark. */ .shell-header__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "mark where nav pocket"; align-items: center; column-gap: var(--s-5); row-gap: 0; min-height: var(--header-h); padding-inline: var(--gutter); } .shell-mark { grid-area: mark; font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .shell-mark span { font-weight: 400; color: var(--mole); padding-inline: 0.12em; } .shell-mark:hover { color: var(--lampblack); } /* Which world you are in, then where in it. The world half never truncates on a wide screen: it is the one thing the header must always be able to answer. */ .shell-where { grid-area: where; display: flex; align-items: baseline; gap: 0.7em; min-width: 0; overflow: hidden; margin: 0; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.02em; color: #4A4945; white-space: nowrap; text-transform: uppercase; } .shell-where__world { flex: 0 0 auto; color: var(--lampblack); } .shell-where__line { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #6B6A65; } .shell-where__line:not(:empty)::before { content: "— "; } /* The world label opens the worlds. The strip hangs from the sticky header (its containing block), so .shell-where's overflow never clips it. */ .shell-worlds { flex: 0 0 auto; min-width: 0; } .shell-worlds > summary { display: inline-flex; align-items: baseline; gap: 0.45em; list-style: none; cursor: pointer; border-bottom: var(--rule-hair) solid rgba(27, 27, 26, 0.26); padding-bottom: 0.18em; } .shell-worlds > summary::-webkit-details-marker { display: none; } .shell-worlds > summary:hover, .shell-worlds > summary:focus-visible, .shell-worlds[open] > summary { color: var(--iodine); border-bottom-color: var(--iodine); } .shell-worlds__caret { width: 0.42em; height: 0.42em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.18em) rotate(45deg); flex: 0 0 auto; } .shell-worlds[open] .shell-worlds__caret { transform: translateY(0.05em) rotate(-135deg); } .shell-worlds__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--salt); border-bottom: var(--rule-hair) solid rgba(27, 27, 26, 0.9); padding: var(--s-4) var(--gutter) var(--s-5); white-space: normal; text-transform: none; letter-spacing: 0; } .shell-worlds__panel ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); max-width: var(--wrap); margin: 0 auto; padding: 0; list-style: none; } .shell-worlds__panel a { display: grid; gap: 0.3rem; padding-top: var(--s-3); border-top: 2px solid transparent; text-decoration: none; color: var(--lampblack); } .shell-worlds__panel a:hover, .shell-worlds__panel a:focus-visible { border-top-color: var(--lampblack); } .shell-worlds__panel a[aria-current] { border-top-color: var(--iodine); } .shell-worlds__panel i { font-family: var(--f-mono); font-style: normal; font-size: 0.68rem; color: #605F5A; } .shell-worlds__panel a[aria-current] i { color: var(--iodine); } .shell-worlds__panel b { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } .shell-worlds__panel span { font-family: var(--f-serif); font-size: var(--t-small); color: #4A4945; line-height: 1.35; } /* the pocket: one mono word, ruled, at the edge. It has no state and no count. */ .shell-pocket { grid-area: pocket; margin: 0; padding: 0.3rem 0 0.3rem var(--s-5); border-left: var(--rule-hair) solid rgba(27, 27, 26, 0.26); font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; white-space: nowrap; } .shell-pocket a { color: var(--lampblack); text-decoration: none; border-bottom: var(--rule-hair) solid rgba(27, 27, 26, 0.26); padding-bottom: 0.22em; } .shell-pocket a:hover, .shell-pocket a:focus-visible { color: var(--iodine); border-bottom-color: var(--iodine); } .shell-nav { grid-area: nav; min-width: 0; } .shell-nav ul { display: flex; gap: clamp(0.9rem, 2vw, 2rem); align-items: center; } .shell-nav a { display: inline-flex; align-items: baseline; gap: 0.4em; padding-block: 0.35rem; font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; } .shell-nav a i { font-family: var(--f-mono); font-style: normal; font-weight: 400; font-size: 0.68rem; letter-spacing: 0; color: #605F5A; } .shell-nav a:hover { color: var(--lampblack); border-bottom-color: var(--lampblack); } .shell-nav a[aria-current="page"] { border-bottom-color: var(--iodine); } .shell-nav a[aria-current="page"] i { color: var(--iodine); } @media (max-width: 52rem) { /* mark · world · Pocket on one row, all three in view at 360; the walk is the row under it */ .shell-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark where pocket" "nav nav nav"; column-gap: var(--s-3); row-gap: 0; padding-block: 0.45rem 0; align-content: space-between; } .shell-where { justify-content: flex-end; min-width: 0; } .shell-where__line { display: none; } /* on a phone the header answers the world; the nav answers the stop */ /* only here, and only as a last resort with the fallback face, may the world word shorten: nothing scrolls sideways */ .shell-where__world { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .shell-worlds { flex: 0 1 auto; overflow: hidden; } .shell-worlds__panel ul { grid-template-columns: minmax(0, 1fr); gap: 0; } .shell-worlds__panel a { grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; column-gap: 0; padding-block: 0.7rem; border-top: var(--rule-hair) solid rgba(27, 27, 26, 0.18); } .shell-worlds__panel a[aria-current] { border-top-color: rgba(27, 27, 26, 0.18); } .shell-worlds__panel span { grid-column: 2; } .shell-pocket { padding: 0.2rem 0; border-left: 0; font-size: var(--t-micro); } .shell-nav { align-self: end; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-top: var(--rule-hair) solid rgba(27, 27, 26, 0.26); margin-top: 0.4rem; overflow-x: auto; scrollbar-width: none; } .shell-nav::-webkit-scrollbar { display: none; } .shell-nav ul { justify-content: space-between; gap: 1rem; } /* a scrolling flex row drops its right padding; this keeps the last stop off the edge */ .shell-nav ul::after { content: ""; flex: 0 0 var(--gutter); } .shell-nav a { font-size: 0.95rem; padding-block: 0.5rem; white-space: nowrap; } :root { --header-h: 5.2rem; } } /* at 360 the longest world word (Mercy Room) must still stand whole beside the mark and Pocket */ @media (max-width: 30rem) { .shell-mark { font-size: 1.2rem; } .shell-header__inner { column-gap: var(--s-2); } .shell-where { font-size: 0.68rem; } } .shell-footer { position: relative; background: var(--lampblack); color: var(--salt); overflow: hidden; --ink: var(--salt); --ink-soft: #C9C5BA; --ink-faint: #918F88; --hair: rgba(233, 229, 218, 0.24); --line: rgba(233, 229, 218, 0.9); --accent: #C97A45; --paper: var(--lampblack); } .shell-footer__inner { padding: var(--s-8) var(--gutter) 0; max-width: var(--wrap); margin-inline: auto; } .shell-footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); padding-bottom: var(--s-8); } .shell-footer__grid > * { grid-column: 1 / -1; } /* four columns: the colophon, this world's walk, the other worlds, the house */ @media (min-width: 48rem) { .shell-footer__col--a { grid-column: 1 / -1; } .shell-footer__col--b { grid-column: 1 / span 4; } .shell-footer__col--c { grid-column: 5 / span 4; } .shell-footer__col--d { grid-column: 9 / span 4; } } @media (min-width: 64rem) { .shell-footer__col--a { grid-column: 1 / span 5; } .shell-footer__col--b { grid-column: 6 / span 2; } .shell-footer__col--c { grid-column: 8 / span 3; } .shell-footer__col--d { grid-column: 11 / span 2; } } .shell-footer h2 { font-family: var(--f-display); font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-3); } .shell-footer p, .shell-footer li { font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); } .shell-footer li + li { margin-top: 0.3rem; } .shell-footer a { color: var(--salt); } .shell-footer__walk i { font-family: var(--f-mono); font-style: normal; color: var(--ink-faint); padding-right: 0.3em; } .shell-footer__walk a[aria-current="page"], .shell-footer__house a[aria-current="page"] { color: var(--accent); } .shell-footer__imprint { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-6); padding-block: var(--s-4); border-top: var(--rule-hair) solid var(--hair); font-family: var(--f-mono); font-size: var(--t-micro); color: var(--ink-faint); text-transform: uppercase; } /* the house name, once, too large, cut by the bottom edge */ .shell-footer p.shell-footer__name { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(4.5rem, 24.5vw, 30rem); line-height: 0.74; letter-spacing: -0.02em; white-space: nowrap; margin: 0 0 -0.16em -0.03em; padding-inline: var(--gutter); color: var(--salt); user-select: none; } /* 5b. THE HAND-OFF (injected by js/shell.js into [data-shell="walk"]) -------- The last thing in
on every World 001 page: where you are in the walk, what is behind you, and one door out with a reason written on it. The word on the door is the name of a place or a thing in the world, so it may be large; nothing else here is. */ .walk { background: var(--salt-deep); color: var(--lampblack); border-top: var(--rule-hair) solid rgba(27, 27, 26, 0.9); --paper: var(--salt-deep); --ink: var(--lampblack); } .walk__inner { padding-block: var(--s-7) var(--s-8); display: grid; gap: var(--s-4); } .walk__pos { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: #6B6A65; } .walk__pos-no { color: var(--iodine); } .walk__back { font-size: var(--t-small); color: #4A4945; max-width: var(--measure); } .walk__next { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-5); row-gap: var(--s-2); align-items: baseline; text-decoration: none; padding-top: var(--s-4); border-top: var(--rule-hair) solid rgba(27, 27, 26, 0.35); } .walk__next-key { font-family: var(--f-mono); font-size: var(--t-small); color: #6B6A65; } .walk__next-word { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.92; font-size: clamp(2rem, 6vw, 3.6rem); } .walk__next-why { grid-column: 2; max-width: var(--measure); font-size: var(--t-body); line-height: 1.5; color: #35342F; } .walk__next:hover .walk__next-word, .walk__next:focus-visible .walk__next-word { color: var(--iodine); } .walk__side { font-size: var(--t-small); color: #4A4945; max-width: var(--measure); } @media (max-width: 48rem) { .walk__next { grid-template-columns: minmax(0, 1fr); } .walk__next-why { grid-column: 1; } } /* 6. PLATE + CAPTION ------------------------------------------------------- */ /*
…
*/ .plate { position: relative; margin: 0; } /* figure.plate.drop-N: the reset above must not cancel the stagger */ @media (min-width: 48rem) { .plate.drop-1 { margin-top: var(--s-7); } .plate.drop-2 { margin-top: var(--s-9); } .plate.drop-3 { margin-top: var(--s-10); } } .plate__frame { position: relative; display: block; width: 100%; background: var(--board); overflow: hidden; } .plate__frame > canvas, canvas.art-canvas { display: block; width: 100%; height: auto; } .plate__frame[data-fill] { height: 100%; } .plate__frame[data-fill] > canvas { height: 100%; } .plate__frame:not([data-art-state]) { min-height: 8rem; } .plate--bare .plate__frame { background: transparent; } .plate--narrow { max-width: 22rem; } .plate--mid { max-width: 34rem; } .plate--right { margin-left: auto; } .plate--askew .plate__frame { transform: rotate(-0.6deg); } .plate--askew-r .plate__frame { transform: rotate(0.8deg); } .plate--bleed { margin-inline: calc(var(--gutter) * -1); } a.plate__link { display: block; text-decoration: none; color: inherit; } a.plate__link:hover .caption__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* a wall of a room given to one plate */ .plate--wall .plate__frame { height: min(86vh, 60rem); } /* the museum label. Order is law: accession, title, medium/date/condition, damage, content. */ .caption { margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--rule-hair) solid var(--line); display: grid; gap: 0.35rem; max-width: 30rem; font-size: var(--t-small); line-height: 1.45; color: var(--ink); } .caption--wide { max-width: 40rem; } .caption--plain { border-top: 0; padding-top: 0; } .caption__acc { font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink); } .caption__title { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; } .caption__medium { font-family: var(--f-serif); font-style: italic; color: var(--ink-soft); } .caption__damage, .caption__text { color: var(--ink-soft); } .caption__damage::before { content: "Damage. "; font-family: var(--f-display); font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-style: normal; } .caption__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: baseline; font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-soft); } /* a label card, as fixed to a wall beside a holding */ .label-card { background: var(--paper-2); padding: var(--s-4) var(--s-5) var(--s-5); max-width: 24rem; border-left: var(--rule-heavy) solid var(--ink); display: grid; gap: 0.4rem; font-size: var(--t-small); } /* 7. ACCESSION LABELS, STAMPS, EDITIONS, STATUS ---------------------------- */ .accession { font-family: var(--f-mono); font-size: 0.8125rem; line-height: 1; white-space: nowrap; letter-spacing: 0; font-feature-settings: normal; } .accession--tag { display: inline-block; padding: 0.38em 0.6em 0.3em; background: var(--paper-2); border: var(--rule-hair) solid var(--hair); transform: rotate(-0.4deg); } .accession--boxed { display: inline-block; padding: 0.35em 0.55em 0.28em; border: var(--rule-hair) solid var(--line); } .accession--large { font-size: 1.05rem; } a.accession { text-decoration: none; border-bottom: 1px dotted var(--ink-faint); } a.accession:hover { border-bottom-color: var(--accent); } .accession--withdrawn { text-decoration: line-through; color: var(--ink-faint); } /* condition C1–C5. C4 draws five ticks, grade filled. */ .condition { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--f-mono); font-size: 0.78rem; white-space: nowrap; } .condition::after { content: ""; width: 3.1rem; height: 0.55rem; background: linear-gradient(90deg, var(--ink) 0 var(--fill, 0%), transparent 0) 0 0 / 100% 100% no-repeat, repeating-linear-gradient(90deg, var(--ink-faint) 0 1px, transparent 1px 20%) 0 0 / 100% 100%; border-right: 1px solid var(--ink-faint); opacity: 0.85; } .condition[data-grade="1"] { --fill: 20%; } .condition[data-grade="2"] { --fill: 40%; } .condition[data-grade="3"] { --fill: 60%; } .condition[data-grade="4"] { --fill: 80%; } .condition[data-grade="5"] { --fill: 100%; } /* edition lockup: OBJECT 004 / EDITION 37 OF 100 */ .edition { display: inline-grid; gap: 0.1rem; font-family: var(--f-display); text-transform: uppercase; line-height: 0.9; } .edition__object { font-weight: 800; font-size: var(--t-large); letter-spacing: -0.005em; } .edition__no { font-weight: 400; font-size: var(--t-title); letter-spacing: 0.02em; color: var(--ink-soft); } .edition__no b { font-weight: 800; color: var(--ink); } .edition--inline { display: inline-flex; gap: 0.5em; align-items: baseline; } .edition--inline .edition__object, .edition--inline .edition__no { font-size: var(--t-title); } /* the rubber stamp. Slightly off square; never animated. */ .stamp { display: inline-block; padding: 0.42em 0.7em 0.34em; border: 3px double currentColor; font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); transform: rotate(-3deg); mix-blend-mode: multiply; opacity: 0.88; white-space: nowrap; } .stamp--ink { color: var(--ink); } .stamp--former { color: var(--former); } .stamp--mimeo { color: var(--mimeo); transform: rotate(4deg); } .stamp--large { font-size: clamp(1.6rem, 3.4vw, 2.8rem); border-width: 5px; } .stamp--small { font-size: 0.8rem; border-width: 2px; border-style: solid; } .stamp--straight { transform: none; } .room--lampblack .stamp, .room--former .stamp, .room--iodine .stamp, .shell-footer .stamp { mix-blend-mode: normal; } /* STATUS: the first commercial sentence in the building, in nine-point type. */ .status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1em; align-items: baseline; padding-block: var(--s-3); border-block: var(--rule-hair) solid var(--line); font-family: var(--f-mono); font-size: 0.8125rem; line-height: 1.45; } .status__key { font-family: var(--f-display); font-weight: 700; letter-spacing: 0.14em; font-size: var(--t-micro); text-transform: uppercase; } .status--released .status__value, .status--withdrawn .status__value { color: var(--ink-faint); } .status--unresolved .status__value { color: var(--accent); } /* 8. SPEC LISTS, INDEX TABLES, TIMELINE, VOCABULARY, DOSSIERS --------------- */ /*
Medium
…
…
*/ .spec { display: grid; border-top: var(--rule) solid var(--line); } .spec > div { display: grid; grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 3fr); gap: var(--s-2) var(--s-5); padding-block: 0.7rem 0.75rem; border-bottom: var(--rule-hair) solid var(--hair); align-items: baseline; } .spec dt { font-family: var(--f-display); font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); padding-top: 0.2em; } .spec dd { font-size: 0.98rem; line-height: 1.5; } .spec dd ul li { padding-block: 0.25rem; } .spec dd ul li + li { border-top: 1px dotted var(--hair); } .spec--typed dd { font-family: var(--f-mono); font-size: 0.875rem; } @media (max-width: 30rem) { .spec > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } } /* the finding aid: rows of holdings. Rows may be . */ .index { border-top: var(--rule) solid var(--line); } .index__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 6.5rem 5.5rem; gap: var(--s-2) var(--s-5); align-items: baseline; padding-block: 0.8rem; border-bottom: var(--rule-hair) solid var(--hair); text-decoration: none; color: inherit; } a.index__row:hover, a.index__row:focus-visible { background: var(--ink); color: var(--paper); text-decoration: none; } a.index__row:hover .accession, a.index__row:hover .index__meta, a.index__row:hover .condition { color: var(--paper); } a.index__row:hover .condition::after { filter: invert(1); } .index__title { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; line-height: 1; text-transform: uppercase; } .index__meta { font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-soft); } .index__head { font-family: var(--f-display); font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } @media (max-width: 40rem) { .index__row { grid-template-columns: minmax(0, 1fr) auto; } .index__row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .index__row > :nth-child(3) { display: none; } } /* class GA. Reserved. */ .reserved { color: var(--ink-faint); } .reserved .index__title::after { content: " — Reserved"; font-weight: 400; } .timeline { border-top: var(--rule) solid var(--line); counter-reset: tl; } .timeline > li, .timeline__item { display: grid; grid-template-columns: minmax(5.5rem, 2fr) minmax(0, 10fr); gap: var(--s-2) var(--gutter); padding-block: var(--s-4); border-bottom: var(--rule-hair) solid var(--hair); align-items: baseline; } .timeline__date { font-family: var(--f-display); font-weight: 800; font-size: var(--t-title); line-height: 1; white-space: nowrap; } .timeline__event { max-width: 40rem; } .timeline__event b, .timeline__title { font-family: var(--f-serif); font-weight: 500; } .timeline--large .timeline__date { font-size: var(--t-large); } .vocab { columns: 22rem 2; column-gap: var(--gutter); } .vocab > div { break-inside: avoid; padding-block: var(--s-3); border-top: var(--rule-hair) solid var(--hair); display: grid; gap: 0.2rem; } .vocab dt { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: 1; text-transform: uppercase; } .vocab dd { font-size: 0.98rem; color: var(--ink-soft); max-width: 32rem; } .dossier { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--rule) solid var(--line); } .dossier__name { font-family: var(--f-display); font-weight: 800; font-size: var(--t-large); line-height: 0.9; text-transform: uppercase; text-wrap: balance; } .dossier__dates { font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink-soft); } .dossier__text { max-width: var(--measure); } /* colour law swatches: flat, square, labelled like paint chips in a ministry drawer */ .swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--s-4); } .swatch { display: grid; gap: 0.4rem; font-family: var(--f-mono); font-size: 0.78rem; } .swatch::before { content: ""; display: block; aspect-ratio: 1 / 1.25; background: var(--c, var(--mole)); border: var(--rule-hair) solid var(--hair); } .swatch b { font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.02em; } .swatch--interior::before { aspect-ratio: 1 / 0.4; margin-top: auto; } /* 9. THE LEDGER THREAD, LINEAGE, ANCESTORS ---------------------------------- */ /* HUMAN PROPOSAL 07 (pencil on tissue) / MACHINE COUNTERPROPOSAL 07B (typed on buff) / FINAL OBJECT 07C (ruled, objection clipped) */ .thread { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5) var(--gutter); padding-block: var(--s-7); border-top: var(--rule-heavy) solid var(--line); } .thread__head { display: grid; gap: var(--s-3); align-content: start; } .thread__no { font-family: var(--f-display); font-weight: 800; font-size: var(--t-giant); line-height: 0.76; letter-spacing: -0.02em; margin-top: -0.04em; } .thread__subject { font-family: var(--f-display); font-weight: 700; font-size: var(--t-title); line-height: 1; text-transform: uppercase; max-width: 22rem; text-wrap: balance; } .thread__date { font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-soft); } .thread__parts { display: grid; gap: var(--s-5); } @media (min-width: 60rem) { .thread { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } .thread__parts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; } .thread__part--machine { margin-top: var(--s-6); } .thread__part--final { margin-top: var(--s-8); } } .thread__part { position: relative; padding: var(--s-5) var(--s-5) var(--s-6); color: var(--lampblack); } .thread__code { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; margin-bottom: var(--s-2); } .thread__author { display: block; font-family: var(--f-mono); font-size: 0.75rem; margin-bottom: var(--s-4); opacity: 0.75; } .thread__text { font-size: 1rem; line-height: 1.5; } .thread__part--human { background: var(--tissue); transform: rotate(-0.5deg); } .thread__part--human .thread__text { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: 1.08rem; color: #3D3C3A; } .thread__part--human::before { content: ""; position: absolute; left: 50%; top: -0.55rem; width: 4.2rem; height: 1.15rem; margin-left: -2.1rem; background: rgba(196, 172, 110, 0.6); transform: rotate(1.5deg); mix-blend-mode: multiply; } .thread__part--machine { background: var(--buff); } .thread__part--machine .thread__text { font-family: var(--f-mono); font-size: 0.875rem; line-height: 1.55; } .thread__part--machine .thread__author { opacity: 1; } .thread__part--final { background: var(--salt); border: var(--rule-hair) solid var(--lampblack); border-top: var(--rule-heavy) solid var(--lampblack); transform: rotate(0.35deg); } .room--salt .thread__part--final, body > main > .thread__part--final { background: #F1EEE5; } .thread__verdict { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px dotted rgba(27, 27, 26, 0.5); font-family: var(--f-display); font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; } .thread__verdict b { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.08em; } .thread[data-winner="machine"] .thread__part--machine, .thread[data-winner="both"] .thread__part--machine { border-bottom: 6px solid var(--iodine); } .thread[data-winner="human"] .thread__part--human, .thread[data-winner="both"] .thread__part--human { border-bottom: 6px solid var(--iodine); } .thread--unresolved .thread__part--final { border-style: dashed; border-top-style: dashed; background: transparent; color: inherit; } .thread--rejected .thread__part--final .thread__code { color: var(--iodine); } /* a sheet pinned up blank: the machine declined */ .thread__part--blank { min-height: 12rem; background: var(--buff); } /* lineage: what it was made from, in order.
  1. …

    …

*/ .lineage { position: relative; display: grid; gap: 0; border-left: var(--rule) solid var(--line); margin-left: 0.3rem; } .lineage > li { position: relative; padding: 0 0 var(--s-5) var(--s-5); } .lineage > li::before { content: ""; position: absolute; left: -0.42rem; top: 0.3rem; width: 0.7rem; height: var(--rule); background: var(--line); } .lineage > li:last-child { padding-bottom: 0; } .lineage__stage { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.07em; line-height: 1.1; text-transform: uppercase; } .lineage__note { font-size: 0.98rem; color: var(--ink-soft); max-width: 34rem; margin-top: 0.2rem; } .lineage > li[data-kind="machine"] .lineage__note { font-family: var(--f-mono); font-size: 0.85rem; } .lineage > li[data-kind="final"] .lineage__stage { color: var(--accent); } /* what this object declined to be */ .ancestors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--s-6) var(--gutter); } .ancestor { display: grid; gap: var(--s-3); align-content: start; } .ancestor__code { font-family: var(--f-mono); font-size: 0.8125rem; text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; } .ancestor__note { font-size: var(--t-small); color: var(--ink-soft); } /* Concepts are pencilled lines on a sheet, numbered in the margin by a typewriter. Never boxed: a cluster of boxed phrases reads as a tag cloud, and nothing here is a tag. */ .concepts { display: grid; max-width: 30rem; counter-reset: concept; border-top: var(--rule-hair) solid var(--line); } .concepts li { counter-increment: concept; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: baseline; padding: 0.55em 0 0.5em; border-bottom: 1px dotted var(--ink-faint); font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: 1.08rem; line-height: 1.3; } .concepts li::before { content: counter(concept, decimal-leading-zero); font-family: var(--f-mono); font-style: normal; font-weight: 400; font-size: 0.72rem; color: var(--ink-faint); } /* 10. MARGINALIA AND HANDS -------------------------------------------------- */ /* .has-margin gives its content a right-hand margin column on wide screens;