:root {
  --oak: #54391f; --card: #f6f1dc; --ink: #23201a; --red: #b3261e; --rule: #a9c1d9;
  --fell: 'IM Fell English', Georgia, serif; --type: 'Cutive Mono', 'Courier New', monospace;
  --cx-bg: #fbf8ea; --cx-surface: #efe8cc; --cx-text: var(--ink); --cx-muted: #5d564a; --cx-line: #a39a80;
  --cx-accent: var(--red); --cx-on-accent: #fff; --cx-radius: 2px; --cx-font: var(--type); --cx-head-font: var(--fell); --cx-head-weight: 400;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--card); color: var(--ink); font: 400 1.0625rem/1.6 var(--type); }
a { color: inherit; }
main { display: block; outline: none; min-height: 60vh; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.top { display: flex; gap: 24px; align-items: baseline; padding: 14px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--ink); }
.mark { margin-right: auto; font: italic 400 1.5rem/1 var(--fell); text-decoration: none; }
.title-page { padding: clamp(56px, 11vw, 140px) 16px; text-align: center; }
.title-page h1 { margin: 0; font: 400 clamp(3.5rem, 13vw, 11rem)/0.95 var(--fell); letter-spacing: -0.02em; }
.sub { margin: 16px 0 0; font: italic 400 clamp(1.25rem, 3vw, 2rem)/1.2 var(--fell); }
.note { margin: 28px auto 0; max-width: 46ch; color: var(--red); transform: rotate(-1deg); }
.drawer { padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px); background: var(--oak); color: var(--card); scroll-margin-top: 0; --cx-text: var(--card); }
.drawer > p a { color: inherit; }
.drawer h2 { margin: 0; font: 400 clamp(2.25rem, 6vw, 4.5rem)/1 var(--fell); }
.tabs-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 24px; padding: 0; list-style: none; }
.tabs-row a { display: block; padding: 6px 14px; background: var(--card); color: var(--ink); border-radius: 8px 8px 0 0; text-decoration: none; }
.tabs-row a[aria-current] { background: var(--red); color: #fff; }
.drawer .cx-field input, .drawer .cx-field select { background: var(--card); color: var(--ink); }
.drawer .cx-btn-quiet { color: var(--card) !important; border-color: var(--card); }
.icards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.icard {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 4px 12px; padding: 16px 16px 30px; min-height: 216px; color: var(--ink); text-decoration: none;
  background-color: var(--card);
  background-image: linear-gradient(transparent 39px, var(--red) 39px, var(--red) 41px, transparent 41px), repeating-linear-gradient(transparent 0 25px, var(--rule) 25px 26px);
  background-position: 0 0, 0 41px;
  box-shadow: 0 2px 0 #2d1e10;
  transition: transform .2s ease;
}
.icard:hover, .icard:focus-visible { transform: translateY(-8px); }
.hole { position: absolute; bottom: 8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; background: var(--oak); border-radius: 50%; }
.mark-no { grid-column: 1 / -1; height: 26px; font-size: 1rem; }
.i-body { display: flex; flex-direction: column; min-width: 0; line-height: 26px; }
.i-name { font-weight: 700; overflow-wrap: break-word; }
.i-line { font-size: 0.9375rem; }
.i-stamp { align-self: flex-start; margin-top: 4px; padding: 0 8px; color: var(--red); border: 2px solid var(--red); transform: rotate(-3deg); line-height: 22px; font-size: 0.875rem; }
.icard img { width: 96px; height: 96px; object-fit: contain; mix-blend-mode: multiply; filter: sepia(.35); }
.pdp h1 { font: 400 clamp(2.25rem, 5vw, 4rem)/1.05 var(--fell); }
.pdp-photo { background: #fff; border: 1px solid var(--ink); padding: 12px; }
.pdp-add { background: var(--red); border-color: var(--red); color: #fff; }
.opt[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--card); }
.bag h1 { font: 400 clamp(2.25rem, 5vw, 4rem)/1.05 var(--fell); }
.bag-lines img { mix-blend-mode: multiply; background: transparent; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding: 28px clamp(16px, 4vw, 48px); border-top: 1px solid var(--ink); }
.foot [data-footer-links] { width: 100%; }
.foot p { margin: 0; max-width: 60ch; }
.state h1 { font: 400 3rem/1 var(--fell); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .icard { transition: none; } }