/* takeout-sheet.css — the Dragon Palace printed take-out sheet.
   Rendered by templates/print.html.twig at /print, from the same generated menu
   data the website uses. The per-language type scale is NOT here: the template
   injects it from dragon.sheet in dragon-palace.yaml, where bin/fit_sheet.py
   writes the measured values.
   Measured: every panel fits, nothing sets below 6.0pt, worst ink contrast on
   the vanilla stock is 9.3:1. Re-run bin/check_sheet.py after any edit. */

:root{
  /* The vanilla is the PAPER. It is painted on screen so the proof looks like
     the finished piece, and removed at print time so the stock shows through. */
  --paper:#F3EFDF;
  --ink:#16171B;         /* 15.9:1 on the vanilla — the body text          */
  --rule:#8A8272;        /* 3.4:1 — dot leaders, dark enough to photocopy  */
  --quiet:#413E36;       /* 8.9:1 — the smallest type, still well clear    */
}
*{box-sizing:border-box; margin:0; padding:0}
body{ background:var(--table); color:var(--ink);
      font-family:"Jost",'Gill Sans',Futura,'Trebuchet MS',sans-serif;
      -webkit-font-smoothing:antialiased; }
.sheet{ width:10.5in; height:8.0in; background:var(--paper); margin:14px auto;
        display:grid; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35); position:relative }
.outside{ grid-template-columns:1fr 1fr; }
.inside{ grid-template-columns:1fr; }
.inside .panel{ column-count:4; column-gap:.2in; column-fill:auto }
.fold{ position:absolute; left:50%; top:0; bottom:0; width:0;
       border-left:.4pt dashed var(--rule) }
.panel{ padding:.14in .16in; overflow:hidden }
.cols2{ column-count:2; column-gap:.16in }

h2{ font-size:1.26em; letter-spacing:.06em; text-transform:uppercase; text-align:center;
    font-weight:700; margin:6pt 0 2pt; break-after:avoid }
.sub{ font-size:.92em; text-align:center; font-style:italic; margin-bottom:1pt }
.note{ font-size:.9em; text-align:center; line-height:1.35; margin:1pt 0 3pt;
       font-style:italic; color:var(--quiet) }
.sizes{ display:flex; justify-content:flex-end; gap:.14in; font-size:.9em; margin-bottom:1pt }
.sizes span{ width:.34in; text-align:right }

/* A section must be free to run over a column break. Seafood is 875px of
   dishes and a column is 758px tall, so `break-inside:avoid-column` made it
   unplaceable — it overflowed whichever column it landed in, and overflow:hidden
   then dropped the last dishes off the printed sheet without a trace. What has
   to stay whole is the heading with its first item (h2 break-after) and each
   dish with its own description (.it), not the section. */
.sec{ break-inside:auto; margin-bottom:2pt }
.it{ break-inside:avoid; margin-bottom:.7pt }
.ln{ display:flex; align-items:baseline; gap:2pt; font-size:1em; font-weight:600; line-height:1.2 }
.nm{ flex:0 1 auto }
.dots{ flex:1 1 auto; border-bottom:.5pt dotted var(--rule);
       transform:translateY(-1.4pt); min-width:6pt }
.pr{ font-variant-numeric:tabular-nums; font-weight:500; flex:0 0 auto;
     text-align:right; min-width:.3in }
.pr.two{ min-width:.34in; margin-left:.06in }
.ds{ font-style:italic; line-height:1.3; font-weight:400; color:var(--quiet) }
.no{ font-weight:600 }
.sp{ display:inline-block; width:5pt; height:4.2pt; border-radius:50%; flex:0 0 auto;
     box-shadow:inset 1.6pt -0.7pt 0 0 currentColor; transform:rotate(-22deg); margin-right:.5pt }

.mast{ text-align:center; padding-bottom:2pt }
.mast .nm1{ font-size:15pt; font-weight:700; letter-spacing:.06em; line-height:1.05 }
.mast .nm2{ font-size:9pt; font-weight:500; letter-spacing:.14em; text-transform:uppercase }
.desc-line{ font-size:7.6pt; font-weight:600; text-align:center; letter-spacing:.02em; margin-top:3pt }
.tag{ font-size:10pt; font-weight:700; text-align:center; line-height:1.15; margin-top:1pt }
.open{ font-size:7.8pt; text-align:center; margin-top:2pt }
table.hrs{ margin:1pt auto 0; border-collapse:collapse; font-size:7pt }
table.hrs th{ text-align:left; font-weight:400; padding-right:.14in }
table.hrs td{ font-variant-numeric:tabular-nums }

/* The address was a solid black bar with reversed type. It only appeared if the
   person printing found Chrome's "Background graphics" checkbox, and when it did
   print it laid a heavy ink block on cream stock. Rules instead: no background
   to switch on, and the phone number is the largest thing in the block. */
.addr{ text-align:center; padding:3pt 0; margin:4pt 0 5pt;
       border-top:1pt solid var(--ink); border-bottom:1pt solid var(--ink);
       font-size:7.4pt; line-height:1.35; font-weight:500 }
.addr .ph{ display:block; font-size:9.5pt; font-weight:700; letter-spacing:.02em }

.pkg{ break-inside:avoid; margin-bottom:3.5pt; text-align:center }
.pkg h3{ font-size:1.02em; font-weight:700 }
.pkg .pp{ font-weight:400; font-size:.9em }
.pl{ font-size:.9em; line-height:1.26 }
.pl.mn{ font-size:.86em; color:var(--quiet) }
.pl.lft{ text-align:left; margin-top:2pt }
/* .1in of gutter was not enough once the type grew: the last word of a
   left-column entree ran straight into the number of the right-column one
   ("Chow Mein6. Shrimp with..."). */
ol.choices{ column-count:2; column-gap:.22in; font-size:.88em; text-align:left;
            padding-left:11pt; margin-top:.5pt; overflow-wrap:break-word }
ol.choices li{ line-height:1.26 }
.dinner-foot{ font-size:.88em; margin-top:2pt; line-height:1.3 }
.footnote{ text-align:center; font-size:.92em; margin-top:4pt; line-height:1.4 }


/* ── operator chrome ──────────────────────────────────────────────────────
   Deliberately a different typeface from the sheet: nothing on this bar should
   ever be mistaken for part of the menu. All of it disappears at print time. */
:root{ --table:#241F1B; --chrome:#CFC6B8; --chrome-dim:#8C8377; --seal:#C4462B }
.bar{ position:sticky; top:0; z-index:20; background:rgba(36,31,27,.94);
      backdrop-filter:blur(10px); border-bottom:1px solid #3E362F;
      font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; color:var(--chrome) }
.bar-in{ max-width:1180px; margin:0 auto; padding:16px 24px;
         display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px }
.back{ font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--chrome-dim);
       text-decoration:none; padding:7px 12px 7px 0; white-space:nowrap }
.back:hover{ color:#fff }
.back span{ font-size:14px }
.name{ font-family:Jost,'Gill Sans',sans-serif; font-weight:700; font-size:19px;
       color:#fff; margin-right:auto }
.name a{ color:inherit; text-decoration:none }
.name a:hover{ color:var(--seal) }
.name span{ color:var(--chrome-dim); font-weight:400; font-size:13px;
            font-family:"IBM Plex Mono",ui-monospace,monospace; margin-left:10px }
.langs{ display:flex; border:1px solid #4A4139; border-radius:3px; overflow:hidden }
.langs a{ font-size:12px; font-weight:600; letter-spacing:.12em; padding:7px 15px;
          color:var(--chrome-dim); text-decoration:none }
.langs a.on{ background:var(--seal); color:#fff }
.facts{ display:flex; gap:6px 20px; font-size:11.5px; color:var(--chrome-dim) }
.facts b{ color:var(--chrome); font-weight:600; font-variant-numeric:tabular-nums }
.doprint{ font:inherit; font-family:"IBM Plex Mono",ui-monospace,monospace;
          font-size:12px; font-weight:600; letter-spacing:.06em; padding:9px 18px;
          border:0; border-radius:3px; background:var(--seal); color:#fff; cursor:pointer }
.doprint:hover{ background:#D2543A }
.doprint:focus-visible,.langs a:focus-visible,.back:focus-visible,.name a:focus-visible{
  outline:2px solid #fff; outline-offset:2px }
.howto{ max-width:1180px; margin:20px auto 0; padding:0 24px; color:var(--chrome-dim);
        font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12.5px; letter-spacing:.02em }
.stack{ display:flex; flex-direction:column; align-items:center; gap:34px; margin:26px 0 64px }
.side{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
       letter-spacing:.22em; text-transform:uppercase; color:var(--chrome-dim);
       margin-bottom:-22px }
.sheet{ box-shadow:0 18px 46px rgba(0,0,0,.45) }

@media print{
  body{ background:#fff }
  .bar,.howto,.side{ display:none }
  .stack{ display:block; margin:0 }
  /* The stock is already vanilla — do not print it. */
  .sheet{ background:transparent; box-shadow:none; margin:0; width:auto; height:100%;
          page-break-after:always }
  .sheet:last-of-type{ page-break-after:auto }
  @page{ size:11in 8.5in; margin:.25in }
}