/* ============================================================
   KASANE — layers of taste
   Restyled to sit inside the hjiin.com folio language:
   minimal · thin black lines · quiet sans chrome · cream stock.
   The matcha green is reserved for what it is in the identity —
   the printing ink: stamps, solid plates, the open light.
   ============================================================ */

/* --- 1. Tokens ------------------------------------------- */
:root{
  /* the ink, sampled from the identity board */
  --ink:      #78813F;
  --ink-2:    #5A6330;   /* second pass */
  --ink-3:    #3B4220;   /* deepest impression */
  /* the stock, sampled from the case board */
  --paper:    #F6EFE2;
  --paper-2:  #EAE3D2;
  --wash:     #C8CB9F;
  --wash-2:   #E6E8D3;   /* pale sage panel */
  /* the folio chrome: near-black text and hairlines */
  --soot:      #141414;
  --soot-soft: #3a3a38;
  --soot-mute: #6e6d64;
  --line:      #141414;
  --line-soft: rgba(20,20,20,.16);

  --f-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, Arial, sans-serif;
  --f-label:   "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  /* kept for compatibility with older rules */
  --f-mono:    var(--f-label);

  /* one size for every small uppercase label, one for tabular data */
  --t-label: .78rem;
  --t-data:  .88rem;

  --gut: clamp(1.25rem, 4.5vw, 4rem);
  --rule: 1px solid var(--line);
  --rule-soft: 1px solid var(--line-soft);
  --measure: 62ch;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* --- 2. Reset -------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--soot);
  font-family:var(--f-body);
  font-size:clamp(.95rem,.4vw + .87rem,1.05rem);
  line-height:1.6;
  font-weight:300;
  font-optical-sizing:auto;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--soot); outline-offset:3px; }
::selection{ background:var(--soot); color:var(--paper); }

/* --- 3. Type --------------------------------------------- */
h1,h2,h3{ font-family:var(--f-display); font-weight:400; line-height:1.02;
          letter-spacing:-.01em; margin:0; }
/* every heading is set in capitals, the way the wordmark is */
h1,h2{ text-transform:uppercase; letter-spacing:0; }
/* Instrument Serif sits high in its box: pad the line so ascenders and
   CJK strokes are never clipped by the rule sitting above them */
h1,h2{ line-height:1.12; padding-top:.06em; }
h1{ font-size:clamp(2.75rem,8vw,6.5rem); }
h2{ font-size:clamp(1.9rem,4.2vw,3.4rem); }
h3{ font-size:clamp(1.25rem,1.6vw,1.6rem); line-height:1.15; }
p{ margin:0 0 1em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

/* the folio's small voice: quiet sans, spaced, always uppercase */
.mark{
  font-family:var(--f-label); font-size:var(--t-label); font-weight:400;
  letter-spacing:0; text-transform:uppercase; line-height:1.5;
}
.mark--ink{ color:var(--soot-mute); }
.lede{ font-size:clamp(.95rem,.8vw + .75rem,1.1rem); line-height:1.55;
       font-weight:300; text-wrap:balance; }
.kanji{ font-family:var(--f-display); font-weight:400; }

/* --- 4. Structure ---------------------------------------- */
.wrap{ width:min(1280px,100% - var(--gut)*2); margin-inline:auto; }
.band{ padding-block:clamp(3.5rem,7vw,7.5rem); }
.band--ink{ background:var(--ink); color:var(--paper); }
.band--ink h2, .band--ink h3{ color:var(--paper); }
.band--wash{ background:var(--wash-2); }
.band--tight{ padding-block:clamp(2rem,3.5vw,3.25rem); }

/* the crosshair registration marks belonged to the print conceit;
   the folio keeps its surfaces bare */
.reg::before,.reg::after{ content:none; }

/* section head, folio style: title on the rule, label sitting right */
.head{ border-top:var(--rule); padding-top:.85rem; margin-bottom:2.5rem;
       display:flex; flex-direction:row-reverse; justify-content:space-between;
       align-items:baseline; gap:1rem; flex-wrap:wrap; }
.head .mark{ margin:0; text-align:right; }
/* a head with no label still starts at the left edge of the rule */
.head > *:only-child{ margin-right:auto; }
.band--ink .head{ border-color:color-mix(in srgb, var(--paper) 55%, transparent); }
/* the copy here is measured to finish on the same line as the intro
   paragraph above it, not on the column edge */
.band--ink .stack > p{ max-width:36.5rem; }
.band--ink .mark{ color:var(--wash); }

/* --- 5. The press: ink over ink multiplies ---------------- */
.overprint{ mix-blend-mode:multiply; }

/* --- 6. Stamps ------------------------------------------- */
.stamp{ display:block; width:100%; height:auto; }
.stamp-set{ display:grid; gap:clamp(.75rem,2vw,1.5rem);
            grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.plate{ text-align:left; }
.plate .stamp{ transition:transform .55s cubic-bezier(.22,1.2,.36,1);
               transform-origin:50% 60%; }
.plate figcaption{ margin-top:.75rem; }
.plate .name{ font-family:var(--f-display); font-size:1.05rem; display:block;
              margin-bottom:.2rem; }
/* the ink press: a second, misregistered impression sits behind */
.press{ position:relative; display:block; }
.press::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  mix-blend-mode:multiply; opacity:0;
  transform:translate(5px,5px);
  transform-origin:50% 60%;
  transition:opacity .35s var(--ease),
             transform .55s cubic-bezier(.22,1.2,.36,1);
  z-index:-1;
}
.plate:hover .press::after,.plate:focus-within .press::after{
  opacity:.42; transform:translate(7px,7px) scale(1.08); }
/* the block lifts off the page rather than pressing into it */
.plate:hover .stamp,.plate:focus-within .stamp{ transform:scale(1.08); }

/* --- 7. Header ------------------------------------------- */
.masthead{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:var(--rule-soft);
}
.masthead__in{ display:flex; align-items:center; justify-content:space-between;
               gap:1rem; padding-block:.9rem; }
.wordmark{ font-family:var(--f-display); font-weight:400; font-size:1.4rem;
           letter-spacing:.18em; text-decoration:none; color:var(--soot);
           display:inline-flex; align-items:center; gap:.55rem; }
.wordmark svg{ width:24px; height:28px; flex:0 0 auto; }
.nav{ display:flex; gap:clamp(1rem,2.6vw,2.5rem); align-items:center; }
/* the link is a small stamp: a square of ink presses in behind the word */
.nav a{ text-decoration:none; position:relative; z-index:0;
        padding:.35rem .5rem; margin-inline:-.5rem;
        color:var(--soot-mute);
        transition:color .28s var(--ease); }
.nav a::after{ content:""; position:absolute; inset:0; z-index:-1;
               background:var(--ink); opacity:0;
               transform:scale(.72); transform-origin:50% 60%;
               transition:opacity .28s var(--ease), transform .28s var(--ease); }
.nav a:hover{ color:var(--paper); }
.nav a:hover::after{ opacity:1; transform:scale(1); }
.nav a[aria-current="page"]{ color:var(--soot); }
.nav a[aria-current="page"]::after{ opacity:.14; transform:scale(1); }
.nav a[aria-current="page"]:hover{ color:var(--paper); }
.nav a[aria-current="page"]:hover::after{ opacity:1; }
.nav > *:last-child{ margin-right:0; }
.nav__play{ border:var(--rule); padding:.45rem 1rem !important;
            color:var(--soot) !important; transition:background .25s var(--ease),
            color .25s var(--ease), border-color .25s var(--ease); }
.nav__play::after{ display:none; }
.nav__play:hover{ background:var(--soot); border-color:var(--soot);
                  color:var(--paper) !important; }
.burger{ display:none; background:none; border:var(--rule); padding:.5rem .8rem;
         cursor:pointer; }
/* the menu reads a step larger and lighter than the other marks */
.masthead .nav{ font-size:var(--t-label); font-weight:300; }

/* --- 8. Buttons ------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  border:1px solid var(--line); background:transparent; color:var(--soot);
  padding:.75rem 1.4rem; cursor:pointer;
  font-family:var(--f-label); font-size:var(--t-label); font-weight:400;
  letter-spacing:0; text-transform:uppercase;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease);
}
.btn:hover{ background:var(--soot); border-color:var(--soot); color:var(--paper); }
.btn--solid{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--ink-3); border-color:var(--ink-3); }
.btn--pale{ border-color:var(--paper); color:var(--paper); background:transparent; }
.btn--pale:hover{ background:var(--paper); border-color:var(--paper);
                  color:var(--ink-3); }

/* --- 9. Hero: the home page is this and nothing else -------- */
.hero{ border-bottom:var(--rule-soft); }
.hero__in{ display:grid; gap:clamp(2rem,5vw,4.5rem);
           grid-template-columns:1fr; align-items:center;
           padding-block:clamp(2.5rem,5vw,4.5rem); }
@media(min-width:900px){
  .hero__in{ grid-template-columns:1.05fr .95fr;
             /* the masthead is ~4rem; fill what is left of the first screen */
             min-height:calc(100svh - 4.2rem);
             padding-block:clamp(1.5rem,3vw,2.5rem); }
  /* the photo is a tall portrait: crop it to the row rather than let it
     set the row's height and push the type off-screen. The cup sits in the
     lower two-thirds of the frame, so the crop is weighted down to it. */
  .hero .plateshot img{ height:calc(100svh - 10.5rem); max-height:790px;
                        object-position:50% 62%; }
  /* the type sits below centre so it balances the tall photo */
  .hero__in > div:first-child{ padding-top:clamp(6rem,31vh,18rem); }
}
.hero h1{ margin:.45rem 0 1.25rem; }
.hero h1 .gap{ display:block; font-size:.3em; letter-spacing:0;
               font-family:var(--f-label); font-weight:400;
               color:var(--soot-mute); margin-top:1rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

/* the annotated plate: the layers of the drink, labelled */
.plateshot{ position:relative; margin:0; }
.plateshot img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.layerlab{
  position:absolute; left:0; display:flex; align-items:center; gap:0;
  opacity:0; transform:translateX(-14px); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.layerlab span{ background:var(--paper); border:var(--rule);
                padding:.3rem .6rem; white-space:nowrap; }
.layerlab i{ display:block; height:1px; width:clamp(24px,4.5vw,54px);
             background:var(--line); }
.plateshot.is-inked .layerlab{ opacity:1; transform:none; }
.plateshot figcaption{ margin-top:.8rem; display:flex; justify-content:space-between;
                       gap:1rem; border-top:var(--rule-soft); padding-top:.6rem; }

/* --- 10. Cards ------------------------------------------- */
.grid{ display:grid; gap:clamp(1rem,2.5vw,2rem);
       grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); }
.card{ border:1px solid var(--line-soft); padding:1.5rem 1.35rem 1.35rem;
       display:flex; flex-direction:column; gap:.5rem;
       transition:border-color .3s var(--ease); background:var(--paper); }
.card:hover{ border-color:var(--line); }
.card img{ aspect-ratio:4/3; object-fit:cover; margin:-1.5rem -1.35rem 1rem;
           width:calc(100% + 2.7rem); max-width:none; }
.card .row{ display:flex; justify-content:space-between; align-items:baseline;
            gap:1rem; }
.card p{ margin:0; font-size:.95rem; color:var(--soot-soft); }
.band--ink .card{ background:transparent; color:var(--paper);
                  border-color:color-mix(in srgb, var(--paper) 35%, transparent); }
.band--ink .card:hover{ border-color:var(--paper); }
.band--ink .card p{ color:var(--wash-2); }

/* --- 11. Menu list --------------------------------------- */
.tabs{ display:flex; flex-wrap:wrap; gap:0; border:var(--rule);
       margin-bottom:2.5rem; }
.tab{ flex:1 1 auto; background:transparent; border:0; cursor:pointer;
      padding:.9rem 1rem; border-right:var(--rule);
      font-family:var(--f-label); font-size:var(--t-label); font-weight:400;
      letter-spacing:0; text-transform:uppercase;
      color:var(--soot-mute);
      transition:background .2s, color .2s; }
.tab:last-child{ border-right:0; }
.tab:hover{ background:var(--wash-2); color:var(--soot); }
.tab[aria-selected="true"]{ background:var(--ink); color:var(--paper); }
.menu-list{ list-style:none; margin:0; padding:0; }
.menu-list li{ border-bottom:var(--rule-soft); padding:1.15rem 0; }
.menu-list .row{ display:flex; align-items:baseline; gap:.75rem; }
.menu-list .nm{ font-family:var(--f-display); font-size:1.35rem;
                text-transform:uppercase; }
.menu-list .jp{ font-size:.85rem; color:var(--soot-mute);
                font-family:var(--f-display); }
.menu-list .dots{ flex:1; border-bottom:1px dotted var(--line-soft);
                  transform:translateY(-.3em); }
.menu-list .pr{ font-family:var(--f-label); font-size:var(--t-data); font-weight:400;
                letter-spacing:0; font-variant-numeric:tabular-nums; }
.menu-list p{ margin:.3rem 0 0; font-size:.95rem; color:var(--soot-soft);
              max-width:52ch; }
.menu-list .tag{ display:inline-block; margin-left:.6rem; vertical-align:middle;
                 border:1px solid var(--ink-2); color:var(--ink-2);
                 padding:.12rem .45rem; font-family:var(--f-label);
                 font-size:.68rem; font-weight:400; letter-spacing:0;
                 text-transform:uppercase; }

/* --- 12. Build your cup ---------------------------------- */
.builder{ display:grid; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:1fr; }
@media(min-width:820px){ .builder{ grid-template-columns:1fr 300px; } }
.opt{ margin-bottom:1.6rem; }
.opt > .mark{ display:block; margin-bottom:.7rem; color:var(--soot-mute); }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ border:1px solid var(--line-soft); background:transparent; cursor:pointer;
       padding:.5rem .9rem; font-family:var(--f-label); font-size:var(--t-label);
       font-weight:400; letter-spacing:0; text-transform:uppercase;
       color:var(--soot-mute);
       transition:background .2s, color .2s, border-color .2s; }
.chip:hover{ border-color:var(--line); color:var(--soot); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink);
                            color:var(--paper); }
.cupout{ border:var(--rule); padding:1.5rem; align-self:start;
         position:sticky; top:5.5rem; background:var(--paper); }
.cupout svg{ width:100%; max-width:190px; margin:0 auto 1.25rem; display:block; }
.cupout .nm{ font-family:var(--f-display); font-size:1.6rem; line-height:1.1;
             display:block; margin-bottom:.35rem; }
.cupout .pr{ font-family:var(--f-label); font-size:var(--t-data); font-weight:400;
             font-variant-numeric:tabular-nums; }
.cup-layer{ transition:height .45s var(--ease), y .45s var(--ease); }
/* the cup outline is drawn with the site ink vars; keep it in the stamp ink */
.cupout svg path, .cupout svg rect[stroke]{ stroke:var(--ink-3); }

/* --- 13. Visit ------------------------------------------- */
.hours{ width:100%; border-collapse:collapse; }
.hours th,.hours td{ text-align:left; padding:.7rem .5rem;
                     border-bottom:var(--rule-soft); }
.hours th{ font-family:var(--f-label); font-size:var(--t-label); font-weight:400;
           letter-spacing:0; text-transform:uppercase; width:9rem; }
.hours td{ font-family:var(--f-label); font-size:var(--t-data); font-weight:400;
           letter-spacing:0; font-variant-numeric:tabular-nums; }
.hours tr[data-today]{ background:var(--wash-2); }
.hours tr[data-today] th::after{ content:" ← today"; color:var(--ink-2);
                                 letter-spacing:0; }
.status{ display:inline-flex; align-items:center; gap:.55rem; }
.status .dot{ width:9px; height:9px; border-radius:50%;
              background:var(--soot-mute);
              box-shadow:0 0 0 0 rgba(120,129,63,.5); }
.status[data-open="true"] .dot{ background:var(--ink);
              animation:pulse 2.6s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(120,129,63,0); }
                  100%{ box-shadow:0 0 0 0 rgba(120,129,63,0); } }
.split{ display:grid; gap:clamp(1.5rem,4vw,3.5rem); grid-template-columns:1fr; }
@media(min-width:860px){ .split{ grid-template-columns:1fr 1fr; } }
.split--wide{ grid-template-columns:1fr; }
@media(min-width:860px){ .split--wide{ grid-template-columns:1.15fr .85fr;
                                       align-items:center; } }
.dl{ margin:0; }
.dl div{ padding:.85rem 0; border-bottom:var(--rule-soft); }
.band--ink .dl div{ border-color:color-mix(in srgb, var(--paper) 35%, transparent); }
.dl dt{ font-family:var(--f-label); font-size:var(--t-label); font-weight:400;
        letter-spacing:0; text-transform:uppercase; opacity:.65;
        margin-bottom:.25rem; }
.dl dd{ margin:0; }

/* --- 14. Stamp Match ------------------------------------- */
.board{ display:grid; grid-template-columns:repeat(4,1fr);
        gap:clamp(.5rem,1.6vw,1rem); max-width:640px; margin-inline:auto; }
@media(max-width:520px){ .board{ grid-template-columns:repeat(3,1fr); } }
.tile{ all:unset; display:block; cursor:pointer; aspect-ratio:6/7;
       perspective:900px; }
.tile:focus-visible{ outline:2px solid var(--soot); outline-offset:3px; }
.tile__in{ display:block; position:relative; width:100%; height:100%;
           transform-style:preserve-3d; transition:transform .45s var(--ease); }
.tile[data-face="up"] .tile__in{ transform:rotateY(180deg); }
.tile__f,.tile__b{ position:absolute; inset:0; backface-visibility:hidden;
                   -webkit-backface-visibility:hidden; }
.tile__f{ background:var(--paper-2); border:1px solid var(--line-soft);
          display:grid; place-items:center;
          transition:border-color .2s var(--ease); }
.tile__f svg{ width:38%; opacity:.28; }
.tile__b{ transform:rotateY(180deg); }
.tile__b svg{ width:100%; height:100%; }
.tile:hover .tile__f{ border-color:var(--line); }
.tile[data-done="true"]{ cursor:default; }
.tile[data-done="true"] .tile__in{ animation:seat .5s var(--ease); }
.tile[data-done="true"] .tile__b{ box-shadow:5px 5px 0 var(--wash); }
@keyframes seat{ 40%{ transform:rotateY(180deg) scale(.9); } }
.scoreline{ display:flex; flex-wrap:wrap; justify-content:center;
            gap:clamp(1rem,4vw,3rem); margin-bottom:2rem; }
.scoreline div{ text-align:center; }
.scoreline .v{ font-family:var(--f-display); font-size:2.1rem; display:block;
               line-height:1; font-variant-numeric:tabular-nums; }
.scoreline .mark{ color:var(--soot-mute); }
.result{ position:fixed; inset:0; z-index:200; display:none;
         place-items:center; padding:var(--gut);
         background:rgba(20,20,20,.82); }
.result[open]{ display:grid; }
.result__card{ background:var(--paper); border:var(--rule);
               padding:clamp(1.75rem,4vw,3rem); max-width:460px; width:100%;
               text-align:center; animation:press .5s var(--ease); }
@keyframes press{ from{ transform:scale(1.06); opacity:0; } }
.coupon{ border:2px dashed var(--ink); color:var(--ink-3); padding:1rem;
         margin:1.5rem 0; font-family:var(--f-label); font-size:1.4rem;
         letter-spacing:.08em; font-weight:400; }

/* --- 15. Footer: the folio's black, holding the brand ------ */
.foot{ background:var(--soot); color:var(--paper); }
.foot__pattern{ height:clamp(70px,9vw,120px); background:url("../img_highres/matchaleave_bg.png")
                center/cover; }
.foot__in{ display:grid; gap:2rem; padding-block:clamp(2.5rem,5vw,4rem);
           grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.foot a{ text-decoration:none; }
.foot a:hover{ text-decoration:underline; text-underline-offset:3px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem;
          font-size:.95rem; }
.foot .wordmark{ color:var(--paper); font-size:1.8rem; }
.foot__base{ border-top:1px solid rgba(246,239,226,.25); padding-block:1.1rem;
             display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
             color:rgba(246,239,226,.6); }
.foot__col .mark{ color:rgba(246,239,226,.55); margin-bottom:.85rem; }
.foot__col .wordmark + .mark{ margin-top:.85rem; }

/* --- 16. Utility ----------------------------------------- */
.stack > * + *{ margin-top:1.15rem; }
.center{ text-align:center; margin-inline:auto; }
.hide{ display:none; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
     white-space:nowrap; }
.fig{ margin:0; }
.fig img{ width:100%; height:100%; object-fit:cover; }
/* in a two-column band the photo fills its column top to bottom, so both
   sides finish on the same line */
@media(min-width:860px){
  .split--wide{ align-items:stretch; }
  .split--wide > .fig{ display:flex; }
  .split--wide > .fig img{ height:100%; min-height:100%; }
}
/* the map is the one live surface on the site; the filter walks its
   default colours back toward the paper and the ink */
.fig--map{ margin:0; }
.fig--map iframe{ display:block; width:100%; aspect-ratio:4/3; border:0;
                  filter:saturate(.62) contrast(.96) sepia(.14); }

/* --- 17. Small screens ----------------------------------- */
@media(max-width:780px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; top:0; background:var(--soot); color:var(--paper);
    flex-direction:column; justify-content:center; gap:1.5rem;
    font-family:var(--f-display); font-size:2.25rem;
    transform:translateY(-100%); visibility:hidden;
    transition:transform .45s var(--ease), visibility 0s .45s;
    z-index:90;
  }
  .nav[data-open="true"]{ transform:none; visibility:visible;
    transition:transform .45s var(--ease), visibility 0s 0s; }
  .nav a{ color:var(--paper); }
  .nav a[aria-current="page"]{ color:var(--paper); }
  .nav a::after{ background:var(--paper); }
  .nav__play{ font-family:var(--f-label); font-size:.8rem;
              border-color:var(--paper); color:var(--paper) !important; }
  .nav__play:hover{ background:var(--paper); color:var(--soot) !important; }
  .nav__close{ position:absolute; top:1rem; right:var(--gut); background:none;
               border:1px solid var(--paper); color:var(--paper);
               padding:.5rem .8rem; cursor:pointer; font-family:var(--f-label);
               font-size:var(--t-label); letter-spacing:0; text-transform:uppercase; }
}
@media(min-width:781px){ .nav__close{ display:none; } }

/* --- 18. Motion off -------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important;
    scroll-behavior:auto !important; }
  .plateshot .layerlab{ opacity:1; transform:none; }
}

/* --- 19. Page furniture ---------------------------------- */
.pagetitle{ font-size:clamp(2.5rem,6vw,4.5rem); margin:.5rem 0 1.15rem; }
.card__plate{ width:74px; height:auto; margin-bottom:.85rem; }
.narrow{ max-width:52ch; }
.tc{ text-align:center; margin-inline:auto; }
.bar{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center;
      justify-content:space-between; }
.ruled{ border-top:var(--rule-soft); }
.flush-top{ padding-top:0; }
.mt-xs{ margin-top:.55rem; }
.mt{ margin-top:1.15rem; }
.mt-lg{ margin-top:2.5rem; }
.mb-sm{ margin:.6rem 0 .8rem; }
.mb-lg{ margin-bottom:2.6rem; }
.stamp-set--3{ grid-template-columns:repeat(3,1fr); }
.hero__cta--center{ justify-content:center; }
.linkish{ border:0; padding:.3rem; background:none; letter-spacing:0; }
.linkish:hover{ background:none; color:var(--soot); text-decoration:underline;
                text-underline-offset:4px; }
.linkish::after{ display:none; }
.result__card p{ margin-inline:auto; }
.plate--bare figcaption{ display:none; }

/* the hero annotations sit against the real layers in the photo */
.layerlab--1{ top:38%; transition-delay:.25s; }
.layerlab--2{ top:56%; transition-delay:.55s; }
.layerlab--3{ top:74%; transition-delay:.85s; }

/* the mobile menu is set in the display face, so drop the label tracking */
@media(max-width:780px){
  .nav{ letter-spacing:0; }
  .nav .nav__play{ letter-spacing:0; }
}

/* --- 20. The wordmark glyph sits on different grounds ------ */
/* the little plate keeps its ink even where the chrome is black */
.wordmark svg{ color:var(--ink); }
.masthead .wordmark svg{ --glyph-bg:var(--paper); }

/* the drawn logotype, used wherever the wordmark was set in type */
.wordmark__img{ height:1em; width:auto; display:block; }
.foot .wordmark__img{ height:1.1em; }
.logotype{ display:block; width:min(380px,80%); height:auto; }
.sublogo{ display:block; height:.82rem; width:auto; margin-bottom:.5rem; }
.foot .wordmark svg{ --glyph-bg:var(--soot); }
.tile__f svg{ --glyph-bg:var(--paper-2); }

/* --- 21. Corrections found in review --------------------- */
.tc > *{ margin-inline:auto; }
.tc .head{ justify-content:center; }

@media(max-width:640px){
  /* four tabs will not sit on one row at this width */
  .tabs{ display:grid; grid-template-columns:1fr 1fr; }
  .tab{ border-right:var(--rule); border-bottom:var(--rule); }
  .tab:nth-child(2n){ border-right:0; }
  .tab:nth-child(n+3){ border-bottom:0; }
  .menu-list .row{ flex-wrap:wrap; }
  .menu-list .dots{ min-width:1.5rem; }
  .scoreline{ gap:1rem 1.75rem; }
  .cupout{ position:static; }
  .hours th{ width:7.5rem; }
  .hours tr[data-today] th::after{ content:""; }
  .hours tr[data-today] td::after{ content:" ← today"; color:var(--ink-2); }
}
@media(max-width:420px){
  .board{ gap:.45rem; }

  .foot__base{ gap:.35rem; }
}

/* --- 22. Small-screen refinements ------------------------ */
@media(max-width:640px){
  /* a leader dot line needs room to lead somewhere; below this width the
     name and the price are close enough to read as a pair on their own */
  .menu-list .row{ flex-wrap:nowrap; }
  .menu-list .nm{ flex:1 1 auto; }
  .menu-list .dots{ display:none; }
  .menu-list .tag{ margin-left:.4rem; }
  .menu-list .jp{ flex:0 0 auto; }

  /* plate captions were breaking into six one-word lines */
  .stamp-set{ grid-template-columns:repeat(2,1fr); }
  .stamp-set--3{ grid-template-columns:repeat(3,1fr); }
  .plate .name{ font-size:.95rem; }
  .plate figcaption .mark{ font-size:.72rem; }

  /* four stats wrapped 3 + 1, leaving one stranded */
  .scoreline{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }

  /* the section head row collapses back to a stack on narrow screens */
  .head{ flex-direction:column-reverse; align-items:flex-start; gap:.45rem; }
  .head .mark{ text-align:left; }
}