/* =========================================================================
   that's a tasty burger — the corporate site.

   THE ONE RULE, and it governs the copy as much as the design: the joke is
   held the whole way down. This is a burger restaurant's website. It never
   winks, never nudges, never admits to being anything else. Nothing on this
   page says "actually we make games." Straight, dry, and slightly wrong.

   WHY IT LOOKS LIKE 1974 AND NOT LIKE A 2026 SITE ABOUT 1974:
   the first pass had soft shadows, big blurs, glassy gradients and a
   rounded webfont — all modern tells. This one is built the way the decade
   actually printed:
     · FLAT COLOUR. No blur, no soft drop shadow. Depth is a hard offset
       block shadow, the way a print shop faked it.
     · THICK DARK OUTLINES. 3px of chocolate brown around everything.
     · FOUR-BAND RULES. Orange / gold / avocado / brown, everywhere a
       divider is needed.
     · HALFTONE. A dot screen over the flat panels so they read as printed
       stock rather than as CSS.
     · TYPE THAT MATCHES THE ARTWORK. Rammetto One for display, Roboto
       Condensed for everything else. Helvetica was period-correct for a
       menu board but sat wrong beside the printed glasses; the display
       face now matches the lettering on them.
     · THE MARK EVERYWHERE. The burger is the logo, so it is used as one:
       in the sign, on both ends of the board header, ghosted behind the
       menu, on every section heading, and in the footer.
   ========================================================================= */

:root{
  /* the game's own inks — the beige is lifted off its boot card */
  --beige:    #E6D7B8;
  --cream:    #F4E7C8;
  --cream-hi: #FBF2DC;
  --brown:    #3B2314;
  --brown-2:  #6B4A2B;
  --tan:      #B0844F;
  --muted:    #8A6A45;
  --orange:   #DB5B18;
  --orange-d: #B5460F;
  --gold:     #EDA412;
  --avocado:  #7E8A2E;
  --brick:    #A83E22;

  /* THE TWO FONTS — Cooper Black and Helvetica, the actual 1970s pairing.
     Swapping either is this block plus the Google Fonts <link> in
     index.html; nothing else in this file names a family.

     COOPER BLACK IS LICENSED (Monotype) and is not on Google Fonts, so it
     cannot be served from here. The stack asks for it first, so anyone who
     has it installed — and the live site, the day a webfont licence is in
     place — gets the real thing. Everyone else gets Alfa Slab One, the
     closest heavy serif that is free to serve. To switch the site to real
     Cooper Black: add the licensed @font-face (or the Adobe Fonts embed) and
     nothing below changes.

     HELVETICA needs no webfont: macOS and iOS ship it, and Arial stands in
     everywhere else. Which is also what the menu boards were set in. */
  --display: 'Cooper Black', 'Cooper Std Black', 'CooperBlack',
             'Alfa Slab One', Georgia, serif;
  --body: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;

  --line: 3px solid var(--brown);
  --block: 6px 6px 0 var(--brown);   /* the hard print-shop shadow */
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--beige);
  color:var(--brown);
  font:400 16px/1.55 var(--body);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:var(--orange-d)}

/* The dot screen — what makes the flat panels read as printed stock rather
   than as CSS. Sits above the panel's background and below its content
   (.panel > * is raised to z-index 1). */
.ingredients::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(59,35,20,.17) 1px, transparent 1.3px);
  background-size:5px 5px;
}
.ingredients{position:relative}
.ingredients > *{position:relative;z-index:1}

/* ============================ THE BANDS ============================== */
/* The four-band rule. Orange, gold, avocado, brown. */

.bands{
  height:14px;
  background:linear-gradient(
    var(--orange)   0 25%,
    var(--gold)     25% 50%,
    var(--avocado)  50% 75%,
    var(--brown)    75% 100%);
}
.bands-thin{height:9px}

/* ============================== THE SIGN ============================== */

.sign{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:9px 22px;
  background:var(--brown);
  border-bottom:3px solid #241207;
}

.sign-mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.sign-mark img{width:44px;height:44px;flex:none}
/* The name is ONE string, and it is lowercase. Not a "THAT'S A" kicker over
   a "tasty burger" wordmark, and never uppercased by text-transform. */
.sign-name{
  font-family:var(--display);font-size:clamp(17px,2.2vw,24px);white-space:nowrap;
  letter-spacing:.005em;line-height:1;color:var(--cream-hi);
  text-transform:lowercase;
}

.sign-nav{display:flex;gap:4px;flex-wrap:wrap}
.sign-nav a{
  padding:7px 12px;
  font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#E4CFA8;text-decoration:none;
}
.sign-nav a:hover,.sign-nav a:focus-visible{background:var(--orange);color:#fff}

/* ============================== THE BOARD ============================= */
/* The board is a photograph now — the whole lit sign, both panels — so all
   this has to do is frame it. The frame is the 1970s print convention: a
   generous cream mat, a single dark pin line ruled inside it with air on
   both sides, and one hard offset block shadow. No blur, no rounded corners,
   no soft edges; those are the modern tells this site keeps out. */

.board-wrap{max-width:1120px;margin:0 auto;padding:38px 22px 10px}

.board-shot{
  margin:0;
  padding:20px;                    /* the mat */
  background:var(--cream-hi);
  border:var(--line);
  box-shadow:var(--block);
}
.board-shot-mat{
  padding:9px;                     /* the air inside the pin line */
  border:1px solid rgba(59,35,20,.55);   /* the pin line */
}
.board-shot img{width:100%;height:auto}

/* ============================== BUTTONS ============================== */
/* A pressed block, not a soft pill: hard offset shadow, no blur, and the
   block travels under the button when it is pushed. */

.btn{
  display:inline-block;padding:12px 22px;
  background:var(--orange);color:#fff;text-decoration:none;
  border:var(--line);box-shadow:4px 4px 0 var(--brown);
  font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
}
.btn:hover{background:var(--orange-d)}
.btn:active{translate:4px 4px;box-shadow:0 0 0 var(--brown)}
.btn-big{padding:16px 32px;font-size:14.5px}

/* ============================== THE STRIPS =========================== */

.strip{padding:60px 22px}
.strip-alt{background:var(--cream)}

.wrap{max-width:1120px;margin:0 auto}
.wrap-narrow{max-width:800px}

.head{
  display:flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:400;
  font-size:clamp(26px,4.4vw,40px);line-height:1.05;margin:0 0 8px;
  color:var(--brown);
}
.head-mark{width:clamp(30px,4.4vw,42px);height:auto;flex:none}
.dek{margin:0 0 30px;font-size:16px;font-weight:700;color:var(--brown-2);
  max-width:60ch}

/* Off-screen but present: the menu still has to be readable by a search
   engine, a screen reader, and anyone who blocks images. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* =========================== THE SPECIAL SAUCE ======================= */

.sauce{display:grid;grid-template-columns:270px 1fr;gap:30px;align-items:start}

.ingredients{
  padding:20px 22px;background:var(--cream-hi);
  border:var(--line);box-shadow:var(--block);
}
.ingredients h3{
  margin:0 0 12px;padding-bottom:10px;border-bottom:var(--line);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--brown);
}
.ingredients ul{margin:0;padding:0;list-style:none;
  columns:2;column-gap:18px}
.ingredients li{
  padding:5px 0;font-size:14px;font-weight:700;color:#4A3018;
  border-bottom:1px solid rgba(59,35,20,.16);
  break-inside:avoid;
}

.sauce-copy p{margin:0 0 16px;color:#4A3018}
.sauce-copy p:last-child{margin-bottom:0}

/* ============================= THE LOCATIONS ========================= */

.locations{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.loc h3{
  margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--brown);
  font-family:var(--display);font-weight:400;font-size:15px;color:var(--brown);
}
.loc p{margin:0;font-size:15px;color:#4A3018}
.loc-addr{line-height:1.7;font-weight:700}

.hours{border-collapse:collapse;width:100%;font-size:14px}
.hours th{
  text-align:left;padding:5px 12px 5px 0;white-space:nowrap;vertical-align:top;
  font-weight:700;color:var(--brown-2);
}
.hours td{padding:5px 0;color:#4A3018}

/* ============================ THE COMPLAINTS ========================= */

.complaints{text-align:center;padding:6px 0}
.complaints-fine{
  max-width:46ch;margin:20px auto 0;font-size:14px;
  line-height:1.55;color:var(--brown-2);
}

/* =============================== THE FOOTER ========================== */

.foot{padding:46px 22px 40px;text-align:center;background:var(--brown)}
.foot-mark{width:58px;height:58px;margin:0 auto 12px}
.foot-name{
  margin:0 0 16px;font-family:var(--display);font-weight:400;font-size:19px;
  color:var(--cream-hi);
}
.foot-links{margin:0 0 18px;font-size:12.5px;font-weight:700;color:var(--tan)}
.foot-links a{color:var(--gold);text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot-links span{margin:0 9px;opacity:.5}
.foot-company{
  margin:0;font-weight:700;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:#9A7A53;
}

/* ============================== NARROWER ============================= */

@media (max-width:900px){
  .sauce{grid-template-columns:1fr}
  .locations{grid-template-columns:1fr}
  }

/* The two lit panels are the whole idea, so they stay side by side down to a
   genuinely narrow window — tightening their padding and type on the way —
   and only stack when there is really no room for two. */
@media (max-width:900px){
}

@media (max-width:680px){
}

@media (max-width:820px){
  /* The nav will not sit beside the wordmark much under 820px — left to wrap
     it breaks the name over two lines and stacks the links into a sticky wall.
     Mark and name on one line, nav on the next, scrolling sideways rather
     than stacking. */
  html{scroll-padding-top:104px}
  .sign{flex-direction:column;align-items:stretch;gap:7px;padding:8px 10px 9px}
  .sign-mark{justify-content:center}
  .sign-nav{flex-wrap:nowrap;justify-content:flex-start;gap:0;
    overflow-x:auto;scrollbar-width:none}
  .sign-nav::-webkit-scrollbar{display:none}
  .sign-nav a{padding:5px 9px;font-size:10.5px;letter-spacing:.07em;
    white-space:nowrap}

    .ingredients ul{columns:2}
  .strip{padding:44px 18px}
}