/* ==========================================================================
   Taiwan.online case page — page-only styles (loaded after site.css)
   Typographic re-creations of the account's look: no screenshots, no photos.
   ========================================================================== */

/* two external links in the info sidebar */
.to-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ---------- key visual: update-cover wall -------------------------------- */
.to-kv {
  position: relative;
  padding: clamp(18px, 3.2vw, 44px);
  border-radius: var(--r);
  background-color: var(--paper-2);
  background-image:
    linear-gradient(rgba(21, 23, 28, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 23, 28, .045) 1px, transparent 1px);
  background-size: 32px 32px;
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}
.to-kv__bar, .to-kv__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.to-kv__bar {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .06em; color: var(--ink-2);
}
.to-kv__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; }
.to-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--seal); flex: none; }

.to-kv__grid {
  margin-block: clamp(18px, 2.6vw, 32px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
.to-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 24px -20px rgba(21, 23, 28, .45);
  container-type: inline-size;
}
.to-tile--hero {
  grid-column: span 2; grid-row: span 2;
  border-color: var(--ink);
}
.to-tile__date {
  font-family: var(--f-latin); font-weight: 800;
  font-size: clamp(20px, 2.6vw, 38px);
  font-size: 15cqi;
  line-height: 1; letter-spacing: -.01em;
  color: var(--ink);
}
.to-tile__word {
  margin-top: .08em;
  font-family: var(--f-latin); font-weight: 800;
  font-size: clamp(30px, 4vw, 58px);
  font-size: 23cqi;
  line-height: 1.05; letter-spacing: -.01em;
  color: var(--ink);
}
/* outlined word: stroke painted under the fill so overlapping glyph contours stay clean */
@supports (-webkit-text-stroke: 1px black) and (paint-order: stroke fill) {
  .to-tile__word {
    color: var(--card);
    -webkit-text-stroke: max(2.4px, .07em) var(--ink);
    paint-order: stroke fill;
  }
}
.to-tile__cap {
  position: absolute; left: 0; right: 0; bottom: 7%;
  font-size: clamp(.75rem, .6rem + .5vw, 1rem);
  font-size: 3.4cqi;
  font-weight: 500; letter-spacing: .12em; color: var(--ink-2);
}
.to-tile__tag {
  position: absolute; left: 6%; top: 6%;
  font-family: var(--f-mono); font-size: clamp(.6875rem, .55rem + .35vw, .8125rem); font-size: 2.6cqi;
  letter-spacing: .08em; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: .6em;
}

.to-kv__foot {
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-size: .9375rem; font-weight: 500; letter-spacing: .1em;
}
.to-kv__foot span + span { color: var(--ink-2); font-weight: 400; }

/* ---------- world glossary (diagram card) ------------------------------- */
.to-glossary__legend {
  display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.2fr);
  max-width: calc(50% - 6px);
  padding-inline: 18px;
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; color: var(--ink-2);
}
.to-glossary__legend span:nth-child(2) { text-align: center; color: var(--ink-3); }
.diagram-card > * + .to-glossary__legend { margin-top: clamp(24px, 3vw, 36px); }
.to-glossary {
  margin-top: 10px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px;
}
.to-glossary > div {
  display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.2fr); align-items: center;
  padding: 13px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.to-glossary dt { color: var(--ink-2); line-height: 1.6; }
.to-glossary dd { font-weight: 700; line-height: 1.6; }
.to-glossary > div::after {
  content: "→"; grid-column: 2; grid-row: 1;
  text-align: center; font-family: var(--f-latin); color: var(--seal);
}
.to-glossary dt { grid-column: 1; grid-row: 1; }
.to-glossary dd { grid-column: 3; grid-row: 1; }

/* ---------- patch-note cards (typographic posts) ------------------------ */
.to-notes-figure { margin-top: clamp(32px, 4vw, 56px); }
.to-notes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 24px);
}
.to-note {
  margin: 0;
  min-height: clamp(280px, 24vw, 340px);
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line);
}
.to-note__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; color: var(--ink-2);
}
.to-note__top span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.to-note__head {
  margin-top: auto;
  font-size: clamp(1.125rem, .95rem + .6vw, 1.375rem);
  font-weight: 700; letter-spacing: .06em; color: var(--seal);
}
.to-note__body {
  margin-top: 8px;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  font-weight: 700; line-height: 1.6; letter-spacing: .02em;
}
.to-note__meta {
  margin-top: clamp(18px, 2.4vw, 28px);
  padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; color: var(--ink-2);
}
.to-note--ink { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.to-note--ink .to-note__top, .to-note--ink .to-note__meta { color: var(--on-ink-2); }
.to-note--ink .to-note__meta { border-top-color: var(--on-ink-line); }
.to-note--ink .to-note__head { color: var(--seal-on-ink); }
.to-note--paper { background: var(--paper-2); box-shadow: 0 0 0 1px var(--line); }
.to-notes-figure figcaption { margin-top: 12px; font-size: .8125rem; color: var(--ink-2); line-height: 1.7; }

/* ---------- recurring formats strip (diagram card) ---------------------- */
.to-formats {
  list-style: none;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
}
.diagram-card > * + .to-formats { margin-top: clamp(24px, 3vw, 36px); }
.to-formats li {
  padding: 18px 18px 20px;
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--ink);
  border-radius: var(--r-sm);
}
.to-formats__num { display: block; font-family: var(--f-latin); font-weight: 600; font-size: .8125rem; color: var(--ink-2); }
.to-formats__head { display: block; margin-top: 6px; font-size: 1.125rem; font-weight: 700; color: var(--seal-ink); letter-spacing: .04em; }
.to-formats__text { display: block; margin-top: 6px; font-size: .9375rem; color: var(--ink-2); line-height: 1.75; }

/* quote cards after the formats strip */
.case-section > * + .to-quotes { margin-top: 16px; }
.to-quotes figcaption { margin-top: 12px; font-size: .8125rem; color: var(--ink-2); line-height: 1.7; }

/* ---------- results: follow links -------------------------------------- */
.to-follow {
  margin-top: clamp(28px, 3.4vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.to-follow__label { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .06em; color: var(--ink-2); }

/* ---------- ≤ 767px ------------------------------------------------------ */
@media (max-width: 767.98px) {
  .to-kv { background-size: 24px 24px; }
  .to-kv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .to-kv__grid > .to-tile:nth-child(n+4) { display: none; }
  .to-kv__bar { font-size: .75rem; }
  .to-kv__foot { font-size: .8125rem; letter-spacing: .06em; }
  .to-kv__foot span + span { display: none; }

  .to-glossary__legend { max-width: none; padding-inline: 14px; }
  .to-glossary { grid-template-columns: 1fr; }
  .to-glossary__legend, .to-glossary > div { grid-template-columns: 6.6rem 22px minmax(0, 1fr); }
  .to-glossary > div { padding: 11px 14px; }

  .to-notes { grid-template-columns: 1fr; }
  .to-note { min-height: 0; }
  .to-note__head { margin-top: 28px; }

  .to-formats { grid-template-columns: 1fr; }
  .to-formats li {
    display: grid; grid-template-columns: 6.25em minmax(0, 1fr); align-items: baseline; gap: 2px 12px;
    padding: 14px 16px;
  }
  .to-formats__num { display: none; }
  .to-formats__head { margin-top: 0; font-size: 1rem; }
  .to-formats__text { margin-top: 0; }

  .to-follow { flex-direction: column; align-items: stretch; }
  .to-follow .btn-row { width: 100%; }
}