@font-face { font-family: "STIX Two Text"; src: url("/static/fonts/stixtwotext-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "STIX Two Text"; src: url("/static/fonts/stixtwotext-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "STIX Two Text"; src: url("/static/fonts/stixtwotext-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("/static/fonts/hankengrotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("/static/fonts/hankengrotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* `body.sda`, not `body`. This stylesheet is also pulled into the internal form editor (templates/admin_form_editor.html) so its disabled preview can render real public components; while the public ground was cream that was invisible, and the moment it went night a bare `body` rule would have taken the whole internal page dark with it. catalog_base.html is the only template that puts `sda` on the body. Same reason for the :has() on . */ html:has(> body.sda) { background: var(--sda-paper); } /* iOS overscroll, not white */ body.sda { margin: 0; background: var(--sda-paper); color: var(--sda-ink); /* Checkboxes, radios, select popups and scrollbars are painted by the platform, not by this sheet. Without this they arrive white on a night page: the hello form is fifteen white squares in a column. */ color-scheme: dark; } /* Type-level selector, and it must STAY type-level. At (0,0,1) it loses to every button and link class; written as `.something a` it would be (0,1,1) and would take the label colour off .sda-btn--primary. That failure shipped once in the night concept and is now pinned by a test. */ a { color: inherit; } .sda-skip { position: absolute; left: -9999px; } .sda-skip:focus { position: fixed; top: .5rem; left: .5rem; z-index: 100; background: var(--sda-night); color: var(--sda-night-ink); padding: .6rem 1rem; outline: var(--sda-focus); } .sda-mark-frame { display: block; line-height: 0; flex: 0 0 auto; } .sda-shell { min-height: 100vh; display: flex; flex-direction: column; } .sda-container { width: min(100% - 2rem, 1200px); margin-inline: auto; } .sda-section { padding-block: var(--sda-space-band); } .sda-section--lg { padding-block: var(--sda-space-band-lg); } /* The strip above the header used to be an inverted cream-on-ink bar, which on a night page is a bright band across the top of every screen: the first thing the eye lands on would be an announcement rather than a photograph. It goes espresso with a copper label, which is the concept's treatment. */ .sda-announcement { padding: .55rem 1rem; text-align: center; color: var(--sda-copper); background: var(--sda-night); border-bottom: var(--sda-rule-warm); font: 500 var(--sda-label)/1.3 var(--sda-sans); letter-spacing: var(--sda-ls-label); text-transform: uppercase; } .sda-header { background: color-mix(in srgb, var(--sda-night) 88%, transparent); backdrop-filter: blur(6px); border-bottom: var(--sda-rule); position: sticky; top: 0; z-index: 20; } .sda-header__inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sda-brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; } .sda-mark { width: var(--sda-mark-nav); height: var(--sda-mark-nav); flex: 0 0 auto; display: block; background: currentColor; mask: url("/static/sda/sda-mark.svg") center / contain no-repeat; -webkit-mask: url("/static/sda/sda-mark.svg") center / contain no-repeat; } .sda-brand__name { display: block; font: 500 .9rem/1.1 var(--sda-sans); letter-spacing: .13em; } .sda-brand__sub { display: block; margin-top: .2rem; font: italic var(--sda-caption)/1.1 var(--sda-serif); color: var(--sda-ink-faint); } .sda-nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.7rem); font: 500 .82rem/1.2 var(--sda-sans); } /* `:not(.sda-btn)` is what keeps this off the Inquire button. It sets colour as well as decoration now, so the qualifier is load-bearing, not tidiness. */ .sda-nav > a:not(.sda-btn) { text-decoration: none; color: var(--sda-ink-soft); } .sda-nav > a:not(.sda-btn):hover { color: var(--sda-ink); } .sda-mobile { display: none; } /* The padding is the point. This control only ever appears under 850px, which means it is only ever tapped, and at line-height 1 the word "Menu" gave a target 13px tall: the whole navigation of the public site, on the phone that just scanned a label. The negative margin keeps the header looking as it did while the thumb gets 44px. */ .sda-mobile summary { list-style: none; cursor: pointer; font: 500 .82rem/1 var(--sda-sans); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; margin: 0 -.5rem; } .sda-mobile summary::-webkit-details-marker { display: none; } /* Menu / Close, and a caret that turns over with it. Both are pure CSS off the `open` attribute so the state is readable with scripting off. */ .sda-mobile__label { display: inline-flex; align-items: center; gap: .5rem; } .sda-mobile__label::after { content: ""; width: 8px; height: 8px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--sda-t-press) ease-out; } .sda-mobile[open] .sda-mobile__label::after { margin-top: 3px; transform: rotate(-135deg); } .sda-mobile [data-menu-close] { display: none; } .sda-mobile[open] [data-menu-open] { display: none; } .sda-mobile[open] [data-menu-close] { display: inline; } /* The panel drops BELOW the header instead of over it. It used to be `position: fixed; inset: 0`, a full-screen sheet laid on top of the one control that dismisses it. The z-index: 30 could never have saved it: the panel lives inside `.sda-header`, and that header is its own stacking context (sticky with a z-index, and a backdrop-filter besides), so 30 only ever meant "30 within the header" and document order decided the rest. With no close button in the markup, no Escape handler and no dismissal on an outside tap, the only way out of the navigation was the back button. That is the "spills into everything else" a peer reported. `top: 100%` resolves against the header, so the summary stays visible and tappable underneath the caret, which is what lets it be the close control. */ .sda-mobile__panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; padding: .6rem clamp(1rem, 4vw, 1.6rem) 1.6rem; background: var(--sda-night); border-bottom: var(--sda-rule); box-shadow: 0 26px 44px -26px rgba(0, 0, 0, .9); display: flex; flex-direction: column; max-height: 74dvh; overflow-y: auto; overscroll-behavior: contain; } /* Deliberately sets no colour. `.sda-mobile__panel a` is (0,2,1) and would bury the Inquire button's own label colour; the panel inherits cream from the shell and the button keeps its variant. */ .sda-mobile__panel a { font: 600 var(--sda-h3)/1.2 var(--sda-serif); text-decoration: none; } /* A row, not a word: these are thumb targets on the one page a customer opens after scanning a label at the booth. */ .sda-mobile__panel a:not(.sda-btn) { display: flex; align-items: center; min-height: 52px; border-bottom: var(--sda-rule); } .sda-mobile__panel .sda-btn { align-self: stretch; margin-top: 1.2rem; font: 500 .9rem/1 var(--sda-sans); } .sda-flash { margin-top: 1rem; padding: .8rem 1rem; border: var(--sda-rule); border-left: 2px solid var(--sda-verdigris); background: var(--sda-panel); font: var(--sda-small)/1.4 var(--sda-serif); } .sda-main { flex: 1; } /* ---------- Grounds: the sepia zones and their seams ---------- The sepia round, 2026-08-05 (Les, via Logan). Two rules live here. 1. The zones that HOST the work get the deepest ground on the site. A piece photographed on a light bench is the brightest object in its own band and comes forward; the bands around it sit lighter, which is what makes that true rather than an assertion. `--sda-stage` is not black on purpose: "black is excessive", and a black band behind a photograph reads as a hole rather than as a room. 2. The rest of the page alternates warm and cool sepia so a scroll has a temperature to it. The difference is chroma, not hue; see tokens.css. The seams are the part that is easy to get wrong. Bands used to meet at a hard edge, which on a page of near-blacks reads as a seam in the screen. Two pseudo-elements fade the page ground back in over `--sda-seam` at the top and bottom of every zone, so ANY two neighbours dissolve through the same common ground and no zone has to know what it sits next to. The z-index: -1 is load-bearing and so is the isolation. CSS paints, in this order, a stacking context's own background, THEN its negative z-index descendants, THEN in-flow content. Without `isolation` the zone is not a stacking context and the pseudo would fall behind the zone's own background colour and vanish; at z-index 0 it would paint over the text instead. This is the same mechanism the hero has used since the night pass. Ground-to-ground gradients are permitted (Logan, 2026-08-05, extending the legend's gradient ban). Component FILLS are still flat: no gradient buttons, cards or chips. */ .sda-zone { position: relative; isolation: isolate; background-color: var(--sda-zone-ground, var(--sda-paper)); } .sda-zone--warm { --sda-zone-ground: var(--sda-band-warm); } .sda-zone--cool { --sda-zone-ground: var(--sda-band-cool); } .sda-zone--stage { --sda-zone-ground: var(--sda-stage); } .sda-zone::before, .sda-zone::after { content: ""; position: absolute; left: 0; right: 0; height: var(--sda-seam); z-index: -1; pointer-events: none; } .sda-zone::before { top: 0; background: linear-gradient(180deg, var(--sda-paper), transparent); } .sda-zone::after { bottom: 0; background: linear-gradient(0deg, var(--sda-paper), transparent); } /* ---------- The vignette device ---------- A sepia photograph used as a GROUND, under a scrim that is heavy at the edges and over the type and eases toward the middle. This is exactly what the hero has always done with its scrim; Les asked for that treatment to become a device other zones can take, so it is a class rather than one band's hand-tuned gradient. The photograph is baked sepia in the FILE (scripts/build_sepia_editorial.py), never `filter: sepia()`. Three reasons: the filter is a different matrix in every engine, it costs a compositor paint on a full-bleed band that scrolls, and a test can open a JPEG but cannot read a filter's output. The scrim stays in CSS because it is the part that adapts: a band whose copy sits left takes the side-wash below, a band whose copy runs the full width takes `--hold`, and the alpha floor in both is set so the soft ink clears 4.5:1 over a worst-case light photograph. The arithmetic is in tokens.css. The band's own top and bottom fade to the page ground the way a `.sda-zone` seam does, which is why a photographic band does not also need the zone pseudo-elements: it carries its seam as the first scrim layer. */ .sda-vignette { position: relative; isolation: isolate; overflow: hidden; background-color: var(--sda-stage); } .sda-vignette__bg { position: absolute; inset: 0; z-index: -2; } .sda-vignette__bg img { width: 100%; height: 100%; object-fit: cover; } .sda-vignette__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--sda-paper) 0%, var(--sda-vignette-none) var(--sda-seam), var(--sda-vignette-none) calc(100% - var(--sda-seam)), var(--sda-paper) 100%), linear-gradient(96deg, var(--sda-scrim-text) 0%, var(--sda-scrim-text) 32%, var(--sda-scrim-hold) 56%, var(--sda-vignette-none) 100%), radial-gradient(120% 106% at 70% 44%, var(--sda-vignette-core) 0%, var(--sda-vignette-mid) 56%, var(--sda-vignette-edge) 100%); } /* Copy that runs the full width of the band: the directional layer stops being a side-wash and becomes a floor, or the step columns on the right sit on bare photograph. */ .sda-vignette--hold .sda-vignette__scrim { background: linear-gradient(180deg, var(--sda-paper) 0%, var(--sda-vignette-none) var(--sda-seam), var(--sda-vignette-none) calc(100% - var(--sda-seam)), var(--sda-paper) 100%), linear-gradient(180deg, var(--sda-scrim-text) 0%, var(--sda-scrim-hold) 46%, var(--sda-scrim-text) 100%), radial-gradient(128% 112% at 50% 44%, var(--sda-vignette-core) 0%, var(--sda-vignette-mid) 58%, var(--sda-vignette-edge) 100%); } /* Focal points, one per photograph, in CSS rather than on the element: the crop a `cover` slot takes is a property of the picture and the shape of the slot, not of the page that happens to use it, and an inline style is one more thing a content-security policy has to allow. Provenance: the curb haul is a near-square shot in a wide band, so almost all of it overflows vertically; 62% keeps the pile of rough and the person bagging it in the band instead of centring on empty sidewalk. Steps: the bench is at the lower left of a 4:3 frame; 38% holds the wheel and the hands in the band under the step columns. */ .sda-vignette--provenance .sda-vignette__bg img { object-position: 50% 62%; } .sda-vignette--steps .sda-vignette__bg img { object-position: 46% 38%; } /* ---------- The makers, story page (2026-08-07) ---------- Two people, side by side, equal width, because the studio's whole claim is that it is two trades and neither is the assistant. A single column at the narrow breakpoint stacks them in page order rather than reflowing, so the pairing survives as a sequence. No panel and no card. The house rule is that text is never boxed: the frame belongs to the photograph and whitespace does the rest. The rule above the heading is the same hairline the rest of this page uses to separate sections of prose. */ .sda-makers { margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: var(--sda-rule); } .sda-makers__pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 4vw, 3rem); margin-top: 1.8rem; } @media (max-width: 720px) { .sda-makers__pair { grid-template-columns: 1fr; } } /* The mount is NOT `.sda-frame`. That class is the 4:5 product frame, it is barred from this page (S52), and S50 guarantees no sepia asset ever sits inside one. This is the archive band's construction instead: a fixed box on the deep ground, the photograph CONTAINED so nothing is cropped, and the copper hairline doing the separating in place of a mat shadow. 4:3 because both portraits were cut to it, so the pair sits level whatever the sources were shot at. */ .sda-maker__mount { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sda-stage); border: var(--sda-rule-warm); } .sda-maker__mount picture { display: contents; } .sda-maker__mount img { width: 100%; height: 100%; object-fit: contain; display: block; } .sda-maker h3 { margin: 1.1rem 0 .4rem; font: 400 1.15rem/1.3 var(--sda-serif); } .sda-maker p { margin: 0; max-width: 46ch; } /* Showroom: the cases and the painting sit across the MIDDLE of a 4:3 frame, with ceiling above and a bench corner and an armchair below, so a centred crop on a wide band would hold the ceiling tiles. 52% keeps the shelves of finished work in the strip the copy sits over. */ .sda-vignette--showroom .sda-vignette__bg img { object-position: 50% 52%; } /* ---------- Hero: the company, not a piece ---------- The night register's fold. An establishing bench photograph is bled behind the copy under a warm scrim, so the light in the hero comes from a photograph rather than from a painted panel; the company sentence runs at display size; a copper claim bar closes the block. The featured piece used to own 540px of the fold and now owns 330: it is the small matted print at the right, not the subject. `.sda-hero` is the positioning context, and `.sda-hero__inner` is the grid that used to live on `.sda-hero` itself. */ .sda-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--sda-night); } .sda-hero__bg { position: absolute; inset: 0; z-index: -2; } /* The focal point is picked for the photograph in the slot, and the slot has now changed twice. It held the flat-lap close-up at 46%, then the wide wheel shot at 72% 38% where the y kept a head clear of the header rule, and from 2026-08-07 it holds the tool bench, which has no head in it at all. A near-square photograph in a wide box overflows by more than half its height, so a few points of y move the frame a long way. 56% puts the bench surface across the band, the lamp arm entering from the top left, and drops the empty foreground the bottom of the frame is made of. The x goes back to centre: the wheel shot needed 72% to hold a person standing off to one side, and this picture is spread evenly across its whole width. */ .sda-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; } /* The scrim mixes toward --sda-vignette, not --sda-night. It was night, which worked only while night WAS the deepest thing on the site; the sepia retune lifted the whole ground family and a scrim built out of a page-level ground stopped holding its copy (the copper claim bar measured 4.29:1 against the shipped pixels). The scrim colour is the scrim colour: one step under --sda-stage, shared with the vignette device and with the photographs' own black point. The last stop still mixes toward --sda-paper, because that stop is the hand-back to the page rather than a scrim. */ .sda-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--sda-vignette) 55%, transparent) 0%, color-mix(in srgb, var(--sda-vignette) 0%, transparent) 26%, color-mix(in srgb, var(--sda-vignette) 0%, transparent) 62%, color-mix(in srgb, var(--sda-vignette) 92%, transparent) 100%), linear-gradient(96deg, color-mix(in srgb, var(--sda-vignette) 96%, transparent) 0%, color-mix(in srgb, var(--sda-vignette) 90%, transparent) 34%, color-mix(in srgb, var(--sda-vignette) 50%, transparent) 62%, color-mix(in srgb, var(--sda-paper) 42%, transparent) 100%); } .sda-hero__inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(3.5rem, 9vw, 7rem); min-height: min(660px, 86vh); } .sda-hero__copy { max-width: 34rem; } .sda-display { margin: 0; font: 600 var(--sda-display)/var(--sda-lh-display) var(--sda-serif); letter-spacing: var(--sda-ls-display); } .sda-lead { max-width: 46ch; margin: 1.4rem 0 0; font: var(--sda-body)/var(--sda-lh-body) var(--sda-serif); } .sda-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } .sda-hero__art { justify-self: end; width: min(100%, 330px); } /* The hero credit line: the piece is named in the whisper register under the frame, where the price, the chip and the inquiry link used to sit. */ .sda-hero__figure { margin: 0; } /* The one copper edge on the site: a hairline, a night gap, then the faintest copper halo. This is the featured slot's badge now that a night mat cannot distinguish it from the page. */ .sda-hero__figure .sda-frame { display: block; box-shadow: 0 0 0 1px var(--sda-copper), 0 0 0 5px var(--sda-night), 0 0 0 6px color-mix(in srgb, var(--sda-copper) 35%, transparent), var(--sda-mat-shadow-lift); } .sda-hero__figure figcaption { margin-top: .8rem; } /* The claim bar: the studio's one factual boast, ruled off in copper. */ .sda-claim { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; margin: 2rem 0 0; padding-top: 1rem; border-top: var(--sda-rule-warm); } .sda-claim span { font: 500 var(--sda-label)/1.4 var(--sda-sans); letter-spacing: var(--sda-ls-label); text-transform: uppercase; color: var(--sda-copper); } .sda-claim em { font-family: var(--sda-serif); font-size: .95rem; color: var(--sda-ink-soft); } .sda-trust { border-block: var(--sda-rule); display: grid; grid-template-columns: repeat(3, 1fr); } .sda-trust__item { padding: 1.1rem clamp(1rem, 3vw, 3rem); border-right: var(--sda-rule); } .sda-trust__item:last-child { border-right: 0; } .sda-trust__item strong { display: block; font: 600 1.05rem/1.2 var(--sda-serif); } .sda-trust__item span { display: block; margin-top: .25rem; color: var(--sda-ink-soft); font: .78rem/1.4 var(--sda-sans); } .sda-heading { max-width: 700px; } .sda-heading h1, .sda-heading h2 { margin: 0; } .sda-heading p:not(.sda-eyebrow) { max-width: 56ch; margin: 1rem 0 0; font-family: var(--sda-serif); color: var(--sda-ink-soft); } /* auto-fit, not a fixed three: the row went from three tiles to five when Finished pieces split into Pendants, Earrings and Rings, and it grows again the day cabochons publish. A fixed count would leave a hole in the row. */ .sda-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem; } /* A category tile is a photograph you walk into, so the photograph runs to the edge and the label is laid over it under a gradient rather than pressed on as a paper chip. The cream mat came off with the product frames on 2026-07-31: a tile is the one place on the site where cropping IS wanted, because the subject is the category and not the piece, so there is no letterbox to fill and a cream border was doing nothing but drawing a box. */ .sda-tile { min-height: 300px; display: flex; align-items: end; text-decoration: none; color: var(--sda-ink); background: var(--sda-night); position: relative; overflow: hidden; border: 0; border-radius: var(--sda-radius); box-shadow: var(--sda-mat-shadow); } .sda-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--sda-t-hover-out) var(--sda-ease-lift); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .sda-tile:hover img { transform: scale(1.04); transition-duration: var(--sda-t-hover-in); } } /* The gradient is the label's ground. Without it a serif in cream lands on whatever the photograph happens to be doing at the bottom of the frame, which for a stone on a light bench is cream on cream. */ .sda-tile span { position: relative; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: 3rem .95rem .85rem; color: var(--sda-ink); font: 600 1.15rem/1.1 var(--sda-serif); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sda-night) 88%, transparent) 62%, color-mix(in srgb, var(--sda-night) 94%, transparent)); } /* How many are in there, in the whisper register. A tile that names a category without saying how deep it goes is asking for a click on trust. */ .sda-tile span em { font: 400 .76rem/1 var(--sda-sans); font-style: normal; letter-spacing: .04em; color: var(--sda-ink-soft); font-variant-numeric: tabular-nums; } .sda-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-top: 2rem; } .sda-grid--three { grid-template-columns: repeat(3, 1fr); } /* `min-height: 5rem` used to hold the loose type block to one height across a row. The card is a flex column with a bottom-anchored control now, so the row equalises itself and a floor here only opens a gap under short names. */ .sda-card__stone { display: block; } .sda-feature { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; border-block: var(--sda-rule); } /* The hairlines were how this band said "I am a band" on a flat ground. Inside a vignette the photograph and its scrim say it, and two rules across a photograph read as a scratch on the print. */ .sda-vignette .sda-feature { border-block: 0; } /* Capped, which it did not need to be while the page was paper: a mat is now a light source, and an uncapped card here put a 700px cream slab in the middle of the page that outshouted the hero. */ .sda-feature .sda-card { max-width: 460px; justify-self: end; width: 100%; } .sda-feature__copy { max-width: 42ch; } .sda-feature__copy p { font-family: var(--sda-serif); } /* The band's ground moved out of this rule on 2026-08-05: it is a `.sda-zone--cool` now, so the temperature alternation is stated once in the markup instead of once per band here. The class survives because the grid below it is the band's real job. Its photograph is the one thing in this band that stays FULL COLOUR: it is matted foreground work, not a ground. */ .sda-workshop__inside { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .sda-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; counter-reset: steps; } /* Two routes, not three steps: the homepage band describes a fork (buy it, or have it made), and a fork rendered in three equal columns reads as a queue. */ .sda-steps--pair { grid-template-columns: repeat(2, 1fr); gap: 2.6rem; } /* No 01 / 02 on a fork. The counter says "do this, then that", and these are two alternatives: one of them is the whole of your route, not its first leg. */ .sda-steps--pair .sda-step::before { content: none; } .sda-steps--pair .sda-step h3 { margin-top: 0; } .sda-step { border-top: var(--sda-rule); padding-top: 1rem; counter-increment: steps; } /* Copper, not verdigris: the numerals are the one place the second accent does structural work, and it keeps verdigris meaning "a thing you can click". */ .sda-step::before { content: "0" counter(steps); color: var(--sda-copper); font: 500 var(--sda-label)/1 var(--sda-sans); letter-spacing: var(--sda-ls-label); } .sda-step h3 { margin: .6rem 0; } .sda-step p, .sda-show p { margin: 0; font-family: var(--sda-serif); color: var(--sda-ink-soft); } .sda-shows { border-top: var(--sda-rule); } .sda-show { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 1rem; padding: 1rem 0; border-bottom: var(--sda-rule); } .sda-show strong { font-family: var(--sda-serif); } /* --sda-night is the DEEPEST ground now (espresso), not the only dark one, so a .sda-night band still reads as a band: it steps down from the page rather than inverting it. The footer is the main one. */ .sda-night { background: var(--sda-night); color: var(--sda-night-ink); } .sda-night .sda-eyebrow { color: var(--sda-verdigris); } .sda-night .sda-lead, .sda-night p { color: color-mix(in srgb, var(--sda-night-ink) 75%, transparent); } /* ---------- The one cream band ---------- The concept keeps a single mat-coloured band, at the bottom of the page, where the site stops showing and starts asking. Everything inside it flips: the accents drop to their -deep values and the button becomes --dark. Read the selectors: every one of them names a class. There is deliberately no `.sda-cream a { color: ... }` here. That selector is (0,1,1) and would outrank `.sda-btn--dark` (0,1,0), which is precisely how the night concept first shipped a band full of buttons whose labels could not be seen. The same discipline covers `.sda-dialog`, which is a mat holding a photograph and a Close button. */ .sda-cream { background: var(--sda-mat); color: var(--sda-mat-ink); } .sda-cream h1, .sda-cream h2, .sda-cream h3 { color: var(--sda-mat-ink); } .sda-cream .sda-eyebrow { color: var(--sda-verdigris-deep); } .sda-cream .sda-lead, .sda-cream p:not(.sda-eyebrow) { color: color-mix(in srgb, var(--sda-mat-ink) 78%, transparent); } .sda-cream .sda-link-tertiary { color: var(--sda-verdigris-deep); } .sda-cream .sda-link-tertiary:hover { border-bottom-color: var(--sda-verdigris-deep); } .sda-cream .sda-caption { color: color-mix(in srgb, var(--sda-mat-ink) 70%, transparent); } .sda-cream :focus-visible { outline-color: var(--sda-verdigris-deep); } /* `.sda-dialog` was in this pair until 2026-07-31 and had to leave with the lightbox's cream: a secondary button in there now sits on the deepest ground, where mat-ink is unreadable. The default cream-on-night variant is already right for it, so it needs no rule at all rather than a corrected one. */ .sda-cream a.sda-btn--secondary, .sda-cream button.sda-btn--secondary { color: var(--sda-mat-ink); border-color: color-mix(in srgb, var(--sda-mat-ink) 45%, transparent); } .sda-cream a.sda-btn--secondary:hover, .sda-cream button.sda-btn--secondary:hover { background: var(--sda-mat-ink); color: var(--sda-mat); border-color: var(--sda-mat-ink); } .sda-footer { padding-top: var(--sda-space-band); } .sda-footer__grid { display: grid; grid-template-columns: 1.35fr .75fr .75fr 1.2fr; gap: 2rem; } .sda-footer h2 { font-size: 1rem; } .sda-footer p, .sda-footer li { color: color-mix(in srgb, var(--sda-night-ink) 75%, transparent); font-family: var(--sda-serif); } .sda-footer ul { padding: 0; margin: .8rem 0 0; list-style: none; } .sda-footer li { margin: .35rem 0; } .sda-footer a { text-decoration: none; } .sda-subscribe { display: flex; gap: .5rem; margin-top: 1rem; } /* A well, not a transparent outline: on espresso a see-through field reads as a caption with a box round it rather than something to type in. */ .sda-subscribe .sda-input { flex: 1; min-width: 0; background: var(--sda-well); color: var(--sda-night-ink); border-color: color-mix(in srgb, var(--sda-night-ink) 30%, transparent); } .sda-subscribe .sda-input::placeholder { color: color-mix(in srgb, var(--sda-night-ink) 60%, transparent); } .sda-footer__legal { margin-top: 3rem; padding: 1.2rem 0; border-top: 1px solid color-mix(in srgb, var(--sda-night-ink) 25%, transparent); display: flex; justify-content: space-between; gap: 1rem; color: color-mix(in srgb, var(--sda-night-ink) 65%, transparent); font: .75rem/1.4 var(--sda-sans); } .sda-page-head { padding-block: var(--sda-space-band); border-bottom: var(--sda-rule); } .sda-page-head p { max-width: 56ch; margin: 1rem 0 0; font-family: var(--sda-serif); color: var(--sda-ink-soft); } /* ---------- The collection band ---------- /catalog only, and deliberately not `.sda-page-head` itself: the archive, the cart and the preferences pages share that class and a photograph behind a receipt is decoration. This is the homepage hero's move (a photograph bled full width under a warm scrim) at a page head's height. Bleeding it means the band cannot live inside `.sda-container`, so the template splits: the band is its own full-width section and the container starts again at the filter rail. Two things the scrim has to do, in this order of importance: 1. carry the copy. The type sits left, so the horizontal layer is nearly opaque there and lets the case show through on the right. 2. hand back to the page. The last stop mixes toward --sda-paper, the page ground, NOT --sda-night: a band that ends on the deepest ground reads as a panel dropped onto the page instead of a part of it. The site is espresso end to end and this is the one place that distinction shows. */ .sda-pagehero { position: relative; isolation: isolate; overflow: hidden; background: var(--sda-night); border-bottom: var(--sda-rule); } .sda-pagehero__bg { position: absolute; inset: 0; z-index: -2; } /* The source is 1200 wide and the band is wider than that on any desktop, so cover scales it by WIDTH and only the vertical overflow is steerable: the x value does nothing here, and the brick wall at the right edge of the photograph cannot be cropped out. It is vignetted back down instead, by the first scrim layer below. The y value picks the slice: 22% lands the top shelf's pendants in the band, where a centred crop lands on bare shelf. */ .sda-pagehero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } /* Mixed toward --sda-vignette for the reason given on .sda-hero__scrim above; the eyebrow over this band measured 4.45:1 while it was built out of night. The 180deg layer's last stop stays --sda-paper: that is the hand-back. */ .sda-pagehero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, color-mix(in srgb, var(--sda-vignette) 80%, transparent) 0%, color-mix(in srgb, var(--sda-vignette) 0%, transparent) 30%), linear-gradient(180deg, color-mix(in srgb, var(--sda-vignette) 66%, transparent) 0%, color-mix(in srgb, var(--sda-vignette) 12%, transparent) 45%, color-mix(in srgb, var(--sda-paper) 94%, transparent) 100%), linear-gradient(94deg, color-mix(in srgb, var(--sda-vignette) 93%, transparent) 0%, color-mix(in srgb, var(--sda-vignette) 84%, transparent) 34%, color-mix(in srgb, var(--sda-vignette) 40%, transparent) 68%, color-mix(in srgb, var(--sda-vignette) 14%, transparent) 100%); } .sda-pagehero__inner { position: relative; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2.6rem, 6vw, 4.2rem); min-height: min(360px, 46vh); } /* Narrower than the 56ch the flat head allowed: the line has to clear the photograph, not just the column. */ .sda-pagehero__inner h1, .sda-pagehero__inner .sda-lead { max-width: 38rem; } .sda-pagehero__inner .sda-lead { margin-top: 1.1rem; font-size: 1rem; color: var(--sda-ink-soft); } /* ---------- Collection filters ---------- Desktop uses a ruled editorial rail beside the work. Mobile keeps the same axes in a full-screen sheet with one Apply action at the bottom. */ .sda-catalog-layout { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: var(--sda-space-5); align-items: start; } .sda-catalog-results { min-width: 0; } .sda-rail { position: sticky; top: calc(var(--sda-mark-nav) + var(--sda-space-5)); max-height: calc(100vh - var(--sda-mark-nav) - var(--sda-space-6)); overflow-y: auto; padding-right: var(--sda-space-3); } .sda-rail > .sda-eyebrow { margin-bottom: var(--sda-space-4); } .sda-rail__group { padding-top: var(--sda-space-4); border-top: var(--sda-rule); } .sda-rail__group + .sda-rail__group { margin-top: var(--sda-space-4); } .sda .sda-rail__heading { margin: 0 0 var(--sda-space-2); font: 500 var(--sda-label)/1.3 var(--sda-sans); letter-spacing: var(--sda-ls-label); text-transform: uppercase; color: var(--sda-ink-soft); } .sda-rail__options { border-top: var(--sda-rule); } .sda-filter-link { display: flex; align-items: center; justify-content: space-between; gap: var(--sda-space-2); min-height: var(--sda-btn-h); padding: 0 var(--sda-space-2); border-bottom: var(--sda-rule); border-left: 2px solid transparent; color: var(--sda-ink-soft); text-decoration: none; font: 400 .9rem/1.35 var(--sda-sans); transition: color var(--sda-t-press) ease-out, border-color var(--sda-t-press) ease-out; } .sda-filter-link:hover { color: var(--sda-ink); } a.sda-filter-link.is-on { color: var(--sda-verdigris); border-left-color: var(--sda-verdigris); } .sda-filter-link small { color: var(--sda-ink-faint); font-size: .76rem; font-variant-numeric: tabular-nums; } .sda-results { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sda-space-4); padding-bottom: var(--sda-space-3); border-bottom: var(--sda-rule); } .sda-results__summary { display: flex; flex-wrap: wrap; gap: var(--sda-space-2) var(--sda-space-3); align-items: baseline; font: 400 .9rem/1.45 var(--sda-sans); color: var(--sda-ink-soft); } .sda-results__summary [data-testid="catalog-result-count"] { color: var(--sda-ink); font-weight: 500; font-variant-numeric: tabular-nums; } .sda-results__sort { display: flex; align-items: center; gap: var(--sda-space-2); flex: 0 0 auto; } .sda-results__sort label { font: 500 var(--sda-label)/1.3 var(--sda-sans); letter-spacing: var(--sda-ls-label); text-transform: uppercase; color: var(--sda-ink-soft); } .sda-results__sort .sda-select { min-height: var(--sda-btn-h); } .sda-catalog-note { margin: var(--sda-space-5) 0 0; } .sda-filter-float, .sda-filter-sheet { display: none; } @media (max-width: 1023px) { .sda-catalog-layout { display: block; padding-bottom: calc(var(--sda-space-band) + var(--sda-btn-h) + var(--sda-space-4)); } .sda-rail { display: none; } .sda-filter-float { display: inline-flex; position: fixed; right: max(var(--sda-space-3), env(safe-area-inset-right)); bottom: max(var(--sda-space-3), env(safe-area-inset-bottom)); z-index: 50; box-shadow: var(--sda-mat-shadow); } .sda-filter-sheet.is-open { display: block; position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: var(--sda-paper); } .sda-filter-sheet__form { min-height: 100%; display: flex; flex-direction: column; } .sda-filter-sheet__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sda-space-3); padding: var(--sda-space-4); border-bottom: var(--sda-rule); background: var(--sda-paper); } .sda-filter-sheet__head .sda-eyebrow { margin-bottom: var(--sda-space-1); } button.sda-filter-sheet__close { min-height: var(--sda-btn-h); padding-inline: var(--sda-space-2); } .sda-filter-sheet__body { flex: 1; padding: 0 var(--sda-space-4) var(--sda-space-5); } .sda-filter-sheet__group { min-inline-size: 0; margin: 0; padding: var(--sda-space-5) 0 0; border: 0; } .sda-filter-sheet__group legend { width: 100%; margin: 0 0 var(--sda-space-2); padding: 0; font: 500 var(--sda-label)/1.3 var(--sda-sans); letter-spacing: var(--sda-ls-label); text-transform: uppercase; color: var(--sda-verdigris); } .sda-filter-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sda-space-2); min-height: var(--sda-btn-h); border-top: var(--sda-rule); color: var(--sda-ink); cursor: pointer; font: 400 var(--sda-small)/1.35 var(--sda-sans); } .sda-filter-option:last-child { border-bottom: var(--sda-rule); } .sda-filter-option input { margin: 0; accent-color: var(--sda-verdigris); } .sda-filter-option small { color: var(--sda-ink-faint); font-size: .8rem; font-variant-numeric: tabular-nums; } .sda-filter-sheet__actions { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--sda-space-3); padding: var(--sda-space-3) var(--sda-space-4) max(var(--sda-space-3), env(safe-area-inset-bottom)); border-top: var(--sda-rule); background: var(--sda-paper); } .sda-filter-sheet__actions .sda-btn { flex: 1; } .sda-filter-sheet__clear { display: inline-flex; align-items: center; min-height: var(--sda-btn-h); padding-inline: var(--sda-space-2); } .sda-filter-sheet-open { overflow: hidden; } .sda-results { align-items: stretch; flex-direction: column; } .sda-results__sort { justify-content: space-between; } .sda-results__sort .sda-select { flex: 0 1 18rem; min-width: 0; } } .sda-empty { max-width: 50ch; padding: 3rem 0; font-family: var(--sda-serif); } /* The way out of a rotating band: the handful above is a sample, this is the whole thing in order. Sits under the grid rather than beside the heading so it reads after the work, not instead of it. */ .sda-band-more { margin-top: 2rem; } .sda-detail { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: clamp(2rem, 6vw, 5rem); padding-block: var(--sda-space-band); } /* 600, not 700. The published product photos are about 512x640, so a 700px stage was displaying every one of them above its own intrinsic width: the one thing Lane 2 and the legend both forbid outright. This comes back up when the pieces are re-shot at resolution. */ .sda-gallery__stage { max-width: 600px; cursor: zoom-in; } /* The stage is a