/* ============================================================
   Jiyū Jutsu — shared page refresh. Load AFTER the page's own <style>.
   Brings interior pages onto the same tokens + direction system as Home.
   Structure untouched — colour, nav and CTA treatment only.
   ============================================================ */
:root,html[data-dir="bw"]{--accent:#fff;--accent-ink:#000;--accent-soft:rgba(255,255,255,.5)}
html[data-dir="sumi"]{--accent:#c73e35;--accent-ink:#fff;--accent-soft:rgba(199,62,53,.45)}
html[data-dir="gold"]{--accent:#c9a86a;--accent-ink:#0a0a0a;--accent-soft:rgba(201,168,106,.45)}
html[data-dir="paper"]{--paper:#f4f1ea;--ink:#171512;--muted:rgba(23,21,18,.58);--faint:rgba(23,21,18,.2);--hair:rgba(23,21,18,.14);--accent:#b5372e;--accent-ink:#fff;--accent-soft:rgba(181,55,46,.4);--bw:grayscale(1) contrast(1.1) brightness(1.03)}
body{transition:background .5s ease,color .5s ease;text-wrap:pretty}
::selection{background:var(--accent);color:var(--accent-ink)}
a:hover{color:var(--accent)}

/* ---------- CTA on tokens ---------- */
.cta{min-height:52px;border:1px solid transparent}
.cta:active{transform:translateY(1px) scale(.985)}
.cta--outline{border-color:var(--accent-soft);color:var(--ink);background:transparent}
.cta--outline:hover{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.cta--solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cta--solid:hover{background:transparent;color:var(--accent)}
/* CTAs sitting on a dark photo keep white-on-photo treatment */
.hero .cta--outline{border-color:rgba(255,255,255,.55);color:#fff}
.hero .cta--outline:hover{border-color:#fff;background:#fff;color:#000}

/* ---------- nav: same behaviour as Home ---------- */
.nav{mix-blend-mode:normal;pointer-events:auto;color:#fff;background:transparent;border-bottom:1px solid transparent;transition:background .4s ease,color .4s ease,padding .4s ease,border-color .4s ease;gap:24px}
.nav.is-stuck{background:var(--paper);color:var(--ink);padding:14px 32px;border-bottom-color:var(--hair)}
.nav__brand .mark--dark{display:none}
html[data-dir="paper"] .nav.is-stuck .mark--light{display:none}
html[data-dir="paper"] .nav.is-stuck .mark--dark{display:block}
/* footer mark swaps for the light direction */
.ftr__mark .mark--dark{display:none}
html[data-dir="paper"] .ftr__mark .mark--light{display:none}
html[data-dir="paper"] .ftr__mark .mark--dark{display:block}
.nav__brand img.mark{width:30px;height:30px}
.nav__menu a:hover,.nav__menu a.is-active{color:var(--accent);opacity:1}
.nav__menu a.is-active{text-decoration-color:var(--accent)}
.nav__cta{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);padding:12px 22px;min-height:44px;display:inline-flex;align-items:center;letter-spacing:.24em;transition:background .3s ease,color .3s ease}
.nav__cta:hover{background:transparent;color:var(--accent)}
@media(max-width:980px){.nav__menu{display:none}.nav,.nav.is-stuck{padding:14px 20px}}

/* ---------- Rice Paper: remap the page's hardcoded light-on-dark values ---------- */
html[data-dir="paper"] .hero__eyebrow,html[data-dir="paper"] .hero__sub{color:rgba(255,255,255,.82)}
html[data-dir="paper"] .problem__body{color:var(--ink)}
html[data-dir="paper"] .phase__num{color:var(--muted)}
html[data-dir="paper"] .phase__body,html[data-dir="paper"] .apply__body,html[data-dir="paper"] .faq__a p{color:var(--muted)}
html[data-dir="paper"] .phase__pillars{color:var(--muted)}
html[data-dir="paper"] .coach__creds{color:var(--muted)}
html[data-dir="paper"] .coach__quote{color:var(--ink);border-left-color:var(--accent)}
html[data-dir="paper"] .faq__plus::before,html[data-dir="paper"] .faq__plus::after{background:var(--ink)}
html[data-dir="paper"] .faq__item.is-open .faq__plus{border-color:var(--accent)}
html[data-dir="paper"] .ftr__nav a{color:var(--muted)}
html[data-dir="paper"] .ftr__nav a:hover{color:var(--accent)}
html[data-dir="paper"] .ftr__copy{color:var(--faint)}
/* About page, Rice Paper */
html[data-dir="paper"] .origin__prose{color:var(--ink)}
html[data-dir="paper"] .origin__prose .lift{color:var(--accent)}
html[data-dir="paper"] .pillar-row__num{color:var(--muted)}
html[data-dir="paper"] .pillar-row__kanji{color:var(--muted)}
html[data-dir="paper"] .pillar-row__body{color:var(--muted)}
html[data-dir="paper"] .ftr__nav a{color:var(--muted)}
html[data-dir="paper"] .ftr__nav a:hover{color:var(--accent)}
html[data-dir="paper"] .ftr__copy{color:var(--faint)}
/* hero and CTA band sit on dark photos in every direction — keep them light */
html[data-dir="paper"] .hero__inner,html[data-dir="paper"] .cta-band__inner{color:#fff}
html[data-dir="paper"] .cta-band__title{color:#fff}

/* accent the eyebrows so the direction actually reads */
.eyebrow--accent{color:var(--accent)}

/* ---------- direction switcher (REVIEW ONLY — delete before launch) ---------- */
.dirpick{position:fixed;bottom:16px;left:16px;z-index:90;display:flex;flex-direction:column;align-items:center;gap:7px;padding:9px 7px;border-radius:999px;background:rgba(18,18,18,.94);border:1px solid rgba(255,255,255,.14);font-family:var(--sans)}
html[data-dir="paper"] .dirpick{background:rgba(255,255,255,.94);border-color:rgba(0,0,0,.14)}
.dirpick__lbl{display:none}
html[data-dir="paper"] .dirpick__lbl{color:rgba(0,0,0,.45)}
.dirpick button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.22);position:relative}
html[data-dir="paper"] .dirpick button{border-color:rgba(0,0,0,.18)}
.dirpick button i{position:absolute;inset:4px;border-radius:50%}
.dirpick button[aria-pressed="true"]{outline:1.5px solid #fff;outline-offset:2px}
html[data-dir="paper"] .dirpick button[aria-pressed="true"]{outline-color:#171512}
@media(max-width:600px){.dirpick{bottom:10px;left:10px;padding:7px 5px}.dirpick button{width:28px;height:28px}}