@font-face{font-family:'Frank Ruhl Hebrew';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/frank-ruhl-hebrew.woff2) format('woff2');unicode-range:U+0590-05FF, U+200F, U+FB1D-FB4F}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/bodoni-display.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/archivo.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
/* --ink-faint was #7d8ba1: 3.23:1 on ivory, which fails WCAG AA for normal
text and is used for product metadata and counts at ~12px. Darkened within
the same blue-grey family to 5.17:1 on ivory and 4.83:1 on cream. */
--ink:#14233b; --ink-soft:#4a5a72; --ink-faint:#5c6982;
/* --gold-deep was #8f6a1f: 4.32:1 on the cream surface, which fails AA for
normal text — and the eyebrow that uses it is 11.7px uppercase sitting on
exactly that surface in the maker section.
--gold was #b88a2e, and the note that used to sit here said it "only ever
carries white text on itself" as though that made it safe. That IS the
failing case: white on #b88a2e is 3.13:1, and .btn--gold is 15.04px — the
Add to cart button, the hero CTA, the cart badge and the Best seller flag
all failed 1.4.3 on every page. The same token as a foreground (the word
"Judaica" in the wordmark, the selected-thumbnail border) was 2.93:1.
Moved one step down its own lightness ramp — same hue, same family:
#8f6b24 white on it 4.89:1 · on ivory 4.57:1 · on cream 4.27:1
#6f5219 (hover) white on it 7.25:1, 1.74x darker so the state still reads
--coral splits by role. It stays as a border/graphic at 3.65:1 (clears the
3:1 non-text bar) and gains --coral-ink for TEXT: every validation error on
the site was 3.41:1 coral-on-ivory at 13px. */
--gold:#8f6b24; --gold-soft:#f3e6c8; --gold-deep:#6f5219;
--blue:#2a4cd0; --coral:#e2556e; --coral-ink:#b02a45; --green:#2f7d5b;
--ivory:#fbf7ef; --cream:#f6efe2; --line:#ece3d3; --white:#fff;
--shadow-sm:0 4px 14px rgba(20,35,59,.06);
--shadow-md:0 14px 34px rgba(20,35,59,.10);
--radius:18px; --radius-lg:28px; --radius-md:14px; --radius-sm:10px;
--wrap:min(1200px, calc(100% - 40px));
/* ---- type scale ----------------------------------------------------
Nine steps, and everything on the storefront uses one of them.
Before this there were 32 distinct rem font sizes in the stylesheet and
122 more in inline style attributes across the route files — twenty-two of
them below 1rem, ten of those inside a 3.5px band. .85 / .86 / .87 / .88rem
are not four levels of hierarchy; they are noise, and they are the clearest
fingerprint of a stylesheet assembled decision by decision rather than
designed. A human picks steps.
Ratio is roughly 1.08 at the small end where the eye needs the steps to be
distinguishable but close, opening to 1.25 at the top. The two display
sizes stay as clamp() because they are the only type on the site that
should respond to viewport width. */
--fs-micro:.75rem; /* 12px flags, counts, the cart badge */
--fs-meta:.8125rem; /* 13px captions, hints, footer legal */
--fs-ui:.875rem; /* 14px nav, chips, table cells, meta */
--fs-ctl:.9375rem; /* 15px buttons, summaries, form labels */
--fs-body:1rem; /* 16px body copy */
--fs-lede:1.125rem; /* 18px hero sub, section intro, story */
--fs-h3:1.3125rem; /* 21px */
--fs-h2:1.4375rem; /* 23px the PDP price */
/* Didone display over neutral grotesque — the pairing every jewellery shop
worth copying uses. See the note in src/assets/fonts.ts for why, and for
which shops. Didot is the fallback because it is the one high-contrast
serif that ships on macOS; Georgia would land somewhere else entirely. */
--serif:"Bodoni Moda",Didot,"Bodoni MT",Georgia,serif;
--sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--focus:#2a4cd0;
}
/* Light only, deliberately. Every product photograph carries its own light
background; inverted, the grid becomes 56 glowing rectangles on black and the
gold goes muddy. Declaring it stops form controls, scrollbars and the address
bar from guessing. This is a decision, not an omission — do not "add dark
mode" without re-shooting the catalogue. */
:root{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.6;font-size:var(--fs-body);-webkit-font-smoothing:antialiased}
/* A Didone is not a heavier version of a text serif and must not be set like
one. Three things change from how Fraunces was set here:
WEIGHT. Fraunces was set at 600 because it needed the mass. Bodoni's whole
character is the contrast between hairline and stem, and adding weight fills
the hairlines in and destroys it. Display sizes take 400; the smaller
headings take 500 because at 21px the hairlines start to disappear on a
low-DPI screen and need the stem back.
RANGE. Fraunces ran h1 through h4. Bodoni stops after h2 — below that, and
for every product title, the grotesque is the right voice. This is exactly
how the reference set behaves: Missoma and Catbird set a display serif for
headlines and Helvetica for absolutely everything else. A Didone used down
to 16px is a Didone nobody notices.
TRACKING. Unchanged in principle and retuned in value: a high-contrast serif
at 48px wants to be tighter than the same face at 21px, and tracking in em
is proportional to size, so one value cannot serve both. */
h1,h2{font-family:var(--serif);font-weight:400;margin:0 0 .5em;text-wrap:balance;
font-variant-numeric:lining-nums;font-optical-sizing:auto}
h3,h4{font-family:var(--sans);font-weight:600;margin:0 0 .5em;text-wrap:balance}
/* Tracking in "em" is proportional to font-size, so a single value is the SAME
optical tracking at 32px and at 48px — which is precisely the thing the note
above says it is correcting. -.017em was measurably too tight on a 390px
screen (the "tt" in "Shabbat Charm Earrings" closed up) and not tight enough
at 48px. It is now a small-screen value with a desktop override. */
/* Bigger than before, because a display serif earns its size: at 3rem Bodoni
read as a slightly odd body face. The clamp ceiling goes to 3.9rem and the
line-height tightens to match — display type at 1.08 leading looked airy
once the letterforms stopped being slabs. */
h1{font-size:clamp(2.35rem,5vw,3.9rem);line-height:1.02;letter-spacing:-.012em}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.1;letter-spacing:-.008em}
@media(min-width:900px){
h1{letter-spacing:-.02em}
h2{letter-spacing:-.014em}
}
/* h2 at the small end of its clamp is where Bodoni's hairlines get thin, so it
takes 500 on narrow screens and drops back to 400 once it is big enough. */
@media(max-width:640px){ h2{font-weight:500} }
h3{font-size:var(--fs-h3);line-height:1.32;letter-spacing:-.004em}
h4{font-size:var(--fs-body);line-height:1.35;letter-spacing:-.002em}
p{margin:0 0 1rem;text-wrap:pretty}
a{color:inherit;text-decoration:none}
/* Prose links are underlined; controls are not.
This was a deny-list — :not(.btn):not(.pcard__link):not(.chip)… — and a
deny-list has to be told about every component ever added. It had not been
told about .giftcard, so the gift finder rendered as twenty-one underlined
lines of gold text in one viewport and read as an unstyled fallback, on the
highest-intent page in the shop. An allow-list cannot fail that way: a new
component is un-underlined until someone decides otherwise.
text-decoration-thickness because the default rule under Fraunces at 16px is
heavier than the stems it sits below. */
.prose a,.rte a,.acc__body a,.crumbs a,.motif-body a,main p:not([class]) a{
text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:.06em;text-decoration-color:var(--gold)}
img,svg{max-width:100%;height:auto;display:block}
.wrap{width:var(--wrap);margin-inline:auto}
/* One left rail, page-wide.
Four pages set "style="max-width:760px"" (or 700/600) on .wrap itself, which
re-centres a narrower column inside the 1200px one. The result was three
different left edges stacked in a single view: header at 8% of the viewport,
prose at 24%, and the product row directly beneath the prose back at 8%. Two
hard vertical edges 220px apart in the same colour field is the first thing
a trained eye sees. The reading column now starts on the same rail as the
logo and the footer and simply stops earlier. */
.prose{max-width:66ch}
.prose>h1,.prose>h2,.prose>.section-head{max-width:24ch}
/* Prose wants a measure. 95 characters a line — which is what /about was
running at 1440px — is roughly double a comfortable return sweep, on the one
page where a shopper decides whether Leia is a real person. */
.rte p,.rte li,.pdp__story{max-width:64ch}
.section{padding:clamp(40px,6vw,78px) 0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Focus is never removed — only restyled.
Two-tone deliberately. outline-offset:2px puts the ring on the PARENT's
background, and this site has two dark ones: the navy footer and the whole of
admin. --focus on --ink is 2.28:1, i.e. an invisible focus indicator on ~14
footer links and every admin nav control (SC 1.4.11 / 2.4.11). The white
inner ring is 15.75:1 there, and on ivory the blue outer ring carries it at
6.46:1 — so whichever surface it lands on, one of the two rings is visible. */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;
box-shadow:0 0 0 2px #fff;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip-link:focus{left:8px;top:8px}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
font-family:var(--sans);font-weight:600;font-size:var(--fs-ctl);letter-spacing:.005em;padding:13px 26px;border-radius:999px;
border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;
min-height:46px;text-align:center}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:#1d3252;box-shadow:var(--shadow-md)}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-deep);box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--sm{padding:9px 16px;font-size:var(--fs-ui);min-height:40px}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* ---------- announcement + header ---------- */
.announce{background:var(--ink);color:#fbf7ef;text-align:center;font-size:var(--fs-micro);font-weight:400;
padding:10px 16px;letter-spacing:.12em;text-transform:uppercase;margin:0}
/* The sticky header scrolls a newly focused element under itself when tabbing
backwards — a 46px input or a 17px footer link ends up entirely hidden,
which is WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum), not just Enhanced. */
html{scroll-padding-top:80px}
#main{scroll-margin-top:80px}
#main:focus{outline:none}
.hdr{position:sticky;top:0;z-index:60;background:rgba(251,247,239,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:18px;min-height:64px}
/* inline-BLOCK, not inline-flex. Flex made the whitespace between "Leia’s"
and its Judaica an anonymous flex item, which collapses — the
wordmark rendered as "Leia’sJudaica". Padding reaches the 44px target
without changing the formatting context. */
/* Weight 700 made the wordmark a slab. A Didone wordmark is set light and
slightly open — the contrast does the work, not the mass. */
.hdr__logo{font-family:var(--serif);font-size:1.5rem;font-weight:500;letter-spacing:-.004em;font-optical-sizing:auto;
white-space:nowrap;display:inline-block;line-height:1.15;padding-block:11px}
.hdr__logo span{color:var(--gold)}
/* A fourth control (Saved) joined the header and pushed it 5px past a 390px
viewport — caught by qa:matrix as a horizontal overflow on every page.
The icon buttons cannot give way: 44px is the touch-target floor the
accessibility invariant sets. So the wordmark does. It is still the largest
thing in the header at this size, and 5px of overflow makes the whole page
scroll sideways, which is a far worse trade. */
@media (max-width:430px){ .hdr__logo{font-size:1.22rem} }
.hdr__nav{display:flex;gap:22px;margin-left:auto;align-items:center}
/* Small, light and wide-tracked. Nav at 15px/500 with no tracking is the
default every admin panel ships; the shops in the reference set all set
theirs a step smaller and let the spacing carry it. */
.hdr__nav a{font-size:var(--fs-ui);font-weight:400;letter-spacing:.04em;padding:8px 2px;border-bottom:2px solid transparent}
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{border-bottom-color:var(--gold)}
.hdr__tools{display:flex;gap:6px;align-items:center;margin-left:auto}
.hdr__nav+.hdr__tools{margin-left:10px}
/* Below ~380px there is not room for a wordmark plus four 44px targets at any
comfortable spacing, so the spacing goes.
This block lives AFTER .hdr__tools deliberately: the first attempt sat
beside .hdr__logo higher up the sheet, lost to the base rule on source
order, and silently did nothing — the gap stayed 6px and 320px still
overflowed. Same specificity means later wins, so it has to be here. */
@media (max-width:380px){
.hdr__logo{font-size:1.02rem}
.hdr__tools{gap:0}
.hdr__nav+.hdr__tools{margin-left:4px}
/* The last 3px at 320px. 20px of gutter each side is generous on a screen
that narrow, and 12px still keeps text off the bezel. */
:root{--wrap:min(1200px, calc(100% - 24px))}
}
.iconbtn{font-size:var(--fs-ui);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;border-radius:50%;cursor:pointer;color:var(--ink);position:relative}
.iconbtn:hover{background:var(--cream)}
.cartcount{position:absolute;top:4px;right:2px;background:var(--gold);color:#fff;font-size:var(--fs-micro);font-weight:700;
min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;font-family:var(--sans)}
.navtoggle{display:none}
@media(max-width:900px){
.hdr__nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ivory);
flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
/* The rendered menu is 23 links, and the mobile rule below forces every
submenu open at once — roughly 1,050px of panel against 780px of space
under a sticky 64px header. The last several links, "Our Story" among
them, could not be reached by scrolling, because the panel is anchored
to a bar that does not move. */
max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
.hdr__nav[data-open="true"]{display:flex}
.hdr__nav a{padding:14px 4px;border-bottom:1px solid var(--line)}
.navtoggle{display:inline-flex}
.hdr__tools{margin-left:auto}
}
/* ---------- nav submenus ----------
Shown on hover for pointers and on focus-within for keyboards, and on small
screens the panel is simply always open inside the drawer. No interaction
depends on a pointer hovering, because on a phone nothing ever does. */
.hdr__item{position:relative;display:flex;align-items:center}
.submenu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:10px;z-index:70}
.hdr__item:hover>.submenu,.hdr__item:focus-within>.submenu{display:block}
.submenu__in{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius-md);
box-shadow:var(--shadow-md);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:340px}
.submenu__in a{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:8px;
font-size:var(--fs-ui);border-bottom:0;white-space:nowrap;min-height:40px;align-items:center}
.submenu__in a:hover{background:var(--cream)}
.submenu__in a span{color:var(--ink-faint);font-size:var(--fs-meta)}
.submenu__all{grid-column:1/-1;font-weight:600;color:var(--gold-deep)}
@media(max-width:900px){
.hdr__item{display:block}
.submenu{display:block;position:static;transform:none;padding-top:0}
.submenu__in{border:0;box-shadow:none;background:transparent;padding:0 0 8px 14px;
grid-template-columns:1fr;min-width:0}
.submenu__in a{padding:11px 4px;border-bottom:1px solid var(--line)}
}
/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--cream),var(--ivory));border-bottom:1px solid var(--line);overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(36px,6vw,76px) 0}
/* contain, not cover.
*
* cover cropped the hero photograph to a square and cut the ear wire off the
* top of the frame. Which photograph appears here is now the owner's choice,
* so it has to be a treatment that cannot amputate ANY product — a hero that
* beheads one earring in three is not a hero. The piece sits whole on a warm
* panel, letterboxed where the source is not square, which reads as a
* deliberate presentation rather than a bad crop. */
/* No forced square.
*
* cover cropped the ear wire off the top. contain fixed the crop but, because
* every product photograph already carries its own background, it produced a
* picture inside a frame inside a frame — letterbox, then the photo's own
* stone backdrop, then the page. Letting the image keep its natural shape
* avoids both: nothing is cropped and there is only one rectangle. The
* width/height attributes still reserve the space, so nothing shifts on load. */
/* Every product photograph is 3:4, 4:3 or something odd — none is square. The
width/height attributes on the ![]()
say 1:1, so the browser reserved a
square, then replaced it with the natural ratio on decode: a 65-119px
downward shift of the H1, the subtitle and BOTH CTA buttons, at exactly the
moment a thumb is arriving at them. On mobile the art sits ABOVE the
headline, so everything moves. */
.hero__art img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg);width:100%;height:100%;
box-shadow:0 14px 36px rgba(20,35,59,.12)}
.hero p.hero__sub{font-size:clamp(var(--fs-body),1.6vw,var(--fs-lede));color:var(--ink-soft);max-width:52ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 20px}
.hero__trust{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--fs-ui);color:var(--ink-soft);font-weight:500}
.hero__trust span{display:inline-flex;align-items:center;gap:6px}
@media(max-width:840px){.hero__in{grid-template-columns:1fr;gap:26px}.hero__art{order:-1}}
/* A section marker, not a heading. It was 700 weight at .14em tracking, which
is the letterspaced-bold-caps look that reads as amateur however good the
face is. Semibold and roughly half the tracking still separates it from body
copy without shouting. */
.eyebrow{display:inline-block;font-weight:500;font-size:var(--fs-micro);letter-spacing:.14em;
text-transform:uppercase;color:var(--gold-deep);margin-bottom:.65rem;line-height:1.4}
.section-head{margin-bottom:clamp(20px,3vw,34px);max-width:62ch}
/* A reading measure. On a 1440px screen an intro paragraph was running the
full container width — around 150 characters a line, roughly twice what the
eye tracks comfortably. */
.section-head p{color:var(--ink-soft);margin:0;max-width:58ch;font-size:var(--fs-body);line-height:1.6}
/* ---------- Hebrew ----------
The names of the symbols and holidays, in Hebrew, beside the English.
Strip the photographs off this site and nothing about it is specifically
Jewish — cream, navy, one gold accent, a serif and a sans, a square product
grid. It could be a candle shop. This is the one piece of specificity
available that invents nothing: מגן דוד IS what a Star of David is called,
and the shop already names it in English two lines up.
Set slightly larger than the Latin beside it because Hebrew has no
ascenders or descenders to speak of, so at matched point size it reads
noticeably smaller than Fraunces. The gold is the deep, accessible one. */
.hebrew{font-family:"Frank Ruhl Hebrew",serif;font-weight:500;
/* direction:rtl orders the characters correctly; unicode-bidi:isolate stops
the Hebrew reordering the Latin around it. text-align stays with the page,
because in a stacked label the Hebrew and the English should share a left
edge — RTL block alignment stranded it at the far side of the tile with a
gap between the two names of the same thing. */
direction:rtl;unicode-bidi:isolate;text-align:left;
color:var(--gold-deep);letter-spacing:0;line-height:1.5}
.collection-hebrew{display:block;font-size:1.35em;margin:0 0 .1em}
.tile-hebrew{display:block;font-size:1.15em;margin-top:2px;opacity:.92}
/* ---------- product grid + cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(14px,2.2vw,26px)}
@media(max-width:560px){.pgrid{grid-template-columns:repeat(2,1fr);gap:12px}}
/* The photograph IS the card.
*
* These used to be white boxes with a border and a shadow, sitting on an ivory
* page. Forty-odd of them in a grid read as a dashboard, and the white panel
* under each one put a hard edge between the earrings and the page. Dropping
* the container leaves the product photograph as the only object on the
* surface, which is what a shop window does — the merchandise sits on the
* material, it is not mounted in a frame.
*
* The image keeps its own radius and a very soft shadow, so it still reads as
* a physical thing lying on the page rather than as a hole cut into it. */
.pcard{position:relative;display:flex;flex-direction:column;background:transparent;border:0}
.pcard__link{display:flex;flex-direction:column;flex:1}
/* Fixed ratio + explicit dimensions: the grid never shifts as images load. */
.pcard__media{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-md);
background:linear-gradient(165deg,var(--cream),#fdfaf4 72%);
box-shadow:0 2px 10px rgba(20,35,59,.05);transition:box-shadow .18s,transform .18s}
.pcard:hover .pcard__media,.pcard:focus-within .pcard__media{
box-shadow:0 12px 30px rgba(20,35,59,.13);transform:translateY(-3px)}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pcard:hover .pcard__media img.pcard__primary{transform:scale(1.04)}
.pcard__alt{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.pcard:hover .pcard__alt,.pcard:focus-within .pcard__alt{opacity:1}
/* Text sits on the page itself, not on a second surface. */
.pcard__body{padding:12px 2px 0;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard__title{font-family:var(--sans);font-size:var(--fs-ctl);font-weight:500;line-height:1.4;margin:0;color:var(--ink);
/* Two lines maximum keeps every row of the grid the same height; a long
name that wrapped to three used to shove its neighbour's price down. */
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* One price treatment everywhere. 700 made every price shout across a grid of
forty; 600 is still unmistakably the price without competing with the
photograph above it. */
.pcard__price{font-size:var(--fs-ctl);font-weight:600;color:var(--ink);margin-top:auto;font-variant-numeric:tabular-nums}
.pcard__price s{color:var(--ink-faint);font-weight:500;margin-right:6px}
.pcard__ctx{font-size:var(--fs-micro);color:var(--ink-faint)}
/* Clamped, so a long sentence cannot push one card's price out of line with
its neighbour's — the grid only stays a grid if every row is the same
height. Three lines rather than two: at 390px in two columns a card is ~168px
wide, and two lines cut most of these sentences off mid-word. On a desktop
card (~260px) three lines fits the whole thing. */
.pcard__sub{font-size:var(--fs-meta);line-height:1.42;color:var(--ink-soft);margin:0;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
text-wrap:pretty}
.flag{position:absolute;top:10px;left:10px;background:var(--white);color:var(--ink);font-size:var(--fs-micro);font-weight:600;
letter-spacing:.045em;text-transform:uppercase;padding:5px 11px;border-radius:999px;box-shadow:var(--shadow-sm)}
.flag--sold{background:var(--ink);color:#fff}
.flag--new{background:var(--green);color:#fff}
.flag--best{background:var(--gold);color:#fff}
.flag--limited{background:var(--coral-ink);color:#fff}
/* The quick-add form is a SIBLING of the card link — a