/* ============================================================ THE JEWELLERY WORKSHOP — Section patterns (design system v4 · minimal) Consolidated stylesheet for ALL section block patterns in /patterns (home, bespoke, repairs, valuations, ring-sizing, claw-retipping) and the footer template part. Everything is scoped under .tjw so it never leaks into the rest of the site or the editor. The mega navigation (mega-nav.css) and header bar (header.css) inherit the tokens defined here — this is the single source of truth for the brand look. Brand palette — The Jewellery Workshop (v4 · minimal): Mist Grey #f4f4f3 page ground (very light grey) Light Grey #eae9e6 media / thumbnail panels Onyx Black #161616 all text Goldsmith Garnet #5b1f23 inverted (dark) sections + footer Peach Quartz #cd8f60 single warm accent, used sparingly v4 changes (more minimal, more negative space): - warm Workshop-Mist ground -> neutral very light grey - lighter hairlines (.13 -> .09) so rules whisper - opened-up spacing: wider gutters, taller sections, bigger gaps - shorter hero so the fold sits below the actions Typography: display / serif -> "Cormorant Garamond" body / UI -> "Instrument Sans" mono labels -> "Overpass Mono" These three families load once, site-wide, via a single in (greyd_child_font_assets() in functions.php) — preferred over an @import, which is parse-blocked behind this stylesheet. One type system now serves both the marketing patterns and the WooCommerce surfaces. ============================================================ */ /* ---------- shared tokens ---------- :where(.tjw, .tjw-tokens) so BOTH the marketing patterns (wrapped in .tjw) and the WooCommerce/commerce surfaces (which sit outside .tjw's DOM subtree entirely — single-product, cart, checkout, mini-cart drawer, wishlist — but get .tjw-tokens via body_class(), see greyd_child_body_class() in inc/theme-assets.php) resolve the exact same custom properties. :where() keeps this at zero specificity so it can't out-rank anything downstream. jw-commerce.css / mini-cart.css used to redeclare their own --jw-* copy of this whole block (twice, in jw-commerce.css) because they had no other way to reach these tokens outside .tjw — that duplication is gone now; they reference these directly. */ :where(.tjw, .tjw-tokens){ /* Solid tokens read from the site's GLOBAL palette (theme.json → editor's Styles → Colours), so changing a colour there re-skins every pattern, the header, the mega nav and the footer at once. The hex after each comma is a fallback only if a palette slug is ever removed. */ --bg:var(--wp--preset--color--background,#f4f4f3); /* Mist Grey — page ground */ --bg-2:var(--wp--preset--color--secondary,#eae9e6); /* Light Grey — media/thumbnail panels */ --ink:var(--wp--preset--color--foreground,#161616); /* Onyx Black — all text */ --dark:var(--wp--preset--color--dark,#5b1f23); /* Goldsmith Garnet — inverted (dark) sections */ --bronze:var(--wp--preset--color--accent,#cd8f60); /* Peach Quartz — single warm accent, used sparingly */ /* Opacity steps are mixed from the tokens above, so they follow any global palette change automatically (no hard-coded rgba to keep in sync). */ /* Secondary/dim greys nudged up to clear WCAG AA on the Mist-Grey ground. --ink-60 targets 4.5:1 (normal-text AA, were 58% = 4.3:1). --ink-40 was previously restored to 46% (~3:1) on the theory it's only used on large/ decorative elements where the AA large-text floor applies — but a real Lighthouse audit (2026-07-05) showed its actual usage is dominated by small text (.meta--dim, .num, and dozens of small mono labels site-wide, all well under the 18pt/14pt-bold large-text threshold), rendering at 2.97:1 and failing AA. Bumped to 62% (matching --ink-60, ~4.9:1) so every small-text consumer passes; the two tokens are visually identical again as a result, which is a real, accepted tradeoff for this one — AA compliance on real content wins over the two-tier muted-grey distinction. */ --ink-60:color-mix(in srgb, var(--ink) 62%, transparent); --ink-40:color-mix(in srgb, var(--ink) 62%, transparent); --ink-80:color-mix(in srgb, var(--ink) 80%, transparent); /* article body — softer than pure Onyx */ --line:color-mix(in srgb, var(--ink) 9%, transparent); /* light hairlines */ --line-2:color-mix(in srgb, var(--ink) 16%, transparent); /* stronger hairline — chip borders */ --ink-70:color-mix(in srgb, var(--ink) 72%, transparent); /* tertiary text — between ink-80 body and ink-60 */ --paper-60:color-mix(in srgb, var(--bg) 72%, transparent); /* 55% -> 60%: the (03)/dim labels on the Garnet dark sections were 4.49:1. */ --paper-40:color-mix(in srgb, var(--bg) 60%, transparent); --line-d:color-mix(in srgb, var(--bg) 18%, transparent); /* Greyd's theme-adaptor (greyd-plugin) hardcodes input padding at :root (1.33em), which shadows the theme.json token. Re-declaring it here wins for our form inputs by proximity (nearest ancestor), so they read a tighter 0.85em with no per-input override needed. Default Greyd inputs (Woo etc.) keep their 1.33em. */ --wp--custom--greyd--input--spacing--padding--left:0.85em; --wp--custom--greyd--input--spacing--padding--right:0.85em; --serif:var(--wp--preset--font-family--heading,"Cormorant Garamond",Georgia,serif); /* Brand title face — Cormorant Garamond, for primary display headings only. (Was Adobe Ming via Typekit kit usv0cks; removed 2026-07 to run a single font service — see functions.php.) Kept as its own token so a future display face (e.g. the Mabry migration) can diverge from --serif. */ --title:"Cormorant Garamond",Georgia,serif; --sans:"Instrument Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --mono:"Overpass Mono","Courier New",monospace; --ease:cubic-bezier(.4,0,.2,1); --ease-big:cubic-bezier(.16,1,.3,1); --tjw-header-h:60px; /* sticky header height — single source for sticky offsets (mega-nav.css panels + the .filter bar both read this) */ /* ---- SCALE TOKENS ---- Spacing, type, tracking and radius scales distilled from the literal values already in use across the patterns + commerce CSS. */ /* spacing — 4px base; these are the px values already most used. --sp-20 added to match jw-commerce.css's own scale (used twice there; its --jw-sp-32 sibling had zero usages anywhere and was dropped). */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --gutter:44px; /* .wrap left/right padding */ /* static type — UI / body sizes */ --fs-3xs:10px; --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:24px; /* fluid display — collapses the ~dozen one-off clamp() headings to 5 steps. Still stage-1/additive: only one heading actually references these so far (bespoke__foot p → --fd-5); migrating the rest is a separate, visually-judged future pass, not part of this token-unification one. */ --fd-1:clamp(46px,7vw,132px); --fd-2:clamp(40px,6vw,100px); --fd-3:clamp(34px,4.5vw,66px); --fd-4:clamp(28px,3vw,44px); --fd-5:clamp(20px,2.2vw,28px); /* letter-spacing (tracking) */ --tr-tight:-.02em; --tr-snug:-.01em; --tr-0:0; --tr-wide:.05em; --tr-wider:.08em; --tr-widest:.12em; /* radius — 0 stays a literal */ --r-sm:2px; --r-md:5px; } /* ---------- scoped base (marketing patterns only — NOT on .tjw-tokens, deliberately: this sets the actual rendered font/colour for the .tjw subtree, and commerce surfaces must keep rendering their own explicit per-selector font-family/color declarations unchanged) ---------- */ .tjw{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14px; font-weight:400; line-height:1.6; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; } .tjw *{box-sizing:border-box} .tjw :where(p,h1,h2,h3,h4,h5,h6,blockquote,figure,ul,ol,cite){margin:0} .tjw .wp-block-group{margin:0} /* neutralise core block-gap margins; design spacing is explicit (grid/flex gap) */ .tjw .wp-block-group > *{margin-block-start:0} .tjw a:not(.wp-block-button__link){color:inherit;text-decoration:none} .tjw img,.tjw svg{display:block;max-width:100%} .tjw ul,.tjw ol{list-style:none} .tjw button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} .tjw ::selection{background:var(--dark);color:var(--bg)} .tjw em.acc{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0} .tjw .wrap{padding-left:var(--gutter);padding-right:var(--gutter)} @media(max-width:767px){.tjw .wrap{padding-left:18px;padding-right:18px}} /* ---------- type roles ---------- */ .tjw .display{font-family:var(--title);font-weight:500;font-synthesis:none;letter-spacing:var(--tr-tight);line-height:1.2;text-wrap:balance} .tjw .meta{font-family:var(--mono);font-size:var(--fs-3xs);font-weight:400;letter-spacing:var(--tr-wider);text-transform:uppercase} .tjw .meta--dim{color:var(--ink-40)} .tjw .num{font-family:var(--serif);font-style:italic;color:var(--ink-40)} /* ---------- links & buttons ---------- */ .tjw .lnk{position:relative;display:inline-block} .tjw .lnk::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform 350ms var(--ease-big)} .tjw .lnk:hover::after{transform:scaleX(0);transform-origin:right} .tjw .lnk--sm{font-size:14px;font-weight:500} /* Repairs enquiry-panel lede — was an inline style on a Custom HTML block, moved here so the copy can live in a native paragraph block. */ .tjw .panel__lede{font-family:var(--serif);font-size:clamp(24px,3vw,40px);max-width:560px;margin-bottom:28px} .tjw .cta{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-base);font-weight:500;letter-spacing:var(--tr-snug);background:var(--ink);color:var(--bg);padding:15px 26px;border-radius:var(--r-sm);transition:background-color 250ms var(--ease)} .tjw .cta:hover{background:var(--dark)} /* on garnet (.dark) sections the default ink→garnet hover blends into the panel, so invert to the bronze accent for a visible, on-brand hover */ .tjw .dark .cta:hover{background:var(--bronze);color:var(--ink)} /* (Greyd's button hover-border that used to grow the box is now neutralised at the source via theme.json settings.custom.greyd.button.prim.border.width = 0.) */ .tjw .cta--ghost{background:transparent;color:inherit;border:1px solid var(--ink-40)} .tjw .cta--ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} .tjw .cta--paper{background:var(--bg);color:var(--ink)} .tjw .cta--paper:hover{background:#fff} /* When .cta is a plain (header/footer/masthead CTAs), the link reset `.tjw a:not(.wp-block-button__link)` (0,2,1) out-specifies `.tjw .cta` (0,2,0) and forces color:inherit → on the solid variant that's ink-on-ink (invisible). Re-assert each variant's text colour for anchors at matching specificity. */ .tjw a.cta{color:var(--bg)} .tjw a.cta--ghost{color:inherit} .tjw a.cta--paper{color:var(--ink)} /* Force the ↗ / → arrows to render as monochrome TEXT, not a colour emoji (Windows Segoe UI Emoji otherwise shows them as a blue box-arrow). */ .tjw .arr,.tjw .cta,.tjw .lnk,.wp-block-button__link{font-variant-emoji:text} .tjw .cta .arr{font-family:var(--sans);transition:transform 250ms var(--ease)} .tjw .cta:hover .arr{transform:translate(2px,-2px)} /* TJW button looks now live as core/button block-style variations in theme.json (is-style-tjw-solid / -paper / -ghost / -link) — registered in functions.php. The plain .cta/.lnk rules above remain for header/footer/mega-nav HTML. */ /* Pin the hover border: Greyd's elements.button:hover applies border-width 2px (--…greyd--button--prim--hover--border--width) and beats the theme.json variation at equal :where() specificity — which grew the button 4px on hover (page shift). These higher-specificity rules keep the border constant between states. */ .wp-block-button.is-style-tjw-solid > .wp-block-button__link:hover{border-width:0;border-style:none;background-color:var(--dark);color:var(--bg)} .wp-block-button.is-style-tjw-paper > .wp-block-button__link:hover{border-width:0;border-style:none;background-color:#fff;color:var(--ink)} .wp-block-button.is-style-tjw-ghost > .wp-block-button__link:hover{border-width:1px;border-style:solid;border-color:var(--ink);background-color:var(--ink);color:var(--bg)} .wp-block-button.is-style-tjw-link > .wp-block-button__link:hover{border-width:0;border-style:none;background-color:transparent;color:inherit} /* TJW Link: replicate the concept .lnk animated underline bar (theme.json can't do ::after) */ .wp-block-button.is-style-tjw-link > .wp-block-button__link{position:relative} .wp-block-button.is-style-tjw-link > .wp-block-button__link::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform 350ms var(--ease-big)} .wp-block-button.is-style-tjw-link > .wp-block-button__link:hover::after{transform:scaleX(0);transform-origin:right} /* dark closing-band tagline (was inline-styled) */ .tjw .bespoke__foot-title{font-family:var(--serif);font-size:clamp(24px,3vw,40px);line-height:1.15;color:var(--bg);max-width:560px} .tjw .bespoke__foot-title em{font-style:italic} /* ---------- hero ---------- */ /* Hero fills the screen but leaves ~56px of clearance below the bottom-anchored CTA row so it never sits on (or under) the fold. */ .tjw .hero{min-height:calc(100svh - 116px);display:flex;flex-direction:column;margin-top:-16px} /* when a breadcrumb precedes the hero, drop the -16px snug-up so the hero doesn't ride up over the .crumb text (see /anatomy-of-a-commission/) */ .tjw .crumb + .hero{margin-top:0} /* when the WP admin bar is shown (logged-in), subtract its height too so the CTA row stays above the fold while editing */ body.admin-bar .tjw .hero{min-height:calc(100svh - 148px)} @media screen and (max-width:782px){body.admin-bar .tjw .hero{min-height:calc(100svh - 162px)}} .tjw .hero--short{min-height:auto} /* hero followed by a .facts band — trim the hero so the facts row teases above the fold on a laptop. Desktop/laptop only (>=768px); mobile keeps full hero. */ @media(min-width:768px){ .tjw .hero--facts{min-height:calc(100svh - 290px)} body.admin-bar .tjw .hero--facts{min-height:calc(100svh - 322px)} } /* On phones the full-viewport min-height + margin-top:auto pushed the headline into the lower half, leaving a tall dead zone up top and the CTAs below the fold. Let the facts-hero be content-height so the headline + primary CTA land within the first screen. */ @media(max-width:767px){ .tjw .hero--facts{min-height:auto} .tjw .hero--facts .hero__title{margin-top:0;padding-top:var(--sp-5)} } .tjw .hero__top{display:flex;justify-content:space-between;gap:30px;padding-top:0} .tjw .hero__title{margin-top:auto;padding-top:var(--sp-6);padding-bottom:var(--sp-5)} .tjw .hero--short .hero__title{margin-top:0;padding-top:56px} /* size by the smaller of width/height so a wide, short window can't blow the headline up and push the foot below the fold */ .tjw .hero__title h1{font-size:clamp(46px,min(6.8vw,10.5vh),116px)} .tjw .hero__title h1 .ind{padding-left:.8em} .tjw .hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-10);flex-wrap:wrap;padding-bottom:36px} /* child-page heroes (.hero--short) are sized on width alone — they don't fill the viewport, so the height cap above shouldn't shrink them on short windows */ .tjw .hero--short .hero__title h1{font-size:clamp(46px,7.6vw,132px)} /* scoped-product landing pages (e.g. /halo-engagement-rings/): a quieter hero than the editorial service pages, so the product grid sits higher. Scoped to .hero--lp so service-page heroes are untouched. */ .tjw .hero--lp .hero__title{padding-top:var(--sp-6);padding-bottom:0} .tjw .hero--lp .hero__title h1{font-size:clamp(36px,4.6vw,66px)} /* gap between the headline and the intro paragraph — .hero__foot is a flex row (lede left / CTAs right), so the space lives on the row, not the lede. */ .tjw .hero--lp .hero__foot{padding-top:56px;padding-bottom:0} .tjw .hero--lp{padding-bottom:0} /* the grid is a flow sibling immediately after the hero wrapper, so it inherits the theme block-gap; replace it with a tighter, deliberate gap. Scoped to the .tjw + .jw-sa adjacency, so the shop archive's
(not preceded by a .tjw sibling) is unaffected. */ .tjw + .jw-sa{margin-top:0} .tjw .hero__lede{max-width:380px;font-size:15px;line-height:1.6;color:var(--ink-60)} .tjw .hero__lede strong{color:var(--ink);font-weight:500} .tjw .hero__actions{display:flex;align-items:center;column-gap:28px;row-gap:16px;flex-wrap:wrap} /* breadcrumb (child pages) */ .tjw .crumb{display:flex;gap:10px;align-items:center;padding-top:30px;font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--ink-40)} .tjw .crumb a{color:var(--ink-60);transition:color 200ms var(--ease)} .tjw .crumb a:hover{color:var(--ink)} /* hero facts strip */ .tjw .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-10);border-top:1px solid var(--line);padding-top:var(--sp-8);padding-bottom:44px} .tjw .fact .meta{display:block;color:var(--ink-40);margin-bottom:var(--sp-3)} /* value only — the label is now an editable core/paragraph.meta, so exclude it from the big serif value styling (it keeps the .meta mono look). */ .tjw .fact p:not(.meta){font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);font-weight:500;letter-spacing:var(--tr-snug);line-height:1.1} .tjw .dark .facts{border-top-color:var(--line-d)} .tjw .dark .fact .meta{color:var(--paper-40)} @media(max-width:767px){.tjw .facts{grid-template-columns:1fr;gap:var(--sp-6)}} /* ---------- marquee ---------- */ .tjw .marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin-top:var(--sp-12)} .tjw .marquee__track{display:flex;gap:56px;width:max-content;animation:tjwMarq 80s linear infinite} .tjw .marquee__track span{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:400;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--ink-60)} .tjw .marquee__track .dot{color:var(--ink-40)} @keyframes tjwMarq{to{transform:translateX(-50%)}} /* ---------- section scaffolding ---------- */ .tjw .sec{padding-top:100px;padding-bottom:100px} .tjw .sec--tight{padding-top:0} .tjw .sec--tight-b{padding-bottom:0} .tjw .sec__head{display:flex;justify-content:space-between;align-items:baseline;gap:30px;border-top:1px solid var(--line);padding-top:18px;margin-bottom:var(--sp-24)} /* on narrow screens let the head's two meta labels wrap instead of clipping */ @media(max-width:600px){.tjw .sec__head{flex-wrap:wrap;gap:4px 30px}.tjw .masthead__meta{flex-wrap:wrap;gap:4px 20px}} .tjw .dark{background:var(--dark);color:var(--bg)} .tjw .dark .sec__head{border-top-color:var(--line-d)} .tjw .dark .meta--dim{color:var(--paper-40)} .tjw .dark .num{color:var(--paper-40)} /* ---------- story (editorial statement) ---------- */ .tjw .story__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-10)} .tjw .story__label{grid-column:1/4} .tjw .story__label .meta{position:sticky;top:96px;display:block;color:var(--ink-40)} .tjw .dark .story__label .meta{color:var(--paper-40)} .tjw .story__body{grid-column:5/12} .tjw .story__body .big{font-family:var(--serif);font-size:clamp(28px,3.6vw,52px);font-weight:500;letter-spacing:var(--tr-snug);line-height:1.2;text-wrap:balance;margin-bottom:72px} /* editorial photo band (e.g. the team shot below the /about/ hero) */ .tjw .story__photo{margin:0;border-radius:var(--r-sm);overflow:hidden} .tjw .story__photo img{width:100%;height:auto;display:block} .tjw .story__photo figcaption{margin-top:14px;font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.04em;color:var(--ink-40);text-align:left} /* a contained photo band (not full-bleed) sitting between sections */ .tjw .photo-band{padding-top:clamp(32px,4vw,64px);padding-bottom:clamp(48px,6vw,96px)} .tjw .photo-band .story__photo{max-width:1080px;margin-inline:auto} /* staggered pair of related photos (e.g. the bespoke design shots) */ .tjw .design-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);align-items:start} .tjw .design-pair figure{margin:0;border-radius:var(--r-sm);overflow:hidden} .tjw .design-pair figure img{width:100%;height:auto;display:block;transition:transform 800ms var(--ease-big)} .tjw .design-pair figure:hover img{transform:scale(1.03)} .tjw .design-pair figure:nth-child(2){margin-top:clamp(40px,9vw,130px)} @media(max-width:700px){ .tjw .design-pair{grid-template-columns:1fr;gap:24px} .tjw .design-pair figure:nth-child(2){margin-top:0} } .tjw .story__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);max-width:780px} /* tighter column pairing (e.g. the /visit address + hours on /about/) */ .tjw .story__cols--tight{max-width:640px} .tjw .story__cols p{font-size:var(--fs-base);line-height:1.7;color:var(--ink-60)} .tjw .story__cols p strong{color:var(--ink);font-weight:500} .tjw .dark .story__body .big{color:var(--bg)} .tjw .dark .story__cols p{color:var(--paper-60)} .tjw .dark .story__cols p strong{color:var(--bg)} .tjw .story__more{margin-top:var(--sp-16)} @media(max-width:900px){ .tjw .story__grid{grid-template-columns:1fr;gap:30px} .tjw .story__label,.tjw .story__body{grid-column:1/-1} .tjw .story__cols{grid-template-columns:1fr;gap:30px} } /* ---------- collection (asymmetric grid) ---------- */ .tjw .coll__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-24) var(--sp-12)} .tjw .pcard{display:block} .tjw .pcard--a{grid-column:1/6} .tjw .pcard--b{grid-column:8/13;margin-top:140px} .tjw .pcard--c{grid-column:2/7;margin-top:var(--sp-10)} .tjw .pcard--d{grid-column:8/13;margin-top:160px} .tjw .pcard__media{position:relative;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-2);display:flex;align-items:center;justify-content:center} .tjw .pcard--a .pcard__media{aspect-ratio:4/5} .tjw .pcard--b .pcard__media{aspect-ratio:1/1.1} .tjw .pcard--c .pcard__media{aspect-ratio:1/1} .tjw .pcard--d .pcard__media{aspect-ratio:4/5} .tjw .pcard__media svg{width:48%;transition:transform 800ms var(--ease-big)} .tjw .pcard:hover .pcard__media svg{transform:scale(1.06)} /* editable card media = a core/image block (figure.pcard__media) holding a real photo that fills the staggered media box */ .tjw .pcard__media.wp-block-image{margin:0} .tjw .pcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 800ms var(--ease-big)} .tjw .pcard:hover .pcard__media img{transform:scale(1.04)} .tjw .pcard__tag{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;background:var(--dark);color:var(--bg);border-radius:var(--r-sm);padding:5px 10px} .tjw .pcard__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-5);border-bottom:1px solid var(--line);padding:18px 0 12px} .tjw .pcard__name{font-family:var(--serif);font-size:23px;font-weight:500;letter-spacing:var(--tr-snug)} .tjw .pcard__price{font-size:var(--fs-sm);color:var(--ink-60)} .tjw .pcard__meta{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.04em;color:var(--ink-40);padding-top:var(--sp-3)} .tjw .coll__foot{grid-column:1/-1;display:flex;justify-content:center;margin-top:56px} /* tablet & mobile: drop the editorial stagger to a tidy 2-up grid (2 rows) */ @media(max-width:900px){ .tjw .coll__grid{grid-template-columns:1fr 1fr;gap:var(--sp-12) var(--sp-6)} .tjw .pcard--a,.tjw .pcard--b,.tjw .pcard--c,.tjw .pcard--d{grid-column:auto;margin-top:0} } @media(max-width:480px){ .tjw .coll__grid{gap:var(--sp-8) var(--sp-4)} /* row: stack title/price instead of squeezing title against the fixed-width price on narrow phones */ .tjw .pcard__row{flex-direction:column;align-items:flex-start;gap:4px} } /* ---- Collection as a WooCommerce Product Collection (hand-picked) ---- Same .pcard look, but each card is a
  • rendered by woocommerce/product- template, so the staggered a/b/c/d layout maps onto :nth-child(1..4) and the media box wraps woocommerce/product-image. Scoped under .coll__pc so it never touches the static .pcard markup. */ .tjw .coll__pc .wp-block-woocommerce-product-template.coll__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-24) var(--sp-12);margin:0;padding:0;list-style:none} .tjw .coll__pc .coll__grid > li{display:block;margin:0;padding:0;background:transparent} .tjw .coll__pc .coll__grid > li:nth-child(1){grid-column:1/6} .tjw .coll__pc .coll__grid > li:nth-child(2){grid-column:8/13;margin-top:140px} .tjw .coll__pc .coll__grid > li:nth-child(3){grid-column:2/7;margin-top:var(--sp-10)} .tjw .coll__pc .coll__grid > li:nth-child(4){grid-column:8/13;margin-top:160px} /* media box wraps the product-image block */ .tjw .coll__pc .pcard__media{position:relative;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-2);margin:0;display:block} .tjw .coll__pc .coll__grid > li:nth-child(1) .pcard__media{aspect-ratio:4/5} .tjw .coll__pc .coll__grid > li:nth-child(2) .pcard__media{aspect-ratio:1/1.1} .tjw .coll__pc .coll__grid > li:nth-child(3) .pcard__media{aspect-ratio:1/1} .tjw .coll__pc .coll__grid > li:nth-child(4) .pcard__media{aspect-ratio:4/5} .tjw .coll__pc .pcard__media a{display:block;width:100%;height:100%} .tjw .coll__pc .pcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 800ms var(--ease-big)} .tjw .coll__pc .coll__grid > li:hover .pcard__media img{transform:scale(1.04)} /* row: title + price */ .tjw .coll__pc .pcard__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-5);border-bottom:1px solid var(--line);padding:18px 0 12px;margin:0} .tjw .coll__pc .pcard__name{margin:0;font-family:var(--serif);font-size:23px;font-weight:500;letter-spacing:var(--tr-snug);line-height:1.1} .tjw .coll__pc .pcard__name a{color:var(--ink)} .tjw .coll__pc .pcard__price{margin:0;font-size:var(--fs-sm);color:var(--ink-60);white-space:nowrap} .tjw .coll__pc .pcard__price .woocommerce-Price-amount{font-size:inherit;color:inherit;font-weight:inherit} .tjw .coll__pc .pcard__price del{opacity:.5;margin-right:6px} .tjw .coll__pc .pcard__price ins{text-decoration:none} /* materials line = product short description (clamped to 2 lines) */ .tjw .coll__pc .pcard__meta{margin:0;padding-top:var(--sp-3);font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.04em;color:var(--ink-40);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tjw .coll__pc .pcard__meta p{margin:0} @media(max-width:900px){ .tjw .coll__pc .wp-block-woocommerce-product-template.coll__grid{grid-template-columns:1fr 1fr;gap:var(--sp-12) var(--sp-6)} .tjw .coll__pc .coll__grid > li:nth-child(1), .tjw .coll__pc .coll__grid > li:nth-child(2), .tjw .coll__pc .coll__grid > li:nth-child(3), .tjw .coll__pc .coll__grid > li:nth-child(4){grid-column:auto;margin-top:0} } @media(max-width:480px){ .tjw .coll__pc .wp-block-woocommerce-product-template.coll__grid{gap:var(--sp-8) var(--sp-4)} } /* ---------- dark display title ---------- */ .tjw .bespoke__title{font-size:clamp(44px,7vw,118px);margin-bottom:110px} .tjw .bespoke__title .ind{padding-left:.8em} /* ---------- index rows (steps) ---------- */ .tjw .steps{border-top:1px solid var(--line-d)} .tjw .step{position:relative;display:grid;grid-template-columns:1fr 2fr 6fr 2fr;gap:var(--sp-10);align-items:baseline;border-bottom:1px solid var(--line-d);padding:var(--sp-10) 0;transition:padding 300ms var(--ease)} .tjw .step__no{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--paper-40)} /* line-height restores the exact row height the old inline produced, now that the name is an editable core/paragraph (block boxes shed ~3px/line of the inline strut). 1.5em keeps the design leading; +3px is the constant offset. */ .tjw .step__name{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);font-weight:500;letter-spacing:var(--tr-snug);line-height:calc(1.5em + 3px)} .tjw .step__desc{font-size:var(--fs-sm);line-height:1.65;color:var(--paper-60);max-width:480px} .tjw .step__time{font-family:var(--mono);font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:.06em;color:var(--paper-40);text-align:right} /* light variant for index rows on paper sections */ .tjw .steps--light{border-top-color:var(--line)} .tjw .steps--light .step{border-bottom-color:var(--line)} .tjw .steps--light .step__no{color:var(--ink-40)} .tjw .steps--light .step__desc{color:var(--ink-60)} .tjw .steps--light .step__time{color:var(--ink-40)} /* Step cards can now be native groups (editable); .step__name may hold a .step__link. The link is stretched to cover the whole card on the FRONTEND only (scoped to .wp-site-blocks) so clicks in the block editor still edit the text rather than hitting an invisible overlay. */ /* Inherit the serif .step__name typography — the global-styles rule `a:where(:not(.wp-element-button))` forces links to the body font, so this scoped override (not a site-wide change) keeps the linked card names matching the non-linked ones. */ .tjw .step__link{color:inherit;text-decoration:none;font-family:inherit} .wp-site-blocks .tjw .step__link::after{content:"";position:absolute;inset:0;z-index:1} .tjw .step:hover .step__link{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .tjw .bespoke__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-10);flex-wrap:wrap;margin-top:var(--sp-24)} .tjw .bespoke__foot p{font-family:var(--serif);font-style:italic;font-size:var(--fd-5);color:var(--paper-60);max-width:520px} /* smaller sans "call ahead" note variant (e.g. /about/ visit CTA) */ .tjw .bespoke__foot-note{font-family:var(--sans);font-style:normal;font-size:15px;color:var(--paper-60);max-width:380px} .tjw .bespoke__foot-note strong{color:var(--bg)} @media(max-width:900px){ .tjw .step{grid-template-columns:1fr;gap:var(--sp-3)} .tjw .step__time{text-align:left} } /* ---------- materials ---------- */ .tjw .mats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-12)} .tjw .mat{border-top:1px solid var(--line);padding-top:28px} .tjw .mat__chip{height:150px;border-radius:var(--r-sm);margin-bottom:26px;transition:transform 400ms var(--ease-big)} .tjw .mat:hover .mat__chip{transform:translateY(-5px)} .tjw .mat h3{font-family:var(--serif);font-size:var(--fs-xl);font-weight:500;letter-spacing:var(--tr-snug);margin-bottom:var(--sp-3)} .tjw .mat p{font-size:var(--fs-sm);line-height:1.65;color:var(--ink-60)} @media(max-width:767px){.tjw .mats{grid-template-columns:1fr;gap:36px}} /* ---------- team grid (About / Our Story) — four maker cards with a serif monogram, reusing the .mat card rhythm + brand tokens ---------- */ .tjw .team{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-12)} .tjw .team__card{border-top:1px solid var(--line);padding-top:28px} .tjw .team__mono{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-2);font-family:var(--serif);font-size:26px;line-height:1;color:var(--dark);margin-bottom:24px} .tjw .team__name{font-family:var(--serif);font-size:var(--fs-xl);font-weight:500;letter-spacing:var(--tr-snug);margin-bottom:6px} .tjw .team__role{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40);margin-bottom:16px} .tjw .team__line{font-size:var(--fs-sm);line-height:1.65;color:var(--ink-60)} @media(max-width:900px){.tjw .team{grid-template-columns:1fr 1fr;gap:40px var(--sp-12)}} @media(max-width:480px){.tjw .team{grid-template-columns:1fr;gap:36px}} /* ---------- pricing rows ---------- */ .tjw .prices{border-top:1px solid var(--line)} .tjw .prow{position:relative;display:grid;grid-template-columns:3fr 6fr 2fr;gap:var(--sp-10);align-items:baseline;border-bottom:1px solid var(--line);padding:34px 0} /* The row can now be an editable core/group; the whole-card link is a single empty .prow__link anchor stretched over the card on the FRONTEND only (scoped to .wp-site-blocks) so clicks in the block editor still edit the text. */ .wp-site-blocks .tjw .prow__link{position:absolute;inset:0;z-index:1} .tjw .prow h3{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:var(--tr-snug)} /* description only — the "from £…" price is now an editable core/paragraph.from, so exclude it here and let the .prow .from rule below own its styling. */ .tjw .prow p:not(.from){font-size:var(--fs-sm);line-height:1.65;color:var(--ink-60);max-width:520px} .tjw .prow .from{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.8vw,24px);color:var(--ink-60);text-align:right;white-space:nowrap;line-height:calc(1.5em + 2px)} @media(max-width:767px){ .tjw .prow{grid-template-columns:1fr;gap:var(--sp-2)} .tjw .prow .from{text-align:left} } /* ---------- FAQ accordion (native core/details, class .faqs) ---------- Browser-native
    disclosure — no JS. .faqs wraps the wp:details blocks; summary is the question, the paragraph(s) are the answer. */ .tjw .faqs{border-top:1px solid var(--line)} .tjw .faqs .wp-block-details{border-bottom:1px solid var(--line)} .tjw .faqs summary{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);cursor:pointer;list-style:none;padding:var(--sp-8) 0;font-family:var(--serif);font-size:clamp(19px,2vw,26px);font-weight:500;letter-spacing:var(--tr-snug)} .tjw .faqs summary::-webkit-details-marker{display:none} .tjw .faqs summary::after{content:"+";font-family:var(--sans);font-size:var(--fs-xl);font-weight:400;color:var(--ink-60);transition:transform 300ms var(--ease-big);flex:none} .tjw .faqs .wp-block-details[open] summary::after{content:"+";transform:rotate(45deg)} .tjw .faqs .wp-block-details>:not(summary){font-size:var(--fs-base);line-height:1.7;color:var(--ink-60);margin-top:0;padding-bottom:var(--sp-8);max-width:660px} /* ---------- enquiry form (dark) ---------- */ .tjw .form{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10)} .tjw .field{display:flex;flex-direction:column;gap:4px;margin-bottom: 5px;} .tjw .field--full{grid-column:1/-1} .tjw .field label{font-family:var(--mono);font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:.06em;color:var(--paper-40);padding-left:12px} .tjw .field input,.tjw .field textarea,.tjw .field select{background:transparent;border:none;border-bottom:1px solid var(--line-d);border-radius:0;color:var(--bg);font:inherit;font-size:var(--fs-md);outline:none;transition:border-color 250ms var(--ease)} .tjw .field select{appearance:none;cursor:pointer} .tjw .field input:focus,.tjw .field textarea:focus,.tjw .field select:focus{border-bottom-color:var(--bg) !important} /* underline-only inputs: never let Greyd add a full box border or a fill on hover/focus (it makes the placeholder unreadable) — keep just the underline */ .tjw .field input:hover,.tjw .field textarea:hover,.tjw .field select:hover,.tjw .field input:focus,.tjw .field textarea:focus,.tjw .field select:focus{background-color:transparent !important;border-top:0 !important;border-right:0 !important;border-left:0 !important; color: white;} .tjw .field textarea{resize:vertical;min-height:90px;line-height:1.6} .tjw .field input::placeholder,.tjw .field textarea::placeholder{color:var(--paper-60)} .tjw .field select option{color:#161616;background:var(--bg)} .tjw .form__foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);flex-wrap:wrap;margin-top:28px} /* enquiry foot: show the submit button before the reCAPTCHA (button left / captcha right on desktop, button above on mobile) — DOM order stays captcha→submit for sensible keyboard tab flow */ .tjw .form__foot .cta{order:-1} .tjw .form__note{font-size:var(--fs-sm);color:var(--paper-60);max-width:340px} /* success note — hidden until submit reveals it (section-patterns.js demo handler, or contact.js for the real Salesforce form) */ .tjw .form__done,.tjw .form__success{display:none;grid-column:1/-1;font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,40px);color:var(--bg);line-height:1.2;max-width:640px} /* sub-line under the serif headline: quiet sans body copy */ .tjw .form__success-sub{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:var(--fs-md);line-height:1.6;color:var(--paper-60)} .tjw .form__success-sub a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* reCAPTCHA "please verify" hint (contact.js toggles [hidden]) */ .tjw .form__captcha-hint{margin:8px 0 0;font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.04em;text-transform:uppercase;color:var(--bronze)} /* reCAPTCHA widget (Salesforce enquiry form): a fixed-size 304x78 iframe that can't be restyled. It loads async (api.js is deferred), so we RESERVE its box up front — without this the iframe pops in on load and shoves the submit button down, a layout shift the visitor sees while filling the form. */ .tjw .form .field--captcha{gap:0;min-height:78px} .tjw .form .g-recaptcha{transform-origin:left top;min-width:304px;min-height:78px} @media(max-width:360px){.tjw .form .field--captcha{min-height:69px}.tjw .form .g-recaptcha{transform:scale(.88)}} @media(max-width:767px){.tjw .form{grid-template-columns:1fr}} /* single-column variant (used by the shared enquiry form): fields default to full width, so forms without pairs look unchanged. Only .field--half fields pair up (First+Last name, Budget+Timeframe) to shorten the list — best-practice single column with tightly-related fields on shared rows. */ .tjw .form.form--single{grid-template-columns:1fr 1fr;gap:24px 20px;max-width:520px} .tjw .form--single > .field{grid-column:1 / -1} .tjw .form--single > .field--half{grid-column:span 1} .tjw .form--single .cta{justify-self:start;margin-top:var(--sp-2)} /* stack pairs on phones, where narrow selects would truncate option text */ @media(max-width:560px){.tjw .form--single > .field--half{grid-column:1 / -1}} /* Enquiry-form sections: two columns on desktop — eyebrow + heading on the left, form on the right — so the form fills the panel instead of stranding on the left. Targets only sections where the form is a DIRECT child (bespoke / valuations / scrap-gold / repairs); the contact page keeps its .story__grid. */ @media(min-width:900px){ .tjw .sec.wrap:has(> .form--single){display:grid;grid-template-columns:1fr min(50%,680px);column-gap:clamp(48px,6vw,96px);align-items:start;padding-top:96px} .tjw .sec.wrap:has(> .form--single) > .sec__head{grid-column:1 / -1} .tjw .sec.wrap:has(> .form--single) > h2{grid-column:1;align-self:start;margin-bottom:0 !important} .tjw .sec.wrap:has(> .form--single) > .form--single{grid-column:2;justify-self:stretch;align-self:start;width:100%;max-width:none} } /* ---------- enquiry: reuses .story__grid so it matches the studio block above (narrow meta label left, statement + form in the body right) ---------- */ .tjw .enq .story__body .big{margin-bottom:var(--sp-6)} .tjw .enq__note{font-size:14px;line-height:1.7;color:var(--ink-60);max-width:520px;margin-bottom:var(--sp-10)} /* light panel section (contact enquiry) — Light-Grey ground with a dark-on-light form treatment, since the base .field styles assume a dark (.dark) section */ .tjw .panel{background:var(--bg-2)} .tjw .panel .field label{color:var(--ink-40)} .tjw .panel .field input, .tjw .panel .field textarea, .tjw .panel .field select{color:var(--ink);border-bottom-color:color-mix(in srgb,var(--ink) 20%,transparent)} .tjw .panel .field input:focus, .tjw .panel .field textarea:focus, .tjw .panel .field select:focus{border-bottom-color:var(--ink);background-color:transparent !important} .tjw .panel .field input::placeholder, .tjw .panel .field textarea::placeholder{color:var(--ink-60)} /* ---------- quote ---------- */ .tjw .quote{padding-top:100px;padding-bottom:100px;text-align:center} .tjw .quote p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,4.4vw,60px);line-height:1.18;letter-spacing:var(--tr-snug);max-width:1000px;margin:0 auto 44px;text-wrap:balance} .tjw .quote cite{font-family:var(--mono);font-style:normal;font-size:var(--fs-3xs);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40)} .tjw .quote__nav{display:flex;justify-content:center;gap:10px;margin-top:52px} .tjw .quote__dot{width:30px;height:2px;background:var(--line);transition:background 250ms var(--ease)} .tjw .quote__dot.on{background:var(--dark)} /* quote — reviews CPT slider (Greyd post-template slider) */ .tjw .quote--slider .query-page{display:flex;align-items:center;justify-content:center} .tjw .quote--slider .query-post{width:100%} .tjw .quote--slider .quote__slide{text-align:center} .tjw .quote--slider .quote__text{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,2.6vw,40px);line-height:1.22;letter-spacing:var(--tr-snug);color:var(--ink);max-width:920px;margin:0 auto 34px;text-wrap:balance} /* hero size — home slider (short, curated quotes) */ .tjw .quote--slider.quote--hero .quote__text{font-size:clamp(28px,4.4vw,58px);line-height:1.18;max-width:1000px} .tjw .quote--slider .quote__text p{display:inline;font:inherit;letter-spacing:inherit;margin:0} .tjw .quote--slider .quote__text::before{content:"\201C"} .tjw .quote--slider .quote__text::after{content:"\201D"} .tjw .quote--slider .quote__cite{font-family:var(--mono);font-style:normal;font-weight:400;font-size:var(--fs-3xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40);margin:0} .tjw .quote--slider .quote__cite::before{content:"— "} /* dots — restyle Greyd pagination to the brand bar-dots */ .tjw .quote--slider .pgn.numbers{margin-top:52px} .tjw .quote--slider .pgn_numbers{display:flex;justify-content:center;gap:10px} .tjw .quote--slider .pgn_numbers>a{display:inline-flex;align-items:center;padding:8px 0;line-height:0} .tjw .quote--slider .pgn_number{display:block;width:30px;height:2px;background:var(--line);font-size:0;line-height:0;color:transparent;transition:background 250ms var(--ease)} .tjw .quote--slider .pgn_number.pgn_current{background:var(--dark)} /* ---------- journal index ---------- */ .tjw .jrnl{border-top:1px solid var(--line)} .tjw .jrnl__row{display:grid;grid-template-columns:1fr 6fr 3fr 2fr;gap:var(--sp-10);align-items:baseline;border-bottom:1px solid var(--line);padding:34px 0;transition:opacity 250ms var(--ease)} .tjw .jrnl:hover .jrnl__row:not(:hover){opacity:.35} .tjw .jrnl__row h3{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);font-weight:500;letter-spacing:var(--tr-snug)} .tjw .jrnl__row h3 em{font-style:italic;font-weight:500} .tjw .jrnl__cat{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--ink-60)} .tjw .jrnl__read{font-family:var(--mono);font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-40);text-align:right} @media(max-width:767px){ .tjw .jrnl__row{grid-template-columns:auto 1fr;gap:10px 20px} .tjw .jrnl__cat,.tjw .jrnl__read{display:none} } /* ============================================================ FOOTER (footer template part — core/site-logo + core/navigation) ============================================================ */ .tjw .footer{background:var(--dark);color:var(--bg);overflow:hidden} /* padding-top clears the footer__icon, which is absolutely positioned above this row (132px tall + var(--sp-6) gap) plus var(--sp-10) breathing room above that */ .tjw .footer__top{display:grid;grid-template-columns:4fr 2fr 2fr 3fr;gap:var(--sp-10);padding-top:196px;padding-bottom:90px} .tjw .footer__brand{position:relative} /* brand icon mark: taken out of flow and pinned above the brand column so the intro text — not the icon — is the first flow element. That lines it up with the "Shop"/"The Workshop"/"Keep in touch" headings, which all sit at the same grid-row start; leaving the icon in flow pushed the column content down. */ .tjw .footer__icon{display:block;position:absolute;left:0;bottom:100%;width:108px;height:auto;margin:0 0 var(--sp-6)} .tjw .footer__intro{font-size:var(--fs-base);line-height:1.65;color:var(--paper-60);max-width:300px} /* Footer column headings are

    (was

    — fixed a heading-order skip from the page's H2s). font-style:normal + the small mono size override the global theme.json h2 styling (which is large + italic). */ .tjw .footer h2{font-family:var(--mono);font-size:var(--fs-3xs);font-weight:400;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-40);margin:0 0 22px} .tjw .footer ul li{margin-bottom:var(--sp-3)} .tjw .footer ul a{font-size:var(--fs-base);color:var(--paper-60);transition:color 200ms var(--ease)} .tjw .footer ul a:hover{color:var(--bg)} /* core/navigation menus inside the footer */ .tjw .footer .wp-block-navigation{font-size:var(--fs-base)} .tjw .footer .wp-block-navigation ul{gap:var(--sp-3)} .tjw .footer .wp-block-navigation .wp-block-navigation-item__content{color:var(--paper-60);transition:color 200ms var(--ease)} .tjw .footer .wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--bg);text-decoration:none} /* newsletter */ .tjw .newsletter{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line-d);max-width:300px} .tjw .newsletter input[type="email"]{flex:1;background:transparent;border:none;outline:none;color:var(--bg);font:inherit;font-size:var(--fs-base);padding:10px 0} .tjw .newsletter input::placeholder{color:var(--paper-40)} .tjw .newsletter button{font-size:var(--fs-xs);font-weight:500;color:var(--paper-60);transition:color 200ms var(--ease)} .tjw .newsletter button:hover{color:var(--bg)} .tjw .newsletter button[disabled]{opacity:.5;cursor:default} /* honeypot — kept off-screen, never seen by humans */ .tjw .newsletter__hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} /* success note (replaces the form) + inline error */ .tjw .newsletter__note{margin:0;font-size:var(--fs-base);color:var(--bg)} .tjw .newsletter__msg{flex-basis:100%;margin:8px 0 0;font-size:var(--fs-xs);color:var(--bronze)} /* social links — sits under the newsletter form, styled like the other footer nav columns. Plain