/*
 * The layout every template shares. Each template's src/theme.css follows this
 * file in /site.css and sets the brand tokens below, its fonts and its home page.
 */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #222222;
  --muted: #5f5f5f;
  --soft: #f3f3f3;
  --line: #dddddd;
  --accent: #222222;
  --accent-ink: #ffffff;
  --highlight: #ffe58a;
  --focus: #222222;
  --dark: #222222;
  --dark-ink: #f5f5f5;
  --dark-muted: #c8c8c8;
  --display: Georgia, serif;
  /* The system's Latin face first, so digits, dashes and Latin read as Latin;
     Chinese falls through to the system's Chinese face. */
  --heading:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang TC',
    'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --body:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang TC',
    'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --radius: 4px;
  --radius-large: 8px;
  --gutter: clamp(16px, 5vw, 64px);
  --width: 1240px;
  /* Shape and density: each template's design language sets these. Sharp or
     round, bare photos or boxed cards, square or portrait product photos. */
  --button-radius: var(--radius);
  --input-radius: var(--radius);
  --chip-radius: 999px;
  --badge-radius: var(--radius);
  --photo-radius: var(--radius-large);
  --photo-ratio: 1;
  --card-radius: var(--radius-large);
  --card-padding: 0;
  --card-background: transparent;
  --card-border: none;
  --card-shadow: none;
  --columns: 4;
  --columns-tablet: 2;
  --columns-phone: 2;
  --grid-gap: 40px 24px;
  --grid-gap-phone: 32px 16px;
  --price-color: inherit;
  --price-weight: 400;
  --section-space: clamp(48px, 8vw, 96px);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.75 var(--body);
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input,
select,
summary,
label {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
svg {
  display: block;
}
h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: var(--heading);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 {
  font-size: clamp(30px, 4vw, 46px);
}
h2 {
  font-size: clamp(23px, 2.4vw, 30px);
}
h3 {
  font-size: 18px;
}
p {
  text-wrap: pretty;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
::selection {
  background: var(--highlight);
  color: var(--ink);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  transform: translateY(-160%);
}
.skip:focus-visible {
  transform: none;
}

/* Header */
.announcement {
  margin: 0;
  padding: 8px var(--gutter);
  background: var(--dark);
  color: var(--dark-ink);
  font-size: 13px;
  text-align: center;
}
.header {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
  /* --header-background colours the header edge to edge (an outset border
     image paints past the sides without widening the page). */
  border-image: linear-gradient(var(--header-background, transparent) 0 0) fill
    0 / 0 / 0 100vmax;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: var(--radius);
}
.wordmark > svg {
  width: 36px;
  height: 36px;
  color: var(--accent);
}
.wordmark-name {
  display: grid;
  line-height: 1.1;
}
.wordmark-name b {
  font-family: var(--display);
  font-weight: inherit;
  font-size: 22px;
}
.wordmark-name small {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.menu {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--button-radius);
  background: transparent;
}
.menu svg {
  width: 18px;
  height: 18px;
}
.navigation {
  display: flex;
  gap: 4px 28px;
  margin: 0 auto;
}
.navigation a,
.header-tools a {
  padding: 6px 0;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.navigation a:hover,
.navigation a[aria-current='page'] {
  border-bottom-color: currentColor;
}
.header-tools {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-tools a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-tools a:hover {
  color: var(--accent);
}
.header-tools svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
#bag-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Header layouts. The markup stays the same (wordmark, menu button, navigation,
   tools); a class on .header picks how they sit:
   .header--center  wordmark centred, links in a row below (boutiques, restaurants)
   .header--split   links left, wordmark centred, tools right (fashion)
   .header--bar     wordmark, a search box and tools, then a category bar (big shops)
   .header--overlay on a home page that opens with a .cover photo, the header
                    sits on the photo in its light ink
   On tablets and phones all of them put the menu button left, the wordmark in
   the middle and the bag right; .header--phone-center does that alone. */
.header--center,
.header--split,
.header--bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
}
.header--center {
  grid-template-areas: '. mark tools' 'nav nav nav';
  row-gap: 12px;
  padding-bottom: 14px;
}
.header--split {
  grid-template-areas: 'nav mark tools';
}
.header--bar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'mark search tools' 'nav nav nav';
  row-gap: 16px;
  padding-bottom: 0;
}
:is(.header--center, .header--split, .header--bar) .wordmark {
  grid-area: mark;
  justify-self: center;
}
.header--bar .wordmark {
  justify-self: start;
}
:is(.header--center, .header--split, .header--bar) .navigation {
  grid-area: nav;
  margin: 0;
}
.header--center .navigation {
  justify-self: center;
}
.header--split .navigation {
  justify-self: start;
}
:is(.header--center, .header--split, .header--bar) .header-tools {
  grid-area: tools;
  justify-self: end;
}
.header--bar .navigation {
  justify-content: center;
  padding: 12px 0;
  /* The category bar runs edge to edge. */
  border-image: linear-gradient(var(--bar, var(--soft)) 0 0) fill 0 / 0 / 0
    100vmax;
}
.header-search {
  grid-area: search;
  display: flex;
  justify-self: center;
  width: min(100%, 520px);
}
.header-search input {
  min-height: 42px;
  border-radius: var(--input-radius) 0 0 var(--input-radius);
  border-right: 0;
}
.header-search button {
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 0 var(--input-radius) var(--input-radius) 0;
  background: var(--accent);
  color: var(--accent-ink);
  white-space: nowrap;
}
:root:has(.cover) .header--overlay {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  color: var(--cover-ink, #fff);
}
:root:has(.cover) .header--overlay .wordmark > svg,
:root:has(.cover) .header--overlay .header-tools a:hover {
  color: inherit;
}
:root:has(.cover) .header--overlay .wordmark-name small {
  color: inherit;
  opacity: 0.85;
}
:root:has(.cover) .header--overlay .menu {
  border-color: currentColor;
}
/* An opened menu needs the page behind it to stay readable. */
:root:has(.cover) .header--overlay:has(.navigation.open) {
  background: var(--paper);
  color: var(--ink);
}

/* Buttons and links */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 26px;
  border: 1px solid var(--accent);
  border-radius: var(--button-radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.button:hover:not(:disabled) {
  background: var(--paper);
  color: var(--accent);
}
.button.outline {
  background: transparent;
  color: var(--accent);
}
.button.outline:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-ink);
}
.text-link {
  display: inline-block;
  padding: 2px 0;
  border-bottom: 1px solid currentColor;
  font-weight: 500;
}
.text-link:hover {
  color: var(--accent);
  border-bottom-width: 2px;
}

/* Sections */
main {
  display: block;
  min-height: 50vh;
}
.page-loading {
  max-width: var(--width);
  margin: 0 auto;
  padding: 80px var(--gutter);
  color: var(--muted);
}
.section {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.section-heading h2 {
  margin: 0;
}
.page-hero {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) var(--gutter) 0;
}
.page-hero h1 {
  max-width: 18em;
  margin-bottom: 12px;
}
.page-hero p {
  max-width: 34em;
  color: var(--muted);
  margin-bottom: 0;
}
.page-hero + .section {
  padding-top: 40px;
}
/* Long-form pages keep the title on the same column as the text, at a size that fits it. */
.page-hero:has(+ .body-copy) {
  max-width: calc(720px + 2 * var(--gutter));
}
.page-hero:has(+ .body-copy) h1 {
  font-size: clamp(28px, 3.2vw, 38px);
}
.empty {
  padding: 48px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-large);
  text-align: center;
  color: var(--muted);
}
.empty p {
  margin-bottom: 16px;
}
.note {
  font-size: 14px;
  color: var(--muted);
}
.error,
.form-error {
  color: #a3261b;
  font-weight: 500;
}
.form-error:empty {
  display: none;
}
.kicker {
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--muted);
}

/* A photo across the first screen with the headline on it. The page's first
   section; with .header--overlay the header sits on it. --cover-height,
   --cover-align (start, center, end), --cover-scrim and --cover-ink tune it. */
.cover {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: var(--cover-align, end);
  min-height: var(--cover-height, min(88svh, 820px));
  padding: clamp(96px, 14vw, 140px) var(--gutter) clamp(32px, 6vw, 72px);
  overflow: hidden;
  color: var(--cover-ink, #fff);
}
.cover > img,
.cover > picture img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cover-focus, center);
}
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(
    --cover-scrim,
    linear-gradient(to top, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0) 60%)
  );
}
.cover-content {
  width: 100%;
  max-width: var(--width);
  margin: 0 auto;
}
/* Sections that run edge to edge drop the page width and gutters. */
.bleed {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Swipeable rows. [data-carousel] on a box holding a .carousel-track: banners
   (one slide at a time, dots, optional data-interval in ms to advance on their
   own, paused by hover, focus or the pause button) or data-carousel="row" for
   a row of cards with arrows. site.js adds the controls. */
.carousel {
  position: relative;
  min-width: 0;
}
.carousel-track {
  position: relative;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carousel-track::-webkit-scrollbar {
  display: none;
}
.carousel-track > * {
  flex: 0 0 var(--slide-width, 100%);
  min-width: 0;
  scroll-snap-align: start;
}
.carousel-track.product-grid {
  display: flex;
  --slide-width: calc((100% - (var(--columns) - 1) * 24px) / var(--columns));
  column-gap: 24px;
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.carousel-controls button {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--button-radius);
  background: var(--paper);
  color: var(--ink);
}
.carousel-controls button:hover:not(:disabled) {
  border-color: var(--ink);
}
.carousel-controls svg {
  width: 18px;
  height: 18px;
}
.carousel-dots {
  display: flex;
}
.carousel-controls .carousel-dots button {
  min-width: 26px;
  height: 26px;
  border: 0;
  background: none;
}
.carousel-dots button::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
  transition: width 0.2s;
}
.carousel-dots button[aria-current='true']::before {
  width: 22px;
  background: var(--ink);
}
/* .carousel--over puts the arrows on the slides' edges, dots and pause below. */
.carousel--over {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.carousel--over .carousel-track {
  grid-area: 1 / 1 / 2 / 4;
}
.carousel--over .carousel-controls {
  display: contents;
}
.carousel--over :is(.carousel-prev, .carousel-next) {
  grid-row: 1;
  align-self: center;
  z-index: 1;
  margin: 0 12px;
  border-color: transparent;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
}
.carousel--over .carousel-prev {
  grid-column: 1;
}
.carousel--over .carousel-next {
  grid-column: 3;
}
.carousel--over :is(.carousel-dots, .carousel-pause) {
  grid-row: 2;
  grid-column: 2;
  justify-self: center;
  margin-top: 12px;
}
.carousel--over .carousel-pause {
  justify-self: end;
}

/* Product cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--grid-gap);
}
.product-card {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: var(--card-padding);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-background);
  box-shadow: var(--card-shadow);
}
.product-photo {
  position: relative;
  aspect-ratio: var(--photo-ratio);
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: var(--photo-radius);
  background: var(--soft);
}
.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
/* In grids without gaps the focused card's ring stays above its neighbours. */
.product-card:focus-visible {
  position: relative;
  z-index: 1;
}
.product-card:hover .product-photo img {
  transform: scale(1.03);
}
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 2px 10px;
  border-radius: var(--badge-radius);
  background: var(--paper);
  font-size: 13px;
}
.product-card h2,
.product-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}
.product-card:hover h2,
.product-card:hover h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.product-en {
  margin: 0;
  font-family: var(--display);
  font-size: 13px;
  color: var(--muted);
}
.product-meta {
  margin: 4px 0 8px;
  font-size: 14px;
  color: var(--muted);
}
.product-price {
  margin: 0;
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--price-weight);
  color: var(--price-color);
}

/* Shop */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-nav a {
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: var(--chip-radius);
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.filter-nav a:hover {
  border-color: var(--ink);
}
.filter-nav a[aria-current='page'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.search {
  display: flex;
  min-width: min(100%, 320px);
}
.search input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--input-radius) 0 0 var(--input-radius);
  background: var(--paper);
}
.search button {
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: 0 var(--input-radius) var(--input-radius) 0;
  background: var(--accent);
  color: var(--accent-ink);
}
.search button:hover {
  background: var(--paper);
  color: var(--accent);
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 48px;
  color: var(--muted);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Product page */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--muted);
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: 4px;
}
.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.product-detail .product-photo {
  margin: 0;
}
.product-info h1 {
  margin-bottom: 2px;
}
.product-info .product-en {
  font-size: 15px;
}
.product-info .product-price {
  margin: 16px 0;
  font-size: 26px;
}
.product-description {
  color: var(--muted);
}
#add-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 16px;
  margin: 28px 0 12px;
}
#add-product .button {
  grid-column: 1 / -1;
}
label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}
input,
select {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  /* At least 3:1 against the page, so the field's edge can be seen. */
  border: 1px solid color-mix(in srgb, var(--ink) 45%, var(--paper));
  border-radius: var(--input-radius);
  background-color: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
}
input:hover,
select:hover {
  border-color: var(--muted);
}
input[aria-invalid='true'],
input:user-invalid {
  border-color: #a3261b;
}
.product-details {
  margin: 28px 0 20px;
  border-top: 1px solid var(--line);
}
.product-details > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.product-details dt {
  font-weight: 600;
}
.product-details dd {
  margin: 0;
  text-wrap: pretty;
  color: var(--muted);
}
details {
  border-bottom: 1px solid var(--line);
}
summary {
  padding: 14px 0;
  cursor: pointer;
  font-weight: 600;
}
summary:hover {
  color: var(--accent);
}
details p {
  margin-bottom: 16px;
  color: var(--muted);
}

/* Cart and checkout */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.cart-line {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line:first-child {
  border-top: 1px solid var(--line);
}
.cart-line img,
.cart-photo {
  width: 112px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--soft);
}
.cart-name {
  min-width: 0;
}
.cart-line h2 {
  margin-bottom: 2px;
  font-size: 17px;
}
.cart-line p {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 14px;
}
.cart-line label {
  max-width: 120px;
}
.cart-price {
  display: grid;
  justify-items: end;
  align-content: space-between;
  gap: 12px;
}
.cart-price p {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  font-variant-numeric: lining-nums tabular-nums;
}
.cart-price button,
.account-actions button,
.shipping-form button,
#notice button {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  font-size: 14px;
  min-height: 44px;
  min-width: 44px;
}
.cart-price button:hover,
.account-actions button:hover,
.shipping-form button:hover {
  color: var(--accent);
  border-bottom-width: 2px;
}
.summary {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-large);
  background: var(--soft);
}
.summary h2 {
  margin: 0;
  font-size: 20px;
}
.summary .note {
  margin: 0;
}
.totals {
  margin: 0;
  display: grid;
  gap: 8px;
}
.totals div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.totals dt {
  color: var(--muted);
}
.totals dd {
  margin: 0;
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
}
.totals .total {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 18px;
}
.totals .total dt {
  color: var(--ink);
  font-weight: 600;
}
.checkout-form,
.shipping-form,
.account-form {
  display: grid;
  gap: 14px;
}
.checkout-form p {
  margin: 0;
}
.shipping-form #store-delivery,
.shipping-form #home-delivery {
  display: grid;
  gap: 14px;
}
[hidden] {
  display: none !important;
}
#confirm-shipping {
  justify-self: start;
}
#shipping-status {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.demo-result {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--paper);
}
.demo-result p {
  margin: 4px 0 8px;
  color: var(--muted);
}

/* Account, orders and long-form pages */
.body-copy {
  max-width: calc(720px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 40px var(--gutter) clamp(56px, 8vw, 96px);
}
.body-copy > img,
.body-copy > .lx-picture > img {
  width: 100%;
  margin-bottom: 32px;
  border-radius: var(--radius-large);
}
.body-copy h2 {
  margin: 40px 0 12px;
}
.body-copy > h2:first-child,
.body-copy > img + h2,
.body-copy > .lx-picture + h2 {
  margin-top: 0;
}
.body-copy p {
  color: var(--muted);
}
.body-copy .lead {
  color: var(--ink);
  font-size: 18px;
}
.body-copy .button {
  margin-top: 16px;
}
.order-id {
  overflow-wrap: anywhere;
  font-variant-numeric: lining-nums tabular-nums;
}
.order-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.order-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.order-list a:hover .order-id {
  text-decoration: underline;
}
.order-list .amount {
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
}
.account-form {
  max-width: 420px;
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0;
}
.values-grid h3 {
  margin-bottom: 6px;
}
.values-grid p {
  margin: 0;
  font-size: 15px;
}
.faq {
  border-top: 1px solid var(--line);
  margin-bottom: 40px;
}
.steps {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.3;
  color: var(--accent);
}
.steps h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.steps p {
  margin: 0;
}

/* An article's "文中提到的東西". */
.article-products {
  margin: 48px 0 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.article-products .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 16px;
}
/* Cards inside an article keep their own colours, not the article's muted text. */
.article-products .product-price {
  color: var(--price-color);
}
.article-products .product-card h3 {
  color: var(--ink);
}

/* Journal */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
}
.journal-card {
  display: grid;
  align-content: start;
  min-width: 0;
}
.journal-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 16px;
  border-radius: var(--photo-radius);
}
.journal-card h2,
.journal-card h3 {
  margin-bottom: 6px;
  font-size: 19px;
}
.journal-card:hover h2,
.journal-card:hover h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.journal-card p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* Footer */
footer {
  --focus: var(--highlight);
  background: var(--dark);
  color: var(--dark-ink);
}
.footer-inner {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 64px var(--gutter) 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
}
footer .wordmark > svg {
  color: var(--highlight);
}
footer .wordmark-name small,
footer p {
  color: var(--dark-muted);
}
footer nav {
  display: grid;
  align-content: start;
  gap: 8px;
}
footer nav h2 {
  margin: 0 0 6px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-muted);
}
footer nav a {
  justify-self: start;
}
footer nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--dark-ink) 22%, transparent);
  font-size: 13px;
  color: var(--dark-muted);
}

/* The status line for add-to-bag, removals and other short confirmations. */
#notice {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: var(--radius-large);
  background: var(--dark);
  color: var(--dark-ink);
  font-size: 15px;
  transform: translateX(-50%);
  --focus: var(--highlight);
}
#notice:empty {
  display: none;
}
#notice button {
  color: var(--highlight);
}

@media (max-width: 960px) {
  .product-grid {
    grid-template-columns: repeat(var(--columns-tablet), minmax(0, 1fr));
  }
  .journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cart-layout,
  .product-detail {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
/* Tablets and phones fold the navigation into the menu button: Chinese link
   names are long, and kept whole they do not fit beside the wordmark. */
@media (max-width: 900px) {
  .header {
    flex-wrap: wrap;
    gap: 12px 16px;
    position: relative;
  }
  .menu {
    display: inline-flex;
    order: 2;
    margin-left: 0;
    padding: 6px 10px;
  }
  .header-tools {
    order: 1;
    margin-left: auto;
    gap: 14px;
  }
  .navigation {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid var(--line);
  }
  .navigation.open {
    display: flex;
  }
  .navigation a {
    padding: 10px 0;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: 'menu mark tools' 'nav nav nav';
    align-items: center;
    row-gap: 0;
    padding-bottom: 14px;
  }
  .header--bar {
    grid-template-areas: 'menu mark tools' 'search search search' 'nav nav nav';
    row-gap: 12px;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center)
    .menu {
    grid-area: menu;
    justify-self: start;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center)
    .wordmark {
    grid-area: mark;
    justify-self: center;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center)
    .header-tools {
    grid-area: tools;
    justify-self: end;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center)
    .navigation {
    grid-area: nav;
    justify-self: stretch;
    margin-top: 12px;
  }
  .header--bar .navigation {
    justify-content: start;
    border-image: none;
  }
}
@media (max-width: 760px) {
  .section-heading {
    flex-direction: column;
    align-items: start;
  }
  .journal-grid,
  .values-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-grid,
  .article-products .product-grid {
    grid-template-columns: repeat(var(--columns-phone), minmax(0, 1fr));
    gap: var(--grid-gap-phone);
  }
  .cart-line {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 14px;
  }
  .cart-line img,
  .cart-photo {
    width: 80px;
  }
  .cart-price {
    grid-column: 2;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .order-list a {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .order-list a > span:nth-child(2) {
    grid-row: 2;
    color: var(--muted);
  }
}
.purchase-steps,
.purchase-help,
.help-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.purchase-steps {
  max-width: var(--max, 1280px);
  margin: 0 auto;
  padding: 12px var(--gutter, 24px);
}
.purchase-steps a,
.purchase-help a,
.help-topics a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: 4px;
}
.purchase-steps [aria-current],
.help-topics [aria-current] {
  font-weight: 700;
}
.purchase-help {
  margin-block: 20px;
}
.checkout-details {
  min-width: 0;
}
.checkout-details > h2 {
  margin-bottom: 12px;
}
.checkout-form > h2 {
  margin-block: 32px 12px;
}
.checkout-final-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  font-size: 18px;
}
.checkout-items {
  list-style: none;
  padding: 0;
}
.checkout-items li {
  display: grid;
  gap: 4px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}
.checkout-items li span {
  color: var(--muted);
  font-size: 14px;
}
.checkout-layout .summary {
  align-self: start;
}
.cart-name h2 a {
  color: inherit;
  text-decoration: none;
}
.cart-name h2 a:hover {
  text-decoration: underline;
}
.cart-image-link {
  display: block;
  align-self: start;
}
.help-topic {
  margin-top: 36px;
  scroll-margin-top: 24px;
}
.help-links {
  padding-left: 24px;
}
.help-links a {
  display: inline-block;
  padding-block: 10px;
}
.guide-preview:not(form) {
  display: block;
}
.guide-preview .button {
  margin-top: 16px;
}
.guide-preview-section {
  border-top: 1px solid var(--line);
}
.guide-preview-section .button {
  margin-top: 16px;
}
.guide-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.guide-content {
  min-width: 0;
}
.guide-return {
  padding: 20px var(--gutter, 24px);
  max-width: var(--max, 1280px);
  margin: auto;
}
.order-list time,
.order-list small,
.order-list .order-id {
  display: block;
}
.order-detail address {
  font-style: normal;
  overflow-wrap: anywhere;
}
.order-detail .order-id {
  overflow-wrap: anywhere;
}
.delivery-steps {
  padding-left: 1.25em;
  line-height: 1.9;
}
.delivery-steps time {
  color: var(--muted);
  font-size: 0.9em;
}
@media (max-width: 760px) {
  .checkout-layout .summary {
    order: -1;
  }
  .checkout-final-total {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  html,
  .carousel-track {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (max-width: 420px) {
  .header {
    column-gap: 12px;
  }
  .header-tools {
    gap: 10px;
  }
  .wordmark > svg {
    width: 30px;
    height: 30px;
  }
  .wordmark-name b {
    font-size: 19px;
  }
  .menu {
    font-size: 14px;
    padding: 6px 8px;
  }
}
/* The narrowest phones keep the menu icon (the button keeps its name for
   screen readers) and give the wordmark whatever the menu and bag leave. */
@media (max-width: 360px) {
  .menu {
    gap: 0;
    font-size: 0;
  }
  :is(.header--center, .header--split, .header--bar, .header--phone-center) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

/* Product-dependent slots stay hidden until real backend data has resolved. */
[data-lx-product]:empty {
  display: none;
}
[hidden] {
  display: none !important;
}
.custom-logo {
  max-width: 160px;
  max-height: 56px;
  width: auto;
  object-fit: contain;
}
.wordmark:has(.custom-logo) > svg {
  display: none;
}

/* CMS wrappers preserve the template's layout without inline styles. */
.lx-preview-field,
.lx-picture {
  display: contents;
}
.lx-preview-field.lx-preview-focus {
  display: inline;
}
.restaurant-booking {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid currentColor;
  scroll-margin-top: 120px;
}
.restaurant-menu {
  display: grid;
  gap: 20px;
  margin: 24px 0;
}
.restaurant-menu-item {
  padding: 20px;
  border: 1px solid var(--line, #ddd);
}
.restaurant-menu-item h3 {
  margin: 0 0 8px;
}
.restaurant-menu-item p {
  font-size: 14px;
}
.restaurant-menu-item label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0;
}
.restaurant-menu-item input {
  width: 76px;
  min-height: 44px;
}
.restaurant-menu-item.is-sold-out {
  opacity: 0.6;
}
.restaurant-sold-out {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  font-size: 13px;
  font-weight: 700;
}
.restaurant-ordering form > label,
.restaurant-ordering form > div > label {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
.restaurant-ordering select,
.restaurant-ordering input {
  font: inherit;
  max-width: 100%;
  padding: 10px;
  border: 1px solid var(--line, #aaa);
  background: var(--paper, #fff);
  color: inherit;
  border-radius: 0;
}
.restaurant-receipt-items {
  list-style: none;
  padding: 0;
}
.restaurant-receipt-items li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line, #ddd);
}
.restaurant-total {
  font-size: 20px;
  font-weight: 700;
}
.restaurant-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.restaurant-receipt-items li > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.restaurant-receipt-items small {
  display: block;
  font-size: 13px;
  margin-top: 6px;
}
.restaurant-receipt-items li > span {
  white-space: nowrap;
}

/*
 * TEN SEATS: a ten-seat counter at night, built like a refined Taiwanese
 * restaurant site. The counter photographed in the dark across the first
 * screen, the name hanging from the top edge as a red seal, titles set
 * vertically (read right to left) or as spaced characters with hairlines
 * between them and a small English line, thin outline buttons, no radius,
 * no shadows, a lot of air. Dark sections (the night photo, the indigo menu
 * card, the takeaway list on sumi black) alternate with washi-paper ones.
 * Marcellus (SIL OFL 1.1, notice in media-fonts.json) sets English, times and
 * prices; Chinese titles use the visitor's own Ming serif, body text the
 * system sans.
 */
@font-face {
  font-family: 'Marcellus';
  src: url('/fonts/marcellus-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #f2eee5;
  --ink: #1f1c18;
  --muted: #5c564d;
  --soft: #e8e1d3;
  --line: #d6cdbb;
  --rule: #b9ae99;
  --accent: #23314f;
  --accent-ink: #f2eee5;
  --highlight: #d2b884;
  --focus: #23314f;
  --dark: #151412;
  --dark-ink: #ece6da;
  --dark-muted: #a9a193;
  --dark-rule: rgb(236 230 218 / 0.16);
  --board: #1b2540;
  --board-muted: #a9b0c2;
  --seal: #9a2b33;
  --lacquer: #1a1816;
  --display: 'Marcellus', 'Times New Roman', serif;
  /* Chinese titles in the system's Ming serif; Marcellus first so digits and
     Latin in a title read as Latin. */
  --mincho:
    'Songti TC', 'Noto Serif TC', 'Source Han Serif TC', 'Noto Serif CJK TC',
    'PMingLiU', 'MingLiU', serif;
  --heading: 'Marcellus', var(--mincho);
  --radius: 0;
  --radius-large: 0;
  --button-radius: 0;
  --input-radius: 0;
  --chip-radius: 0;
  --badge-radius: 0;
  --photo-radius: 0;
  --card-radius: 0;
  --photo-ratio: 1;
  --columns: 3;
  --columns-tablet: 2;
  --columns-phone: 2;
  --grid-gap: 64px 40px;
  --grid-gap-phone: 40px 16px;
  --section-space: clamp(80px, 12vw, 160px);
  /* Full-bleed bands keep their content on the page's width. */
  --frame: max(var(--gutter), calc((100% - var(--width)) / 2));
}
body {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}
h1,
h2,
h3 {
  font-weight: 400;
  letter-spacing: 0.08em;
  /* Titles break at their punctuation, not inside a name. */
  word-break: keep-all;
}
.announcement {
  padding: 9px var(--gutter);
  border-bottom: 1px solid var(--dark-rule);
  font-size: 12.5px;
  letter-spacing: 0.14em;
}

/* Header: a dark band on every page; on the home page it lies on the photo. */
.header {
  --focus: var(--highlight);
  max-width: none;
  align-items: flex-start;
  padding: 0 var(--frame) 20px;
  background: var(--dark);
  color: var(--dark-ink);
}
:root:has(.cover) .header--overlay {
  background: none;
}
/* The seal, at the top of every page and again in the footer: the mark, the
   name read top to bottom, the English name in a narrow column beside it. */
.header .wordmark,
.footer-brand .wordmark {
  /* A grid, not a flex column: Chrome sizes vertical text in a grid steadily. */
  display: inline-grid;
  justify-items: center;
  gap: 12px;
  padding: 16px 11px 15px;
  background: var(--seal);
  color: #f6efe4;
}
.header .wordmark > svg,
.footer-brand .wordmark > svg {
  width: 24px;
  height: 24px;
  color: inherit;
}
.header .wordmark-name,
.footer-brand .wordmark-name {
  writing-mode: vertical-rl;
  row-gap: 5px;
  line-height: 1;
}
.header .wordmark-name small,
.footer-brand .wordmark-name small,
:root:has(.cover) .header--overlay .wordmark-name small {
  grid-row: 1;
  margin: 0 0 -0.36em;
  color: inherit;
  opacity: 1;
  font-family: var(--mincho);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.34em;
}
.header .wordmark-name b,
.footer-brand .wordmark-name b {
  grid-row: 2;
  font-size: 9.5px;
  letter-spacing: 0.26em;
}
.header .header-tools a:hover {
  color: var(--highlight);
}
#bag-count {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: 11.5px;
  letter-spacing: 0;
}
/* Wide screens: the links are vertical too, read right to left like the titles. */
@media (min-width: 901px) {
  .header .navigation {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 30px;
    margin: 30px 0 0 auto;
  }
  .header .navigation a {
    writing-mode: vertical-rl;
    padding: 0 6px 0 0;
    border-bottom: 0;
    border-right: 1px solid transparent;
    font-family: var(--mincho);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.3em;
    transition: border-color 0.15s;
  }
  .header .navigation a:hover,
  .header .navigation a[aria-current='page'] {
    border-right-color: currentColor;
  }
  .header .header-tools {
    margin-top: 27px;
  }
}

/* Buttons: thin outlines with spaced characters. */
.button {
  padding: 10px 34px;
  border-color: currentColor;
  background: transparent;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0.3em;
  /* Balances the space the last character carries. */
  text-indent: 0.3em;
}
.button:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
/* Adding to the bag and checking out are the two filled buttons. */
#add-product .button,
#demo-checkout,
.checkout-form .button {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
#add-product .button:hover:not(:disabled),
#demo-checkout:hover:not(:disabled),
.checkout-form .button:hover:not(:disabled) {
  background: transparent;
  color: var(--ink);
}
.text-link {
  padding: 2px 0 5px;
  font-weight: 400;
  letter-spacing: 0.16em;
}
.text-link:hover {
  color: inherit;
}

/* Section titles: spaced characters with hairlines between, a small English line. */
.ts-head {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-bottom: clamp(44px, 6vw, 84px);
  text-align: center;
}
.ts-spaced {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  font-family: var(--mincho);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: 0;
}
.ts-spaced span {
  padding: 0 0.5em;
}
.ts-spaced span + span {
  border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.ts-en {
  margin: 0;
  color: var(--muted);
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.24em;
}

/* Cover: the counter at night; the title on the dark wall at the right. */
.ts-cover {
  --cover-height: min(100svh, 900px);
  --cover-align: stretch;
  --cover-ink: #f6f1e7;
  --cover-scrim:
    linear-gradient(to bottom, rgb(13 12 11 / 0.62), rgb(13 12 11 / 0) 30%),
    linear-gradient(to left, rgb(13 12 11 / 0.74), rgb(13 12 11 / 0) 46%),
    linear-gradient(to top, rgb(13 12 11 / 0.8), rgb(13 12 11 / 0) 50%);
  --focus: var(--highlight);
  padding-top: clamp(176px, 15vw, 200px);
  padding-bottom: clamp(36px, 5vw, 64px);
  background: var(--dark);
}
.ts-cover .cover-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'tonight title';
  align-items: end;
  column-gap: 24px;
}
.ts-cover-title {
  grid-area: title;
  align-self: start;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  line-height: 1.25;
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.4);
}
.ts-cover-title span:not(.visually-hidden) {
  display: block;
}
.ts-cover-title span:first-child {
  font-size: min(clamp(46px, 5.6vw, 76px), 8.4svh);
  letter-spacing: 0.22em;
}
.ts-cover-title span:last-child {
  margin: 1.4em 0.55em 0 0;
  font-size: min(clamp(24px, 2.5vw, 34px), 4.4svh);
  letter-spacing: 0.34em;
}
.ts-tonight {
  grid-area: tonight;
  display: grid;
  justify-items: start;
}
.ts-tonight-state {
  display: grid;
  gap: 2px;
  margin: 0 0 26px;
}
.ts-tonight-state b {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.24em;
}
/* A lit lantern while dinner is ahead or under way; an unlit one otherwise. */
.ts-tonight-state b::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.ts-tonight-state .ts-on::before {
  border-color: #e9b264;
  background: #e9b264;
  box-shadow: 0 0 10px 2px rgb(233 178 100 / 0.55);
}
.ts-tonight-state > span {
  padding-left: 18px;
  font-size: 14px;
  letter-spacing: 0.12em;
}
.ts-when {
  white-space: nowrap;
}
.ts-cover .button {
  color: var(--cover-ink);
}
.ts-cover .button:hover:not(:disabled) {
  border-color: var(--cover-ink);
  background: var(--cover-ink);
  color: var(--ink);
}

/* The month's card on indigo: ten columns read right to left. */
.ts-board {
  --muted: var(--board-muted);
  --focus: var(--highlight);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'courses head' 'foot foot';
  column-gap: clamp(24px, 3.4vw, 56px);
  padding: var(--section-space) var(--frame);
  background: var(--board);
  color: var(--dark-ink);
}
.ts-board-head {
  grid-area: head;
  writing-mode: vertical-rl;
  padding-left: clamp(20px, 3vw, 44px);
  border-left: 1px solid var(--dark-rule);
}
.ts-board-head h2 {
  margin: 0;
  font-family: var(--mincho);
  font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1.3;
  letter-spacing: 0.3em;
}
.ts-board-head .ts-en {
  margin: 0 12px 0 0;
  color: var(--highlight);
}
.ts-board-scroll {
  grid-area: courses;
  overflow-x: auto;
  overflow-y: hidden;
  writing-mode: vertical-rl;
  scrollbar-width: thin;
  scrollbar-color: rgb(210 184 132 / 0.55) transparent;
}
.ts-board-scroll:focus-visible {
  outline-offset: 6px;
}
.ts-courses {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  height: 30em;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* In vertical writing a flex row runs top to bottom: number, course, dish, and
   the origin at the foot of the column. */
.ts-courses li {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 54px;
  padding: 0 clamp(6px, 1vw, 14px);
}
.ts-courses li + li {
  border-right: 1px solid var(--dark-rule);
}
.ts-no,
.ts-courses b,
.ts-courses small {
  flex: none;
}
.ts-no {
  color: var(--highlight);
  font-family: var(--mincho);
  font-size: 18px;
  line-height: 1;
}
.ts-courses b {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.3em;
}
/* A long dish breaks at its ideographic space into a second line, as on a hand-written card. */
.ts-dish {
  font-family: var(--mincho);
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.3;
  letter-spacing: 0.12em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.ts-courses small {
  margin-top: auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
.ts-board-foot {
  grid-area: foot;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 18px;
  border-top: 1px solid var(--dark-rule);
  color: var(--muted);
  font-size: 14px;
}
.ts-board-foot p {
  max-width: 46em;
  margin: 0;
}
.ts-board-hint {
  display: none;
}

/* Booking: two columns between hairlines, then the house rules. */
.ts-booking,
.ts-notes {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
}
.ts-booking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--rule);
}
.ts-booking-col {
  padding: clamp(36px, 4.4vw, 60px) clamp(20px, 4.4vw, 64px);
}
.ts-booking-col + .ts-booking-col {
  border-left: 1px solid var(--rule);
}
.ts-booking-col h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
}
.ts-booking-col h3:not(:first-child) {
  margin-top: clamp(32px, 4vw, 44px);
}
.ts-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 14px;
  margin: 0;
  line-height: 1.25;
}
.ts-figure b,
.ts-opens b {
  font-family: var(--display);
  font-size: clamp(38px, 4.2vw, 56px);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.ts-figure span {
  color: var(--muted);
  font-family: var(--heading);
  font-size: 17px;
}
.ts-opens {
  margin: 0;
  font-family: var(--heading);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.12em;
}
.ts-opens b {
  margin: 0 0.3em;
}
.ts-figure + p:not(.ts-figure),
.ts-opens + p {
  max-width: 30em;
  margin: 14px 0 0;
  color: var(--muted);
}
.ts-figure + .ts-figure {
  margin-top: 2px;
}
.ts-booking-link {
  margin-top: 28px;
  padding: 16px 20px 18px;
  border: 1px dashed var(--accent);
  background: var(--soft);
}
.ts-booking-link h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.ts-booking-link p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.ts-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 6vw, 96px);
  margin: clamp(36px, 5vw, 56px) 0 0;
}
.ts-rules div {
  display: grid;
  grid-template-columns: 6.6em minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.ts-rules dt {
  font-weight: 500;
  letter-spacing: 0.16em;
}
.ts-rules dd {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
}

/* The catch: the knife photo runs to the left edge; its title stands at the right. */
.ts-catch {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
  padding: 0 var(--frame) var(--section-space) 0;
}
.ts-catch img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--dark);
}
.ts-catch-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'text title';
  align-items: end;
  column-gap: clamp(24px, 3vw, 44px);
}
.ts-catch h2 {
  grid-area: title;
  align-self: start;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.6;
  letter-spacing: 0.18em;
}
.ts-catch h2 span {
  display: block;
}
.ts-catch h2 span + span {
  margin-top: 1.2em;
}
.ts-catch-text {
  grid-area: text;
}
.ts-catch-text p {
  max-width: 20em;
  color: var(--muted);
}

/* Takeaway on sumi black: the featured products as a menu list. */
.ts-takeaway {
  --muted: var(--dark-muted);
  --focus: var(--highlight);
  padding: var(--section-space) var(--frame);
  background: var(--dark);
  color: var(--dark-ink);
}
.ts-takeaway-lead {
  max-width: 36em;
  text-wrap: balance;
  margin: 0 auto clamp(36px, 5vw, 60px);
  color: var(--muted);
  text-align: center;
}
#featured {
  --columns: 1;
  --columns-tablet: 1;
  --columns-phone: 1;
  --grid-gap: 0;
  --grid-gap-phone: 0;
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--dark-rule);
}
/* A row: small photo, name, dotted leader, price; English, course and size under the name. */
#featured .product-card {
  grid-template-columns: auto minmax(0, max-content) minmax(28px, 1fr) auto;
  grid-template-areas:
    'photo name dots price'
    'photo en en en'
    'photo badge badge badge'
    'photo meta meta meta';
  align-content: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--dark-rule);
}
#featured .product-photo {
  display: contents;
}
#featured .product-photo img {
  grid-area: photo;
  align-self: start;
  width: 96px;
  height: 96px;
  margin-right: clamp(18px, 3vw, 32px);
  background: var(--lacquer);
}
#featured .product-card:hover .product-photo img {
  transform: none;
}
#featured .product-card h3 {
  grid-area: name;
  align-self: end;
  font-size: 18px;
  letter-spacing: 0.1em;
}
#featured .product-card::after {
  content: '';
  grid-area: dots;
  align-self: end;
  margin: 0 14px 9px;
  border-bottom: 1px dotted rgb(236 230 218 / 0.4);
}
#featured .product-price {
  grid-area: price;
  align-self: end;
  color: var(--highlight);
  font-size: 19px;
  line-height: 1.5;
}
#featured .product-en {
  grid-area: en;
}
#featured .product-badge {
  grid-area: badge;
  position: static;
  margin-top: 6px;
  padding: 0;
  background: none;
  color: var(--highlight);
  font-size: 13px;
  letter-spacing: 0.08em;
}
#featured .product-meta {
  grid-area: meta;
  margin: 0;
  font-size: 13px;
}
.ts-more {
  margin: clamp(32px, 4vw, 48px) 0 0;
  text-align: center;
}

/* Chef's notes: each title on a paper slip laid over the corner of its photo. */
.ts-note-list {
  --note-gap: clamp(24px, 4vw, 64px);
  --slide-width: calc((100% - 2 * var(--note-gap)) / 3);
  column-gap: var(--note-gap);
  /* Room for the focus outline inside the scrolling row. */
  margin: -6px;
  padding: 6px;
  scroll-padding-inline: 6px;
}
.ts-notes .carousel-controls {
  margin-top: 28px;
}
/* Three fit across a wide screen; the arrows are for tablets and phones. */
@media (min-width: 901px) {
  .ts-notes .carousel-controls {
    display: none;
  }
}
.ts-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.ts-note img {
  grid-area: 1 / 1;
  width: calc(100% - 26px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--dark);
}
.ts-note h3 {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
  margin: 28px 0 0;
  padding: 16px 11px;
  border: 1px solid var(--rule);
  background: var(--paper);
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.18em;
  transition: border-color 0.15s;
}
.ts-note:hover h3 {
  border-color: var(--ink);
}
.ts-note-kind {
  margin: 20px 0 2px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.24em;
}
.ts-note p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
}

/* Footer: the seal between two hairlines, the hours under it, the links in
   centred rows between hairlines. */
footer {
  --muted: var(--dark-muted);
}
.footer-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 44px);
  padding-top: clamp(64px, 8vw, 104px);
  text-align: center;
}
.footer-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(20px, 4vw, 48px);
}
.footer-brand::before,
.footer-brand::after {
  content: '';
  grid-row: 1;
  border-top: 1px solid var(--dark-rule);
}
.footer-brand::after {
  grid-column: 3;
}
.footer-brand .wordmark {
  grid-area: 1 / 2;
}
.footer-brand p {
  grid-column: 1 / -1;
  margin: 28px 0 0;
  font-size: 14px;
  letter-spacing: 0.12em;
}
footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
}
footer nav h2 {
  flex-basis: 100%;
  margin-bottom: 4px;
  font-size: 12.5px;
  letter-spacing: 0.3em;
}
footer nav a {
  padding: 0 16px;
  font-size: 14px;
  letter-spacing: 0.12em;
}
footer nav a + a {
  border-left: 1px solid var(--dark-rule);
}
.footer-bottom {
  margin-top: 8px;
}

/* Shop, journal, about and cart: a centred, spaced title on the dark band under the header. */
.page-hero,
.page-hero:has(+ .body-copy) {
  max-width: none;
  margin: 0;
  padding: clamp(12px, 3vw, 36px) var(--frame) clamp(56px, 7vw, 100px);
  background: var(--dark);
  color: var(--dark-ink);
  text-align: center;
}
.page-hero h1 {
  max-width: 20em;
  margin: 0 auto 16px;
  font-family: var(--mincho);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.45;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}
.page-hero:has(+ .body-copy) h1 {
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.page-hero p {
  max-width: 36em;
  margin: 0 auto;
  color: var(--dark-muted);
  font-size: 14.5px;
}
.page-hero .free-shipping {
  color: var(--highlight);
}
main > .section:first-child {
  padding-top: clamp(28px, 4vw, 56px);
}
.shop-section {
  padding-bottom: clamp(64px, 9vw, 120px);
}
.shop-toolbar {
  margin-bottom: clamp(40px, 5vw, 64px);
}
/* Categories as a row of words between hairlines, the current one underlined. */
.filter-nav {
  gap: 8px 0;
}
.filter-nav a {
  padding: 2px 18px;
  border: 0;
  color: var(--muted);
  letter-spacing: 0.18em;
}
.filter-nav a:first-child {
  padding-left: 0;
}
.filter-nav a + a {
  border-left: 1px solid var(--rule);
}
.filter-nav a:hover {
  color: var(--ink);
}
.filter-nav a[aria-current='page'] {
  border-color: var(--rule);
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
/* No match: the note spans the grid. */
.product-grid > .empty {
  grid-column: 1 / -1;
}
.search button {
  border-color: color-mix(in srgb, var(--ink) 45%, var(--paper));
  background: transparent;
  color: var(--ink);
  letter-spacing: 0.2em;
}
.search button:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
/* Products are photographed on black lacquer: bare photos, a paper tag for the badge. */
.product-photo,
.cart-line img,
.cart-photo {
  background: var(--lacquer);
}
.product-badge {
  top: 0;
  left: 0;
  padding: 3px 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.08em;
}
/* Takeaway is the one thing that cannot be shipped: its tag is indigo. */
.product-card[data-category='takeaway'] .product-badge {
  background: var(--accent);
  color: var(--accent-ink);
}
.product-card h2,
.product-card h3 {
  margin-top: 4px;
  font-size: 18px;
  letter-spacing: 0.08em;
}
.product-en {
  letter-spacing: 0.06em;
}
.product-meta {
  font-size: 13.5px;
}
.product-price {
  font-size: 17px;
}
.product-detail {
  gap: clamp(32px, 6vw, 96px);
}
.product-info h1 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.35;
  letter-spacing: 0.14em;
}
.product-info .product-en {
  letter-spacing: 0.1em;
}
.product-info .product-price {
  margin: 20px 0;
  font-size: 28px;
}
.product-details dt,
.summary h2,
.values-grid h3 {
  font-weight: 500;
  letter-spacing: 0.14em;
}
.product-details dd {
  font-size: 14.5px;
}
.cart-line h2 {
  font-size: 18px;
  letter-spacing: 0.08em;
}
.summary {
  border: 1px solid var(--rule);
  background: transparent;
}
.journal-card h2,
.journal-card h3 {
  font-size: 20px;
  letter-spacing: 0.1em;
}
.kicker {
  font-size: 13px;
  letter-spacing: 0.24em;
}
.body-copy .lead {
  font-size: 17px;
}
.body-copy .button + .text-link {
  margin-left: 24px;
}
.values-grid > div {
  padding-top: 16px;
  border-top: 1px solid var(--ink);
}

@media (max-width: 960px) {
  .ts-booking-grid,
  .ts-rules {
    grid-template-columns: minmax(0, 1fr);
  }
  .ts-booking-col + .ts-booking-col {
    border-top: 1px solid var(--rule);
    border-left: 0;
  }
  .ts-catch {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0 var(--section-space);
  }
  .ts-catch-copy {
    padding: 0 var(--gutter);
  }
}
/* Tablets and phones: the seal hangs in the middle, the menu and the bag at its sides. */
@media (max-width: 900px) {
  .header {
    padding: 0 var(--gutter) 14px;
    align-items: start;
  }
  .header .menu,
  .header .header-tools {
    margin-top: 16px;
  }
  .header .menu,
  :root:has(.cover) .header--overlay .menu {
    padding-left: 0;
    border-color: transparent;
    letter-spacing: 0.2em;
  }
  .header .wordmark {
    gap: 8px;
    padding: 12px 9px 11px;
  }
  .header .wordmark > svg {
    width: 20px;
    height: 20px;
  }
  .header .wordmark-name small,
  :root:has(.cover) .header--overlay .wordmark-name small {
    font-size: 22px;
  }
  .header .wordmark-name b {
    font-size: 8.5px;
    letter-spacing: 0.2em;
  }
  .header .navigation {
    border-top-color: var(--dark-rule);
  }
  :root:has(.cover) .header--overlay:has(.navigation.open) .navigation {
    border-top-color: var(--line);
  }
  .ts-note-list {
    --slide-width: 44%;
  }
}
@media (max-width: 760px) {
  .ts-cover {
    --cover-height: max(560px, calc(100svh - 72px));
  }
  .ts-cover .cover-content {
    column-gap: 12px;
  }
  /* The card keeps its columns and scrolls sideways inside its own box. */
  .ts-board {
    column-gap: 16px;
  }
  .ts-board-head {
    padding-left: 14px;
  }
  .ts-courses {
    height: 27em;
  }
  .ts-courses li {
    min-width: 66px;
  }
  .ts-board-hint {
    display: block;
    color: var(--highlight);
  }
  .ts-board-foot p + p {
    margin-top: 6px;
  }
  .ts-booking-col {
    padding-inline: 0;
  }
  .ts-rules div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  #featured .product-photo img {
    width: 64px;
    height: 64px;
    margin-right: 14px;
  }
  #featured .product-card {
    grid-template-columns: auto minmax(0, max-content) minmax(12px, 1fr) auto;
    padding: 18px 0;
  }
  #featured .product-card h3 {
    font-size: 16px;
    letter-spacing: 0.02em;
  }
  #featured .product-card::after {
    margin: 0 6px 8px;
  }
  #featured .product-price {
    font-size: 16px;
  }
  .ts-note-list {
    --slide-width: 78%;
  }
  .page-hero h1 {
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }
  /* The categories stay on one line and scroll inside it when there are more. */
  .filter-nav {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 4px;
    scrollbar-width: none;
  }
  .filter-nav a {
    flex: none;
    padding-inline: 10px;
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  /* A nine-character name fits a phone's two-up card on one line. */
  .product-card h2 {
    font-size: 16px;
    letter-spacing: 0.02em;
  }
}