/* Cajun table: sunlit clay, laid paper, a smoked-brown counter, and warm metal. */
:root {
  --ink: #432a20;
  --red: #863a27;
  --muted: #715844;
  --line: #63422c35;
  --clay: #c79879;
  --paper: #eadcc5;
  --paper-light: #f0e5d3;
  --cream: #f5e7d2;
  --smoke: #34231c;
  --copper: #d6a46e;
  --surface: var(--paper);
}

body {
  position: relative;
  isolation: isolate;
  background-color: var(--clay);
  background-image:
    url('./material-grain.svg'),
    radial-gradient(ellipse 1150px 850px at 27% 190px, #eed3b570, transparent 78%),
    radial-gradient(ellipse 820px 800px at 100% 670px, #78412838, transparent 80%);
  background-size: 256px 256px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}
.table-light {
  position: absolute;
  top: 0;
  right: 0;
  width: min(94%, 1450px);
  height: 1130px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.table-light::before {
  content: '';
  position: absolute;
  inset: -200px -100px 0 17%;
  background:
    linear-gradient(160deg, transparent 32%, #522e2025 34% 41%, transparent 43% 76%, #522e201c 78% 85%, transparent 87%),
    repeating-linear-gradient(114deg, transparent 0 208px, #522e2028 226px 260px, transparent 281px 470px);
  transform: rotate(-7deg);
  filter: blur(12px);
  opacity: .8;
}
.table-light::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--clay) 0, transparent 38%);
  opacity: .7;
}
.announcement {
  color: var(--cream);
  background: #4b2c23 url('./material-grain.svg');
  border-color: #4b2c23;
}
.announcement > a { color: #f2d3aa; }
.announcement-dot { background: #d8a369; }
.site-header { border-bottom: 1px solid #64412f30; }
.site-header .button { background: #4b2c23; border-color: #4b2c23; color: var(--cream); }
.site-header .button:hover { background: #6b3524; border-color: #6b3524; }
.menu-toggle { background: #efddc1; border-color: #7651393d; }
.menu-toggle > span { background: #4b2c23; }
.hero { position: relative; padding-bottom: 27px; }
.hero > .shell { position: relative; z-index: 1; }
.hero-topline, .hero-topline .eyebrow { color: #43281e; }
.hero h1 { color: #43281e; text-shadow: 0 1px 0 #f5dec04d; }
.hero h1 > span { color: #713322; }
.hero-spark { color: #82412c; }
.hero-note > p { color: #482e20; }
.button { background: var(--red); color: var(--cream); border-color: var(--red); }
.button:hover { background: #692a1c; border-color: #692a1c; box-shadow: 0 6px 0 #5b2e2026; }
.hero-note .button { box-shadow: 0 5px 0 #4b2c2320; }
.feast-outline {
  inset: -15px -18px -4px -10px;
  border-color: #6d483748;
  background: var(--paper-light) url('./paper-fibers.svg');
  box-shadow: 14px 22px 45px #4a281e40;
}
.feast-outline::after { border-color: #9b6a493d; }
.feast-crop { box-shadow: 0 5px 18px #3f221e20; }
.feast-label { background: var(--paper-light) url('./paper-fibers.svg'); color: #4b3021; }
.snapshot {
  background: var(--paper-light) url('./paper-fibers.svg');
  border-color: #80533738;
  box-shadow: 8px 18px 35px #3a1e2529, 0 2px 4px #3a1e2514;
}
.snapshot > span, .snapshot > figcaption { color: #523422; }
.hero-seal {
  background: #79402a url('./material-grain.svg');
  color: var(--cream);
  outline-color: #e5c29b;
  box-shadow: 7px 10px 24px #4a281d30;
}
.hero-seal > .icon { color: #edc999; }
.hero-seal .seal-bottom { color: #f4ddc0; }
.hero-doodle { color: #703724; }
.hero-base { color: #4c3021; border-color: #6b432d42; }
.hero-base > svg { color: #7d3b24; }

/* A torn paper edge makes the change of material physical. */
.story-surface, .lunch-surface {
  position: relative;
  isolation: isolate;
  background: var(--paper) url('./paper-fibers.svg');
}
.story-surface::before {
  content: '';
  position: absolute;
  top: -21px;
  left: 0;
  width: 100%;
  height: 23px;
  background: var(--paper) url('./paper-fibers.svg');
  clip-path: polygon(0 33%,2% 45%,4% 24%,7% 42%,10% 27%,13% 46%,15% 20%,18% 31%,21% 19%,23% 42%,27% 31%,29% 14%,32% 30%,35% 15%,38% 39%,42% 24%,46% 48%,49% 29%,52% 37%,54% 18%,58% 40%,61% 24%,64% 38%,68% 20%,71% 36%,75% 16%,78% 37%,82% 22%,86% 36%,90% 13%,93% 32%,96% 21%,100% 35%,100% 100%,0 100%);
}
.story-surface::after {
  content: '';
  position: absolute;
  inset: 25px 26px;
  border-inline: 1px solid #8a55361a;
  pointer-events: none;
  z-index: -1;
}
.story-copy h2 { color: #51301f; }
.story-copy > p { color: #72533d; }
.story-margin { color: #78573f; }
.story-spark { color: #9b4b2d; }
.story-detail { box-shadow: 6px 14px 22px #62412d26; }
.story-main { box-shadow: 8px 16px 29px #62412d2e; }

/* Dark roast and copper, with a warm pool of light behind the food. */
.cravings {
  color: var(--cream);
  background-color: var(--smoke);
  background-image:
    url('./material-grain.svg'),
    radial-gradient(ellipse at 82% 51%, #794e326e 0, transparent 65%),
    linear-gradient(118deg, #2d201a 15%, #3e2b20 68%, #3a241d);
  background-size: 256px 256px, auto, auto;
}
.cravings::before {
  background: radial-gradient(circle at 13px 0, transparent 12px, #30221b 12.7px) 0 0/26px 15px;
}
.cravings-heading .eyebrow, .flavor-copy > .eyebrow { color: #edc99d; }
.cravings-heading > p, .flavor-copy > p { color: #dfcdb8; }
.cravings-spark { color: #d1a272; }
.cravings-tabs { border-color: #e3c9a44a; }
.cravings-tabs > button { color: #ebd9c3; border-right-color: #e3c9a44a; }
.cravings-tabs > button .tab-number { opacity: 1; color: #d4b38e; }
.cravings-tabs > button[aria-selected=true] {
  color: #452e20;
  background: #e4c49d url('./paper-fibers.svg');
}
.cravings-tabs > button[aria-selected=true] .tab-number { color: #6c422b; }
.cravings-tabs > button[aria-selected=false]:hover { background: #e6c89f14; color: #fff1de; }
.cravings-tabs > button:focus-visible { outline-color: #f4d9b4; }
.flavor-panel:focus-visible { outline-color: #d9ae80; }
.flavor-photo {
  background: var(--paper-light) url('./paper-fibers.svg');
  box-shadow: 14px 18px 0 #150c092b, 16px 24px 50px #160d093d;
  color: #513522;
}
.flavor-photo::before {
  content: '';
  width: 94px;
  height: 30px;
  background: #cfb188b3 url('./paper-fibers.svg');
  position: absolute;
  top: -15px;
  left: 40%;
  transform: rotate(-9deg);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 1px 3px #00000014;
}
.flavor-stamp { background: #8a3f29 url('./material-grain.svg'); color: var(--cream); outline-color: #f1d5b499; }
.cravings .button-accent { color: #4b3020; background: #edd7b7; border-color: #edd7b7; }
.cravings .button-accent:hover { background: #fae5c8; box-shadow: 0 5px 0 #efc48824; }
.flavor-pagination { color: #d5bfa5; border-color: #e3c9a43b; }
.flavor-pagination b { color: var(--cream); }
.flavor-pagination button { color: var(--cream); border-color: #dfbb916b; }
.flavor-pagination button:hover { color: #4b3020; background: #e4c49d; }
.menu-bottom-link { color: #dfcdb8; border-color: #e3c9a43b; }
.menu-bottom-link > span:last-child { color: #edc99d; }

.ticker-space { position: relative; background: var(--paper) url('./paper-fibers.svg'); }
.ticker {
  background: #874129 url('./material-grain.svg');
  border-color: #874129;
  color: #f1ddbd;
  box-shadow: 0 8px 0 #78503114;
}
.ticker-track svg { color: #e4b077; }
.lunch-surface { overflow: hidden; overflow: clip; }
.lunch-surface::before {
  content: '';
  position: absolute;
  top: 119px;
  right: -70px;
  width: 300px;
  height: calc(100% - 115px);
  background-color: #ead4b7;
  background-image:
    url('./paper-fibers.svg'),
    repeating-linear-gradient(0deg, #91573914 0 28px, transparent 28px 56px),
    repeating-linear-gradient(90deg, #91573914 0 28px, transparent 28px 56px);
  transform: rotate(-7deg);
  border-left: 1px solid #99634125;
  pointer-events: none;
  z-index: -1;
}
.lunch-heading p { color: #72533d; }
.lunch-heading h2 { color: #51301f; }
.lunch-margin { color: #78573f; }
.lunch-ticket { background: #89422c url('./material-grain.svg'); color: var(--cream); border-color: #eecda985; box-shadow: 9px 12px 0 #60352220; }
.lunch-ticket > small { color: #f5e3cc; }
.lunch-ticket::before, .lunch-ticket::after { background: var(--paper); }
.ticket-top { border-color: #eecda970; }
.ticket-rule { border-color: #eecda980; }
.ticket-spark { color: #593620; fill: #593620; }

/* The bar changes the setting: a warm counter and a paper drinks list. */
.bar-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background-color: #744a35;
  background-image:
    url('./material-grain.svg'),
    radial-gradient(ellipse at 20% 25%, #d09b633b, transparent 68%),
    linear-gradient(105deg, #6b4130, #835a3e);
}
.bar-surface::before {
  content: '';
  position: absolute;
  inset: 0 0 0 64%;
  background: url('./counter-inlay.svg') 32px -56px/224px 224px;
  pointer-events: none;
  z-index: -1;
}
.bar-surface::after {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 18px;
  right: 18px;
  border-block: 1px solid #ebceab36;
  pointer-events: none;
  z-index: -1;
}
.bar { border-top: 0; padding-top: 83px; padding-bottom: 106px; }
.bar-copy, .bar-copy h2 { color: var(--cream); }
.bar-copy > .eyebrow { color: #f5d8b4; }
.bar-copy > p { color: #f0dcc3; }
.bar-copy .text-link { color: #f5e6d1; }
.bar-copy .text-link:hover { color: #fff4e2; }
.bar-illustration { color: #efcc98; }
.bar-menu { background: var(--paper-light) url('./paper-fibers.svg'); border-color: #b78a62; box-shadow: 11px 16px 0 #321c171c, 14px 19px 33px #321c1729; }
.bar-menu::before { border-color: #a6754555; }
.bar-menu-top { border-color: #8c5e3e75; }
.bar-menu li small, .bar-menu > p { color: #73543d; }

.visit {
  color: var(--cream);
  background-color: #35221c;
  background-image: url('./material-grain.svg'), radial-gradient(ellipse at 20% 0, #81513138, transparent 73%);
  background-size: 256px 256px, auto;
}
.visit::before { background: radial-gradient(circle at 13px 0, transparent 12px, #402a20 12.7px) 0 0/26px 15px; }
.visit-heading, .site-footer { border-color: #d7b48e3d; }
.mascot-circle { background: var(--paper-light) url('./paper-fibers.svg'); box-shadow: 5px 5px 0 #180e0833; }
.visit-heading h2 { color: #efdbbd; }
.visit-arrow { border-color: #e1bb8b66; color: #efd7b7; }
.visit-arrow:hover { background: #ddba8d; border-color: #ddba8d; color: #432a20; }
.visit-grid .eyebrow { color: #eac28f; }
.visit-hours, .visit-hours dl > div, .visit-order { border-color: #d7b48e35; }
.visit-hours dt, .visit-order > p, .site-footer { color: #d8c0a8; }
.visit-location > .text-link:hover { color: #efc992; }
.visit-order .button-accent { background: #e4c49d; color: #432a20; border-color: #e4c49d; }
.visit-order .button-accent:hover { background: #f3d4ac; box-shadow: 0 5px 0 #e4c49d20; }
.site-footer a:last-child { color: #f2d8b6; }
.skip-link { background: var(--paper-light); }
::selection { background: #713923; color: #f4e5cf; }

@media (max-width: 1000px) {
  .bar { padding-top: 70px; padding-bottom: 95px; }
  .lunch-surface::before { right: -160px; }
}
@media (max-width: 760px) {
  body { background-size: 256px 256px, 1100px 1250px, 950px 1000px; background-position: 0 0, 55% 0, 0 150px; }
  .table-light { width: 100%; height: 1120px; }
  .table-light::before { inset: -100px -260px 0 13%; opacity: .7; filter: blur(9px); }
  .site-header { border-bottom-color: #6c432d24; }
  .site-nav { background: var(--paper-light) url('./paper-fibers.svg'); }
  .hero { padding-bottom: 24px; }
  .hero h1 { text-shadow: none; }
  .hero-base { border-color: #6b432d42; }
  .feast-outline { inset: -7px -8px -1px -5px; box-shadow: 8px 13px 26px #4a281e33; }
  .snapshot { box-shadow: 5px 10px 20px #42251a26; }
  .story-surface::after { inset: 18px 8px; border-inline-color: #8a553619; }
  .flavor-photo { box-shadow: 8px 10px 0 #150c0926, 8px 15px 28px #160d0933; }
  .flavor-photo::before { width: 73px; height: 24px; top: -12px; }
  .cravings-tabs > button:last-child { border-right: 0; }
  .lunch-surface::before { width: 180px; right: -80px; top: 255px; }
  .bar { padding-top: 57px; padding-bottom: 73px; }
  .bar-surface::before { inset: 0 0 0 52%; background-size: 168px 168px; opacity: .65; }
  .bar-surface::after { inset: 10px; }
  .bar-menu { box-shadow: 8px 9px 0 #321c1724; }
  .visit-heading h2 { color: #efdbbd; }
}