/* Stuff We All Got: shared styles
   Direction: Tag day (see BRAND.md). Colored price stickers, hand-lettered shelf signs,
   and masking tape on a clean white base with black ink. Black does the work; tag colors
   are whole surfaces (a sign, a tag, a band), never body text. */

:root {
  --white: #FFFFFF;      /* page background */
  --shelf: #EDEDED;      /* alternate bands, placeholder areas */
  --ink: #000000;        /* text, rules, buttons, the redaction bar */
  --ink-soft: #4D4D4D;   /* secondary text */
  --yellow: #F5E600;     /* tag yellow: headers, featured signs, button hover */
  --pink: #FF3E8A;       /* tag pink: signs, sale tags */
  --green: #8BE03A;      /* tag green: signs, "new" tags, startup swag */
  --blue: #33A6FF;       /* tag blue: signs, big tech */
  --orange: #FF7A00;     /* tag orange: signs, nostalgia */
  --red-pen: #E0301E;    /* circles, corrections, "staff pick" marks only */
  --kraft: #C9A273;      /* hang tags only */
  --tape: rgba(236, 222, 170, 0.85); /* masking tape */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --hand: "Nanum Pen Script", "Comic Sans MS", cursive;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --measure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--display);
  font-variation-settings: "wdth" 100;
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: break-word; /* long emails and URLs wrap instead of widening the page */
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--yellow); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.band-ink :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }

/* Visible only to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 10;
  padding: 12px 16px; background: var(--ink); color: var(--white); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s2); }
.skip-link:hover { background: var(--ink); }
main:focus { outline: none; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s3); }
.prose, .wrap > p.muted { max-width: var(--measure); }

/* ---------- Type ---------- */
h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.02;
  margin: 0 0 var(--s2);
  letter-spacing: -0.01em;
}
h1 {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  font-weight: 900;
  font-variation-settings: "wdth" 62;
}
h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  font-variation-settings: "wdth" 70;
}
h3 {
  font-size: 1.35rem;
  font-weight: 700;
  font-variation-settings: "wdth" 88;
  line-height: 1.2;
}
p { margin: 0 0 var(--s2); }
.lede { font-size: 1.25rem; line-height: 1.5; max-width: 40ch; }
.muted { color: var(--ink-soft); }
.hand { font-family: var(--hand); font-size: 1.6em; line-height: 1; }

/* ---------- Header ---------- */
.site-header { border-bottom: 3px solid var(--ink); background: var(--yellow); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2); padding-top: var(--s2); padding-bottom: var(--s2);
}

/* Wordmark: initials stack to spell SWAG */
.wordmark {
  display: inline-grid; grid-auto-rows: 0.92em; text-decoration: none; color: var(--ink);
  font-size: 1rem; font-weight: 400; line-height: 0.92; font-variation-settings: "wdth" 75;
}
.wordmark span b { font-weight: 900; font-size: 1.25em; }
.wordmark:hover { color: var(--ink); }

.nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.nav a {
  text-decoration: none; font-weight: 700; font-variation-settings: "wdth" 85;
  padding: 10px 0; border-bottom: 3px solid transparent;
}
.nav a:hover { background: none; border-bottom-color: var(--ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 14px 22px; min-height: 44px;
  background: var(--ink); color: var(--white); border: 3px solid var(--ink);
  font: 700 1rem var(--display); font-variation-settings: "wdth" 85;
  text-decoration: none; border-radius: 2px; cursor: pointer;
}
.btn:hover { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- Sections ---------- */
section { padding: var(--s6) 0; }
.band { background: var(--shelf); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.band-ink { background: var(--ink); color: var(--white); }
.band-ink a { color: var(--white); }
.band-ink a:hover { background: var(--yellow); color: var(--ink); }

.page-head { padding: var(--s6) 0 var(--s5); border-bottom: 3px solid var(--ink); }

/* ---------- Hero ---------- */
.hero { padding: var(--s6) 0; }
.hero h1 { max-width: 20ch; }

/* ---------- Four good homes ---------- */
/* One tee, four fates. Each tile is a Shelf-gray picture box with a shelf sign taped
   on as its tag, overlapping the bottom-left corner. Two across on phones, four on desktop. */
.hero .scrawl {
  display: inline-block; margin: 0; font-family: "Permanent Marker", var(--hand);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.1; color: var(--red-pen); transform: rotate(-2deg);
}
.homes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s2); margin-top: var(--s5); }
@media (min-width: 900px) { .homes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5) var(--s3); } }
.home-tile { position: relative; display: flex; flex-direction: column; }
.home-tile p { margin: var(--s5) 0 var(--s1); }
.home-art {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--s1) var(--s2) var(--s3);
  background: var(--shelf); border: 3px solid var(--ink);
}
.home-art svg { width: 100%; height: 100%; }
/* the shelf sign as a small tag: no room reserved for a doodle */
.home-tag.sign {
  position: absolute; left: -8px; bottom: -24px; min-width: 0; max-width: none; margin: 0;
  padding: 12px 16px 8px; font-size: 1rem; line-height: 1; letter-spacing: 0;
}
.home-tag .sign-tape { width: 56px; height: 20px; margin-left: -28px; top: -10px; }
.home-tag.sign .mk { font-size: 1.7rem; white-space: nowrap; }
.home-tile .go { margin-top: auto; font-weight: 800; font-variation-settings: "wdth" 85; }
/* The tile's link covers the whole tile; a link in the copy (Trade it) sits above it */
.home-tile .go { text-decoration: none; }
.home-tile .go::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.home-tile .go:hover { background: none; }
.home-tile .go:focus-visible { outline: none; }
.home-tile .go:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 6px; }
.home-tile p a { position: relative; z-index: 3; }
.home-tile:has(.go):hover .home-art { box-shadow: 6px 6px 0 var(--ink); }
.home-tile:has(.go):hover .go { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
@media (max-width: 599px) { .home-tag.sign .mk { font-size: 1.2rem; } .home-tag.sign { padding: 10px 12px 6px; } }

/* The numbers band under the tiles: one sourced line and the way to the rest */
.home-numbers { padding: var(--s5) 0; }
.numbers-line {
  max-width: 30ch; margin: 0 0 var(--s2); font-weight: 800; font-variation-settings: "wdth" 70;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1;
}
.home-numbers .go { font-weight: 800; font-variation-settings: "wdth" 85; }
.home-receipts { margin-top: 0; }

/* ---------- Redaction bar ---------- */
.redact { background: var(--ink); color: var(--ink); padding: 0 0.2em; user-select: none; }

/* ---------- Rubber stamp ---------- */
.stamp {
  display: inline-block; padding: 4px 10px; border: 3px double currentColor;
  font-weight: 900; font-variation-settings: "wdth" 70; font-size: 0.95rem; letter-spacing: 0.04em;
  transform: rotate(-4deg); color: var(--ink);
}
.stamp.cover { transform: rotate(3deg); }

/* ---------- Bins (eBay searches) ---------- */
.bins { display: grid; gap: var(--s4); }
@media (min-width: 760px) {
  .bins { grid-template-columns: repeat(3, 1fr); }
  /* Each bin spans the same three rows (sign, heading, list). The sign row is as tall as
     the tallest sign, every sign stretches to fill it, and the headings line up below. */
  .bin { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.bin h3 { border-bottom: 3px solid var(--ink); padding-bottom: var(--s1); }
.bin ul { list-style: none; margin: 0; padding: 0; }
.bin li { border-bottom: 1px solid rgba(0,0,0,0.25); }
.bin a { display: flex; justify-content: space-between; gap: var(--s2); padding: 12px 0; text-decoration: none; font-weight: 600; }
.bin a span { color: var(--ink-soft); font-weight: 400; white-space: nowrap; }
.bin a:hover span { color: var(--ink); }
.bin .sign { margin-bottom: var(--s3); }

/* ---------- Ledger (numbers + logo guide) ---------- */
.ledger-wrap { overflow-x: auto; border: 3px solid var(--ink); background: #fff; }
.ledger { width: 100%; border-collapse: collapse; min-width: 640px; }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: var(--s2); border-bottom: 1px solid rgba(0,0,0,0.2); }
.ledger thead th {
  background: var(--ink); color: var(--white); font-weight: 700; font-variation-settings: "wdth" 85;
  border-bottom: 0;
}
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger .fig {
  font-weight: 900; font-variation-settings: "wdth" 62; font-size: 2rem; line-height: 1; white-space: nowrap;
}
.ledger .src { font-size: 0.9rem; color: var(--ink-soft); }
.ledger .src a { color: var(--ink-soft); }
/* The row a receipt links to */
.ledger tr { scroll-margin-top: var(--s5); }
.ledger tr:target td { background: var(--yellow); }
.ledger tr:target .src, .ledger tr:target .src a { color: var(--ink); }

.note {
  border: 3px solid var(--ink); background: var(--yellow); padding: var(--s2) var(--s3); max-width: var(--measure);
}
/* Damage warnings on the guides and the tool kit: a black rule down the left, so it reads as a
   heads-up without competing with the yellow notes */
.caution {
  border-left: 6px solid var(--ink); padding: 4px 0 4px var(--s2); margin: var(--s2) 0 0;
  max-width: var(--measure); font-size: 0.95rem;
}

/* ---------- Patches ---------- */
.patches { display: grid; gap: var(--s4) var(--s3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* ---------- Tool list ---------- */
.tools { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.tools li { display: grid; gap: 4px; padding: var(--s2) 0; border-bottom: 1px solid rgba(0,0,0,0.25); }
@media (min-width: 640px) { .tools li { grid-template-columns: 14rem 1fr; gap: var(--s3); } }
.tools strong { font-variation-settings: "wdth" 85; }

/* ---------- Forms ---------- */
.signup { display: flex; flex-wrap: wrap; gap: var(--s1); max-width: 520px; }
.signup label { flex-basis: 100%; font-weight: 700; }
.signup input {
  flex: 1 1 240px; min-height: 48px; padding: 12px 14px; font: 1rem var(--display);
  border: 3px solid var(--ink); border-radius: 2px; background: #fff; color: var(--ink);
}
.signup input:focus-visible { outline-offset: 0; }
.band-ink .signup input { border-color: var(--white); }
.band-ink .btn { background: var(--white); border-color: var(--white); color: var(--ink); }
.band-ink .btn:hover { background: var(--yellow); border-color: var(--yellow); }
.form-msg { flex-basis: 100%; min-height: 1.5em; margin: 0; }

.embed-slot {
  border: 3px dashed var(--ink-soft); background: #fff; padding: var(--s4); max-width: 720px;
}
.embed-slot ol { padding-left: 1.2em; margin: 0; }
.embed-slot li { margin-bottom: var(--s1); }

/* ---------- FAQ ---------- */
.faq { max-width: var(--measure); border-top: 3px solid var(--ink); }
.faq details { border-bottom: 1px solid rgba(0,0,0,0.3); }
.faq summary {
  cursor: pointer; padding: var(--s2) 0; font-weight: 800; font-variation-settings: "wdth" 85; font-size: 1.15rem;
  list-style: none; display: flex; justify-content: space-between; gap: var(--s2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: var(--s2); }
.faq details { scroll-margin-top: var(--s5); }

/* ---------- Two-col helper ---------- */
.split { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

/* ---------- Placeholder marker (remove before launch) ---------- */
.todo { background: #FFF1A8; outline: 2px dashed #B38F00; padding: 0 4px; font-size: 0.9em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--white); padding: var(--s5) 0; font-size: 0.95rem; }
.site-footer a { color: var(--white); }
.site-footer a:hover { background: var(--yellow); color: var(--ink); }
.site-footer .wrap { display: grid; gap: var(--s3); }
@media (min-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr 2fr; } }
.site-footer .wordmark { color: var(--white); }
.site-footer .foot-nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-bottom: var(--s2); }
.site-footer .fine { color: #B8B8B8; max-width: 70ch; }
.site-footer .foot-nav a[aria-current="page"] { text-decoration-thickness: 4px; }
.site-footer .socials { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-bottom: var(--s3); }
.site-footer .socials .todo { color: var(--ink); }

/* ---------- Wordmark size + mobile ledger stacking ---------- */
.site-header .wordmark { font-size: 1.15rem; }
@media (max-width: 700px) {
  .ledger { min-width: 0; }
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger tr { display: block; padding: var(--s2); border-bottom: 1px solid rgba(0,0,0,0.2); }
  .ledger tbody tr:last-child { border-bottom: 0; }
  .ledger td { display: block; padding: 4px 0; border: 0; }
  .ledger .fig { font-size: 2.2rem; margin-bottom: 4px; }
}
@media (min-width: 701px) {
  .ledger { table-layout: fixed; }
  .ledger th:first-child { width: 11rem; }
  .ledger th:last-child { width: 16rem; }
}

/* ---------- Handwritten touches (use sparingly) ---------- */
.aside { font-family: var(--hand); font-weight: 400; font-size: 0.8em; color: var(--ink-soft); white-space: nowrap; }
.signoff { font-family: var(--hand); font-size: 2.4rem; line-height: 1; margin: var(--s3) 0 0; transform: rotate(-2deg); display: inline-block; }

/* ---------- SwagSwap wordmark (replaces the stacked SWAG mark) ---------- */
.wordmark { display: inline-block; }
  font-weight: 900; font-variation-settings: "wdth" 62; font-size: 2rem; line-height: 1; letter-spacing: -0.01em;
  border-bottom: 6px solid var(--ink); padding-bottom: 2px;
}
.site-header .wordmark { font-size: 1rem; }
.wordmark:hover { background: none; }

/* ---------- Receipts: sourced facts placed through the site ---------- */
/* The slip is Shelf gray on white sections and white on Shelf bands, so it always reads as paper. */
.receipt {
  --receipt-bg: var(--shelf);
  position: relative; max-width: 320px; margin: var(--s5) 0 var(--s3);
  background: var(--receipt-bg); padding: var(--s3) var(--s3) var(--s4);
  transform: rotate(-1.2deg);
}
.receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background:
    linear-gradient(-45deg, transparent 6px, var(--receipt-bg) 0) 0 0 / 12px 12px repeat-x,
    linear-gradient(45deg, transparent 6px, var(--receipt-bg) 0) 0 0 / 12px 12px repeat-x;
}
.receipt p { margin: 0; }
.receipt .r-fig { font-weight: 900; font-variation-settings: "wdth" 62; font-size: 2.6rem; line-height: 1; }
.receipt .r-text { margin-top: var(--s1); }
.receipt .r-src {
  margin-top: var(--s2); padding-top: var(--s1); border-top: 2px dashed var(--ink-soft);
  font-size: 0.85rem; color: var(--ink-soft);
}
.receipt .r-src a { color: var(--ink-soft); }
.band .receipt, .band-ink .receipt { --receipt-bg: var(--white); }
.band-ink .receipt { color: var(--ink); }
/* A row of receipts, pinned up at slightly different angles */
.receipts { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s5); }
.receipts .receipt { flex: 1 1 240px; margin: 0; }
.receipts .receipt:nth-child(2) { transform: rotate(1.4deg); }
.receipts .receipt:nth-child(3) { transform: rotate(-0.6deg); }

/* ---------- Shelf signs and doodles (placeholders from assets/signs/) ---------- */
/* A shelf sign: tag-colored card, masking tape, words top-left, one doodle bottom-right.
   It's as wide as its words need (up to --sign-w), and as tall as its row allows. */
.sign {
  position: relative; margin: 0; width: fit-content; min-width: 210px; max-width: var(--sign-w, 300px);
  padding: 28px 22px 90px; background: var(--c); color: var(--ink);
  transform: rotate(var(--r)); box-shadow: 0 2px 0 rgba(0,0,0,0.12); border-radius: 2px;
}
.sign-tape {
  position: absolute; top: -12px; left: 50%; width: 84px; height: 26px; margin-left: -42px;
  background: var(--tape); transform: rotate(-4deg);
}
.sign-doodle { position: absolute; right: 20px; bottom: 16px; width: 72px; height: 72px; }
.sign-doodle svg { display: block; width: 100%; height: 100%; }
.sign p { margin: 0; max-width: none; }
.sign .mk { font-family: "Permanent Marker", var(--hand); font-weight: 400; font-size: 1.7rem; line-height: 1.05; }
.sign .hd { font-family: "Gochi Hand", var(--hand); font-size: 1.25rem; line-height: 1.2; margin-top: var(--s1); }
.sign .xl { font-size: 2.3rem; }
.sign .md { font-size: 1.6rem; margin-top: 6px; }
.sign .lgh { font-size: 1.4rem; margin-top: 0; }
.sign .red { color: var(--red-pen); }
.sign .circled { display: inline-block; padding: 2px 14px; border: 4px solid var(--red-pen); border-radius: 50% 45% 55% 48%; transform: rotate(-3deg); }
.sign .bar { background: var(--ink); color: var(--ink); padding: 0 4px; }
.sign .l { display: inline-block; }

.doodle { display: block; width: var(--doodle-w, 88px); height: auto; }
.doodle-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }

/* Heading block with a sign beside it; the sign drops below the text on small screens */
.with-sign { display: grid; gap: var(--s4); align-items: center; }
.with-sign > .sign, .with-sign > .doodle-row { justify-self: start; }
@media (min-width: 900px) {
  .with-sign { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5); }
  .with-sign > .sign, .with-sign > .doodle-row { justify-self: end; }
}

/* ---------- Unswag it guides ---------- */
.guide-link { display: inline-block; margin-top: var(--s1); font-weight: 700; }
.guide { display: grid; gap: var(--s5); }
.guide-sheet { display: block; width: 100%; max-width: 760px; height: auto; }
/* The sheet links to its full-size image, so phone readers can open it and zoom */
.guide-sheet-link { display: block; max-width: 760px; }
.guide-sheet-link:hover { background: none; }
.guide-download { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: calc(var(--s3) * -1) 0 0; }
.guide-steps ol { padding-left: 1.3em; }
.guide-steps li { margin-bottom: var(--s1); }
.guide-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); border-top: 3px solid var(--ink); }
.guide-list li { border-bottom: 1px solid rgba(0,0,0,0.25); }
.guide-list a { display: block; padding: 12px 0; font-weight: 700; text-decoration: none; }

/* ---------- About: the last-day post, taped up like a print ---------- */
.story { align-items: start; }
.pinned-post {
  position: relative; margin: var(--s3) 0 0; max-width: 480px; padding: 12px 12px 18px;
  background: var(--white); border: 1px solid rgba(0,0,0,0.18); box-shadow: 0 2px 0 rgba(0,0,0,0.12);
  transform: rotate(1.2deg);
}
.pinned-post img { display: block; width: 100%; height: auto; }
.pinned-post blockquote { margin: var(--s2) 0 var(--s1); }
.pinned-post blockquote p { margin: 0; font-weight: 700; font-size: 1.15rem; line-height: 1.35; }
.pinned-post figcaption > p { margin: 0; font-size: 0.95rem; }
@media (min-width: 900px) { .pinned-post { justify-self: end; margin-top: var(--s5); } }

/* About: the numbers section leads with its line, kept to a sign-like measure */
.numbers-head { max-width: 22ch; }

/* Guide pages: verdict stamp, tools, and the patches that come next */
.guide-head { display: grid; gap: var(--s3); align-items: center; }
@media (min-width: 700px) { .guide-head { grid-template-columns: 1fr auto; } }
.guide-verdict { margin: 0; }
.guide-verdict .stamp { font-size: 1.6rem; padding: 8px 18px; border-width: 6px; }
.guide-needs h2 { font-size: 1.35rem; font-variation-settings: "wdth" 88; margin-bottom: var(--s1); }
.needs { list-style: none; margin: 0 0 var(--s1); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.needs li { border: 3px solid var(--ink); padding: 8px 14px; font-weight: 700; }
.needs a { display: block; margin: -8px -14px; padding: 8px 14px; }
.needs a:hover { background: var(--yellow); }
.guide-needs .muted { font-size: 0.95rem; max-width: var(--measure); margin: 0; }
/* On phones, the written steps come before the sheet, whose lettering is small there */
@media (max-width: 699px) {
  .guide-steps { order: 1; }
  .guide-sheet-link { order: 2; }
  .guide-download { order: 3; margin-top: 0; }
}
.stamp-or { margin: 0 6px; font-weight: 700; }


/* Patches and stickers: product photos from assets/merch/ */
.patches { margin-top: var(--s3); }
@media (min-width: 1000px) { .patches { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } .patches[style*="--cols:2"] { grid-template-columns: repeat(2, minmax(0, 260px)); } }
.merch-group { margin-top: var(--s5); }
.merch-img { aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--white); border: 3px solid var(--ink); margin-bottom: var(--s2); padding: var(--s2); }
.merch-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.merch-slot { color: var(--ink-soft); font-size: 0.9rem; text-align: center; overflow-wrap: anywhere; }
.merch-card h3, .merch-card h4 { font-size: 1.15rem; font-variation-settings: "wdth" 88; line-height: 1.2; margin: 0 0 var(--s1); }

/* Swap it: three ways to be done with your swag */
.options { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 900px) { .options { grid-template-columns: repeat(3, 1fr); } }
.option { background: var(--white); border: 3px solid var(--ink); padding: var(--s3); }
.option h3 { margin-bottom: var(--s1); }
.option .embed-slot { padding: var(--s2); margin-top: var(--s2); }
.option-links { padding-left: 1.2em; margin: 0 0 var(--s2); }
.option-links li { margin-bottom: var(--s1); font-weight: 700; }

/* ---------- Logo: the unswag red-pen sticker ---------- */
.wordmark { display: inline-block; line-height: 0; }
.wordmark:hover { background: none; }
.wordmark .logo { display: block; height: 48px; width: auto; transform: rotate(-2deg); }
.site-footer .wordmark .logo { height: 56px; }
@media (max-width: 699px) { .wordmark .logo { height: 40px; } }

/* ---------- Swap it gallery: text-only kraft price tags ---------- */
.price-cards { display: grid; gap: var(--s4) var(--s3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: var(--s4); }
.price-card {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  background: var(--kraft); color: var(--ink); padding: 40px var(--s3) var(--s3);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px);
}
.price-card::before {  /* the hang-tag hole */
  content: ""; position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
}
.price-card p { margin: 0; }
.price-card h3 { font-size: 1.2rem; font-variation-settings: "wdth" 85; line-height: 1.2; margin: 0; }
.tag-company { font-weight: 700; font-size: 0.95rem; }
.tag-price { font-weight: 900; font-variation-settings: "wdth" 62; font-size: 2.2rem; line-height: 1; margin-top: var(--s1) !important; }
.tag-cond, .tag-source { font-size: 0.95rem; }
.tag-source { font-style: italic; }
.tag-blurb { font-size: 0.95rem; margin-top: var(--s1) !important; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
/* buttons line up at the bottom of each row; the last line of text keeps some room above */
.price-card > p:last-of-type { margin-bottom: var(--s2); }
.gallery-empty { margin-top: var(--s3); font-size: 1.1rem; }
.gallery-checked { margin-top: var(--s4); color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Browse by company: heading row and company notes ---------- */
.bin-head h3 { border-bottom: 3px solid var(--ink); padding-bottom: var(--s1); margin-bottom: 0; }
.bin-name { display: block; font-weight: 600; }
.bin a { align-items: flex-start; }
/* receipts sit in the gallery grid alongside the tags */
.price-cards .receipt { margin: 0; max-width: none; align-self: start; }


/* Product card: price and the Buy slot (Shopify buy buttons go here) */
.merch-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-top: var(--s2); }
.merch-price { font-weight: 900; font-variation-settings: "wdth" 70; font-size: 1.3rem; }
.merch-buy .btn { padding: 10px 18px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.store-more { margin: var(--s4) 0 0; font-weight: 700; }
.shop-fix { margin-top: var(--s5); }
.shop-fix h3 { margin-bottom: 0; }
.shop-fix .patches[style*="--cols:2"] { max-width: 560px; }
.patches[style*="--cols:1"] { grid-template-columns: minmax(0, 260px); }

/* Store */
.coming { display: inline-block; vertical-align: middle; margin-left: var(--s1); padding: 4px 12px; background: var(--green); font-size: 1rem; font-weight: 700; font-variation-settings: "wdth" 85; transform: rotate(-2deg); }
.store-note { margin-top: var(--s5); }
/* keep price and Buy on one line across a row, whatever the length of the use line */
.merch-card { display: flex; flex-direction: column; }
.merch-card .merch-buy { margin-top: auto; padding-top: var(--s2); }

/* Unswag it: Nobody wants it? */
.where-list { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.where-list li { padding: var(--s1) 0; border-bottom: 1px solid rgba(0,0,0,0.2); }
.where-list li:last-child { border-bottom: 0; }
.where-list a { display: block; font-weight: 700; }
.option p { max-width: none; }
.nobody-close { margin-top: var(--s4); max-width: var(--measure); }
.option .receipt { margin: var(--s4) 0 var(--s2); max-width: none; }

/* Unswag it: the tool kit list on the left, the sign and receipt stacked on the right */
.toolkit { display: grid; gap: var(--s5); }
.toolkit .tools { margin-top: var(--s3); }
.toolkit-side { display: grid; gap: var(--s4); align-content: start; justify-items: start; }
.toolkit-side .receipt { margin: 0; }
@media (min-width: 900px) {
  .toolkit { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .toolkit-side { justify-items: end; padding-top: var(--s2); }
}

/* ---------- For employers ---------- */
/* Hero band: text left, the swap shelf right. On phones one column, in the order
   eyebrow, H1, shelf, button, line, "Not in HR?" (the line moves below the button). */
.employers-hero { background: var(--shelf); border-bottom: 3px solid var(--ink); padding: var(--s4) 0 var(--s5); }
.employers-grid {
  display: grid; column-gap: var(--s6); row-gap: var(--s2);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "eyebrow" "title" "art" "cta" "line" "ask";
}
.employers-grid > * { margin: 0; }
.eyebrow { grid-area: eyebrow; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); font-weight: 800; font-variation-settings: "wdth" 85; }
.eyebrow .coming { margin-left: 0; }
.employers-grid h1 { grid-area: title; font-size: clamp(2.4rem, 5vw, 3.9rem); font-weight: 900; font-variation-settings: "wdth" 62; }
.shelf-figure { grid-area: art; }
.employers-cta { grid-area: cta; }
.employers-line { grid-area: line; font-size: 1.2rem; line-height: 1.5; max-width: 40ch; }
.employers-ask { grid-area: ask; }
.employers-ask a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
@media (min-width: 900px) {
  .employers-hero { padding: var(--s6) 0; }
  .employers-grid {
    grid-template-columns: minmax(0, 470px) minmax(0, 1fr); align-items: start;
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    grid-template-areas: ". art" "eyebrow art" "title art" "line art" "cta art" "ask art" ". art";
  }
  .employers-line { margin-top: var(--s1); }
  .employers-cta { margin-top: var(--s2); }
}

/* The shelf, with the SwagSwap sticker taped up as its sign above the top shelf */
.shelf-figure { position: relative; margin: 0; }
.shelf-figure svg { display: block; width: 100%; height: auto; }
.shelf-sign { position: absolute; top: 1.5%; left: 50%; width: 34%; transform: translateX(-50%) rotate(-3deg); }
.shelf-sign img { display: block; width: 100%; height: auto; }
.shelf-tape { position: absolute; z-index: 1; top: -4%; width: 34%; height: 15%; background: var(--tape); }
.shelf-tape-left { left: -8%; transform: rotate(-32deg); }
.shelf-tape-right { right: -8%; transform: rotate(30deg); }

/* How it works: three numbered tags and the receipt */
.steps { display: grid; gap: var(--s4) var(--s3); margin-top: var(--s4); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step h3 { margin: var(--s2) 0 var(--s1); }
.step p { margin: 0; }
.step-tag {
  display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 44px; padding: 0 16px 0 26px;
  background: var(--c); color: var(--ink); font-weight: 900; font-variation-settings: "wdth" 62; font-size: 1.6rem; line-height: 1;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); transform: rotate(var(--r));
  position: relative;
}
.step-tag::before { /* the hang-tag hole */
  content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--white);
}
.steps .receipt { margin: 0; max-width: none; align-self: start; }
/* 44px tap target for the receipt's source link here, without moving the text */
.steps .receipt .r-src a { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* Ask band: the HR card on the left, the note to pass on at the right */
.ask-grid { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .ask-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; } }
.ask-card { background: var(--white); border: 3px solid var(--ink); padding: var(--s4); }
.ask-card p:last-child, .ask-pass > p { margin-bottom: 0; }
.ask-grid h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.note-card {
  position: relative; margin: var(--s5) 0 0; padding: var(--s4) var(--s4) var(--s3); max-width: 560px;
  background: var(--white); box-shadow: 0 2px 0 rgba(0,0,0,0.12); transform: rotate(-1deg);
}
.hr-note { margin: 0; }
.hr-note p { margin: 0 0 var(--s2); }
.hr-note p:last-child { margin-bottom: 0; }
.note-actions { margin-top: var(--s4); }

/* Phones: the four nav items fit on one row by setting them a little more condensed, at the same size */
@media (max-width: 699px) {
  .nav { flex-wrap: nowrap; gap: 0 12px; }
  .nav a { white-space: nowrap; font-variation-settings: "wdth" 75; }
}
@media (max-width: 359px) { .nav { flex-wrap: wrap; gap: 0 12px; } }

/* Store: numbered steps for putting patches and stickers on */
.apply-steps { margin: var(--s2) 0 var(--s3); padding-left: 1.4em; }
.apply-steps li { margin-bottom: var(--s1); }
@media (min-width: 900px) { .options-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Store: one grid of every product, 2 across on phones and 4 on desktop */
.patches.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
@media (min-width: 900px) { .patches.shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s3); } }
.store-more + .store-more { margin-top: var(--s1); }
/* Cards in a row share their row lines (subgrid), so names, size lines, and buttons each
   start at the same height, and buttons sit right under the text instead of at the bottom */
.shop-grid .merch-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
.shop-grid .merch-card .merch-buy { margin-top: 0; align-self: start; }
.size { display: block; }
/* Prices take a fixed width so the buttons beside them line up, and a pair's two buttons match */
.shopify-slot .shopify-buy__product__price { min-width: 4.4rem; }
.merch-buy-pair { gap: var(--s1); }
.merch-buy-pair .shopify-buy__btn { min-width: 8.2rem; }
/* Paired card: the sticker overlaps the patch's bottom-right corner */
.merch-pair { position: relative; }
/* A pair: the patch centered in the top-left 66% of the box, the sticker (transparent around
   its die-cut edge) centered in the bottom-right 36%, sized so the two don't touch for any
   pair shape (round, wide, and sign). */
.merch-pair img { position: absolute; max-width: none; max-height: none; object-fit: contain; }
.merch-pair img:first-child { left: 3%; top: 3%; width: 66%; height: 66%; }
.merch-pair .pair-sticker { right: 3%; bottom: 3%; width: 36%; height: 36%; transform: rotate(7deg); }
.merch-buy-pair { flex-direction: column; align-items: stretch; }
.shopify-slot.shopify-ghost .shopify-buy__btn { background: transparent; color: var(--ink); }
.shopify-slot.shopify-ghost .shopify-buy__btn:hover, .shopify-slot.shopify-ghost .shopify-buy__btn:focus-visible { background: var(--ink); color: var(--white); }
/* Kit card: the Coming soon tag on its top-left corner, and the inlined pouch drawing */
.kit-card { position: relative; }
.kit-tag { position: absolute; top: -10px; left: -6px; margin: 0; z-index: 1; }
/* The full contents sit under the button, so their length doesn't push down the other cards in the row */
.kit-contents { flex-basis: 100%; margin: var(--s1) 0 0; font-size: 0.9rem; }
.merch-img svg { display: block; width: 100%; height: auto; }

/* The closing line on Swap it, Unswag it, and the guides: where else this swag could go */
.next-homes { margin: var(--s4) 0 0; max-width: var(--measure); font-weight: 800; font-variation-settings: "wdth" 85; font-size: 1.15rem; }
#nobody { padding: var(--s5) 0; }
#nobody .next-homes { margin: 0; }

/* Pass it on: the home tile's picture in the page head, and the before-you-go list */
.pass-art { width: 100%; max-width: 360px; margin-bottom: var(--s4); }
.checklist { list-style: none; margin: var(--s3) 0 0; padding: 0; max-width: var(--measure); border-top: 3px solid var(--ink); }
.checklist li { padding: var(--s2) 0; border-bottom: 1px solid rgba(0,0,0,0.25); }

/* Shopify buy buttons (assets/shopify.js): the live price and Add to cart, styled like our own */
.shopify-slot { min-height: 44px; width: 100%; }
.shopify-slot .shopify-buy__product { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: 0; max-width: none; }
.shopify-slot .shopify-buy__product__price { margin: 0; }
.shopify-slot .shopify-buy__product__actual-price { font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 70; font-size: 1.3rem; color: var(--ink); }
.shopify-slot .shopify-buy__product__compare-price { font-family: var(--display); color: var(--ink-soft); margin-right: var(--s1); }
.shopify-slot .shopify-buy__btn-wrapper { margin: 0; }
.shopify-slot .shopify-buy__btn {
  display: inline-block; min-height: 44px; padding: 10px 18px; margin: 0; width: auto;
  background: var(--ink); color: var(--white); border: 3px solid var(--ink); border-radius: 2px;
  font: 700 1rem var(--display); font-variation-settings: "wdth" 85; cursor: pointer;
}
.shopify-slot .shopify-buy__btn:hover, .shopify-slot .shopify-buy__btn:focus-visible { background: var(--yellow); color: var(--ink); }
.shopify-slot .shopify-buy__btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Shopify's screen-reader label ("Regular price"), hidden the way .sr-only is */
.shopify-slot .visuallyhidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Swap it: the two ways into the page, under the page head's intro */
.jump-links { margin: var(--s3) 0 0; }
#gallery, #done { scroll-margin-top: var(--s3); }

/* Store head: the 3,400 receipt pinned up first, with the "Stop advertising for free." sign
   stuck over its empty top-right corner, like a note on the number */
.sign-on-fact { position: relative; display: grid; justify-items: start; width: 100%; max-width: 460px; }
.sign-on-fact .receipt { grid-row: 1; grid-column: 1; margin: 112px 0 0; max-width: 300px; transform: rotate(-2deg); }
.sign-on-fact .sign { grid-row: 1; grid-column: 1; justify-self: end; align-self: start; z-index: 1; }
.with-sign > .sign-on-fact { justify-self: start; }
@media (min-width: 900px) { .with-sign > .sign-on-fact { justify-self: end; } }
@media (max-width: 599px) {
  /* Phones: a narrower sign on its own row, overlapping only the receipt's top strip,
     to the right of the number */
  .sign-on-fact .sign { grid-row: 1; min-width: 0; max-width: 196px; }
  .sign-on-fact .receipt { grid-row: 2; margin-top: -40px; max-width: 280px; }
}

/* Unswag it: a close-up of each logo type above its name, and the finger-test sorter above
   each table. Sorter links jump to their row, which the :target rule turns yellow. */
.tell { display: flex; gap: var(--s3); align-items: flex-start; }
.tell p { margin: 0; }
.logo-art { flex: 0 0 168px; }
.logo-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 699px) { .tell { flex-direction: column; gap: var(--s1); } .logo-art { flex-basis: auto; width: 168px; } }
.sorter-lead { margin-top: var(--s3); }
.sorter { list-style: none; margin: var(--s1) 0 0; padding: 0; max-width: var(--measure); border-top: 1px solid rgba(0,0,0,0.25); }
.sorter li { padding: var(--s1) 0; border-bottom: 1px solid rgba(0,0,0,0.25); }
.sorter a { font-weight: 700; }

/* Home: the Swap it tile's second link sits above the tile-wide link and works on its own */
.home-tile .go-2 { position: relative; z-index: 3; margin-top: var(--s1); }
.home-tile .go-2::after { content: none; }
.home-tile .go-2:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.home-tile .go-2:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.home-tile:has(.go):hover .go-2:not(:hover) { text-decoration: none; }

/* Tool links name where they go, like the eBay links do */
.on-site { font-weight: 400; color: var(--ink-soft); font-size: 0.85em; white-space: nowrap; }
a:hover .on-site { color: var(--ink); }

/* Store: on phones the fact slip and sign follow the products instead of leading */
.store-art-foot { display: none; }
@media (max-width: 699px) {
  .store-art-head { display: none; }
  .store-art-foot { display: grid; margin-top: var(--s5); }
}

/* Pass it on: each card's heading is a small taped shelf-sign tag over its top edge */
.options:has(.option-tag) { margin-top: var(--s6); row-gap: var(--s6); }
.option-tag.sign { min-width: 0; max-width: 100%; margin: -48px 0 var(--s2) -12px; padding: 12px 16px 8px; }
.option-tag .sign-tape { width: 56px; height: 20px; margin-left: -28px; top: -10px; }
.option-tag.sign .mk { font-size: 1.4rem; }
.more-places { margin: 0 0 var(--s2); border-top: 1px solid rgba(0,0,0,0.2); }
.more-places summary {
  cursor: pointer; padding: var(--s1) 0; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; gap: var(--s2);
}
.more-places summary::-webkit-details-marker { display: none; }
.more-places summary::after { content: "+"; font-weight: 400; }
.more-places[open] summary::after { content: "\2212"; }
.local-note { margin-top: var(--s4); max-width: var(--measure); }