/* Fonts are deliberately system-only.
 *
 * This file used to open with an @import of Noto Serif TC + Noto Sans TC from
 * Google Fonts. Traditional Chinese faces cannot be subset the way Latin ones
 * can, so that single line pulled 28 requests and ~2.1 MB per page view — set
 * against roughly 18 KB for all the HTML, CSS, JS and images combined. Worse,
 * an @import serialises: the browser had to fetch style.css, parse it, then
 * fetch a 199 KB font stylesheet, and only then start on the font files, all
 * of it blocking the first paint.
 *
 * Every platform ships a good Traditional Chinese face already — PingFang TC
 * on Apple, Microsoft JhengHei on Windows, Noto Sans CJK on Android — so the
 * stacks below render instantly at zero transfer cost.
 */

:root {
  /* Forest Canopy theme — colors declared in OKLCH for perceptual consistency */
  --bg: oklch(98.2% 0.004 84);          /* #faf9f6 */
  --text: oklch(29.3% 0.035 140);       /* #23301f */
  --muted: oklch(60.1% 0.029 126);      /* #7d8471 */
  --accent: oklch(37.7% 0.065 144);     /* #2d4a2b */
  --accent-soft: oklch(53.5% 0.088 142);/* #4f7a4a */
  --card-bg: oklch(99.1% 0.006 96);     /* warm off-white, not pure #fff */
  --border: oklch(91.8% 0.017 120);     /* #e2e6d9 */
  --tag-bg: oklch(94.2% 0.017 121);     /* #eaeee1 */
  --max-width: 720px;
  /* 1160 left the article column at 756px, which forced the featured
     headline to wrap mid-title. Widening the page and narrowing the sidebar
     gives the headline ~890px — enough for most titles to sit on one or two
     clean lines. */
  --wide-width: 1260px;
  --sidebar-width: 300px;
  --layout-gap: 64px;
  /* Latin face first so headings keep their serif character, then the
     platform CJK faces pick up the Chinese glyphs. */
  --serif: Georgia, "Songti TC", "Noto Serif CJK TC", "Noto Serif TC",
           "PingFang TC", "Microsoft JhengHei", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
          "Noto Sans CJK TC", "Noto Sans TC", "Microsoft JhengHei",
          "Helvetica Neue", Arial, sans-serif;
  --radius: 9px;
  --shadow: 0 8px 24px rgba(35, 48, 31, 0.07);
  --shadow-hover: 0 16px 36px rgba(35, 48, 31, 0.13);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 24px 96px;
}

.wrap.narrow { max-width: var(--max-width); }

header.site {
  padding: 56px 0 30px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
}

header.site::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 2px;
  background: var(--accent);
}

header.site .brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
}

header.site .leaf-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--accent);
}

header.site .brand h1 {
  font-family: var(--serif);
  font-size: 30px;
  margin: 0;
  letter-spacing: -0.01em;
  font-weight: 700;
}

header.site a { color: inherit; text-decoration: none; }

header.site p.tagline {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

nav.site {
  display: flex;
  gap: 24px;
}

nav.site a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

nav.site a:hover { color: var(--text); border-color: var(--accent); }
nav.site a.active { color: var(--text); border-color: var(--accent); }

/* ---------- Homepage: featured + grid ---------- */

.featured {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--border);
}

/* A filled badge rather than a hairline and small caps. The previous version
   sat at the same weight as body text in the same colour family, so it read
   as a stray caption instead of a section marker. Solid accent at a small
   size stays clearly subordinate to the 38px headline while being impossible
   to miss. */
.featured .eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: var(--accent);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* A dot rather than a dash: the badge already provides the shape, so the
   marker only needs to signal "live / newest". */
.featured .eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

.featured h2 {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1.28;
  margin: 0 0 24px;
  /* CJK breaks between any two characters, so a long headline happily splits
     a book title down the middle — 《寰宇 / 龍虎豹》. balance evens the lines
     out instead of filling the first one to the edge, and strict stops
     opening brackets being stranded at the end of a line (or closing ones at
     the start), which is what made the break read as broken. */
  text-wrap: balance;
  line-break: strict;
}

.featured h2 { text-decoration: underline transparent; text-underline-offset: 7px; transition: text-decoration-color 0.2s ease; }
.featured:hover h2 { text-decoration-color: var(--accent); }

.featured img.cover {
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  display: block;
  transition: box-shadow 0.2s, transform 0.2s;
}

.featured:hover img.cover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.featured .post-summary {
  font-size: 16.5px;
  color: #414d3d;
  max-width: 720px;
  /* Inherits the three-line clamp; the larger type just needs its own
     reserved height. */
  min-height: calc(3 * 1.75em);
}

.featured-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.read-more-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.read-more .arrow, .read-more-sm .arrow {
  transition: transform 0.15s;
}

.featured:hover .arrow,
.post-card:hover .arrow {
  transform: translateX(3px);
}

/* One article per row, matching the featured post above it. Two narrow
   columns made each card's title wrap as badly as the headline did, and left
   the page reading as a grid of thumbnails rather than a list of articles. */
.post-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Horizontal at full width: a cover stretched across ~890px would dwarf the
   text beside it, so the image takes a fixed column and the words take the
   rest. Stacks again on narrow screens. */
.post-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 22px;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

/* Without a cover the text should use the whole row rather than leave a
   260px gap where the image would have been. */
.post-card.no-cover { grid-template-columns: 1fr; }

.post-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.post-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  border-color: var(--accent-soft);
}

.post-card img.cover {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 9px;
  margin-bottom: 0;
  background: var(--border);
}

.post-title {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 8px;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
  line-break: strict;
  text-decoration: underline transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease;
}

.post-card:hover .post-title { text-decoration-color: var(--accent); }

.post-meta {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Always three lines, never more.
 *
 * min-height reserves the space so a short summary doesn't make its card
 * shorter than its neighbours, and the clamp cuts a long one off with an
 * ellipsis — which is the point: a summary that stops mid-thought reads as
 * "there is more of this", where a tidy two-line sentence reads as finished
 * and gives no reason to click. */
.post-summary {
  color: #4a5545;
  font-size: 14.5px;
  line-height: 1.75;
  min-height: calc(3 * 1.75em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}

.tag {
  display: inline-block;
  font-size: 11.5px;
  color: var(--accent);
  background: var(--tag-bg);
  border-radius: 999px;
  padding: 3px 11px;
  margin: 0 6px 6px 0;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

a.tag:hover {
  background: var(--accent);
  color: #fff;
}

/* ---------- Sidebar layout (homepage + post page) ---------- */

.layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--layout-gap);
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.widget {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
}

.widget-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.widget-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.widget-list a.recent-item {
  display: block;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
}

.widget-list a.recent-item:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.recent-item .recent-date {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
}

.tag-folder-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tag-folder-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 6px;
  text-decoration: none;
  color: var(--text);
  font-size: 13.5px;
  border-radius: 6px;
}

.tag-folder-item:hover {
  background: var(--tag-bg);
  color: var(--text);
}

.tag-folder-item .count {
  color: var(--muted);
  font-size: 11.5px;
}

.tag-folder-item-label {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tag-folder-item-label svg,
.recent-item-icon {
  flex-shrink: 0;
  color: var(--muted);
}

.filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tag-bg);
  padding: 12px 18px;
  border-radius: 10px;
  margin-bottom: 32px;
  font-size: 13.5px;
}

.filter-banner a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }
  .sidebar .widget { flex: 1; min-width: 260px; }
}

.empty-state {
  color: var(--muted);
  padding: 96px 0;
  text-align: center;
  font-size: 15px;
}

.site-footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* ---------- Table of contents ---------- */

/* Closed by default: the contents list sat between the reader and the first
   paragraph, pushing the article itself below the fold on the page they came
   to read. Collapsed it costs one line, and the anchor links stay in the
   markup either way — which is what search engines read them from. */
.toc {
  margin: 24px 0 32px;
  padding: 14px 20px;
  background: var(--tag-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Keeps the closed state informative rather than a bare label. */
.toc-count {
  margin-left: 10px;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--muted);
}

.toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  cursor: pointer;
}

.toc-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.toc-toggle[aria-expanded="false"] .toc-chevron { transform: rotate(-90deg); }

.toc-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14.5px;
}

.toc-toggle[aria-expanded="false"] + .toc-list { display: none; }

.toc-item a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.toc-item a:hover { color: var(--accent); border-bottom-color: var(--accent-soft); }
.toc-h3 { padding-left: 18px; font-size: 13.5px; color: var(--muted); }

/* ---------- Heading anchors ---------- */

/* scroll-margin keeps a jumped-to heading clear of the top edge instead of
   flush against it. */
article.post .content h1,
article.post .content h2,
article.post .content h3,
article.post .content h4 { scroll-margin-top: 24px; }

.heading-anchor {
  margin-left: 0.4em;
  color: var(--muted);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

h1:hover > .heading-anchor,
h2:hover > .heading-anchor,
h3:hover > .heading-anchor,
h4:hover > .heading-anchor { opacity: 1; }

.heading-anchor:hover { color: var(--accent); }
/* Always visible when tabbed to, and on touch devices where there is no
   hover to reveal it. */
.heading-anchor:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

@media (hover: none) {
  .heading-anchor { opacity: 0.45; }
}

/* ---------- Post page ---------- */

article.post { padding-top: 4px; }

/* Title block, above the cover. */
article.post .post-header { margin-bottom: 32px; }
article.post .post-tags { margin-top: 12px; }

/* aspect-ratio (not just max-height) so the browser reserves the cover's
   space during layout. Without it the heading and body text render at the
   top of the viewport and are shoved down the moment the image decodes —
   the jump that made the page feel slow even when the file was only 52 KB. */
article.post .hero-cover {
  display: block;
  width: 100%;
  /* height:auto is load-bearing — without it the height="675" attribute on
     the tag wins and the cover renders as a 675px-tall box regardless of
     column width. aspect-ratio only governs once height is auto. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 40px;
  background: var(--border);
  box-shadow: var(--shadow);
}

/* 42px put a 21-character title one character over the 848px column, so it
   wrapped onto a second line and split 公/路 — a word — down the middle.
   Chinese carries no word boundaries for the browser to avoid, so the only
   reliable fix is to stop the wrap happening: 38px fits ~22 characters,
   which covers the titles this blog actually uses. Longer ones still wrap,
   and balance keeps the two lines close in length rather than filling the
   first to the edge. */
article.post h1 {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1.4;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  text-wrap: balance;
  line-break: strict;
}

article.post .post-meta {
  font-size: 13px;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
article.post .post-meta .dot { color: var(--accent-soft); }

article.post .content {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.95;
  margin-top: 40px;
  color: #232b20;
}

article.post .content p { margin: 0 0 28px; }

/* No drop cap. It is a Latin typographic device: enlarging the first letter
   of "Once upon a time" leaves a readable word, but enlarging the first
   character of 實習那年 splits 實習 into an oversized 實 and a normal 習,
   so the opening word reads as two. */

article.post .content h2 {
  font-family: var(--serif);
  font-size: 27px;
  margin-top: 52px;
  margin-bottom: 18px;
  text-wrap: balance;
}
article.post .content h3 {
  font-family: var(--serif);
  font-size: 22px;
  margin-top: 38px;
  margin-bottom: 16px;
}
article.post .content ul,
article.post .content ol { padding-left: 1.4em; margin: 0 0 28px; }
article.post .content li { margin-bottom: 8px; }
/* Images carrying an explicit width sit centred; at less than full column a
   left-aligned photo reads as misaligned rather than deliberately smaller. */
article.post .content img[style*="width"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

article.post .content img {
  max-width: 100%;
  height: auto;
  /* Tinted placeholder so a lazy image occupies visible space while it
     decodes rather than flashing in from nothing. */
  background: var(--border);
  border-radius: 12px;
  margin: 12px 0;
  box-shadow: var(--shadow);
}
article.post .content pre {
  background: #232d20;
  color: #e8ece2;
  padding: 20px;
  border-radius: 12px;
  overflow-x: auto;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  margin: 8px 0 28px;
}
article.post .content code {
  background: #eef1e6;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
}
article.post .content blockquote {
  position: relative;
  border-left: 3px solid var(--accent);
  margin: 36px 0;
  padding: 4px 28px;
  color: #4b5646;
  font-style: italic;
  font-size: 1.1em;
  background: #f6f7f1;
  border-radius: 0 10px 10px 0;
}

article.post .content hr {
  border: none;
  text-align: center;
  margin: 48px 0;
}
article.post .content hr::after {
  content: "\2766";
  color: var(--accent-soft);
  font-size: 18px;
}

.back-link {
  display: inline-block;
  margin-bottom: 32px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.back-link:hover { color: var(--accent); }

/* ============================================================
   Related articles ("你可能會有興趣的文章")
   ============================================================
   A reader who finishes an article is at the point of highest intent and the
   lowest-friction exit: the browser back button. Two suggestions turn that
   dead end into a second page view, and give the crawler internal links
   between articles that would otherwise only be reachable from the index. */
.related {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.related h2 {
  font-size: 19px;
  margin: 0 0 20px;
  letter-spacing: 0.01em;
}

.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.related-card:hover { border-color: var(--accent-soft); transform: translateY(-2px); }

/* Fixed ratio so two cards with differently-shaped covers still line up, and
   so the row's height is known before the images arrive. */
.related-cover {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  object-fit: cover;
  display: block;
}

.related-cover-empty { background: var(--accent-soft); opacity: 0.35; }

.related-body { padding: 14px 16px 16px; }

.related-body h3 {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 8px;
  text-wrap: balance;
  line-break: strict;
  /* Two lines, so a long title can't push one card taller than its partner. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-card:hover .related-body h3 { color: var(--accent); }

@media (max-width: 700px) {
  /* Below this the 260px image column squeezes the text into a sliver, so
     the card goes back to image-on-top. */
  .post-card { grid-template-columns: 1fr; gap: 14px; }
  .post-title { font-size: 20px; }
  .related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .featured h2 { font-size: 27px; }
  .featured img.cover { aspect-ratio: 16/10; }
  article.post h1 { font-size: 31px; }
  article.post .content { font-size: 17.5px; }
}

/* ============================================================
   Admin / CMS form (shared with admin.html panels)
   ============================================================ */
form.cms {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

form.cms label {
  font-size: 13.5px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

form.cms input[type="text"],
form.cms input[type="password"],
form.cms input[type="url"],
form.cms input[type="date"],
form.cms textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14.5px;
  font-family: var(--sans);
  background: var(--card-bg);
  color: var(--text);
}

form.cms textarea { min-height: 200px; resize: vertical; font-family: "SFMono-Regular", Consolas, monospace; }

/* Related-article picker: two dropdowns side by side, stacking on a phone. */
.related-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.related-picker select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: var(--sans);
  background: var(--card-bg);
  color: var(--text);
}

@media (max-width: 700px) { .related-picker { grid-template-columns: 1fr; } }

.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row label { margin: 0; }

.status-msg {
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 8px;
}
.status-msg.ok { background: #e5efe0; color: #2d4a2b; }
.status-msg.err { background: #fdecea; color: #c62828; }

.tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-options label {
  font-weight: normal;
  font-size: 13px;
  background: var(--tag-bg);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.tag-options input { margin-right: 4px; }

/* Applied by protectTitle() around 《…》 runs in headlines, so a work title
   is never split across two lines. */
.nw { white-space: nowrap; }