/* barefoot.services, the room. * * A LAYER over the engine's bundled substrate (ADR-0051). That default is * CHAMELEONIC: every rule reads a :root CONTROL PANEL variable and is wrapped * in :where(...) at zero specificity, so re-theming is mostly a matter of * overriding the panel below, and any single-class rule here wins cleanly * because custom.css is auto-linked AFTER the bundled sheet. * * DO NOT create content/style.css, authoring it makes the engine drop the * bundled substrate wholesale. The theme lives here. * * --------------------------------------------------------------------------- * THE CONCEPTION, stated once so that nothing below is arbitrary. * * The room is a gallery hung in 1970 and the type is the real thing: the * engine binds content/font.otf as 'sole-site-font', and that file is URW * Gothic, the freely licensed cut of ITC Avant Garde Gothic, which Herb * Lubalin drew in 1970 for Avant Garde magazine. It is used at one weight, * never faked bold, for display and for labels only. Running text is a plain * grotesque and gets out of the way. * * The ground is bone, not white, a wall, not a document. * * VARIATION IS DERIVED, NEVER CHOSEN. Each room declares one flat saturated * field colour in its own , and that single variable drives its * plate, its rules and its marks. Nothing else changes between rooms. This is * the one rule that lets the site be heterogeneous without being a potpourri: * the pages differ the way a compiler's outputs differ, because their input * differed, not because someone felt like it on the day. * * WHAT IS FORBIDDEN HERE, and it is the more important half: no gradient, no * shadow, no rounded card, no icon, no border-radius above a hairline, no * tie-dye, no flowers, no wavy type, no earth tones chosen as a pun on the * company's name. The previous theme picked its accent because clay is * "earth-toned, so it belongs to a company called barefoot", a joke about * the domain, made in CSS, and exactly the cliche the founder ruled against. * standards/barefoot.txt is explicit that the original reading is the * affirmative one: daring, exposed, free, carrying nothing unnecessary. * * No network asset is fetched. Everything here is type, colour and space. */ /* --- THE CONTROL PANEL ------------------------------------------------- */ :root { /* THE WALL. Bone rather than white: white reads as an unstyled document, and this page is a room. Ink is near-black and warm, never #000, so the flat colours below are the only pure saturation on the page. */ --bg: #f1ede2; --ink: #101010; --muted: #6a6559; --rule: #d6cfbe; --code-bg: #e7e1d2; /* THE FIELD. One flat colour per room, declared on . The default here is the entrance's. Every plate, rule and mark in a room reads this one variable, which is why a room cannot drift out of key. */ --field: #d81e05; /* cadmium, the entrance */ --on-field: #f1ede2; --accent: var(--field); --accent-ink: var(--ink); /* TYPE. The display face is the bound Avant Garde, one weight, never synthetically bolded, a geometric face goes to mush under faux bold. Running text is a neutral grotesque, the reader's own, which is correct: an exhibition catalogue sets its wall text in something that disappears and saves the drawing for the titles. */ --font-display: 'sole-site-font', "Century Gothic", "URW Gothic", "Avant Garde", "Questrial", "Futura", "Trebuchet MS", system-ui, sans-serif; --font-body: Inter, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, "Liberation Sans", system-ui, sans-serif; --font-chrome: var(--font-display); --text-base: 1.0625rem; --leading: 1.62; /* The frame is wide, the reading column is narrow, and the difference is most of the design: air outside, discipline on the line. */ --measure: 64rem; --prose: 33rem; /* The void. A gallery's rhythm is not uniform; these are the two long silences the page is allowed, and they are not --space-5. Measured against the WIDTH, never the height. Keyed to vh they grew with the window, so a tall viewport pushed the footer off the bottom and the same page had a different rhythm on every screen. The composition has to be the same composition wherever it is opened. */ --void: clamp(4.5rem, 9vw, 9rem); --void-lg: clamp(6.5rem, 13vw, 13rem); } /* The rooms. One line each, and that is the whole of the variation. The entrance takes the ink itself, so that the three colours belong to the three rooms and arriving anywhere feels like walking out of the hall and into a lit space. The engine strips attributes from , so the room declares itself with an empty marker element in the page and :has() lifts it to the root. The marker is the page's one line of configuration; everything else follows. */ body:has([data-room="entrance"]) { --field: #101010; } /* the hall */ body:has([data-room="collections"]) { --field: #d81e05; } /* cadmium */ body:has([data-room="data"]) { --field: #1f2ed2; } /* ultramarine */ body:has([data-room="commissions"]) { --field: #c3007a; } /* magenta */ body:has([data-room="restoration"]) { --field: #f2a900; --on-field: #101010; } body:has([data-room="atelier"]) { --field: #f2a900; --on-field: #101010; } .room-marker { display: none; } @media (prefers-color-scheme: dark) { :root { --bg: #0d0d0c; --ink: #efeade; --muted: #938c7c; --rule: #2a2823; --code-bg: #171614; --on-field: #0d0d0c; } /* The fields brighten on the dark wall so they keep the same shout. */ body:has([data-room="entrance"]) { --field: #efeade; --on-field: #0d0d0c; } body:has([data-room="collections"]) { --field: #ff4a24; } body:has([data-room="data"]) { --field: #5a68ff; } body:has([data-room="commissions"]) { --field: #ff3ba0; } body:has([data-room="restoration"]) { --field: #ffc229; --on-field: #0d0d0c; } body:has([data-room="atelier"]) { --field: #ffc229; } } html { background: var(--bg); } /* THE SUBSTRATE CENTRES ITSELF, at --measure + 2 * --space-3. That is right for a reading site and wrong here: it made every region a column centred inside an already-centred column, so nothing aligned with the full-bleed plate, which measures from the viewport, and the wall text drifted into the right half of the screen with a dead margin beside it. Cost a render to find; it is invisible in the source. So is released to the full viewport and each region centres itself below. One container owns the horizontal position, not two. */ body { max-width: none; margin: 0; padding: 0 var(--space-4); font-family: var(--font-body); } /* --- THE NAMEPLATE ------------------------------------------------------ */ /* A gallery has a door and a desk, not a menu bar. The masthead is the name, small, and nothing else competes with it. The substrate dissolves
with display:contents; re-boxing it turns it back into a flex ITEM of body at order 0, which once put the footer above the headline, so re-boxing and re-ordering always travel together. */ header { order: 100; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-3); max-width: var(--measure); width: 100%; margin: 0 auto; padding: var(--space-4) 0 var(--space-3); } /* The clay footprint is gone from the chrome entirely. One foot on a site is wit; a foot in the header, the footer, the favicon and the bullets is merchandise. What is left is the name, set in the 1970 face. */ header > .logo { display: none; } header > .site-title { order: 2; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; } header > .site-title:hover { color: var(--field); } header > .language-switcher { order: 3; margin-left: auto; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; } header .language-switcher .link { color: var(--muted); text-decoration: none; } header .language-switcher .link:hover { color: var(--field); } header .language-switcher .active { color: var(--ink); } /* The authored line under the name. Kept to a whisper: on a wall, the label is never louder than the work. */ header > .custom-header { order: 4; flex-basis: 100%; } .site-tagline { margin: var(--space-1) 0 0; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } /* --- THE PLATE ---------------------------------------------------------- */ /* Every page opens on a flat field with the title reversed out of it, and the field bleeds past the reading frame to the edges of the viewport. This is the one gesture the whole site is built on: a saturated plane, enormous type, and a long silence after it. Warhol's flat ground and Godard's intertitle are the same move, and neither of them needed an image. */ /* NOTE, and it cost a doubled plate to find: the engine emits its own

from the tag for the root and every folder index. Those pages therefore author no second <h1>. Hiding a duplicate in CSS would still leave two <h1> in the markup, which is a structure fault whatever it looks like, and check.sh counts them. */ .page-title, .page-body > h1, .page-body > section > h1 { max-width: none; margin: 0 0 var(--void); padding: var(--void) max(var(--space-4), (100vw - var(--measure)) / 2) calc(var(--void) * 0.8); background: var(--field); color: var(--on-field); font-family: var(--font-display); font-size: clamp(2.6rem, 8.5vw, 6.5rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.035em; text-wrap: balance; /* Break the field out of the centred column to the full viewport. */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* THE WALL LABEL. Most arrivals land deep, from a letter, and never see the entrance, so each room says where you are standing, in the field, directly above the title, the way a gallery labels the wall rather than the work. It replaces the sibling rows that used to close every page, which read as a taxonomy of the reader's possible misfortunes. */ /* Specificity note: the reading-column rule `.page-body p` is (0,1,1) and would otherwise cap this at --prose, so the label is claimed by its own two-class selector. */ .page-body > .wall-label, .wall-label { max-width: none; width: 100vw; margin: 0 calc(50% - 50vw); padding: var(--space-4) max(var(--space-4), (100vw - var(--measure)) / 2) 0; background: var(--field); color: var(--on-field); font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; } /* Two classes deep on purpose: `.page-body a` is also (0,1,1) and is declared later, so a bare `.wall-label a` lost the cascade and the label rendered in near-black ON the saturated field, invisible on magenta, nearly so on cadmium. */ .page-body .wall-label a, .wall-label a { color: var(--on-field); background: none; padding-bottom: 0; opacity: 0.72; } .page-body .wall-label a:hover, .wall-label a:hover { opacity: 1; color: var(--on-field); } .wall-label + h1 { padding-top: var(--space-3); } /* Folder index pages receive their title plate from the engine. Their wall label follows it in the authored body, so remove the gap and let the label finish the same field instead of opening a second title plate. */ body:has(.wall-label) .page-title { margin-bottom: 0; padding-bottom: var(--space-3); } .page-body > .wall-label { margin-bottom: var(--void); padding-bottom: var(--space-4); } /* Wing names are short categories. Their longer promise follows as a subtitle without displacing the opening lede of the first section. */ .page-body > .wall-label:has(+ .wing-subtitle) { margin-bottom: var(--space-4); } .wing-subtitle { max-width: 32ch; margin: 0 0 var(--void); font-family: var(--font-display); font-size: clamp(1.55rem, 3.2vw, 2.35rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.025em; color: var(--field); text-wrap: balance; } /* THE SOLE, BESIDE THE PHRASE. On the entrance only, the family mark stands next to the headline, cut out of the same colour as the letters rather than printed in its own. The silhouette is used as a mask, so the mark takes the field's ink and can never fight it: one object, two shapes, one colour. This is also the end of the flattened clay footprint that used to sit in the chrome of every page. */ body:has([data-room="entrance"]) .page-title { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); } /* ON THE LEFT, and it is not the same gesture as on the right. On the right the mark terminates the line, like a signature. ON THE LEFT IT PRECEDES THE SENTENCE: the foot becomes the thing that speaks and the words become what it says. Which is also why it is tall. Matched to the letters it would read as a bullet; risen to the full height of the block it reads as a presence. The height is not a number. `align-self: stretch` takes it from the headline block itself and the aspect ratio derives the width, so the mark is always exactly as tall as what it is standing beside, at any size, in any language. Nothing to re-tune when the copy changes. */ body:has([data-room="entrance"]) .page-title::before { content: ""; flex: 0 0 auto; align-self: stretch; aspect-ratio: 1 / 1.9; background: var(--on-field); -webkit-mask: url(/logo.png) center / contain no-repeat; mask: url(/logo.png) center / contain no-repeat; } @media (max-width: 46rem) { body:has([data-room="entrance"]) .page-title { display: block; } body:has([data-room="entrance"]) .page-title::before { display: block; width: 40vw; margin-bottom: var(--space-4); } } /* The inferred modification date. A room does not date-stamp its wall. */ .page-date { display: none; } /* Not a feed site, and the authored plan is the only listing. */ .recent, .contents { display: none; } /* --- THE WALL TEXT ------------------------------------------------------ */ .page-body { max-width: var(--measure); margin: 0 auto; font-size: var(--text-base); } .page-body p, .page-body h2, .page-body h3, .page-body ul, .page-body ol { max-width: var(--prose); } .page-body p { margin: 0 0 var(--space-3); } /* The opening paragraph. Large, and alone, the sentence that has to survive being read at a distance. */ .lede { font-family: var(--font-display); font-size: clamp(1.35rem, 2.9vw, 2.05rem); font-weight: 400; line-height: 1.18; letter-spacing: -0.018em; max-width: 26ch; margin-bottom: var(--space-5); color: var(--ink); text-wrap: balance; } .page-body strong { font-weight: 600; color: var(--ink); } .page-body em { font-style: italic; color: inherit; } .page-body a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--field), var(--field)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 0.08em; transition: background-size 90ms linear, color 90ms linear; } .page-body a:hover { color: var(--on-field); background-size: 100% 100%; } /* --- THE MOVEMENTS ------------------------------------------------------ */ /* The old theme separated every section with the same hairline and the same --space-5, so a page had no rhythm at all: eight identical rooms in a row. Here the silence between movements is long, and the label, not a rule, is what tells the eye a new movement has begun. */ .page-body > section + section { margin-top: var(--void); } /* THE EXHIBITION LABEL. Above the breakpoint the h2 leaves the text column and becomes a plaque in the left margin: tiny, tracked, uppercase, the way a wall labels a work. It lets a reader walk the argument down the left edge without reading a word of it, and it makes the narrow column obviously deliberate rather than accidental. */ .page-body h2 { font-family: var(--font-display); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-3); } @media (min-width: 62rem) { .page-body > section { display: grid; /* The third track is not decorative. Two fixed tracks total less than the frame, and the leftover was being distributed around them, so the label and the wall text sat 124px right of the title plate, which measures from the viewport and cannot drift. A trailing 1fr eats the remainder on the right and pins the first track to the frame edge, whatever the container does. */ grid-template-columns: 13rem minmax(0, var(--prose)) 1fr; column-gap: var(--space-5); align-items: start; } .page-body > section > * { grid-column: 2; } .page-body > section > h2 { grid-column: 1; grid-row: 1; margin: 0; } .page-body > section > .full { grid-column: 1 / -1; } .page-body > section > .cols-2 { grid-column: 2 / -1; } /* THE OPENING HAS NO LABEL, so it must not sit in the label's shadow. A section without an h2 begins at the frame edge and runs the full width, which puts the lede directly under the first letter of the title above it. That alignment is the only thing holding the plate and the wall text together as one composition. */ .page-body > section:not(:has(> h2)) > * { grid-column: 1 / -1; } .page-body > section:not(:has(> h2)) { display: block; } } /* --- THE WINGS ---------------------------------------------------------- */ /* The entrance hall announces the three principal wings with the same flat colours that take over once a visitor enters them. They meet edge to edge: architecture, not a row of cards. */ .wings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(2rem, 4vw, 4rem) 0 0; } .wing { min-width: 0; min-height: clamp(22rem, 32vw, 30rem); padding: clamp(1.5rem, 3vw, 3rem); color: #f1ede2; } .wing--collections { background: #d81e05; } .wing--data { background: #1f2ed2; } .wing--commissions { background: #c3007a; } .wing--restoration { background: #f2a900; color: #101010; } .restoration-threshold .wing--restoration { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(18rem, 1.2fr); column-gap: clamp(2rem, 6vw, 7rem); min-height: 0; } .restoration-threshold .wing__label, .restoration-threshold .wing h3, .restoration-threshold .wing__promise { grid-column: 1; } .restoration-threshold .wing > p:last-child { grid-column: 2; grid-row: 1 / span 3; align-self: end; font-size: clamp(1.05rem, 1.8vw, 1.3rem); } .page-body .wing__label { max-width: none; margin: 0 0 var(--space-5); font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: inherit; opacity: 0.72; } .wing h3 { max-width: none; margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: clamp(1.7rem, 3.3vw, 2.7rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.028em; text-wrap: balance; } .page-body .wing h3 a { color: inherit; background: none; padding-bottom: 0; } .page-body .wing h3 a:hover { color: inherit; opacity: 0.7; } .page-body .wing > p:not(.wing__label) { max-width: none; color: inherit; opacity: 0.84; } .page-body .wing > .wing__promise { margin: calc(var(--space-4) * -0.55) 0 var(--space-4); font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.15; letter-spacing: -0.015em; color: inherit; opacity: 1; text-wrap: balance; } @media (max-width: 58rem) { .wings { grid-template-columns: 1fr; } .wing { min-height: 0; } .restoration-threshold .wing--restoration { display: block; } } /* --- THE ROUTES --------------------------------------------------------- */ /* The situations under a room. The link IS the situation, never a product name, and the sentence after it is what lets a reader recognise himself. */ .routes { max-width: var(--prose); margin: 0; padding: 0; list-style: none; } .routes li { margin: 0 0 var(--space-4); color: var(--muted); } .routes a { display: block; margin-bottom: var(--space-1); font-family: var(--font-display); font-size: 1.3rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); background: none; padding-bottom: 0; } .routes a:hover { color: var(--field); background: none; } /* --- TWO COLUMNS OF PARALLEL CLAIMS ------------------------------------- */ @media (min-width: 52rem) { .cols-2 { max-width: none; columns: 2; column-gap: var(--space-5); } .cols-2 > p { max-width: none; break-inside: avoid; } .cols-2 > p:first-child { margin-top: 0; } /* Without this the paragraph after the pair runs straight on from the left column and the three read as one block of text. */ .cols-2 + p { margin-top: var(--space-5); } } /* --- PLACEHOLDERS, loud on purpose ------------------------------------- */ /* These mark what is not ruled yet: the one project floor and the demonstration. They are the release gate, and a gate that blends into the prose is not a gate, check.sh --release fails while any of them stands. Rendered as an exhibition notice: the field colour, reversed, unmissable, impossible to publish by accident without seeing it. */ .placeholder { max-width: var(--prose); margin: var(--space-4) 0; padding: var(--space-3); background: var(--field); color: var(--on-field); font-family: var(--font-display); font-size: 0.82rem; line-height: 1.45; letter-spacing: 0.02em; } /* --- THE COLOPHON ------------------------------------------------------- */ footer { order: 400; display: block; max-width: var(--measure); width: 100%; margin: var(--void) auto 0; padding: var(--space-4) 0 var(--void); border-top: 0; font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); } footer p { max-width: 34rem; margin: 0 0 var(--space-2); } footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); } footer a:hover { color: var(--field); border-bottom-color: var(--field); } footer .custom-footer { margin-top: 0; padding-top: 0; border-top: 0; } /* One commercial close belongs to the whole atelier, not a hand-written variation on every room. New pages inherit it from the footer. */ .commission-note { max-width: none; margin: var(--void) 0; padding: var(--space-5) 0 0; border-top: 2px solid var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.58; letter-spacing: 0; color: var(--ink); } .inspection-note { max-width: none; margin: 0 0 var(--void); padding: var(--space-5) 0 0; border-top: 2px solid var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.58; letter-spacing: 0; color: var(--ink); } footer > .inspection-note:first-child { margin-top: 0; } footer .inspection-note h2 { max-width: var(--prose); margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem); font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; } footer .inspection-note p { max-width: var(--prose); margin: 0 0 var(--space-4); } footer .inspection-note .write { display: block; margin: var(--void) 0 var(--space-4); font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 400; line-height: 1; letter-spacing: -0.035em; color: var(--ink); } footer .inspection-note .contact-address { margin-bottom: var(--void); font-family: var(--font-display); font-size: clamp(1.3rem, 3.5vw, 2.25rem); line-height: 1.1; overflow-wrap: anywhere; } footer .inspection-note .contact-address a { color: var(--ink); border-bottom-color: currentColor; } footer > .commission-note:first-child { margin-top: 0; } footer .commission-note h2 { max-width: var(--prose); margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem); font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; } footer .commission-note p { max-width: var(--prose); margin: 0 0 var(--space-4); } footer .commission-price { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; } footer .commission-note .write { display: block; margin: var(--void) 0 var(--space-4); font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 400; line-height: 1; letter-spacing: -0.035em; color: var(--ink); } footer .commission-note .contact-address { margin-bottom: var(--void); font-family: var(--font-display); font-size: clamp(1.3rem, 3.5vw, 2.25rem); line-height: 1.1; overflow-wrap: anywhere; } footer .commission-note .contact-address a { color: var(--ink); border-bottom-color: currentColor; } /* A changing shelf of public work. It is black in every room because it is an endcap, like the entrance plate, rather than another room colour. The marks are the projects' actual artwork and keep their natural proportions, following their treatment on sole.computer. */ .work-shelf { width: 100vw; margin: 0 0 var(--void) calc(50% - 50vw); padding: clamp(3.5rem, 7vw, 7rem) var(--space-4); background: #101010; color: #f1ede2; } .work-shelf__inner { max-width: var(--measure); margin: 0 auto; } .work-shelf h2 { max-width: 38rem; margin: 0 0 var(--space-5); font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.035em; color: #f1ede2; } .work-shelf__projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } footer .work-shelf__project { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; color: #f1ede2; text-decoration: none; border: 0; } footer .work-shelf__project:hover { color: #f2a900; } .work-shelf__logo { flex: 0 0 auto; width: clamp(4.75rem, 8vw, 6.75rem); height: clamp(4.75rem, 8vw, 6.75rem); margin-top: 0.1rem; object-fit: contain; object-position: top; border-radius: 0.2rem; } .work-shelf__words { display: block; min-width: 0; } .work-shelf__words strong { display: block; margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; line-height: 1.1; letter-spacing: 0; } .work-shelf__words > span { display: block; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.5; letter-spacing: 0; color: #bdb7aa; } @media (max-width: 58rem) { .work-shelf__projects { grid-template-columns: 1fr; gap: var(--space-4); } footer .work-shelf__project { max-width: 34rem; } } /* THE ONE FOOT. It appears exactly once on the whole site, at the very bottom, large, and it is not a logo, the mark in the chrome is the name in Lubalin's type. Here the family's silhouette is printed four times in flat colour, which is a serial print rather than a mascot: the same plate, four inks, 1968. The artwork is the existing silhouette used as a mask, so no new asset is fetched or invented. */ .site-signoff { display: none; } .serial { display: flex; gap: 0; margin: 0 0 var(--space-4); max-width: 22rem; } .serial span { flex: 1 1 0; aspect-ratio: 1 / 1.9; -webkit-mask: url(/logo.png) center / contain no-repeat; mask: url(/logo.png) center / contain no-repeat; } .serial span:nth-child(1) { background: #d81e05; } .serial span:nth-child(2) { background: #f2a900; } .serial span:nth-child(3) { background: #1f2ed2; } .serial span:nth-child(4) { background: #c3007a; } @media (prefers-reduced-motion: no-preference) { .serial span { transition: background-color 140ms linear; } .serial:hover span:nth-child(1) { background: #c3007a; } .serial:hover span:nth-child(2) { background: #d81e05; } .serial:hover span:nth-child(3) { background: #f2a900; } .serial:hover span:nth-child(4) { background: #1f2ed2; } } .working-languages { color: var(--muted); } /* THE PLAN. A gallery hands you a floor plan on the way in; this one is printed where a visitor who has finished a page will actually use it. Set as a plan rather than a bar, rooms, and what is inside them. */ .plan { max-width: none; margin: 0 0 var(--space-5); padding: 0; list-style: none; columns: 3; column-gap: var(--space-5); font-size: 0.78rem; letter-spacing: 0.04em; } .plan > li { break-inside: avoid; margin: 0 0 var(--space-3); } .plan > li > a { color: var(--ink); border-bottom: 0; } .plan > li > a:hover { color: var(--field); } .plan ul { list-style: none; margin: var(--space-1) 0 0; padding: 0; } .plan ul li { margin: 0 0 0.15rem; } @media (max-width: 42rem) { .plan { columns: 1; } }