/* Buns Over Texas site CSS: built from tools/css/*.css by tools/deploy.sh. */
/* ---------- Tokens ---------- */
:root {
	--bot-navy: #18204F;
	--bot-red: #D7262E;
	--bot-brick: #8E141B;
	--bot-cream: #FFF3DC;
	--bot-ink: #111113;
	--bot-cheddar: #FFB321;
	--bot-checker: repeating-conic-gradient(#D7262E 0 25%, #FFF3DC 0 50%) 0 0 / 28px 28px;
	--bot-ease: cubic-bezier(.22, 1, .36, 1);
	--bot-line: 2.5px;
}

/* Condensed Archivo for labels, menus and buttons (the design's 68 to 72% widths). */
body .small-titles,
body .ct2-hero-eyebrow,
body .ct2-pl-note,
body .top-bar,
body .main-nav a,
body .button,
body .sb-blk .btn,
body .sb-blk .tlink,
body .cc-visit-map__dir,
body .cc-visit-map__apple { font-stretch: 70%; }
body .small-titles,
body .ct2-hero-eyebrow { font-weight: 700; letter-spacing: .22em; }

/* Buttons: tall, square, condensed caps; outline variant for navy on cream. */
body .button,
body .sb-blk .btn {
	min-height: 60px; display: inline-flex; align-items: center; justify-content: center;
	padding: 0 30px; border-radius: 2px; font-weight: 800; letter-spacing: .16em; line-height: 1;
}
/* Header button matches the standard ones (the framework's header rule kept a 40px line-height inside 60px) */
body .header a.button { height: 60px; min-height: 0; line-height: 60px; padding: 0 30px !important; }

/* No focus rings, outlines or focus tints anywhere (owner rule). */
body a:focus, body a:focus-visible, body button:focus, body button:focus-visible,
body input:focus, body textarea:focus, body select:focus, body [tabindex]:focus, body .ct2-pl-item:focus {
	outline: none !important; box-shadow: none !important;
}

/* Hover lift on buttons and cards: translate only (composes with the framework's transforms). */
body .button, body .sb-blk .btn, body .ct2-tile, body .grid-flex .panel, body .cc-visit-map__dir {
	transition: translate .22s var(--bot-ease), background-color .22s ease, color .22s ease, border-color .22s ease;
}
@media (hover: hover) {
	body .button:hover, body .sb-blk .btn:hover, body .cc-visit-map__dir:hover { translate: 0 -3px; }
	body .ct2-tile:hover, body .grid-flex .panel:hover { translate: 0 -6px; }
}

/* Smooth page transitions between pages (cross-document View Transitions; ignored where unsupported). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: bot-vt-out .22s ease-in both; }
::view-transition-new(root) { animation: bot-vt-in .38s var(--bot-ease) both; }
@keyframes bot-vt-out { to { opacity: 0; } }
@keyframes bot-vt-in { from { opacity: 0; translate: 0 14px; } }
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Header and top bar ---------- */
body .top-bar { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bot-cream); }
body .top-bar p { margin: 0; }
body .top-bar a { color: var(--bot-cream); }
body .header.shadow { box-shadow: none; border-bottom: var(--bot-line) solid var(--bot-navy); }
body .main-nav a { font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: 16px; color: var(--bot-navy); }
body .main-nav a:hover, body .main-nav .current-menu-item > a { color: var(--bot-red); }
/* ---------- Hero (HER-24 Split Photo, every page) ---------- */
body .ct2-hero-split { background: var(--bot-cream); color: var(--bot-navy); }
/* The header is static and in the page flow, so the hero starts right under it. The framework reserves the
   header's height again inside the hero (!important), which left about 140px of empty cream. */
body header.ct2-hero.ct2-hero-split.is-below-header { padding-top: clamp(24px, 2.8vw, 56px) !important; }
body .ct2-hero-split .ct2-hs { min-height: clamp(520px, 50vw, 760px); }
body .ct2-hero-split .ct2-hs-copy { padding: clamp(24px, 3vw, 56px) clamp(20px, 5vw, 72px) clamp(40px, 5vw, 96px); }
body .ct2-hero-split .ct2-hero-eyebrow { color: var(--bot-red); font-size: 14px; margin: 0 0 26px; }
body .ct2-hero-split .ct2-hero-title {
	font-size: clamp(calc(var(--fs-hero) * .5), 8.2vw, var(--fs-hero));
	line-height: .93; letter-spacing: -.01em; color: var(--bot-navy); text-wrap: balance;
}
body .ct2-hero-split .ct2-hero-title span { color: var(--bot-red); }
body .ct2-hero-split .ct2-hero-sentence { font-size: 19px; line-height: 1.55; max-width: 34em; margin: 30px 0 36px; color: var(--bot-ink); }
body .ct2-hero-split .ct2-hero-buttons { gap: 14px; }
body .ct2-hero-split .ct2-hs-media { overflow: hidden; }
body .ct2-hero-split .ct2-hs-media img { scale: 1.12; }

/* Checker band and the red tagline marquee under the hero. */
body .ct2-hero-mq {
	position: relative; background: var(--bot-red); color: var(--bot-cream);
	padding: 18px 0 16px; margin-top: 18px; border-bottom: var(--bot-line) solid var(--bot-navy);
}
body .ct2-hero-mq::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; background: var(--bot-checker);
}
body .ct2-hero-mq .ct2-mq-item { font-family: Anton, var(--font-titles), sans-serif; font-size: clamp(30px, 4.4vw, 64px); line-height: 1; text-transform: uppercase; }
body .ct2-hero-mq .ct2-mq-sep { color: var(--bot-navy); font-size: .5em; padding: 0 .6em; vertical-align: middle; }

@media (max-width: 767px) {
	body .ct2-hero-split .ct2-hs { min-height: 0; }
	body .ct2-hero-split .ct2-hs-media { aspect-ratio: 4 / 3; }
	body .ct2-hero-split .ct2-hero-title { font-size: clamp(48px, 15vw, 76px); }
	body .ct2-hero-split .ct2-hero-sentence { font-size: 17px; }
	body .ct2-hero-split .ct2-hero-buttons .button { width: 100%; }
}

/* The seal (rotates on scroll), tucked over the hero's lower seam. */
body .bot-menu { position: relative; }
body .bot-seal {
	position: absolute; z-index: 6; pointer-events: none;
	width: clamp(130px, 17vw, 250px); aspect-ratio: 1; left: 50%; top: 0;
	translate: -50% calc(-100% - 40px);
	filter: drop-shadow(0 18px 30px rgba(24, 32, 79, .22));
}
body .bot-seal-spin, body .bot-seal-svg { display: block; width: 100%; height: 100%; }
@media (max-width: 767px) {
	body .bot-seal { left: auto; right: 16px; translate: 0 -50%; width: 120px; }
}
/* ---------- Section titles on every page ---------- */
body .bot .titles:not(.small):not(.medium):not(.headline) { line-height: .93; letter-spacing: -.01em; }
body .bot .small-titles { font-size: 14px; }

/* ---------- 01 The menu (PRC-21) ---------- */
body .bot-menu .titles.headline {
	font-size: clamp(110px, 23vw, 340px); line-height: .78; margin: 0 0 .12em -.03em;
	color: var(--bot-red); letter-spacing: -.02em; white-space: nowrap;
}
body .bot-menu, body .bot-menu-full { overflow-x: clip; }
body .ct2-pl-group-head .titles.medium { color: var(--bot-navy); }
body .ct2-pl-note { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bot-red); }
body .ct2-pl-item { border-top: var(--bot-line) solid var(--bot-navy); padding-top: 18px; }
body .ct2-pl-name { color: var(--bot-navy); }
body .ct2-pl-item:hover .ct2-pl-name, body .ct2-pl-item.is-active .ct2-pl-name { color: var(--bot-red); }
body .ct2-pl-price { color: var(--bot-red); font-family: Anton, var(--font-titles), sans-serif; }
body .ct2-pl-details { font-size: 16px; color: var(--bot-ink); }
body .ct2-pl-leader { border-color: rgba(24, 32, 79, .35); }
body .ct3-pls-photo, body .ct3-pls-pin img { border-radius: 0; }

/* ---------- 02 Fries, fixings & tea (BEN-21, 7fr / 5fr) ---------- */
body .bot-trio .ct2-bento-c { grid-template-columns: 7fr 5fr; grid-auto-rows: minmax(300px, auto); gap: 22px; }
body .bot-trio .ct2-bento-c > :first-child { grid-row: span 2; min-height: 640px; }
body .bot-trio .ct2-tile { border-radius: 0; overflow: hidden; }
body .bot-trio .ct2-tile .ct2-tile-title { font-size: clamp(30px, 3vw, 46px); line-height: .95; text-transform: uppercase; color: var(--bot-cream); }
body .bot-trio .ct2-tile .ct2-tile-text { font-size: 17px; color: var(--bot-cream); max-width: 30em; }
body .bot-trio .ct2-tile.ct2-tt-text { background: var(--bot-cream); color: var(--bot-navy); position: relative; padding-top: 70px; }
body .bot-trio .ct2-tile.ct2-tt-text .ct2-tile-title { color: var(--bot-navy) !important; } /* beats the framework's tile-title inherit rule */
body .bot-trio .ct2-tile.ct2-tt-text .ct2-tile-text { color: var(--bot-ink); }
body .bot-trio .ct2-tile.ct2-tt-text::before {
	content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 120px; background: var(--bot-checker);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}
body .bot-trio .ct2-tile.has-photo::after { background: linear-gradient(180deg, rgba(17, 17, 19, 0) 35%, rgba(142, 20, 27, .88)); }
body .bot-trio .ct2-tile-img { scale: 1.12; }
body .bot-trio .ct3-hs-body p, body .bot-trio .wysiwyg p { font-size: 19px; }
@media (max-width: 767px) {
	body .bot-trio .ct2-bento-c { grid-template-columns: 1fr; }
	body .bot-trio .ct2-bento-c > :first-child { grid-row: auto; min-height: 420px; }
}

/* ---------- 03 Your buns are up (CTA-16, red) ---------- */
body .bot-order, body .bot-order .sb-blk { background: var(--bot-red); color: var(--bot-cream); }
body .bot-order .sb-blk .blk.ink.c16 { background: var(--bot-red) !important; color: var(--bot-cream); } /* look 16 paints its ink panel with high priority */
body .bot-order .blk.ink { --sb-bg: var(--bot-red); }
body .bot-order .c16-track span {
	font-family: Bevan, Georgia, serif; font-style: italic; font-weight: 400; text-transform: none;
	color: var(--bot-cream); letter-spacing: -.02em;
}
body .bot-order .c16-track i { background: var(--bot-navy); }
body .bot-order .c16-foot { border-top: var(--bot-line) solid var(--bot-cream); }
body .bot-order .lead { color: var(--bot-cream); font-size: 20px; }
body .bot-order .btn { background: var(--bot-cream); color: var(--bot-navy); border-color: var(--bot-cream); }
body .bot-order .btn:hover { background: var(--bot-navy); color: var(--bot-cream); border-color: var(--bot-navy); }
body .bot-order .tlink { color: var(--bot-cream); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body .bot-order::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; z-index: 4;
	background: repeating-conic-gradient(#18204F 0 25%, #D7262E 0 50%) 0 0 / 28px 28px;
}

/* ---------- 04 Catering (IMG-22) ---------- */
body .bot-cater .image-split, body .bot-bring .image-split { overflow: hidden; }
body .bot-cater .image-split img, body .bot-bring .image-split img { scale: 1.12; }
body .bot-cater .right .marg-t-20.ta-center, body .bot-bring .right .marg-t-20.ta-center { text-align: left; }
body .bot .bot-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 24px 0 0; }
body .bot .bot-tags li {
	list-style: none; margin: 0; padding: 10px 16px; border: var(--bot-line) solid var(--bot-navy); color: var(--bot-navy);
	font-weight: 800; font-stretch: 70%; letter-spacing: .16em; text-transform: uppercase; font-size: 14px; line-height: 1;
}
body .bot .bot-tags li::before { display: none; }

/* ---------- 05 Come on by (MAP-22) and the giant BUNS ---------- */
body .bot-visit .cc-visit-map__card { background: var(--bot-cream); color: var(--bot-ink); border-radius: 0; }
body .bot-visit .cc-visit-map__card .titles { color: var(--bot-navy); }
body .bot-visit .cc-visit-map__card .small-titles { color: var(--bot-red); }
body .bot-visit .cc-visit-map__card a:not(.button) { color: var(--bot-red); }
body .bot-visit .cc-visit-map__map, body .bot-visitmap .cc-visit-map__map { border: var(--bot-line) solid currentColor; }
body .bot-visit .cc-visit-map__time, body .bot-visitmap .cc-visit-map__time { color: var(--bot-red); font-family: Anton, var(--font-titles), sans-serif; font-size: 28px; }
body .bot-visit .cc-visit-map__address { font-size: 20px; font-style: normal; }
/* Whole word stays in the frame (design: 1560 of 1700); the band clips the sideways drift, not the word box. */
body .bot-visit, body .bot-visitmap { overflow-x: clip; }
body .bot-bigword { padding: clamp(40px, 6vw, 90px) 0 clamp(30px, 4vw, 70px); }
body .bot-drift { width: 100%; }
body .bot-word-svg { display: block; width: 100%; height: auto; }

/* ---------- Footer ---------- */
body .cc-footer { position: relative; }
body .cc-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: var(--bot-checker); }
body .cc-footer .titles.small { color: var(--bot-cream); text-transform: uppercase; }
body .cc-footer .cc-footer-logo img { max-width: 190px; }
body .cc-footer p { text-wrap: pretty; }
body .cc-footer .cc-footer-fine { font-family: Anton, var(--font-titles), sans-serif; text-transform: uppercase; font-size: 22px; letter-spacing: .02em; }

/* ---------- Phones: inner-page fixes ---------- */
@media (max-width: 767px) {
	html body .bot-menu-full .ct2-pl-line .ct2-pl-price { font-size: 26px; }
	body .bot-statement .ct2-stm-text.titles { font-size: clamp(30px, 8.6vw, 40px) !important; line-height: 1.08; } /* .titles sizes carry !important */
}
/* ---------- Site motion (site/buns-motion.js) ---------- */
/* Stagger start state only exists after the script adds .bot-stagger to <html>. */
html.bot-stagger .ct2-pl-items > li,
html.bot-stagger .bot-tags > li,
html.bot-stagger .cc-visit-map__steps > li {
	opacity: 0; translate: 0 22px;
	transition: opacity .6s var(--bot-ease), translate .7s var(--bot-ease);
	transition-delay: calc(var(--bot-i, 0) * 70ms);
}
html.bot-stagger .is-in > li { opacity: 1; translate: 0 0; }
.bot-seal-spin, .bot-drift, .bot-menu .titles.headline { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	html.bot-stagger .ct2-pl-items > li, html.bot-stagger .bot-tags > li, html.bot-stagger .cc-visit-map__steps > li { opacity: 1; translate: none; transition: none; }
	body .ct2-hero-split .ct2-hs-media img, body .bot .image-split img, body .bot-trio .ct2-tile-img { scale: 1; }
	body .button:hover, body .sb-blk .btn:hover, body .ct2-tile:hover, body .grid-flex .panel:hover { translate: none; }
}