@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; } /* ---------- 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 changed: the hero holds the wide wheel shot now, not the flat-lap close-up the 46% was chosen against. A tall photograph in a wide box overflows by more than half its height, so a few points of y move the frame a long way; 38% keeps the whole head clear of the header rule and still lands the hands and the wheel in the middle of the band. */ .sda-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 38%; } .sda-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--sda-night) 55%, transparent) 0%, color-mix(in srgb, var(--sda-night) 0%, transparent) 26%, color-mix(in srgb, var(--sda-night) 0%, transparent) 62%, color-mix(in srgb, var(--sda-night) 92%, transparent) 100%), linear-gradient(96deg, color-mix(in srgb, var(--sda-night) 96%, transparent) 0%, color-mix(in srgb, var(--sda-night) 90%, transparent) 34%, color-mix(in srgb, var(--sda-night) 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); } /* 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); } /* --panel is the alternate BAND now, not the mat: on a night page the two roles stopped being the same colour. */ .sda-workshop { background: var(--sda-panel); } .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; } .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-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%; } .sda-pagehero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, color-mix(in srgb, var(--sda-night) 80%, transparent) 0%, color-mix(in srgb, var(--sda-night) 0%, transparent) 30%), linear-gradient(180deg, color-mix(in srgb, var(--sda-night) 66%, transparent) 0%, color-mix(in srgb, var(--sda-night) 12%, transparent) 45%, color-mix(in srgb, var(--sda-paper) 94%, transparent) 100%), linear-gradient(94deg, color-mix(in srgb, var(--sda-night) 93%, transparent) 0%, color-mix(in srgb, var(--sda-night) 84%, transparent) 34%, color-mix(in srgb, var(--sda-night) 40%, transparent) 68%, color-mix(in srgb, var(--sda-night) 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); } /* The rail used to start under the flat head's own padding and its rule. The band supplies the rule; this supplies the air. */ .sda-pagehero + .sda-container .sda-rail { padding-top: 1.6rem; } /* ---------- The filter rail ---------- Replaced a five-control form plus Apply on 2026-07-31. Each axis is a collapsible group of chips, and each chip is a link, so the rail has no submit step and no state of its own to get out of sync with the URL. */ .sda-rail { padding: .5rem 0 1rem; border-bottom: var(--sda-rule); } .sda-rail__group { border-top: var(--sda-rule); } .sda-rail__group:first-child { border-top: 0; } .sda-rail__group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; min-height: 52px; padding: 0 .2rem; 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__group > summary::-webkit-details-marker { display: none; } .sda-rail__group > summary:hover { color: var(--sda-ink); } .sda-rail__label { flex: 0 0 auto; } /* The current answer, in reading case: a collapsed group still says what it is doing, which is the whole reason collapsing is safe. */ .sda-rail__state { flex: 1; font-family: var(--sda-serif); font-size: .95rem; letter-spacing: normal; text-transform: none; color: var(--sda-ink); } .sda-rail__group > summary::after { content: ""; flex: 0 0 auto; 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-rail__group[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); } .sda-rail__chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: .2rem .2rem 1.1rem; } .sda-chip-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .9rem; border: var(--sda-edge); border-radius: 999px; background: transparent; color: var(--sda-ink-soft); text-decoration: none; font: 400 .88rem/1 var(--sda-sans); transition: background-color var(--sda-t-press) ease-out, color var(--sda-t-press) ease-out, border-color var(--sda-t-press) ease-out; } .sda-chip-link:hover { color: var(--sda-ink); border-color: color-mix(in srgb, var(--sda-ink) 45%, transparent); } /* Element-qualified, same discipline as the buttons: this pair sets a label colour against its own fill, and a stray descendant rule at (0,1,1) would otherwise be able to take the label off it. */ a.sda-chip-link.is-on { background: var(--sda-ink); color: var(--sda-paper); border-color: var(--sda-ink); } a.sda-chip-link.is-on small { opacity: .7; } .sda-chip-link small { font-size: .76rem; opacity: .6; font-variant-numeric: tabular-nums; } .sda-rail__sort { display: flex; align-items: center; gap: .7rem; padding-top: 1rem; border-top: var(--sda-rule); } .sda-rail__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-rail__sort .sda-select { flex: 0 1 16rem; } .sda-results { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.5rem; font: 500 var(--sda-label)/1.3 var(--sda-sans); letter-spacing: .08em; text-transform: uppercase; } .sda-empty { max-width: 50ch; padding: 3rem 0; font-family: var(--sda-serif); } .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