/* ==========================================================================
   Chinese Tea Wiki: Styles
   Analog / letterpress treatment: aged paper stock, hairline rules,
   typewriter labels, hand-stamped category marks, catalog numbering.
   ========================================================================== */

:root {
  /* paper stock */
  --paper: #efe8da;
  --paper-card: #f9f4e8;
  --paper-sunk: #e6ddcb;

  /* ink */
  --text: #2b2118;
  --text-muted: #6f6151;
  --ink-faint: #93856f;

  /* rules */
  --rule: #c6b9a1;
  --rule-strong: #8b7c64;

  --accent: #3f5d45;
  --chip-bg: #e6ddcb;
  --shadow-hard: rgba(43, 33, 24, 0.22);
  --stamp-tint: 10%;
  /* category inks print as-authored on light stock */
  --lift-amt: 100%;
  --lift-to: #ffffff;
  --grain-blend: multiply;
  --grain-opacity: 0.22;
  --radius: 2px;

  /* Chinese faces, appended to every stack. A Latin-only list falls off its end
     at the first Chinese character and each OS then picks its own default, which
     is why macOS showed a Song serif and iOS the PingFang sans.

     Naming "Songti SC" is not enough: iOS only exposes a restricted set of font
     names to web content and silently substitutes its system font for the rest
     (verified on device: Songti SC, STSong and SimSun all rendered as PingFang).
     Songti SC is an Apple system font and cannot be redistributed, so the webfont
     is Noto Serif SC: the same Song/Ming style, openly licensed, and it leads the
     stack so every device renders the identical face. */
  --font-cjk: "Noto Serif SC", "Songti SC", "STSong", "Songti TC", "SimSun";

  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    "Hoefler Text", Georgia, "Times New Roman", var(--font-cjk), serif;
  --font-mono: "Courier Prime", "American Typewriter", "Courier New", Courier,
    "Nimbus Mono PS", var(--font-cjk), monospace;
  /* Category names. Slab serif with letterpress weight: sturdier than a
     monospace at small sizes, especially on high-density phone screens. */
  --font-label: "Bitter", "Book Antiqua", Georgia, "Times New Roman",
    var(--font-cjk), serif;
}

:root[data-theme="dark"] {
  --paper: #17120c;
  --paper-card: #1f1810;
  --paper-sunk: #241c13;
  --text: #ece0c9;
  --text-muted: #a3917a;
  --ink-faint: #7d6d59;
  --rule: #3d3325;
  --rule-strong: #6a5b45;
  --accent: #8fb79a;
  --chip-bg: #241c13;
  --shadow-hard: rgba(0, 0, 0, 0.55);
  --stamp-tint: 18%;
  /* ...and are lifted toward the paper ink on dark stock so the
     deepest ones (dark tea, black tea) stay legible */
  --lift-amt: 58%;
  --lift-to: #e8dcc6;
  --grain-blend: overlay;
  --grain-opacity: 0.14;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17120c;
    --paper-card: #1f1810;
    --paper-sunk: #241c13;
    --text: #ece0c9;
    --text-muted: #a3917a;
    --ink-faint: #7d6d59;
    --rule: #3d3325;
    --rule-strong: #6a5b45;
    --accent: #8fb79a;
    --chip-bg: #241c13;
    --shadow-hard: rgba(0, 0, 0, 0.55);
    --stamp-tint: 18%;
    --lift-amt: 58%;
    --lift-to: #e8dcc6;
    --grain-blend: overlay;
    --grain-opacity: 0.14;
  }
}

/* Resolved category ink. Declared on the elements that carry the inline
   --card-color / --chip-color so children can inherit the result. */
.tea-card, .detail-sheet {
  --ink-mark: color-mix(in srgb, var(--card-color, var(--accent)) var(--lift-amt), var(--lift-to));
}

.chip {
  --ink-mark: color-mix(in srgb, var(--chip-color, var(--accent)) var(--lift-amt), var(--lift-to));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--text);
}

body {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.62;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* viewport-fit=cover lets the page use the full screen, so keep content
     clear of the status bar, notch, and home indicator. Zero elsewhere. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

/* paper grain: a single fixed plate over the whole sheet */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }

::selection { background: color-mix(in srgb, var(--accent) 26%, var(--paper)); }

:focus-visible {
  outline: 1px dashed var(--text);
  outline-offset: 3px;
}

/* ---------- masthead ---------- */

.masthead {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 26px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.masthead-title { display: block; }

.masthead-en {
  display: block;
  font-size: clamp(30.8px, 5.2vw, 60px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.masthead-cn {
  display: block;
  margin-top: 8px;
  font-size: clamp(19.8px, 3.1vw, 35px);
  line-height: 1.1;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.search-wrap { flex: 0 1 340px; min-width: 200px; padding-top: 8px; }

#search-input {
  width: 100%;
  max-width: 380px;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.03em;
}

#search-input::placeholder { color: var(--ink-faint); }

#search-input:focus {
  outline: none;
  border-bottom-color: var(--text);
  border-bottom-width: 2px;
  padding-bottom: 5px;
}

/* ---------- sheet ---------- */

.app {
  flex: 1;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 38px 26px 72px;
}

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 26px 22px 34px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  font-style: italic;
  max-width: 620px;
  margin: 0 auto;
}

.site-footer::before {
  content: "❧";
  display: block;
  font-style: normal;
  font-size: 15px;
  color: var(--rule-strong);
  margin-bottom: 12px;
}

/* ---------- category stamps ---------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-muted);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.chip:hover { border-color: var(--rule-strong); color: var(--text); }

.chip[data-active="true"] {
  border-color: var(--ink-mark);
  color: var(--ink-mark);
  background: color-mix(in srgb, var(--ink-mark) var(--stamp-tint), var(--paper));
  box-shadow: 2px 2px 0 -1px var(--shadow-hard);
}

.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--ink-mark);
  flex-shrink: 0;
}

/* ---------- headings ---------- */

.page-heading {
  margin: 0 0 6px;
  /* Scales with the viewport like the masthead instead of stepping down at the
     breakpoint. The vw term is the masthead's 5.2vw scaled to this size, so the
     two headings shrink in step; the floor matches the old narrow-screen size. */
  font-size: clamp(27px, 2.95vw, 34px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.page-subheading {
  margin: 0 0 26px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ---------- catalog of teas ---------- */

.tea-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
  counter-reset: specimen;
}

.tea-card {
  position: relative;
  display: block;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink-mark);
  border-radius: var(--radius);
  padding: 15px 16px 34px;
  box-shadow: 3px 3px 0 -1px var(--shadow-hard);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
}

.tea-card:hover, .tea-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 -1px var(--shadow-hard);
}

/* catalog number, stamped in the corner of every card */
.tea-card::after {
  counter-increment: specimen;
  content: "No. " counter(specimen, decimal-leading-zero);
  position: absolute;
  right: 14px;
  bottom: 11px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.tea-card-category {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-mark);
  text-transform: uppercase;
  margin-bottom: 9px;
}

.tea-card-name {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 3px;
}

.tea-card-chinese {
  font-size: 15px;
  color: var(--text-muted);
}

.tea-card-origin {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dotted var(--rule);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.empty-state {
  color: var(--text-muted);
  padding: 56px 0;
  text-align: center;
  font-style: italic;
  font-size: 17px;
}

/* ---------- side drawer ---------- */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(28, 21, 14, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.drawer-scrim[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  width: 50%;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper-card);
  border-left: 1px solid var(--rule-strong);
  box-shadow: -14px 0 34px rgba(28, 21, 14, 0.16);
  transform: translateX(101%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.3, 1), visibility 0s linear 0.3s;
}

.drawer[data-open="true"] {
  transform: none;
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.3, 1), visibility 0s;
}

body.drawer-open { overflow: hidden; }

/* ---------- detail sheet (shared by drawer and page) ---------- */

.detail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 26px;
  background: var(--paper-card);
  border-bottom: 1px solid var(--rule);
}

.detail-eyebrow {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-mark);
}

.detail-close, .detail-back {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  cursor: pointer;
}

.detail-close:hover, .detail-back:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

.detail-body { padding: 26px 26px 44px; }

/* --- as a drawer: ink band down the leading edge, bar pinned while scrolling --- */

.drawer .detail-sheet {
  border-left: 4px solid var(--ink-mark);
  min-height: 100%;
}

.drawer .detail-bar {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* One column: the drawer is too narrow to tile producer cards. */
.drawer .producer-list { grid-template-columns: 1fr; }

.detail-header {
  padding-bottom: 20px;
  margin-bottom: 4px;
  border-bottom: 3px double var(--rule);
}

.detail-title {
  font-size: 38px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.detail-chinese {
  font-size: 20px;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.detail-pinyin-english {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.detail-badges { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

.badge {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--ink-mark);
  background: transparent;
  color: var(--ink-mark);
}

.detail-section { margin-top: 28px; }

.detail-section h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-faint);
  margin: 0 0 10px;
}

.detail-section h3::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}

.detail-section p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.68;
}

.producer-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.producer-card {
  display: block;
  height: 100%;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 13px 15px;
  background: var(--paper-sunk);
  cursor: pointer;
  transition: border-left-color 0.12s ease, transform 0.12s ease;
}

.producer-card:hover, .producer-card:focus-visible {
  border-left-color: var(--ink-mark);
  transform: translateX(2px);
}

.producer-name { font-weight: 600; font-size: 16px; }
.producer-chinese { font-size: 14px; color: var(--text-muted); margin-bottom: 7px; }

.producer-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------- category note ---------- */

.category-desc-box {
  background: transparent;
  border-left: 3px double var(--rule-strong);
  border-radius: 0;
  padding: 4px 0 4px 22px;
  margin-bottom: 30px;
  font-size: 17px;
  font-style: italic;
  line-height: 1.62;
  color: var(--text-muted);
}

.category-desc-box::first-letter {
  float: left;
  font-style: normal;
  font-size: 52px;
  line-height: 0.82;
  padding: 4px 8px 0 0;
  color: var(--text);
}

/* ---------- back link ---------- */

.back-link {
  display: inline-block;
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}

.back-link:hover { color: var(--text); border-bottom-color: var(--text); }

@media (max-width: 620px) {
  /* .page-heading is fluid now and already floors at 27px here. */
  .detail-title { font-size: 29px; }
  .producer-list { grid-template-columns: 1fr; }
  .app { padding: 24px 18px 56px; }

  /* ---- a tea is its own page here; the drawer is never opened ---- */

  /* Give the screen over to the detail. The back link names the category,
     so the masthead would only repeat it and cost height. */
  body[data-view="detail"] .masthead,
  body[data-view="detail"] .site-footer { display: none; }

  body[data-view="detail"] .app {
    padding: 0 0 calc(40px + env(safe-area-inset-bottom, 0px));
  }

  #app .detail-sheet { border-top: 4px solid var(--ink-mark); }
  #app .detail-bar { padding: 14px 18px; }
  #app .detail-body { padding: 22px 18px 8px; }

  /* The page underneath is fully covered, so the dimming reads as a bug. */
  .drawer-scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}