/* Driftless Pizza Co.'s colors, fonts and shapes, from the Driftless Brand Guide (Jake 2026-10-21). Only the
   Driftless site loads this file (same bones as Backpocket, its own skin).
   Type: TAY Fortune for headlines, TAY Tommy Tokyo for subheads, Montserrat for body. Fortune and Tommy Tokyo are
   Jake's licensed files (assets/fonts/); Bungee only fills in the few characters they don't have (en dash, $).
   Shape: the guide's panels have cut corners, so buttons, photos and cards do too (--cut). */
@font-face { font-family: "TAY Fortune"; src: url("/assets/fonts/tay-fortune.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "TAY Tommy Tokyo"; src: url("/assets/fonts/tay-tommy-tokyo.woff2") format("woff2"); font-display: swap; }
:root {
  /* primary palette */
  --brand-accent: #385c2f;        /* Driftless green: buttons, current page, headings */
  --brand-slate: #665b52;         /* warm brown-grey */
  --brand-gold: #c9a353;
  --brand-page: #ede8dc;          /* cream */
  --brand-white: #ffffff;
  /* secondary palette */
  --brand-dark: #21381c;          /* deep green: footer, page heads */
  --brand-olive: #91a05a;
  --brand-rust: #97411b;
  --brand-muted: #5c5756;
  --brand-ink: #3a3432;           /* charcoal: body text */
  /* roles */
  --brand-dark-2: var(--brand-accent);
  --brand-accent-dark: var(--brand-dark);
  --brand-accent-light: var(--brand-page);
  --brand-panel: var(--brand-white);
  --brand-band: var(--brand-accent);
  --brand-heading: var(--brand-accent);
  --brand-line: #d8d0bd;          /* cream, one step darker, for rules */
  --brand-warn-bg: #f6ecd2;
  --brand-warn: #7a5410;
  --brand-shadow: rgba(58, 52, 50, 0.14);
  --brand-hero-fade: rgba(33, 56, 28, .78);
  --brand-season-bg: var(--brand-rust);   /* Wonderland */
  --brand-season-head: var(--brand-page);
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "TAY Fortune", "TAY Tommy Tokyo", "Bungee", Georgia, serif;
  --font-pixel: "TAY Tommy Tokyo", "Bungee", "Arial Black", sans-serif;
  --cut: 12px;
  --chamfer: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  --radius: 0;
  --wrap: 1200px;
}
body { background-color: var(--brand-page); background-image: none; }
h1, h2, h3, h4 { letter-spacing: .01em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.35rem; }

/* header: white bar, wide logo left, plain nav, one big green Order Now (ordering is this site's main job) */
.site-head { background: var(--brand-white); border-top: 0; box-shadow: 0 2px 10px var(--brand-shadow); position: sticky; top: 0; z-index: 5; }
.head-row { padding-top: 10px; padding-bottom: 10px; }
.logo img { width: 170px; }
.head-right { flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 18px; }
.site-nav { background: transparent; border-radius: 0; flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 4px; }
.site-nav a { flex: 0 0 auto; color: var(--brand-ink); font-family: var(--font-body); font-size: .98rem; font-weight: 500; border-left: 0; padding: 8px 10px; border-radius: 999px; }
.site-nav a:hover { background: var(--brand-page); }
.site-nav a[aria-current="page"] { background: transparent; color: var(--brand-accent); box-shadow: inset 0 -2px 0 var(--brand-accent); border-radius: 0; }
.site-nav a:first-child { display: none; }        /* Home: the logo does that */
.pill { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  background: var(--brand-accent); padding: 10px 22px; box-shadow: none; }
.pill-order { font-size: 1.05rem; padding: 11px 26px; }
/* Rewards / Gift Cards / Get the App: outlined pills on the Order line (both sites, Jake 2026-10-25) */
.pill.pill-sub { font-family: var(--font-body); font-size: .88rem; font-weight: 600; padding: 8px 18px; }
.pill-drop { border-top-color: var(--brand-gold); }
/* tablets: the socials live in the footer, so the Order line stays on one row */
@media (max-width: 1100px) { .head-actions .socials { display: none; } .head-actions .pill.pill-sub { padding: 6px 12px; font-size: .82rem; } }

/* buttons: the guide's cut-corner shape */
.btn { box-shadow: none; font-weight: 600; }
.btn-light { background: var(--brand-white); color: var(--brand-accent); }
.btn-light:hover { background: var(--brand-page); }

/* hero: the big pizza photo, "PIZZA ELEVATED", the gold western line */
.hero-img { height: min(66vh, 560px); }
.hero-text h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.hero-text .pixel { color: var(--brand-white); letter-spacing: .04em; font-size: clamp(1rem, 2.6vw, 1.6rem); }

.hours-band h2 { color: var(--brand-gold); font-family: var(--font-pixel); letter-spacing: .04em; }
.hours-table { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; }
.hours-table th { color: var(--brand-accent-light); }
.hours-table td { border-left-color: rgba(255, 255, 255, .2); }
@media (max-width: 860px) { .hours-list { font-family: var(--font-body); font-size: 1rem; } .hours-list dt { color: var(--brand-accent-light); } }

/* section titles: plain centered headings, gold western on green bands */
.pixel-title { font-family: var(--font-head); background: transparent; border: 0; box-shadow: none; color: var(--brand-accent); letter-spacing: .04em; font-size: clamp(1.5rem, 3.6vw, 2.4rem); padding: 0; margin: 40px 0 16px; }
.brand-band .pixel-title, .season-band h2 { color: var(--brand-gold); text-align: left; }

/* food cards: rounded photo, big block label, small caps line (Pizza · NY Round · Detroit Square) */
.card { background: transparent; border: 0; padding: 0; text-align: center; }
.card img { aspect-ratio: 3 / 2; border-radius: var(--radius); }
.card span { color: var(--brand-ink); font-size: 1.9rem; }
.card small { color: var(--brand-muted); font-family: var(--font-pixel); font-size: .78rem; letter-spacing: .06em; }
.card:hover span { color: var(--brand-accent); }

.panel { box-shadow: 0 2px 12px var(--brand-shadow); }
.split img { border-radius: var(--radius); }
.sp-card { background: var(--brand-white); color: var(--brand-ink); border: 1px solid var(--brand-line); }
.sp-body h3 { color: var(--brand-heading); font-size: 1.4rem; }
.sp-when { font-family: var(--font-body); font-weight: 700; }
.room h3 { color: var(--brand-heading); font-size: 1.5rem; }
.jump a { background: var(--brand-white); color: var(--brand-accent); border: 1px solid var(--brand-accent); }
.mi-head h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: 0; color: var(--brand-ink); }
.menu-section h2 { color: var(--brand-accent); }
.page-head p { color: var(--brand-white); letter-spacing: .03em; }
.price-note, .menu-note, .widget-help { color: var(--brand-ink); }
.widget-help a { color: var(--brand-accent); }
.foot-h { color: var(--brand-gold); font-family: var(--font-pixel); letter-spacing: .03em; }
.site-foot { border-top: 0; }
.legal a { color: var(--brand-line); }

@media (max-width: 640px) {
  .head-row { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .logo img { width: 92px; }
  .head-right { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
  .head-actions { order: 1; flex-wrap: nowrap; gap: 4px; }
  .head-actions .pill, .pill-order { font-size: .72rem; padding: 6px 8px; white-space: nowrap; }
  .head-actions .pill.pill-sub { font-size: .7rem; padding: 4px 7px; }
  .menu-btn { order: 2; align-self: center; background: var(--brand-white); color: var(--brand-accent); border: 1px solid var(--brand-accent);
    font-family: var(--font-body); font-weight: 600; font-size: .78rem; padding: 6px 8px; }
  .site-nav { order: 3; flex-basis: 100%; }
  .site-nav a { border-top: 1px solid var(--brand-line); border-radius: 0; }
  .site-nav a:first-child { display: block; }
  .card img { aspect-ratio: 16 / 9; }
}
.brand-band .btn { background: var(--brand-gold); color: var(--brand-ink); }
.brand-band .btn:hover { background: var(--brand-accent-light); }
.brand-band .btn-light { background: var(--brand-page); color: var(--brand-accent); box-shadow: none; }
.brand-band .btn-light:hover { background: var(--brand-white); }
.page-head .head-btn { font-family: var(--font-body); }

/* Brand guide shapes: cut corners on buttons, photos and cards; subheads in Tommy Tokyo, tracked out. */
.btn, .pill, .menu-btn, .card img, .split img, .sp-card, .room, .gallery img { border-radius: 0; clip-path: var(--chamfer); }
.btn:focus-visible, .pill:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: -6px; }
.hero-text .pixel, .page-head p { font-family: var(--font-pixel); letter-spacing: .08em; }
.panel { border-top: 3px solid var(--brand-gold); }
.site-foot { border-top: 3px solid var(--brand-gold); }