/* Fahz site token sheet — the single source for colours, type roles, button,
   header and footer chrome. Ported from mockups/site_r2/site.css (approved design,
   6 Nov 2026). Fonts come ONLY from the Adobe Fonts web project (kit cgn8sbx), loaded
   via <link> when FAHZ_TYPEKIT_ID is set; never self-host the .otf files.
   One cream everywhere: #FAF8F4. */
:root{--ink:#1A1A1A;--cream:#FAF8F4;--paper:#FFFFFF;--text:#6E6E6B;--mute:#6B6B6B;--hair:rgba(26,26,26,.14);--optic:2px;
--serif:"garamond-premier-pro","EB Garamond",Georgia,serif;
--sans:"gill-sans-nova","Gill Sans","Gill Sans MT",sans-serif;
--sans-l:"gill-sans-nova","Gill Sans","Gill Sans MT",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--text)}
body{font-family:var(--sans);font-weight:400;font-size:19px;line-height:1.55;font-variant-numeric:oldstyle-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
h1,h2,h3,blockquote,.serif{font-family:var(--serif);font-weight:400;color:var(--ink)}
h1{font-size:64px;line-height:1.04;margin:0 0 26px;letter-spacing:-.005em}
h2{font-size:40px;line-height:1.1;margin:0 0 20px}
h3{font-size:25px;line-height:1.2;margin:0 0 10px}
p,h1,h2,h3,blockquote,li{text-wrap:pretty}
p{margin:0 0 18px;max-width:31em}
/* round2 site item 7 (2026-11-11): small-caps eyebrow labels move Gill Sans Nova Light (300) -> Book
   (400) sitewide. Captions / small print (.small/.fine/figcaption/cite) deliberately stay Light. */
.eyebrow{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 18px;font-variant-numeric:lining-nums}
.lead{max-width:23em;margin:0 0 30px;text-wrap:balance}
.small,.fine,figcaption{font-family:var(--sans-l);font-weight:300;font-size:15px;color:var(--mute);line-height:1.6}
.fine{font-size:13px;margin-top:16px}
.lining,.num{font-variant-numeric:lining-nums}
/* optical alignment: sans stems line up under Garamond entry strokes */
h1~p,h2~p,h3~p,.eyebrow,blockquote~cite,h2~ul,h2~dl,h2~.small{margin-left:var(--optic)}
.btn{display:inline-block;background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:400;font-size:15px;letter-spacing:.04em;padding:16px 28px;border-radius:0;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hdr{border-bottom:1px solid var(--hair);background:var(--cream)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.hdr .wm svg{height:32px;width:auto;display:block}
.hdr nav{display:flex;gap:26px;align-items:center}
.hdr nav a{font-family:var(--sans-l);font-weight:300;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.hdr nav a[aria-current]{text-decoration:underline}
.disc{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:24px;line-height:1;padding-bottom:3px;text-decoration:none}
/* round2 items 1 + 3: reading-page header nav (About/Press text links) + cart icon. The text links
   carry the same treatment the old .hdr nav a had; the underline-when-current is reused. */
.hdr-nav{display:flex;gap:22px;align-items:center}
.hdr-nav .nav-text{font-family:var(--sans-l);font-weight:300;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.hdr-nav .nav-text[aria-current]{text-decoration:underline;text-underline-offset:4px}
/* the cart icon: a bag outline + count, shown only when the cart holds a vase (JS removes [hidden]) */
.cart-link{position:relative;display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
.cart-link[hidden]{display:none}
.cart-bag{width:22px;height:22px;display:block}
.cart-count{position:absolute;top:-6px;right:-8px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:var(--ink);color:var(--cream);font-family:var(--sans-l);font-weight:400;font-size:10px;line-height:15px;text-align:center;letter-spacing:0}
/* Phones: no About/Press links in the header (they live in the footer); the cart icon stays. */
@media (max-width:640px){ .hdr-nav .nav-text{display:none} }
.sec{padding:80px 0;border-top:1px solid var(--hair)}
.sec.first{border-top:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ink{background:var(--ink);color:rgba(250,248,244,.78)}
.ink h1,.ink h2,.ink h3,.ink blockquote{color:var(--cream)}
.ink .eyebrow,.ink .small,.ink figcaption{color:rgba(250,248,244,.6)}
.ink a{color:var(--cream)}
.ink .btn{background:var(--cream);color:var(--ink)}
blockquote{font-size:38px;line-height:1.15;margin:0 0 12px;max-width:15em;text-indent:-.4em}
cite{display:block;font-style:normal;font-family:var(--sans-l);font-weight:300;font-size:14px;color:var(--mute)}
figure{margin:0}
figcaption{margin-top:10px}
.ftr{background:var(--ink);color:var(--cream);padding:56px 0 28px}
.ftr .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
/* round2 item 11: display:block drops the ~8px inline-baseline whitespace under the wordmark svg so
   the tagline can lock up under it. */
.ftr .wm svg{height:34px;width:auto;display:block}
.ftr h4{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,248,244,.55);margin:0 0 14px}
/* round2 item 11: tighten the Explore/Help/Follow link spacing a little (10->8); white-on-ink still
   needs some room, so only a little. */
.ftr a{display:block;color:var(--cream);text-decoration:none;font-family:var(--sans);font-weight:400;font-size:15px;margin-bottom:8px}
/* round2 item 11: the tagline locks up under the footer wordmark (gap was much too large: 8px svg
   baseline + 10px margin). With the svg now block, 6px reads as a natural lock-up. */
.ftr .tag{font-family:var(--serif);font-style:italic;color:rgba(250,248,244,.65);font-size:16px;margin-top:6px}
.ftr .credit{grid-column:1/-1;border-top:1px solid rgba(250,248,244,.14);padding-top:20px;margin-top:24px;font-family:var(--sans);font-weight:400;font-size:13px;color:rgba(250,248,244,.55);display:flex;justify-content:space-between;font-variant-numeric:lining-nums}
.logos{display:flex;gap:44px;align-items:center;margin-top:36px;flex-wrap:wrap}
.logos img{height:22px;filter:grayscale(1) brightness(.35);opacity:.8}
.pwl{display:flex;align-items:center;gap:8px;font-family:var(--sans-l);font-weight:300;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#4a4a4a}
.pwl img{height:18px!important}
/* round2 item 9: optical left edge. A Garamond headline carries a left side-bearing, so the sans
   eyebrow + body appear to start a hair LEFT of it; nudge the sans elements ~1.5px right so the
   eyebrow, the Garamond headline and the sans body read as one left edge. Promoted to ALL widths
   (was phone-only). Applies wherever an eyebrow/headline/body stack appears on /about and /press
   (and the homepage "Try it with these faces." stack, handled in landing.html). */
h1~p,h2~p,h3~p,.eyebrow,blockquote~cite,h2~ul,h2~dl,h2~.small{margin-left:1.5px}
/* round2 item 8: two-column sections share the FIRST BASELINE. Where an eyebrow+headline column sits
   beside a body column (.cols with the first column led by an eyebrow), drop the body column so its
   first line sits on the HEADLINE's baseline, not level with the eyebrow above it. Desktop only (the
   section stacks to one column below 760). Auto-targets the eyebrow-led two-column sections — on
   /about: "Rubin's vase, with your people in it." and "We only want your photos for one thing."; on
   /press: any eyebrow-led .cols (e.g. "For the press: make one yourself."). ~47px = the eyebrow line
   + its margin, plus the headline/body first-baseline difference measured at the shipped h2 size. */
@media (min-width:761px){
 .cols:has(> :first-child > .eyebrow:first-child) > :nth-child(2){margin-top:47px}
}
@media (max-width:760px){
 .wrap{padding:0 20px}
 .hdr .wrap{height:60px} .hdr .wm svg{height:26px} .hdr nav{gap:16px} .hdr nav a{font-size:11.5px}
 h1{font-size:44px} h2{font-size:31px} body{font-size:18px} blockquote{font-size:29px}
 .sec{padding:56px 0}
 .split{grid-template-columns:1fr;gap:28px}
 .logos{gap:26px} .logos img{height:17px}
 .ftr .wrap{grid-template-columns:1fr 1fr} .ftr .brand{grid-column:1/-1}
 .ftr .credit{flex-direction:column;gap:6px}
}

.ftr .credit{align-items:center}
.ftr a.ddr{display:inline-flex;align-items:center;margin:0;gap:0;color:rgba(250,248,244,.55)}
.ftr a.ddr .of{font-size:13px;margin-right:14px}
.ftr a.ddr .ddr-g{height:18px;width:18px;display:block;flex:none}
.ftr a.ddr .ddrwm{height:15px;width:auto;display:block;margin-left:8px}
.ftr .cr{font-size:13px}
@media (max-width:760px){.ftr .credit{align-items:flex-start;gap:14px} .ftr a.ddr .of{font-size:12px}}