/* Prince of Pallets
   Basecoat loads in cascade layers, so every rule in this file (unlayered)
   overrides it. Change colors and fonts in :root. */

:root {
  --red: #C42021;
  --red-text: #A31A1B;
  --gold: #F2B33D;
  --gold-hover: #F5C451;
  --ink: #1A1612;
  --ink-deep: #120F0C;
  --line-dark: #3A3128;
  --paper: #F4EDE0;
  --paper-2: #EAE1D1;
  --card: #FFFDF8;
  --rule: #D6CAB6;
  --field: #B9AD9C;
  --cream: #F7F0E3;
  --muted: #5C5247;
  --muted-on-dark: #BDB2A2;
  --body-on-dark: #D8CFC1;
  --wood: #A9783F;

  --font-display: 'Alfa Slab One', Rockwell, 'Roboto Slab', serif;
  --font-sign: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-num: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Basecoat theme tokens */
  --primary: var(--red);
  --primary-foreground: #FFFFFF;
  --background: var(--card);
  --foreground: var(--ink);
  --border: var(--field);
  --input: var(--field);
  --ring: var(--red);
  --radius: 0.25rem;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.site-header :focus-visible,
.hero-copy :focus-visible,
.board :focus-visible,
.yard :focus-visible,
.closing :focus-visible { outline-color: var(--gold); }
.trailer :focus-visible { outline-color: #FFFFFF; }

[id] { scroll-margin-top: 16px; }

.wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.mono { font-family: var(--font-num); }
.ink { color: var(--ink); }
.gold { color: var(--gold); }

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { top: 8px; }

/* Buttons (Basecoat .btn with local sizes) */
.btn.btn-cta {
  height: auto;
  min-height: 48px;
  padding-inline: 22px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 3px;
  text-decoration: none;
}
.btn.btn-cta-sm { min-height: 44px; padding-inline: 18px; font-size: 15px; }
.btn.btn-on-dark {
  background: transparent;
  color: var(--cream);
  border: 2px solid var(--cream);
  box-shadow: none;
}
.btn.btn-on-dark:hover { background: var(--cream); color: var(--ink); }
.btn.btn-gold { background: var(--gold); color: var(--ink); }
.btn.btn-gold:hover { background: var(--gold-hover); }

/* Top strip */
.strip {
  background: var(--red);
  color: #FFFFFF;
  font: 500 13px/1.4 var(--font-sign);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.strip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  justify-content: space-between;
  padding-block: 8px;
}

/* Header */
.site-header { background: var(--ink); color: var(--cream); border-bottom: 1px solid var(--line-dark); }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  padding-block: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--cream); }
.emblem { flex: none; }
.brand-lockup { display: flex; flex-direction: column; line-height: 1; }
.brand-of { font: 600 12px var(--font-sign); letter-spacing: 0.28em; color: var(--gold); }
.brand-name { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.02em; }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 500;
}
.site-nav a { padding-block: 10px; color: var(--cream); }
.site-nav a:hover { color: var(--gold); }

/* Hero */
.hero { background: var(--ink); color: var(--cream); padding: 56px 0 64px; }
.hero .wrap { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.hero-copy { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
/* The sign is a size container, so PALLETS can be set to span it exactly. */
.sign { display: flex; flex-direction: column; gap: 6px; max-width: 660px; container-type: inline-size; }
/* The crown and PRINCE OF scale with the sign, so together they fill the line above PALLETS. */
.sign-top { display: flex; align-items: center; gap: 3cqw; }
.sign-top .emblem { width: 17cqw; height: auto; }
.sign-of {
  font: 700 clamp(24px, 5vw, 56px) / 1 var(--font-sign);
  font-size: 12cqw;
  letter-spacing: 0.29em;
  margin-right: -0.29em;
  white-space: nowrap;
  color: var(--gold);
}
.sign-name {
  margin: 0;
  font-family: var(--font-display);
  /* PALLETS in Alfa Slab One is 4.99 times its font size wide, so 19.9cqw fills the sign's width
     and the word ends where the red bar under it ends. The vw line is for browsers without
     container units. */
  font-size: clamp(52px, 11vw, 120px);
  font-size: 19.9cqw;
  line-height: 0.9;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.sign-bar { height: clamp(6px, 1.6cqw, 10px); width: 100%; margin-top: 4px; background: var(--red); }
.sign-tag { margin: 6px 0 0; font: 500 15px var(--font-sign); letter-spacing: 0.24em; color: var(--muted-on-dark); }
.hero h1 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; font-weight: 700; max-width: 22ch; }
.hero-lede { margin: 0; font-size: 18px; color: var(--body-on-dark); max-width: 58ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Four facts in a row, or two rows of two on a phone. Every cell starts at its column's left edge. */
.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  column-gap: 20px;
  border-bottom: 1px solid var(--line-dark);
}
.facts > div { padding: 10px 0; border-top: 1px solid var(--line-dark); }
.facts dt {
  font: 400 12px var(--font-sign);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.facts dd { margin: 2px 0 0; font: 15px var(--font-num); color: var(--cream); }

/* Quote form */
.quote {
  flex: 1 1 380px;
  min-width: 0;
  max-width: 500px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  border-top: 10px solid var(--red);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quote h2 { margin: 0; font: 400 28px/1.1 var(--font-display); color: var(--red); }
.quote-note { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.quote-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.quote-grid > .field-item { flex: 1 1 180px; min-width: 0; }
.field-item { display: flex; flex-direction: column; gap: 4px; }
.quote .label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.quote .input:not([type='checkbox']),
.quote .select {
  width: 100%;
  height: 44px;
  font-size: 15px;
  background-color: var(--card);
  color: var(--ink);
}
.quote .input[type='file'] { height: auto; padding: 10px; border-style: dashed; font-size: 14px; }
.quote .num { font-family: var(--font-num); text-align: right; }
.quote .num-left { font-family: var(--font-num); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.btn.btn-submit { width: 100%; height: auto; min-height: 52px; font-size: 17px; font-weight: 700; border-radius: 3px; }
.btn.btn-submit[disabled] { opacity: 0.7; cursor: progress; }
.quote .input[aria-invalid='true'] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.quote-status { margin: 0; padding: 10px 12px; border-left: 4px solid var(--ink); background: var(--card); font-size: 15px; }
.quote-status.is-error { border-left-color: var(--red); color: var(--red-text); }
.quote-status.is-sent { border-left-color: #2F6B34; }
/* The hidden field that only scripts fill in. Off screen, so a person never sees it. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The Board */
.board-section { padding: 72px 0; }
.board-section > .wrap { display: flex; flex-direction: column; gap: 28px; }
.board-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  align-items: flex-end;
  justify-content: space-between;
}
.board-head > div { flex: 1 1 520px; min-width: 0; }
.eyebrow {
  margin: 0;
  font: 600 13px var(--font-sign);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.board-head h2 { margin: 4px 0 8px; font: 400 clamp(40px, 5vw, 64px)/1 var(--font-display); }
.board-head .lede { margin: 0; font-size: 17px; color: var(--muted); max-width: 60ch; }
.board-meta { margin: 0; font: 13px var(--font-num); color: var(--muted); }

.board {
  background: var(--ink);
  color: var(--cream);
  border: 10px solid var(--wood);
  border-radius: 4px;
  padding: 28px clamp(16px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
}
.board-col { flex: 1 1 460px; min-width: 0; }
.board-col h3 { margin: 0; font: 400 30px var(--font-display); letter-spacing: 0.02em; color: var(--gold); }
.board-col .sub { margin: 2px 0 12px; font-size: 14px; color: var(--muted-on-dark); }
.scroll-x { overflow-x: auto; }

/* Price tables: light border on every row, darker on every third */
.price-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 14px; }
.price-table th {
  padding: 4px 8px;
  text-align: left;
  font: 500 12px var(--font-sign);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  border-bottom: 1px solid rgba(247, 240, 227, 0.5);
}
.price-table td { padding: 5px 8px; border-bottom: 1px solid rgba(247, 240, 227, 0.1); }
.price-table tbody tr:nth-child(3n) td { border-bottom-color: rgba(247, 240, 227, 0.34); }
.price-table th:first-child, .price-table td:first-child { padding-left: 0; }
.price-table th:last-child, .price-table td:last-child { padding-right: 0; }
.price-table .n { font-family: var(--font-num); text-align: right; white-space: nowrap; }
.price-table th.n { font-family: var(--font-sign); }
.price-table .code { font-family: var(--font-num); color: var(--body-on-dark); }
.price-table .price { color: var(--gold); }

.board-note {
  flex: 1 1 100%;
  margin: 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(247, 240, 227, 0.3);
  font-size: 15px;
  color: var(--body-on-dark);
}
.board-note strong {
  font: 600 15px var(--font-sign);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

/* How a pickup works */
.how { background: var(--paper-2); padding: 64px 0; border-block: 1px solid var(--rule); }
.section-title { margin: 0; font: 400 clamp(30px, 3.6vw, 44px)/1.05 var(--font-display); }
.steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  border-top: 2px solid var(--ink);
}
.steps li { flex: 1 1 240px; min-width: 0; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.step-num { font: 600 14px var(--font-num); color: var(--red-text); }
.steps h3 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; }
.steps p { margin: 0; font-size: 15px; color: var(--muted); }

/* Selling and buying */
.offers { padding: 72px 0; }
.offers .wrap { display: flex; flex-wrap: wrap; gap: 24px; }
.offer {
  flex: 1 1 460px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.offer-band {
  padding: 10px 24px;
  font: 600 13px var(--font-sign);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.offer-band-red { background: var(--red); color: #FFFFFF; }
.offer-band-ink { background: var(--ink); color: var(--gold); }
.offer-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
.offer h3 { margin: 0; font: 400 28px/1.1 var(--font-display); }
.offer p { margin: 0; font-size: 16px; color: var(--muted); }
.offer ul { margin: 0; padding-left: 18px; list-style: square; font-size: 15px; }
.offer li + li { margin-top: 6px; }
.text-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--red-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:hover { color: #7E1415; }

/* Drop trailers */
.trailer { background: var(--red); color: #FFFFFF; padding: 56px 0; }
.trailer .wrap { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: center; }
.trailer-copy { flex: 1 1 520px; min-width: 0; }
.trailer .eyebrow { color: #FFFFFF; }
.trailer h2 { margin: 6px 0 12px; font: 400 clamp(28px, 3.4vw, 40px)/1.08 var(--font-display); }
.trailer p:not(.eyebrow) { margin: 0; font-size: 17px; max-width: 58ch; }
.spec-wrap { flex: 1 1 360px; min-width: 0; }
.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec th { padding: 6px 8px 6px 0; text-align: left; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.spec td { padding: 6px 0 6px 8px; font-family: var(--font-num); text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.spec tr:nth-child(3n) > * { border-bottom-color: rgba(255, 255, 255, 0.75); }

/* FAQ and yard */
.faq { padding: 72px 0; }
.faq .wrap { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: flex-start; }
.faq-main { flex: 999 1 600px; min-width: 0; }
.faq-main .section-title { margin-bottom: 24px; }
.qa-grid { display: flex; flex-wrap: wrap; gap: 24px 40px; }
.qa { flex: 1 1 280px; min-width: 0; border-top: 1px solid var(--rule); padding-top: 12px; }
.qa h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.qa p { margin: 0; font-size: 15px; color: var(--muted); }

.yard { flex: 1 1 320px; min-width: 0; background: var(--ink); color: var(--cream); border-radius: 4px; padding: 24px; }
.yard h2 { margin: 0 0 12px; font: 400 26px var(--font-display); color: var(--gold); }
.info-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.info-table th {
  padding: 5px 8px 5px 0;
  text-align: left;
  font-weight: 600;
  color: var(--muted-on-dark);
  border-bottom: 1px solid rgba(247, 240, 227, 0.1);
}
.info-table td {
  padding: 5px 0 5px 8px;
  font-family: var(--font-num);
  text-align: right;
  border-bottom: 1px solid rgba(247, 240, 227, 0.1);
}
.info-table tr:nth-child(3n) > * { border-bottom-color: rgba(247, 240, 227, 0.34); }
.yard .btn { margin-top: 20px; width: 100%; }

/* Closing call to action */
.closing { background: var(--ink); color: var(--cream); padding: 56px 0; border-top: 10px solid var(--red); }
.closing .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  align-items: center;
  justify-content: space-between;
}
.closing-sign { display: flex; align-items: center; gap: 16px; }
.closing-of { font-size: 15px; letter-spacing: 0.3em; }
.closing-name { font-size: clamp(40px, 5vw, 60px); }
.closing-copy { flex: 1 1 420px; min-width: 0; }
.closing-line { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.2; }
.closing-line .mono { font-weight: 600; }
.closing-sub { margin: 6px 0 0; font-size: 16px; color: var(--muted-on-dark); }

/* Footer */
.site-footer { background: var(--ink-deep); color: var(--muted-on-dark); font-size: 13px; padding: 18px 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* The short pages: 404, and the Worker's answer to a form sent without the page script */
.notice { padding: 72px 0; }
.notice h1 { margin: 0 0 12px; font: 400 36px/1.1 var(--font-display); color: var(--red); }
.notice p { max-width: 60ch; }

/* Narrow screens. Above these widths the flex rows wrap by themselves. */

/* Below about 1070px the form drops under the hero text, so it takes the full width. */
@media (max-width: 1067px) {
  .quote { flex-basis: 100%; max-width: none; }
}

/* Header: the brand and the quote button share the first row, and the links take one row below
   that scrolls sideways when they do not fit, with a fade at the right edge to show there is more. */
@media (max-width: 940px) {
  .site-header .wrap { gap: 4px 12px; justify-content: space-between; padding-bottom: 6px; }
  .site-header .btn-cta-sm { order: 2; }
  .site-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    gap: 22px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 560px) {
  .hero { padding: 36px 0 48px; }
  .hero .wrap { gap: 32px; }
  .board-section { padding: 48px 0; }
  /* The size is in most item names, so the Size column goes and the price stays on screen. */
  .price-table { min-width: 0; }
  .price-table th:nth-child(2), .price-table td:nth-child(2) { display: none; }
}

@media (max-width: 480px) {
  .site-header .brand .emblem { width: 40px; height: 32px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand-name { font-size: 22px; }
  .site-header .brand-of { font-size: 10px; }
  .site-header .btn-cta-sm { min-height: 40px; padding-inline: 12px; font-size: 14px; }
  .quote { padding: 20px 16px; }
  /* ZIP and count share a row. The longer fields keep a row each. */
  .quote-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .quote-grid > .field-item:nth-child(-n+4) { grid-column: 1 / -1; }
}