/*
Theme Name: Twilight Magic Cafe
Theme URI: https://twilight-magic-cafe.com/
Author: Twilight Magic Cafe
Description: A cozy 90s food-court popup theme for Twilight Magic Cafe.
Version: 1.0.0
Text Domain: twilight-magic-cafe
*/

:root {
  --web-blue: #080c59;
  --web-blue-dark: #02042d;
  --web-purple: #541080;
  --web-pink: #f01f82;
  --web-cyan: #24e6e7;
  --web-yellow: #fff000;
  --web-orange: #ff7228;
  --paper: #fffbe7;
  --ink: #10103e;
  --line: #17175d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--web-blue-dark); }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--web-blue-dark);
  background-image:
    radial-gradient(circle, rgba(255,255,255,.72) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(36,230,231,.62) 0 1px, transparent 1.5px),
    linear-gradient(135deg, #02042d, #10136d 45%, #03052e);
  background-position: 14px 20px, 53px 71px, 0 0;
  background-size: 81px 69px, 113px 101px, 100% 100%;
  font-family: Arial, Helvetica, sans-serif;
}
a { color: #0606b6; }
a:hover, a:focus-visible { color: var(--web-pink); }
img { max-width: 100%; }

.legacy-page { min-height: 100vh; padding: 16px 8px 40px; }
.legacy-site {
  width: min(960px, 100%);
  margin: 0 auto;
  background: var(--paper);
  border: 4px ridge #b9e8eb;
  box-shadow: 0 0 0 2px var(--web-cyan), 12px 12px 0 #00001e;
}
.legacy-header { padding: 7px; background: var(--web-blue-dark); }
.browser-strip {
  padding: 4px 7px;
  background: #c7c7c7;
  border: 2px outset #fff;
  color: #111;
  font: 700 10px/1.1 "Courier New", monospace;
  letter-spacing: .04em;
}
.browser-right { float: right; }
.brand-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 170px;
  padding: 15px 22px;
  background-color: #11136c;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px), linear-gradient(100deg, #06064a, #6b0a84 50%, #070b5d);
  background-position: 7px 9px, 0 0;
  background-size: 57px 53px, 100% 100%;
  border: 4px inset #a4f8ee;
}
.legacy-logo { display: block; width: min(360px, 55%); filter: drop-shadow(4px 4px 0 #000); }
.legacy-logo img { display: block; width: 100%; }
.ascii-copy { flex: 0 1 300px; min-width: 0; max-width: 300px; overflow: hidden; color: #fff; text-align: center; text-shadow: 3px 3px 0 #000; }
.ascii-copy strong { display: block; color: var(--web-yellow); font: 900 clamp(17px, 2.3vw, 26px)/1 Impact, "Arial Black", sans-serif; letter-spacing: -.03em; overflow-wrap: anywhere; }
.ascii-copy span { display: block; margin-top: 17px; color: var(--web-cyan); font: 700 11px/1.25 "Courier New", monospace; }
.marquee-bar { position: relative; overflow: hidden; height: 22px; margin-top: 7px; color: var(--web-yellow); background: #000; border: 2px inset #fff; font: 900 11px/18px "Courier New", monospace; white-space: nowrap; }
.marquee-bar span { display: inline-block; padding-left: 100%; animation: legacy-marquee 18s linear infinite; }
@keyframes legacy-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.legacy-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr); align-items: stretch; }
.legacy-sidebar { padding: 10px 8px 18px; background: #15135f; border-right: 4px groove #b4ffff; }
.side-panel, .counter-panel { margin-bottom: 14px; padding: 6px; border: 3px ridge #e8ffff; background: #f4f1d7; }
.side-panel h2 { margin: -2px -2px 8px; padding: 5px 4px; color: #fff; background: #e71978; border: 2px outset #ffb2da; font: 900 12px/1 Arial, sans-serif; text-align: center; }
.side-link { position: relative; display: block; margin: 5px 0; padding: 8px 4px; color: #fff; background: #241688; border: 3px outset #767bff; font: 900 11px/1 Arial, sans-serif; text-decoration: none; }
.side-link:hover, .side-link:focus-visible { color: #111; background: var(--web-yellow); }
.side-link span { margin-right: 4px; color: var(--web-cyan); }
.side-link b { position: absolute; top: -7px; right: -5px; padding: 2px 3px; color: #fff; background: #f01875; border: 1px solid #fff; font: 900 7px/1 Arial, sans-serif; }
.status-panel p { margin: 6px 2px; font: 700 10px/1.3 "Courier New", monospace; }
.status-panel strong { display: block; margin: 7px 2px 3px; color: #e31974; font: 900 15px/1 Arial, sans-serif; }
.blink-dot { color: #f01576; animation: legacy-blink 1s step-end infinite; }
@keyframes legacy-blink { 50% { opacity: 0; } }
.link-panel a { display: block; margin: 6px 3px; font-size: 11px; font-weight: 700; }
.counter-panel { color: #fff; background: #000; border-color: var(--web-yellow); text-align: center; }
.counter-panel span, .counter-panel small { display: block; font: 700 8px/1.3 "Courier New", monospace; }
.counter-panel strong { display: block; margin: 7px 0; color: var(--web-yellow); font: 900 22px/1 "Courier New", monospace; letter-spacing: .06em; }
.construction-badge { overflow: hidden; padding: 8px 3px; color: #000; background: var(--web-yellow); border: 4px double #000; text-align: center; transform: rotate(-3deg); }
.construction-badge span, .construction-badge strong { display: block; }
.construction-badge span { font: 900 10px/1 "Courier New", monospace; }
.construction-badge strong { margin: 4px 0; font: 900 14px/.95 Impact, "Arial Black", sans-serif; letter-spacing: -.04em; white-space: nowrap; }

.legacy-main { min-width: 0; padding: 13px; background: var(--paper); }
.welcome-window { margin-bottom: 17px; border: 4px ridge #8acdd3; background: #110e67; box-shadow: 5px 5px 0 #230a42; }
.window-titlebar { display: flex; justify-content: space-between; padding: 4px 7px; color: #111; background: #c7c7c7; border-bottom: 3px outset #fff; font: 900 10px/1 "Courier New", monospace; }
.welcome-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .72fr); gap: 14px; align-items: center; padding: 19px; background-image: radial-gradient(circle, rgba(255,255,255,.2) 0 1px, transparent 1.5px), linear-gradient(145deg, #11157a, #3a0d74 45%, #0b256b); background-size: 19px 19px, 100% 100%; }
.welcome-copy { position: relative; color: #fff; }
.new-badge { display: inline-block; padding: 4px 6px; color: #fff; background: #ed1a77; border: 2px solid #fff; font: 900 10px/1 Arial, sans-serif; transform: rotate(-4deg); }
.blink-line { margin: 16px 0 6px; color: var(--web-cyan); font: 900 10px/1 "Courier New", monospace; letter-spacing: .06em; animation: legacy-blink 1.3s step-end infinite; }
.welcome-copy h1 { margin: 0 0 17px; color: #fff; font: 900 clamp(43px, 7vw, 78px)/.8 Impact, "Arial Black", sans-serif; letter-spacing: .01em; text-transform: uppercase; text-shadow: 4px 4px 0 #000, 7px 7px 0 var(--web-pink); }
.welcome-copy h1 span { color: var(--web-yellow); }
.welcome-lede { max-width: 430px; margin-bottom: 19px; color: #fff; font-size: 14px; line-height: 1.4; }
.retro-slogan { margin: -7px 0 17px; color: var(--web-yellow); font: 900 12px/1 "Courier New", monospace; text-decoration: underline; }
.legacy-button { display: inline-block; padding: 10px 12px; color: #000; background: var(--web-yellow); border: 4px outset #ffffb9; font: 900 11px/1 Arial, sans-serif; text-decoration: none; }
.legacy-button:hover, .legacy-button:focus-visible { color: #fff; background: var(--web-pink); }
.big-button { margin-top: 12px; color: #fff; background: #11136c; border-color: #8af8ef; }
.welcome-art { position: relative; min-height: 250px; overflow: hidden; background: #06114c; border: 3px inset #b4ffff; }
.welcome-art.has-image::before { display: none; }
.hero-art-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 12px; object-fit: contain; }
.welcome-art::before { content: ""; position: absolute; inset: 12%; border: 2px dotted var(--web-cyan); border-radius: 50%; transform: rotate(-18deg); }
.pixel-moon { position: absolute; top: 22px; right: 26px; display: grid; place-items: center; width: 58px; height: 58px; color: #0f0d62; background: var(--web-yellow); border: 4px solid #fff; border-radius: 50%; font: 900 19px/1 Impact, sans-serif; }
.pixel-basket { position: absolute; left: 13%; right: 10%; bottom: 20%; height: 90px; background: repeating-linear-gradient(0deg, #ffad30 0 10px, #e85c24 11px 17px); border: 5px solid #fff; transform: rotate(-8deg); box-shadow: 8px 8px 0 #000; }
.pixel-basket::before { content: ""; position: absolute; inset: 17px 15px; border: 3px dashed #541080; }
.pixel-basket i { position: absolute; top: -28px; width: 55px; height: 28px; background: #ffbd3a; border: 3px solid #fff; border-radius: 50% 50% 10% 10%; }
.pixel-basket i:nth-child(1) { left: 8%; transform: rotate(18deg); }.pixel-basket i:nth-child(2) { left: 30%; transform: rotate(-9deg); }.pixel-basket i:nth-child(3) { right: 30%; transform: rotate(9deg); }.pixel-basket i:nth-child(4) { right: 5%; transform: rotate(-18deg); }
.welcome-art small { position: absolute; bottom: 10px; left: 0; right: 0; color: var(--web-cyan); font: 700 8px/1 "Courier New", monospace; text-align: center; }
.orbit { position: absolute; color: var(--web-pink); font-size: 28px; }.orbit-one { top: 22%; left: 10%; }.orbit-two { right: 9%; bottom: 36%; color: var(--web-cyan); font-size: 36px; }

.legacy-section { margin-bottom: 17px; padding: 11px; border: 3px ridge #9ed8d8; background: #fffef0; }
.legacy-section-title { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: -2px -2px 11px; padding: 7px 8px; color: #fff; background: #151269; border: 3px outset #8991ec; }
.legacy-section-title h2 { margin: 0; font: 900 clamp(18px, 3vw, 27px)/1 Impact, "Arial Black", sans-serif; letter-spacing: .02em; text-shadow: 2px 2px 0 #000; }
.legacy-section-title h2 span { color: var(--web-yellow); }
.section-note { color: var(--web-cyan); font: 700 9px/1 "Courier New", monospace; text-align: right; }
.intro-copy { margin: 0 2px 12px; font: 12px/1.45 "Courier New", monospace; }
.event-table-wrap { padding: 9px; background: #d9f7f2; border: 4px double #18155d; }
.event-table, .legacy-table { width: 100%; border-collapse: collapse; }
.event-table th, .event-table td { padding: 7px 8px; border: 1px solid #777; font-size: 12px; line-height: 1.3; text-align: left; vertical-align: top; }
.event-table th { width: 26%; color: #fff; background: #3c1a80; font: 900 10px/1 "Courier New", monospace; }
.event-table td strong { color: #d51770; font-size: 18px; }
.old-note { margin: 10px 1px 0; color: #5d5d86; font: 10px/1.3 "Courier New", monospace; }
.photos-section { background: #e5ffff; }
.fake-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fake-photo-card { padding: 6px; background: #fff; border: 4px ridge #d7d7d7; box-shadow: 3px 3px 0 #29145b; }
.fake-photo { position: relative; height: 153px; overflow: hidden; border: 3px inset #fff; }
.fake-photo::after { content: ""; position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 7px 7px; }
.fake-photo span { position: absolute; z-index: 1; top: 10px; left: 12px; color: #fff; font: 900 18px/1 Impact, sans-serif; text-shadow: 2px 2px 0 #000; }
.fake-photo-basket { background: linear-gradient(140deg, #ee4632 0 32%, #ffcb30 32% 47%, #24105f 47%); }
.fake-photo-basket::before { content: ""; position: absolute; left: 20%; top: 36%; width: 62%; height: 35%; background: repeating-linear-gradient(160deg, #ffcf4a 0 13px, #e97628 14px 21px); border: 4px solid #fff; transform: rotate(-7deg); }
.fake-photo-sauce { background: linear-gradient(135deg, #f5d341, #db4d9a 48%, #16146b); }
.fake-photo-sauce::before { content: ""; position: absolute; left: 20%; top: 32%; width: 55px; height: 55px; border: 7px solid #fff; border-radius: 50%; background: #ef6b2b; box-shadow: 57px 20px 0 -5px #20c7c9, 30px 43px 0 -7px #541080; }
.fake-photo-counter { background: repeating-linear-gradient(90deg, #f05237 0 24px, #1c176e 24px 47px); }
.fake-photo-counter::before { content: "POPUP"; position: absolute; left: 13%; top: 35%; padding: 14px 20px; color: #fff; background: #ec1d78; border: 4px solid #fff; font: 900 22px/1 Impact, sans-serif; transform: rotate(-6deg); }
.fake-photo-card b { display: block; margin: 7px 3px 0; color: #1e1465; font: 900 14px/1 Impact, "Arial Black", sans-serif; text-transform: uppercase; }
.fake-photo-card small { display: block; margin: 5px 3px 1px; color: #bd1a70; font: 700 9px/1 "Courier New", monospace; text-decoration: underline; }

.menu-section { background: #fffbdc; }
.menu-price-row { display: flex; gap: 9px; margin: 12px 0; }
.menu-price-row div { flex: 1; padding: 8px; color: #fff; background: #1e1774; border: 3px outset #86f9ef; text-align: center; }
.menu-price-row b { display: block; font: 900 10px/1 "Courier New", monospace; }
.menu-price-row strong { display: block; margin-top: 5px; color: var(--web-yellow); font: 900 25px/1 Impact, sans-serif; }
.menu-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-box { padding: 7px; background: #effffc; border: 3px ridge #536ab4; }
.menu-box h3 { margin: -1px -1px 7px; padding: 6px; color: #fff; background: #e41979; border: 2px outset #ffa0ce; font: 900 15px/1 Impact, sans-serif; letter-spacing: .04em; }
.legacy-table th, .legacy-table td { padding: 7px 5px; border-bottom: 1px dotted #555; font-size: 11px; line-height: 1.25; text-align: left; vertical-align: top; }
.legacy-table th { width: 80%; font-weight: 900; }
.legacy-table td { color: #c61670; font: 900 17px/1 Impact, sans-serif; text-align: right; white-space: nowrap; }
.legacy-table th em, .legacy-table th small { display: block; font: normal 9px/1.3 Arial, sans-serif; }
.legacy-table th em { margin-top: 4px; color: #4a4a72; }
.legacy-table th small { margin-top: 3px; color: #e21b79; font: 700 8px/1 "Courier New", monospace; text-transform: uppercase; }
.item-star { color: #ed1b7d; }
.extra-line { margin: 9px 3px 1px; color: #d11773; font: 900 10px/1 "Courier New", monospace; }
.extra-line b { font-size: 16px; }

.cakelet-section { background: #fff; }
.cakelet-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cakelet-entry { display: grid; grid-template-columns: 42px 1fr; gap: 8px; min-width: 0; padding: 8px; background: #fcf9d3; border: 2px solid #27307f; }
.cakelet-number { display: grid; place-items: center; align-self: start; height: 40px; color: #fff; background: #261677; border: 2px outset #aafafa; font: 900 16px/1 "Courier New", monospace; }
.cakelet-entry h3 { margin: 0 0 3px; color: #29116b; font: 900 15px/1 Impact, "Arial Black", sans-serif; text-transform: uppercase; overflow-wrap: anywhere; }
.cakelet-entry span { color: #dd176f; font: 700 9px/1 "Courier New", monospace; text-transform: uppercase; }
.cakelet-entry p { margin: 7px 0 0; font-size: 10px; line-height: 1.3; }
.about-section { background: #e1f9f2; }
.about-section > h2 { margin: 5px 2px 7px; color: #251067; font: 900 27px/1 Impact, "Arial Black", sans-serif; text-shadow: 2px 2px 0 var(--web-yellow); }
.about-section > p { max-width: 650px; margin: 0 2px 14px; font: 12px/1.5 Arial, sans-serif; }
.webring-row { display: flex; justify-content: space-between; gap: 8px; padding-top: 9px; border-top: 2px dotted #34345d; font: 700 9px/1 "Courier New", monospace; }
.webring-row span { color: #68688a; }
.legacy-footer { padding: 10px 13px 17px; color: #fff; background: #050633; border-top: 4px ridge #abffff; text-align: center; }
.construction-bar { overflow: hidden; margin-bottom: 11px; padding: 5px; color: #000; background: var(--web-yellow); border: 2px solid #fff; font: 900 10px/1 "Courier New", monospace; }
.legacy-footer p { margin: 6px 0; font: 10px/1.3 "Courier New", monospace; }
.legacy-footer strong, .legacy-footer a { color: var(--web-cyan); }
.legacy-footer small { display: block; margin-top: 14px; color: #aaaadb; font: 9px/1 "Courier New", monospace; }

@media (max-width: 720px) {
  .legacy-page { padding: 5px 3px 25px; }
  .legacy-site { box-shadow: 0 0 0 2px var(--web-cyan), 5px 5px 0 #00001e; }
  .brand-banner { display: block; min-height: 0; padding: 12px 9px 17px; text-align: center; }
  .legacy-logo { width: min(340px, 96%); margin: 0 auto 13px; }
  .ascii-copy { max-width: none; }
  .ascii-copy strong { font-size: 22px; }
  .ascii-copy span { margin-top: 8px; font-size: 9px; }
  .browser-right { display: none; }
  .legacy-layout { display: block; }
  .legacy-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-right: 0; border-bottom: 4px groove #b4ffff; }
  .side-panel, .counter-panel, .construction-badge { margin: 0; }
  .main-menu { grid-row: span 2; }
  .construction-badge { align-self: center; }
  .legacy-main { padding: 8px; }
  .welcome-content { grid-template-columns: 1fr; padding: 13px; }
  .welcome-art { min-height: 215px; }
  .fake-photo-grid, .menu-columns, .cakelet-list { grid-template-columns: 1fr; }
  .fake-photo, .photo-frame { height: 175px; }
  .menu-price-row { gap: 5px; }
  .menu-price-row div { padding: 7px 3px; }
  .menu-price-row b { font-size: 8px; }
  .menu-price-row strong { font-size: 22px; }
}

@media (max-width: 430px) {
  .legacy-sidebar { display: block; }
  .side-panel, .counter-panel, .construction-badge { margin-bottom: 8px; }
  .legacy-section-title { display: block; }
  .section-note { display: block; margin-top: 5px; text-align: left; }
  .event-table th { width: 33%; }
  .webring-row { display: grid; text-align: center; }
}

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

/* Cozy Twilight palette for the web-1.0 layout */
:root {
  --cream: #f8f0dc;
  --paper: #fffaf0;
  --orange: #e98339;
  --orange-deep: #c95e35;
  --burgundy: #633e57;
  --burgundy-deep: #422d3f;
  --plum: #755878;
  --teal: #5f8f8c;
  --teal-deep: #2e6566;
  --gold: #f2bf5d;
  --brown: #4f4039;
  --web-blue: #633e57;
  --web-blue-dark: #422d3f;
  --web-purple: #755878;
  --web-pink: #c95e35;
  --web-cyan: #5f8f8c;
  --web-yellow: #f2bf5d;
  --web-orange: #e98339;
  --ink: #4f4039;
  --line: #633e57;
}

html { background: var(--burgundy-deep); }
body {
  color: var(--brown);
  background-color: var(--burgundy-deep);
  background-image: radial-gradient(rgba(242,191,93,.35) 0 1px, transparent 1.5px), linear-gradient(135deg, #422d3f, #755878 50%, #422d3f);
  background-position: 14px 20px, 0 0;
  background-size: 83px 71px, 100% 100%;
}
a { color: var(--teal-deep); }
a:hover, a:focus-visible { color: var(--orange-deep); }
.legacy-site {
  background: var(--cream);
  border-color: var(--cream);
  box-shadow: 0 0 0 2px var(--teal), 12px 12px 0 #2f2630;
}
.legacy-header { background: var(--burgundy-deep); }
.browser-strip { background: #e6d8ca; border-color: var(--paper); color: var(--brown); }
.brand-banner {
  background-color: var(--burgundy-deep);
  background-image: radial-gradient(circle, rgba(242,191,93,.75) 0 1px, transparent 1.5px), linear-gradient(100deg, var(--burgundy-deep), var(--plum) 50%, var(--burgundy-deep));
}
.ascii-copy { color: var(--cream); text-shadow: 3px 3px 0 var(--burgundy-deep); }
.ascii-copy strong { color: var(--gold); }
.ascii-copy span { color: var(--teal); }
.marquee-bar { color: var(--gold); background: var(--burgundy-deep); border-color: var(--cream); }
.legacy-sidebar { background: var(--burgundy-deep); border-color: var(--teal); }
.side-panel, .counter-panel { background: var(--paper); border-color: var(--cream); }
.side-panel h2 { color: var(--cream); background: var(--burgundy); border-color: var(--orange); }
.side-link { color: var(--cream); background: var(--teal-deep); border-color: var(--teal); }
.side-link:hover, .side-link:focus-visible { color: var(--burgundy-deep); background: var(--gold); }
.side-link span { color: var(--gold); }
.side-link b { color: var(--cream); background: var(--orange-deep); border-color: var(--cream); }
.status-panel strong { color: var(--orange-deep); }
.blink-dot { color: var(--orange); }
.counter-panel { color: var(--cream); background: var(--burgundy-deep); border-color: var(--gold); }
.counter-panel strong { color: var(--gold); }
.construction-badge { color: var(--burgundy-deep); background: var(--gold); border-color: var(--burgundy-deep); }
.legacy-main { background: var(--cream); }
.welcome-window { background: var(--burgundy-deep); border-color: var(--teal); box-shadow: 5px 5px 0 var(--burgundy); }
.window-titlebar { background: #e6d8ca; border-color: var(--cream); color: var(--brown); }
.welcome-content { background-image: radial-gradient(circle, rgba(242,191,93,.23) 0 1px, transparent 1.5px), linear-gradient(145deg, var(--burgundy), var(--plum) 45%, var(--teal-deep)); }
.new-badge { color: var(--cream); background: var(--orange-deep); border-color: var(--gold); }
.blink-line { color: var(--gold); }
.welcome-copy h1 { color: var(--cream); text-shadow: 4px 4px 0 var(--burgundy-deep), 7px 7px 0 var(--orange-deep); }
.welcome-copy h1 span { color: var(--gold); }
.welcome-lede { color: var(--cream); }
.retro-slogan { color: var(--gold); }
.legacy-button { color: var(--burgundy-deep); background: var(--gold); border-color: var(--cream); }
.legacy-button:hover, .legacy-button:focus-visible { color: var(--cream); background: var(--orange-deep); }
.big-button { color: var(--cream); background: var(--burgundy); border-color: var(--teal); }
.welcome-art { background: var(--teal-deep); border-color: var(--cream); }
.welcome-art::before { border-color: var(--gold); }
.pixel-moon { color: var(--burgundy-deep); background: var(--gold); border-color: var(--cream); }
.pixel-basket { background: repeating-linear-gradient(0deg, #d96a2c 0 10px, var(--orange) 11px 17px); border-color: var(--cream); box-shadow: 8px 8px 0 var(--burgundy-deep); }
.pixel-basket::before { border-color: var(--burgundy); }
.pixel-basket i { background: #f4ad45; border-color: var(--cream); }
.welcome-art small { color: var(--gold); }
.orbit { color: var(--orange); }.orbit-two { color: var(--teal); }
.legacy-section { border-color: var(--teal); background: var(--paper); }
.legacy-section-title { color: var(--cream); background: var(--burgundy); border-color: var(--teal); }
.legacy-section-title h2 span { color: var(--gold); }
.section-note { color: var(--gold); }
.intro-copy { color: var(--brown); }
.event-table-wrap { background: #dceae0; border-color: var(--burgundy); }
.event-table th { color: var(--cream); background: var(--burgundy); }
.event-table td strong { color: var(--orange-deep); }
.old-note { color: var(--teal-deep); }
.photos-section { background: #dceae0; }
.fake-photo-card { border-color: var(--paper); box-shadow: 3px 3px 0 var(--burgundy); }
.fake-photo-basket { background: linear-gradient(140deg, var(--orange) 0 32%, var(--gold) 32% 47%, var(--burgundy) 47%); }
.fake-photo-basket::before { background: repeating-linear-gradient(160deg, #ffd477 0 13px, #d96a2c 14px 21px); border-color: var(--paper); }
.fake-photo-sauce { background: linear-gradient(135deg, var(--gold), #d9ae9a 48%, var(--plum)); }
.fake-photo-sauce::before { border-color: var(--paper); background: var(--orange); box-shadow: 57px 20px 0 -5px var(--teal), 30px 43px 0 -7px var(--burgundy); }
.fake-photo-counter { background: repeating-linear-gradient(90deg, var(--orange) 0 24px, var(--burgundy) 24px 47px); }
.fake-photo-counter::before { color: var(--cream); background: var(--orange-deep); border-color: var(--paper); }
.fake-photo-card b { color: var(--burgundy); }.fake-photo-card small { color: var(--orange-deep); }
.menu-section { background: var(--burgundy-deep); }
.menu-section .legacy-section-title { background: var(--burgundy); }
.menu-price-row div { color: var(--cream); background: var(--teal-deep); border-color: var(--cream); }
.menu-price-row strong { color: var(--gold); }
.menu-box { background: #edf3e7; border-color: var(--teal); }
.menu-box h3 { color: var(--cream); background: var(--orange-deep); border-color: var(--gold); }
.legacy-table th { color: var(--brown); }.legacy-table td { color: var(--orange-deep); }
.legacy-table th em { color: var(--teal-deep); }.legacy-table th small { color: var(--orange-deep); }
.item-star, .extra-line { color: var(--orange-deep); }
.cakelet-section { background: var(--paper); }
.cakelet-entry { background: #f4eacb; border-color: var(--burgundy); }
.cakelet-number { color: var(--cream); background: var(--burgundy); border-color: var(--gold); }
.cakelet-entry h3 { color: var(--burgundy); }.cakelet-entry span { color: var(--orange-deep); }
.about-section { background: #dceae0; }
.about-section > h2 { color: var(--burgundy); text-shadow: 2px 2px 0 var(--gold); }
.webring-row { border-color: var(--teal-deep); }.webring-row span { color: var(--teal-deep); }
.legacy-footer { color: var(--cream); background: var(--burgundy-deep); border-color: var(--teal); }
.construction-bar { color: var(--burgundy-deep); background: var(--gold); border-color: var(--cream); }
.legacy-footer strong, .legacy-footer a { color: var(--gold); }
.legacy-footer small { color: #c9b9bb; }

/* Readable Tandy typography */
@font-face {
  font-family: "Tandy Cafe";
  src: url("assets/tandy1k-ii-200l.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

body, body * {
  font-family: "Tandy Cafe", "Courier New", monospace !important;
}

.photo-frame { position: relative; height: 153px; overflow: hidden; border: 3px inset #fff; }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
body { font-size: 16px; line-height: 1.4; }
.legacy-logo { padding: 9px; background: var(--paper); border: 3px ridge var(--cream); }
.ascii-copy strong { font-size: clamp(17px, 2.3vw, 26px); line-height: 1.05; }
.ascii-copy span { font-size: 12px; }
.browser-strip { font-size: 12px; }
.marquee-bar { height: 26px; font-size: 13px; line-height: 22px; }
.side-panel h2 { font-size: 14px; }
.side-link { padding: 10px 5px; font-size: 13px; line-height: 1.15; }
.status-panel p { font-size: 12px; line-height: 1.4; }
.status-panel strong { font-size: 18px; }
.link-panel a { font-size: 13px; }
.counter-panel span, .counter-panel small { font-size: 10px; }
.counter-panel strong { font-size: 26px; }
.construction-badge span { font-size: 11px; }.construction-badge strong { font-size: 14px; }
.welcome-copy h1 { max-width: 100%; font-size: clamp(32px, 4vw, 48px); line-height: .95; overflow-wrap: normal; word-break: normal; }
.blink-line { font-size: 12px; }
.welcome-lede { font-size: 16px; line-height: 1.5; }
.retro-slogan { font-size: 13px; }
.legacy-button { padding: 12px 14px; font-size: 13px; }
.welcome-art small { font-size: 10px; }
.legacy-section-title h2 { font-size: clamp(21px, 3vw, 31px); line-height: 1.15; }
.section-note { font-size: 11px; line-height: 1.25; }
.intro-copy { font-size: 14px; line-height: 1.5; }
.event-table th { font-size: 12px; }.event-table td { font-size: 14px; line-height: 1.45; }
.event-table td strong { font-size: 20px; }
.old-note { font-size: 12px; line-height: 1.4; }
.fake-photo-card b { font-size: 16px; }.fake-photo-card small { font-size: 11px; }
.menu-price-row b { font-size: 12px; }.menu-price-row strong { font-size: 30px; }
.menu-box h3 { font-size: 17px; }
.legacy-table th, .legacy-table td { font-size: 13px; line-height: 1.35; }
.legacy-table td { font-size: 21px; }
.legacy-table th em { font-size: 11px; line-height: 1.4; }.legacy-table th small { font-size: 10px; }
.extra-line { font-size: 12px; }.extra-line b { font-size: 19px; }
.cakelet-entry h3 { font-size: 17px; line-height: 1.1; }.cakelet-entry span { font-size: 11px; }.cakelet-entry p { font-size: 12px; line-height: 1.45; }
.about-section > h2 { font-size: 31px; line-height: 1.1; }.about-section > p { font-size: 14px; line-height: 1.6; }
.webring-row { font-size: 11px; }.legacy-footer p { font-size: 12px; line-height: 1.45; }.legacy-footer small { font-size: 11px; }