/*
 * Master design system — tokens, base and components.
 * Documented at https://master.co/brand/#tokens
 *
 * Dark is the brand's home ground: semantic tokens default to dark and are
 * redefined for light where a page opts in with .theme-auto or [data-theme].
 * The palette and the @system block are generated from brand/source/build.py.
 */
@import url('/assets/fonts/fonts.css');

:root {
  /* ---------------------------------------------------------- palette */
  --gold-50: #FEFAED; --gold-100: #FCF2D5; --gold-200: #FAE8B3; --gold-300: #F5D68B;
  --gold-400: #EEC56B; --gold-500: #DFA54B; --gold-600: #C18435; --gold-700: #A06625;
  --gold-800: #804D19; --gold-900: #613811; --gold-950: #3B2008;
  --graphite-50: #F7F7F8; --graphite-100: #EDEDEF; --graphite-200: #D9D9DD; --graphite-300: #B4B4BA;
  --graphite-400: #86868D; --graphite-500: #5C5C63; --graphite-600: #3A3A3F; --graphite-700: #2A2A2E;
  --graphite-800: #1E1E21; --graphite-900: #151517; --graphite-950: #0D0D0E;

  /* ---------------------------------------------------------- semantic (dark) */
  --bg: var(--graphite-950);
  --surface: var(--graphite-900);
  --surface-2: var(--graphite-800);
  --fill: rgb(255 255 255 / .06);
  --fill-strong: rgb(255 255 255 / .1);
  --line: rgb(255 255 255 / .09);
  --line-strong: rgb(255 255 255 / .16);
  --highlight: rgb(255 255 255 / .07);
  --text: var(--graphite-50);
  --text-2: var(--graphite-300);
  --text-3: var(--graphite-400);
  --accent: var(--gold-400);
  --accent-text: var(--gold-300);
  --accent-ink: var(--graphite-900);
  --accent-glow: rgb(238 197 107 / .14);
  --focus: var(--gold-300);
  --success: #7FD3A6;
  --danger: #FF8A7A;
  --glass: rgb(13 13 14 / .72);

  /* ---------------------------------------------------------- elevation */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 12px 32px -12px rgb(0 0 0 / .6), 0 2px 6px rgb(0 0 0 / .3);
  --shadow-3: 0 32px 80px -24px rgb(0 0 0 / .75), 0 6px 16px rgb(0 0 0 / .35);

  /* ---------------------------------------------------------- font */
  --font-sans: 'Geist', 'Noto Sans TC', 'PingFang TC', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* @system: generated, edit TYPE / SPACE / RADIUS / MOTION in build.py */
  /* type roles: size, line height, tracking, weight */
  --type-display-size: clamp(2.75rem, 1.8697rem + 3.7559vw, 5.25rem); --type-display-leading: 1; --type-display-tracking: -0.045em; --type-display-weight: 600;
  --type-title-1-size: clamp(2.5rem, 1.9718rem + 2.2535vw, 4rem); --type-title-1-leading: 1.04; --type-title-1-tracking: -0.04em; --type-title-1-weight: 600;
  --type-title-2-size: clamp(2rem, 1.6479rem + 1.5023vw, 3rem); --type-title-2-leading: 1.08; --type-title-2-tracking: -0.032em; --type-title-2-weight: 600;
  --type-title-3-size: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem); --type-title-3-leading: 1.15; --type-title-3-tracking: -0.024em; --type-title-3-weight: 600;
  --type-headline-size: clamp(1.1875rem, 1.1435rem + 0.1878vw, 1.3125rem); --type-headline-leading: 1.3; --type-headline-tracking: -0.016em; --type-headline-weight: 600;
  --type-intro-size: clamp(1.1875rem, 1.1435rem + 0.1878vw, 1.3125rem); --type-intro-leading: 1.45; --type-intro-tracking: -0.014em; --type-intro-weight: 400;
  --type-body-size: 1.0625rem; --type-body-leading: 1.53; --type-body-tracking: -0.011em; --type-body-weight: 400;
  --type-callout-size: 0.9375rem; --type-callout-leading: 1.5; --type-callout-tracking: -0.006em; --type-callout-weight: 400;
  --type-caption-size: 0.8125rem; --type-caption-leading: 1.45; --type-caption-tracking: -0.002em; --type-caption-weight: 400;
  --type-footnote-size: 0.75rem; --type-footnote-leading: 1.4; --type-footnote-tracking: 0em; --type-footnote-weight: 400;
  /* space, 4 px base */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem;
  /* radius */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px; --radius-3xl: 36px; --radius-full: 999px;
  --corner-shape: superellipse(1.4);
  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: 150ms; --dur: 250ms; --dur-slow: 500ms; --dur-slower: 900ms; --dur-spring: 700ms;
  --ease-spring: linear(0, 0.0214, 0.0768, 0.1548, 0.2461, 0.3435, 0.4413, 0.5354, 0.6231, 0.7025, 0.7725, 0.833, 0.8839, 0.9258, 0.9595, 0.9857, 1.0054, 1.0196, 1.0292, 1.035, 1.0378, 1.0384, 1.0372, 1.0348, 1.0317, 1.0281, 1.0243, 1.0206, 1.017, 1.0137, 1.0108, 1.0081, 1.0059, 1.004, 1.0025, 1.0013, 1.0003, 0.9996, 0.9991, 0.9988, 0.9986, 0.9985, 0.9985, 0.9986, 1);
  /* @system-end */

  /* ---------------------------------------------------------- layout */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --hairline: 1px;

  color-scheme: dark;
}
/* on 2x screens borders are drawn at one device pixel */
@media (min-resolution: 2dppx) { :root { --hairline: .5px; --line: rgb(255 255 255 / .13); --line-strong: rgb(255 255 255 / .22); } }

/* light theme: only where a page opts in */
@media (prefers-color-scheme: light) {
  :root.theme-auto:not([data-theme="dark"]) {
    --bg: #FBFBFC; --surface: #FFFFFF; --surface-2: var(--graphite-100);
    --fill: rgb(21 21 23 / .045); --fill-strong: rgb(21 21 23 / .08);
    --line: rgb(21 21 23 / .1); --line-strong: rgb(21 21 23 / .18); --highlight: rgb(255 255 255 / .9);
    --text: var(--graphite-900); --text-2: var(--graphite-600); --text-3: var(--graphite-500);
    --accent-text: var(--gold-700); --accent-glow: rgb(193 132 53 / .1); --focus: var(--gold-600);
    --success: #1F7A4D; --danger: #C2412D; --glass: rgb(251 251 252 / .74);
    --shadow-1: 0 1px 2px rgb(21 21 23 / .06);
    --shadow-2: 0 12px 32px -14px rgb(21 21 23 / .18), 0 2px 6px rgb(21 21 23 / .05);
    --shadow-3: 0 32px 80px -28px rgb(21 21 23 / .28), 0 6px 16px rgb(21 21 23 / .06);
    color-scheme: light;
  }
}
@media (prefers-color-scheme: light) and (min-resolution: 2dppx) {
  :root.theme-auto:not([data-theme="dark"]) { --line: rgb(21 21 23 / .16); --line-strong: rgb(21 21 23 / .26); }
}
:root[data-theme="light"] {
  --bg: #FBFBFC; --surface: #FFFFFF; --surface-2: var(--graphite-100);
  --fill: rgb(21 21 23 / .045); --fill-strong: rgb(21 21 23 / .08);
  --line: rgb(21 21 23 / .1); --line-strong: rgb(21 21 23 / .18); --highlight: rgb(255 255 255 / .9);
  --text: var(--graphite-900); --text-2: var(--graphite-600); --text-3: var(--graphite-500);
  --accent-text: var(--gold-700); --accent-glow: rgb(193 132 53 / .1); --focus: var(--gold-600);
  --success: #1F7A4D; --danger: #C2412D; --glass: rgb(251 251 252 / .74);
  --shadow-1: 0 1px 2px rgb(21 21 23 / .06);
  --shadow-2: 0 12px 32px -14px rgb(21 21 23 / .18), 0 2px 6px rgb(21 21 23 / .05);
  --shadow-3: 0 32px 80px -28px rgb(21 21 23 / .28), 0 6px 16px rgb(21 21 23 / .06);
  color-scheme: light;
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--type-body-size); line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking); font-weight: var(--type-body-weight);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgb(238 197 107 / .3); color: var(--text); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; transition: outline-offset var(--dur) var(--ease-out); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
code, kbd, pre { font-family: var(--font-mono); letter-spacing: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* --- type roles: one class per role, sizes and tracking come from the tokens */
.t-display, .t-title-1, .t-title-2, .t-title-3, .t-headline, .t-intro, .t-body, .t-callout, .t-caption, .t-footnote {
  font-size: var(--size); line-height: var(--leading); letter-spacing: var(--tracking); font-weight: var(--weight);
}
.t-display  { --size: var(--type-display-size);  --leading: var(--type-display-leading);  --tracking: var(--type-display-tracking);  --weight: var(--type-display-weight); }
.t-title-1  { --size: var(--type-title-1-size);  --leading: var(--type-title-1-leading);  --tracking: var(--type-title-1-tracking);  --weight: var(--type-title-1-weight); }
.t-title-2  { --size: var(--type-title-2-size);  --leading: var(--type-title-2-leading);  --tracking: var(--type-title-2-tracking);  --weight: var(--type-title-2-weight); }
.t-title-3  { --size: var(--type-title-3-size);  --leading: var(--type-title-3-leading);  --tracking: var(--type-title-3-tracking);  --weight: var(--type-title-3-weight); }
.t-headline { --size: var(--type-headline-size); --leading: var(--type-headline-leading); --tracking: var(--type-headline-tracking); --weight: var(--type-headline-weight); }
.t-intro    { --size: var(--type-intro-size);    --leading: var(--type-intro-leading);    --tracking: var(--type-intro-tracking);    --weight: var(--type-intro-weight); }
.t-body     { --size: var(--type-body-size);     --leading: var(--type-body-leading);     --tracking: var(--type-body-tracking);     --weight: var(--type-body-weight); }
.t-callout  { --size: var(--type-callout-size);  --leading: var(--type-callout-leading);  --tracking: var(--type-callout-tracking);  --weight: var(--type-callout-weight); }
.t-caption  { --size: var(--type-caption-size);  --leading: var(--type-caption-leading);  --tracking: var(--type-caption-tracking);  --weight: var(--type-caption-weight); }
.t-footnote { --size: var(--type-footnote-size); --leading: var(--type-footnote-leading); --tracking: var(--type-footnote-tracking); --weight: var(--type-footnote-weight); }
.t-secondary { color: var(--text-2); }
.t-tertiary { color: var(--text-3); }

/* ============================================================ components */

/* --- eyebrow: a small mono label above a heading */
.eyebrow {
  font: 500 var(--type-footnote-size)/1.4 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}

/* --- link */
.link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: .24em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.link:hover { text-decoration-color: var(--accent); }

/* --- arrow: a chevron that grows a shaft on hover. Put .arrow inside any
       link or button; the parent's :hover drives it. */
.arrow { display: inline-block; width: .78em; height: .78em; flex: none; overflow: visible; }
.arrow path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.arrow .shaft { transform: scaleX(0); transform-origin: 1px 6px; transition: transform var(--dur-slow) var(--ease-spring); }
.arrow .head { transform: translateX(-2.5px); transition: transform var(--dur-slow) var(--ease-spring); }
:hover > .arrow .shaft, :focus-visible > .arrow .shaft, .is-hover .arrow .shaft { transform: none; }
:hover > .arrow .head, :focus-visible > .arrow .head, .is-hover .arrow .head { transform: none; }

/* --- button */
.btn {
  --btn-h: 40px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--btn-h); padding-inline: 18px;
  border: 0; border-radius: var(--radius-full);
  font: 500 var(--type-callout-size)/1 var(--font-sans); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out), filter var(--dur) var(--ease-out),
              scale var(--dur-spring) var(--ease-spring);
}
.btn:active { scale: .965; transition-duration: var(--dur-fast); transition-timing-function: var(--ease-out); }
.btn-sm { --btn-h: 32px; padding-inline: 14px; font-size: var(--type-caption-size); }
.btn-lg { --btn-h: 48px; padding-inline: 24px; font-size: var(--type-body-size); }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-400));
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -1px 0 rgb(160 102 37 / .25), 0 1px 2px rgb(0 0 0 / .25);
}
.btn-primary:hover { filter: brightness(1.04) saturate(1.04); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(160 102 37 / .25), 0 1px 2px rgb(0 0 0 / .25), 0 10px 28px -12px rgb(238 197 107 / .6); }
.btn-secondary { background: var(--fill); color: var(--text); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.btn-secondary:hover { background: var(--fill-strong); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { color: var(--text); background: var(--fill); }
.btn-meta { font-size: var(--type-caption-size); font-weight: 450; opacity: .62; }

/* --- badge */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding-inline: 10px; border-radius: var(--radius-full);
  font: 500 var(--type-footnote-size)/1 var(--font-sans); letter-spacing: 0;
  color: var(--text-2); background: var(--fill); box-shadow: inset 0 0 0 var(--hairline) var(--line);
  white-space: nowrap;
}
.badge-gold { color: var(--accent-text); background: rgb(238 197 107 / .08); box-shadow: inset 0 0 0 var(--hairline) rgb(238 197 107 / .32); }
.badge-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: badge-pulse 2.4s var(--ease-out) infinite;
}
@keyframes badge-pulse {
  0% { box-shadow: 0 0 0 0 rgb(238 197 107 / .5); }
  70%, 100% { box-shadow: 0 0 0 6px rgb(238 197 107 / 0); }
}

/* --- card: a raised surface with a lit top edge */
.card {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgb(255 255 255 / .03), rgb(255 255 255 / 0) 60%), var(--surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: inset 0 0 0 var(--hairline) var(--line), inset 0 1px 0 var(--highlight), var(--shadow-1);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}
/* the edge light follows the pointer (set --px / --py) */
.card-glow::before, .card-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.card-glow::before {   /* rim light on the border */
  padding: 1px;
  background: radial-gradient(240px circle at var(--px, 50%) var(--py, 0%), rgb(245 214 139 / .7), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card-glow::after {    /* soft wash inside */
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 0%), var(--accent-glow), transparent 65%);
  z-index: -1;
}
.card-glow:hover::before, .card-glow:hover::after, .card-glow:focus-within::before, .card-glow:focus-within::after { opacity: 1; }
.card-glow:hover { box-shadow: inset 0 0 0 var(--hairline) var(--line-strong), inset 0 1px 0 var(--highlight), var(--shadow-2); }

/* continuous corners where the browser can draw them */
@supports (corner-shape: superellipse(2)) {
  .card, .shape { corner-shape: var(--corner-shape); }
}

/* --- inline code & keyboard */
:not(pre) > code {
  font-size: .86em; padding: .12em .42em; border-radius: var(--radius-xs);
  background: var(--fill); box-shadow: inset 0 0 0 var(--hairline) var(--line); color: var(--text);
}
kbd {
  display: inline-block; min-width: 1.7em; padding: .12em .45em; border-radius: var(--radius-xs);
  font-size: .8em; text-align: center; color: var(--text-2);
  background: var(--fill); box-shadow: inset 0 0 0 var(--hairline) var(--line-strong), inset 0 -1.5px 0 var(--line-strong);
}

/* --- glass: translucent bars that sit over content */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
}

/* --- nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; }
.nav-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); view-transition-name: master-logo; }
.nav-brand svg { height: 20px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: inline-flex; align-items: center; height: 32px; padding-inline: 12px; border-radius: var(--radius-full); text-decoration: none;
  font-size: var(--type-caption-size); font-weight: 500; letter-spacing: 0; color: var(--text-2);
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.nav-link:hover { color: var(--text); background: var(--fill); }
.nav-link[aria-current="page"] { color: var(--text); }

/* --- footer */
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6);
          font-size: var(--type-footnote-size); letter-spacing: 0; color: var(--text-3); }
.footer a { color: var(--text-3); text-decoration: none; transition: color var(--dur) var(--ease-out); }
.footer a:hover { color: var(--text); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }

/* --- toast */
.toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: var(--radius-full);
  background: var(--glass); color: var(--text); font: 500 var(--type-caption-size)/1 var(--font-sans);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: inset 0 0 0 var(--hairline) var(--line-strong), var(--shadow-2);
  translate: -50% 12px; scale: .96; opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), translate var(--dur-spring) var(--ease-spring), scale var(--dur-spring) var(--ease-spring);
}
.toast::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23151517' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5'/%3E%3C/svg%3E") center / 100% no-repeat; }
.toast.show { opacity: 1; translate: -50% 0; scale: 1; }

/* ============================================================ motion */

/* scroll reveal: sections settle into place as they enter the viewport */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
    @keyframes reveal { from { opacity: 0; translate: 0 40px; scale: .975; } }
  }
}

/* page transitions: the logo stays put, the rest cross-fades */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease-out) both; }
::view-transition-group(master-logo) { animation-duration: .6s; animation-timing-function: var(--ease-out); }
/* a theme switch draws its own reveal (brand.js) */
:root.theme-vt::view-transition-old(root), :root.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 10px; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}