@charset "utf-8";
/* The Men's Shop Co. public storefront design system | 2026-08-16
   2026-08-23: added the shared .trademark-mark treatment for restrained first-use TM symbols; compact superscript sizing preserves headline and wordmark rhythm.
   2026-08-20: journal index CSS consolidated here out of journal/index.asp's inline style block. Its card rules were a near-duplicate of the .journal-article block already in this file and the two disagreed: the h3 rule here was dead (the markup emits h2), and the hover lift was declared twice on different elements (.journal-article:hover inline plus .journal-article .article-link:hover here), so hovering a card fired both a card transform and a link transform. Merged into one card block; the rest arrives as a new journal-index section - .hero/.filterbar/.pagination scoped to body.journal-index so those generic names cannot leak, .journal-wrap and .article-breadcrumbs left global. The page's duplicate .filterbar declarations (an early compact set superseded by a later expanded one) collapsed to the later, complete set.
   2026-08-20: product cards lifted off the page - .product-card now uses --color-surface-raised, whose value moved #20262e -> #2a323c. The old --color-surface (#171b21) sat at 1.126:1 against --color-bg (#0b0d10), below the ~1.3 where the eye reads a separate plane at all, so the card body dissolved into the page; #2a323c is 1.501:1. Deliberately kept under --color-border (#303741, 1.62:1) so the border still defines the edge. --color-surface-raised had been defined and never used.
   2026-08-20: .monogram-icon is masked from /images/logo-monogram.svg instead of a PNG - external and cached, with background-color carrying --color-gold through the mask so the colour stays on the token. Wrapped in @supports so an engine without mask support paints nothing rather than a gold rectangle. The header brand is unchanged text; the monogram appears only beside the drawer Menu label.
   2026-08-16: removed text-transform:uppercase from .marketing-form button (Join / Welcome to the Shop
   now render Title Case) as part of the sitewide Title Case button standard.
   2026-08-16: added --btn-case switch (:root; default none = Title Case) applied to .button/.btn/.marketing-form button - flip it to uppercase in one line for ALL CAPS buttons sitewide.
   2026-08-16: nudged the shared eyebrow rule (.home-eyebrow/.shop-hero__eyebrow/.waitlist/.optout) font-size .72rem -> .78rem.
   2026-08-16: eyebrow was single-sourced here, then RENAMED to a sitewide component:
   .eyebrow (base, DARK default: bright gold + gold dash, left-aligned) + composable modifiers
   .eyebrow--on-light (muted gold for light-ivory bg), .eyebrow--center, .eyebrow--left. Retired the
   four context class names (.home-eyebrow / .shop-hero__eyebrow / .waitlist-page__eyebrow /
   .optout-card__eyebrow) - every page uses .eyebrow now. Option A: all eyebrows get the dash.
   2026-08-16: added .eyebrow-sm - a small, dash-less eyebrow for repeated/inline labels (product-card
   category tag + kit gift sub-label); retired .product-card__eyebrow and .home-bundle__gift-eyebrow. Pair it with .eyebrow--on-light on light backgrounds.
   2026-08-16: final normalization - removed .waitlist-modal__eyebrow here (modal now uses .eyebrow-sm); about.asp's .about-eyebrow -> .eyebrow and welcome modal -> .eyebrow-sm. Every eyebrow site-wide is now .eyebrow or .eyebrow-sm.
   2026-08-16: defined --wrap:1200px (it was undefined globally, so cart/checkout .wrap resolved to NO max-width - only the inner 1102 bands saved the layout). 1200 matches the .chkwrap fallback and does not clip the 1102 bands, so no visual change; closes the latent bug.
   2026-08-16: brand-unity C1 - cart-drawer (.cd-*) cool blue-grays (#9aa3b1/#cfd6e3/#7f8794/#8d949f) -> var(--color-muted), dropping the off-brand cool hues from the mini-cart.
   2026-08-16: brand-unity C2 (color-token consolidation) - added the Extended brand palette block
   (--color-gold-muted/-gold-link/-black/-field/-ivory/-media-well/-muted-bright/-subtle/-ink/-ink-muted/
   -success/-error) as the single source for values previously hand-written as dozens of near-identical
   hexes. Wave A migrated here: product-card media well (#e8e1d2)->var(--color-media-well); eyebrow--on-light
   (#9b7623)->var(--color-gold-muted); legal page ivory (#f2eee5 x2)->var(--color-ivory), legal notice
   (#9b7825) and legal primary action (#cba135)->the gold tokens; --link now var(--color-gold-link).
   2026-08-16: brand-unity C2 Wave B - the --bg compat alias now maps to --color-bg (was --color-surface
   #171b21), so cart/checkout/receipt page grounds match the near-black (#0b0d10) used by the rest of the
   storefront (Steve approved the unify). Form-control/notice/well darks across cart/checkout/PDP migrated
   to var(--color-field). Deliberate section/card DEPTH tones (about/home/shop section backgrounds) were
   intentionally left as-is.
   2026-08-16: brand-unity C2 Wave C - muted text + status literals routed to tokens (pick-a-value-in-
   range, tune once later): dark body/lede/nav grays -> var(--color-muted-bright); strike/meta/fine-print
   -> var(--color-subtle); light-section primary text -> var(--color-ink), secondary -> var(--color-ink-muted);
   success greens (#7ee0a4/#8fe0a7/#91dba7) -> var(--color-success); error text (#ffaaaa/#ffb0b0) ->
   var(--color-error); waitlist/marketing input wells (#0f1216) -> var(--color-field). Reds with mixed
   "save vs error" semantics on cart/checkout were left for a dedicated pass.
   2026-08-16: brand-unity C2 FINAL PASS (full sweep of remaining live literals) - dark border literals
   (#2a2f36/#23282f) -> var(--color-border); creme text (#e9e7e1/#f3efe6-dupes) -> var(--color-text);
   .site-footer bg #0a0c0f -> var(--color-black); waitlist/contact/checkout input wells -> var(--color-field);
   checkout-review + checkout off-brand cool grays -> var(--color-muted), its greens/reds -> success/error;
   checkout mini-nav (.steps) greys -> muted/subtle. Fixed a regression: inc-add-to-cart.asp re-hardcoded
   --gold/--creme/--ink after the PDP's canonical :root and silently re-drifted them; those redefs removed.
   Left as deliberate: section/card DEPTH tones, editorial heading-whites, dark-ink-on-gold, receipt @media
   print, footer glow keyframe, email/meta literals, the legal-page light brown ramp, the "you save" red
   (#ff5f5f, semantics differ from error), and the unwired inc-quiz.asp + journal/ (separate surfaces).
   2026-08-16: announcement bar background now rotates in sync with the message rotator - added
   --ann-green (#1e4034 deep pine) + --ann-blue (#1f3350 deep slate) tokens and .announcement--gold/
   --green/--blue variant classes (JS cycles them; .announcement has a background/color transition for
   the cross-fade). Only the default rotating bar changes colour; per-page annBg overrides are untouched.
   2026-08-16: BTN1 - button-system unification. The legacy .btn-primary (re-implemented ~6x inline across
   cart/checkout/checkout-review/PDP/inc-add-to-cart) is retired; those CTAs now use the canonical
   .button.button--primary. Added modifiers: .button--block (width:100%), .button:disabled, and .button--cta
   (the gold-glow emphasis lifted from checkout-review's Continue button). Auto-width CTAs (checkout Review,
   PDP buybox Add-to-Cart) stay .button.button--primary. Left as-is: the .btn ghost base (inc-add-to-cart,
   for restock), receipt @media-print .btn/.btn-light, self-contained checkout_paid .btn, unwired inc-quiz.
   Old-funnel buttons shift 12px->8px radius + gain 48px min-height.
   2026-08-16: LINK1 - text-link CTAs ("LABEL ->") unified into one .link-cta component (+ .link-cta--on-light
   for ivory). Retired the 5 bespoke ones: .rv-cta a / .home-bundle__gift-link / .journal-cta (on dark) and
   .home-product-notify / .journal-all (on light; .journal-all keeps only its grid layout). Arrow is a ::after
   (markup no longer carries an arrow span). Visible: bundle white->gold, journal-all gray->gold, cart rv-cta
   normal-case->uppercase gold - all now consistent gold kicker links.
   2026-08-16: typography base - set the sitewide type base on html (font-size:16px, the single knob) and
   made body 1rem so it scales from it. cart-styles.css + checkout-styles.css bodies moved off their 15px
   overrides to 1rem, so the ENTIRE public site now shares the 16px base; size element text in rem to modify.
   (Note: cart/checkout still use the system-ui font family in their body rule, not the sitewide Inter - a
   separate family-drift to unify if wanted.)
   2026-08-16: eyebrow sizes raised for legibility (Steve's call) - .eyebrow .78rem->1rem (16px),
   .eyebrow-sm .7rem->.875rem (14px), sitewide. Then dropped weight 800->600 (semibold) so the larger
   uppercase reads refined not chunky. Tracking (.16em/.14em) kept - tune if it reads too airy.
   2026-08-16: typography floor - .product-card__status pill .7rem->.875rem (14px) so every product
   status pill hits the 14px minimum regardless of page (homepage already overridden to .875rem).
   2026-08-16: top-nav + footer nav links (.topnav a / .footer-col a) -> 1.125rem (18px); were too small
   (were .9rem/14.4px). Desktop top-nav only - mobile drawer nav is already 1.125rem.
   2026-08-16: footer copy +25% - brand tagline .footer-brand-copy 1rem->1.25rem (20px); signup copy
   .footer-signup__copy p .88rem->1.1rem (17.6px).
   2026-08-16: renamed .barber-icon -> .monogram-icon (nav monogram/favicon mark) - retiring "barber" naming.
   2026-08-16: larger cart icon on mobile (<=1023px): 90x64, sized to fit inside the 72px nav (desktop stays
   70x50). Bumped bigger first (105x75) but that overflowed the nav, so trimmed to 64px tall to fit.
   2026-08-16: BASE TYPE 16px -> 18px on html (the single rem knob) - rescales all rem-based text +12.5%
   sitewide in one move. Hardcoded px values (some checkout/cart inline) do NOT scale - handle separately.
   2026-08-16: footer nav links (.footer-col a) back to 1rem (= 18px at the new base); top-nav stays 1.125rem.
   2026-08-17: ROOT RECONCILIATION (V4.4 typography). html font-size 18px -> 100% (16px root) so rem-based
   sizes stop carrying the old +12.5% inflation and land on their intended px again (eyebrow 16, eyebrow-sm 14,
   footer brand copy 20, signup copy 17.6, story body 18, status pill 14). Regular body text is now sized at the
   body level: body 1rem -> 1.125rem (18px). Headings stay anchored to the 16px root, so the 18px body does NOT
   inflate rem-based headings. Footer nav re-pinned .footer-col a 1rem -> 1.125rem to hold 18px; top-nav a stays
   1.125rem (now 18px). cart-styles/checkout-styles bodies likewise 1rem -> 1.125rem so transactional pages match.
   2026-08-18: brand wordmark (.brand__title) now uses Playfair Display via a new --font-wordmark token; the
   rest of the site stays EB Garamond (--font-serif unchanged). Playfair 700 added to the font link.
   2026-08-18: removed dead wordmark CSS (.co-tight/.o-wrapper/.small-o/.raised-dot) - the header lockup was
   simplified to plain "The Men's Shop Co." so the raised-dot construction is gone. .lower-o kept (footer).
   2026-08-18: footer brand mark (.brand-inline) now uses --font-wordmark (Playfair) to match the header; the
   bottom-bar markup was simplified to plain "The Men's Shop Co." in inc-footer.asp + the inc-nav.asp drawer.
   2026-08-18: footer copyright company name reverted to plain text (markup change; .brand-inline still used by
   the signup title). NOTE: a footer signup email-input narrowing experiment (max-width/justify-self on
   .footer-signup .marketing-form) was tried and REVERTED - it broke the mobile layout; the form is back to its
   original full-width behavior.
   2026-08-19: mobile drawer title now uses inline-flex alignment so its decorative monogram stays centered
   beside "Menu"; the mobile Home link remains text-only.
   2026-08-20: monogram removed from desktop Home and enlarged from 18px to 24px beside mobile Menu.
   2026-08-20: mobile Menu label raised 1px for optical centering beside the monogram. */

:root{
  --color-bg:#0b0d10;--color-surface:#171b21;--color-surface-raised:#2a323c;
  --color-border:#303741;--color-text:#f3efe6;--color-muted:#bdb9af;
  --color-gold:#cba135;--color-gold-bright:#e0bf62;--color-danger:#b91c1c;
  /* Extended brand palette (C2) - single source for values that were previously
     hand-written across the site as dozens of near-identical hexes. */
  --color-gold-muted:#9b7623;    /* gold on light-ivory sections (eyebrows, light labels) */
  --color-gold-link:#e9d9a4;     /* pale gold link text on dark */
  --color-black:#0a0c0f;         /* deepest ground: footer, story media (below --color-bg) */
  --color-field:#0f1216;         /* input / control / dark-well backgrounds */
  --color-ivory:#f2eee5;         /* light section background */
  --color-media-well:#e8e1d2;    /* product image well behind transparent product art */
  --color-muted-bright:#d7d2c8;  /* brighter secondary text on dark */
  --color-subtle:#8f8a82;        /* dimmest text/meta on dark */
  --color-ink:#1f1d19;           /* primary text on light sections */
  --color-ink-muted:#5a564e;     /* secondary text on light sections */
  --color-success:#7ee0a4;       /* status: in-stock / success */
  --color-error:#ff6b6b;         /* status: save / error accents */
  --ann-green:#2c6a51;           /* announcement rotator: forest emerald */
  --ann-blue:#2b5480;            /* announcement rotator: steel slate blue */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"EB Garamond",Georgia,serif;
  --font-wordmark:"Playfair Display",Georgia,serif; /* brand wordmark only (.brand__title) */
  --site-max:1240px;--site-gutter:clamp(1rem,3vw,1.75rem);
  --radius-sm:8px;--radius-md:14px;--radius-lg:20px;
  --btn-case:none;   /* button text-case switch: none = Title Case (default); set to uppercase for ALL CAPS buttons sitewide */
  --shadow-card:0 24px 50px rgba(0,0,0,.28);
  --product-ratio:4 / 5;--thumb-ratio:var(--product-ratio);--thumb-fit:cover;--drawer-w:min(320px,88vw);
  --z-nav:1000;--z-overlay:1100;--z-drawer:1101;
  /* Compatibility aliases for retail pages awaiting migration. */
  --gold:var(--color-gold);--creme:var(--color-text);--text:var(--color-text);
  --muted:var(--color-muted);--panel:var(--color-surface);--panel-br:var(--color-border);
  --border:var(--color-border);--line:var(--color-border);--nav:var(--color-surface);
  --nav-br:var(--color-border);--rich-black:var(--color-bg);--card:var(--color-surface);
  --card-border:var(--color-border);--wrap-max:1100px;--wrap:1200px;--bg-grad:linear-gradient(90deg,#11151a,#1b2027);
  --bg:var(--color-bg);--gap:16px;--link:var(--color-gold-link);--thumb-bg:#171b21;
}

*,*::before,*::after{box-sizing:border-box}
/* TYPOGRAPHY INVARIANT - LOCKED 2026-08-18 (V4.4). The browser root STAYS at 100% (16px). Regular body text
   is 18px and is set on BODY (1.125rem, the rule below) - NEVER on html{font-size}. Do not move sizing onto
   the root: a non-100% root silently inflates every rem-based heading/eyebrow by the same factor and re-breaks
   the whole scale (that exact 18px-root bug was reverted here). To change body size, edit the body rule and
   leave html at 100%. Size element text in rem (anchored to the 16px root). Floor: 16px actions, 14px metadata. */
html{font-size:100%;scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:1.125rem/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}a:hover{text-decoration:none}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4{font-family:var(--font-serif);line-height:1.05}
.topnav ul,.footer-col ul{margin:0;padding:0;list-style:none}
.site-container{width:min(100% - (2 * var(--site-gutter)),var(--site-max));margin-inline:auto}
.container{max-width:1000px;margin:2rem auto;padding-inline:clamp(1rem,4vw,2rem)}
.site-section{padding-block:clamp(3.75rem,7vw,6rem)}
.stack{display:flex;flex-direction:column;gap:var(--stack-gap,1rem)}
.cluster{display:flex;align-items:center;flex-wrap:wrap;gap:var(--cluster-gap,.75rem)}
.visually-hidden,.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.35rem;border:1px solid var(--color-gold);border-radius:var(--radius-sm);font-weight:800;cursor:pointer}
/* Button text-case switch: flip --btn-case in :root (none <-> uppercase) to change ALL buttons site-wide. Title Case literal text is the source of truth; uppercase transform just changes display. */
.button,.btn,.marketing-form button{text-transform:var(--btn-case)}
.button--primary{background:var(--color-gold);color:#111}.button--primary:hover{background:var(--color-gold-bright)}
.button--secondary{background:transparent;color:var(--color-text)}.button--secondary:hover{background:rgba(203,161,53,.1)}
.button--block{width:100%}
.button:disabled,.button.is-disabled{opacity:.55;cursor:not-allowed}
.button--cta{font-size:1.02rem;letter-spacing:.02em;box-shadow:0 6px 18px rgba(203,161,53,.28)}.button--cta:hover{box-shadow:0 8px 22px rgba(203,161,53,.36)}
/* Text-link CTA ("LABEL ->") - one sitewide component. Base = on-dark (bright gold); add
   .link-cta--on-light for ivory sections. The arrow is a ::after - do NOT add an arrow span in markup. */
.link-cta{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;color:var(--color-gold-bright);font:700 .74rem/1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:color .18s ease}
.link-cta::after{content:"\2192";transition:transform .18s ease}
.link-cta:hover,.link-cta:focus-visible{color:#fff}
.link-cta:hover::after,.link-cta:focus-visible::after{transform:translateX(4px)}
.link-cta--on-light{color:var(--color-gold-muted)}.link-cta--on-light:hover,.link-cta--on-light:focus-visible{color:var(--color-ink)}
.button:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--color-gold-bright);outline-offset:3px}
.lower-o{text-transform:lowercase!important;font-size:.9em;position:relative;top:-.02em}

.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.5rem)}
.product-card{display:flex;flex-direction:column;overflow:hidden;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:transform .2s,border-color .2s,box-shadow .2s}
.product-card:hover{transform:translateY(-3px);border-color:rgba(203,161,53,.55);box-shadow:var(--shadow-card)}
.product-card__media{display:block;position:relative;overflow:hidden;background:var(--color-media-well);aspect-ratio:var(--product-ratio, 4 / 5)}
/* Kit "Set includes" — dynamic bill-of-materials (PDP + homepage bundle) */
.kit-block__label{margin:.85rem 0 .3rem;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--color-gold-bright,#e0bf62)}
.kit-includes{list-style:none;margin:0 0 .6rem;padding:0;display:grid;gap:.3rem}
.kit-includes__item{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.92rem;padding-bottom:.3rem;border-bottom:1px dashed rgba(203,161,53,.22)}
.kit-includes__qty{opacity:.7;font-size:.85em}
.kit-includes__price{color:var(--color-muted,#bdb7aa);white-space:nowrap;font-variant-numeric:tabular-nums}
.kit-includes__item--gift-box{margin-top:.15rem;font-weight:700}
.kit-includes__price--free{color:var(--color-gold-bright,#e0bf62);font-weight:800;letter-spacing:.08em}
.kit-block__value{margin:.2rem 0 0;font-size:.92rem}
.kit-block__was{text-decoration:line-through;color:var(--color-muted,#bdb7aa)}
.home-bundle__save{color:var(--color-gold-bright,#e0bf62);font-weight:700;font-size:.85em}
.product-card__media img{width:100%;height:100%;object-fit:cover}
.product-card__body{display:flex;flex:1;flex-direction:column;padding:1.25rem}
/* ===== Sitewide eyebrow ===== one class used on every page. Base = DARK-background default
   (bright gold + gold rule/"dash"), LEFT-aligned. Compose modifiers on the element:
   .eyebrow--on-light (muted gold for light-ivory sections), .eyebrow--center / .eyebrow--left. */
.eyebrow{display:flex;align-items:center;gap:.75rem;margin:0 0 .85rem;color:var(--color-gold-bright);font:600 1rem/1.4 var(--font-sans);letter-spacing:.16em;text-transform:uppercase}
.eyebrow::before{content:"";flex:0 0 2.5rem;width:2.5rem;height:1px;background:var(--color-gold)}
/* Small eyebrow (no dash) for repeated/inline labels: product-card category tag + kit gift sub-label. Add .eyebrow--on-light for light-bg use. */
.eyebrow-sm{margin:0 0 .6rem;color:var(--color-gold-bright);font:600 .875rem/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase}
.eyebrow--on-light{color:var(--color-gold-muted)}
.eyebrow--center{justify-content:center}
.eyebrow--left{justify-content:flex-start}
.product-card__title{margin:.4rem 0;font-size:clamp(1.25rem,2vw,1.55rem)}
.product-card__description{margin:.45rem 0 1rem;color:var(--color-muted);font-size:.9rem}
.product-card__purchase{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.product-card__price{font-weight:800;white-space:nowrap}.product-card__action{flex:1;margin-top:auto}
.product-card__action .button{width:100%;border:0}
.price-old,.old-price{color:var(--color-subtle);text-decoration:line-through;margin-right:.45rem;font-weight:500}.current-price{color:var(--color-text);font-weight:800}
.badge{position:absolute;top:.8rem;left:.8rem;z-index:1;padding:.35rem .65rem;border-radius:999px;background:#111;color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}


/* Journal index cards. Grid scoped to .journal-wrap so it does NOT leak onto the
   homepage's <section class="journal"> (that section only wants a background). */
.journal-wrap .journal{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.journal-article{overflow:hidden;background:var(--card);border:1px solid var(--card-border);border-radius:14px;transition:transform .2s ease,box-shadow .2s ease}
.journal-article:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,.15)}
.journal-article img{display:block;width:100%;height:180px;object-fit:cover}
.journal-article .pad{padding:14px}
.journal-article h2{margin:.25rem 0;color:#f4f1ec;font-size:1.1rem;font-family:'EB Garamond',serif}
.journal-article p{margin:0;color:#bdbdbd;font-size:.95rem}
.journal-article .article-link{display:block;color:inherit;text-decoration:none}

/* Journal index page (/journal/), moved here from that page's inline style block.
   Generic names (.hero, .filterbar, .pagination) are scoped to body.journal-index
   so they cannot leak onto a future page that reuses the same word; the journal-
   specific names are left global. */
.journal-index .hero{padding:clamp(2rem,4vw,4rem) 1rem;text-align:center;background:linear-gradient(90deg,#0c0c0c,#1a1a1a);border-bottom:1px solid rgba(203,161,53,.2)}
.journal-index .hero h1{margin:0 0 .5rem;font-family:'EB Garamond',serif;font-weight:600;font-size:clamp(2rem,3.5vw + 1rem,3rem);line-height:1.1;letter-spacing:.03em;color:var(--gold)}
.journal-index .hero p{margin:0 auto 1.25rem;max-width:760px;color:#dcdcdc;font-style:italic}

.journal-wrap{max-width:1100px;margin:0 auto;padding:1.25rem 1rem 3rem}

/* Filter bar: desktop = one row (form | meta), mobile = two rows. The min-width:0
   on the grid child and on the flex items is what keeps the Search button off the
   right edge instead of overflowing its column. */
.journal-index .filterbar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:0 0 14px}
.journal-index .filterbar form{display:flex;gap:8px;align-items:center;min-width:0}
.journal-index .filterbar input[type="search"]{flex:1 1 auto;width:100%;min-width:0;padding:10px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--card);color:#eee}
.journal-index .filterbar button{flex:0 0 auto;padding:10px 14px;border:1px solid var(--card-border);border-radius:10px;background:#1b1b1b;color:var(--gold);white-space:nowrap;cursor:pointer}
.journal-index .filterbar .meta{min-width:0;color:var(--muted);font-size:.95rem;text-align:right}
@media (max-width:520px){
  .journal-index .filterbar{grid-template-columns:1fr}
  .journal-index .filterbar .meta{text-align:center;justify-self:center}
}

.journal-index .pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:18px}
.journal-index .pagination a,.journal-index .pagination span{padding:8px 12px;border:1px solid var(--card-border);border-radius:10px;background:#141414;color:#e8e6e3;text-decoration:none}
.journal-index .pagination .active{border-color:#3a3a3a;background:#1f1f1f;color:var(--gold);font-weight:600}
.journal-index .pagination .disabled{opacity:.5;pointer-events:none}

/* Breadcrumb trail. The left gutter is matched to the article reader: there the
   crumb sits inside .journal-masthead (24 / 36 / 20px padding by breakpoint) around
   a 1180px .journal-masthead__shell, so the same screen-edge-to-Home distance here
   is max-width 1180 plus that padding on both sides (border-box). No gold in the
   trail - links carry the muted crumb colour and reveal themselves on hover or
   keyboard focus, matching css/journal-article.css. */
.article-breadcrumbs{max-width:1228px;margin:0 auto;padding:.75rem 24px 0;color:var(--muted);font-size:.95rem}
.article-breadcrumbs a,.article-breadcrumbs a:visited{color:inherit;text-decoration:none}
.article-breadcrumbs a:hover,.article-breadcrumbs a:focus{text-decoration:underline;text-underline-offset:3px}
@media (min-width:760px){.article-breadcrumbs{max-width:1252px;padding-left:36px;padding-right:36px}}
@media (max-width:720px){.article-breadcrumbs{padding-left:20px;padding-right:20px}}

.announcement{background:var(--color-gold);color:#111;text-align:center;padding:.55rem 1rem;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:background-color .55s ease,color .55s ease}
/* Rotating announcement palette - JS cycles these in sync with the message rotator (default bar only). */
.announcement--gold{background:var(--color-gold);color:#111}
.announcement--green{background:var(--ann-green);color:var(--color-text)}
.announcement--blue{background:var(--ann-blue);color:var(--color-text)}
.announcement-text{transition:opacity .6s ease-in-out}.announcement-text.fade-out{opacity:0}
.header{position:relative;z-index:var(--z-nav);background:var(--color-bg);border-bottom:1px solid var(--color-border);color:var(--color-text)}
.nav{width:min(100% - (2 * var(--site-gutter)),var(--site-max));min-height:72px;margin-inline:auto;display:flex;align-items:center;gap:1rem}
.trademark-mark{font-size:.42em;line-height:0;vertical-align:super;margin-left:.12em;letter-spacing:0}
.brand{display:flex;align-items:baseline}.brand__title{font-family:var(--font-wordmark);font-size:clamp(1.45rem,2.5vw,2.15rem);font-weight:700;letter-spacing:.035em;color:var(--color-gold);white-space:nowrap}@supports((mask-image:url(a.svg)) or (-webkit-mask-image:url(a.svg))){.monogram-icon{display:inline-block;-webkit-mask:url(/images/logo-monogram.svg) center/contain no-repeat;mask:url(/images/logo-monogram.svg) center/contain no-repeat;background-color:var(--color-gold);aspect-ratio:1110/962}}
.topnav{display:none;margin-left:auto}.topnav ul{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem}.topnav a{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .1rem;font-size:1.125rem;font-weight:600}.topnav a:hover{color:var(--color-gold-bright)}
.menu-icon.monogram-icon{width:auto;height:18px}.nav-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.cart-link{position:relative;display:inline-flex;align-items:center}.cart-icon{color:var(--color-text)}.cart-link:hover .cart-icon{color:var(--color-gold)}.cart-icon .cart-badge-num{fill:#fff;font:700 16px var(--font-sans)}
.drawer__title .menu-icon.monogram-icon{height:24px}
.hamburger{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:.25rem;border:0;background:transparent;color:var(--color-text);cursor:pointer}.bars{display:block;position:relative;width:22px;height:2px;background:currentColor}.bars::before,.bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .25s,opacity .25s}.bars::before{top:-6px}.bars::after{top:6px}.hamburger[aria-expanded=true] .bars{background:transparent}.hamburger[aria-expanded=true] .bars::before{transform:translateY(6px) rotate(45deg)}.hamburger[aria-expanded=true] .bars::after{transform:translateY(-6px) rotate(-45deg)}
.overlay{position:fixed;inset:0;z-index:var(--z-overlay);visibility:hidden;opacity:0;background:rgba(0,0,0,.55);transition:opacity .25s,visibility .25s}.overlay.active{visibility:visible;opacity:1}
.drawer{position:fixed;inset:0 0 0 auto;z-index:var(--z-drawer);display:flex;width:var(--drawer-w);flex-direction:column;visibility:hidden;pointer-events:none;transform:translateX(100%);background:var(--color-surface);color:var(--color-text);border-left:1px solid var(--color-border);transition:transform .28s,visibility .28s}.drawer.active{visibility:visible;pointer-events:auto;transform:none}.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:1rem}.drawer__title{display:inline-flex;align-items:center;gap:.4rem;font-size:1.125rem;font-weight:700}.drawer__title-label{transform:translateY(-1px)}.drawer__close{width:44px;height:44px;border:0;background:transparent;color:inherit;cursor:pointer}.drawer__nav{display:flex;flex-direction:column;padding:.5rem .5rem 1.5rem}.drawer__nav a{display:flex;align-items:center;min-height:48px;padding:.75rem 1rem;border-radius:.75rem;font-size:1.125rem}.drawer__nav a:hover{background:rgba(203,161,53,.15);color:var(--color-gold)}.drawer__footer{margin-top:auto;padding:1rem;border-top:1px solid var(--color-border);color:var(--color-muted)}
.nav-is-fixed{position:fixed!important;top:0;right:0;left:0;width:100%;z-index:var(--z-nav);background:rgba(11,13,16,.94);backdrop-filter:blur(8px)}.sticky-nav-spacer{display:none}.sticky-nav-spacer.is-active{display:block;height:var(--nav-h,72px)}

.cd-overlay{position:fixed;inset:0;z-index:var(--z-overlay);visibility:hidden;opacity:0;pointer-events:none;background:rgba(0,0,0,.55);transition:opacity .25s,visibility .25s}.cd-overlay.is-open{visibility:visible;opacity:1;pointer-events:auto}
.cd-panel{position:fixed;inset:0 0 0 auto;z-index:var(--z-drawer);display:flex;width:min(420px,92vw);height:100%;flex-direction:column;visibility:hidden;pointer-events:none;transform:translateX(100%);background:var(--color-surface);border-left:1px solid var(--color-border);box-shadow:-18px 0 40px rgba(0,0,0,.45);transition:transform .28s,visibility .28s}.cd-panel.is-open{visibility:visible;pointer-events:auto;transform:translateX(0)}
.cd-head{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem;border-bottom:1px solid var(--color-border)}.cd-title{margin:0;color:var(--color-gold);font:700 1.15rem/1 var(--font-serif)}.cd-close{padding:.25rem .5rem;border:0;background:transparent;color:var(--color-muted);font-size:22px;cursor:pointer}.cd-ship{padding:.65rem 1.25rem;border-bottom:1px solid var(--color-border);text-align:center;color:var(--color-muted);font-size:.78rem;font-weight:600}.cd-ship-win{color:var(--color-success)}.cd-body{flex:1 1 auto;overflow-y:auto;padding:.5rem 0}.cd-empty,.cd-loading{padding:3rem 1.5rem;text-align:center;color:var(--color-muted)}.cd-item{display:flex;gap:.75rem;padding:.9rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.06)}.cd-thumb{flex:0 0 64px;width:64px;overflow:hidden;aspect-ratio:var(--thumb-ratio);border-radius:.6rem;background:#11151a}.cd-thumb img{width:100%;height:100%;object-fit:var(--thumb-fit)}.cd-info{flex:1;min-width:0}.cd-name{margin:0 0 .15rem;font-weight:600}.cd-oneline{margin:0 0 .5rem;color:var(--color-muted);font-size:.75rem}.cd-meta,.cd-subrow{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.cd-qty{display:inline-flex;align-items:center;overflow:hidden;border:1px solid var(--color-border);border-radius:.55rem}.cd-qty button{width:30px;height:30px;border:0;background:transparent;color:inherit}.cd-qnum{min-width:30px;text-align:center;font-size:.8rem;font-weight:600}.cd-price{text-align:right}.cd-line{font-weight:700}.cd-was{color:var(--color-muted);font-size:.72rem;text-decoration:line-through}.cd-remove{padding:.4rem 0 0;border:0;background:transparent;color:var(--color-muted);font-size:.72rem;text-decoration:underline;cursor:pointer}.cd-foot{flex:0 0 auto;padding:1rem 1.25rem 1.25rem;border-top:1px solid var(--color-border)}.cd-sublabel{font-weight:600}.cd-subval{font:700 1.15rem var(--font-serif)}.cd-subnote{margin:.2rem 0 .9rem;color:var(--color-muted);font-size:.72rem}.cd-checkout{display:block;width:100%;padding:.9rem 1.25rem;text-align:center;background:var(--color-gold);color:#111;border-radius:var(--radius-sm);font-weight:800}.cd-checkout.is-disabled{opacity:.5;pointer-events:none}body.cd-locked{overflow:hidden}


.legal-page{background:var(--color-ivory);color:#25231f}.legal-document{min-height:60vh;padding:clamp(3.25rem,7vw,6rem) var(--site-gutter) clamp(4rem,8vw,7rem);background:var(--color-ivory)}.legal-document__header,.legal-document__body{width:min(100%,860px);margin-inline:auto}.legal-document__header{padding-bottom:clamp(1.75rem,4vw,2.5rem);border-bottom:1px solid #cfc8ba}.legal-document__header h1{margin:0;color:#1f1d19;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:600;letter-spacing:-.025em}.legal-document__summary{max-width:44rem;margin:.8rem 0 0;color:#575249;font-size:clamp(1rem,2vw,1.15rem);line-height:1.6}.legal-document__date{margin:.7rem 0 0;color:#756f65;font-size:.82rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.legal-document__body{padding-top:clamp(2rem,4vw,3rem)}.legal-section{padding:0 0 1.75rem;margin:0 0 2rem;border-bottom:1px solid #d9d2c5}.legal-section:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}.legal-section h2{margin:1.65rem 0 .75rem;color:#27231d;font-size:clamp(1.4rem,3vw,1.8rem);font-weight:600;line-height:1.2}.legal-section h2:first-child{margin-top:0}.legal-section h3{margin:1.35rem 0 .6rem;color:#302b24;font-size:1.15rem}.legal-section p,.legal-section ul,.legal-section ol{margin:0 0 1rem;color:#36322c;line-height:1.75}.legal-section ul,.legal-section ol{padding-left:1.4rem}.legal-section li{margin-bottom:.45rem;padding-left:.15rem}.legal-section strong{color:#211e19}.legal-section a{color:#725719;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}.legal-section a:hover{color:#3f3010}.legal-section--note{color:#5e584e;font-size:.9rem;font-style:italic}.legal-muted{color:#6c665d!important;font-size:.92rem}.legal-table-wrap{max-width:100%;margin:1.25rem 0 1.5rem;overflow-x:auto;border:1px solid #cfc7b9}.legal-table{width:100%;min-width:820px;border-collapse:collapse;color:#302d27;font-size:.86rem;line-height:1.5}.legal-table th,.legal-table td{padding:.75rem;vertical-align:top;text-align:left;border-right:1px solid #d7d0c3;border-bottom:1px solid #d7d0c3}.legal-table th:last-child,.legal-table td:last-child{border-right:0}.legal-table tr:last-child td{border-bottom:0}.legal-table th{background:#e4ded2;color:#27231d;font-weight:800}.legal-table tbody tr:nth-child(even){background:#ece7de}.legal-status{display:inline;color:#4e493f;font-weight:700}.legal-notice{padding:1rem 1.1rem;border-left:3px solid var(--color-gold-muted);background:#e9e2d5}.legal-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:1.25rem 0}.legal-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem .9rem;border:1px solid #8d816d;color:#3d3529!important;text-align:center;text-decoration:none!important;font-weight:700}.legal-action--wide{grid-column:1/-1}.legal-action:hover{border-color:#6e5318;background:#ece4d5}.legal-action--primary{border-color:#8f6d1e;background:var(--color-gold);color:#17130b!important}.legal-action--primary:hover{background:#d7b14d}

.site-footer{background:var(--color-black);border-top:1px solid var(--color-border);color:var(--color-muted-bright)}.site-footer__inner{width:min(100% - (2 * var(--site-gutter)),var(--site-max));margin-inline:auto;padding:3.5rem 0 1.75rem}.footer-grid{display:grid;grid-template-columns:minmax(260px,2fr) repeat(2,minmax(170px,1fr));gap:clamp(2rem,5vw,4.5rem);align-items:start}.footer-col--brand{text-align:center}.footer-col--brand>.footer-brand-mark,.footer-col--brand>.footer-mobile-divider{margin-inline:auto}.footer-brand-mark{display:inline-flex;vertical-align:top;color:var(--color-gold)!important}.footer-brand-mark img{display:block;width:260px;height:auto}.footer-brand-copy{max-width:22rem;margin:1rem auto 0;font:400 1.25rem/1.45 var(--font-serif);letter-spacing:.01em}.footer-brand-copy span,.footer-brand-copy strong{display:block}.footer-brand-copy span{color:#b99235}.footer-brand-copy strong{color:#d4aa43;font-weight:600;animation:footer-brand-glow 15s ease-in-out infinite}.footer-mobile-divider{display:flex;align-items:center;gap:.8rem;max-width:22rem;width:100%}.footer-col--brand>.footer-mobile-divider{margin-top:1.25rem}.footer-mobile-divider::before,.footer-mobile-divider::after{content:"";height:1px;flex:1}.footer-mobile-divider::before{background:linear-gradient(90deg,transparent,rgba(203,161,53,.72))}.footer-mobile-divider::after{background:linear-gradient(90deg,rgba(203,161,53,.72),transparent)}.footer-mobile-divider img{width:30px;height:30px;object-fit:contain}.footer-heading{margin:0 0 .85rem;color:var(--color-gold);font-family:var(--font-sans);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}.footer-col li{margin:.55rem 0}.footer-col a{display:inline-flex;min-height:32px;align-items:center;color:var(--color-muted-bright);font-size:1.125rem}.footer-col a:hover{color:var(--color-gold-bright)}.footer-social-link{flex-wrap:wrap;gap:.3rem}.footer-social-icon{width:17px;height:17px;flex:0 0 auto;color:inherit}.footer-social-link strong{font:inherit;font-weight:inherit}.footer-bottom{display:flex;align-items:center;justify-content:center;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--color-border);text-align:center}.site-footer__brand{display:flex;align-items:center;justify-content:center;gap:.35rem;color:var(--color-subtle);font-size:.8rem}.brand-inline{font-family:var(--font-wordmark);color:var(--color-gold)}

@keyframes footer-brand-glow{0%,10%,100%{color:#d4aa43;text-shadow:none}3%,7%{color:#f0d07a;text-shadow:0 0 10px rgba(203,161,53,.25)}}

.button--notify{width:100%;background:var(--color-gold);color:#111}.button--notify:hover{background:var(--color-gold-bright)}
.product-card--unavailable{border-color:rgba(203,161,53,.45)}.product-card__status{display:inline-flex;align-self:flex-start;margin:.15rem 0 .65rem;padding:.25rem .55rem;border-radius:999px;background:rgba(203,161,53,.12);color:var(--color-gold-bright);font-size:.875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.waitlist-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:1rem;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s,visibility .2s}.waitlist-modal.is-open{visibility:visible;opacity:1;pointer-events:auto}.waitlist-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}.waitlist-modal__panel{position:relative;width:min(100%,520px);max-height:calc(100vh - 2rem);overflow:auto;padding:clamp(1.5rem,4vw,2.25rem);border:1px solid rgba(203,161,53,.5);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card)}.waitlist-modal__panel h2{margin:.2rem 2rem .75rem 0;font-size:clamp(1.8rem,5vw,2.5rem)}.waitlist-modal__panel p{color:var(--color-muted)}.waitlist-modal__close{position:absolute;top:.75rem;right:.75rem;display:grid;width:44px;height:44px;place-items:center;border:0;background:transparent;color:var(--color-text);font-size:1.75rem;cursor:pointer}.waitlist-form{display:grid;gap:.75rem;margin-top:1.25rem}.waitlist-form label{font-weight:700}.waitlist-form input{min-height:48px;width:100%;padding:.75rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-field);color:var(--color-text)}.waitlist-form input:focus{border-color:var(--color-gold);outline:2px solid rgba(203,161,53,.25)}.waitlist-form__trap{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.waitlist-form__status{min-height:1.5em;margin:0;font-weight:700}.waitlist-form__status.is-success{color:var(--color-success)}.waitlist-form__status.is-error{color:var(--color-error)}.waitlist-form__privacy{margin:0;font-size:.78rem}.waitlist-form__privacy a{color:var(--color-gold-bright);text-decoration:underline}body.waitlist-modal-open{overflow:hidden}

@media(min-width:1024px){.topnav{display:block}.hamburger{display:none}.nav-actions{margin-left:1rem}}
@media(max-width:1023px){.cart-icon{width:90px;height:64px}}  /* larger cart icon on mobile, sized to fit the 72px nav */
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem}.footer-col--brand{grid-column:1/-1;text-align:center}.footer-brand-copy{margin-inline:auto}.footer-col--brand>.footer-mobile-divider{margin-inline:auto}}
@media(max-width:600px){.legal-document{padding-inline:1.1rem}.legal-document__header h1{font-size:2.5rem}.legal-section h2{font-size:1.45rem}.legal-actions{grid-template-columns:1fr}.legal-action{width:100%}.site-footer__inner{padding-top:2.5rem}.footer-brand-mark img{width:203px}.cd-panel{width:100vw;border-left:0}.brand__title{font-size:1.45rem}}
@media(max-width:380px){.product-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.footer-brand-copy strong{animation:none}}


/* Marketing email capture — shared footer form */
.footer-signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);align-items:center;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.5rem;padding:2rem 0;border-top:1px solid var(--color-border)}
.footer-signup__copy h4{margin:0 0 .4rem;color:var(--color-gold);font:600 clamp(1.45rem,2.4vw,1.9rem)/1.05 var(--font-serif)}
.footer-signup__copy p{max-width:34rem;margin:0;color:var(--color-subtle);font-size:1.1rem;line-height:1.6}
.marketing-form{display:grid;gap:.6rem}
.marketing-form__row{display:flex;gap:.55rem}
.marketing-form input[type=email]{min-width:0;flex:1;min-height:46px;padding:.72rem .85rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-field);color:var(--color-text)}
.marketing-form input[type=email]:focus{border-color:var(--color-gold);outline:2px solid rgba(203,161,53,.22)}
.marketing-form button{flex:0 0 68px;width:68px;min-height:46px;padding:.65rem .45rem;border:1px solid var(--color-gold);border-radius:var(--radius-sm);background:var(--color-gold);color:#111;font-size:.73rem;font-weight:800;letter-spacing:.06em;cursor:pointer}
.marketing-form button:hover{background:var(--color-gold-bright)}
.marketing-form button:disabled{opacity:.55;cursor:wait}
.marketing-form__status{min-height:1.35em;margin:0;color:var(--color-subtle);font-size:.75rem;line-height:1.45}
.marketing-form__status.is-success{color:var(--color-success)}.marketing-form__status.is-error{color:var(--color-error)}
.marketing-form__trap{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}
@media(max-width:700px){.footer-signup{grid-template-columns:1fr;text-align:center}.footer-signup__copy p{margin-inline:auto}.marketing-form{max-width:34rem;width:100%;margin-inline:auto}.footer-signup .marketing-form{min-width:0;margin-block:0}.footer-signup .marketing-form__row{min-width:0}.footer-bottom{margin-top:0}}