/* ==========================================================================
APEX LUXURY — Rise Above. Live Exceptionally.
Design system
--------------------------------------------------------------------------
01 Tokens
02 Reset & base
03 Typography primitives
04 Layout: shell, editorial grid, rhythm
05 Photography plates (placeholders)
06 Chrome: header, nav, footer
07 Sections
08 Product dossier
09 Inquiry
10 Motion & reveal
11 Responsive
========================================================================== */
/* ==========================================================================
00 TYPEFACES — served from this server, not from Google
--------------------------------------------------------------------------
Until 20 September 2026 these two families loaded from fonts.googleapis.com
and fonts.gstatic.com. That worked, and it cost one thing worth more than
the convenience: every visitor's browser made a request to Google before a
word of the page rendered, and Google saw their IP address. It was the only
third party any visitor to this site touched, and it was the only sentence
in the privacy statement that had to hedge "we set no cookies and run no
analytics".
The files now sit in assets/fonts/ and nothing on any page reaches outside
this domain. Two consequences worth knowing before anyone changes it back:
- The privacy page says, flatly, that the site loads nothing from any
third party. Re-adding a CDN link -- for a font, an icon set, a script,
anything -- makes that sentence false. Change the page in the same
commit or do not do it.
- Both families are licensed under the SIL Open Font License, which is
what makes self-hosting legitimate rather than merely possible. The
licences are in assets/fonts/ beside the files; they stay there.
Six faces, each split latin / latin-ext on Google's own subset boundaries,
so a page of plain English downloads ~64KB and only a page carrying
extended Latin (Hermès, Béarn) pulls the rest. font-display: swap keeps
text readable while they load -- the same behaviour the Google stylesheet
requested.
========================================================================== */
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/cormorant-garamond-latin-ext-300-normal.woff2") format("woff2");
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("../fonts/cormorant-garamond-latin-ext-300-italic.woff2") format("woff2");
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/cormorant-garamond-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/cormorant-garamond-latin-ext-400-italic.woff2") format("woff2");
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/jost-latin-300-normal.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/jost-latin-ext-300-normal.woff2") format("woff2");
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/jost-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/jost-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ==========================================================================
01 TOKENS
========================================================================== */
:root {
/* --- Surface ---------------------------------------------------------- */
--ink: #0A0A0A;
--ink-2: #121110;
--charcoal: #1A1917;
--charcoal-2: #201E1B;
/* --- Ink on surface --------------------------------------------------- */
--bone: #F2EEE7;
--bone-70: rgba(242, 238, 231, 0.74);
--bone-55: rgba(242, 238, 231, 0.64);
--bone-38: rgba(242, 238, 231, 0.50); /* 0.48 -> 0.50, audit 28 Sep 2026: 4.43:1 -> 4.75:1, over the 4.5:1 floor */
--bone-62: rgba(242, 238, 231, 0.68);
/* --- Accent (used sparingly: hairlines, labels, one seal) -------------
#EDAF3A is the company gold. It is a specified brand value, not a
sampled or chosen one -- do not retune it to match a photograph of the
logo, because photographs carry their own light. If the brand value ever
changes, change it HERE and nowhere else: every gold in this stylesheet,
solid or translucent, is mixed from these tokens, and favicon.svg carries
the only other copy of the value.
Soft and deep hold the same relationships to the base that the family
has always had (soft x0.74 saturation and lifted to full value, deep
x1.10 saturation at x0.71 value), so retuning the base never shifts the
weight of anything built on it. */
--gold: #EDAF3A;
--gold-soft: #FFCE71;
--gold-deep: #A8771D;
/* Channel triplets, so every translucent gold in the sheet is mixed from
the tokens above rather than from a literal that quietly goes stale. */
--gold-rgb: 237, 175, 58;
--gold-soft-rgb: 255, 206, 113;
--gold-24: rgba(var(--gold-rgb), 0.24);
--gold-14: rgba(var(--gold-rgb), 0.14);
--gold-08: rgba(var(--gold-rgb), 0.08);
--hairline: rgba(var(--gold-rgb), 0.18);
--hairline-cool: rgba(242, 238, 231, 0.10);
/* --- Type ------------------------------------------------------------- */
--serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
--sans: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Fluid scale — 1.28 ratio at the top end, tightened for small screens */
--t-hero: clamp(3.4rem, 10.6vw, 10.5rem);
--t-d1: clamp(2.6rem, 6.4vw, 5.6rem);
--t-d2: clamp(2rem, 4.2vw, 3.5rem);
--t-d3: clamp(1.5rem, 2.6vw, 2.15rem);
--t-lead: clamp(1.12rem, 1.5vw, 1.4rem);
--t-body: clamp(0.94rem, 1.02vw, 1.02rem);
/* --t-small is no longer used for body copy. Brad, 20 Sep 2026: every place
that read at --t-small now reads at --t-body, site-wide, because 13px was
too small for clients reading carefully. The token stays defined so the
scale is intact and a genuinely small caption can still reach for it --
but nothing does today. Check before reintroducing it. */
--t-small: 0.8125rem;
--t-label: 0.6875rem;
--lh-hero: 0.88;
--lh-display: 0.98;
--lh-body: 1.72;
--tr-label: 0.22em;
--tr-label-wide: 0.34em;
/* --- Space ------------------------------------------------------------ */
--gutter: clamp(1.25rem, 4.4vw, 5.5rem);
--col-gap: clamp(1rem, 2.2vw, 2.5rem);
--sec-y: clamp(6rem, 15vw, 15rem);
--sec-y-sm: clamp(4rem, 9vw, 8.5rem);
/* --- Motion ----------------------------------------------------------- */
--ease: cubic-bezier(0.16, 1, 0.30, 1);
--ease-soft: cubic-bezier(0.33, 0.02, 0.15, 1);
--dur-rev: 1100ms;
--dur-hov: 1400ms;
--dur-ui: 620ms;
/* --- The masthead, as a measurement ----------------------------------
The logo mark sets the height of the bar, and the bar is fixed and
transparent, so anything that must start below it needs to know how tall
it is. Deriving it here means the hero and the dossier pages cannot fall
out of step with the mark the way they did when the mark was enlarged and
the mountain landed on top of the hero's first line.
--mark-h is redefined per breakpoint down in section 10.7; --bar-h
follows it automatically. */
--bar-pad: clamp(1.5rem, 2.6vw, 2.4rem);
/* The two marks traded sizes on 19 Sep 2026, at Brad's instruction: the
masthead now runs at what the footer used to be, and the footer at what
the masthead used to be.
They are swapped as two named curves rather than by editing each rule,
because the masthead is sized by HEIGHT and the footer by WIDTH, and
exchanging those declarations literally would break the bar: --bar-h is
derived from --mark-h, so a masthead mark whose height stopped being
--mark-h would leave the fixed bar and every anchor offset measuring
something that is no longer there.
--mark-h drives the masthead, and through it --bar-h
--mark-foot drives the footer
--mark-h is the footer's old curve converted to height: the footer was
clamp(150px, 19vw, 230px) wide on artwork 1.503 times wider than tall.
--mark-foot is the masthead's old height curve, unchanged.
Both are redefined per breakpoint in section 10.7. */
--mark-h: clamp(99.8px, 12.64vw, 153px);
--mark-foot: clamp(6rem, 10vw, 9.2rem);
--bar-h: calc(var(--mark-h) + var(--bar-pad) * 2);
/* --- Prototype notice strip ------------------------------------------
Zero by default; the rule just below raises it only when the strip is
actually on the page.
It used to be a flat 2.4rem. The strip is now switched in
lib/features.php, and a flat value there would have left the masthead
pushed 2.4rem down the page with nothing above it, and every anchor
landing 2.4rem low, the moment the switch went false. A one-word switch
should not need a second edit here to come out right. */
--proto-h: 0rem;
/* --- Grain ------------------------------------------------------------ */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* The strip's height, declared by the strip's own presence. Everything that
has to sit below it -- the masthead, the hero, the breadcrumb, the skip
link, the scroll offset for anchors -- reads --proto-h, so this single rule
is what makes switching the strip off in lib/features.php enough. */
:root:has(.proto) { --proto-h: 2.4rem; }
/* ==========================================================================
02 RESET & BASE
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Every in-page jump has to clear the fixed masthead and the prototype
strip, or the heading it lands on sits underneath them and the client
appears to have been sent nowhere. Derived from the same tokens the bar
is built from, so enlarging the logo moves this too -- it was a fixed
clamp before, written when the bar was half its current height, and every
anchor on the site had quietly fallen behind it. */
scroll-padding-top: calc(var(--proto-h) + var(--bar-h) + 1.5rem);
}
body {
margin: 0;
background: var(--ink);
color: var(--bone);
font-family: var(--sans);
font-size: var(--t-body);
font-weight: 300;
line-height: var(--lh-body);
letter-spacing: 0.012em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
/* Lining figures, everywhere, inherited.
---------------------------------------------------------------------
Cormorant Garamond ships OLD-STYLE figures as its default: the zero sits
at x-height and the one has no flag, so "Avenger B01" renders as
"Avenger Bo1". Brad caught it on the Avenger, 18 Sep 2026.
Old-style figures are beautiful in flowing prose and wrong for this
house, because its serif carries model references -- B01, B77, 32, 44,
46 -- where a digit shaped like a letter is not a style choice. It is a
misprint of a reference number a buyer may be checking against a
certificate.
Set here rather than per selector: it had already been patched onto
.assurance__k alone, which fixed "1 : 1" and left every piece name
wrong. One inherited declaration also covers anything added later.
NOTE when editing any rule that sets tabular-nums: naming only tabular
resets the FIGURE axis to the font default, which brings old-style
straight back. Always write "lining-nums tabular-nums". */
font-variant-numeric: lining-nums;
}
/* Fine grain over the whole document — keeps flat black from reading as flat. */
body::after {
content: "";
position: fixed;
inset: 0;
background-image: var(--grain);
opacity: 0.035;
pointer-events: none;
z-index: 400;
mix-blend-mode: overlay;
}
img, picture, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
::selection {
background: var(--gold-24);
color: var(--bone);
}
:focus-visible {
outline: 1px solid var(--gold);
outline-offset: 5px;
}
.skip {
position: absolute;
left: var(--gutter);
top: 0;
transform: translateY(-160%);
z-index: 600;
padding: 0.85rem 1.4rem;
background: var(--charcoal);
border: 1px solid var(--hairline);
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
transition: transform var(--dur-ui) var(--ease);
}
.skip:focus { transform: translateY(calc(var(--proto-h) + 14px)); }
.vh {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
03 TYPOGRAPHY PRIMITIVES
========================================================================== */
.display,
.hero__line,
.d1, .d2, .d3 {
font-family: var(--serif);
font-weight: 300;
font-variant-ligatures: common-ligatures;
}
.d1 {
font-size: var(--t-d1);
line-height: var(--lh-display);
letter-spacing: -0.018em;
}
.d2 {
font-size: var(--t-d2);
line-height: 1.04;
letter-spacing: -0.014em;
}
.d3 {
font-size: var(--t-d3);
line-height: 1.16;
letter-spacing: -0.008em;
}
.label {
display: block;
font-family: var(--sans);
font-size: var(--t-label);
font-weight: 400;
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--gold);
line-height: 1.55;
}
.label--quiet { color: var(--bone-38); }
.label--wide { letter-spacing: var(--tr-label-wide); }
/* Numbered section marker: 01 — The Standard */
.marker {
display: flex;
align-items: baseline;
gap: 0.9rem;
font-family: var(--sans);
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-38);
}
.marker__num {
color: var(--gold);
font-variant-numeric: lining-nums tabular-nums;
}
.marker__rule {
flex: 0 0 auto;
width: clamp(2rem, 5vw, 5.5rem);
height: 1px;
background: var(--gold-24);
transform: translateY(-0.28em);
}
.lead {
font-size: var(--t-lead);
line-height: 1.62;
color: var(--bone-70);
font-weight: 300;
max-width: 44ch;
}
.prose {
color: var(--bone-55);
max-width: 52ch;
}
.prose + .prose { margin-top: 1.4em; }
.serif-para {
font-family: var(--serif);
font-size: clamp(1.35rem, 2.35vw, 2.05rem);
line-height: 1.42;
letter-spacing: -0.006em;
color: var(--bone);
font-weight: 300;
max-width: 34ch;
}
.price {
font-family: var(--serif);
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
letter-spacing: 0.02em;
color: var(--gold-soft);
font-variant-numeric: lining-nums tabular-nums;
}
em, .em { font-style: italic; }
/* Quiet text link with a gold rule that wipes in from the left. */
.tlink {
position: relative;
display: inline-block;
padding-bottom: 0.55rem;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone);
}
.tlink::before,
.tlink::after {
content: "";
position: absolute;
left: 0; bottom: 0;
height: 1px;
}
.tlink::before { width: 100%; background: var(--hairline); }
.tlink::after {
width: 0;
background: var(--gold);
transition: width 900ms var(--ease);
}
.tlink:hover::after,
.tlink:focus-visible::after { width: 100%; }
.tlink__arrow {
display: inline-block;
margin-left: 0.7rem;
transition: transform 900ms var(--ease);
}
.tlink:hover .tlink__arrow { transform: translateX(7px); }
/* Bordered, still-quiet action — used once per page at most. */
.frame-action {
display: inline-flex;
align-items: center;
gap: 1.1rem;
padding: 1.15rem 2.2rem;
border: 1px solid var(--gold-24);
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone);
background: linear-gradient(180deg, var(--gold-08), transparent);
transition: border-color var(--dur-ui) var(--ease),
background var(--dur-ui) var(--ease),
color var(--dur-ui) var(--ease);
}
.frame-action:hover,
.frame-action:focus-visible {
border-color: var(--gold);
background: linear-gradient(180deg, var(--gold-14), var(--gold-08));
}
/* ==========================================================================
04 LAYOUT
========================================================================== */
.shell {
padding-inline: var(--gutter);
}
.grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--col-gap);
}
.section { position: relative; padding-block: var(--sec-y); }
.section--tight { padding-block: var(--sec-y-sm); }
.section--band {
background: var(--charcoal);
border-block: 1px solid var(--hairline);
}
.section--flush-top { padding-top: 0; }
.rule {
height: 1px;
background: var(--hairline);
border: 0;
margin: 0;
}
/* Slow liquid-metal sheen. Applied to a couple of rules and the seal only. */
.sheen {
position: relative;
overflow: hidden;
}
.sheen::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg,
transparent 32%,
rgba(var(--gold-soft-rgb), 0.55) 48%,
rgba(255, 246, 224, 0.85) 50%,
rgba(var(--gold-soft-rgb), 0.55) 52%,
transparent 68%);
background-size: 260% 100%;
animation: liquid 9s var(--ease-soft) infinite;
pointer-events: none;
}
@keyframes liquid {
0% { background-position: 160% 0; opacity: 0; }
12% { opacity: 1; }
62% { opacity: 1; }
100% { background-position: -60% 0; opacity: 0; }
}
/* ==========================================================================
05 PHOTOGRAPHY PLATES
========================================================================== */
.plate {
position: relative;
display: block;
overflow: hidden;
background: var(--ink-2);
}
.plate__img {
position: relative;
width: 100%;
height: 100%;
background:
radial-gradient(118% 88% at 50% 38%, #302B25 0%, #1A1816 48%, #0D0C0B 100%);
transform: scale(1.001);
transition: transform var(--dur-hov) var(--ease-soft);
}
/* Faint crosshair + ratio note so a placeholder still reads as intentional. */
.plate__img::before {
content: "";
position: absolute;
inset: clamp(0.75rem, 1.6vw, 1.5rem);
border: 1px solid rgba(var(--gold-rgb), 0.09);
}
.plate__img::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 34px; height: 1px;
margin-left: -17px;
background: var(--gold-24);
}
/* A real photograph fills the plate exactly as the placeholder did, so the
editorial grid holds whether or not the picture has arrived. */
.plate__photo {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.001);
transition: transform var(--dur-hov) var(--ease-soft);
}
.piece:hover .plate__photo,
.piece:focus-visible .plate__photo,
.detail__gallery .plate:hover .plate__photo { transform: scale(1.045); }
/* Sold: still browsable, visibly closed — but the photograph keeps its colour.
Draining a mother-of-pearl dial to grey throws away the one thing that makes
the piece worth looking at, and the archive heading already says it is gone. */
.piece--sold .plate__img { filter: brightness(0.8); }
.piece--sold .piece__price { color: var(--bone-38); }
.piece--sold .piece__meta::before {
content: "Sold";
position: absolute;
top: 1.5rem;
right: 0;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-38);
}
.piece--sold:hover .plate__img,
.piece--sold:hover .plate__photo { transform: none; }
/* A piece whose price has been left blank carries no "Sold" stamp either —
the archive heading already says these have been placed. */
.piece--nomark .piece__meta::before { content: none; }
.plate__note {
position: absolute;
left: clamp(1.1rem, 2vw, 2rem);
bottom: clamp(1.1rem, 2vw, 2rem);
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: rgba(242, 238, 231, 0.42);
max-width: 70%;
}
.plate--4x5 { aspect-ratio: 4 / 5; }
.plate--3x4 { aspect-ratio: 3 / 4; }
.plate--1x1 { aspect-ratio: 1 / 1; }
.plate--16x11{ aspect-ratio: 16 / 11; }
.plate--2x3 { aspect-ratio: 2 / 3; }
.plate--3x2 { aspect-ratio: 3 / 2; }
.plate--21x9 { aspect-ratio: 21 / 9; }
/* ==========================================================================
06 CHROME
========================================================================== */
/* PROTOTYPE NOTICE — remove this block and the .proto markup before launch. */
.proto {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 320;
min-height: var(--proto-h);
display: flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
padding: 0.45rem 1rem;
background: #241F16;
border-bottom: 1px solid var(--gold-24);
font-size: var(--t-label);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-soft);
line-height: 1.4;
text-align: center;
}
/* Placeholder token — every one of these needs a real value before launch. */
.tbc {
color: var(--gold-soft);
border-bottom: 1px dotted var(--gold-24);
font-style: normal;
}
.masthead {
position: fixed;
top: var(--proto-h); left: 0; right: 0;
z-index: 300;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: var(--bar-pad) var(--gutter);
transition: background var(--dur-ui) var(--ease),
border-color var(--dur-ui) var(--ease),
padding var(--dur-ui) var(--ease);
border-bottom: 1px solid transparent;
}
.masthead.is-stuck {
background: rgba(10, 10, 10, 0.78);
-webkit-backdrop-filter: blur(18px) saturate(120%);
backdrop-filter: blur(18px) saturate(120%);
border-bottom-color: var(--hairline);
padding-block: clamp(1rem, 1.6vw, 1.4rem);
}
.wordmark {
display: flex;
/* The mark centres against the pair of words; the words keep their own
baseline to each other inside .wordmark__words. Aligning all three on one
baseline made the mark's height set the line box, so it could not be
centred at all -- which is why it drifted when the mark grew. */
align-items: center;
gap: 0.7rem;
line-height: 1;
}
.wordmark__words {
display: flex;
align-items: baseline;
gap: 0.7rem;
}
.wordmark__a {
font-family: var(--serif);
font-size: clamp(1.28rem, 1.7vw, 1.6rem);
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--bone);
}
.wordmark__b {
font-size: var(--t-label);
letter-spacing: var(--tr-label-wide);
text-transform: uppercase;
color: var(--gold);
transform: translateY(-0.1em);
}
.nav { display: flex; align-items: center; gap: clamp(1.6rem, 3vw, 3.2rem); }
.nav__link {
position: relative;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-70);
padding-block: 0.35rem;
transition: color var(--dur-ui) var(--ease);
}
.nav__link::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0; height: 1px;
background: var(--gold);
transition: width 760ms var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--bone); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__toggle {
display: none;
align-items: center;
gap: 0.7rem;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-70);
}
.nav__bars {
display: block;
width: 26px; height: 7px;
border-top: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
}
.drawer {
position: fixed;
inset: 0;
z-index: 290;
display: grid;
align-content: center;
gap: 0.4rem;
padding: var(--gutter);
background: rgba(10, 10, 10, 0.97);
opacity: 0;
visibility: hidden;
transition: opacity 700ms var(--ease), visibility 700ms;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__link {
font-family: var(--serif);
font-size: clamp(2rem, 9vw, 3rem);
font-weight: 300;
line-height: 1.3;
color: var(--bone);
border-bottom: 1px solid var(--hairline);
padding-block: 0.5rem 0.8rem;
}
.drawer__close {
position: absolute;
top: clamp(1.5rem, 2.6vw, 2.4rem);
right: var(--gutter);
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--gold);
}
.drawer__meta {
margin-top: 2.4rem;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-38);
line-height: 2.2;
}
/* --- Footer ------------------------------------------------------------- */
.foot {
border-top: 1px solid var(--hairline);
padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 3vw, 2.6rem);
background: var(--ink);
}
/* The footer runs on its own four-track grid rather than the editorial 12. */
.foot__top {
grid-template-columns: 1.7fr 1fr 1fr 1fr;
row-gap: clamp(3rem, 5vw, 4rem);
column-gap: clamp(1.5rem, 3vw, 3.5rem);
}
.foot__brand { grid-column: auto; }
.foot__brand .wordmark { margin-bottom: 1.6rem; }
.foot__tag {
font-family: var(--serif);
font-size: clamp(1.25rem, 1.9vw, 1.6rem);
line-height: 1.3;
color: var(--bone-70);
max-width: 18ch;
}
.foot__col { grid-column: auto; }
.foot__col h3 { margin-bottom: 1.5rem; }
.foot__col li { margin-bottom: 0.85rem; }
.foot__col a {
font-size: var(--t-body);
color: var(--bone-55);
transition: color var(--dur-ui) var(--ease);
}
.foot__col a:hover { color: var(--gold-soft); }
/* Trust line — text, hairlines and a small lozenge. No loud icons. */
.trust {
margin-top: clamp(3.5rem, 6vw, 5.5rem);
padding-top: 1.8rem;
border-top: 1px solid var(--hairline);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(1.2rem, 3vw, 2.8rem);
}
.trust__item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-55);
}
.trust__dot {
width: 5px; height: 5px;
flex: 0 0 auto;
background: var(--gold);
transform: rotate(45deg);
}
.foot__legal {
margin-top: 2.6rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
font-size: var(--t-label);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bone-38);
}
/* ==========================================================================
07 SECTIONS
========================================================================== */
/* --- 07.1 Hero ---------------------------------------------------------- */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: flex-end;
overflow: hidden;
isolation: isolate;
}
.hero__plate {
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(72% 60% at 62% 34%, #2A2621 0%, #171614 44%, #0A0A0A 100%);
animation: hero-settle 2600ms var(--ease-soft) both;
}
@keyframes hero-settle {
from { transform: scale(1.07); opacity: 0.4; }
to { transform: scale(1); opacity: 1; }
}
/* Vignette keeps type legible over eventual photography. */
.hero__veil {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(to top, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.42) 42%, rgba(10,10,10,0.12) 72%),
linear-gradient(to right, rgba(10,10,10,0.72) 0%, transparent 52%);
}
.hero__inner {
width: 100%;
padding-bottom: clamp(4.5rem, 9vh, 8rem);
padding-top: calc(var(--proto-h) + max(clamp(9rem, 20vh, 14rem), var(--bar-h) + 2.5rem));
}
.hero__eyebrow {
grid-column: 1 / span 6;
margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
/* Takes the pale gold of "Live Exceptionally." rather than the site's
standard label gold. The two sit in one eyeline at the top of the page,
close enough that two different golds read as a mistake. This is the only
label on the site that departs from --gold; everywhere else the rule holds. */
color: var(--gold-soft);
}
.hero__line {
grid-column: 1 / span 9;
font-size: var(--t-hero);
line-height: var(--lh-hero);
letter-spacing: -0.03em;
color: var(--bone);
}
.hero__line em {
display: block;
font-style: italic;
color: var(--gold-soft);
padding-left: 0.08em;
}
.hero__note {
grid-column: 1 / span 4;
margin-top: clamp(2rem, 4vw, 3.4rem);
font-size: var(--t-body);
line-height: 1.9;
color: var(--bone-55);
max-width: 34ch;
}
.hero__aside {
grid-column: 10 / span 3;
align-self: end;
display: flex;
flex-direction: column;
gap: 1.1rem;
padding-bottom: 0.4rem;
text-align: right;
}
.hero__aside .rule { width: 100%; }
/* Vertical rail, right edge — a bespoke detail, hidden on small screens. */
.hero__rail {
position: absolute;
right: clamp(0.9rem, 1.6vw, 1.9rem);
top: 50%;
transform: translateY(-50%) rotate(180deg);
writing-mode: vertical-rl;
font-size: var(--t-label);
letter-spacing: var(--tr-label-wide);
text-transform: uppercase;
color: var(--bone-38);
}
.hero__cue {
position: absolute;
left: var(--gutter);
bottom: clamp(1.4rem, 2.4vw, 2.2rem);
display: flex;
align-items: center;
gap: 0.9rem;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-38);
}
.hero__cue span::after {
content: "";
display: block;
width: 1px; height: 46px;
margin-left: 0;
background: linear-gradient(to bottom, var(--gold), transparent);
animation: cue 3.4s var(--ease-soft) infinite;
transform-origin: top;
}
@keyframes cue {
0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
50% { transform: scaleY(1); opacity: 1; }
}
/* --- 07.2 Statement ----------------------------------------------------- */
.statement__marker {
grid-column: 1 / span 3;
padding-top: 0.7rem;
}
.statement__body { grid-column: 5 / span 7; }
.statement__body .serif-para { max-width: 30ch; }
.statement__body .prose { margin-top: clamp(2rem, 3.4vw, 3rem); }
.assurance {
margin-top: clamp(4rem, 8vw, 7rem);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--col-gap);
border-top: 1px solid var(--hairline);
}
.assurance__item {
padding-top: 1.6rem;
padding-right: 1rem;
border-right: 1px solid var(--hairline);
}
.assurance__item:last-child { border-right: 0; }
.assurance__k {
font-family: var(--serif);
font-size: clamp(1.6rem, 2.4vw, 2.15rem);
line-height: 1;
color: var(--gold-soft);
font-variant-numeric: lining-nums;
}
.assurance__v {
margin-top: 0.9rem;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-55);
line-height: 1.8;
}
/* --- 07.3 Editorial showcase ------------------------------------------- */
.showcase__head {
align-items: end;
margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
row-gap: 2rem;
}
.showcase__head .marker { grid-column: 1 / span 4; }
/* h1 AND h2. This rule said `h2` alone, and on 18 Sep the section headings on
the collection pages were promoted to h1 because those pages had no h1 at
all. The moment they were promoted they stopped matching this selector,
fell out of the grid, and auto-placed into a single narrow track: at 1440px
the archive page's "Recently placed" was measured 80px wide and 176px tall,
wrapping one word per line, and at 320px it was 9px wide -- a column of
single letters. Brad, 19 Sep: "page Recently placed our not even. both words
same line."
Accessibility and layout were coupled here by accident. Any rule that
styles a heading by its element name has the same trap in it -- if a
heading's level is ever right for a screen reader and wrong for the CSS,
the CSS is what should move. */
.showcase__head h1,
.showcase__head h2 { grid-column: 1 / span 6; margin-top: 1.8rem; }
/* A section heading is a phrase, not a paragraph, and it holds on one line.
-----------------------------------------------------------------------
Brad, 19 Sep: "both words same line." On a phone the display floor
(2.6rem) is larger than the column can carry, so "Recently Placed" broke
after the first word and read as two headings stacked.
Two parts to the fix, and they only work together:
white-space: nowrap stops the break
font-size: min(...) guarantees the line still fits, by letting the
type shrink below its floor when -- and only when
-- the viewport is too narrow for it
nowrap on its own would overflow the shell; the min() on its own would
still permit a break. Above roughly 460px the min() picks var(--t-d1)
unchanged, so nothing on a laptop moves.
An explicit
still breaks the line: that is markup deciding, which is
what the contact page's "Speak to / a specialist" wants. */
.showcase__head .d1 {
white-space: nowrap;
font-size: min(var(--t-d1), 8vw);
}
.showcase__head .showcase__aside {
grid-column: 9 / span 4;
font-size: var(--t-body);
color: var(--bone-55);
line-height: 1.9;
}
.spread { row-gap: clamp(4rem, 9vw, 9rem); }
/* Two columns, equal width, rows aligned.
-----------------------------------------------------------------------
Brad, 19 Sep 2026: "the curation page with currently released images are
not sized the same." Then, on the first fix: "they are not even."
They were not, by design -- the placement used to be 6 / 5 / 4 / 6
columns, a deliberately uneven editorial stagger. Measured at 1440px that
came out 641 / 529 / 417 / 641, a 1.54x spread, and the problem is what
decided which piece got which size: position in inventory.json. On the
curation that put the $6,750 Navitimer in the 417px slot and the $1,200
Béarn in a 641px one. Size reads as importance, so the grid was ranking
the stock by file order.
Every plate is now 5 columns -- identical width, two per row, rows level.
The first attempt kept a vertical drop on the right-hand column to stop
the grid reading as a catalogue; Brad's answer to that was that an offset
column is still an uneven grid. He is right. On a page whose argument is
that its pieces and its numbers are straight, the composition should not
be the one thing playing.
THE GAP AND THE MARGIN ARE NOW THE SAME MEASURE. Brad, 19 Sep: "can we
equally space the images with the borders/edges of the page. As I do not
like the big black space separating the images and the smaller black space
on the outsides."
He was right and the numbers were worse than they looked. On the twelve
column grid, two five-column plates left columns six and seven plus three
gutters between them -- measured at 1440px, 255px of black down the middle
against a 63px margin at each edge. Four times as much space inside the
composition as around it, which reads as two separate pages rather than one
spread, and it was stealing width from the photographs to do it.
The row is no longer laid out on the twelve column grid at all. It is its
own two-column grid whose column-gap IS --gutter, the same variable the
shell uses for its padding. One number now sets the margin and the gap
together, at every width, and it cannot drift: change --gutter and both
move. The plates absorb what the middle gave up -- 529px to 625px at 1440,
an 18% larger photograph on the same page.
The piece--a..d modifiers no longer place anything. They are kept because
the PHP cycles them for the reveal delay and because .piece--b / .piece--d
are still the hooks for a resting offset if one is ever wanted again.
The --drop mechanism in §11 is left in place and simply unused. It is what
fixed a real defect -- the reveal animation and the layout were fighting
over `transform`, and the layout was losing -- so deleting it would hand
that bug back to whoever next wants a resting offset. Set --drop on a card
and it works. Nothing sets it today, and nothing should without asking. */
.grid.spread {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--gutter);
}
.spread > .piece { grid-column: auto; }
/* --- The archive band, at two-thirds -----------------------------------
Brad, 18 Sep 2026: under Everything, a placed piece should read smaller
than one you can buy. It is a record, not an offer, and at equal size the
archive competes with the release for the eye.
Revised 19 Sep alongside the release grid above. The band is the same
composition one step down: THREE equal columns to the release's two, with
the identical --gutter between them and at the edges. So the page has one
spacing system rather than two, and the size difference falls out of the
column count instead of being tuned by hand.
At 1440px that is 395px against the release's 625px -- 63%, which is the
two-thirds this band has always been aiming at, arrived at by arithmetic
this time rather than by picking a span that looked close.
Type and spacing are scaled to match, because shrinking the plate alone
leaves a small photograph wearing full-size words.
This applies ONLY to the band beneath Everything. On the archive's own tab
the placed pieces are the subject of the page and stay full size -- the
class is simply not added there. */
.spread--quiet { row-gap: clamp(2.6rem, 6vw, 6rem); }
.grid.spread--quiet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spread--quiet .piece__name { font-size: clamp(0.9rem, 1.33vw, 1.23rem); }
.spread--quiet .piece__house { font-size: calc(var(--t-label) * 0.92); }
.spread--quiet .piece__meta { padding-top: 1rem; }
.spread--quiet .piece__more { margin-top: 0.75rem; }
.piece { display: block; }
.piece__meta {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
column-gap: 1.5rem;
padding-top: 1.5rem;
margin-top: 0;
border-top: 1px solid var(--hairline-cool);
position: relative;
}
.piece__meta::after {
content: "";
position: absolute;
left: 0; top: 0;
width: 0; height: 1px;
background: var(--gold);
transition: width 1100ms var(--ease);
}
.piece:hover .piece__meta::after,
.piece:focus-visible .piece__meta::after { width: 100%; }
.piece__house {
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-38);
}
.piece__name {
grid-column: 1;
font-family: var(--serif);
font-size: clamp(1.35rem, 2vw, 1.85rem);
font-weight: 300;
line-height: 1.18;
margin-top: 0.5rem;
color: var(--bone);
}
.piece__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.piece__more {
margin-top: 1.1rem;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--gold);
opacity: 0;
transform: translateY(6px);
transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.piece:hover .piece__more,
.piece:focus-visible .piece__more { opacity: 1; transform: none; }
.piece:hover .plate__img,
.piece:focus-visible .plate__img { transform: scale(1.045); }
.showcase__foot {
margin-top: clamp(5rem, 11vw, 11rem);
display: flex;
justify-content: flex-end;
}
/* --- 07.4 Authentication guarantee ------------------------------------- */
.auth { row-gap: clamp(3.5rem, 6vw, 5rem); }
.auth__lede { grid-column: 1 / span 5; }
.auth__lede .marker { margin-bottom: clamp(2rem, 3.4vw, 3rem); }
.auth__lede .prose { margin-top: 2rem; }
.protocol {
grid-column: 1 / span 5;
margin-top: clamp(2.5rem, 4vw, 3.5rem);
border-top: 1px solid var(--hairline);
}
/* What replaced the numbered protocol in the left column: one confirmed
paragraph, sitting on the hairline the list used to hang under, so the
column still reads as two parts rather than one long block. */
/* The division-of-labour rows in The Guarantee. No top border of its own --
.specs already draws one, and two hairlines a few pixels apart read as a
mistake. Otherwise spaced exactly like .auth__record below it. */
.auth__split {
grid-column: 1 / span 5;
margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.auth__split .label { margin-bottom: clamp(1.2rem, 2vw, 1.6rem); }
.auth__split dd { line-height: 1.85; }
.auth__record {
grid-column: 1 / span 5;
margin-top: clamp(2.5rem, 4vw, 3.5rem);
padding-top: clamp(2rem, 3vw, 2.6rem);
border-top: 1px solid var(--hairline);
}
.protocol__step {
display: grid;
grid-template-columns: 3.2rem 1fr;
column-gap: 1.2rem;
padding-block: 1.5rem;
border-bottom: 1px solid var(--hairline);
}
.protocol__n {
font-family: var(--serif);
font-size: 1.05rem;
color: var(--gold);
font-variant-numeric: lining-nums tabular-nums;
line-height: 1.7;
}
.protocol__t {
font-size: var(--t-body);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bone);
}
.protocol__d {
margin-top: 0.5rem;
/* Bumped one step on the scale, --t-small -> --t-body, 20 Sep 2026 at Brad's
request. 13px was too small for copy a client reads before wiring five
figures. The step TITLE (.protocol__t) stays at --t-small: it is uppercase
with letter-spacing, so growing it would shout. */
font-size: var(--t-body);
color: var(--bone-55);
line-height: 1.8;
max-width: 42ch;
}
/* The certificate object — the visual reassurance anchor. */
.dossier {
grid-column: 7 / span 6;
grid-row: 1 / span 2;
align-self: start;
margin-top: clamp(2rem, 6vw, 7rem);
position: relative;
padding: clamp(2rem, 3.6vw, 3.4rem);
background:
linear-gradient(165deg, rgba(var(--gold-rgb), 0.055), rgba(10,10,10,0) 46%),
var(--ink-2);
border: 1px solid var(--gold-24);
}
.dossier::before {
content: "";
position: absolute;
inset: 9px;
border: 1px solid rgba(var(--gold-rgb), 0.10);
pointer-events: none;
}
.dossier__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
padding-bottom: 1.6rem;
border-bottom: 1px solid var(--hairline);
}
.dossier__title {
font-family: var(--serif);
font-size: clamp(1.35rem, 2vw, 1.75rem);
font-weight: 300;
line-height: 1.2;
color: var(--bone);
margin-top: 0.8rem;
}
/* Seal: the one place liquid-metal is allowed to be obvious. */
.seal {
position: relative;
flex: 0 0 auto;
width: clamp(58px, 6vw, 76px);
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--gold-24);
display: grid;
place-items: center;
overflow: hidden;
background: radial-gradient(70% 70% at 34% 28%, rgba(var(--gold-rgb), 0.20), rgba(10,10,10,0) 70%);
}
.seal__mark {
font-family: var(--serif);
font-size: 0.95rem;
letter-spacing: 0.14em;
color: var(--gold-soft);
z-index: 1;
}
.seal::after {
content: "";
position: absolute;
inset: -30%;
background: conic-gradient(from 0deg,
transparent 0deg,
rgba(var(--gold-soft-rgb), 0.42) 38deg,
rgba(255,247,228,0.62) 52deg,
rgba(var(--gold-soft-rgb), 0.30) 70deg,
transparent 120deg,
transparent 360deg);
animation: revolve 14s linear infinite;
filter: blur(7px);
opacity: 0.55;
}
@keyframes revolve { to { transform: rotate(360deg); } }
.ledger { margin-top: 0.4rem; }
.ledger__row {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 1.5rem;
padding-block: 1.15rem;
border-bottom: 1px solid var(--hairline-cool);
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__k {
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-62);
}
.ledger__v {
font-family: var(--serif);
font-size: 1.02rem;
color: var(--bone);
letter-spacing: 0.02em;
text-align: right;
}
.ledger__v--ok { color: var(--gold-soft); }
.dossier__foot {
margin-top: 1.8rem;
padding-top: 1.4rem;
border-top: 1px solid var(--hairline);
font-size: var(--t-label);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bone-38);
line-height: 1.9;
}
/* --- 07.5 Concierge ----------------------------------------------------- */
.concierge { row-gap: clamp(3rem, 5vw, 4rem); align-items: start; }
.concierge__plate { grid-column: 1 / span 5; }
.concierge__body { grid-column: 7 / span 6; padding-top: clamp(1rem, 4vw, 4rem); }
.concierge__body .marker { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.concierge__body .prose { margin-top: 2rem; }
.terms {
margin-top: clamp(2.5rem, 4.5vw, 4rem);
display: grid;
gap: 0;
border-top: 1px solid var(--hairline);
}
.terms__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
padding-block: 1.2rem;
border-bottom: 1px solid var(--hairline);
}
.terms__k {
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-62);
}
.terms__v { font-size: var(--t-body); color: var(--bone-70); line-height: 1.7; }
.concierge__action { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
/* ==========================================================================
08 PRODUCT DOSSIER PAGE
========================================================================== */
.piece-head {
padding-top: calc(var(--proto-h) + max(clamp(8rem, 16vh, 12rem), var(--bar-h) + 2rem));
padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.crumb {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 0.4rem;
gap: 0.85rem;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-38);
}
.crumb > * { white-space: nowrap; }
.crumb a { color: var(--bone-62); transition: color var(--dur-ui) var(--ease); }
.crumb a:hover { color: var(--gold-soft); }
.crumb__sep { color: var(--gold-deep); }
.detail { row-gap: clamp(3rem, 6vw, 5rem); align-items: start; }
/* min-width:0 matters: a grid track sizes to its contents unless told not to,
so anything unusually wide dropped into this column would widen the track
and crush the panel beside it. */
.detail__gallery {
grid-column: 1 / span 7;
display: grid;
gap: clamp(1rem, 2vw, 2rem);
min-width: 0;
}
.detail__gallery .plate__img { cursor: zoom-in; }
.detail__gallery .plate:hover .plate__img { transform: scale(1.03); }
.detail__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); }
/* The lead frame carries the page; the rest of the shoot sits one link away. */
.gallery-link {
margin-top: clamp(1.1rem, 2vw, 1.6rem);
display: flex;
justify-content: flex-end;
}
/* Photography index — the full shoot, further down the page.
The clearance is handled globally now by scroll-padding-top on , so
this no longer needs a margin of its own. */
.gallery-grid {
margin-top: clamp(2.4rem, 4vw, 3.4rem);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.8rem, 1.6vw, 1.6rem);
}
/* --- Photograph viewer --------------------------------------------------- */
.detail__gallery .plate__photo,
.gallery-grid .plate__photo { cursor: zoom-in; }
.detail__gallery .plate:focus-visible,
.gallery-grid .plate:focus-visible {
outline: 1px solid var(--gold);
outline-offset: 3px;
}
.lb {
position: fixed;
inset: 0;
/* above the masthead, the drawer and the prototype strip */
z-index: 900;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(0.5rem, 2vw, 2rem);
padding: clamp(3.5rem, 7vh, 5rem) clamp(0.75rem, 3vw, 3rem) clamp(2rem, 5vh, 3.5rem);
background: rgba(6, 6, 6, 0.96);
backdrop-filter: blur(3px);
}
.lb__stage {
margin: 0;
min-width: 0;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(0.9rem, 2vh, 1.4rem);
}
/* The window the photograph is magnified inside. Overflow is clipped here so
an enlarged picture never spills across the caption. */
.lb__frame {
position: relative;
flex: 1 1 auto;
min-height: 0;
width: 100%;
display: grid;
place-items: center;
overflow: hidden;
touch-action: none;
cursor: zoom-in;
}
.lb.is-zoomed .lb__frame { cursor: grab; }
.lb.is-dragging .lb__frame { cursor: grabbing; }
/* The photograph fills the frame and is fitted inside it by object-fit.
It used to be sized by max-width / max-height: 100%, but the percentage
height never resolved inside the grid frame, so on a laptop a square
photograph opened at full width and was cut off top and bottom -- and
because the viewer believed it was at fit, it could not be dragged.
Phones were unaffected (width was the limit there). Fixed 28 Sep 2026. */
.lb__img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center center;
will-change: transform;
animation: lb-in 420ms var(--ease) both;
user-select: none;
-webkit-user-drag: none;
}
.lb.is-zoomed .lb__img { animation: none; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
/* A quiet mark while the full-resolution file is on its way. */
.lb__frame::after {
content: "";
position: absolute;
top: 1rem; right: 1rem;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--gold);
opacity: 0;
transition: opacity 300ms var(--ease);
}
.lb.is-loading .lb__frame::after {
opacity: 1;
animation: lb-pulse 1.1s ease-in-out infinite;
}
@keyframes lb-pulse { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
.lb__cap {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 0.9rem;
max-width: 62ch;
text-align: center;
}
.lb__count {
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--gold);
white-space: nowrap;
}
.lb__alt {
font-size: 0.86rem;
line-height: 1.5;
color: var(--bone-55);
}
.lb__close {
position: absolute;
top: clamp(1rem, 2.5vh, 1.8rem);
right: clamp(0.9rem, 3vw, 3rem);
background: none;
border: 0;
padding: 0.4rem 0.2rem;
font-family: var(--sans);
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-62);
cursor: pointer;
transition: color 260ms var(--ease);
}
.lb__close:hover { color: var(--gold); }
.lb__nav {
background: none;
border: 1px solid var(--hairline);
width: clamp(2.4rem, 4vw, 3.2rem);
height: clamp(2.4rem, 4vw, 3.2rem);
border-radius: 50%;
color: var(--bone-62);
font-size: 1rem;
cursor: pointer;
transition: color 260ms var(--ease), border-color 260ms var(--ease);
}
.lb__nav:hover { color: var(--gold); border-color: var(--gold-24); }
.lb__close:focus-visible,
.lb__nav:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.lb__img { animation: none; }
.lb.is-loading .lb__frame::after { animation: none; opacity: 1; }
}
@media (max-width: 640px) {
.lb {
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
padding-bottom: clamp(5.5rem, 12vh, 7rem);
}
.lb__stage { grid-row: 1; }
.lb__nav { position: absolute; bottom: clamp(1.1rem, 3vh, 2rem); }
.lb__nav--prev { left: clamp(0.9rem, 4vw, 2rem); }
.lb__nav--next { right: clamp(0.9rem, 4vw, 2rem); }
}
.detail__panel {
grid-column: 9 / span 4;
min-width: 0;
position: sticky;
top: clamp(6rem, 12vh, 9rem);
}
.detail__house { margin-bottom: 1.2rem; }
.detail__name {
font-family: var(--serif);
font-size: clamp(2rem, 3.2vw, 2.9rem);
font-weight: 300;
line-height: 1.03;
letter-spacing: -0.018em;
}
.detail__ref {
margin-top: 1rem;
font-size: var(--t-body);
color: var(--bone-55);
letter-spacing: 0.06em;
}
.detail__price {
margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
padding-top: 1.5rem;
border-top: 1px solid var(--hairline);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.5rem;
}
.detail__price .price { font-size: clamp(1.4rem, 2.1vw, 1.9rem); }
.detail__stock {
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-38);
}
.detail__copy { margin-top: 1.8rem; font-size: var(--t-body); line-height: 1.9; }
.detail__actions {
margin-top: clamp(2rem, 3.4vw, 2.8rem);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(1.4rem, 3vw, 2.4rem);
}
.detail__assure {
margin-top: 2.4rem;
padding-top: 1.6rem;
border-top: 1px solid var(--hairline-cool);
font-size: var(--t-label);
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--bone-38);
line-height: 2.1;
}
.specs { border-top: 1px solid var(--hairline); }
.specs__row {
display: grid;
grid-template-columns: 40% 1fr;
gap: 1.5rem;
padding-block: 1.1rem;
border-bottom: 1px solid var(--hairline-cool);
}
.specs dt {
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-62);
}
.specs dd { font-size: var(--t-body); color: var(--bone-70); } /* one step up, 20 Sep 2026 */
.block-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 2rem;
margin-bottom: clamp(2rem, 3.4vw, 3rem);
}
.provenance { border-left: 1px solid var(--hairline); padding-left: clamp(1.5rem, 3vw, 2.6rem); }
.provenance__item { position: relative; padding-bottom: clamp(2rem, 3.4vw, 2.8rem); }
.provenance__item:last-child { padding-bottom: 0; }
.provenance__item::before {
content: "";
position: absolute;
left: calc(-1 * clamp(1.5rem, 3vw, 2.6rem) - 3px);
top: 0.62rem;
width: 5px; height: 5px;
background: var(--gold);
transform: rotate(45deg);
}
.provenance__when {
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--gold);
}
.provenance__what {
margin-top: 0.6rem;
font-size: var(--t-body);
color: var(--bone-70);
line-height: 1.85;
max-width: 46ch;
}
.esc__head { grid-column: 1 / span 4; }
.esc__list { grid-column: 6 / span 7; }
.esc__head .prose { margin-top: 2rem; }
.prov__head { grid-column: 1 / span 4; }
.prov__list { grid-column: 6 / span 6; }
.prov__head .d2 { margin-top: clamp(1.6rem, 2.6vw, 2.4rem); }
/* --- Also released ------------------------------------------------------
A footnote at the foot of a listing, not a second showcase. Small tiles on
a strip that scrolls sideways, so the number of other pieces never changes
the height of the page. */
.rel {
padding-block: clamp(2.6rem, 5vw, 4rem);
border-top: 1px solid var(--hairline-cool);
}
.rel__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
}
.rel__all {
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-38);
white-space: nowrap;
transition: color var(--dur-ui) var(--ease);
}
.rel__all:hover { color: var(--gold); }
.rel__strip {
display: flex;
gap: clamp(0.9rem, 1.8vw, 1.6rem);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: var(--gold-24) transparent;
padding-bottom: 0.5rem;
min-width: 0;
}
.rel__strip::-webkit-scrollbar { height: 3px; }
.rel__strip::-webkit-scrollbar-track { background: transparent; }
.rel__strip::-webkit-scrollbar-thumb { background: var(--gold-24); }
.rel__item {
flex: 0 0 auto;
width: clamp(104px, 13vw, 148px);
scroll-snap-align: start;
display: grid;
gap: 0.5rem;
}
.rel__frame {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--ink-2);
}
.rel__frame img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.74;
transition: opacity var(--dur-ui) var(--ease), transform var(--dur-hov) var(--ease-soft);
}
.rel__item:hover .rel__frame img,
.rel__item:focus-visible .rel__frame img { opacity: 1; transform: scale(1.04); }
.rel__empty {
display: block;
width: 100%; height: 100%;
background: radial-gradient(118% 88% at 50% 38%, #2A2622 0%, #181614 52%, #0D0C0B 100%);
}
.rel__name {
font-size: var(--t-label);
line-height: 1.45;
color: var(--bone-62);
}
.rel__price {
font-size: var(--t-label);
letter-spacing: var(--tr-label);
color: var(--gold);
}
.rel__item:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
/* ==========================================================================
09 INQUIRY
========================================================================== */
.inquiry { row-gap: clamp(3.5rem, 6vw, 5rem); align-items: start; }
.inquiry__aside { grid-column: 1 / span 5; }
.inquiry__aside .d2 { margin-top: clamp(1.6rem, 2.6vw, 2.4rem); }
.inquiry__aside .prose { margin-top: 2rem; }
.inquiry__assure {
margin-top: clamp(2.5rem, 4vw, 3.5rem);
border-top: 1px solid var(--hairline);
}
.inquiry__assure li {
padding-block: 1.05rem;
border-bottom: 1px solid var(--hairline-cool);
font-size: var(--t-label);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bone-55);
display: flex;
gap: 0.85rem;
align-items: baseline;
}
.inquiry__assure li::before {
content: "";
flex: 0 0 auto;
width: 5px; height: 5px;
background: var(--gold);
transform: rotate(45deg) translateY(-1px);
}
.form { grid-column: 7 / span 6; }
.form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(1.5rem, 3vw, 3rem);
row-gap: clamp(1.8rem, 3vw, 2.6rem);
}
.field { display: block; }
.field--wide { grid-column: 1 / -1; }
.field > span {
display: block;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-62);
margin-bottom: 0.85rem;
}
.field input,
.field select,
.field textarea {
width: 100%;
padding: 0.55rem 0 0.9rem;
background: transparent;
border: 0;
border-bottom: 1px solid var(--hairline);
color: var(--bone);
font-family: var(--sans);
font-size: 1rem;
font-weight: 300;
letter-spacing: 0.02em;
border-radius: 0;
transition: border-color var(--dur-ui) var(--ease);
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.8; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-bottom-color: var(--gold-24); }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-bottom-color: var(--gold);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(242,238,231,0.22); }
.field select {
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
linear-gradient(135deg, var(--gold) 50%, transparent 50%);
background-position: calc(100% - 9px) 1.05rem, calc(100% - 4px) 1.05rem;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
cursor: pointer;
}
.field select option { background: var(--charcoal); color: var(--bone); }
/* Honeypot — never seen by a person, never announced, never focusable. */
.hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.field__err {
display: block;
margin-top: 0.6rem;
font-size: var(--t-label);
letter-spacing: 0.1em;
text-transform: uppercase;
color: #D98C6A;
min-height: 1em;
}
/* A refusal that belongs to no single field: the server declining to send.
Reads as a quiet notice rather than a field error -- sentence case, a rule
down the side -- because it is not something the visitor got wrong. */
.form__alert {
margin-top: clamp(2rem, 3vw, 2.6rem);
padding: 1.1rem 1.4rem;
border-left: 2px solid #D98C6A;
background: rgba(217, 140, 106, 0.06);
color: var(--bone);
font-size: var(--t-body);
line-height: 1.55;
}
.form__alert[hidden] { display: none; }
.form__foot {
margin-top: clamp(2.5rem, 4vw, 3.5rem);
padding-top: 1.8rem;
border-top: 1px solid var(--hairline);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
}
.form__privacy {
font-size: var(--t-label);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bone-38);
max-width: 40ch;
line-height: 1.9;
}
.receipt {
border: 1px solid var(--gold-24);
padding: clamp(2rem, 4vw, 3.4rem);
background: linear-gradient(165deg, rgba(var(--gold-rgb), 0.06), transparent 50%), var(--ink-2);
}
.receipt .d3 { margin-bottom: 1.2rem; }
[hidden] { display: none !important; }
/* ==========================================================================
10 MOTION & REVEAL
========================================================================== */
/* --drop is the element's RESTING offset -- part of the composition, not of
the animation. It defaults to 0px, so this is identical to the old
behaviour for everything that does not set it. The reveal travels a fixed
18px on top of whatever the resting offset is, and lands on it.
The previous version had `transform: none` here and a separate override
for the staggered cards, which is what killed the stagger: two rules, one
property, and the wrong one won. One property, one value now.
--drop MUST NOT INHERIT. A card and the plate inside it both carry
data-reveal, so an inherited offset is applied twice -- the photograph
slides down over its own caption while the card it sits in moves too. That
is exactly what happened on the first attempt, and it is the failure mode
to watch for if anything else is ever given a resting offset.
@property is what enforces it; the explicit reset below is the belt to its
braces, so the composition still holds on an engine that ignores the
at-rule rather than collapsing into overlapping text. */
@property --drop {
syntax: "";
inherits: false;
initial-value: 0px;
}
.piece [data-reveal] { --drop: 0px; }
[data-reveal] {
opacity: 0;
transform: translateY(calc(var(--drop, 0px) + 18px));
transition:
opacity var(--dur-rev) var(--ease),
transform var(--dur-rev) var(--ease);
transition-delay: calc(var(--d, 0) * 110ms);
will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: translateY(var(--drop, 0px)); }
/* Scripting off: no animation, but the composition still has to hold. */
html.no-js [data-reveal] { opacity: 1; transform: translateY(var(--drop, 0px)); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
/* Reduced motion removes the TRAVEL, not the layout. Forcing
`transform: none` here would flatten the staggered columns for anyone who
asks the system to stop animating -- a different page, not a calmer one. */
[data-reveal] { opacity: 1 !important; transform: translateY(var(--drop, 0px)) !important; }
.hero__plate { animation: none; }
.sheen::after, .seal::after { animation: none; opacity: 0.35; }
}
/* ==========================================================================
10.7 THE MARK
========================================================================== */
/* The mountain is a cut-out with a glow that fades to nothing, so it needs no
panel behind it and carries no box edge onto the ink. */
.wordmark__mark {
/* The mark carries the brand, so it leads the lockup rather than annotating
it. Its own glow means the drawn mountain is smaller than its box, so it
has to run visibly taller than the cap height to read at the same weight
as the name.
The size steps down in bands rather than on one curve, because the space
beside the name does not shrink smoothly: the nav appears at 861px and is
at its most cramped just above that, so the widest mark the bar can hold
actually FALLS as the viewport grows past 860. One clamp cannot express
that. Each band below is the largest size measured to keep a 16px gap
between LUXURY and whatever sits to its right at every width inside it. */
height: var(--mark-h);
width: auto;
align-self: center;
/* Optical, not mathematical: the artwork leaves roughly a tenth of its height
as glow above the peak, so the drawn mountain's centre sits below the box's.
A percentage nudge corrects it and keeps correcting it at any size, which a
fixed em margin could not. Measured, not guessed: at -4% the mountain's
optical centre and the cap height of APEX agree to under a pixel. */
transform: translateY(-4%);
/* The flex gap is tuned for the two words; the mark wants to sit closer than
that, so it pulls back against it. */
margin-right: -0.3rem;
flex: none;
transition: opacity 0.5s var(--ease);
}
.wordmark:hover .wordmark__mark,
.wordmark:focus-visible .wordmark__mark { opacity: 0.82; }
/* The footer sits above the name rather than beside it, and since 19 Sep it
carries the masthead's old size rather than its own. Sized by height now,
not width, so the two marks can be compared on the same axis and swapped
again in one place if Brad wants them back. */
.foot__mark {
display: block;
height: var(--mark-foot);
width: auto;
margin-bottom: clamp(1.2rem, 2vw, 1.8rem);
opacity: 0.92;
}
/* The band just above the mobile breakpoint used to be the tightest on the
whole site, and the masthead mark gave up the most room here. It no longer
needs to: measured at 1100, 1000, 900 and 861, the larger mark still leaves
164px, 102px, 38px and 24px between LUXURY and the nav. So this band's
override is gone from --mark-h and applies only to the footer, which
inherits it as part of the masthead's old curve. */
@media (max-width: 1100px) {
:root { --mark-foot: clamp(3.8rem, 7vw, 5.6rem); }
}
@media (max-width: 860px) {
/* The toggle replaces the nav and hands back some width. 93px is the
footer's old 140px width expressed as height on this artwork. */
:root { --mark-h: 93px; --mark-foot: clamp(3rem, 12vw, 6.2rem); }
}
@media (max-width: 430px) {
/* THE SWAP STOPS HERE, and it is a physical limit rather than a preference.
At 430px the larger mark measures 164px wide and the gap between LUXURY
and the toggle goes to -22px; at 390 it is -62px. The bar cannot hold it
at any size that also holds the name and the menu button, so below this
width the masthead keeps the small mark it always had.
The footer takes the same value here. On a phone both marks are small,
which is the closest a swap can get when one of the two sizes does not
fit in the place it would have to go. */
:root {
--mark-h: clamp(2.2rem, 10.5vw, 3.2rem);
--mark-foot: clamp(2.2rem, 10.5vw, 3.2rem);
}
}
@media (max-width: 374px) {
/* At 320px the bar cannot hold the mark, both words and the toggle at any
mark size — with the mark removed entirely there are still only 32px to
spare. So the masthead drops the secondary word, which frees about 60px
and lets the mark stay legible. Nothing is lost: the link keeps its
"Apex Luxury — home" label for screen readers, the drawer carries the
full name, and the footer shows the complete lockup. */
.masthead .wordmark__b { display: none; }
:root { --mark-h: clamp(2.5rem, 13vw, 3rem); }
}
/* ==========================================================================
10.8 CURATION TABS
========================================================================== */
/* Real links, not JavaScript state — /collection/handbags is a page a client
can bookmark or be sent. Styled as a quiet rule of type rather than as
buttons, so the pieces below them stay the loudest thing on the page. */
.tabs {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: clamp(1.6rem, 3vw, 3rem);
margin-block: clamp(2.5rem, 4.5vw, 4rem) clamp(2rem, 3.5vw, 3rem);
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--hairline);
}
.tabs__tab {
position: relative;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-55);
padding-bottom: 1.15rem; /* reaches the section rule, so the mark sits on it */
margin-bottom: -1.15rem;
transition: color 0.4s var(--ease);
}
.tabs__tab:hover,
.tabs__tab:focus-visible { color: var(--bone); }
/* The active mark is drawn over the section rule rather than under the word,
which is what makes the row read as tabs and not as a list of links. */
.tabs__tab::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s var(--ease);
}
.tabs__tab.is-on { color: var(--bone); }
.tabs__tab.is-on::after { transform: scaleX(1); }
/* The count rides above the baseline so it reads as an annotation, not as part
of the word. Tabular figures keep the row from shifting as counts change. */
.tabs__n {
margin-left: 0.5em;
font-size: 0.68em;
vertical-align: super;
color: var(--gold-soft);
font-variant-numeric: lining-nums tabular-nums;
letter-spacing: 0;
}
/* ==========================================================================
10.9 CONTACT
========================================================================== */
.contact { row-gap: clamp(3rem, 5vw, 4.5rem); }
/* Two people, side by side, in the left half. The fraud panel spans both rows
on the right, so the eye meets a name before it meets a warning. */
.contact__people {
grid-column: 1 / span 5;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.6rem, 2.6vw, 2.6rem);
}
.person {
padding-top: 1.4rem;
border-top: 1px solid var(--gold-24);
}
.person__name {
font-family: var(--serif);
font-size: clamp(1.3rem, 1.9vw, 1.7rem);
line-height: 1.2;
color: var(--bone);
}
.person__role {
margin-top: 0.5rem;
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--gold-soft);
}
.person__lines { margin-top: 1.6rem; }
.person__line + .person__line { margin-top: 1.2rem; }
.person__line dt {
font-size: var(--t-label);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone-55);
}
.person__line dd {
margin-top: 0.4rem;
/* An address is long and a column is narrow; let it break rather than push
the grid wider than the page. */
overflow-wrap: anywhere;
}
.contact__ways { grid-column: 1 / span 5; }
.contact__ways .specs { margin-top: 0; }
/* Each route gets room to breathe — this list is read line by line, not
scanned, so the rows are taller than the specification table's. */
.contact__ways .specs__row { padding-block: 1.4rem; }
.contact__strong {
font-family: var(--serif);
font-size: clamp(1.15rem, 1.6vw, 1.45rem);
letter-spacing: 0.01em;
color: var(--gold);
border-bottom: 1px solid var(--gold-24);
padding-bottom: 0.15em;
transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.contact__strong:hover,
.contact__strong:focus-visible { color: var(--bone); border-bottom-color: var(--bone); }
.contact__note {
display: block;
margin-top: 0.7rem;
font-size: var(--t-body);
color: var(--bone-55);
line-height: 1.75;
max-width: 40ch;
}
/* The fraud panel is a dossier, but it sits at the top of its column rather
than dropping below the fold — there is no long lede beside it to match. */
.contact__warn { margin-top: 0; }
/* The ledger elsewhere holds two-word answers, so it right-aligns them against
their labels. Here the answers are sentences, and a right-aligned ragged-left
paragraph is close to unreadable. Fixed label column, text set flush left. */
.contact__warn .ledger__row {
grid-template-columns: 9rem 1fr;
align-items: start;
gap: 1.8rem;
}
.contact__warn .ledger__v {
text-align: left;
font-size: 0.98rem;
line-height: 1.65;
}
.contact__warn .ledger__k { line-height: 1.6; }
/* ==========================================================================
11 RESPONSIVE
========================================================================== */
@media (max-width: 1100px) {
.statement__marker { grid-column: 1 / span 12; }
.statement__body { grid-column: 1 / span 12; margin-top: 2.5rem; }
.statement__body .serif-para { max-width: 40ch; }
.showcase__head h1,
.showcase__head h2 { grid-column: 1 / span 9; }
.showcase__head .showcase__aside { grid-column: 1 / span 8; }
.auth__lede,
.contact__people,
.contact__ways,
.auth__record,
.auth__split,
.protocol { grid-column: 1 / span 12; }
.dossier {
grid-column: 1 / span 12;
grid-row: auto;
margin-top: 0;
}
.concierge__plate { grid-column: 1 / span 6; }
.concierge__body { grid-column: 8 / span 5; }
.detail__gallery { grid-column: 1 / span 7; }
.detail__panel { grid-column: 9 / span 4; }
.inquiry__aside { grid-column: 1 / span 6; }
.form { grid-column: 1 / span 12; margin-top: 1rem; }
.foot__top { grid-template-columns: 1fr 1fr 1fr; }
.foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
:root { --lh-hero: 0.92; }
/* Two people will not sit side by side on a phone. */
.contact__people { grid-template-columns: minmax(0, 1fr); }
/* A 9rem label column leaves the sentence a gutter to fall down. Stack. */
.contact__warn .ledger__row {
grid-template-columns: 1fr;
gap: 0.6rem;
}
.nav { display: none; }
.nav__toggle { display: inline-flex; }
.hero { min-height: 92svh; }
.hero__rail { display: none; }
.hero__line { grid-column: 1 / span 12; }
.hero__eyebrow { grid-column: 1 / span 12; }
.hero__note { grid-column: 1 / span 12; }
.hero__aside {
grid-column: 1 / span 12;
text-align: left;
margin-top: 2.6rem;
}
.hero__cue { display: none; }
.assurance { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
.assurance__item:nth-child(2n) { border-right: 0; }
.assurance__item:nth-child(n+3) {
padding-top: 1.6rem;
border-top: 1px solid var(--hairline);
}
/* One column at this width, so the drop has nothing to offset against --
it would just push every other card down the page. Cancelled by zeroing
the variable, which leaves the reveal animation working normally.
The alternating indent that used to live here went with it. It was the
narrow-width stand-in for the stagger, but an indent on a single-column
stack does not move a card sideways -- it makes it narrower. Measured at
390px that was 350px against 319px, which is the same unequal-plate
problem this whole change exists to remove, just arriving by a different
route. A phone gets one column, one width, and no rhythm it has no room
to read. */
.grid.spread { grid-template-columns: minmax(0, 1fr); }
.piece--a, .piece--b, .piece--c, .piece--d {
--drop: 0px;
margin-left: 0;
}
/* The archive band goes to two columns rather than one. It keeps reading as
smaller than the release above it -- which is the whole point of the band
-- and the gap between the two is still --gutter, so the spacing system
survives the breakpoint intact. Below 520px it collapses to one column
with the rest; see that block. */
.grid.spread--quiet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.showcase__foot { justify-content: flex-start; }
.concierge__plate { grid-column: 1 / span 12; }
.concierge__body { grid-column: 1 / span 12; padding-top: 0; }
.detail__gallery { grid-column: 1 / span 12; }
.detail__panel {
grid-column: 1 / span 12;
position: static;
top: auto;
}
.detail__pair { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: 1fr 1fr; }
.inquiry__aside { grid-column: 1 / span 12; }
.form__grid { grid-template-columns: 1fr; }
.prov__head,
.prov__list { grid-column: 1 / span 12; }
.prov__list { margin-top: 2.5rem; }
.esc__head,
.esc__list { grid-column: 1 / span 12; }
.esc__list { margin-top: 2.5rem; }
.foot__top { grid-template-columns: 1fr 1fr; }
.terms__row { grid-template-columns: 1fr; gap: 0.5rem; }
}
@media (max-width: 520px) {
:root { --sec-y: 5.5rem; }
/* The strip wraps to two lines at this width, so it is taller -- but only
when it is actually there. Guarded like the base value in section 01.
4rem, not 3.6rem: measured at 320px the wrapped strip renders 62px and
3.6rem reserves 57.6, so the masthead sat 4px over the bottom of it. */
:root:has(.proto) { --proto-h: 4rem; }
.specs__row { grid-template-columns: 1fr; gap: 0.4rem; }
.foot__top { grid-template-columns: 1fr; }
.detail__price { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
/* The archive band joins the release at one column. Two placed pieces side
by side on a phone are 140px of photograph each, which is a contact sheet
rather than a record. */
.grid.spread--quiet { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
12 NOT FOUND
==========================================================================
The 404 page was static HTML with inline styles until 18 Sep 2026 and did
not clear the fixed masthead -- on a phone the "404 / Not found" marker sat
underneath the wordmark. It now uses the same token formula as .piece-head,
so it tracks the bar's height at every breakpoint instead of guessing it. */
.notfound {
padding-top: calc(var(--proto-h) + max(clamp(8rem, 16vh, 12rem), var(--bar-h) + 2rem));
padding-bottom: clamp(4rem, 9vw, 7rem);
min-height: 62svh;
display: flex;
align-items: center;
}
.notfound__body { grid-column: 1 / span 6; }
.notfound .d1 { margin-top: clamp(1.6rem, 2.6vw, 2.4rem); }
.notfound .prose { margin-top: 2rem; }
.notfound__action { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
@media (max-width: 860px) {
.notfound__body { grid-column: 1 / span 12; }
.notfound { min-height: 0; display: block; }
}
@media print {
body { background: #fff; color: #111; }
.masthead, .drawer, .hero__cue, .proto { display: none; }
}
/* ==========================================================================
12 LEGAL PAGES — terms of sale, privacy
--------------------------------------------------------------------------
Added 20 September 2026, when the two pages were first written.
These are the only pages on the site a client reads rather than looks at, so
the rules here are all about sustained reading rather than composition:
- A single column at 62ch. The rest of the site runs .prose at 52ch, which
is right beside a photograph; a terms page has no photograph and a
too-narrow column turns twelve clauses into thirty screens of scrolling.
- Body text at --bone-70 rather than --bone-55. The quieter tone is right
for a caption and wrong for a paragraph somebody has to read twice.
- Headings are numbered by CSS counter, so inserting a clause renumbers the
page instead of leaving 4, 5, 5, 6 behind. The number is decorative and
the text still reads correctly without it.
========================================================================== */
.legal {
grid-column: 2 / span 8;
counter-reset: legal-section;
}
@media (max-width: 1100px) { .legal { grid-column: 1 / span 10; } }
@media (max-width: 860px) { .legal { grid-column: 1 / span 12; } }
.legal__updated {
margin-top: 1.4rem;
color: var(--bone-38);
font-family: var(--sans);
font-size: var(--t-label);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.legal__lede {
margin-top: clamp(2rem, 3vw, 2.6rem);
color: var(--bone-70);
font-size: clamp(1.05rem, 1.25vw, 1.2rem);
line-height: 1.7;
max-width: 58ch;
}
.legal__body { margin-top: clamp(3rem, 5vw, 4.5rem); }
.legal__body h2 {
counter-increment: legal-section;
margin-top: clamp(2.8rem, 4.5vw, 4rem);
margin-bottom: 1.2rem;
font-family: var(--serif);
font-weight: 300;
font-size: clamp(1.4rem, 2vw, 1.85rem);
line-height: 1.25;
color: var(--bone);
}
.legal__body h2::before {
content: counter(legal-section) " ";
color: var(--gold);
font-family: var(--sans);
font-size: 0.6em;
letter-spacing: 0.12em;
margin-right: 0.9em;
vertical-align: 0.22em;
font-variant-numeric: lining-nums;
}
.legal__body h2:first-child { margin-top: 0; }
/* An unnumbered sub-heading inside a clause — "When a refund is paid", and the
like. It must not take a number, or the clause numbering skips. */
.legal__body h3 {
margin-top: 2.2rem;
margin-bottom: 0.8rem;
font-family: var(--sans);
font-weight: 400;
font-size: var(--t-label);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bone-70);
}
.legal__body p {
margin-top: 1.1em;
color: var(--bone-70);
max-width: 62ch;
line-height: 1.72;
}
.legal__body p:first-of-type { margin-top: 0; }
.legal__body ul, .legal__body ol {
margin-top: 1.1em;
padding-left: 1.3em;
max-width: 62ch;
color: var(--bone-70);
line-height: 1.72;
}
.legal__body li { margin-top: 0.5em; }
.legal__body li::marker { color: var(--bone-38); }
.legal__body strong { color: var(--bone); font-weight: 400; }
.legal__body a { color: var(--gold-soft); }
/* A rate table, and anything else small enough to read as a grid rather than a
sentence. Borders are hairlines so it reads as typography, not a spreadsheet. */
.legal__table {
width: 100%;
margin-top: 1.6em;
border-collapse: collapse;
font-size: 0.95em;
color: var(--bone-70);
}
.legal__table th, .legal__table td {
text-align: left;
padding: 0.85rem 1rem 0.85rem 0;
border-bottom: 1px solid var(--hairline);
vertical-align: top;
}
.legal__table th {
color: var(--bone-38);
font-family: var(--sans);
font-weight: 400;
font-size: var(--t-label);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.legal__table td:last-child { padding-right: 0; }
.legal__table td { font-variant-numeric: lining-nums; }
/* --- 13 SELLING PAGE ----------------------------------------------------
One modifier, for one section.
.auth__split was written for the home page's guarantee block, where it sits
UNDER .auth__lede inside the same left five columns and the right half of the
grid carries the dossier. The selling page's "two routes" section has no
dossier, so reusing the class unchanged left columns 6-12 empty and the
section read as though something had failed to load. This puts the split in
the right-hand columns instead, matching the rhythm the consignment section
below it already uses (lede 1/5, panel 7/6).
Scoped as a modifier rather than changed in place: the home page depends on
the stacked behaviour, and a global edit would have moved it there too. */
.auth__split--side {
grid-column: 7 / span 6;
margin-top: 0;
}
@media (max-width: 1100px) {
.auth__split--side { grid-column: 1 / span 12; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
}
/* --- 14 CONSIGNMENT PAGE ------------------------------------------------
Same situation as .auth__split--side above, and the same fix.
.protocol is 1 / span 5 because everywhere it appeared before, a .dossier sat
beside it at 7 / span 6. The consignment page's protocol section has no
dossier -- the dossier is further down, beside the not-genuine clause -- so
the six steps sat under the lede in the left five columns and the right half
of the grid was empty for the length of the longest section on the site.
Caught by measuring, not by looking: the reveal animation means an
un-scrolled screenshot shows near-black either way. */
.protocol--side {
grid-column: 7 / span 6;
margin-top: 0;
}
@media (max-width: 1100px) {
.protocol--side { grid-column: 1 / span 12; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
}
/* ==========================================================================
Photograph sizes, revised 26 Sep 2026.
--------------------------------------------------------------------------
Brad: "I think the images are too large on the website as they appear
overwhelming." Measured before the change, at 1440px: every curation plate
625px square, the listing's lead frame 753px -- taller than the viewport
once the header is counted, so a single photograph filled the screen and
the visitor scrolled a screen per piece. At 1920px the plates reached 833px.
Same system, fewer pixels per piece. Equal widths, and the gap still IS
--gutter, so everything the 19 Sep notes above settled -- no stagger, no
size-as-ranking, margin and gap one measure -- still holds. Only the column
counts change:
curation release 2 -> 3 columns 625 -> ~396px at 1440
archive band 3 -> 4 columns stays the step smaller than release
home page 2 -> 4 columns one row: three pieces and the
Coming to Release tile
listing lead frame 7 cols, capped at 600px
This lives in main.v2.css, not main.css: the stylesheet is cached for a year
(.htaccess), so a change under the old name would never reach anyone who has
already visited. lib/inventory.php points at the new name. The next change
is main.v3.css.
========================================================================== */
.grid.spread { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.spread--quiet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.spread--home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spread { row-gap: clamp(3rem, 6vw, 6rem); }
.detail__gallery { max-width: 600px; }
/* Card type steps down with the plate, or a 396px photograph wears the words
that were sized for 625px. Same ratios as the archive band's adjustments. */
.spread .piece__name { font-size: clamp(1rem, 1.5vw, 1.4rem); }
.spread--home .piece__name,
.spread--quiet .piece__name { font-size: clamp(0.9rem, 1.2vw, 1.15rem); }
@media (max-width: 1100px) {
.grid.spread { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.spread--quiet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.spread--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.grid.spread,
.grid.spread--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.spread--quiet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail__gallery { max-width: none; }
}
@media (max-width: 520px) {
.grid.spread,
.grid.spread--home,
.grid.spread--quiet { grid-template-columns: minmax(0, 1fr); }
}
/* At the smaller plates the caption's two-column layout (name left, price
right) squeezed the name into three lines -- "In hand, waiting to / be /
officially listed". On the home strip and the archive band the price drops
under the name instead; at the curation's 396px the side-by-side still fits. */
.spread--home .piece__meta,
.spread--quiet .piece__meta { grid-template-columns: minmax(0, 1fr); }
.spread--home .piece__price,
.spread--quiet .piece__price { grid-column: 1; grid-row: auto; margin-top: 0.5rem; }
/* The listing: a 600px frame left alone in a seven-column track opened a wide
black gap before the panel. The frame's track is now six columns and the
panel starts one column sooner, so the gap is one column, as before. */
.detail__gallery { grid-column: 1 / span 6; }
.detail__panel { grid-column: 8 / span 5; }
@media (max-width: 1100px) {
.detail__gallery { grid-column: 1 / span 7; max-width: none; }
.detail__panel { grid-column: 9 / span 4; }
}
@media (max-width: 860px) {
.detail__gallery,
.detail__panel { grid-column: 1 / span 12; }
}
/* ==========================================================================
Four-fifths, 26 Sep 2026 -- the curation and the home page.
--------------------------------------------------------------------------
Brad tried three layouts side by side in the preview: three across (396px
at 1440, "overwhelming" was the complaint before it, "way too small" after
the doubled-space trial at 311px), and settled on this one.
Two across, each photograph 4/5 of the original two-across size -- 625px ->
500px at 1440 -- with what that frees shared EQUALLY between the two page
edges and the gap between the photographs (147px at 1440). Edge and gap
remain one measure, as the 19 Sep rule requires; the measure is simply
larger. The grid is widened to the full viewport (negative margin) and the
two fixed tracks are spaced with space-evenly, which is what makes all three
spaces equal.
Plate width = 0.4 x (viewport - 3 x --gutter), i.e. 0.8 x the old plate.
Applies to the release grid on the curation and to both grids on the home
page. The archive band (.spread--quiet) keeps its own, smaller layout.
Below 861px the tablet/phone rules above take over unchanged.
This file is main.v3.css. The next change is main.v4.css (see the note on
the v2 block above for why the name changes).
========================================================================== */
@media (min-width: 861px) {
.grid.spread:not(.spread--quiet) {
margin-inline: calc(-1 * var(--gutter));
grid-template-columns: repeat(2, calc((100% - 3 * var(--gutter)) * 0.4));
justify-content: space-evenly;
column-gap: 0;
row-gap: clamp(4rem, 10vw, 10rem);
}
/* At 500px the caption has room for the price beside the name again. */
.spread--home .piece__meta { grid-template-columns: 1fr auto; }
.spread--home .piece__price { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.spread--home .piece__name { font-size: clamp(1rem, 1.5vw, 1.4rem); }
}
/* ==========================================================================
Audit fixes, 28 September 2026. Nothing here changes how the site looks;
each rule makes something easier to tap, read or tell apart.
========================================================================== */
/* Tap targets. The Menu button measured 89 x 21 px on a phone and the footer,
breadcrumb and drawer links about 16-22 px tall -- under half the ~44 px a
thumb needs. (Links inside a sentence are left alone -- padding them would
push the lines apart, and the guidelines exempt them.) Padding enlarges the area that responds to a tap; the matching
negative margin gives the space back, so nothing moves on screen. */
.nav__toggle { padding-block: 12px; margin-block: -12px; }
.drawer__close { padding: 12px 8px; margin: -12px -8px; }
.drawer__meta a,
.foot__col a,
.crumb a,
.rel__all { display: inline-block; padding-block: 10px; margin-block: -10px; }
.foot__legal a,
.trust__item a { display: inline-block; padding-block: 10px; margin-block: -10px; }
/* The little counts on the curation tabs ("Timepieces 3") were 7.5 px. */
.tabs__n { font-size: 0.95em; line-height: 0; } /* line-height 0: the bigger count must not make the tab row taller */
/* Links inside running text on Terms and Privacy were told apart from the
words around them by colour alone, which not everyone can see. */
.legal__body a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
text-decoration-color: rgba(var(--gold-soft-rgb), 0.55);
}
/* The masthead logo is now a (WebP, 102 KB, with a PNG fallback)
instead of a 300 KB PNG on every page. display: contents keeps the ![]()
the direct child of the flex row, so the lockup is laid out exactly as
before. Audit 28 Sep 2026. */
.wordmark picture { display: contents; }
/* The drawer turns visible at once when it opens (it still fades in), so the
script can move keyboard focus into it straight away. Closing keeps the
700 ms delay, so it fades out before it hides. Audit 28 Sep 2026. */
.drawer.is-open { transition: opacity 700ms var(--ease), visibility 0s; }
/* ---------------------------------------------------------------------------
04 · In their words -- buyer reviews on the home page. Added 26 Oct 2026.
Fed by _data/reviews.json; the whole section is absent while that file is
missing or empty. Every quote is a real buyer's own words, as written, from
eBay feedback, Grailzee or a message to Apex (with the buyer's permission).
Never invented, never reworded -- absolute rule 7.
--------------------------------------------------------------------------- */
.voices {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(3rem, 5vw, 4.5rem) var(--col-gap);
}
.voices--one { grid-template-columns: minmax(0, 46rem); }
.voice figure {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
border-top: 1px solid var(--hairline);
padding-top: clamp(1.6rem, 2.4vw, 2.2rem);
}
.voice__quote {
flex: 1;
quotes: "\201C" "\201D";
font-family: var(--serif);
font-weight: 300;
font-size: clamp(1.2rem, 1.7vw, 1.5rem);
line-height: 1.5;
letter-spacing: -0.004em;
color: var(--bone);
}
.voice__quote p::before { content: open-quote; }
.voice__quote p::after { content: close-quote; }
.voice__by {
margin-top: 1.8rem;
display: grid;
gap: 0.3rem;
}
@media (max-width: 1100px) {
.voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.voices--one { grid-template-columns: minmax(0, 46rem); }
}
@media (max-width: 640px) {
.voices,
.voices--one { grid-template-columns: minmax(0, 1fr); }
}
/* "From Our Clients" is the longest chapter label on the page; in the
four-column marker slot it broke one word per line on a phone. */
#voices .showcase__head .marker { grid-column: 1 / -1; }
/* ==========================================================================
A quarter smaller on laptops and desktops -- 1 November 2026.
--------------------------------------------------------------------------
Brad: "change the images for the website size smaller but leave them the
current size for phones", applied to everything except Recently Placed.
Phones and tablets (860px and below) are untouched.
Cards (home curation, Coming to Release, curation release grid):
0.4 -> 0.3 x (viewport - 3 x --gutter), i.e. 500px -> 375px at 1440.
Edge and gap stay one measure (space-evenly), as the 19 Sep rule asks.
Listing lead photograph: 600px cap -> 450px, track 6 -> 5 columns, the
panel starts one column sooner so the gap before it stays small.
Photography index on a listing: left at 3 across, original size
(Brad, after the preview: "keep these the original size").
Recently Placed is left exactly as it was: the archive band under
Everything (.spread--quiet) and the archive's own tab (.spread--placed,
which keeps the 26 Sep four-fifths size).
History worth knowing before going smaller again: on 26 Sep Brad tried
three across at 396px and two across at 311px and chose 500px. This is
375px, two across.
========================================================================== */
@media (min-width: 861px) {
.grid.spread:not(.spread--quiet):not(.spread--placed) {
grid-template-columns: repeat(2, calc((100% - 3 * var(--gutter)) * 0.3));
}
}
@media (min-width: 1101px) {
.detail__gallery { grid-column: 1 / span 5; max-width: 450px; }
.detail__panel { grid-column: 7 / span 6; }
}
@media (min-width: 861px) and (max-width: 1100px) {
.detail__gallery { max-width: 75%; }
}
/* Small laptops (861-1100px): at a straight quarter the release cards (267px at
1024) came out smaller than the Recently Placed band under Everything (281px),
which would make sold pieces read bigger than ones for sale. Here they step
down a little less, and stay the larger of the two. */
@media (min-width: 861px) and (max-width: 1100px) {
.grid.spread:not(.spread--quiet):not(.spread--placed) {
grid-template-columns: repeat(2, calc((100% - 3 * var(--gutter)) * 0.34));
}
}