:root {
  --retro-navy: #153246;
  --retro-navy-dark: #081a28;
  --retro-red: #a5262a;
  --retro-cream: #f6efd9;
  --retro-paper: #fffdf3;
  --retro-ink: #2d2923;
  --retro-muted: #71685c;
}

.retro-page {
  min-height: 100vh;
  color: var(--retro-ink);
  background-color: #173e55;
  background-image:
    radial-gradient(circle at 25% 10%, rgba(255,255,255,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 60%, rgba(0,0,0,.12) 0 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.025) 50%, rgba(255,255,255,.025) 75%, transparent 75%);
  background-size: 18px 18px, 23px 23px, 8px 8px;
}

.interactive-page::before,
.legal-page::before { display: none; }

.site-utility {
  color: #b8d4df;
  background: var(--retro-navy-dark);
  border-bottom: 1px solid #345468;
  font: 11px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.site-utility__inner,
.site-chrome,
.retro-footer {
  width: min(960px, calc(100% - 24px));
  margin-right: auto;
  margin-left: auto;
}

.retro-site-shell {
  width: 960px;
  margin: 24px auto 30px;
  background: var(--retro-cream);
  border: 1px solid #07131d;
  box-shadow: 0 0 0 5px rgba(255,255,255,.08), 0 14px 35px rgba(0,0,0,.55);
}

.retro-site-shell > .site-chrome,
.retro-site-shell > .diner-experience,
.retro-site-shell > .gallery-main,
.retro-site-shell > .retro-footer {
  width: 100%;
  margin: 0;
  border-right: 0;
  border-left: 0;
  box-shadow: none;
}

.retro-site-shell > .site-chrome { border-top: 0; border-bottom: 0; }
.retro-site-shell > .retro-footer { border-bottom: 0; }

.site-utility__inner {
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-utility a { color: #fff; text-decoration: none; }
.site-utility a:hover { text-decoration: underline; }

.site-chrome {
  margin-top: 24px;
  border: 1px solid #07131d;
  box-shadow: 0 0 0 5px rgba(255,255,255,.08), 0 14px 35px rgba(0,0,0,.55);
}

.retro-masthead {
  min-height: 128px;
  position: relative;
  overflow: hidden;
  padding: 23px 28px 18px;
  color: #fff;
  background: radial-gradient(ellipse at 72% 0, rgba(112,196,220,.28), transparent 38%), linear-gradient(#245b77, #15394f 58%, #0c2738);
  border-bottom: 1px solid #050e15;
}

.retro-masthead::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: repeating-linear-gradient(90deg, #f2ead2 0 22px, #9f2229 22px 44px);
  box-shadow: 0 -1px 0 rgba(0,0,0,.5);
}

.retro-brand {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  color: #fff;
  text-decoration: none;
}

.retro-brand__mark {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid #d9edf3;
  border-radius: 50%;
  background: linear-gradient(#58a9c4 0 48%, #28728f 59% 62%, #15435d 63%);
  box-shadow: inset 0 1px 5px rgba(255,255,255,.8), 0 3px 8px rgba(0,0,0,.5);
}

.retro-brand__mark img { width: 60%; height: 60%; object-fit: contain; transform: scale(1.65); }
.retro-brand__name { display: block; font: italic 700 34px/1 Georgia, "Times New Roman", serif; letter-spacing: -1px; text-shadow: 0 2px 0 #081722, 0 0 8px rgba(119,210,235,.35); }
.retro-brand__tagline { display: block; margin-top: 8px; color: #c6e3ed; font: bold 11px/1.55 Arial, Helvetica, sans-serif; letter-spacing: .19em; text-transform: uppercase; }

.retro-open-sign {
  position: absolute;
  top: 26px;
  right: 28px;
  width: 232px;
  padding: 12px 16px;
  text-align: center;
  font: 13px/1.55 Arial, Helvetica, sans-serif;
  background: rgba(4,19,29,.55);
  border: 1px solid #5f889a;
  box-shadow: inset 0 0 12px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.12);
}

.retro-open-sign strong { display: block; color: #ffe19d; font: bold 18px Georgia, "Times New Roman", serif; text-transform: uppercase; text-shadow: 0 0 6px #bd622f; }
.retro-open-sign span { color: #d7e9ef; font-size: 11px; }

.retro-nav {
  min-height: 45px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  padding-left: 15px;
  color: #fff;
  background: linear-gradient(#bf3438 0, #a6252a 47%, #8c1b20 50%, #6c1015 100%);
  border-top: 1px solid #dc676a;
  border-bottom: 1px solid #45090d;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
  font: 13px/1.55 Arial, Helvetica, sans-serif;
}

.retro-nav a {
  display: flex;
  align-items: center;
  padding: 0 21px;
  color: #fff;
  border-left: 1px solid rgba(255,255,255,.13);
  border-right: 1px solid rgba(61,0,5,.45);
  font: bold 12px/1.55 Arial, Helvetica, sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0,0,0,.75);
  text-transform: uppercase;
}

.retro-nav a:hover,
.retro-nav a:focus { color: #fff; background: linear-gradient(#da5054, #9d2025 55%, #791218); outline: none; }

.site-nav-toggle { display: none; }

/* diner.html follows the same 960px content scale as index.html. */
.interactive-page .site-chrome { margin-bottom: 0; }

.interactive-page .diner-experience {
  width: min(960px, calc(100% - 24px));
  margin: 0 auto;
  padding: 18px;
  overflow: hidden;
  color: var(--retro-ink);
  background: var(--retro-cream);
  border-right: 1px solid #07131d;
  border-left: 1px solid #07131d;
  box-shadow: 0 10px 35px rgba(0,0,0,.48), 0 0 0 5px rgba(255,255,255,.08);
}

.interactive-page .diner-content-panel {
  width: 100%;
  overflow: hidden;
  background: var(--retro-paper);
  border: 1px solid #c9bda3;
  box-shadow: 0 2px 5px rgba(66,48,28,.2);
}

.interactive-page .diner-experience__intro {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 10px 14px;
  align-items: center;
  color: #fff;
  background: linear-gradient(#3b7895, #255a73 49%, #19485f 51%, #0f3548);
  border: 1px solid #071c29;
  box-shadow: 0 2px 5px rgba(66,48,28,.22);
}

.interactive-page .diner-experience__intro h2 small {
  display: block;
  float: right;
  margin-top: 5px;
  color: #cbe3eb;
  font: bold 10px Arial, Helvetica, sans-serif;
  letter-spacing: .09em;
  text-shadow: none;
  text-transform: uppercase;
}

.interactive-page .diner-experience__intro h2 {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #fff;
  font: bold 20px/1.15 Georgia, "Times New Roman", serif;
  text-shadow: 0 -1px 0 rgba(0,0,0,.7);
}

.interactive-page .diner-content-panel__body { padding: 17px; }

.interactive-page .diner-homepage-link {
  min-height: 34px;
  margin: 0;
  padding: 8px 13px;
  color: #fff;
  background: linear-gradient(#dc575b 0, #b62b31 46%, #951c22 50%, #761117 100%);
  border: 1px solid #4c0b0e;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.35);
  backdrop-filter: none;
  font: bold 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .04em;
  text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}

.interactive-page .diner-homepage-link:hover,
.interactive-page .diner-homepage-link:focus-visible {
  color: #fff;
  background: linear-gradient(#ef6b6f, #b82329 52%, #7d1117);
  transform: none;
}

.interactive-page .diner-prototype-note {
  width: 100%;
  margin: 12px auto 0;
  color: var(--retro-muted);
  font: 11px/1.4 Arial, Helvetica, sans-serif;
}

.interactive-page .diner-prototype-note a { color: #285b73; text-decoration: underline; }
.interactive-page .retro-footer { margin-top: 0; }

.interactive-page .retro-site-shell > .diner-experience,
.gallery-page .retro-site-shell > .gallery-main {
  width: 100%;
  margin: 0;
  border-right: 0;
  border-left: 0;
  box-shadow: none;
}

.retro-footer {
  margin-bottom: 30px;
  color: #bcd1d9;
  background: #0d2737;
  border: 1px solid #07131d;
  border-top: 5px solid var(--retro-red);
  box-shadow: 0 0 0 5px rgba(255,255,255,.08), 0 10px 25px rgba(0,0,0,.4);
  font: 11px/1.55 Arial, Helvetica, sans-serif;
}

.retro-footer__inner { display: flex; justify-content: space-between; gap: 25px; padding: 19px 22px 22px; }
.retro-footer strong { color: #fff; }
.retro-footer a { color: #f0d18d; text-decoration: underline; }
.retro-footer__legal { max-width: 540px; text-align: right; }
.retro-footer__legal p { margin: 0 0 4px; color: inherit; }
.legacy-footer-copy { display: none; }

@media (max-width: 1000px) {
  .retro-site-shell { width: calc(100% - 24px); }
}

@media (max-width: 760px) {
  .site-utility__inner { padding: 6px 10px; }
  .site-chrome { margin-top: 12px; }
  .retro-site-shell { width: calc(100% - 24px); margin-top: 12px; }
  .retro-masthead { min-height: 108px; padding: 18px; }
  .retro-brand__mark { width: 58px; height: 58px; }
  .retro-brand__name { font-size: 25px; }
  .retro-open-sign { display: none; }
  .nav-enhanced .site-nav-toggle {
    width: 100%;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    color: #fff;
    background: linear-gradient(#bf3438 0, #a6252a 47%, #8c1b20 50%, #6c1015 100%);
    border: 0;
    border-top: 1px solid #dc676a;
    border-bottom: 1px solid #45090d;
    box-shadow: 0 2px 4px rgba(0,0,0,.35);
    font: bold 12px/1.55 Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
    text-shadow: 0 -1px 0 rgba(0,0,0,.75);
    text-transform: uppercase;
    cursor: pointer;
  }
  .site-nav-toggle__icon { font-size: 18px; transition: transform 180ms ease; }
  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle__icon { transform: rotate(180deg); }
  .nav-enhanced .retro-nav { min-height: 0; display: none; flex-direction: column; padding-left: 0; }
  .nav-enhanced .retro-nav.is-open { display: flex; }
  .nav-enhanced .retro-nav a { width: 100%; min-height: 42px; flex: none; justify-content: flex-start; padding: 0 18px; border-bottom: 1px solid rgba(61,0,5,.45); }
  .interactive-page .diner-experience { padding: 12px; }
  .interactive-page .diner-experience__intro { display: flex; }
  .interactive-page .diner-content-panel__body { padding: 12px; }
}

@media (max-width: 540px) {
  .site-utility__inner { display: block; text-align: center; }
  .site-utility__inner span:last-child { display: none; }
  .site-chrome, .retro-footer { width: 100%; margin-right: 0; margin-left: 0; border-right: 0; border-left: 0; }
  .retro-site-shell { width: 100%; margin: 0; border-right: 0; border-left: 0; }
  .site-chrome { margin-top: 0; }
  .retro-brand { gap: 10px; }
  .retro-brand__mark { width: 51px; height: 51px; }
  .retro-brand__name { font-size: 21px; }
  .retro-brand__tagline { font-size: 8px; }
  .nav-enhanced .retro-nav a { font-size: 10px; }
  .interactive-page .diner-experience { width: 100%; }
  .interactive-page .diner-experience__intro { display: block; }
  .interactive-page .diner-homepage-link { margin-top: 10px; }
  .retro-footer__inner { display: block; }
  .retro-footer__legal { margin-top: 12px; text-align: left;}
  .retro-footer__copyright,
  .retro-footer__meta-link { display: block; width: fit-content; max-width: 100%; margin-bottom: 2px; }
  .retro-footer__separator { display: none; }
}