/* Bumper Crimes. The whole site is the wall of a garage or an impound office:
   navy pegboard, every sticker hung on it a little crooked by one screw.
   Brand tokens first (from 01 Brand / brand-tokens.css), then the pieces.
   Fonts are self-hosted Latin subsets, SIL Open Font License. */
@font-face { font-family: 'Big Shoulders Display'; src: url('/assets/fonts/big-shoulders-display.woff2?v=acc468d9b4') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo.woff2?v=a93cbd44e7') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Yellowtail'; src: url('/assets/fonts/yellowtail.woff2?v=986142cd57') format('woff2'); font-display: swap; }

:root {
  /* the site is dark only: the wall never changes color */
  color-scheme: dark;

  --plate-yellow: #FFC72C;  /* the plate; the one filled button per screen; headlines on the wall */
  --navy: #1B2A4A;          /* text on white; plate rims; footer */
  --wall: #16223C;          /* page background: the pegboard */
  --script-red: #C8102E;    /* stamps, always as a fill under white text; never text on navy (2.7:1) */
  --vinyl: #FFFFFF;         /* white surfaces; text on the wall */
  --steel: #8A93A6;         /* screws, quiet text on the wall (5.1:1 on --wall) */
  --soft-on-wall: #E6EAF2;  /* long paragraphs on the wall, a step down from pure white */

  --quiet-on-vinyl: #5B6375;  /* 5.5:1 on white */
  --peg-hole: rgba(4, 9, 22, .6);
  --pegboard: radial-gradient(circle, var(--peg-hole) 0 2.6px, transparent 3.2px) 0 0 / 28px 28px, var(--wall);
  --shadow-hung: drop-shadow(0 12px 12px rgba(3, 8, 20, .55)) drop-shadow(0 2px 3px rgba(3, 8, 20, .5));

  --font-plate: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Yellowtail', cursive;
  --text-small: 15px;
  --text-body: 18px;
  --text-lede: 22px;
  --text-h2: clamp(40px, 5vw, 60px);
  --text-h1: clamp(54px, 8.4vw, 132px);
  --text-page: clamp(52px, 7vw, 104px);
  --leading-body: 1.55;
  --leading-plate: .88;
  --measure: 66ch;
  --radius-plate: 12px;
}

* { box-sizing: border-box; }
html { background: var(--wall); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 var(--text-body)/var(--leading-body) var(--font-body);
  color: var(--vinyl);
  background: var(--pegboard);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--plate-yellow); outline-offset: 4px; border-radius: 4px; }
img { max-width: 100%; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 16px; background: var(--plate-yellow); color: var(--navy); font-weight: 700; border-radius: 6px; }
.skip:focus { top: 12px; }

/* plate lettering: capitals because license plates are capitals */
.plate-type {
  font-family: var(--font-plate);
  font-weight: 900;
  text-transform: uppercase;
  line-height: var(--leading-plate);
  letter-spacing: .01em;
  margin: 0;
}

/* a text link that does something: underlined in plate yellow */
.go { font-weight: 700; text-decoration: underline 2px var(--plate-yellow); text-underline-offset: 6px; }
.go:hover { text-decoration-thickness: 3px; }

/* ------------------------------------------------------------- header */
.site-head { display: flex; align-items: center; gap: 44px; padding: 22px 0; }
.site-head .logo { flex: none; }
.site-head .logo img { height: 56px; width: auto; display: block; }
.site-head nav { display: flex; gap: 30px; font-weight: 500; font-size: 17px; }
.site-head nav a { white-space: nowrap; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-head nav a:hover, .site-head nav a[aria-current] { border-color: var(--plate-yellow); }
.site-head .etsy { margin-left: auto; font-size: 17px; white-space: nowrap; }

/* the one filled button: a little license plate */
.plate-btn {
  position: relative; display: inline-block;
  padding: 20px 38px 19px;
  background: var(--plate-yellow); color: var(--navy);
  font: 700 19px/1 var(--font-body); text-decoration: none;
  border-radius: var(--radius-plate);
  box-shadow: inset 0 0 0 5px var(--plate-yellow), inset 0 0 0 7.5px var(--navy), 0 10px 18px -8px rgba(3, 8, 20, .7);
  transition: transform .15s ease, box-shadow .15s ease;
}
.plate-btn::before, .plate-btn::after {
  content: ''; position: absolute; top: 11px; width: 9px; height: 4px; border-radius: 50%;
  background: rgba(27, 42, 74, .35);
}
.plate-btn::before { left: 18px; }
.plate-btn::after { right: 18px; }
.plate-btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 5px var(--plate-yellow), inset 0 0 0 7.5px var(--navy), 0 16px 22px -8px rgba(3, 8, 20, .75); }
.plate-btn:active { transform: translateY(0); }

/* ---------------------------------------------- a sticker screwed to the wall */
.hung { position: relative; margin: 0; transform: rotate(var(--tilt, 0deg)); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.hung img { display: block; width: 100%; height: auto; filter: var(--shadow-hung); }
.hung::before {
  content: ''; position: absolute; z-index: 2; top: -7px; left: 50%;
  width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F4F6FA, #A8B0BE 45%, #5E6673);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .55);
}
.hung::after {
  content: ''; position: absolute; z-index: 3; top: 2px; left: 50%;
  width: 13px; height: 2.5px; margin-left: -6.5px; border-radius: 2px;
  background: #4A4F57; transform: rotate(var(--slot, 35deg));
}
a:hover > .hung, a:focus-visible > .hung { transform: rotate(0deg); }

/* rubber stamp, as a fill: red under white text */
.stamp {
  position: absolute; z-index: 4;
  padding: 7px 12px 6px;
  background: var(--script-red); color: #fff;
  font: 800 14px/1 var(--font-body); font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 3px; transform: rotate(var(--stamp-tilt, 7deg));
  box-shadow: inset 0 0 0 2px var(--script-red), inset 0 0 0 3.5px #fff, 0 4px 8px rgba(3, 8, 20, .4);
  white-space: nowrap;
}

/* --------------------------------------------------------------- home */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding: 48px 0 112px; }
.hero h1 { font-size: var(--text-h1); color: var(--plate-yellow); margin-bottom: 30px; text-wrap: balance; }
.hero p { font-size: var(--text-lede); line-height: 1.45; max-width: 34ch; margin: 0 0 40px; color: var(--soft-on-wall); }
.hero-wall { position: relative; aspect-ratio: 480 / 520; }
.hero-wall > * { position: absolute; }
.hero-wall .a { top: 2%; left: 0; width: 100%; --tilt: -2.5deg; }
.hero-wall .b { top: 37%; left: 3%; width: 42%; --tilt: 3.5deg; --slot: 80deg; }
.hero-wall .c { top: 45%; right: 0; width: 50%; --tilt: -1.5deg; --slot: 10deg; }
.hero-wall .d { top: 75%; left: 12%; width: 82%; --tilt: 1.2deg; --slot: 120deg; }
.hero-wall .b .stamp { top: -12px; right: -18px; }
/* a tall sticker (the 4 x 5 postcard) would hang into the one below it */
.hero-wall .tall { width: 30%; }
/* the one page-load moment: the hero stickers settle onto their screws */
@keyframes settle { from { transform: translateY(-14px) rotate(calc(var(--tilt, 0deg) + 7deg)); opacity: 0; } }
.hero-wall .hung { animation: settle .8s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.hero-wall .b { animation-delay: .12s; }
.hero-wall .c { animation-delay: .22s; }
.hero-wall .d { animation-delay: .3s; }

/* sections on the wall */
.wall-section { padding: 0 0 112px; }
.wall-section > header { display: flex; align-items: baseline; gap: 28px; margin-bottom: 64px; }
.wall-section h2 { font-size: var(--text-h2); }
.wall-section > header p { margin: 0; color: var(--steel); }
.wall-section > header a { margin-left: auto; }

/* the lineup: stickers hung in an uneven grid, never cards */
.lineup { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 76px 52px; }
.lineup li:nth-child(4n+2) { margin-top: 36px; }
.lineup li:nth-child(4n+3) { margin-top: -8px; }
.lineup li:nth-child(4n) { margin-top: 22px; }
.lineup a { display: block; text-decoration: none; }
/* on wide screens each sticker hangs at its real size next to a 10 inch one */
.lineup .hung { width: var(--w, 100%); }
.lineup li:nth-child(3n+1) .hung { --tilt: -1.8deg; }
.lineup li:nth-child(3n+2) .hung { --tilt: 1.4deg; --slot: 100deg; }
.lineup li:nth-child(3n) .hung { --tilt: -.6deg; --slot: 160deg; }
.lineup li:nth-child(5n+4) .hung { --tilt: 2.6deg; --slot: 60deg; }
.lineup.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cap { margin-top: 24px; }
.cap .name { display: block; font-weight: 700; line-height: 1.25; margin-bottom: 5px; }
.lineup a:hover .name { text-decoration: underline 2px var(--plate-yellow); text-underline-offset: 4px; }
.cap .meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; font-size: var(--text-small); color: var(--steel); }
.cap .meta span { white-space: nowrap; }
.lineup .stamp { top: -14px; right: -8px; font-size: 12px; }

/* nothing hung yet */
.empty { max-width: 44ch; margin: 0; font-size: var(--text-lede); line-height: 1.45; color: var(--soft-on-wall); }

/* how buying works: one plain paragraph, set off to the right */
.how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 0 0 120px; }
.how p { grid-column: 6 / span 6; margin: 0; font-size: var(--text-lede); line-height: 1.5; color: var(--soft-on-wall); border-top: 2px solid var(--plate-yellow); padding-top: 26px; }
.how strong { color: var(--vinyl); }

/* ------------------------------------------------- listing pages (categories) */
.page-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px; align-items: end; padding: 40px 0 72px; }
.page-head h1 { grid-column: 1 / span 8; font-size: var(--text-page); color: var(--plate-yellow); text-wrap: balance; }
.page-head .intro { grid-column: 7 / span 6; margin: 28px 0 0; font-size: 20px; line-height: 1.5; color: var(--soft-on-wall); max-width: 52ch; }
.page-head .also { grid-column: 7 / span 6; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; padding: 0; list-style: none; }
.page-head .also a[aria-current] { text-decoration: none; color: var(--steel); }

/* ---------------------------------------------------- prose (about, faq, privacy) */
.prose { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px; padding-bottom: 120px; }
.prose > * { grid-column: 4 / span 7; }
.prose p, .prose li { color: var(--soft-on-wall); max-width: var(--measure); }
.prose p { margin: 0 0 18px; }
.prose ul { margin: 0 0 18px; padding-left: 1.2em; }
.prose h2 { font: 700 24px/1.25 var(--font-body); color: var(--vinyl); margin: 44px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose a { text-decoration: underline 1.5px var(--plate-yellow); text-underline-offset: 4px; }
.prose .lede { font-size: var(--text-lede); line-height: 1.45; color: var(--vinyl); }
.prose .sign { font: 400 40px/1.1 var(--font-script); color: var(--plate-yellow); margin-top: 32px; }

/* ------------------------------------------------- product page: the case file */
.crumbs { font-size: var(--text-small); color: var(--steel); padding: 8px 0 28px; }
.crumbs a { text-decoration: none; color: var(--vinyl); }
.crumbs a:hover { text-decoration: underline 2px var(--plate-yellow); text-underline-offset: 4px; }
.case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; padding-bottom: 104px; }
.evidence { position: relative; padding: 64px 24px 0 0; }
.evidence > .hung { --tilt: -1.2deg; width: var(--w, 100%); margin: 0 auto; }
.evidence > .stamp { top: 22px; left: 8px; --stamp-tilt: -6deg; font-size: 16px; }
.photos { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
.photos li:nth-child(2n) { margin-top: 28px; }
.photos img { display: block; width: 100%; height: auto; border: 8px solid #fff; border-bottom-width: 30px; box-shadow: 0 14px 22px -10px rgba(3, 8, 20, .75); transform: rotate(-1.4deg); }
.photos li:nth-child(2n) img { transform: rotate(1.8deg); }
.file { background: var(--vinyl); color: var(--navy); border-radius: 4px; padding: 40px 44px 44px; box-shadow: 0 18px 30px -16px rgba(3, 8, 20, .8); color-scheme: light; }
.file .case-no { margin: 0 0 14px; font-size: var(--text-small); color: var(--quiet-on-vinyl); }
.file h1 { font-size: clamp(44px, 4.6vw, 68px); color: var(--navy); margin-bottom: 18px; text-wrap: balance; }
.file .price { font: 900 40px/1 var(--font-plate); color: var(--navy); margin: 0 0 28px; }
.file .buy { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.file .alt { font-weight: 600; text-underline-offset: 5px; color: var(--navy); }
.file dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 36px 0 0; padding: 22px 0 0; border-top: 1px solid #DDE1E8; font-size: 16px; }
.file dt { color: var(--quiet-on-vinyl); }
.file dd { margin: 0; font-weight: 600; }
.file .desc { margin-top: 26px; max-width: var(--measure); }
.file .desc p { margin: 0 0 14px; }
.file .desc p:last-child { margin-bottom: 0; }
.file .not-yet { margin: 0; font-weight: 600; }

/* --------------------------------------------------------------- 404 */
.towed { padding: 56px 0 140px; }
.towed h1 { font-size: var(--text-page); color: var(--plate-yellow); max-width: 12ch; margin-bottom: 28px; }
.towed p { font-size: var(--text-lede); color: var(--soft-on-wall); margin: 0; }

/* ------------------------------------------------------------- footer */
.site-foot { background: var(--navy); padding: 64px 0 48px; }
.foot { display: grid; grid-template-columns: auto 1fr; gap: 20px 56px; align-items: end; }
.foot .sign { font: 400 46px/1 var(--font-script); color: var(--plate-yellow); margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-self: end; font-weight: 500; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { text-decoration: underline 2px var(--plate-yellow); text-underline-offset: 5px; }
.foot .legal { grid-column: 1 / -1; margin: 18px 0 0; font-size: 14px; color: var(--steel); }
.foot .legal a { color: var(--vinyl); text-underline-offset: 3px; }

/* preview builds in /admin only */
.preview-bar { background: var(--script-red); color: #fff; font-size: 15px; font-weight: 600; padding: 10px 0; }
.preview-bar .wrap { display: flex; gap: 8px 24px; flex-wrap: wrap; }

/* ------------------------------------------------------------- phones */
@media (max-width: 1040px) {
  .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 40px; }
  .lineup li:nth-child(n) { margin-top: 0; }
  .lineup li:nth-child(3n+2) { margin-top: 30px; }
  .lineup li:nth-child(3n) { margin-top: 12px; }
  .prose > * { grid-column: 3 / span 9; }
}
@media (max-width: 820px) {
  .wrap { padding: 0 20px; }
  .site-head { flex-wrap: wrap; gap: 14px 24px; padding: 16px 0 6px; }
  .site-head .logo img { height: 44px; }
  .site-head nav { order: 3; width: 100%; flex-wrap: wrap; gap: 4px 22px; font-size: 16px; }
  .hero, .case { grid-template-columns: 1fr; gap: 36px; padding-bottom: 72px; }
  .hero { padding-top: 24px; }
  .hero p { font-size: 19px; margin-bottom: 30px; }
  .wall-section { padding-bottom: 88px; }
  .wall-section > header { flex-wrap: wrap; gap: 8px 16px; margin-bottom: 44px; }
  .wall-section > header a { margin-left: 0; }
  .lineup, .lineup.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 22px; }
  .lineup li:nth-child(n) { margin-top: 0; }
  .lineup li:nth-child(2n) { margin-top: 26px; }
  .lineup .hung { width: 100%; }
  .how p { grid-column: 1 / -1; font-size: 19px; }
  .page-head { padding: 24px 0 52px; }
  .page-head h1, .page-head .intro, .page-head .also { grid-column: 1 / -1; }
  .prose > * { grid-column: 1 / -1; }
  .prose { padding-bottom: 88px; }
  .foot { grid-template-columns: 1fr; }
  .foot nav { justify-self: start; }
  .evidence { padding: 36px 6px 0; }
  .photos { margin-top: 48px; gap: 24px 16px; }
  .file { padding: 30px 24px 32px; }
}
@media (max-width: 400px) {
  .cap .name { font-size: 16px; }
  .plate-btn { padding: 18px 30px 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hung, .plate-btn { transition: none; }
  .hero-wall .hung { animation: none; }
}