/* ==========================================================================
   closingshiftguide.wiki — 1974 family restaurant, still running, on VHS.
   Palette + type sampled from the official Roblox screenshots (see DESIGN-BRIEF.md).
   ========================================================================== */

@font-face{font-family:'Alfa Slab One';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/alfa-slab-one-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/vt323-400.woff2) format('woff2')}

:root{
  --void:#050302; --night:#0d0806; --panel:#1a1210; --panel-2:#2a1d15;
  --line:#46311f; --line-soft:#2c1d14;
  --ink:#ecdfc4; --ink-dim:#bfa985;
  --amber:#c75e11; --amber-hi:#e8894a; --red:#a3130a; --cam:#a9aeaa;
  --cream:#e8dcc0; --cream-ink:#22160c;
  --maxw:1180px;
  --slab:'Alfa Slab One',Georgia,'Times New Roman',serif;
  --mono:'VT323','Courier New',monospace;
  --sans:'Barlow','Segoe UI',system-ui,sans-serif;
  --hard:6px 6px 0 var(--void);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:
    radial-gradient(900px 420px at 12% -6%,rgba(199,94,17,.10),transparent 68%),
    radial-gradient(720px 360px at 88% 4%,rgba(163,19,10,.07),transparent 70%),
    linear-gradient(180deg,#0d0806 0%,#0a0605 42%,#080403 100%);
  background-color:var(--night);
  color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.68;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber-hi);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
strong,b{color:#fff6e2}
code{font-family:var(--mono);font-size:1.06em;background:#000;color:var(--amber-hi);padding:1px 5px;border:1px solid var(--line-soft)}
::selection{background:var(--amber);color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--cream);color:var(--cream-ink);padding:8px 12px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- ribbon (VHS status line) ---------- */
.ribbon{
  background:#000;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:14px;letter-spacing:.09em;color:var(--cam);
  text-transform:uppercase;
}
.ribbon .wrap{padding:5px 24px;display:flex;gap:14px;align-items:center;white-space:nowrap;overflow:hidden}
.ribbon .wrap::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);flex:0 0 auto}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(10,6,4,.98),rgba(13,8,6,.94));
  border-bottom:2px solid var(--line);
}
.topbar::after{
  /* squashed checkerboard floor from the dining-room frame */
  content:"";display:block;height:6px;pointer-events:none;
  background-image:
    linear-gradient(90deg,var(--line-soft) 50%,transparent 50%),
    linear-gradient(0deg,var(--line-soft) 50%,transparent 50%);
  background-size:12px 12px;background-position:0 0;
  opacity:.85;
}
.bar{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--slab);font-size:20px;line-height:1.1;letter-spacing:.01em}
.brand:hover{color:var(--amber-hi);text-decoration:none}
.brand img{border:2px solid var(--line);border-radius:3px}
.brand span{max-width:15ch}

.nav{display:flex;align-items:center;gap:18px;margin-left:auto;flex-wrap:wrap}
.nav>ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
.nav li{position:relative;list-style:none}
.nav a{display:block;color:var(--ink-dim);font-size:15px;font-weight:600;padding:9px 10px;letter-spacing:.01em}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav li.active>a{color:var(--amber-hi)}
.nav li.active>a::before{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;background:var(--amber);pointer-events:none}
.caret{font-style:normal;font-size:11px;margin-left:5px;display:inline-block;transition:transform .16s}
.nav li.has-kids:hover>.caret,.nav li.has-kids:focus-within>.caret{transform:rotate(180deg)}

/* dropdown: panel sits flush (no hover gap) + z-index above the header band */
.nav .kids{
  display:none;position:absolute;top:100%;left:0;min-width:252px;z-index:41;
  background:var(--panel);border:2px solid var(--line);border-radius:0 0 4px 4px;
  box-shadow:var(--hard);padding:6px 0;margin:0;
}
.nav .has-kids:hover .kids,.nav .has-kids:focus-within .kids{display:block}
.nav .kids a{padding:8px 14px;font-size:14px;font-weight:400;color:var(--ink-dim);border-left:3px solid transparent}
.nav .kids a:hover{background:var(--panel-2);border-left-color:var(--amber);color:var(--ink)}
.nav a.cta{
  background:#a94f0c;color:#fffdf7;font-weight:600;border:2px solid #000;
  border-radius:3px;padding:8px 14px;box-shadow:3px 3px 0 #000;
}
.nav a.cta:hover{background:var(--amber-hi);color:#1a0d05}

/* ---------- hero: copy + CRT monitor ---------- */
.hero{position:relative;padding:44px 0 34px;border-bottom:2px solid var(--line)}
.hero-in{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:40px;align-items:center}
.hero-copy .eyebrow{
  font-family:var(--mono);font-size:15px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-hi);margin:0 0 12px;
}
.hero h1{
  font-family:var(--slab);font-size:clamp(38px,5.4vw,68px);line-height:.98;margin:0 0 16px;
  color:var(--ink);text-shadow:4px 4px 0 #000;letter-spacing:.005em;
}
.hero h1 .thin{display:block;color:var(--amber-hi);font-size:.52em;letter-spacing:.02em;margin-top:8px}
.lead{font-size:18px;color:var(--ink-dim);margin:0 0 20px;max-width:46ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.btn{
  display:inline-block;background:#a94f0c;color:#fffdf7;font-weight:600;
  padding:11px 18px;border:2px solid #000;border-radius:3px;box-shadow:4px 4px 0 #000;
}
.btn:hover{background:var(--amber-hi);color:#1a0d05;text-decoration:none;transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--panel);color:var(--amber-hi)}

.crt{margin:0;background:var(--panel);border:3px solid var(--line);border-radius:6px;box-shadow:var(--hard);overflow:hidden}
.crt-bar{
  display:flex;align-items:center;gap:12px;padding:6px 12px;background:#000;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:14px;letter-spacing:.08em;
}
.crt-bar .rec{color:#ff6b52}
.crt-bar .cam{color:var(--amber-hi)}
.crt-bar .tc{margin-left:auto;color:var(--cam)}
.crt-well{position:relative;line-height:0;background:#000}
.crt-well img{width:100%;height:auto;aspect-ratio:768/432}
.crt-well::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.30) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}
.cx{position:absolute;width:20px;height:20px;pointer-events:none;z-index:2}
.cx::before,.cx::after{content:"";position:absolute;background:rgba(236,223,196,.66)}
.cx::before{left:50%;top:0;width:1px;height:100%}
.cx::after{top:50%;left:0;height:1px;width:100%}
.cx.tl{left:10px;top:10px}.cx.tr{right:10px;top:10px}.cx.bl{left:10px;bottom:10px}.cx.br{right:10px;bottom:10px}
.crt figcaption{
  font-family:var(--mono);font-size:13px;color:var(--cam);padding:6px 12px;
  background:#000;border-top:1px solid var(--line);letter-spacing:.05em;
}

/* ---------- facts strip ---------- */
.facts-strip{background:#000;border-bottom:2px solid var(--line)}
.facts{display:flex;flex-wrap:wrap;gap:0}
.fact{flex:1 1 150px;padding:14px 18px;border-left:1px solid var(--line-soft)}
.fact:first-child{border-left:0;padding-left:0}
.fact-k{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--cam)}
.fact-v{display:block;font-family:var(--slab);font-size:21px;color:var(--amber-hi);margin-top:2px}

/* ---------- section heads (menu plates) ---------- */
.section-head{display:flex;flex-direction:column;gap:4px;margin:38px 0 18px}
.overline{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--cam)}
.section-head h2,.all-guides h2{
  font-family:var(--slab);font-size:clamp(24px,2.6vw,32px);margin:0;color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
}
.count-pill{
  font-family:var(--mono);font-size:15px;background:var(--amber);color:#1a0d05;
  border:2px solid #000;padding:0 7px;line-height:1.5;transform:rotate(-2deg);display:inline-block;
}

/* ---------- cards ---------- */
.grid{display:flex;flex-wrap:wrap;gap:20px;margin:0 0 30px}
.grid[data-n="2"]>.card{flex:1 1 340px}
.grid[data-n="3"]>.card{flex:1 1 300px}
.card{
  flex:1 1 260px;min-width:0;display:flex;flex-direction:column;
  background:var(--panel);border:2px solid var(--line);border-radius:4px;
  box-shadow:var(--hard);color:inherit;overflow:hidden;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.card:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--void);border-color:var(--amber);text-decoration:none}
.thumb{position:relative;display:block;line-height:0;background:#000;border-bottom:2px solid var(--line)}
.thumb img{width:100%;height:auto;aspect-ratio:768/432}
.thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,3,2,.10) 0%,rgba(5,3,2,.52) 100%);
}
.pill-tag{
  position:absolute;left:10px;top:10px;z-index:2;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;background:#000;color:var(--amber-hi);
  border:1px solid var(--line);padding:0 6px;
}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-body h3{font-family:var(--slab);font-size:19px;line-height:1.2;margin:0;color:var(--ink);font-weight:400}
.card-body p{margin:0;font-size:14.5px;color:var(--ink-dim);line-height:1.5}
.card .go{margin-top:auto;font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--amber-hi);text-transform:uppercase}
.card .stamp{font-family:var(--mono);font-size:12px;color:var(--cam);letter-spacing:.06em}

/* ---------- home prose ---------- */
.home-prose{margin:0 0 28px}
.home-prose p,.home-prose ul,.home-prose ol{max-width:74ch}
.home-prose h2{
  font-family:var(--slab);font-size:clamp(21px,2.2vw,27px);color:var(--ink);
  margin:30px 0 12px;padding-left:12px;border-left:5px solid var(--amber);line-height:1.2;
}
.home-prose h3{font-size:18px;color:var(--amber-hi);margin:20px 0 8px;letter-spacing:.01em}
.home-prose li{margin:5px 0}
.home-prose blockquote{
  margin:16px 0;padding:12px 16px;background:#000;border-left:4px solid var(--amber);
  font-family:var(--mono);font-size:17px;color:var(--ink);line-height:1.5;
}
.home-prose img{margin:14px 0;border:2px solid var(--line);border-radius:4px;box-shadow:var(--hard)}

/* ---------- article ---------- */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:34px;margin:26px auto 46px;align-items:start}
.article-grid>div{min-width:0}
.crumb{font-family:var(--mono);font-size:14px;letter-spacing:.05em;color:var(--ink-dim);margin-bottom:10px}
.crumb a{color:var(--ink-dim)}
.crumb a:hover{color:var(--amber-hi)}
.crumb .sep{color:var(--ink-dim);opacity:.7;margin:0 5px}
.crumb .here{color:var(--ink)}
article{background:var(--panel);border:2px solid var(--line);border-radius:4px;box-shadow:var(--hard);padding:26px 30px 30px}
article h1{
  font-family:var(--slab);font-size:clamp(27px,3.4vw,40px);line-height:1.08;margin:0 0 10px;
  color:var(--ink);text-shadow:3px 3px 0 #000;
}
.art-meta{font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:var(--cam);margin:0 0 18px;text-transform:uppercase}
article h2{
  font-family:var(--slab);font-size:clamp(20px,2.1vw,26px);line-height:1.24;margin:32px 0 12px;
  color:var(--ink);padding-left:12px;border-left:5px solid var(--amber);
}
article h3{font-family:var(--sans);font-weight:600;font-size:18.5px;color:var(--amber-hi);margin:22px 0 8px;letter-spacing:.01em}
article p{margin:0 0 14px;max-width:74ch}
article ul,article ol{margin:0 0 16px;padding-left:22px;max-width:74ch}
article li{margin:6px 0}
article>p:first-of-type{font-size:18.5px;color:#f4ead4}
article img.zoom{width:100%;margin:18px 0;border:2px solid var(--line);border-radius:4px;box-shadow:var(--hard);cursor:zoom-in}
article img.zoom:first-of-type{margin-top:8px}
article strong{color:#fff6e2}
article blockquote{
  margin:18px 0;padding:12px 16px;background:#000;border-left:4px solid var(--amber);
  font-family:var(--mono);font-size:17.5px;color:var(--ink);line-height:1.5;max-width:74ch;
}

/* quick answer plate */
.quick-answer{
  position:relative;margin:0 0 20px;padding:14px 18px 14px;background:var(--panel-2);
  border:2px solid var(--amber);border-radius:4px;max-width:78ch;
}
.qa-stamp{
  display:inline-block;font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;background:var(--amber);color:#1a0d05;padding:0 7px;margin-bottom:4px;
}
.quick-answer p{margin:0;color:var(--ink);font-size:16.5px}

/* tables → cash-register receipt */
.tbl-wrap{overflow-x:auto;margin:18px 0 22px;border:2px solid var(--line);border-radius:4px;background:var(--cream);max-width:100%}
table{border-collapse:collapse;width:100%;font-size:15px;color:var(--cream-ink);background:var(--cream)}
thead th{
  background:#1a1210;color:var(--ink);font-family:var(--mono);font-size:14px;letter-spacing:.11em;
  text-transform:uppercase;text-align:left;padding:9px 12px;border-bottom:2px solid var(--line);font-weight:400;
}
tbody td{padding:9px 12px;border-bottom:1px dashed rgba(34,22,12,.30);vertical-align:top;line-height:1.5}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(34,22,12,.055)}
table strong,table b{color:var(--cream-ink)}
table a{color:#8c2f06;text-decoration:underline;text-underline-offset:2px}
table a:hover{color:#5c1d03}
table code{background:rgba(34,22,12,.10);border-color:rgba(34,22,12,.28);color:#8c2f06}
td:first-child{font-weight:600}

/* callout */
.callout{
  margin:18px 0;padding:14px 18px;background:#000;border:2px solid var(--line);
  border-left:5px solid var(--amber);border-radius:0 4px 4px 0;max-width:78ch;
}
.callout p{margin:0 0 8px}
.callout p:last-child{margin:0}
.callout.note{border-left-color:var(--cam)}
.callout.warn{border-left-color:var(--red)}

/* toc */
.toc{position:sticky;top:82px;background:var(--panel);border:2px solid var(--line);border-radius:4px;padding:14px;box-shadow:var(--hard)}
.toc .overline{display:block;margin-bottom:8px}
.toc-list{display:flex;flex-direction:column;gap:2px}
.toc-list a{
  display:block;font-size:14px;color:var(--ink-dim);padding:5px 8px;border-left:2px solid var(--line-soft);
  line-height:1.4;
}
.toc-list a:hover{color:var(--amber-hi);border-left-color:var(--amber);background:var(--panel-2);text-decoration:none}

/* next-up list */
.all-guides{margin-top:34px;border-top:2px dashed var(--line);padding-top:20px}
.all-guides h2{font-size:22px;margin:4px 0 12px}
.next-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.next-list li{border-left:3px solid var(--line-soft);padding-left:10px}
.next-list a{display:block;font-weight:600;color:var(--ink);font-size:15.5px;line-height:1.35}
.next-list a:hover{color:var(--amber-hi);text-decoration:none}
.next-list span{display:block;font-size:13.5px;color:var(--ink-dim);line-height:1.45}
.all-link{margin:14px 0 0;font-family:var(--mono);font-size:15px;letter-spacing:.06em}

/* ---------- footer ---------- */
.foot{
  border-top:2px solid var(--line);margin-top:20px;
  background:linear-gradient(180deg,#0a0605,#050302);color:var(--ink-dim);
  font-size:14px;position:relative;
}
.foot::before{
  content:"";display:block;height:8px;
  background-image:
    linear-gradient(90deg,var(--line-soft) 50%,transparent 50%),
    linear-gradient(0deg,var(--line-soft) 50%,transparent 50%);
  background-size:16px 16px;opacity:.9;
}
.foot .wrap{padding:22px 24px 30px}
.disclaimer{max-width:80ch;margin:0 0 10px;line-height:1.6}
.foot-links{margin:0 0 8px;font-size:14px;word-break:break-word}
.foot-links a{color:var(--ink-dim)}
.foot-links a:hover{color:var(--amber-hi)}
.muted{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--cam);margin:0}

/* ---------- ads (two-state: styled, hidden while empty) ---------- */
.ad-slot{margin:26px auto;max-width:var(--maxw);padding:0 24px}
.ad-slot .ad-inner{min-height:0;background:var(--panel);border:1px solid var(--line-soft);border-radius:4px;padding:8px;display:flex;justify-content:center}
.ad-slot:empty{display:none}
.ad-slot-mobile{min-height:50px;justify-content:center;align-items:center}
@media (hover: hover) and (pointer: fine){
  .ad-slot[data-ad-unit="adsterra-native"] .ad-inner{min-height:90px}
}

/* compact home link groups (secondary grids) */
.linkgrid{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px}
.linkgrid li{border-left:3px solid var(--line-soft);padding:0 0 0 10px;margin:6px 0}
.linkgrid a{display:block;font-weight:600;color:var(--ink);font-size:15.5px;line-height:1.35}
.linkgrid a:hover{color:var(--amber-hi);text-decoration:none}
.linkgrid span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cam)}
@media (max-width:820px){.linkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.linkgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(3,2,1,.95);display:flex;align-items:center;justify-content:center;z-index:200;cursor:zoom-out;padding:20px}
.lightbox img{max-width:min(1500px,96vw);max-height:92vh;width:auto;height:auto;border:2px solid var(--line)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:26px}
  .crt{order:-1}
  .article-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .toc{position:static;order:2}
  .nav{margin-left:0;flex:1 1 100%;justify-content:flex-start}
  .bar{gap:10px;padding-top:8px;padding-bottom:8px}
  .next-list{grid-template-columns:1fr}
}
@media (max-width:820px){
  .brand span{max-width:none;font-size:18px}
  .nav{gap:8px;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav>ul{flex-wrap:nowrap}
  .nav .kids{display:none!important}
  .caret{display:none}
  .nav a{padding:8px 8px;font-size:14px;white-space:nowrap}
  .nav a.cta{padding:7px 11px}
  .fact{flex:1 1 45%;border-left:0;padding-left:0}
  article{padding:20px 18px 24px}
  .hero{padding:26px 0 24px}
  .hero h1{font-size:clamp(32px,8vw,44px)}
}
@media (max-width:480px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .hero h1{font-size:30px}
  .lead{font-size:16px}
  .btn{padding:10px 14px;font-size:15px}
  table{font-size:14px}
  thead th,tbody td{padding:8px 9px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  .card:hover{transform:none}
}