/* =====================================================================
   TIN CHI HOUSE — Alden, New York
   ---------------------------------------------------------------------
   THE SITE IS THE MENU.

   Not a restaurant landing page with a menu section further down. The
   thing this business actually hands you is a folded paper takeout menu,
   and that object is a real piece of American design history: the paper
   pail dates to 1894, and the red pagoda with its "Thank You" lettering
   was drawn by a Fold-Pak designer in the 1970s. None of it came from
   China. It is an immigrant-American invention, and it is beloved.

   So the page is that menu, set properly: two inks on paper, dense
   numbered columns, dot leaders, a masthead where a printed menu keeps
   its phone number. No hero photograph, no elegant serif landing page.

   The one thing paper cannot do is let you filter, so the menu here can
   be narrowed to one of the three regional kitchens, or to the dishes
   that will not burn you.
   ===================================================================== */

@font-face{font-family:"Bodoni";src:url("/assets/font/bodoni.woff2") format("woff2-variations");
  font-weight:400 800;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/font/barlow.woff2") format("woff2");
  font-weight:400 700;font-display:swap}

:root{
  --paper:#fbf9f5; --paper-2:#f2eee4;
  --ink:#16130f; --ink-2:#4a443c; --ink-3:#6f675c;
  --red:#b62f1e; --red-deep:#8f2416;
  --rule:#ded7ca; --rule-2:#c6bda9;

  --head:"Bodoni",Didot,"Bodoni MT",Georgia,serif;
  --sans:"Barlow","Barlow Semi Condensed",system-ui,-apple-system,sans-serif;

  --t-xs:clamp(.66rem,.63rem + .1vw,.72rem);
  --t-s:clamp(.86rem,.83rem + .14vw,.95rem);
  --t-0:clamp(.98rem,.95rem + .18vw,1.06rem);
  --t-1:clamp(1.1rem,1.02rem + .34vw,1.3rem);
  --t-2:clamp(1.5rem,1.2rem + 1.3vw,2.3rem);
  --t-3:clamp(2.2rem,1.5rem + 3vw,4.2rem);

  --sp1:.35rem; --sp2:.7rem; --sp3:1.2rem; --sp4:2rem;
  --sp5:clamp(2.2rem,3.6vw,3.2rem);
  --sp6:clamp(3rem,5.4vw,4.8rem);
  --gut:clamp(1.1rem,3.4vw,2.4rem);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--sans);
  font-size:var(--t-0);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
::selection{background:var(--red);color:#fff}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* =====================================================================
   MASTHEAD — what the top of a printed takeout menu carries: the name,
   the number in the largest type on the sheet, and where to find it.
   ===================================================================== */
.mast{border-bottom:3px solid var(--ink);padding-block:var(--sp5) 0}
.mast .name{font-family:var(--head);font-weight:700;color:var(--ink);
  font-size:var(--t-3);line-height:.95;letter-spacing:-.02em;margin:0;text-align:center}
.mast .kitchens{display:flex;justify-content:center;align-items:center;gap:.9rem;
  margin:var(--sp3) 0 var(--sp4);font-family:var(--sans);font-weight:600;
  font-size:var(--t-s);letter-spacing:.3em;text-transform:uppercase;color:var(--red)}
.mast .kitchens span{width:5px;height:5px;background:var(--rule-2);border-radius:50%}
.rules{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);height:4px}

.facts{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:0;
  border-bottom:1px solid var(--ink)}
.facts > div{padding:var(--sp4) var(--sp4) var(--sp4) 0;border-right:1px solid var(--rule)}
.facts > div:first-child{padding-left:0}
.facts > div:last-child{border-right:0;padding-right:0}
.facts dt{font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3);margin-bottom:.5rem}
.facts dd{margin:0}
/* The number is the most important thing on the page and it has to be
   unambiguous. Bodoni's hyphen is a hairline and read as a gap, so the
   phone is set in the sans. The Didone keeps the name and the headings. */
.tel{font-family:var(--sans);font-weight:700;font-size:var(--t-2);color:var(--ink);
  text-decoration:none;letter-spacing:-.01em;line-height:1;white-space:nowrap;display:block}
.tel:hover{color:var(--red)}
.facts address{font-style:normal;font-size:var(--t-s);color:var(--ink);line-height:1.4}
.facts .small{font-size:var(--t-s);color:var(--ink-2)}
.facts a.map{color:var(--red);text-decoration:none;font-size:var(--t-s);
  border-bottom:1px solid var(--rule-2)}
@media(max-width:820px){
  .facts{grid-template-columns:1fr}
  .facts > div{border-right:0;border-bottom:1px solid var(--rule);padding:var(--sp3) 0}
  .facts > div:last-child{border-bottom:0}
}

.status{display:inline-flex;align-items:baseline;gap:.5rem;font-size:var(--t-s);font-weight:600;
  color:var(--ink)}
.status b{font-weight:700}
.status em{font-style:normal;font-weight:400;color:var(--ink-2)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rule-2);
  align-self:center;flex:none}
.status.open::before{background:var(--red)}
.status.shut::before{background:var(--rule-2)}

/* =====================================================================
   THE FILTER — the one thing paper cannot do
   ===================================================================== */
.sift{position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--ink);padding-block:var(--sp2)}
.sift .in{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.sift .lab{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3);margin-right:.4rem}
.chip{font-family:var(--sans);font-size:var(--t-s);font-weight:600;letter-spacing:.04em;
  padding:.4rem .8rem;border:1px solid var(--rule-2);background:transparent;color:var(--ink-2);
  cursor:pointer;border-radius:1px;transition:background .18s,color .18s,border-color .18s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.heat[aria-pressed="true"]{background:var(--red);border-color:var(--red)}
.sift .count{margin-left:auto;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
@media(max-width:640px){.sift .count{display:none}}

/* =====================================================================
   THE MENU
   ===================================================================== */
.menu{columns:2;column-gap:var(--sp6);margin-block:var(--sp5) var(--sp4)}
@media(max-width:860px){.menu{columns:1}}
.course{break-inside:avoid;margin-bottom:var(--sp5)}
.course h2{font-family:var(--sans);font-weight:700;font-size:var(--t-1);color:var(--ink);
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--sp2);
  padding-bottom:.4rem;border-bottom:2px solid var(--ink)}
.course ul{list-style:none;margin:0;padding:0}
.dish{display:grid;grid-template-columns:1.9rem 1fr auto;gap:.5rem;align-items:baseline;
  padding:.34rem 0;border-bottom:1px dotted var(--rule);
  transition:opacity .2s}
.dish .no{font-family:var(--sans);font-weight:700;font-size:var(--t-s);color:var(--red);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.dish .nm{color:var(--ink);font-size:var(--t-s);font-weight:500}
.dish .nm .reg{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-left:.4rem}
.dish .nm .chilies{color:var(--red);margin-left:.35rem;letter-spacing:-.06em;font-size:.8em}
.dish .pr{font-family:var(--sans);font-size:var(--t-s);color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.menu.sifting .dish{opacity:.16}
.menu.sifting .dish.hit{opacity:1}

.legend{display:flex;flex-wrap:wrap;gap:var(--sp3);padding:var(--sp3) 0;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.legend b{color:var(--red);font-weight:700;letter-spacing:-.06em}
.legend span{color:var(--ink);font-weight:600}

/* =====================================================================
   FOOTNOTES — the three kitchens, kept subordinate to the menu
   ===================================================================== */
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp5);
  margin-top:var(--sp6);padding-top:var(--sp4);border-top:3px solid var(--ink)}
.note h3{font-family:var(--sans);font-weight:700;font-size:var(--t-s);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin:0 0 var(--sp2)}
.note h3 .k{color:var(--red)}
.note p{margin:0;font-size:var(--t-s);color:var(--ink-2)}
@media(max-width:820px){.notes{grid-template-columns:1fr;gap:var(--sp4)}}

/* =====================================================================
   HOURS
   ===================================================================== */
.plate{background:var(--paper-2);margin-top:var(--sp6);padding-block:var(--sp5)}
.plate .cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp6);align-items:start}
@media(max-width:820px){.plate .cols{grid-template-columns:1fr;gap:var(--sp4)}}
.hrs{width:100%;border-collapse:collapse}
.hrs caption{text-align:left;font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3);padding-bottom:var(--sp2)}
.hrs td{padding:.5rem 0;border-bottom:1px solid var(--rule);font-size:var(--t-s)}
.hrs td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.hrs tr.today td{font-weight:700;color:var(--ink)}
.hrs tr.today td:first-child::after{content:" \2190 today";color:var(--red);font-weight:600;
  font-size:var(--t-xs);letter-spacing:.1em}
.plate h3{font-family:var(--head);font-weight:700;font-size:var(--t-2);color:var(--ink);
  margin:0 0 var(--sp2);letter-spacing:-.02em}
.plate p{font-size:var(--t-s);max-width:44ch}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{border-top:3px solid var(--ink);margin-top:var(--sp6);padding-block:var(--sp4)}
.foot .in{display:flex;flex-wrap:wrap;gap:var(--sp3);align-items:baseline;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.foot .in .sp{margin-left:auto}
.foot a{color:var(--ink-3);text-decoration:none}
.foot a:hover{color:var(--red)}

.owner{margin-top:var(--sp5);padding:var(--sp3) var(--sp4);border:1px solid var(--red);
  background:#fff}
.owner p{margin:0;font-size:var(--t-s);color:var(--ink-2);max-width:70ch}
.owner b{color:var(--red)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.dish,.chip{transition:none}}