/* ============================================================
   ROOTWORTH — DESIGN SYSTEM  v1.0
   "Discern, then strike." (辨明)
   The lantern is diagnosis. The blade is treatment.
   Single source of truth — enqueue this once, site-wide.
   ============================================================ */

/* ---- 1. TOKENS ---------------------------------------------- */
:root{
  /* Palette — sumi ink ground, kozo parchment body, forest structure,
     jade for living growth, cinnabar as the seal/blade edge,
     lantern-gold reserved for light alone. */
  --sumi:      #16130f;   /* warm near-black ink */
  --sumi-soft: #221d17;   /* raised ink surface */
  --kozo:      #f3ead9;   /* mulberry-paper parchment */
  --kozo-deep: #e7d9c1;   /* parchment shadow */
  --forest:    #1d3a2b;   /* deep pine — brand monogram green */
  --forest-2:  #24402f;
  --jade:      #6f9d7c;   /* living celadon — roots, growth */
  --jade-dim:  #4d7860;
  --cinnabar:  #b8402a;   /* seal-red — the blade edge, used sparingly */
  --cinnabar-2:#9a3320;
  --lantern:   #d9a94e;   /* brass glow — the light, and nothing else */
  --patina:    #8a8a7a;   /* aged gray — the noise of the script */

  --ink-on-dark:  #ece3d2;
  --ink-muted:    #a99c84;
  --rule:         rgba(29,58,43,.22);
  --rule-dark:    rgba(236,227,210,.16);

  /* Type */
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cjk:   "Noto Serif SC", var(--serif);

  /* Scale (fluid) */
  --step--1: clamp(.82rem, .8rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .25vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.3rem + 1.1vw, 2.25rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-4:  clamp(2.9rem, 1.9rem + 4.6vw, 6rem);

  --measure: 64ch;
  --gap: clamp(1rem, .6rem + 1.6vw, 2rem);
  --bay: clamp(3rem, 2rem + 5vw, 7rem);   /* vertical section rhythm */
  --edge: clamp(1.15rem, .5rem + 3vw, 4rem); /* page side margin */
  --maxw: 1180px;
}

/* ---- 2. RESET / BASE ---------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--kozo); color:var(--sumi);
  font-family:var(--serif); font-size:var(--step-0);
  line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--cinnabar); color:var(--kozo)}
:focus-visible{outline:2px solid var(--cinnabar); outline-offset:3px}

h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.08;
  letter-spacing:-.012em; margin:0}
h1{font-size:var(--step-4); font-weight:300}
h2{font-size:var(--step-3); font-weight:300}
h3{font-size:var(--step-2)}
p{margin:0 0 1em; max-width:var(--measure)}

/* ---- 3. LAYOUT ---------------------------------------------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--edge)}
.bay{padding-block:var(--bay)}
.band-sumi{background:var(--sumi); color:var(--ink-on-dark)}
.band-forest{background:var(--forest); color:var(--ink-on-dark)}
.band-kozo{background:var(--kozo); color:var(--sumi)}
.band-sumi h1,.band-sumi h2,.band-forest h1,.band-forest h2{color:var(--kozo)}
.band-sumi .step h3,.band-forest .step h3{color:var(--lantern); font-weight:400}
.lede{font-size:var(--step-1); line-height:1.5; color:var(--sumi);
  max-width:54ch; font-weight:300}
.band-sumi .lede,.band-forest .lede{color:var(--ink-on-dark)}

/* ---- 4. EYEBROW + SEAL -------------------------------------- */
.eyebrow{font-family:var(--sans); text-transform:uppercase;
  letter-spacing:.2em; font-size:var(--step--1); font-weight:600;
  color:var(--cinnabar); display:inline-flex; align-items:center; gap:.6em}
.band-sumi .eyebrow,.band-forest .eyebrow{color:var(--lantern)}

.seal{display:inline-grid; place-items:center; width:1.7em; height:1.7em;
  background:var(--cinnabar); color:var(--kozo); font-family:var(--cjk);
  font-size:.9em; line-height:1; border-radius:1px; flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.seal--lg{width:3.2rem;height:3.2rem;font-size:1.7rem}

/* ---- 5. BLADE RULE (the recurring sword-stroke) ------------- */
.blade{position:relative; height:2px; border:0; margin:var(--bay) 0;
  background:linear-gradient(90deg, transparent, var(--cinnabar) 14%,
    var(--cinnabar) 86%, transparent); opacity:.9}
.blade::after{content:""; position:absolute; right:8%; top:50%;
  width:14px; height:14px; transform:translateY(-50%) rotate(45deg);
  background:var(--cinnabar)}
.blade--quiet{background:linear-gradient(90deg,transparent,var(--rule) 10%,
  var(--rule) 90%,transparent); height:1px}
.blade--quiet::after{display:none}
.band-sumi .blade--quiet,.band-forest .blade--quiet{
  background:linear-gradient(90deg,transparent,var(--rule-dark) 10%,var(--rule-dark) 90%,transparent)}

/* ---- 6. BUTTONS --------------------------------------------- */
.btn{display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-weight:600; font-size:var(--step--1);
  letter-spacing:.04em; text-decoration:none; padding:.9em 1.5em;
  border:1px solid transparent; cursor:pointer; border-radius:1px;
  position:relative; transition:transform .18s ease, background .18s ease}
.btn--primary{background:var(--sumi); color:var(--kozo)}
.btn--primary::after{content:""; position:absolute; left:1.5em; right:1.5em;
  bottom:.62em; height:1px; background:var(--cinnabar);
  transform:scaleX(.0); transform-origin:left; transition:transform .26s ease}
.btn--primary:hover::after{transform:scaleX(1)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent; color:inherit; border-color:var(--jade-dim)}
.btn--ghost:hover{border-color:var(--cinnabar); color:var(--cinnabar)}
.band-sumi .btn--ghost,.band-forest .btn--ghost{border-color:var(--rule-dark)}
.band-sumi .btn--ghost:hover{border-color:var(--lantern); color:var(--lantern)}
.btn--light{background:var(--kozo); color:var(--sumi)}

/* ---- 7. LANTERN CARD ---------------------------------------- */
.card{position:relative; background:var(--kozo); border:1px solid var(--rule);
  padding:clamp(1.4rem,1rem+1.5vw,2.2rem); border-radius:1px; overflow:hidden;
  transition:border-color .25s ease, transform .25s ease}
.card::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(220px 200px at var(--mx,50%) var(--my,0%),
    rgba(217,169,78,.16), transparent 70%); opacity:0; transition:opacity .3s ease}
.card:hover{border-color:var(--jade-dim); transform:translateY(-2px)}
.card:hover::before{opacity:1}
.card .seal{margin-bottom:1rem}
.card h3{font-size:var(--step-1); margin-bottom:.4rem}
.card p{font-size:var(--step--1); color:#5a5345; margin:0}
.card__index{font-family:var(--mono); font-size:var(--step--1);
  color:var(--jade-dim); letter-spacing:.05em}
.grid{display:grid; gap:var(--gap)}
@media(min-width:680px){.grid--2{grid-template-columns:1fr 1fr}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid--4{grid-template-columns:repeat(4,1fr)}}

/* ---- 8. CREED LEDGER (numbered classical catechism) --------- */
.ledger{list-style:none; margin:0; padding:0; counter-reset:creed;
  max-width:46ch}
.ledger li{counter-increment:creed; display:flex; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--rule-dark);
  font-family:var(--serif); font-size:var(--step-1); font-weight:300}
.ledger li::before{content:counter(creed,decimal-leading-zero);
  font-family:var(--mono); font-size:.7em; color:var(--lantern);
  padding-top:.35em; flex:0 0 auto}
.band-kozo .ledger li{border-color:var(--rule)}
.band-kozo .ledger li::before{color:var(--cinnabar)}

/* ---- 9. WATERMARK GLYPH ------------------------------------- */
.watermark{position:absolute; font-family:var(--cjk); font-weight:700;
  color:currentColor; opacity:.04; line-height:.8; pointer-events:none;
  user-select:none; font-size:min(46vw,40rem); z-index:0}
.watermark--tr{top:-.1em; right:-.06em}
.watermark--bl{bottom:-.2em; left:-.05em}
.rel{position:relative; z-index:1}

/* ---- 10. CLINICAL CAPTION (mono register) ------------------- */
.mono{font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.02em; color:var(--jade-dim)}
.formula{font-family:var(--mono); color:var(--cinnabar);
  letter-spacing:.01em; font-size:.95em}

/* ---- 11. NAV ------------------------------------------------ */
.nav{position:sticky; top:0; z-index:50; background:rgba(22,19,15,.93);
  backdrop-filter:saturate(120%) blur(8px); color:var(--ink-on-dark);
  border-bottom:1px solid var(--rule-dark)}
.nav__in{display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem var(--edge); max-width:var(--maxw); margin-inline:auto}
.nav__brand{display:flex; align-items:center; gap:.6rem; text-decoration:none;
  color:var(--kozo); font-family:var(--serif); font-size:1.15rem; letter-spacing:.02em}
.nav__links{display:none; gap:1.6rem; font-family:var(--sans);
  font-size:var(--step--1); letter-spacing:.03em}
.nav__links a{text-decoration:none; color:var(--ink-muted); padding:.3em 0;
  border-bottom:1px solid transparent; transition:color .2s,border-color .2s}
.nav__links a:hover{color:var(--lantern); border-color:var(--lantern)}
@media(min-width:920px){.nav__links{display:flex}}

/* ---- 11b. CONDITIONS DROPDOWN ------------------------------- */
.nav__item--menu{position:relative; display:flex; align-items:center}
/* trigger inherits .nav__links a styles; just keep it flex for the caret */
.nav__item--menu>a{display:flex; align-items:center; gap:.28em}

/* ---- top-level panel ---------------------------------------- */
/* top:100% = flush to trigger (no dead gap); padding-top is the
   visual breathing room. Closing transitions delay .18s so diagonal
   mouse travel doesn't snap the menu shut. */
.nav__menu{position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(-5px);
  min-width:230px; background:var(--sumi-soft);
  border:1px solid var(--rule-dark); border-radius:2px;
  padding:.55rem 0 .45rem;
  max-height:min(72vh,32rem); overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--rule-dark) transparent;
  opacity:0; pointer-events:none; visibility:hidden;
  /* closing: delay before fade, visibility off after full duration */
  transition:opacity .16s ease .18s, transform .16s ease .18s, visibility 0s linear .34s;
  z-index:99}
/* opening: immediate — no delay */
.nav__item--menu:hover .nav__menu,
.nav__item--menu:focus-within .nav__menu{
  opacity:1; pointer-events:auto; visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:opacity .16s ease, transform .16s ease}

/* ---- category group rows ------------------------------------ */
.nav__group{position:relative; display:block}
.nav__group-trigger{
  display:flex!important; align-items:center; justify-content:space-between;
  padding:.5rem 1.25rem; gap:.5em;
  border-bottom:none!important; color:var(--ink-muted)!important;
  font-family:var(--sans); font-size:var(--step--1); white-space:nowrap;
  transition:color .13s ease, background .13s ease, transform .12s ease;
  transform-origin:left center}
/* gentle scale only on category rows — full genie would shift flyout origin */
.nav__group-trigger:hover,.nav__group-trigger:focus{
  color:var(--lantern)!important; background:rgba(217,169,78,.07); transform:scale(1.04)}

/* ---- flyout submenu panel ----------------------------------- */
.nav__submenu{
  position:absolute; left:100%; top:-.45rem;
  min-width:260px; background:var(--sumi-soft);
  border:1px solid var(--rule-dark); border-radius:2px; padding:.4rem 0;
  max-height:min(72vh,32rem);
  overflow-x:clip; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--rule-dark) transparent;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .16s ease .18s, visibility 0s linear .34s;
  z-index:100}
.nav__group:hover .nav__submenu,
.nav__group:focus-within .nav__submenu{
  opacity:1; pointer-events:auto; visibility:visible;
  transition:opacity .14s ease}

/* ---- submenu leaf links (base styles) ----------------------- */
.nav__submenu a{display:block; padding:.5rem 1.4rem;
  border-bottom:none!important; color:var(--ink-muted)!important;
  font-family:var(--sans); font-size:var(--step--1); white-space:nowrap;
  transition:color .13s ease, background .13s ease}
.nav__submenu a:hover,.nav__submenu a:focus{
  color:var(--lantern)!important; background:rgba(217,169,78,.07)}

/* ---- genie dock magnify on submenu leaves (desktop) --------- */
/* Ported from rw-motion.css §"Dropdown dock / genie magnification".
   overflow-x:clip on the panel keeps scaled items from spilling right. */
@media(min-width:922px){
  .nav__submenu a{
    transition:transform .2s cubic-bezier(.22,.61,.36,1),
      opacity .2s ease, color .13s ease, background-color .2s ease;
    transform-origin:left center;
    font-size:.82em; padding-top:.32rem; padding-bottom:.32rem; line-height:1.2}
  .nav__submenu:hover a{opacity:.4; transform:scale(.82)}
  .nav__submenu a:hover,.nav__submenu a:focus{
    opacity:1!important; transform:scale(1.2)!important;
    font-weight:600; color:var(--lantern)!important; background:rgba(217,169,78,.07)}
  .nav__submenu a:hover+a,
  .nav__submenu a:has(+a:hover){opacity:.75!important; transform:scale(1.1)!important}
}

/* ---- direct panel links (e.g. "All conditions") ------------- */
.nav__menu>a{display:block; padding:.5rem 1.25rem;
  border-bottom:none!important; color:var(--ink-muted)!important;
  font-family:var(--sans); font-size:var(--step--1);
  white-space:nowrap; transition:color .13s ease, background .13s ease}
.nav__menu>a:hover,.nav__menu>a:focus{
  color:var(--lantern)!important; background:rgba(217,169,78,.07)}

/* "All conditions" divider row */
.nav__menu-all{border-top:1px solid var(--rule-dark);
  margin-top:.35rem; padding-top:.65rem!important;
  font-style:italic; opacity:.7}
.nav__menu-all:hover,.nav__menu-all:focus{opacity:1}

/* reduced motion — kill all transforms + delays */
@media(prefers-reduced-motion:reduce){
  .nav__menu,.nav__submenu,.nav__group-trigger{transition:none!important}
  .nav__submenu a{
    transform:none!important; opacity:1!important;
    transition:color .13s ease, background .13s ease!important}
}

/* ---- 12. FOOTER --------------------------------------------- */
.foot{background:var(--sumi); color:var(--ink-muted);
  font-family:var(--sans); font-size:var(--step--1); padding:var(--bay) 0 2.5rem}
.foot a{color:var(--ink-on-dark); text-decoration:none}
.foot a:hover{color:var(--lantern)}
.foot__grid{display:grid; gap:2rem; grid-template-columns:1fr}
@media(min-width:760px){.foot__grid{grid-template-columns:2fr 1fr 1fr}}
.foot__creed{font-family:var(--serif); font-size:var(--step-1);
  color:var(--ink-on-dark); font-weight:300; max-width:24ch}

/* ---- 13. HERO / DISCERNMENT --------------------------------- */
.hero{position:relative; background:var(--sumi); color:var(--ink-on-dark);
  overflow:hidden; isolation:isolate}
.stage{position:relative; min-height:clamp(440px,72vh,720px);
  display:grid; place-items:center; cursor:crosshair}
.stage__noise{position:absolute; inset:0; z-index:1}
.stage__noise span{position:absolute; font-family:var(--mono);
  font-size:var(--step--1); color:var(--patina); opacity:.42;
  white-space:nowrap; transition:opacity .25s ease}
.lanternlight{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(260px 260px at var(--lx,50%) var(--ly,50%),
    rgba(217,169,78,.20), rgba(217,169,78,.05) 45%, transparent 66%);
  mix-blend-mode:screen}
.stage__truth{position:relative; z-index:3; text-align:center;
  max-width:34ch; padding:var(--edge);
  -webkit-mask:radial-gradient(240px 240px at var(--lx,50%) var(--ly,50%),
    #000 38%, transparent 70%);
  mask:radial-gradient(240px 240px at var(--lx,50%) var(--ly,50%),
    #000 38%, transparent 70%)}
.stage__truth .pattern{font-family:var(--cjk); font-size:var(--step-3);
  color:var(--jade); margin-bottom:.2em}
.stage__truth .name{font-family:var(--mono); color:var(--lantern);
  font-size:var(--step-0); letter-spacing:.04em}
.stage__hint{position:absolute; left:0; right:0; bottom:1.1rem; z-index:4;
  text-align:center; font-family:var(--sans); font-size:var(--step--1);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted);
  pointer-events:none}
.hero__copy{position:relative; z-index:3; padding-block:var(--bay)}

/* the blade strike that resolves the knot */
.strike{stroke:var(--cinnabar); stroke-width:2.5; fill:none;
  stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1}
/* after it forms, the blade flares and dissipates — leaves no hard line */
@keyframes strike-dissipate{
  0%   {opacity:1; filter:drop-shadow(0 0 0 rgba(184,64,42,0))}
  26%  {opacity:1; filter:drop-shadow(0 0 9px rgba(184,64,42,.95))}
  100% {opacity:0; filter:drop-shadow(0 0 20px rgba(184,64,42,0))}
}
.strike.spent{animation:strike-dissipate 1.05s cubic-bezier(.33,0,.2,1) .3s forwards}

/* interior page hero slash — static decorative cut, already lit */
.hero-slash{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.6}
.page-hero{position:relative;overflow:hidden}
.page-hero>.wrap{position:relative;z-index:1}

/* ---- 14. PROCESS STEPS (discern → strike) ------------------- */
.steps{counter-reset:step; display:grid; gap:var(--gap)}
.step{position:relative; padding-left:3.4rem}
.step::before{counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:.1em; font-family:var(--mono);
  color:var(--cinnabar); font-size:var(--step-0)}
.step h3{margin-bottom:.3rem; font-size:var(--step-1)}
.step p{color:#5a5345; font-size:var(--step--1)}
.band-sumi .step p,.band-forest .step p{color:var(--ink-muted)}

/* ---- 15. UTILITIES ------------------------------------------ */
.center{text-align:center}
.stack>*+*{margin-top:1.1rem}
.cluster{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}
.maxw-prose{max-width:62ch}
.cjk{font-family:var(--cjk)}
.tag{font-family:var(--sans); font-size:var(--step--1); letter-spacing:.04em;
  border:1px solid var(--rule); padding:.3em .8em; border-radius:1px;
  color:#5a5345; text-decoration:none}
.tag:hover{border-color:var(--cinnabar); color:var(--cinnabar)}

/* ---- 16. MOTION GUARDS -------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .stage__truth,.lanternlight{--lx:50%; --ly:46%}
  .strike{stroke-dashoffset:0; opacity:0}
}

/* ---- 17. READER (chambers / long-form) ---------------------- */
.reader{max-width:70ch; margin-inline:auto}
.reader>p{font-size:var(--step-0); margin:0 0 1.1em}
.reader h2{font-size:var(--step-2); margin:1.8em 0 .4em; font-weight:300}
.reader h3{font-size:var(--step-1); margin:1.5em 0 .3em}
.chap-numeral{font-family:var(--mono); color:var(--cinnabar);
  letter-spacing:.22em; font-size:var(--step--1)}
.pull{border-left:2px solid var(--cinnabar); padding:.1em 0 .1em 1.3rem;
  margin:2rem 0; font-family:var(--serif); font-weight:300; color:var(--forest);
  font-size:var(--step-2); line-height:1.2; max-width:none}
.band-sumi .pull,.band-forest .pull{color:var(--lantern); border-color:var(--lantern)}
.chapnav{display:flex; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--rule); margin-top:var(--bay); padding-top:1.3rem;
  font-family:var(--sans); font-size:var(--step--1)}
.chapnav a{text-decoration:none; color:#5a5345}
.chapnav a:hover{color:var(--cinnabar)}
.chapnav .lbl{display:block; letter-spacing:.14em; text-transform:uppercase;
  font-size:.72em; color:var(--jade-dim); margin-bottom:.2em}

/* ---- 18. DEPTH FIGURE (the layers of disease) --------------- */
.depthfig{display:grid; gap:3rem; align-items:center; grid-template-columns:1fr}
@media(min-width:780px){.depthfig{grid-template-columns:minmax(0,320px) 1fr}}
.depthfig svg{width:100%; height:auto}
.depth-band{font-family:var(--mono); font-size:var(--step--1)}

/* ---- 19. FEATURE LIST --------------------------------------- */
.flist{list-style:none; margin:0; padding:0; max-width:60ch}
.flist li{display:flex; gap:.9rem; padding:1.1rem 0;
  border-bottom:1px solid var(--rule); font-size:var(--step-0)}
.band-sumi .flist li,.band-forest .flist li{border-color:var(--rule-dark)}
.flist li::before{content:""; flex:0 0 auto; width:9px; height:9px;
  margin-top:.55em; transform:rotate(45deg); background:var(--cinnabar)}

/* ---- 11c. ORIGINAL-PAGE CONTENT GUTTER ----------------------
   Pre-rework canvas pages drop bare content blocks (.rw-prose, .rw-hero,
   .rw-chant, .rw-cta, .rw-section, wp-block-* etc.) straight into <body>
   with no wrapper. Give every such block the same centered, padded column
   the reworked .wrap uses, while leaving reworked full-bleed structural
   sections (.hero, .bay, .band-*, etc.) untouched.
   Exclusion list covers ALL top-level structural wrappers found on reworked
   pages (verified Jun 2026). ------------------------------------------- */
body.page-template-template-rw-canvas
  > :not(header):not(footer):not(.wrap):not(.hero):not(.bay):not(.page-hero):not([class*="band"]):not(#rw-radio):not(.ast-scroll-top-icon):not(.screen-reader-text):not(script):not(style):not(noscript):not(svg):not(audio):not(button) {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--edge);
  box-sizing: border-box;
}