/* Fonts: self-hosted latin + latin-ext subsets from @fontsource (unicode-range copied from each package). */
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/alfa-slab-one-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/alfa-slab-one-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Rye';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/rye-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Rye';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/rye-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Caveat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/fonts/caveat-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/fonts/caveat-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/libre-franklin-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Franklin Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/libre-franklin-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Tokens: the reference's @theme, as plain custom properties. */
:root {
  /* Night: the page itself, the old site's black. */
  --color-night: #121010;
  --color-night-2: #1b1715;
  --color-night-3: #0b0909;
  --color-cream: #fbf3e6;
  --color-cream-body: #ddd1c3;
  --color-smoke: #b8aa9c;
  /* Fire: the logo's red, orange and yellow. Ember is for fills, flame for red text on night. */
  --color-ember: #e5311f;
  --color-ember-dark: #a3190d;
  --color-flame: #ff5236;
  --color-orange: #ff8c01;
  --color-yellow: #ffc600;
  /* Paper objects laid on the night: snapshots, tickets, the contact card. */
  --color-paper: #f4ead7;
  --color-kraft: #e3c99b;
  --color-polaroid: #fffdf7;
  --color-ink: #2a1c15;
  --color-ink-2: #54392b;

  --font-slab: 'Alfa Slab One', Georgia, serif;
  --font-rye: 'Rye', Georgia, serif;
  --font-hand: 'Caveat Variable', 'Caveat', cursive;
  --font-sans: 'Libre Franklin Variable', 'Libre Franklin', sans-serif;
}

/* site.css's :root[data-theme=dark] (0,2,0) beats theme.css's :root. Re-assert the
   brand tokens at equal specificity (loads later). Values mirror config.json branding.colors. */
:root[data-theme='dark'] {
  --color-surface: #121010;
  --color-text: #fbf3e6;
  --color-secondary: #b8aa9c;
}

html {
  scroll-behavior: smooth;
}

/* Base. Scoped to .rw-body so the kit's editor UI keeps its own look. */
body.rw-body {
  margin: 0;
  background-color: var(--color-night);
  color: var(--color-cream);
  font-family: var(--font-sans);
  /* The reference sets no line-height; undo Tailwind preflight's 1.5. */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}
.rw-body :focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 2px;
}
.rw-body section[id],
.rw-body .zk-section-wrap[id] {
  scroll-margin-top: 1.5rem;
}
/* Visually hidden, for the ticker's screen-reader list. */
.rw-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;
}
/* The reference's handset glyph: 1.1em square, scales with the link text. */
.rw-phone-icon {
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

/* Roadhouse utilities (global in the reference, so they keep their rh- names). */
.rh-wrap {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}
.rh-slab {
  font-family: var(--font-slab);
  font-weight: 400;
  line-height: 1.04;
}
.rh-rye {
  font-family: var(--font-rye);
  letter-spacing: 0.06em;
}
.rh-hand {
  font-family: var(--font-hand);
  font-weight: 700;
}
/* The logo's lettering: yellow at the top burning down to red. */
.rh-fire-text {
  background: linear-gradient(180deg, #ffd43a 8%, var(--color-orange) 48%, #ff2a12 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Buffalo check, red over the night. Override --gingham-alpha / --gingham-size per use. */
.rh-gingham {
  --gingham: rgb(229 49 31 / var(--gingham-alpha, 0.55));
  background-color: var(--color-night);
  background-image:
    linear-gradient(90deg, var(--gingham) 50%, transparent 50%),
    linear-gradient(var(--gingham) 50%, transparent 50%);
  background-size: var(--gingham-size, 26px) var(--gingham-size, 26px);
}
.rh-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background-color 0.2s,
    color 0.2s;
}
.rh-btn-red {
  background: var(--color-ember);
  color: var(--color-cream);
  box-shadow: 0 4px 0 var(--color-ember-dark);
}
.rh-btn-red:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 var(--color-ember-dark),
    0 10px 30px rgb(255 90 20 / 0.35);
}
.rh-btn-line {
  border: 2px solid var(--color-cream);
  color: var(--color-cream);
}
.rh-btn-line:hover {
  background: var(--color-cream);
  color: var(--color-night);
}
.rh-btn-sm {
  padding: 11px 18px;
  font-size: 12.5px;
}
/* Section kicker: Rye in orange between yellow stars. The port wraps the stars in
   aria-hidden spans and the text in an editable span, so only the stars are yellow. */
.rh-kicker {
  font-family: var(--font-rye);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--color-orange);
}
.rh-kicker > span[aria-hidden] {
  color: var(--color-yellow);
}
/* Hand-drawn red swoosh under a headline word. */
.rh-highlight {
  white-space: nowrap;
  padding-bottom: 0.08em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'><path d='M3 16 C 70 6, 160 3, 297 12' stroke='%23e5311f' stroke-width='7' fill='none' stroke-linecap='round'/></svg>")
    bottom left / 100% 0.34em no-repeat;
}
/* Kraft ticket with punched side notches and a dashed inner border. */
.rh-ticket {
  position: relative;
  color: var(--color-ink);
  background:
    radial-gradient(circle at 0 50%, transparent 11px, var(--color-kraft) 11.5px) left / 51% 100%
      no-repeat,
    radial-gradient(circle at 100% 50%, transparent 11px, var(--color-kraft) 11.5px) right / 51%
      100% no-repeat;
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.55));
}
.rh-ticket::before {
  content: '';
  position: absolute;
  inset: 9px 20px;
  border: 1.5px dashed rgb(42 28 21 / 0.38);
  border-radius: 3px;
  pointer-events: none;
}
/* Taped paper card laid on the night, tilted, like the quote form. */
.rh-paper-card {
  position: relative;
  padding: 40px;
  background: var(--color-paper);
  color: var(--color-ink);
  transform: rotate(-1.2deg);
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.65);
}
.rh-paper-card::before,
.rh-paper-card::after {
  content: '';
  position: absolute;
  top: -14px;
  width: 110px;
  height: 30px;
  background: rgb(226 163 43 / 0.65);
}
.rh-paper-card::before {
  left: 42px;
  transform: rotate(-5deg);
}
.rh-paper-card::after {
  right: 42px;
  transform: rotate(6deg);
}
@media (max-width: 767.98px) {
  .rh-paper-card {
    padding: 30px 22px;
  }
}

@keyframes rh-marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes rh-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Flame bands (rw-flames.js). The canvas fills its positioned parent. */
.rw-flames {
  display: block;
  width: 100%;
  pointer-events: none;
}
/* Painted tongues for browsers without WebGL. */
.rw-flames.fallback {
  background:
    radial-gradient(ellipse 30px 58px at 50% 100%, var(--color-yellow) 0 45%, transparent 47%) 0 100% / 64px 58px repeat-x,
    radial-gradient(ellipse 40px 92px at 50% 100%, var(--color-ember) 0 52%, transparent 54%) 32px 100% / 84px 92px repeat-x;
}

/* Polaroid base shared by the pinned and print variants. */
.rw-polaroid {
  position: relative;
  margin: 0;
  background: var(--color-polaroid);
  transform: rotate(var(--rotate));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rw-polaroid > img {
  display: block;
  width: 100%;
  object-fit: cover;
}