/* R&K Designs — design system
   Layout concept: a saddle-shop workbench. Dark tooled-leather bands carry the hero and
   calls to action; light "veg-tan" sections carry products. Saddle-stitch dashed borders
   mark anything you can order. */
/* Self-hosted Google Fonts (latin subset). Libre Franklin is variable: one file, every weight. */
@font-face { font-family: "Ultra"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ultra-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rye"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/rye-400.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/libre-franklin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dm-mono-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/dm-mono-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Great Vibes (OFL, from @fontsource/great-vibes 5.2.8, latin): the Engraving Builder's script lettering. Only fetched
   when something is set in it, so other pages never download it. */
@font-face { font-family: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/great-vibes-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --espresso: #1c130e;
  --espresso-2: #2a1c14;
  --saddle: #6b3a1e;
  --rust: #a4532c;
  --rust-ink: #8a4120;
  --natural: #d2a578;
  --hide: #f4ebdd;
  --paper: #fbf7f0;
  --ink: #23170f;
  --muted: #5a4434;   /* was #6c5646: small hints on the textured veg-tan panels fell under 4.5:1 (Draft 2) */
  --line: #e0cfb8;
  --on-dark: #f4e8d6;
  --on-dark-muted: #c7ae94;
  --ok: #3d6b3a;
  --warn: #9a5b00;
  --bad: #a3302a;

  /* western display face (Kelsey, 7 Oct 2026). Ultra is no longer in the stack: while Rye loaded, Chrome fetched
     it as the stand-in on every page (the end of the longest request chain), and Rye covers every glyph we use. */
  --display: "Rye", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  --body: "Libre Franklin", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step--1: clamp(.84rem, .8rem + .15vw, .92rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.1rem + .45vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + .9vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
  --step-4: clamp(2.4rem, 1.7rem + 3.2vw, 4.3rem);

  --gutter: clamp(16px, 4vw, 40px);
  --space: clamp(56px, 6vw + 24px, 112px);
  --radius: 10px;
  /* One lamp, upper left: every shadow falls down and to the right (sideways ≈ .4 × down), tinted espresso. */
  --shadow: 1px 2px 2px rgb(35 23 15 / .10), 4px 10px 22px -6px rgb(35 23 15 / .18);
  --shadow-lg: 2px 3px 4px rgb(35 23 15 / .14), 10px 24px 46px -12px rgb(35 23 15 / .32);
  --nav-h: 72px;
  --line-strong: #a3896f;   /* control borders: 3:1 on white (WCAG 1.4.11) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  color-scheme: light;      /* keep phone "auto dark" from inverting the leather palette */
}
@view-transition { navigation: auto; }   /* page-to-page crossfade in browsers that support it */
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.65 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rust-ink); text-underline-offset: .18em; }
a:hover { color: var(--saddle); }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: .005em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 6px; z-index: 100; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: calc(var(--space) + var(--head, 0px)) var(--space); }
.stack { display: grid; gap: 16px; }
.eyebrow { font: 500 var(--step--1)/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rust-ink); }
.lede { font-size: var(--step-1); color: var(--muted); max-width: 58ch; line-height: 1.5; }
.section-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 720px; }
/* Draft-only "waiting on Kelsey" badge. The cream backplate keeps it readable on any panel, dark or textured (5:1). */
.tbd { display: inline-block; font: 500 .72rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--warn); background: rgb(255 248 236 / .9); border: 1px dashed currentColor; border-radius: 4px; padding: 2px 6px; vertical-align: middle; text-shadow: none; }

/* ---------- Dark leather band ---------- */
.band { background: var(--espresso); color: var(--on-dark); position: relative; isolation: isolate; }
.band::before { /* her paisley tooling, faint, like a tooled saddle skirt: the lines catch the lamp a little */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; pointer-events: none;
  background: url("/img/tooling-600.webp") center / 420px auto repeat; filter: invert(1) sepia(.6);
}   /* no mix-blend-mode: at 9% over dark leather, screen and normal differ by under 1%, and the blend cost paint on every scroll */
.band .eyebrow { color: var(--natural); }
.band .lede { color: var(--on-dark-muted); }
.band .next-tier { color: var(--natural); }   /* the price-break nudge on the dark home bulk panel; --ok green is for light panels */
.band a:not(.btn) { color: var(--natural); }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--rust); --f: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 8px; border: 2px solid var(--b);
  background: var(--b); color: var(--f); font: 600 1rem/1 var(--body); text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { --b: var(--saddle); color: var(--f); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.band .btn.ghost { color: var(--on-dark); border-color: var(--on-dark-muted); }
.band .btn.ghost:hover { background: var(--on-dark); color: var(--espresso); border-color: var(--on-dark); }
.btn.small { min-height: 44px; padding: 8px 14px; font-size: .9rem; }   /* 44px: Kelsey's dashboard buttons are tapped on a phone */
.btn.block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ----------
   No hard lines (Joe, 8 Oct 2026): the header itself is transparent; its .wrap is a floating leather pill,
   saddle-stitched inside its edge, hovering 10px below the top of the window. --nav-h (72px) is the whole
   header, gap included, so main is pulled up under it (see LEATHER BENCH at the end of this file). */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--nav-h); color: var(--on-dark); pointer-events: none;
  /* a notched phone held sideways: the pill clears the notch on either side */
  padding: 10px max(clamp(10px, 2.4vw, 40px), env(safe-area-inset-right, 0px)) 0 max(clamp(10px, 2.4vw, 40px), env(safe-area-inset-left, 0px)); }
.site-header .wrap {
  pointer-events: auto; position: relative; isolation: isolate; display: flex; align-items: center; gap: 20px;
  max-width: 1240px; height: calc(var(--nav-h) - 10px); padding-inline: clamp(14px, 2vw, 26px); border-radius: 18px;
  background: rgb(30 20 14 / .82); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 1px 2px 3px rgb(6 4 2 / .45), 6px 14px 30px -8px rgb(6 4 2 / .6), inset 1px 1px 0 rgb(255 226 190 / .14), inset -1px -1px 0 rgb(0 0 0 / .45);
}
.site-header .wrap::before { /* the same dark leather, a little see-through */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .5;
  background: url("/img/leather-dark.webp") 0 0 / 640px repeat;
}
.site-header .wrap::after { /* saddle stitch */
  content: ""; position: absolute; inset: 6px; z-index: -1; border-radius: 12px; pointer-events: none; border: 1.5px dashed rgb(210 165 120 / .35);
}
@supports not (backdrop-filter: blur(1px)) { .site-header .wrap { background: rgb(30 20 14 / .96); } }
.brand { display: flex; align-items: center; gap: 12px; color: var(--on-dark); text-decoration: none; margin-right: auto; }
.brand img { width: 52px; height: 52px; }   /* cream-linework badge straight on the dark header, no white disc (Joe, 7 Oct 2026) */
.brand span { font: 400 1.2rem/1 var(--display); letter-spacing: .02em; text-shadow: 1px 1px 0 rgb(0 0 0 / .6), 2px 3px 6px rgb(0 0 0 / .35); }
.brand small { display: block; font: 500 .66rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); text-shadow: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--on-dark); text-decoration: none; font-weight: 500; white-space: nowrap; padding: 10px 11px; border-radius: 8px; font-size: .96rem; }
.nav a:hover, .nav a[aria-current="page"] { background-color: rgb(255 240 220 / .08); color: #fff; }
/* current page: a short run of stitches under the link, not a hard rule */
.nav a[aria-current="page"], .nav-sub summary[data-current] {
  background-image: repeating-linear-gradient(90deg, var(--natural) 0 6px, transparent 6px 10px);
  background-repeat: no-repeat; background-size: calc(100% - 18px) 2px; background-position: 50% calc(100% - 5px);
}
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.cart-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--rust); color: #fff; font: 600 .76rem/22px var(--body); text-align: center; }
.cart-count[data-n="0"] { background: rgb(255 255 255 / .14); }
.menu-btn { display: none; color: var(--on-dark); border: 0; border-radius: 12px; width: 46px; height: 46px; cursor: pointer;
  background: rgb(255 240 220 / .06); box-shadow: inset 1px 1px 0 rgb(255 240 220 / .12), inset -1px -1px 0 rgb(0 0 0 / .4); }
.menu-btn svg { margin: auto; }
@media (max-width: 1199px) {
  .menu-btn { display: grid; }
  /* the phone menu: a second floating leather panel just under the pill */
  .nav { position: absolute; inset: calc(100% + 8px) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px 18px; border-radius: 18px;
    background: linear-gradient(rgb(28 19 14 / .55), rgb(28 19 14 / .55)), url("/img/leather-dark.webp") 0 0 / 640px repeat, var(--espresso);
    box-shadow: 2px 4px 6px rgb(6 4 2 / .45), 10px 24px 48px -12px rgb(6 4 2 / .7), inset 1px 1px 0 rgb(255 226 190 / .12);
    outline: 1.5px dashed rgb(210 165 120 / .3); outline-offset: -7px;
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s; max-height: calc(100dvh - var(--nav-h) - 24px); overflow-y: auto; }
  .nav a { padding: 14px 8px; border-bottom: 1px dashed rgb(210 165 120 / .16); border-radius: 0; font-size: 1.05rem; }
  .site-header[data-open] .nav { opacity: 1; transform: none; visibility: visible; transition: opacity .2s, transform .2s; }
}
.header-cart-mobile { display: none; }
@media (max-width: 1199px) { .header-cart-mobile { display: inline-flex; min-height: 44px; color: var(--on-dark); text-decoration: none; padding: 8px; } .nav .cart-link { display: none; } }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 104px); overflow: hidden; }
.hero .wrap { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.hero h1 { color: #fff; margin-block: 14px 20px; }
.hero h1 em { font-style: normal; color: var(--natural); }
.hero .lede { margin-bottom: 28px; }
.hero-photos { position: relative; display: grid; grid-template-columns: 1fr .62fr; gap: 14px; align-items: end; }
.hero-photos figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--espresso-2); }
.hero-photos figure:first-child { grid-row: span 2; }
.hero-photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.hero-photos figure:not(:first-child) img { aspect-ratio: 4 / 5; }
.hero-photos figcaption { position: absolute; left: 12px; bottom: 12px; font: 500 .7rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: rgb(28 19 14 / .78); color: var(--on-dark); padding: 5px 8px; border-radius: 4px; }
.hero-photos figure { position: relative; }

.specs { border-block: 1px solid rgb(255 255 255 / .08); background: var(--espresso-2); color: var(--on-dark-muted); }
.specs ul { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: center; font: 500 .78rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.specs li { display: flex; align-items: center; gap: 10px; }
.specs li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--natural); transform: rotate(45deg); }

/* ---------- Product lines / cards ---------- */
.lines { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lines { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.line-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
@media (hover: hover) { .line-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } }
.line-card:hover { color: inherit; }
.line-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.line-card .body { padding: 20px 22px 24px; display: grid; gap: 8px; align-content: start; }
.line-card .price { font: 500 .85rem var(--mono); color: var(--rust-ink); }
.line-card .go { font-weight: 600; color: var(--rust-ink); margin-top: 6px; }

/* Stitched outline, the "made here" mark */
.stitched { outline: 2px dashed var(--natural); outline-offset: -9px; }

/* ---------- Process ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: step; }
.steps li { counter-increment: step; background: rgb(255 252 246 / .82); border-radius: 14px; padding: 24px 22px; display: grid; gap: 8px; align-content: start;
  box-shadow: var(--shadow), inset 1px 1px 0 #fff; outline: 1.5px dashed rgb(122 62 30 / .3); outline-offset: -7px; }
.steps li::before { content: counter(step); font: 400 2.2rem/1 var(--display); color: var(--rust); }
.steps p { color: var(--muted); }

/* ---------- Tier tally ---------- */
.tally { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; align-items: end; }
.tally div { display: grid; gap: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.tally .bar { background: var(--natural); border-radius: 4px 4px 1px 1px; min-height: 24px; box-shadow: inset 1px 1px 0 rgb(255 245 230 / .45), inset -1px 0 0 rgb(107 58 30 / .35), 2px 3px 6px -2px rgb(0 0 0 / .45); }
.tally div:last-child .bar { background: #e2bb8f; }   /* the best price, a shade lighter; its label says so */
.tally .p { font: 600 clamp(.68rem, .55rem + .6vw, 1.05rem) var(--body); letter-spacing: -.01em; white-space: nowrap; }
.tally .q { font: 500 .7rem var(--mono); color: var(--muted); }
.band .tally .q { color: var(--on-dark-muted); }
.tier-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
.tier-table th, .tier-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.tier-table th { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tier-table tr[aria-current="true"] td { background: #f6e3cf; font-weight: 700; }
.tier-table tr[aria-current="true"] td:first-child { box-shadow: inset 3px 0 0 var(--rust); }

/* ---------- Portfolio ---------- */
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.piece { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--espresso-2); box-shadow: var(--shadow); }
.piece img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .5s; }
@media (hover: hover) { .piece:has(a):hover img { transform: scale(1.04); } }
/* The caption's shade starts well under the eyebrow, so BUSINESS / EVENTS never sits on bare photo detail
   (patch art, hang tags), and the words carry a soft shadow of their own. */
.piece figcaption { position: absolute; inset: auto 0 0 0; padding: 40px 14px 14px; background: linear-gradient(rgb(20 12 8 / 0), rgb(20 12 8 / .6) 30px, rgb(20 12 8 / .92)); color: #fff; display: grid; gap: 2px; }
.piece figcaption :is(b, span, a) { text-shadow: 0 1px 2px rgb(0 0 0 / .85), 0 0 8px rgb(0 0 0 / .5); }
.piece figcaption b { font-size: 1rem; }
.piece figcaption span { font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #e6c39c; }
.piece figcaption a { color: #fff; font-size: .88rem; font-weight: 600; margin-top: 4px; justify-self: start; padding-block: 10px; margin-block: -6px -10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip { border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 16px; font: 500 .92rem var(--body); cursor: pointer; min-height: 40px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Split / about ---------- */
.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- CTA band ---------- */
.cta { text-align: left; }
.cta .wrap { display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .cta .wrap { grid-template-columns: minmax(0, 1.4fr) auto; } }
.cta h2 { color: #fff; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: .95rem; }
.hint, .field .hint { font-size: .85rem; color: var(--muted); }
.row-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 1rem;
}
textarea { min-height: 120px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px rgb(164 83 44 / .2); }
input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: var(--bad); }
.field:has(input:user-invalid) .hint { color: var(--bad); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dropzone { position: relative; border: 2px dashed var(--natural); border-radius: var(--radius); background: var(--hide); padding: 22px; text-align: center; display: grid; gap: 6px; justify-items: center; cursor: pointer; transition: background-color .2s, border-color .2s; }
.dropzone:hover, .dropzone[data-over] { background: #efdcc5; border-color: var(--rust); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone b { font-size: 1rem; }
.dropzone small { color: var(--muted); }
.dropzone[data-state="done"] { border-style: solid; border-color: var(--ok); background: #e9f0e3; }
.dropzone[data-state="error"] { border-color: var(--bad); background: #f7e4e2; }
.dropzone:has(input:focus-visible) { outline: 3px solid var(--rust); outline-offset: 3px; border-color: var(--rust); background: #efdcc5; }
.status { font-size: .92rem; min-height: 1.4em; }
.status[data-tone="error"] { color: var(--bad); }
.status[data-tone="ok"] { color: var(--ok); }
.notice { border-radius: var(--radius); padding: 14px 18px; background: var(--hide); border-left: 4px solid var(--rust); font-size: .95rem; }
.notice.ok { border-color: var(--ok); background: #e9f0e3; }

/* ---------- Option pickers ---------- */
.opt-group { display: grid; gap: 10px; }
.opt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.opt-head b { font-size: 1rem; }
.opt-head span { font: 500 .82rem var(--mono); color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: #fff; font-weight: 500; font-size: .95rem; cursor: pointer; transition: border-color .15s, background-color .15s; }
.pill input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pill input:focus-visible + span { outline: 3px solid var(--rust); outline-offset: 2px; }
.pill svg { flex: none; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.swatch { position: relative; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch span { display: block; aspect-ratio: 1; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line-strong); background: conic-gradient(var(--front) 0 50%, var(--mesh) 0 100%); transform: rotate(-45deg); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.swatch input:checked + span { box-shadow: 0 0 0 2.5px var(--ink); transform: rotate(-45deg) scale(1.06); }
.swatch input:focus-visible + span { outline: 3px solid var(--rust); outline-offset: 3px; }
.swatch .count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--rust); color: #fff; font: 600 .7rem/20px var(--body); text-align: center; padding: 0 5px; pointer-events: none; }
.leather-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.leather-pick .pill span { width: 100%; justify-content: flex-start; }
.leather-pick i { width: 22px; height: 22px; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); }

.stepper { justify-self: start; display: inline-flex; align-items: stretch; border: 1.5px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: #fff; }
.stepper button { width: 46px; border: 0; background: var(--hide); font-size: 1.3rem; cursor: pointer; color: var(--ink); }
.stepper button:hover { background: #ead7bf; }
.stepper input { width: 72px; min-height: 46px; border: 0; border-radius: 0; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.size-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }   /* S to 3XL */
@media (max-width: 480px) { .size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* six across a phone left 34px fields */
.size-grid label { display: grid; gap: 4px; text-align: center; font: 500 .8rem var(--mono); }
.size-grid label small { font-size: .68rem; color: var(--muted); margin-top: -4px; }   /* the 2XL / 3XL upcharge */
.size-grid input { text-align: center; padding-inline: 4px; }

/* ---------- Builder ---------- */
.builder { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .builder { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.stage { position: sticky; top: calc(var(--nav-h) + 12px); z-index: 2; border-radius: 14px; background: radial-gradient(120% 90% at 50% 20%, #3a2a1f, var(--espresso)); padding: clamp(10px, 2vw, 22px); box-shadow: var(--shadow-lg); }
.stage svg { width: 100%; height: auto; display: block; }
.stage-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--on-dark-muted); font: 500 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 4px 0; }
@media (max-width: 959px) {
  .stage { top: calc(var(--nav-h) + 6px); padding: 8px; }
  .stage svg { max-height: 26vh; }
  .stage-meta { display: none; }
  html:has(.builder) { scroll-padding-top: calc(var(--nav-h) + 26vh + 70px); }
}
.panel { display: grid; gap: 28px; }
.panel > section { display: grid; gap: 12px; padding-bottom: 26px; border-bottom: 1px dashed var(--line); }
.summary { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: grid; gap: 14px; }
.summary .total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.summary .total b { font: 400 var(--step-2) var(--display); }
.next-tier { font-size: .92rem; color: var(--ok); font-weight: 500; }
.mix { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; }
.mix button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; border: 1px solid var(--line); background: var(--hide); border-radius: 999px; padding: 5px 10px 5px 6px; font: 500 .85rem var(--body); cursor: pointer; }
.mix button i { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--front) 0 50%, var(--mesh) 0 100%); transform: rotate(-45deg); }

/* ---------- Product page ---------- */
.product { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.shots { display: grid; gap: 10px; }
.shots .main { border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.shots .main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.thumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: #fff; }
.thumbs button[aria-current="true"] { border-color: var(--ink); }
.thumbs img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ticks li { padding-left: 22px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; background: var(--rust); transform: rotate(45deg); border-radius: 2px; }

/* ---------- Shop grid ---------- */
.shop-grid { display: grid; gap: clamp(12px, 2.5vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
@media (max-width: 520px) { .shop-card .body { padding: 12px 12px 16px; } .shop-card .body p { display: none; } .piece figcaption { padding: 34px 10px 10px; } }
.shop-card { display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .25s, box-shadow .25s; }
@media (hover: hover) { .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } }
.shop-card:hover { color: inherit; }
.shop-card img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.shop-card .body { padding: 16px 18px 20px; display: grid; gap: 6px; align-content: start; }
.shop-card .price { font: 500 .85rem var(--mono); color: var(--rust-ink); }
.shop-card .tag { justify-self: start; font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- Cart ---------- */
.cart { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .cart { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.cart-lines { display: grid; gap: 14px; }
.cart-line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 16px; background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); align-items: start; }
.cart-line img, .cart-line .thumb { width: 84px; height: 84px; border-radius: 8px; object-fit: cover; background: var(--hide); }
.cart-line .desc { font-size: .9rem; color: var(--muted); }
@media (max-width: 520px) {
  .cart-line { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .cart-line img, .cart-line .thumb { width: 64px; height: 64px; }
  .cart-line .amt { grid-column: 1 / -1; grid-template-columns: 1fr auto; text-align: left; justify-items: start; align-items: center; border-top: 1px dashed var(--line); padding-top: 10px; }
}
.cart-line .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; display: grid; gap: 6px; justify-items: end; }
.cart-line .amt small { font-weight: 400; color: var(--muted); font-size: .8rem; }
.linkish { background: none; border: 0; padding: 0; color: var(--rust-ink); text-decoration: underline; cursor: pointer; font: inherit; font-size: .88rem;
  display: inline-flex; align-items: center; min-height: 40px; }   /* Remove, Edit design, Copy a link: 40px tall on a phone */
/* A link inside running text that people tap on a phone: a 44px hit area with no change to the line's height. */
.tap, .site-footer .legal a, .news-note a, .empty a:not(.btn) { display: inline-block; padding-block: 12px; margin-block: -12px; }
.totals { display: grid; gap: 8px; font-variant-numeric: tabular-nums; }
.totals div { display: flex; justify-content: space-between; gap: 12px; }
.totals .grand { font-size: 1.2rem; font-weight: 700; border-top: 1px solid var(--line); padding-top: 10px; }
.empty { text-align: center; padding: 48px 20px; background: var(--hide); border-radius: var(--radius); display: grid; gap: 14px; justify-items: center; }
.empty .btn-row { justify-content: center; }
/* build.mjs pre-renders an invisible copy of the empty cart so the page already has its height when cart.js
   fills [data-lines] (no footer jump). cart.js replaces it; without script it isn't shown at all. */
.cart-placeholder { visibility: hidden; }
@media (scripting: none) { .cart-placeholder { display: none; } }
/* The separator rides with the price, so a wrapped label never leaves a dangling dot. */
.ship-price { font-weight: inherit; white-space: nowrap; }
.ship-price::before { content: "· "; }

/* ---------- Order tracker ---------- */
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.track li { display: grid; gap: 8px; font: 500 .72rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.track li::before { content: ""; height: 6px; border-radius: 3px; background: var(--line); }
.track li[data-state="done"]::before { background: var(--rust); }
.track li[data-state="now"]::before { background: linear-gradient(90deg, var(--rust) 50%, var(--line) 50%); }
.track li[data-state="now"] { color: var(--ink); }
.proof { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: grid; gap: 14px; }
.proof img { border-radius: 8px; width: 100%; max-height: 70vh; object-fit: contain; background: var(--hide); }
.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.thread li { background: #fff; border-radius: 8px; padding: 10px 14px; box-shadow: 0 1px 2px rgb(0 0 0 / .06); max-width: 92%; }
.thread li[data-author="customer"] { justify-self: end; background: #f6e3cf; }
.thread li[data-author="system"] { background: transparent; box-shadow: none; color: var(--muted); font-size: .9rem; padding-inline: 0; }
.thread time { display: block; font: 500 .7rem var(--mono); color: var(--muted); margin-top: 2px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: #fff; border-radius: var(--radius); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.faq summary { cursor: pointer; padding: 18px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.4rem/1 var(--body); color: var(--rust); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 20px 20px; color: var(--muted); display: grid; gap: 10px; max-width: 68ch; }

/* ---------- Page head ---------- */
.page-head { padding-block: calc(clamp(40px, 5vw, 72px) + var(--head, 0px)) clamp(32px, 4vw, 56px); }
.page-head h1 { color: #fff; font-size: var(--step-3); margin-top: 10px; }
.page-head .lede { margin-top: 14px; }
.crumbs { font: 500 .78rem var(--mono); letter-spacing: .06em; color: var(--on-dark-muted); }
.crumbs a { color: var(--on-dark-muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--espresso); color: var(--on-dark-muted); padding-block: 56px 32px; font-size: .95rem; }   /* floating panel: see LEATHER BENCH */
.site-footer .cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.site-footer h2 { color: var(--on-dark); font: 500 .76rem var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--natural); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.site-footer li a { display: inline-block; padding-block: 10px; }   /* 40px tap rows (were 19px links 8px apart) */
.site-footer li:not(:has(a)) { padding-block: 10px; }
.site-footer .legal { margin-top: 40px; padding-top: 20px; border-top: 1.5px dashed rgb(210 165 120 / .2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .85rem; }
.news { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.news input { flex: 1 1 180px; min-height: 44px; background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .16); color: var(--on-dark); }
.news input::placeholder { color: var(--on-dark-muted); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 14px 18px; border-radius: 10px; box-shadow: var(--shadow-lg); display: flex; gap: 14px; align-items: center; z-index: 80; opacity: 0; transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); }
.toast[data-show] { opacity: 1; transform: translate(-50%, 0); }
.toast a { color: var(--natural); font-weight: 600; }

/* ---------- Motion ----------
   The scroll-scrubbed .rise fade (it could stop with prices half-transparent) was removed on 8 Oct 2026:
   motion.js now reveals .rise items once. Everything here is painted and legible without script. */
@media (prefers-reduced-motion: no-preference) {
  .hero-photos figure { animation: settle .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-photos figure:nth-child(2) { animation-delay: .12s; }
  .hero-photos figure:nth-child(3) { animation-delay: .24s; }
}
@keyframes settle { from { opacity: 0; transform: translateY(18px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

@media print { .site-header, .site-footer, .btn, .builder-bar, .toast { display: none !important; } .band, .split-hero { background: #fff; color: #000; } .band h1, .band h2, .page-head h1, .sh h1 { color: #000; } }

/* ---------- Dashboard ---------- */
.dash-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin-bottom: 28px; }
.tile { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: grid; gap: 2px; align-content: start; }
/* The tiles are buttons (each opens the list it counts). */
button.tile { border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; min-height: 44px; }
.tile:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
@media (hover: hover) { button.tile:hover { box-shadow: var(--shadow-lg); } }
/* On a phone the tiles go two across and compact, so the first order card is near the top. */
@media (max-width: 699px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .tile { padding: 10px 12px; }
  .tile b { font-size: var(--step-1); }
  .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.tile b { font: 400 var(--step-2)/1.1 var(--display); color: var(--saddle); font-variant-numeric: tabular-nums; }
.tile span { font: 500 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar select { min-height: 40px; width: auto; margin-left: 6px; }
.table-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.dtable { width: 100%; border-collapse: collapse; font-size: .94rem; font-variant-numeric: tabular-nums; }
.dtable th, .dtable td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dtable th { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); position: sticky; top: 0; background: #fff; }
.dtable tbody tr { cursor: pointer; }
.dtable tbody tr:hover, .dtable tbody tr:focus-visible { background: var(--hide); }
.dtable small { color: var(--muted); }
.spill { display: inline-block; font: 500 .72rem/1.2 var(--mono); padding: 3px 8px; border-radius: 999px; background: var(--hide); color: var(--muted); white-space: nowrap; }
.spill[data-tone="warn"] { background: #f8e3c4; color: #7a4300; }
.spill[data-tone="ok"] { background: #e1ecdc; color: #2f5a2c; }
.spill[data-tone="done"] { background: #ece6de; color: #6c5646; }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 10px; align-content: start; min-width: 0; overflow-wrap: anywhere; }
.card select { min-height: 40px; width: auto; margin-left: 6px; }
.card .field select { margin-left: 0; width: 100%; }
.desc { font-size: .9rem; color: var(--muted); }
.drawer { width: min(720px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border: 0; padding: 24px var(--gutter) 48px; background: var(--paper); box-shadow: var(--shadow-lg); overflow-y: auto; }
.drawer::backdrop { background: rgb(28 19 14 / .55); }
/* The header (name + Close) stays at the top while the drawer scrolls. -24px matches .drawer's padding-top. */
.drawer-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; position: sticky; top: -24px; z-index: 3; margin: -24px calc(-1 * var(--gutter)) 18px; padding: 24px var(--gutter) 10px; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.drawer-head > div { min-width: 0; }
.drawer-head .eyebrow { line-height: 1.35; }
.drawer-head h2 { font-size: var(--step-2); line-height: 1.1; overflow-wrap: anywhere; }
/* A long customer name mustn't turn the sticky header into half the phone screen. */
@media (max-width: 699px) { .drawer-head h2 { font-size: var(--step-1); } }
.drawer .thumb svg, .cart-line .thumb svg { width: 100%; height: 100%; }
.drawer details > summary { cursor: pointer; padding-block: 10px; min-height: 44px; }
.empty:empty { display: none; }

/* ---------- Money Run (sub-brand: same leather, turquoise accent, braid motif) ---------- */
:root { --turq: #1f9e9a; --turq-ink: #0f6e6b; }

/* ---------- Split home hero: R&K | Money Run (Kelsey, 7 Oct 2026) ----------
   Desktop: two columns, the hat photo under R&K's copy, Money Run spanning the right column.
   Phone: R&K copy, Money Run, then the hat, so both names land on the first screen. */
.split-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "rk" "mr" "art"; background: var(--espresso); color: var(--on-dark); }
.sh { display: grid; align-content: center; justify-items: start; gap: 10px; padding: clamp(26px, 5vw, 64px) var(--gutter); min-width: 0; }
.sh-rk { grid-area: rk; background: radial-gradient(120% 100% at 25% 15%, #3a2a1f, var(--espresso) 72%); }
.sh-mr { grid-area: mr; background: radial-gradient(120% 100% at 75% 15%, #12403e, #0c2221 75%); border-top: 1px solid rgb(255 255 255 / .08); }
.sh-art { grid-area: art; background: var(--espresso); padding: 0 var(--gutter) clamp(26px, 5vw, 64px); min-width: 0; }
.sh-art svg { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.sh .eyebrow { color: var(--natural); }
.sh-mr .eyebrow, .sh-mark small { color: #7fd6d2; }
.sh h1 { color: #fff; font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.3rem); line-height: 1.08; margin: 0; }
.sh h1 em { font-style: normal; color: var(--natural); }
.sh-mark { font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4.4rem); margin: 0; }
.sh-lede { color: var(--on-dark-muted); max-width: 44ch; }
.sh .btn-row { margin-top: 6px; }
.sh-braid { width: 100%; border-radius: 40px; overflow: hidden; margin-top: 14px; }
.sh-braid.mr-braid svg { display: block; width: 100%; height: clamp(40px, 5vw, 64px); }
.sh-mrart { display: none; }
@media (min-width: 900px) {
  .split-hero { grid-template-columns: 1fr 1fr; grid-template-areas: "rk mr" "art mrart"; }
  .sh-mr { align-content: end; padding-bottom: 20px; }
  .sh-mr > .sh-braid { display: none; }          /* the stacked braids below take over on desktop */
  .sh-mrart { display: grid; grid-area: mrart; gap: 18px; align-content: start; padding: 10px var(--gutter) clamp(26px, 5vw, 64px); background: radial-gradient(120% 100% at 75% 0%, #103734, #0c2221 75%); border-left: 1px solid rgb(255 255 255 / .08); }
  .sh-mrart .sh-braid { margin: 0; }
  .sh-art svg { max-height: 48vh; width: auto; max-width: 100%; }
  .sh-rk { padding-bottom: 20px; align-content: end; }
  .sh-mr { border-top: 0; border-left: 1px solid rgb(255 255 255 / .08); }
  .sh-art { background: radial-gradient(120% 100% at 25% 0%, #2c1f17, var(--espresso) 70%); }
}
.mr-mark { font: 400 clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem)/1 var(--display); letter-spacing: .06em; color: #fff; display: grid; gap: 8px; }
.mr-mark small { font: 500 .78rem/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--turq); }
.mr-mark-xl { font-size: clamp(2.8rem, 1.6rem + 6vw, 6.2rem); margin-block: 14px 22px; }
.mr-mark-xl small { font-size: clamp(.8rem, .7rem + .5vw, 1.1rem); letter-spacing: .5em; }
/* Light sections get dark ink; dark bands (.band, also .section on home) keep white + light teal (10.8:1). */
.section:not(.band) .mr-mark, .mr-aside .mr-mark { color: var(--ink); }
.section:not(.band) .mr-mark small, .mr-aside .mr-mark small { color: var(--turq-ink); }
.band .mr-mark small { color: #7fd6d2; }
.mr-eyebrow { color: var(--turq-ink); }
.btn.mr { --b: var(--turq-ink); }
.btn.mr:hover { --b: #0b5552; }
.mr-band .mr-braid { border-radius: 40px; overflow: hidden; }
.mr-braid svg { display: block; width: 100%; height: auto; }
.mr-hero { padding-block: calc(clamp(48px, 7vw, 104px) + var(--head, 0px)) 0; overflow: clip; }
.mr-hero .lede { max-width: 54ch; margin-bottom: 28px; }
.mr-hero-braid { margin-top: clamp(40px, 6vw, 72px); }
.mr-hero-braid svg { height: clamp(48px, 7vw, 80px); width: 100%; }
.mr-stage { background: radial-gradient(120% 120% at 50% 0%, #3a2a1f, var(--espresso)); border-radius: 14px; padding: clamp(18px, 3vw, 36px); box-shadow: var(--shadow-lg); }
.mr-stage svg { display: block; width: 100%; height: auto; }
.mr-picks { color: var(--on-dark); font: 500 .85rem var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-top: 14px; text-align: center; }
.mr-palette { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); margin-top: 20px; }
.mr-color { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; font: 500 .92rem var(--body); color: var(--ink); cursor: pointer; text-align: left; }
.mr-color i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2); flex: none; }
.mr-color[aria-pressed="true"] { border-color: var(--turq-ink); box-shadow: 0 0 0 2px var(--turq-ink); }
.mr-color b { margin-left: auto; min-width: 20px; height: 20px; border-radius: 10px; background: var(--turq-ink); color: #fff; font: 600 .72rem/20px var(--body); text-align: center; }
.mr-color b:empty { display: none; }
.mr-items { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.mr-item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px 22px; display: grid; gap: 8px; align-content: start; }
.mr-item .mr-braid { margin: -6px -8px 6px; }
.mr-item p { color: var(--muted); }
.mr-item .price { font: 500 .82rem var(--mono); color: var(--turq-ink); }
/* Named colorways (15 Oct 2026): a second head in the lineup section, an Order button per card, and a Coming soon
   tile where a colorway has no photo yet (Vegas Lights). */
.mr-ways-head { margin-top: clamp(40px, 6vw, 72px); scroll-margin-top: calc(var(--nav-h, 64px) + 16px); }
.mr-way .btn { justify-self: stretch; text-align: center; margin-top: 4px; }
.mr-soon { width: calc(100% + 16px); margin: -6px -8px 6px; aspect-ratio: 4 / 3; border-radius: 8px; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 0%, #3a2a1f, var(--espresso)); }
.mr-soon-tag { color: #f4e8d6; font: 500 .78rem var(--mono); letter-spacing: .14em; text-transform: uppercase;
  border: 1.5px dashed rgb(210 165 120 / .65); border-radius: 999px; padding: 8px 16px; }
.mr-aside { position: sticky; top: calc(var(--nav-h) + 24px); background: var(--hide); border-radius: var(--radius); padding: 24px; }
.mr-steps { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.mr-steps li::marker { color: var(--turq-ink); font-weight: 700; }
@media (max-width: 859px) { .mr-aside { position: static; } }

@media (max-width: 480px) {
  .brand small { display: none; }
  .brand img { width: 44px; height: 44px; }
  .brand span { font-size: 1.1rem; white-space: nowrap; }
  .stage svg { max-height: 24vh; }
  .stage-meta { font-size: .66rem; }
}

/* Reserve the builder preview's box so the form below never shifts when the SVG paints. */
[data-hat-svg] { aspect-ratio: 480 / 350; }
@media (max-width: 959px) { [data-hat-svg] { max-height: 26vh; aspect-ratio: auto; height: min(26vh, calc((100vw - 2 * var(--gutter) - 2 * clamp(10px, 2vw, 22px)) * 350 / 480)); } }
@media (max-width: 480px) { [data-hat-svg] { height: min(24vh, calc((100vw - 2 * var(--gutter) - 20px) * 350 / 480)); } }
[data-hat-svg] svg { width: 100%; height: 100%; }

/* ---------- Builder: decoration steps (numbered by what's visible) ---------- */
.panel { counter-reset: step; }
.panel > section:not([hidden]) b.step::before { counter-increment: step; content: counter(step) ". "; }
.thread-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; }
.thread-swatch { position: relative; }
.thread-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.thread-swatch span { display: block; aspect-ratio: 1; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  background: repeating-linear-gradient(115deg, var(--c) 0 3px, color-mix(in oklab, var(--c), #000 22%) 3px 4px);
  box-shadow: 0 0 0 1.5px var(--line); transition: box-shadow .15s, transform .15s; }
.thread-swatch input:checked + span { box-shadow: 0 0 0 2.5px var(--ink); transform: scale(1.06); }
.thread-swatch input:focus-visible + span { outline: 3px solid var(--rust); outline-offset: 3px; }

/* ---------- Services menu (native <details>, works without JS) ---------- */
.nav-sub { position: relative; }
.nav-sub summary { list-style: none; cursor: pointer; color: var(--on-dark); font-weight: 500; font-size: .96rem; padding: 10px 11px; border-radius: 6px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.nav-sub summary::-webkit-details-marker { display: none; }
.nav-sub summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.nav-sub[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.nav-sub summary:hover, .nav-sub summary[data-current] { background-color: rgb(255 240 220 / .08); color: #fff; }
.nav-sub-list { display: grid; }
@media (min-width: 1200px) {
  .nav-sub-list { position: absolute; top: calc(100% + 12px); left: 0; min-width: 230px; background: var(--espresso); border-radius: 14px; padding: 10px; z-index: 60;
    box-shadow: 2px 4px 6px rgb(6 4 2 / .45), 10px 22px 40px -12px rgb(6 4 2 / .7), inset 1px 1px 0 rgb(255 226 190 / .12); outline: 1.5px dashed rgb(210 165 120 / .3); outline-offset: -6px; }
  .nav-sub-list a { padding: 10px 12px; }
}
@media (max-width: 1199px) {
  .nav-sub summary { padding: 14px 8px; border-bottom: 1px dashed rgb(210 165 120 / .16); border-radius: 0; font-size: 1.05rem; justify-content: space-between; }
  .nav-sub-list a { padding-left: 24px !important; font-size: 1rem !important; color: var(--on-dark-muted) !important; }
}

/* ---------- Service pages (embroidery, DTF) ---------- */
.svc-hero { padding-block: calc(clamp(40px, 6vw, 80px) + var(--head, 0px)) clamp(40px, 6vw, 80px); overflow: clip; }
.svc-hero .wrap { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .svc-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.svc-hero h1 { color: #fff; }
.svc-hero h1 em { font-style: normal; color: var(--natural); }
.svc-hats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-hats figure:first-child { grid-column: 1 / -1; }
.svc-hats figure, .svc-photos figure { margin: 0; display: grid; gap: 6px; }
.svc-hats svg { width: 100%; height: auto; background: radial-gradient(120% 90% at 50% 20%, #3a2a1f, var(--espresso-2)); border-radius: 10px; }
.svc-hats figcaption, .svc-photos figcaption { font: 500 .7rem/1.3 var(--mono); letter-spacing: .06em; color: var(--on-dark-muted); text-transform: uppercase; }
.svc-photos { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.svc-photos img { border-radius: 10px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; box-shadow: var(--shadow-lg); }
.cards-2, .cards-3 { display: grid; gap: 14px; }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.cards-2 .card, .cards-3 .card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: grid; gap: 8px; align-content: start; }
.cards-2 .card p, .cards-3 .card p { color: var(--muted); }
.svc-table { overflow-x: auto; margin-top: 22px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.svc-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.svc-table th, .svc-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.svc-table th { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.svc-table tr:last-child td { border-bottom: 0; }
.photo-slots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.photo-slots > div { aspect-ratio: 4 / 3; border: 2px dashed var(--natural); border-radius: var(--radius); display: grid; place-items: center; padding: 16px; text-align: center; background: rgb(255 255 255 / .5); }
.svc-aside { position: sticky; top: calc(var(--nav-h) + 24px); }
.svc-aside-hat svg { width: 100%; height: auto; border-radius: 12px; background: radial-gradient(120% 90% at 50% 20%, #3a2a1f, var(--espresso)); }
@media (max-width: 859px) { .svc-aside { position: static; } }
.line-art { aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 20%, #3a2a1f, var(--espresso)); }
.line-art svg { width: 92%; height: auto; }
.shop-card .line-art { aspect-ratio: 4 / 5; }

/* Header: menu button and mobile cart sit before the nav in the DOM (focus order); keep the visual order. */
.site-header .brand { order: 0; } .site-header .nav { order: 1; } .header-cart-mobile { order: 2; } .menu-btn { order: 3; }
/* SE-class phones (320 px): brand, cart and menu button added up to 292 px in a pill with 272 px inside, so the
   button hung 6 px past it. A smaller wordmark and tighter gaps bring them to about 256 px. */
@media (max-width: 360px) {
  .site-header .wrap { gap: 6px; }
  .header-cart-mobile { padding-inline: 2px; }
  .menu-btn { flex: none; }
  .brand { gap: 8px; min-width: 0; }
  .brand span { font-size: .95rem; letter-spacing: 0; }
}
@media (max-width: 400px) { .svc-table th, .svc-table td { padding: 10px; } }
.svc-table tbody th { font: 600 .95rem var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* Hat Builder angle buttons (front / left side / right side), over the top of the stage.
   No position override here: .stage is sticky (above), and a sticky box already contains these. */
.stage-views { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.stage-views button { font: 600 .85rem var(--body); min-width: 44px; color: var(--on-dark); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
.stage-views button[aria-pressed="true"] { background: var(--natural); color: var(--espresso); border-color: var(--natural); }
.stage-views button:focus-visible { outline: 3px solid var(--natural); outline-offset: 2px; }

@media (max-width: 959px) { .stage-views { margin-bottom: 6px; } .stage-views button { min-height: 44px; padding: 6px 12px; font-size: .8rem; } }

/* ---------- 8 Oct 2026 upgrade: new pieces ---------- */
/* Hat Builder: fixed bottom bar on phones (total + Add to cart), hidden while the summary is on screen. */
.builder-bar { display: none; }
@media (max-width: 959px) {
  .builder-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
    padding: 10px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: var(--espresso); color: var(--on-dark); box-shadow: 0 -8px 24px rgb(28 19 14 / .25);
    transition: transform .25s, visibility 0s; }
  .builder-bar[data-off] { transform: translateY(100%); visibility: hidden; transition: transform .25s, visibility 0s .25s; }
  .builder-bar .btn { min-height: 44px; }
  body:has(.builder-bar) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body:has(.builder-bar:not([data-off])) .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
.builder-bar-total { display: grid; gap: 2px; min-width: 0; font-variant-numeric: tabular-nums; }
.builder-bar-total b { font: 400 var(--step-1)/1.1 var(--display); color: #fff; }
.builder-bar-total span { font-size: .8rem; color: var(--on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-hat-svg] { position: relative; }
[data-hat-svg][data-loading] > * { opacity: .7; transition: opacity .15s; }
[data-hat-svg][data-loading]::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .3); border-top-color: var(--natural); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mix-chip { display: inline-flex; align-items: stretch; }
.mix-chip > button:first-child { border-radius: 999px 0 0 999px; }
.mix-drop { display: inline-grid; place-items: center; width: 40px; min-height: 40px; border: 1px solid var(--line); border-left: 0; background: var(--hide); border-radius: 0 999px 999px 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.mix-drop:hover, .mix-drop:focus-visible { color: var(--rust-ink); }
.upload-actions { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.upload-actions .linkish { min-height: 40px; }

/* Forms: success panel, agree checkbox, lookup form */
.form-done { display: grid; gap: 8px; padding: 18px 20px; }
.form-done h3 { font: 400 var(--step-1)/1.2 var(--display); }
.form-done:focus:not(:focus-visible) { outline: none; }
/* the required "I've read the order terms" box: the whole label is the hit area, 44px tall with a 24px box */
.agree { display: flex; align-items: center; gap: 12px; font-size: .92rem; min-height: 44px; padding-block: 8px; cursor: pointer; }
.agree input { width: 24px; height: 24px; margin: 0; accent-color: var(--rust); flex: none; }
/* "Bulk pricing" / "Bulk pricing table" in the product and builder forms */
form.panel details > summary { cursor: pointer; padding-block: 10px; min-height: 44px; }
[data-order-lookup] { display: grid; gap: var(--space-4); max-width: 520px; }

/* Order page: approve confirm dialog */
.confirm-dialog { width: min(460px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg); }
.confirm-dialog::backdrop { background: rgb(28 19 14 / .55); }
.confirm-dialog .btn-row { margin-top: 18px; }

/* Cart: editable lines */
.cart-line .thumb { position: relative; }
.thumb-more { position: absolute; right: 4px; bottom: 4px; background: var(--ink); color: var(--paper); font: 500 .68rem/1.4 var(--mono); padding: 2px 6px; border-radius: 999px; }
.cart-sizes { gap: 6px; margin-top: 8px; }
.cart-sizes input { min-height: 40px; padding: 6px 4px; }
/* Five sizes across a phone cart line leave 28px fields; three across keeps each one tappable. */
@media (max-width: 420px) { .cart-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cart-qty { margin-top: 8px; }
.cart-qty button { width: 40px; }
.cart-qty input { width: 56px; min-height: 40px; }

/* Dashboard: setup panel + phone order cards */
.setup { margin-bottom: 20px; }
.setup summary { font-weight: 700; cursor: pointer; padding-block: 10px; min-height: 44px; }
/* Dashboard, drawer and order page: contact, file and tracking links in running text get a 44px tap height
   without changing the line (admin.js and order.js write them). */
:is([data-admin], [data-order]) :is(a[href^="mailto:"], a[href^="tel:"], a[href^="sms:"], a[target="_blank"], a[href*="?download"]):not(.btn) {
  display: inline-block; padding-block: 12px; margin-block: -12px; }
.setup-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .setup-list { grid-template-columns: 1fr 1fr; } }
.setup-list li { display: flex; gap: 10px; align-items: flex-start; flex-wrap: nowrap; }
.setup-list .setup-text { min-width: 0; }
.setup-list small { display: block; color: var(--muted); font-size: .8rem; }
.order-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.order-card { width: 100%; text-align: left; background: #fff; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: grid; gap: 4px; min-height: 64px; font: inherit; color: inherit; cursor: pointer; }
.order-card small { color: var(--muted); }
@media (hover: hover) { .order-card:hover { box-shadow: var(--shadow-lg); } }
.order-card-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (min-width: 700px) { .order-cards { display: none; } }
@media (max-width: 699px) { [data-list] .table-wrap:has(+ .order-cards), [data-list] .order-cards ~ .table-wrap { display: none; } }
/* The search box sits inside its <label>, so the label is the flex item that grows; on a phone it takes the row. */
.toolbar label:has(> input[type="search"]) { flex: 1 1 200px; max-width: 320px; }
.toolbar input[type="search"] { min-height: 44px; width: 100%; }
@media (max-width: 699px) { .toolbar label:has(> input[type="search"]) { max-width: none; } }
@media (prefers-reduced-motion: reduce) { [data-hat-svg][data-loading]::after { animation: none; } .builder-bar { transition: none; } }

/* Templates (8 Oct): utility classes that replaced inline styles */
.section.alt { background: var(--hide); }
.split.top { align-items: start; }
textarea.short { min-height: 84px; }
.stack.tight { gap: 8px; }
.stack.roomy { gap: 28px; }
.stack.loose { gap: 56px; }
.measure { max-width: 820px; }
.after-grid { margin-top: 24px; }
.gap-above { margin-top: 12px; }
.self-start { justify-self: start; }
.field-label { font-weight: 600; font-size: .95rem; }
.title-sm { font-size: var(--step-2); }
.big-phone { font: 400 var(--step-2)/1.2 var(--display); }
.big-phone a { text-decoration: none; color: var(--ink); display: inline-block; padding-block: 8px; margin-block: -8px; }
.sticky-aside { position: sticky; top: calc(var(--nav-h) + 24px); }
@media (max-width: 859px) { .sticky-aside { position: static; } }
.login-form { max-width: 420px; margin: 40px auto; }
.section.tight-top { padding-top: calc(clamp(24px, 3vw, 40px) + var(--head, 0px)); }
.page-head.compact { padding-block: calc(clamp(28px, 4vw, 48px) + var(--head, 0px)) clamp(28px, 4vw, 48px); }
.page-head + .section { padding-top: clamp(28px, 4vw, 48px); }
.band h2 { color: #fff; }
.svc-aside-hat { margin: 0; }
.qty-head { margin-top: 6px; }
.stage-noscript { color: var(--on-dark); padding: 20px; }
.panel legend.opt-head { width: 100%; padding: 0; margin-bottom: 12px; }
.sh-promise { font: 500 .78rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); margin-top: 4px; }
.nav a.nav-mr:hover { color: #7fd6d2; }
.nav a.nav-mr[aria-current="page"] { background-image: repeating-linear-gradient(90deg, var(--turq) 0 6px, transparent 6px 10px); }
.news-note { font-size: .8rem; color: var(--on-dark-muted); margin-top: 8px; }
.news-note a { text-decoration: underline; }

/* Header: Money Run + FAQ added (8 Oct). Fit the desktop nav; call/text only in the phone menu. */
.brand { flex: none; }
.nav-call { display: none; }
@media (min-width: 1200px) {
  .nav a, .nav-sub summary { padding-inline: 8px; }
  .nav .cart-link > span:not(.cart-count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1199px) {
  .nav-call { display: flex; gap: 10px; padding-top: 14px; }
  .nav .nav-call a { flex: 1; text-align: center; border: 0; border-radius: 12px; padding: 12px 8px; background: rgb(255 240 220 / .07); box-shadow: inset 1px 1px 0 rgb(255 240 220 / .12), inset -1px -1px 0 rgb(0 0 0 / .4); }
}

/* Product pages: name and price first on phones; beside the photos on desktop (UX-25) */
.product { grid-template-areas: "head" "shots" "panel"; }
.product-head { grid-area: head; display: grid; gap: 8px; }
.product-head h1 { font-size: var(--step-3); }
.product-head .price { font: 500 .9rem var(--mono); color: var(--rust-ink); }
.product > .shots { grid-area: shots; }
.product > .panel { grid-area: panel; }
@media (min-width: 900px) { .product { grid-template-areas: "shots head" "shots panel"; grid-template-rows: auto 1fr; row-gap: 20px; } }

/* Two photo columns on phones (sizes attributes assume it) */
@media (max-width: 599px) { .gallery, .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

@media (max-width: 520px) { .track li { font-size: .6rem; letter-spacing: 0; overflow-wrap: anywhere; } }

/* ==========================================================================
   LEATHER BENCH (Joe, 8 Oct 2026, evening): "not a fan of hard lines and cookie-cutter sections",
   "float the sections a little", "showcase the leather". Replaces the same day's feathered diagonal
   bleeds and braided rope dividers.
   The page is a leatherworker's bench under one lamp, upper left. Dark tooled leather is the bench;
   every section is a rounded leather panel laid on it (veg-tan for products, dark leather for calls to
   action), saddle-stitched inside its edge, its shadow falling down and to the right. Panels alternate
   their inset (odd ones further in on the left, even ones on the right) and vary their corners by kind,
   so the page never reads as stacked boxes. Floating models (the leather badge, braid strands, the hero
   hat card) straddle the gaps; motion.js moves them through [data-depth] and [data-tilt].
   Nothing in this block animates, and every text colour was checked against the panel it sits on.
   ========================================================================== */
:root {
  --panel-x: clamp(8px, 1.5vw, 20px);          /* panel inset from the page edge */
  --panel-skew: clamp(4px, 1.6vw, 26px);       /* extra inset on alternating sides */
  --panel-gap: clamp(8px, 1vw, 14px);          /* half the gap between two panels: 16–28px gaps */
  --r-panel: clamp(18px, 2vw, 28px);
  --r-tight: clamp(12px, 1.3vw, 18px);
  --stitch-on-light: rgb(122 62 30 / .4);
  --stitch-on-dark: rgb(210 165 120 / .34);
  /* elevation from the one lamp: tight contact, mid, wide ambient; espresso, never grey */
  --e-panel: 1px 2px 2px rgb(8 5 3 / .5), 5px 12px 22px -6px rgb(8 5 3 / .55), 18px 40px 72px -22px rgb(0 0 0 / .6);
  --e-float: 2px 4px 5px rgb(6 4 2 / .5), 8px 18px 34px -10px rgb(6 4 2 / .7);
  --rim-light: inset 1px 1px 0 rgb(255 252 245 / .8), inset -1px -1px 0 rgb(107 58 30 / .18);
  --rim-dark: inset 1px 1px 0 rgb(255 226 190 / .13), inset -1px -1px 0 rgb(0 0 0 / .45);
  --leather-dark: url("/img/leather-dark.webp") 0 0 / 640px repeat;
  --leather-light: url("/img/leather-light.webp") 0 0 / 640px repeat;
  /* the lamp on a panel, and that panel's edges falling away from it */
  --lamp-dark: radial-gradient(75% 90% at 10% 0%, rgb(255 186 118 / .14), transparent 60%), radial-gradient(150% 130% at 30% 15%, transparent 48%, rgb(6 4 2 / .5) 100%);
  --lamp-light: radial-gradient(85% 70% at 6% 0%, rgb(255 252 246 / .6), transparent 62%), radial-gradient(150% 130% at 32% 18%, transparent 54%, rgb(107 58 30 / .11) 100%);
}

/* the bench: dark leather, the lamp's pool upper left, the room falling into shadow around it */
body { background: var(--leather-dark), var(--espresso); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 8% 0%, rgb(255 190 120 / .16), transparent 70%),
    radial-gradient(150% 120% at 28% 10%, transparent 40%, rgb(6 4 2 / .68) 100%),
    linear-gradient(rgb(16 10 7 / .34), rgb(16 10 7 / .34));
}
body { overflow-x: clip; }

/* main starts under the floating header; the first panel's own padding clears it (--head) */
main { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: calc(-1 * var(--nav-h));
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }   /* landscape notch: panels clear it (0 in portrait) */
main > :first-child { --head: var(--nav-h); margin-top: 4px; }
main > :first-child > * { --head: 0px; }

/* ---------- Panels ---------- */
main > section, main > .specs, .site-footer {
  position: relative; isolation: isolate; overflow: clip;
  margin: var(--panel-gap) var(--panel-x);
  border-radius: var(--r-panel);
  outline: 2px dashed var(--stitch-on-light); outline-offset: -10px;   /* saddle stitch, inside the edge */
  box-shadow: var(--e-panel), var(--rim-light);
}
main > section:nth-of-type(odd) { margin-left: calc(var(--panel-x) + var(--panel-skew)); }
main > section:nth-of-type(even) { margin-right: calc(var(--panel-x) + var(--panel-skew)); }

/* veg-tan panels: her leather, lightened toward paper so body text keeps AA (ink 15:1, muted 5.4:1 at the darkest edge) */
main > section:not(.band):not(.flip-band) {
  background: var(--lamp-light), linear-gradient(rgb(251 247 240 / .82), rgb(251 247 240 / .82)), var(--leather-light), var(--paper);
}
main > section.alt:not(.band) {
  background: var(--lamp-light), linear-gradient(rgb(244 235 221 / .84), rgb(244 235 221 / .84)), var(--leather-light), var(--hide);
  border-radius: clamp(26px, 3.2vw, 44px) var(--r-tight);   /* cut like a hide: two wide corners, two tight */
}
/* dark panels: the same dark leather as the bench, a shade lifted, with her tooling (.band::before) */
main > .band, main > .flip-band, .site-footer {
  background: var(--lamp-dark), linear-gradient(rgb(44 30 21 / .5), rgb(44 30 21 / .5)), var(--leather-dark), var(--espresso-2);
  color: var(--on-dark);
  outline-color: var(--stitch-on-dark);
  box-shadow: var(--e-panel), var(--rim-dark);
  border-radius: clamp(16px, 1.8vw, 24px);
}
main > .cta { border-radius: clamp(30px, 4vw, 56px) var(--r-tight); }
.site-footer { color: var(--on-dark-muted); margin-bottom: calc(var(--panel-x) + env(safe-area-inset-bottom, 0px));
  margin-left: calc(var(--panel-x) + env(safe-area-inset-left, 0px)); margin-right: calc(var(--panel-x) + env(safe-area-inset-right, 0px));
  border-radius: clamp(24px, 2.8vw, 38px) clamp(24px, 2.8vw, 38px) var(--r-tight) var(--r-tight); }
.site-footer::before { /* her tooling on the footer too */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; pointer-events: none;
  background: url("/img/tooling-600.webp") center / 420px auto repeat; filter: invert(1) sepia(.6);   /* no blend: see .band::before */
}
.line-card, .shop-card { background: #fffaf3; }

/* the promise strip: a leather strap laid across the gap under the hero */
main > .specs {
  z-index: 4; justify-self: center; border: 0; border-radius: 999px; outline-offset: -7px;
  width: min(1140px, calc(100% - 2 * var(--panel-x) - clamp(16px, 6vw, 120px)));
  margin: calc(-1 * clamp(20px, 2.4vw, 30px)) auto;
  box-shadow: var(--e-float), var(--rim-dark);
}
main > .specs ul { padding: 13px clamp(18px, 3vw, 40px); color: var(--on-dark-muted); gap: 8px 26px; font-size: .75rem; letter-spacing: .1em; }
@media (max-width: 700px) { main > .specs { border-radius: 22px; } main > .specs ul { gap: 6px 18px; } }

/* ---------- Split home hero: R&K | Money Run (Kelsey, 7 Oct 2026) ----------
   One leather field under the lamp, the Money Run teal bleeding in on a diagonal, crossed by a real braid. */
main > .split-hero {
  padding-top: var(--head, 0px); border-radius: clamp(22px, 2.8vw, 38px);
  background: radial-gradient(120% 90% at 18% 8%, rgb(255 186 118 / .15), transparent 62%), radial-gradient(150% 130% at 40% 20%, transparent 50%, rgb(6 4 2 / .5) 100%),
    linear-gradient(rgb(44 30 21 / .42), rgb(44 30 21 / .42)), var(--leather-dark), var(--espresso);
}
.split-hero .sh-rk, .split-hero .sh-mr, .split-hero .sh-art, .split-hero .sh-mrart { background: none; border: 0; }
.split-hero::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; display: none;
  background: radial-gradient(110% 100% at 82% 10%, #12403e, #0c2221 72%); }
.split-hero .sh-mr { position: relative; isolation: isolate; }
.split-hero .sh-mr::after { content: ""; position: absolute; inset: -44px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 100% at 75% 15%, #12403e, #0c2221 75%);
  -webkit-mask-image: linear-gradient(176deg, transparent 0, #000 76px, #000 calc(100% - 76px), transparent 100%);
          mask-image: linear-gradient(176deg, transparent 0, #000 76px, #000 calc(100% - 76px), transparent 100%); }
.split-hero .sh-rk { padding-bottom: 64px; }
.split-hero .sh-art { position: relative; padding-top: 44px; padding-bottom: clamp(48px, 6vw, 84px); }
.sh-seam { display: none; }
@media (min-width: 900px) {
  .split-hero::after { display: block;
    -webkit-mask-image: linear-gradient(84deg, transparent 45%, #000 55%);
            mask-image: linear-gradient(84deg, transparent 45%, #000 55%); }
  .split-hero .sh-mr::after { display: none; }
  .split-hero .sh-rk { padding-bottom: 20px; }
  .split-hero .sh-art { padding-top: 0; }
  .split-hero .sh-mrart { padding-bottom: clamp(48px, 6vw, 84px); }
  .sh-seam { display: block; position: absolute; left: 50%; top: 50%; width: 2000px; height: 36px; z-index: 1; pointer-events: none;
    transform: translate(-50%, -50%) rotate(84deg); filter: drop-shadow(4px 6px 8px rgb(0 0 0 / .5)); }
  .sh-seam svg { display: block; width: 100%; height: 100%; }
}
/* the hero hat: a photo card set down on the leather (tilts and drifts with motion.js) */
.sh-card { position: relative; rotate: -1deg; }
.split-hero .sh-art .sh-card svg { width: 100%; max-height: none; border-radius: 12px;
  box-shadow: 1px 2px 2px rgb(6 4 2 / .55), 6px 14px 26px -8px rgb(6 4 2 / .7), 16px 34px 60px -24px rgb(0 0 0 / .7); }
@media (min-width: 900px) { .sh-card { width: min(100%, 65.7vh); } }   /* 48vh tall at the photo's 960:701 */

/* ---------- Floating models ---------- */
.float-model { position: relative; z-index: 6; margin: 0; pointer-events: none; }   /* never in the way of a link; motion.js tilts them from window pointer moves */
.float-model img { display: block; width: 100%; height: auto; filter: drop-shadow(1px 2px 1px rgb(6 4 2 / .45)) drop-shadow(7px 14px 14px rgb(6 4 2 / .38)); }
.float-model::after { /* contact shadow on the bench, down and right of the object */
  content: ""; position: absolute; z-index: -1; left: 18%; right: 2%; bottom: -10%; height: 15%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(6 4 2 / .42), rgb(6 4 2 / .16) 60%, transparent);
}
.float-badge { aspect-ratio: 324 / 400; }
/* hero: the badge tossed on the bench beside the hat card, over its lower-left corner */
.float-badge-hero { position: absolute; z-index: 3; width: clamp(70px, 8vw, 120px); left: max(2px, calc(var(--gutter) - 30px)); bottom: clamp(18px, 2.6vw, 40px); rotate: -9deg; }
/* across the gap above "Made in Eckert" */
main > .float-badge-eckert { --bw: clamp(84px, 10vw, 148px); justify-self: end; width: var(--bw); margin-block: calc(var(--bw) * -.617);
  margin-inline-end: calc(var(--panel-x) + clamp(20px, 8vw, 140px)); rotate: 8deg; }
/* a braided strand draped across a gap */
main > .float-braid { --h: clamp(30px, 3.4vw, 46px); justify-self: center; width: min(1180px, 94%); height: var(--h); margin-block: calc(var(--h) / -2); rotate: -6deg; }
.float-braid .mr-braid { height: 100%; }
.float-braid .mr-braid svg { width: 100%; height: 100%; filter: drop-shadow(1px 3px 1px rgb(6 4 2 / .5)) drop-shadow(6px 14px 12px rgb(6 4 2 / .4)); }
.float-braid::after { left: 4%; right: 0; bottom: -45%; height: 55%; }
@media (max-width: 599px) { .float-hide-sm { display: none !important; } }
/* room either side of a draped braid, so its drift (motion.js parallax) never crosses the copy */
main > section:has(+ .float-braid) { padding-bottom: calc(var(--space) + clamp(28px, 4vw, 48px)); }
main > .float-braid + section { padding-top: calc(var(--space) + clamp(28px, 4vw, 48px)); }

/* ---------- Ghost words: the far plane, debossed into the panel ---------- */
.ghost-word { position: absolute; z-index: -1; margin: 0; pointer-events: none; user-select: none; white-space: nowrap;
  font: 400 clamp(5rem, 16vw, 14rem)/.82 var(--display); letter-spacing: .02em;
  color: rgb(107 58 30 / .045); text-shadow: -1px -1px 0 rgb(60 28 10 / .07), 1px 1px 0 rgb(255 252 246 / .55); }
main > .band .ghost-word { color: rgb(0 0 0 / .2); text-shadow: -1px -1px 0 rgb(0 0 0 / .4), 1px 1px 0 rgb(255 220 180 / .07); }
.gw-leather { right: -.04em; top: .26em; }
.gw-mr { right: -.03em; bottom: -.12em; }
.gw-eckert { right: -.03em; bottom: -.14em; }
@media (max-width: 599px) { .ghost-word { display: none; } }   /* phones: the copy runs full width, so the far plane would sit in it */

/* ---------- Depth type ---------- */
/* Laser-engraved headings on veg-tan, like the R&K badge: burnt brown in a crisp groove, its upper-left
   wall in shadow and its lower-right lip catching the lamp. Replaces the 8 Oct branding-iron char:
   her process is laser engraving. #3b2214 on the panel: 13:1. */
main > section:not(.band):not(.flip-band) :is(h1, h2):not(.mr-mark) {
  color: #3b2214; text-shadow: -1px -1px 0 rgb(28 12 4 / .3), 1px 1px 0 rgb(255 251 243 / .9);
}
.steps li::before { color: #4a2715; text-shadow: -1px -1px 0 rgb(28 12 4 / .3), 1px 1px 0 rgb(255 251 243 / .9); }
/* raised cream type on dark leather: a lit top-left edge, a stacked lift, a soft shadow down and right */
main > :is(.band, .flip-band) :is(h1, h2):not(.mr-mark) {
  color: #f7ecdc; text-shadow: -1px -1px 0 rgb(255 238 214 / .16), 1px 1px 0 rgb(8 5 3 / .75), 2px 3px 0 rgb(8 5 3 / .32), 5px 10px 16px rgb(0 0 0 / .42);
}
main > .band .mr-mark { text-shadow: 1px 1px 0 rgb(8 5 3 / .75), 2px 3px 0 rgb(8 5 3 / .32), 5px 10px 16px rgb(0 0 0 / .42); }
/* "burned into": a fresh laser mark, ember at rest (motion.js runs its one laser pass over it) */
.split-hero h1 em, .hero h1 em, .svc-hero h1 em {
  font-style: normal; color: #f2ab68;
  text-shadow: 0 0 6px rgb(255 140 50 / .28), 1px 1px 0 rgb(40 14 4 / .85), 2px 3px 0 rgb(8 5 3 / .3), 5px 10px 16px rgb(0 0 0 / .4);
}
em[data-laser] { position: relative; display: inline-block; white-space: nowrap; }
/* stamped eyebrows */
.eyebrow { letter-spacing: .16em; }
main > section:not(.band):not(.flip-band) .eyebrow { text-shadow: 1px 1px 0 rgb(255 251 243 / .85); }
main > :is(.band, .flip-band) .eyebrow { text-shadow: 1px 1px 0 rgb(0 0 0 / .6); }

/* ---------- Slice-flip band (home, under the hero) ----------
   motion.js lays .flip-tile cells over .flip-stage and sets only their inline position and transform.
   Each tile is two faces: the front word in cream on dark leather, the back word laser-burned into
   veg-tan, turned 180deg. Without the script the band shows the front word (painted, never blank). */
main > .flip-band { --flip-pt: clamp(46px, 5.4vw, 76px); --flip-h: clamp(110px, 17vw, 230px); --flip-fs: clamp(2.2rem, 9.2vw, 8.8rem);
  padding: var(--flip-pt) clamp(10px, 3vw, 40px) clamp(30px, 4vw, 56px); border-radius: var(--r-tight) clamp(26px, 3.2vw, 44px); }
.flip-stage { position: relative; max-width: 1160px; height: var(--flip-h, 200px); margin-inline: auto; perspective: 1100px; perspective-origin: 50% 40%; }
.flip-band:has(.flip-stage:empty)::before {
  content: attr(data-front); position: absolute; left: 0; right: 0; top: var(--flip-pt); height: var(--flip-h); display: flex; align-items: center; justify-content: center;
  font: 400 var(--flip-fs)/1 var(--display); letter-spacing: .02em; color: #f6e9d5; white-space: nowrap;
  text-shadow: -1px -1px 0 rgb(255 238 214 / .16), 1px 1px 0 rgb(8 5 3 / .75), 2px 3px 0 rgb(8 5 3 / .32), 5px 10px 16px rgb(0 0 0 / .42);
}
.flip-tile { position: absolute; transform-style: preserve-3d; }
.flip-face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 2px;
  font: 400 var(--flip-fs, 5rem)/1 var(--display); letter-spacing: .02em; }   /* flip.js reads this face's font to fit the words */
.flip-front { color: #f6e9d5; background: linear-gradient(rgb(36 24 17 / .45), rgb(36 24 17 / .45)), var(--leather-dark), var(--espresso-2);
  box-shadow: inset 1px 1px 0 rgb(255 226 190 / .08), inset -1px -1px 0 rgb(0 0 0 / .45); }
.flip-back { transform: rotateY(180deg); color: #3b2214; background: linear-gradient(rgb(226 190 146 / .5), rgb(226 190 146 / .5)), var(--leather-light), #d6ad80;
  box-shadow: inset 1px 1px 0 rgb(255 246 230 / .45), inset -1px -1px 0 rgb(107 58 30 / .3); }
.flip-face > * { position: absolute; white-space: nowrap; pointer-events: none; }
.flip-front > * { text-shadow: -1px -1px 0 rgb(255 238 214 / .16), 1px 1px 0 rgb(8 5 3 / .75), 2px 3px 0 rgb(8 5 3 / .32); }
.flip-back > * { text-shadow: -1px -1px 0 rgb(28 12 4 / .35), 1px 1px 0 rgb(255 246 230 / .7); }

/* ---------- Hat Builder orbit (home) ----------
   orbit.js fills [data-orbit] with one real link per colorway and sets each one's position, transform,
   opacity and stacking inline (it centres them itself), so .orbit-item here is size, card and focus ring only.
   Reduced motion: a still grid of the same links. No script: the box isn't shown. */
.orbit-showcase { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.orbit-showcase .section-head { margin-bottom: 0; }
@media (min-width: 900px) { main > .orbit-showcase { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.orbit { --orbit-card: clamp(66px, 7.6vw, 112px); position: relative; height: clamp(320px, 38vw, 520px); margin: clamp(12px, 3vw, 24px) var(--gutter) 0; perspective: 1000px; }
@media (min-width: 900px) { .orbit { margin: 0 var(--gutter) 0 0; } }
.orbit-item { position: absolute; left: 50%; top: 50%; display: block; width: var(--orbit-card); aspect-ratio: 960 / 701;
  border-radius: 10px; overflow: hidden; background: #e6d5bd; -webkit-user-drag: none;   /* a blank veg-tan tag until its photo arrives */
  box-shadow: 1px 2px 2px rgb(35 23 15 / .28), 5px 12px 20px -6px rgb(35 23 15 / .42); }
.orbit-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.orbit-item:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; z-index: 1000 !important; }
@media (prefers-reduced-motion: reduce) {
  .orbit { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 92px), 1fr)); gap: 10px; height: auto; perspective: none; }
  .orbit-item { position: static; margin: 0; width: auto; transform: none !important; opacity: 1 !important; filter: none !important; }
}
@media (scripting: none) { .orbit { display: none; } }

/* ---------- Bulk band, steps ---------- */
.bulk .tally { margin-top: 8px; }
/* the four steps are labels sewn onto one running thread, set down a little out of line */
.steps { position: relative; isolation: isolate; }
.steps::before { content: ""; position: absolute; z-index: -1; left: 8px; right: 8px; top: 44px; border-top: 2px dashed rgb(164 83 44 / .5); pointer-events: none; }
@media (min-width: 1000px) { .steps li:nth-child(even) { margin-top: 26px; } }
@media (max-width: 519px) { .steps::before { left: 34px; right: auto; top: 12px; bottom: 12px; border-top: 0; border-left: 2px dashed rgb(164 83 44 / .5); } }

@media print {
  body { background: #fff; } body::before, .float-model, .ghost-word, .sh-seam, .flip-band, .orbit, .band::before, .site-footer::before { display: none !important; }
  main { margin-top: 0; }
  main > section, main > .specs, .site-footer { background: #fff !important; color: #000; box-shadow: none; outline: 0; margin: 0; border-radius: 0; }
  main > section :is(h1, h2) { color: #000 !important; text-shadow: none !important; }
}

/* header: the leather badge (8 Oct 2026) is a 0.81:1 hexagon, not a square; it sits inside the pill's stitch */
.brand img { width: auto; height: 46px; filter: drop-shadow(1px 2px 2px rgb(0 0 0 / .5)) drop-shadow(3px 6px 8px rgb(0 0 0 / .3)); }
@media (max-width: 480px) { .brand img { width: auto; height: 42px; } }

/* ---------- Finish layer (Joe, 8 Oct 2026) ---------- */
/* Warm film grain over the whole page (HyperFrames grain-overlay, translated): fixed, very faint, never
   blocks input; the steps() jitter is off under reduced motion, where it is a still texture. */
body::after { content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .035;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .78 0 0 0 0 .58 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* grain is a still texture now: a blended, animated full-screen layer repainted every frame and made scrolling heavy (Joe, 8 Oct) */
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4%, -6%); } 40% { transform: translate(-8%, 4%); } 60% { transform: translate(5%, -8%); } 80% { transform: translate(-3%, 9%); } }
@media print { body::after { display: none; } }

/* Hat Builder: leather shimmer while a new photo loads (HyperFrames skeleton-reveal, translated),
   plus a one-time reveal when the stage first paints. Replaces the spinner. */
[data-hat-svg][data-loading]::after { content: ""; position: absolute; inset: 0; border-radius: 10px; width: auto; height: auto; margin: 0; border: 0; animation: none;
  background: linear-gradient(100deg, rgb(210 165 120 / 0) 20%, rgb(240 200 150 / .35) 45%, rgb(255 225 185 / .5) 50%, rgb(240 200 150 / .35) 55%, rgb(210 165 120 / 0) 80%) 0 0 / 240% 100%; }
@media (prefers-reduced-motion: no-preference) { [data-hat-svg][data-loading]::after { animation: hat-shimmer .9s linear infinite; } }
@keyframes hat-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: no-preference) {
  [data-hat-svg] { animation: hat-reveal .9s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes hat-reveal { from { opacity: 0; filter: blur(6px) sepia(.6); transform: scale(.985); } }
}

/* showcase panels */
.tunnel-panel { padding: 0 !important; overflow: clip; }
/* The tunnel's size lives here, not only in tunnel.css (which tunnel.js links after load): without it the panel
   is 0px tall until that file lands and the gallery below jumps down by ~62vh (/portfolio's layout shift). */
.tunnel { position: relative; height: clamp(320px, 62vh, 640px); overflow: clip; background: radial-gradient(60% 60% at 50% 50%, #1c130e, #0d0805 75%); }
.tunnel-panel .tunnel { border-radius: inherit; }
.brand-chain-wrap, .lines-panel .brand-chain { margin-top: 8px; }
/* A <figure> keeps the browser's 40px side margins otherwise, which widened the /contact column past a phone screen (the section clipped its right edge). */
.phone-wrap { margin: 0; }

/* Money Run readability on teal and dark leather (Joe, 8 Oct 2026): light mint labels, cream body copy,
   a soft shadow so small caps hold up over the paisley texture. #b6efe9 on #12403e is about 8:1. */
.split-hero .sh-mr .eyebrow, .split-hero .sh-mr .mr-mark small, .split-hero .sh-mark small,
.mr-hero .mr-mark small, .mr-hero .eyebrow, .band .mr-mark small, .mr-band .eyebrow, .mr-eyebrow.band { color: #b6efe9; text-shadow: 0 1px 2px rgb(0 0 0 / .55); }
.split-hero .sh-mr .sh-lede { color: #e8f4f2; text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.split-hero .sh-mr .mr-mark, .mr-hero .mr-mark { text-shadow: 0 2px 0 #06201e, 0 8px 18px rgb(0 0 0 / .5); }
.mr-hero .lede, .mr-band .lede { color: #f1e6d6; text-shadow: 0 1px 2px rgb(0 0 0 / .4); }

/* Brand plate (8 Oct 2026): the tooled-leather banner as its own floating panel under the hero */
main > section.brand-plate { padding: 0; margin: clamp(14px, 2vw, 24px) clamp(8px, 1.5vw, 20px); border-radius: clamp(16px, 2vw, 26px); overflow: clip; position: relative;
  background: #d9a877; box-shadow: inset 0 1px 0 rgb(255 240 220 / .35), 0 22px 44px -18px rgb(0 0 0 / .65), 0 6px 14px rgb(0 0 0 / .3); }
main > section.brand-plate::after { content: ""; position: absolute; inset: 10px; border: 2px dashed rgb(90 45 18 / .45); border-radius: calc(clamp(16px, 2vw, 26px) - 8px); pointer-events: none; }
main > section.brand-plate img { display: block; width: 100%; height: auto; aspect-ratio: 3168 / 1344; object-fit: cover; }


/* ==========================================================================
   Hero on the leather banner (Joe, 8 Oct 2026: "clean up the scroll heaviness").
   Desktop: R&K copy on dark leather at left, Money Run on teal at right, the carved badge clear in the
   middle. Phones: the banner is a strip on top, the two copies below it. No hat card, braid stack or seam.
   ========================================================================== */
.hero-banner { position: relative; isolation: isolate; overflow: clip; grid-template-areas: "bg" "rk" "mr"; }
.hero-banner::before, .hero-banner::after { display: none; }                 /* no paisley or teal layer: the banner is the surface */
.hero-banner .sh-bg { grid-area: bg; display: block; width: 100%; height: auto; aspect-ratio: 3168 / 1344; object-fit: cover; }
.hero-banner .sh-rk { background: radial-gradient(120% 100% at 25% 15%, #3a2a1f, var(--espresso) 72%); padding-bottom: clamp(26px, 5vw, 48px); }
.hero-banner .sh-mr { background: radial-gradient(120% 100% at 75% 15%, #12403e, #0c2221 75%); }
.hero-banner .sh-mr::after { display: none; }
.hero-banner .sh h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
@media (min-width: 900px) {
  .hero-banner { grid-template-columns: minmax(0, 1fr) minmax(240px, .9fr) minmax(0, 1fr); grid-template-areas: "rk . mr"; min-height: clamp(460px, 44vw, 600px); align-items: stretch; }
  .hero-banner .sh-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; aspect-ratio: auto; }
  .hero-banner .sh { align-content: center; padding-block: clamp(36px, 4vw, 64px); }
  .hero-banner .sh-rk { background: linear-gradient(90deg, rgb(22 14 9 / .94) 0%, rgb(22 14 9 / .9) 62%, rgb(22 14 9 / 0) 100%); padding-right: clamp(40px, 5vw, 90px); }
  .hero-banner .sh-mr { background: linear-gradient(270deg, rgb(8 36 34 / .95) 0%, rgb(8 36 34 / .9) 62%, rgb(8 36 34 / 0) 100%); padding-left: clamp(40px, 5vw, 90px); border: 0; }
  .hero-banner .sh-mr > .sh-braid { display: block; max-width: 360px; }
  .hero-banner .sh-lede { max-width: 38ch; }
}

/* Tighter rhythm (Joe, 8 Oct 2026: "negative space"): smaller section padding, the flip stage sized to its
   words (no empty tile rows above and below), and a shorter orbit box with less padding around it. */
:root { --space: clamp(40px, 3.4vw + 18px, 78px); }
main > .flip-band { --flip-pt: clamp(18px, 2.2vw, 32px); --flip-h: clamp(80px, 11vw, 160px); padding-bottom: clamp(18px, 2.2vw, 32px); }
main > .orbit-showcase { padding-block: clamp(26px, 3vw, 48px); }
.orbit { height: clamp(280px, 30vw, 420px); }

/* Footer, compact (Joe, 8 Oct 2026: "too large"). Draft 2 gave every footer link a 40px row for phones,
   which stacked the nine shop links into a tower on computers. Mouse: tight rows. Touch: 40px rows, but
   the shop links sit in two columns so the footer is about half as tall. */
.site-footer { font-size: .9rem; padding-block: clamp(28px, 3vw, 40px) 18px; }
.site-footer .cols { gap: 22px 40px; }
.site-footer h2 { margin-bottom: 8px; }
.site-footer p { margin-block: 0 8px; }
.site-footer li a, .site-footer li:not(:has(a)) { padding-block: 3px; }
.site-footer .legal { margin-top: 22px; padding-top: 14px; }
@media (pointer: coarse) {
  .site-footer li a { padding-block: 10px; }
  .site-footer .cols > div:nth-child(2) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

/* ==========================================================================
   Kelsey's photos and her Money Run logo (8 Oct 2026, Draft 2 pass 3). Nothing here animates: the gallery
   tiles use the existing one-time .rise, and the rope "$" and the post cut-out are floating models (motion.js).
   ========================================================================== */
/* Her logo replaces the MONEY RUN text wordmark. The heading or paragraph holding it is only a frame; the image's
   alt carries the words. Cream ink sits on teal and dark leather with the raised-type shadow; espresso ink on light. */
.mr-logo { margin: 0; line-height: 0; }
.mr-logo-img { display: block; width: 100%; height: auto; }
/* .split img frames a photo (4:5 crop, rounded, shadow); a logo or a cut-out in a .split keeps its own shape */
.split .mr-logo-img, .split .float-model img { aspect-ratio: auto; object-fit: fill; border-radius: 0; box-shadow: none; }
.band .mr-logo-img, .sh-mr .mr-logo-img { filter: drop-shadow(1px 2px 0 rgb(6 20 18 / .7)) drop-shadow(4px 10px 14px rgb(0 0 0 / .4)); }
.sh-logo { width: min(100%, 380px); margin-block: 2px 4px; }
.mr-logo-xl { width: min(100%, 680px); margin-block: 14px 22px; }
.mr-band-logo { width: min(100%, 420px); }
.mr-aside-logo { width: min(100%, 300px); }

/* /money-run: the rope "$" from her logo, hung at the right of the hero on wide screens only (lazy, so it is
   never fetched where it is hidden). It drifts with scroll and leans toward the mouse (motion.js). */
.mr-hero .mr-dollar { display: none; }
@media (min-width: 1000px) {
  .mr-hero .mr-dollar { display: block; position: absolute; z-index: 1; right: clamp(40px, 8vw, 150px); top: calc(var(--nav-h) + clamp(36px, 4vw, 72px));
    width: clamp(140px, 13vw, 200px); rotate: 9deg; }
}
/* /money-run gallery: a masonry of columns, every photo at its own shape (width and height set, so no shift). */
.mr-gallery { columns: 2; column-gap: 10px; }
@media (min-width: 700px) { .mr-gallery { columns: 3; column-gap: 14px; } }
@media (min-width: 1000px) { .mr-gallery { columns: 4; } }
.mr-gallery figure { break-inside: avoid; margin: 0 0 14px; display: grid; gap: 6px; }
.mr-gallery img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--hide); }
.mr-gallery figcaption, .work-photos figcaption { font: 500 .72rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* the lineup's reins card: her photo where the other cards draw a braid */
.mr-item .mr-item-photo { width: calc(100% + 16px); max-width: none; margin: -6px -8px 6px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
/* home Money Run band: her reins on a post, cut out, stood in the band like the braids that cross the gaps. The post
   is a narrow strip of the frame and the reins are dark, so a warm pool of lamp light sits behind it. */
.mr-band .mr-post { justify-self: center; width: clamp(220px, 28vw, 360px); rotate: 3deg; }
.mr-band .mr-post::before { content: ""; position: absolute; inset: 2% 6%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 196 130 / .22), rgb(255 196 130 / .08) 55%, transparent); }

/* Portfolio: a landscape photo spans two columns instead of being cropped to a portrait tile; dense packing fills
   the hole it would leave. Every tile fills its row, so a portrait tile beside a wide one has no gap under it. */
.gallery { grid-auto-flow: dense; }
.gallery .piece img { height: 100%; }
.piece.wide { grid-column: span 2; }
.piece.wide img { aspect-ratio: 3 / 2; }

/* /embroidery: her machine mid-stitch beside the finished beanie; the photo slots still to fill follow. */
.work-photos { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 760px) { .work-photos { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); } }
.work-photos figure { margin: 0; display: grid; gap: 8px; }
.work-photos img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.work-photos + .photo-slots { margin-top: 24px; }


/* "What we make": five leather cards with real photos (Joe, 8 Oct 2026). Computers: all five in a row, a small
   lift and tilt under the mouse. Phones: a swipe row that snaps card by card, with the next card peeking in. */
.pline { list-style: none; margin: clamp(20px, 3vw, 36px) 0 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pline li { min-width: 0; display: flex; }
.pl-card { position: relative; display: flex; flex-direction: column; width: 100%; padding: 10px 10px 16px; border-radius: 16px; text-decoration: none; color: #2e170b;
  background: url("/img/leather-light.webp") 0 0 / 320px, linear-gradient(135deg, #f2dfc4, #dcb68c); background-blend-mode: multiply;
  box-shadow: inset 2px 2px 0 rgb(255 240 220 / .45), inset -3px -3px 6px rgb(60 25 8 / .3), 0 18px 30px -16px rgb(0 0 0 / .55), 0 4px 10px rgb(0 0 0 / .18);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s; }
.pl-card::before { content: ""; position: absolute; inset: 6px; border: 2px dashed rgb(90 45 18 / .5); border-radius: 12px; pointer-events: none; }
.pl-photo { display: block; aspect-ratio: 4 / 3.4; border-radius: 10px; overflow: hidden; background: #2a1c14; box-shadow: inset 0 0 0 1px rgb(40 15 5 / .25), 0 2px 4px rgb(0 0 0 / .25); }
.pl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-body { position: relative; display: grid; gap: 4px; padding: 14px 8px 0; }
.pl-eyebrow { font: 500 .7rem/1.3 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: #4a240f; }
.pl-body b { font: 400 clamp(1.1rem, .85rem + .7vw, 1.4rem)/1.12 var(--display, serif); color: #3a1c0c; text-shadow: 0 -1px 0 rgb(30 10 2 / .3), 0 1px 0 rgb(255 236 214 / .5); }
.pl-price { font-weight: 600; font-size: .9rem; color: #2a1408; }
.pl-go { font-weight: 700; font-size: .86rem; color: #5c2a0f; margin-top: 2px; }
.pl-card:focus-visible { outline: 3px solid var(--rust, #a4532c); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pl-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: inset 2px 2px 0 rgb(255 240 220 / .45), inset -3px -3px 6px rgb(60 25 8 / .3), 0 28px 40px -18px rgb(0 0 0 / .6), 0 6px 14px rgb(0 0 0 / .2); }
  .pline li:nth-child(even) .pl-card:hover { transform: translateY(-6px) rotate(.6deg); }
}
@media (max-width: 999px) and (min-width: 640px) { .pline { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .pline { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; padding: 4px 4px 18px; margin-inline: -4px; overscroll-behavior-x: contain; }
  .pline li { flex: 0 0 72%; scroll-snap-align: start; }
}


/* ==========================================================================
   Shirt Builder + Engraving Builder links and Kelsey's price tables (8 Oct 2026). The builder pages' own styles are in
   design-builder.css, linked only from those two pages.
   ========================================================================== */
/* Her DTF table (/dtf-printing, /shirt-builder): one row per blank, quantity breaks across; scrolls sideways on a phone
   rather than squeezing. A row sold online links to the Shirt Builder; a quote-only row says "by quote". */
.tbl { overflow-x: auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); margin-block: 4px 8px; -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; min-width: 440px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
.price-table th, .price-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.price-table thead th { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.price-table tbody th { font-weight: 600; }
.price-table tbody th small { display: block; font: 500 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.price-table tr:last-child > * { border-bottom: 0; }
/* /shop: the three builders above the product grid */
.builders-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 22px; }
.builders-strip .eyebrow { margin: 0; }
/* product pages: "Design it in the builder" under the price */
.product-head .btn.small { justify-self: start; }


/* Portfolio grid, even (Joe, 8 Oct 2026: "not loading clean"). Same-size tiles in fixed columns (3 on computers,
   2 on phones; 18 pieces fill every row), no two-column spans, and dark leather behind each photo while it loads
   instead of a flat black tile. The home page's .gallery keeps its own layout. */
.gallery.pf-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.gallery.pf-grid .piece.wide { grid-column: auto; }
.gallery.pf-grid .piece img, .gallery.pf-grid .piece.wide img { height: auto; aspect-ratio: 4 / 5; }
.gallery.pf-grid .piece { background: #2a1c14 url("/img/leather-dark.webp") 0 0 / 300px; }
@media (max-width: 899px) { .gallery.pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* Kelsey's notes, 10 Oct 2026 ----------------------------------------------------------------------------------- */
/* "stitched" in the hero (Kelsey, 10 Oct 2026; Joe: the stitch lines above and below overlapped the next lines).
   Everything stays inside the letters now: they open as a thin thread outline, then fill with satin-stitch thread
   from left to right, one stitch at a time, the way embroidery fills a letter. The shadow moves to a filter because
   a text-shadow would show through the transparent fill. Reduced motion, or no background-clip: filled at once. */
.stitched { font-style: normal; display: inline-block; white-space: nowrap; text-shadow: none;
  color: #f2ab68; -webkit-text-stroke: .018em rgb(242 171 104 / .85);
  background: repeating-linear-gradient(118deg, #f6c48c 0 .045em, #f2ab68 .045em .075em, #b56a32 .075em .1em) 0 0 / 0% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(1px 1px 0 rgb(40 14 4 / .85)) drop-shadow(3px 6px 8px rgb(0 0 0 / .35));
  animation: rk-embroider 1.8s steps(14, end) 1.1s forwards; }
@keyframes rk-embroider { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .stitched { animation: none; background-size: 100% 100%; } }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) { .stitched { -webkit-text-fill-color: currentColor; } }

/* A real Money Run braid under the Money Run half of the home hero (her Desert Turquoise close-up). */
.sh-braid-photo { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 288; object-fit: cover; border-radius: 999px;
  box-shadow: 0 10px 22px -10px rgb(0 0 0 / .65), 0 2px 4px rgb(0 0 0 / .35); }

/* Braid designer: the real braid beside a slot for her tie-down photo, under "Pick 1, 2 or 4 colors". */
.mr-real-row { display: grid; gap: clamp(12px, 2vw, 22px); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; margin-bottom: clamp(16px, 2.4vw, 28px); }
.mr-real { margin: 0; display: grid; gap: 8px; align-content: center; }
.mr-real img { display: block; width: 100%; height: auto; border-radius: 999px; box-shadow: 0 10px 22px -10px rgb(0 0 0 / .55); }
.mr-real figcaption { font-size: .9rem; color: var(--muted, #5f4b3d); }
.mr-tiedown { margin: 0; display: grid; place-items: center; min-height: 120px; border: 2px dashed rgb(164 83 44 / .45); border-radius: 14px; padding: 12px; text-align: center; }
@media (max-width: 639px) { .mr-real-row { grid-template-columns: minmax(0, 1fr); } }

/* Her tie-down photo in the braid designer's slot, and her embroidered hats on /embroidery (Etsy photos, 10 Oct 2026). */
.mr-tiedown.has-photo { border: 0; padding: 0; min-height: 0; display: grid; gap: 6px; place-items: stretch; text-align: left; }
.mr-tiedown.has-photo img { display: block; width: 100%; height: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; box-shadow: 0 10px 22px -10px rgb(0 0 0 / .55); }
.mr-tiedown.has-photo figcaption { font-size: .9rem; color: var(--muted, #5f4b3d); }
.emb-more { display: grid; gap: clamp(10px, 1.6vw, 18px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emb-more figure { margin: 0; display: grid; gap: 6px; }
.emb-more img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius, 14px); box-shadow: var(--shadow); }
.emb-more figcaption { font-size: .9rem; color: var(--muted, #5f4b3d); }
@media (max-width: 639px) { .emb-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } .emb-more figure:last-child { grid-column: 1 / -1; } }


/* Navigation aids (Joe, 10 Oct 2026): search, back to top, breadcrumbs ---------------------------------------- */
.search-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  padding: 8px; min-height: 44px; min-width: 44px; border-radius: 10px; }
.search-btn svg, .header-search-mobile svg { width: 21px; height: 21px; }
.search-btn:hover { color: var(--natural, #d2a578); }
.search-btn .search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.header-search-mobile { display: none; order: 2; background: none; border: 0; color: var(--on-dark); padding: 8px; min-height: 44px; min-width: 44px; cursor: pointer; border-radius: 10px; }
@media (max-width: 1199px) { .header-search-mobile { display: inline-flex; align-items: center; justify-content: center; } .nav .search-btn { display: none; } }

.search-dialog { width: min(640px, calc(100vw - 24px)); max-height: min(80vh, 640px); margin: 8vh auto auto; padding: 0; border: 0; border-radius: 16px;
  background: var(--paper, #fbf7f0); color: var(--ink, #23170f); box-shadow: 0 30px 60px rgb(0 0 0 / .5); overflow: hidden; }
.search-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.search-dialog::backdrop { background: rgb(20 12 8 / .62); backdrop-filter: blur(3px); }
.search-form { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line, #e3d3bd); }
.search-form input { flex: 1; min-width: 0; min-height: 48px; font: inherit; font-size: 1.05rem; padding: 10px 14px; border: 1.5px solid #c9b08e; border-radius: 12px; background: #fff; color: inherit; }
.search-close { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; background: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--muted, #5f4b3d); }
.search-hint { margin: 0; padding: 10px 18px 0; font: 500 .72rem var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #5f4b3d); }
.search-results { list-style: none; margin: 0; padding: 8px; overflow: auto; overscroll-behavior: contain; }
.search-results a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; }
.search-results a:hover, .search-results a:focus-visible { background: #f1e5d3; outline: none; }
.search-results b { font-size: 1rem; }
.search-results small { color: var(--muted, #5f4b3d); font-size: .86rem; line-height: 1.45; }
.search-results mark { background: #f3d58a; color: inherit; border-radius: 2px; }
.search-results .sr-path { font: 500 .66rem var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #8a5530; }

.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 45;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
  background: var(--espresso, #1c130e); color: #f4e8d6; border: 1.5px dashed rgb(210 165 120 / .65); box-shadow: 0 10px 22px -8px rgb(0 0 0 / .65);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--natural, #d2a578); }
.to-top:focus-visible { outline: 3px solid var(--natural, #d2a578); outline-offset: 3px; }
.to-top svg { width: 22px; height: 22px; }
body:has(.builder-bar) .to-top { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print { .to-top, .search-btn, .header-search-mobile, .crumbs-nav { display: none !important; } }

.crumbs-nav { width: min(1180px, calc(100% - 2 * var(--panel-x, 16px))); margin: 6px auto -6px; padding: 0 8px; position: relative; z-index: 1; }
.crumbs-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 8px; font: 500 .72rem/1.4 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #cdb08a; }
.crumbs-nav li + li::before { content: "›"; margin-right: 8px; color: #9a7a58; }
.crumbs-nav a { display: inline-block; padding-block: 12px; color: #f4e8d6; text-decoration: none; }
.crumbs-nav a:hover { text-decoration: underline; }
.crumbs-nav [aria-current] { padding-block: 12px; }
/* Phone header with the search button (10 Oct 2026): four items share the row, so the gaps tighten, the brand
   takes the leftover space and its name scales down on the narrowest phones. */
@media (max-width: 1199px) {
  .site-header .wrap { gap: 6px; }
  .site-header .brand { margin-right: auto; min-width: 0; }
  .header-search-mobile { min-width: 42px; padding: 6px; }
  .header-cart-mobile { padding-inline: 4px; }
}
@media (max-width: 420px) {
  .site-header .brand span { font-size: clamp(.92rem, 4.6vw, 1.12rem); white-space: nowrap; }
  .site-header .brand img { width: 36px; height: auto; }
}
@media (max-width: 359px) {
  .site-header .wrap { gap: 2px; }
  .site-header .brand { gap: 6px; }
  .site-header .brand span { font-size: .86rem; }
  .header-search-mobile { min-width: 40px; padding: 4px; }
}