/*
Theme Name: Tzu Hsu — Notes on Menswear & Craft
Theme URI: https://tzuhsu.com/
Author: Tzu Hsu (Louis Chung)
Author URI: https://tzuhsu.com/
Description: Tzu Hsu — Notes on Menswear & Craft. A quiet, editorial WordPress block theme for a men's style blog in the spirit of Loro Piana, Ivory London, and Permanent Style. Full-bleed hero auto-pulled from the latest article, ivory + ink palette, Cormorant + EB Garamond + Noto Serif TC, fully responsive with clamp() across the board.
Version: 2.56.1
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tzuhsu
Tags: full-site-editing, blog, editorial, two-columns, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ============================================================
   Tzu Hsu · WordPress Block Theme v2
   Style architecture:
     - Design tokens in CSS variables (--tz-*)
     - All font-sizes / spacing use clamp()
     - BEM-ish naming, scoped under .tz-* prefix
     - Zero inline styles in templates
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Surface */
  --tz-bg:           #F2ECE0;
  --tz-bg-paper:     #F8F3E8;
  --tz-bg-oat:       #E8E1D1;
  --tz-bg-ink:       #1A1714;

  /* Ink */
  --tz-ink:          #1C1814;
  --tz-ink-soft:     #4A4338;
  --tz-ink-mute:     #877A68;
  /* Higher-contrast mute, for small meta/label text where #877A68 is too faint */
  --tz-ink-mute-strong: #6A5C46;
  --tz-ink-faint:    #B9AE99;

  /* Lines */
  --tz-line:         rgba(28, 24, 20, 0.14);
  --tz-line-soft:    rgba(28, 24, 20, 0.07);

  /* Accent */
  --tz-bronze:       #6B5A3E;

  /* Type */
  --tz-font-display: "Cormorant Garamond", "Noto Serif TC", "Songti TC", serif;
  --tz-font-serif:   "Spectral", "EB Garamond", "Noto Serif TC", serif;
  --tz-font-sans:    "Tenor Sans", "Noto Serif TC", "PingFang TC", sans-serif;
  --tz-font-tc:      "Noto Serif TC", "Songti TC", serif;
  /* Display mastheads only: Latin stays Cormorant (listed first — Cactus has no
     usable Latin); Han glyphs fall through to Cactus Classical Serif / 仙人掌明體,
     then Noto Serif TC. Gives big titles a distinct classical-Ming character. */
  --tz-font-display-han: "Cormorant Garamond", "Cactus Classical Serif", "Noto Serif TC", "Songti TC", serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --tz-fs-display-xxl: clamp(48px, 9vw, 124px);
  --tz-fs-display-xl:  clamp(40px, 7vw, 96px);
  --tz-fs-display-l:   clamp(34px, 5vw, 64px);
  --tz-fs-display-m:   clamp(28px, 3.6vw, 44px);
  --tz-fs-h1:          clamp(26px, 3vw, 36px);
  --tz-fs-h2:          clamp(22px, 2.4vw, 30px);
  --tz-fs-h3:          clamp(19px, 1.8vw, 24px);
  --tz-fs-body-xl:     clamp(18px, 1.4vw, 21px);
  --tz-fs-body:        clamp(16px, 1.2vw, 19px);
  --tz-fs-body-s:      clamp(14px, 1vw, 15px);
  --tz-fs-tiny:        clamp(12px, 0.85vw, 13px);
  --tz-fs-meta:        clamp(12px, 0.8vw, 12.5px);
  --tz-fs-logo:        clamp(28px, 3vw, 44px);
  --tz-fs-hero-title:  clamp(40px, 7vw, 96px);
  --tz-fs-hero-dek:    clamp(15px, 1.4vw, 19px);
  --tz-fs-article-title: clamp(36px, 6vw, 80px);
  --tz-fs-article-dek:   clamp(17px, 1.8vw, 24px);
  --tz-fs-article-body:  clamp(17px, 1.3vw, 19px);
  --tz-fs-article-h2:    clamp(24px, 2.8vw, 34px);
  --tz-fs-blockquote:    clamp(22px, 2.6vw, 32px);
  --tz-fs-dropcap:       clamp(48px, 6vw, 74px);

  /* Fluid spacing */
  --tz-gutter:           clamp(20px, 4vw, 56px);
  --tz-section:          clamp(60px, 9vw, 110px);
  --tz-section-tight:    clamp(40px, 6vw, 70px);
  --tz-section-large:    clamp(80px, 10vw, 120px);
  --tz-block-gap:        clamp(24px, 3vw, 48px);

  /* Layout caps */
  --tz-cap-narrow: 720px;
  --tz-cap-mid:    1100px;
  --tz-cap-wide:   1280px;
}

/* ---------- 2. Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* The brand is ivory paper — declare light so dark-mode UAs don't force
     dark form controls (newsletter input, comment fields) onto the page. */
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--tz-font-serif);
  font-size: var(--tz-fs-body);
  line-height: 1.7;
  color: var(--tz-ink);
  background: var(--tz-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-feature-settings: "kern", "liga", "onum";
  overflow-x: hidden;
}

img, video, iframe { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6, p, figure, ul, ol {
  margin: 0; padding: 0; font-weight: inherit;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; }
a:hover { color: var(--tz-bronze); }
a:focus-visible { outline: 2px solid var(--tz-bronze); outline-offset: 2px; }

button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 0; }
button:focus-visible { outline: 2px solid var(--tz-bronze); outline-offset: 2px; }

/* Brand-tinted text selection (quiet bronze wash) */
::selection { background: rgba(107, 90, 62, 0.18); color: var(--tz-ink); }


/* ---------- 3. Type primitives ---------- */
.tz-eyebrow,
.tz-meta {
  font-family: var(--tz-font-sans);
  font-size: var(--tz-fs-tiny);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tz-ink-mute-strong);
}

/* The wide letter-spacing on eyebrows/labels is only meant for Latin glyphs.
   theme.js wraps CJK runs in .tz-cjk so we can neutralise tracking on them. */
.tz-cjk { letter-spacing: 0; }

/* Optical-size parity for Latin / digit runs inside CJK body copy.
   theme.js wraps each run in .tz-lat so the size can be tuned per body font.
   Measured x-heights (em): EB Garamond 0.40 -> needed ≈ +3%;
   Spectral 0.45 (12.5% taller) -> needs NO compensation: at 1.03 its digits
   (0.68em tall) start competing with Han glyphs (0.90em). Keep this rule at
   1em while the body font is Spectral; if the font changes again, re-measure
   and retune this single value. */
.tz-article-body .tz-lat,
.entry-content .tz-lat { font-size: 1em; }

/* Balanced multi-line headings — keep a lone word from stranding on the last
   line. Progressive enhancement; ignored where unsupported. */
.tz-hero__title,
.tz-single__title,
.tz-archive-mast__title,
.tz-about__title,
.tz-card__title,
.tz-manifesto__text,
.tz-contact__title,
.tz-newsletter__title,
.tz-newsletter__ftitle,
.tz-article-body h2,
.entry-content h2,
.tz-article-body h3,
.entry-content h3 { text-wrap: balance; }

/* Hyphenation belongs to body prose only — display headings must never be
   auto-hyphenated (the browser picks ugly break points in 60–96px Cormorant). */
h1, h2, h3, h4, h5, h6,
.tz-hero__title, .tz-archive-mast__title, .tz-single__title,
.tz-about__title, .tz-display-l, .tz-display-m, .tz-card__title,
.tz-manifesto__text, .tz-newsletter__title, .tz-newsletter__ftitle,
.tz-contact__title {
  hyphens: none;
  -webkit-hyphens: none;
}

/* All-caps tracked labels: oldstyle figures (enabled globally for the serif
   body) ride up and down between capitals — force even, lining tabular figures
   on the sans labels so dates / issue numbers / read-times sit on one line. */
.tz-eyebrow,
.tz-meta,
.tz-orn,
.tz-topbar,
.tz-hero__eyebrow,
.tz-hero__meta,
.tz-card__cat,
.tz-card__byline,
.tz-subnav a,
.tz-filterstrip__cats a,
.tz-filterstrip__meta,
.tz-single__byline,
.tz-link-arrow,
.tz-pager,
.tz-footer h4,
.tz-footer__sub,
.tz-footer__bottom { font-variant-numeric: lining-nums tabular-nums; }

.tz-italic { font-style: italic; }

.tz-orn {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.8vw, 12.5px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tz-ink-mute-strong);
}
.tz-orn::before,
.tz-orn::after {
  content: '';
  width: clamp(20px, 2vw, 28px);
  height: 1px;
  background: var(--tz-ink-faint);
}
.tz-orn--single::after {
  content: '';
  display: inline-block;
  width: clamp(24px, 2.5vw, 36px);
  height: 1px;
  background: var(--tz-ink-faint);
  margin-left: 10px;
  vertical-align: middle;
}

/* ---------- 4. Header ---------- */
.tz-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px var(--tz-gutter);
  border-bottom: 1px solid var(--tz-line-soft);
  font-family: var(--tz-font-sans);
  font-size: var(--tz-fs-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tz-ink-mute-strong);
}
.tz-topbar > div { display: flex; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; }
.tz-topbar a { color: inherit; display: inline-flex; align-items: center; gap: 10px; }

.tz-masthead {
  padding: clamp(20px, 3vw, 32px) var(--tz-gutter) clamp(16px, 2.5vw, 24px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
}
.tz-masthead__nav {
  display: flex;
  gap: clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
}
.tz-masthead__nav a {
  font-family: var(--tz-font-sans);
  font-size: clamp(11px, 0.95vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tz-masthead__icons {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
}
.tz-masthead__logo {
  text-align: center;
  min-width: 0;
}
.tz-logo-mark {
  font-family: var(--tz-font-display);
  font-weight: 400;
  font-size: var(--tz-fs-logo);
  line-height: 1;
  display: inline-block;
  letter-spacing: 0;
}
.tz-logo-sub {
  font-family: var(--tz-font-sans);
  font-size: clamp(9px, 0.75vw, 9.5px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--tz-ink-mute-strong);
  margin-top: 8px;
}

/* Hamburger button (mobile only) */
.tz-hamburger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
}
.tz-hamburger__bars {
  display: block;
  position: relative;
  width: 22px;
  height: 1.5px;
  background: currentColor;
}
.tz-hamburger__bars::before,
.tz-hamburger__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s ease, top 0.3s ease;
}
.tz-hamburger__bars::before { top: -7px; }
.tz-hamburger__bars::after  { top:  7px; }
.tz-hamburger.is-open .tz-hamburger__bars { background: transparent; }
.tz-hamburger.is-open .tz-hamburger__bars::before { top: 0; transform: rotate(45deg); }
.tz-hamburger.is-open .tz-hamburger__bars::after  { top: 0; transform: rotate(-45deg); }

/* Mobile drawer */
.tz-drawer {
  position: fixed;
  inset: 0;
  background: var(--tz-bg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 32px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.tz-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.tz-drawer a {
  font-family: var(--tz-font-display);
  font-weight: 400;
  font-size: clamp(28px, 5vw, 40px);
  color: var(--tz-ink);
  letter-spacing: -0.005em;
}
.tz-drawer a:hover { color: var(--tz-bronze); }
.tz-drawer__close {
  position: absolute;
  top: 20px;
  right: var(--tz-gutter);
}
/* The WordPress admin bar (logged-in users only) is fixed above everything and
   would cover the close button — push it below the bar. 32px desktop / 46px mobile. */
.admin-bar .tz-drawer__close,
.admin-bar .tz-search-overlay__close { top: 52px; }
@media screen and (max-width: 782px) {
  .admin-bar .tz-drawer__close,
  .admin-bar .tz-search-overlay__close { top: 66px; }
}

/* Subnav (categories) */
.tz-subnav {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(14px, 1.5vw, 18px) var(--tz-gutter) clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--tz-line-soft);
  border-bottom: 1px solid var(--tz-line);
  flex-wrap: wrap;
}
.tz-subnav a {
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.9vw, 12.5px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 3px;
  white-space: nowrap;
}
.tz-subnav a.is-active,
.tz-subnav .current-menu-item > a,
.tz-subnav .current-cat > a {
  color: var(--tz-bronze);
}
.tz-subnav a.is-active::after,
.tz-subnav .current-menu-item > a::after,
.tz-subnav .current-cat > a::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -22px;
  width: 4px;
  height: 4px;
  background: var(--tz-bronze);
}

/* Header over hero (transparent + ivory text) */
.tz-header--over-hero {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
}
/* Don't let the WordPress admin bar cover the topbar (Issue No. / date)
   when the header floats over the hero. */
.admin-bar .tz-header--over-hero { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .tz-header--over-hero { top: 46px; }
}
.tz-header--over-hero .tz-topbar {
  color: rgba(242,236,224,0.7);
  border-bottom-color: rgba(242,236,224,0.18);
}
.tz-header--over-hero .tz-masthead__nav a,
.tz-header--over-hero .tz-masthead__icons,
.tz-header--over-hero .tz-logo-mark { color: var(--tz-bg); }
.tz-header--over-hero .tz-logo-sub { color: rgba(242,236,224,0.7); }
.tz-header--over-hero .tz-subnav { display: none; }

/* ---------- 5. Hero ---------- */
/* Accessibility: visually-hidden skip link (self-contained so it doesn't
   depend on the block-library stylesheet, which we dequeue on some templates). */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
  clip: auto !important;
  clip-path: none;
  color: #1a1714;
  display: block;
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 6px;
  line-height: normal;
  padding: 14px 22px;
  text-decoration: none;
  top: 6px;
  width: auto;
  z-index: 100000;
}

.tz-hero {
  position: relative;
  height: clamp(540px, 92vh, 1000px);
  min-height: 480px;
  overflow: hidden;
  background: #2a241b;
  display: flex;
  align-items: flex-end;
}
.tz-hero__bg {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-size: cover;
  background-position: center;
  z-index: 0;
  filter: brightness(0.92) contrast(1.02) saturate(0.78) sepia(0.18);
}
.tz-hero::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 28%, transparent 56%, rgba(8,6,4,0.82) 100%),
    linear-gradient(75deg, rgba(8,6,4,0.65) 0%, rgba(8,6,4,0.35) 22%, rgba(8,6,4,0.10) 45%, rgba(8,6,4,0) 65%);
  pointer-events: none;
}
.tz-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--tz-cap-mid);
  padding: 0 var(--tz-gutter) clamp(48px, 8vw, 90px);
  color: var(--tz-bg);
  text-shadow: 0 1px 24px rgba(0,0,0,0.5);
}
.tz-hero__eyebrow {
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.9vw, 12.5px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.78);
  margin-bottom: clamp(16px, 2.5vw, 26px);
}
.tz-hero__title {
  font-family: var(--tz-font-display-han);
  font-weight: 300;
  font-size: var(--tz-fs-hero-title);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(16px, 2vw, 24px);
  max-width: 920px;
  color: inherit;
}
.tz-hero__title a { color: inherit; }
.tz-hero__dek {
  font-family: var(--tz-font-serif);
  font-size: var(--tz-fs-hero-dek);
  line-height: 1.6;
  max-width: 540px;
  color: rgba(242,236,224,0.88);
  margin: 0;
}
.tz-hero__meta {
  margin-top: clamp(20px, 3vw, 36px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  flex-wrap: wrap;
  font-family: var(--tz-font-sans);
  font-size: clamp(11.5px, 0.95vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.82);
}
.tz-hero__cta {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tz-bg);
  color: var(--tz-bg);
}
.tz-hero__scroll {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--tz-font-sans);
  font-size: clamp(9px, 0.75vw, 9.5px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.6);
  text-align: center;
}
.tz-hero__scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 24px;
  background: rgba(242,236,224,0.4);
  margin: 12px auto 0;
}
@media (max-width: 720px) {
  .tz-hero__scroll { display: none; }
}

/* ---------- 6. Generic sections ---------- */
.tz-section {
  padding: var(--tz-section) var(--tz-gutter);
}
.tz-section--tight { padding: var(--tz-section-tight) var(--tz-gutter); }
.tz-section--large { padding: var(--tz-section-large) var(--tz-gutter); }
.tz-section--paper { background: var(--tz-bg-paper); }
.tz-section--oat   { background: var(--tz-bg-oat); }
.tz-section--dark  { background: var(--tz-bg-ink); color: #E8DEC8; }
.tz-section--dark .tz-eyebrow,
.tz-section--dark .tz-meta { color: rgba(232,222,200,0.55); }

.tz-center { text-align: center; }
.tz-maxw-540  { max-width: 540px; margin-left: auto; margin-right: auto; }
.tz-maxw-680  { max-width: var(--tz-cap-narrow); margin-left: auto; margin-right: auto; }
.tz-maxw-1100 { max-width: var(--tz-cap-mid);    margin-left: auto; margin-right: auto; }

.tz-display-l { font-family: var(--tz-font-display); font-weight: 400; font-size: var(--tz-fs-display-l); line-height: 1.05; letter-spacing: -0.015em; color: var(--tz-ink); }
.tz-display-m { font-family: var(--tz-font-display); font-weight: 400; font-size: var(--tz-fs-display-m); line-height: 1.1;  letter-spacing: -0.01em;  color: var(--tz-ink); }
.tz-body-xl   { font-family: var(--tz-font-serif);   font-size: var(--tz-fs-body-xl); line-height: 1.65; color: var(--tz-ink-soft); }
.tz-body      { font-family: var(--tz-font-serif);   font-size: var(--tz-fs-body);    line-height: 1.7;  color: var(--tz-ink-soft); }
.tz-body-s    { font-family: var(--tz-font-serif);   font-size: var(--tz-fs-body-s);  line-height: 1.65; color: var(--tz-ink-soft); }

.tz-row-between {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(16px, 3vw, 24px);
  margin-bottom: clamp(28px, 5vw, 44px);
  flex-wrap: wrap;
}
.tz-link-arrow {
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.9vw, 12.5px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.tz-link-arrow::after { content: ''; width: 28px; height: 1px; background: currentColor; }

/* Manifesto band */
.tz-manifesto {
  background: var(--tz-bg-ink);
  color: #E8DEC8;
  padding: var(--tz-section-large) var(--tz-gutter);
  text-align: center;
}
.tz-manifesto__eyebrow {
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.9vw, 12.5px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(232,222,200,0.55);
  margin-bottom: clamp(20px, 3vw, 28px);
}
.tz-manifesto__text {
  font-family: var(--tz-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 3.6vw, 44px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: #E8DEC8;
  max-width: 900px;
  margin: 0 auto;
}
.tz-manifesto__cta {
  display: inline-block;
  margin-top: clamp(28px, 4vw, 48px);
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.9vw, 12.5px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #E8DEC8;
  border-bottom: 1px solid rgba(232,222,200,0.4);
  padding-bottom: 6px;
}

/* ---------- 7. Article cards (grid items) ---------- */
.tz-card { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 14px); }
.tz-card__media {
  display: block;
  aspect-ratio: 5/4;
  overflow: hidden;
  background: var(--tz-ink-faint);
}
.tz-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.92) contrast(1.02) saturate(0.78) sepia(0.18);
  transition: transform 0.6s ease, filter 0.5s ease;
}
.tz-card:hover .tz-card__media img {
  transform: scale(1.03);
  filter: brightness(1) contrast(1) saturate(1) sepia(0);
}
.tz-card__cat {
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.85vw, 12.5px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tz-ink-mute-strong);
  margin-top: 8px;
}
.tz-card__title {
  font-family: var(--tz-font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.2;
  color: var(--tz-ink);
}
.tz-card__dek {
  font-family: var(--tz-font-serif);
  font-size: clamp(13.5px, 1.05vw, 14.5px);
  line-height: 1.65;
  color: var(--tz-ink-soft);
}
.tz-card__byline {
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.85vw, 12.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tz-ink-mute-strong);
  margin-top: 4px;
}

.tz-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.tz-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

/* ---------- 8. Year break ---------- */
.tz-year-break {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(36px, 6vw, 60px) var(--tz-gutter) clamp(20px, 2.5vw, 28px);
}
.tz-year-break__year {
  font-family: var(--tz-font-display);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 56px);
  color: var(--tz-ink-mute);
}
.tz-year-break__line { flex: 1; height: 1px; background: var(--tz-line); }

/* ---------- 9. Archive / Journal page ---------- */
.tz-archive-mast {
  padding: clamp(60px, 8vw, 90px) var(--tz-gutter) clamp(36px, 5vw, 60px);
  text-align: center;
  border-bottom: 1px solid var(--tz-line);
}
.tz-archive-mast__eyebrow { margin-bottom: clamp(20px, 2.5vw, 28px); }
.tz-archive-mast__title {
  font-family: var(--tz-font-display-han);
  font-weight: 300;
  font-size: var(--tz-fs-display-xl);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: var(--tz-ink);
}
.tz-archive-mast__dek {
  font-family: var(--tz-font-serif);
  font-size: var(--tz-fs-body-xl);
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto;
  color: var(--tz-ink-mute-strong);
}

.tz-filterstrip {
  padding: clamp(20px, 2.5vw, 32px) var(--tz-gutter);
  border-bottom: 1px solid var(--tz-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.tz-filterstrip__cats {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
}
.tz-filterstrip__cats a {
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 1vw, 12.5px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: 4px;
}
.tz-filterstrip__cats a.is-active {
  color: var(--tz-bronze);
  border-bottom: 1px solid var(--tz-bronze);
}
.tz-filterstrip__meta {
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.9vw, 12.5px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tz-ink-mute-strong);
}

.tz-year-grid { padding: clamp(16px, 2.5vw, 20px) var(--tz-gutter) clamp(36px, 5vw, 60px); }
.tz-year-grid .tz-grid-3 { row-gap: clamp(48px, 6vw, 80px); }

/* Reduce gap between mast and content on Pages (About etc) */
.page .entry-content {
  margin-top: 0 !important;
  padding-top: clamp(8px, 1.5vw, 16px) !important;
}
/* The mast already supplies the breathing room above the first block, so the
   first element shouldn't stack its own top margin on top of it (this is what
   made the About portrait sit ~120px below the dek). */
.page .entry-content > *:first-child { margin-top: 0 !important; }

/* ---------- 9b. Wide columns on pages (About 三欄原則) ---------- */
.page .entry-content .wp-block-columns {
  max-width: var(--tz-cap-mid);
  width: calc(100vw - clamp(40px, 8vw, 112px));
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
  padding: clamp(40px, 6vw, 60px) 0;
}
.page .entry-content .wp-block-columns .wp-block-column { padding: 0 clamp(8px, 1.5vw, 16px); }
.page .entry-content .wp-block-columns h3 {
  font-family: var(--tz-font-display);
  font-weight: 400;
  font-size: var(--tz-fs-h1);
  line-height: 1.15;
  margin-bottom: 18px;
}
.page .entry-content .wp-block-columns p {
  font-family: var(--tz-font-serif);
  font-size: var(--tz-fs-body-s);
  line-height: 1.65;
  color: var(--tz-ink-soft);
}
@media (max-width: 720px) {
  .page .entry-content .wp-block-columns {
    width: 100%;
    margin-left: 0;
    transform: none;
    flex-direction: column;
  }
}

/* ---------- 10. Pagination ---------- */
.tz-pager,
.wp-block-query-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.5vw, 16px);
  font-family: var(--tz-font-sans);
  font-size: clamp(11px, 1vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: clamp(36px, 5vw, 60px) var(--tz-gutter);
  flex-wrap: wrap;
}
.tz-pager .num,
.wp-block-query-pagination .page-numbers {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tz-ink);
}
.tz-pager .is-active,
.wp-block-query-pagination .current {
  color: var(--tz-bronze);
  border-bottom: 1px solid var(--tz-bronze);
}

/* ---------- 11. Single post ---------- */
.tz-single__hero {
  position: relative;
  height: clamp(360px, 75vh, 900px);
  min-height: 320px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.tz-single__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bottom-up dark wash so a white caption (and any overlaid text) stays
   legible over images of any brightness. */
.tz-single__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(8,6,4,0.72) 0%,
    rgba(8,6,4,0.34) 26%,
    rgba(8,6,4,0.06) 52%,
    rgba(8,6,4,0) 72%
  );
}
.tz-single__hero-cap {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: var(--tz-gutter);
  right: var(--tz-gutter);
  font-family: var(--tz-font-serif);
  font-style: italic;
  font-size: clamp(11px, 0.95vw, 13px);
  color: rgba(255,255,255,0.78);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.tz-single__mast {
  padding: clamp(48px, 7vw, 70px) var(--tz-gutter) clamp(24px, 3.5vw, 36px);
  text-align: center;
}
.tz-single__mast .tz-eyebrow { margin-bottom: clamp(20px, 3vw, 28px); }
.tz-single__title {
  font-family: var(--tz-font-display-han);
  font-weight: 300;
  font-size: var(--tz-fs-article-title);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(20px, 3vw, 28px);
  color: var(--tz-ink);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.tz-single__dek {
  font-family: var(--tz-font-serif);
  font-style: italic;
  font-size: var(--tz-fs-article-dek);
  line-height: 1.5;
  color: var(--tz-ink-mute-strong);
  max-width: 720px;
  margin: 0 auto;
}
.tz-single__byline {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 1.5vw, 18px);
  flex-wrap: wrap;
  margin-top: clamp(24px, 4vw, 36px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--tz-line);
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.9vw, 12.5px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tz-ink-mute-strong);
}

/* Article body */
.tz-article-body,
.entry-content {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) var(--tz-gutter);
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* CJK refinements (progressive enhancement — ignored where unsupported):
     auto-space inserts a thin gap at CJK↔Latin/number boundaries; spacing-trim
     collapses the doubled side-bearings of consecutive full-width punctuation. */
  text-autospace: normal;
  text-spacing-trim: trim-start;
}
.tz-article-body p,
.entry-content > p {
  font-family: var(--tz-font-serif);
  font-size: var(--tz-fs-article-body);
  line-height: 1.75;
  color: var(--tz-ink-soft);
  margin: 0 0 1.4em;
  text-wrap: pretty;
  /* Left-aligned (web standard for CJK body text). A flush right edge via
     justify only fakes neatness by floating the word/inter-ideograph spacing;
     the browser's crude justifier reads worse than an honest ragged edge,
     especially on lines that mix Latin/numbers. */
  text-align: left;
}
.tz-article-body.tz-has-dropcap > p:first-of-type::first-letter,
.single .entry-content.tz-has-dropcap > p:first-of-type::first-letter {
  font-family: var(--tz-font-display);
  font-size: var(--tz-fs-dropcap);
  font-weight: 400;
  float: left;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  color: var(--tz-ink);
}
.tz-article-body h2,
.entry-content h2 {
  font-family: var(--tz-font-display);
  font-weight: 400;
  font-size: var(--tz-fs-article-h2);
  line-height: 1.2;
  color: var(--tz-ink);
  margin: clamp(32px, 4vw, 48px) 0 clamp(16px, 2vw, 24px);
}
.tz-article-body h3,
.entry-content h3 {
  font-family: var(--tz-font-display);
  font-weight: 500;
  font-size: var(--tz-fs-h3);
  line-height: 1.25;
  color: var(--tz-ink);
  margin: clamp(24px, 3vw, 36px) 0 clamp(12px, 1.5vw, 18px);
}
.tz-article-body blockquote,
.entry-content blockquote,
.wp-block-quote {
  font-family: var(--tz-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--tz-fs-blockquote);
  /* 1.5, not the tighter 1.35 a Latin pull-quote would take: these quotes pair
     an English line with its taller CJK translation, and CJK glyphs crowd at
     1.35 — the English→Chinese seam in particular read as cramped. */
  line-height: 1.5;
  color: var(--tz-ink);
  margin: clamp(28px, 4vw, 40px) 0;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--tz-line);
}
.wp-block-quote p {
  font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; margin: 0;
}

/* Inline links inside article body — clearly a link, but quiet:
   ink-coloured text with a fine bronze underline; hover turns the text bronze.
   Scoped to body text only (not nav, cards, buttons, tags). */
.tz-article-body :is(p, li, h2, h3, h4, blockquote, figcaption) a,
.entry-content :is(p, li, h2, h3, h4, blockquote, figcaption) a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--tz-bronze);
  text-decoration-skip-ink: auto;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.tz-article-body :is(p, li, h2, h3, h4, blockquote, figcaption) a:hover,
.entry-content :is(p, li, h2, h3, h4, blockquote, figcaption) a:hover {
  color: var(--tz-bronze);
  text-decoration-color: var(--tz-bronze);
}
/* Buttons inside content keep their own (no underline) treatment */
.entry-content .wp-block-button a,
.entry-content .wp-block-button__link {
  text-decoration: none;
}

/* Inline figures */
.tz-article-body figure,
.entry-content figure,
.wp-block-image {
  max-width: 100%;
  /* Desktop previously opened to 60px top/bottom — too airy; pull the cap down
     so the figure sits as close to the text as it does on mobile (~28px). */
  margin: clamp(28px, 3vw, 34px) auto;
}
.tz-article-body figure img,
.entry-content figure img,
.wp-block-image img { width: 100%; height: auto; }
.tz-article-body figcaption,
.entry-content figcaption,
.wp-block-image figcaption {
  font-family: var(--tz-font-serif);
  font-style: italic;
  font-size: clamp(12px, 1vw, 13px);
  color: var(--tz-ink-mute-strong);
  text-align: center;
  margin-top: clamp(8px, 1.2vw, 12px);
}

/* ---- In-article lists --------------------------------------------------
   The global reset strips list-style; restore proper bullets/numbers for
   author-written lists inside post/page content. */
.tz-article-body ul,
.entry-content ul,
.tz-article-body ol,
.entry-content ol {
  font-family: var(--tz-font-serif);
  font-size: var(--tz-fs-article-body);
  line-height: 1.75;
  color: var(--tz-ink-soft);
  margin: 0 0 1.4em;
  padding-left: clamp(22px, 3vw, 32px);
}
.tz-article-body ul,
.entry-content ul { list-style: disc; }
.tz-article-body ol,
.entry-content ol { list-style: decimal; }
.tz-article-body li,
.entry-content li { margin-bottom: 0.45em; }
.tz-article-body li::marker,
.entry-content li::marker { color: var(--tz-bronze); }
.tz-article-body li > ul,
.entry-content li > ul { list-style: circle; margin: 0.45em 0 0; }
.tz-article-body li > ol,
.entry-content li > ol { list-style: lower-roman; margin: 0.45em 0 0; }

/* ---- In-article tables ------------------------------------------------- */
.entry-content table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  margin: clamp(28px, 4vw, 44px) 0;
  font-family: var(--tz-font-serif);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--tz-ink-soft);
}
.entry-content th,
.wp-block-table th {
  font-family: var(--tz-font-sans);
  font-size: clamp(11px, 0.85vw, 12px);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tz-ink-mute-strong);
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--tz-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.entry-content td,
.wp-block-table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--tz-line);
  vertical-align: top;
}
.wp-block-table figcaption { text-align: left; }

/* ---- In-article code --------------------------------------------------- */
.entry-content code,
.tz-article-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--tz-bg-oat);
  padding: 0.15em 0.45em;
  border-radius: 2px;
}
.entry-content pre,
.tz-article-body pre,
.wp-block-code {
  background: var(--tz-bg-ink);
  color: var(--tz-bg-paper);
  padding: clamp(18px, 2.5vw, 28px);
  margin: clamp(28px, 4vw, 44px) 0;
  overflow-x: auto;
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.6;
  border-radius: 2px;
}
.entry-content pre code,
.wp-block-code code { background: transparent; padding: 0; font-size: inherit; }

/* ---- In-article horizontal rule ----------------------------------------
   Rendered as a short centred line — an editorial section break, matching
   the ornament language used elsewhere in the theme. */
.entry-content hr,
.tz-article-body hr,
.wp-block-separator {
  border: 0;
  width: clamp(64px, 10vw, 96px);
  height: 1px;
  background: var(--tz-ink-faint);
  margin: clamp(36px, 5vw, 56px) auto;
}

.tz-article-fin {
  text-align: center;
  padding: clamp(24px, 4vw, 40px) var(--tz-gutter) clamp(48px, 7vw, 80px);
  font-family: var(--tz-font-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--tz-ink-mute);
}

.tz-tag-list { display: flex; gap: 8px; flex-wrap: wrap; }
.tz-tag,
.entry-content .wp-block-post-terms a {
  display: inline-block;
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.85vw, 12.5px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--tz-line);
  color: var(--tz-ink-soft);
}

/* ---------- 11b. Newsletter / email capture ---------- */
.tz-newsletter__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.tz-newsletter__eyebrow {
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.9vw, 12.5px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tz-ink-mute-strong);
}
.tz-newsletter__row { display: flex; gap: 12px; align-items: stretch; }
.tz-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--tz-line);
  background: transparent;
  font-family: var(--tz-font-serif);
  font-size: clamp(15px, 1.2vw, 16px);
  color: var(--tz-ink);
  padding: 12px 2px;
  outline: none;
  border-radius: 0;
}
.tz-newsletter__input:focus { border-bottom-color: var(--tz-ink); }
.tz-newsletter__btn {
  flex: 0 0 auto;
  font-family: var(--tz-font-sans);
  font-size: clamp(11px, 0.9vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 26px;
  border: 1px solid var(--tz-ink);
  background: transparent;
  color: var(--tz-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.tz-newsletter__btn:hover { background: var(--tz-ink); color: var(--tz-bg); }
.tz-newsletter__btn:disabled { opacity: 0.45; cursor: default; }
.tz-newsletter__consent {
  margin-top: 14px;
  font-family: var(--tz-font-sans);
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--tz-ink-mute-strong);
}
.tz-newsletter__msg {
  margin: 14px 0 0;
  font-family: var(--tz-font-serif);
  font-style: italic;
  font-size: clamp(13px, 1vw, 14.5px);
  color: var(--tz-ink-mute-strong);
}
.tz-newsletter__msg:empty { display: none; }
.tz-newsletter.is-error .tz-newsletter__msg { color: #9A3B2E; font-style: normal; }

/* Success reveal — "sealing hairline": fields cross-fade out and the thank-you
   fades in over the same spot (absolute overlay = no height jump on mobile),
   then a bronze hairline draws across. */
.tz-newsletter__swap { position: relative; }
.tz-newsletter__done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 14px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  font-family: var(--tz-font-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--tz-bronze);
}
.tz-newsletter__seal { width: 0; height: 1px; background: var(--tz-bronze); }
.tz-newsletter.is-done .tz-newsletter__fields { opacity: 0; pointer-events: none; }
.tz-newsletter.is-done .tz-newsletter__done { opacity: 1; }
.tz-newsletter.is-done .tz-newsletter__seal { width: 64px; }
@media (prefers-reduced-motion: no-preference) {
  .tz-newsletter__fields { transition: opacity 0.3s ease; }
  .tz-newsletter__done { transition: opacity 0.45s ease 0.15s; }
  .tz-newsletter__seal { transition: width 0.55s ease 0.38s; }
}
.tz-newsletter--footer .tz-newsletter__done { color: #F0E8D2; }
.tz-newsletter--footer .tz-newsletter__seal { background: rgba(240,232,210,0.6); }

/* Band — quiet paper strip at the end of an article */
.tz-newsletter--band {
  background: var(--tz-bg-paper);
  border-top: 1px solid var(--tz-line);
  border-bottom: 1px solid var(--tz-line);
  padding: clamp(48px, 7vw, 80px) var(--tz-gutter);
  margin-top: clamp(40px, 6vw, 64px);
}
.tz-newsletter--band .tz-newsletter__inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.tz-newsletter--band .tz-newsletter__eyebrow { margin-bottom: clamp(16px, 2vw, 22px); }
.tz-newsletter__title {
  font-family: var(--tz-font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tz-ink);
  margin: 0 0 clamp(12px, 1.5vw, 16px);
}
.tz-newsletter__dek {
  font-family: var(--tz-font-serif);
  font-size: var(--tz-fs-body);
  line-height: 1.65;
  color: var(--tz-ink-soft);
  margin: 0 0 clamp(24px, 3.5vw, 34px);
}
.tz-newsletter--band .tz-newsletter__row { max-width: 460px; margin: 0 auto; }

/* Footer — light-on-dark row above the footer grid */
.tz-newsletter--footer {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 460px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-bottom: clamp(32px, 5vw, 48px);
  margin-bottom: clamp(36px, 5vw, 60px);
  border-bottom: 1px solid rgba(200,191,173,0.15);
}
.tz-newsletter--footer .tz-newsletter__eyebrow { color: rgba(200,191,173,0.55); margin-bottom: 10px; }
.tz-newsletter__ftitle {
  font-family: var(--tz-font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #F0E8D2;
  margin: 0;
}
.tz-newsletter--footer .tz-newsletter__input {
  color: #F0E8D2;
  border-bottom-color: rgba(200,191,173,0.4);
}
.tz-newsletter--footer .tz-newsletter__input:focus { border-bottom-color: #F0E8D2; }
.tz-newsletter--footer .tz-newsletter__input::placeholder { color: rgba(200,191,173,0.5); }
.tz-newsletter--footer .tz-newsletter__btn {
  color: #F0E8D2;
  border-color: rgba(240,232,210,0.5);
}
.tz-newsletter--footer .tz-newsletter__btn:hover { background: #F0E8D2; color: var(--tz-bg-ink); border-color: #F0E8D2; }
.tz-newsletter--footer .tz-newsletter__msg { color: rgba(220,211,192,0.85); }
.tz-newsletter--footer.is-done .tz-newsletter__msg { color: #F0E8D2; }

/* Author band */
.tz-author-band {
  border-top: 1px solid var(--tz-line);
  border-bottom: 1px solid var(--tz-line);
  padding: clamp(32px, 5vw, 50px) var(--tz-gutter);
  max-width: var(--tz-cap-mid);
  margin: clamp(36px, 6vw, 60px) auto 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: clamp(20px, 3vw, 32px);
  row-gap: clamp(22px, 3vw, 30px);
  align-items: center;
}
/* Tags get their own full-width row beneath the author identity, so the
   name + role never gets squeezed into a thin wrapping column. */
.tz-author-band .tz-tag-list {
  grid-column: 1 / -1;
}
.tz-author-band__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--tz-ink-faint);
  background-size: cover;
  background-position: center;
}
.tz-author-band__name {
  font-family: var(--tz-font-display);
  font-size: clamp(18px, 1.7vw, 22px);
}
.tz-author-band__bio {
  font-family: var(--tz-font-serif);
  font-size: clamp(13.5px, 1.05vw, 14.5px);
  line-height: 1.65;
  color: var(--tz-ink-soft);
  max-width: 480px;
  text-wrap: pretty;
}

/* Read next */
.tz-read-next { padding: clamp(60px, 8vw, 90px) var(--tz-gutter); }
.tz-read-next__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
  max-width: var(--tz-cap-wide);
  margin: clamp(32px, 5vw, 50px) auto 0;
}

/* ---------- 12. About / page templates ---------- */
.tz-about__mast {
  padding: clamp(60px, 8vw, 100px) var(--tz-gutter) clamp(28px, 4vw, 48px);
  text-align: center;
}
.tz-about__title {
  font-family: var(--tz-font-display-han);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: clamp(20px, 3vw, 32px) auto;
  color: var(--tz-ink);
}

.tz-principle__num {
  font-family: var(--tz-font-display);
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 36px);
  color: var(--tz-bronze);
  margin-bottom: clamp(16px, 2vw, 24px);
}
/* 承諾 · principles — three columns across (collapses to one on narrow screens) */
.tz-principles {
  max-width: var(--tz-cap-mid);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.tz-principles .tz-principle__num { margin-bottom: clamp(24px, 3vw, 40px); }
.tz-principles .tz-h1 { margin-bottom: clamp(14px, 1.8vw, 20px); min-height: 2.3em; }
@media (max-width: 860px) {
  .tz-principles {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
    max-width: var(--tz-cap-narrow);
  }
  .tz-principles .tz-h1 { min-height: 0; }
}
.tz-h1 {
  font-family: var(--tz-font-display);
  font-weight: 400;
  font-size: var(--tz-fs-h1);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tz-ink);
}

/* Contact band */
.tz-contact {
  background: var(--tz-bg-ink);
  color: #E8DEC8;
  padding: var(--tz-section-large) var(--tz-gutter);
  text-align: center;
}
.tz-contact__title {
  font-family: var(--tz-font-display-han);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  color: #F0E8D2;
  margin-bottom: clamp(20px, 2.5vw, 28px);
}
.tz-contact__email {
  margin-top: clamp(28px, 4vw, 44px);
  font-family: var(--tz-font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  color: #F0E8D2;
}

/* ---------- 13. Footer ---------- */
.tz-footer {
  background: var(--tz-bg-ink);
  color: #C8BFAD;
  padding: clamp(48px, 7vw, 80px) var(--tz-gutter) clamp(24px, 3vw, 36px);
  font-family: var(--tz-font-serif);
}
.tz-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: clamp(36px, 5vw, 60px);
  border-bottom: 1px solid rgba(200,191,173,0.15);
}
.tz-footer h4 {
  font-family: var(--tz-font-sans);
  font-size: clamp(12px, 0.9vw, 12.5px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(200,191,173,0.55);
  margin-bottom: clamp(16px, 2vw, 22px);
}
.tz-footer ul { list-style: none; padding: 0; margin: 0; }
.tz-footer li {
  margin-bottom: 12px;
  font-size: clamp(13.5px, 1.1vw, 14.5px);
  color: rgba(220,211,192,0.85);
}
.tz-footer__logo {
  font-family: var(--tz-font-display);
  font-size: clamp(28px, 3vw, 38px);
  color: #F0E8D2;
  margin-bottom: 8px;
}
.tz-footer__sub {
  font-family: var(--tz-font-sans);
  font-size: clamp(9px, 0.78vw, 10px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(200,191,173,0.5);
  margin-bottom: clamp(20px, 3vw, 28px);
}
.tz-footer__blurb {
  font-size: clamp(13.5px, 1.1vw, 15px);
  line-height: 1.7;
  color: rgba(220,211,192,0.75);
  max-width: 360px;
  margin: 0;
}
.tz-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(20px, 3vw, 28px);
  font-family: var(--tz-font-sans);
  font-size: clamp(9.5px, 0.85vw, 10.5px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200,191,173,0.45);
  flex-wrap: wrap;
  gap: 18px;
}
.tz-footer__social { display: flex; gap: clamp(16px, 2vw, 24px); }

/* ---------- 14. Comments ---------- */
.wp-block-comments-title,
.comments-title {
  font-family: var(--tz-font-display) !important;
  font-weight: 400 !important;
  font-size: var(--tz-fs-display-m) !important;
  margin-bottom: clamp(24px, 3vw, 36px) !important;
  color: var(--tz-ink) !important;
}
.comment-list li,
.wp-block-comment-template li {
  padding: clamp(20px, 3vw, 28px) 0;
  border-bottom: 1px solid var(--tz-line-soft);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  border: 0;
  border-bottom: 1px solid var(--tz-line);
  background: transparent;
  font-family: var(--tz-font-serif);
  font-size: var(--tz-fs-body);
  padding: 12px 0;
  width: 100%;
  outline: none;
  border-radius: 0;
}
.comment-form textarea {
  border: 1px solid var(--tz-line);
  padding: 16px;
  min-height: 140px;
}
.comment-form label {
  font-family: var(--tz-font-sans);
  font-size: clamp(10px, 0.9vw, 10.5px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tz-ink-mute-strong);
  display: block;
  margin-bottom: 8px;
}
.comment-form .submit,
.wp-block-button__link.wp-element-button {
  font-family: var(--tz-font-sans) !important;
  font-size: clamp(10px, 0.9vw, 11px) !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  padding: clamp(12px, 1.5vw, 16px) clamp(20px, 3vw, 32px) !important;
  border: 1px solid var(--tz-ink) !important;
  background: transparent !important;
  color: var(--tz-ink) !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all 0.25s ease;
}
.comment-form .submit:hover,
.wp-block-button__link.wp-element-button:hover {
  background: var(--tz-ink) !important;
  color: var(--tz-bg) !important;
}

/* ---------- 14. Comments (WP default markup) ---------- */
.comments-area {
  max-width: var(--tz-cap-narrow);
  margin: clamp(40px, 6vw, 64px) auto clamp(60px, 8vw, 96px);
  padding: 0 var(--tz-gutter);
}

/* Our ornament heading sits above the comments plugin (wpDiscuz). Give it a
   deliberate, modest gap, and collapse the plugin's own large built-in top
   spacing so its first block (post-rating / form) tucks right under it instead
   of floating ~200px below. */
.tz-comments-head { margin-bottom: clamp(20px, 3vw, 28px); }
/* The ornament is a flex row (rule · text · rule); keep ALL the heading text in a
   single span so it's one flex item and wraps as normal inline text — otherwise
   each text run / <br> becomes its own flex item and the CJK splits per glyph. */
.tz-orn__text { text-align: center; }
/* Force the Chinese to break as 「留下 / 你的想法」 on phones (where the heading
   wraps anyway) instead of orphaning 「法」. br is disabled on desktop so the line
   stays whole there. */
.tz-orn-br { display: none; }
@media (max-width: 540px) { .tz-orn-br { display: inline; } }
.comments-area #comments,
.comments-area #wpcomm,
.comments-area .wpd-post-rating-wrap,
.comments-area #wpd-post-rating,
.comments-area .wpdiscuz-post-rating {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.comments-title,
h2.comments-title,
.wp-block-comments-title {
  font-family: var(--tz-font-display) !important;
  font-weight: 400 !important;
  font-size: var(--tz-fs-display-m) !important;
  line-height: 1.2 !important;
  margin: 0 0 clamp(24px, 4vw, 36px) !important;
  color: var(--tz-ink) !important;
  letter-spacing: -0.005em !important;
}

.comment-list,
ol.comment-list,
.wp-block-comment-template {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 clamp(40px, 6vw, 56px) !important;
}

.comment-list li,
.wp-block-comment-template li,
li.comment {
  list-style: none !important;
  padding: clamp(24px, 4vw, 32px) 0 !important;
  border-top: 1px solid var(--tz-line-soft) !important;
  margin: 0 !important;
}
.comment-list li:last-child { border-bottom: 1px solid var(--tz-line-soft); }

.comment-body {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: clamp(14px, 2vw, 20px);
  align-items: start;
  padding: 0 !important;
  background: transparent !important;
}
.comment-author { line-height: 1.3; }
.comment-author .avatar,
.comment-author img.avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover;
}
.comment-author cite,
.comment-author .fn {
  font-family: var(--tz-font-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(17px, 1.6vw, 19px) !important;
  color: var(--tz-ink) !important;
  letter-spacing: -0.005em;
}
.comment-meta {
  grid-column: 2;
  margin: 0 0 12px !important;
}
.comment-meta .comment-author { display: block; margin-bottom: 4px; }
.comment-metadata {
  font-family: var(--tz-font-sans) !important;
  font-size: clamp(10px, 0.9vw, 10.5px) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--tz-ink-mute-strong) !important;
}
.comment-metadata a {
  color: inherit !important;
  text-decoration: none !important;
}
.comment-content {
  grid-column: 2;
  font-family: var(--tz-font-serif) !important;
  font-size: clamp(15px, 1.2vw, 16.5px) !important;
  line-height: 1.7 !important;
  color: var(--tz-ink-soft) !important;
}
.comment-content p { margin: 0 0 0.8em; }
.comment-content p:last-child { margin-bottom: 0; }

.reply { grid-column: 2; margin-top: 12px; }
.comment-reply-link {
  display: inline-block;
  font-family: var(--tz-font-sans) !important;
  font-size: clamp(10px, 0.9vw, 10.5px) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--tz-ink-mute-strong) !important;
  border-bottom: 1px solid var(--tz-line) !important;
  padding-bottom: 2px !important;
  text-decoration: none !important;
}
.comment-reply-link:hover { color: var(--tz-bronze) !important; }

/* Threaded replies */
.comment .children {
  list-style: none;
  margin: clamp(20px, 3vw, 28px) 0 0 clamp(40px, 5vw, 60px);
  padding: 0;
}
.comment .children li { border-top: 1px solid var(--tz-line-soft); }

/* No comments yet */
.no-comments {
  font-family: var(--tz-font-serif);
  font-style: italic;
  color: var(--tz-ink-mute-strong);
  text-align: center;
  padding: clamp(24px, 4vw, 32px) 0;
}

/* ---------- 14b. Comment form ---------- */
#respond,
.comment-respond {
  margin-top: clamp(40px, 6vw, 56px) !important;
  padding-top: clamp(28px, 4vw, 36px) !important;
  border-top: 1px solid var(--tz-line) !important;
}

#reply-title,
.comment-reply-title {
  font-family: var(--tz-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.2 !important;
  color: var(--tz-ink) !important;
  margin: 0 0 clamp(18px, 2.5vw, 22px) !important;
  letter-spacing: -0.005em;
}
#reply-title small { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; margin-left: 12px; }

.logged-in-as,
.comment-notes,
.comment-form .comment-notes {
  font-family: var(--tz-font-serif) !important;
  font-style: italic !important;
  font-size: clamp(13px, 1vw, 14px) !important;
  color: var(--tz-ink-mute-strong) !important;
  margin: 0 0 clamp(16px, 2vw, 20px) !important;
}
.logged-in-as a { color: var(--tz-ink-soft) !important; border-bottom: 1px solid var(--tz-line); }

.comment-form {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 18px);
}
.comment-form-author,
.comment-form-email,
.comment-form-url {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}
.comment-form-comment { margin: 0 !important; }

.comment-form label {
  display: block;
  font-family: var(--tz-font-sans) !important;
  font-size: clamp(10px, 0.9vw, 10.5px) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--tz-ink-mute-strong) !important;
  margin: 0 0 6px !important;
  font-weight: 400 !important;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100% !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tz-line) !important;
  background: transparent !important;
  font-family: var(--tz-font-serif) !important;
  font-size: clamp(15px, 1.2vw, 16px) !important;
  color: var(--tz-ink) !important;
  padding: 8px 0 !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus { border-bottom-color: var(--tz-ink) !important; }

.comment-form textarea,
.comment-form #comment {
  width: 100% !important;
  min-height: 140px !important;
  border: 1px solid var(--tz-line) !important;
  background: transparent !important;
  font-family: var(--tz-font-serif) !important;
  font-size: clamp(15px, 1.2vw, 16px) !important;
  line-height: 1.65 !important;
  color: var(--tz-ink) !important;
  padding: 14px !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  resize: vertical !important;
  max-width: 100% !important;
}
.comment-form textarea:focus { border-color: var(--tz-ink) !important; }

/* Cookies checkbox row */
.comment-form-cookies-consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
}
.comment-form-cookies-consent input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--tz-bronze);
}
.comment-form-cookies-consent label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--tz-font-serif) !important;
  font-size: clamp(13px, 1vw, 14px) !important;
  font-style: italic !important;
  color: var(--tz-ink-mute-strong) !important;
  line-height: 1.55 !important;
}

.form-submit { margin: clamp(8px, 1.5vw, 14px) 0 0 !important; }
.comment-form .submit,
input[type="submit"].submit {
  font-family: var(--tz-font-sans) !important;
  font-size: clamp(10px, 0.9vw, 11px) !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  padding: clamp(12px, 1.5vw, 16px) clamp(24px, 3.5vw, 36px) !important;
  border: 1px solid var(--tz-ink) !important;
  background: transparent !important;
  color: var(--tz-ink) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background 0.25s ease, color 0.25s ease !important;
  box-shadow: none !important;
}
.comment-form .submit:hover,
input[type="submit"].submit:hover {
  background: var(--tz-ink) !important;
  color: var(--tz-bg) !important;
}

@media (max-width: 480px) {
  .comment-body {
    grid-template-columns: 36px 1fr;
    gap: 12px;
  }
  .comment-author .avatar,
  .comment-author img.avatar {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ---------- 15. Search ---------- */
.tz-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,18,14,0.95);
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(60px, 12vw, 140px) var(--tz-gutter) var(--tz-gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.tz-search-overlay.is-open { opacity: 1; visibility: visible; }
.tz-search-overlay__form {
  width: 100%;
  max-width: 720px;
}
.tz-search-overlay__form input[type="search"] {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242,236,224,0.4);
  font-family: var(--tz-font-display);
  font-size: clamp(28px, 4vw, 48px);
  color: var(--tz-bg);
  padding: 16px 0;
  outline: none;
}
.tz-search-overlay__form input::placeholder { color: rgba(242,236,224,0.45); font-style: italic; }
.tz-search-overlay__close {
  position: absolute;
  top: 20px;
  right: var(--tz-gutter);
  color: rgba(242,236,224,0.7);
}
.tz-search-overlay__hint {
  margin-top: 18px;
  font-family: var(--tz-font-sans);
  font-size: clamp(10px, 0.9vw, 11px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.5);
}

/* ---------- 16. Responsive breakpoints ---------- */
/* Tablet and below */
@media (max-width: 1024px) {
  .tz-grid-3, .tz-read-next__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tz-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 720px) {
  /* Keep the Issue No. / date dateline on mobile; the search link lives in
     the drawer so hide its duplicate here. */
  .tz-topbar {
    display: flex;
    justify-content: center;
    padding: 8px var(--tz-gutter);
  }
  .tz-topbar > div { justify-content: center; gap: 14px; }
  .tz-topbar > div:last-child { display: none; }
  .tz-topbar span { font-size: 12px; letter-spacing: 0.16em; }
  .tz-masthead {
    grid-template-columns: 1fr auto;
    padding: clamp(16px, 4vw, 20px) var(--tz-gutter);
    gap: 12px;
  }
  .tz-masthead__nav { display: none; }
  .tz-masthead__icons { display: none; }
  .tz-masthead__logo { text-align: left; }
  .tz-logo-sub { display: none; }
  .tz-hamburger { display: inline-flex; justify-self: end; }

  /* Category strip: left-aligned + horizontal scroll. This is the scalable
     pattern — works whether there are 4 categories or 14. The soft right-edge
     mask hints "scroll for more" when items overflow, and falls on empty space
     (harmless) when they don't. scroll-padding keeps the first item off the
     edge when scrolled back to the start. */
  .tz-subnav {
    gap: clamp(16px, 3.4vw, 24px);
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding: 14px var(--tz-gutter);
    padding-right: calc(var(--tz-gutter) + 12px);
    scroll-padding-left: var(--tz-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .tz-subnav::-webkit-scrollbar { display: none; }
  .tz-subnav a { font-size: 12px; }

  /* Filter strip: horizontal scroll instead of wrapping into a messy block */
  .tz-filterstrip {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: clamp(14px, 4vw, 18px) var(--tz-gutter);
    padding-right: calc(var(--tz-gutter) + 12px);
    scroll-padding-left: var(--tz-gutter);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .tz-filterstrip::-webkit-scrollbar { display: none; }
  .tz-filterstrip__cats { flex-wrap: nowrap; }
  .tz-filterstrip__cats a { white-space: nowrap; }
  .tz-filterstrip__meta { display: none; }

  .tz-hero { height: auto; min-height: 480px; padding-top: 80px; }
  .tz-hero__inner { padding-top: 0; padding-bottom: clamp(40px, 8vw, 60px); }

  .tz-grid-2, .tz-grid-3, .tz-read-next__grid {
    grid-template-columns: 1fr;
  }

  .tz-author-band {
    grid-template-columns: 1fr;
    padding: clamp(24px, 5vw, 30px) var(--tz-gutter);
  }

  /* Newsletter: single column, full-width stacked input + button */
  .tz-newsletter--footer {
    grid-template-columns: 1fr;
    gap: clamp(18px, 5vw, 26px);
    text-align: left;
  }
  .tz-newsletter__row { flex-direction: column; gap: 12px; }
  .tz-newsletter__input { padding: 14px 2px; }
  .tz-newsletter__btn { width: 100%; padding: 16px; }
  .tz-newsletter--band .tz-newsletter__row { max-width: 100%; }

  .tz-footer__grid { grid-template-columns: 1fr; }
  .tz-footer__bottom { flex-direction: column; gap: 18px; text-align: center; }
}

/* Very small phones */
@media (max-width: 360px) {
  .tz-subnav a { font-size: 12px; letter-spacing: 0.18em; }
  .tz-hero__title { font-size: clamp(36px, 10vw, 56px); }
}

/* ---------- 18. Defensive: prevent phantom 100vh whitespace ---------- */
html, body, main, .tz-main {
  min-height: 0 !important;
}
body { overflow-x: hidden; }
.tz-footer { margin-bottom: 0 !important; }
/* Stray empty divs sometimes injected by hosts — collapse them */
body > div:empty,
body > p:empty { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 19. Print ----------
   Readers of a journal like this print articles. Strip the chrome,
   set the text full-width in black on white, keep captions. */
@media print {
  body { background: #fff; color: #000; }
  .tz-header, .tz-topbar, .tz-subnav, .tz-footer,
  .tz-drawer, .tz-search-overlay, .tz-hamburger,
  .tz-newsletter, .tz-read-next, .comments-area,
  .tz-hero__scroll, .tz-pager, .tz-filterstrip { display: none !important; }
  .tz-article-body, .entry-content {
    max-width: 100%;
    padding: 0;
    color: #000;
  }
  .tz-article-body p, .entry-content > p,
  .tz-article-body li, .entry-content li { color: #000; }
  .tz-single__hero img { filter: none; max-height: 60vh; object-fit: contain; }
  .tz-single__mast { padding: 0 0 24px; }
  a { text-decoration: underline; }
  /* Show the destination of in-article links on paper */
  .entry-content p a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}