/* ==========================================================================
   NATIONAL SHIELD — shared site menu bar
   One stylesheet, loaded last on every page, so the header can never drift
   between Shop and Socials. All values are absolute px (no rem, no custom
   properties) so it renders identically regardless of each page's own
   root font-size or variable set.
   ========================================================================== */

.announcement-bar,
.header-wrapper{
  width:100%;
  align-self:stretch;
  flex:0 0 auto;
}

.announcement-bar{
  box-sizing:border-box;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(9px + env(safe-area-inset-top)) 20px 9px;
  text-align:center;
  background:#f5efe0;
  color:#4b3f2c;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.3;
  /* uppercase micro-type needs real tracking; text-indent re-centres against the
     trailing letter-space so the line stays optically centred. */
  letter-spacing:.12em;
  text-indent:.12em;
  text-transform:uppercase;
}

.announcement-bar .globe{
  display:inline-block;
  letter-spacing:0;
  text-indent:0;
  margin-left:.36em;
  font-size:1.05em;
  vertical-align:-.06em;
}

/* In the footer this bar is a mid-page separator, not the top of the screen,
   so it doesn't need to reserve room for the status bar. */
.footer .announcement-bar{
  padding-top:9px;
}

.header-wrapper{
  position:relative;
  z-index:40;
  background:#fff;
  border-bottom:1px solid rgba(18,18,18,.10);
  /* The bar that used to sit above the header (and absorb the iPhone notch)
     now lives in the footer as a separator. The header is the first element
     on the page, so it takes over that inset itself. */
  padding-top:env(safe-area-inset-top);
}

.header{
  box-sizing:border-box;
  max-width:1700px;
  min-height:76px;
  margin:0 auto;
  padding:12px 55px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
}

/* ---- centre: brand mark ---- */
.site-title{
  grid-column:2;
  justify-self:center;
  margin:0;
  padding:0;
  font-size:0;
  line-height:1;
}
.site-title a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  border-radius:999px;
  text-decoration:none;
  transition:opacity .18s ease,transform .18s ease;
}
.site-title a:hover{opacity:.82;transform:translateY(-1px)}
.site-title a:focus-visible{outline:2px solid #121212;outline-offset:2px}
/* Brand slot was a 54px square built for the old N mark. The National Shield
   lockup is 6.3:1, so the slot is now width-auto and the logo sets its own
   proportions. */
.brand-mark{
  /* width:auto and flex:0 0 auto are load-bearing: index.html still pins these
     to a 5.4rem square and flex-basis 4rem for the old N mark, and without
     overriding them here the lockup gets squashed to 40px wide. */
  width:auto;
  height:48px;
  display:inline-flex;align-items:flex-start;justify-content:center;
  border:0;background:transparent;
  padding-top:3px;
}
.brand-logo{
  display:block;
  height:100%;
  width:auto;
  flex:0 0 auto;
  object-fit:contain;
  transition:transform .18s ease;
}
/* Two versions of the same logo. The full lockup needs roughly 170px of
   centre column, which a phone header does not have once the nav and cart
   have taken their share — at that width the wordmark would be about 5px
   tall and illegible. Below 750px the shield glyph shows on its own instead.
   Only one is ever in the layout, so nothing shifts. */
/* Visually hidden, still read by screen readers and indexed. Used for the
   page headings that are no longer shown. */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Shop hero is a single gold line now, so it sits centred in the hero band
   instead of being pushed down by the 7rem top padding that used to make
   room for the NATIONAL SHIELD headline beneath it. */
.hero-content{
  justify-content:center;
  padding-top:0;
  padding-bottom:0;
}
.hero-content .hero-eyebrow{margin:0}

.brand-lockup{width:194px}
.brand-glyph{display:none}
@media(max-width:749px){
  .brand-lockup{display:none}
  .brand-glyph{display:block;width:auto}
}
.site-title a:hover .brand-logo{transform:scale(1.04)}

/* ---- left: navigation ---- */
.site-nav{
  grid-column:1;
  justify-self:start;
  display:flex;
  align-items:center;
  gap:2px;
  min-width:0;
}
.site-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 15px;
  border-radius:999px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  color:rgba(18,18,18,.56);
  transition:color .18s ease,background-color .18s ease;
}
.site-nav a:hover{color:#121212;background-color:rgba(18,18,18,.05)}
.site-nav a[aria-current="page"]{color:#121212}
.site-nav a[aria-current="page"]::after{
  content:"";
  position:absolute;left:15px;right:15px;bottom:9px;
  height:1.5px;border-radius:999px;background:#121212;
}
.site-nav a:focus-visible{outline:2px solid #121212;outline-offset:2px}

/* ---- right: cart ---- */
.header-actions{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  white-space:nowrap;
}
.header-control{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border:1px solid rgba(18,18,18,.12);
  border-radius:999px;
  background:#fff;
  box-shadow:0 5px 18px rgba(18,18,18,.06);
  color:#2f2f2f;
  text-decoration:none;
  cursor:pointer;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.header-control:hover{
  box-shadow:0 8px 22px rgba(18,18,18,.10);
  border-color:rgba(18,18,18,.18);
  transform:translateY(-1px);
}
.header-control:focus-visible{outline:2px solid #121212;outline-offset:2px}
.cart-control{width:44px;padding:0;flex:0 0 44px}
.cart-control svg{width:22px;height:22px;stroke-width:1.8}
.cart-count{
  position:absolute;right:-3px;top:-4px;
  min-width:17px;height:17px;
  display:none;align-items:center;justify-content:center;
  border-radius:999px;background:#121212;color:#fff;
  font-size:10px;line-height:1;border:2px solid #fff;
}
.cart-count.show{display:flex}

/* ---- breakpoints (mirrors the store's own 989 / 749 steps) ---- */
@media(max-width:989px){
  .header{padding-left:30px;padding-right:30px}
  .header-actions{gap:9px}
  .site-nav a{padding:0 11px;font-size:11.5px}
  .site-nav a[aria-current="page"]::after{left:11px;right:11px}
}

@media(max-width:749px){
  .announcement-bar{min-height:35px;font-size:11px}
  .header{min-height:68px;padding:11px 15px;gap:10px}
  .site-title a{padding:3px}
  .brand-mark{height:40px;padding-top:2px}
  .site-nav{gap:0}
  .site-nav a{min-height:40px;padding:0 8px;font-size:10.5px;letter-spacing:.5px}
  .site-nav a[aria-current="page"]::after{left:8px;right:8px;bottom:7px}
  .header-control{min-height:40px}
  .cart-control{width:40px;flex-basis:40px}
  .cart-control svg{width:20px;height:20px}
}

@media(max-width:360px){
  .header{padding-left:10px;padding-right:10px;gap:6px}
  .site-nav a{padding:0 6px;font-size:10px;letter-spacing:.3px}
  .site-nav a[aria-current="page"]::after{left:6px;right:6px}
}

@media(prefers-reduced-motion:reduce){
  .site-title a,.brand-logo,.site-nav a,.header-control{transition:none}
}

/* ============================================================
   SITE POLISH LAYER
   menu.css loads after each page's inline <style>, so these
   refinements win on equal specificity without touching the
   original rules. Heading selectors are scoped to shop-page
   classes, so socials.html keeps its own dark treatment.
   ============================================================ */

:root{
  /* Display face carries the author identity and matches the
     NATIONAL SHIELD wordmark on the socials page. */
  --font-display:"Playfair Display","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  /* Body face replaces the Arial system default sitewide. */
  --font-body:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* The shop already unifies most controls to 2rem via an !important
     rule. Matching that value here brings the one straggler
     (.checkout-submit, previously 1.2rem) into the same system. */
  --r-control:2rem;
  --ease:cubic-bezier(.2,.6,.3,1);

  /* Colour system. These exact values are the socials.html --bg1/--bg2/--gold
     tokens — copied here rather than duplicated with drift, so the dark hero
     on Home and the dark stage on Socials are the same material, not two
     approximations of "dark navy" arrived at separately. */
  --ink:#0d111a;
  --ink-mid:#151b28;
  --ink-deep:#07090e;
  --gold:#d9b36a;
  --gold-bright:#f2d58e;
  --cream:#f8f3e8;
  /* Replaces a plain mint "shipping trust badge" green with a parchment tone —
     ties the one banner every page shares back to the book/doctrine material
     instead of a leftover template colour. */
  --parchment:#f5efe0;
  --parchment-ink:#4b3f2c;
}

body{
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.announcement-bar,
.site-nav a{font-family:var(--font-body)}

/* Display face on page-level headings only. Product cards, prices
   and UI chrome stay sans so shopping information stays legible. */
.hero-content h1,
.product-info-page h1,
.policy-card h1,
.checkout-heading{
  font-family:var(--font-display);
  font-weight:700;
}

/* Serif uppercase needs tracking; the tight negative tracking that
   suited the old grotesque closes up the serifs. */
.hero-content h1{letter-spacing:.03em}
.product-info-page h1{letter-spacing:-.005em}
.policy-card h1{letter-spacing:-.005em}

/* --- Controls -------------------------------------------------
   The three primary buttons previously used three different radii
   (1.9rem / 1.2rem / square). One control radius reads deliberate. */
.button,
.add-to-cart,
.checkout-submit{
  border-radius:var(--r-control);
  font-family:var(--font-body);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),opacity .18s var(--ease);
}
.button:hover,
.add-to-cart:hover,
.checkout-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(18,18,18,.17);
}
.button:active,
.add-to-cart:active,
.checkout-submit:active{
  transform:translateY(0);
  box-shadow:none;
}
/* --- Shopping actions: green --------------------------------------
   Green now covers the whole shopping path, not only the money step:
     "Add to cart"            -> green
     drawer "Check out"       -> green
     "Pay securely with Stripe" -> green
     "Continue shopping"      -> green (empty-cart drawer)
   Still excluded, on purpose:
     "Back to store"          -> navigation out of an empty cart / policy
                                 page, not a shopping action
     .app-download-button     -> carries .add-to-cart for its shape, but
                                 downloads a free app rather than buying */
.add-to-cart:not(.app-download-button),
.checkout-submit,
.drawer-footer .button,
.drawer-body .empty .button{
  background:linear-gradient(180deg,#1e8c57,#14663f);
  color:#fff;
  border:.1rem solid rgba(0,0,0,.16);
}
.add-to-cart:not(.app-download-button):hover,
.checkout-submit:hover,
.drawer-footer .button:hover,
.drawer-body .empty .button:hover{
  background:linear-gradient(180deg,#219560,#156a41);
  box-shadow:0 10px 26px rgba(20,102,63,.42);
}
/* Add to cart used to draw a .2rem outline offset .3rem from the button on
   plain hover — a ring floating off the edge, stacking with the lift and the
   green glow. Rings are for keyboard focus, not for the mouse: the outline is
   off for hover and for mouse-focus, and keyboard users still get the
   :focus-visible ring from the quality-floor rule further down. */
.add-to-cart:hover,
.add-to-cart:focus{
  outline:none;
}
.add-to-cart:focus-visible{
  outline:.2rem solid #14663f;
  outline-offset:.3rem;
}
/* The hover was also doing three things at once (lift + dark generic shadow
   from the shared .button rule + a big saturated green glow). One soft green
   shadow reads as a press-ready button instead of a floating slab. */
.add-to-cart:not(.app-download-button):hover,
.checkout-submit:hover,
.drawer-footer .button:hover,
.drawer-body .empty .button:hover{
  box-shadow:0 .6rem 1.6rem rgba(20,102,63,.28);
}
.add-to-cart:not(.app-download-button):active,
.checkout-submit:active{
  box-shadow:0 .2rem .6rem rgba(20,102,63,.24);
}

/* --- Footer block ---------------------------------------------
   The links + copyright close the page on the same dark field used
   by the shop hero and the socials page, instead of plain white.
   .footer-inner is width-constrained (1200/900px), so the colour is
   bled edge-to-edge with a spread shadow; the clip-path keeps that
   spread horizontal only, so it can't leak above or below the block. */
/* The policies + copyright block no longer paints anything of its own.
   It used to be a flat #0d111a rectangle bled edge-to-edge with a 100vw
   spread shadow — a different fill from the gradient field above it, which
   is exactly where the seam came from. It is transparent now and the page
   gradient (on body) shows through it. */
.footer-inner{
  background:transparent;
  box-shadow:none;
  clip-path:none;
  color:#b6b1a8;
  /* The home-indicator inset is reserved once, by .footer further down.
     It used to be added here as well — calc(4.8rem + env(...)) here plus
     env(...) again on .footer — so an iPhone got the 34px inset twice on top
     of the 48px, leaving a long empty gap under the copyright. */
  padding-bottom:4.8rem;
}
/* Policy links: stepped back from full white so they read as fine print
   rather than as primary navigation, and pushed further down the page.
   They were #fff, which on the dark field carried as much weight as the
   product titles above them. 58% cream keeps them comfortably legible while
   letting the eye pass over them; hover restores full cream so they still
   feel interactive.
   This is a deliberate reversal of the earlier "make them white" change —
   that request was about the phone matching the desktop, which it still
   does: both ends move together. */
.footer-inner .policies a{color:rgba(248,243,232,.58)}
.footer-inner .policies a:hover{color:#f8f3e8}

/* Extra breathing room above the links, so the block sits lower and reads
   as separate from the content rather than attached to it. */
.footer-inner{padding-top:6rem}
@media(max-width:749px){
  .footer-inner{padding-top:4.4rem}
  /* 4.8rem of tail is desktop proportion; on a phone it reads as a hole
     between the copyright and the end of the page. The home-indicator inset
     is still reserved separately by .footer. */
  .footer-inner{padding-bottom:2rem}
}
@media(max-width:749px){
  /* Breathing room between the last price and the shipping banner.
     The gap is .collection's padding-bottom minus .shop-intro's -1.8rem
     negative margin (which pulls the footer up over the dark field), so the
     effective space was 5 - 1.8 = 3.2rem. 9rem here makes it 7.2rem, so the
     prices stop reading as if they belong to the parchment bar below them. */
  .collection{padding-bottom:9rem}
}/* --- Product cards --------------------------------------------
   Price and title were nearly the same weight and size, so the
   card had no focal point. */
.product-title{font-size:1.4rem;line-height:1.45}
.price{font-weight:700;color:var(--gold)}

/* --- Footer ---------------------------------------------------
   Seven equally-underlined links read as noise; the underline now
   sits back until hover. */
.policies a{
  text-decoration-color:rgba(18,18,18,.28);
  transition:text-decoration-color .18s var(--ease);
}
.policies a:hover{text-decoration-color:currentColor}

/* --- Quality floor --------------------------------------------
   No page had a visible keyboard focus state. currentColor keeps
   the ring legible on both the white shop and the dark socials page. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:4px;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ============================================================
   HARMONY LAYER
   Three systems the pages had drifted out of: type weight,
   corner radius, and the muted greys. Fixed here so Shop and
   Socials resolve to the same values instead of each page
   carrying its own near-miss.
   ============================================================ */

/* --- Type weight ----------------------------------------------
   Instrument Sans ships 400-700. Everything asking for 800 or 900
   was being faux-bolded by the browser: the glyphs get smeared
   outward, so those elements looked heavier, blurrier and slightly
   wider than the 700 text beside them. That mismatch is a large
   part of what read as "unharmonious". 700 is the real weight. */
.app-card-badge,
.app-title,
.app-price,
.app-cta,
.app-feature-chip,
.app-download-button,
.free-badge,
.free-badge-icon,
.app-page-badge,
.checkout-section-title,
.checkout-submit,
.summary-title,
.summary-total,
.summary-name,
.summary-price,
.price{font-weight:700!important}

/* The one 900-weight heading that wasn't on the display face.
   Product titles and policy titles are already Playfair; this
   makes the app pages open the same way. */
.app-info-page h1{
  font-family:var(--font-display)!important;
  font-weight:700!important;
  letter-spacing:-.005em!important;
}

/* --- Corner radius --------------------------------------------
   The pages were using ~14 different radii (.6 / 1 / 1.4 / 1.5 /
   1.6 / 1.8 / 1.9 / 2 / 2.2 / 2.4 / 2.8 / 3 / 3.2rem). Four steps
   is enough, and repetition is what makes a radius read as a
   decision rather than an accident. */
:root{
  --r-sm:1.2rem;   /* thumbnails, small chips */
  --r-md:2rem;     /* buttons, selects, inputs */
  --r-lg:2.4rem;   /* cards, product media */
  --r-xl:3rem;     /* large frames, panels */
}
.checkout-field input,
.checkout-field select,
.qty button,
.delivery-info,
.cart-row img,
.summary-thumb{border-radius:var(--r-sm)!important}
.select-wrap select,
.app-feature-chip,
.quick-add button{border-radius:var(--r-md)!important}
.app-media,
.app-icon-shell,
.app-card{border-radius:var(--r-lg)!important}
.checkout-panel,
.checkout-summary,
.app-gallery{border-radius:var(--r-xl)!important}

/* --- Muted greys ----------------------------------------------
   Three different "muted" values were in play (#cfc5b1, #b6b1a8,
   rgba(248,243,232,.58)). One value, used everywhere it's needed. */
.footer-inner{color:#b6b1a8}
.app-subtitle,
.app-page-subtitle,
.app-description p,
.checkout-note,
.summary-meta,
.policy-card .updated{color:#5b564e}

/* --- Page ends: colour, not suppression -----------------------
   The white band under the footer had one cause: body was #fff, so every
   region not covered by an actual element fell through to white — the band
   behind Safari's floating toolbar, the home-indicator inset, and the area
   revealed by the rubber-band bounce.

   Fixing the colour rather than suppressing the movement means the bounce
   can stay on. The canvas (html) and body are both navy, so overscrolling at
   either end reveals the site's own dark colour.

   Also kept: min-height:100svh. iOS resolves 100vh to the toolbar-HIDDEN
   height, so a body pinned to 100vh is taller than the screen the whole time
   the address bar is showing — a phantom scroll separate from the bounce.
   100svh is the toolbar-VISIBLE height, so the body stops at the screen. */
/* No background is set here on purpose: socials.html paints its html canvas
   as a deliberate white-top / dark-bottom split so iOS tints the status bar
   correctly, and menu.css loads last — a background here would win and undo
   it. The shop and policy pages already set html{background:#0d111a} inline.

   overscroll-behavior is deliberately NOT set: the rubber-band bounce at the
   ends of the page is left switched on. It was only ever disabled to hide the
   white that appeared underneath the footer, and that white is now fixed at
   source — the canvas and body are both navy, so the bounce reveals the
   site's own dark colour at either end instead of a bare white gap. */
body{
  /* iOS resolves 100vh to the toolbar-HIDDEN height, so a body pinned to
     100vh is taller than the screen the whole time the address bar shows.
     That surplus is the phantom scroll, and what it exposed underneath the
     footer was the body's own white. 100svh is the toolbar-VISIBLE height. */
  min-height:100svh;
  overflow-x:hidden;

  /* THE white strip under the footer.
     body was #fff, so every region not covered by an actual element — the
     band behind Safari's floating toolbar, the home-indicator inset, anything
     past the last element — fell through to white. Flipping body to the site's
     navy means the default state of any uncovered pixel is dark, instead of
     depending on which layer iOS decides to sample.

     The gradient that used to live on .shop-intro now lives here, so the
     "WELCOME TO THE SHOP" field runs the full height of the document instead
     of stopping where the product grid ends. background-color stays #0d111a
     as the solid fallback, so the white-strip fix above is unaffected.
     Deliberately NOT background-attachment:fixed — a fixed background only
     paints the viewport box, which is what left socials' safe-area strip
     white before. */
  background-color:#0d111a;
  background-image:
    radial-gradient(circle at 50% 0,rgba(242,213,142,.13),transparent 36%),
    radial-gradient(circle at 6% 96%,rgba(55,79,122,.15),transparent 40%),
    linear-gradient(168deg,#0d111a 0%,#151b28 30%,#0b1018 68%,#07090e 100%);
  background-repeat:no-repeat;
}

/* Both of these had their own dark fill, each a slightly different one from
   the gradient — that mismatch was the visible seam. Transparent now, so the
   single field on body shows through unbroken from the header to the very
   bottom of the page. */
.shop-intro{background:transparent}
.footer{background:transparent}

/* main is painted white further up so product, checkout and policy pages keep
   their white content area. On the HOME view that white sits directly behind
   the now-transparent .shop-intro, which would turn the whole shop page white.
   The home view is the one place main must stay transparent so the body
   gradient is what shows. */
/* (The home view is now excluded directly in the white-background rule
   below. It used to be handled by a separate transparent override here,
   which was a specificity accident waiting to happen — and did happen: adding
   :not(.policy-page) to that rule took it to two classes, outranking this
   one's single class, and the shop page turned white.) */

/* Shipping banner: shown on product and checkout views, hidden on the home
   view. body.is-home is set by route() in index.html. */
body.is-home .footer .announcement-bar{display:none}

/* body is now dark, so the pages that genuinely need a white content area
   have to declare it rather than inherit it. This is every <main> except the
   socials page, whose main is the .wrap card sitting on the dark stage.
   On the shop home main is filled edge to edge by .shop-intro's own dark
   gradient, so this white never shows there either. */
/* White content area for the views that need it, stated as one rule with
   every exclusion in it, so nothing depends on two selectors out-ranking
   each other:
     .is-home      — shop landing: the dark gradient must show through
     .wrap         — socials: its main is the card on the dark stage
     .policy-page  — policy pages: .policy-card is the white surface there
   What is left is exactly the product and checkout views. */
body:not(.is-home) main:not(.wrap):not(.policy-page){
  background:#fff;
}

/* --- Shop + product pages: white field, tight dark band under the header ---
   The full-page navy gradient (on body, further up) used to run behind the
   Shop hero and the whole product grid below it, all the way to the footer.
   Shop and product pages are white now instead: body.is-home overrides the
   shared body gradient with a flat white fill, and the dark treatment is
   confined to .hero-home itself — the band directly under the menu bar —
   fading out to white by the bottom of the hero instead of continuing down
   through the products. Product/checkout pages were already white via the
   main rule above; this just removes the navy body colour bleeding in behind
   them at the edges. */
/* menu.css loads last, so its shared body{background:navy + gradients} rule
   further up beats each page's own inline body background. Shop/product and
   socials are white pages now, so they opt out of it here — otherwise the navy
   shows through any gap and in the overscroll tail at either end. */
body.shop-site,
body.socials-site,
body.policy-site{
  background:#fff;
  background-image:none;
}
/* Hero band removed entirely: no gradient, no "Welcome to the shop" line.
   The band collapses to zero height so the product grid sits just under the
   menu bar. .hero-content is position:absolute, so the visually-hidden <h1>
   inside it stays in the DOM (and in the accessibility tree / for SEO) even
   though the band takes no space. */
.hero-home{
  height:0;
  min-height:0;
  background:none;
}
.hero-eyebrow{display:none}
/* .collection carried margin-top:-4.5rem to overlap the grid into the old
   dark hero. With the hero gone that negative pull would tuck the products
   under the header, so it becomes real top spacing instead. */
.collection{margin-top:3.2rem}
@media(max-width:749px){
  .collection{margin-top:2.4rem}
}
/* Product titles/cards were styled cream-on-navy for the old full-page
   gradient. The grid now sits on white below the tight hero band, so the
   near-white title text and the navy-tuned drop shadow need to switch to
   dark-on-white. */
.product-title{color:#1a1a1a}
/* Phone: one product per row, centred. The grid dropped from four columns to
   two at 989px and stayed at two on a phone, which made each card about half a
   narrow screen wide. One column at 749px, with the card capped so it doesn't
   run edge to edge on a large phone and stays centred in the column. */
@media(max-width:749px){
  .product-grid{
    grid-template-columns:minmax(0,1fr);
    justify-items:center;
  }
  .product-grid > li{
    width:100%;
    max-width:34rem;
  }
}

/* Size select: the value sat left-aligned against a 2rem pad while the label
   above it and everything else in the column is centred. text-align:center on
   the select centres the closed value; padding is symmetric so the chevron on
   the right no longer pulls the text off-centre. */
.select-wrap select{
  text-align:center;
  text-align-last:center;
  padding-left:4rem;
  padding-right:4rem;
}
.select-wrap select option{text-align:center}
/* Prices were gold, tuned for the old dark field. Black on the white grid. */
body.shop-site .price,
body.shop-site .product-info-page .product-price{color:#121212}
.product-media{box-shadow:0 1.4rem 3.2rem rgba(18,18,18,.12),0 0 0 .1rem rgba(18,18,18,.06)}
/* Footer policy links were cream-on-navy. The shop/product footer is white
   now, so they read as black there. Socials and the policy pages keep their
   dark footer treatment, so this is scoped to .shop-site. */
body.shop-site .footer-inner,
body.policy-site .footer-inner{color:#3a3a3a}
body.shop-site .footer-inner .policies a,
body.policy-site .footer-inner .policies a{color:#121212}
body.shop-site .footer-inner .policies a:hover,
body.policy-site .footer-inner .policies a:hover{color:#000}
/* The policy pages' parchment shipping banner sat on a dark field; on white it
   is the only coloured block left, so it goes too. */
body.policy-site .footer .announcement-bar{display:none}
/* The card was a white slab lifted off a dark gradient with a heavy shadow.
   On a white page there is nothing to lift off, so the shadow becomes a grey
   smear — a hairline rule does the separating instead. */
/* No frame at all: the card only existed to separate a white document from the
   dark page behind it. The page is white now, so the border, the shadow and the
   rounded corners were drawing a box around nothing. The text sits directly on
   the page and the padding alone sets the measure. */
body.policy-site .policy-card{
  box-shadow:none;
  border:0;
  border-radius:0;
  background:transparent;
  padding-left:0;
  padding-right:0;
}
/* Body copy was #3b3b3b and the "last updated" line a warm grey — both tuned
   for a card floating on navy. Black on white now. */
body.policy-site .policy-card p,
body.policy-site .policy-card li{color:#1a1a1a}
body.policy-site .policy-card .updated{color:#4a4a4a}
/* Watermark N behind the hero: it was the old brand mark, and it shows
   through the tight gradient band. Removed. */
.hero-mark{display:none}

/* --- Policy pages -------------------------------------------------
   These pages (About, Contact, Privacy, Terms, Shipping, Refunds) were
   designed as a light document: gold eyebrow, Playfair headings, ink body
   text on white. When body became dark for the gradient work, the white fill
   landed on <main> — a 920px column with square edges and no margin — so the
   text sat on a hard white slab stamped onto the dark page.

   The fix is to let the content be an actual card again: main goes back to
   transparent and .policy-card becomes the white surface, rounded and lifted
   off the gradient. Everything inside it was already built for a light
   background and is untouched.

   Scoped entirely to .policy-page / .policy-card, which exist only on these
   six pages — the shop, socials and product views cannot be reached by any
   of this. */
main.policy-page{
  background:transparent;
}
.policy-card{
  max-width:84rem;
  margin:0 auto;
  padding:5.6rem 6rem 6.4rem;
  background:#fff;
  border-radius:2.4rem;
  box-shadow:0 2.4rem 6rem rgba(0,0,0,.34);
}
@media(max-width:989px){
  .policy-card{padding:4.4rem 3.6rem 5rem}
}
@media(max-width:749px){
  .policy-card{padding:3.2rem 2rem 3.6rem;border-radius:1.8rem}
}
/* The dark band behind the footer is painted by a 100vw spread shadow on
   .footer-inner. Painting .footer itself dark too means a rounding gap, a
   safe-area inset or a stubborn overscroll can only ever reveal more dark. */
.footer{
  /* No background: the page gradient on body runs through here uninterrupted.
     This used to be a flat #0d111a, which is what broke continuity with the
     gradient field above it. */
  padding-bottom:env(safe-area-inset-bottom);

  /* .footer carried padding-top:2.4rem (1.8rem on phones), and .shop-intro
     carried an exactly equal NEGATIVE bottom margin to cancel it — the two
     were a matched pair, so on the home page the banner sat flush against the
     dark field and the padding was never visible.
     Giving .footer a dark background made that padding visible for the first
     time, and product and policy pages have no .shop-intro to cancel it: the
     result was a dark bar hanging above the parchment banner on a white page.
     Zeroing both halves of the pair removes the bar and leaves the home page
     pixel-identical, since +2.4 and -2.4 cancelled to nothing anyway. */
  padding-top:0;
}
.shop-intro{
  margin-bottom:0;
}

/* The fixed dark strip that used to sit across the bottom safe area has been
   removed. It was a workaround for the white showing through there, and that
   is now handled properly by body being navy. Keeping it would have been
   actively wrong once the bounce is back: being position:fixed, it stayed
   pinned to the bottom of the screen, so on a white product page scrolled to
   the middle it read as a dark bar lying across the content. */

/* --- Rhythm ---------------------------------------------------
   Section padding stepped 2.2 / 2.4 / 2.6 / 3 / 3.2rem with no
   pattern. Snapped to the same scale the rest of the page uses. */
.checkout-panel{padding:3.2rem}
.checkout-summary{padding:2.4rem}
@media(max-width:749px){
  .checkout-panel,
  .checkout-summary{padding:2rem}
}