/*
 * 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;
}

/*
 * PAGES: a stationery maker's shop. The site is laid out like a work desk:
 * kraft-oak for the desk the notebook lies on (the foil preview first, the
 * footer last), natural-white paper in between, blue-black ink for type and
 * buttons, and foil (gold, silver, copper) only ever on a cover. Corners are
 * cut square like paper; section heads sit under a row of dots, like the top
 * of a dot-grid page. Every figure is a measurement — g/m², mm, NT$ — set in
 * Libre Caslon Text (SIL OFL 1.1, notice in media-fonts.json); Chinese stays
 * in the visitor's own sans-serif.
 */
@font-face {
  font-family: 'Libre Caslon Text';
  src: url('/fonts/libre-caslon-text-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #f4f2ec;
  --ink: #1c2238;
  --muted: #565b68;
  --soft: #e9e5dc;
  --line: #d6d0c3;
  --accent: #24305a;
  --accent-ink: #f7f5ef;
  --highlight: #dcc488;
  --focus: #24305a;
  --dark: #1c2238;
  --dark-ink: #f2f0ea;
  --dark-muted: #c3c5cf;
  --sheet: #fdfcf9;
  --desk: #c7a67c;
  --desk-ink: #3a2b1b;
  --label: rgb(22 27 44 / 0.9);
  --display:
    'Libre Caslon Text', Georgia, 'PingFang TC', 'Noto Sans TC',
    'Microsoft JhengHei', serif;
  --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: 4;
  --grid-gap: 44px 20px;
  --grid-gap-phone: 28px 12px;
  --section-space: clamp(56px, 8vw, 96px);
}

/* Header: links left, the wordmark in the middle, a rule under it as on a
   letterhead. */
.header {
  position: relative;
}
@media (min-width: 901px) {
  .header {
    padding-block: 20px;
  }
}
.header::after {
  content: '';
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  border-bottom: 1px solid var(--line);
}
body[data-page='home'] .header::after {
  border-color: transparent;
}
.wordmark > svg {
  color: var(--ink);
}
.wordmark-name b {
  margin-right: -0.18em;
  font-size: 24px;
  letter-spacing: 0.18em;
}
.wordmark-name small {
  letter-spacing: 0.3em;
}
.navigation a {
  font-size: 15px;
  letter-spacing: 0.04em;
}
/* Between the phone menu and a wide screen, the links close up so they never
   reach the wordmark in the middle. */
@media (min-width: 901px) and (max-width: 1100px) {
  .navigation {
    gap: 4px 18px;
  }
  .navigation a {
    letter-spacing: 0;
  }
}
#bag-count {
  border-radius: 0;
}

/* Section heads: a row of dots, then the title in the middle. */
.rule-heading {
  margin: 0 auto clamp(28px, 4vw, 44px);
  text-align: center;
}
.rule-heading::before {
  content: '';
  display: block;
  height: 3px;
  margin-bottom: clamp(26px, 3.5vw, 38px);
  background: radial-gradient(circle, var(--ink) 1px, transparent 1.3px) 0 50% /
    7px 3px repeat-x;
  opacity: 0.4;
}
.rule-heading h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.06em;
}
.rule-heading p {
  max-width: 34em;
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 15px;
}

/* Product cards: bare square photos on a paper shade, the name with its price
   beside it, the paper on the line below. */
.product-photo {
  margin-bottom: 12px;
  background: var(--soft);
}
.product-badge {
  top: 0;
  left: 0;
  padding: 3px 9px;
  background: var(--label);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.product-card h2,
.product-card h3 {
  font-size: 15px;
  line-height: 1.55;
}
/* Product names break at their spaces: 「A5 方格筆記本」 then 「100 g/m²」. */
.product-card h2,
.product-card h3,
.product-info h1 {
  word-break: keep-all;
}
.product-en {
  margin-top: 1px;
}
.product-meta {
  margin: 4px 0 6px;
  font-size: 13px;
}
.product-price,
.cart-price p,
.totals dd {
  font-variant-numeric: lining-nums tabular-nums;
}
.product-card .product-price {
  font-size: 16px;
}
@media (min-width: 761px) {
  .product-card {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
  }
  .product-card > * {
    grid-column: 1 / -1;
  }
  .product-card > :is(h2, h3) {
    grid-column: 1;
  }
  .product-card > .product-price {
    grid-column: 2;
    grid-row: 2;
    line-height: 1.55;
  }
}

/* The foil preview: a proof drawing of the notebook on the desk, the name on
   the left, the swatches and the slip on the right. The checked radios set
   the cover, the foil and the slip; home.js writes the name and measures it. */
.foil {
  --cover: #25335a;
  --weave-dark: rgb(0 0 0 / 0.15);
  --weave-light: rgb(255 255 255 / 0.05);
  --press: rgb(0 0 0 / 0.5);
  --edge: rgb(255 255 255 / 0.16);
  --hinge: rgb(0 0 0 / 0.32);
  --spine: rgb(0 0 0 / 0.18);
  --chip: 64px;
  --focus: var(--ink);
  background: var(--desk);
  color: var(--ink);
}
.foil:has([value='moss']:checked) {
  --cover: #3b5143;
}
.foil:has([value='charcoal']:checked) {
  --cover: #2c2c2f;
  --weave-light: rgb(255 255 255 / 0.06);
}
.foil:has([value='mist']:checked) {
  --cover: #e8e6e0;
  --weave-dark: rgb(80 66 48 / 0.08);
  --weave-light: rgb(255 255 255 / 0.55);
  --press: rgb(70 55 40 / 0.28);
  --edge: rgb(255 255 255 / 0.6);
  --hinge: rgb(60 50 40 / 0.2);
  --spine: rgb(60 50 40 / 0.08);
}
.foil-desk {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) var(--gutter) clamp(36px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(0, 430px) minmax(290px, 1fr);
  grid-template-areas:
    'heading drawing options'
    'field drawing options'
    'terms drawing options';
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(32px, 4.5vw, 64px);
}
.foil-heading {
  grid-area: heading;
}
.foil-heading h1 {
  margin-bottom: 12px;
  font-size: clamp(26px, 2.5vw, 32px);
  line-height: 1.35;
}
.foil-heading p {
  margin-bottom: 26px;
  color: var(--desk-ink);
  font-size: 15px;
}
.foil-field {
  grid-area: field;
  display: grid;
  gap: 6px;
}
.foil-field label {
  font-weight: 600;
}
.foil-field input {
  min-height: 56px;
  border-color: var(--ink);
  background-color: var(--sheet);
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.foil-field input::placeholder {
  color: #6b6f7b;
}
.foil-hint,
.foil-count {
  margin: 0;
  color: var(--desk-ink);
  font-size: 13px;
}
.foil-count {
  font-weight: 600;
}
/* After the order: the proof, in the order it happens. */
.foil-terms {
  grid-area: terms;
  align-self: end;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid rgb(58 43 27 / 0.3);
  color: var(--desk-ink);
  font-size: 13px;
}
.foil-terms p {
  margin: 0;
}
.foil-terms .foil-terms-title {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.foil-steps {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: proof;
}
.foil-steps li {
  counter-increment: proof;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: baseline;
  padding: 3px 0;
  color: var(--ink);
  font-size: 14px;
}
.foil-steps li::before {
  content: counter(proof);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1;
}
.foil-drawing {
  grid-area: drawing;
  margin: 0;
}
.foil-cover {
  width: 100%;
  height: auto;
  overflow: visible;
}
.foil-drawing figcaption {
  margin-top: 6px;
  color: var(--desk-ink);
  font-size: 14px;
  text-align: center;
}
.foil-dim path {
  fill: none;
  stroke: var(--desk-ink);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.foil-dim text {
  fill: var(--desk-ink);
  font-family: var(--display);
  font-size: 7.5px;
  font-variant-numeric: lining-nums;
  text-anchor: middle;
}
.foil-dim .foil-span-label[data-outside] {
  text-anchor: start;
}
.foil-shade {
  fill: rgb(58 38 18 / 0.55);
}
.foil-board {
  fill: var(--cover);
}
.foil-warp {
  fill: var(--weave-dark);
}
.foil-weft {
  fill: var(--weave-light);
}
.foil-spine {
  fill: var(--spine);
}
.foil-hinge {
  fill: none;
  stroke: var(--hinge);
  stroke-width: 0.5;
}
.foil-name {
  font-family: var(--display);
  text-anchor: middle;
}
.foil-press {
  fill: var(--press);
}
.foil-edge {
  fill: var(--edge);
}
.foil-ink {
  fill: url(#foil-gold);
}
.foil:has([value='silver']:checked) .foil-ink {
  fill: url(#foil-silver);
}
.foil:has([value='copper']:checked) .foil-ink {
  fill: url(#foil-copper);
}
.foil-options {
  grid-area: options;
  display: grid;
  align-content: start;
  gap: 18px;
}
/* Swatches: square sample cards on the desk, the colour above its name. */
.foil-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.foil-pick legend {
  float: left;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}
.foil-pick label {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  width: var(--chip);
  height: var(--chip);
  padding: 4px 4px 0;
  border: 1px solid rgb(58 43 27 / 0.35);
  background: var(--sheet);
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
}
.foil-pick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.foil-pick label:hover {
  border-color: var(--ink);
}
.foil-pick label:has(:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
  font-weight: 600;
}
.foil-pick label:has(:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.foil-swatch {
  display: block;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.foil-swatch[data-swatch='gold'] {
  background: linear-gradient(
    160deg,
    #f6e6ad,
    #d2ad5c 40%,
    #9a7331 58%,
    #f0d68f
  );
}
.foil-swatch[data-swatch='silver'] {
  background: linear-gradient(
    160deg,
    #fbfcfd,
    #c7cdd4 40%,
    #858d97 58%,
    #eef1f4
  );
}
.foil-swatch[data-swatch='copper'] {
  background: linear-gradient(
    160deg,
    #f7cfae,
    #cf8657 40%,
    #8f4e2a 58%,
    #eab08a
  );
}
/* Cover swatches carry the same linen weave as the drawing. */
.foil-covers .foil-swatch {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgb(0 0 0 / 0.12) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgb(255 255 255 / 0.06) 0 1px,
      transparent 1px 3px
    );
}
.foil-swatch[data-swatch='navy'] {
  background-color: #25335a;
}
.foil-swatch[data-swatch='moss'] {
  background-color: #3b5143;
}
.foil-swatch[data-swatch='charcoal'] {
  background-color: #2c2c2f;
}
.foil-swatch[data-swatch='mist'] {
  background-color: #e8e6e0;
}
.foil-advice {
  margin: -6px 0 0;
  font-size: 14px;
  font-weight: 600;
}
.foil-advice:empty {
  display: none;
}
/* The set: the notebook and its foil, or the gift box; the price is on the card. */
.foil-sets label {
  flex: 1 1 0;
  grid-template-rows: none;
  gap: 2px;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 9px 12px 10px;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}
.foil-sets b {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  font-variant-numeric: lining-nums;
}
/* The slip: what goes into the bag. One per set; the checked set shows its own. */
.foil-slip {
  padding: 18px 20px 20px;
  background: var(--sheet);
}
.foil-slip[data-set='gift'],
.foil:has([name='set'][value='gift']:checked) .foil-slip[data-set='notebook'] {
  display: none;
}
.foil:has([name='set'][value='gift']:checked) .foil-slip[data-set='gift'] {
  display: block;
}
.foil-slip dl {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
}
.foil-slip dl div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 16px;
}
.foil-slip dt {
  color: var(--muted);
  font-size: 14px;
}
.foil-slip dd {
  margin: 0;
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.foil-slip .foil-sum {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.foil-slip .foil-sum dt {
  color: var(--ink);
  font-weight: 600;
}
.foil-sum dd {
  font-size: 26px;
  line-height: 1.1;
}
.foil-slip .foil-includes {
  flex-basis: 100%;
  margin-top: 2px;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  white-space: normal;
}
.foil-gift {
  margin: -6px 0 16px;
  font-size: 14px;
  font-weight: 600;
}
.foil-slip .button {
  width: 100%;
}
.foil-slip .text-link {
  margin-top: 12px;
  font-size: 14px;
}

/* Featured: four products in a row, the way into the shop below them. */
.featured-more {
  margin: clamp(32px, 4vw, 48px) 0 0;
  text-align: center;
}
.featured-more .button {
  min-width: 220px;
}

/* The ink test: one sheet per paper on a darker paper band. The strip is the
   back of the sheet after one line of fountain pen, ruled as the paper is. */
.weights {
  padding: var(--section-space)
    max(var(--gutter), calc((100% - var(--width)) / 2));
  background: var(--soft);
}
.weights-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.weights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.weight {
  min-width: 0;
  padding: 22px 24px 10px;
  background: var(--sheet);
}
.weight h3 {
  display: grid;
  margin: 0;
}
.weight-gsm {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 400;
  font-variant-numeric: lining-nums;
  line-height: 1;
}
.weight-gsm b {
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.weight-name {
  margin-top: 12px;
  font-size: 17px;
}
.weight-use {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.weight-back {
  margin: 18px 0 14px;
}
.weight-back > svg {
  width: 100%;
  height: 76px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background-color: #fbf9f3;
  color: var(--ink);
}
.weight-back[data-ruling='dots'] > svg {
  background-image: radial-gradient(
    circle,
    rgb(28 34 56 / 0.3) 0.9px,
    transparent 1.2px
  );
  background-position: 6px 6px;
  background-size: 12px 12px;
}
.weight-back[data-ruling='grid'] > svg {
  background-image:
    linear-gradient(rgb(28 34 56 / 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgb(28 34 56 / 0.11) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 12px 12px;
}
.weight-back use {
  opacity: 0;
  filter: blur(0.4px);
}
.weight-back [data-ghost='strong'] use {
  opacity: 0.42;
}
.weight-back [data-ghost='faint'] use {
  opacity: 0.12;
}
.weight-back figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
.weight-tests {
  margin: 0;
}
.weight-tests > div {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.weight-tests dt {
  color: var(--muted);
  font-size: 14px;
}
.weight-tests dd {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.weight-tests strong {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 15px;
}
/* The verdict mark: full is fine, half is a limit, crossed is not for this paper. */
.weight-tests strong::before {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.weight-tests [data-level='ok'] strong::before {
  background: currentColor;
}
.weight-tests [data-level='some'] strong::before {
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.weight-tests [data-level='no'] strong::before {
  background: linear-gradient(
    45deg,
    transparent calc(50% - 0.75px),
    currentColor calc(50% - 0.75px) calc(50% + 0.75px),
    transparent calc(50% + 0.75px)
  );
}
.weights-footnote {
  max-width: 46em;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* Feature tiles: close-ups three by two, each named on a dark label bar. */
.features {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--gutter) 0;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--soft);
}
.feature img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s;
}
.feature[data-focus='low'] img {
  object-position: 50% 80%;
}
.feature:hover img {
  transform: scale(1.03);
}
.feature-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 12px;
  padding: 10px 16px 11px;
  background: var(--label);
  color: var(--paper);
}
.feature-label b {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.feature-label small {
  color: #c9ccd5;
  font-size: 13px;
}
.feature:hover .feature-label b {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Pressed: the real foil after the drawing, as one large tile; its dark label
   bar carries the copy. */
.pressed {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 12px var(--gutter) 0;
  display: grid;
}
.pressed > img,
.pressed > .lx-picture > img,
.pressed-copy {
  grid-area: 1 / 1;
}
.pressed > img,
.pressed > .lx-picture > img {
  width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
  background: var(--soft);
}
.pressed-copy {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px clamp(24px, 4vw, 56px);
  padding: 22px clamp(20px, 3vw, 32px);
  background: var(--label);
  color: var(--paper);
  --focus: var(--paper);
}
.pressed h2 {
  margin: 0;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.45;
}
.pressed-copy p {
  max-width: 34em;
  margin: 0;
  color: #c9ccd5;
  font-size: 15px;
}
.pressed-copy .text-link {
  white-space: nowrap;
}
.pressed-copy .text-link:hover {
  color: var(--paper);
}

/* The notes, listed like the contents page of a notebook. */
.paper-notes {
  max-width: calc(var(--width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
}
.notes-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.notes-list a {
  display: grid;
  grid-template-columns: 8em minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 32px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}
.notes-list h3 {
  margin: 0;
  font-size: 18px;
}
.notes-list a:hover h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.notes-topic,
.notes-line {
  color: var(--muted);
  font-size: 14px;
}
.notes-line {
  font-size: 15px;
}
.notes-more {
  margin: 22px 0 0;
  text-align: right;
}

/* Shared pages: titles centred under the letterhead rule, square controls. */
.page-hero {
  text-align: center;
}
.page-hero h1,
.page-hero p {
  margin-inline: auto;
}
.page-hero h1 {
  font-size: clamp(26px, 3vw, 34px);
}
.page-hero p {
  font-size: 15px;
}
.page-hero .free-shipping {
  color: var(--ink);
  font-weight: 600;
}
.filter-nav a {
  padding: 7px 16px;
  border-color: rgb(28 34 56 / 0.3);
  font-size: 14px;
}
.product-detail .product-photo {
  background: var(--soft);
}
body[data-page='products'] .shop-section {
  padding-top: clamp(28px, 4vw, 48px);
}
@media (min-width: 961px) {
  /* The photo stays in view beside the long spec sheet. */
  .product-detail .product-photo {
    position: sticky;
    top: 24px;
  }
}
.product-info h1 {
  font-size: clamp(24px, 2.6vw, 32px);
}
.product-info .product-price {
  font-size: 28px;
}
.product-details dt {
  font-size: 15px;
}
.cart-line img,
.cart-photo {
  background: var(--soft);
}
.summary {
  border-top: 3px solid var(--ink);
}
.journal-card img {
  background: var(--soft);
}
.values-grid > div {
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}
/* The four covers, cropped to the notebooks on the about page and in notes. */
.body-copy > img[src='/images/hero.webp'],
.body-copy > .lx-picture > img[src='/images/hero.webp'] {
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 60%;
  background: var(--soft);
}

/* Footer: the desk again, under the paper. */
footer {
  --dark: var(--desk);
  --dark-ink: var(--ink);
  --dark-muted: var(--desk-ink);
  --focus: var(--ink);
}
footer .wordmark > svg {
  color: var(--ink);
}

@media (max-width: 1099px) {
  .foil-desk {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'heading heading'
      'drawing field'
      'drawing options'
      'drawing terms';
    grid-template-rows: auto auto auto 1fr;
  }
  .foil-heading {
    max-width: 36em;
  }
  .foil-field {
    margin-bottom: 22px;
  }
  .foil-drawing {
    align-self: start;
    position: sticky;
    top: 16px;
  }
}
@media (max-width: 960px) {
  /* Smaller tiles keep the whole photo: the label bar sits under it, as tall
     as the tallest in its row. */
  .features-grid > li,
  .feature {
    display: grid;
  }
  .feature {
    grid-template-rows: auto 1fr;
  }
  .feature-label {
    position: static;
    display: grid;
    align-content: start;
    background: var(--ink);
  }
  .weights-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
  .pressed > img,
  .pressed > .lx-picture > img {
    aspect-ratio: 3 / 2;
  }
  .pressed-copy {
    grid-area: 2 / 1;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    background: var(--ink);
  }
  .notes-list a {
    grid-template-columns: 7em minmax(0, 1fr);
  }
  .notes-line {
    grid-column: 2;
  }
}
@media (max-width: 760px) {
  .search {
    width: 100%;
  }
  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .feature-label {
    padding: 7px 10px 8px;
  }
  .feature-label b {
    font-size: 15px;
  }
  .feature-label small {
    font-size: 12px;
    line-height: 1.5;
  }
  .notes-list a {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 0;
  }
  .notes-line {
    grid-column: auto;
  }
  .notes-more {
    text-align: left;
  }
}
@media (max-width: 640px) {
  .foil-desk {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'heading'
      'drawing'
      'field'
      'options'
      'terms';
    grid-template-rows: none;
  }
  .foil-heading p {
    margin-bottom: 18px;
  }
  .foil-drawing {
    position: static;
    width: min(100%, 400px);
    justify-self: center;
    margin-bottom: 20px;
  }
  .foil-field input {
    font-size: 20px;
  }
  .foil-slip {
    padding: 16px;
  }
  .weight {
    padding: 20px 18px 8px;
  }
  .weight-gsm b {
    font-size: 46px;
  }
  .weight-name {
    margin-top: 8px;
  }
  .weight-back {
    margin: 14px 0 10px;
  }
  .weight-back > svg {
    height: 64px;
  }
  /* The verdict runs on into its note, a line shorter per pen. */
  .weight-tests strong {
    display: inline-flex;
    margin: 0 8px 0 0;
  }
}