:root{
    --bg:#221812;
    --bg-alt:#1b130e;
    --surface:#2c211a;
    --surface-2:#382a20;
    --text:#efe6d8;
    --text-dim:#c4b39d;
    --text-faint:#8f7c67;
    --accent:#cd9c4c;
    --accent-strong:#e8bd72;
    --accent-2:#b8564a;
    --border:rgba(239,230,216,0.14);
    --border-strong:rgba(239,230,216,0.24);
    --shadow-sm:0 1px 2px rgba(10,6,3,0.4), 0 1px 1px rgba(10,6,3,0.28);
    --shadow-md:0 6px 16px rgba(10,6,3,0.4), 0 2px 6px rgba(10,6,3,0.3);
    --shadow-lg:0 20px 44px rgba(10,6,3,0.5), 0 8px 18px rgba(10,6,3,0.35);
    color-scheme:dark;
    --emboss: 0 1px 0 rgba(255,255,255,.14), 0 -1px 1px rgba(0,0,0,.45);

    /* neutral, theme-independent tokens */
    --ease-out:cubic-bezier(0.16,1,0.3,1);
    --ease-soft:cubic-bezier(0.25,1,0.5,1);
    --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --sp-7:64px; --sp-8:96px;
    --r-sm:4px; --r-md:8px; --r-lg:14px; --r-pill:999px;
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.47 0 0 0 0 0.35 0 0 0 0 0.24 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* diamond quilting — the Chesterfield-tuft motif of worked leather, laid faintly across the page */
    --quilt-a: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 55%, transparent) 0px, color-mix(in srgb, var(--accent) 55%, transparent) 1px, transparent 1px, transparent 84px);
    --quilt-b: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 55%, transparent) 0px, color-mix(in srgb, var(--accent) 55%, transparent) 1px, transparent 1px, transparent 84px);
    /* fine pore texture — a second, tighter grain for card surfaces, distinct from the page-level diamond quilt */
    --grain-fine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.47 0 0 0 0 0.35 0 0 0 0 0.24 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
    /* hardware — hand-set rivets/studs, reused at frame corners, product indices and the process "belt" */
    --rivet-bg: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--accent-strong) 85%, white 15%), var(--accent) 55%, color-mix(in srgb, var(--accent) 55%, black 30%) 100%);
    --rivet-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 0.5px 0.5px rgba(255,255,255,.55);
    /* western marks. --star-mark stays fixed-color SVG line art (background images
       can't read CSS vars). --horns-mark went through two versions: first a
       hand-drawn abstraction that didn't read as a bull, then a crop pulled out of
       the shield logo (horn tips clipped by the shield's own frame). This is now a
       clean standalone illustration the owner supplied directly (img/bullskin-bull-
       head-mark-2.png) — full head anfas, both horns whole from root to tip, ears,
       brows, eyes, muzzle and the beard tuft, on nothing but white, so the bbox crop
       and alpha threshold below give near-black line art with no shield/lettering to
       cut around. Same alpha-only-art-through-mask-image mechanism as before, so it
       still tints with background-color:var(--accent-2) on both themes. */
    --horns-mark:url("/assets/img/horns-mark.png");
    --star-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239c6b2e' d='M12 2l2.9 7.5 7.5.3-6 4.8 2.1 7.4L12 17.6l-6.5 4.4 2.1-7.4-6-4.8 7.5-.3z'/%3E%3C/svg%3E");
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg:#efe7d8;
      --bg-alt:#e6dcc8;
      --surface:#fbf7ef;
      --surface-2:#f2ead9;
      --text:#241a12;
      --text-dim:#5b4a38;
      --text-faint:#8a755c;
      --accent:#8c5a18;
      --accent-strong:#6e4512;
      --accent-2:#7a2a22;
      --border:rgba(36,26,18,0.14);
      --border-strong:rgba(36,26,18,0.26);
      --shadow-sm:0 1px 2px rgba(36,26,18,0.12), 0 1px 1px rgba(36,26,18,0.08);
      --shadow-md:0 6px 16px rgba(36,26,18,0.14), 0 2px 6px rgba(36,26,18,0.1);
      --shadow-lg:0 24px 48px rgba(36,26,18,0.2), 0 8px 18px rgba(36,26,18,0.12);
      color-scheme:light;
      --emboss: 0 1px 0 rgba(255,255,255,.75), 0 -1px 1px rgba(60,40,18,.16);
      --emboss-burn: 0 1px 0 rgba(255,255,255,.6), 0 -1px 1px rgba(60,40,18,.28), 0 0 16px color-mix(in srgb, var(--accent-2) 38%, transparent);
    }
  }
  :root[data-theme="light"]{
    --bg:#efe7d8;
    --bg-alt:#e6dcc8;
    --surface:#fbf7ef;
    --surface-2:#f2ead9;
    --text:#241a12;
    --text-dim:#5b4a38;
    --text-faint:#8a755c;
    --accent:#8c5a18;
    --accent-strong:#6e4512;
    --accent-2:#7a2a22;
    --border:rgba(36,26,18,0.14);
    --border-strong:rgba(36,26,18,0.26);
    --shadow-sm:0 1px 2px rgba(36,26,18,0.12), 0 1px 1px rgba(36,26,18,0.08);
    --shadow-md:0 6px 16px rgba(36,26,18,0.14), 0 2px 6px rgba(36,26,18,0.1);
    --shadow-lg:0 24px 48px rgba(36,26,18,0.2), 0 8px 18px rgba(36,26,18,0.12);
    color-scheme:light;
    --emboss: 0 1px 0 rgba(255,255,255,.75), 0 -1px 1px rgba(60,40,18,.16);
    --emboss-burn: 0 1px 0 rgba(255,255,255,.6), 0 -1px 1px rgba(60,40,18,.28), 0 0 16px color-mix(in srgb, var(--accent-2) 38%, transparent);
  }
  :root[data-theme="dark"]{
    --bg:#221812;
    --bg-alt:#1b130e;
    --surface:#2c211a;
    --surface-2:#382a20;
    --text:#efe6d8;
    --text-dim:#c4b39d;
    --text-faint:#8f7c67;
    --accent:#cd9c4c;
    --accent-strong:#e8bd72;
    --accent-2:#b8564a;
    --border:rgba(239,230,216,0.14);
    --border-strong:rgba(239,230,216,0.24);
    --shadow-sm:0 1px 2px rgba(10,6,3,0.4), 0 1px 1px rgba(10,6,3,0.28);
    --shadow-md:0 6px 16px rgba(10,6,3,0.4), 0 2px 6px rgba(10,6,3,0.3);
    --shadow-lg:0 20px 44px rgba(10,6,3,0.5), 0 8px 18px rgba(10,6,3,0.35);
    color-scheme:dark;
    --emboss: 0 1px 0 rgba(255,255,255,.14), 0 -1px 1px rgba(0,0,0,.45);
    --emboss-burn: 0 1px 0 rgba(255,255,255,.12), 0 -1px 1px rgba(0,0,0,.55), 0 0 18px color-mix(in srgb, var(--accent-2) 45%, transparent);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  body{
    margin:0;
    background-color:var(--bg);
    background-image:
      var(--grain),
      var(--quilt-a),
      var(--quilt-b),
      linear-gradient(155deg, transparent 55%, color-mix(in srgb, var(--bg-alt) 55%, transparent) 100%),
      radial-gradient(ellipse 1100px 650px at 92% -12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
      radial-gradient(ellipse 820px 620px at -10% 34%, color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 70%),
      radial-gradient(ellipse 140% 90% at 50% 38%, transparent 58%, color-mix(in srgb, var(--bg-alt) 72%, transparent) 100%);
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 180px 180px, auto, auto, auto, auto, auto, auto;
    background-position: center, center, center, center, center, center, center;
    background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed;
    background-blend-mode: overlay, overlay, overlay, normal, normal, normal, normal;
    color:var(--text);
    font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding-inline: clamp(16px, 5vw, 64px);
  }

  .wrap{max-width:1180px; margin-inline:auto;}

  a{color:inherit;}
  img{max-width:100%; display:block;}

  h1,h2{
    /* Bitter (variable, 400-900) replaces Yeseva One as the display face here: Yeseva
       reads as elegant art-deco, not wood-type western — Bitter's heavy cut is a slab
       serif with genuine Cyrillic support (Ultra/Alfa Slab One/Passion One/Rye/Anton/
       Bebas Neue were all checked and are Latin-only, so they silently drop Russian
       text — verified against each family's Google Fonts subset metadata). Yeseva One
       stays only on the small nav/footer logotype. */
    font-family:'Bitter', 'PT Serif', Georgia, 'Times New Roman', serif;
    font-weight:700;
    line-height:1.05;
    margin:0;
    text-wrap:balance;
    letter-spacing:-0.01em;
    text-shadow:var(--emboss); /* faint tisnenie — letters pressed into the material, not printed on it */
  }
  h1{ font-weight:900; } /* the biggest headline on each page gets the heaviest cut; h2 stays at 700 so hierarchy reads through weight, not just size */
  h3{
    font-family:'Manrope', system-ui, sans-serif;
    font-weight:800;
    line-height:1.2;
    margin:0;
    text-wrap:balance;
  }

  .eyebrow{
    font-size:0.75rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:700;
    margin:0 0 var(--sp-2);
  }

  .lede{
    font-size:clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    color:var(--text-dim);
    max-width:52ch;
  }

  .prose{max-width:60ch;}
  .prose p{margin:0 0 var(--sp-3);}
  .prose p:last-child{margin-bottom:0;}
  .prose ul{margin:0 0 var(--sp-3); padding-left:20px;}
  .prose li{margin-bottom:6px;}
  .prose dl{margin:0 0 var(--sp-3); display:grid; gap:var(--sp-2);}
  .prose dt{font-weight:700; color:var(--text);}
  .prose dd{margin:0; color:var(--text-dim);}

  /* accessibility */
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:100;
    background:var(--accent); color:var(--bg-alt);
    padding:10px 18px; font-size:0.875rem; font-weight:600;
    text-decoration:none; border-radius:0 0 var(--r-sm) 0;
  }
  .skip-link:focus{left:0;}
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent-strong); outline-offset:3px; border-radius:2px;
  }

  /* stitch motif — the workshop's thread, used sparingly at major seams */
  .stitch{
    position:relative;
    height:1px; width:100%;
    background:linear-gradient(90deg, transparent, var(--border-strong) 12%, var(--border-strong) 88%, transparent);
  }
  .stitch::before{
    content:""; position:absolute; left:0; right:0; top:-3px; height:7px;
    background-image: radial-gradient(circle at 3px 3px, var(--accent-2) 1.4px, transparent 1.6px);
    background-size: 14px 7px; background-repeat: repeat-x; background-position: left center;
    opacity:.6;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .stitch-v{
    position:absolute; left:0; top:4px; bottom:4px; width:6px;
    background-image: radial-gradient(circle at 3px 3px, var(--accent-2) 1.4px, transparent 1.6px);
    background-size: 6px 14px; background-repeat: repeat-y;
    opacity:.5;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  }

  /* saddle-stitch edge — a second, inset running line on cards/panels, echoing double-needle leather stitching */
  .benefit, .tease-card, .contact-card{
    position:relative;
    background-color:var(--surface);
    background-image:var(--grain-fine);
    background-blend-mode:overlay;
    background-size:120px 120px;
    background-repeat:repeat;
  }
  .catalog-cta{position:relative;}
  .benefit::after, .tease-card::after, .contact-card::after, .catalog-cta::after{
    content:""; position:absolute; inset:6px; border-radius:inherit;
    border:1px dashed color-mix(in srgb, var(--accent) 48%, transparent);
    opacity:.55; pointer-events:none;
  }

  /* small leather swing-tag — reused as an overlapping accent, not just for prices */
  .leather-tag{
    position:absolute;
    background:var(--surface);
    border:1px solid var(--border-strong);
    color:var(--text-dim);
    font-size:0.6875rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
    padding:9px 14px 9px 22px;
    clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
    box-shadow:var(--shadow-md);
  }
  .leather-tag::before{
    content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%);
    width:4px; height:4px; border-radius:50%; background:var(--bg);
    border:1px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  }

  /* mounted-corner frame for hero / featured imagery — hardware studs, not architectural brackets */
  .frame{position:relative;}
  .frame::before, .frame::after{
    content:""; position:absolute; width:13px; height:13px; border-radius:50%;
    background:var(--rivet-bg); box-shadow:var(--rivet-shadow); pointer-events:none; z-index:2;
  }
  .frame::before{top:11px; left:11px;}
  .frame::after{bottom:11px; right:11px;}

  @keyframes riseIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
  @keyframes pageIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
  .page.route-enter{animation:pageIn .5s var(--ease-out) both;}

  /* header */
  header.site{
    position:sticky; top:0; z-index:20;
    backdrop-filter:blur(10px);
    background:color-mix(in srgb, var(--bg) 84%, transparent);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    padding-block:var(--sp-3); gap:var(--sp-4);
  }
  .logo{
    font-family:'Yeseva One', 'PT Serif', Georgia, serif;
    font-style:normal;
    font-weight:400;
    font-size:1.25rem;
    display:inline-flex; align-items:center; gap:11px;
    text-decoration:none;
  }
  .logo-text{display:flex; flex-direction:column; line-height:1.08;}
  /* third pass at this mark, per the owner's own instruction: no medallion, no
     circle, no rounded tag — none of that is a container, all of it is a shape
     that can crop a tall badge at some fill percentage or another. The PNG
     (/assets/img/logo.png) already ships with a transparent background — that
     transparency IS the mask, nothing needs to composite it into a circle/tag
     again — so this is just the image, sized by height with width:auto so
     nothing stretches or gets clipped. Verified pixel-by-pixel (System.Drawing,
     not eyeballed) that the anti-aliased edge along the shield's black linework
     carries the line's own dark RGB (≈40,34,28) at every partial-alpha step, not
     a stray white/light RGB under partial alpha — so there is no light halo baked
     into the asset to show up against the dark header. */
  .logo img{ height:48px; width:auto; flex-shrink:0; display:block; }
  /* the artwork itself is near-black linework (verified ≈#282422) on a transparent
     field — reads fine over the light theme's cream header, but on the dark theme
     it sits at roughly 3% luminance against a ~13% luminance background: technically
     present, practically invisible (checked head-on in a real render, not assumed).
     No frame/background-plate is being reintroduced to fix that — this is a filter
     on the image itself, so a flat invert (the line art has no color of its own to
     preserve) turns the same pixels light instead, matching how --horns-mark already
     gets its color from CSS rather than the asset. Scoped to dark only, both via the
     system preference and the explicit data-theme override, same pattern as the
     palette tokens above; light theme is untouched here — .hero-seal (the same
     mark stamped on the hero photo) carries its own always-on invert further
     down, independent of this theme switch, because it answers to the photo's
     own dark corner, not to the page theme. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .logo img{ filter:invert(1) brightness(1.12); }
  }
  :root[data-theme="dark"] .logo img{ filter:invert(1) brightness(1.12); }
  .logo small{
    font-family:'Manrope', sans-serif;
    font-style:normal;
    font-weight:700;
    font-size:0.5625rem;
    letter-spacing:0.13em;
    color:var(--text-faint);
    margin-top:3px;
  }
  nav.primary{display:flex; gap:var(--sp-2); flex-wrap:wrap;}
  nav.primary a{
    font-size:0.9rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    text-decoration:none;
    color:var(--text-dim);
    padding:9px 20px;
    border-radius:var(--r-pill);
    background-color:var(--surface);
    background-image:var(--grain-fine);
    background-blend-mode:overlay;
    background-size:120px 120px;
    border:1px solid var(--border);
    box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), var(--shadow-sm);
    transition:color .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  }
  nav.primary a:hover{
    color:var(--accent-strong);
    border-color:var(--accent);
    transform:translateY(-1px);
    box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), var(--shadow-md);
  }
  nav.primary a:active{transform:translateY(0);}
  nav.primary a[aria-current="page"]{
    color:var(--bg-alt);
    background-color:var(--accent);
    border-color:var(--accent);
  }

  /* hero */
  .hero{
    position:relative;
    /* the bull mark now lives site-wide on .site-bull-bg, not inside .hero — this
       stays only to keep the section's own edges (hero-media's diagonal clip,
       riseIn animation transforms) tidy, never to crop the bull any more */
    overflow:hidden;
    display:grid;
    grid-template-columns:44fr 56fr;
    gap:clamp(20px,3.5vw,48px);
    align-items:center;
    padding-block: clamp(28px, 4vw, 48px) clamp(28px, 3vw, 40px);
  }
  .hero-copy{
    position:relative;
    padding-left:28px;
    /* legibility scrim for the h1/lede/buttons now that the bull silhouette runs
       the full width of the hero behind them, not just a small patch of this
       column: a soft wash in --bg's own tone, opaque near the text and fading
       to nothing at the column's own edges, so it reads as depth/vignette rather
       than a pasted-on box. Sits above the bull automatically — plain background,
       no z-index needed — since element backgrounds always paint above an
       ancestor's negative-z-index generated content. */
    background:radial-gradient(ellipse 135% 115% at 22% 42%, color-mix(in srgb, var(--bg) 86%, transparent) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 48%, transparent 78%);
  }
  .hero-strapline{
    font-family:'Manrope', sans-serif;
    font-style:italic;
    font-weight:500;
    font-size:clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem);
    color:var(--text-dim);
    max-width:38ch;
    margin:0 0 var(--sp-3);
    line-height:1.4;
  }
  .hero-strapline strong{color:var(--text); font-weight:600; font-style:normal;}
  .hero h1{
    /* the page's one signature typographic moment: pushed well past the other headings
       (5.5rem max vs. 3.75rem before) and set in caps — western headlines are wood-type
       caps, not mixed case — with open tracking so Cyrillic caps don't collide */
    font-size:clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);
    margin-bottom:var(--sp-3);
    text-transform:uppercase;
    letter-spacing:0.005em;
    line-height:1.02;
  }
  .hero .eyebrow{animation:riseIn .7s var(--ease-out) both;}
  .hero h1{animation:riseIn .8s var(--ease-out) .08s both;}
  .hero .hero-strapline{animation:riseIn .8s var(--ease-out) .12s both;}
  .hero .lede{animation:riseIn .8s var(--ease-out) .16s both;}
  .hero-actions{display:flex; gap:var(--sp-3); margin-top:var(--sp-4); flex-wrap:wrap; animation:riseIn .8s var(--ease-out) .24s both;}
  .btn{
    display:inline-flex; align-items:center; gap:var(--sp-2);
    padding:13px 26px;
    font-size:0.9375rem; font-weight:600;
    text-decoration:none;
    border-radius:var(--r-sm);
    transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out);
  }
  .btn-primary{
    background:var(--accent);
    color:var(--bg-alt);
    border:1px solid var(--accent);
    box-shadow:var(--shadow-sm);
  }
  .btn-primary:hover{background:var(--accent-strong); border-color:var(--accent-strong); box-shadow:var(--shadow-md); transform:translateY(-1px);}
  .btn-primary:active{transform:translateY(0); box-shadow:var(--shadow-sm);}
  .btn-ghost{
    border:1px solid var(--border-strong);
    color:var(--text);
  }
  .btn-ghost:hover{border-color:var(--accent); color:var(--accent-strong);}

  .hero-media{
    position:relative;
    max-width:540px;
    margin-inline-start:auto;
    animation:riseIn .9s var(--ease-out) .1s both;
  }
  .hero-media-clip{
    position:relative;
    /* matches the belt photo's own natural proportions (853×1280) exactly, so
       object-fit:cover shows the whole frame — coil, strap and buckle — with
       nothing trimmed off the top, bottom or sides */
    aspect-ratio:853/1280;
    overflow:hidden;
    border-radius:var(--r-sm);
    box-shadow:var(--shadow-lg);
    border:1px solid var(--border);
    /* a single diagonal cut at the corner — a cut edge, not a rectangle */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 100%, 0 89%);
  }
  .hero-media img{width:100%; height:100%; object-fit:cover; display:block; will-change:transform;}
  .hero-media-clip::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.35));
    pointer-events:none;
  }

  /* leather tag bleeding across the hero-media / hero-copy boundary — the signature overlap */
  .hero .leather-tag{
    left:-20px; bottom:30px; z-index:3;
    transform:rotate(-4deg);
    animation:riseIn 1s var(--ease-out) .3s both;
  }

  @media (max-width: 860px){
    .hero{grid-template-columns:1fr; padding-block:28px 36px;}
    .hero-media{order:-1; max-width:320px; margin-inline:auto;}
    .hero .leather-tag{left:14px; bottom:14px; transform:rotate(-4deg) scale(.92);}
  }

  /* benefits — presented as three cards drawn out of the workshop's own cardholder:
     a closed, stitched rectangular case with a folded flap and three top slots,
     sitting behind the cards so only its edges, flap and slot-mouths show through. */
  .benefits-wrap{position:relative; padding-block:var(--sp-7) var(--sp-6);}
  .cardholder{position:absolute; inset:0; z-index:0; pointer-events:none;}
  .cardholder-body{
    position:absolute;
    left:-20px; right:-20px; top:38px; bottom:0;
    background-color:var(--surface-2);
    background-image:var(--grain-fine);
    background-blend-mode:overlay;
    background-size:120px 120px;
    border:1px solid var(--border-strong);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-md);
  }
  .cardholder-body::after{
    content:""; position:absolute; inset:8px; border-radius:calc(var(--r-lg) - 4px);
    border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
    opacity:.5;
  }
  /* the flap — folded over the case's mouth, its stitched edge the only part left fully visible */
  .cardholder-flap{
    position:absolute; left:50%; top:-24px; transform:translateX(-50%);
    width:132px; height:42px;
    background-color:var(--surface-2);
    background-image:var(--grain-fine);
    background-blend-mode:overlay;
    background-size:120px 120px;
    border:1px solid var(--border-strong);
    border-radius:16px 16px 4px 4px;
    box-shadow:0 4px 10px rgba(0,0,0,.18);
  }
  .cardholder-flap::before{
    content:""; position:absolute; left:14%; right:14%; bottom:9px; height:1px;
    background-image: radial-gradient(circle at 3px 3px, var(--accent-2) 1.2px, transparent 1.4px);
    background-size:11px 6px; background-repeat:repeat-x;
    opacity:.7;
  }
  /* the seam where the case's front meets the card slots, right at the cards' top edge */
  .cardholder-seam{
    position:absolute; left:28px; right:28px; top:40px; height:1px;
    background:var(--border-strong);
  }
  .cardholder-seam::before{
    content:""; position:absolute; left:0; right:0; top:-3px; height:7px;
    background-image: radial-gradient(circle at 3px 3px, var(--accent-2) 1.4px, transparent 1.6px);
    background-size:14px 7px; background-repeat:repeat-x;
    opacity:.65;
  }
  /* three slot-mouths, one behind each card — only their top sliver shows above the card.
     Top offset is nudged per slot to clear each card's own fan tilt/stagger (see .benefit
     nth-child rules below): the middle card sits highest (-14px), so its slot sits highest too. */
  .cardholder-slot{
    position:absolute; top:26px; width:28px; height:20px;
    transform:translateX(-50%);
    border-radius:4px 4px 0 0;
    background:var(--bg-alt);
    box-shadow:inset 0 2px 3px rgba(0,0,0,.5), inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .cardholder-slot--1{left:16.6667%;}
  .cardholder-slot--2{left:50%; top:10px;}
  .cardholder-slot--3{left:83.3333%; top:32px;}
  .cardholder-rivet{
    position:absolute; bottom:18px; width:11px; height:11px; border-radius:50%;
    background:var(--rivet-bg); box-shadow:var(--rivet-shadow);
  }
  .cardholder-rivet--l{left:6px;}
  .cardholder-rivet--r{right:6px;}
  .benefits{
    position:relative; z-index:1;
    display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4);
    padding-top:var(--sp-3);
  }
  .benefit{
    --tilt:0deg; --ty:0px;
    border:1px solid var(--border);
    border-radius:var(--r-md);
    padding:var(--sp-4);
    box-shadow:5px 6px 0 -2px color-mix(in srgb, var(--surface-2) 92%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), var(--shadow-sm);
    transform:rotate(var(--tilt)) translateY(var(--ty));
    transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
  }
  .benefit:focus-visible{outline:2px solid var(--accent-strong); outline-offset:3px;}
  /* fanned like cards drawn from the case — a slight rotate + stagger per card */
  @media (min-width:721px){
    .benefit:nth-child(1){--tilt:-3deg;}
    .benefit:nth-child(2){--tilt:1.5deg; margin-top:-14px;}
    .benefit:nth-child(3){--tilt:-1.5deg; margin-top:8px;}
  }
  @media (max-width:720px){.cardholder{display:none;}}

  /* scroll reveal — cards start tucked inside the case's slots and slide out as the
     section enters view; JS adds .reveal-pending immediately (before paint) so this
     only ever applies when JS actually runs, and adds .revealed once observed. */
  .benefits.reveal-pending .benefit{--ty:34px; opacity:0; transition:none;}
  .benefits.revealed .benefit{
    transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
  }
  .benefits.revealed .benefit{--ty:0px; opacity:1;}
  .benefits.revealed .benefit:nth-child(1){transition-delay:0ms;}
  .benefits.revealed .benefit:nth-child(2){transition-delay:100ms;}
  .benefits.revealed .benefit:nth-child(3){transition-delay:200ms;}
  /* hover/focus must win over both the resting and the revealed state, so it repeats
     the .benefits ancestor to match (and beat, by source order) .benefits.revealed .benefit */
  .benefits .benefit:hover, .benefits .benefit:focus-visible{
    --ty:-10px; transform:rotate(0deg) translateY(var(--ty)); opacity:1; transition-delay:0ms;
    box-shadow:5px 6px 0 -2px color-mix(in srgb, var(--surface-2) 92%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), var(--shadow-md);
    border-color:var(--border-strong); z-index:2;
  }
  .icon-roundel{
    width:48px; height:48px; border-radius:50%;
    display:grid; place-items:center; margin-bottom:var(--sp-3);
    background:color-mix(in srgb, var(--accent) 14%, var(--surface));
    color:var(--accent-strong);
    border:1px solid var(--border);
  }
  .benefit h3{font-size:1.0625rem; font-weight:700; font-family:'Manrope',sans-serif; margin-bottom:var(--sp-1);}
  .benefit p{margin:0; color:var(--text-dim); font-size:0.9375rem;}
  @media (max-width:720px){.benefits{grid-template-columns:1fr; gap:var(--sp-4);}}

  /* home teaser grid — asymmetric, not three equal boxes */
  .teaser{padding-block:var(--sp-6) var(--sp-7);}
  .teaser-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5);}
  .teaser-head h2{font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);}
  .teaser-grid{
    display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:auto auto;
    gap:var(--sp-4);
  }
  .tease-card{
    border:1px solid var(--border); border-radius:var(--r-md);
    padding:var(--sp-3); box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), var(--shadow-sm);
    text-decoration:none; color:inherit; display:flex; flex-direction:column;
    transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
  }
  .tease-card:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), var(--shadow-md); border-color:var(--border-strong);}
  .tease-card:hover .tease-img img{transform:scale(1.05);}
  .tease-card .tease-img{border-radius:var(--r-sm); overflow:hidden; margin-bottom:var(--sp-3);}
  .tease-card .tease-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out);}
  .tease-card:nth-child(1){grid-column:1; grid-row:1/3;}
  .tease-card:nth-child(1) .tease-img{aspect-ratio:4/5;}
  .tease-card:nth-child(2){grid-column:2; grid-row:1;}
  .tease-card:nth-child(3){grid-column:2; grid-row:2;}
  .tease-card:nth-child(2) .tease-img, .tease-card:nth-child(3) .tease-img{aspect-ratio:16/11;}
  .tease-card h3{font-size:1.25rem; margin-bottom:var(--sp-1);}
  .tease-card .tease-price{font-size:0.875rem; color:var(--accent-strong); font-weight:700; margin-bottom:var(--sp-2);}
  .tease-card .tease-more{margin-top:auto; font-size:0.8125rem; color:var(--text-faint); font-weight:600;}
  @media (max-width:760px){
    .teaser-grid{grid-template-columns:1fr;}
    .tease-card:nth-child(1),.tease-card:nth-child(2),.tease-card:nth-child(3){grid-column:1; grid-row:auto;}
    .tease-card:nth-child(1) .tease-img{aspect-ratio:16/11;}
  }

  /* catalog nav chips */
  .catalog-head{padding-block:var(--sp-6) var(--sp-4);}
  .catalog-head h1{font-size:clamp(2.5rem, 1.9rem + 2.8vw, 4.25rem);}
  .chip-row{
    display:flex; flex-wrap:wrap; gap:var(--sp-2);
    margin-top:var(--sp-4);
  }
  .chip{
    font-size:0.8125rem;
    padding:var(--sp-2) var(--sp-3);
    border:1px solid var(--border-strong);
    border-radius:var(--r-pill);
    text-decoration:none;
    color:var(--text-dim);
    transition:border-color .2s var(--ease-out), color .2s var(--ease-out), background .2s var(--ease-out);
  }
  .chip:hover, .chip:focus-visible{border-color:var(--accent); color:var(--accent-strong); background:var(--surface);}
  .chip b{color:var(--accent); font-weight:700; margin-right:4px;}

  /* products */
  .product{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:clamp(24px,4vw,56px);
    align-items:start;
    padding-block:var(--sp-6);
    border-top:1px solid var(--border);
    scroll-margin-top:88px;
  }
  .product:nth-of-type(even){grid-template-columns:1fr 1.1fr;}
  .product:nth-of-type(even) .product-media{order:2;}
  .product:nth-of-type(even) .product-info{order:1;}

  .product-index{
    display:flex; align-items:center; gap:7px;
    font-family:'Rye', Georgia, serif; font-style:normal;
    color:var(--accent); font-size:1.0625rem; letter-spacing:.02em; margin-bottom:var(--sp-2);
  }
  .product-index::before{
    content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0;
    background:var(--rivet-bg); box-shadow:var(--rivet-shadow);
  }

  /* two catalog highlights get outsized typography instead of a bigger box — scale as hierarchy */
  .product--feature{position:relative;}
  .product--feature::before{
    content:attr(data-index);
    position:absolute; top:0.08em; left:-0.06em;
    font-family:'Rye', Georgia, serif; font-weight:400;
    font-size:clamp(6rem, 4.5rem + 7vw, 12rem);
    line-height:1; color:var(--accent);
    opacity:.09; z-index:0; pointer-events:none; user-select:none;
  }
  .product--feature .product-media, .product--feature .product-info{position:relative; z-index:1;}
  .product--feature .product-media a.shot:first-child{
    clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
    transform: translate(6px,-6px);
    box-shadow: var(--shadow-md);
  }

  .product-media{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2);
  }
  .product-media a.shot{
    display:block; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-sm);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    transition:box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
  }
  .product-media a.shot:hover, .product-media a.shot:focus-visible{box-shadow:var(--shadow-md); border-color:var(--accent);}
  .product-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out);}
  .product-media a.shot:hover img{transform:scale(1.05);}
  .product-media[data-count="2"] a.shot{aspect-ratio:4/5;}
  .product-media[data-count="4"] a.shot:first-child{grid-column:1/3; aspect-ratio:16/10;}

  /* price shown as a hand-punched leather swing-tag, not a generic pill */
  .price-pill{
    position:relative;
    display:inline-block;
    font-size:1.0625rem;
    font-weight:700;
    color:var(--accent-strong);
    padding:10px 22px 10px 32px;
    background:color-mix(in srgb, var(--accent) 12%, var(--surface));
    border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
    box-shadow:var(--shadow-sm);
    margin:var(--sp-3) 0 var(--sp-4);
  }
  .price-pill::before{
    content:"";
    position:absolute; left:10px; top:50%; transform:translateY(-50%);
    width:5px; height:5px; border-radius:50%;
    background:var(--bg);
    border:1px solid color-mix(in srgb, var(--accent) 65%, var(--border));
  }

  .product h2{font-size:clamp(1.75rem, 1.5rem + 1vw, 2.5rem);}

  .catalog-cta{
    margin-block:var(--sp-6);
    padding:var(--sp-6) var(--sp-6);
    text-align:left;
    background-image: var(--grain-fine), linear-gradient(155deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
    background-blend-mode: overlay, normal;
    background-size: 120px 120px, auto;
    background-repeat: repeat, no-repeat;
    border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius:var(--r-lg);
    box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), var(--shadow-sm);
  }
  .catalog-cta h2{font-size:clamp(1.5rem,1.2rem+1vw,2.25rem); margin-bottom:var(--sp-3);}
  @media (max-width:560px){.catalog-cta{padding:var(--sp-5) var(--sp-4);}}

  /* process — a belt strap with punched holes stands in for the generic 4-card grid.
     Each step is two fixed-height slots (top/bottom) around a hole, one slot always
     empty — that keeps every hole on the same line regardless of copy length. */
  .process{padding-block:var(--sp-6);}
  .process h2{font-size:clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); margin-bottom:var(--sp-6);}
  .steps-belt{
    position:relative;
    display:grid; grid-template-columns:repeat(4,1fr); column-gap:var(--sp-4);
  }
  .belt-strap{
    position:absolute; left:0; right:0; top:129px; height:15px; transform:translateY(-50%);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--r-pill);
    box-shadow:var(--shadow-sm);
  }
  .belt-strap::before{
    content:""; position:absolute; inset:3px 10px;
    border-top:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
    border-bottom:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
    opacity:.75;
  }
  .step-belt{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px;}
  .step-belt .slot{min-height:104px; width:100%; max-width:230px; display:flex; justify-content:center; text-align:center;}
  .step-belt .slot-top{align-items:flex-end;}
  .step-belt .slot-bottom{align-items:flex-start;}
  .step-belt .hole{
    width:30px; height:30px; flex-shrink:0; z-index:2;
    border-radius:50%;
    background:var(--rivet-bg);
    border:1px solid color-mix(in srgb, var(--accent-strong) 70%, var(--border));
    box-shadow:0 1px 2px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.5);
    display:grid; place-items:center;
    font-family:'Rye', Georgia, serif; font-weight:400; font-size:.875rem; color:var(--bg-alt);
  }
  .step-belt h3{font-size:1.0625rem; font-weight:700; font-family:'Manrope',sans-serif; margin:0 0 var(--sp-1);}
  .step-belt p{margin:0; color:var(--text-dim); font-size:0.9375rem;}
  @media (max-width:760px){
    .steps-belt{grid-template-columns:1fr; row-gap:28px;}
    .belt-strap{left:15px; right:auto; top:0; bottom:0; width:15px; height:auto; transform:none;}
    .belt-strap::before{inset:10px 3px; border:none; border-left:1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-right:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);}
    .step-belt{flex-direction:row; align-items:flex-start; justify-content:flex-start; padding-left:44px; gap:16px;}
    .step-belt .slot{min-height:0; max-width:none; justify-content:flex-start; text-align:left; align-items:flex-start;}
    .step-belt .slot--empty{display:none;}
    .step-belt .hole{margin-top:1px;}
  }

  /* contact / footer */
  .contact{
    padding-block:var(--sp-6);
    display:grid; grid-template-columns:1.1fr 1fr; gap:var(--sp-6); align-items:start;
  }
  .contact h2{font-size:clamp(1.75rem,1.5rem+1vw,2.5rem); margin-bottom:var(--sp-3);}
  .contact-card{
    border:1px solid var(--border);
    border-radius:var(--r-md);
    padding:var(--sp-5);
    box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), var(--shadow-sm);
  }
  .contact-card p{margin:0 0 var(--sp-2); color:var(--text-dim); font-size:0.9375rem;}
  .contact-card p:last-child{margin-bottom:0;}
  .contact-links{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-4);}
  @media (max-width:800px){.contact{grid-template-columns:1fr;}}

  .page-intro{padding-block:var(--sp-6) 0;}
  .page-intro h1{font-size:clamp(2.5rem, 1.9rem + 2.8vw, 4.25rem); margin-bottom:var(--sp-3);}

  footer.site{padding-block:var(--sp-6) 0;}
  .footer-grid{
    display:flex; justify-content:space-between; gap:var(--sp-6) var(--sp-7); flex-wrap:wrap;
    padding-block:var(--sp-6);
  }
  .footer-brand{max-width:34ch;}
  .footer-brand .logo{margin-bottom:var(--sp-3);}
  /* footer has more vertical room than the nav row, so the same plain image runs
     a bit larger there — still just height + width:auto, still no container */
  .footer-brand .logo img{ height:64px; }
  .footer-brand p{margin:0; color:var(--text-faint); font-size:0.875rem; line-height:1.6;}
  .footer-nav{display:flex; flex-direction:column; gap:10px;}
  .footer-nav-title{font-size:0.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); font-weight:700; margin-bottom:2px;}
  .footer-nav a{font-size:0.9375rem; color:var(--text-dim); text-decoration:none; transition:color .2s var(--ease-out);}
  .footer-nav a:hover{color:var(--accent-strong);}
  .footer-bottom{
    display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
    padding-block:var(--sp-4) var(--sp-6);
    border-top:1px solid var(--border);
    color:var(--text-faint); font-size:0.8125rem;
  }

  /* ================= western brand accents ================= */
  /* Bitter carries the display headlines; if the runtime check below finds it can't
     actually render Cyrillic in this browser, this class swaps h1/h2 to PT Serif
     Bold — a plain but reliably-Cyrillic slab-ish serif — instead of silently
     falling through to a generic system serif. */
  html.no-cyr-display h1, html.no-cyr-display h2{
    font-family:'PT Serif', Georgia, 'Times New Roman', serif; font-weight:700;
  }

  /* one bull silhouette for the whole site — fixed to the viewport, behind every
     route, instead of the previous per-section pattern (a loud one in the hero,
     small separate echoes in the teaser/catalog-head/page-intro/footer). Owner's
     instruction was explicit: "на всех стр бык на весь экран один фоново" — one
     mark, not several differently-sized accents scattered around. Lives as a
     direct child of body (position:fixed, negative z-index — see the .site-bull-bg
     element itself, right after the skip-link), so every route shows the exact
     same silhouette in the exact same screen position, and it never scrolls with
     the page: content scrolls past it, it stays put, like a watermark set into the
     glass rather than printed on the page. mask-image (not background-image) keeps
     the PNG's alpha shape tintable with a themed CSS var — background-color under
     a mask, not a hardcoded fill baked into the asset — so it still adapts to the
     light/dark theme like the rest of the palette. */
  .site-bull-bg{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-color:var(--accent-2);
    -webkit-mask-image:var(--horns-mark); mask-image:var(--horns-mark);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center 44%; mask-position:center 44%;
    -webkit-mask-size:min(72vw, 860px) auto; mask-size:min(72vw, 860px) auto;
    opacity:.12;
  }
  @media (max-width:860px){
    /* a narrow viewport needs the mark sized off its own width (vw), not the old
       desktop cap, to still read as a full-screen presence rather than shrinking
       to a token; opacity bumped a touch, as before, since a narrower column shows
       proportionally less empty ground around any text sitting over it. */
    .site-bull-bg{
      -webkit-mask-size:min(94vw, 420px) auto; mask-size:min(94vw, 420px) auto;
      -webkit-mask-position:center 38%; mask-position:center 38%;
      opacity:.15;
    }
    .hero-copy{ background:radial-gradient(ellipse 150% 130% at 50% 36%, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 64%, transparent) 48%, transparent 78%); }
  }
  /* legibility scrim — the same soft radial wash already used under .hero-copy,
     reused on every other text block that can now find the single fixed bull
     mark behind it at some scroll position (previously each of these had either
     no mark behind it, or a small dedicated accent placed to avoid the text).
     Product photos and the benefit/tease/contact cards already paint an opaque
     surface of their own and need nothing extra; this is only for text sitting
     directly on the page background. */
  .catalog-head, .page-intro, .product-info, .teaser-head, .process, .contact-intro, .footer-brand{
    position:relative;
    background:radial-gradient(ellipse 150% 140% at 50% 34%, color-mix(in srgb, var(--bg) 85%, transparent) 0%, color-mix(in srgb, var(--bg) 52%, transparent) 52%, transparent 82%);
  }

  /* branded / hot-iron treatment for the single biggest headline on each page */
  .hero h1, .catalog-head h1, .page-intro h1{ text-shadow:var(--emboss-burn); }

  /* sheriff-star bullets, standing in for the generic disc marker in product copy */
  .prose ul{list-style:none; padding-left:0;}
  .prose li{position:relative; padding-left:24px;}
  .prose li::before{
    content:"";
    position:absolute; left:0; top:0.32em; width:13px; height:13px;
    background:var(--star-mark) no-repeat center / contain;
  }

  /* twisted-rope divider — an alternate to .stitch, now thick enough to actually read
     as a coiled lasso rather than a thin decorative line, used at two deliberate beats */
  .lasso{
    height:16px; border-radius:999px; opacity:.75;
    box-shadow:var(--shadow-sm);
    background:
      repeating-linear-gradient(118deg, var(--accent-2) 0 4px, transparent 4px 9px),
      repeating-linear-gradient(62deg, color-mix(in srgb, var(--accent-2) 70%, black) 0 4px, transparent 4px 9px);
  }

  /* small flourish + star, echoing the logo's own "EST. 2023" ribbon detail */
  .est-flourish{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Manrope', sans-serif; font-weight:700;
    font-size:0.6875rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--text-faint); margin:var(--sp-2) 0 0;
  }
  .est-flourish svg{color:var(--accent-2); flex-shrink:0;}

  /* a literal plank strip under the header — the board the shop sign hangs on.
     Contained to a thin band so it can't touch hero/photo layout; visible on every
     page since the header is sticky. */
  .plank-strip{
    height:8px; width:100%;
    background:repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--accent-2) 26%, var(--bg-alt)) 0 46px,
      color-mix(in srgb, var(--accent-2) 46%, var(--bg-alt)) 46px 50px,
      color-mix(in srgb, var(--accent-2) 16%, var(--bg-alt)) 50px 96px,
      color-mix(in srgb, var(--accent-2) 46%, var(--bg-alt)) 96px 100px
    );
    box-shadow:inset 0 2px 3px rgba(0,0,0,.35);
    opacity:.85;
  }

  /* star-shaped section divider — a bigger, deliberate beat for one closing moment,
     distinct from the small sheriff-star bullets used inline in product copy */
  .star-divider{ display:flex; align-items:center; gap:14px; margin-block:var(--sp-6); }
  .star-divider::before, .star-divider::after{
    content:""; flex:1; height:1px;
    background:linear-gradient(90deg, transparent, var(--border-strong) 30%, var(--border-strong) 70%, transparent);
  }
  .star-divider-mark{
    width:22px; height:22px; flex-shrink:0;
    background:var(--star-mark) no-repeat center / contain;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));
  }

  /* wanted-poster double border for one accent block — a second, inset solid line
     layered over the card's existing dashed inset border */
  .poster-frame::before{
    content:""; position:absolute; inset:10px; border-radius:calc(var(--r-lg) - 5px);
    border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    pointer-events:none;
  }

  /* the workshop mark stamped on the hero photo's corner — same plain-image
     treatment as .logo img above, not a separate pattern: no medallion, no
     circle, no cream plate. bullskin-logo.png's own transparency is the only
     mask it needs, so this is the image sized by height with width:auto,
     nothing to crop it. Only position (top-right corner of the photo) and an
     8° tilt carry over "stamped on the leather" — a drop-shadow stands in for
     the old plate's job of separating the mark from the photo behind it.
     The belt photo's own top-right corner is a near-black backdrop (checked
     against the real image, not assumed) — the same near-black linework the
     header worries about — so this inverts unconditionally, regardless of the
     page's light/dark theme, because what it answers to is the photo's own
     darkness, which doesn't change with the theme switch. */
  .hero-seal{
    position:absolute; top:18px; right:18px; z-index:4;
    transform:rotate(8deg);
    animation:riseIn 1s var(--ease-out) .35s both;
    filter:invert(1) brightness(1.25) drop-shadow(0 2px 6px rgba(0,0,0,.65));
  }
  .hero-seal img{ height:80px; width:auto; display:block; }
  @media (max-width:860px){ .hero-seal{ top:12px; right:12px; } .hero-seal img{ height:56px; } }

  /* ===== адаптив: планшеты и телефоны ===== */
  /* каталог: на узком экране фото и текст товара идут одной колонкой */
  @media (max-width:720px){
    .product, .product:nth-of-type(even){grid-template-columns:1fr; gap:var(--sp-5); padding-block:var(--sp-5);}
    .product:nth-of-type(even) .product-media{order:0;}
    .product:nth-of-type(even) .product-info{order:0;}
    .product--feature .product-media a.shot:first-child{transform:none;}
  }
  /* шапка: логотип сверху, кнопки разделов одной строкой во всю ширину */
  @media (max-width:720px){
    .nav-row{flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); padding-block:var(--sp-2);}
    .logo{font-size:1.125rem;}
    .logo img{height:38px;}
    nav.primary{width:100%; flex-wrap:nowrap; gap:var(--sp-2);}
    nav.primary a{flex:1 1 auto; text-align:center; font-size:.75rem; padding:8px 10px; white-space:nowrap; letter-spacing:.02em;}
  }
  /* на телефоне шапка не липнет: не съедает экран при прокрутке */
  @media (max-width:560px){
    header.site{position:static;}
  }
  @media (max-width:380px){
    nav.primary a{font-size:.6875rem; padding:8px 6px; letter-spacing:0;}
  }
  /* шаги заказа на телефоне: номер всегда слева от текста */
  @media (max-width:760px){
    .step-belt .hole{order:-1;}
  }

  /* ===== форма заявки ===== */
  .order-form{display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-4);}
  .field{display:flex; flex-direction:column; gap:6px; min-width:0;}
  .field label{font-size:.8125rem; font-weight:700; color:var(--text);}
  .field .opt{font-weight:500; color:var(--text-faint);}
  .field input, .field select, .field textarea{
    width:100%; min-width:0; font:inherit; font-size:1rem; color:var(--text);
    background:color-mix(in srgb, var(--bg) 70%, var(--surface));
    border:1px solid var(--border-strong); border-radius:var(--r-sm);
    padding:11px 12px; min-height:44px;
  }
  .field textarea{resize:vertical; min-height:96px; line-height:1.5;}
  .field input::placeholder, .field textarea::placeholder{color:var(--text-faint);}
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent);}
  .field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--accent-2);}
  .order-status{min-height:1.4em; margin:0; font-size:.875rem; color:var(--accent-2);}
  .order-form .btn{align-self:flex-start; min-height:44px;}
  .order-form .btn[disabled]{opacity:.65; cursor:progress;}
  .order-done{margin-top:var(--sp-4);}
  .order-alt{margin-top:var(--sp-5) !important;}
  .order-cta{margin-top:var(--sp-4);}
  .order-cta .btn{min-height:44px;}

  /* ===== политика и подвал ===== */
  .legal-text{max-width:68ch; padding-block:var(--sp-5) var(--sp-6);}
  .legal-text h2{font-size:1.25rem; margin:var(--sp-5) 0 var(--sp-2);}
  .legal-text p{margin:0 0 var(--sp-3); color:var(--text-dim);}
  .footer-bottom a{color:var(--text-faint); text-decoration:underline; text-underline-offset:3px;}
  .footer-bottom a:hover{color:var(--accent-strong);}

  /* ===== помощник сообщения ===== */
  .order-status{color:var(--accent-strong);}
  .order-actions{display:flex; flex-wrap:wrap; gap:var(--sp-3);}
  .order-actions .btn{min-height:44px; align-self:auto;}
  .order-hint{margin:0; font-size:.8125rem; line-height:1.45; color:var(--text-faint);}
  .legal-text ul{margin:0 0 var(--sp-4); padding-left:1.2em;}
  .legal-text li{margin-bottom:var(--sp-2); color:var(--text-dim);}

  /* ===== переключатель темы ===== */
  .nav-row .logo{margin-right:auto; order:1;}
  .nav-row nav.primary{order:2;}
  .theme-toggle{
    order:3; flex:none; width:40px; height:40px; display:grid; place-items:center; padding:0;
    color:var(--text-dim); cursor:pointer;
    background-color:var(--surface); background-image:var(--grain-fine); background-blend-mode:overlay; background-size:120px 120px;
    border:1px solid var(--border); border-radius:50%;
    box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), var(--shadow-sm);
    transition:color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
  }
  .theme-toggle:hover{color:var(--accent-strong); border-color:var(--accent);}
  .theme-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .theme-toggle:active{transform:scale(.94);}
  /* в тёмной теме показываем солнце (нажатие даёт светлую), в светлой луну */
  .theme-toggle .ic-sun{display:none;}
  .theme-toggle[data-mode="dark"] .ic-sun{display:block;}
  .theme-toggle[data-mode="dark"] .ic-moon{display:none;}
  @media (max-width:720px){
    .theme-toggle{order:2; width:38px; height:38px;}
    .nav-row nav.primary{order:3;}
  }

  .footer-brand .footer-legal{font-size:.75rem; line-height:1.5; color:var(--text-faint); max-width:46ch;}