/* ============================================================
   Z & C STUDIO — Design Tokens
   Palette / Typography / Spacing / Motion
   ============================================================ */


:root {
  /* ---- Colour ---- */
  --bone:     #EFECE4;
  --sand:     #DFD9CC;
  --charcoal: #14120F;
  --stone:    #55524C;
  --line:     #C7C1B6;
  --sage:     #5C6650;
  --silver:   #A9ABA7;
  --white:    #FFFFFF;

  /* ---- Paper: marbled cloud wash + fine fibre grain ---- */
  --paper-cloud:
    radial-gradient(90% 70% at 14% 10%, rgba(138, 128, 108, 0.3), rgba(138, 128, 108, 0) 64%),
    radial-gradient(80% 60% at 86% 24%, rgba(152, 141, 121, 0.26), rgba(152, 141, 121, 0) 62%),
    radial-gradient(110% 80% at 64% 90%, rgba(128, 119, 101, 0.28), rgba(128, 119, 101, 0) 66%),
    radial-gradient(55% 45% at 34% 56%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%),
    radial-gradient(70% 55% at 94% 76%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 68%),
    radial-gradient(120% 60% at 50% 4%, rgba(160, 149, 128, 0.16), rgba(160, 149, 128, 0) 72%);
  --paper-cloud-dark:
    radial-gradient(90% 70% at 14% 10%, rgba(239, 236, 228, 0.14), rgba(239, 236, 228, 0) 64%),
    radial-gradient(80% 60% at 86% 24%, rgba(239, 236, 228, 0.1), rgba(239, 236, 228, 0) 62%),
    radial-gradient(110% 80% at 64% 90%, rgba(199, 193, 182, 0.17), rgba(199, 193, 182, 0) 66%),
    radial-gradient(55% 45% at 38% 58%, rgba(239, 236, 228, 0.09), rgba(239, 236, 228, 0) 70%),
    radial-gradient(75% 60% at 96% 40%, rgba(239, 236, 228, 0.08), rgba(239, 236, 228, 0) 66%);
  --paper-grain: url('../img/grain.svg');
  /* one entry per layer: 6 cloud washes + 1 grain tile */
  --paper-size: cover, cover, cover, cover, cover, cover, 180px 180px;
  --paper-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  --paper-attach: fixed, fixed, fixed, fixed, fixed, fixed, scroll;
  --paper-pos: center, center, center, center, center, center, top left;

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Noto Serif TC', Georgia, 'Times New Roman', serif;
  --font-ui: 'Jost', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
  --font-zh-serif: 'Noto Serif TC', 'Cormorant Garamond', serif;
  --font-zh-sans: 'Noto Sans TC', 'Jost', sans-serif;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 0.9375rem; /* 15 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --text-h3:   clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --text-h2:   clamp(1.9rem, 1.4rem + 2.2vw, 3.25rem);
  --text-h1:   clamp(2.6rem, 1.6rem + 4.2vw, 5.5rem);

  --tracking-wide: 0.18em;
  --tracking-mid: 0.1em;

  /* ---- Spacing / layout ---- */
  --gutter: 20px;
  --section-y: clamp(72px, 9vw, 140px);
  --container: 1560px;
  --container-narrow: 860px;
  --header-h: 74px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-drawer: cubic-bezier(0.645, 0.045, 0.355, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.55s;
  --dur-slow: 0.9s;

  /* ---- Misc ---- */
  --border: 1px solid var(--line);
}

@media screen and (min-width: 900px) {
  :root {
    --gutter: 40px;
    --header-h: 84px;
  }
}

@media screen and (min-width: 1200px) {
  :root { --gutter: 56px; }
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background-color: var(--bone);
  background-image: var(--paper-cloud), var(--paper-grain);
  background-size: var(--paper-size);
  background-repeat: var(--paper-repeat);
  background-attachment: var(--paper-attach);
  background-position: var(--paper-pos);
  color: var(--charcoal);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--charcoal); color: var(--bone); }

:focus-visible {
  outline: 1px solid var(--sage);
  outline-offset: 3px;
}

/* ============================================================
   Typography helpers
   ============================================================ */
.overline {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone);
}

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: 0.01em;
}

.h1 { font-size: var(--text-h1); }
.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h3); }

.lede {
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.6;
  color: var(--stone);
}

.muted { color: var(--stone); }
.serif-italic { font-style: italic; }

/* Chinese type tuning */
html[data-lang="zh-Hant"] .display {
  font-family: var(--font-zh-serif);
  letter-spacing: 0.05em;
  line-height: 1.25;
}
html[data-lang="zh-Hant"] body,
html[data-lang="zh-Hant"] .lede {
  font-family: var(--font-zh-sans);
  letter-spacing: 0.02em;
}
html[data-lang="zh-Hant"] .overline {
  letter-spacing: 0.28em;
}

/* ============================================================
   Layout helpers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--sand {
  background-color: var(--sand);
  background-image: var(--paper-cloud), var(--paper-grain);
  background-size: var(--paper-size);
  background-repeat: var(--paper-repeat);
  background-attachment: var(--paper-attach);
  background-position: var(--paper-pos);
}
.section--dark {
  background-color: var(--charcoal);
  background-image: var(--paper-cloud-dark), var(--paper-grain);
  background-size: var(--paper-size);
  background-repeat: var(--paper-repeat);
  background-attachment: var(--paper-attach);
  background-position: var(--paper-pos);
  color: var(--bone);
}
.section--dark .overline,
.section--dark .muted { color: rgba(239, 236, 228, 0.6); }

.stack-sm > * + * { margin-top: 12px; }
.stack   > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 32px; }

.center { text-align: center; }
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--charcoal);
  color: var(--bone);
  padding: 12px 20px;
  z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }