/* 赤印 R Print · site styles
   Layout: imposition. Every page opens on a press sheet lying on the press table; crop marks frame pieces
   instead of card borders, slug lines carry the job info, and everything sits on a 1240px measure. */
:root {
  --paper: #FAFAF8;      /* page stock */
  --table: #E7E6E2;      /* press table under the sheet */
  --sheet: #FFFFFF;      /* the press sheet */
  --ink: #141517;        /* rich black */
  --ink-2: #4A4C51;
  --ink-3: #717378;
  --rule: #DEDDD9;
  --mark: #A4A6AA;       /* crop and registration marks */
  --tint: #F1F0EC;
  --tint-2: #E3E2DE;
  --red: #D52B1E;        /* 赤: seal cinnabar, the one spot colour */
  --red-ink: #B3221A;    /* 赤 for text on paper */
  --red-fill: #D52B1E;   /* 赤 behind white text */
  --red-deep: #8F1A13;
  --on-red: #FFFFFF;
  --band: #151618;
  --band-fg: #F2F1EE;
  --band-2: #A7A8AC;
  --band-rule: #2F3034;
  --foil-1: #B08A3E; --foil-2: #F3DFA2; --foil-3: #8A6A2A;   /* swatch book only */
  --kraft: #B98B5E; --kraft-2: #A47A50;
  --pc: #00A0E3; --pm: #E5007E; --py: #FFE100;              /* process inks: marks only */
  --shadow-sheet: 0 1px 1px rgb(20 21 23 / .05), 0 26px 50px -30px rgb(20 21 23 / .38);
  --shadow-lift: 0 1px 2px rgb(20 21 23 / .08), 0 18px 36px -20px rgb(20 21 23 / .35);

  --f-display: "Archivo", "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-body: "Archivo", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", "Noto Sans SC", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-han: "Noto Serif SC", "Songti SC", "STSong", serif;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-press: cubic-bezier(.66, 0, .18, 1);
  --measure: 1240px;
  --header: 64px;
  --strip: 0px;                      /* preview bar above the header, preview builds only */
  --hero-pad: clamp(14px, 2.2vw, 30px);
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --sp: clamp(22px, 3.2vw, 44px);    /* sheet margin, where the marks live */
  --tg: 48px;                        /* gap between headline and pieces on the sheet */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E0F10; --table: #060707; --sheet: #17181A;
    --ink: #EDECE8; --ink-2: #B4B3AE; --ink-3: #8A8985;
    --rule: #2A2B2E; --mark: #4C4D51; --tint: #1F2023; --tint-2: #2A2B2F;
    --red: #EE4234; --red-ink: #FF6E60; --red-fill: #C42E21; --red-deep: #9C2318; --on-red: #FFFFFF;
    --band: #18191C; --band-fg: #EDECE8; --band-2: #9C9B97; --band-rule: #303135;
    --foil-1: #9C7A36; --foil-2: #E6CF8E; --foil-3: #6F5522; --kraft: #9E774F; --kraft-2: #8A6643;
    --pc: #1CB0EE; --pm: #F0289A; --py: #FFE733;
    --shadow-sheet: 0 0 0 1px rgb(255 255 255 / .04), 0 30px 60px -30px rgb(0 0 0 / .9);
    --shadow-lift: 0 0 0 1px rgb(255 255 255 / .05), 0 18px 36px -18px rgb(0 0 0 / .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E0F10; --table: #060707; --sheet: #17181A;
  --ink: #EDECE8; --ink-2: #B4B3AE; --ink-3: #8A8985;
  --rule: #2A2B2E; --mark: #4C4D51; --tint: #1F2023; --tint-2: #2A2B2F;
  --red: #EE4234; --red-ink: #FF6E60; --red-fill: #C42E21; --red-deep: #9C2318; --on-red: #FFFFFF;
  --band: #18191C; --band-fg: #EDECE8; --band-2: #9C9B97; --band-rule: #303135;
  --foil-1: #9C7A36; --foil-2: #E6CF8E; --foil-3: #6F5522; --kraft: #9E774F; --kraft-2: #8A6643;
  --pc: #1CB0EE; --pm: #F0289A; --py: #FFE733;
  --shadow-sheet: 0 0 0 1px rgb(255 255 255 / .04), 0 30px 60px -30px rgb(0 0 0 / .9);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / .05), 0 18px 36px -18px rgb(0 0 0 / .8);
  color-scheme: dark;
}
@media (min-width: 700px) {
  :root { --gut-l: max(32px, env(safe-area-inset-left, 0px)); --gut-r: max(32px, env(safe-area-inset-right, 0px)); }
}
.has-bar { --strip: 30px; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + env(safe-area-inset-top, 0px) + 16px); }
/* smooth only once loaded: a page opened at #anchor jumps there instead of gliding down from the top */
@media (prefers-reduced-motion: no-preference) { html.is-loaded { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.6 var(--f-body); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body:lang(zh) { line-height: 1.8; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.is-locked { overflow: hidden; }
main:focus { outline: none; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--red-fill); color: var(--on-red); }

.wrap { max-width: calc(var(--measure) + 64px); margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.section { padding-block: clamp(84px, 10vw, 152px); }
.section:not(.way, .tinted) + .section:not(.way, .tinted) { padding-top: 0; }
.mono { font-family: var(--f-mono); font-size: .6875rem; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; }
.mono:lang(zh) { font-size: .75rem; letter-spacing: .05em; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; }
h2 { font-size: clamp(2.05rem, 1.25rem + 2.7vw, 3.6rem); line-height: 1.02; font-weight: 800; font-stretch: 108%; letter-spacing: -.024em; }
h3 { font-size: clamp(1.25rem, 1.08rem + .7vw, 1.625rem); line-height: 1.15; font-weight: 750; font-stretch: 104%; letter-spacing: -.012em; }
h2:lang(zh) { font-weight: 900; line-height: 1.22; letter-spacing: .01em; font-stretch: 100%; }
h3:lang(zh) { font-weight: 700; line-height: 1.4; letter-spacing: .02em; font-stretch: 100%; }
:is(h1, h2, h3):lang(zh) { word-break: keep-all; overflow-wrap: anywhere; }
:lang(zh) { line-break: strict; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 54ch; }
.lead:lang(zh) { line-height: 1.85; max-width: 30em; }
.alt { color: var(--ink-3); font-weight: 400; }
.han { font-family: var(--f-han); }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid var(--bg); background: var(--bg); color: var(--fg);
  font: 600 .9375rem/1 var(--f-body); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .16s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red-fill); transform: translateX(-101%); transition: transform .5s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { border-color: var(--red-fill); color: var(--on-red); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn .ico { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.btn:hover .ico-arrow { transform: translateX(3px); }
.btn-line { --bg: transparent; --fg: var(--ink); border-color: var(--ink-3); }
.btn-link { --bg: transparent; --fg: var(--ink); border-color: transparent; padding: 0 8px; }
.btn-link::before { display: none; }
.btn-link span { background: linear-gradient(currentColor 0 0) left bottom / 0 1.5px no-repeat; padding-bottom: 3px; transition: background-size .4s var(--ease); }
.btn-link:hover, .btn-link:focus-visible { border-color: transparent; color: var(--ink); }
.btn-link:hover span { background-size: 100% 1.5px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .875rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; text-decoration: none; }
.text-link span { background: linear-gradient(var(--red) 0 0) left bottom / 100% 1.5px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--ease); }
.text-link svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }
.text-link:hover span { background-size: 35% 1.5px; }

/* ---------- seal ---------- */
.seal { width: auto; flex: none; }
.seal use { --seal-bg: var(--red); --seal-fg: var(--on-red); }

/* ---------- skip link + preview bar ---------- */
.skip { position: absolute; z-index: 90; left: 12px; top: -80px; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.preview-bar { background: var(--band); color: var(--band-fg); }
.preview-bar .wrap { min-height: var(--strip); display: flex; align-items: center; gap: 9px; font-size: .625rem; }
.preview-bar i { width: 7px; height: 7px; background: var(--red); flex: none; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.hdr.is-scrolled { border-bottom-color: var(--rule); }
.hdr-in { height: var(--header); display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; border-radius: 6px; }
.brand .seal { height: 34px; transition: transform .45s var(--ease); }
.brand:hover .seal { transform: rotate(-6deg) scale(1.04); }
.wordmark { display: flex; flex-direction: column; gap: 5px; line-height: 1; }
.wordmark b { font: 800 1.0625rem/1 var(--f-display); font-stretch: 122%; letter-spacing: .01em; }
.wordmark small { font: 500 .625rem/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-2); text-transform: uppercase; }
.wordmark small:lang(zh) { letter-spacing: .08em; }
.nav { display: flex; gap: 2px; }
.nav a { position: relative; padding: 10px 12px; font-size: .9375rem; font-weight: 500; color: var(--ink-2); text-decoration: none; border-radius: 6px; transition: color .2s; }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1.5px;
  background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--ink); }
.nav a[aria-current]::after { transform: scaleX(1); background: var(--red); }
.lang { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--sheet); flex: none; }
.lang::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--ink); transition: transform .4s var(--ease); }
.lang.is-zh::before { transform: translateX(100%); }
.lang.is-zh.is-switching::before { transform: none; }
.lang.is-en.is-switching::before { transform: translateX(100%); }
.lang > * { position: relative; z-index: 1; display: grid; place-items: center; min-width: 38px; padding: 7px 10px; border-radius: 999px; font: 600 .75rem/1 var(--f-mono); letter-spacing: .04em; color: var(--ink-2); text-decoration: none; transition: color .3s; }
.lang > [aria-current] { color: var(--paper); }
.lang.is-switching > [aria-current] { color: var(--ink-2); }
.lang.is-switching > a { color: var(--paper); }
.lang a:hover { color: var(--ink); }
.menu-btn { display: none; appearance: none; border: 1px solid var(--rule); background: var(--sheet); width: 44px; height: 44px; border-radius: 999px; cursor: pointer; position: relative; flex: none; }
.menu-btn i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-btn i:nth-child(1) { top: 17px; }
.menu-btn i:nth-child(2) { top: 25px; }
.menu-btn[aria-expanded="true"] i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-child(2) { top: 21px; transform: rotate(-45deg); }
.menu {
  position: fixed; z-index: 45; inset: calc(var(--header) + var(--strip) + env(safe-area-inset-top, 0px)) 0 0;
  background: var(--paper); padding: 28px var(--gut-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gut-l);
  display: flex; flex-direction: column; gap: 28px; overflow-y: auto;
  opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.menu.is-open { opacity: 1; transform: none; }
.menu nav { display: grid; }
.menu nav a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font: 750 1.75rem/1.1 var(--f-display); font-stretch: 110%; letter-spacing: -.01em; }
.menu nav a:lang(zh) { font-weight: 900; letter-spacing: .04em; }
.menu nav a .mono { color: var(--ink-3); }
.menu nav a[aria-current] { color: var(--red-ink); }
@media (max-width: 1023px) {
  .nav, .hdr .hdr-cta { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 380px) { .hdr-in { gap: 12px; } .wordmark small { display: none; } }

/* ---------- the press sheet (home hero + page plates) ---------- */
.hero, .plate { position: relative; background: var(--table); overflow: hidden; padding-block: var(--hero-pad); }
.hero .wrap, .plate .wrap { position: relative; }
.sheet { position: relative; background: var(--sheet); box-shadow: var(--shadow-sheet); padding: var(--sp); transform-origin: 0 0; transition: transform .95s var(--ease-press); }
.sheet::after { /* faint paper tooth */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.slug { position: absolute; left: calc(var(--sp) + 20px); right: calc(var(--sp) + 20px); display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink-3); font: 500 .5625rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.slug:lang(zh) { font-size: .625rem; letter-spacing: .08em; }
.slug-t { top: 9px; }
.slug-b { bottom: 9px; }
.slug .hint { color: var(--ink-2); transition: opacity .3s; }
.colorbar-mini { display: flex; }
.colorbar-mini i { width: 10px; height: 10px; }
.colorbar-mini i:nth-child(1) { background: var(--pc); } .colorbar-mini i:nth-child(2) { background: var(--pm); }
.colorbar-mini i:nth-child(3) { background: var(--py); } .colorbar-mini i:nth-child(4) { background: var(--ink); }
.colorbar-mini i:nth-child(5) { background: var(--red); }
.colorbar-mini i:nth-child(6) { background: color-mix(in srgb, var(--ink) 50%, var(--sheet)); }
.colorbar-mini i:nth-child(7) { background: color-mix(in srgb, var(--ink) 20%, var(--sheet)); }
.reg { position: absolute; width: 16px; height: 16px; color: var(--mark); }
.reg-t { top: calc(var(--sp) / 2 - 8px); left: calc(50% - 8px); }
.reg-b { bottom: calc(var(--sp) / 2 - 8px); left: calc(50% - 8px); }
.reg-l { left: calc(var(--sp) / 2 - 8px); top: calc(50% - 8px); }
.reg-r { right: calc(var(--sp) / 2 - 8px); top: calc(50% - 8px); }
.trim { position: relative; display: grid; gap: 28px; }
.trim::before, .marks::before { /* crop marks at the trim corners */
  --l: 14px; --o: 22px; --c: var(--mark);
  content: ""; position: absolute; inset: calc(-1 * var(--o)); pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) left 0 top var(--o) / var(--l) 1px,
    linear-gradient(var(--c) 0 0) left var(--o) top 0 / 1px var(--l),
    linear-gradient(var(--c) 0 0) right 0 top var(--o) / var(--l) 1px,
    linear-gradient(var(--c) 0 0) right var(--o) top 0 / 1px var(--l),
    linear-gradient(var(--c) 0 0) left 0 bottom var(--o) / var(--l) 1px,
    linear-gradient(var(--c) 0 0) left var(--o) bottom 0 / 1px var(--l),
    linear-gradient(var(--c) 0 0) right 0 bottom var(--o) / var(--l) 1px,
    linear-gradient(var(--c) 0 0) right var(--o) bottom 0 / 1px var(--l);
  background-repeat: no-repeat;
}
.head { position: relative; display: flex; flex-direction: column; gap: 22px; align-self: start; transition: opacity .45s var(--ease); }
.head h1 { font-size: clamp(2.5rem, 1.1rem + 3.5vw, 4.5rem); line-height: .96; font-weight: 800; font-stretch: 106%; letter-spacing: -.03em; max-width: 13ch; }
.head h1:lang(zh) { font-weight: 900; line-height: 1.16; letter-spacing: .02em; font-stretch: 100%; max-width: 7.6em; }
.h1-seal { display: inline-block; height: .92em; width: auto; vertical-align: -.1em; margin-left: .14em; transform: rotate(-4deg); filter: url(#ink-rough); }
.h1-seal:lang(zh) { height: .9em; vertical-align: -.12em; margin-left: .16em; }
.head .lead { max-width: 40ch; }
.head .lead:lang(zh) { max-width: 23em; text-wrap: balance; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.head-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--ink-2); }
.head-foot span { display: inline-flex; align-items: center; gap: 8px; }
.head-foot span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }

/* the imposed pieces */
.pieces { --cols: 3; --rows: 6; --pg: 14px; --ml: 5px; --mo: 4px;
  position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); gap: var(--pg); aspect-ratio: .5; }
@property --mo { syntax: "<length>"; inherits: true; initial-value: 4px; }
.piece, .cropped {
  --mc: var(--mark); --ml: 5px; --mo: 4px;
  position: relative; transition: opacity .5s var(--ease), --mo .4s var(--ease);
}
.pieces .piece { --ml: inherit; }
.piece {
  grid-column: var(--gc) / span var(--gcs); grid-row: var(--gr) / span var(--grs);
  display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0;
  appearance: none; border: 0; background: none; text-align: left; cursor: zoom-in; border-radius: 2px;
}
.piece::before, .cropped::before { /* crop marks around each piece */
  content: ""; position: absolute; inset: calc(-1 * (var(--mo) + var(--ml))); pointer-events: none; z-index: 1;
  background:
    linear-gradient(var(--mc) 0 0) left 0 top calc(var(--mo) + var(--ml)) / var(--ml) 1px,
    linear-gradient(var(--mc) 0 0) left calc(var(--mo) + var(--ml)) top 0 / 1px var(--ml),
    linear-gradient(var(--mc) 0 0) right 0 top calc(var(--mo) + var(--ml)) / var(--ml) 1px,
    linear-gradient(var(--mc) 0 0) right calc(var(--mo) + var(--ml)) top 0 / 1px var(--ml),
    linear-gradient(var(--mc) 0 0) left 0 bottom calc(var(--mo) + var(--ml)) / var(--ml) 1px,
    linear-gradient(var(--mc) 0 0) left calc(var(--mo) + var(--ml)) bottom 0 / 1px var(--ml),
    linear-gradient(var(--mc) 0 0) right 0 bottom calc(var(--mo) + var(--ml)) / var(--ml) 1px,
    linear-gradient(var(--mc) 0 0) right calc(var(--mo) + var(--ml)) bottom 0 / 1px var(--ml);
  background-repeat: no-repeat;
}
.cropped { --ml: 9px; --mo: 6px; }
.piece .art { position: relative; flex: 1; min-height: 0; transition: transform .5s var(--ease); }
.piece .art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lbl { display: flex; align-items: baseline; gap: 6px; padding-top: 6px; min-width: 0; color: var(--ink-2); font: 500 .5625rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.lbl:lang(zh) { font-size: .6875rem; letter-spacing: .04em; }
.lbl > span { overflow: hidden; text-overflow: ellipsis; }
.lbl .alt { font-family: var(--f-han); letter-spacing: 0; text-transform: none; }
.piece .zoom { position: absolute; z-index: 2; top: -7px; right: -7px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--red-fill); color: var(--on-red); font: 700 11px/1 var(--f-body); opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .3s var(--ease); }
@media (hover: hover) {
  .piece:hover, .ed:hover .cropped, .photo:hover .cropped { --mo: 1px; --mc: var(--red); }
  .piece:hover .art { transform: translateY(-3px); }
  .piece:hover .zoom { opacity: 1; transform: none; }
  .piece:hover .lbl { color: var(--ink); }
}
.piece:focus-visible { outline-offset: 10px; }
.piece.is-blank { cursor: pointer; }
.blank { flex: 1; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px dashed var(--ink-3); border-radius: 2px; color: var(--ink-2); background: transparent; transition: border-color .3s, color .3s, background .3s; }
.blank .plus { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font: 400 18px/1 var(--f-body); transition: transform .45s var(--ease), background .3s, color .3s, border-color .3s; }
.blank p { font-size: .8125rem; line-height: 1.35; }
.blank b { display: block; color: var(--ink); font-weight: 650; }
@media (hover: hover) {
  .piece.is-blank:hover .blank { border-color: var(--red); color: var(--ink); background: color-mix(in srgb, var(--red) 4%, transparent); }
  .piece.is-blank:hover .plus { transform: rotate(90deg); background: var(--red-fill); color: var(--on-red); border-color: var(--red-fill); }
}

/* piece placement: phone (3 x 6) */
.p-packaging { --gc: 1; --gcs: 3; --gr: 1; --grs: 2; }
.p-walls     { --gc: 1; --gcs: 2; --gr: 3; --grs: 1; }
.p-banners   { --gc: 3; --gcs: 1; --gr: 3; --grs: 2; }
.p-uniforms  { --gc: 1; --gcs: 2; --gr: 4; --grs: 1; }
.p-stickers  { --gc: 1; --gcs: 1; --gr: 5; --grs: 1; }
.p-cards     { --gc: 2; --gcs: 1; --gr: 5; --grs: 1; }
.p-flyers    { --gc: 3; --gcs: 1; --gr: 5; --grs: 1; }
.p-blank     { --gc: 1; --gcs: 3; --gr: 6; --grs: 1; }
.p-blank .blank { padding: 8px 12px; }
@media (min-width: 700px) {   /* tablet (6 x 4) */
  .pieces { --cols: 6; --rows: 4; --pg: 22px; --ml: 7px; aspect-ratio: 1.28; }
  .p-packaging { --gc: 1; --gcs: 3; --gr: 1; --grs: 2; }
  .p-walls     { --gc: 4; --gcs: 3; --gr: 1; --grs: 1; }
  .p-uniforms  { --gc: 4; --gcs: 3; --gr: 2; --grs: 1; }
  .p-stickers  { --gc: 1; --gcs: 2; --gr: 3; --grs: 1; }
  .p-cards     { --gc: 3; --gcs: 2; --gr: 3; --grs: 1; }
  .p-flyers    { --gc: 5; --gcs: 1; --gr: 3; --grs: 2; }
  .p-banners   { --gc: 6; --gcs: 1; --gr: 3; --grs: 2; }
  .p-blank     { --gc: 1; --gcs: 4; --gr: 4; --grs: 1; }
  .lbl { font-size: .625rem; }
  .head h1 { max-width: 17ch; }
  .head .lead { max-width: 56ch; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 40px; row-gap: 18px; align-items: end; }
  .head .eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .head h1 { grid-column: 1; grid-row: 2 / span 2; align-self: end; max-width: 14ch; }
  .head .lead { grid-column: 2; grid-row: 2; }
  .head .cta-row { grid-column: 2; grid-row: 3; }
  .head .head-foot { grid-column: 1 / -1; grid-row: 4; }
}
@media (min-width: 1100px) {  /* desktop: headline left, 7 x 6 imposition right */
  .trim { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--tg); }
  .head { display: flex; align-self: stretch; justify-content: flex-start; align-items: stretch; }
  .head .head-foot { margin-top: auto; }
  .head-top { display: flex; flex-direction: column; gap: 22px; }
  .pieces { --cols: 7; --rows: 6; --pg: 26px; --ml: 8px; aspect-ratio: auto; height: clamp(500px, calc(100svh - var(--header) - var(--strip) - 2 * var(--hero-pad) - 2 * var(--sp) - 2px), 720px); }
  .head h1 { font-size: clamp(2.75rem, min(1.1rem + 3.5vw, 8.2svh), 4.5rem); }
  .p-packaging { --gc: 1; --gcs: 4; --gr: 1; --grs: 3; }
  .p-walls     { --gc: 5; --gcs: 3; --gr: 1; --grs: 2; }
  .p-uniforms  { --gc: 5; --gcs: 3; --gr: 3; --grs: 2; }
  .p-stickers  { --gc: 1; --gcs: 2; --gr: 4; --grs: 2; }
  .p-cards     { --gc: 3; --gcs: 2; --gr: 4; --grs: 2; }
  .p-flyers    { --gc: 5; --gcs: 2; --gr: 5; --grs: 2; }
  .p-banners   { --gc: 7; --gcs: 1; --gr: 5; --grs: 2; }
  .p-blank     { --gc: 1; --gcs: 4; --gr: 6; --grs: 1; }
}
@media (max-width: 1099px) { .head-top { display: contents; } }
@media (max-width: 699px) { .lbl .alt, .slug-r, .reg-t, .reg-b { display: none; } }
@media (hover: none) { .piece .zoom { display: none; } }

/* zoomed state */
.hero.is-zoomed .head { opacity: 0; pointer-events: none; }
.hero.is-zoomed .piece:not(.is-active) { opacity: .16; }
.hero.is-zoomed .piece.is-active { --mo: 1px; --mc: var(--red); cursor: default; }
.hero.is-zoomed .slug .hint, .hero.is-zoomed .zoom { opacity: 0 !important; }
.co { opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.piece.is-active .co, .show-co .co { opacity: 1; }
.piece.is-active .co { transition-delay: .55s; }
.co text { font: 500 calc(var(--co, .12) * 11.5px) var(--f-mono); fill: var(--ink-2); letter-spacing: .04em; }
.co .lead-line { stroke: var(--red); stroke-width: calc(var(--co, .12) * 1.1px); fill: none; }
.co .bleed { stroke: var(--red); stroke-width: calc(var(--co, .12) * 1.1px); stroke-dasharray: calc(var(--co, .12) * 4px) calc(var(--co, .12) * 3px); fill: none; }
.co .dot { fill: var(--red); }

/* piece artwork */
.ln { fill: none; stroke: var(--ink); stroke-width: 1.15; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ln2 { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.dash { stroke-dasharray: 3 2.4; }
.lw { fill: none; stroke: var(--on-red); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.fs { fill: var(--sheet); } .ft { fill: var(--tint); } .ft2 { fill: var(--tint-2); }
.fr { fill: var(--red); } .fk { fill: var(--ink); } .fk3 { fill: var(--ink-3); } .fw { fill: var(--on-red); } .fp { fill: var(--paper); }
.o6 { opacity: .6; } .o4 { opacity: .4; }
.ln.fs { fill: var(--sheet); } .ln.ft { fill: var(--tint); } .ln.ft2 { fill: var(--tint-2); }
.svg-text { font-family: var(--f-display); font-weight: 900; }

/* load: the sheet inks up left to right, then the seal is pressed */
@media (prefers-reduced-motion: no-preference) {
  .js .pieces .piece .art { animation: ink-up .9s var(--ease) both; animation-delay: calc(var(--gc) * 70ms + var(--gr) * 25ms + 150ms); }
  .js .h1-seal { animation: press .62s cubic-bezier(.3, 1.5, .45, 1) .75s both; }
}
@keyframes ink-up { from { opacity: .22; filter: grayscale(1); } to { opacity: 1; filter: none; } }
@keyframes press { 0% { opacity: 0; transform: rotate(-16deg) scale(1.9); } 55% { opacity: 1; } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }

/* job ticket (zoom detail) */
.ticket {
  position: absolute; z-index: 5; top: var(--sp); bottom: var(--sp); left: calc(var(--gut-l) + var(--sp));
  width: calc((100% - var(--gut-l) - var(--gut-r) - 2 * var(--sp) - var(--tg)) * 5 / 12);
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateX(-12px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.ticket.is-open { opacity: 1; transform: none; }
.ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px dashed var(--ink-3); }
.ticket-top .mono { color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.ticket-top .mono b { color: var(--red-ink); font-weight: 600; }
.icon-btn { appearance: none; border: 1px solid var(--rule); background: var(--sheet); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; transition: border-color .25s, background .25s, color .25s, transform .2s var(--ease); }
.icon-btn:hover { border-color: var(--ink); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 16px; height: 16px; }
.ticket-body { flex: 1; overflow-y: auto; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.ticket-body h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-weight: 800; font-stretch: 110%; letter-spacing: -.02em; line-height: 1; outline: none; }
.ticket-body h3:lang(zh) { font-weight: 900; letter-spacing: .04em; line-height: 1.2; }
.ticket-alt { color: var(--ink-3); font: 400 1rem/1.2 var(--f-han); }
.ticket-line { color: var(--ink-2); font-size: 1rem; }
.ticket-label { color: var(--ink-2); margin-top: 6px; }
.ticket-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: .9375rem; margin-top: 10px; }
.ticket-items li { display: flex; gap: 10px; align-items: baseline; }
.ticket-items li::before { content: ""; width: 6px; height: 6px; background: var(--red); flex: none; transform: translateY(-1px); }
.ticket-note { color: var(--ink-2); font-size: .9375rem; padding-top: 14px; border-top: 1px solid var(--rule); }
.ticket-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 16px 20px; border-top: 1px solid var(--rule); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper .mono { min-width: 52px; text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 1099px) {
  .ticket {
    position: fixed; z-index: 70; top: auto; bottom: 0; left: 0; width: auto; right: 0; max-height: min(56vh, 500px);
    border: 0; border-top: 1px solid var(--rule); border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
    transform: translateY(100%); opacity: 1;
  }
  .ticket.is-open { transform: none; }
  .ticket-body { padding: 18px 20px; gap: 12px; }
  .ticket-body h3 { font-size: 1.75rem; }
}

/* ---------- page plates (sub-page openers) ---------- */
.plate .sheet { padding-block: calc(var(--sp) + 26px); }
.plate-in { position: relative; display: grid; gap: 36px; }
.plate-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.plate h1 { font-size: clamp(2.4rem, 1.3rem + 3.3vw, 4.4rem); line-height: 1; font-weight: 800; font-stretch: 106%; letter-spacing: -.028em; max-width: 15ch; }
.plate h1:lang(zh) { font-weight: 900; line-height: 1.2; letter-spacing: .02em; font-stretch: 100%; max-width: 9em; }
.plate .lead { max-width: 52ch; }
.plate-art { position: relative; display: grid; place-items: center; min-height: 200px; }
.plate-art .glyph { width: min(68%, 300px); height: auto; overflow: visible; }
/* glyphs are <use> clones, so they are styled through inherited fill and stroke */
.glyph { fill: transparent; stroke: var(--ink); stroke-width: 6; }
.glyph.is-red { fill: var(--red); stroke: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .js .glyph.is-red { animation: press .7s cubic-bezier(.3, 1.4, .45, 1) .35s both; }
  .js .glyph.is-drawn { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 2.6s var(--ease) .2s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.glyph-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; color: var(--ink-3); }
@media (min-width: 900px) {
  .plate-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 48px; }
  .plate-art { align-self: stretch; min-height: 320px; padding-bottom: 48px; }
}
@media (max-width: 899px) { .plate-art { display: none; } }
.jump { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font-size: .875rem; text-decoration: none; transition: border-color .2s, background .2s, color .2s; }
.jump a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink-3); transition: background .2s, border-color .2s; }
.jump a:hover { border-color: var(--ink); }
.jump a:hover::before { background: var(--red); border-color: var(--red); }

/* ---------- section heads ---------- */
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(44px, 6vw, 80px); }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
  .sec-head .eyebrow { grid-column: 1 / -1; }
  .sec-head .lead { padding-bottom: .35em; }
}
.sec-foot { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: clamp(36px, 4vw, 56px); }

/* ---------- focus: flat to form ---------- */
.pillars { display: grid; gap: 56px 32px; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar { display: flex; flex-direction: column; gap: 14px; }
.stage { container-type: inline-size; position: relative; aspect-ratio: 4 / 3; background: var(--tint); border-radius: 3px; overflow: hidden; display: grid; place-items: center; cursor: pointer; margin-bottom: 10px; -webkit-tap-highlight-color: transparent; }
@media (min-width: 900px) { .stage { aspect-ratio: 1 / 1; } }
.stage-cap { position: absolute; left: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.stage-cap .s1, .stage-cap .s2 { transition: color .4s var(--ease); }
.stage-cap .s2, .pillar.is-on .stage-cap .s1 { color: var(--ink-3); }
.pillar.is-on .stage-cap .s2 { color: var(--ink); }
.stage-cap .s1 { color: var(--ink); }
.pillar-tag { color: var(--red-ink); }
.pillar p:not(.mono) { color: var(--ink-2); max-width: 40ch; }

/* box: a dieline that folds */
.stage-box { perspective: 1000px; perspective-origin: 50% 30%; }
.box { --w: 92px; --h: 118px; --d: 56px; position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d;
  transform: translate3d(calc(var(--w) / -2), 0, 0) rotateX(10deg) rotateY(-8deg) scale3d(.9, .9, .9); transition: transform 1.15s var(--ease-press) .05s; }
.bx { position: absolute; transform-style: preserve-3d; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--ink-3); transition: transform .85s var(--ease-press); }
.bx.front { position: relative; width: var(--w); height: var(--h); background: var(--red); box-shadow: inset 0 0 0 1px var(--red-deep); }
.bx.top { left: 0; bottom: 100%; width: var(--w); height: var(--d); transform-origin: 50% 100%; }
.bx.bottom { left: 0; top: 100%; width: var(--w); height: var(--d); transform-origin: 50% 0; background: var(--tint-2); transition-delay: .1s; }
.bx.left { right: 100%; top: 0; width: var(--d); height: var(--h); transform-origin: 100% 50%; transition-delay: .2s; }
.bx.right { left: 100%; top: 0; width: var(--d); height: var(--h); transform-origin: 0 50%; transition-delay: .25s; }
.bx.back { left: 100%; top: 0; width: var(--w); height: var(--h); transform-origin: 0 50%; transition-delay: .15s; }
.bx.top::after, .bx.bottom::after, .bx.left::after, .bx.right::after, .bx.back::after { content: ""; position: absolute; border: 0 dashed var(--ink-3); }
.bx.top::after { left: 0; right: 0; bottom: 0; border-bottom-width: 1px; }
.bx.bottom::after { left: 0; right: 0; top: 0; border-top-width: 1px; }
.bx.left::after { top: 0; bottom: 0; right: 0; border-right-width: 1px; }
.bx.right::after { top: 0; bottom: 0; left: 0; border-left-width: 1px; }
.bx.back::after { top: 0; bottom: 0; left: 0; border-left-width: 1px; }
.pillar.is-on .box { transform: translate3d(0, 4px, 0) rotateX(-20deg) rotateY(-38deg) scale3d(1.3, 1.3, 1.3); transition-delay: .1s; }
.pillar.is-on .bx.right { transform: rotateY(90deg); transition-delay: 0s; }
.pillar.is-on .bx.back { transform: rotateY(90deg); transition-delay: .14s; }
.pillar.is-on .bx.left { transform: rotateY(-90deg); transition-delay: .06s; }
.pillar.is-on .bx.bottom { transform: rotateX(-90deg); transition-delay: .24s; }
.pillar.is-on .bx.top { transform: rotateX(90deg); transition-delay: .42s; }
.bx .seal { position: absolute; left: 12px; top: 12px; height: 26px; }
.bx.front .seal use { --seal-bg: transparent; --seal-fg: var(--on-red); }
.bx .bar { position: absolute; left: 12px; height: 4px; background: var(--on-red); }
.bx.front .bar.b1 { top: 50px; width: 52%; }
.bx.front .bar.b2 { top: 59px; width: 34%; opacity: .7; height: 3px; }
.bx.front .wm { position: absolute; left: 12px; bottom: 10px; color: var(--on-red); font: 600 7px/1 var(--f-mono); letter-spacing: .16em; }
.bx.right .bc { position: absolute; left: 9px; right: 9px; bottom: 12px; height: 18px; background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 3px, var(--ink) 3px 5px, transparent 5px 6px); }
.bx .ln-bar { position: absolute; left: 9px; height: 3px; background: var(--tint-2); }
.bx.top .dot { position: absolute; left: calc(50% - 7px); top: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--red); }

/* wall: a sticker that becomes 3D letters */
.stage-wall { background: linear-gradient(var(--tint) 0 82%, var(--tint-2) 82% 100%); align-content: center; gap: 14px; }
.stage-wall::after { content: ""; position: absolute; left: 0; right: 0; top: 82%; height: 1px; background: var(--ink-3); opacity: .6; }
.wall-letters {
  --e: var(--red-deep);
  font: 900 14cqi/1 var(--f-display); font-stretch: 118%; letter-spacing: .01em; color: var(--red); white-space: nowrap;
  text-shadow: 0 0 0 var(--e), 0 0 0 var(--e), 0 0 0 var(--e), 0 0 0 var(--e), 0 0 0 var(--e), 0 0 0 var(--e), 0 0 0 transparent;
  transition: text-shadow .8s var(--ease), transform .8s var(--ease);
}
.pillar.is-on .wall-letters { transform: translate(-3px, -4px); text-shadow: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e), 5px 5px 0 var(--e), 6px 6px 0 var(--e), 12px 18px 16px rgb(0 0 0 / .22); }
.plaque { position: relative; width: min(58%, 210px); aspect-ratio: 3.2; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); background: color-mix(in srgb, var(--sheet) 70%, transparent); display: grid; align-content: center; gap: 5px; padding: 0 16% 0 14%; transition: transform .8s var(--ease) .1s, box-shadow .8s var(--ease) .1s; }
.plaque i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--sheet), var(--ink-3)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); }
.plaque i:nth-child(1) { left: 6px; top: 6px; } .plaque i:nth-child(2) { right: 6px; top: 6px; }
.plaque i:nth-child(3) { left: 6px; bottom: 6px; } .plaque i:nth-child(4) { right: 6px; bottom: 6px; }
.plaque b { display: block; height: 4px; background: var(--ink); width: 80%; }
.plaque b + b { width: 50%; height: 3px; background: var(--ink-3); }
.pillar.is-on .plaque { transform: translate(-2px, -3px); box-shadow: 8px 12px 18px -6px rgb(0 0 0 / .25); }

/* shirt: a blank that gets screen printed */
.shirt-wrap { position: relative; width: min(74%, 300px); aspect-ratio: 240 / 220; }
.shirt-wrap svg { width: 100%; height: 100%; }
.print-area { container-type: inline-size; position: absolute; left: 38.3%; top: 30%; width: 23.4%; height: 30%; }
.print-area::before { content: ""; position: absolute; inset: 0; border: 1px dashed var(--ink-3); transition: opacity .4s; }
.pillar.is-on .print-area::before { opacity: 0; transition-delay: .7s; }
.ink-logo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; clip-path: inset(0 100% 0 0); transition: clip-path .85s var(--ease) .12s; }
.pillar.is-on .ink-logo { clip-path: inset(0 0 0 0); }
.ink-logo .seal { height: 46%; }
.ink-logo span { font: 800 14cqi/1 var(--f-display); font-stretch: 125%; letter-spacing: .08em; color: var(--ink); white-space: nowrap; }
.squeegee { position: absolute; top: -14%; bottom: -14%; left: -6%; width: 5px; border-radius: 3px; background: var(--ink); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pillar.is-on .squeegee { animation: squeegee .9s var(--ease) .1s; }
}
@keyframes squeegee { 0% { left: -6%; opacity: 1; } 85% { opacity: 1; } 100% { left: 104%; opacity: 0; } }

/* ---------- shelf: products made with our clients ---------- */
.shelf-row { --k: .8; --g: 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 42%); grid-template-rows: auto auto auto; column-gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 4px 4px; margin-inline: -4px; scrollbar-width: none; }
.shelf-row::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .shelf-row { --k: 1.1; --g: 24px; grid-auto-flow: row; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); max-width: calc(var(--n, 5) * 280px); overflow: visible; } }
.product { position: relative; grid-row: span 3; display: grid; grid-template-rows: subgrid; justify-items: center; scroll-snap-align: start; }
.product .pk { align-self: end; width: calc(var(--vw) * var(--k) * 1px); max-width: 100%; height: auto; transform-origin: 50% 100%; transition: transform .55s var(--ease); }
.product img.pk { width: auto; max-height: calc(var(--vh, 180) * var(--k) * 1px); object-fit: contain; filter: drop-shadow(0 14px 12px rgb(0 0 0 / .18)); }
.product .shelf-edge { justify-self: stretch; height: 10px; margin-inline: calc(var(--g) / -2); background: var(--ink); position: relative; }
.product .shelf-edge::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; background: linear-gradient(color-mix(in srgb, var(--ink) 14%, transparent), transparent); }
.product:first-child .shelf-edge { margin-left: 0; border-radius: 2px 0 0 2px; }
.product:last-child .shelf-edge { margin-right: 0; border-radius: 0 2px 2px 0; }
.tag { align-self: start; position: relative; margin-top: 18px; padding: 14px 14px 12px; min-width: 70%; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; text-align: center; transform-origin: 50% -12px; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1), border-color .3s; }
.tag::before { content: ""; position: absolute; top: 6px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-3); }
.tag::after { content: ""; position: absolute; bottom: 100%; left: calc(50% - .5px); width: 1px; height: 16px; background: var(--ink-3); }
.tag b { display: block; font: 750 1rem/1.2 var(--f-display); font-stretch: 108%; }
.tag b:lang(zh) { font-weight: 900; letter-spacing: .04em; }
.tag span { display: block; margin-top: 4px; color: var(--ink-2); font-size: .8125rem; }
@media (hover: hover) {
  .product:hover .pk { transform: translateY(-8px) rotate(-1.5deg); }
  .product:hover .tag { transform: rotate(-5deg); border-color: var(--red); }
}

/* ---------- our way: 天时 地利 人和 ---------- */
.way { background: var(--band); color: var(--band-fg); }
.way .eyebrow, .way .lead { color: var(--band-2); }
.way .text-link { color: var(--band-fg); }
.trinity { display: grid; border-top: 1px solid var(--band-rule); }
@media (min-width: 900px) { .trinity { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tri { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px 0 40px; border-bottom: 1px solid var(--band-rule); }
@media (min-width: 900px) { .tri { padding: 40px 32px 8px; border-bottom: 0; } .tri + .tri { border-left: 1px solid var(--band-rule); } .tri:first-child { padding-left: 0; } .tri:last-child { padding-right: 0; } }
.tri .glyph { width: clamp(108px, 15vw, 220px); height: auto; margin-bottom: 10px; }
.tri .glyph { stroke: var(--band-fg); stroke-width: 7; transition: fill .6s var(--ease); }
.tri.is-base .glyph { fill: var(--red); stroke: var(--red); }
@media (hover: hover) { .tri:not(.is-base):hover .glyph { fill: color-mix(in srgb, var(--band-fg) 16%, transparent); } }
.tri-term { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.tri-term .han-term { font: 900 1.75rem/1.2 var(--f-han); letter-spacing: .08em; }
.tri-term .mono { color: var(--band-2); }
.tri p:not(.tri-term) { color: var(--band-2); max-width: 36ch; }
.tri p:not(.tri-term):lang(zh) { max-width: 22em; }
.tri ul { display: grid; gap: 6px; margin-top: 4px; color: var(--band-fg); font-size: .9375rem; }
.tri ul li { display: flex; gap: 10px; align-items: baseline; }
.tri ul li::before { content: ""; width: 5px; height: 5px; background: var(--red); flex: none; transform: translateY(-2px); }
.base-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border: 1px solid var(--red); border-radius: 999px; color: var(--band-fg); }
.base-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

/* ---------- ordering ---------- */
.order-grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .order-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } .order-copy { position: sticky; top: calc(var(--header) + 48px); align-self: start; } }
.order-copy { display: flex; flex-direction: column; gap: 22px; }
.steps { display: grid; }
.step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 20px; padding: 28px 0; border-top: 1px solid var(--rule); }
.step:last-child { border-bottom: 1px solid var(--rule); }
.step-n { grid-row: 1 / span 2; display: flex; align-items: center; gap: 8px; color: var(--ink-2); height: 1.9rem; font-variant-numeric: tabular-nums; }
.step-n svg { width: 16px; height: 16px; color: var(--ink-3); }
.step h3 { padding-top: .1em; }
.step p { color: var(--ink-2); max-width: 46ch; }
@media (min-width: 561px) { .step:has(.approved) p { max-width: 34ch; } }
.approved { position: absolute; right: 0; top: calc(50% - 25px); display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 9px; border: 2px solid var(--red); border-radius: 4px; color: var(--red); transform: rotate(-6deg); filter: url(#ink-rough); }
.approved .seal { height: 30px; }
.approved b { font: 700 .75rem/1.1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.approved b:lang(zh) { font: 900 1rem/1.1 var(--f-han); letter-spacing: .2em; }
@media (prefers-reduced-motion: no-preference) { .approved.is-pressed { animation: restamp .8s var(--ease-press) both; } }
@keyframes restamp { 0% { transform: rotate(-6deg) scale(1); } 36% { transform: rotate(-12deg) scale(1.18); opacity: .55; } 64% { transform: rotate(-5deg) scale(.95); opacity: 1; } 100% { transform: rotate(-6deg) scale(1); } }
@media (max-width: 560px) { .approved { position: static; justify-self: start; margin-top: 14px; grid-column: 2; } }

/* ---------- photos ---------- */
.photo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.photo .frame { position: relative; aspect-ratio: var(--ratio, 3 / 2); max-width: 100%; background: var(--tint); overflow: hidden; }
.photo .frame > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.photo figcaption { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-3); }
.photo-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: var(--tint); }
.photo-fallback > svg { width: 82%; height: 78%; overflow: visible; }
.photo .frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
html:not(.js) video[data-loop] { display: none; }
@media (prefers-reduced-motion: reduce) { video[data-loop] { display: none; } }
@media (hover: hover) { .photo:hover .frame > img, .photo:hover .frame > video { transform: scale(1.025); } }

/* ---------- services ---------- */
.svc { display: grid; gap: 40px; align-items: start; }
.svc + .svc { margin-top: clamp(96px, 11vw, 160px); }
@media (min-width: 960px) {
  .svc { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
  .svc.flip .photo { order: 2; }
}
.svc-body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.svc-num { color: var(--red-ink); }
.svc-body h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); }
.svc-body > p { color: var(--ink-2); max-width: 46ch; }
.svc-body > p:lang(zh) { max-width: 26em; }
.specs { display: grid; gap: 18px 28px; padding-block: 18px 4px; border-top: 1px solid var(--rule); }
@media (min-width: 560px) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .specs .spec-main { grid-column: 1 / -1; } }
.spec h3 { margin-bottom: 10px; color: var(--ink-2); font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; }
.spec h3:lang(zh) { font-size: .75rem; letter-spacing: .05em; font-weight: 500; }
.spec ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.spec li { display: inline-flex; align-items: baseline; gap: 9px; }
.spec li::before { content: ""; width: 5px; height: 5px; background: var(--ink-3); flex: none; transform: translateY(-2px); }
.spec-main li { font-weight: 600; }
.spec-main li::before { background: var(--red); }

.everyday { display: grid; gap: 34px 28px; }
@media (min-width: 640px) { .everyday { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .everyday { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ed { display: flex; flex-direction: column; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.ed .frame { position: relative; aspect-ratio: 4 / 3; background: var(--tint); }
.ed .frame svg { position: absolute; inset: 12% 14%; width: 72%; height: 76%; overflow: visible; }
.ed .frame img { width: 100%; height: 100%; object-fit: cover; }
.ed h3 { font-size: 1.25rem; }
.ed p { color: var(--ink-2); font-size: .9375rem; }
.ed .ask { margin-top: auto; padding-top: 4px; color: var(--ink); font-size: .875rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.ed .ask svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
@media (hover: hover) { .ed:hover .ask svg { transform: translateX(4px); } .ed:hover .ask { color: var(--red-ink); } }

/* swatch book: finishes */
.tinted { background: var(--tint); }
.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
@media (min-width: 760px) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; } }
.sw { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chip-card { position: relative; aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: var(--sheet); box-shadow: var(--shadow-sheet); cursor: default; isolation: isolate; }
.chip-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.chip-card .mark { position: absolute; left: 50%; top: 50%; width: 30%; translate: -50% -50%; aspect-ratio: 100 / 160; z-index: 1; }
.chip-card .mark use { --seal-bg: var(--red); --seal-fg: var(--on-red); }
.sw h3 { font-size: 1.0625rem; display: flex; align-items: baseline; gap: 10px; }
.sw h3 .mono { color: var(--ink-3); font-weight: 500; }
.sw p { color: var(--ink-2); font-size: .875rem; line-height: 1.55; }
/* each sample is rendered with css only */
.s-matte { background: color-mix(in srgb, var(--ink) 88%, var(--sheet)); }
.s-matte .mark use { --seal-bg: color-mix(in srgb, var(--ink) 70%, var(--sheet)); --seal-fg: color-mix(in srgb, var(--sheet) 60%, transparent); }
.s-gloss { background: var(--red); }
.s-gloss .mark use { --seal-bg: transparent; --seal-fg: var(--on-red); }
.s-gloss::after { background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .38) 45%, transparent 60%) -120% 0 / 250% 100% no-repeat; transition: background-position 1.1s var(--ease); }
.s-foil { background: var(--ink); }
.s-foil .mark use { --seal-bg: var(--foil-1); --seal-fg: var(--ink); }
.s-foil::after { background: linear-gradient(120deg, transparent 35%, color-mix(in srgb, var(--foil-2) 70%, transparent) 48%, transparent 60%) -120% 0 / 250% 100% no-repeat; mix-blend-mode: screen; transition: background-position 1.2s var(--ease); }
.s-uv { background: color-mix(in srgb, var(--ink) 92%, var(--sheet)); }
.s-uv .mark use { --seal-bg: color-mix(in srgb, var(--ink) 92%, var(--sheet)); --seal-fg: color-mix(in srgb, var(--ink) 75%, var(--sheet)); }
.s-uv .mark { filter: drop-shadow(0 0 0 transparent); transition: filter .6s var(--ease); }
.s-emboss { background: var(--tint); }
.s-emboss .mark use { --seal-bg: transparent; --seal-fg: var(--tint); }
.s-emboss .mark { filter: drop-shadow(-1px -1px 0 rgb(255 255 255 / .7)) drop-shadow(2px 2px 1px rgb(0 0 0 / .16)); transition: filter .6s var(--ease); }
.s-diecut { background: var(--red); }
.s-diecut .mark { width: 34%; }
.s-diecut .mark use { --seal-bg: var(--sheet); --seal-fg: var(--sheet); }
.s-diecut::before { content: ""; position: absolute; inset: 14%; border: 1px dashed color-mix(in srgb, var(--on-red) 75%, transparent); border-radius: 50%; z-index: 1; transition: transform .8s var(--ease); }
.s-kraft { background:
  radial-gradient(circle at 20% 30%, rgb(0 0 0 / .06) 0 1px, transparent 1.5px) 0 0 / 7px 7px,
  radial-gradient(circle at 70% 60%, rgb(255 255 255 / .08) 0 1px, transparent 1.5px) 0 0 / 11px 11px,
  linear-gradient(160deg, var(--kraft), var(--kraft-2)); }
.s-kraft .mark use { --seal-bg: var(--ink); --seal-fg: var(--kraft); }
.s-special { background:
  repeating-linear-gradient(90deg, rgb(0 0 0 / .035) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 5px),
  color-mix(in srgb, var(--red) 12%, var(--sheet)); }
.s-special .mark use { --seal-bg: var(--red-deep); --seal-fg: color-mix(in srgb, var(--red) 12%, var(--sheet)); }
@media (hover: hover) {
  .sw:hover .s-gloss::after, .sw:hover .s-foil::after { background-position: 140% 0; }
  .sw:hover .s-uv .mark { filter: drop-shadow(0 0 6px rgb(255 255 255 / .35)); }
  .sw:hover .s-emboss .mark { filter: drop-shadow(-1px -1px 0 rgb(255 255 255 / .9)) drop-shadow(4px 5px 3px rgb(0 0 0 / .2)); }
  .sw:hover .s-diecut::before { transform: rotate(40deg) scale(.96); }
}
.sw.is-shown .s-gloss::after, .sw.is-shown .s-foil::after { background-position: 140% 0; }

/* ---------- about ---------- */
.story { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } }
.story-copy { display: flex; flex-direction: column; gap: 22px; }
.story-copy > p:not(.eyebrow) { color: var(--ink-2); max-width: 46ch; }
.story-copy > p:lang(zh) { max-width: 26em; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 14px; border-top: 1px solid var(--rule); }
.fact { padding-top: 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fact b { font: 800 clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem)/1 var(--f-display); font-stretch: 112%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fact b:lang(zh) { font-weight: 900; letter-spacing: .02em; font-stretch: 100%; }
.fact b small { font-size: .45em; margin-left: .15em; font-weight: 700; letter-spacing: 0; }
.fact span { color: var(--ink-2); font-size: .875rem; line-height: 1.45; }
.pledges { display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .pledges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pledge { display: flex; flex-direction: column; gap: 12px; padding: 30px 0 34px; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .pledge { padding: 34px 32px 6px; border-bottom: 0; } .pledge + .pledge { border-left: 1px solid var(--rule); } .pledge:first-child { padding-left: 0; } .pledge:last-child { padding-right: 0; } }
.pledge .seal { height: 34px; }
.pledge p { color: var(--ink-2); max-width: 36ch; }
.pledge p:lang(zh) { max-width: 22em; }
.events { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .events { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; } }

/* ---------- closing call to action ---------- */
.cta-band { background: var(--table); padding-block: clamp(56px, 7vw, 96px); }
.cta-band .sheet { padding: clamp(36px, 6vw, 80px) var(--sp); display: grid; gap: 28px; }
@media (min-width: 900px) { .cta-band .sheet { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 56px; } }
.cta-band h2 { max-width: 16ch; }
.cta-band h2:lang(zh) { max-width: 12em; }
.cta-band p { color: var(--ink-2); max-width: 46ch; }
.cta-band .cta-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cta-seal { height: clamp(110px, 12vw, 170px); transform: rotate(-6deg); filter: url(#ink-rough); justify-self: end; }
@media (max-width: 899px) { .cta-seal { display: none; } }
@media (prefers-reduced-motion: no-preference) { .cta-seal.is-pressed { animation: restamp .8s var(--ease-press) both; } }

/* ---------- faq ---------- */
.faq-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.faq-grid > header { display: flex; flex-direction: column; gap: 20px; }
.qa details { border-top: 1px solid var(--rule); }
.qa details:last-child { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; font: 650 1.125rem/1.35 var(--f-display); font-stretch: 104%; border-radius: 4px; transition: color .25s; }
.qa summary:lang(zh) { font-weight: 700; letter-spacing: .02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--red-ink); }
.pm { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); transition: transform .45s var(--ease), background .3s, border-color .3s; }
.pm::before, .pm::after { content: ""; position: absolute; left: 8px; right: 8px; top: calc(50% - .75px); height: 1.5px; background: var(--ink); transition: transform .45s var(--ease); }
.pm::after { transform: rotate(90deg); }
details[open] .pm { transform: rotate(180deg); border-color: var(--red); }
details[open] .pm::after { transform: rotate(0deg); }
.ans { padding: 0 52px 24px 0; color: var(--ink-2); max-width: 62ch; }
.ans p + p { margin-top: .8em; }
@supports (interpolate-size: allow-keywords) {
  .qa { interpolate-size: allow-keywords; }
  .qa details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
  .qa details[open]::details-content { block-size: auto; }
}

/* ---------- contact + quote request ---------- */
.contact { background: var(--table); padding-block: var(--hero-pad) clamp(72px, 9vw, 128px); }
.contact .sheet { padding: calc(var(--sp) + 20px) var(--sp) var(--sp); }
.contact-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.contact-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.contact-copy h1 { font-size: clamp(2.3rem, 1.3rem + 2.8vw, 3.9rem); line-height: 1.02; font-weight: 800; font-stretch: 106%; letter-spacing: -.028em; max-width: 14ch; }
.contact-copy h1:lang(zh) { font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3.4rem); font-weight: 900; line-height: 1.24; letter-spacing: .02em; font-stretch: 100%; max-width: 9em; }
.lines { display: grid; margin-top: 10px; border-top: 1px solid var(--rule); }
.line { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.line dt { color: var(--ink-2); }
@media (max-width: 560px) { .line { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; } .line dt { grid-column: 1 / -1; } }
.line dd { font: 500 1.0625rem/1.4 var(--f-mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.line dd:lang(zh) { font-family: var(--f-body); letter-spacing: 0; }
.line dd a { text-decoration: none; }
.line dd a:hover { color: var(--red-ink); }
.copy-btn { appearance: none; border: 1px solid var(--rule); background: var(--sheet); border-radius: 999px; padding: 7px 12px; font: 600 .6875rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; transition: border-color .25s, color .25s; }
.copy-btn:lang(zh) { font-size: .75rem; letter-spacing: .04em; }
.copy-btn:hover { border-color: var(--ink); color: var(--ink); }
.contact-note { color: var(--ink-2); font-size: .9375rem; }

.jt { position: relative; background: var(--paper); border: 1px solid var(--rule); padding: 30px clamp(18px, 3vw, 34px) 28px; }
.jt::before { /* perforation */
  content: ""; position: absolute; left: 14px; right: 14px; top: 12px; height: 4px;
  background: radial-gradient(circle, var(--rule) 1.6px, transparent 1.9px) 0 50% / 10px 4px repeat-x;
}
.jt.is-flash { animation: flash 1.1s var(--ease); }
@keyframes flash { 0%, 100% { box-shadow: none; } 25% { box-shadow: 0 0 0 3px var(--red); } }
.jt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0 18px; border-bottom: 1px dashed var(--ink-3); }
.jt-head .mono { color: var(--ink-2); }
.jt-head .mono b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.jt-head .seal { height: 30px; }
.jt-body { display: grid; gap: 22px; padding-top: 22px; }
.fld { display: grid; gap: 8px; min-width: 0; }
.fld > .mono, .fld legend { color: var(--ink-2); padding: 0; }
fieldset.fld { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip > span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--rule); border-radius: 999px; font-size: .875rem; line-height: 1.2; background: var(--sheet); transition: border-color .2s, background .2s, color .2s, transform .15s var(--ease); }
.chip > span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink-3); transition: background .2s, border-color .2s; }
.chip:hover > span { border-color: var(--ink-3); }
.chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.chip input:checked + span::before { background: var(--red); border-color: var(--red); }
.chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.chip input:active + span { transform: scale(.97); }
.row3 { display: grid; gap: 18px; }
@media (min-width: 560px) { .row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inp { width: 100%; min-width: 0; appearance: none; border: 0; border-bottom: 1px solid var(--ink-3); border-radius: 0; background: transparent; padding: 8px 0 9px; font: 400 1rem/1.4 var(--f-body); color: var(--ink); transition: border-color .25s; }
.inp::placeholder { color: var(--ink-3); }
.inp:hover { border-bottom-color: var(--ink-2); }
.inp:focus { outline: none; border-bottom-color: var(--red); box-shadow: 0 1px 0 var(--red); }
textarea.inp { resize: vertical; min-height: 66px; }
.preview { display: grid; gap: 10px; padding-top: 6px; }
.preview .mono { color: var(--ink-2); display: flex; justify-content: space-between; gap: 12px; }
.bubble { position: relative; margin: 0; padding: 14px 16px; background: var(--tint); border-radius: 14px 14px 14px 4px; font: 400 .9375rem/1.6 var(--f-body); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); min-height: 4.6em; }
.jt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 4px; }
.jt-foot .mono { flex-basis: 100%; color: var(--ink-2); text-transform: none; letter-spacing: .02em; padding-top: 4px; }

/* ---------- 404 ---------- */
.lost { min-height: 72svh; display: grid; place-items: center; text-align: center; padding-block: 64px; }
.lost-in { display: grid; justify-items: center; gap: 22px; }
.misreg { position: relative; width: clamp(150px, 26vw, 240px); aspect-ratio: 1; }
.misreg svg { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
.misreg svg { stroke: none; }
.misreg .c { fill: var(--pc); } .misreg .m { fill: var(--pm); } .misreg .y { fill: var(--py); } .misreg .k { fill: var(--ink); }
.misreg .c { transform: translate(-7px, 3px); } .misreg .m { transform: translate(6px, -4px); } .misreg .y { transform: translate(3px, 6px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .misreg svg { mix-blend-mode: screen; } }
:root[data-theme="dark"] .misreg svg { mix-blend-mode: screen; }
@media (prefers-reduced-motion: no-preference) {
  .misreg .c, .misreg .m, .misreg .y { animation: wobble 3.4s var(--ease) infinite alternate; }
  .misreg .m { animation-delay: -1.1s; } .misreg .y { animation-delay: -2.2s; }
}
@keyframes wobble { to { transform: translate(0, 0); } }
.lost h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; font-stretch: 106%; letter-spacing: -.02em; }
.lost h1:lang(zh) { font-weight: 900; letter-spacing: .03em; }
.lost p { color: var(--ink-2); }

/* ---------- footer ---------- */
.ftr { padding-top: clamp(64px, 8vw, 104px); }
.ftr-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding-bottom: 44px; }
.ftr-brand, .ftr-col:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .ftr-in { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); column-gap: 40px; } .ftr-brand, .ftr-col:last-child { grid-column: auto; } }
.ftr-brand { display: flex; align-items: flex-start; gap: 18px; }
.ftr-brand .seal { height: 76px; }
.ftr-brand b { display: block; font: 800 clamp(1.8rem, 1.2rem + 2vw, 2.6rem)/1 var(--f-display); font-stretch: 122%; letter-spacing: -.01em; }
.ftr-brand p { margin-top: 12px; color: var(--ink-2); max-width: 34ch; font-size: .9375rem; }
.ftr-brand p:lang(zh) { max-width: 20em; }
.ftr-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ftr-col .mono { color: var(--ink-3); }
.ftr-col ul { display: grid; gap: 6px; }
.ftr-col a { text-decoration: none; color: var(--ink-2); font-size: .9375rem; transition: color .2s; overflow-wrap: anywhere; }
.ftr-col a:hover { color: var(--red-ink); }
.ftr-col li { color: var(--ink-2); font-size: .9375rem; overflow-wrap: anywhere; }
.ftr-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 18px; border-top: 1px solid var(--rule); color: var(--ink-2); }
.colorbar { display: grid; grid-template-columns: repeat(10, 1fr); height: 10px; }
.colorbar i:nth-child(1) { background: var(--pc); } .colorbar i:nth-child(2) { background: var(--pm); }
.colorbar i:nth-child(3) { background: var(--py); } .colorbar i:nth-child(4) { background: var(--ink); }
.colorbar i:nth-child(5) { background: var(--red); } .colorbar i:nth-child(6) { background: color-mix(in srgb, var(--ink) 75%, var(--paper)); }
.colorbar i:nth-child(7) { background: color-mix(in srgb, var(--ink) 50%, var(--paper)); } .colorbar i:nth-child(8) { background: color-mix(in srgb, var(--ink) 25%, var(--paper)); }
.colorbar i:nth-child(9) { background: color-mix(in srgb, var(--red) 50%, var(--paper)); } .colorbar i:nth-child(10) { background: color-mix(in srgb, var(--red) 20%, var(--paper)); }

/* ---------- list and detail pages: client products, events ---------- */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.link-row { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.inline-link { color: inherit; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .2s; }
.inline-link:hover { color: var(--red-ink); }
.hit-cover { color: inherit; text-decoration: none; }
.hit-cover::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.sample-tag { display: inline-block; vertical-align: .1em; margin-left: 8px; padding: 3px 7px; border: 1px dashed var(--red-ink); border-radius: 3px; font: 600 .625rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink); white-space: nowrap; }
.sample-tag:lang(zh) { font-size: .6875rem; letter-spacing: .04em; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--red-ink); }
.crumbs [aria-current] { color: var(--ink); }
.facts-list { display: grid; max-width: 34rem; border-top: 1px solid var(--rule); }
.facts-list > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts-list dt { color: var(--ink-3); padding-top: .25em; }
.prose { display: grid; gap: 1.1em; max-width: 62ch; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.prose:lang(zh) { max-width: 34em; line-height: 1.9; }
.pd-story { display: grid; gap: 28px; }
.pd-story header { display: grid; gap: 18px; }
@media (min-width: 900px) { .pd-story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; } }
.empty { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 36px; padding: clamp(28px, 4vw, 48px); border: 1px dashed var(--ink-3); border-radius: 4px; }
.empty .seal { height: 96px; transform: rotate(-6deg); }
.empty > div { flex: 1 1 280px; display: grid; justify-items: start; gap: 12px; }
.empty p { color: var(--ink-2); }

/* shelf items are links */
.product .hit { position: absolute; inset: 0; z-index: 2; border-radius: 4px; }
.product .hit:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
.tag .sample-tag { display: block; width: max-content; margin: 8px auto 0; }

/* product cards */
.filters button { appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: .875rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.filters button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink-3); transition: background .2s, border-color .2s; }
.filters button:hover { border-color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filters button[aria-pressed="true"]::before { background: var(--red); border-color: var(--red); }
html:not(.js) .filters { display: none; }
.goods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 16px; }
@media (min-width: 900px) { .goods { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 28px; } }
.good { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; color: inherit; text-decoration: none; }
.good[hidden] { display: none; }
.good-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; aspect-ratio: 4 / 5; max-width: 100%; padding: 14% 0 12%; background: var(--tint); overflow: hidden; }
.good-stage .pk { display: block; flex: 0 1 auto; min-height: 0; width: auto; max-width: 70%; max-height: 82%; transform-origin: 50% 100%; transition: transform .55s var(--ease); }
.good-stage svg.pk { width: calc(var(--vw) * 1.3px); height: auto; overflow: visible; }
.good-stage img.pk { height: auto; object-fit: contain; filter: drop-shadow(0 16px 14px rgb(0 0 0 / .2)); }
.good-stage .shelf-edge { flex: none; align-self: stretch; position: relative; height: 10px; margin-inline: 8%; background: var(--ink); border-radius: 2px; }
.good-stage .shelf-edge::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: linear-gradient(color-mix(in srgb, var(--ink) 14%, transparent), transparent); }
.good-copy { display: grid; gap: 6px; }
.good-cat { color: var(--ink-3); }
.good h3, .good-copy b { font: 750 1.25rem/1.25 var(--f-display); font-stretch: 106%; letter-spacing: -.01em; }
.good h3:lang(zh), .good-copy b:lang(zh) { font-weight: 900; letter-spacing: .03em; font-stretch: 100%; }
.good-client { color: var(--ink-2); font-size: .9375rem; }
.good-made { color: var(--ink-2); font-size: .875rem; line-height: 1.55; }
.good-made .mono { margin-right: 6px; color: var(--ink-3); }
.good:has(.hit-cover:focus-visible) .cropped { outline: 2px solid var(--red); outline-offset: 8px; }
.good-blank .good-stage { justify-content: center; padding: 0; background: transparent; border: 1px dashed var(--ink-3); transition: border-color .3s, background .3s; }
.good-blank .plus { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid currentColor; color: var(--ink-2); font: 300 28px/1 var(--f-body); transition: transform .45s var(--ease), background .3s, color .3s, border-color .3s; }
.good-blank .good-copy { gap: 8px; }
@media (hover: hover) {
  .good:hover .cropped, .evp:hover .cropped { --mo: 1px; --mc: var(--red); }
  .good:hover .good-stage .pk { transform: translateY(-8px) rotate(-1.5deg); }
  .good-blank:hover .good-stage { border-color: var(--red); background: color-mix(in srgb, var(--red) 4%, transparent); }
  .good-blank:hover .plus { transform: rotate(90deg); background: var(--red-fill); border-color: var(--red-fill); color: var(--on-red); }
  .evp:hover .frame > img { transform: scale(1.025); }
}

/* product page */
.pd .plate-in { align-items: center; }
.pd-stage .good-stage { aspect-ratio: 1 / 1; }
.pd-stage .good-stage .pk { max-width: 62%; }
@media (max-width: 899px) { .pd-stage { order: -1; } .pd-stage .good-stage { aspect-ratio: 5 / 4; } }

/* events */
.ev-list { display: grid; border-top: 1px solid var(--rule); }
.ev { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.ev-date { display: grid; justify-items: center; gap: 2px; width: 84px; padding: 12px 0 10px; background: var(--sheet); border: 1px solid var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--red); text-align: center; }
.ev-date b { font: 800 2.5rem/1 var(--f-display); font-stretch: 110%; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ev-date span { color: var(--ink-2); font-size: .8125rem; line-height: 1.3; }
.ev-body { display: grid; gap: 8px; min-width: 0; }
.ev-when, .ev-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-3); }
.ev-where svg { width: 14px; height: 14px; flex: none; }
.ev h3 a { color: inherit; text-decoration: none; transition: color .2s; }
.ev h3 a:hover { color: var(--red-ink); }
.ev-body > p:not(.mono) { max-width: 60ch; color: var(--ink-2); }
.ev-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
@media (min-width: 900px) {
  .ev { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 40px; align-items: center; }
  .ev-date { width: 100px; }
  .ev-act { grid-column: auto; flex-direction: column; align-items: flex-end; }
}
.ev-over { display: none; color: var(--ink-3); }
.is-over [data-signup], .is-over .ics { display: none; }
.is-over .ev-over { display: inline-flex; }
.is-over .ev-soon { display: none; }
.eyebrow .ev-over { color: inherit; }
.ev-over-note { flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--ink-2); }
.evp-grid { display: grid; gap: 44px 28px; }
@media (min-width: 640px) { .evp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .evp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evp { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.evp .frame { position: relative; aspect-ratio: 3 / 2; max-width: 100%; background: var(--tint); overflow: hidden; }
.evp .frame > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.evp > .mono { color: var(--ink-3); }
.evp h3 { font-size: 1.25rem; }
.evp > p:last-child { color: var(--ink-2); }
.agenda { display: grid; margin-top: .4em; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.agenda li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.agenda .mono { padding-top: .3em; color: var(--red-ink); }

/* event page: a desk calendar */
.evd .plate-in { align-items: center; }
.evd-art { display: grid; place-items: center; min-height: 320px; }
.cal { position: relative; display: grid; justify-items: center; gap: 8px; width: min(100%, 250px); padding: 44px 24px 30px; background: var(--sheet); border: 1px solid var(--ink); border-radius: 6px; box-shadow: 8px 8px 0 var(--red); transform: rotate(2.5deg); }
.cal-rings { position: absolute; top: -13px; left: 0; right: 0; display: flex; justify-content: center; gap: 96px; }
.cal-rings i { width: 10px; height: 26px; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); }
.cal b { font: 800 clamp(5rem, 3.2rem + 5vw, 7.5rem)/.9 var(--f-display); font-stretch: 110%; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.cal-m { font: 750 1.5rem/1 var(--f-display); font-stretch: 108%; }
.cal-m:lang(zh) { font-family: var(--f-han); font-weight: 900; letter-spacing: .06em; }
.cal-y, .cal-w { color: var(--ink-3); }
.cal-seal { position: absolute; right: -18px; bottom: -24px; height: 72px; transform: rotate(-12deg); }
@media (max-width: 899px) { .evd-art { display: none; } }

/* ---------- floating enquiry + toast ---------- */
.fab {
  position: fixed; z-index: 40; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; height: 54px; padding: 0 17px; gap: 0; border-radius: 999px;
  background: var(--red-fill); color: var(--on-red); text-decoration: none; box-shadow: var(--shadow-lift);
  transition: transform .4s var(--ease), opacity .3s, gap .4s var(--ease), background .3s;
}
.fab svg { width: 20px; height: 20px; flex: none; }
.fab span { max-width: 0; overflow: hidden; white-space: nowrap; font: 600 .9375rem/1 var(--f-body); transition: max-width .45s var(--ease); }
@media (hover: hover) { .fab:hover { gap: 10px; background: var(--red-deep); } .fab:hover span { max-width: 200px; } }
@media (min-width: 1024px) { .fab { display: none; } }
.fab.is-away { transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); max-width: min(92vw, 460px); padding: 14px 18px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: .9375rem; line-height: 1.5; box-shadow: var(--shadow-lift); transform: translate(-50%, 20px); opacity: 0; transition: transform .4s var(--ease), opacity .3s; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}