/* Base theme: structure only. No colours beyond currentColor, no fonts.
   Site styles load after this file in @layer site and win over @layer engine. */
@layer engine, site;

@layer engine {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; line-height: 1.6; }
  img, video, svg { max-width: 100%; height: auto; }

  .skip-link { position: absolute; left: -9999px; top: 0; }
  .skip-link:focus { left: 1rem; top: 1rem; z-index: 10; }
  :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

  .site-header, .site-footer, main { padding-inline: 1rem; }
  .site-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: space-between; padding-block: 1rem; }
  .site-header__nav, .site-footer__nav { display: flex; flex-wrap: wrap; gap: 1rem; }
  .site-footer { padding-block: 2rem; }

  .article, .post-index { max-width: 72rem; margin-inline: auto; }
  .article__main, .post-index { max-width: 42rem; min-width: 0; }
  .prose { overflow-wrap: break-word; }
  .article--toc { display: grid; gap: 2rem; }
  @media (min-width: 64rem) {
    .article--toc { grid-template-columns: minmax(0, 42rem) 16rem; }
    .toc-rail { position: sticky; top: 1rem; align-self: start; }
  }

  .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
  .breadcrumb li + li::before { content: "/"; margin-inline-end: 0.5rem; }

  .table-scroll { overflow-x: auto; }
  .table-scroll table { border-collapse: collapse; }
  .table-scroll th, .table-scroll td { border: 1px solid currentColor; padding: 0.25rem 0.5rem; text-align: left; }

  figure { margin-inline: 0; }
  .diagram { margin-block: 1.5rem; }
  .diagram img, .diagram svg { display: block; width: 100%; }

  .post-list, .related__list { list-style: none; padding: 0; }
  .post-list__item, .related__item { margin-block: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  @layer engine {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}

/* site.css */
@layer site {
/* ============================================================
   Self-hosted fonts (Google Fonts -> local woff2, latin + latin-ext).
   Variable-font files: one woff2 per family+subset covers every weight.
   Subsets limited to latin + latin-ext (EN + FR accents). font-display: swap.
   ============================================================ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cinzel (headings) + Cormorant Garamond (eyebrows/labels). Each woff2 already
   bundles latin + latin-ext, so one file covers both subsets per weight. */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cinzel-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cinzel-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/cinzel-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- METRIC-ADJUSTED FALLBACKS (kill font-swap CLS) ----
   Each fallback is a local system font re-scaled (size-adjust + ascent/descent/
   line-gap overrides) to occupy the SAME box as its web font, so the swap from
   fallback -> web font shifts nothing. Numbers derived from the real font files
   (Fontaine/next-font method). Slotted right after the web font in each stack. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Roboto"), local("Helvetica Neue");
  /* 108% = in-browser calibrated Inter/Arial width ratio; zeroes line-wrap reflow
     on both index cards and article body (pure-metric 107.34% ran a hair narrow). */
  size-adjust: 108%;
  ascent-override: 89.7%;
  descent-override: 22.33%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cinzel Fallback";
  src: local("Times New Roman"), local("Times"), local("Noto Serif");
  /* size-adjust calibrated in-browser: Cinzel is all-caps (lowercase -> small-caps),
     so its true rendered width can't be read from lowercase glyph metrics. 132% is
     the measured Cinzel/Times width ratio that reproduces real Cinzel line-wrapping. */
  size-adjust: 132%;
  ascent-override: 73.94%;
  descent-override: 28.18%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Garamond Fallback";
  src: local("Times New Roman"), local("Times"), local("Noto Serif");
  size-adjust: 97.62%;
  ascent-override: 94.65%;
  descent-override: 29.4%;
  line-gap-override: 0%;
}

/* ============================================================
   Myriapath - site.css
   "Reference Desk" layout in the current brand: tokens, base type
   and the shared chrome (header, menu drawer, footer). Mobile-first:
   base at ~390px, min-width breakpoints at 720, 960 and 1100.
   Bundled in @layer site, before the page-scoped tool stylesheets.
   ============================================================ */

/* ---- TOKENS ---- */
:root {
  --bg: #FAF6EC;          /* cream page */
  --ink: #14110A;         /* body text */
  --navy: #22304F;        /* header, hero band, links, headings */
  --navy-2: #2D3D60;      /* raised cards on navy */
  --navy-deep: #1A2540;   /* footer */
  --mist: #F0E9D8;        /* warm panels */
  --white: #FFFFFF;       /* cards */
  --gold: #C2A23B;        /* ornament, icons and labels on navy, focus ring */
  --wax: #7A5C16;         /* gold for text on cream */
  --line: #E3D9C4;        /* hairlines */
  --muted: #5C5443;       /* secondary text */
  --on-navy: #E4DDCB;     /* body text on navy */
  --font-display: "Cinzel", "Cinzel Fallback", Georgia, serif;
  --font-serif: "Cormorant Garamond", "Cormorant Garamond Fallback", Georgia, serif;
  --font-text: "Inter", "Inter Fallback", system-ui, sans-serif;
  --gutter: 20px;

  /* Legacy names the tool stylesheets (assets/tools/*.css) read. --text is a
     colour there, so the font stacks above use --font-* names. */
  --text: var(--ink);
  --surface: var(--white);
  --surface-2: var(--mist);
  --accent: var(--navy);
  --accent-2: var(--gold);
  --accent-2-text: var(--wax);
  --border: rgba(20, 15, 8, .10);
  --border-2: rgba(20, 15, 8, .18);
  --heading-grad: linear-gradient(120deg, #22304F, #3A5078);
  --heading-glow: none;
  --ad-bg: rgba(20, 15, 8, .02);
  --ad-border: rgba(20, 15, 8, .18);
  --maxw: 1200px;
  --radius: 14px;
  --radius-lg: 16px;
}

/* ---- BASE ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font-text); }
img, svg { max-width: 100%; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wax); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; letter-spacing: .01em; margin: 0; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
main { padding-inline: var(--gutter); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--white); color: var(--navy); padding: 8px 12px; z-index: 10; }
.skip-link:focus { left: 8px; }

/* ---- HEADER ---- */
.site-header { display: block; padding: 0; background: var(--navy); color: var(--white); position: relative; z-index: 5; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.site-header .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--white); text-decoration: none; font: 600 20px/1 var(--font-display); letter-spacing: .08em; }
.site-header .brand:hover { color: var(--white); text-decoration: none; }
.brand__mark { width: 22px; height: 22px; color: var(--gold); }
.nav-desktop { display: none; }
.menu { position: static; }
.menu summary { list-style: none; cursor: pointer; font: 600 15px/1 var(--font-text); color: var(--white); padding: 12px 14px; border: 1px solid rgba(255,255,255,.45); border-radius: 6px; min-height: 44px; display: flex; align-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--white); color: var(--navy); }
.menu__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); color: var(--ink); padding: 8px var(--gutter) 20px; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(20,27,45,.12); display: grid; }
.menu__panel a { padding: 10px 0; color: var(--navy); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--mist); }
.menu__panel a:hover { color: var(--wax); text-decoration: none; }
.menu__label { margin: 16px 0 2px; font-size: 14px; color: var(--muted); }
.menu__panel a.is-pending, .menu__panel a.is-pending:hover { color: var(--muted); font-weight: 400; cursor: default; }

/* ---- FOOTER ---- */
.site-footer { display: block; background: var(--navy-deep); color: var(--on-navy); padding: 36px 0 28px; margin-top: 24px; font-size: 15px; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--white); }
.site-footer :focus-visible { outline-color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.site-footer .footer-h { font: 700 14px/1.3 var(--font-text); letter-spacing: 0; color: var(--gold); margin: 0 0 8px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-block; padding: 5px 0; text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; color: var(--white); }
.site-footer li a.is-pending, .site-footer li a.is-pending:hover { color: var(--on-navy); opacity: .7; text-decoration: none; cursor: default; }
.footer-note { font-size: 13.5px; margin: 20px 0 0; max-width: 72ch; }
.site-footer .footer-byline { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 13.5px; margin: 20px 0 0; }
.footer-byline li { white-space: nowrap; }
.footer-byline li:not(:last-child)::after { content: "\00B7"; padding: 0 .5em; }
.site-footer .footer-byline li a { padding: 0; text-decoration: underline; }
.site-footer .footer-byline li a.is-pending { text-decoration: none; }

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 960px) {
  .nav-desktop { display: flex; gap: 28px; }
  .nav-desktop a { color: var(--white); text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 8px 0; }
  .nav-desktop a:hover { color: var(--gold); text-decoration: none; }
  .nav-desktop a.is-pending, .nav-desktop a.is-pending:hover { color: var(--on-navy); opacity: .7; cursor: default; }
  .menu { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
}

/* home.css */
@layer site {
/* ============================================================
   Myriapath - home.css
   Homepage sections 2-7 (hero and "Today on the wheel", question
   router, explore the craft, in season, book, author). Loaded on
   every page after site.css, so every rule is scoped to .home.
   Mobile-first: base at ~390px, min-width 720 and 960.
   ============================================================ */

/* The hero band runs full width: cancel main's gutter, .wrap restores it. */
.home { margin-inline: calc(-1 * var(--gutter)); }

/* Buttons */
.home .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 6px; font: 700 16px/1.2 var(--font-text); text-decoration: none; }
.home .btn--primary { background: var(--white); color: var(--navy); }
.home .btn--primary:hover { background: var(--mist); color: var(--navy); }
.home .btn--quiet { border: 1.5px solid var(--navy); color: var(--navy); background: transparent; }
.home .btn--quiet:hover { background: var(--navy); color: var(--white); }

/* Hero */
.home .hero { background: var(--navy); color: var(--white); padding: 28px 0 36px; }
.home .hero h1 { font-size: 34px; line-height: 1.12; max-width: 16ch; }
.home .lead { color: var(--on-navy); font-size: 18px; margin: 14px 0 22px; max-width: 46ch; }
.home .hero .btn { width: 100%; justify-content: center; }

/* Today on the wheel, inside the navy hero */
.home .hero__today { margin-top: 28px; }
.home .today-head { font: 700 15px/1.3 var(--font-text); color: var(--gold); margin: 0 0 10px; letter-spacing: 0; }
.home .today { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home .today__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 16px 14px; background: var(--navy-2); border-radius: 8px; text-decoration: none; color: var(--white); border: 1px solid rgba(255, 255, 255, .18); }
.home .today__item:hover { border-color: var(--gold); color: var(--white); }
.home .today__label { font-size: 14px; color: var(--on-navy); margin-top: 10px; }
.home .today__value { font: 600 24px/1.15 var(--font-serif); color: var(--white); }
.home .today__sub { font-size: 14px; color: var(--on-navy); }
.home .moon, .home .wheel { width: 36px; height: 36px; }
.home .moon__lit { fill: #F3E3BD; }
.home .moon__dark { fill: #16203A; }
.home .moon__ring { fill: none; stroke: var(--gold); stroke-width: 1.2; }
.home .wheel { fill: none; stroke: var(--gold); stroke-width: 1.3; }

/* Sections */
.home .section { padding-top: 36px; }
.home .h-section { font-size: 26px; margin-bottom: 14px; }

/* Question router */
.home .qlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.home .qlist a { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.home .qlist a::after { content: "\2192"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--wax); font-weight: 700; }
.home .qlist .q { font: 600 24px/1.2 var(--font-serif); color: var(--navy); }
.home .qlist .a { color: var(--muted); font-size: 15px; margin-top: 2px; }
.home .qlist a:hover .q { color: var(--wax); }

/* Explore the craft */
.home .index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.home .index__row { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
.home .index__name { font: 600 24px/1.2 var(--font-serif); color: var(--navy); }
.home a.index__name:hover { color: var(--wax); }
.home .index__sub { list-style: none; margin: 12px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home .index__sub a { display: inline-block; padding: 8px 12px; background: var(--mist); border-radius: 6px; color: var(--navy); text-decoration: none; font-size: 15px; font-weight: 600; }
.home .index__sub a:hover { background: var(--navy); color: var(--white); }

/* In season now */
.home .reads { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.home .reads a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.home .reads__t { display: block; font-weight: 700; color: var(--navy); line-height: 1.35; }
.home .reads__d { display: block; font-size: 15px; color: var(--muted); margin-top: 4px; }
.home .reads a:hover .reads__t { color: var(--wax); text-decoration: underline; }
.home .more { display: inline-block; margin-top: 14px; font-weight: 700; padding: 6px 0; }

/* Book: on mobile the text wraps around the floated cover */
.home .book { display: flow-root; padding: 22px 18px; border: 1px solid var(--line); border-radius: 8px; }
.home .book__cover { display: block; float: left; width: 88px; height: auto; aspect-ratio: 3 / 4; margin: 4px 16px 8px 0; border-radius: 2px 4px 4px 2px; box-shadow: 0 1px 2px rgba(20, 17, 10, .12), 0 6px 16px rgba(20, 17, 10, .14); }
.home .book__title { font-size: 20px; }
.home .book p { margin: 8px 0 14px; color: var(--muted); font-size: 16px; }
.home .book .btn { min-height: 44px; padding: 10px 14px; font-size: 15px; }

/* Author */
.home .author { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 0 0 48px; }
.home .author__mark { width: 52px; height: 52px; border-radius: 50%; background: var(--mist); color: var(--navy); display: grid; place-items: center; font: 600 20px/1 var(--font-display); border: 1px solid var(--line); }
.home .author__name { font: 600 26px/1.2 var(--font-serif); letter-spacing: 0; }
.home .author p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.home .author__links { font-weight: 600; }

@media (min-width: 720px) {
  .home .hero { padding: 56px 0 60px; }
  .home .hero h1 { font-size: 48px; }
  .home .lead { font-size: 20px; }
  .home .hero .btn { width: auto; }
  .home .book { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; padding: 28px; }
  .home .book__cover { float: none; width: 100%; margin: 0; }
}
@media (min-width: 960px) {
  .home .duo { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
  .home .duo--even { grid-template-columns: 1fr 1fr; }
  .home .section { padding-top: 56px; }
  .home .reads { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .home .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: end; }
  .home .hero h1 { font-size: 50px; max-width: 18ch; }
  .home .hero__today { margin-top: 0; }
  .home .h-section { font-size: 30px; }
  .home .today { grid-template-columns: 1fr; }
}
}

/* article.css */
@layer site {
/* ============================================================
   Myriapath - article.css
   Blog post template (D3): breadcrumbs, title and byline, "On this
   page" contents (inline box, sticky rail at >=1100px), prose, tables
   as stacked cards under 720px, diagrams, end CTA, related reading.
   Everything is scoped to .article--post (post.html) so pages and
   tools, which share .article and .prose, are left alone.
   Loaded unlayered after site.css; the engine base.css sits in
   @layer engine underneath. Mobile-first: base ~390px, then 720,
   960 and 1100.
   ============================================================ */

/* ---- FRAME ---- */
.article--post { max-width: calc(1160px - 2 * var(--gutter)); margin: 0 auto; padding-top: 16px; }
.article--post .article__main { max-width: none; }
.article--post.article--toc { display: block; }
.article--post .toc-rail { display: none; position: static; }

/* ---- BREADCRUMBS, TITLE, BYLINE ---- */
.article--post .breadcrumb { font-size: 14px; color: var(--muted); }
.article--post .breadcrumb ol { gap: 0; }
.article--post .breadcrumb li + li::before { content: "/"; margin: 0 .45em; color: var(--muted); }
.article--post .breadcrumb a { color: var(--muted); padding: 4px 0; display: inline-block; }
.article--post .breadcrumb a:hover { color: var(--wax); }
.article__title { font-size: 30px; line-height: 1.15; margin: 10px 0; }
.article--post .byline { font-size: 15px; color: var(--muted); margin: 0 0 20px; }
.article--post .byline a { color: var(--navy); font-weight: 600; }
.article--post .byline a:hover { color: var(--wax); }
.article--post .byline a.is-pending { color: var(--muted); font-weight: 400; text-decoration: none; cursor: default; }

/* ---- ON THIS PAGE ---- */
.toc--inline { margin: 20px 0 8px; border: 1px solid var(--line); border-radius: 8px; }
.toc--inline summary { cursor: pointer; padding: 14px 16px; font-weight: 700; color: var(--navy); display: flex; justify-content: space-between; align-items: center; min-height: 48px; list-style: none; }
.toc--inline summary::-webkit-details-marker { display: none; }
.toc .toc__list { margin: 0; padding: 0 16px 14px 36px; font-size: 15.5px; }
.toc li { padding: 5px 0; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc li::marker { color: var(--muted); }
.toc .toc__sublist { list-style: none; margin: 4px 0 0; padding: 0 0 0 .9em; font-size: .93em; }
.toc .toc__sublist li { padding: 3px 0; }

/* ---- PROSE ---- */
.article--post .prose { max-width: 68ch; margin-top: 28px; }
.article--post .prose p,
.article--post .prose li { font-size: 18px; line-height: 1.7; }
.article--post .prose p { margin: 0 0 1.05em; }
.article--post .prose h2 { font-size: 24px; margin: 1.7em 0 .5em; scroll-margin-top: 16px; }
.article--post .prose h3 { font-size: 20px; margin: 1.5em 0 .5em; scroll-margin-top: 16px; }
.article--post .prose > :first-child { margin-top: 0; }
.article--post .prose ul,
.article--post .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.article--post .prose ol { padding-left: 1.5em; }
.article--post .prose li { margin-bottom: .45em; }
.article--post .prose li::marker { color: var(--wax); }
.article--post .prose strong { color: var(--navy); }
/* Restates the base link style: tool-common.css (herb chart page only)
   drops underlines site-wide. Prose-level text only, not the chart mount. */
.article--post .prose > :is(p, ul, ol, blockquote, h2, h3) a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article--post .prose > :is(p, ul, ol, blockquote, h2, h3) a:hover { color: var(--wax); }
.article--post .prose blockquote { margin: 1.2em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--line); color: var(--muted); }
.article--post .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

/* Diagrams: full prose width with a caption. */
.article--post .prose figure { margin: 1.4em 0; }
.article--post .prose figure img { width: 100%; height: auto; display: block; }
.article--post .prose figcaption { font-size: 15px; color: var(--muted); margin-top: 8px; }

/* ---- TABLES ----
   Without article.js: a normal table that scrolls sideways in its
   .table-scroll wrapper. article.js labels the cells and adds
   .table--cards, which stacks each row as a card under 720px. */
.article--post .table-scroll { margin: 1.2em 0 1.6em; overflow-x: auto; }
.article--post .table-scroll table { width: 100%; border-collapse: collapse; font-size: 16px; }
.article--post .table-scroll th,
.article--post .table-scroll td { border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.45; }
.article--post .table-scroll th { font-size: 14px; background: var(--mist); color: var(--navy); }

.article--post .table--cards,
.article--post .table--cards tbody { display: block; }
.article--post .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.article--post .table--cards tr { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.article--post .table--cards td { display: grid; grid-template-columns: 38% 1fr; gap: 10px; padding: 5px 0; border: 0; }
.article--post .table--cards td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: 14px; }
.article--post .table--cards td:first-child { display: block; font-weight: 700; color: var(--navy); font-size: 17px; padding-bottom: 6px; border-bottom: 1px solid var(--mist); margin-bottom: 4px; }
.article--post .table--cards td:first-child::before { display: none; }

/* ---- END CTA (legacy render_cta, as a mist panel) ---- */
.post-cta { margin: 40px 0 0; padding: 24px 20px; background: var(--mist); border: 1px solid var(--line); border-radius: 8px; }
.post-cta__heading { font-size: 22px; margin: 0 0 8px; }
.post-cta__sub { margin: 0 0 16px; color: var(--muted); font-size: 16px; }
.post-cta .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 6px; font: 700 16px/1.2 var(--font-text); text-decoration: none; }
.post-cta .btn--quiet { border: 1.5px solid var(--navy); color: var(--navy); background: transparent; }
.post-cta .btn--quiet:hover { background: var(--navy); color: var(--white); }

/* ---- RELATED READING ---- */
.article--post .related { padding: 36px 0 24px; }
.related__heading { font-size: 26px; margin-bottom: 14px; }
.related .reads { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.related .reads a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.related .reads__t { display: block; font-weight: 700; color: var(--navy); line-height: 1.35; }
.related .reads__d { display: block; font-size: 15px; color: var(--muted); margin-top: 4px; }
.related .reads a:hover .reads__t { color: var(--wax); text-decoration: underline; }

@media (min-width: 720px) {
  .article__title { font-size: 42px; }
  .article--post .table--cards { display: table; }
  .article--post .table--cards tbody { display: table-row-group; }
  .article--post .table--cards thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .article--post .table--cards tr { display: table-row; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .article--post .table--cards td,
  .article--post .table--cards td:first-child { display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 16px; margin: 0; }
  .article--post .table--cards td::before { display: none; }
}
@media (min-width: 960px) {
  .related__heading { font-size: 30px; }
}
@media (min-width: 1100px) {
  .article--post.article--toc { display: grid; grid-template-columns: minmax(0, 720px) 260px; gap: 72px; justify-content: center; }
  .article--post .toc--inline { display: none; }
  .article--post .toc-rail { display: block; align-self: stretch; }
  /* Scrolls when the list is taller than the viewport; the side padding,
     offset by the negative margin, keeps two-digit markers unclipped. */
  .toc--rail { position: sticky; top: 24px; padding: 8px 0 0 12px; margin-left: -12px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .toc--rail::-webkit-scrollbar { display: none; }
  .toc__title { font-weight: 700; color: var(--navy); margin: 0 0 6px; }
  .toc--rail .toc__list { padding: 0 0 0 18px; font-size: 14.5px; line-height: 1.4; }
}
}

/* pages.css */
@layer site {
/* ============================================================
   Myriapath - pages.css
   D4 regression fixes for the page types D2/D3 do not cover: the
   blog index, the pages on the engine page.html (Witchcraft pillar,
   about, editorial policy, privacy, terms), the tool pages on
   tool.html (tools and contact) and the engine 404. Not a redesign:
   each page keeps its engine structure and gets the D1 frame,
   tokens and the D3 prose rhythm. Scoped away from .article--post
   (article.css) and .home (home.css).
   Loaded unlayered after article.css. Tool pages link their own
   tool stylesheets after this file, so rules that must beat
   tool-common.css carry one extra class.
   Mobile-first: base ~390px, then 720 and 960.
   ============================================================ */

/* ---- FRAME ----
   Keep the shared wrap and existing column widths. At desktop sizes,
   rail-free pages centre their column; .page--rail on the outer frame
   opts out so a later two-column layout can reuse the full wrap. */
.article:not(.article--post),
.post-index,
.not-found { max-width: calc(1160px - 2 * var(--gutter)); margin: 0 auto; padding-top: 24px; }
.article:not(.article--post) .article__main { max-width: 720px; }

/* ---- PAGE TITLE ----
   Matches .article__title; the extra class outranks the h1 size
   tool-common.css sets on tool pages. */
.article:not(.article--post) .article__head h1,
.post-index .post-index__head h1,
.not-found h1 { font-size: 30px; line-height: 1.15; margin: 0 0 20px; }

/* ---- PAGE PROSE (page.html): the post template's rhythm ---- */
.article:not(.article--post) .prose { max-width: 68ch; }
.article:not(.article--post) .prose p,
.article:not(.article--post) .prose li { font-size: 18px; line-height: 1.7; }
.article:not(.article--post) .prose p { margin: 0 0 1.05em; }
.article:not(.article--post) .prose h2 { font-size: 24px; margin: 1.7em 0 .5em; }
.article:not(.article--post) .prose h3 { font-size: 20px; margin: 1.5em 0 .5em; }
.article:not(.article--post) .prose > :first-child { margin-top: 0; }
.article:not(.article--post) .prose ul,
.article:not(.article--post) .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.article:not(.article--post) .prose ol { padding-left: 1.5em; }
.article:not(.article--post) .prose li { margin-bottom: .45em; }
.article:not(.article--post) .prose li::marker { color: var(--wax); }
.article:not(.article--post) .prose strong { color: var(--navy); }
.article:not(.article--post) .prose code { font-size: .9em; background: var(--mist); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }

/* Pillar tables: the engine draws a currentColor grid. Hairlines and a
   mist header row, as in the post template's wide tables; the engine
   .table-scroll wrapper still scrolls anything too wide. */
.article:not(.article--post) .table-scroll { margin: 1.2em 0 1.6em; }
.article:not(.article--post) .table-scroll table { width: 100%; font-size: 16px; }
.article:not(.article--post) .table-scroll th,
.article:not(.article--post) .table-scroll td { border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; vertical-align: top; line-height: 1.45; }
.article:not(.article--post) .table-scroll th { font-size: 14px; background: var(--mist); color: var(--navy); }

/* Pillar diagram: full width with a muted caption. */
.article:not(.article--post) .prose figure { margin: 1.4em 0; }
.article:not(.article--post) .prose figure img { width: 100%; height: auto; display: block; }
.article:not(.article--post) .prose figcaption { font-size: 15px; color: var(--muted); margin-top: 8px; }

/* ---- TOOL PAGES (tool.html) ----
   tool-common.css colours body links and list markers with the
   decorative gold (about 2.3:1 on cream). Navy links and wax markers,
   as everywhere else; buttons keep their own colours. */
.article .article__body a:not(.btn) { color: var(--navy); }
.article .article__body a:not(.btn):hover { color: var(--wax); }
.article .article__body li::marker { color: var(--wax); }

/* ---- BLOG INDEX (engine index.html) ----
   Same structure; the post template's breadcrumb, and each entry as a
   reading-list row (mockup .reads) instead of a long Cinzel link. */
.post-index > * { max-width: 720px; }
.post-index .breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.post-index .breadcrumb ol { gap: 0; align-items: baseline; }
.post-index .breadcrumb li + li::before { content: "/"; margin: 0 .45em; color: var(--muted); }
.post-index .breadcrumb a { color: var(--muted); padding: 4px 0; display: inline-block; }
.post-index .breadcrumb a:hover { color: var(--wax); }
.post-index__head p { margin: 0 0 24px; color: var(--muted); font-size: 18px; max-width: 60ch; }
.post-list { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-list .post-list__item { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.post-list time { display: block; font-size: 14px; color: var(--muted); }
.post-list h2 { font: 700 17px/1.35 var(--font-text); letter-spacing: 0; margin: 2px 0 0; }
.post-list h2 a { color: var(--navy); text-decoration: none; }
.post-list h2 a:hover { color: var(--wax); text-decoration: underline; }
.post-list p { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.pagination { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 24px 0 8px; font-weight: 600; }
.pagination a, .pagination span { padding: 8px 0; }

/* ---- 404 (engine 404.html) ----
   Two bare links sat touching; spaced as quiet text links. The
   min-height keeps the footer off the middle of a tall screen. */
.not-found { min-height: 55vh; padding-bottom: 48px; }
.not-found p { margin: 0 0 16px; }
.not-found p:last-child { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.not-found p:last-child a { font-weight: 600; padding: 8px 0; }

@media (min-width: 720px) {
  .article:not(.article--post),
  .post-index,
  .not-found { padding-top: 40px; }
  .article:not(.article--post) .article__head h1,
  .post-index .post-index__head h1,
  .not-found h1 { font-size: 42px; }
}

@media (min-width: 960px) {
  .article:not(.article--post):not(.page--rail) .article__main { margin-inline: auto; }
  .article:not(.article--post):not(.page--rail) .article__main:has(> .prose) { max-width: min(720px, 68ch); }
  .article:not(.article--post):not(.page--rail) .article__main:has(.contact-form) { max-width: 560px; }
  .post-index:not(.page--rail),
  .not-found:not(.page--rail) { max-width: 720px; }
}

/* Secondary reading follows the main content until the rail breakpoint.
   Unlike contents rails, these short navigation modules never stick. */
.page-rail { position: static; min-width: 0; margin-top: 32px; padding-bottom: 24px; }
.page-rail__title,
.page-rail .h-section { font-size: 18px; line-height: 1.35; margin: 0 0 12px; }
.page-rail__links,
.page-rail .qlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.page-rail__links a,
.page-rail .qlist a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--navy); }
.page-rail__label,
.page-rail .q { display: block; font: 600 23px/1.25 var(--font-serif); }
.page-rail__hint,
.page-rail .a { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.page-rail__hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-rail__links a:hover .page-rail__label,
.page-rail .qlist a:hover .q { color: var(--wax); text-decoration: underline; }
.page--rail > .article__main,
.page--rail > .post-index__main { min-width: 0; margin-inline: auto; }

@media (min-width: 1100px) {
  .page--rail { display: grid; grid-template-columns: minmax(0, 720px) 260px; gap: 72px; justify-content: center; }
  .page--rail > .article__main,
  .page--rail > .post-index__main { margin-inline: 0; }
  .page--rail > .page-rail { margin-top: 0; padding-top: 8px; align-self: start; }
}
}

/* 404.css */
@layer site {
/* ============================================================
   Myriapath - 404.css
   D6 custom 404 (theme/templates/404.html). The page reuses the
   homepage components under .home (home.css): a compact navy band,
   the shared question router, then the two live tools and the
   beginner's guide. Everything here is scoped to .lost.
   Mobile-first: base at ~390px, min-width 720 and 960.
   ============================================================ */

/* Compact hero band: heading and two plain sentences, no side column. */
.lost .lost__band { padding: 28px 0 32px; }
.lost .lost__band .lead { margin: 14px 0 0; }

/* The two live tools: the "Today on the wheel" pair, on cream. */
.lost .lost__tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lost .lost__tools a { display: flex; flex-direction: column; gap: 4px; height: 100%; min-width: 0; padding: 16px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); }
.lost .lost__tools a:hover { border-color: var(--wax); }
.lost .lost__tools a:hover .lost__tool { color: var(--wax); }
.lost .lost__tools .moon, .lost .lost__tools .wheel { width: 32px; height: 32px; margin-bottom: 6px; }
.lost .lost__tools .moon__dark { fill: var(--mist); }
.lost .lost__tool { font: 600 21px/1.15 var(--font-serif); color: var(--navy); }
.lost .lost__sub { font-size: 14px; color: var(--muted); }

/* Beginner's guide: the hero's primary button, inverted for cream. */
.lost .lost__start { padding-top: 28px; padding-bottom: 48px; }
.lost .lost__start .btn--primary { width: 100%; justify-content: center; background: var(--navy); color: var(--white); }
.lost .lost__start .btn--primary:hover { background: var(--navy-2); color: var(--white); }
.lost .lost__start .more { display: block; width: max-content; }

@media (min-width: 720px) {
  .lost .lost__band { padding: 48px 0 52px; }
  .lost .lost__start .btn--primary { width: auto; }
}

@media (min-width: 960px) {
  .lost:not(.page--rail) .wrap { max-width: calc(720px + 2 * var(--gutter)); }
  .lost:not(.page--rail) .duo { display: block; }
}
}

/* tool-common.css */
@layer site {
/* ============================================================
   Self-hosted fonts (Google Fonts -> local woff2, latin + latin-ext).
   Variable-font files: one woff2 per family+subset covers every weight.
   Subsets limited to latin + latin-ext (EN + FR accents). font-display: swap.
   ============================================================ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cinzel (headings) + Cormorant Garamond (eyebrows/labels). Each woff2 already
   bundles latin + latin-ext, so one file covers both subsets per weight. */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cinzel-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cinzel-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/cinzel-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- METRIC-ADJUSTED FALLBACKS (kill font-swap CLS) ----
   Each fallback is a local system font re-scaled (size-adjust + ascent/descent/
   line-gap overrides) to occupy the SAME box as its web font, so the swap from
   fallback -> web font shifts nothing. Numbers derived from the real font files
   (Fontaine/next-font method). Slotted right after the web font in each stack. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Roboto"), local("Helvetica Neue");
  /* 108% = in-browser calibrated Inter/Arial width ratio; zeroes line-wrap reflow
     on both index cards and article body (pure-metric 107.34% ran a hair narrow). */
  size-adjust: 108%;
  ascent-override: 89.7%;
  descent-override: 22.33%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cinzel Fallback";
  src: local("Times New Roman"), local("Times"), local("Noto Serif");
  /* size-adjust calibrated in-browser: Cinzel is all-caps (lowercase -> small-caps),
     so its true rendered width can't be read from lowercase glyph metrics. 132% is
     the measured Cinzel/Times width ratio that reproduces real Cinzel line-wrapping. */
  size-adjust: 132%;
  ascent-override: 73.94%;
  descent-override: 28.18%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Garamond Fallback";
  src: local("Times New Roman"), local("Times"), local("Noto Serif");
  size-adjust: 97.62%;
  ascent-override: 94.65%;
  descent-override: 29.4%;
  line-gap-override: 0%;
}

/* Preserve the former page-only stylesheet inside the shared delivery bundle. */
:where(html:has([data-tool-page])) {
/* ============================================================
   Myriapath - styles.css
   Celestial-light theme, token-driven. Plain CSS, no framework.
   Component set ported from the finished design preview.
   ============================================================ */

/* ---- THEME TOKENS (celestial-light) ---- */
&:root {
  --bg: #FAF6EC;
  --surface: #FFFFFF;
  --surface-2: #F0E9D8;
  --text: #14110A;
  --muted: #5C5443;
  --accent: #22304F;
  --accent-2: #C2A23B;
  /* AA-safe bronze-gold for small label text on the cream bg (#FAF6EC):
     ~5.77:1 vs the decorative --accent-2 gold's ~2.28:1, which fails AA. */
  --accent-2-text: #7A5C16;
  --border: rgba(20, 15, 8, .10);
  --border-2: rgba(20, 15, 8, .18);
  --heading-grad: linear-gradient(120deg, #22304F, #3A5078);
  --heading-glow: none;
  --ad-bg: rgba(20, 15, 8, .02);
  --ad-border: rgba(20, 15, 8, .18);

  --maxw: 1200px;
  --radius: 14px;
  --radius-lg: 16px;
}

/* ---- RESET / BASE (mobile-first) ---- */
*, *::before, *::after { box-sizing: border-box; }
&:is(html) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  &:is(html) { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* contain the off-canvas drawer so mobile keeps its gutters */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 { font-family: "Cinzel", "Cinzel Fallback", Georgia, serif; line-height: 1.18; margin: 0 0 .5em; font-weight: 600; }
h2.sub, .subhead { font-family: "Cormorant Garamond", "Cormorant Garamond Fallback", serif; }
h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
/* ---- BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; gap: 8px;
  font: 600 1rem/1 "Inter", sans-serif; cursor: pointer;
  background: var(--accent); color: #FFFFFF;
  border: 1px solid var(--accent); border-radius: 10px;
  -webkit-appearance: none; appearance: none;
  transition: filter .18s ease;
}
.btn:hover { text-decoration: none; filter: brightness(1.12); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--surface-2); filter: none; }
/* ---------- Article prose ---------- */
.article__body { font-size: 1.08rem; line-height: 1.75; }
.article__body > * + * { margin-top: 1.25em; }

.article__body h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  margin-top: 1.8em;
  margin-bottom: .2em;
}
.article__body h3 {
  font-size: 1.3rem;
  margin-top: 1.5em;
  margin-bottom: .2em;
}
.article__body p { color: var(--text); }

.article__body a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s;
}
.article__body a:hover { color: var(--accent); }

.article__body ul,
.article__body ol { padding-left: 1.4em; color: var(--text); }
.article__body li { margin-top: .5em; }
.article__body li::marker { color: var(--accent-2); }

.article__body blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin-left: 0;
  color: var(--muted);
  font-style: italic;
}

.article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}

.article__body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: 2em;
}

.article__body code {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: .9em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
}
.article__body pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow-x: auto;
}
.article__body pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: .92rem;
}

.article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .98rem;
}
.article__body th,
.article__body td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.article__body th {
  font-family: "Cinzel", "Cinzel Fallback", Georgia, serif;
  color: var(--text);
}
.article__body td { color: var(--muted); }

/* Responsive tables: wrap a markdown table in horizontal scroll on small
   screens so wide comparison tables never break the layout. The generator
   does not wrap them, so make the table itself scrollable as a fallback. */
@media (max-width: 600px) {
  .article__body table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}
}
}

/* moon-phase-calendar.css */
@layer site {
.mtool-moon{margin:1.25rem 0 2rem;color:var(--text);font-size:.88rem}.mtool-moon .mtool-card{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:clamp(.8rem,2.5vw,1.2rem);box-shadow:0 12px 30px rgba(20,15,8,.06)}.mtool-moon>.mtool-card,.mtool-moon__grid>.mtool-card:first-child{border-color:var(--accent-2);box-shadow:0 18px 42px rgba(20,15,8,.1)}.mtool-moon>.mtool-card .eyebrow,.mtool-moon__grid>.mtool-card:first-child .eyebrow{border-bottom:1px solid var(--border-2);padding-bottom:.3rem}.mtool-moon>.mtool-card p:nth-of-type(2){font-size:clamp(1.1rem,4vw,1.35rem);line-height:1.35;color:var(--accent);font-weight:600}.mtool-moon .eyebrow,.mtool-moon__label{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.7rem;color:var(--accent-2-text);margin:0 0 .25rem}.mtool-moon h2,.mtool-moon h3{font-family:"Cinzel",serif;color:var(--accent);margin:.05rem 0 .3rem;line-height:1.1}.mtool-moon h2{font-size:1.12rem}.mtool-moon h3{font-size:1rem}.mtool-moon__grid{display:grid;gap:.65rem}.mtool-moon__hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:center}.mtool-moon__glyph svg{display:block;width:clamp(4.4rem,18vw,6rem);height:clamp(4.4rem,18vw,6rem)}.mtool-moon__phase{font-family:"Cinzel",serif;color:var(--accent);font-size:clamp(1.55rem,7vw,2.35rem);line-height:1.02;margin:.12rem 0}.mtool-moon__meta,.mtool-moon__note,.mtool-moon__method,.mtool-moon__detail p{color:var(--muted);margin:.22rem 0}.mtool-moon__ritual{margin:.25rem 0}.mtool-moon__ritual a{font-weight:600}.mtool-moon__window,.mtool-moon__tag{display:inline-block;border:1px solid var(--border-2);border-radius:999px;background:var(--surface);padding:.12rem .38rem;font-size:.72rem;color:var(--accent)}.mtool-moon__nav{display:flex;gap:.3rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:.15rem 0 .4rem}.mtool-moon__nav .btn{min-height:44px;padding:.35rem .5rem}.mtool-moon__month{font-family:"Cinzel",serif;color:var(--accent);font-size:1rem}.mtool-moon__week,.mtool-moon__days{display:grid;grid-template-columns:repeat(7,1fr);gap:.16rem}.mtool-moon__week span{text-align:center;color:var(--muted);font-size:.68rem}.mtool-moon__day{min-height:2.8rem;padding:.12rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);text-align:left;display:flex;flex-direction:column;gap:0;cursor:pointer;font-size:.68rem;line-height:1.02}.mtool-moon__day svg{width:.9rem;height:.9rem}.mtool-moon__day[aria-pressed=true]{background:var(--accent);color:#fff}.mtool-moon__day[aria-current=date]{box-shadow:0 0 0 3px var(--accent-2)}.mtool-moon__day--muted{opacity:.52}.mtool-moon__num{font-weight:700}.mtool-moon__q{font-size:.5rem;font-weight:700}.mtool-moon__full{font-size:.48rem;color:inherit}.mtool-moon__detail{min-height:2.75rem;margin-top:.4rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem}.mtool-moon__note,.mtool-moon__method{font-size:.72rem;line-height:1.15}.mtool-moon-fallback-grid{width:100%;font-size:.9rem}.mtool-moon-fallback-grid td,.mtool-moon-fallback-grid th{text-align:left;vertical-align:top}.mtool-moon-quarter{background:var(--surface)}.mtool-moon-empty{background:transparent}.mtool-moon__legend{display:none}@media(max-width:520px){.mtool-moon .mtool-card{padding:.65rem}.mtool-moon__glyph svg{width:4rem;height:4rem}.mtool-moon__day{min-height:2.75rem;padding:.1rem}.mtool-moon__q,.mtool-moon__full{font-size:.46rem}}@media print{.mtool-moon__chrome,.mtool-moon__day[aria-current=date]{box-shadow:none}.mtool-moon__nav button{display:none}.mtool-moon .mtool-card{box-shadow:none;break-inside:avoid}.mtool-moon__hero{display:none}.mtool-moon__day{min-height:3.8rem}.mtool-moon__detail{display:none}.mtool-moon__legend{display:block}.mtool-moon__note,.mtool-moon__method{font-size:.9rem}}
@media(max-width:600px){.mtool-moon,.mtool-moon *{box-sizing:border-box}.mtool-moon{max-width:100%;min-width:0;overflow-x:clip}.mtool-moon__grid{grid-template-columns:minmax(0,1fr);min-width:0}.mtool-moon .mtool-card{max-width:100%;min-width:0}.mtool-moon__hero{grid-template-columns:auto minmax(0,1fr)}.mtool-moon__week,.mtool-moon__days{grid-template-columns:repeat(7,minmax(0,1fr));min-width:0}.mtool-moon__day{min-width:0}.mtool-moon table,.mtool-moon~table{display:block;width:100%;max-width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.mtool-moon table th,.mtool-moon table td,.mtool-moon~table th,.mtool-moon~table td{white-space:nowrap}}
/* The engine script replaces the fallback and releases its reserved height. */
.mtool-height-55:has(>section){min-height:55rem}
}

/* next-sabbat.css */
@layer site {
.mtool-sabbat{margin:1.25rem 0 2rem;color:var(--text)}.mtool-sabbat .mtool-card{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:clamp(1.15rem,3vw,1.65rem);box-shadow:0 12px 30px rgba(20,15,8,.06)}.mtool-sabbat>.mtool-card,.mtool-sabbat__grid>.mtool-card:first-child{border-color:var(--accent-2);box-shadow:0 18px 42px rgba(20,15,8,.1)}.mtool-sabbat>.mtool-card .eyebrow,.mtool-sabbat__grid>.mtool-card:first-child .eyebrow{border-bottom:1px solid var(--border-2);padding-bottom:.35rem}.mtool-sabbat>.mtool-card p:nth-of-type(2){font-size:clamp(1.15rem,4.5vw,1.45rem);line-height:1.35;color:var(--accent);font-weight:600}.mtool-sabbat .eyebrow,.mtool-sabbat__label{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--accent-2-text);margin:0 0 .45rem}.mtool-sabbat h2,.mtool-sabbat h3{font-family:"Cinzel",serif;color:var(--accent);margin:.2rem 0 .7rem}.mtool-sabbat__top{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}.mtool-sabbat__toggle{display:flex;gap:.35rem;flex-wrap:wrap}.mtool-sabbat__toggle .btn{min-height:44px;padding:.55rem .8rem}.mtool-sabbat__toggle [aria-pressed="true"]{background:var(--accent);color:var(--surface);border-color:var(--accent)}.mtool-sabbat__name{font-family:"Cinzel",serif;font-size:clamp(2.15rem,9vw,3.45rem);line-height:1.02;margin:.5rem 0}.mtool-sabbat__name a{color:var(--accent);text-decoration:none}.mtool-sabbat__date,.mtool-sabbat__sentence{font-size:1.08rem;margin:.4rem 0}.mtool-sabbat__ticker{font-family:"Cinzel",serif;font-weight:600;color:var(--accent-2-text);margin:.25rem 0}.mtool-sabbat__after,.mtool-sabbat__note{color:var(--muted);font-size:.95rem}.mtool-sabbat__grid{display:grid;gap:1rem}.mtool-sabbat__controls{display:flex;gap:.55rem;align-items:end;flex-wrap:wrap;margin:.8rem 0}.mtool-sabbat__field{display:grid;gap:.25rem}.mtool-sabbat select{min-height:48px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;padding:0 .75rem}.mtool-sabbat table{width:100%;font-size:.92rem}.mtool-sabbat caption{text-align:left;font-weight:600;color:var(--accent);margin:.25rem 0 .6rem}.mtool-sabbat__past{color:var(--muted)}.mtool-sabbat__tag{display:inline-block;margin-left:.35rem;color:var(--muted);font-size:.82rem}.mtool-sabbat__print-caption{display:none}.mtool-sabbat__footnote{border-left:3px solid var(--accent-2);padding-left:.85rem;margin:1rem 0 0;color:var(--muted);font-size:.95rem}@media print{.mtool-sabbat__chrome,.mtool-sabbat__ticker{display:none!important}.mtool-sabbat{break-inside:avoid}.mtool-sabbat .mtool-card{box-shadow:none}.mtool-sabbat__print-caption{display:block;color:var(--text);font-weight:600}.mtool-sabbat table{font-size:.78rem}.mtool-sabbat a{text-decoration:none;color:var(--text)}}
@media(max-width:600px){.mtool-sabbat,.mtool-sabbat *{box-sizing:border-box}.mtool-sabbat{max-width:100%;min-width:0;overflow-x:clip}.mtool-sabbat__grid{grid-template-columns:minmax(0,1fr);min-width:0}.mtool-sabbat .mtool-card{max-width:100%;min-width:0}.mtool-sabbat__top{min-width:0}.mtool-sabbat__top>*{min-width:0}.mtool-sabbat__toggle{max-width:100%}.mtool-sabbat table,.mtool-sabbat~table{display:block;width:100%;max-width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.mtool-sabbat table th,.mtool-sabbat table td,.mtool-sabbat~table th,.mtool-sabbat~table td{white-space:nowrap}}
/* The engine script replaces the fallback and releases its reserved height. */
.mtool-height-26:has(>section){min-height:26rem}
}

/* online-tarot-reading.css */
@layer site {
.mtool-tarot{margin:1.25rem 0 2rem;color:var(--text)}.mtool-tarot,.mtool-tarot *{box-sizing:border-box}.mtool-tarot .mtool-card{background:var(--surface);border:1px solid var(--accent-2);border-radius:var(--radius-lg);padding:clamp(1.15rem,3vw,1.65rem);box-shadow:0 12px 30px rgba(20,15,8,.06)}.mtool-tarot .eyebrow,.mtool-tarot__label{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--accent-2-text);margin:0 0 .4rem}.mtool-tarot h2,.mtool-tarot h3{font-family:"Cinzel",serif;color:var(--accent);margin:.2rem 0 .7rem}.mtool-tarot p{margin:.4rem 0}.mtool-tarot:empty{margin:0}.mtool-tarot .mtool-tarot__panel{display:flex;flex-direction:column;justify-content:center;border-left:6px solid var(--accent-2)}.mtool-tarot__root{display:flex;flex-direction:column;min-height:inherit}.mtool-tarot__root>.mtool-tarot__panel{flex:1 0 auto}#tool-tarot-draw>.mtool-card{min-height:38rem}.mtool-tarot .mtool-tarot__panel.is-reversed{border-left-color:var(--accent)}.mtool-tarot__card{flex:none;width:min(70%,215px);aspect-ratio:400/686;margin:0 auto;border-radius:12px;border:2px solid var(--accent-2);overflow:hidden;background:var(--surface-2)}.mtool-tarot__art img{display:block;width:100%;height:100%}.mtool-tarot__art img.is-reversed{transform:rotate(180deg)}.mtool-tarot__back{background:var(--accent);background-image:repeating-linear-gradient(45deg,rgba(194,162,59,.3) 0 5px,transparent 5px 11px),repeating-linear-gradient(-45deg,rgba(194,162,59,.3) 0 5px,transparent 5px 11px);box-shadow:inset 0 0 0 5px rgba(250,246,236,.15)}.mtool-tarot__settle{text-align:center;color:var(--muted);max-width:24rem;margin:1.15rem auto 0}.mtool-tarot__face{animation:mtool-flip .34s ease-out both}@keyframes mtool-flip{from{transform:perspective(900px) rotateY(-84deg);opacity:0}to{transform:none;opacity:1}}.mtool-tarot__text{min-width:0;margin-top:1.15rem}.mtool-tarot__label:has(+.mtool-tarot__prompt){padding-top:.7rem}.mtool-tarot__name{font-family:"Cinzel",serif;font-size:clamp(1.55rem,6.4vw,2.15rem);line-height:1.08;margin:.1rem 0 .2rem}.mtool-tarot__orientation{font-weight:600;margin:0}.mtool-tarot__cue{color:var(--muted);font-size:.9rem;margin:0 0 .7rem}.mtool-tarot__keywords{font-size:1.02rem;margin:0 0 .7rem}.mtool-tarot__reassurance{color:var(--muted);border-left:3px solid var(--accent-2);padding-left:.85rem;margin:0 0 .7rem;font-size:.95rem}.mtool-tarot__prompt{font-family:"Cinzel",serif;font-size:clamp(1.2rem,4.9vw,1.6rem);line-height:1.28;color:var(--accent);margin:0}.mtool-tarot__controls{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:.8rem 0 .4rem}.mtool-tarot__controls .btn{min-height:48px}.mtool-tarot__check{display:flex;gap:.5rem;align-items:center;min-height:44px;cursor:pointer}.mtool-tarot__check input{width:22px;height:22px;accent-color:var(--accent)}.mtool-tarot__copy{min-height:44px}.mtool-tarot__link{display:block;width:100%;min-height:44px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;padding:0 .6rem;margin:.4rem 0}.mtool-tarot__note,.mtool-tarot__status,.mtool-tarot__shared,.mtool-tarot__unavailable{color:var(--muted);font-size:.95rem}.mtool-tarot [hidden]{display:none}
@media(min-width:560px){.mtool-tarot .mtool-tarot__panel:not(.is-back){flex-direction:row;align-items:flex-start;gap:1.5rem}.mtool-tarot__panel:not(.is-back) .mtool-tarot__card{width:200px;margin:0}.mtool-tarot__panel:not(.is-back) .mtool-tarot__text{flex:1;margin-top:0}}
@media print{.mtool-tarot__controls,.mtool-tarot__copy,.mtool-tarot__link,.mtool-tarot__note,.mtool-tarot__status,.mtool-tarot__shared,.mtool-tarot__panel.is-back{display:none!important}#tool-tarot-draw,#tool-tarot-draw>.mtool-card,.mtool-tarot__root{min-height:0!important}.mtool-tarot{break-inside:avoid}.mtool-tarot .mtool-card{box-shadow:none}}
@media(max-width:559px){.mtool-tarot{max-width:100%;min-width:0}.mtool-tarot .mtool-card{max-width:100%;min-width:0}#tool-tarot-draw{min-height:40rem!important}#tool-tarot-draw>.mtool-card{min-height:40rem}}
@media(max-width:400px){#tool-tarot-draw{min-height:42rem!important}#tool-tarot-draw>.mtool-card{min-height:42rem}}
.mtool-height-38{min-height:38rem}
}

/* contact.css */
@layer site {
/* ---------- Contact form (Web3Forms, no backend) ---------- */
.contact-form {
  margin: 1.8rem 0 0;
  max-width: 560px;
}
.contact-form .field {
  margin-bottom: 1.1rem;
}
.contact-form label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .4rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  display: block;
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}
.contact-form select {
  appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235C5443' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.contact-form select:invalid { color: var(--muted); }
.contact-form select option { color: var(--text); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.contact-form .btn-send {
  display: inline-block;
  background: var(--accent);
  color: #FFFFFF;
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 12px 26px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.contact-form .btn-send:hover { filter: brightness(1.08); }
.contact-form .btn-send:active { transform: translateY(1px); }
.contact-form .btn-send:disabled { opacity: .6; cursor: default; }
/* Honeypot: hidden from people and assistive tech; bots tend to fill it. */
.contact-form .field--hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}
.contact-form .form-status {
  margin: 1rem 0 0;
  font-size: .95rem;
  min-height: 1.2em;
}
.contact-form .form-status.is-ok { color: var(--accent); font-weight: 600; }
.contact-form .form-status.is-err { color: #8a2a2a; font-weight: 600; }
}

/* 369-method-tracker.css */
@layer site {
.mtool-369{margin:1.25rem 0 2rem;color:var(--text)}.mtool-369,.mtool-369 *{box-sizing:border-box}.mtool-369 .mtool-card{background:var(--surface);border:1px solid var(--accent-2);border-radius:var(--radius-lg);padding:clamp(1.15rem,3vw,1.65rem);box-shadow:0 12px 30px rgba(20,15,8,.06)}.mtool-369 .eyebrow,.mtool-369__label{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--accent-2-text);margin:0 0 .4rem}.mtool-369 h2,.mtool-369 h3{font-family:"Cinzel",serif;color:var(--accent);margin:.2rem 0 .7rem}.mtool-369 p{margin:.4rem 0}.mtool-369__intro{max-width:42rem}.mtool-369__setup,.mtool-369__practice{display:grid;gap:1rem}.mtool-369__setup{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1rem .9rem}.mtool-369__fineprint--full{grid-column:1/-1;margin-top:-.55rem}.mtool-369__field{display:grid;gap:.35rem}.mtool-369__field input,.mtool-369__line{width:100%;min-height:3rem;padding:.75rem .85rem;border:1px solid var(--accent-2);border-radius:.55rem;background:var(--surface);color:var(--text);font:inherit}.mtool-369__field input:focus,.mtool-369__line:focus{outline:3px solid var(--accent);outline-offset:2px}.mtool-369__button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.mtool-369__button[disabled]{opacity:.55;cursor:not-allowed}.mtool-369__privacy{padding:.9rem 1rem;border-left:4px solid var(--accent);background:rgba(129,201,149,.13);font-size:.95rem}.mtool-369__privacy strong{color:var(--accent)}.mtool-369__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1.2rem 0}.mtool-369__metric{padding:.8rem;border:1px solid var(--accent-2);border-radius:.55rem}.mtool-369__metric strong{display:block;font-family:"Cinzel",serif;font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.1;color:var(--accent)}.mtool-369__metric span{font-size:.9rem}.mtool-369__sequence{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0 1.35rem}.mtool-369__node{width:2.2rem;height:2.2rem;border:2px solid #aaa;border-radius:50%;background:transparent;color:var(--text);font:inherit;font-size:.78rem;cursor:default}.mtool-369__node.is-complete{border-color:#4d8d61;background:#81C995;color:#173d24}.mtool-369__node.is-current{box-shadow:0 0 0 3px rgba(197,138,249,.35)}.mtool-369__node:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.mtool-369__sessions{display:grid;gap:.75rem}.mtool-369__output{background:var(--surface-2);border-radius:var(--radius-lg);min-height:8rem;padding:1.5rem 1.6rem}.mtool-369__session{padding:1rem;border:1px solid var(--accent-2);border-radius:.55rem}.mtool-369__session.is-current{border-color:var(--accent)}.mtool-369__session h3{font-size:1rem;margin:0}.mtool-369__session p{font-size:.9rem}.mtool-369__entry{display:flex;gap:.6rem;align-items:center}.mtool-369__entry .mtool-369__line{flex:1}.mtool-369__counter{min-width:4.5rem;text-align:right;font-variant-numeric:tabular-nums;font-size:.9rem}.mtool-369__status{min-height:1.5rem;margin-top:1rem;color:var(--accent-2-text)}.mtool-369__tools{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--accent-2)}.mtool-369__tools input[type=file]{display:none}.mtool-369__fineprint{font-size:.9rem}.mtool-369__hidden{display:none!important}@media(max-width:620px){.mtool-369__setup{grid-template-columns:1fr}.mtool-369__entry{align-items:stretch;flex-wrap:wrap}.mtool-369__entry .mtool-369__line{flex-basis:100%}.mtool-369__counter{text-align:left}.mtool-369__entry .mtool-369__button{flex:1}}@media(prefers-reduced-motion:reduce){.mtool-369 *{scroll-behavior:auto;transition:none!important}}@media print{.mtool-369__tools,.mtool-369__setup,.mtool-369__entry,.mtool-369__privacy{display:none!important}.mtool-369 .mtool-card{box-shadow:none}}
.mtool-height-36{min-height:36rem}
.mtool-margin-top{margin-top:1.2rem}
}

/* affirmation-generator.css */
@layer site {
.mtool-affirm{margin:1.25rem 0 2rem;color:var(--text)}.mtool-affirm,.mtool-affirm *{box-sizing:border-box}.mtool-affirm .mtool-card{background:var(--surface);border:1px solid var(--accent-2);border-radius:var(--radius-lg);padding:clamp(1.15rem,3vw,1.65rem);box-shadow:0 12px 30px rgba(20,15,8,.06)}.mtool-affirm .eyebrow,.mtool-affirm__label{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--accent-2-text);margin:0 0 .4rem}.mtool-affirm h2{font-family:"Cinzel",serif;color:var(--accent);margin:.2rem 0 .7rem}.mtool-affirm p{margin:.4rem 0}.mtool-affirm__note{color:var(--accent-2-text);font-size:.95rem}.mtool-affirm__controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.2rem;align-items:end}.mtool-affirm__switch{display:flex;align-items:center;gap:.8rem;min-height:44px;cursor:pointer}.mtool-affirm__switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}.mtool-affirm__track{position:relative;flex:none;width:3.1rem;height:1.75rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--accent-2);transition:background .18s ease,border-color .18s ease}.mtool-affirm__track::after{content:"";position:absolute;top:.18rem;left:.2rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(20,15,8,.3);transition:transform .18s ease}.mtool-affirm__switch input:checked+.mtool-affirm__track{background:var(--accent);border-color:var(--accent)}.mtool-affirm__switch input:checked+.mtool-affirm__track::after{transform:translateX(1.31rem)}.mtool-affirm__switch input:focus-visible+.mtool-affirm__track{outline:3px solid var(--accent-2);outline-offset:3px}@media(prefers-reduced-motion:reduce){.mtool-affirm__track,.mtool-affirm__track::after{transition:none}}.mtool-affirm__field{margin:0;border:0;padding:0;min-width:0}.mtool-affirm__field label,.mtool-affirm__field legend{display:block;font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.08em;color:var(--accent-2-text);font-size:.95rem;margin-bottom:.4rem}.mtool-affirm__select{width:100%;min-height:2.8rem;border:1px solid var(--accent-2);border-radius:var(--radius-lg);background:var(--surface);color:var(--text);font:inherit;padding:.55rem .7rem}.mtool-affirm__select:focus-visible,.mtool-affirm__output{background:var(--surface-2);border-radius:var(--radius-lg);margin-top:1.25rem;min-height:8rem;padding:1.5rem 1.6rem;display:flex;align-items:center}.mtool-affirm__prompt{font-family:"Cormorant Garamond",serif;font-size:clamp(1.25rem,2.5vw,1.65rem);line-height:1.45;margin:0}.mtool-affirm__controls .mtool-affirm__action{grid-column:1/-1}.mtool-affirm__button:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}.mtool-affirm__status{margin:.8rem 0 0;color:var(--accent-2-text);font-size:.9rem}.mtool-affirm:empty{margin:0}@media print{.mtool-affirm__controls,.mtool-affirm__note,.mtool-affirm__status{display:none!important}.mtool-affirm .mtool-card{box-shadow:none}.mtool-affirm{break-inside:avoid}}@media(max-width:559px){.mtool-affirm{max-width:100%;min-width:0}.mtool-affirm .mtool-card{max-width:100%;min-width:0}.mtool-affirm__controls{grid-template-columns:1fr}.mtool-affirm__controls .mtool-affirm__action{grid-column:auto}.mtool-affirm__button{width:100%}}
.mtool-height-32{min-height:32rem}
}

/* limiting-belief-reframer.css */
@layer site {
.mtool-reframe{margin:1.25rem 0 2rem;color:var(--text)}.mtool-reframe,.mtool-reframe *{box-sizing:border-box}.mtool-reframe .mtool-card{background:var(--surface);border:1px solid var(--accent-2);border-radius:var(--radius-lg);padding:clamp(1.15rem,3vw,1.65rem);box-shadow:0 12px 30px rgba(20,15,8,.06)}.mtool-reframe .eyebrow,.mtool-reframe__label{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--accent-2-text);margin:0 0 .4rem}.mtool-reframe h2,.mtool-reframe h3{font-family:"Cinzel",serif;color:var(--accent);margin:.2rem 0 .7rem}.mtool-reframe p{margin:.4rem 0}.mtool-reframe__privacy{margin:1rem 0;padding:.8rem 1rem;border:1px solid var(--accent-2);border-radius:calc(var(--radius-lg) / 2);font-size:.95rem}.mtool-reframe__topbar,.mtool-reframe__controls{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}.mtool-reframe__topbar{justify-content:space-between;margin-bottom:1.2rem}.mtool-reframe__progress{font-size:.9rem;color:var(--accent-2-text);margin:1rem 0}.mtool-reframe__step{border-top:1px solid var(--accent-2);padding-top:1.2rem}.mtool-reframe__question{font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.25}.mtool-reframe__hint{max-width:48rem}.mtool-reframe__input{display:block;width:100%;min-height:9rem;margin-top:.75rem;padding:.8rem 1rem;border:1px solid var(--accent-2);border-radius:calc(var(--radius-lg) / 2);background:var(--surface);color:var(--text);font:inherit;line-height:1.5;resize:vertical}.mtool-reframe__input:focus,.mtool-reframe__check:focus-within{outline:3px solid var(--accent);outline-offset:3px}.mtool-reframe__check{display:flex;gap:.65rem;align-items:flex-start;margin:1rem 0;line-height:1.5}.mtool-reframe__check input{width:1.1rem;height:1.1rem;flex:0 0 auto;margin-top:.2rem;accent-color:var(--accent)}.mtool-reframe__button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.mtool-reframe__button[disabled]{opacity:.5;cursor:not-allowed}.mtool-reframe__controls{margin-top:1.2rem}.mtool-reframe__error{color:var(--accent);font-weight:700;margin-top:.7rem}.mtool-reframe__examples{margin-top:1rem;padding:1rem;border:1px solid var(--accent-2);border-radius:calc(var(--radius-lg) / 2)}.mtool-reframe__examples-list{display:grid;gap:.55rem;margin:.8rem 0 0;padding:0;list-style:none}.mtool-reframe__example{width:100%;text-align:left;cursor:pointer}.mtool-reframe__example:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.mtool-reframe__mirror{display:grid;gap:1rem;margin:1.2rem 0;background:var(--surface-2);border-radius:var(--radius-lg);min-height:8rem;padding:1.5rem 1.6rem}.mtool-reframe__entry{margin:0;padding:1rem;border:1px solid var(--accent-2);border-radius:calc(var(--radius-lg) / 2)}.mtool-reframe__entry h4{margin:0 0 .45rem;font-family:"Cinzel",serif;color:var(--accent)}.mtool-reframe__entry blockquote{margin:0;white-space:pre-wrap}.mtool-reframe__status{font-size:.9rem;color:var(--accent-2-text);margin-top:1.2rem}.mtool-reframe__fallback{margin-top:1rem}.mtool-reframe__fallback ol{padding-left:1.4rem}.mtool-reframe .mtool-reframe__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:559px){.mtool-reframe{max-width:100%;min-width:0}.mtool-reframe .mtool-card{max-width:100%;min-width:0}}@media print{.mtool-reframe__print-hide,.mtool-reframe__controls,.mtool-reframe__topbar,.mtool-reframe__privacy,.mtool-reframe__progress,.mtool-reframe__status{display:none!important}.mtool-reframe,.mtool-reframe .mtool-card{min-height:0!important;box-shadow:none}.mtool-reframe .mtool-card{border:0;padding:0}.mtool-reframe__mirror{break-inside:avoid}}
.mtool-height-38{min-height:38rem}
}

/* manifestation-method-picker.css */
@layer site {
.mtool-picker{margin:1.25rem 0 2rem;color:var(--text)}.mtool-picker,.mtool-picker *{box-sizing:border-box}.mtool-picker .mtool-card{background:var(--surface);border:1px solid var(--accent-2);border-radius:var(--radius-lg);padding:clamp(1.15rem,3vw,1.65rem);box-shadow:0 12px 30px rgba(20,15,8,.06)}.mtool-picker .eyebrow,.mtool-picker__label{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--accent-2-text);margin:0 0 .4rem}.mtool-picker h2,.mtool-picker h3{font-family:"Cinzel",serif;color:var(--accent);margin:.2rem 0 .7rem}.mtool-picker p{margin:.4rem 0}.mtool-picker__note{color:var(--accent-2-text);font-size:.95rem}.mtool-picker__question{margin-top:1.25rem}.mtool-picker__step{margin:.4rem 0;color:var(--accent-2-text);font-size:.9rem}.mtool-picker__options{display:grid;gap:.75rem;margin-top:.9rem}.mtool-picker__option{text-align:left}.mtool-picker__option:focus-visible,.mtool-picker__reset:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}.mtool-picker__output{background:var(--surface-2);border-radius:var(--radius-lg);margin-top:1.25rem;min-height:8rem;padding:1.5rem 1.6rem;display:flex;flex-direction:column;justify-content:center}.mtool-picker__output p{margin:.3rem 0}.mtool-picker__result-title{font-family:"Cormorant Garamond",serif;font-size:clamp(1.35rem,2.8vw,1.8rem);line-height:1.35}.mtool-picker__link{color:var(--accent);font-weight:700}.mtool-picker__link:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}.mtool-picker__controls{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.2rem}.mtool-picker__reset{display:none}.mtool-picker__status{margin:.8rem 0 0;color:var(--accent-2-text);font-size:.9rem}.mtool-picker__compare{margin-top:1.2rem!important;font-size:.95rem}.mtool-picker__compare a{color:var(--accent);font-weight:700}.mtool-picker:empty{margin:0}@media print{.mtool-picker__controls,.mtool-picker__status,.mtool-picker__compare{display:none!important}.mtool-picker .mtool-card{box-shadow:none}.mtool-picker{break-inside:avoid}}@media(max-width:559px){.mtool-picker{max-width:100%;min-width:0}.mtool-picker .mtool-card{max-width:100%;min-width:0}.mtool-picker__option,.mtool-picker__reset{width:100%}}
.mtool-height-32{min-height:32rem}
}

/* scripting-prompt-generator.css */
@layer site {
.mtool-script{margin:1.25rem 0 2rem;color:var(--text)}.mtool-script,.mtool-script *{box-sizing:border-box}.mtool-script .mtool-card{background:var(--surface);border:1px solid var(--accent-2);border-radius:var(--radius-lg);padding:clamp(1.15rem,3vw,1.65rem);box-shadow:0 12px 30px rgba(20,15,8,.06)}.mtool-script .eyebrow,.mtool-script__label{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--accent-2-text);margin:0 0 .4rem}.mtool-script h2{font-family:"Cinzel",serif;color:var(--accent);margin:.2rem 0 .7rem}.mtool-script p{margin:.4rem 0}.mtool-script__controls{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.2rem}.mtool-script__button:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}.mtool-script__note{color:var(--accent-2-text);font-size:.95rem}.mtool-script__output{background:var(--surface-2);border-radius:var(--radius-lg);margin-top:1.25rem;min-height:8rem;padding:1.5rem 1.6rem;display:flex;align-items:center}.mtool-script__prompt{font-family:"Cormorant Garamond",serif;font-size:clamp(1.25rem,2.5vw,1.65rem);line-height:1.45;margin:0}.mtool-script__status{margin:.8rem 0 0;color:var(--accent-2-text);font-size:.9rem}.mtool-script:empty{margin:0}@media print{.mtool-script__controls,.mtool-script__note,.mtool-script__status{display:none!important}.mtool-script .mtool-card{box-shadow:none}.mtool-script{break-inside:avoid}}@media(max-width:559px){.mtool-script{max-width:100%;min-width:0}.mtool-script .mtool-card{max-width:100%;min-width:0}.mtool-script__controls{align-items:stretch;flex-direction:column}.mtool-script__button{width:100%}}
.mtool-height-28{min-height:28rem}
}

/* herb-correspondences.css */
@layer site {


.mtool-herb{margin:1.5rem 0;min-height:8.5rem}

.mtool-herb__card,.mtool-herb__controls{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem}

.mtool-herb__card p,.mtool-herb__count,.mtool-herb__note{margin:0}

.mtool-herb__controls{display:grid;grid-template-columns:minmax(0,1fr);gap:.45rem;overflow:visible;text-align:left}

.mtool-herb__row{display:flex;gap:.45rem;min-width:0;align-items:center}

.mtool-herb__field{display:grid;gap:.2rem;flex:1 1 11rem;min-width:0;font-family:Inter,system-ui,sans-serif;font-weight:600;color:var(--text)}

.mtool-herb__row--wrap{display:grid;grid-template-columns:repeat(3,minmax(8.5rem,1fr)) minmax(max-content,1fr)}

.mtool-herb__field span{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}

.mtool-herb__field--check{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;min-height:48px;white-space:nowrap}

.mtool-herb__field--check span{position:static;width:auto;height:auto;clip:auto;overflow:visible;font-size:.9rem}

.mtool-herb__actions{display:flex;align-items:center;gap:.45rem;min-width:0}

.mtool-herb__actions .btn{min-height:48px;margin-left:auto;padding-inline:.6rem;white-space:nowrap}


.mtool-herb input[type=search],.mtool-herb select{width:100%;max-width:100%;box-sizing:border-box;min-height:48px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:400 1rem Inter,system-ui,sans-serif;padding:.7rem .8rem}
.mtool-herb select{padding-inline:.5rem}

.mtool-herb input[type=checkbox]{width:1.25rem;height:1.25rem;margin:0}

.mtool-herb .mtool-herb__controls .mtool-herb__count{margin:0;font-size:1rem;font-weight:700}

.mtool-herb .mtool-herb__controls .mtool-herb__note{margin:0;color:var(--muted);font-size:.95rem;font-weight:400}

.mtool-herb__note,.mtool-herb__zero,.mtool-herb__print-summary{color:var(--muted);font-size:.95rem}

.mtool-herb__zero{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);padding:.75rem 1rem}

.mtool-herb__print-summary{display:none}

@media (min-width:601px) and (max-width:767px){
  .mtool-herb__row--wrap{grid-template-columns:repeat(3,minmax(6.75rem,1fr)) minmax(max-content,1fr);gap:.3rem}
  .mtool-herb select{font-size:.8125rem;padding-inline:.35rem}
  .mtool-herb__field--check span,.mtool-herb__actions .btn{font-size:.75rem}
  .mtool-herb__actions{gap:.3rem}
  .mtool-herb__actions .btn{padding-inline:.2rem}
}
@media (max-width:600px){
  .mtool-herb__row--wrap{grid-template-columns:minmax(0,1fr)}
}

@media (min-width:601px){.mtool-herb ~ table{table-layout:fixed;width:100%;max-width:100%;white-space:normal}.mtool-herb ~ table th,.mtool-herb ~ table td{padding:10px 8px;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:manual;vertical-align:top}.mtool-herb ~ table th:nth-child(1){width:16%}.mtool-herb ~ table th:nth-child(2){width:14%}.mtool-herb ~ table th:nth-child(3){width:8%}.mtool-herb ~ table th:nth-child(4){width:10%}.mtool-herb ~ table th:nth-child(5){width:12%}.mtool-herb ~ table th:nth-child(6){width:30%}.mtool-herb ~ table th:nth-child(7){width:10%}}

@media print{.mtool-herb{min-height:0!important}.mtool-herb__controls,.mtool-herb__zero{display:none!important}.mtool-herb__print-summary:not([hidden]){display:block!important;border:1px solid var(--border);padding:.5rem;margin:.5rem 0}.mtool-herb ~ table{display:table;table-layout:auto;width:100%;max-width:100%;overflow:visible;white-space:normal}.mtool-herb ~ table th{width:auto!important}.mtool-herb ~ table th,.mtool-herb ~ table td{padding:12px 16px;white-space:normal;overflow-wrap:break-word}}


.mtool-height-herb{min-height:8.5rem}
@media (max-width:600px){.mtool-herb ~ table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
/* Screen-only styling keeps the chart's print layout unchanged. */
@media screen {
  .article--post .mtool-herb ~ table {
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.45;
  }
  .article--post .mtool-herb ~ table th,
  .article--post .mtool-herb ~ table td {
    padding: 10px 10px;
    border: 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  .article--post .mtool-herb ~ table th {
    font-size: 13.5px;
    background: var(--mist);
    color: var(--navy);
    text-align: left;
  }
}
@media screen and (min-width: 601px) {
  .article--post .mtool-herb ~ table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
  }
  .article--post .mtool-herb ~ table th:nth-child(1) { width: 17.5%; }
  .article--post .mtool-herb ~ table th:nth-child(2) { width: 17.5%; }
  .article--post .mtool-herb ~ table th:nth-child(3) { width: 10.5%; }
  .article--post .mtool-herb ~ table th:nth-child(4) { width: 11.5%; }
  .article--post .mtool-herb ~ table th:nth-child(6) { width: 17%; }
  .article--post .mtool-herb ~ table th:nth-child(7) { width: 14%; }
  /* Slash-separated values otherwise overflow these two narrow columns. */
  .article--post .mtool-herb ~ table td:nth-child(4),
  .article--post .mtool-herb ~ table td:nth-child(5) { overflow-wrap: anywhere; }
}
@media screen and (max-width: 600px) {
  .article--post .mtool-herb ~ table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .article--post .mtool-herb ~ table th,
  .article--post .mtool-herb ~ table td {
    padding: 8px 10px;
    font-size: 14px;
  }
  /* Cell minimums size the inner table, not its scrolling block. */
  .article--post .mtool-herb ~ table th { box-sizing: border-box; }
  .article--post .mtool-herb ~ table th:nth-child(1) { min-width: 102px; }
  .article--post .mtool-herb ~ table th:nth-child(2) { min-width: 90px; }
  .article--post .mtool-herb ~ table th:nth-child(3) { min-width: 62px; }
  .article--post .mtool-herb ~ table th:nth-child(4) { min-width: 64px; }
  .article--post .mtool-herb ~ table th:nth-child(5) { min-width: 77px; }
  .article--post .mtool-herb ~ table th:nth-child(6) { min-width: 181px; }
  .article--post .mtool-herb ~ table th:nth-child(7) { min-width: 64px; }
  .article--post .mtool-herb ~ table th:first-child,
  .article--post .mtool-herb ~ table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg);
    box-shadow: 2px 0 3px -1px var(--line);
  }
  .article--post .mtool-herb ~ table th:first-child { background: var(--mist); }
}
}