/* ============================================================================
JI JEWELRY — DESIGN SYSTEM
----------------------------------------------------------------------------
Direction: THE DRAFTING PLATE.
Pulled from the maker's own world: a bench, a caliper, a technical drawing
made before anything is cut. Signature element is the drafting mark system,
dimension lines with tick ends and mono labels, registration crosshairs and
leader lines that draw themselves on scroll. Everything else stays quiet so
that signature reads.
Palette is white and black as briefed. The canvas is warm off-white paper,
never pure #fff. Ink is near black, never pure #000. One accent, pulled from
blue opal, appears only on calls to action, focus states and the builder's
live values.
========================================================================== */
/* ------------------------------------------------------------------ TOKENS */
:root{
/* Surfaces. Never pure white, never pure black. */
--paper: #F5F4F1; /* page canvas, warm drafting paper */
--paper-2: #EDEBE6; /* recessed panels, alternating bands */
--paper-3: #E3E0D9; /* hairlines on paper */
--ink: #0C0C0E; /* the black sections, header, footer */
--ink-2: #16171A; /* raised panels on ink */
--ink-3: #24262B; /* hairlines on ink */
/* Type colours */
--text: #16171A;
--text-soft: #55585F;
--text-faint: #60636B;
--on-ink: #F2F1EE;
--on-ink-soft: #9DA2AB;
--on-ink-faint: #888E96;
/* ------------------------------------------------------------------ ACCENT
Gold. Rare doses only, and the whole site's accent lives in these six
lines — nothing anywhere else names a colour from this family, which is
why changing it is this short.
Two golds, not one, because the site has two grounds. On warm paper a
gold light enough to look like gold is unreadable, so --accent is a deep
antique gold that carries text and icons. On the black sections the light
gold is the one that sings, and that is where most of the accent on this
site actually appears: the header, the footer, the film band, the
portfolio, the maker section, the builder's live values, the review
section and the business card are all ink.
Both were measured against the blue opal they replaced rather than picked
by eye, so no part of the site became harder to read in the swap:
on paper on ink white on it
--accent 5.56 — 6.12 (was 5.42 / 5.96)
--accent-hover 7.82 — 8.60 (was 7.29 / 8.02)
--accent-lit — 11.05 — (was 11.09)
The -rgb pairs exist so every translucent wash on the site derives from
the same two colours instead of hard-coding them at a dozen alphas. */
--accent: #7A5E0B; /* 5.56:1 on paper — deep antique gold */
--accent-hover: #5F4908;
--accent-lit: #E3BE72; /* 11:1 on ink, the builder's live colour */
--accent-rgb: 122,94,11;
--accent-lit-rgb: 227,190,114;
--accent-ghost: rgba(var(--accent-rgb),.12);
/* Drafting marks */
--draft: rgba(22,23,26,.30);
--draft-strong: rgba(22,23,26,.55);
--draft-on-ink: rgba(242,241,238,.26);
/* Type */
--display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Motion. Nothing snaps. */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--t-fast: .22s;
--t-mid: .45s;
--t-slow: .9s;
/* Rhythm */
--gut: clamp(20px, 4vw, 56px);
--sect: clamp(72px, 10vw, 152px);
--maxw: 1440px;
--hdr: 64px;
--radius: 3px; /* restrained. drafting, not app UI */
--radius-lg: 6px;
}
/* -------------------------------------------------------------------- BASE */
*,*::before,*::after{box-sizing:border-box}
html,body{
overflow-x:hidden; /* fallback first */
overflow-x:clip; /* then the real rule */
}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
margin:0;
background:var(--paper);
color:var(--text);
font-family:var(--body);
font-size:clamp(15px,.4vw + 14px,17px);
line-height:1.62;
font-weight:400;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
/* One fixed environment layer, so scrolling reads as moving through a place. */
.env{
position:fixed;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(120% 80% at 15% -10%, rgba(var(--accent-rgb),.045), transparent 60%),
radial-gradient(90% 70% at 100% 110%, rgba(22,23,26,.05), transparent 62%);
animation:envDrift 90s var(--ease) -30s infinite alternate;
}
@keyframes envDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-1.5%,1.2%,0) scale(1.05)}}
/* Grain, at whisper level. */
.env::after{
content:"";position:absolute;inset:0;opacity:.4;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
main{position:relative;z-index:1}
.skip{
position:absolute;left:-9999px;top:0;z-index:200;
background:var(--ink);color:var(--on-ink);padding:12px 18px;
font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}
:focus-visible{
outline:2px solid var(--accent);
outline-offset:3px;
border-radius:2px;
}
.on-ink :focus-visible,.ink :focus-visible{outline-color:var(--accent-lit)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{width:100%;max-width:960px;margin-inline:auto;padding-inline:var(--gut)}
/* -------------------------------------------------------------- TYPOGRAPHY */
h1,h2,h3,h4{
font-family:var(--display);
font-weight:700;
line-height:1.02;
letter-spacing:-.028em;
margin:0;
text-wrap:balance;
}
h1{font-size:clamp(38px,7.2vw,92px);font-weight:800;letter-spacing:-.036em}
h2{font-size:clamp(30px,4.6vw,62px)}
h3{font-size:clamp(21px,2.1vw,30px);letter-spacing:-.02em}
h4{font-size:clamp(17px,1.2vw,20px);letter-spacing:-.012em}
p{margin:0}
.lede{font-size:clamp(16px,1.05vw + 13px,20px);line-height:1.55;color:var(--text-soft);max-width:56ch}
.on-ink .lede{color:var(--on-ink-soft)}
.kicker{
font-family:var(--mono);
font-size:11px;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--text-faint);
display:flex;align-items:center;gap:10px;
margin:0 0 clamp(16px,2vw,26px);
}
.kicker::before{
content:"";width:26px;height:1px;background:var(--draft-strong);flex:none;
}
.on-ink .kicker{color:var(--on-ink-faint)}
.on-ink .kicker::before{background:var(--draft-on-ink)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase}
/* ------------------------------------------- SIGNATURE: THE DRAFTING MARKS */
/* A dimension line: two tick ends, a rule between them, a mono measurement. */
.dim{
display:flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;
color:var(--text-faint);text-transform:uppercase;
}
.dim::before,.dim::after{
content:"";height:7px;width:1px;background:var(--draft-strong);flex:none;
}
.dim .rule{flex:1;height:1px;background:var(--draft);min-width:24px}
.on-ink .dim{color:var(--on-ink-faint)}
.on-ink .dim::before,.on-ink .dim::after{background:var(--draft-on-ink)}
.on-ink .dim .rule{background:var(--draft-on-ink)}
/* Registration crosshair, dropped at section corners. */
.reg{
position:absolute;width:13px;height:13px;pointer-events:none;
opacity:.55;
}
.reg::before,.reg::after{
content:"";position:absolute;background:var(--draft-strong);
}
.reg::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)}
.reg::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)}
.on-ink .reg::before,.on-ink .reg::after{background:var(--draft-on-ink)}
/* A hairline that draws itself when it enters view. */
.leader{
height:1px;width:100%;background:var(--draft);
transform-origin:left center;transform:scaleX(0);
transition:transform 1.1s var(--ease-out);
}
.in .leader,.leader.in{transform:scaleX(1)}
.on-ink .leader{background:var(--draft-on-ink)}
/* ----------------------------------------------------------------- BUTTONS */
.btn{
--bg:var(--ink); --fg:var(--on-ink); --bd:var(--ink);
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
padding:15px 26px;
background:var(--bg);color:var(--fg);border:1px solid var(--bd);
border-radius:var(--radius);
font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
font-weight:500;cursor:pointer;overflow:hidden;
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
text-shadow:none;
}
.btn .arw{transition:transform var(--t-mid) var(--ease-out);display:inline-block}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arw{transform:translateX(5px)}
.btn:active{transform:translateY(0)}
.btn-accent{--bg:var(--accent);--bd:var(--accent);--fg:#fff}
.btn-accent:hover{--bg:var(--accent-hover);--bd:var(--accent-hover)}
.btn-ghost{--bg:transparent;--fg:var(--text);--bd:rgba(22,23,26,.28)}
.btn-ghost:hover{--bd:var(--ink);--bg:rgba(22,23,26,.04)}
.on-ink .btn-ghost{--fg:var(--on-ink);--bd:rgba(242,241,238,.3)}
.on-ink .btn-ghost:hover{--bd:var(--on-ink);--bg:rgba(242,241,238,.07)}
.btn-light{--bg:var(--paper);--fg:var(--ink);--bd:var(--paper)}
.btn-light:hover{--bg:#fff;--bd:#fff}
.btn-sm{padding:11px 18px;font-size:11px}
.btn-block{width:100%}
/* A text link that behaves like a leader line. */
.tlink{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
color:var(--text);padding-bottom:5px;position:relative;font-weight:500;
}
.tlink::after{
content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
background:currentColor;transform-origin:right center;transform:scaleX(1);
transition:transform var(--t-mid) var(--ease-out);
}
.tlink:hover::after{transform:scaleX(0);transform-origin:left center}
.tlink .arw{transition:transform var(--t-mid) var(--ease-out)}
.tlink:hover .arw{transform:translateX(5px)}
.on-ink .tlink{color:var(--on-ink)}
/* Touch targets, added without changing layout. */
@media (pointer:coarse){
.btn{min-height:44px}
.tlink{min-height:44px;align-items:center}
.icon-btn{min-width:44px;min-height:44px}
}
/* ------------------------------------------------------- ANNOUNCEMENT BAR
Drawn by assets/js/content.js, and ONLY when Jake has typed an announcement
into the dashboard. With the field empty no element is inserted, so these
rules match nothing and the site looks exactly as it does today — which is
the point: a feature that is off should cost the page nothing, not a hidden
empty bar pushing everything down by a pixel.
The header is fixed, so a bar above it has to move the header down as well.
That is the `body:has()` rule: supported everywhere this site targets, and
in a browser without it the bar simply scrolls away under the header
instead of sitting above it, which is a small ugliness and not a break. */
.anb{
position:relative;z-index:101;
background:var(--accent);color:#fff;
font:500 12.5px/1 var(--body);letter-spacing:.01em;
text-align:center;padding:9px 16px;
}
.anb a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.anb a:hover{text-decoration-thickness:2px}
body:has(.anb) .hdr{top:34px}
@media (max-width:700px){
.anb{font-size:11.5px;padding:8px 14px;line-height:1.35}
}
/* ------------------------------------------------------------------ HEADER */
.hdr{
position:fixed;top:0;left:0;right:0;z-index:100;
background:var(--ink);
height:var(--hdr);
transform:translateY(0);
transition:transform .42s var(--ease-out);
will-change:transform;
}
/* Direction aware: hidden when scrolling down, back on the first upward move. */
.hdr.is-hidden{transform:translateY(-100%)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink-3)}
.hdr-in{
height:100%;display:flex;align-items:center;gap:clamp(16px,3vw,44px);
max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:var(--on-ink)}
/* The real logo. Height is driven, width follows the intrinsic 2.606:1 ratio,
so the artwork can never stretch. `height:auto` on the width axis is not
needed because only one axis is ever set. */
.brand .mark{height:26px;width:auto;flex:none;display:block}
.brand svg{width:34px;height:auto;flex:none}
.brand .blk{display:flex;flex-direction:column;justify-content:center}
.brand .bt{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.01em;line-height:1}
.brand .bs{font-family:var(--mono);font-size:8.5px;letter-spacing:.3em;color:var(--on-ink-faint);text-transform:uppercase;margin-top:4px;line-height:1}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);margin-inline:auto}
.nav a{
font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
color:var(--on-ink-soft);padding:8px 0;position:relative;
transition:color var(--t-fast) var(--ease);
}
.nav a::after{
content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--accent-lit);
transform:scaleX(0);transform-origin:left center;
transition:transform var(--t-mid) var(--ease-out);
}
.nav a:hover,.nav a[aria-current]{color:var(--on-ink)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.hdr-act{display:flex;align-items:center;gap:2px;flex:none}
.icon-btn{
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;background:none;border:0;cursor:pointer;
color:var(--on-ink-soft);border-radius:var(--radius);position:relative;
transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.icon-btn:hover{color:var(--on-ink);background:rgba(242,241,238,.07)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.cart-count{
position:absolute;top:5px;right:4px;min-width:15px;height:15px;padding:0 3px;
background:var(--accent-lit);color:var(--ink);border-radius:8px;
font-family:var(--mono);font-size:9px;font-weight:600;
display:flex;align-items:center;justify-content:center;
transform:scale(0);transition:transform var(--t-mid) var(--ease-out);
}
.cart-count.on{transform:scale(1)}
.burger{display:none}
/* Search drawer */
.search-bar{
position:absolute;top:100%;left:0;right:0;background:var(--ink-2);
border-bottom:1px solid var(--ink-3);
max-height:0;overflow:hidden;
/* `visibility` as well as the height, the way the drawer below already does
it. Collapsing to max-height:0 alone leaves the field and its button in
the tab order, so a keyboard user tabbing through the header dropped into
a clipped, zero-height box with no visible focus anywhere on screen.
Delayed on the way out so the collapse still animates. */
visibility:hidden;
transition:max-height var(--t-mid) var(--ease-out),
visibility 0s linear var(--t-mid);
}
.search-bar.open{
max-height:110px;
visibility:visible;
transition:max-height var(--t-mid) var(--ease-out), visibility 0s;
}
.search-bar form{
max-width:var(--maxw);margin-inline:auto;padding:18px var(--gut);
display:flex;align-items:center;gap:14px;
}
.search-bar input{
flex:1;background:none;border:0;border-bottom:1px solid var(--ink-3);
color:var(--on-ink);padding:9px 0;font-family:var(--mono);font-size:13px;letter-spacing:.06em;
}
.search-bar input::placeholder{color:var(--on-ink-faint)}
.search-bar input:focus{outline:none;border-bottom-color:var(--accent-lit)}
/* Mobile drawer */
.drawer{
position:fixed;inset:var(--hdr) 0 0;z-index:99;background:var(--ink);
transform:translateX(100%);transition:transform .42s var(--ease-out);
display:flex;flex-direction:column;padding:var(--gut);gap:4px;
overflow-y:auto;visibility:hidden;
}
.drawer.open{transform:translateX(0);visibility:visible}
.drawer a{
font-family:var(--display);font-weight:700;font-size:clamp(26px,7vw,38px);
letter-spacing:-.03em;color:var(--on-ink);padding:13px 0;
border-bottom:1px solid var(--ink-3);display:flex;align-items:baseline;gap:14px;
}
.drawer a .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--on-ink-faint);font-weight:400}
.drawer .drawer-foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:12px}
/* --------------------------------------------------------- REVEAL / MOTION */
/* ------------------------------------------------- WHY html.js GATES THESE
.rv and .rv-s hide their content until JavaScript adds .in. That is fine
while the script runs, and a disaster when it does not: with site.js
missing or slow, most of a page sits at opacity 0 and the site looks
empty. That is exactly what happened on the live portfolio - one card
visible, the rest invisible - while the assets were 404ing.
The `html.js` class is set by a one-line inline script in every page's
, before anything can fail. No JavaScript, no class, no hiding:
the content simply shows. site.js also carries a timer that reveals
anything still hidden a few seconds in, so a stalled observer cannot
leave the page blank either. Two independent nets; the content is never
hidden with nothing able to bring it back. */
html.js .rv{opacity:0;transform:translateY(22px);
transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-s{opacity:0;transform:translateY(16px);
transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
html.js .in > .rv-s,html.js .rv-s.in{opacity:1;transform:none}
/* Stagger children, then retire the delays so hovers do not lag forever.
The retirement rule matches nth-child specificity on purpose. */
.stag > *{transition-delay:0ms}
.stag.in > *:nth-child(1){transition-delay:0ms}
.stag.in > *:nth-child(2){transition-delay:70ms}
.stag.in > *:nth-child(3){transition-delay:140ms}
.stag.in > *:nth-child(4){transition-delay:210ms}
.stag.in > *:nth-child(5){transition-delay:280ms}
.stag.in > *:nth-child(6){transition-delay:350ms}
.stag.done > *:nth-child(n){transition-delay:0ms}
/* Masked line reveal. Descender room so g, y and p keep their tails. */
.mask{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;display:block}
.mask > span{
display:block;transform:translateY(105%);
transition:transform 1s var(--ease-out);
}
.in .mask > span{transform:translateY(0)}
.in .mask:nth-child(2) > span{transition-delay:90ms}
.in .mask:nth-child(3) > span{transition-delay:180ms}
/* ------------------------------------------------------------------- HERO */
.hero{
position:relative;padding-top:calc(var(--hdr) + clamp(48px,8vw,104px));
padding-bottom:clamp(48px,7vw,96px);overflow:hidden;
}
.hero-grid{
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(28px,5vw,72px);align-items:center;
}
.hero-copy{max-width:none}
/* THE HEADLINE. One typeface, one weight, all the way across.
It used to be 800-weight Archivo with a single word dropped into a light
ITALIC Manrope - two faces, two weights and two postures inside four words.
Jake's note, Sept 2026: remove the italic completely, keep the line
cohesive, no dramatically different font for one word.
800 also came down to 700. At 92px, Archivo 800 at -.036em tracking is
loud rather than expensive; 700 with the tracking opened a little holds the
same weight on the page and reads considerably more like a jeweller and
less like a sale. Scoped to .hero, so every other h1 on the site is
untouched. */
.hero h1{
margin-bottom:clamp(20px,2.4vw,30px);
font-weight:700;
letter-spacing:-.028em;
}
/* .thin survives because the admin dashboard still offers *emphasis* on a
headline word, and a saved `*word*` would otherwise render as literal
asterisks. It is no longer a different typeface and it is no longer
italic - same family, same size, one step lighter. Nothing on the page
uses it today. */
.hero h1 .thin{font-weight:400;font-style:normal;font-family:inherit;letter-spacing:inherit}
.hero .lede{max-width:44ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.2vw,38px)}
.hero-spec{
display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,34px);
margin-top:clamp(30px,4vw,48px);padding-top:22px;
border-top:1px solid var(--paper-3);
}
.hero-spec div{display:flex;flex-direction:column;gap:3px}
.hero-spec .v{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.5vw,25px);letter-spacing:-.02em}
.hero-spec .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
/* ------------------------------------------------- THE THREE STATEMENTS
Same row, same hairline, same three columns as the numbers that used to
sit here - the .v / .l pair is gone because it existed to put a numeral
over a label, and there are no numerals any more.
Each one gets a short gold rule above it instead. That is what turns three
lines of small type into three deliberate statements rather than a caption
strip, and it is the only ornament: one hairline, the accent colour, 22px
wide. The text itself is the mono face the site uses for every label, one
step larger and in the full ink colour rather than the faint grey the old
labels used - these are things being said, not annotations on a figure. */
.hero-marks{gap:clamp(20px,3vw,44px);align-items:flex-start}
.hero-marks div{
flex:1 1 0;min-width:130px;
display:flex;flex-direction:column;align-items:flex-start;gap:0;
font-family:var(--mono);font-weight:400;
font-size:11px;line-height:1.5;letter-spacing:.15em;text-transform:uppercase;
color:var(--text);
max-width:19ch;
}
.hm-tick{
display:block;width:22px;height:1px;flex:none;
background:var(--accent);
margin-bottom:14px;
}
@media (max-width:620px){
/* Stacked, and the rules become leading ticks on each line so three
statements do not turn into six rows of alternating rule and text. */
.hero-marks{flex-direction:column;gap:12px}
.hero-marks div{flex-direction:row;align-items:center;gap:12px;max-width:none}
.hm-tick{margin-bottom:0;width:16px}
}
.hero-plate{position:relative;aspect-ratio:1/1;max-height:min(74vh,660px);margin-inline:auto;width:100%}
.hero-plate .reg{opacity:.5}
.hero-plate .reg.tl{top:0;left:0}
.hero-plate .reg.tr{top:0;right:0}
.hero-plate .reg.bl{bottom:0;left:0}
.hero-plate .reg.br{bottom:0;right:0}
.hero-plate{display:grid;place-items:center}
.hero-plate svg{width:100%;height:auto;max-height:100%}
/* ------------------------------------------------------- THE HERO PHOTOGRAPH
Jake's own shot of the green opal titanium ring, Sept 2026, filling the
plate the drawn ring used to occupy. Without the registration marks: those
belong to the technical drawings, and drawn in a hairline over cedar they
were invisible anyway.
The ![]()
is laid on top of the grid cell rather than flowed through it:
.hero-plate is `place-items:center`, which would shrink-wrap the image and
leave the registration marks floating off its corners at any aspect ratio
but the plate's own. Filling the cell keeps marks and picture locked
together, and object-fit does the cropping - which is why the same file
works square on a desktop and 16/11 on a phone. */
.hero-shot{margin:0;overflow:hidden;border-radius:var(--radius-lg);
background:var(--paper-2)}
/* An explicit single track, and min-* zeroed on the image. Without both, the
grid row sizes itself to the picture's own 1:1 and the plate's 16/11 on a
phone is ignored: the frame stayed 241px tall while the image inside it
grew to 350 and got clipped by overflow rather than cropped by object-fit. */
.hero-shot{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.hero-shot img{
grid-area:1/1;width:100%;height:100%;min-width:0;min-height:0;
object-fit:cover;object-position:50% 50%;display:block;
}
/* The caption names the three materials, which is the question the picture
raises. Mono, small, and out of the way of the ring itself. */
.hero-cap{
grid-area:1/1;align-self:end;justify-self:start;z-index:2;
margin:0;padding:9px 14px;
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent-lit);background:rgba(12,12,14,.78);
border:1px solid rgba(var(--accent-lit-rgb),.26);border-radius:100px;
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
margin:0 0 14px 14px;
}
@media (max-width:900px){
.hero-cap{margin:0 0 10px 10px;font-size:9.5px;padding:7px 11px}
}
/* Self-drawing stroke system, shared by every technical drawing on the site. */
.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
transition:stroke-dashoffset 1.5s var(--ease-out)}
.in .draw,.draw.in{stroke-dashoffset:0}
.fade-in{opacity:0;transition:opacity .8s var(--ease-out) .5s}
.in .fade-in,.fade-in.in{opacity:1}
/* --------------------------------------------------------- SECTION SHELLS */
.sect{padding-block:var(--sect);position:relative}
.sect-ink{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
.sect-ink h1,.sect-ink h2,.sect-ink h3,.sect-ink h4{color:var(--on-ink)}
.sect-paper2{background:var(--paper-2)}
.sect-head{margin-bottom:clamp(34px,4.6vw,64px)}
.sect-head-row{
display:flex;justify-content:space-between;align-items:flex-end;
gap:26px;flex-wrap:wrap;
}
.sect-head h2{max-width:18ch}
/* ---------------------------------------------------- CUSTOM / FILM BLOCK */
/* Deliberately a different skeleton from its neighbours: full bleed, ink,
media on the left, copy pinned bottom right. */
.film{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden}
.film-media{
position:relative;width:100%;aspect-ratio:16/9;max-height:82vh;background:var(--ink-2);
overflow:hidden;
}
.film-media video,.film-media img{width:100%;height:100%;object-fit:cover}
/* The film fills the band. object-position keeps the centre of the frame
centred when `cover` has to trim: the footage is four vertical panels side
by side, so anything trimmed comes off the top and bottom of all four
rather than removing whole panels from an edge. */
.film-vid{display:block;object-position:50% 50%;background:var(--ink-2)}
/* The stand-in drawing sits behind copy, so it is pushed right and dimmed.
A real video replaces it and gets the full frame. */
.film-media .draft-canvas{
position:absolute;inset:0;width:100%;height:100%;
opacity:.55;transform:translateX(14%) scale(1.06);
}
.film-media .draft-canvas svg{width:100%;height:100%;object-fit:contain}
/* THE SCRIM. Enough to read white text through, and no more.
It used to be three stacked layers including a radial vignette across the
whole frame, which was fine over a dim drawn illustration and far too much
over real footage: Jake's clip is bright green grass and it went murky.
The vignette is gone and the two remaining gradients are weighted to the
bottom-left corner, where the copy actually sits. The top and right of the
frame - which is where the rings are moving - is left alone.
THE NUMBERS ARE MEASURED, NOT PICKED. The headline was photographed over
the real footage with the words hidden, and the brightest pixel under each
text box was sampled: white on the lightest part of a gloved hand came out
at 1.9:1 with a lighter scrim than this, which is unreadable. These stops
put the headline at 4.1:1 and the paragraph at 9.5:1 in that same worst
case, and the text-shadow below is on top of that. A heavier scrim tested
better still and was rejected - it dimmed the whole picture, and the
picture is the point.
_test/film.js measures this on every run: it hides the copy, photographs
the section, and reads the brightest pixel under each text box back out.
Change these numbers and that suite will tell you what it cost. */
.film-scrim{
position:absolute;inset:0;pointer-events:none;z-index:1;
background:
linear-gradient(to top,
rgba(6,6,8,.90) 0%,rgba(6,6,8,.68) 28%,rgba(6,6,8,.40) 50%,
rgba(6,6,8,.10) 70%,rgba(6,6,8,0) 80%),
linear-gradient(to right,
rgba(6,6,8,.68) 0%,rgba(6,6,8,.38) 34%,rgba(6,6,8,.06) 62%,rgba(6,6,8,0) 76%);
}
.film-copy{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:clamp(24px,4vw,64px) var(--gut);
max-width:var(--maxw);margin-inline:auto;
}
.film-copy h2{max-width:16ch;
text-shadow:0 1px 2px rgba(5,5,10,.9),0 3px 14px rgba(5,5,10,.6),0 10px 44px rgba(5,5,10,.5)}
.film-copy .lede{max-width:48ch;margin-top:16px;color:#D8DADE;
text-shadow:0 1px 3px rgba(5,5,10,.85),0 4px 18px rgba(5,5,10,.55)}
.film-copy .btn{text-shadow:none;margin-top:26px}
.film-badge{
position:absolute;top:clamp(16px,3vw,34px);left:0;right:0;z-index:2;
padding-inline:var(--gut);max-width:var(--maxw);margin-inline:auto;
display:flex;justify-content:space-between;gap:14px;
}
.chip{
display:inline-flex;align-items:center;gap:9px;
background:rgba(8,8,12,.55);border:1px solid rgba(242,241,238,.16);
border-radius:100px;padding:7px 14px;backdrop-filter:blur(10px);
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:#E4E5E8;text-shadow:0 1px 3px rgba(5,5,10,.85);
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-lit);flex:none;
animation:pulse 3.4s var(--ease) -1s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
/* -------------------------------------------------------------- CATEGORIES */
/* Skeleton: an asymmetric 3+1 mosaic, not a row of equal rectangles. */
.cats{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.2vw,18px)}
.cat{
position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);
background:var(--paper-2);border:1px solid var(--paper-3);
min-height:clamp(200px,26vw,330px);
transition:border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease-out);
}
.cat:nth-child(1){grid-column:span 7}
.cat:nth-child(2){grid-column:span 5}
.cat:nth-child(3){grid-column:span 5}
.cat:nth-child(4){grid-column:span 7}
.cat:hover{border-color:var(--ink);transform:translateY(-3px)}
/* One explicit track, and min-* zeroed on the picture — the same remedy as
.hero-shot above. Without it the grid's single auto row sizes itself to the
photograph's own height: a tall picture from a phone became 1,190px tall in
a 330px card, the card showed its top 330px and clipped the rest, and what
a visitor saw of a ring photographed on a branch was the branch. The
categories that came with the site are wide photographs, nearly the card's
own shape, which is why this went unseen until Jake's own went up. */
.cat-art{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.cat-art svg,.cat-art img{grid-area:1/1;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;
transition:transform 1.1s var(--ease-out)}
.cat:hover .cat-art svg,.cat:hover .cat-art img{transform:scale(1.045)}
.cat-body{
position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,26px);
background:linear-gradient(to top,rgba(245,244,241,.97) 22%,rgba(245,244,241,0) 100%);
}
/* Over a photograph the same scrim has to do more work: these are real
photos with dark foliage and bright workshop light in them, and the copy
has to stay readable on every one. Taller, and opaque sooner. */
.cat.has-photo .cat-body{
background:linear-gradient(to top,
rgba(245,244,241,.985) 0%, rgba(245,244,241,.95) 38%,
rgba(245,244,241,.72) 62%, rgba(245,244,241,0) 100%);
padding-top:clamp(34px,5vw,64px);
}
.cat-body h3{margin-bottom:6px}
.cat-body p{font-size:13.5px;color:var(--text-soft);max-width:34ch;line-height:1.5}
.cat-go{
position:absolute;top:clamp(14px,1.8vw,22px);right:clamp(14px,1.8vw,22px);
width:36px;height:36px;border-radius:50%;
border:1px solid var(--paper-3);background:rgba(245,244,241,.8);
display:grid;place-items:center;backdrop-filter:blur(6px);
transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease-out);
}
.cat:hover .cat-go{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:rotate(-45deg)}
.cat-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
/* ------------------------------------------------------- PORTFOLIO SLIDER */
.pf{position:relative;overflow:hidden}
.pf-view{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pf-view.dragging{cursor:grabbing}
.pf-track{
display:flex;gap:clamp(12px,1.6vw,24px);
transition:transform .68s var(--ease-out);will-change:transform;
}
.pf-card{
flex:0 0 auto;width:clamp(250px,30vw,400px);
position:relative;border-radius:var(--radius-lg);overflow:hidden;
background:var(--ink-2);border:1px solid var(--ink-3);
transition:border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease-out);
}
.pf-card:hover{border-color:rgba(242,241,238,.34);transform:translateY(-4px)}
.pf-art{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--ink)}
.pf-art svg,.pf-art img{width:100%;height:100%;object-fit:cover;
transition:transform 1.2s var(--ease-out)}
.pf-card:hover .pf-art svg,.pf-card:hover .pf-art img{transform:scale(1.05)}
.pf-body{padding:clamp(15px,1.7vw,22px);position:relative}
.pf-body .yr{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--on-ink-faint);text-transform:uppercase}
.pf-body h3{margin:7px 0 8px;color:var(--on-ink)}
.pf-body p{font-size:13.5px;line-height:1.5;color:var(--on-ink-soft);max-width:34ch}
.pf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag{
font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
padding:5px 9px;border:1px solid var(--ink-3);border-radius:2px;color:var(--on-ink-faint);
}
.on-paper .tag{border-color:var(--paper-3);color:var(--text-faint)}
.pf-nav{display:flex;align-items:center;gap:10px}
.arrow{
width:44px;height:44px;border-radius:50%;flex:none;
border:1px solid var(--ink-3);background:none;color:var(--on-ink-soft);cursor:pointer;
display:grid;place-items:center;
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.arrow:hover:not(:disabled){background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.arrow:disabled{opacity:.26;cursor:not-allowed}
.on-paper .arrow{border-color:var(--paper-3);color:var(--text-soft)}
.on-paper .arrow:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pf-prog{flex:1;height:1px;background:var(--ink-3);position:relative;margin-inline:14px;min-width:40px}
.pf-prog span{
position:absolute;left:0;top:-1px;height:3px;background:var(--accent-lit);
transition:transform .5s var(--ease-out),width .5s var(--ease-out);
}
.on-paper .pf-prog{background:var(--paper-3)}
.on-paper .pf-prog span{background:var(--accent)}
.pf-foot{display:flex;align-items:center;gap:20px;margin-top:clamp(22px,3vw,34px);flex-wrap:wrap}
/* ---------------------------------------------------------------- PROCESS */
/* Skeleton: a numbered horizontal rail with a drawn connector. */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);position:relative}
.proc-step{position:relative;padding-top:34px}
.proc-step::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--paper-3);
transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease-out);
}
.in .proc-step::before{transform:scaleX(1)}
.in .proc-step:nth-child(2)::before{transition-delay:.12s}
.in .proc-step:nth-child(3)::before{transition-delay:.24s}
.in .proc-step:nth-child(4)::before{transition-delay:.36s}
.proc-step::after{
content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;
background:var(--ink);border-radius:50%;
transform:scale(0);transition:transform .5s var(--ease-out) .3s;
}
.in .proc-step::after{transform:scale(1)}
.proc-n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent);margin-bottom:12px;display:block}
/* The same rail, inverted, when the section sits on ink. */
.sect-ink .proc-step::before{background:var(--ink-3)}
.sect-ink .proc-step::after{background:var(--on-ink)}
.sect-ink .proc-step p{color:var(--on-ink-soft)}
.sect-ink .proc-n{color:var(--accent-lit)}
.proc-step h3{margin-bottom:10px}
.proc-step p{font-size:14.5px;line-height:1.6;color:var(--text-soft);max-width:32ch}
/* ------------------------------------------------------------------ MAKER */
/* Skeleton: overlapping portrait plate and offset copy card. */
.maker-grid{
display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:clamp(24px,4vw,60px);align-items:center;
}
.maker-plate{
position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
background:var(--ink-2);border:1px solid var(--ink-3);
}
.maker-plate img,.maker-plate svg{width:100%;height:100%;object-fit:cover}
/* The location signature was designed over the drawn plate, which is dark by
construction. A real photograph is not, and on Jake's it lands on pale
shorts and a white hull where it becomes unreadable. This scrim is the
minimum needed to keep the existing label legible — bottom third only,
applied ONLY when the plate holds a photo, so the drawn version is
unchanged. Nothing about the layout, type or copy moves. */
.maker-plate.has-photo::after{
content:"";position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
background:linear-gradient(to top,
rgba(12,12,14,.70) 0%, rgba(12,12,14,.34) 34%, rgba(12,12,14,0) 100%);
z-index:1;
}
.maker-sig{
position:absolute;bottom:16px;left:16px;right:16px;z-index:2;
display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
}
/* --------------------------------------------------------------- REVIEWS */
.rev{position:relative;overflow:hidden}
.rev-view{overflow:hidden;touch-action:pan-y}
.rev-track{display:flex;transition:transform .6s var(--ease-out);will-change:transform}
.rev-item{flex:0 0 100%;padding-inline:clamp(4px,1vw,16px)}
.rev-card{
background:var(--paper);border:1px solid var(--paper-3);border-radius:var(--radius-lg);
padding:clamp(20px,2.6vw,34px);height:100%;position:relative;
}
.rev-card img{border-radius:var(--radius);width:100%}
.stars{display:flex;gap:3px;margin-bottom:14px}
.stars svg{width:14px;height:14px;fill:var(--accent);stroke:none}
.rev-q{font-size:clamp(15px,1.1vw,18px);line-height:1.6;color:var(--text);max-width:52ch}
.rev-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--text-faint);margin-top:16px}
/* ------------------------------------------- SWIPING, ON A PHONE OR TABLET
The carousels are slid by a transform on a mouse, which is what gives the
portfolio its slow eased glide. A finger wants something else entirely:
momentum, a rubber band at the ends, a fling that crosses three cards, a
flick that stops halfway and snaps to the nearest. None of that can be
faked convincingly in JavaScript, and the attempt to was broken anyway, so
on a touch device the view simply becomes a real horizontal scroller and
the browser does all of it.
`hover: none and pointer: coarse` is a finger rather than a narrow window,
which is the distinction that matters: a small desktop window keeps the
mouse carousel, and a large tablet gets the swipe.
site.js reads overflow-x off this to know which of the two is in force, so
this media query is the only place the decision is made. The arrows, the
dots and the progress bar keep working either way. */
@media (hover: none) and (pointer: coarse) {
.pf-view, .rev-view {
overflow-x: auto;
overscroll-behavior-x: contain; /* a fling at the end does not turn into a page swipe back */
scroll-snap-type: x mandatory;
scroll-behavior: smooth; /* the arrows glide rather than jump */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
touch-action: pan-x pan-y; /* both directions are the browser's now */
}
.pf-view::-webkit-scrollbar, .rev-view::-webkit-scrollbar { display: none; }
/* The track is laid out, not transformed; the transition would otherwise
animate a transform that nothing sets any more. */
.pf-track, .rev-track { transition: none; will-change: auto; }
.pf-card, .rev-item { scroll-snap-align: start; }
/* Nothing to grab, so nothing should look grabbable. */
.pf-view { cursor: auto; }
/* The lift on hover is a mouse idea; on a finger it fires on tap and sticks. */
.pf-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.pf-view, .rev-view { scroll-behavior: auto; }
}
.rev-ctl{display:flex;align-items:center;gap:12px;margin-top:26px}
.rev-dots{display:flex;gap:7px;margin-inline:auto}
.dot-btn{
width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
background:var(--paper-3);transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.dot-btn[aria-current="true"]{background:var(--ink);transform:scale(1.35)}
@media (pointer:coarse){.dot-btn{width:9px;height:9px}}
/* -------------------------------------------------------------------- FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(24px,4vw,64px);align-items:start}
.faq-list{border-top:1px solid var(--paper-3)}
.faq-item{border-bottom:1px solid var(--paper-3)}
.faq-q{
width:100%;background:none;border:0;cursor:pointer;text-align:left;
padding:clamp(17px,2vw,24px) 44px clamp(17px,2vw,24px) 0;position:relative;
font-family:var(--display);font-weight:600;
font-size:clamp(16px,1.25vw,20px);letter-spacing:-.014em;line-height:1.3;
color:var(--text);transition:color var(--t-fast) var(--ease);
}
.faq-q:hover{color:var(--accent)}
.faq-q .pm{
position:absolute;right:4px;top:50%;transform:translateY(-50%);
width:16px;height:16px;flex:none;
}
.faq-q .pm::before,.faq-q .pm::after{
content:"";position:absolute;background:currentColor;
transition:transform var(--t-mid) var(--ease-out),opacity var(--t-mid) var(--ease);
}
.faq-q .pm::before{left:0;top:50%;width:100%;height:1.5px;transform:translateY(-50%)}
.faq-q .pm::after{top:0;left:50%;height:100%;width:1.5px;transform:translateX(-50%)}
.faq-q[aria-expanded="true"] .pm::after{transform:translateX(-50%) scaleY(0);opacity:0}
.faq-q[aria-expanded="true"]{color:var(--accent)}
.faq-a{overflow:hidden;height:0;transition:height var(--t-mid) var(--ease-out)}
.faq-a-in{padding:0 44px clamp(20px,2.4vw,28px) 0;color:var(--text-soft);font-size:15px;line-height:1.65;max-width:62ch}
/* ----------------------------------------------------------------- FOOTER */
.ftr{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
/* THE RANGE. Its height is set here rather than left to the drawing's own
proportions: a range that scales with the width is a tremble on a phone
and a wall on a wide monitor. --rdg-bg is the colour of whatever section
the page ends with, put there by ridgeBehind() in site.js, and it is the
sky the peaks stand against; without it the near range would be the
footer's ink on the footer's ink and there would be no silhouette. */
/* The -1px closes a hairline of sky that shows through where the drawing's
fractional height lands between two device pixels. */
.ftr-ridge{display:block;width:100%;height:clamp(94px,11vw,172px);background:var(--rdg-bg,transparent);margin-bottom:-1px}
.rdg-near{fill:var(--ink)} /* the footer itself, risen into peaks */
.rdg-far{fill:var(--ink-3)} /* the range behind it, holding the depth */
.rdg-edge{fill:none;stroke:var(--draft-on-ink);stroke-width:1.25;vector-effect:non-scaling-stroke}
/* The shaded face of each big summit, drawn the way every other fold on
this site is drawn: one thin line, no shading. */
.rdg-facet{fill:none;stroke:var(--draft-on-ink);stroke-width:1;opacity:.5;vector-effect:non-scaling-stroke}
.ftr-ridge.is-narrow{display:none}
@media (max-width:620px){
.ftr-ridge.is-wide{display:none}
.ftr-ridge.is-narrow{display:block}
}
.ftr-in{padding-block:clamp(40px,5vw,72px) 0;position:relative}
.ftr-top{
display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
gap:clamp(24px,3.4vw,52px);padding-bottom:clamp(34px,4vw,56px);
}
.ftr-col h4{
font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:var(--on-ink-faint);font-weight:400;margin-bottom:18px;
}
.ftr-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ftr-col a{font-size:14px;color:var(--on-ink-soft);transition:color var(--t-fast) var(--ease)}
.ftr-col a:hover{color:var(--on-ink)}
.ftr-cta{max-width:38ch}
.ftr-cta p{color:var(--on-ink-soft);font-size:14.5px;margin:14px 0 22px;line-height:1.6}
.ftr-bot{
border-top:1px solid var(--ink-3);padding-block:22px 30px;
display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
color:var(--on-ink-faint);
}
.ftr-bot a{transition:color var(--t-fast) var(--ease)}
.ftr-bot a:hover{color:var(--on-ink)}
.soc{display:flex;gap:6px}
.soc a{
width:36px;height:36px;border:1px solid var(--ink-3);border-radius:50%;
display:grid;place-items:center;color:var(--on-ink-soft);
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.soc a:hover{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.soc svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
/* ------------------------------------------------------- PRODUCTS / SHOP */
.page-head{padding-top:calc(var(--hdr) + clamp(38px,5vw,72px));padding-bottom:clamp(26px,3.4vw,46px)}
.crumb{
font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
color:var(--text-faint);display:flex;gap:9px;align-items:center;margin-bottom:20px;flex-wrap:wrap;
}
.crumb a:hover{color:var(--text)}
.filters{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:clamp(22px,3vw,38px)}
.filter{
font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
padding:10px 16px;border:1px solid var(--paper-3);background:none;border-radius:100px;
cursor:pointer;color:var(--text-soft);
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.filter:hover{border-color:var(--ink);color:var(--text)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (pointer:coarse){.filter{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}
.grid-prod{
display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,255px),1fr));
gap:clamp(14px,1.8vw,28px);
}
.prod{position:relative;display:block;transition:transform var(--t-mid) var(--ease-out)}
.prod:hover{transform:translateY(-4px)}
.prod-art{
position:relative;aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;
background:var(--paper-2);border:1px solid var(--paper-3);
transition:border-color var(--t-mid) var(--ease);
}
.prod:hover .prod-art{border-color:var(--ink)}
.prod-art svg,.prod-art img{width:100%;height:100%;object-fit:cover;
transition:transform 1.1s var(--ease-out)}
.prod:hover .prod-art svg,.prod:hover .prod-art img{transform:scale(1.05)}
.badge{
position:absolute;top:12px;left:12px;z-index:2;
font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
background:var(--ink);color:var(--paper);padding:6px 10px;border-radius:2px;
}
.prod-body{padding-top:15px;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.prod-body h3{font-size:clamp(15px,1.05vw,18px);letter-spacing:-.012em}
.prod-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
color:var(--text-faint);margin-top:5px}
.price{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.02em;flex:none}
/* Product detail */
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,4.5vw,72px);align-items:start}
/* HOLD THE SPACE WHILE JAVASCRIPT IS STILL FILLING IT.
These containers ship empty and are written by renderPage. The browser gets
a paintable frame before those scripts run, so it drew an almost-empty page
and then everything below it jumped down when the content landed — 0.41
cumulative layout shift on the product page, well inside Google's "poor"
band and the kind of jump that makes someone tap the wrong thing.
`:empty` stops matching the instant the content is in, so this changes
nothing about the finished page. It only stops the jump getting there. */
.pdp:empty{min-height:78vh}
.grid-prod:empty{min-height:56vh}
.cats:empty{min-height:52vh}
#list:empty{min-height:80vh}
#gal:empty{min-height:40vh}
/* A drawn ring is generated at whatever size the column gives it and stays
crisp. A photograph does not: on a 1440 screen that column is over a
thousand pixels wide, which blows a phone photograph up well past life size
and leaves the ring itself a small object adrift in the middle of the
frame. When the media is a photograph the row holds a sane width and
centres instead. */
.pdp.with-shot{grid-template-columns:minmax(0,520px) minmax(0,440px);
justify-content:center;gap:clamp(26px,4vw,64px)}
.pdp-media{position:sticky;top:calc(var(--hdr) + 22px)}
.pdp-main{
aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;
background:var(--paper-2);border:1px solid var(--paper-3);position:relative;
}
.pdp-main svg,.pdp-main img{width:100%;height:100%;object-fit:cover}
/* A drawn ring is square. A photograph of a ring is one someone took on a
phone, held upright — a taller frame shows more of it and crops less. */
.pdp-main.has-photo{aspect-ratio:4/5}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px}
.pdp-thumb{
width:74px;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;flex:none;
border:1px solid var(--paper-3);background:var(--paper-2);cursor:pointer;padding:0;
transition:border-color var(--t-fast) var(--ease);
}
.pdp-thumb[aria-current="true"]{border-color:var(--ink)}
.pdp-thumb svg,.pdp-thumb img{width:100%;height:100%;object-fit:cover}
.pdp-price{font-family:var(--mono);font-size:clamp(19px,1.6vw,25px);font-weight:500;margin:14px 0 20px;display:flex;align-items:baseline;gap:12px}
.pdp-price .note{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}
.opt{margin-bottom:24px}
.opt-label{
display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:11px;
font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);
}
.opt-label .cur{color:var(--text)}
.opt-row{display:flex;flex-wrap:wrap;gap:7px}
.opt-btn{
min-width:48px;padding:11px 14px;border:1px solid var(--paper-3);background:none;
border-radius:var(--radius);cursor:pointer;
font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-soft);
transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.opt-btn:hover{border-color:var(--ink);color:var(--text)}
.opt-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (pointer:coarse){.opt-btn{min-height:44px}}
.trust{display:flex;flex-direction:column;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid var(--paper-3)}
.trust li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--text-soft);line-height:1.5}
.trust svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.7;flex:none;margin-top:3px}
ul.trust{list-style:none;margin:0;padding:0}
.spec-tbl{width:100%;border-collapse:collapse;margin-top:8px}
.spec-tbl th,.spec-tbl td{
text-align:left;padding:11px 0;border-bottom:1px solid var(--paper-3);vertical-align:top;
font-size:13.5px;
}
.spec-tbl th{
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:var(--text-faint);font-weight:400;width:38%;
}
/* -------------------------------------------------------- PROJECT PAGES */
.proj-hero{padding-top:calc(var(--hdr) + clamp(38px,5vw,72px))}
.proj-plate{
aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;
background:var(--ink-2);border:1px solid var(--ink-3);margin-top:clamp(26px,3.4vw,46px);
}
.proj-plate svg,.proj-plate img{width:100%;height:100%;object-fit:cover}
.proj-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,4.6vw,76px);align-items:start}
.proj-story p{margin-bottom:1.15em;color:var(--text-soft);font-size:clamp(15px,1.05vw,17.5px);line-height:1.72;max-width:62ch}
.proj-side{position:sticky;top:calc(var(--hdr) + 22px)}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(12px,1.6vw,22px)}
.gal figure{margin:0}
.gal .plate{
aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;
background:var(--paper-2);border:1px solid var(--paper-3);
}
.gal .plate svg,.gal .plate img{width:100%;height:100%;object-fit:cover}
.gal figcaption{
font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--text-faint);margin-top:11px;
}
/* ----------------------------------------------------------- RING BUILDER */
.rb{background:var(--ink);color:var(--on-ink);min-height:100vh;position:relative}
.rb-shell{
display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);
min-height:calc(100vh - var(--hdr));
}
.rb-stage{
position:relative;display:flex;flex-direction:column;
border-right:1px solid var(--ink-3);min-height:52vh;
}
.rb-canvas{
flex:1;position:relative;display:grid;place-items:center;
padding:clamp(18px,3vw,52px);overflow:hidden;
background-image:
linear-gradient(rgba(242,241,238,.028) 1px,transparent 1px),
linear-gradient(90deg,rgba(242,241,238,.028) 1px,transparent 1px);
background-size:36px 36px;
}
.rb-canvas svg{width:100%;height:auto;max-height:min(68vh,600px);overflow:visible}
.rb-hud{
position:absolute;top:0;left:0;right:0;padding:clamp(12px,1.8vw,22px);
display:flex;justify-content:space-between;gap:12px;pointer-events:none;flex-wrap:wrap;
}
.rb-foot{
border-top:1px solid var(--ink-3);padding:clamp(12px,1.6vw,20px) clamp(14px,2vw,26px);
display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.rb-info{
min-height:60px;max-width:52ch;
font-size:13.5px;line-height:1.55;color:var(--on-ink-soft);
transition:opacity var(--t-fast) var(--ease);
}
.rb-info strong{
display:block;color:var(--on-ink);font-family:var(--mono);font-size:10.5px;
letter-spacing:.17em;text-transform:uppercase;margin-bottom:7px;font-weight:500;
}
.rb-info.swap{opacity:0}
.rb-panel{
background:var(--ink);overflow-y:auto;max-height:calc(100vh - var(--hdr));
padding:clamp(18px,2.4vw,30px);
}
.rb-group{margin-bottom:clamp(22px,2.8vw,32px)}
.rb-group > .opt-label{color:var(--on-ink-faint);border-bottom:1px solid var(--ink-3);padding-bottom:10px}
.rb-group > .opt-label .cur{color:var(--accent-lit)}
.rb-opts{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.rb-opt{
display:inline-flex;align-items:center;gap:9px;
padding:9px 13px;border:1px solid var(--ink-3);background:none;border-radius:var(--radius);
cursor:pointer;color:var(--on-ink-soft);
font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-align:left;
transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease);
}
.rb-opt:hover{border-color:rgba(242,241,238,.4);color:var(--on-ink)}
.rb-opt[aria-pressed="true"]{border-color:var(--accent-lit);color:var(--on-ink);background:rgba(var(--accent-lit-rgb),.09)}
/* A choice the rest of the design rules out, such as a width the chosen base
metal is not made in. Still focusable and still pressable, because pressing
it is how the builder explains why; it just must not look available. */
.rb-opt[aria-disabled="true"]{opacity:.42;border-style:dashed;cursor:not-allowed}
.rb-opt[aria-disabled="true"]:hover{border-color:var(--ink-3);color:var(--on-ink-soft)}
/* Twenty five sizes is a lot of chips, so they get a tighter, uniform box and
the group scrolls rather than pushing the panel down the page. */
.rb-opts.rb-sizes{max-height:172px;overflow-y:auto;gap:6px;padding-right:4px}
.rb-opt.rb-size{min-width:46px;justify-content:center;padding-inline:8px}
.rb-opt .sw{width:13px;height:13px;border-radius:2px;flex:none;border:1px solid rgba(242,241,238,.22)}
.rb-opt .sw.dashed{border-style:dashed;background:none !important}
@media (pointer:coarse){.rb-opt{min-height:44px}}
.rb-sum{
border:1px solid var(--ink-3);border-radius:var(--radius-lg);
padding:clamp(15px,2vw,22px);background:var(--ink-2);margin-top:8px;
}
.rb-sum h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--on-ink-faint);font-weight:400;margin-bottom:15px}
.rb-sum dl{margin:0;display:flex;flex-direction:column;gap:0}
.rb-sum .row{
display:flex;justify-content:space-between;gap:14px;align-items:baseline;
padding:9px 0;border-bottom:1px solid var(--ink-3);
}
.rb-sum .row:last-of-type{border-bottom:0}
.rb-sum dt{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--on-ink-faint)}
.rb-sum dd{margin:0;font-size:13.5px;text-align:right;color:var(--on-ink)}
.rb-note{font-size:11.5px;color:var(--on-ink-faint);line-height:1.5;margin-top:11px}
/* --------------------------------------------- QUOTE REQUEST (the builder)
No price lives here. This is the ask: a short, plain invitation and the two
fields Jake needs in order to answer. It sits on the raised panel so it
reads as the end of the configuration rather than another option group. */
.rb-quote{
border:1px solid var(--ink-3);border-radius:var(--radius-lg);
padding:clamp(16px,2vw,22px);background:var(--ink-2);margin-top:14px;
}
.rb-quote h3{
font-family:var(--display);font-weight:700;font-size:clamp(18px,1.5vw,21px);
line-height:1.22;letter-spacing:-.01em;color:var(--on-ink);margin:0 0 8px;
}
.rb-quote-lede{font-size:13.5px;line-height:1.55;color:var(--on-ink-soft);margin:0 0 18px}
.rb-field{margin-bottom:12px}
.rb-field label{
display:flex;justify-content:space-between;align-items:baseline;gap:10px;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:var(--on-ink-faint);margin-bottom:7px;
}
.rb-field label .opt{letter-spacing:.1em;color:var(--on-ink-faint);opacity:.75}
.rb-field input{
width:100%;background:var(--ink);border:1px solid var(--ink-3);border-radius:var(--radius);
padding:12px 13px;color:var(--on-ink);font-family:var(--mono);font-size:12.5px;
transition:border-color var(--t-fast) var(--ease);
}
.rb-field input:focus{outline:none;border-color:var(--accent-lit)}
@media (pointer:coarse){.rb-field input{min-height:46px}}
.rb-field input::placeholder{color:var(--on-ink-faint)}
.rb-field input[aria-invalid="true"]{border-color:#E4795F}
/* Honeypot: present in the form, invisible to people, ignored by the keyboard
and by screen readers. Anything that fills it is a bot, and the server says
no. Never display:none — some bots skip hidden fields. */
.rb-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.rb-err{
font-size:12px;line-height:1.5;color:#F0A38E;margin:2px 0 12px;
display:flex;gap:7px;
}
/* display:flex above would otherwise beat the browser's own [hidden] rule and
leave an empty error line sitting under the fields. */
.rb-err[hidden]{display:none}
.rb-err::before{content:"—";color:#E4795F;flex:none}
/* One message area with three voices: sent, not sent, failed. */
.rb-status{
margin-top:14px;padding:13px 14px;border-radius:var(--radius);
border:1px solid var(--ink-3);background:var(--ink);
font-size:12.5px;line-height:1.55;color:var(--on-ink-soft);
}
.rb-status strong{display:block;color:var(--on-ink);font-weight:600;margin-bottom:4px}
.rb-status span{display:block}
.rb-status.is-ok {border-color:rgba(var(--accent-lit-rgb),.45); background:rgba(var(--accent-lit-rgb),.08)}
.rb-status.is-warn{border-color:rgba(232,181,79,.45); background:rgba(232,181,79,.08)}
.rb-status.is-warn strong{color:#EBC77A}
.rb-status.is-bad {border-color:rgba(228,121,95,.5); background:rgba(228,121,95,.09)}
.rb-status.is-bad strong{color:#F0A38E}
.rb-engrave{margin-top:13px}
.rb-engrave input{
width:100%;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius);
padding:12px 13px;color:var(--on-ink);font-family:var(--mono);font-size:12px;
transition:border-color var(--t-fast) var(--ease);
}
.rb-engrave input:focus{outline:none;border-color:var(--accent-lit)}
.rb-engrave input::placeholder{color:var(--on-ink-faint)}
.rb-engrave input[aria-invalid="true"]{border-color:#E4795F}
/* Hint on the left, counter on the right. How many characters fit is set by
the ring's own circumference, so the number moves with the size. */
.rb-count{
display:flex;justify-content:space-between;align-items:baseline;gap:12px;
margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--on-ink-faint);
}
.rb-count .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
white-space:nowrap;color:var(--on-ink-faint)}
.rb-count .n.over{color:#F0A38E}
/* Builder drawing strokes. White wireframe, hidden edges dashed. */
.rb-canvas .ln{fill:none;stroke:var(--on-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rb-canvas .hid{fill:none;stroke:rgba(242,241,238,.26);stroke-width:1;stroke-dasharray:7 7}
.rb-canvas .chan{fill:none;stroke-width:1.2;opacity:.9}
/* The seam under each channel edge. A real inlay sits in a milled groove, so
there is a shadow line where the metal wall drops away — without it the
inlay looks painted on rather than set in. */
.rb-canvas .seam{fill:none;stroke:rgba(0,0,0,.72);stroke-width:2.6}
/* Shading and specular sit above the materials and must never eat clicks or
show up as a stroke. */
.rb-canvas .shade{stroke:none;pointer-events:none}
.rb-canvas .rail{fill:none;stroke:rgba(242,241,238,.6);stroke-width:1}
.rb-canvas .cen{stroke:rgba(242,241,238,.16);stroke-width:.9;stroke-dasharray:16 5 2 5;fill:none}
.rb-canvas .ln-soft{fill:none;stroke:rgba(242,241,238,.34);stroke-width:1;stroke-linecap:round}
.rb-canvas .ln-dim{fill:none;stroke:var(--accent-lit);stroke-width:1;opacity:.85}
.rb-canvas .lbl-dim{fill:var(--accent-lit);font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.rb-canvas .lbl-soft{fill:rgba(242,241,238,.42);font-family:var(--mono);font-size:10px;letter-spacing:.16em}
/* Nothing is drawn on the ring's inner surface: no maker's mark, no preview of
the engraving. The inside engraving is still collected and still sent with
the quote — it is simply not illustrated. */
/* A ring Jake has photographed but not yet named or priced. It is visible, so
he can see his own work on the site, and unmistakably unfinished. */
.prod .needs, .pdp-needs{
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:#7A5410;background:rgba(201,144,60,.14);border:1px solid rgba(201,144,60,.5);
border-radius:2px;padding:5px 8px;white-space:nowrap;
}
.prod.is-draft .prod-art::after{
content:"";position:absolute;inset:0;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(201,144,60,.45);border-radius:inherit;
}
/* ------------------------------------------------------- CART AND CHECKOUT */
.line{
display:grid;grid-template-columns:92px 1fr auto;gap:18px;align-items:center;
padding:18px 0;border-bottom:1px solid var(--paper-3);
}
.line .thumb{
width:92px;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
background:var(--paper-2);border:1px solid var(--paper-3);
}
.line .thumb svg,.line .thumb img{width:100%;height:100%;object-fit:cover}
.line h3{font-size:17px;margin-bottom:5px}
.line-money{text-align:right;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.line-money .each{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-faint)}
/* Quantity. A stepper rather than a number field: it is two taps on a phone,
it cannot be typed into a nonsense state, and it never opens a keyboard. */
.qty{display:flex;align-items:center;gap:4px;margin-top:10px;flex-wrap:wrap}
.qty-btn{
width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
background:none;border:1px solid var(--paper-3);border-radius:var(--radius);
color:var(--text);font-size:15px;line-height:1;
transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.qty-btn:hover{border-color:var(--text-soft);background:var(--paper-2)}
.qty-n{
min-width:34px;text-align:center;font-family:var(--mono);font-size:13px;
font-variant-numeric:tabular-nums;
}
.rm{
background:none;border:0;padding:6px 0 6px 12px;cursor:pointer;font-family:var(--mono);
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);
text-decoration:underline;text-underline-offset:3px;
}
.rm:hover{color:var(--accent)}
@media (pointer:coarse){.rm{min-height:44px}.qty-btn{width:44px;height:44px}}
.cart-total{
display:flex;justify-content:space-between;align-items:baseline;gap:18px;
padding:24px 0;border-bottom:1px solid var(--paper-3);
}
/* A notice that has to be read before money moves. */
.notice{
border:1px solid var(--paper-3);border-radius:var(--radius);
padding:14px 16px;margin-bottom:26px;font-size:13.5px;line-height:1.55;color:var(--text-soft);
}
.notice strong{display:block;color:var(--text);margin-bottom:3px}
.notice span{display:block}
.notice-warn{border-color:#C9903C;background:rgba(201,144,60,.09)}
.notice-warn strong{color:#7A5410}
.notice-ok{border-color:var(--accent);background:var(--accent-ghost)}
.notice-bad{border-color:#B4472C;background:rgba(180,71,44,.08)}
.notice-bad strong{color:#8E3520}
/* Checkout: the form on the left, the order it is paying for on the right. */
.co-grid{display:grid;grid-template-columns:1fr 360px;gap:clamp(26px,4vw,56px);align-items:start}
/* display:grid above would otherwise beat the browser's own [hidden] rule, and
an empty cart would still show a checkout form. */
.co-grid[hidden]{display:none}
.co-summary{
border:1px solid var(--paper-3);border-radius:var(--radius-lg);
background:var(--paper-2);padding:clamp(18px,2vw,24px);position:sticky;top:calc(var(--hdr) + 20px);
}
.co-summary[hidden]{display:none}
.co-summary h2{font-size:12px;font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;
color:var(--text-faint);font-weight:400;margin-bottom:16px}
.co-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
border-bottom:1px solid var(--paper-3);font-size:14px}
.co-row:last-of-type{border-bottom:0}
.co-row .n{color:var(--text-soft)}
.co-row .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.co-sum{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
margin-top:14px;padding-top:14px;border-top:1px solid var(--paper-3)}
.co-sum .price{font-size:19px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.form-grid .wide{grid-column:1 / -1}
.field-err{color:#8E3520;font-size:12.5px;margin:-10px 0 16px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"]{border-color:#B4472C}
.co-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:900px){
.co-grid{grid-template-columns:1fr}
.co-summary{position:static;order:-1}
}
@media (max-width:560px){
.line{grid-template-columns:68px 1fr}
.line .thumb{width:68px}
.line-money{grid-column:2;align-items:flex-start;text-align:left}
.form-grid{grid-template-columns:1fr}
}
/* ---------------------------------------------------------------- FORMS */
.field{margin-bottom:18px}
.field label{
display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--text-faint);margin-bottom:9px;
}
.field input,.field textarea,.field select{
width:100%;background:var(--paper);border:1px solid var(--paper-3);border-radius:var(--radius);
padding:13px 14px;font-size:15px;transition:border-color var(--t-fast) var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:130px;resize:vertical;font-family:inherit}
/* A select does NOT inherit the page's typeface the way an input does — the
browser gives it the system UI font unless told otherwise, and the country
field ended up in a different face from every other field beside it.
Height is the other half of the same problem, and line-height alone does not
fix it: with identical padding and font size an input came out 52px tall and
a select 47px, and a browser sizes a native select from its own font metrics
whatever you set. So the native widget is turned off with appearance:none —
which makes the padding actually apply — and the arrow is drawn here. The
Country field now matches the ZIP field it sits beside in the same row,
which is the whole reason any of this is written down. */
.field select{
font-family:inherit;color:inherit;line-height:1.6;
appearance:none;-webkit-appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--text-faint) 50%),
linear-gradient(135deg,var(--text-faint) 50%,transparent 50%);
background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}
/* ------------------------------------------------- THE INTERNATIONAL PANEL
Only ever on screen when the destination is outside the United States. It is
not an error and it is not a warning, so it does not borrow either of those
colours: it is the accent, the same as everything else on this site that is
telling you how the work is done. */
.intl{
border:1px solid var(--paper-3);border-left:2px solid var(--accent);
border-radius:var(--radius);background:var(--paper-2);
padding:16px 18px;margin:0 0 20px;
}
.intl h3{font-size:16px;margin:0 0 8px;letter-spacing:-.01em}
.intl p{font-size:13.5px;line-height:1.65;color:var(--text-soft);margin:0 0 9px}
.intl p:last-child{margin-bottom:0}
.intl .fine{font-size:12.5px;color:var(--text-faint)}
.form-note{font-size:12.5px;color:var(--text-faint);line-height:1.5;margin-top:14px}
.form-ok{
display:none;padding:18px;border:1px solid var(--accent);border-radius:var(--radius);
background:var(--accent-ghost);font-size:14.5px;line-height:1.55;
}
.form-ok.show{display:block}
/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width:1080px){
.rb-shell{grid-template-columns:1fr}
.rb-stage{border-right:0;border-bottom:1px solid var(--ink-3)}
.rb-panel{max-height:none}
.pdp, .pdp.with-shot{grid-template-columns:1fr}
.pdp-media{position:static}
.proj-body{grid-template-columns:1fr}
.proj-side{position:static}
.faq-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
:root{--hdr:58px}
.nav{display:none}
.burger{display:inline-flex}
.hero-grid{grid-template-columns:1fr;gap:clamp(26px,6vw,44px)}
.hero-plate{order:-1;max-height:46vh;aspect-ratio:16/11}
.hero{padding-top:calc(var(--hdr) + 30px)}
.cats{grid-template-columns:1fr}
.cat{grid-column:span 12 !important;min-height:220px}
.proc{grid-template-columns:repeat(2,1fr);gap:26px 18px}
.maker-grid{grid-template-columns:1fr}
.maker-plate{max-width:440px;aspect-ratio:3/4}
.ftr-top{grid-template-columns:1fr 1fr}
.ftr-cta{grid-column:1/-1;max-width:none}
.sect-head-row{align-items:flex-start;flex-direction:column;gap:20px}
}
/* The header must never outgrow a phone. With coarse-pointer targets forced to
44px, four icons plus the full lockup overflows at 375px and body's
overflow clip then hides the menu button entirely. Trim the lockup and move
the account link into the drawer. */
@media (max-width:560px){
.brand .bs{display:none}
.brand .mark{height:19px}
.brand svg{width:27px}
.brand .bt{font-size:15px}
.brand{gap:9px}
.hdr-in{gap:10px}
.hdr-act .acct{display:none}
}
@media (max-width:620px){
.proc{grid-template-columns:1fr}
.ftr-top{grid-template-columns:1fr;gap:30px}
.pf-card{width:min(78vw,320px)}
.hero-spec{gap:18px 22px}
.pdp-thumb{width:62px}
.rev-card{padding:20px 18px}
.film-copy{padding-bottom:26px}
}
/* Decorations never collide with content on short screens. */
@media (max-height:560px){
.reg{display:none}
.hero-spec{display:none}
}
/* -------------------------------------------------------- REDUCED MOTION */
/* Honoured completely: final states shown, drives stopped, video not loaded. */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
transition-delay:0ms !important;
}
.rv,.rv-s{opacity:1 !important;transform:none !important}
.mask > span{transform:none !important}
.leader,.in .leader{transform:scaleX(1) !important}
.draw{stroke-dashoffset:0 !important}
.fade-in{opacity:1 !important}
.proc-step::before{transform:scaleX(1) !important}
.proc-step::after{transform:scale(1) !important}
.env{animation:none !important}
}
/* Same, applied live when the setting flips while the page is open. */
body.rm-pinned .rv,body.rm-pinned .rv-s{opacity:1 !important;transform:none !important}
body.rm-pinned .mask > span{transform:none !important}
body.rm-pinned .leader{transform:scaleX(1) !important}
body.rm-pinned .draw{stroke-dashoffset:0 !important}
body.rm-pinned .fade-in{opacity:1 !important}
body.rm-pinned .proc-step::before{transform:scaleX(1) !important}
body.rm-pinned .proc-step::after{transform:scale(1) !important}
body.rm-pinned *,body.rm-pinned *::before,body.rm-pinned *::after{animation-play-state:paused !important}
/* Pause every loop when the tab is hidden or the element is off screen.
Set on descendants and pseudo-elements, because play-state does not
inherit. */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}
.vh{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* ==========================================================================
/connect — THE DIGITAL BUSINESS CARD
--------------------------------------------------------------------------
What the QR code on Jake's printed cards opens. It is a card, not a page
of the site: no header, no nav, no site footer, nothing to get lost in.
It borrows the ink palette, the three faces and the mono labels so it is
unmistakably the same brand, and it invents no colour of its own.
Every rule is scoped to .cnct, so none of this reaches another page.
Mobile is the real case, not the fallback — most people meet this page
holding a business card in one hand. Sizes are set for a thumb first and
allowed to grow on bigger screens.
========================================================================== */
.cnct{
min-height:100vh;
min-height:100svh; /* the real one, where it is supported */
margin:0;
background:var(--ink);
color:var(--on-ink);
display:flex;flex-direction:column;align-items:center;
padding:clamp(40px,8vh,76px) 20px clamp(30px,5vh,56px);
}
/* A single column. 460px is about as wide as this should ever get: past
that it stops reading as a card and starts reading as a landing page. */
/* flex:1 so the column fills the screen — that is what lets the footer's
margin-top:auto sit it at the bottom of a tall phone instead of floating
directly under the contact button with dead space below it. */
.cnct-in{
width:100%;max-width:460px;flex:1 0 auto;
display:flex;flex-direction:column;align-items:center;
}
/* ------------------------------------------------------------------- HEAD */
.cnct-mark{
width:clamp(104px,30vw,136px);height:auto;display:block;
margin-bottom:clamp(20px,3.4vh,30px);
}
.cnct-name{
font-family:var(--display);font-weight:800;
font-size:clamp(30px,8.4vw,40px);line-height:1;letter-spacing:-.03em;
margin:0;text-align:center;
}
/* The three-part strap line. The separators are drawn by CSS rather than
typed, so a screen reader hears three phrases and not three bullets. */
.cnct-strap{
font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
color:var(--on-ink-soft);
margin:16px 0 0;text-align:center;line-height:1.9;
display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px;
}
.cnct-strap span{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
/* The dot trails its phrase rather than leading the next one, so when the
line wraps on a narrow phone it never begins with a stray bullet. */
.cnct-strap span:not(:last-child)::after{
content:"";width:3px;height:3px;border-radius:50%;
background:var(--on-ink-faint);flex:none;
}
.cnct-lede{
font-family:var(--body);font-size:14.5px;line-height:1.65;
color:var(--on-ink-soft);text-align:center;text-wrap:balance;
max-width:34ch;margin:18px auto 0;
}
/* A hairline rule, the same drafting language as the rest of the site. */
.cnct-rule{
width:100%;height:1px;background:var(--ink-3);border:0;
margin:clamp(28px,4.6vh,40px) 0 0;
}
/* ---------------------------------------------------------------- ACTIONS */
.cnct-acts{
width:100%;display:flex;flex-direction:column;gap:10px;
margin-top:clamp(24px,4vh,34px);
}
/* A row, not a pill. Title, one line of plain English, and an arrow —
enough for someone who has never heard of JI Jewelry to pick correctly.
68px minimum means it is comfortably tappable however the text wraps. */
.cnct-act{
display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;
min-height:68px;padding:17px 20px;
background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius-lg);
color:var(--on-ink);text-align:left;
transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.cnct-act b{
display:block;font-family:var(--display);font-weight:700;
font-size:16.5px;letter-spacing:-.012em;line-height:1.2;
}
.cnct-act small{
display:block;font-family:var(--body);font-size:12.5px;line-height:1.45;
color:var(--on-ink-soft);margin-top:4px;
}
.cnct-act .arw{
font-family:var(--mono);font-size:17px;color:var(--on-ink-faint);
transition:transform var(--t-mid) var(--ease-out),color var(--t-fast) var(--ease);
}
.cnct-act:hover{background:#1C1E22;border-color:#33363C}
.cnct-act:hover .arw{transform:translateX(5px);color:var(--on-ink)}
.cnct-act:active{transform:scale(.992)}
/* The one action Jake most wants taken carries the accent, and nothing else
on the page does. --accent-lit is the opal blue that reads 11:1 on ink. */
.cnct-act.is-lead{border-color:rgba(var(--accent-lit-rgb),.42);background:rgba(var(--accent-lit-rgb),.07)}
.cnct-act.is-lead b{color:var(--accent-lit)}
.cnct-act.is-lead .arw{color:var(--accent-lit)}
.cnct-act.is-lead:hover{background:rgba(var(--accent-lit-rgb),.13);border-color:var(--accent-lit)}
/* ----------------------------------------------------------------- SOCIAL */
.cnct-h{
font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:var(--on-ink-faint);
display:flex;align-items:center;gap:12px;width:100%;
margin:clamp(30px,5vh,44px) 0 18px;
}
.cnct-h::before,.cnct-h::after{content:"";flex:1;height:1px;background:var(--ink-3)}
/* 52px circles. The footer's are 36px because they sit in a dense row of
legal text; here a thumb is the only input device that matters. */
.cnct-soc{display:flex;justify-content:center;gap:12px}
.cnct-soc a{
width:52px;height:52px;border:1px solid var(--ink-3);border-radius:50%;
display:grid;place-items:center;color:var(--on-ink-soft);background:var(--ink-2);
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
.cnct-soc a:hover{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.cnct-soc svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5}
/* ---------------------------------------------------------------- CONTACT */
.cnct-contact{
width:100%;margin-top:clamp(26px,4.4vh,38px);
min-height:56px;padding:18px 24px;
text-align:center;
}
/* ----------------------------------------------------------------- FOOTER */
.cnct-ftr{
margin-top:auto;padding-top:clamp(34px,6vh,56px);
text-align:center;font-family:var(--mono);
font-size:10px;letter-spacing:.15em;text-transform:uppercase;
color:var(--on-ink-faint);line-height:2;
}
.cnct-ftr strong{color:var(--on-ink-soft);font-weight:500}
.cnct-ftr .cnct-home{
display:inline-block;margin-top:14px;color:var(--on-ink-soft);
border-bottom:1px solid var(--ink-3);padding-bottom:3px;
transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.cnct-ftr .cnct-home:hover{color:var(--on-ink);border-color:var(--on-ink)}
/* ----------------------------------------------------------------- MOTION
An entrance, once, on load — not tied to scroll, because this page is
barely a scroll long and content parked at opacity 0 waiting for an
observer is how a QR code opens to a blank screen. The base state is
visible; only the no-preference branch below ever hides anything. */
@media (prefers-reduced-motion:no-preference){
.cnct-rise{animation:cnctRise .62s var(--ease-out) both;animation-delay:var(--d,0s)}
}
@keyframes cnctRise{
from{opacity:0;transform:translateY(9px)}
to{opacity:1;transform:none}
}
/* Wider than a phone: the card gets a little more air, never more width. */
@media (min-width:560px){
.cnct-act{padding:19px 24px;min-height:76px}
.cnct-act b{font-size:17.5px}
.cnct-act small{font-size:13px}
.cnct-lede{font-size:15.5px}
}
/* ============================================================================
POLICIES
----------------------------------------------------------------------------
Six legal documents, each its own page, plus the hub that lists them. Long
prose is the whole content, so the only real job here is a measure that can
be read for ten minutes without fatigue and a contents list that keeps the
reader oriented in a document they are scanning, not reading end to end.
========================================================================== */
.pol{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
gap:clamp(24px,4vw,72px);align-items:start}
.pol-nav{position:sticky;top:calc(var(--hdr) + 22px);display:flex;flex-direction:column;gap:2px}
.pol-navh{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--accent);margin:0 0 6px}
.pol-navh-2{margin-top:26px}
.pol-nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
color:var(--text-faint);padding:9px 0;border-bottom:1px solid var(--paper-3);
transition:color var(--t-fast) var(--ease)}
.pol-nav a:hover{color:var(--text)}
/* THE MEASURE. 68 characters. Legal text is read slowly and re-read, and a
line much longer than this loses the reader's place on the way back. */
.pol-doc{max-width:68ch}
.pol-doc h2{font-size:clamp(19px,1.8vw,25px);margin:clamp(34px,4vw,52px) 0 14px;
scroll-margin-top:calc(var(--hdr) + 24px)}
.pol-doc h2:first-child{margin-top:0}
.pol-doc p{color:var(--text-soft);font-size:15.5px;line-height:1.76;margin-bottom:1.05em}
.pol-doc a{color:var(--accent);border-bottom:1px solid rgba(var(--accent-rgb),.3);
transition:border-color var(--t-fast) var(--ease)}
.pol-doc a:hover{border-bottom-color:var(--accent)}
.pol-doc ul{list-style:none;margin:0 0 1.3em;padding:0}
.pol-doc li{color:var(--text-soft);font-size:15.5px;line-height:1.7;
padding:5px 0 5px 22px;position:relative}
/* The drafting tick, not a bullet — the same mark the dimension lines use. */
.pol-doc li::before{content:"";position:absolute;left:2px;top:.82em;
width:9px;height:1px;background:var(--accent);opacity:.7}
/* ------------------------------------------------------------------ the hub */
.pol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
gap:clamp(14px,1.6vw,20px)}
.pol-card{display:flex;flex-direction:column;gap:11px;padding:clamp(22px,2.4vw,30px);
border:1px solid var(--paper-3);border-radius:var(--radius);background:var(--paper);
transition:border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease-out)}
.pol-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.pol-card h2{font-size:19px;margin:0}
.pol-card p{color:var(--text-soft);font-size:14px;line-height:1.66;margin:0;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pol-card-go{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:11px;
letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pol-card:hover .arw{transform:translateX(4px)}
.pol-card .arw{display:inline-block;transition:transform var(--t-mid) var(--ease-out)}
.pol-foot{margin-top:clamp(30px,4vw,46px);color:var(--text-soft);font-size:14.5px}
.pol-foot .tlink{background:none;border:0;cursor:pointer;padding:0 0 5px;margin-left:4px}
@media (max-width:860px){
.pol{grid-template-columns:1fr}
.pol-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;
padding-bottom:6px;border-bottom:1px solid var(--paper-3)}
.pol-nav a{border:1px solid var(--paper-3);border-bottom-color:var(--paper-3);
border-radius:100px;padding:8px 13px}
.pol-navh,.pol-navh-2{width:100%;margin:10px 0 2px}
.pol-doc{max-width:none}
}
@media (pointer:coarse){.pol-nav a{min-height:44px;display:flex;align-items:center}}
/* ============================================================================
COOKIE CONSENT
----------------------------------------------------------------------------
Ink ground, white type, gold used once per surface. It is meant to read as
part of the site rather than as a plugin bolted onto it, which is mostly a
matter of using the same tokens as everything else and refusing to use a
rounded blue button.
ACCEPT AND REJECT ARE THE SAME SIZE. Deliberately. The gold fill goes on
the primary action of each surface, but reject is the same height, the same
padding, the same font and right beside it — never smaller, never greyed,
never demoted to a text link. A consent choice that is harder to decline
than to accept is not a choice.
========================================================================== */
.ck-bar{
position:fixed;left:0;right:0;bottom:0;z-index:940;
background:var(--ink);border-top:1px solid var(--ink-3);
color:var(--on-ink);
box-shadow:0 -20px 46px rgba(0,0,0,.34);
transform:translateY(102%);
transition:transform .42s var(--ease-out);
}
.ck-bar.is-up{transform:none}
.ck-bar-in{max-width:var(--maxw);margin-inline:auto;
padding:clamp(18px,2.2vw,26px) var(--gut);
display:flex;align-items:center;gap:clamp(18px,3vw,44px);flex-wrap:wrap}
.ck-bar-txt{flex:1 1 380px;min-width:0}
.ck-bar-txt h2{font-size:16px;color:var(--on-ink);margin:0 0 6px;letter-spacing:-.01em}
.ck-bar-txt p{margin:0;color:var(--on-ink-soft);font-size:14px;line-height:1.66;max-width:74ch}
.ck-bar-txt a{color:var(--accent-lit);border-bottom:1px solid rgba(var(--accent-lit-rgb),.42)}
.ck-bar-txt a:hover{border-bottom-color:var(--accent-lit)}
.ck-bar-act{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
/* ------------------------------------------------------------------ buttons */
.ck-btn{
font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
padding:13px 20px;border-radius:var(--radius);cursor:pointer;white-space:nowrap;
border:1px solid transparent;font-weight:500;
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
.ck-btn-gold{background:var(--accent-lit);color:var(--ink);border-color:var(--accent-lit)}
.ck-btn-gold:hover{background:#F0D08C;border-color:#F0D08C}
.ck-btn-line{background:none;color:var(--on-ink);border-color:var(--ink-3)}
.ck-btn-line:hover{border-color:var(--on-ink)}
.ck-btn-quiet{background:none;color:var(--on-ink-soft);border-color:transparent;
text-decoration:underline;text-underline-offset:4px;
text-decoration-color:var(--on-ink-faint)}
.ck-btn-quiet:hover{color:var(--on-ink);text-decoration-color:var(--on-ink)}
/* 44x44 EVERYWHERE, not just on touch. The visible mark is 13px; the rest is
transparent hit area. A pointer:coarse media query was the first attempt
and it was wrong — it does not match a desktop browser being driven by a
phone-sized window, which is exactly how this gets tested, and a control
that is only big enough some of the time is not big enough. */
.ck-x{
position:absolute;top:6px;right:6px;width:44px;height:44px;
display:grid;place-items:center;background:none;border:0;cursor:pointer;
color:var(--on-ink-faint);border-radius:var(--radius);
transition:color var(--t-fast) var(--ease)
}
.ck-x:hover{color:var(--on-ink)}
.ck-x svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.4;fill:none}
/* -------------------------------------------------------------------- modal */
html.ck-open{overflow:hidden}
.ck-veil{
position:fixed;inset:0;z-index:960;display:grid;place-items:end center;
background:rgba(8,8,10,.62);
opacity:0;transition:opacity .3s var(--ease);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.ck-veil.is-in{opacity:1}
.ck-modal{
width:min(660px,100%);max-height:min(88vh,860px);
display:flex;flex-direction:column;
background:var(--ink);color:var(--on-ink);
border:1px solid var(--ink-3);border-bottom:0;
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
transform:translateY(22px);transition:transform .34s var(--ease-out);
position:relative;
}
.ck-veil.is-in .ck-modal{transform:none}
.ck-modal-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding:clamp(22px,3vw,30px) clamp(20px,3vw,32px) 16px;
border-bottom:1px solid var(--ink-3)}
.ck-x-modal{position:static;flex:none}
.ck-kick{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:var(--accent-lit);margin:0 0 7px}
.ck-modal-h h2{font-size:clamp(19px,2.2vw,24px);color:var(--on-ink);margin:0;outline:none}
.ck-modal-b{overflow-y:auto;padding:clamp(18px,2.4vw,24px) clamp(20px,3vw,32px);
-webkit-overflow-scrolling:touch}
.ck-intro{color:var(--on-ink-soft);font-size:14px;line-height:1.66;margin:0 0 22px}
.ck-intro a{color:var(--accent-lit);border-bottom:1px solid rgba(var(--accent-lit-rgb),.42)}
.ck-row{padding:18px 0;border-top:1px solid var(--ink-3)}
.ck-row:first-of-type{border-top:0;padding-top:0}
.ck-row-h{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ck-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--on-ink-faint);border:1px solid var(--ink-3);border-radius:100px;
padding:5px 11px;white-space:nowrap}
.ck-row.is-locked .ck-tag{color:var(--accent-lit);border-color:rgba(var(--accent-lit-rgb),.34)}
.ck-row-d{margin-top:11px}
.ck-row-d p{color:var(--on-ink-soft);font-size:13.5px;line-height:1.66;margin:0 0 .7em}
.ck-row-d p:last-child{margin-bottom:0}
.ck-row-d ul{list-style:none;margin:0 0 .8em;padding:0}
.ck-row-d li{color:var(--on-ink-soft);font-size:13.5px;line-height:1.62;
padding:3px 0 3px 20px;position:relative}
.ck-row-d li::before{content:"";position:absolute;left:0;top:.78em;width:8px;height:1px;
background:var(--accent-lit);opacity:.6}
/* Said plainly rather than implied: the category exists, the technology does not. */
.ck-none{color:var(--on-ink-faint);font-size:12.5px;font-style:italic}
/* ------------------------------------------------------------------ switches
A real checkbox, moved off screen rather than display:none so it keeps its
place in the tab order and its label. The visible track is decoration and
is marked aria-hidden; everything a keyboard or a screen reader touches is
the input itself. */
.ck-sw{display:inline-flex;align-items:center;gap:12px;cursor:pointer;min-height:30px}
.ck-sw input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ck-sw-t{position:relative;flex:none;width:44px;height:25px;border-radius:100px;
background:var(--ink-2);border:1px solid var(--ink-3);
transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.ck-sw-t::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;
border-radius:50%;background:var(--on-ink-faint);
transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.ck-sw input:checked + .ck-sw-t{background:rgba(var(--accent-lit-rgb),.26);
border-color:var(--accent-lit)}
.ck-sw input:checked + .ck-sw-t::after{transform:translateX(19px);background:var(--accent-lit)}
.ck-sw input:focus-visible + .ck-sw-t{outline:2px solid var(--accent-lit);outline-offset:3px}
.ck-sw-l{font-size:15px;color:var(--on-ink);font-weight:500}
.ck-sw input:disabled + .ck-sw-t{background:rgba(var(--accent-lit-rgb),.18);
border-color:rgba(var(--accent-lit-rgb),.4)}
.ck-sw input:disabled + .ck-sw-t::after{transform:translateX(19px);
background:rgba(var(--accent-lit-rgb),.65)}
.ck-row.is-locked .ck-sw{cursor:default}
.ck-modal-f{display:flex;gap:9px;flex-wrap:wrap;
padding:clamp(16px,2.2vw,22px) clamp(20px,3vw,32px);
border-top:1px solid var(--ink-3);background:var(--ink-2)}
.ck-modal-f .ck-btn{flex:1 1 auto}
/* ------------------------------------------------------------------- phones
The bar becomes a sheet and every button goes full width in its own row, so
nothing is a 30px tap target in the corner of a 390px screen. */
@media (max-width:640px){
.ck-bar-in{flex-direction:column;align-items:stretch;gap:16px;padding-top:22px}
/* flex-basis is the MAIN axis, and the main axis just became vertical — so
the 380px that gives the text a sensible minimum width in a row was
making it 380px TALL here, with a hole under it. */
.ck-bar-txt{flex:0 0 auto}
.ck-bar-act{flex-direction:column;align-items:stretch;gap:8px}
.ck-bar-act .ck-btn{width:100%;padding:15px 18px}
.ck-bar-txt h2{font-size:15.5px}
.ck-modal{max-height:92vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.ck-modal-f{flex-direction:column}
.ck-modal-f .ck-btn{width:100%;padding:15px 18px}
.ck-row-h{flex-wrap:wrap;gap:10px}
}
@media (prefers-reduced-motion:reduce){
.ck-bar{transition:none;transform:none}
.ck-veil,.ck-modal{transition:none}
.ck-veil{opacity:1}
.ck-modal{transform:none}
.ck-sw-t,.ck-sw-t::after{transition:none}
}
/* --------------------------------------------------------------- FOOTER LEGAL
Seven controls in one wrapping row. The button is styled to be
indistinguishable from the links beside it because to the reader it is the
same kind of thing — a way to reach a setting — even though to the browser
it is not a link at all. */
.ftr-legal{
display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;
padding:22px 0 0;margin-top:clamp(28px,3.4vw,44px);
border-top:1px solid var(--ink-3);
}
.ftr-legal a,.ftr-legal button{
font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--on-ink-soft);background:none;border:0;padding:6px 0;cursor:pointer;
transition:color var(--t-fast) var(--ease);
}
.ftr-legal a:hover,.ftr-legal button:hover{color:var(--accent-lit)}
@media (pointer:coarse){
.ftr-legal{gap:2px 20px}
.ftr-legal a,.ftr-legal button{min-height:44px;display:inline-flex;align-items:center}
}
/* The revision line on a policy page. Same size and colour as a kicker, but
the capitals it was written in — see tools/build-policies.js. */
.pol-updated{text-transform:none;letter-spacing:.07em;font-size:11.5px}
/* ============================================================================
THE RING BUILDER SECTION (home page)
----------------------------------------------------------------------------
Two columns: the case for using it on the left, a photograph of it working
on the right. It replaced a counted index of materials — "Seven metals,
eleven inlays" over two rows of chips — which was accurate and told a
first-time visitor nothing about what they could actually do.
The picture carries the weight, so it gets the wider column on a desktop
and goes first in the stack on a phone: on a small screen the headline and
the picture together are the whole pitch, and the callouts are detail.
========================================================================== */
.rbp{
display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(32px,5vw,80px);align-items:center;
}
.rbp-copy h2{font-size:clamp(30px,4.4vw,54px);letter-spacing:-.033em;line-height:1.02;
margin:10px 0 0;max-width:13ch}
.rbp-copy .lede{margin-top:20px;max-width:46ch}
/* --------------------------------------------------------------- the steps
Numbered because they ARE a sequence — pick a metal, add to it, look at it
— and the drafting numerals are the same ones the case studies use. */
.rbp-steps{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;
display:flex;flex-direction:column;gap:2px}
.rbp-steps li{
display:flex;align-items:center;gap:16px;
padding:14px 0;border-top:1px solid var(--paper-3);
color:var(--text);font-size:16px;
}
.rbp-steps li:last-child{border-bottom:1px solid var(--paper-3)}
.rbp-n{
font-family:var(--mono);font-size:11px;letter-spacing:.16em;
color:var(--accent);flex:none;
}
/* ----------------------------------------------------------------- the CTA
Deliberately bigger than a normal button on this site. It is the one thing
this section exists to get pressed, and it used to be a text link under a
list of chips. */
.rbp-cta{
margin-top:clamp(26px,3vw,36px);
font-size:13.5px;letter-spacing:.16em;
padding:22px 38px;
border-radius:var(--radius);
}
@media (pointer:coarse){ .rbp-cta{min-height:60px} }
.rbp-note{margin-top:14px;color:var(--text-faint);font-size:13.5px;max-width:38ch}
/* -------------------------------------------------------------- the picture
On ink, because the builder's own workspace is, and a screenshot of a dark
tool floating on warm paper reads as a mistake. The frame carries the ink
right to the edge of the image so the two are one object. */
.rbp-shot{
position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;
background:var(--ink);border:1px solid var(--ink-3);
box-shadow:0 34px 80px rgba(12,12,14,.30);
transition:transform var(--t-mid) var(--ease-out),
box-shadow var(--t-mid) var(--ease-out);
}
.rbp-shot img{display:block;width:100%;height:auto}
.rbp-shot:hover{transform:translateY(-3px);box-shadow:0 42px 96px rgba(12,12,14,.38)}
.rbp-shot:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.rbp-badge{
position:absolute;left:14px;bottom:14px;
font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent-lit);background:rgba(12,12,14,.82);
border:1px solid rgba(var(--accent-lit-rgb),.28);border-radius:100px;
padding:8px 14px;
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
@media (max-width:980px){
/* The picture first: on a phone the headline and the drawing together are
the whole argument, and the callouts are supporting detail. */
.rbp{grid-template-columns:1fr;gap:28px}
.rbp-shot{order:-1}
.rbp-copy h2{max-width:none}
.rbp-cta{width:100%;justify-content:center}
.rbp-badge{left:10px;bottom:10px;font-size:9.5px;padding:7px 11px}
}
@media (prefers-reduced-motion:reduce){
.rbp-shot,.rbp-shot:hover{transition:none;transform:none}
}
/* ============================================================================
THE CUSTOM PAGE (.cst)
----------------------------------------------------------------------------
Two routes off this page and nothing else: open the ring builder, or write
to Jake directly. Everything here is arranged so a visitor can tell within
one screen which of those two they are, and the ring builder — previously a
text link reading "Try combinations" tucked beside a heading — is now a
section of its own with the picture and a button sized to match.
Prefix is .cst so none of it can reach another page. The picture reuses
.rbp-shot from the home page section: same frame, same badge, one place to
change it.
========================================================================== */
/* ------------------------------------------------------------------- 1. HERO
The four lines are the promise of the whole page, so they are the h1 and
nothing shares the space with them. The bodies that used to sit under
repeated copies of these same four titles are in the rail below instead —
the numeral is what ties a body back to its line. */
.cst-hero{padding-bottom:clamp(30px,4vw,54px)}
.cst-hero h1{
font-size:clamp(34px,6.2vw,80px);letter-spacing:-.04em;line-height:1.0;
margin:12px 0 0;text-wrap:balance;
}
.cst-hero h1 span{display:block}
.cst-hero h1 span + span{color:var(--text-soft)}
.cst-hero h1 span:last-child{color:var(--text)}
.cst-lede{margin-top:clamp(22px,2.6vw,30px);max-width:44ch}
.cst-hero-act{
margin-top:clamp(26px,3vw,38px);
display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
.cst-hero-cta{font-size:12.5px;letter-spacing:.17em;padding:19px 34px}
@media (pointer:coarse){ .cst-hero-cta{min-height:56px} }
/* ------------------------------------------------- 2. THE FOUR BEATS (rail)
Four columns on a desktop, stacked on a phone. The titles live in the h1
above and are repeated here only for a screen reader, which has no way to
see that 01 in the rail and the first line of the headline are the same
step. */
.cst-beats{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(16px,2.4vw,34px);
}
.cst-beat{padding-top:26px;border-top:1px solid var(--paper-3)}
.cst-beat-n{
font-family:var(--mono);font-size:11px;letter-spacing:.2em;
color:var(--accent);display:block;margin-bottom:12px;
}
.cst-beat p{font-size:14.5px;line-height:1.62;color:var(--text-soft);max-width:34ch}
.cst-sr{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media (max-width:900px){
.cst-beats{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media (max-width:560px){
.cst-beats{grid-template-columns:1fr;gap:0}
.cst-beat{padding-top:20px;padding-bottom:20px;border-top:1px solid var(--paper-3)}
.cst-beat:last-child{border-bottom:1px solid var(--paper-3)}
.cst-beat p{max-width:none}
}
/* ------------------------------------------------------- 4. THE RING BUILDER
Deliberately the largest thing on the page. It sits on ink because the
builder itself is dark and a screenshot of a dark tool on warm paper reads
as a mistake — the same reason the home page section is built this way.
The materials section directly above is also on ink, and with nothing
between them the two ran together into one very long black field with no
sense of where one argument ended and the next began. A raised panel and a
hairline give the builder its own edges while keeping the dark run whole. */
.cst-build-sect{background:var(--ink-2);border-top:1px solid var(--ink-3)}
.cst-build-sect .rbp-shot{background:var(--ink)}
.cst-build-head{margin-bottom:clamp(30px,4vw,52px);max-width:34ch}
.cst-build-head h2{
font-size:clamp(34px,5.6vw,72px);letter-spacing:-.04em;line-height:1.0;margin:12px 0 0;
}
.cst-build-head .lede{margin-top:18px}
.cst-build{
display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
gap:clamp(30px,4.4vw,68px);align-items:center;
}
/* The six groups, with their real options read from data.js so this list can
never drift away from what the builder actually offers. */
.cst-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cst-opt{padding:16px 0;border-top:1px solid var(--ink-3)}
.cst-opt:last-child{border-bottom:1px solid var(--ink-3)}
.cst-opt-k{
font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
color:var(--on-ink-faint);display:block;margin-bottom:7px;
}
.cst-opt-v{color:var(--on-ink);font-size:15px;line-height:1.5}
.cst-opt-v em{font-style:normal;color:var(--accent-lit)}
/* ------------------------------------------------------------- the big button
The one control this section exists to get pressed. Larger than any other
button on the site on purpose, and it says RING BUILDER rather than
"try it" so there is no doubt what is on the other side. */
.cst-cta-wrap{margin-top:clamp(34px,4.4vw,56px);text-align:center}
.cst-cta{
display:inline-flex;align-items:center;justify-content:center;gap:16px;
font-family:var(--mono);font-weight:500;
font-size:clamp(13px,1.5vw,17px);letter-spacing:.2em;text-transform:uppercase;
padding:clamp(24px,2.8vw,32px) clamp(30px,5vw,76px);
/* Wide enough to be the largest control on the page by a clear margin. The
one it has to beat is the enquiry form's full-width Send button, and
being the biggest thing here is this band's entire job. */
min-width:min(760px,100%);
border-radius:var(--radius);
background:var(--accent-lit);color:var(--ink);border:1px solid var(--accent-lit);
text-decoration:none;
transition:transform var(--t-mid) var(--ease-out),
background var(--t-fast) var(--ease),
box-shadow var(--t-mid) var(--ease-out);
box-shadow:0 18px 44px rgba(var(--accent-lit-rgb),.16);
}
.cst-cta:hover{transform:translateY(-3px);background:#F0D194;
box-shadow:0 26px 60px rgba(var(--accent-lit-rgb),.26)}
.cst-cta:active{transform:translateY(0)}
.cst-cta .arw{transition:transform var(--t-mid) var(--ease-out);display:inline-block}
.cst-cta:hover .arw{transform:translateX(6px)}
/* on-ink-soft rather than on-ink-faint: this is body copy a person reads,
not a label they glance at, and faint on the raised panel falls under 4.5:1. */
.cst-cta-note{
margin-top:16px;color:var(--on-ink-soft);font-size:13.5px;line-height:1.55;
max-width:46ch;margin-inline:auto;
}
/* ----------------------------------------------- 5. MEANINGFUL MATERIALS
A list of things people have actually asked for, then the invitation for
whatever is not on it. The invitation gets its own panel because it is the
point of the section, not a footnote to it. */
.cst-mean{
display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:clamp(28px,4.4vw,72px);align-items:start;
}
.cst-mean h2{font-size:clamp(30px,4.4vw,56px);letter-spacing:-.035em;line-height:1.02;
margin:12px 0 0;max-width:12ch}
.cst-mean-body{margin-top:20px;max-width:44ch}
.cst-things{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
background:var(--paper-3);border:1px solid var(--paper-3);border-radius:var(--radius);
overflow:hidden;
}
.cst-things li{
background:var(--paper);padding:18px 20px;
display:flex;align-items:center;gap:12px;
font-size:15px;color:var(--text);
}
.cst-things .sw{
width:10px;height:10px;border-radius:2px;flex:none;
border:1px solid rgba(22,23,26,.22);
}
.cst-things .sw.dashed{border-style:dashed;background:none}
/* the invitation */
.cst-open{
margin-top:clamp(30px,4vw,48px);
border:1px solid var(--accent);border-radius:var(--radius-lg);
background:var(--accent-ghost);
padding:clamp(26px,3.4vw,42px);
}
.cst-open h3{
font-family:var(--mono);font-weight:500;
font-size:clamp(13px,1.3vw,15px);letter-spacing:.17em;text-transform:uppercase;
color:var(--accent);margin:0 0 14px;
}
.cst-open p{font-size:clamp(16px,1.1vw + 13px,19px);line-height:1.55;color:var(--text);
max-width:52ch;margin:0}
.cst-open .tlink{margin-top:20px;display:inline-flex}
@media (max-width:900px){
.cst-build{grid-template-columns:1fr;gap:28px}
.cst-build .rbp-shot{order:-1}
.cst-mean{grid-template-columns:1fr;gap:26px}
.cst-mean h2{max-width:none}
.cst-cta{width:100%}
}
@media (max-width:560px){
.cst-things{grid-template-columns:1fr}
.cst-cta{letter-spacing:.14em;padding-inline:20px;gap:10px}
}
/* --------------------------------------------------- 6. THE REASSURANCE ROW
Three plain statements, no icons, no badges. Each one answers a question a
person actually hesitates over before writing to a stranger about money. */
.cst-sure{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(20px,3vw,48px);
}
.cst-sure-i{padding-top:24px;border-top:1px solid var(--paper-3)}
.cst-sure-i h3{
font-family:var(--mono);font-weight:500;
font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:var(--text);margin:0 0 12px;line-height:1.45;
}
.cst-sure-i p{font-size:14.5px;line-height:1.62;color:var(--text-soft);max-width:36ch}
@media (max-width:820px){
.cst-sure{grid-template-columns:1fr;gap:0}
.cst-sure-i{padding-block:20px}
.cst-sure-i:last-child{border-bottom:1px solid var(--paper-3)}
.cst-sure-i p{max-width:none}
}
/* ----------------------------------------------------------- 7. THE ENQUIRY
Same form, same fields, introduced as the other of the two routes rather
than as the only thing on the page. */
.cst-form-intro h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.03em;line-height:1.05}
.cst-form-why{
margin-top:26px;padding-top:22px;border-top:1px solid var(--paper-3);
}
.cst-mail{
font-family:var(--mono);font-size:14px;letter-spacing:.02em;
word-break:break-word;
}
/* .tlink uppercases its label, which is right for "Read the cookie policy"
and wrong for an email address — an address printed in capitals reads as
a different address and is slower to copy by eye. */
.cst-mail .tlink{text-transform:none;letter-spacing:.01em;font-size:15px}
/* ============================================================================
GET TO KNOW THE MAKER (.mkr)
----------------------------------------------------------------------------
The About page grew from a short bio into something a person actually reads
before spending money with a stranger. Everything here is additive: the
existing .maker-grid plate, the "How I work" rail and the reviews block are
untouched, and none of these rules can reach them.
Restraint is the whole brief. The faith section is Jake's testimony, not a
banner - so it gets a photograph, quiet type and one gold hairline, and it
is the same black-white-gold the rest of the site is built in.
========================================================================== */
/* ------------------------------------------------------- 1. THE SECOND PHOTO
Him on the porch with an open Bible, which is why it leads the faith
section rather than sitting beside the hobbies: the picture is already
about the thing the words are about.
The photograph is 3:4 and stays 3:4. No crop, no stretch - the column is
sized to the picture instead of the picture to the column. */
/* "How I work" directly below is also on ink and is staying exactly as it
was, so the faith section sits on the raised ink instead. Two panels with a
hairline between them, rather than one unbroken black field where a reader
cannot tell that one subject ended and another began. */
.mkr-faith-sect{background:var(--ink-2);border-bottom:1px solid var(--ink-3)}
.mkr-faith{
display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:clamp(30px,5vw,76px);align-items:center;
}
.mkr-shot{
margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;
background:var(--ink-2);border:1px solid var(--ink-3);
box-shadow:0 30px 70px rgba(12,12,14,.22);
}
.mkr-shot img{display:block;width:100%;height:auto}
.mkr-faith-copy h2{
font-size:clamp(28px,3.8vw,50px);letter-spacing:-.033em;line-height:1.05;
margin:12px 0 0;max-width:16ch;
}
.mkr-faith-copy p{
margin-top:1.05em;color:var(--on-ink-soft);
font-size:clamp(15px,1.05vw,17.5px);line-height:1.72;max-width:56ch;
}
.mkr-faith-copy p:first-of-type{margin-top:clamp(18px,2.2vw,26px)}
/* ------------------------------------------------------------- 2. THE VERSE
A quotation, set as one. The gold rule down the left is the only ornament:
no box, no banner, no oversized type. It has to read as something Jake
believes rather than something the site is shouting. */
.mkr-verse{
margin:clamp(34px,4.4vw,56px) 0 0;
padding:0 0 0 clamp(20px,2.6vw,34px);
border-left:2px solid var(--accent-lit);
max-width:60ch;
}
.mkr-verse p{
margin:0;color:var(--on-ink);
font-size:clamp(16px,1.25vw,20px);line-height:1.62;
font-weight:400;
}
.mkr-verse p + p{margin-top:.8em}
.mkr-verse cite{
display:block;margin-top:clamp(16px,2vw,22px);font-style:normal;
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--accent-lit);
}
/* --------------------------------------------- 3. VALUES: THE CONSCIENCE NOTE
The note about custom work. Short on purpose and quieter than the faith
section above it. A single column, so the paragraph keeps a comfortable
measure instead of being squeezed into half the page. */
.mkr-notes{
display:grid;grid-template-columns:minmax(0,1fr);
gap:clamp(24px,3.4vw,56px);
margin-top:clamp(40px,5vw,72px);
padding-top:clamp(28px,3.4vw,42px);
border-top:1px solid var(--ink-3);
}
.mkr-note h3{
font-family:var(--mono);font-weight:500;
font-size:11px;letter-spacing:.17em;text-transform:uppercase;
color:var(--on-ink-faint);margin:0 0 14px;
}
.mkr-note p{
margin:0;color:var(--on-ink-soft);font-size:15px;line-height:1.68;max-width:48ch;
}
@media (max-width:900px){
.mkr-faith{grid-template-columns:1fr;gap:28px}
.mkr-faith-copy h2{max-width:none}
.mkr-notes{grid-template-columns:1fr;gap:0}
.mkr-note + .mkr-note{
margin-top:26px;padding-top:26px;border-top:1px solid var(--ink-3);
}
.mkr-note p{max-width:none}
}
/* ============================================================================
THE FILM BAND ON A PHONE
----------------------------------------------------------------------------
The footage is a wide 16:9 frame made of four vertical clips side by side.
Jake's instruction, Sept 2026: keep it landscape on a phone, do not swap in
a vertical crop, and do not zoom in to fill a tall box - adjust the section
instead.
So the media band keeps its 16:9 and shows the whole width, and the copy
stops being an overlay and sits underneath it on the section's own ink.
The band is roughly 220px tall on a 390px screen: laying a heading, a
paragraph and a button over that would be unreadable whatever the scrim
did, and cropping to make room would throw away two of the four panels.
It still reads as one block rather than a video with a caption, because the
section is the same black the band fades into and there is no border,
rounding or gap between them.
========================================================================== */
@media (max-width:760px){
.film{display:flex;flex-direction:column}
.film-media{order:-1;max-height:none}
/* Out of the overlay, into the flow. */
.film-copy{
position:static;z-index:auto;
padding:clamp(26px,6vw,38px) var(--gut) clamp(30px,7vw,44px);
width:100%;
}
/* The shadows existed to lift text off footage. On flat ink they only
muddy it. */
.film-copy h2,.film-copy .lede{text-shadow:none;max-width:none}
.film-copy .lede{color:var(--on-ink-soft)}
/* The scrim now only has to carry the band into the section beneath it, so
it is a single fade at the bottom edge and the footage above it is
completely clear. */
.film-scrim{
background:linear-gradient(to top,
var(--ink) 0%,rgba(12,12,14,.55) 16%,rgba(12,12,14,0) 42%);
}
/* The chips stay on the footage, where there is room for them. */
.film-badge{top:14px}
}
/* --------------------------------------------------------- REDUCED MOTION
Nothing to do here. film.js never attaches a source when the visitor has
asked for less motion, so the