/* ===== CRUXMS brand tokens (cruxms-brand skill, guidelines v1.0 §04/§05) ===== */
:root{
  --ink:#0E1B26;
  --orange:#DC4F26;      /* THE decisive point only — never bg/body/status */
  --orange-rev:#FF6A3C;  /* orange on dark ground */
  --stone:#6E7D89;
  --stone-rev:#8A98A4;
  --stone-body:#64737F; /* darkened Stone for readable body copy on Chalk — #6E7D89 is 3.91:1 on
    Chalk (fails WCAG AA 4.5:1 for normal text); this hits 4.5:1 exactly. Labels/captions/dividers
    stay on --stone per the brand spec's own intent (secondary, not primary reading copy). */
  --chalk:#F4F6F7;
  --white:#FFFFFF;
  --line:#DDE3E6;
  --line-dark:#243441;

  --f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --maxw:1080px;
  --gutter:clamp(16px,5vw,64px);
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--chalk);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3,p{margin:0}

/* ---- type roles ---- */
.label{font-family:var(--f-mono);font-weight:500;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--stone-body)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.display{font-family:var(--f-display);font-weight:700;letter-spacing:-.022em;line-height:1.05}
.h1{font-family:var(--f-display);font-weight:700;letter-spacing:-.012em;line-height:1.2}
.h2{font-family:var(--f-display);font-weight:600;letter-spacing:-.005em;line-height:1.3}
.lead{font-size:clamp(1.0625rem,2.2vw,1.25rem);line-height:1.55;color:var(--stone-body);max-width:46ch}
.cap{font-size:.8125rem;line-height:1.5;color:var(--stone-body)}

/* ---- keyboard focus (accessibility) ---- */
a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ===== shared layout ===== */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
section{scroll-margin-top:24px}

/* buttons: Ink or Chalk fills only — orange never a button background */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-body);font-weight:500;font-size:1rem;text-decoration:none;padding:.85em 1.5em;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s ease,border-color .15s ease}
.btn .arw{color:var(--orange);font-family:var(--f-mono);transition:transform .15s ease}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{background:var(--ink);color:var(--chalk)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-onink{background:var(--chalk);color:var(--ink)}
.btn-onink .arw{color:var(--orange-rev)}
.btn-onink:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost .arw{color:var(--orange)}
.btn-ghost:hover{border-color:var(--stone-body)}
.btn-ghost-onink{background:transparent;color:var(--chalk);border-color:var(--line-dark)}
.btn-ghost-onink .arw{color:var(--orange-rev)}
.btn-ghost-onink:hover{border-color:var(--stone-body)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.btn:disabled:hover{transform:none!important}
.btn .soon{font-family:var(--f-mono);font-size:.75em;font-weight:400;opacity:.85}

/* not-yet-live nav item — real disabled button, not a fake/dead link */
.topnav-todo{font-family:var(--f-body);font-size:.9375rem;color:var(--stone-rev);background:transparent;border:0;padding:0;cursor:not-allowed;opacity:.65}
.topnav-todo .soon{font-family:var(--f-mono);font-size:.75em}
.subhead .topnav-todo{color:var(--stone-body)}

/* ===== HERO (Ink ground) — homepage ===== */
.hero{background:var(--ink);color:var(--chalk);position:relative;overflow:hidden}
.hero .wrap{padding-block:clamp(48px,9vw,104px)}
.brandbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:22px 0}
.lock-h{height:88px;width:auto;display:block}
.topnav{display:flex;gap:26px;align-items:center}
.topnav a{font-size:.9375rem;color:var(--stone-rev);text-decoration:none}
.topnav a:hover{color:var(--chalk)}
.hero-eyebrow{color:var(--stone-rev)}
.hero h1{font-size:clamp(2.1rem,6vw,3.9rem);margin-top:.5em;max-width:16ch}
.hero h1 .accent{color:var(--orange-rev)}
.hero-sub{color:var(--stone-rev);font-size:clamp(1.0625rem,2.4vw,1.375rem);line-height:1.5;max-width:54ch;margin-top:1.1em}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2em}
/* faint diamond motif, decorative */
.hero .motif{position:absolute;right:-90px;top:50%;transform:translateY(-50%) rotate(45deg);width:340px;height:340px;border:1px solid var(--line-dark);border-radius:24px;pointer-events:none}
.hero .motif::after{content:"";position:absolute;inset:38% 38%;background:rgba(255,106,60,.09);border-radius:8px}

/* ===== band helpers ===== */
.band{padding-block:clamp(52px,8vw,88px)}
.band-chalk{background:var(--chalk)}
.band-white{background:var(--white);border-block:1px solid var(--line)}
.band-head{max-width:60ch}
.band-head h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin-top:.35em}
.band-head .lead{margin-top:.8em}

/* HOW — three proof columns */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.how-col h3{font-size:1.125rem;font-family:var(--f-display);font-weight:600;letter-spacing:-.005em;margin-bottom:.4em}
.how-col p{color:var(--stone-body);font-size:.9375rem;line-height:1.55}
.how-col .n{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--stone-body);display:block;padding-bottom:12px;margin-bottom:14px;border-bottom:2px solid var(--ink)}

/* THE DOOR — one prominent route */
.door-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white)}
.door-main{padding:clamp(28px,4vw,44px)}
.door-main h3{font-size:clamp(1.5rem,3vw,2rem);font-family:var(--f-display);font-weight:700;letter-spacing:-.012em;line-height:1.15;margin:.5em 0 .55em}
.door-main p{color:var(--stone-body);max-width:44ch;margin-bottom:1.6em}
.door-side{background:var(--ink);color:var(--chalk);padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.door-side .who{font-size:.9375rem;color:var(--stone-rev)}
.door-side .who strong{color:var(--chalk);font-weight:500}
.door-side .mk{width:40px;height:40px;margin-bottom:6px}

/* quiet product list — deliberately NOT doors */
.also{margin-top:40px}
.also .label{margin-bottom:18px}
.prodrow{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--f-mono);font-size:.8125rem;color:var(--stone-body);border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--white);text-decoration:none;display:inline-block}
.chip b{color:var(--ink);font-weight:500}
a.chip:hover{border-color:var(--stone-body);color:var(--ink)}

/* proof strip */
.proof{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:center}
.proof .stat{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;color:var(--ink)}
.proof .statlbl{color:var(--stone-body);font-size:.875rem;margin-top:.4em}
.proof-txt p{max-width:52ch;color:var(--ink)}
.proof-txt p .mut{color:var(--stone-body)}
.tenant-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stone-body);border:1px solid var(--line);border-radius:6px;padding:5px 10px;margin-bottom:16px}
.tenant-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--orange)}

/* ===== TEM page ===== */
.tem-hero{background:var(--chalk);border-bottom:1px solid var(--line)}
.tem-hero .wrap{padding-block:clamp(40px,7vw,84px)}
.tem-crumb{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone-body);padding-block:0}
.tem-crumb a{color:var(--stone-body);text-decoration:none}
.tem-crumb a:hover{color:var(--ink)}
.tem-crumb .sep{color:var(--line)}
.tem-crumb .here{color:var(--ink)}
.tem-hero h1{font-size:clamp(2rem,5.2vw,3.4rem);max-width:18ch;margin-top:.5em}
.tem-hero .lead{margin-top:1em;max-width:50ch;font-size:clamp(1.0625rem,2.2vw,1.3125rem)}
.tem-hero .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2em}

/* simple light header for the TEM page (not the dark homepage hero) */
.subhead{background:var(--white);border-bottom:1px solid var(--line)}
.subhead .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:18px}
.subhead .lock-h{filter:none}

.lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:44px}
.lane{background:var(--white);padding:26px 22px}
.lane .label{color:var(--stone-body);margin-bottom:12px}
.lane h3{font-size:1.0625rem;font-family:var(--f-display);font-weight:600;letter-spacing:-.005em;margin-bottom:.4em}
.lane p{font-size:.875rem;color:var(--stone-body);line-height:1.5}
.lanes-foot{display:flex;align-items:center;gap:10px;margin-top:22px;color:var(--stone-body);font-size:.9375rem}
.lanes-foot .dia{width:12px;height:12px;background:var(--orange);border-radius:2px;transform:rotate(45deg);flex:0 0 auto}
.lanes-foot strong{color:var(--ink);font-weight:500}

.sov{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:start}
.sov ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.sov li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.sov li .tick{width:20px;height:20px;flex:0 0 auto;margin-top:3px;color:var(--orange)}
.sov li p{font-size:.9375rem}
.sov li p b{font-weight:500}

/* CTA band */
.cta-band{background:var(--ink);color:var(--chalk)}
.cta-band .wrap{padding-block:clamp(48px,7vw,80px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.cta-band h2{font-size:clamp(1.7rem,4vw,2.6rem);max-width:20ch}
.cta-band .lead{color:var(--stone-rev);max-width:48ch;margin-inline:auto}
.cta-band .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ===== footer ===== */
footer{background:var(--ink);color:var(--stone-rev);border-top:1px solid var(--line-dark)}
footer .wrap{padding-block:44px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:start}
footer .lock-h{height:48px;margin-bottom:16px}
footer .philo{max-width:44ch;font-size:.9375rem;line-height:1.55}
footer .powered{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;color:var(--stone-rev)}
footer .flinks{display:flex;flex-direction:column;gap:10px}
footer .flinks a{color:var(--stone-rev);text-decoration:none;font-size:.9375rem}
footer .flinks a:hover{color:var(--chalk)}
footer .fnote{grid-column:1/-1;border-top:1px solid var(--line-dark);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.75rem}

@media (max-width:860px){
  .how-grid{grid-template-columns:1fr;gap:20px}
  .door-wrap{grid-template-columns:1fr}
  .lanes{grid-template-columns:1fr 1fr}
  .sov{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr;gap:18px}
  footer .wrap{grid-template-columns:1fr}
  .topnav{display:none}
}
@media (max-width:520px){
  .lanes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== v2 (2026-10-17): CRUXMS as philosophy, products as solutions. Tokens only. ===== */
:root{
  --shadow-1:0 1px 2px rgba(14,27,38,.06),0 2px 8px rgba(14,27,38,.05);
  --shadow-2:0 2px 4px rgba(14,27,38,.07),0 10px 24px rgba(14,27,38,.09);
  --ease:.22s ease;
}
.btn{transition:transform var(--ease),box-shadow var(--ease),background var(--ease),border-color var(--ease)}
.btn:hover{box-shadow:var(--shadow-1)}
.btn:active{transform:translateY(1px)!important;box-shadow:none}
.btn-sm{font-size:.875rem;padding:.55em 1.1em}
.topnav .btn-primary{color:var(--chalk)}
.topnav .btn-onink{color:var(--ink)}
.subhead .topnav a:not(.btn){color:var(--stone-body)}
.subhead .topnav a:not(.btn):hover{color:var(--ink)}
.hero .brandbar{padding-top:22px}
.hero h1{max-width:20ch}

/* Our approach — heading left, beliefs right (no numbering: order carries no meaning) */
.principles{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(28px,5vw,64px);align-items:start}
.principles .band-head{position:sticky;top:32px}
.principles .band-head h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin-top:.35em}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.plist li{padding:22px 0;border-top:1px solid var(--line)}
.plist li:first-child{border-top:2px solid var(--ink);padding-top:18px}
.plist h3{font-family:var(--f-display);font-weight:600;font-size:1.1875rem;letter-spacing:-.005em;margin-bottom:.35em}
.plist p{color:var(--stone-body);max-width:58ch}

/* Solution cards — elevation, not hairlines */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.sol-grid.four{grid-template-columns:repeat(2,1fr)}
.sol-card{display:flex;flex-direction:column;gap:10px;background:var(--white);border-radius:14px;padding:26px 24px 22px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-1);transition:transform var(--ease),box-shadow var(--ease)}
.sol-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.sol-card:active{transform:translateY(0)}
.sol-card:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.sol-card h3{font-family:var(--f-display);font-weight:700;font-size:1.5rem;letter-spacing:-.012em;line-height:1.15}
.sol-card p{color:var(--stone-body);font-size:.9375rem;line-height:1.55;flex:1}
.sol-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.sol-foot .arw{color:var(--orange);font-family:var(--f-mono);transition:transform var(--ease)}
.sol-card:hover .sol-foot .arw{transform:translateX(4px)}

/* stage label — Ink/Stone only (Crux Orange is never a status colour) */
.stage{display:inline-block;font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--chalk);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.sol-card .stage{background:var(--chalk)}
.tem-hero .stage{background:var(--white);vertical-align:middle;margin-left:4px}

/* solution page */
.eyebrow{margin-top:26px;color:var(--stone-body)}
.tem-hero h1{color:var(--ink)}
.wlist{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px}
.wlist li,.blist li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.wlist .tick{width:20px;height:20px;margin-top:3px;color:var(--orange)}
.sov .tick{width:20px;height:20px;flex:0 0 auto;margin-top:3px;color:var(--orange)}
.sol-proof{margin-top:28px;font-size:.9375rem;color:var(--ink);font-weight:500}
.building{margin-top:40px;padding:24px 26px;background:var(--white);border-radius:14px;box-shadow:var(--shadow-1)}
.blist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.blist p{color:var(--stone-body)}
.dia-o{width:10px;height:10px;border:1.5px solid var(--stone);border-radius:2px;transform:rotate(45deg);margin-top:8px}
.how-grid .how-col{border-top:2px solid var(--ink);padding-top:16px}
.more{margin-top:32px}
.more a{color:var(--ink);text-decoration:none;font-weight:500}
.more a .arw{color:var(--orange);font-family:var(--f-mono);display:inline-block;transition:transform var(--ease)}
.more a:hover .arw{transform:translateX(4px)}
.proof-h{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:.5em}
footer .philo a{color:var(--chalk);text-decoration:none}
footer .philo a:hover{text-decoration:underline}
.philo + .philo{margin-top:10px}

@media (max-width:860px){
  .topnav{display:flex}
  .topnav .hide-sm{display:none}
  .principles{grid-template-columns:1fr}
  .principles .band-head{position:static}
  .sol-grid{grid-template-columns:1fr 1fr}
  .wlist{grid-template-columns:1fr}
}
@media (max-width:560px){
  .sol-grid,.sol-grid.four{grid-template-columns:1fr}
  .lock-h{height:56px}
  .proof .stat{font-size:2.2rem}
}

/* ===== v3 (2026-10-17): product sales pages. Tokens only. ===== */
.sit li strong{font-family:var(--f-display);font-weight:600;color:var(--ink)}
.sit-intro{margin-top:1em;font-size:1rem}
.howgrid{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px}
.howgrid li{border-top:2px solid var(--ink);padding-top:16px}
.howgrid h3{font-family:var(--f-display);font-weight:600;font-size:1.1875rem;letter-spacing:-.005em;margin-bottom:.4em}
.howgrid p{color:var(--stone-body);max-width:52ch}
.closer-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.closer-grid h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:.35em 0 .7em}
.closer-body{font-size:1.0625rem;line-height:1.65;max-width:56ch}
.replaces{background:var(--chalk);border-radius:14px;padding:24px 26px;box-shadow:var(--shadow-1)}
.replaces p:last-child{margin-top:.6em;color:var(--ink)}
.band-white .replaces{background:var(--chalk)}
.wlist + .building,.band-head + .wlist{margin-top:24px}
.wlist + .band-head,.building + .band-head{margin-top:36px}
.wlist + .building{margin-top:32px}
.building + .building{margin-top:20px}
.proof-qa{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(28px,5vw,64px);align-items:start}
.proof-list p{margin-top:.9em;max-width:46ch}
.proof-list p:first-child{margin-top:0}
.qa{margin:0}
.qa div{padding:16px 0;border-top:1px solid var(--line)}
.qa div:first-child{border-top:2px solid var(--ink)}
.qa dt{font-family:var(--f-display);font-weight:600;font-size:1.0625rem;margin-bottom:.3em}
.qa dd{margin:0;color:var(--stone-body);max-width:56ch}
@media (max-width:860px){
  .howgrid,.closer-grid,.proof-qa{grid-template-columns:1fr}
}
/* section labels written as h2 keep the small label style inside .band-head */
.band-head h2.label,h2.label{font-family:var(--f-mono);font-weight:500;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;margin:0}
.proof-list p{font-size:1.125rem;line-height:1.55}

/* review fixes 2026-10-17: ticks are ink (orange is never a status colour); preview items read as softer; replaces box contrasts with its band */
.wlist .tick,.sov .tick{color:var(--ink)}
.wlist.prev .tick{color:var(--stone-body)}
.band-chalk .replaces{background:var(--white)}

/* ===== v4 homepage (2026-10-17): CRUXMS as a way of building ===== */
.problem{max-width:760px}
.problem h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin:.35em 0 .6em}
.problem .lead{max-width:60ch;color:var(--stone-body)}
.problem-line{font-family:var(--f-display);font-weight:700;font-size:clamp(1.2rem,2.6vw,1.6rem);letter-spacing:-.012em;margin-top:1.2em;color:var(--ink)}
.layers{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.layer{border-radius:12px;padding:18px 20px;box-shadow:var(--shadow-1)}
.layer h3{font-family:var(--f-display);font-weight:600;font-size:1.0625rem;margin-bottom:.25em}
.layer p{font-size:.875rem;line-height:1.5}
.layer-0{background:var(--ink);color:var(--chalk)}
.layer-0 p{color:var(--stone-rev)}
.layer-1{background:var(--white);margin-inline:14px}
.layer-1 p{color:var(--stone-body)}
.layer-2{background:var(--chalk);box-shadow:none;border:2px solid var(--ink);margin-inline:28px}
.layer-2 p{color:var(--stone-body)}
.name-band{max-width:760px}
.name-band h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin:.35em 0 .6em}
.name-band .lead{max-width:56ch}
@media (max-width:860px){.layer-1{margin-inline:10px}.layer-2{margin-inline:20px}}
/* keep the narrow reading blocks on the same left edge as every other section */
.wrap.problem,.wrap.name-band{max-width:var(--maxw)}
.problem > *,.name-band > *{max-width:760px}

/* ---- homepage v5: the journey picture (where you are -> AI does the steps -> where you need to be) ---- */
.problem .lead+.lead{margin-top:.9em}
.journey{list-style:none;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch;margin-top:40px;padding:0}
.jstep{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,28px)}
.jstep .label{display:block;margin-bottom:12px}
.jstep h3{font-family:var(--f-display);font-weight:600;font-size:1.1875rem;letter-spacing:-.005em;margin-bottom:.45em}
.jstep p{font-size:.9375rem;line-height:1.55;color:var(--stone-body)}
.jstep.jmid{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.jstep.jmid .label,.jstep.jmid p{color:var(--stone-rev)}
.jarw{align-self:center;font-family:var(--f-mono);font-size:1.25rem;color:var(--orange)}
.journey-note{margin-top:28px}
.journey-note.cap{margin-top:12px}
@media (max-width:860px){.journey{grid-template-columns:1fr}.jarw{justify-self:center;transform:rotate(90deg)}}
@media (max-width:600px){.hero .motif{display:none}}
/* the name is always written CruxMS, even inside labels set in capitals (avoids reading as "Cruxmas") */
.nm{text-transform:none;letter-spacing:.02em}