/* Fish Market KK — shared design system.
   Extracted from 8 pages' inline <style> blocks 2026-08-11.
   Page-specific rules remain inline on each page. */
/* UMAI's floating booking pill: every page already has a styled Reserve
   button (nav, hero, mid-page, footer) wired to the same widget, and the
   pill's rounded white shape breaks the square-corner/no-shadow system.
   The widget script stays loaded — it still opens the modal on click. */
floating-button{display:none!important}
@font-face{font-family:'InterVar';src:url('/fish-market/fonts/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--pearl);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:10px 16px;z-index:200;font-weight:600}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
/* ---------- SIGNATURE: gold hairline frame ----------
   Was a chamfered octagon ring. Retired 2026-09-02: the cut corners read as
   award-certificate chrome, not restaurant. A straight hairline frames the
   same media without the costume. */
.tier{position:relative}
.tier::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  border:1px solid rgba(201,164,104,.22);
}
/* .octa is now a no-op; the class stays in markup across 8 pages so the
   images keep their square corners without touching every file. */
/* ---------- header ----------
   Floats transparent over the hero on load (logo hidden) and solidifies
   once .hdr-solid is added by the scroll script near the foot of each
   page, past that page's hero (or past .creds on the two homepages). */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:transparent;border-bottom:1px solid transparent;
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  transition:background-color .4s ease-out,border-color .4s ease-out,backdrop-filter .4s ease-out;
}
.hdr.hdr-solid{
  background:rgba(10,10,11,.82);border-bottom-color:rgba(201,164,104,.20);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.hdr .lockup img{opacity:0;transition:opacity .4s ease-out}
.hdr.hdr-solid .lockup img{opacity:1}
@media (prefers-reduced-motion:reduce){
  .hdr{transition:none}
  .hdr .lockup img{transition:none}
}
/* Header bar: taller and calmer than before (76px mobile / 88px desktop,
   was 60px flat) so the logo and links get real breathing room instead of
   sitting cramped in a thin strip. */
.hdr-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-height:76px;padding-block:14px}
@media (min-width:720px){.hdr-in{min-height:88px;padding-block:0}}
.lockup{display:flex;align-items:center;text-decoration:none;flex:0 1 auto;order:1}
.lockup img{width:auto;height:46px;display:block}
@media (min-width:720px){.lockup img{height:54px}}
.lockup-foot{flex:0 0 auto;order:0}
.lockup-foot img{height:76px}
@media (min-width:720px){.lockup-foot img{height:92px}}

/* Below 720px the four nav links no longer sit in an always-visible second
   row (that read as a busy, dated two-line header); a hamburger toggle
   reveals them as a dropdown panel instead, so the bar itself stays a
   single clean line at every width - the toggle button below drives it. */
.menu-toggle{
  order:3;width:42px;height:42px;flex:0 0 auto;
  display:grid;place-items:center;
  background:transparent;border:1px solid rgba(201,164,104,.32);
  padding:0;position:relative;cursor:pointer;
}
.menu-toggle-bar{position:relative;width:18px;height:1px;background:var(--pearl);transition:background-color .18s ease-out}
.menu-toggle-bar::before,.menu-toggle-bar::after{
  content:"";position:absolute;left:0;width:18px;height:1px;background:var(--pearl);
  transition:transform .22s ease-out;
}
.menu-toggle-bar::before{top:-6px}
.menu-toggle-bar::after{top:6px}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar::after{transform:translateY(-6px) rotate(-45deg)}
@media (hover:hover){.menu-toggle:hover{border-color:var(--gold)}}
@media (min-width:720px){.menu-toggle{display:none}}

.nav{
  order:5;width:100%;
  display:none;flex-direction:column;gap:2px;
  border-top:1px solid rgba(201,164,104,.14);margin-top:4px;padding-top:6px;
}
.nav.is-open{display:flex}
.nav a{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--pearl-dim);padding:13px 2px;position:relative;white-space:nowrap;
}
/* invisible hit-area expansion: absolutely positioned so it doesn't affect the row's own height */
.nav a::before{content:"";position:absolute;top:0;bottom:0;left:-4px;right:-4px}
.nav a .zh{font-family:var(--cjk);letter-spacing:.05em;color:rgba(201,164,104,.72);margin-left:5px;text-transform:none}
.nav a[aria-current="page"]{color:var(--pearl)}
.nav a::after{content:"";display:none;position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .18s ease-out}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (min-width:720px){
  .nav{
    order:2;width:auto;display:flex;flex-direction:row;align-items:center;
    gap:clamp(20px,2.6vw,36px);border-top:0;margin-top:0;padding-top:0;margin-left:auto;
  }
  .nav a{font-size:12px;letter-spacing:.17em;padding:6px 0}
  .nav a::before{top:-8px;bottom:-8px}
  .nav a::after{display:block}
}
@media (hover:hover) and (min-width:720px){.nav a:hover{color:var(--pearl)}.nav a:hover::after{transform:scaleX(1)}}
.btn{
  font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border:1px solid var(--gold);color:var(--gold-dim);background:transparent;
  transition:background .18s ease-out,color .18s ease-out;
}
@media (hover:hover){.btn:hover{background:var(--gold);color:var(--ink)}}
.btn-solid{background:var(--broth);border-color:var(--broth);color:var(--pearl)}
@media (hover:hover){.btn-solid:hover{background:#c04227;border-color:#c04227;color:var(--pearl)}}
/* booking is the primary action for a visitor, keep it in the header at every width */
.nav-book{order:2;margin-left:auto;padding:10px 15px;font-size:11px;letter-spacing:.11em}
@media (min-width:720px){.nav-book{order:4;margin-left:20px;padding:13px 24px;font-size:12px;letter-spacing:.16em}}
.nav-book{position:relative}
.nav-book::before{content:"";position:absolute;top:-3px;bottom:-3px;left:-2px;right:-2px}
.nav-book .long{display:none}
@media (min-width:520px){.nav-book .long{display:inline}}
/* ---------- hero ---------- */
/* Centered mark that sits in the hero before the header logo has faded in;
   independent of .hero-copy's own alignment (which goes right on desktop),
   so it stays centered on the hero as a whole at every width. */
.hero-logo{display:block;margin:0 auto clamp(18px,2.6vw,30px);width:clamp(120px,15vw,200px);height:auto;opacity:.94}
.eyebrow{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:12px;margin:0 0 14px;
}
h1{
  font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(30px,6.4vw,64px);line-height:1.06;letter-spacing:.005em;color:var(--pearl);
}
h1 .zh{display:block;font-family:var(--cjk);font-size:clamp(15px,2.3vw,25px);letter-spacing:.14em;color:var(--gold);margin-top:14px;font-weight:400}
.hero-sub{max-width:52ch;color:var(--pearl-dim);margin:18px 0 0;font-size:clamp(14px,1.5vw,17px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* ---------- credentials ----------
   .creds is deliberately full-bleed (the ink-raised band runs edge to edge),
   but its CONTENT still has to line up with every other section's text
   column. .creds-in carries the same maxw+margin:auto the .wrap system uses
   elsewhere, so the three cells sit inside that shared column instead of
   spreading to the raw window edge on wide viewports. */
.creds{border-block:1px solid rgba(201,164,104,.2);background:var(--ink-raised)}
.creds-in{display:grid;grid-template-columns:1fr;gap:0;max-width:var(--maxw);margin-inline:auto}
@media (min-width:760px){.creds-in{grid-template-columns:repeat(3,1fr)}}
.cred{padding:56px var(--gut);text-align:center;border-bottom:1px solid rgba(201,164,104,.14)}
@media (min-width:760px){
  /* horizontal padding stays var(--gut) - was hardcoded to 26px, which both
     pinched this band tighter than every other section AND broke its
     alignment with them (the two are the same bug: a padding value that
     didn't come from the shared scale can't land on the shared column) */
  .cred{border-bottom:0;border-right:1px solid rgba(201,164,104,.14);padding:72px var(--gut)}
  .cred:last-child{border-right:0}
}
.cred .k{font-family:var(--display);font-weight:400;font-size:clamp(17px,2vw,21px);color:var(--gold-dim);margin:0 0 12px;letter-spacing:.03em}
.cred .zh{font-family:var(--cjk);font-size:13px;color:var(--gold);letter-spacing:.1em;display:block;margin-bottom:8px}
.cred .d{font-size:12.5px;color:var(--pearl-dim);margin:0;letter-spacing:.02em;line-height:1.6}
.stars{color:var(--gold);letter-spacing:.18em;font-size:12px}
/* ---------- sections ---------- */
section{padding:clamp(56px,9vw,116px) 0}
.sec-head{margin-bottom:clamp(28px,4vw,52px);max-width:60ch}
h2{
  font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(26px,4.4vw,44px);line-height:1.14;color:var(--pearl);letter-spacing:.01em;
}
h2 .zh{display:block;font-family:var(--cjk);font-size:clamp(13px,1.7vw,17px);letter-spacing:.16em;color:var(--gold);margin-top:12px;font-weight:400}
.lede{color:var(--pearl-dim);max-width:58ch;margin:20px 0 0;font-size:clamp(14.5px,1.5vw,17px)}
.split{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:880px){.split{grid-template-columns:1.05fr .95fr}}
.split-media{position:relative;--cut:clamp(14px,2.4vw,24px)}
.split-media img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.steps{list-style:none;margin:28px 0 0;padding:0;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;padding:0 0 22px 52px;
  border-left:1px solid rgba(201,164,104,.22);margin-left:14px;
}
.steps li:last-child{padding-bottom:0}
.steps li::before{
  content:"0" counter(s);position:absolute;left:-15px;top:0;
  width:30px;height:30px;display:grid;place-items:center;
  background:var(--ink);color:var(--gold);border:1px solid rgba(201,164,104,.4);border-radius:50%;
  font-size:11px;letter-spacing:.06em;font-family:var(--body);font-weight:600;
}
.steps h3{font-family:var(--display);font-size:18px;margin:2px 0 6px;color:var(--pearl);font-weight:400;letter-spacing:.02em}
.steps h3 .zh{font-family:var(--cjk);font-size:13px;color:var(--gold);margin-left:10px;letter-spacing:.08em}
.steps p{margin:0;color:var(--pearl-dim);font-size:14.5px}
/* ---------- sets ---------- */
.sets{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:1fr}
@media (min-width:620px){.sets{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.sets{grid-template-columns:repeat(3,1fr)}}
.set{position:relative;background:var(--ink-raised);display:flex;flex-direction:column;--cut:14px}
/* .set-media (the photo band) is retired: the five set images were 456x300
   composites lifted off the old NEWPAGES site and read as clip-art at any
   size. Until real per-set dish photos land, every set card is a text card -
   the same shape the a-la-carte pair on /menu has always used. Re-add
   .set-media above .set-body to bring photos back. */
.set-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.set-text .set-body{padding:28px 26px 30px}

/* ---------- venue rooms (/visit) ----------
   Real client photographs of the premises, so unlike the retired .set-media
   these get a photo band. Own classes rather than reusing .set so bringing
   set photos back later can't disturb this grid. */
.rooms{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:1fr}
@media (min-width:620px){.rooms{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.rooms{grid-template-columns:repeat(3,1fr)}}
.room{position:relative;background:var(--ink-raised);display:flex;flex-direction:column;--cut:14px}
.room-media{overflow:hidden;aspect-ratio:3/2;background:#000}
.room-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.8,.3,1)}
@media (hover:hover){.room:hover .room-media img{transform:scale(1.04)}}
.room-body{padding:22px 24px 26px;flex:1}
.room-body h3{margin:0 0 8px;color:var(--gold-dim)}
.room-body p{margin:0}
@media (prefers-reduced-motion:reduce){.room-media img{transition:none}}
.set h3{font-family:var(--display);font-size:19px;font-weight:400;margin:0;color:var(--pearl);letter-spacing:.02em}
.set-text h3{color:var(--gold-dim)} /* after .set h3: equal specificity, order wins */
.set .zh{display:block;font-family:var(--cjk);font-size:13px;color:var(--gold);letter-spacing:.1em;margin-top:5px}
.set p{color:var(--pearl-dim);font-size:14px;margin:12px 0 0}
.zh-copy{font-family:var(--cjk);color:var(--pearl-dim);font-size:13px;letter-spacing:.02em;margin:8px 0 0;line-height:1.7}
/* ---------- chef ---------- */
.chef{background:var(--ink-raised);border-block:1px solid rgba(201,164,104,.18)}
.chef-grid{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:820px){.chef-grid{grid-template-columns:.8fr 1.2fr}}
.chef-portrait{position:relative;max-width:380px;margin-inline:auto;width:100%;isolation:isolate}
.chef-portrait img{width:100%;background:transparent}
.chef-portrait::after{
  /* the chef photo is an opaque rectangle with no transparent margin, so the
     glow has to sit BELOW the image box to be visible at all. Inside the
     box it was always fully covered by opaque photo pixels */
  content:"";position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);
  width:72%;height:20%;border-radius:50%;filter:blur(28px);
  background:radial-gradient(closest-side,rgba(201,164,104,.38),transparent 70%);z-index:-1;
}
.sig{font-family:var(--display);color:var(--gold-dim);font-size:15px;letter-spacing:.16em;margin-top:22px;text-transform:uppercase}
.sig .zh{font-family:var(--cjk);color:var(--gold);letter-spacing:.14em;margin-left:10px;text-transform:none}
blockquote{
  margin:0 0 22px;padding-left:22px;border-left:2px solid var(--gold);
  font-family:var(--display);font-size:clamp(17px,2.2vw,23px);line-height:1.5;color:var(--pearl);
}
/* ---------- visit ---------- */
/* align-items:center (not the grid default of stretch) so the shorter
   column - the nap list, three short rows - doesn't get stretched to match
   the taller photo+CTA column and leave a dead empty gap under its last
   item. Matches .split and .chef-grid, the site's other two-column
   image+text sections, both of which already center this way. */
.visit-grid{display:grid;gap:clamp(24px,4vw,52px);align-items:center}
@media (min-width:820px){.visit-grid{grid-template-columns:1fr 1fr}}
.nap{list-style:none;margin:0;padding:0}
.nap li{padding:20px 0;border-bottom:1px solid rgba(201,164,104,.16);display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:start}
.nap li:first-child{padding-top:0}
.nap li:last-child{padding-bottom:0;border-bottom:0} /* a rule with nothing under it read as an unfinished list */
.nap img{width:22px;height:22px;opacity:.85;margin-top:3px}
.nap .lbl{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.nap .val{margin:0;color:var(--pearl);font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.nap a{color:var(--pearl);text-decoration:none;border-bottom:1px solid rgba(201,164,104,.45);position:relative}
.nap a::before{content:"";position:absolute;top:-13px;bottom:-13px;left:-3px;right:-3px}
@media (hover:hover){.nap a:hover{color:var(--gold-lit);border-bottom-color:var(--gold-lit)}}
.needs{
  border:1px dashed rgba(201,164,104,.55);background:rgba(184,64,42,.07);
  padding:14px 16px;margin:18px 0 0;font-size:13px;color:var(--gold-lit);line-height:1.55;
}
.needs strong{color:var(--broth);font-weight:700;letter-spacing:.06em}
/* ---------- footer ---------- */
footer{border-top:1px solid rgba(201,164,104,.2);padding:44px 0 40px;background:var(--ink)}
.foot{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}
.foot-links{display:flex;flex-wrap:wrap;gap:18px}
.foot-links a{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--pearl-dim);text-decoration:none;position:relative}
.foot-links a::before{content:"";position:absolute;top:-13px;bottom:-13px;left:-4px;right:-4px}
@media (hover:hover){.foot-links a:hover{color:var(--gold-lit)}}
.legal{font-size:11.5px;color:rgba(237,231,220,.55);margin:22px 0 0;line-height:1.7}
/* ---------- language switcher ----------
   Below 720px this lives inside the mobile nav dropdown: it's a sibling of
   .nav in the header markup, so `.nav.is-open ~ .langsw` reveals it in the
   same panel without any extra JS. At >=720px it returns to the header row. */
.langsw{
  display:none;order:6;width:100%;align-items:center;justify-content:center;gap:3px;
  padding-top:12px;margin-top:8px;border-top:1px solid rgba(201,164,104,.10);
}
.nav.is-open ~ .langsw{display:flex}
.langsw a{
  font-family:var(--body);font-size:12px;letter-spacing:.06em;text-decoration:none;
  color:var(--pearl-dim);padding:6px 5px;position:relative;
}
.langsw a[aria-current="true"]{color:var(--gold-lit)}
.langsw a::before{content:"";position:absolute;top:-9px;bottom:-9px;left:-2px;right:-2px}
@media (hover:hover){.langsw a:not([aria-current]):hover{color:var(--pearl)}}
.langsw .sep{color:rgba(201,164,104,.35);font-size:10px}
@media (min-width:720px){
  .langsw{
    display:flex;order:3;width:auto;justify-content:flex-start;
    padding-top:0;margin-top:0;margin-left:28px;border-top:0;
  }
}


.rv{opacity:0;transform:translateY(8px)}
.rv.in{opacity:1;transform:none;transition:opacity .32s ease-out,transform .32s ease-out}