@charset "UTF-8";
/* ============================================================
   VERMILION SEAL — 墨紙硃金 Ink · Paper · Cinnabar · Gold
   Single stylesheet for the whole site. No framework, no build step.
   Principle: 90% quiet Western editorial typography, 10% precise Eastern accent.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --paper:#FAF7F1;
  --paper-2:#F3EEE4;
  --ink:#1C1E21;
  --ink-soft:#4A4E55;
  --ink-faint:#8A8F98;
  --cinnabar:#A63A2B;
  --cinnabar-deep:#7E2B20;
  --gold:#8C6A1D;
  --jade:#2E6E5E;
  --amber:#9A6A00;
  --line:#E2DCCF;
  --card:#FFFFFF;
  --shadow:0 1px 2px rgba(28,30,33,.06),0 4px 16px rgba(28,30,33,.05);

  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --font-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-han:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU","MingLiU",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-hero:clamp(2.2rem,5vw,3.6rem);
  --fs-h1:clamp(1.8rem,3.5vw,2.5rem);
  --fs-h2:clamp(1.35rem,2.5vw,1.7rem);
  --fs-h3:1.15rem;
  --fs-body:1.0625rem;
  --fs-small:.875rem;
  --fs-tiny:.78rem;
  --lh-body:1.75;
  --measure:68ch;
  --wrap:1060px;
  --wrap-narrow:720px;

  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:6rem;
  --radius:6px;

  --dur-micro:180ms;
  --dur-reveal:420ms;
  --ease:cubic-bezier(.25,.46,.45,.94);

  color-scheme:light;
}
/* Dark palette retained but NOT applied automatically: this site's identity is
   paper and ink, and following the OS theme hid that behind a dark screen.
   Kept under an explicit attribute for a future reader-controlled toggle. */
:root[data-theme="dark"]{
    --paper:#17181B;--paper-2:#1F2126;--ink:#EAE6DC;--ink-soft:#B9BDC6;--ink-faint:#7C818B;
    --cinnabar:#D4664F;--cinnabar-deep:#E08770;--gold:#C9A24B;--jade:#57A88F;--amber:#D0A144;
  --line:#33363D;--card:#1F2126;--shadow:none;color-scheme:dark;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:oldstyle-nums;
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.22;letter-spacing:-.011em;font-weight:600;color:var(--ink)}
h1{font-size:var(--fs-h1);margin:0 0 var(--s3)}
h2{font-size:var(--fs-h2);margin:var(--s5) 0 var(--s2)}
h3{font-size:var(--fs-h3);margin:var(--s4) 0 var(--s1)}
h4{font-size:1rem;margin:var(--s3) 0 var(--s1)}
p{margin:0 0 var(--s2)}
img,svg,video{max-width:100%;height:auto}
figure{margin:var(--s4) 0}
figcaption{font-family:var(--font-ui);font-size:var(--fs-small);color:var(--ink-faint);margin-top:var(--s1)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s5) 0}
::selection{background:color-mix(in srgb,var(--cinnabar) 22%,transparent)}

a{
  color:var(--cinnabar);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--dur-micro) var(--ease);
}
a:hover{background-size:100% 1px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cinnabar);outline-offset:3px;border-radius:2px
}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--s2);top:var(--s2);z-index:99;background:var(--card);padding:.6em 1.2em;border:1px solid var(--line);border-radius:var(--radius)}

blockquote{
  margin:var(--s4) 0;padding-left:var(--s3);border-left:3px solid var(--line);
  font-style:italic;color:var(--ink-soft)
}
code,kbd,samp{font-family:var(--font-mono);font-size:.88em;background:var(--paper-2);padding:.12em .38em;border-radius:3px}
pre{font-family:var(--font-mono);font-size:.85rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s2);overflow-x:auto;line-height:1.55}
pre code{background:none;padding:0}
ul,ol{padding-left:1.35em;margin:0 0 var(--s2)}
li{margin-bottom:.35em}

table{width:100%;border-collapse:collapse;font-size:var(--fs-small);font-family:var(--font-ui);margin:var(--s3) 0;display:block;overflow-x:auto}
th{text-align:left;border-bottom:2px solid var(--ink);padding:.6em .7em;font-weight:600;white-space:nowrap}
td{border-bottom:1px solid var(--line);padding:.6em .7em;vertical-align:top}

/* Han text: always presented as a deliberate object, never body copy. */
.han,.vs-han{font-family:var(--font-han);letter-spacing:.1em;line-height:1.9;font-variant-numeric:normal}

/* ---------- 3. LAYOUT ---------- */
.vs-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.vs-narrow{max-width:var(--wrap-narrow);margin-inline:auto}
/* Reading measure. theme.json already sets the content column to 720px, which
   is the measure at this body size, so .vs-measure carries intent only and sets
   no width: a narrower cap makes WordPress centre the block away from its own
   heading, and a wider one breaks it out of the column entirely. */
main{display:block;min-height:50vh}
.vs-main{padding-block:var(--s4) var(--s6)}
.vs-stack>*+*{margin-top:var(--s3)}
.vs-center{text-align:center}
.vs-small,.small{font-size:var(--fs-small);color:var(--ink-faint)}
.vs-ui{font-family:var(--font-ui)}
.vs-eyebrow{
  font-family:var(--font-ui);font-size:var(--fs-tiny);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 var(--s2)
}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- 4. HEADER / NAV ---------- */
.vs-header{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:20}
.vs-header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  max-width:var(--wrap);margin-inline:auto;padding:var(--s2) 22px}
.vs-brand{display:flex;align-items:center;gap:.7rem;background:none!important;color:var(--ink)}
.vs-brand:hover{background:none}
.vs-seal{
  display:inline-grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
  border:2px solid var(--cinnabar);color:var(--cinnabar);
  font-family:var(--font-han);font-size:19px;line-height:1;letter-spacing:0;
  border-radius:5px;transition:transform var(--dur-micro) var(--ease)
}
.vs-brand:hover .vs-seal{transform:rotate(-3deg) scale(1.05)}
/* Brand mark: the 道 seal, transparent PNG so it reads on paper and on ink. */
.vs-seal-img{width:40px;height:40px;flex:0 0 40px;display:block}
.vs-byline .vs-seal-img{width:30px;height:30px;flex:0 0 30px}
.vs-brand-name{font-family:var(--font-display);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;line-height:1.15}
.vs-brand-tag{display:block;font-family:var(--font-ui);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:400}
.vs-nav ul{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.vs-nav a{font-family:var(--font-ui);font-size:.925rem;color:var(--ink-soft)}
.vs-nav a:hover,.vs-nav .current-menu-item>a{color:var(--cinnabar)}
.vs-nav-toggle{display:none;font-family:var(--font-ui);font-size:.9rem;background:none;border:1px solid var(--line);
  border-radius:var(--radius);padding:.45em .9em;color:var(--ink);cursor:pointer}
@media (max-width:860px){
  .vs-nav-toggle{display:block}
  .vs-nav{position:absolute;inset:100% 0 auto 0;z-index:70;
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 12px 28px rgba(28,30,33,.10);
    padding:var(--s1) 22px var(--s2);display:none;
    max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain}
  .vs-nav[data-open="true"]{display:block}
  .vs-nav ul{flex-direction:column;gap:0}
  .vs-nav li{margin:0;border-bottom:1px solid var(--line)}
  .vs-nav li:last-child{border-bottom:0}
  /* 48px minimum touch target, full-width, so the last item is never a squeeze. */
  .vs-nav a{display:block;padding:.95rem 0;min-height:48px;font-size:1rem;background-image:none}
  .vs-nav-toggle{min-height:44px;min-width:64px}
}

/* ---------- 5. HERO — Today's Verified Quote ---------- */
.vs-hero{text-align:center;padding:clamp(2.5rem,7vw,4.5rem) var(--s2);border-bottom:1px solid var(--line)}
.vs-hero .vs-han-line{
  font-family:var(--font-han);font-size:clamp(1.5rem,4vw,2.4rem);letter-spacing:.14em;
  line-height:1.7;color:var(--ink);margin:0 0 .6rem
}
.vs-hero .vs-en-line{
  font-family:var(--font-display);font-size:clamp(1.1rem,2.6vw,1.5rem);font-style:italic;
  color:var(--ink-soft);max-width:36ch;margin:0 auto var(--s2);line-height:1.45
}
.vs-hero .vs-src{font-family:var(--font-ui);font-size:var(--fs-small);letter-spacing:.06em;color:var(--ink-faint)}
.vs-hero .vs-src b{color:var(--gold);font-weight:600}

/* Site statement block (home) */
.vs-statement{font-family:var(--font-display);font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.5;
  max-width:30ch;margin:0 auto var(--s3)}

/* ---------- 6. VERDICT BADGES (colour + dot + word = triple-encoded) ---------- */
.vs-badge{
  display:inline-flex;align-items:center;gap:.42em;font-family:var(--font-ui);
  font-size:var(--fs-tiny);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:.3em .85em;border-radius:999px;border:1.5px solid;white-space:nowrap;line-height:1.5
}
.vs-badge::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;flex:0 0 auto}
.vs-badge--authentic{color:var(--jade);border-color:var(--jade);background:color-mix(in srgb,var(--jade) 8%,transparent)}
.vs-badge--misattributed{color:var(--cinnabar);border-color:var(--cinnabar);background:color-mix(in srgb,var(--cinnabar) 8%,transparent)}
.vs-badge--paraphrased{color:var(--amber);border-color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.vs-badge--unverified{color:var(--ink-faint);border-color:var(--ink-faint);background:transparent}
.vs-badge--unverified::before{border-radius:50%;background:none;box-shadow:inset 0 0 0 1.5px currentColor}

/* Confidence marker, quiet on purpose */
.vs-confidence{font-family:var(--font-ui);font-size:var(--fs-tiny);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}

/* ---------- 7. THE GILDED ORIGINAL — site's most recognisable element ---------- */
.vs-original{
  border-left:3px solid var(--gold);background:var(--paper-2);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--s2) var(--s3);margin:var(--s3) 0
}
.vs-original .vs-original-label{
  font-family:var(--font-ui);font-size:var(--fs-tiny);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .55rem;font-weight:600
}
.vs-original .vs-han-line{
  font-family:var(--font-han);font-size:1.22rem;letter-spacing:.1em;line-height:1.95;
  margin:0 0 .5rem;color:var(--ink)
}
.vs-original .vs-translation{font-style:italic;color:var(--ink-soft);margin:0 0 .5rem}
.vs-original .vs-cite{font-family:var(--font-ui);font-size:var(--fs-small);color:var(--ink-faint);margin:0}
.vs-original .vs-cite a{color:var(--cinnabar)}

/* Vertical Han display, used sparingly for pillar openings */
.vs-vertical{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--font-han);
  letter-spacing:.18em;line-height:1.6;max-height:16em;margin:var(--s3) auto}

/* ---------- 8. QUOTE ENTRY ---------- */
.vs-claim{
  font-family:var(--font-display);font-size:clamp(1.25rem,2.6vw,1.65rem);font-style:italic;
  line-height:1.4;margin:0 0 var(--s2);color:var(--ink)
}
.vs-entry-head{border-bottom:1px solid var(--line);padding-bottom:var(--s3);margin-bottom:var(--s3)}
.vs-entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem var(--s2);
  font-family:var(--font-ui);font-size:var(--fs-small);color:var(--ink-faint);margin:0 0 var(--s2)}
.vs-entry-body h2{font-size:1.3rem;margin-top:var(--s4)}
.vs-verdict-line{font-size:1.05rem;color:var(--ink);margin:0 0 var(--s2)}

/* Source list */
.vs-sources{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s3);margin:var(--s4) 0}
.vs-sources h2,.vs-sources h3{margin:0 0 var(--s2);font-size:1.05rem;font-family:var(--font-ui);
  letter-spacing:.04em;text-transform:uppercase;font-size:var(--fs-tiny);color:var(--ink-faint);font-weight:600}
.vs-sources ol,.vs-sources ul{margin:0;padding-left:1.2em;font-size:var(--fs-small);font-family:var(--font-ui)}
.vs-sources li{margin-bottom:.5em;line-height:1.6}

/* Verified-by byline */
.vs-byline{display:flex;align-items:center;gap:.6rem;font-family:var(--font-ui);font-size:var(--fs-small);
  color:var(--ink-faint);border-top:1px solid var(--line);padding-top:var(--s2);margin-top:var(--s4)}
.vs-byline .vs-seal{width:30px;height:30px;flex:0 0 30px;font-size:15px;border-width:1.5px}

/* Correction notice */
.vs-correction{border-left:3px solid var(--cinnabar);background:color-mix(in srgb,var(--cinnabar) 5%,transparent);
  padding:var(--s2) var(--s3);border-radius:0 var(--radius) var(--radius) 0;margin:var(--s3) 0;font-size:var(--fs-small)}
.vs-correction strong{font-family:var(--font-ui);letter-spacing:.04em;text-transform:uppercase;
  font-size:var(--fs-tiny);color:var(--cinnabar);display:block;margin-bottom:.3rem}

/* ---------- 9. CARDS & GRIDS ---------- */
.vs-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.vs-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.vs-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s3);box-shadow:var(--shadow);
  transition:transform var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease),border-color var(--dur-micro)
}
.vs-card:hover{border-color:color-mix(in srgb,var(--cinnabar) 35%,var(--line))}
.vs-card h3{margin:.35rem 0 .5rem;font-size:1.08rem}
.vs-card h3 a{color:var(--ink)}
.vs-card h3 a:hover{color:var(--cinnabar)}
.vs-card p{font-size:var(--fs-small);color:var(--ink-soft);margin:0}
.vs-card .vs-han-line{font-family:var(--font-han);font-size:1.05rem;letter-spacing:.08em;
  color:var(--ink-soft);margin:.5rem 0 0}

/* Pillar links — the five columns of the hall */
.vs-pillars{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:var(--s4) 0}
.vs-pillar{border-top:2px solid var(--ink);padding-top:var(--s2)}
.vs-pillar :is(h2,h3){margin:0 0 .35rem;font-size:1.05rem}
.vs-pillar :is(h2,h3) a{color:var(--ink)}
.vs-pillar :is(h2,h3) a:hover{color:var(--cinnabar)}
.vs-pillar p{font-size:var(--fs-small);color:var(--ink-soft);margin:0}

/* Index list (hub pages) */
.vs-list{list-style:none;padding:0;margin:var(--s3) 0;border-top:1px solid var(--line)}
.vs-list li{border-bottom:1px solid var(--line);padding:var(--s2) 0;margin:0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem var(--s2)}
.vs-list .vs-list-title{font-family:var(--font-display);font-size:1.05rem;flex:1 1 18rem}
.vs-list .vs-list-title a{color:var(--ink)}
.vs-list .vs-list-title a:hover{color:var(--cinnabar)}

/* Filter bar */
.vs-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--s3) 0;font-family:var(--font-ui);font-size:var(--fs-small)}
.vs-filters a{border:1px solid var(--line);border-radius:999px;padding:.32em .95em;color:var(--ink-soft);background-image:none}
.vs-filters a:hover,.vs-filters a[aria-current="page"]{border-color:var(--cinnabar);color:var(--cinnabar)}

/* ---------- 10. BUTTONS — only two, ever ---------- */
.vs-btn{
  display:inline-block;font-family:var(--font-ui);font-weight:600;font-size:.95rem;
  padding:.7em 1.6em;border-radius:var(--radius);cursor:pointer;border:1.5px solid transparent;
  background-image:none;text-align:center;
  transition:transform var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease),background var(--dur-micro)
}
.vs-btn--primary{background:var(--cinnabar);color:#fff}
.vs-btn--primary:hover{background:var(--cinnabar-deep);transform:translateY(-1px);box-shadow:var(--shadow);color:#fff}
.vs-btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.vs-btn--ghost:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- 11. BREADCRUMBS & PAGINATION ---------- */
.vs-breadcrumbs{font-family:var(--font-ui);font-size:var(--fs-small);color:var(--ink-faint);margin:0 0 var(--s3)}
.vs-breadcrumbs a{color:var(--ink-soft)}
.vs-breadcrumbs a:hover{color:var(--cinnabar)}
.vs-breadcrumbs span[aria-hidden]{opacity:.5;padding:0 .4em}
.wp-block-query-pagination{font-family:var(--font-ui);font-size:var(--fs-small);margin-top:var(--s4);
  display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.wp-block-query-pagination-numbers .page-numbers{padding:.2em .55em;border-radius:4px}
.wp-block-query-pagination-numbers .current{background:var(--paper-2);color:var(--ink)}

/* ---------- 12. FOOTER ---------- */
.vs-footer{border-top:1px solid var(--line);background:var(--paper-2);margin-top:var(--s6);
  padding:var(--s5) 0 var(--s4);font-family:var(--font-ui);font-size:var(--fs-small)}
.vs-footer-inner{max-width:var(--wrap);margin-inline:auto;padding-inline:22px;
  display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.vs-footer h2{font-family:var(--font-ui);font-size:var(--fs-tiny);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 var(--s2);font-weight:600}
.vs-footer ul{list-style:none;padding:0;margin:0}
.vs-footer li{margin-bottom:.55em}
.vs-footer a{color:var(--ink-soft)}
.vs-footer a:hover{color:var(--cinnabar)}
.vs-footer-note{max-width:var(--wrap);margin:var(--s4) auto 0;padding:var(--s3) 22px 0;
  border-top:1px solid var(--line);color:var(--ink-faint);font-size:var(--fs-tiny);line-height:1.7}
.vs-footer-note .vs-han{font-size:.95rem}

/* ---------- 13. ADVERTISING SLOTS ----------
   Reserved space so late-loading ads never shift layout (CLS budget).
   Forbidden zones: hero, trust layer, product pages — enforced in templates. */
.vs-ad{margin:var(--s4) auto;text-align:center;overflow:hidden}
.vs-ad::before{content:"Advertisement";display:block;font-family:var(--font-ui);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.4rem}
.vs-ad--inline{min-height:280px}
.vs-ad--sidebar{min-height:250px;max-width:300px}
.vs-ad--end{min-height:280px;border-top:1px solid var(--line);padding-top:var(--s3)}
.vs-ad:empty::before{opacity:.45}

/* ---------- 14. MOTION — the whole animation system ---------- */
.vs-reveal{opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.vs-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .vs-reveal{opacity:1;transform:none}
}
/* JS-off safety: nothing stays hidden. */
.no-js .vs-reveal{opacity:1;transform:none}

/* ---------- 15. FORMS ---------- */
input[type=text],input[type=email],input[type=search],input[type=url],textarea,select{
  font-family:var(--font-ui);font-size:1rem;padding:.65em .8em;width:100%;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius)
}
label{font-family:var(--font-ui);font-size:var(--fs-small);font-weight:600;display:block;margin-bottom:.3em}
.wp-block-search__inside-wrapper{border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.wp-block-search__input{border:0;background:transparent}
.wp-block-search__button{background:var(--cinnabar);color:#fff;border:0;font-family:var(--font-ui);
  font-weight:600;border-radius:var(--radius);padding:.6em 1.2em;cursor:pointer}

/* ---------- 16. WORDPRESS BLOCK NORMALISATION ---------- */
.entry-content>*{margin-block:0 var(--s2)}
.entry-content>h2,.entry-content>h3{margin-block-start:var(--s4)}
.wp-block-image img{border-radius:var(--radius)}
.wp-block-separator{border-top:1px solid var(--line);border-bottom:0;max-width:6rem;margin-inline:0}
.wp-block-pullquote,.wp-block-quote{font-family:var(--font-display)}
/* Editor block styles — same components, reachable from the block sidebar */
.is-style-vs-original{border-left:3px solid var(--gold);background:var(--paper-2);
  padding:var(--s2) var(--s3);border-radius:0 var(--radius) var(--radius) 0;font-style:normal}
.is-style-vs-sources{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3)}
.is-style-vs-correction{border-left:3px solid var(--cinnabar);
  background:color-mix(in srgb,var(--cinnabar) 5%,transparent);
  padding:var(--s2) var(--s3);border-radius:0 var(--radius) var(--radius) 0;font-size:var(--fs-small)}
.is-style-vs-han{font-family:var(--font-han);font-size:1.22rem;letter-spacing:.1em;line-height:1.95}
.is-style-vs-claim{font-family:var(--font-display);font-size:clamp(1.25rem,2.6vw,1.65rem);
  font-style:italic;line-height:1.4}
.is-style-vs-eyebrow{font-family:var(--font-ui);font-size:var(--fs-tiny);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint)}
.wp-block-details{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s2) var(--s3);background:var(--card)}
.wp-block-details summary{font-family:var(--font-ui);font-weight:600;cursor:pointer}
.aligncenter{margin-inline:auto;text-align:center}
.alignwide{max-width:min(100%,1200px)}

/* ---------- 17. PRINT ---------- */
@media print{
  .vs-header,.vs-footer,.vs-ad,.vs-filters{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  a{color:#000;background:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ---------- 18. PLATES — public-domain artwork, always credited ---------- */
.vs-plate{margin:var(--s5) auto;max-width:640px}
.vs-plate--wide{max-width:900px}
.vs-plate-img{display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 1px 2px rgba(28,30,33,.10),0 12px 32px rgba(28,30,33,.10)}
.vs-plate-credit{font-family:var(--font-ui);font-size:var(--fs-tiny);line-height:1.6;
  color:var(--ink-faint);margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--line);
  max-width:46ch}
.vs-plate-credit a{color:var(--ink-faint);text-decoration:underline;text-underline-offset:2px}
.vs-plate-credit a:hover{color:var(--cinnabar)}
.vs-plate--center .vs-plate-credit{margin-inline:auto;text-align:center}

/* A plate used as a section opener: tall crop, quiet, never a hero. */
.vs-plate--band{max-width:none;margin-block:var(--s5) var(--s4)}
.vs-plate--band .vs-plate-img{max-height:340px;object-fit:cover;object-position:50% 22%;
  width:100%;border-radius:0}

/* ---------- 19. ORNAMENT — the 10% of Eastern accent, drawn in CSS ---------- */
/* Gilded rule: a hairline that thickens at the centre, like a scroll divider. */
.vs-rule{border:0;height:1px;margin:var(--s5) auto;max-width:min(100%,560px);
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--gold) 50%,var(--line) 88%,transparent);
  opacity:.75}
/* Section opener: eyebrow + hairline, used above every major block. */
.vs-section-head{display:flex;align-items:center;gap:var(--s2);margin:var(--s5) 0 var(--s3)}
.vs-section-head::after{content:"";flex:1;height:1px;background:var(--line)}
.vs-section-head h2{margin:0;white-space:nowrap}
/* Paper: a barely-there tooth so the background is not flat screen-white. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(circle at 17% 23%,rgba(140,106,29,.045) 0 1px,transparent 1px),
                   radial-gradient(circle at 71% 61%,rgba(28,30,33,.030) 0 1px,transparent 1px);
  background-size:37px 37px,53px 53px}
/* The header must sit above the page: its mobile menu is absolutely
   positioned and would otherwise be painted under <main>, which follows it
   in the document. */
.vs-footer,main{position:relative;z-index:1}
.vs-header{z-index:60}
@media print{body::before{display:none}}

/* Hero gets a seal watermark instead of a photograph: the LCP stays text. */
.vs-hero{position:relative;overflow:hidden}
.vs-hero::before{content:"";position:absolute;right:-40px;top:50%;translate:0 -50%;
  width:260px;height:260px;pointer-events:none;opacity:.05;
  background:url(/wp-content/uploads/2026/08/vermilionseal-logo-dao.png) center/contain no-repeat}
@media (max-width:860px){.vs-hero::before{display:none}}

/* Pillar cards gain a hairline seal mark on hover — the one playful moment. */
.vs-pillar{position:relative}
.vs-pillar :is(h2,h3) a::after{content:"→";margin-left:.4em;opacity:0;translate:-4px 0;
  display:inline-block;color:var(--cinnabar);
  transition:opacity var(--dur-micro) var(--ease),translate var(--dur-micro) var(--ease)}
.vs-pillar:hover :is(h2,h3) a::after{opacity:1;translate:0 0}

/* ---------- 20. PORTRAIT ----------
   The editor's photograph is set like a plate in a book: the prose runs
   beside it wherever there is room for a real column, and drops below it on
   a phone, where wrapping would leave three words to a line. The margins
   carry !important because WordPress's constrained layout forces auto
   margins on every child, which would centre the figure. */
.vs-portrait{max-width:170px;margin:.15rem auto 1.35rem 0 !important;clear:left}
.vs-portrait img{display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 1px 2px rgba(28,30,33,.10),0 10px 26px rgba(28,30,33,.10)}
.vs-portrait figcaption{margin-top:.7rem;padding-top:.55rem;
  border-top:1px solid var(--line);font-size:var(--fs-tiny);line-height:1.55;
  color:var(--ink-faint);max-width:22ch}

/* Float only once roughly 22em of text is left beside it. */
@media (min-width:620px){
  .vs-portrait{float:left;max-width:205px;margin:.4rem 1.9rem 1.2rem 0 !important}
}
@media (min-width:861px){
  .vs-portrait{max-width:250px;margin-right:2.4rem !important}
}
/* Whatever follows the photograph starts on a clean line, never wrapped
   into the gutter beside it. */
body:has(.vs-portrait) h2,
body:has(.vs-portrait) h3,
body:has(.vs-portrait) .vs-rule,
body:has(.vs-portrait) .vs-section-head{clear:both}

/* ---------- 21. THE TRUE SEAL ----------
   道 is the brand: the tradition this site is about.
   真 is the warranty: it appears only where a human has checked something. */
.vs-seal-true{width:34px;height:34px;flex:0 0 34px;display:block}
.vs-byline{align-items:flex-start}
.vs-byline .vs-seal-true{margin-top:.1rem}

/* Lede under the home statement: sets the subject before any method talk. */
.vs-lede{max-width:56ch;margin:0 auto;color:var(--ink-soft);font-size:1.08rem;line-height:1.72}
.vs-lede .vs-han{font-size:1.15em}

/* ---------- 22. ELSEWHERE IN THE LIBRARY ----------
   An archive with nothing published yet is a dead end for a reader and for a
   crawler. This block gives both somewhere to go. */
.vs-next{margin:var(--s5) 0 var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.vs-next h2{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  font-family:var(--font-ui);color:var(--ink-faint);margin:0 0 .7rem}
.vs-next p{margin:0 0 .5rem}
.vs-next a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line)}
.vs-next a:hover{color:var(--cinnabar);text-decoration-color:currentColor}
.vs-next-note{font-size:.9rem;color:var(--ink-soft)}