/* SkiffDeck V2 outfitter styles. Plain CSS, no build step. */
:root {
  --paper: #f4efe4;
  --paper-2: #e7decb;
  --card: #fffdf7;
  --ink: #102e2c;
  --ink-2: #20423f;
  --muted: #556865;
  --line: #d8d0be;
  --turf: #143d3a;
  --turf-2: #1c524e;
  --turf-3: #276c67;
  --lime: #d4a23a;
  --flag: #c84b28;
  --sky: #9fc9c2;
  --gold: #dfb04a;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 8px;
  --shadow: 0 1px 0 rgba(16,46,44,.10), 0 10px 28px -18px rgba(16,46,44,.48);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--body); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; border-radius: 6px; }
.wrap { width: min(1220px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.display { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.005em; margin: 0; }
.wide { font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.fine { font-size: 13px; color: var(--muted); }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 12px; }

/* ---------- header ---------- */
.top { background: var(--ink); color: var(--paper); position: sticky; top: 0; z-index: 30; }
.top-inner { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo-mark { width: 38px; height: 38px; }
.logo-mark .flag { stroke: var(--paper); stroke-width: 2.6; stroke-linecap: round; }
.logo-mark .pennant { fill: var(--lime); }
.logo-mark .drip { fill: var(--lime); animation: drip 2.8s ease-in infinite; transform-origin: 30px 20px; }
@keyframes drip { 0%, 55% { transform: translateY(0); opacity: 1; } 85% { transform: translateY(9px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.logo-mark .cup { fill: #1c524e; }
.logo-mark .ball { fill: var(--paper); }
.wordmark { font-family: var(--display); font-stretch: 100%; font-weight: 900; font-size: 22px; letter-spacing: -.03em; }
.wordmark b { color: var(--lime); font-weight: 900; }
.nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap; color: #d9d6cc; }
.nav a:hover { color: var(--paper); background: #194a46; }
.nav a[aria-current="page"] { background: var(--lime); color: var(--ink); }

.proto { background: var(--lime); color: var(--ink); font-size: 13.5px; padding: 7px 0; border-bottom: 2px solid var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--paper); border-bottom: 2px solid var(--ink); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px 40px; align-items: start; padding: 40px 0 40px; }
.hero h1 { font-size: clamp(46px, 12.6vw, 158px); grid-column: 1 / -1; }
.hero h1 .ln { display: block; white-space: nowrap; }
.hero-left { align-self: center; }
.hero h1 .hl { color: var(--flag); }
.hero h1 .ol { -webkit-text-stroke: 2px var(--ink); color: transparent; }
.hero-sub { font-size: 19px; max-width: 34ch; margin-top: 18px; color: var(--ink-2); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 700; cursor: pointer; }
.btn:hover { background: var(--turf); border-color: var(--turf); }
.btn.alt { background: transparent; color: var(--ink); }
.btn.alt:hover { background: var(--ink); color: var(--paper); }
.btn.lime { background: var(--lime); color: var(--ink); }
.btn.sm { padding: 7px 12px; font-size: 14px; }

/* broadcast score bug */
@keyframes blink { 50% { opacity: .25; } }

/* ticker */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; white-space: nowrap; border-bottom: 2px solid var(--ink); }
.ticker-track { display: inline-flex; gap: 0; animation: tick 60s linear infinite; padding: 10px 0; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; font-family: var(--mono); font-size: 13.5px; }
.ticker-item b { color: var(--lime); }
.ticker-item .dn { color: var(--flag); }
.ticker-item::after { content: "\25CF"; color: #4b4e43; margin-left: 22px; font-size: 8px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.sec { padding: 52px 0; }
.sec + .sec { border-top: 2px dashed var(--line); }
.sec.dark { background: var(--turf); color: var(--paper); border-top: 0; }
.sec.ink { background: var(--ink); color: var(--paper); border-top: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.hole { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.hole .n { background: var(--ink); color: var(--lime); padding: 3px 8px; border-radius: 4px; font-family: var(--mono); font-size: 12px; }
.sec.dark .hole .n, .sec.ink .hole .n { background: var(--lime); color: var(--ink); }
.sec-head h2 { font-size: clamp(44px, 6.4vw, 88px); }
.sec-head p { max-width: 52ch; margin: 10px 0 0; color: var(--ink-2); }
.sec.dark .sec-head p, .sec.ink .sec-head p { color: #cfd8d1; }
.link-arrow { font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; white-space: nowrap; }

.page-head { padding: 40px 0 18px; }
.page-head h1 { font-size: clamp(54px, 9vw, 128px); }
.page-head p.lede { font-size: 18px; max-width: 60ch; color: var(--ink-2); margin-top: 14px; }
.crumbs { font-size: 14px; margin-bottom: 14px; }
.crumbs a { color: var(--muted); }

/* ---------- creator tiles ---------- */
.creator-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.ctile { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 16 / 10; padding: 14px; border-radius: var(--r); text-decoration: none; color: var(--ink); border: 2px solid var(--ink); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.ctile:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.ctile .cname { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; font-size: 44px; line-height: .86; max-width: 92%; text-shadow: 0 2px 0 rgba(255,255,255,.35); }
.ctile .cname.long { font-size: 36px; }
.ctile .ctop { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.ctile .subs { font-family: var(--mono); font-weight: 700; font-size: 13px; background: var(--ink); color: var(--paper); padding: 4px 8px; border-radius: 6px; }
.ctile .ties { font-size: 13px; font-weight: 600; }
.ctile .play { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 28px; border-radius: 8px; background: var(--ink); display: grid; place-items: center; }
.ctile .play::after { content: ""; border-left: 10px solid var(--paper); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px; border: 1.5px solid currentColor; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; line-height: 1.2; }
.badge.igi { background: var(--flag); color: #fff; border-color: var(--flag); }
.badge.est { background: #fff3c4; color: #6b4b00; border-color: #e2c25c; }
.badge.unv { background: #ffe1d6; color: #8a2a0c; border-color: #f3a58b; }
.badge.ok { background: #e3f6c9; color: #2f5410; border-color: #a9d36e; }
.badge.drop { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.badge.out { background: #e6e3da; color: #55574e; border-color: #c8c3b4; }

/* ---------- style lanes ---------- */
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lane { position: relative; min-height: 210px; padding: 18px; border-radius: var(--r); border: 2px solid var(--ink); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.lane h3 { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; font-size: 46px; line-height: .86; position: relative; }
.lane p { position: relative; margin: 0; font-weight: 500; max-width: 30ch; }
.lane .count { position: relative; font-family: var(--mono); font-weight: 700; font-size: 13px; }
.lane:hover { box-shadow: 6px 6px 0 var(--ink); transform: translate(-3px,-3px); transition: .15s; }
.lane.p-street { background: var(--ink); color: var(--paper); }
.lane.p-street::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 18px, rgba(212,162,58,.13) 18px 20px); }
.lane.p-loud { background: var(--flag); color: #fff; }
.lane.p-loud::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 12px, transparent 13px) 0 0 / 44px 44px; }
.lane.p-retro { background: #f0d9a8; }
.lane.p-retro::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 26px, rgba(13,58,42,.14) 26px 34px, transparent 34px 40px, rgba(200,75,40,.16) 40px 44px); }
.lane.p-clean { background: var(--card); }
.lane.p-clean::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,46,44,.05) 1px, transparent 1px) 0 0 / 22px 22px; }
.lane.p-collector { background: var(--turf); color: var(--paper); }
.lane.p-collector::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 45deg, rgba(212,162,58,.12) 25%, transparent 0 50%, rgba(212,162,58,.12) 0 75%, transparent 0) 0 0 / 36px 36px; }
.lane.p-gear { background: var(--sky); }
.lane.p-gear::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(16,46,44,.12) 2px, transparent 2.5px) 0 0 / 14px 14px; }

/* ---------- products (hang tags) ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); margin-bottom: 18px; }
.toolbar label { font-size: 12px; font-weight: 700; display: grid; gap: 3px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.toolbar select, .toolbar input[type="search"] { border: 1.5px solid var(--ink); background: #fff; border-radius: 10px; padding: 8px 10px; min-width: 150px; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 500; }
.toolbar .count { margin-left: auto; font-family: var(--mono); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { border: 1.5px solid var(--ink); background: transparent; padding: 7px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
.chip[aria-pressed="true"], .chip.on { background: var(--ink); color: var(--lime); }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }
.tag { position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: 10px 10px var(--r) var(--r); display: flex; flex-direction: column; overflow: hidden; }
.tag::before { content: ""; position: absolute; top: 12px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); z-index: 2; }
.tag-art { height: 150px; display: grid; place-items: center; border-bottom: 2px solid var(--ink); position: relative; }
.tag-art svg { width: 92px; height: 92px; }
.tag-art .status { position: absolute; left: 10px; bottom: 10px; }
.tag-art .cat { position: absolute; right: 10px; bottom: 10px; font-size: 11px; }
.tag-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tag-brand { font-size: 12px; text-decoration: none; }
.tag-brand:hover { text-decoration: underline; }
.tag-name { font-weight: 700; font-size: 16.5px; line-height: 1.25; }
.tag-meta { font-size: 13px; color: var(--muted); }
.tag-price { font-family: var(--mono); font-weight: 700; font-size: 22px; margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tag-price s { font-size: 14px; color: var(--muted); font-weight: 500; }
.tag-price .na { font-size: 14px; color: var(--muted); font-weight: 500; font-family: var(--body); }
.tag-links { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1.5px dashed var(--line); padding-top: 10px; margin-top: 6px; }
.tag-links a.shop { font-weight: 700; text-decoration: none; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.tag-links a.shop:hover { background: var(--ink); color: var(--lime); }
.tag-links a.src { font-size: 12.5px; color: var(--muted); }
.tag .who { font-size: 12.5px; font-weight: 600; color: var(--turf-3); }

.bar { height: 8px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; min-width: 70px; }
.bar i { display: block; height: 100%; background: var(--lime); }

/* ---------- generic cards and tables ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 18px; }
.card h3 { font-size: 20px; margin-bottom: 6px; }
.sec.dark .card, .sec.ink .card { background: #10261d; border-color: #2b4a3d; color: var(--paper); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14.5px; margin: 10px 0 0; }
.kv dt { font-weight: 700; color: var(--muted); }
.kv dd { margin: 0; }
.tbl-wrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: var(--r); background: var(--card); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.tbl th, table.tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl th { background: var(--ink); color: var(--lime); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; position: sticky; top: 0; }
table.tbl td.num { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
table.tbl tr:last-child td { border-bottom: 0; }

.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
.split > * { min-width: 0; }
.note { border-left: 6px solid var(--flag); background: #fbf2ec; padding: 14px 16px; border-radius: 0 var(--r) var(--r) 0; margin: 18px 0; }
.note.lime { border-left-color: var(--turf-3); background: #e6f0ec; }
.list-plain { margin: 0; padding-left: 20px; }
.list-plain li { margin-bottom: 6px; }

/* creator page header */
.chead { border: 2px solid var(--ink); border-radius: 10px; padding: 26px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin: 8px 0 26px; box-shadow: 8px 8px 0 var(--ink); }
.chead > div { min-width: 0; }
.chead h1 { overflow-wrap: anywhere; }
.chead h1 { font-size: clamp(54px, 9vw, 120px); }
.chead .stats { display: grid; gap: 8px; justify-items: end; text-align: right; }
.chead .big { font-family: var(--mono); font-weight: 700; font-size: 30px; }
.ties-list { display: grid; gap: 10px; }
.tie { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 8px; }
.tie .type { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--lime); text-align: center; }
.tie .type.owner { background: var(--flag); color: #fff; }
.tie .type.collab { background: var(--gold); color: var(--ink); }
.tie .type.sponsor { background: var(--sky); color: var(--ink); }
.tie .type.merch { background: var(--lime); color: var(--ink); }

/* Crew rosters */
.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.team { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.team h3 { background: var(--ink); color: var(--paper); padding: 10px 14px; font-family: var(--display); font-stretch: 62.5%; font-weight: 900; font-size: 30px; text-transform: uppercase; line-height: 1; }
.team ul { list-style: none; margin: 0; padding: 8px 14px 12px; }
.team li { padding: 6px 0; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 8px; }
.team li:last-child { border-bottom: 0; }

/* estimator */
.est-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 16px 0; }
.est-grid label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.est-grid input[type="range"] { width: 100%; accent-color: var(--turf-3); }
.est-grid output { font-family: var(--mono); font-weight: 700; }
.est-result { display: flex; flex-wrap: wrap; gap: 14px; }
.est-result .card { flex: 1 1 200px; }
.est-result .big { font-family: var(--mono); font-weight: 700; font-size: 30px; }

/* footer */
.foot { background: var(--ink); color: #cfccc1; margin-top: 40px; padding: 36px 0 44px; }
.foot-inner { display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; }
.foot-brand p { margin: 6px 0 0; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: start; }
.foot-nav a { text-decoration: none; font-weight: 600; }
.foot-nav a:hover { color: var(--lime); }
.foot-fine { grid-column: 1 / -1; font-size: 13px; color: #9a978c; margin: 0; }

.toast:empty { visibility: hidden; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); background: var(--ink); color: var(--lime); padding: 10px 16px; border-radius: 999px; font-weight: 700; transition: transform .25s; z-index: 60; }
.toast.show { transform: translate(-50%, 0); }
.empty { padding: 30px; text-align: center; border: 2px dashed var(--line); border-radius: var(--r); color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .lanes { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { width: min(1220px, 100% - 24px); }
  .top-inner { gap: 10px; min-height: 56px; }
  .wordmark { font-size: 18px; }
  .logo-mark { width: 30px; height: 30px; }
  .nav a { padding: 7px 10px; font-size: 14px; }
  .hero-grid { padding: 26px 0 26px; }
  .hero-sub { font-size: 17px; }
  .lanes { grid-template-columns: 1fr; }
  .lane { min-height: 160px; }
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tag-art { height: 112px; }
  .tag-art svg { width: 64px; height: 64px; }
  .tag-name { font-size: 15px; }
  .tag-price { font-size: 18px; }
  .tag-links { flex-direction: column; align-items: stretch; text-align: center; }
  .toolbar select, .toolbar input[type="search"] { min-width: 0; width: 100%; }
  .toolbar label { flex: 1 1 140px; }
  .chead { grid-template-columns: 1fr; padding: 18px; }
  .chead .stats { justify-items: start; text-align: left; }
  .tie { grid-template-columns: 1fr; gap: 6px; }
  .foot-inner { grid-template-columns: 1fr; }
  .sec { padding: 38px 0; }
  .ctile .cname { font-size: 38px; }
}
@media (max-width: 380px) {
  .pgrid { grid-template-columns: 1fr; }
}

/* ---------- shop the deck: art, fits, builder ---------- */
.drip-word { color: var(--flag); position: relative; display: inline-block; }

.hero-grid { grid-template-columns: .9fr 1.1fr; align-items: center; }
.hero h1.hero-h { grid-column: auto; font-size: clamp(64px, 10.5vw, 168px); }
.hero-left .hero-sub { margin-top: 18px; }
.hero-fit { display: block; position: relative; text-decoration: none; color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 10px 10px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.hero-fit:hover { transform: translate(-3px, -3px); box-shadow: 13px 13px 0 var(--ink); }
.hero-fit-cap { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; padding: 8px 12px; }
.hero-fit-cap b { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: .9; }
.hero-fit-cap .mono { font-size: 13px; }
.flatlay { display: block; width: 100%; height: auto; }
.flatlay .pin text { pointer-events: none; }

.tag-art { height: 172px; background: radial-gradient(120% 90% at 50% 15%, #fffdf6 0%, color-mix(in srgb, var(--tint) 38%, #f6f2e8) 55%, color-mix(in srgb, var(--tint) 62%, #e9e3d2) 100%); }
.tag-art svg { width: 116px; height: 116px; transition: transform .2s ease; }
.tag:hover .tag-art svg { transform: rotate(-4deg) scale(1.06); }
.tag { transition: box-shadow .15s ease, transform .15s ease; }
.tag:hover { box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); }

.fit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.fit-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.fit-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
.fit-card .flatlay { border-bottom: 2px solid var(--ink); }
.fit-body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.fit-body h3 { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; font-size: 32px; line-height: .9; }
.fit-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.fit-tags a.badge { text-decoration: none; }
.fit-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: var(--muted); }
.fit-meta .total { font-size: 22px; font-weight: 700; color: var(--ink); }
.sub-h { font-size: clamp(36px, 5vw, 56px); margin: 30px 0 14px; }
.sec .sub-h:first-child { margin-top: 0; }

.fit-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: start; margin: 8px 0 30px; }
.fit-art { border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 10px 10px 0 var(--ink); position: sticky; top: 84px; }
.fit-title { font-size: clamp(46px, 6.5vw, 92px); margin: 10px 0 10px; }
.fit-total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin: 14px 0; background: var(--ink); color: var(--paper); border-radius: 8px; }
.fit-total .wide { color: var(--lime); }
.fit-total .big { font-size: 30px; font-weight: 700; }
.fit-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.fit-list li { display: grid; grid-template-columns: 30px 50px 1fr auto; gap: 10px; align-items: center; background: var(--card); border: 1.5px solid var(--ink); border-radius: 8px; padding: 10px 12px; }
.fit-list .num { width: 28px; height: 28px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.fit-list .mini { background: color-mix(in srgb, var(--paper) 70%, #fff); border-radius: 10px; }
.fl-name { font-weight: 700; line-height: 1.25; }
.fl-main .badge { margin-top: 4px; }
.fl-buy { display: grid; justify-items: end; gap: 6px; text-align: right; }
.fl-price { font-weight: 700; font-size: 18px; }
.shop-btn { font-weight: 700; text-decoration: none; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; white-space: nowrap; }
.shop-btn:hover { background: var(--ink); color: var(--lime); }

.build { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.build-controls { display: grid; gap: 12px; position: sticky; top: 84px; }
.build-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.build-controls label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.build-controls label em { font-style: normal; color: var(--ink); opacity: .55; }
.build-controls select { border: 1.5px solid var(--ink); background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 500; width: 100%; }
#b-slots { display: grid; gap: 10px; }
.build-actions { display: flex; gap: 10px; }
.build-preview .flatlay { border: 2px solid var(--ink); border-radius: 10px; box-shadow: 10px 10px 0 var(--ink); }

.ctile-gear { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.gear-chip { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,253,246,.9); border: 1.5px solid var(--ink); }
.gear-chip .mini { display: block; }
.ctile-gear .ties { margin-left: 4px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .fit-hero { grid-template-columns: 1fr; }
  .fit-art { position: static; }
  .build { grid-template-columns: 1fr; }
  .build-controls { position: static; }
}
@media (max-width: 640px) {
  .fit-grid { grid-template-columns: 1fr; }
  .fit-list li { grid-template-columns: 26px 40px 1fr; }
  .fit-list .fl-buy { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .hero-fit { box-shadow: 6px 6px 0 var(--ink); }
  .hero-fit-cap b { font-size: 20px; }
}

/* ---------- phones and touch: 44 px targets, 16 px form text, readable small text ---------- */
.boot-art { aspect-ratio: 640 / 440; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 10px 10px 0 var(--ink);
  background: repeating-linear-gradient(90deg, #36894f 0 6.25%, #2f7d4a 6.25% 12.5%); }
.sec { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.build { grid-template-areas: "controls art" "controls list"; }
.build-art { grid-area: art; }
.build-controls { grid-area: controls; }
.build-list { grid-area: list; }
.build-art .flatlay { border: 2px solid var(--ink); border-radius: 10px; box-shadow: 10px 10px 0 var(--ink); }
.build-actions .btn { flex: 1; justify-content: center; }
.check { display: inline-flex !important; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--turf-3); }

@media (max-width: 980px), (pointer: coarse) {
  .nav a, .logo, .link-arrow, .foot-nav a, .crumbs a, .tie a, .team a, .skip { display: inline-flex; align-items: center; min-height: 44px; }
  .btn, .btn.sm, .chip, .shop-btn, .tag-links a.shop { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .tag-links a.src, .fine a.src, .tag-meta a.src, .card > a.src, .kv a.src, .tie a.src { display: inline-flex; align-items: center; min-height: 44px; }
  .tag-brand { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
  .fit-tags a.badge { min-height: 44px; padding: 0 14px; font-size: 13px; }
  .toolbar select, .toolbar input[type="search"], .build-controls select { min-height: 44px; font-size: 16px; }
  #view p a:not(.btn):not(.shop):not(.shop-btn), #view dd a, #view li > a { padding-block: 12px; }
}
@media (max-width: 980px) {
  .build { grid-template-columns: 1fr; grid-template-areas: "art" "controls" "list"; }
  .build-art { position: sticky; top: 60px; z-index: 6; background: var(--paper); padding: 6px 0 8px; margin: 0 -2px; }
  .build-art .flatlay { box-shadow: 4px 4px 0 var(--ink); width: min(100%, calc(24vh * 1.4545)); margin: 0 auto; }
  .build-art .fit-total { margin: 8px 0 0; padding: 8px 12px; }
  .build-art .fit-total .big { font-size: 24px; }
}
@media (max-width: 640px) {
  .badge { font-size: 12.5px; padding: 4px 8px; }
  .wide { font-size: 12.5px; }
  .tie .type { font-size: 12px; }
  .tag-meta, .fine { font-size: 14px; }
  .nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 18px; }
  .boot-art { box-shadow: 6px 6px 0 var(--ink); }
}

/* ---------- fixes from the 375 / 414 / 768 px audit ---------- */
.pgrid { grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); }
.tag-links { flex-wrap: wrap; }
.tag-links a, .tag-name, .card a.src, .fit-list .fl-name { overflow-wrap: anywhere; }
.tag-body .badge { white-space: normal; }
@media (max-width: 980px), (pointer: coarse) {
  .card h3 a, #view li > a, .kv a { display: inline-flex; align-items: center; min-height: 44px; }
  #view p a:not(.btn):not(.shop):not(.shop-btn) { padding-block: 14px; }
}
@media (max-width: 980px) {
  .badge { font-size: 12.5px; }
  .wide, .hole .n, .toolbar label, .build-controls label, .build-controls label em, table.tbl th, .tie .type { font-size: 12.5px; }
}
@media (max-width: 640px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 340px) {
  .pgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px), (pointer: coarse) {
  .note a, .team a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
@media (max-width: 980px), (pointer: coarse) {
  .crumbs a { min-width: 44px; justify-content: center; }
}

/* shop filters: the less-used filters fold away on phones */
.more-filters { display: block; flex-basis: 100%; }
.more-filters > summary { display: none; }
.more-body { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
@media (max-width: 640px) {
  .more-filters { display: block; width: 100%; }
  .more-filters > summary { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 700; cursor: pointer; list-style: none; width: max-content; }
  .more-filters > summary::-webkit-details-marker { display: none; }
  .more-filters > summary::after { content: "+"; margin-left: 10px; font-family: var(--mono); }
  .more-filters[open] > summary::after { content: "–"; }
  .more-filters[open] .more-body { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
  .fit-art, .hero-fit { box-shadow: 5px 5px 0 var(--ink); }
}

/* ---------- real photos, collages, photo strip, TV, bags ---------- */
.tag-art.photo { background: #fff; height: auto; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; }
.tag-art.photo img, .tag-art.photo .ext-img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .25s ease; }
.tag:hover .tag-art.photo img { transform: scale(1.04); }
.tag-art .ph-fallback, .cl-cell .ph-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(120% 90% at 50% 15%, #fffdf6, #efe8d6); }
.tag-art .ph-fallback svg { width: 46%; height: auto; }
.ext-img.broken { visibility: hidden; }
.thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; background: #fff; display: block; }
.gear-chip .thumb { width: 34px; height: 34px; border-radius: 8px; }

.collage { display: grid; gap: 4px; aspect-ratio: 640 / 440; background: var(--ink); overflow: hidden; grid-auto-rows: minmax(0, 1fr); }
.collage.c2 { grid-template-columns: 1fr 1fr; }
.collage.c3, .collage.c4, .collage.c5 { grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(0, 1fr); }
.collage.c3 .cl-cell:first-child { grid-row: span 2; }
.collage.c4 .cl-cell:first-child { grid-row: span 3; }
.collage.c5 { grid-template-columns: 2fr 1fr 1fr; }
.collage.c5 .cl-cell:first-child { grid-row: span 2; }
.collage.c6 { grid-template-columns: repeat(3, 1fr); }
.cl-cell { position: relative; overflow: hidden; background: #fff; min-height: 0; }
.cl-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-cell .ph-fallback { position: absolute; inset: 0; }
.cl-cell .ph-fallback svg { width: 50%; height: auto; }
.pin-n { position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.hero-fit .collage, .fit-art .collage { aspect-ratio: 640 / 460; }

.photo-strip { background: var(--ink); overflow: hidden; border-bottom: 2px solid var(--ink); padding: 10px 0; }
.strip-track { display: flex; gap: 10px; width: max-content; animation: tick 70s linear infinite; }
.photo-strip:hover .strip-track { animation-play-state: paused; }
.strip-cell { position: relative; flex: none; width: 150px; height: 150px; border-radius: 8px; overflow: hidden; background: #fff; border: 2px solid #1c524e; }
.strip-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip-tag { position: absolute; right: 6px; bottom: 6px; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 12.5px; padding: 2px 7px; border-radius: 999px; border: 1.5px solid var(--ink); }

.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.vcard { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.vthumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #194a46; border: 2px solid var(--ink); }
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.vcard:hover .vthumb img { transform: scale(1.05); }
.vplay { position: absolute; right: 10px; bottom: 10px; width: 46px; height: 32px; border-radius: 9px; background: var(--flag); display: grid; place-items: center; box-shadow: 0 2px 0 var(--ink); }
.vplay::after { content: ""; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.vtitle { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vmeta { font-size: 13.5px; color: var(--muted); }
.sec.ink .vmeta { color: #b9c9bf; }
.player { position: fixed; inset: 0; z-index: 80; background: rgba(10, 11, 8, .82); display: grid; place-items: center; padding: 16px; }
.player-box { width: min(1000px, 100%); background: var(--ink); border: 2px solid var(--lime); border-radius: 8px; overflow: hidden; }
.player-frame { aspect-ratio: 16 / 9; background: #000; }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; color: var(--paper); flex-wrap: wrap; }
.player-title { font-weight: 700; }
.player-actions { display: flex; gap: 8px; }
.player .btn.alt { color: var(--paper); border-color: var(--paper); }
/* video pane (vpane.js): highlights, summary, and the result behind a tap */
.player.has-pane .player-box { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.player.has-pane .player-frame { position: sticky; top: 0; z-index: 1; }
.pane { color: var(--paper); padding: 4px 14px 16px; display: grid; gap: 14px; border-top: 1px solid rgba(244, 239, 228, .18); }
.pane-sec { display: grid; gap: 8px; padding-top: 10px; }
.pane-h { margin: 0; font-size: 13px; font-weight: 700; color: var(--lime); }
.pane-p { margin: 0; font-size: 15px; line-height: 1.5; max-width: 70ch; }
.pane-hl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.pane-hl button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--paper); background: rgba(244, 239, 228, .07); border: 1px solid rgba(244, 239, 228, .22); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.pane-hl button:hover, .pane-hl button:focus-visible { border-color: var(--lime); background: rgba(212, 162, 58, .14); }
.pane-hl .mono { flex: none; min-width: 48px; font-size: 13px; color: var(--lime); }
.pane-hl b { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.pane-wall { display: grid; gap: 8px; justify-items: start; border: 1.5px dashed rgba(244, 239, 228, .4); border-radius: 8px; padding: 12px; }
.pane-tag { font-size: 12px; font-weight: 700; background: var(--flag); color: #fff; border-radius: 6px; padding: 2px 8px; }
.pane-spoil { font-weight: 600; }
.pane-fine { margin: 0; font-size: 12.5px; color: #b9cbc7; }
@media (max-width: 640px) { .player { padding: 8px; } .player.has-pane .player-box { max-height: calc(100dvh - 16px); } }

.bags { display: grid; gap: 22px; }
.bag-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.bag-title { font-size: clamp(36px, 5vw, 56px); }
.clubs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.club { display: grid; grid-template-columns: 90px 64px 1fr auto; gap: 12px; align-items: center; border: 1.5px solid var(--ink); border-radius: 8px; padding: 8px 12px; background: #fff; }
.club-slot { color: var(--turf-3); }
.club-img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 10px; }
.club-none { display: grid; place-items: center; background: var(--paper); font-weight: 700; }
@media (max-width: 640px) {
  .club { grid-template-columns: 56px 1fr; }
  .club .club-slot { grid-column: 1 / -1; }
  .club .fl-buy { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .club-img { width: 56px; height: 56px; }
  .strip-cell { width: 116px; height: 116px; }
  .player-bar { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }
@media (max-width: 980px), (pointer: coarse) {
  .nav a { min-width: 44px; justify-content: center; }
}
@media (max-width: 980px) {
  .build-art .collage { width: min(100%, calc(24vh * 1.4545)); margin: 0 auto; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
}

.card h3.bag-title { font-size: clamp(36px, 5vw, 56px); margin: 2px 0 4px; }
.club-none svg { width: 44px; height: 44px; }

/* ---------- home hero: dark photo wall (feedback #6) ---------- */
.hero2 { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); min-height: min(820px, calc(100svh - 64px)); display: flex; align-items: flex-end; border-bottom: 2px solid var(--ink); isolation: isolate; }
.wall { position: absolute; inset: -18% -6% -18% -6%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; transform: rotate(-7deg); z-index: -2; }
.wall-col { display: flex; flex-direction: column; gap: 12px; animation: wallUp 70s linear infinite; will-change: transform; }
.wall-col.wc1 { animation-duration: 86s; animation-direction: reverse; }
.wall-col.wc2 { animation-duration: 62s; }
.wall-col.wc3 { animation-duration: 92s; animation-direction: reverse; }
.wall-col.wc4 { animation-duration: 76s; }
@keyframes wallUp { to { transform: translateY(-50%); } }
.wall-cell { display: block; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #fff; flex: none; }
.wall-cell img, .wall-cell .ph-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero2-shade { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 55% at 15% 92%, rgba(212,162,58,.22), transparent 62%),
  linear-gradient(180deg, rgba(16,46,44,.30) 0%, rgba(16,46,44,.50) 35%, rgba(16,46,44,.90) 70%, var(--ink) 100%); }
.hero2-inner { padding: 140px 0 40px; }
.live-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: rgba(16,46,44,.55); border: 1.5px solid rgba(242,239,230,.4); color: var(--paper); text-decoration: none; font-weight: 700; font-size: 14px; backdrop-filter: blur(8px); }
.live-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--flag); box-shadow: 0 0 0 4px rgba(200,75,40,.25); animation: blink 1.4s infinite; }
.hero2-h { font-size: clamp(84px, 15vw, 200px); color: var(--paper); margin-top: 16px; text-shadow: 0 6px 40px rgba(0,0,0,.55); }
.hero2-h .drip-word { color: var(--lime); }

.hero2-sub { font-size: 19px; line-height: 1.5; max-width: 36ch; color: #ece8dc; margin: 14px 0 0; }
.btn.ghost { background: rgba(16,46,44,.4); color: var(--paper); border-color: var(--paper); }
.btn.ghost:hover { background: var(--paper); color: var(--ink); }
.hero2-stats { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: #cfd8d1; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.hero2-stats b { font-family: var(--mono); color: var(--lime); font-size: 24px; margin-right: 6px; letter-spacing: 0; }

/* fit rail: swipe through whole fits */
.rail-sec .sec-head { margin-bottom: 16px; }
.fit-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 420px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px max(16px, calc((100vw - 1220px) / 2)) 22px; scroll-padding-inline: max(16px, calc((100vw - 1220px) / 2)); scrollbar-width: thin; }
.fit-rail > .fit-card { scroll-snap-align: start; }
.fit-rail:focus-visible { outline-offset: -3px; }

/* bag previews */
.bag-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.bag-mini { display: grid; gap: 6px; text-decoration: none; color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 8px; padding: 12px; transition: transform .15s ease, box-shadow .15s ease; }
.bag-mini:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.bag-mini-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 92px; }
.bag-mini-imgs img { width: 100%; height: 92px; object-fit: contain; background: #fff; border-radius: 10px; }
.bag-mini-imgs svg { width: 72px; height: 72px; grid-column: 1 / -1; justify-self: center; }
.bag-mini b { font-size: 32px; line-height: .9; }
.bag-mini .mono { font-size: 14px; font-weight: 700; color: var(--turf-3); }

/* ---------- phone and tablet menu (feedback #5) ---------- */
.menu-btn { display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #556865; background: transparent; color: var(--paper); font-weight: 700; font-size: 16px; cursor: pointer; }
.menu-btn:hover { border-color: var(--lime); color: var(--lime); }
.menu-ico { width: 18px; height: 12px; position: relative; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu-ico::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }
.menu-sheet { position: fixed; inset: 0; z-index: 70; background: var(--ink); color: var(--paper); overflow-y: auto; padding-bottom: 40px; }
.menu-sheet[hidden] { display: none; }
body.menu-open { overflow: hidden; }
.menu-top { display: flex; justify-content: space-between; align-items: center; min-height: 64px; border-bottom: 1px solid #1c524e; margin-bottom: 16px; }
.menu-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menu-tile { position: relative; min-height: 132px; border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; padding: 12px; text-decoration: none; color: #fff; border: 2px solid #2f312a; background: #1d1f19; }
.menu-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.menu-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(16,46,44,.9)); z-index: 1; }
.menu-tile span { position: relative; z-index: 2; display: grid; }
.menu-tile b { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; font-size: 38px; line-height: .9; }
.menu-tile small { font-size: 13px; color: var(--lime); font-weight: 700; }
.menu-tile[aria-current="page"] { border-color: var(--lime); }
.menu-list { margin-top: 14px; }
.menu-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 58px; border-bottom: 1px solid #1c524e; text-decoration: none; font-weight: 800; font-size: 20px; color: var(--paper); }
.menu-list a span { color: #9aa59c; font-size: 14px; font-weight: 500; }
.menu-list a[aria-current="page"] { color: var(--lime); }
@media (max-width: 1080px) {
  .top .nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 640px) {
  .hero2 { min-height: calc(100svh - 56px); }
  .wall { grid-template-columns: repeat(3, 1fr); inset: -12% -22% -12% -18%; gap: 10px; }
  .wall-col.wc3, .wall-col.wc4 { display: none; }
  .hero2-inner { padding: 120px 0 28px; }
  .hero2-h { font-size: clamp(76px, 22vw, 120px); }
  .hero2-sub { font-size: 17px; }
  .hero2-stats b { font-size: 21px; }
  .menu-tile b { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .wall-col { animation: none; } }

/* ---------- feedback 7 to 11 (2026-11-07) ---------- */
/* An element with the hidden attribute stays hidden, even when a phone rule sets display (ticket 11). */
[hidden] { display: none !important; }

/* Ticket 7: every store button has the same size. "Shop" on line 1, the store on line 2. */
.tag-fine { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: center; }
.tag-fine a.src { font-size: 12.5px; color: var(--muted); }
.tag-buy { margin-top: auto; display: grid; gap: 8px; border-top: 1.5px dashed var(--line); padding-top: 10px; }
.tag-buy .tag-price { margin-top: 0; white-space: nowrap; }
.shop.buy { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 54px; min-height: 54px; padding: 0 12px;
  background: var(--lime); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 8px; text-decoration: none; overflow: hidden; line-height: 1.15; text-align: center; }
.shop.buy b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.shop.buy small { display: block; max-width: 100%; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .82; }
a.shop.buy:hover { background: var(--ink); color: var(--lime); }
.tag .tag-brand { display: block; max-width: 100%; letter-spacing: .08em; }
@media (max-width: 980px), (pointer: coarse) {
  .tag .tag-brand { line-height: 20px; padding: 12px 0; margin: -12px 0; min-height: 0; }
  .tag-fine a.src { display: inline-block; line-height: 20px; padding: 12px 0; margin: -12px 0; min-height: 0; }
}
.tag .tag-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tag .tag-meta:not(.tag-fine) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Ticket 9: bag cards fill with four club tiles; a swipe row on phones. */
.bag-mini { display: grid; gap: 10px; padding: 10px; background: var(--ink); color: var(--paper); border-color: var(--ink); align-content: start; }
.bag-mini:hover { box-shadow: 6px 6px 0 var(--flag); }
.bm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bm-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #fffdf6; display: grid; place-items: center; }
.bm-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px 8px 22px; background: #fff; }
.bm-type { place-items: start; align-content: start; gap: 4px; padding: 10px 10px 32px; text-align: left; color: var(--ink); }
.bm-type.t0 { background: var(--lime); }
.bm-type.t1 { background: #fffdf6; }
.bm-type.t2 { background: var(--flag); color: #fff; }
.bm-type.t3 { background: var(--sky); }
.bm-brand { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }
.bm-model { font-size: 22px; line-height: .95; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bm-slot { position: absolute; left: 6px; bottom: 6px; font-size: 12.5px; font-weight: 700; background: var(--ink); color: var(--lime); padding: 1px 6px; border-radius: 5px; }
.bm-body { display: grid; gap: 4px; padding: 0 4px 4px; }
.bag-mini b { font-size: 30px; line-height: .9; color: var(--paper); }
.bag-mini .bm-body .mono { color: var(--lime); }
.bag-mini .bm-slot { color: var(--lime); }

/* Ticket 10: creator and style tiles show product photos across the top. */
.tile-photos { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 150px; background: var(--ink); border-bottom: 2px solid var(--ink); }
.tile-photos .tp { position: relative; overflow: hidden; background: #fff; }
.tile-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.tile-photos .ph-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: #fffdf6; }
.tile-photos .ph-fallback svg { width: 50%; height: auto; }
.ctile:hover .tile-photos img, .lane:hover .tile-photos img { transform: scale(1.05); }
.ctile.has-ph { aspect-ratio: auto; justify-content: flex-start; gap: 12px; padding: 0 0 16px; }
.ctile.has-ph .ctop { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; }
.ctile.has-ph .cfoot { padding: 0 64px 0 14px; display: grid; gap: 8px; }
.ctile.has-ph .play { z-index: 2; }
.lane.has-ph { padding: 0 0 18px; justify-content: flex-start; gap: 8px; min-height: 0; }
.lane.has-ph > :not(.tile-photos) { margin-inline: 18px; }
.lane.has-ph .tile-photos { margin-bottom: 6px; }
.lane.has-ph .count { margin-top: 4px; }

@media (max-width: 640px) {
  /* less empty space between sections (ticket 8) */
  .sec { padding: 30px 0; }
  .sec-head { margin-bottom: 16px; gap: 6px 16px; }
  .rail-sec .sec-head { margin-bottom: 10px; }
  .fit-rail { padding-bottom: 10px; }
  .bag-minis { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(70vw, 300px); overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -12px; padding: 4px 12px 12px; scroll-padding-inline: 12px; scrollbar-width: thin; }
  .bag-mini { scroll-snap-align: start; }
  .tile-photos { height: 132px; }
  .lane.has-ph .tile-photos { height: 120px; }
}

/* ---------- creator stores (phase 1) ---------- */
.store-hero { position: relative; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; margin: 8px 0 14px; box-shadow: 8px 8px 0 var(--ink); }
.store-hero .tile-photos { height: 230px; }
.store-band { padding: 22px; display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: start; }
.store-id { min-width: 0; }
.store-kick { display: flex; flex-wrap: wrap; gap: 8px; }
.store-badge { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.store-hero h1 { font-size: clamp(54px, 9vw, 120px); overflow-wrap: anywhere; margin-top: 10px; }
.store-line { margin: 8px 0 0; font-weight: 600; max-width: 60ch; }
.store-ctas { align-self: start; }
.store-stats { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.store-stats li { font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; }
.store-stats b { font-family: var(--mono); font-size: 26px; margin-right: 6px; letter-spacing: 0; text-transform: none; }
.store-src { grid-column: 1 / -1; margin: 0; color: inherit; opacity: .85; }
.store-jump { position: sticky; top: var(--top-h, 56px); z-index: 6; display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; margin: 0 0 18px; background: var(--paper); scrollbar-width: none; }
.store-jump::-webkit-scrollbar { display: none; }
.store-jump a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--ink); background: var(--card); }
.store-jump a:hover { background: var(--lime); }
.store-sec { margin: 0 0 40px; scroll-margin-top: calc(var(--top-h, 56px) + 70px); }
.store-sec > h2 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 14px; }
.store-sec > .muted { margin: -6px 0 14px; }
.store-h3 { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; font-size: 28px; line-height: .95; margin: 22px 0 12px; }
.store-sec > .store-h3:first-of-type { margin-top: 0; }
.store-note { margin: 0 0 16px; padding: 16px 18px; border: 2px solid var(--ink); border-left: 8px solid var(--lime); border-radius: 8px; background: var(--card); font-size: 18px; font-weight: 600; }
.store-note cite { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: var(--muted); }
.store-code { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 16px; }
.store-code b { font-size: 20px; }
.store-ftc { margin: 14px 0 0; }
@media (max-width: 640px) {
  .store-hero { box-shadow: 5px 5px 0 var(--ink); }
  .store-hero .tile-photos { height: 150px; }
  .store-hero .tp:nth-child(n+4) { display: none; }
  .store-band { grid-template-columns: 1fr; padding: 16px; }
  .store-stats b { font-size: 22px; }
}

/* ---------- player wiki and paged grids ---------- */
.more-row { display: flex; justify-content: center; margin: 22px 0 8px; }
.ptile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 16px 0 40px; }
.ptile { display: flex; gap: 12px; align-items: stretch; padding: 10px; border: 2px solid var(--ink); border-radius: var(--r); background: #fbfaf5; color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.ptile:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.ptile-mark { flex: 0 0 76px; display: grid; place-items: center; border-radius: 10px; border: 2px solid var(--ink); font-family: var(--display); font-stretch: 62.5%; font-weight: 900; font-size: 34px; min-height: 84px; }
.ptile-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ptile-body b { font-size: 17px; line-height: 1.2; }
.ptile-body small { font-size: 13.5px; line-height: 1.35; color: #44463d; }
.ptile-body em { font-style: normal; font-size: 11.5px; margin-top: auto; color: #55574e; }
.phead { margin: 12px 0 18px; padding: 22px; border: 2px solid var(--ink); border-radius: var(--r); }
.phead h1 { margin: 10px 0 0; font-size: clamp(48px, 9vw, 92px); line-height: .88; }
.phead-line { margin: 10px 0 0; max-width: 62ch; font-size: 18px; font-weight: 600; }
.psec { margin-bottom: 18px; }
.psec h2, .psec-h { font-size: 38px; margin: 24px 0 12px; }
.socials { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.soc { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.soc small { font-weight: 500; font-size: 12.5px; }
.soc .src { font-size: 11.5px; }
.phigh { list-style: none; margin: 0; padding: 0; }
.phigh li { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid #cfc9b8; }
.phigh b { color: var(--flag); }
.psrc { overflow-wrap: anywhere; }
details.psrc { margin: 26px 0 8px; font-size: 13.5px; color: #55574e; }
details.psrc summary { cursor: pointer; font-weight: 600; }

/* Search button, search page, filter bars (feedback tickets 29 and 31). */
.top-search { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; margin-left: 8px; border-radius: 999px; border: 1.5px solid #556865; color: var(--paper); }
.top-search svg { width: 20px; height: 20px; }
.top-search:hover, .top-search[aria-current] { border-color: var(--lime); color: var(--lime); }
@media (max-width: 1080px) {
  .top-search { margin-left: auto; }
  .menu-btn { margin-left: 8px; }
}
/* Small phones: the logo, search, and Menu must fit on one line. */
@media (max-width: 374px) {
  .top-inner { gap: 6px; }
  .top .logo { gap: 7px; }
  .top .logo-mark { width: 28px; height: 28px; }
  .top .wordmark { font-size: 16.5px; font-stretch: 100%; }
  .menu-btn { margin-left: 6px; padding: 0 8px; gap: 6px; }
}
.site-search { margin-bottom: 18px; }
.site-search input { width: 100%; min-height: 56px; padding: 0 18px; font-size: 18px; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; color: var(--ink); }
.s-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.s-link { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; }
.s-link span { font-size: 13px; color: var(--muted); }
.s-link:hover { background: var(--lime); }
a.chip { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.toolbar .check { display: flex; grid-auto-flow: column; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 15px; }
.toolbar .tb-q { flex: 1 1 200px; }
.toolbar .tb-q input { width: 100%; }

/* Show the whole product in a tile, not a slice of it (ticket 18). */
.tile-photos img { object-fit: contain; }
/* A creator with no photos yet still gets a strong tile (ticket 18). */
.ctile.no-ph { overflow: hidden; background-image: repeating-linear-gradient(135deg, rgba(16, 46, 44, .09) 0 14px, transparent 14px 28px); }
.ctile.no-ph::before { content: attr(data-mono); position: absolute; right: -6px; top: 30px; font-family: var(--display); font-stretch: 62.5%; font-weight: 900; font-size: 150px; line-height: .8; text-transform: uppercase; opacity: .16; pointer-events: none; }

/* Follow cards (ticket 33). */
.socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; margin-top: 12px; }
.soc-card { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; min-width: 0; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; }
.soc-card:hover { background: var(--lime); }
.soc-ico { flex: none; width: 28px; height: 28px; }
.soc-ico svg { display: block; width: 100%; height: 100%; }
.soc-txt { display: grid; min-width: 0; line-height: 1.2; }
.soc-txt small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A piece that is no longer sold new (ticket 35). */
.used-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 2px dashed var(--ink); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.used-btn:hover { background: var(--paper-2, #e6dfcd); }

/* The builder picks from photos (ticket 32). */
#b-slots { min-width: 0; display: grid; gap: 14px; margin-top: 14px; }
.pickrow { min-width: 0; }
.pickrow-h { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.pick-rail { display: flex; gap: 8px; overflow-x: auto; padding: 3px 3px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.pick { flex: 0 0 108px; scroll-snap-align: start; display: grid; gap: 3px; align-content: start; padding: 6px; border: 2px solid #cfc9b8; border-radius: 8px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.pick:hover { border-color: var(--ink); }
.pick[aria-pressed="true"] { border-color: var(--ink); background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
.pick-ph { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #fff; }
.pick-ph img, .pick-ph .ph-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.pick-name { font-size: 12px; line-height: 1.2; height: 2.4em; overflow: hidden; }
.pick-price { font-size: 12.5px; font-weight: 700; }

/* For brands and creators: the questions and the removal box. */
.partners { display: grid; gap: 22px; max-width: 760px; }
.faq { display: grid; gap: 8px; }
.faq details { background: var(--card); border: 2px solid var(--ink); border-radius: 8px; }
.faq summary { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-family: var(--mono); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 14px 14px; }
.remove-box { padding: 20px; background: var(--ink); color: var(--paper); border-radius: var(--r); }
.remove-box h2 { font-size: clamp(32px, 7vw, 44px); margin: 0 0 8px; }
.remove-box p { margin: 0 0 12px; }
.remove-box .fine, .remove-box .fine a { color: var(--paper); }
.remove-box .remove-cta { margin: 16px 0 12px; }

/* The Retro Bands deck ball is the default logo. */
.top, .foot, .menu-sheet { background: var(--ink); }
.logo-retro .lr-b0 { fill: var(--paper); }
.logo-retro .lr-b1 { fill: var(--lime); }
.logo-retro .lr-b2 { fill: var(--sky); }
.logo-retro .lr-b3 { fill: var(--flag); }
.logo-retro .lr-dim { fill: var(--ink); opacity: .5; }
.logo-mark.logo-retro { width: 42px; height: 42px; }
@media (max-width: 640px) { .logo-mark.logo-retro { width: 34px; height: 34px; } .logo { gap: 8px; } }
@media (max-width: 359px) { .top .logo-mark.logo-retro { width: 30px; height: 30px; } }

/* The Clubhouse: the home of YouTube fishing */
.cm-wrap { max-width: 600px; margin: 0 auto; padding: 0 14px; }
.cm-head { padding: 22px 0 6px; }
.cm-head h1 { font-size: clamp(44px, 13vw, 68px); line-height: .92; margin: 0; }
.cm-head p { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; }

/* Creator rail */
.cm-rail { display: flex; gap: 12px; overflow-x: auto; padding: 12px 2px 12px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; scrollbar-width: none; }
.cm-rail::-webkit-scrollbar, .cm-tabs-in::-webkit-scrollbar, .cm-eps::-webkit-scrollbar, .cm-swipe::-webkit-scrollbar, .cm-band-rail::-webkit-scrollbar { display: none; }
.cm-story { flex: 0 0 66px; display: grid; justify-items: center; gap: 5px; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; font: inherit; }
.cm-story .cm-story span:last-child { font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cm-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); font-family: var(--display); font-stretch: 62.5%; font-weight: 900; font-size: 16px; letter-spacing: .01em; }

/* Tabs */
.cm-tabs { position: sticky; top: var(--top-h, 56px); z-index: 12; background: var(--paper); border-bottom: 2px solid var(--ink); }
.cm-tabs-in { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.cm-tabs a { flex: none; padding: 12px 11px 10px; font-weight: 700; font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 4px solid transparent; margin-bottom: -2px; }
.cm-tabs a.on { color: var(--ink); border-color: var(--flag); }

.cm-body { padding-top: 14px; padding-bottom: 60px; }
.cm-list { display: grid; gap: 14px; }
.cm-more { height: 2px; }

/* Cards */
.cm-card { background: var(--card); border: 2px solid var(--ink); border-radius: 8px; padding: 12px; display: grid; gap: 10px; overflow: hidden; }
.cm-by { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cm-by-who { display: flex; align-items: center; gap: 9px; min-width: 0; color: inherit; text-decoration: none; }
.cm-by-who b { display: block; font-size: 15px; line-height: 1.2; }
.cm-by-who small { display: block; color: var(--muted); font-size: 12px; }
.cm-follow { flex: none; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font: inherit; font-weight: 700; font-size: 13px; padding: 0 13px; min-height: 36px; cursor: pointer; }
.cm-follow.on { background: transparent; color: var(--ink); }
.cm-kick { font-size: 12px; color: var(--flag); font-weight: 700; }
.cm-v { display: grid; gap: 8px; }
.cm-v .vtitle { font-weight: 700; font-size: 16px; line-height: 1.25; }
.cm-v .vthumb { border-radius: 8px; }
.cm-ep { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 6px; background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 700; }
.cm-link { font-weight: 700; font-size: 14px; color: var(--ink); text-underline-offset: 3px; }
.cm-link::after { content: " \2192"; }
.cm-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cm-h { font-size: 18px; margin: 0; line-height: 1.2; }
.cm-p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }

.cm-player { border: 2px solid var(--ink); border-radius: 8px; padding: 14px; display: grid; gap: 6px; }
.cm-player-tag { font-size: 12px; font-weight: 700; }
.cm-player h3 { margin: 0; font-size: 46px; line-height: .95; }
.cm-player p { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 500; }
.cm-fact { margin: 0; font-size: 15px; line-height: 1.4; }
.cm-fact b { color: var(--flag); margin-right: 3px; }

.cm-grid { display: grid; gap: 4px; grid-template-columns: 1fr 1fr; border-radius: 8px; overflow: hidden; border: 2px solid var(--ink); background: var(--ink); }
.cm-grid.n1 { grid-template-columns: 1fr; }
.cm-grid.n3 .cm-cell:first-child { grid-column: 1 / -1; }
.cm-cell { display: block; aspect-ratio: 1; background: #fff; }
.cm-grid.n3 .cm-cell:first-child { aspect-ratio: 2 / 1; }
.cm-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-clubs { margin: 0; padding: 0 0 0 18px; font-size: 14px; color: var(--ink-2); }

.cm-photo { display: block; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: #fff; }
.cm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-buy { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.cm-buy small { display: block; font-size: 11px; color: var(--muted); }
.cm-buy b { display: block; font-size: 15px; line-height: 1.25; }
.cm-buy .mono { font-size: 14px; }
.cm-buy .btn { flex: none; }

.cm-swipe { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
.cm-item { flex: 0 0 62%; max-width: 230px; scroll-snap-align: center; display: grid; gap: 2px; color: inherit; text-decoration: none; }
.cm-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 2px solid var(--ink); border-radius: 8px; background: #fff; margin-bottom: 6px; }
.cm-item small { font-size: 11px; color: var(--muted); }
.cm-item b { font-size: 14px; line-height: 1.2; }
.cm-item .mono { font-size: 13px; }

.cm-caught { text-align: center; padding: 20px 12px; border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line); display: grid; gap: 3px; }

/* Event pin */
.cm-pin { background: var(--ink); color: var(--paper); border-radius: 8px; padding: 14px; display: grid; gap: 8px; margin-bottom: 14px; overflow: hidden; }
.cm-pin .cm-kick { color: var(--lime); }
.cm-pin h2 { font-size: 44px; line-height: .95; margin: 0; }
.cm-pin p { margin: 0; font-size: 15px; line-height: 1.35; }
.cm-pin .btn { justify-self: start; }
.cm-eps { display: flex; gap: 10px; overflow-x: auto; margin: 0 -14px; padding: 2px 14px; scrollbar-width: none; scroll-snap-type: x proximity; }
.cm-epcell { flex: 0 0 66%; max-width: 250px; scroll-snap-align: start; }
.cm-epcell .vtitle { font-size: 13px; }
.cm-pin .vthumb { border-color: var(--paper); }
.cm-facts { display: grid; gap: 8px; margin-bottom: 14px; }
.cm-facts summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.cm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cm-empty { display: grid; gap: 10px; padding: 18px 2px; }
.cm-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 18px; }
.cm-who-a { display: flex; gap: 6px; margin-left: auto; }
.cm-search { margin: 14px 0 10px; }
.cm-search input { width: 100%; min-height: 46px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); font: inherit; font-size: 16px; color: var(--ink); box-sizing: border-box; }
.cm-pgrid { grid-template-columns: 1fr; padding-bottom: 40px; }

/* Profile videos */
.cm-pvids { margin: 18px 0 0; overflow: hidden; }
.cm-pvids-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cm-pvids-h h2 { margin: 0; font-size: 36px; }

/* Bottom-of-home layout */
.cm-homehead { background: var(--ink); color: var(--paper); padding-top: 8px; }
.cm-homehead .cm-head h2 { font-size: clamp(44px, 13vw, 68px); line-height: .92; margin: 0; }
.cm-homehead .cm-head p { color: var(--paper); }
.cm-homehead .cm-story { color: var(--paper); }
.cm-homehead .cm-tease { display: inline-block; margin-top: 12px; color: var(--lime); font-weight: 700; font-size: 14px; text-underline-offset: 3px; }
.cm-on-home .foot { display: none; }
.cm-menufine { color: var(--line); font-size: 12px; line-height: 1.4; margin: 14px 0 24px; }

.cm-shelf .pgrid, .cm-shelf .bag-minis { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-right: -16px; padding: 2px 16px 6px 2px; }
.cm-shelf .pgrid::-webkit-scrollbar, .cm-shelf .bag-minis::-webkit-scrollbar { display: none; }
.cm-shelf .pgrid > *, .cm-shelf .bag-minis > * { flex: 0 0 min(66%, 260px); scroll-snap-align: start; }
@media (max-width: 640px) { .cm-shelf .pgrid, .cm-shelf .bag-minis { margin-right: -12px; padding-right: 12px; } }

/* Real heights above the feed, so that a jump lands on the feed. */
.cm-on-home #view .sec { content-visibility: visible; contain-intrinsic-size: none; }

/* fishingers, profiles, and the event page */
.cm-story { text-decoration: none; }
.cm-subchips { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cm-profile { padding-bottom: 60px; }
.cm-profile .crumbs { padding-top: 16px; margin-bottom: 12px; }
.cm-profile .phead .badge { text-decoration: none; }
.cm-partof { margin: 10px 0 0; font-size: 15px; }
.cm-psec { margin-top: 26px; display: grid; gap: 10px; overflow: hidden; }
.cm-psec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cm-psec-h h2 { margin: 0; font-size: 36px; line-height: 1; }
.cm-psec .cm-swipe { margin: 0 -14px; padding: 0 14px 2px; }
.cm-all { justify-self: start; }
.cm-bag { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-bag li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; background: var(--card); border: 2px solid var(--ink); border-radius: 8px; padding: 8px; }
.cm-bag img, .cm-bag li > span { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 8px; display: block; }
.cm-bag small { display: block; font-size: 11px; color: var(--muted); }
.cm-bag b { display: block; font-size: 14px; line-height: 1.2; }
.cm-bag a { font-weight: 700; font-size: 14px; color: var(--ink); }
.cm-highs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.35; }
.cm-highs li { display: grid; grid-template-columns: 48px 1fr; gap: 8px; }
.cm-highs b { color: var(--flag); }
.cm-socs { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-socs a { border: 1.5px solid var(--ink); border-radius: 999px; padding: 9px 14px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--ink); }
.cm-teams { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cm-team { border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--card); }
.cm-team h3 { margin: 0; padding: 10px 12px; font-size: 18px; border-bottom: 2px solid var(--ink); }
.cm-team ul { list-style: none; margin: 0; padding: 4px 12px 8px; display: grid; }
.cm-team li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cm-team li:last-child { border-bottom: 0; }
.cm-team a { color: var(--ink); font-weight: 600; }
.cm-team small { color: var(--muted); }

/* Shop cards look different from video cards */
.cm-card.cm-shop { background: var(--turf); color: var(--paper); }
.cm-shoplabel { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; }
.cm-shoptag { background: var(--lime); color: var(--ink); border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 800; }
.cm-shop .cm-item, .cm-shop .cm-h { color: var(--paper); }
.cm-shop .cm-p { color: var(--paper); }
.cm-shop .cm-buy small, .cm-shop .cm-item small { color: var(--line); }
.cm-shop .cm-photo, .cm-shop .cm-grid, .cm-shop .cm-item img { border-color: var(--paper); }
.menu-tile.cm-nocover { background: var(--turf); }

/* Recaps and the spoiler wall */
.cm-recapdoor { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 11px; min-height: 44px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 10px; color: inherit; text-decoration: none; font-size: 14px; }
.cm-recapdoor span { color: var(--flag); font-weight: 700; font-size: 12px; }
.cm-wall { background: var(--ink); color: var(--paper); border-radius: 8px; padding: 18px 16px; display: grid; gap: 12px; justify-items: start; }
.cm-wall-tag { background: var(--flag); color: var(--paper); border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 800; }
.cm-wall h2 { margin: 0; font-size: 42px; line-height: .95; }
.cm-wall p { margin: 0; font-size: 16px; line-height: 1.4; }
.cm-recap-start { font-size: 17px; line-height: 1.45; margin: 14px 0 0; }
.cm-recap-sec { margin-top: 24px; display: grid; gap: 10px; }
.cm-recap-sec h2, .cm-recap-end h2 { margin: 0; font-size: 32px; line-height: 1; }
.cm-moment { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; }
.cm-moment b { display: block; font-size: 14px; line-height: 1.2; }
.cm-moment small { display: block; color: var(--muted); font-size: 12px; }
.cm-moment-play { flex: none; width: 34px; height: 24px; border-radius: 7px; background: var(--flag); display: grid; place-items: center; }
.cm-moment-play::after { content: ""; border-left: 10px solid var(--paper); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.cm-recap-end { margin-top: 26px; background: var(--ink); color: var(--paper); border-radius: 8px; padding: 16px; display: grid; gap: 8px; }
.cm-recap-end p { margin: 0; font-size: 16px; line-height: 1.4; }
.cm-recap-foot { margin-top: 18px; }

/* Creator marks: a photo of their gear, or a fishing ball with initials */
.cm-mark { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; font-family: var(--display); font-stretch: 62.5%; font-weight: 900; font-size: 17px; letter-spacing: .01em; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.cm-mark-ph { background: #fff; }
.cm-mark-ph img, .cm-tile-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cm-mark-ph img { padding: 4px; box-sizing: border-box; }
.cm-ball { background-image: radial-gradient(rgba(0, 0, 0, .1) 1.4px, transparent 1.9px), radial-gradient(rgba(0, 0, 0, .1) 1.4px, transparent 1.9px); background-size: 8px 8px; background-position: 0 0, 4px 4px; box-shadow: inset 0 -5px 9px rgba(0, 0, 0, .14), inset 0 3px 6px rgba(255, 255, 255, .35); }
.cm-story { flex: 0 0 72px; }
.cm-story .cm-mark { width: 64px; height: 64px; font-size: 24px; box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--ink-2); }
.cm-story .cm-mark.cm-ball { box-shadow: inset 0 -6px 11px rgba(0, 0, 0, .14), inset 0 4px 7px rgba(255, 255, 255, .35), 0 0 0 3px var(--ink), 0 0 0 5px var(--ink-2); }
.cm-story.fresh .cm-mark { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5.5px var(--lime); }
.cm-story.fresh .cm-mark.cm-ball { box-shadow: inset 0 -6px 11px rgba(0, 0, 0, .14), inset 0 4px 7px rgba(255, 255, 255, .35), 0 0 0 3px var(--ink), 0 0 0 5.5px var(--lime); }
.ptile-mark.cm-ball { border-color: var(--ink); }
.cm-tile-ph { background: #fff; padding: 6px; box-sizing: border-box; overflow: hidden; }
.cm-tile-ph img { position: static; }

/* fishinger filters: one swipe row that belongs to the brand */
.cm-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 10px; padding: 2px 14px; }
.cm-filter::-webkit-scrollbar { display: none; }
.cm-fbtn { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 15px; border: 0; border-radius: 8px; background: var(--card); color: var(--ink-2); font: inherit; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); }
.cm-fbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.cm-fbtn i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.cm-flink { background: transparent; box-shadow: none; color: var(--flag); }
.cm-filter-teams .cm-fbtn { min-height: 38px; padding: 0 12px; font-size: 13px; }
@media (max-width: 340px) { .cm-fbtn { padding: 0 12px; font-size: 13.5px; } .cm-filter { gap: 5px; } }

/* ---------- Discount decks ---------- */
@media (min-width: 1081px) and (max-width: 1400px) { .top .nav a { padding: 8px 8px; font-size: 14px; } }
.deal-badge { position: absolute; top: 10px; left: 10px; z-index: 3; background: var(--flag); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 10px; font-family: var(--mono); font-weight: 700; font-size: 15px; line-height: 1.1; white-space: nowrap; }
.tag:has(.deal-badge)::before { display: none; }
@media (max-width: 640px) { form[data-bar="discounts"] label:has(select[name="sort"]) { flex: 1 1 100%; } }
.tag-price .from { font-size: 13px; font-weight: 500; font-family: var(--body); }
.dbrand-lede { margin: 0 0 14px; }
.dbrands { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; margin-bottom: 40px; }
.dbrand { display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); min-width: 0; }
.dbrand:hover .tile-photos img { transform: scale(1.05); }
.dbrand-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; min-width: 0; }
.dbrand-body b { font-size: 28px; line-height: 1; overflow-wrap: anywhere; }
.dbrand-body small { font-size: 14px; line-height: 1.35; }
.dbrand-body .mono { margin-top: auto; font-weight: 700; font-size: 14px; }
@media (max-width: 640px) {
  .dbrands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .deal-badge { top: 8px; left: 8px; font-size: 14px; padding: 3px 8px; }
  .dbrand-body b { font-size: 22px; }
}

/* ---------- Feedback button (hidden by default) ---------- */
#htfb-btn { display: none !important; }
body.show-feedback #htfb-btn { display: inline-flex !important; }
.foot-fb { color: var(--muted); opacity: .25; text-decoration: none; font-size: 14px; margin-left: 6px; padding: 2px 4px; }
.foot-fb:hover, .foot-fb:focus-visible { opacity: 1; outline: 2px solid var(--flag); border-radius: 4px; }

/* Sizes on a card, and Discount decks by brand */
.tag-sizes { font-size: 13px; color: var(--muted); line-height: 1.35; }
.tag-sizes b { color: var(--ink); font-weight: 700; margin-right: 2px; }
.deal-brands { margin: 0 0 18px; }
.db-h { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.db-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.db-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-width: 190px; max-width: 250px; padding: 8px 14px 8px 8px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; scroll-snap-align: start; font: inherit; }
.db-btn img, .db-all { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #fff; flex: 0 0 auto; }
.db-all { display: grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--lime); }
.db-btn > span { display: grid; gap: 2px; min-width: 0; }
.db-btn b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-btn small { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.db-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.db-btn[aria-pressed="true"] small { color: var(--lime); }

/* ---------- social icons (social-icons.js) ---------- */
.soc-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.soc-ico-btn { --soc: var(--ink); --soc-on: #fff; position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 2px solid var(--ink); background: var(--card); color: var(--ink); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.soc-ico-btn svg { width: 22px; height: 22px; fill: currentColor; }
.soc-ico-btn:hover, .soc-ico-btn:focus-visible { background: var(--soc); color: var(--soc-on); transform: translateY(-2px); }
.soc-ico-btn:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; }
.soc-row { padding-top: 2px; }
/* The tooltip sits outside the clipped button, on a wrapper made by the row. */
.soc-row { position: relative; }
.soc-tip { position: absolute; z-index: 20; pointer-events: none; transform: translate(-50%, -100%); margin-top: -8px; background: var(--ink); color: var(--paper); font: 700 12px/1 var(--body); padding: 6px 8px; white-space: nowrap; border-radius: 4px; }
.soc-tip::after { content: ""; position: absolute; left: var(--tip-arrow, 50%); bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .soc-ico-btn:hover, .soc-ico-btn:focus-visible { transform: none; } }

/* ---------- fishingers: the tee sheet (clubhouse.js, Chase picked it 2026-11-09) ----------
   No boxes and no pills: an underline search, crew names as text tabs with a band marker, a quiet sort toggle,
   large condensed names, a band rail in crew colors, and gear cut-outs. No faces. */
.cm-wrap.ts { max-width: 1100px; padding: 0 16px; }
.ts-hero { position: relative; margin-top: 18px; padding: 18px 0 0; border-top: 6px solid var(--ink); }
.ts-hero-k { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ts-hero-k .wide { background: var(--flag); color: var(--paper); padding: 4px 9px; }
.ts-hero-name { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; line-height: .8; letter-spacing: -.015em; font-size: clamp(64px, 15vw, 200px); margin: 12px 0 0; color: var(--ink); }
.ts-strip { --n: 4; display: grid; grid-template-columns: repeat(var(--n), 1fr); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); margin-top: 10px; }
.ts-strip.n1 { --n: 1; } .ts-strip.n2 { --n: 2; } .ts-strip.n3 { --n: 3; } .ts-strip.n0 { display: none; }
.ts-hs { position: relative; aspect-ratio: 1 / .78; background: linear-gradient(var(--b0) 0 58%, var(--b1) 0 72%, var(--b2) 0 86%, var(--b3) 0); overflow: hidden; }
.ts-strip.n1 .ts-hs, .ts-strip.n2 .ts-hs { aspect-ratio: 2 / 1; }
.ts-hs + .ts-hs { border-left: 3px solid var(--ink); }
.ts-hs img, .ts-hs canvas { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.ts-hs img { mix-blend-mode: multiply; filter: brightness(1.1) contrast(1.16); }
.ts-hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 0 6px; }
.ts-hero-foot p { margin: 0; max-width: 46ch; font-size: 17px; flex: 1 1 280px; }

.ts-bar { position: relative; margin: 28px 0 6px; border-top: 3px solid var(--ink); }
.ts-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); opacity: .25; }
.ts-barrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 10px 28px; padding: 14px 0 6px; }
.ts-k { margin: 0; display: grid; gap: 2px; padding-bottom: 6px; }
.ts-k .wide { font-size: 11px; color: var(--flag); }
.ts-count { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.ts-search { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; }
.ts-search svg { width: 20px; height: 20px; flex: none; color: var(--ink); }
.ts-search input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; padding: 8px 0; font: 600 19px/1.2 var(--body); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
.ts-search input::placeholder { color: var(--muted); font-weight: 500; }
.ts-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ts-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transition: height .15s ease; }
.ts-search:focus-within .ts-rule { height: 7px; background: linear-gradient(var(--ink) 0 2px, var(--lime) 0 4.5px, var(--sky) 0); }
.ts-sort { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; white-space: nowrap; }
.ts-sort-k { font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; color: var(--muted); margin-right: 2px; }
.ts-sort i { font-style: normal; color: var(--flag); font-weight: 800; }
.ts-sort button { background: none; border: 0; padding: 10px 0; min-height: 44px; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.ts-sort button:hover { color: var(--ink); }
.ts-sort button[aria-pressed="true"] { color: var(--ink); font-weight: 800; text-decoration-color: var(--flag); }
.ts-sort button:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; border-radius: 0; }
.ts-tabs { display: flex; gap: 4px 26px; overflow-x: auto; scrollbar-width: none; padding: 4px 48px 0 0; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.ts-tabs::-webkit-scrollbar { display: none; }
.ts-tab { --b1: var(--ink); --b2: var(--ink); --b3: var(--ink); position: relative; flex: none; scroll-snap-align: start; display: inline-flex; align-items: flex-start; gap: 4px; background: none; border: 0; padding: 8px 0 16px; min-height: 44px; cursor: pointer; color: var(--ink); }
.ts-tab-nm { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; font-size: 23px; line-height: .9; letter-spacing: .005em; opacity: .42; transition: opacity .15s ease; }
.ts-tab-n { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--muted); }
.ts-mark { position: absolute; left: 0; right: 0; bottom: 3px; height: 9px; background: linear-gradient(var(--b1) 0 33.3%, var(--b2) 0 66.6%, var(--b3) 0); transform: scaleY(.22); transform-origin: bottom; opacity: .55; transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.ts-tab:hover .ts-tab-nm, .ts-tab:focus-visible .ts-tab-nm { opacity: .8; }
.ts-tab:hover .ts-mark { transform: scaleY(.5); opacity: 1; }
.ts-tab[aria-pressed="true"] .ts-tab-nm { opacity: 1; }
.ts-tab[aria-pressed="true"] .ts-mark { transform: none; opacity: 1; box-shadow: inset 0 0 0 1px rgba(16,46,44,.18); }
.ts-tab:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; border-radius: 0; }

.ts-group { margin-top: 34px; }
.ts-pair { display: grid; grid-template-columns: auto auto 1fr auto; align-items: end; gap: 14px; padding-bottom: 10px; border-bottom: 3px solid var(--ink); }
.ts-pair-n { font-weight: 700; font-size: 12px; background: var(--ink); color: var(--paper); padding: 3px 7px; align-self: center; }
.ts-pair h2 { font-size: clamp(36px, 5.5vw, 60px); }
.ts-pair-bands { display: grid; grid-template-rows: repeat(4, 5px); gap: 3px; align-self: center; }
.ts-pair-bands i:nth-child(1) { background: var(--b0); border: 1px solid var(--ink); }
.ts-pair-bands i:nth-child(2) { background: var(--b1); }
.ts-pair-bands i:nth-child(3) { background: var(--b2); }
.ts-pair-bands i:nth-child(4) { background: var(--b3); }
.ts-pair-c { font-weight: 700; font-size: 28px; }

.tsr { position: relative; display: grid; grid-template-columns: 14px 56px minmax(0, 1fr) auto; gap: 0 18px; align-items: center; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--ink); text-decoration: none; color: var(--ink); overflow: hidden; isolation: isolate; content-visibility: auto; contain-intrinsic-size: 800px 110px; }
.tsr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--b1), var(--b2) 70%, var(--b3)); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.tsr:hover::before, .tsr:focus-visible::before { transform: scaleX(1); }
.tsr:focus-visible { outline: 3px solid var(--flag); outline-offset: -3px; border-radius: 0; }
.tsr-rail { align-self: stretch; margin: -16px 0; background: linear-gradient(var(--b0) 0 40%, var(--b1) 0 60%, var(--b2) 0 78%, var(--b3) 0); border-right: 2px solid var(--ink); }
.tsr-no { font-weight: 700; font-size: 15px; color: var(--muted); }
.tsr-main { min-width: 0; display: grid; gap: 4px; }
.tsr-name { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; line-height: .86; font-size: clamp(36px, 5.6vw, 66px); letter-spacing: -.005em; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.tsr:hover .tsr-name { transform: translateX(8px); }
.tsr-meta { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.tsr-meta b { font-family: var(--display); font-stretch: 125%; font-weight: 800; letter-spacing: .06em; font-size: 11px; background: var(--ink); color: var(--paper); padding: 2px 6px; }
.tsr-meta i { font-style: normal; color: var(--flag); margin: 0 8px; font-weight: 800; }
.tsr-line { font-size: 14px; color: var(--ink-2); max-width: 62ch; }
.tsr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; position: relative; z-index: 1; transition: opacity .2s ease; }
.tsr-subs { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; text-transform: uppercase; font-weight: 700; }
.tsr-subs b { font-size: 30px; letter-spacing: -.02em; }
.tsr-bag { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 10px; max-width: 300px; font-size: 13px; line-height: 1.25; }
.tsr-bag-k { width: 100%; font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 9.5px; letter-spacing: .07em; color: var(--muted); }
.tsr-bag b { font-weight: 700; }
.tsr-bag b + b::before { content: "\00B7"; margin-right: 10px; color: var(--flag); }
.tsr-pop { position: absolute; right: 12px; top: 50%; width: 150px; height: 150px; margin-top: -75px; opacity: 0; transform: translateX(30px) rotate(10deg) scale(.8); transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.tsr-pop-bands { position: absolute; inset: 18px; border: 2px solid var(--ink); background: linear-gradient(var(--b0) 0 55%, var(--b1) 0 70%, var(--b2) 0 85%, var(--b3) 0); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.tsr-pop img, .tsr-pop canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tsr-pop img { mix-blend-mode: multiply; filter: brightness(1.1) contrast(1.16); }
@media (hover: hover) and (min-width: 761px) {
  .tsr.has-ph:hover .tsr-pop { opacity: 1; transform: none; }
  .tsr.has-ph:hover .tsr-side { opacity: 0; }
}
/* Cut-outs and snapshots. The cut-out code is in clubhouse.js. */
canvas.cut { display: block; filter: drop-shadow(4px 5px 0 rgba(16,46,44,.28)); }
.ts-hs.scene img, .tsr-pop.scene img { mix-blend-mode: normal; filter: none; object-fit: cover; border: 4px solid var(--card); outline: 2px solid var(--ink); }
.ts-hs.scene img { inset: 10%; width: 80%; height: 80%; }
.tsr-pop.scene img { inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); }
.ts-more { display: flex; justify-content: center; margin: 28px 0 50px; }
.ts-empty { text-align: center; padding: 50px 0; }
.ts-empty .display { font-size: 44px; }
.ts-mini { margin-top: 6px; }
.ts-mini .tsr-name { font-size: clamp(30px, 4vw, 44px); }

@media (max-width: 760px), (hover: none) {
  .tsr.has-ph { padding-right: 78px; }
  .tsr.has-ph .tsr-pop { opacity: 1; transform: rotate(6deg); width: 70px; height: 70px; top: 12px; margin-top: 0; right: 0; }
  .tsr.has-ph .tsr-pop-bands { inset: 6px; }
  .tsr.has-ph .tsr-pop.scene img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-width: 2px; }
}
@media (max-width: 760px) {
  .ts-barrow { grid-template-columns: 1fr; gap: 4px; padding-top: 10px; }
  .ts-k { grid-auto-flow: column; justify-content: space-between; align-items: baseline; padding: 0; }
  .ts-sort { overflow-x: auto; }
  .ts-tabs { gap: 4px 20px; }
  .ts-tab-nm { font-size: 21px; }
  .ts-strip.n4 { --n: 2; }
  .ts-strip.n4 .ts-hs:nth-child(3) { border-left: 0; }
  .ts-strip.n4 .ts-hs:nth-child(n+3) { border-top: 3px solid var(--ink); }
  .ts-pair { grid-template-columns: auto 1fr auto; }
  .ts-pair-bands { display: none; }
  .tsr { grid-template-columns: 10px 34px minmax(0, 1fr); gap: 0 12px; padding: 14px 0; }
  .tsr-side { grid-column: 3; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-top: 8px; text-align: left; }
  .tsr-bag { justify-content: flex-start; }
  .tsr-rail { grid-row: span 2; margin: -14px 0; }
  .tsr-no { grid-row: span 2; align-self: start; padding-top: 6px; font-size: 12px; }
  .tsr-subs b { font-size: 22px; }
  .tsr-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .tsr::before, .tsr-name, .tsr-pop, .ts-mark { transition: none; }
  .tsr:hover .tsr-name { transform: none; }
}

/* The crew list on a profile sits in the narrow profile column: it uses the stacked row at every width. */
.ts-mini .tsr { grid-template-columns: 10px 34px minmax(0, 1fr); gap: 0 12px; padding: 14px 0; }
.ts-mini .tsr.has-ph { padding-right: 78px; }
.ts-mini .tsr-side { grid-column: 3; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-top: 8px; text-align: left; opacity: 1 !important; }
.ts-mini .tsr-bag { justify-content: flex-start; }
.ts-mini .tsr-rail { grid-row: span 2; margin: -14px 0; }
.ts-mini .tsr-no { grid-row: span 2; align-self: start; padding-top: 6px; font-size: 12px; }
.ts-mini .tsr-subs b { font-size: 22px; }
.ts-mini .tsr.has-ph .tsr-pop { opacity: 1; transform: rotate(6deg); width: 70px; height: 70px; top: 12px; margin-top: 0; right: 0; }
.ts-mini .tsr.has-ph .tsr-pop-bands { inset: 6px; }
/* ---------- brand guide (replaced the leaderboard, 2026-11-09) ----------
   Tee Sheet direction: an underline search, text tabs with a Retro Bands marker, a quiet sort.
   Brand cards are tags with a clipped corner and the three sherbet bands on the bottom edge. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--flag); text-underline-offset: 3px; cursor: pointer; }
.bg-bar { margin: 6px 0 8px; border-top: 3px solid var(--ink); }
.bg-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: end; gap: 6px 18px; padding: 10px 0 2px; border-bottom: 1px solid rgba(16, 46, 44, .16); }
.bg-row.bg-top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-top: 14px; }
.bg-k { font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; color: var(--flag); padding-bottom: 12px; }
.bg-search { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; }
.bg-search svg { width: 20px; height: 20px; flex: none; color: var(--ink); }
.bg-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0; font: 600 19px/1.2 var(--body); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
.bg-search input::placeholder { color: var(--muted); font-weight: 500; }
.bg-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bg-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transition: height .15s ease; }
.bg-search:focus-within .bg-rule { height: 7px; background: linear-gradient(var(--ink) 0 2px, var(--lime) 0 4.5px, var(--sky) 0); }
.bg-sort { display: flex; align-items: baseline; gap: 8px; padding-bottom: 4px; font-size: 13.5px; white-space: nowrap; }
.bg-sort .bg-k { padding: 0; margin-right: 2px; color: var(--muted); }
.bg-sort i { font-style: normal; color: var(--flag); font-weight: 800; }
.bg-sort button { background: none; border: 0; padding: 10px 0; min-height: 44px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.bg-sort button:hover { color: var(--ink); }
.bg-sort button[aria-pressed="true"] { color: var(--ink); font-weight: 800; text-decoration-color: var(--flag); }
.bg-tabs { display: flex; gap: 2px 22px; overflow-x: auto; scrollbar-width: none; padding: 2px 48px 0 0; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.bg-tabs::-webkit-scrollbar { display: none; }
.bg-tab { --b1: var(--lime); --b2: var(--sky); --b3: var(--flag); position: relative; flex: none; scroll-snap-align: start; display: inline-flex; align-items: flex-start; gap: 4px;
  background: none; border: 0; padding: 8px 0 14px; min-height: 44px; cursor: pointer; color: var(--ink); }
.bg-tab-nm { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: .9; letter-spacing: .005em; opacity: .42; transition: opacity .15s ease; }
.bg-tab-n { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--muted); }
.bg-mark { position: absolute; left: 0; right: 0; bottom: 3px; height: 9px; background: linear-gradient(var(--b1) 0 33.3%, var(--b2) 0 66.6%, var(--b3) 0);
  transform: scaleY(.22); transform-origin: bottom; opacity: 0; transition: transform .15s ease, opacity .15s ease; }
.bg-tab:hover .bg-tab-nm, .bg-tab:focus-visible .bg-tab-nm { opacity: .8; }
.bg-tab:hover .bg-mark { transform: scaleY(.5); opacity: 1; }
.bg-tab[aria-pressed="true"] .bg-tab-nm { opacity: 1; }
.bg-tab[aria-pressed="true"] .bg-mark { transform: none; opacity: 1; box-shadow: inset 0 0 0 1px rgba(16, 46, 44, .18); }
.bg-tab:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; }
/* each look keeps one color, on its tab and on its tags */
.t-street { --b1: var(--flag); --b2: var(--ink); --b3: var(--flag); --tc: var(--flag); }
.t-loud { --b1: var(--lime); --b2: var(--gold); --b3: var(--flag); --tc: var(--lime); }
.t-retro { --b1: var(--gold); --b2: var(--turf-3); --b3: var(--gold); --tc: var(--gold); }
.t-clean { --b1: var(--sky); --b2: var(--paper); --b3: var(--sky); --tc: var(--sky); }
.t-collector { --b1: #b8cfc8; --b2: var(--lime); --b3: #b8cfc8; --tc: #b8cfc8; }
.t-gear { --b1: var(--turf-3); --b2: var(--sky); --b3: var(--turf-3); --tc: var(--turf-3); }
.bg-count { margin: 14px 0 12px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--muted); }

.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 26px 22px; margin-bottom: 48px; }
.bcard { position: relative; display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--ink);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); padding-bottom: 12px; transition: transform .15s ease; }
.bcard::before { content: ""; position: absolute; right: -2px; top: -2px; width: 31px; height: 31px; background: linear-gradient(225deg, transparent 0 15px, var(--ink) 15px 17px, transparent 17px); pointer-events: none; z-index: 3; }
.bcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(var(--lime) 0 33.3%, var(--sky) 0 66.6%, var(--flag) 0); border-top: 2px solid var(--ink); }
.bcard:hover { transform: translateY(-3px) rotate(-.4deg); }
.bcard:focus-within { outline: 3px solid var(--flag); outline-offset: 3px; }
.bcard-ph { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; aspect-ratio: 16 / 10; background: var(--ink); border-bottom: 2px solid var(--ink); overflow: hidden; }
.bcard-cell { background: color-mix(in srgb, var(--bc) 42%, #fff); overflow: hidden; display: block; }
.bcard-cell.c0 { grid-row: 1 / span 2; }
.bcard-cell img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; transition: transform .3s ease; }
.bcard:hover .bcard-cell img { transform: scale(1.05); }
.bcard-ph:has(.bcard-cell:only-child) { grid-template-columns: 1fr; }
.bcard-ph:has(.c1):not(:has(.c2)) .c1 { grid-row: 1 / span 2; }
.bcard.no-ph .bcard-ph { grid-template-columns: 1fr; background: var(--bc); place-items: center; }
.bcard-mono { font-family: var(--display); font-stretch: 62.5%; font-weight: 900; font-size: 96px; line-height: 1; color: var(--ink); opacity: .85; }
.bcard-body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bcard-kind { font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bcard-nm { margin: 0; font-family: var(--display); font-stretch: 62.5%; font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: .92; }
.bcard-nm a { color: var(--ink); text-decoration: none; }
.bcard-nm a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bcard-perks { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.bcard-perks li { display: flex; align-items: center; gap: 9px; }
.bcard-perks li::before { content: ""; flex: none; width: 14px; height: 9px; background: linear-gradient(var(--lime) 0 33.3%, var(--sky) 0 66.6%, var(--flag) 0); border: 1.5px solid var(--ink); }
.bcard-tags { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; }
.bg-tag { position: relative; font-family: var(--display); font-stretch: 100%; font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); text-decoration: none; padding-bottom: 3px;
  background: linear-gradient(var(--tc, var(--lime)), var(--tc, var(--lime))) left bottom / 100% 4px no-repeat; }
a.bg-tag { position: relative; z-index: 2; }
.bcard-who { margin: auto 0 0; padding-top: 6px; font-size: 13.5px; color: var(--muted); }
.bcard-who span { font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.bcard-who a { position: relative; z-index: 2; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--flag); text-underline-offset: 3px; }

/* brand page header: perks in place of a position */
.bhead .bperks { display: grid; gap: 12px; justify-items: end; text-align: right; }
.bperks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-weight: 800; font-size: 16px; }
.bperks li { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.bperks li::before { content: ""; width: 16px; height: 10px; background: linear-gradient(var(--lime) 0 33.3%, var(--sky) 0 66.6%, var(--flag) 0); border: 1.5px solid currentColor; }
.bhead .bg-tag { color: inherit; }

@media (max-width: 760px) {
  .bg-row { grid-template-columns: 1fr; gap: 0; padding-top: 8px; }
  .bg-row.bg-top { grid-template-columns: 1fr; gap: 2px; }
  .bg-k { padding-bottom: 0; }
  .bg-sort { overflow-x: auto; }
  .bg-tab-nm { font-size: 20px; }
  .bg-tabs { gap: 2px 18px; }
  .bg-grid { grid-template-columns: 1fr; gap: 20px; }
  .bcard-ph { aspect-ratio: 16 / 8; }
  .bhead .bperks { justify-items: start; text-align: left; }
  .bperks li { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .bcard, .bcard-cell img, .bg-mark, .bg-rule, .bg-tab-nm { transition: none; }
  .bcard:hover { transform: none; }
  .bcard:hover .bcard-cell img { transform: none; }
}

/* ---------- disclosure and privacy (2026-11-09) ---------- */
.foot-disclose { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--paper); opacity: .86; max-width: 72ch; }
.foot-disclose a { color: inherit; text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.legal { margin-bottom: 56px; }
.legal section:first-child { border-top: 3px solid var(--ink); }
.legal section { max-width: 760px; padding: 16px 0 18px; border-bottom: 1px solid rgba(16, 46, 44, .16); display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 24px; }
.legal h2 { margin: 2px 0 0; font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--flag); }
.legal p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.legal a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--flag); text-underline-offset: 3px; }
@media (max-width: 640px) { .legal section { grid-template-columns: 1fr; } }

/* ---------- Find on Amazon: a quiet second link, never the main button (2026-11-09) ---------- */
.amz-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.amz-link::after { content: "\2197"; font-size: 11px; text-decoration: none; }
.amz-link:hover { color: var(--ink); text-decoration-color: var(--flag); }
.club-main .amz-link, .cm-bag .amz-link { display: inline-flex; font-size: 12px; font-weight: 700; margin-top: 2px; }

/* Fit photos that open the store (the page of one fit) */
a.cl-cell { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.cl-go { position: absolute; right: 8px; bottom: 8px; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; border: 2px solid var(--ink); }
a.cl-cell:hover .cl-go, a.cl-cell:focus-visible .cl-go { background: var(--lime); color: var(--ink); }
a.cl-cell:focus-visible { outline: 3px solid var(--flag); outline-offset: -3px; }

/* "Shop this video" in the video pane */
.pane-shop .cm-swipe { margin: 0; padding: 0 0 2px; }
.pane-shop .cm-item { flex: 0 0 40%; max-width: 170px; color: var(--paper); }
.pane-shop .cm-item small { color: rgba(244, 239, 228, .7); }
.pane-shop .cm-item s { opacity: .7; }
.pane-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- the disclosure next to the store links, and in the menu (2026-11-10) ---------- */
.near-disclose { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); max-width: 70ch; }
.near-disclose a { color: var(--ink-2); font-weight: 700; text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.cm-wrap > .near-disclose { margin: 12px 0 4px; }
.cm-menufine p { margin: 0 0 10px; }
.cm-menulinks { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cm-menulinks a { color: var(--paper); font-weight: 700; font-size: 14px; min-height: 40px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.hero2 .near-disclose { color: rgba(244, 239, 228, .82); margin-top: 14px; }
.hero2 .near-disclose a { color: var(--paper); }

/* ---------- SkiffDeck waterman field-guide polish ---------- */
.hero-kicker { font-family: var(--display); font-stretch: 115%; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; color: var(--lime); }
.hero2-sub, .page-head p.lede, .sec-head p { font-family: var(--body); font-weight: 400; }
.logo-mark .hook { stroke: var(--paper); }
.logo-mark .wing { fill: var(--lime); }
.logo-mark .wrap-band { fill: var(--flag); }
.logo-mark .eye { stroke: var(--lime); }

.lane.p-flats-skiff { background: var(--ink); color: var(--paper); }
.lane.p-flats-skiff::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 18px, rgba(212,162,58,.14) 18px 20px); }
.lane.p-tailwater-fly { background: var(--turf); color: var(--paper); }
.lane.p-tailwater-fly::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(159,201,194,.16) 0 12px, transparent 13px) 0 0 / 44px 44px; }
.lane.p-bass-deck { background: var(--flag); color: #fff; }
.lane.p-bass-deck::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 24px); }
.lane.p-offshore { background: #163638; color: var(--paper); }
.lane.p-offshore::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 24px, rgba(159,201,194,.13) 24px 26px); }
.lane.p-ranch-river { background: #e9dec6; color: var(--ink); }
.lane.p-ranch-river::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,46,44,.06) 1px, transparent 1px) 0 0 / 22px 22px; }
.lane.p-marsh-camo { background: #263f33; color: var(--paper); }
.lane.p-marsh-camo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(212,162,58,.15) 2px, transparent 3px) 0 0 / 16px 16px; }

.t-flats-skiff { --b1: var(--sky); --b2: var(--lime); --b3: var(--sky); --tc: var(--sky); }
.t-tailwater-fly { --b1: var(--turf-3); --b2: var(--gold); --b3: var(--turf-3); --tc: var(--turf-3); }
.t-bass-deck { --b1: var(--flag); --b2: var(--ink); --b3: var(--flag); --tc: var(--flag); }
.t-offshore { --b1: var(--ink); --b2: var(--sky); --b3: var(--ink); --tc: var(--sky); }
.t-ranch-river { --b1: var(--lime); --b2: var(--flag); --b3: var(--lime); --tc: var(--lime); }
.t-marsh-camo { --b1: var(--turf); --b2: var(--lime); --b3: var(--turf); --tc: var(--gold); }