/* HEATHEN HERITAGE / FOREST — dark-only theme
   Built from themes/_template.css; no HTML or JS dependencies.
   Install as /themes/forest.css and preview with ?theme=forest.
   Scoped entirely to html[data-theme="forest"]. Tarot imagery, card back,
   pixel-positioned spreads, rune glyph font and app logic remain unchanged.
   Colors: moss-black canvas, evergreen surfaces, ivory body, antique brass accents.
   Fonts use locally available system sans-serif stacks: no downloads, no CDN.
*/
[data-theme="forest"]{
  /* core palette */
  --midnight:#10221D;      --midnight-rgb:16,34,29;
  --midnight-2:#1B312A;    --midnight-2-rgb:27,49,42;
  --frost:#C4D7CC;         --frost-rgb:196,215,204;
  --bone:#F2F0E6;          --bone-rgb:242,240,230;
  --rune-red:#A95D59;      --rune-red-rgb:169,93,89;
  --aurora:#8EBA9E;        --aurora-rgb:142,186,158;
  --gold:#D2B781;          --gold-rgb:210,183,129;
  --line:rgba(var(--frost-rgb),0.18);

  /* gold shades: highlights, the gilded title gradient (light > mid > dark), hero glow */
  --gold-light:#E9D7AC;    --gold-light-rgb:233,215,172;
  --gold-mid:#C4A36B;
  --gold-dark:#9D7C4D;
  --gold-glow-rgb:126,115,75;
  --sheen-rgb:243,237,217;          /* hero title shine sweep */
  --bone-dim:#E1E7D9;               /* hero tagline */
  --white:#FFFFFF;         --white-rgb:255,255,255;
  --shadow-rgb:0,0,0;               /* box/text/drop shadows, darkening overlays */

  /* states */
  --aurora-soft-rgb:142,186,158;    /* "upright" badge border */
  --red-soft:#E4A49F;      --red-soft-rgb:228,164,159;   /* "reversed" badge, retrograde mark */
  --error:#F0AAA4;                  /* form and comment errors */

  /* overlays */
  --backdrop-rgb:7,18,14;           /* behind dialogs and lightboxes */
  --nav-menu-rgb:20,41,33;          /* open navbar dropdown */
  --vignette-rgb:7,22,17;            /* runes table */

  /* card face without artwork */
  --cardface-hi:#29473A;
  --cardface-lo:#172E25;

  /* rune stones: drawn glyph face; home page rune of the day (back and front) */
  --stone-face:#343A34;
  --stone-glyph:#EEE7D6;
  --stone-back-hi:#6A7066;  --stone-back-mid:#444C42;  --stone-back-lo:#2A342D;
  --stone-front-hi:#808579; --stone-front-mid:#535D51; --stone-front-lo:#333C34;

  /* Zodiac Wheel */
  --zw-sky-1:#2A4A42;      --zw-sky-2:#1B342E;      --zw-sky-3:#10231F;
  --zw-sun-disc:#20372F;
  --zw-sun-light:#EFDFB0;  --zw-sun-dark:#C8AC70;
  --zw-planet:#F0E2B8;
  --zw-retro:#E8A49F;

  /* runes cloth */
  --rw-cloth-1:#2C4940;    --rw-cloth-2:#1D342C;    --rw-cloth-3:#12271F;
  --rw-cloth-base:#10231D;

  /* home page starfield (canvas: read as "r,g,b" by index.php) */
  --star-rgb:200,217,200;
  --meteor-rgb:236,222,180;

  /* placeholder avatars (with --aurora) */
  --avatar-brown:#896C55;  --avatar-blue:#64848C;   --avatar-plum:#907085;   --avatar-moss:#7E9A6B;

  /* Font tokens. Cinzel and RunyTunes are self-hosted (@font-face above); a theme that
     brings its own fonts adds @font-face rules in its file. --font-display-alt differs
     from --font-display only in its fallback. Stacks that only exist to find
     astrology/runic symbol glyphs stay written out where they're used. */
  --font-heading:'Trebuchet MS','Segoe UI',system-ui,sans-serif;
  --font-heading-alt:var(--font-heading);   /* older parts of the site; same as --font-heading now that Cinzel loads */
  --font-body:'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-display:'Trebuchet MS','Segoe UI',system-ui,sans-serif;          /* hero title, decorative captions */
  --font-display-alt:var(--font-display);
  --font-ui:var(--font-body);  /* navbar dropdown descriptions */

  /* The panel beside every reading board (and My Account's reading view). */
  --panel-bg:linear-gradient(155deg, rgba(29,53,44,.97), rgba(13,31,25,.97));
  --panel-border:1px solid rgba(210,183,129,.33);
  --panel-radius:16px;
  --card-back-url:"/themes/forest/card-back.webp?v=1";   /* the card pulls and Celtic Cross read this through CardRender.backUrl(); 512 x 768 px, bump ?v= when replaced */

  /* Boxes. Content cards (home, blog, pricing, About, My Account, forum, recorded reading)
     come in three corner sizes; a theme can set all three the same. */
  --card-bg:#20382F;
  --card-border:1px solid rgba(210,183,129,.22);
  --card-radius:12px;
  --card-radius-lg:14px;      /* pricing plans, About */
  --card-radius-sm:10px;       /* forum */
  /* the sign-in / notice popup */
  --dialog-bg:#20382F;
  --dialog-border:1px solid rgba(210,183,129,.32);
  --dialog-radius:16px;
  --dialog-shadow:0 18px 44px rgba(0,0,0,.32);
  /* big popups: zoomed card, chart dialog, About lightbox; and the dim layer behind them */
  --popup-radius:16px;
  --popup-shadow:0 20px 46px rgba(0,0,0,.4);
  --backdrop:rgba(var(--backdrop-rgb),.78);
  /* navbar dropdown menus */
  --menu-bg:rgba(var(--nav-menu-rgb),.98);
  --menu-border:1px solid rgba(210,183,129,.3);
  --menu-radius:12px;
  --menu-shadow:0 14px 34px rgba(0,0,0,.35);

  /* Buttons. Filled (gold) buttons: sign in, save, send, post, cast. Outline buttons
     draw their border and text from --gold; they share the corner sizes below. */
  --btn-bg:#D2B781;
  --btn-text:#10221D;
  --btn-hover-bg:#E9D7AC;
  --btn-radius:9px;
  --btn-radius-sm:8px;        /* navbar, forum, comments, rune of the day */
  /* Form fields */
  --field-bg:rgba(7,22,16,.48);
  --field-border:1px solid rgba(196,215,204,.30);
  --field-text:#F2F0E6;
  --field-radius:9px;
  --field-radius-lg:11px;      /* textareas */
  --field-focus:#E9D7AC;                  /* border colour while typing */
  --field-focus-soft:rgba(233,215,172,.65);
  --focus-ring:2px solid #E9D7AC;         /* keyboard focus outline */

  /* Text size: every fixed font size is calc(<size> * var(--text-scale)), so 1.1 makes all
     text 10% larger. Text drawn inside SVG (wheel, runes cloth), on card faces and on
     rune stones keeps its size, so the drawings don't break. */
  --text-scale:1;

  /* Card back image (card pulls, Celtic Cross). A CSS string, read by card-render.js. */
}

/* Design primitives specific to this theme; isolated from the default theme. */
[data-theme="forest"] {
  --surface-raised:#29463A; /* menus, active panels */
  --surface-sunken:#11271E; /* inset sections and empty states */
  --text-muted:#C4D7CC;    /* descriptions, hints */
  --heading-text:#F2F0E6;  /* headings and major values */
  --accent-secondary:#97B69E; /* subtle nature accent */
  --link-color:#E9D7AC;
  --divider-color:rgba(210,183,129,.24);
  --locked-color:#D2B781;
  --badge-free:#92ABA0;
  --badge-silver-thread:#B8C6C2;
  --badge-moonlit-circle:#B6BDDE;
  --badge-north-star:#D2B781;
  --badge-wolf-crown:#D5B9A0;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px;
  --radius-sm:8px; --radius-base:12px; --radius-lg:16px;
  --shadow-soft:0 8px 22px rgba(0,0,0,.18);
  --shadow-raised:0 14px 34px rgba(0,0,0,.28);
  --motion-fast:150ms; --motion-base:220ms; --motion-slow:420ms;
  --motion-ease:cubic-bezier(.2,.7,.2,1);
  --flip-time:800ms; --deal-time:400ms;
  --type-xs:clamp(11px,1vw,12px); --type-sm:clamp(12px,1.1vw,14px);
  --type-base:clamp(14px,1.2vw,16px); --type-md:clamp(17px,1.8vw,20px);
  --type-lg:clamp(23px,2.6vw,32px); --type-xl:clamp(32px,5vw,64px);
  --body-leading:1.6; --heading-leading:1.15;
  --heading-tracking:.055em;
}

/* Navigation: quiet modern type, flat translucent wood-and-moss surface. */
[data-theme="forest"] .site-nav {
  background:rgba(12,31,24,.96);
  border-bottom:1px solid var(--divider-color);
  box-shadow:0 4px 20px rgba(0,0,0,.15);
}
[data-theme="forest"] .nav-link,
[data-theme="forest"] .nav-auth-btn,
[data-theme="forest"] .drawer-link {
  font-family:var(--font-heading); letter-spacing:.055em; font-weight:600;
}
[data-theme="forest"] .nav-auth-btn,
[data-theme="forest"] .auth-submit { border-radius:var(--btn-radius); }
[data-theme="forest"] .nav-drop-menu,
[data-theme="forest"] .nav-drawer { background:var(--menu-bg); }

/* Hero (hero-section.php on About; the forest homepage builds on the same classes). */
[data-theme="forest"] .hero { height:clamp(360px,34vw,510px); }
[data-theme="forest"] .hero-bg::after {
  background:linear-gradient(90deg,rgba(9,25,18,.85) 0%,rgba(9,25,18,.53) 46%,rgba(9,25,18,.08) 100%),
             linear-gradient(0deg,rgba(10,28,21,.52),transparent 55%);
}
[data-theme="forest"] .hero-content { top:clamp(105px,11vw,160px); }
[data-theme="forest"] .hero-eyebrow {
  font-size:var(--type-sm); font-weight:600; letter-spacing:.22em;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}
[data-theme="forest"] .hero-title,
[data-theme="forest"] .hero-title-reflection {
  font-family:var(--font-display); font-weight:600;
  letter-spacing:.07em; font-size:clamp(38px,6vw,72px);
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.48));
}
/* Retain the original hero-title sheen animation; reduced-motion mode still disables it. */
[data-theme="forest"] .hero-tagline {font-family:var(--font-body); font-size:var(--type-sm); font-weight:450; line-height:1.65;}
[data-theme="forest"] .rotd {border:var(--card-border);box-shadow:var(--shadow-soft);}

/* QA round 1: don't reduce secondary-text contrast via opacity.
   The developer measured the original opacity-based text as 2.5–3.9:1.
   Use solid palette values so backgrounds and transparency remain predictable.
   Recheck rendered contrast after deployment (especially text over images). */
/* QA round 2 (Claude Code): :is() instead of :where(), so this outranks base rules such as
   .pl-panel .qmodal-eyebrow (two classes); five more dimmed texts added (last line). */
[data-theme="forest"] :is(
  .hbc-date, .hrc-glyph, .lrc-discount-label, .lrc-pct,
  .drawer-section-label, .drawer-tier, .qmodal-eyebrow,
  .pricing-eyebrow, .ps-text, .forum-card-meta, .comments-empty,
  .readings-disclaimer, .ptc-desc, .about-eyebrow, .forum-card-desc, .post-meta
) { opacity:1; color:var(--frost); }
[data-theme="forest"] .site-footer { opacity:1; color:var(--bone); }
/* homepage: the footer is a full-width dark-green band that starts right under the membership band and runs to the bottom of the page; its text keeps its 640px centred column */
[data-theme="forest"] body:is(.pg-fh, :has(.fh-main)) .site-footer { max-width:none; margin:0; padding:28px max(24px, calc((100% - 980px) / 2)); background:var(--midnight); text-align:center; }
/* A monthly-period suffix inherits the price parent's muted opacity in base CSS.
   Specific target avoids changing the numeric plan price. */
/* QA round 2: the "/month" suffix is .ptc-price span (pricing.php price_text()). */
[data-theme="forest"] :is(.ptc-price,.lrc-price) span {
  opacity:1; color:var(--frost);
}

/* Reading-stage rules: NO changes to card/slot sizes, transforms, positions or imagery. */
[data-theme="forest"] .pl-page,
[data-theme="forest"] .cc-page,
[data-theme="forest"] .rw-page,
[data-theme="forest"] .zw-page,
[data-theme="forest"] .hs-page {
  background:radial-gradient(ellipse at 42% 22%,rgba(91,126,99,.15),transparent 52%);
}
[data-theme="forest"] .pl-panel,
[data-theme="forest"] .cc-panel,
[data-theme="forest"] .rw-panel,
[data-theme="forest"] .zw-panel,
[data-theme="forest"] .hs-panel {
  box-shadow:var(--shadow-raised);
}
[data-theme="forest"] .pl-title,
[data-theme="forest"] .cc-title,
[data-theme="forest"] .rw-title,
[data-theme="forest"] .zw-title,
[data-theme="forest"] .hs-title {font-weight:650;letter-spacing:.015em;}
[data-theme="forest"] .pl-sub,
[data-theme="forest"] .cc-sub,
[data-theme="forest"] .rw-sub,
[data-theme="forest"] .zw-sub,
[data-theme="forest"] .hs-sub {font-style:normal;opacity:.92;}
[data-theme="forest"] .pl-chip,
[data-theme="forest"] .cc-chip,
[data-theme="forest"] .rw-chip,
[data-theme="forest"] .zw-chip {border-radius:999px;min-width:34px;}
[data-theme="forest"] .v-pos {letter-spacing:.13em;font-weight:700;}
[data-theme="forest"] .v-sub {font-style:normal;opacity:.9;}
/* System interaction: tabs, keyboard navigation, form state and accessibility. */
[data-theme="forest"] :where(a,button,input,textarea,select,[tabindex]):focus-visible {
  outline:3px solid var(--gold-light); outline-offset:3px;
}
[data-theme="forest"] :where(button,input,select,textarea) {accent-color:var(--gold);}
[data-theme="forest"] :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  border-radius:var(--field-radius); color:var(--field-text);
}
[data-theme="forest"] :where(button,a[role="button"]) {
  transition:background-color var(--motion-base) var(--motion-ease),
             border-color var(--motion-base) var(--motion-ease),
             color var(--motion-base) var(--motion-ease);
}
[data-theme="forest"] :where(button,a[role="button"]):disabled {
  opacity:.48; cursor:not-allowed;
}
[data-theme="forest"] :where(.nav-auth-btn,.auth-submit,.pl-nav,.cc-nav,.rw-nav,.zw-nav) {
  min-height:44px;
}
[data-theme="forest"] :where(input,select,textarea):disabled {opacity:.58; cursor:not-allowed;}
[data-theme="forest"] :where(.auth-error,[aria-invalid="true"]) {border-color:var(--error);}
[data-theme="forest"] .modal-box {box-shadow:var(--dialog-shadow);}
/* the notice dialog (sign-in prompts, the Rune Credit purchase) wears the reading panels' look: their gradient,
   a gold border and Kira's corner flourish in all four corners (the same mask as the panels, further down) */
[data-theme="forest"] #noticeModalOverlay .modal-box {
  --fh-ornament-size:46px;
  max-width:430px; padding:38px 40px 36px; isolation:isolate;
  background:var(--panel-bg); border:1px solid var(--fh-ornament); border-radius:18px;
}
[data-theme="forest"] #noticeModalOverlay .modal-box::after {
  content:''; position:absolute; inset:var(--fh-ornament-inset); z-index:-1; pointer-events:none; opacity:.8;
  background:var(--fh-ornament);
  -webkit-mask-image:var(--fh-corner-tl), var(--fh-corner-tr), var(--fh-corner-br), var(--fh-corner-bl);
          mask-image:var(--fh-corner-tl), var(--fh-corner-tr), var(--fh-corner-br), var(--fh-corner-bl);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left top, right top, right bottom, left bottom; mask-position:left top, right top, right bottom, left bottom;
  -webkit-mask-size:var(--fh-ornament-size) var(--fh-ornament-size); mask-size:var(--fh-ornament-size) var(--fh-ornament-size);
}
[data-theme="forest"] #noticeModalOverlay .modal-close { top:14px; right:60px; z-index:1; }   /* just left of the top-right flourish */

@media (max-width:720px) {
  [data-theme="forest"] .hero {height:clamp(340px,90vw,445px);}
  [data-theme="forest"] .hero-content {top:clamp(104px,28vw,145px);padding:0 18px;}
  [data-theme="forest"] .hero-title {font-size:clamp(30px,8.5vw,48px);}
  [data-theme="forest"] .hero-title-reflection {font-size:clamp(30px,8.5vw,48px);}
  [data-theme="forest"] .hero-tagline {max-width:95%;}
}
@media (prefers-reduced-motion:reduce) {
  [data-theme="forest"] .hero-title,
  [data-theme="forest"] .reveal,
  [data-theme="forest"] .home-reading-card,
  [data-theme="forest"] .home-blog-card,
  [data-theme="forest"] .nav-link {animation:none!important; transition:none!important;translate:none!important;}
  [data-theme="forest"] .reveal {opacity:1!important;}
  /* JavaScript-managed card flip/deal transforms remain intact; do not disable them. */
}

/* =======================================================================
   HERO: refined from ChatGPT's homepage v1 (shared by About and the forest homepage)
   ======================================================================= */
[data-theme="forest"] .hero { min-height:455px; height:min(54vw,550px); isolation:isolate; }
[data-theme="forest"] .hero-bg {
  background-image:linear-gradient(90deg, rgba(7,24,19,.88) 0%, rgba(9,31,23,.63) 31%, rgba(12,32,24,.10) 73%),
                   var(--fh-hero-img);
  background-position:center center;
}
[data-theme="forest"] .hero-bg::after { background:linear-gradient(0deg,rgba(9,30,22,.35),transparent 45%); }
[data-theme="forest"] .hero-content { top:auto; left:max(5vw,24px); right:auto; bottom:15%; align-items:flex-start; max-width:min(600px,70%); }
[data-theme="forest"] .hero-title-block { align-items:flex-start; }
[data-theme="forest"] .hero-title { font-size:clamp(38px,5.4vw,74px); line-height:1.08; letter-spacing:.045em; }
[data-theme="forest"] .hero-eyebrow { font-size:clamp(12px,1.5vw,17px); letter-spacing:.2em; }
[data-theme="forest"] .hero-tagline { text-align:left; letter-spacing:.035em; font-family:var(--font-body); text-transform:none;
  font-size:clamp(13px,1.3vw,17px); max-width:560px; line-height:1.65; }
[data-theme="forest"] .hero-tagline br { display:none; }   /* the hard break left an orphan line */
[data-theme="forest"] .hero-reflection-wrap { display:none; }
[data-theme="forest"] #stars { pointer-events:none; opacity:.24; }
[data-theme="forest"] .rotd { margin:38px auto 0; background:linear-gradient(130deg,rgba(31,56,43,.96),rgba(16,38,29,.96)); box-shadow:0 8px 30px rgba(0,0,0,.12); }
@media (max-width:600px) {
  [data-theme="forest"] .hero { height:440px; min-height:0; }
  /* the text spans the whole photo on phones (sunset and mist included): an even shade, not left-to-right */
  [data-theme="forest"] .hero-bg {
    background-image:linear-gradient(0deg, rgba(8,28,21,.88), rgba(8,28,21,.78) 55%, rgba(8,28,21,.74)),
                     var(--fh-hero-img);
    background-position:65% center;
  }
  [data-theme="forest"] .hero-content { max-width:calc(100% - 32px); left:16px; bottom:12%; right:16px; }
  [data-theme="forest"] .hero-title { font-size:clamp(33px,9vw,47px); }
  [data-theme="forest"] .hero-tagline { font-size:calc(0.8125rem * var(--text-scale)); max-width:95%; }
}

/* =======================================================================
   NAVBAR: light bar with the emblem, after the reference rendering (restyle only:
   same menus and markup). The open drawer on phones stays dark.
   ======================================================================= */
[data-theme="forest"] {
  --fh-ink-rgb:26,44,36; --fh-cream:#EEF0E8; --fh-cream-rgb:238,240,232; --fh-cream-line:#D3DBD0; --fh-paper:#F8F8F3;
  --fh-ink:#1A2C24; --fh-ink-soft:#3E5448; --fh-bronze:#77592E;
  --fh-warm:#E4E4DC; --fh-parchment:#E6DCC4; --fh-warm-hi:#E9E9E1; --fh-green:#2E4A3A; --fh-green-hover:#3B5C48;
  --fh-hero-img:url('/themes/forest/hero-fjord-longship.webp?v=3');   /* a page sets its own on .hero (pricing); the ?v= on this picture's three links must be bumped together when the file is replaced, as browsers keep a ?v= address a year (.htaccess); v=3 = re-encoded 2026-10-23 */
  --fh-ornament:#b89b60; --fh-ornament-size:76px; --fh-ornament-inset:8px; --fh-card-dark:#071d17;   /* from Kira's .ornamented-card CSS; the flourish is her SVG (top left), turned for the other corners */
  --fh-corner-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 88V21C5 12 12 5 21 5H88'/%3E %3Cpath d='M11 75V25C11 17 17 11 25 11H75' opacity='.55'/%3E %3Cpath d='M11 47C27 47 36 33 29 22C25 15 15 16 15 23C15 29 24 30 27 24'/%3E %3Cpath d='M47 11C47 27 33 36 22 29C15 25 16 15 23 15C29 15 30 24 24 27'/%3E %3Cpath d='M18 44C21 34 35 33 40 39C46 46 41 55 34 53C29 51 30 44 35 44'/%3E %3Cpath d='M44 18C34 21 33 35 39 40C46 46 55 41 53 34C51 29 44 30 44 35'/%3E %3Cpath d='M24 36C25 26 35 22 42 27C49 32 45 41 38 39C33 37 35 31 39 32'/%3E %3Cpath d='M36 24C26 25 22 35 27 42C32 49 41 45 39 38C37 33 31 35 32 39'/%3E %3Cpath d='M11 59C17 50 25 51 25 59C25 65 16 67 18 73C19 77 23 79 22 85'/%3E %3Cpath d='M59 11C50 17 51 25 59 25C65 25 67 16 73 18C77 19 79 23 85 22'/%3E %3Cpath d='M11 39L17 43L11 47M39 11L43 17L47 11'/%3E %3Cpath d='M45 45L49 51L45 57L41 51Z' opacity='.75'/%3E %3Cpath d='M56 13C57 6 66 5 70 11C63 13 59 16 56 13ZM13 56C6 57 5 66 11 70C13 63 16 59 13 56Z'/%3E%3C/svg%3E");
  --fh-corner-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(90 48 48)'%3E%3Cpath d='M5 88V21C5 12 12 5 21 5H88'/%3E %3Cpath d='M11 75V25C11 17 17 11 25 11H75' opacity='.55'/%3E %3Cpath d='M11 47C27 47 36 33 29 22C25 15 15 16 15 23C15 29 24 30 27 24'/%3E %3Cpath d='M47 11C47 27 33 36 22 29C15 25 16 15 23 15C29 15 30 24 24 27'/%3E %3Cpath d='M18 44C21 34 35 33 40 39C46 46 41 55 34 53C29 51 30 44 35 44'/%3E %3Cpath d='M44 18C34 21 33 35 39 40C46 46 55 41 53 34C51 29 44 30 44 35'/%3E %3Cpath d='M24 36C25 26 35 22 42 27C49 32 45 41 38 39C33 37 35 31 39 32'/%3E %3Cpath d='M36 24C26 25 22 35 27 42C32 49 41 45 39 38C37 33 31 35 32 39'/%3E %3Cpath d='M11 59C17 50 25 51 25 59C25 65 16 67 18 73C19 77 23 79 22 85'/%3E %3Cpath d='M59 11C50 17 51 25 59 25C65 25 67 16 73 18C77 19 79 23 85 22'/%3E %3Cpath d='M11 39L17 43L11 47M39 11L43 17L47 11'/%3E %3Cpath d='M45 45L49 51L45 57L41 51Z' opacity='.75'/%3E %3Cpath d='M56 13C57 6 66 5 70 11C63 13 59 16 56 13ZM13 56C6 57 5 66 11 70C13 63 16 59 13 56Z'/%3E%3C/g%3E%3C/svg%3E");
  --fh-corner-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(180 48 48)'%3E%3Cpath d='M5 88V21C5 12 12 5 21 5H88'/%3E %3Cpath d='M11 75V25C11 17 17 11 25 11H75' opacity='.55'/%3E %3Cpath d='M11 47C27 47 36 33 29 22C25 15 15 16 15 23C15 29 24 30 27 24'/%3E %3Cpath d='M47 11C47 27 33 36 22 29C15 25 16 15 23 15C29 15 30 24 24 27'/%3E %3Cpath d='M18 44C21 34 35 33 40 39C46 46 41 55 34 53C29 51 30 44 35 44'/%3E %3Cpath d='M44 18C34 21 33 35 39 40C46 46 55 41 53 34C51 29 44 30 44 35'/%3E %3Cpath d='M24 36C25 26 35 22 42 27C49 32 45 41 38 39C33 37 35 31 39 32'/%3E %3Cpath d='M36 24C26 25 22 35 27 42C32 49 41 45 39 38C37 33 31 35 32 39'/%3E %3Cpath d='M11 59C17 50 25 51 25 59C25 65 16 67 18 73C19 77 23 79 22 85'/%3E %3Cpath d='M59 11C50 17 51 25 59 25C65 25 67 16 73 18C77 19 79 23 85 22'/%3E %3Cpath d='M11 39L17 43L11 47M39 11L43 17L47 11'/%3E %3Cpath d='M45 45L49 51L45 57L41 51Z' opacity='.75'/%3E %3Cpath d='M56 13C57 6 66 5 70 11C63 13 59 16 56 13ZM13 56C6 57 5 66 11 70C13 63 16 59 13 56Z'/%3E%3C/g%3E%3C/svg%3E");
  --fh-corner-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(270 48 48)'%3E%3Cpath d='M5 88V21C5 12 12 5 21 5H88'/%3E %3Cpath d='M11 75V25C11 17 17 11 25 11H75' opacity='.55'/%3E %3Cpath d='M11 47C27 47 36 33 29 22C25 15 15 16 15 23C15 29 24 30 27 24'/%3E %3Cpath d='M47 11C47 27 33 36 22 29C15 25 16 15 23 15C29 15 30 24 24 27'/%3E %3Cpath d='M18 44C21 34 35 33 40 39C46 46 41 55 34 53C29 51 30 44 35 44'/%3E %3Cpath d='M44 18C34 21 33 35 39 40C46 46 55 41 53 34C51 29 44 30 44 35'/%3E %3Cpath d='M24 36C25 26 35 22 42 27C49 32 45 41 38 39C33 37 35 31 39 32'/%3E %3Cpath d='M36 24C26 25 22 35 27 42C32 49 41 45 39 38C37 33 31 35 32 39'/%3E %3Cpath d='M11 59C17 50 25 51 25 59C25 65 16 67 18 73C19 77 23 79 22 85'/%3E %3Cpath d='M59 11C50 17 51 25 59 25C65 25 67 16 73 18C77 19 79 23 85 22'/%3E %3Cpath d='M11 39L17 43L11 47M39 11L43 17L47 11'/%3E %3Cpath d='M45 45L49 51L45 57L41 51Z' opacity='.75'/%3E %3Cpath d='M56 13C57 6 66 5 70 11C63 13 59 16 56 13ZM13 56C6 57 5 66 11 70C13 63 16 59 13 56Z'/%3E%3C/g%3E%3C/svg%3E");
  --fh-corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(90 48 48)'%3E%3Cpath d='M5 88V21C5 12 12 5 21 5H88'/%3E %3Cpath d='M11 75V25C11 17 17 11 25 11H75' opacity='.55'/%3E %3Cpath d='M11 47C27 47 36 33 29 22C25 15 15 16 15 23C15 29 24 30 27 24'/%3E %3Cpath d='M47 11C47 27 33 36 22 29C15 25 16 15 23 15C29 15 30 24 24 27'/%3E %3Cpath d='M18 44C21 34 35 33 40 39C46 46 41 55 34 53C29 51 30 44 35 44'/%3E %3Cpath d='M44 18C34 21 33 35 39 40C46 46 55 41 53 34C51 29 44 30 44 35'/%3E %3Cpath d='M24 36C25 26 35 22 42 27C49 32 45 41 38 39C33 37 35 31 39 32'/%3E %3Cpath d='M36 24C26 25 22 35 27 42C32 49 41 45 39 38C37 33 31 35 32 39'/%3E %3Cpath d='M11 59C17 50 25 51 25 59C25 65 16 67 18 73C19 77 23 79 22 85'/%3E %3Cpath d='M59 11C50 17 51 25 59 25C65 25 67 16 73 18C77 19 79 23 85 22'/%3E %3Cpath d='M11 39L17 43L11 47M39 11L43 17L47 11'/%3E %3Cpath d='M45 45L49 51L45 57L41 51Z' opacity='.75'/%3E %3Cpath d='M56 13C57 6 66 5 70 11C63 13 59 16 56 13ZM13 56C6 57 5 66 11 70C13 63 16 59 13 56Z'/%3E%3C/g%3E%3C/svg%3E");
  --fh-display:'Cinzel',Georgia,serif;        /* the reference's inscription capitals */
}
[data-theme="forest"] .site-nav { background:var(--fh-cream); border-bottom:1px solid var(--fh-cream-line); box-shadow:0 2px 14px rgba(0,0,0,.18); }
[data-theme="forest"] .nav-logo {
  display:inline-flex; align-items:center; gap:10px; max-width:158px; white-space:normal;
  font-family:var(--fh-display); font-size:calc(1rem * var(--text-scale)); font-weight:600; line-height:1.05; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fh-ink);
}
[data-theme="forest"] .nav-logo::before {
  content:''; flex:none; width:38px; height:38px; background:currentColor;
  -webkit-mask:url('/themes/forest/emblem.svg?v=1') center / contain no-repeat; mask:url('/themes/forest/emblem.svg?v=1') center / contain no-repeat;
}
[data-theme="forest"] .nav-logo:hover { color:var(--fh-green); }
[data-theme="forest"] .nav-link { color:var(--fh-ink); opacity:1; }   /* the base dims links to 75% */
[data-theme="forest"] .nav-link:hover { color:var(--fh-bronze); }
[data-theme="forest"] .nav-caret { color:var(--fh-ink-soft); opacity:1; }   /* the base dims it to 60% */
[data-theme="forest"] .nav-drop-menu { background:var(--fh-paper); border:1px solid var(--fh-cream-line); box-shadow:0 14px 34px rgba(0,0,0,.18); }
[data-theme="forest"] .drop-fly-menu { background:var(--fh-paper); border:1px solid var(--fh-cream-line); box-shadow:0 14px 34px rgba(0,0,0,.18); }
[data-theme="forest"] .drop-row:hover, [data-theme="forest"] .drop-fly.open > .drop-fly-btn { background:rgba(46,74,58,.08); }
[data-theme="forest"] .drop-label { color:var(--fh-ink); }
[data-theme="forest"] .drop-desc { color:var(--fh-ink-soft); opacity:1; }
/* navbar buttons (Sign in, Register, My readings, Sign out): the text plus a little padding, in em so it follows the text size (the drawer's buttons keep their larger touch size) */
[data-theme="forest"] .site-nav .nav-auth-btn { min-height:0; padding:.45em .8em; line-height:1.2; }
[data-theme="forest"] .nav-auth-btn { background:transparent; color:var(--fh-ink); border:1px solid var(--fh-ink); }
[data-theme="forest"] .nav-auth-btn:hover { background:rgba(26,44,36,.08); }
[data-theme="forest"] .nav-auth-btn--gold { background:var(--fh-green); color:var(--fh-cream); border-color:var(--fh-green); }
[data-theme="forest"] .nav-auth-btn--gold:hover { background:var(--fh-green-hover); color:var(--fh-cream); }
[data-theme="forest"] .nav-auth-btn--readings { color:var(--fh-ink); }
[data-theme="forest"] .nav-greeting { color:var(--fh-ink-soft); }
[data-theme="forest"] .nav-greeting .name { color:var(--fh-bronze); }
[data-theme="forest"] .nav-credits { color:var(--fh-bronze); }
[data-theme="forest"] .nav-burger span { background:var(--fh-ink); }
/* the drawer stays dark: put its buttons back on the dark scheme */
[data-theme="forest"] .nav-drawer .nav-auth-btn { color:var(--gold); border-color:rgba(var(--gold-rgb),.5); }
[data-theme="forest"] .nav-drawer .nav-auth-btn--gold { background:var(--gold); color:var(--midnight); border-color:var(--gold); }

/* Alata (Google Fonts, SIL OFL; themes/forest/Alata-LICENSE.txt), self-hosted: the homepage title */
@font-face { font-family:'Alata'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/themes/forest/Alata-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; }

/* =======================================================================
   FOREST HOMEPAGE (themes/forest/home.php, ".fh-" classes)
   Light cream bands alternate with dark forest ones, after the reference rendering.
   ======================================================================= */
[data-theme="forest"] .fh-main { display:block; }
[data-theme="forest"] .fh-main > section { max-width:none; margin:0; padding:0; }   /* styles.css boxes every <section> at 980px (direct children only: the About page's own sections keep their styles) */
[data-theme="forest"] .fh-icon { width:100%; height:100%; display:block; }
[data-theme="forest"] .fh-btn-arrow { width:16px; height:16px; flex:none; }
[data-theme="forest"] .fh-kicker { margin:0 0 10px; font-family:var(--font-body); font-size:calc(0.75rem * var(--text-scale)); font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
[data-theme="forest"] .fh-h2 { margin:0; font-family:var(--fh-display); font-weight:500; font-size:clamp(26px,3.4vw,44px); line-height:1.15; letter-spacing:.1em; text-transform:uppercase; color:var(--bone); }
[data-theme="forest"] .fh-ornament { display:flex; align-items:center; gap:14px; width:min(320px,100%); margin:16px 0; color:var(--gold); }
[data-theme="forest"] .fh-ornament::before, [data-theme="forest"] .fh-ornament::after { content:''; flex:1; height:1px; background:currentColor; opacity:.55; }
[data-theme="forest"] .fh-ornament svg { width:22px; height:22px; flex:none; }
[data-theme="forest"] .fh-btn {
  display:inline-flex; align-items:center; gap:12px; min-height:46px; padding:12px 26px; box-sizing:border-box;
  background:var(--fh-green); color:var(--fh-cream); border:1px solid rgba(var(--gold-rgb),.55); border-radius:2px;
  font-family:var(--font-body); font-size:calc(0.8125rem * var(--text-scale)); font-weight:600; letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  transition:background var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease);
}
[data-theme="forest"] .fh-btn:hover { background:var(--fh-green-hover); border-color:var(--gold); }

/* hero: the shared hero, with the reference's eyebrow, two-tone title, ornament and button */
[data-theme="forest"] .fh-hero { height:calc(min(46vw,600px) + 56px); min-height:536px; }   /* +56px: the navbar floats over the hero's top edge (see NAVBAR FLOATS) */
/* positioned from the bottom: the parallax script writes transform on scroll, so it can't centre */
/* the hero's text is centred, across and down, in the part below the floating navbar (top and bottom both 0: the parallax script writes transform, so it can't centre that way) */
[data-theme="forest"] .fh-hero-content { top:0; bottom:0; padding-top:56px; left:0; right:0; max-width:none; align-items:center; justify-content:center; text-align:center; }
[data-theme="forest"] .fh-eyebrow { margin:0 0 14px; font-family:var(--font-body); font-size:calc(0.8125rem * var(--text-scale)); font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); text-shadow:0 1px 6px rgba(0,0,0,.6); }
[data-theme="forest"] .fh-title { margin:0; font-family:'Alata',var(--fh-display); font-weight:400; font-size:clamp(40px,5.6vw,80px); line-height:1.02; letter-spacing:.08em; text-transform:uppercase; color:var(--bone); text-shadow:0 2px 14px rgba(0,0,0,.45); }
[data-theme="forest"] .fh-title span { display:block; color:var(--gold); }
[data-theme="forest"] .fh-trio { margin:0; font-family:var(--font-body); font-size:calc(0.9375rem * var(--text-scale)); font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--bone); }
[data-theme="forest"] .fh-trio span { color:var(--gold); padding:0 .2em; }


/* latest forum posts: green band over the still forest photo (the forum's own green bands), between the light blog
   band and the light "Explore your path" band */
/* sections further down the homepage are drawn (and their pictures fetched) only when the visitor scrolls near them:
   on a slow phone this kept about 700 KB of pictures from competing with the top of the page (2026-10-28) */
[data-theme="forest"] :is(.fh-blog, .fh-library, .fh-forum, .fh-runeday, .fh-member) { content-visibility:auto; contain-intrinsic-size:auto 640px; }
[data-theme="forest"] .fh-forum {
  background:linear-gradient(rgba(var(--midnight-rgb),.88), rgba(var(--midnight-rgb),.88)),
             url('/themes/forest/bg-forest.webp?v=2') center / cover no-repeat fixed var(--midnight);
  color:var(--bone); padding:52px var(--fh-side) 60px !important;
}
/* the forum page's hero title (Alata capitals, "Longhouse" in gold), centred above the band's own heading */
[data-theme="forest"] .fh-forum-banner { display:flex; align-items:center; justify-content:center; gap:28px; margin:0 auto; text-align:center; font-family:'Alata',var(--fh-display); font-weight:400; font-size:clamp(30px,3.6vw,54px); line-height:1.1; letter-spacing:.08em; text-transform:uppercase; color:var(--bone); text-shadow:0 2px 14px rgba(0,0,0,.45); text-wrap:balance; }
[data-theme="forest"] .fh-forum-banner .fh-gold { color:var(--gold); }
/* a thin gold line each side of the title, fading out towards the edges */
[data-theme="forest"] .fh-forum-banner::before, [data-theme="forest"] .fh-forum-banner::after { content:''; flex:0 1 160px; min-width:24px; height:1px; opacity:.85; }
[data-theme="forest"] .fh-forum-banner::before { background:linear-gradient(90deg, transparent, var(--gold-mid)); }
[data-theme="forest"] .fh-forum-banner::after { background:linear-gradient(270deg, transparent, var(--gold-mid)); }
[data-theme="forest"] .fh-forum .fh-ornament { margin:12px auto 34px; width:min(340px,100%); color:var(--gold-mid); }
[data-theme="forest"] .fh-forum .fh-ornament svg { width:30px; height:30px; }
[data-theme="forest"] .fh-forum .fh-ornament::before { background:linear-gradient(90deg, transparent, currentColor); opacity:.85; }
[data-theme="forest"] .fh-forum .fh-ornament::after { background:linear-gradient(270deg, transparent, currentColor); opacity:.85; }
[data-theme="forest"] .fh-forum-head { display:flex; align-items:center; gap:18px; max-width:1240px; margin:0 auto 24px; }
[data-theme="forest"] .fh-forum-all { margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:calc(0.78125rem * var(--text-scale)); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); text-decoration:none; }
[data-theme="forest"] .fh-forum-all:hover { color:var(--gold-light); }
[data-theme="forest"] .fh-forum-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 22px; max-width:1240px; margin:0 auto; padding:0; list-style:none; }
[data-theme="forest"] .fh-fpost {
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"title last" "meta last"; column-gap:18px; row-gap:4px; align-items:center;
  padding:16px 22px; background:rgba(var(--midnight-rgb),.45); border:1px solid rgba(var(--gold-rgb),.28); border-radius:18px;
  transition:border-color var(--motion-base) var(--motion-ease);
}
[data-theme="forest"] .fh-fpost:hover { border-color:rgba(var(--gold-rgb),.6); }
[data-theme="forest"] .fh-fpost-title { grid-area:title; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; line-height:1.35; font-size:calc(1.03125rem * var(--text-scale)); font-weight:650; color:var(--bone); text-decoration:none; }
[data-theme="forest"] .fh-fpost-title:hover { color:var(--gold-light); }
[data-theme="forest"] .fh-fpost-meta { grid-area:meta; font-size:calc(0.8125rem * var(--text-scale)); color:var(--frost); }
[data-theme="forest"] .fh-fpost-meta a { color:var(--gold-light); text-decoration:none; }
[data-theme="forest"] .fh-fpost-meta a:hover { text-decoration:underline; }
[data-theme="forest"] .fh-fpost-last { grid-area:last; text-align:right; font-size:calc(0.75rem * var(--text-scale)); line-height:1.5; color:var(--frost); }
[data-theme="forest"] .fh-forum-empty { max-width:1240px; margin:0 auto; font-size:calc(1rem * var(--text-scale)); color:var(--frost); }
[data-theme="forest"] .fh-forum-empty a { color:var(--gold-light); }
[data-theme="forest"] .fh-forum :focus-visible { outline-color:var(--gold-light); }

/* rune of the day: light band after the green forum band; the original homepage's casting stone (.rotd, css/home.css) on a
   white card */
[data-theme="forest"] .fh-runeday { background:var(--fh-cream); color:var(--fh-ink); padding:52px var(--fh-side) 60px !important; }
[data-theme="forest"] .fh-runeday[hidden] { display:none; }
[data-theme="forest"] .fh-runeday-head { display:flex; align-items:center; gap:18px; max-width:1240px; margin:0 auto 24px; }
[data-theme="forest"] .fh-runeday .fh-sec-title { color:var(--fh-ink); }
[data-theme="forest"] .fh-runeday .fh-sec-title::after { background:var(--fh-bronze); }
[data-theme="forest"] .fh-runeday-all { margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:calc(0.78125rem * var(--text-scale)); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fh-ink); text-decoration:none; }
[data-theme="forest"] .fh-runeday-all:hover { color:var(--fh-bronze); }
[data-theme="forest"] .fh-runeday-intro { max-width:1240px; margin:-6px auto 24px; font-size:calc(1rem * var(--text-scale)); line-height:1.7; color:var(--fh-ink-soft); }
[data-theme="forest"] .fh-runeday-intro a { color:var(--fh-green); font-weight:600; text-decoration:underline; text-decoration-color:rgba(var(--fh-ink-rgb),.3); text-underline-offset:3px; }
[data-theme="forest"] .fh-runeday-intro a:hover { color:var(--fh-bronze); text-decoration-color:currentColor; }
[data-theme="forest"] .fh-runeday .rotd { width:auto; max-width:1240px; margin:0 auto; padding:32px 40px; gap:44px; background:var(--white); border:1px solid var(--fh-cream-line); border-radius:18px; box-shadow:0 4px 18px rgba(var(--fh-ink-rgb),.06); }
/* the stone shows the rune at once: its front face only, no casting, no bobbing */
[data-theme="forest"] .fh-runeday .rotd-stone--shown { animation:none; cursor:default; }
[data-theme="forest"] .fh-runeday .rotd-stone--shown .rotd-front { transform:none; }
[data-theme="forest"] .fh-runeday .rotd-label { color:var(--fh-bronze); opacity:1; font-family:var(--font-body); font-weight:700; letter-spacing:.16em; }
[data-theme="forest"] .fh-runeday .rotd-title { font-family:'Alata',var(--fh-display); letter-spacing:.04em; color:var(--fh-ink); }
[data-theme="forest"] .fh-runeday .rotd-aett { color:var(--fh-ink-soft); opacity:1; }
[data-theme="forest"] .fh-runeday .rotd-desc { font-size:calc(0.96875rem * var(--text-scale)); color:var(--fh-ink-soft); opacity:1; }
[data-theme="forest"] .fh-runeday .rotd-key { color:var(--fh-bronze); border-color:rgba(119,89,46,.4); }
[data-theme="forest"] .fh-runeday .rotd-links { display:flex; flex-wrap:wrap; gap:8px 24px; }
[data-theme="forest"] .fh-runeday .rotd-more { font-family:var(--font-body); font-size:calc(0.78125rem * var(--text-scale)); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fh-green); opacity:1; }
[data-theme="forest"] .fh-runeday .rotd-more:hover { color:var(--fh-bronze); }
@media (max-width:720px) {
  [data-theme="forest"] .fh-runeday .rotd { padding:26px 20px; gap:20px; }
  [data-theme="forest"] .fh-runeday .rotd-links { justify-content:center; }
}

/* dark forest band: choose a reading */
[data-theme="forest"] .fh-readings {
  background:linear-gradient(180deg, rgba(16,34,29,.86), rgba(16,34,29,.93) 60%, var(--midnight)),
             url('/themes/forest/hero-fjord-longship.webp?v=3') center 35% / cover no-repeat;
  padding:56px var(--fh-side) 64px !important;
}
[data-theme="forest"] .fh-readings-inner { max-width:1240px; margin:0 auto; text-align:center; }
[data-theme="forest"] .fh-readings .fh-ornament { margin:14px auto 30px; width:min(340px,100%); color:var(--gold-mid); }
[data-theme="forest"] .fh-readings .fh-ornament svg { width:30px; height:30px; }
[data-theme="forest"] .fh-readings .fh-ornament::before { background:linear-gradient(90deg, transparent, currentColor); opacity:.85; }
[data-theme="forest"] .fh-readings .fh-ornament::after { background:linear-gradient(270deg, transparent, currentColor); opacity:.85; }
/* Section titles share one look: Alata, 20px, wide tracking, a short rule after the words (blog, readings, membership) */
[data-theme="forest"] :is(.fh-blog-title, .fh-sec-title, .fh-member-panel .fh-kicker) {
  display:flex; align-items:center; gap:18px; margin:0; font-family:'Alata',var(--fh-display); font-weight:400;
  font-size:calc(1.25rem * var(--text-scale)); letter-spacing:.1em; line-height:1.3; text-transform:uppercase; }
[data-theme="forest"] :is(.fh-sec-title, .fh-member-panel .fh-kicker)::after { content:''; flex:0 0 60px; height:1px; }
[data-theme="forest"] .fh-sec-title { justify-content:flex-start; text-align:left; color:var(--bone); }
[data-theme="forest"] .fh-sec-title::after { background:var(--gold-mid); }
[data-theme="forest"] .fh-member-panel .fh-kicker { color:var(--fh-ink); }
[data-theme="forest"] .fh-member-panel .fh-kicker::after { background:var(--fh-bronze); }
[data-theme="forest"] .fh-cats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; text-align:left; }
[data-theme="forest"] .fh-cat {
  position:relative; display:flex; flex-direction:column; min-height:330px; overflow:hidden; text-decoration:none;
  background:var(--fh-card-dark); border:1px solid var(--fh-ornament); border-radius:18px;
  transition:border-color var(--motion-base) var(--motion-ease), translate var(--motion-base) var(--motion-ease);
}
[data-theme="forest"] .fh-cat:hover { border-color:var(--gold-light); translate:0 -3px; }
[data-theme="forest"] .fh-cat-img { display:block; height:200px; background-size:cover; background-position:center; }
[data-theme="forest"] .fh-cat-img::after { content:''; display:block; height:100%; background:linear-gradient(180deg,transparent 45%,#132820); }
[data-theme="forest"] .fh-cat-badge { position:absolute; left:18px; top:166px; width:46px; height:46px; padding:10px; box-sizing:border-box; border-radius:50%; border:1px solid var(--gold); background:rgba(19,40,32,.92); color:var(--gold); }
[data-theme="forest"] .fh-cat-title { margin:24px 18px 6px; font-family:var(--fh-display); font-weight:600; font-size:calc(0.9375rem * var(--text-scale)); letter-spacing:.12em; text-transform:uppercase; color:var(--bone); }
[data-theme="forest"] .fh-cat-text { margin:0 64px 20px 18px; font-size:calc(0.84375rem * var(--text-scale)); line-height:1.5; color:var(--frost); }
[data-theme="forest"] .fh-cat-go { position:absolute; right:16px; bottom:18px; width:36px; height:36px; padding:9px; box-sizing:border-box; border-radius:50%; border:1px solid rgba(var(--gold-rgb),.7); color:var(--gold); }
[data-theme="forest"] .fh-all { margin:40px auto 0; max-width:1100px; text-align:left; }
[data-theme="forest"] .fh-all-title { margin:0 0 16px; text-align:center; font-family:var(--fh-display); font-weight:500; font-size:calc(1.25rem * var(--text-scale)); letter-spacing:.14em; text-transform:uppercase; color:var(--bone); }
[data-theme="forest"] .fh-tiers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
[data-theme="forest"] .fh-tier { position:relative; background:rgba(12,29,23,.78); border:1.5px solid var(--gold-mid); border-radius:12px; padding:18px 20px 10px; }
/* the gold corner flourish from the reference, top right of each tier box (a mask, so its colour is a token) */
[data-theme="forest"] .fh-tier::after { content:''; position:absolute; top:3px; right:3px; width:76px; height:76px; z-index:2; pointer-events:none; background:var(--gold-mid); opacity:.8;
  -webkit-mask:var(--fh-corner) right top / contain no-repeat; mask:var(--fh-corner) right top / contain no-repeat; }
[data-theme="forest"] .fh-tier-name { margin:0 0 6px; font-family:var(--font-body); font-size:calc(0.75rem * var(--text-scale)); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
[data-theme="forest"] .fh-tier ul { list-style:none; margin:0; padding:0; }
[data-theme="forest"] .fh-tier li a { display:flex; flex-direction:column; gap:2px; padding:10px 0; border-top:1px solid rgba(var(--frost-rgb),.14); text-decoration:none; }
[data-theme="forest"] .fh-tier li:first-child a { border-top:0; }
[data-theme="forest"] .fh-r-name { font-size:calc(0.9375rem * var(--text-scale)); font-weight:600; color:var(--bone); }
[data-theme="forest"] .fh-r-access { font-size:calc(0.78125rem * var(--text-scale)); color:var(--frost); }
[data-theme="forest"] .fh-tier li a:hover .fh-r-name { color:var(--gold); }

/* membership: cream panel with a slanted edge over a forest scene */
[data-theme="forest"] .fh-member {
  position:relative; display:flex; align-items:stretch; min-height:300px;
  background:url('/themes/forest/hero-fjord-longship.webp?v=3') 70% 30% / cover no-repeat;
}
[data-theme="forest"] .fh-member::after { content:''; position:absolute; inset:0; pointer-events:none;   /* perk labels sit on the photo: keep them readable (measured on its pixels) */
  background:linear-gradient(90deg,transparent 30%,rgba(9,25,18,.62) 45%,rgba(9,25,18,.74)); }
[data-theme="forest"] .fh-member-panel {
  position:relative; z-index:1; flex:0 0 46%; box-sizing:border-box; padding:48px 9% 48px max(5vw,16px);
  background:url('/themes/forest/member-overlay.webp?v=2') center / cover no-repeat, linear-gradient(90deg, var(--fh-warm) 40%, var(--fh-warm-hi));   /* gold star-chart linework (transparent webp) over a sage cream, colours sampled from Kira's reference */
  clip-path:polygon(0 0,100% 0,84% 100%,0 100%);
}
[data-theme="forest"] .fh-member-panel .fh-h2 {   /* a clean geometric sans like the reference; Alata is already self-hosted for the hero title */
  color:#0F1A17; font-family:'Alata',var(--fh-display); font-weight:400; letter-spacing:.035em; line-height:1.2; text-wrap:balance;
  font-size:clamp(24px,2.7vw,38px); }
[data-theme="forest"] .fh-member-panel p { margin:14px 0 22px; max-width:420px; font-size:calc(0.9375rem * var(--text-scale)); line-height:1.6; color:#384242; }
[data-theme="forest"] .fh-member-panel .fh-btn { background:#283C28; border-color:#283C28; }
[data-theme="forest"] .fh-member-panel .fh-btn:hover { background:#34503A; border-color:#34503A; }
[data-theme="forest"] .fh-perks { position:relative; z-index:1; flex:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; list-style:none; margin:0; padding:0 var(--fh-side) 0 0; }
[data-theme="forest"] .fh-perks li { display:flex; flex-direction:column; align-items:center; gap:10px; padding:8px; text-align:center; border-left:1px solid rgba(var(--bone-rgb),.35);
  font-size:calc(0.78125rem * var(--text-scale)); font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.4; color:var(--bone); text-shadow:0 1px 8px rgba(0,0,0,.7); }
[data-theme="forest"] .fh-perks li:first-child { border-left:0; }
[data-theme="forest"] .fh-perks .fh-icon { width:38px; height:38px; color:var(--gold-light); }

/* welcome: a short introduction on the same light band, just above the blog */
[data-theme="forest"] .fh-intro { background:var(--fh-cream); padding:52px var(--fh-side) 0 !important; }
[data-theme="forest"] .fh-intro-inner { max-width:1240px; margin:0 auto; padding-bottom:34px; border-bottom:1px solid var(--fh-cream-line); }
[data-theme="forest"] .fh-intro-title::after { content:''; flex:0 0 60px; height:1px; background:var(--fh-bronze); }
[data-theme="forest"] .fh-intro-text { margin:18px 0 0; font-size:calc(1.0625rem * var(--text-scale)); line-height:1.75; color:var(--fh-ink-soft); }
[data-theme="forest"] .fh-intro-text a { color:var(--fh-green); font-weight:600; text-decoration:underline; text-decoration-color:rgba(var(--fh-ink-rgb),.3); text-underline-offset:3px; }
[data-theme="forest"] .fh-intro-text a:hover { color:var(--fh-bronze); text-decoration-color:currentColor; }
[data-theme="forest"] .fh-intro :focus-visible { outline-color:var(--fh-green); }

/* blog: light band, the newest three posts */
[data-theme="forest"] .fh-blog { background:var(--fh-cream); padding:46px var(--fh-side) 60px !important; }
[data-theme="forest"] .fh-blog-head { display:flex; align-items:center; gap:18px; max-width:1240px; margin:0 auto 22px; }
[data-theme="forest"] .fh-blog-title { margin:0; font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.25rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .fh-blog-head::after { content:''; flex:0 0 60px; height:1px; background:var(--fh-bronze); order:1; }
[data-theme="forest"] .fh-blog-all { order:2; margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:calc(0.78125rem * var(--text-scale)); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fh-ink); text-decoration:none; }
[data-theme="forest"] .fh-blog-all:hover { color:var(--fh-bronze); }
[data-theme="forest"] .fh-blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; max-width:1240px; margin:0 auto; }
[data-theme="forest"] .fh-post { display:flex; flex-direction:column; overflow:hidden; text-decoration:none; background:var(--fh-paper); border:1px solid var(--fh-cream-line); border-radius:18px; transition:box-shadow var(--motion-base) var(--motion-ease); }
[data-theme="forest"] .fh-post:hover { box-shadow:0 10px 26px rgba(26,44,36,.16); }
[data-theme="forest"] .fh-post-img { display:block; aspect-ratio:16 / 8.5; background-size:cover; background-position:center; }
[data-theme="forest"] .fh-post-body { display:flex; flex-direction:column; flex:1; gap:8px; padding:16px 18px 18px; }
[data-theme="forest"] .fh-post-title { font-size:calc(1.0625rem * var(--text-scale)); font-weight:650; line-height:1.3; color:var(--fh-ink); }
[data-theme="forest"] .fh-post-text { font-size:calc(0.875rem * var(--text-scale)); line-height:1.55; color:var(--fh-ink-soft); }
[data-theme="forest"] .fh-post-more { margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:8px; font-size:calc(0.75rem * var(--text-scale)); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fh-ink); }

/* From the library (home): same cards as the blog on a warm band; --soon is the green stand-in until the picture file exists */
[data-theme="forest"] .fh-library { background:var(--fh-parchment); padding:46px var(--fh-side) 60px !important; }
[data-theme="forest"] .fh-library .fh-blog-head::after { background:var(--fh-bronze); }
[data-theme="forest"] .fh-post-img--soon { background:linear-gradient(135deg,var(--fh-green),var(--fh-green-hover)); }

/* keyboard focus on the light bands */
[data-theme="forest"] :is(.fh-band, .fh-member-panel, .fh-blog, .fh-library, .fh-runeday, .site-nav) :focus-visible { outline-color:var(--fh-green); }

@media (max-width:1000px) {
  [data-theme="forest"] .fh-cats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  [data-theme="forest"] .fh-tiers { grid-template-columns:1fr; max-width:560px; margin:0 auto; }
  [data-theme="forest"] .fh-member { flex-direction:column; }
  [data-theme="forest"] .fh-member-panel { flex:none; clip-path:none; padding:36px max(5vw,16px); }
  [data-theme="forest"] .fh-perks { padding:30px 16px; grid-template-columns:repeat(4,minmax(0,1fr)); background:rgba(9,25,18,.7); }   /* 70% shade: >= 6.5:1 for the labels over any photo pixel */
  [data-theme="forest"] .fh-blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  [data-theme="forest"] .fh-forum-list { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  [data-theme="forest"] .nav-logo { font-size:calc(0.875rem * var(--text-scale)); max-width:160px; }
  [data-theme="forest"] .nav-logo::before { width:32px; height:32px; }
  [data-theme="forest"] .fh-hero { height:auto; min-height:420px; }
  [data-theme="forest"] .fh-trio { letter-spacing:.22em; font-size:calc(0.8125rem * var(--text-scale)); }
  [data-theme="forest"] .fh-cats { grid-template-columns:1fr; }
  [data-theme="forest"] :is(.fh-forum-head, .fh-runeday-head) { flex-wrap:wrap; }
  [data-theme="forest"] .fh-forum .fh-ornament { margin:10px auto 26px; width:min(240px,80%); }
  [data-theme="forest"] .fh-forum-banner { gap:14px; font-size:clamp(24px,7.4vw,32px); letter-spacing:.06em; }
  [data-theme="forest"] .fh-fpost { grid-template-columns:minmax(0,1fr); grid-template-areas:"title" "meta" "last"; padding:14px 16px; }
  [data-theme="forest"] .fh-fpost-last { text-align:left; }
  [data-theme="forest"] .fh-fpost-last br { display:none; }
  [data-theme="forest"] .fh-cat { min-height:0; }
  [data-theme="forest"] .fh-perks { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:20px; }
  [data-theme="forest"] .fh-perks li:nth-child(3) { border-left:0; }
  [data-theme="forest"] .fh-blog-head { flex-wrap:wrap; }
  [data-theme="forest"] .fh-blog-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  [data-theme="forest"] :is(.fh-cat, .fh-btn, .fh-post) { transition:none; }
  [data-theme="forest"] .fh-cat:hover { translate:none; }
}

/* =======================================================================
   DESKTOP (above 1440px): full-width bands, 1440px of content
   The navbar, hero and every band run the full width of the window; their content stays
   in a 1440px column (the side padding grows with the window). The forest photo stands
   still behind the page while it scrolls; the bands cover most of it, so it shows through
   the dark readings band and around the footer. At 1440px and under the bands fill the
   window as before.
   ======================================================================= */
@media (min-width:1441px) {
  html[data-theme="forest"]:is(.pg-fh, :has(.fh-main)) {
    background:url('/themes/forest/bg-forest.webp?v=2') center / cover no-repeat fixed var(--midnight);
  }
  /* The browser-at-80% look: everything on the homepage (navbar included) drawn at 0.8 size, so
     the layout gets 1.25 times the room, as it would with the browser's own zoom at 80%. */
  [data-theme="forest"] body:is(.pg-fh, :has(.fh-main)) { background:none; animation:none; zoom:.8; }
  [data-theme="forest"] :is(.fh-band, .fh-readings, .fh-intro, .fh-blog, .fh-library, .fh-forum, .fh-runeday, .fp-sec) { padding-inline:max(64px, calc((100% - 1440px) / 2 + 64px)) !important; }   /* % is the band's own width */
  [data-theme="forest"] :is(.fh-readings-inner, .fh-all, .fh-intro-inner, .fh-blog-head, .fh-blog-grid, .fh-forum-head, .fh-forum-list, .fh-forum-empty, .fh-runeday-head, .fh-runeday-intro, .fh-runeday .rotd) { max-width:none; }
  [data-theme="forest"] .fh-readings { background:rgba(var(--midnight-rgb),.88); }   /* the photo shows through a little */
  /* hairlines: at the 0.8 page scale a 1px line draws 0.8px and nearly vanishes, so the ornament and title lines are 1.25px here */
  [data-theme="forest"] :is(.fh-ornament, .fh-forum-banner)::before, [data-theme="forest"] :is(.fh-ornament, .fh-forum-banner)::after { height:1.25px; }
  /* membership: the cream panel grows with the margin so its text stays 506px wide */
  [data-theme="forest"] .fh-member-panel { flex-basis:calc((100% - 1440px) / 2 + 660px); padding-left:max(64px, calc((100% - 1440px) / 2 + 64px)); padding-right:90px; clip-path:polygon(0 0,100% 0,calc(100% - 105px) 100%,0 100%); }   /* a fixed-width slant: 84% would cut into the text on very wide screens */
  [data-theme="forest"] .fh-perks { padding-right:max(64px, calc((100% - 1440px) / 2 + 64px)); }
}

/* tablets: the text spans most of the narrower photo, so the left-to-right shade runs further across */
@media (min-width:601px) and (max-width:1000px) {
  [data-theme="forest"] .fh-hero .hero-bg {
    background-image:linear-gradient(90deg, rgba(7,24,19,.9) 0%, rgba(8,28,21,.84) 65%, rgba(12,32,24,.5) 100%),
                     var(--fh-hero-img);
  }
}

/* =======================================================================
   DESKTOP HERO (1001px and up): about half the old height, everything centred.
   A soft dark oval sits behind the text so it reads over the photo; the photo shows at
   both sides. Phones and tablets keep the tall hero.
   ======================================================================= */
@media (min-width:1001px) {
  [data-theme="forest"] .fh-hero { height:calc(clamp(308px,24.2vw,352px) + 56px); min-height:0; }
  [data-theme="forest"] .fh-hero .hero-bg {
    background-image:radial-gradient(ellipse 700px 230px at 50% 50%, rgba(7,24,19,.84) 0%, rgba(7,24,19,.8) 50%, rgba(7,24,19,0) 100%),
                     linear-gradient(rgba(7,24,19,.28), rgba(7,24,19,.28)),
                     var(--fh-hero-img);
    background-position:center, center, center calc(42% - 17.5px);   /* per layer: only the photo (last) moves. 50px up from the old spot, plus 32.5px so it stays put now the box is 56px taller */
  }
  /* left and right 0 with the text centred between: the parallax script writes transform, so it can't centre */
  [data-theme="forest"] .fh-eyebrow { margin-bottom:8px; font-size:calc(0.75rem * var(--text-scale)); }
  [data-theme="forest"] .fh-title { font-size:clamp(36px,3.8vw,58px); line-height:1.1; white-space:nowrap; }
  [data-theme="forest"] .fh-title span { display:inline; }
  [data-theme="forest"] .fh-hero .fh-ornament { margin:10px 0; width:min(300px,100%); }
  [data-theme="forest"] .fh-trio { font-size:calc(0.875rem * var(--text-scale)); }
}
@media (min-width:1441px) {
  [data-theme="forest"] .fh-hero .hero-bg { background-position:center, center, center calc(42% - 30px); }   /* same, in the 0.8 scale */
}

/* =======================================================================
   NAVBAR FLOATS (homepage): fixed to the top, 90% opaque, with a soft shadow over the page.
   The hero is 56px taller and starts at the top of the window, so its photo shows through
   the bar. (The bar was in the page flow before; the rules above add its 56px to each hero height.)
   ======================================================================= */
[data-theme="forest"] body:is(.pg-fh, :has(.fh-main)) .site-nav {
  position:fixed; top:0; left:0; right:0;
  background:rgba(var(--fh-cream-rgb),.9);
  box-shadow:0 2px 6px rgba(var(--shadow-rgb),.4);
}
html[data-theme="forest"]:is(.pg-fh, :has(.fh-main)) { scroll-padding-top:56px; }   /* in-page links stop below the bar */
@media (min-width:1441px) { html[data-theme="forest"]:is(.pg-fh, :has(.fh-main)) { scroll-padding-top:45px; } }   /* the bar is drawn at 0.8 here */

/* =======================================================================
   VICTORIAN CORNERS (Kira's .ornamented-card CSS: 1px gold border, 18px radius, a 76px flourish
   in each corner, inset 8px, at 80% opacity; 56px on small phones).
   .ornamented-card + .corner-ornament--tl/tr/br/bl is her markup version, for any element that
   carries four child svgs. The four category frames use the same look with no extra markup: one
   ::after layer whose four mask images are the flourish turned to each corner.
   ======================================================================= */
[data-theme="forest"] .ornamented-card {
  --ornament-color:var(--fh-ornament); --ornament-size:var(--fh-ornament-size); --ornament-inset:var(--fh-ornament-inset);
  position:relative; isolation:isolate; border:1px solid var(--ornament-color); border-radius:18px;
  background:var(--fh-card-dark); color:var(--bone); padding:40px;
}
[data-theme="forest"] .corner-ornament { position:absolute; width:var(--ornament-size); height:var(--ornament-size); color:var(--ornament-color); opacity:.8; pointer-events:none; user-select:none; }
[data-theme="forest"] .corner-ornament--tl { top:var(--ornament-inset); left:var(--ornament-inset); }
[data-theme="forest"] .corner-ornament--tr { top:var(--ornament-inset); right:var(--ornament-inset); transform:rotate(90deg); }
[data-theme="forest"] .corner-ornament--br { bottom:var(--ornament-inset); right:var(--ornament-inset); transform:rotate(180deg); }
[data-theme="forest"] .corner-ornament--bl { bottom:var(--ornament-inset); left:var(--ornament-inset); transform:rotate(270deg); }

[data-theme="forest"] :is(.fh-cat, .fp-card, .about-steps li, .fb-card, #forumView[data-ff="post"] .forum-thread)::after {
  content:''; position:absolute; inset:var(--fh-ornament-inset); z-index:1; pointer-events:none; opacity:.8;
  background:var(--fh-ornament);
  -webkit-mask-image:var(--fh-corner-tl), var(--fh-corner-tr), var(--fh-corner-br), var(--fh-corner-bl);
          mask-image:var(--fh-corner-tl), var(--fh-corner-tr), var(--fh-corner-br), var(--fh-corner-bl);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left top, right top, right bottom, left bottom; mask-position:left top, right top, right bottom, left bottom;
  -webkit-mask-size:var(--fh-ornament-size) var(--fh-ornament-size); mask-size:var(--fh-ornament-size) var(--fh-ornament-size);
}
/* the text and the arrow button keep clear of the bottom corners */
[data-theme="forest"] .fh-cat-text { margin:0 18px 82px; }
[data-theme="forest"] .fh-cat-go { top:171px; bottom:auto; right:18px; z-index:2; background:rgba(19,40,32,.92); }   /* on the picture's lower edge, opposite the badge, clear of the bottom corners */
@media (max-width:480px) { [data-theme="forest"] { --fh-ornament-size:56px; } [data-theme="forest"] .fh-cat-text { margin-bottom:66px; } }

/* =======================================================================
   PRICING PAGE (themes/forest/pricing.php, ".fp-" classes). It reuses the homepage's hero, floating
   navbar, 0.8 scale (above 1440px, via .fh-main), ornamented cards and footer. Bands alternate:
   light, green over the still photo, light, then the footer.
   ======================================================================= */
[data-theme="forest"] .fh-hero .fp-sub { margin:0; max-width:min(520px,90%); font-size:calc(0.9375rem * var(--text-scale)); font-style:italic; line-height:1.6; color:var(--bone); text-shadow:0 1px 8px rgba(0,0,0,.5); }
[data-theme="forest"] .fp-sec { padding:52px var(--fh-side) 60px !important; }
[data-theme="forest"] .fp-inner { max-width:1312px; margin:0 auto; }
[data-theme="forest"] .fp-light { background:var(--fh-cream); color:var(--fh-ink); }
[data-theme="forest"] .fp-green {
  background:linear-gradient(rgba(var(--midnight-rgb),.88), rgba(var(--midnight-rgb),.88)),
             url('/themes/forest/bg-forest.webp?v=2') center / cover no-repeat fixed var(--midnight);
  color:var(--bone);
}
/* section titles: the same look as the homepage's (Alata, a rule after the words) */
[data-theme="forest"] .fp-sec-title {
  display:flex; align-items:center; gap:18px; margin:0 0 28px; font-family:'Alata',var(--fh-display); font-weight:400;
  font-size:calc(1.25rem * var(--text-scale)); letter-spacing:.1em; line-height:1.3; text-transform:uppercase; }
[data-theme="forest"] .fp-sec-title::after { content:''; flex:0 0 60px; height:1px; }
[data-theme="forest"] .fp-light .fp-sec-title { color:var(--fh-ink); }
[data-theme="forest"] .fp-light .fp-sec-title::after { background:var(--fh-bronze); }
[data-theme="forest"] .fp-green .fp-sec-title { color:var(--bone); }
[data-theme="forest"] .fp-green .fp-sec-title::after { background:var(--gold-mid); }

/* cards: three across, or two stretched to the same total width */
[data-theme="forest"] .fp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
[data-theme="forest"] .fp-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }   /* two cards stretch across the same width as the row of three */
[data-theme="forest"] .fp-card {
  --fp-head-fallback:radial-gradient(circle at 18% 25%, rgba(var(--gold-rgb),.22), transparent 55%), linear-gradient(135deg, #1B312A, #2E4A3A);
  position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--fh-ornament); border-radius:18px; background:var(--fh-paper); color:var(--fh-ink);
}
[data-theme="forest"] .fp-green .fp-card { background:var(--fh-card-dark); color:var(--bone); }
[data-theme="forest"] .fp-card.is-current { box-shadow:0 0 0 2px var(--fh-ornament); }
/* the header strip: a picture slot (--fp-head, set from pricing-head-<slug>.webp), else a green gradient */
[data-theme="forest"] .fp-head {
  position:relative; flex:none; height:130px;
  background:linear-gradient(180deg, rgba(7,29,23,0) 45%, rgba(7,29,23,.8)), var(--fp-head, var(--fp-head-fallback)) center / cover no-repeat;
}
/* the three narrower premium cards show the left of their wider header picture (the two-card rows show it whole) */
[data-theme="forest"] .fp-green .fp-head { background-position:center, left center; }
[data-theme="forest"] .fp-glyph {
  position:absolute; left:28px; bottom:-22px; z-index:2; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--fh-ornament); border-radius:50%; background:var(--fh-card-dark); color:var(--gold-light);
  font-family:var(--font-rune),'Segoe UI Symbol',serif; font-size:calc(1.25rem * var(--text-scale)); line-height:1;
}
[data-theme="forest"] .fp-badge {
  position:absolute; right:28px; bottom:12px; padding:4px 11px; border-radius:999px; background:var(--gold-mid); color:var(--midnight);
  font-size:calc(0.625rem * var(--text-scale)); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
[data-theme="forest"] .fp-body { flex:1; display:flex; flex-direction:column; padding:36px 28px 40px; }
[data-theme="forest"] .fp-name { margin:0 0 4px; font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.3125rem * var(--text-scale)); letter-spacing:.04em; }
[data-theme="forest"] .fp-price { margin:0 0 12px; font-family:'Alata',var(--fh-display); font-size:calc(1.875rem * var(--text-scale)); line-height:1.15; color:var(--fh-bronze); }
[data-theme="forest"] .fp-green .fp-price { color:var(--gold-light); }
[data-theme="forest"] .fp-price span { font-family:var(--font-body); font-size:calc(0.875rem * var(--text-scale)); color:var(--fh-ink-soft); opacity:1; }
[data-theme="forest"] .fp-green .fp-price span { color:var(--frost); }
[data-theme="forest"] .fp-desc { margin:0 0 14px; font-size:calc(0.875rem * var(--text-scale)); font-style:italic; line-height:1.6; color:var(--fh-ink-soft); }
[data-theme="forest"] .fp-green .fp-desc { color:var(--frost); }
[data-theme="forest"] .fp-note { margin:0 0 12px; font-size:calc(0.875rem * var(--text-scale)); font-weight:600; color:var(--fh-bronze); }
[data-theme="forest"] .fp-list { flex:1; list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:8px; }
[data-theme="forest"] .fp-list li { position:relative; padding-left:20px; font-size:calc(0.875rem * var(--text-scale)); line-height:1.45; }
[data-theme="forest"] .fp-list li::before { content:'✦'; position:absolute; left:0; top:.1em; font-size:.8em; color:var(--fh-bronze); }
[data-theme="forest"] .fp-green .fp-list li::before { color:var(--gold-mid); }
[data-theme="forest"] .fp-rows { flex:1; margin:0 0 20px; }
[data-theme="forest"] .fp-rows-label { margin:0 0 8px; font-size:calc(0.75rem * var(--text-scale)); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--fh-bronze); }
[data-theme="forest"] .fp-row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px solid var(--fh-cream-line); font-size:calc(0.875rem * var(--text-scale)); }
[data-theme="forest"] .fp-pct { font-weight:700; color:var(--fh-bronze); }
[data-theme="forest"] .fp-topics { margin:0; font-size:calc(0.875rem * var(--text-scale)); line-height:1.7; color:var(--fh-ink-soft); }
/* the buttons sit between the two bottom corner flourishes */
[data-theme="forest"] .fp-btn {
  align-self:center; margin-top:auto; display:inline-flex; align-items:center; justify-content:center; min-height:0; padding:10px 22px;
  background:var(--fh-green); color:var(--fh-cream); border:1px solid rgba(var(--gold-rgb),.55); border-radius:2px;
  font-family:var(--font-body); font-size:calc(0.75rem * var(--text-scale)); font-weight:600; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; text-align:center;
  transition:background var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease);
}
[data-theme="forest"] .fp-btn:hover { background:var(--fh-green-hover); border-color:var(--gold); }
[data-theme="forest"] .fp-green .fp-btn { background:var(--gold-mid); color:var(--midnight); border-color:var(--gold-mid); }
[data-theme="forest"] .fp-green .fp-btn:hover { background:var(--gold-light); border-color:var(--gold-light); }
[data-theme="forest"] .fp-btn.busy { opacity:.6; pointer-events:none; }
[data-theme="forest"] .fp-btn.is-current { background:transparent; color:var(--fh-ink-soft); border-color:var(--fh-cream-line); cursor:default; }
[data-theme="forest"] .fp-green .fp-btn.is-current { color:var(--frost); border-color:rgba(var(--frost-rgb),.3); }
[data-theme="forest"] .fp-light :focus-visible { outline-color:var(--fh-green); }
[data-theme="forest"] .fp-billing { margin:32px auto 0; max-width:760px; text-align:center; font-size:calc(0.84375rem * var(--text-scale)); line-height:1.7; color:var(--bone); }
[data-theme="forest"] .fp-billing a { color:var(--gold); }
[data-theme="forest"] .fp-disclaimer { margin:36px auto 0; max-width:640px; text-align:center; font-size:calc(0.78125rem * var(--text-scale)); font-style:italic; line-height:1.6; color:var(--fh-ink-soft); }

/* questions */
[data-theme="forest"] .fp-faq-title { margin-top:56px; }
[data-theme="forest"] .fp-faq-item { border-top:1px solid var(--fh-cream-line); }
[data-theme="forest"] .fp-faq-item:last-child { border-bottom:1px solid var(--fh-cream-line); }
[data-theme="forest"] .fp-faq-q {
  display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%; padding:16px 4px; background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:calc(1rem * var(--text-scale)); font-weight:600; text-align:left; color:var(--fh-ink);
}
[data-theme="forest"] .fp-faq-q::after { content:'+'; flex:none; font-size:1.3em; line-height:1; color:var(--fh-bronze); }
[data-theme="forest"] .fp-faq-item.open .fp-faq-q::after { content:'−'; }
[data-theme="forest"] .fp-faq-a { display:none; padding:0 4px 18px; font-size:calc(0.9375rem * var(--text-scale)); line-height:1.7; color:var(--fh-ink-soft); }
[data-theme="forest"] .fp-faq-item.open .fp-faq-a { display:block; }

@media (max-width:1000px) {
  [data-theme="forest"] :is(.fp-grid, .fp-grid--2) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  [data-theme="forest"] .fp-grid > :last-child:nth-child(odd) { grid-column:1 / -1; width:calc(50% - 14px); justify-self:center; }
}
@media (max-width:640px) {
  [data-theme="forest"] :is(.fp-grid, .fp-grid--2) { grid-template-columns:minmax(0,1fr); gap:24px; }
  [data-theme="forest"] .fp-grid > :last-child:nth-child(odd) { width:auto; }
  [data-theme="forest"] .fp-body { padding:34px 22px 36px; }
}

/* =======================================================================
   ABOUT PAGE: the forest hero, floating navbar, 0.8 scale and footer (via .fh-main, set by about.php
   in the forest theme), with the page's own content unchanged. Until it is split into bands, the
   whole article sat on one dark band; it is now split into bands (see ABOUT PAGE BANDS below).
   ======================================================================= */
[data-theme="forest"] .about-reading-tier { display:none; }   /* the membership tags beside reading names (Free account, North Star & up ...) are explained on the pricing page */

/* =======================================================================
   ABOUT PAGE BANDS (forest). The article's sections become full-width bands that alternate
   light, green, light, green ... down to the footer. Each band is the section itself: its
   background is a huge box-shadow clipped to the band's own height, so the text stays in the
   page's 800px column while the colour runs edge to edge (no change to the page's markup).
   Order: intro + contents (light), how (green), cards (light), readings (green), membership (light),
   Celtic Cross (green), zodiac (light), closing (green), credits (light). The little divider rules
   between sections are hidden: the bands do that job.
   ======================================================================= */
[data-theme="forest"] { --fh-d-bone:var(--bone); --fh-d-frost:var(--frost); --fh-d-gold:var(--gold); --fh-d-gold-rgb:var(--gold-rgb); --fh-d-line:var(--line);
  --fh-d-gold-light:var(--gold-light); --fh-d-gold-mid:var(--gold-mid); --fh-d-gold-dark:var(--gold-dark); }

/* the still photo behind the page (the green bands are see-through over it), at every width */
html[data-theme="forest"]:is(.pg-about, :has(.about-wrap)) { background:url('/themes/forest/bg-forest.webp?v=2') center / cover no-repeat fixed var(--midnight); }
[data-theme="forest"] body:is(.pg-about, :has(.about-wrap)) { background:none; animation:none; }

/* the page is full width and each band carries the content width itself (the same as the homepage and pricing page: side padding
   var(--fh-side), and above 1440px a 1440px column less 64px each side). The bands used to be drawn with a 100vmax box-shadow
   and a clip-path: huge layers that painted a moment after the photo behind them, the "flash" on this page. */
[data-theme="forest"] .about-wrap { max-width:none; padding:0; }
/* screenshots never grow past their own size (the wider column would blur them), and sit in the middle */
[data-theme="forest"] .about-shot img { width:auto; max-width:100%; margin-inline:auto; }
[data-theme="forest"] .about-wrap > :is(section, nav) {
  position:relative; margin:0 !important; padding:56px var(--fh-side); background:rgba(var(--midnight-rgb),.88);
}
@media (min-width:1441px) { [data-theme="forest"] .about-wrap > :is(section, nav) { padding-inline:max(64px, calc((100% - 1440px) / 2 + 64px)); } }
/* the light bands: the page's own colours turn dark on cream (its text uses these tokens) */
[data-theme="forest"] .about-wrap > .about-divider { display:none; }
[data-theme="forest"] .about-wrap > :is(:first-child, .about-toc, #cards, #membership, #zodiac, .about-credits) {
  --bone:var(--fh-ink); --frost:var(--fh-ink-soft); --gold:var(--fh-bronze); --line:var(--fh-cream-line);
  --gold-light:#7D5F33; --gold-mid:#6B4F29; --gold-dark:#54401F;
  background:var(--fh-cream); color:var(--fh-ink);
}
/* the intro and its contents are one band */
[data-theme="forest"] .about-wrap > :first-child { padding-bottom:12px; }
[data-theme="forest"] .about-wrap > .about-toc { padding-top:13px; margin-top:-1px !important; }   /* -1px: no hairline where the two cream pieces meet at the 0.8 scale */
[data-theme="forest"] .about-wrap .about-drop { filter:none; }   /* the base drop-shadow smudges on cream */
/* cards that stay dark on a light band keep their light-on-dark colours */
[data-theme="forest"] :is(.about-plan, .about-houses li) {
  --bone:var(--fh-d-bone); --frost:var(--fh-d-frost); --gold:var(--fh-d-gold); --gold-rgb:var(--fh-d-gold-rgb); --line:var(--fh-d-line);
}
[data-theme="forest"] .about-wrap :focus-visible { outline-color:var(--gold); }

/* section titles: the same look as the homepage's (Alata, 20px, capitals, a rule after the words) */
[data-theme="forest"] :is(.about-h2, .about-credits-title) {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin:0 0 24px; font-family:'Alata',var(--fh-display); font-weight:400;
  font-size:calc(1.25rem * var(--text-scale)); letter-spacing:.1em; line-height:1.3; text-transform:uppercase; color:var(--bone);
}
[data-theme="forest"] :is(.about-h2, .about-credits-title)::after { content:''; flex:0 0 60px; height:1px; background:var(--gold); }
[data-theme="forest"] .about-credits { opacity:1; margin-top:0 !important; padding-top:56px !important; border-top:0; }
/* the base dims many About texts with opacity (down to 60%): on cream that is under 4.5:1; full strength here, the colours carry the hierarchy */
[data-theme="forest"] :is(.about-p, .about-suits figcaption, .about-shot figcaption, .about-caption, .about-compare-label, .about-gets li, .about-positions li,
  .about-plan-price, .about-plan-list li, .about-house-sub, .about-quiet, .about-steps p, .about-closing .about-p) { opacity:1; }
/* on cream the base's heavy dark shadows fall onto the captions under the pictures; the house chips were see-through */
[data-theme="forest"] .about-wrap > :is(:first-child, .about-toc, #cards, #membership, #zodiac, .about-credits) :is(.about-shot img, .about-suits img) { box-shadow:0 8px 22px rgba(var(--shadow-rgb),.16); }
[data-theme="forest"] .about-houses li { background:var(--midnight-2); }

/* =======================================================================
   ABOUT PAGE CARDS AND SUBTITLES (forest)
   - the "How a reading works" steps: four across, each with a header-picture slot
     (themes/forest/about-step-1..4.webp, 640 x 220 px) and the four-corner ornament
   - the plans: the pricing page's cards (themes/forest/cards.php), all in one row on desktop,
     stacked on phones; they use the same header pictures (pricing-head-<slug>.webp)
   - every subtitle (h3) and reading name in capitals
   ======================================================================= */
[data-theme="forest"] :is(.about-h3, .about-steps h3, .about-reading-name) {
  font-family:'Alata',var(--fh-display); font-weight:400; letter-spacing:.08em; text-transform:uppercase;
}
[data-theme="forest"] .about-h3 { font-size:calc(1.0625rem * var(--text-scale)); }
[data-theme="forest"] .about-reading-name { font-size:calc(1.0625rem * var(--text-scale)); }

/* the steps */
[data-theme="forest"] .about-steps { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
[data-theme="forest"] .about-steps li {
  --fp-head-fallback:radial-gradient(circle at 18% 25%, rgba(var(--gold-rgb),.22), transparent 55%), linear-gradient(135deg, #1B312A, #2E4A3A);
  padding:0 0 92px; overflow:hidden; border:1px solid var(--fh-ornament); border-radius:18px; background:var(--fh-card-dark);   /* 92px: the text stops above the bottom corner ornaments */
}
[data-theme="forest"] .fa-head {
  display:block; height:110px;
  background:linear-gradient(180deg, rgba(7,29,23,0) 45%, rgba(7,29,23,.8)), var(--fp-head, var(--fp-head-fallback)) center / cover no-repeat;
}
[data-theme="forest"] .about-steps li::before {
  top:88px; left:24px; z-index:2; width:44px; height:44px; border:1px solid var(--fh-ornament); background:var(--fh-card-dark);
  color:var(--gold-light); font-family:'Alata',var(--fh-display); font-size:calc(1.125rem * var(--text-scale));
}
/* the cards are dark but sit on the cream band, which turns these tokens to dark ink: put the forest's light ones back inside them */
[data-theme="forest"] .about-steps li {
  --bone:#F2F0E6; --bone-rgb:242,240,230; --frost:#C4D7CC; --frost-rgb:196,215,204;
  --gold:#D2B781; --gold-rgb:210,183,129; --gold-light:#E9D7AC; --gold-mid:#C4A36B; --gold-dark:#9D7C4D;
}
[data-theme="forest"] .about-steps li > :is(h3, p) { margin-inline:24px; }
[data-theme="forest"] .about-steps li > h3 { margin-top:36px; font-size:calc(1rem * var(--text-scale)); line-height:1.3; }

/* the plans */
[data-theme="forest"] .about-plans-fp { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:18px; margin:0; }
[data-theme="forest"] .about-plans-fp .fp-head { height:110px; background-position:center, left center; }
[data-theme="forest"] .about-plans-fp .fp-glyph { left:20px; }
[data-theme="forest"] .about-plans-fp .fp-badge { top:12px; right:14px; bottom:auto; z-index:3; padding:3px 9px; font-size:calc(0.5625rem * var(--text-scale)); }   /* top right: the narrow cards have no room beside the glyph */
[data-theme="forest"] .about-plans-fp .fp-body { padding:34px 20px 92px; }   /* no button here: room for the bottom corner ornaments */
[data-theme="forest"] .about-plans-fp .fp-name { font-size:calc(1.1875rem * var(--text-scale)); }
[data-theme="forest"] .about-plans-fp .fp-price { font-size:calc(1.625rem * var(--text-scale)); }
[data-theme="forest"] .about-plans-fp .fp-list li { font-size:calc(0.8125rem * var(--text-scale)); }
/* these cards stay light-on-dark inside the light band */
[data-theme="forest"] .about-plans-fp .fp-card {
  --bone:var(--fh-d-bone); --frost:var(--fh-d-frost); --gold:var(--fh-d-gold); --gold-rgb:var(--fh-d-gold-rgb); --line:var(--fh-d-line);
  --gold-light:var(--fh-d-gold-light); --gold-mid:var(--fh-d-gold-mid); --gold-dark:var(--fh-d-gold-dark);
}

@media (max-width:1000px) {
  [data-theme="forest"] .about-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  [data-theme="forest"] .about-plans-fp { grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  [data-theme="forest"] .about-steps { grid-template-columns:minmax(0,1fr); }
  [data-theme="forest"] .about-plans-fp { grid-template-columns:minmax(0,1fr); }
}

/* =======================================================================
   BLOG PAGE (themes/forest/blog.php, ".fb-" classes). The forest hero, floating navbar, 0.8 scale and
   footer come from .fh-main like the other pages; the posts are three-across cards with the
   four-corner ornament, on a light band.
   ======================================================================= */
[data-theme="forest"] .fb-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
[data-theme="forest"] .fb-card {
  position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden; text-decoration:none;
  border:1px solid var(--fh-ornament); border-radius:18px; background:var(--fh-paper); color:var(--fh-ink);
  transition:translate var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
}
[data-theme="forest"] .fb-card:hover { translate:0 -3px; box-shadow:0 12px 28px rgba(var(--shadow-rgb),.16); }
[data-theme="forest"] .fb-cover {
  display:block; flex:none; aspect-ratio:16 / 9; background-size:cover; background-position:center;
}
[data-theme="forest"] .fb-cover--none { background:radial-gradient(circle at 18% 25%, rgba(var(--gold-rgb),.22), transparent 55%), linear-gradient(135deg, #1B312A, #2E4A3A); }
[data-theme="forest"] .fb-body { flex:1; display:flex; flex-direction:column; gap:8px; padding:20px 28px 40px; }
[data-theme="forest"] .fb-date { font-size:calc(0.71875rem * var(--text-scale)); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fh-bronze); }
[data-theme="forest"] .fb-title { font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.25rem * var(--text-scale)); line-height:1.3; letter-spacing:.02em; color:var(--fh-ink); }
[data-theme="forest"] .fb-excerpt {
  font-size:calc(0.90625rem * var(--text-scale)); line-height:1.6; color:var(--fh-ink-soft);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
/* "Read more" sits in the middle, between the two bottom corner flourishes */
[data-theme="forest"] .fb-more {
  align-self:center; margin-top:auto; padding:9px 20px; display:inline-flex; align-items:center; gap:10px;
  background:var(--fh-green); color:var(--fh-cream); border:1px solid rgba(var(--gold-rgb),.55); border-radius:2px;
  font-size:calc(0.75rem * var(--text-scale)); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
[data-theme="forest"] .fb-card:hover .fb-more { background:var(--fh-green-hover); border-color:var(--gold); }
[data-theme="forest"] .fb-card:focus-visible { outline:3px solid var(--fh-green); outline-offset:3px; }
[data-theme="forest"] .fb-card .fb-body { padding-bottom:118px; }   /* the button's own row, clear of the corners */
[data-theme="forest"] .fb-card .fb-more { position:absolute; left:50%; bottom:34px; translate:-50% 0; margin:0; }
[data-theme="forest"] .fb-empty { margin:0; text-align:center; font-style:italic; color:var(--fh-ink-soft); }
[data-theme="forest"] .fb-pager { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:40px 0 0; }
[data-theme="forest"] .fb-pager a {
  padding:9px 18px; border:1px solid var(--fh-bronze); border-radius:2px; text-decoration:none; color:var(--fh-ink);
  font-size:calc(0.75rem * var(--text-scale)); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
[data-theme="forest"] .fb-pager a:hover { background:rgba(var(--fh-ink-rgb),.06); }
[data-theme="forest"] .fb-pager-pos { font-size:calc(0.8125rem * var(--text-scale)); color:var(--fh-ink-soft); }

@media (max-width:1000px) { [data-theme="forest"] .fb-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { [data-theme="forest"] .fb-grid { grid-template-columns:minmax(0,1fr); gap:24px; } }

/* =======================================================================
   READING PAGES (forest): the four reading layouts in reading.css, so the 1/3/5/7-card pulls and
   Year Ahead (.pl-), Celtic Cross (.cc-), Runes (.rw-) and Zodiac Wheel (.zw-) change together.
   - the still forest photo behind the page, at every width (a veil keeps the board readable)
   - the whole page drawn at 0.8 above 1440px (body zoom, as on the homepage). The boards fill the
     window height, so each layout's height is worked out in the zoomed space: 100vh is not scaled
     by the zoom, but the top offset the page measures (--xx-top) is. The board and panel (the
     .xx-layout) are zoomed a further 1.125, so they draw at 0.9 while the navbar, footer and page
     padding stay at 0.8; their height is the window less the top offset and the 0.8-scaled padding and
     footer, over 0.9. The zoomed-card pop-ups are position:fixed with window coordinates, so they take
     a 1.25 counter-zoom
   - the reading panel wears the four corner flourishes, like the cards on the other pages
   ======================================================================= */
html[data-theme="forest"]:is(.pg-reading, :has(:is(.pl-page, .cc-page, .rw-page, .zw-page, .hs-page, .rh-page))) {
  background:linear-gradient(rgba(var(--midnight-rgb),.55), rgba(var(--midnight-rgb),.55)),
             url('/themes/forest/bg-forest.webp?v=2') center / cover no-repeat fixed var(--midnight);
}
[data-theme="forest"] body:is(.pg-reading, :has(:is(.pl-page, .cc-page, .rw-page, .zw-page, .hs-page, .rh-page))) { background:none; animation:none; }
/* One screen, no page scrollbar (two-column layout, 1001px and up): the footer shrinks to a one-line strip of
   --rd-foot and each layout gives up that height, so top + board + padding + footer = the window. The
   1px is a rounding guard. Windows too short for the 480px minimum height still scroll. */
[data-theme="forest"] { --rd-foot:40px; }
@media (min-width:1001px) {
  [data-theme="forest"] body:is(.pg-reading, :has(:is(.pl-page, .cc-page, .rw-page, .zw-page, .hs-page, .rh-page))) .site-footer {
    max-width:none; margin:0; box-sizing:border-box; height:var(--rd-foot); padding:0 24px;
    display:flex; align-items:center; justify-content:center; gap:0 18px; text-align:center;
    font-size:calc(0.75rem * var(--text-scale)); line-height:1.3;
  }
  /* the strip holds the footer lines side by side, each on one line: the copyright is just "(c) year Heathen Heritage",
     and it is left out where the strip is too narrow for all three */
  [data-theme="forest"] body:is(.pg-reading, :has(:is(.pl-page, .cc-page, .rw-page, .zw-page, .hs-page, .rh-page))) .site-footer > * { margin-top:0; white-space:nowrap; }
  [data-theme="forest"] body:is(.pg-reading, :has(:is(.pl-page, .cc-page, .rw-page, .zw-page, .hs-page, .rh-page))) .site-footer-rest { display:none; }
  [data-theme="forest"] .pl-layout { height:calc(100vh - var(--pl-top, 90px) - 18px - var(--rd-foot) - 1px); }
  [data-theme="forest"] .cc-layout { height:calc(100vh - var(--cc-top, 90px) - 18px - var(--rd-foot) - 1px); }
  [data-theme="forest"] .rw-layout { height:calc(100vh - var(--rw-top, 90px) - 18px - var(--rd-foot) - 1px); }
  [data-theme="forest"] .zw-layout { height:calc(100vh - var(--zw-top, 90px) - 18px - var(--rd-foot) - 1px); }
  [data-theme="forest"] .hs-layout { height:calc(100vh - var(--hs-top, 90px) - 18px - var(--rd-foot) - 1px); }
  [data-theme="forest"] .rh-layout { height:calc(100vh - var(--rh-top, 90px) - 18px - var(--rd-foot) - 1px); }
}
@media (min-width:1001px) and (max-width:1360px) {
  [data-theme="forest"] body:is(.pg-reading, :has(:is(.pl-page, .cc-page, .rw-page, .zw-page, .hs-page, .rh-page))) .site-footer-copy { display:none; }
}
/* Desktop: the reading panel is 30px shorter at the top and bottom than the board beside it (a grid item
   stretches to the row, less its margins), and a little wider (460px, was 420). Above 1440px the layout
   is zoomed 0.9, so the margin is 34px to still read as 30. */
@media (min-width:1001px) {
  [data-theme="forest"] :is(.pl-layout, .cc-layout, .rw-layout, .zw-layout, .hs-layout, .rh-layout) { grid-template-columns:minmax(0,1fr) minmax(360px,460px); }
  [data-theme="forest"] :is(.pl-panel, .cc-panel, .rw-panel, .zw-panel, .hs-panel, .rh-panel) { margin-block:30px; }
}
@media (min-width:1441px) {
  [data-theme="forest"] body:is(.pg-reading, :has(:is(.pl-page, .cc-page, .rw-page, .zw-page, .hs-page, .rh-page))) { zoom:.8; }
  [data-theme="forest"] .pl-layout { height:calc((100vh - var(--pl-top, 90px) - .8 * (18px + var(--rd-foot)) - 1px) / .9); max-width:1667px; zoom:1.125; }
  [data-theme="forest"] .cc-layout { height:calc((100vh - var(--cc-top, 90px) - .8 * (18px + var(--rd-foot)) - 1px) / .9); max-width:1667px; zoom:1.125; }
  [data-theme="forest"] .rw-layout { height:calc((100vh - var(--rw-top, 90px) - .8 * (18px + var(--rd-foot)) - 1px) / .9); max-width:1667px; zoom:1.125; }
  [data-theme="forest"] .zw-layout { height:calc((100vh - var(--zw-top, 90px) - .8 * (18px + var(--rd-foot)) - 1px) / .9); max-width:1667px; zoom:1.125; }
  [data-theme="forest"] .hs-layout { height:calc((100vh - var(--hs-top, 90px) - .8 * (18px + var(--rd-foot)) - 1px) / .9); max-width:1667px; zoom:1.125; }
  [data-theme="forest"] .rh-layout { height:calc((100vh - var(--rh-top, 90px) - .8 * (18px + var(--rd-foot)) - 1px) / .9); max-width:1667px; zoom:1.125; }
  [data-theme="forest"] :is(.pl-focus, .cc-focus, .zw-focus, .rh-focus) { zoom:1.25; }
  [data-theme="forest"] body:is(.pg-reading, :has(:is(.pl-page, .cc-page, .rw-page, .zw-page, .hs-page, .rh-page))) .modal-box { zoom:1.1875; }   /* dialogs at 0.95 (0.8 x 1.1875), as the navbar, not 80% */
  [data-theme="forest"] :is(.pl-panel, .cc-panel, .rw-panel, .zw-panel, .hs-panel, .rh-panel) { margin-block:34px; }
}

[data-theme="forest"] :is(.pl-panel, .cc-panel, .rw-panel, .zw-panel, .hs-panel, .rh-panel) {
  --fh-ornament-size:52px; --fh-pn-x:38px; --fh-pn-t:38px;
  position:relative; isolation:isolate; padding:var(--fh-pn-t) var(--fh-pn-x) 30px;
}
[data-theme="forest"] :is(.pl-panel, .cc-panel, .rw-panel, .zw-panel, .hs-panel, .rh-panel)::after {
  content:''; position:absolute; inset:var(--fh-ornament-inset); z-index:1; pointer-events:none; opacity:.8;
  background:var(--fh-ornament);
  -webkit-mask-image:var(--fh-corner-tl), var(--fh-corner-tr), var(--fh-corner-br), var(--fh-corner-bl);
          mask-image:var(--fh-corner-tl), var(--fh-corner-tr), var(--fh-corner-br), var(--fh-corner-bl);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left top, right top, right bottom, left bottom; mask-position:left top, right top, right bottom, left bottom;
  -webkit-mask-size:var(--fh-ornament-size) var(--fh-ornament-size); mask-size:var(--fh-ornament-size) var(--fh-ornament-size);
}
@media (max-width:480px) {
  [data-theme="forest"] :is(.pl-panel, .cc-panel, .rw-panel, .zw-panel, .hs-panel, .rh-panel) { --fh-ornament-size:44px; --fh-pn-x:30px; --fh-pn-t:32px; padding-bottom:26px; }
}

/* Panel header band: the title and description sit on a picture that runs edge to edge across the
   top of the panel and stops 12px below the description, half way to the number circles
   (measured: 25px from the description's bottom to the circles' top). Picture: themes/forest/panel-head.webp, 640 x 130 px,
   pinned to the top left and cropped on the right and bottom; bump the ?v= when it is replaced. With no file the dark gradient shows alone. */
[data-theme="forest"] { --fh-panel-head-img:url('/themes/forest/panel-head.webp?v=3'); }
[data-theme="forest"] :is(.pl-panel-head, .cc-panel-head, .rw-panel-head, .zw-panel-head, .hs-panel-head, .rh-panel-head) {
  margin:calc(-1 * var(--fh-pn-t)) calc(-1 * var(--fh-pn-x)) 0;
  box-sizing:border-box; min-height:104px; padding:11px calc(var(--fh-ornament-inset) + var(--fh-ornament-size));   /* the text stays clear of the corner flourishes: inset + flourish width on each side */   /* min-height = the band's old height, so it doesn't shrink; the text is centred down it, left aligned */
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left;
  border-radius:calc(var(--panel-radius) - 1px) calc(var(--panel-radius) - 1px) 0 0;
  border-bottom:1px solid rgba(210,183,129,.33);
  background:linear-gradient(rgba(7,24,19,.45), rgba(7,24,19,.45)), var(--fh-panel-head-img) left top / cover no-repeat, linear-gradient(155deg, #24443a, #14291f);
}

/* =======================================================================
   SCROLLBARS (forest): slim, rounded, gold on a dark track, for the page and every scrolling box
   (reading text in the panels, the chart dialog, textareas). Chrome, Edge and Safari take the
   ::-webkit-scrollbar rules; Firefox takes the standard properties in the @supports block.
   ======================================================================= */
:is([data-theme="forest"], [data-theme="forest"] *)::-webkit-scrollbar { width:10px; height:10px; }
:is([data-theme="forest"], [data-theme="forest"] *)::-webkit-scrollbar-track { background:rgba(var(--midnight-rgb),.4); border-radius:10px; }
:is([data-theme="forest"], [data-theme="forest"] *)::-webkit-scrollbar-thumb { background:rgba(var(--gold-rgb),.45); border:2px solid transparent; background-clip:content-box; border-radius:10px; }
:is([data-theme="forest"], [data-theme="forest"] *)::-webkit-scrollbar-thumb:hover { background:rgba(var(--gold-rgb),.75); background-clip:content-box; }
:is([data-theme="forest"], [data-theme="forest"] *)::-webkit-scrollbar-corner { background:transparent; }
@supports not selector(::-webkit-scrollbar) {
  [data-theme="forest"] { scrollbar-width:thin; scrollbar-color:rgba(var(--gold-rgb),.5) rgba(var(--midnight-rgb),.4); }
}

/* The reading text box is a scroller, which Chrome makes keyboard-focusable: it drew the gold focus
   outline around the whole reading once clicked. A click leaves no outline; reached with Tab it shows a ring inside
   the box, so keyboard users see where they are. */
[data-theme="forest"] :is(.pl-view, .cc-view, .rw-view, .zw-view, .hs-view, .rh-view):focus { outline:none; }
[data-theme="forest"] :is(.pl-view, .cc-view, .rw-view, .zw-view, .hs-view, .rh-view):focus-visible { outline:var(--focus-ring); outline-offset:-3px; }

/* =======================================================================
   NAVBAR AT 0.95 (above 1440px, where the page is drawn at 0.8): the bar is zoomed a further 1.1875 on
   the homepage, About, Pricing, Blog and the reading pages. On the floating-navbar pages it is now
   56 x 1.1875 = 66.5px tall in page units, so the hero's extra top (the part the bar covers), the
   hero text's top padding and the in-page link offset grow from 56px/45px to match.
   ======================================================================= */
@media (min-width:1441px) {
  [data-theme="forest"] body:is(.pg-fh, .pg-reading, :has(:is(.fh-main, .pl-page, .cc-page, .rw-page, .zw-page, .hs-page, .rh-page))) .site-nav { zoom:1.1875; }
  [data-theme="forest"] .fh-hero { height:calc(clamp(308px,24.2vw,352px) + 67px); }
  [data-theme="forest"] .fh-hero-content { padding-top:67px; }
  html[data-theme="forest"]:is(.pg-fh, :has(.fh-main)) { scroll-padding-top:53px; }
}

/* =======================================================================
   FORUM (themes/forest/forum-hero.php, set up by forum.php): the shared hero and footer, the 0.8 scale and
   0.95 navbar above 1440px, but the navbar stays in the page flow (static) with the hero under it, so the
   hero loses the extra top the floating pages give it. The forum's own title block is replaced by the
   hero. Content width matches the homepage, About and Pricing: side padding var(--fh-side), and above
   1440px a 1440px column less 64px each side.
   ======================================================================= */
[data-theme="forest"] body:is(.pg-static, :has(.fh-hero--static)) .site-nav {
  position:relative; top:auto; left:auto; right:auto;
  background:var(--fh-cream); box-shadow:0 2px 14px rgba(0,0,0,.18);
}
[data-theme="forest"] .fh-hero--static { height:calc(min(46vw,600px)); }
[data-theme="forest"] .fh-hero--static .fh-hero-content { padding-top:0; }
@media (min-width:1001px) { [data-theme="forest"] .fh-hero--static { height:clamp(308px,24.2vw,352px); min-height:0; } }
html[data-theme="forest"]:is(.pg-static, :has(.fh-hero--static)) { scroll-padding-top:0; }
[data-theme="forest"] body:is(.pg-static, :has(.fh-hero--static)) .forum-header { display:none; }
[data-theme="forest"] .fh-main .forum-wrap { max-width:none; margin:0; padding:48px var(--fh-side) 80px; }
@media (min-width:1441px) { [data-theme="forest"] .fh-main .forum-wrap { padding-inline:max(64px, calc((100% - 1440px) / 2 + 64px)); } }

/* =======================================================================
   FORUM BOARD (themes/forest/forum.js, ".ff-" classes). Each top-level category is a full-width band;
   bands alternate light and green over the still photo (the green is the Pricing page's). Under the
   category title its forums sit in a table: Forum (with the description and moderators), Threads,
   Posts, Last post. A forum's page adds a header (crumbs, title, New Thread), sub-forums and a thread
   table. Thread pages keep the forum's own dark cards and get the page's side padding instead.
   ======================================================================= */
[data-theme="forest"] .fh-main .forum-wrap { padding:0; }
[data-theme="forest"] #forumView:not([data-ff="bands"]) { padding:48px var(--fh-side) 80px; }
@media (min-width:1441px) { [data-theme="forest"] #forumView:not([data-ff="bands"]) { padding-inline:max(64px, calc((100% - 1440px) / 2 + 64px)); } }

[data-theme="forest"] .ff-band { max-width:none; margin:0; padding:52px var(--fh-side) 60px; }   /* styles.css boxes every <section> at 980px */
@media (min-width:1441px) { [data-theme="forest"] .ff-band { padding-inline:max(64px, calc((100% - 1440px) / 2 + 64px)); } }
/* the "Earn Rune Credits" link (forum.php): a cream strip at the band's width, just above the first band */
[data-theme="forest"] .fh-main .forum-earn { margin:0; padding:22px var(--fh-side) 0; background:var(--fh-cream); }
@media (min-width:1441px) { [data-theme="forest"] .fh-main .forum-earn { padding-inline:max(64px, calc((100% - 1440px) / 2 + 64px)); } }
[data-theme="forest"] .fh-main .forum-earn a { color:var(--fh-bronze); }
[data-theme="forest"] .ff-inner { max-width:1312px; margin:0 auto; }
[data-theme="forest"] .ff-band--light { background:var(--fh-cream); color:var(--fh-ink); }
[data-theme="forest"] .ff-band--green {
  background:linear-gradient(rgba(var(--midnight-rgb),.88), rgba(var(--midnight-rgb),.88)),
             url('/themes/forest/bg-forest.webp?v=2') center / cover no-repeat fixed var(--midnight);
  color:var(--bone);
}

[data-theme="forest"] .ff-title {
  display:flex; align-items:center; gap:18px; margin:0 0 10px; font-family:'Alata',var(--fh-display); font-weight:400;
  font-size:calc(1.25rem * var(--text-scale)); letter-spacing:.1em; line-height:1.3; text-transform:uppercase; }
[data-theme="forest"] .ff-title::after { content:''; flex:0 0 60px; height:1px; }
[data-theme="forest"] .ff-band--light .ff-title { color:var(--fh-ink); }
[data-theme="forest"] .ff-band--light .ff-title::after { background:var(--fh-bronze); }
[data-theme="forest"] .ff-band--green .ff-title { color:var(--bone); }
[data-theme="forest"] .ff-band--green .ff-title::after { background:var(--gold-mid); }
[data-theme="forest"] .ff-subtitle { margin:30px 0 10px; font-family:var(--font-body); font-size:calc(0.75rem * var(--text-scale)); font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
[data-theme="forest"] .ff-band--light .ff-subtitle { color:var(--fh-bronze); }
[data-theme="forest"] .ff-band--green .ff-subtitle { color:var(--gold-light); }
[data-theme="forest"] .ff-cat-desc { margin:0 0 22px; font-size:calc(0.90625rem * var(--text-scale)); font-style:italic; line-height:1.6; }
[data-theme="forest"] .ff-band--light .ff-cat-desc { color:var(--fh-ink-soft); }
[data-theme="forest"] .ff-band--green .ff-cat-desc { color:var(--frost); }
[data-theme="forest"] .ff-empty { margin:18px 0 0; font-style:italic; }

[data-theme="forest"] .ff-table { width:100%; border-collapse:collapse; margin:0; }
[data-theme="forest"] .ff-table th {
  padding:10px 14px; text-align:left; font-family:var(--font-body); font-size:calc(0.6875rem * var(--text-scale)); font-weight:700; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; }
[data-theme="forest"] .ff-table td { padding:18px 14px; vertical-align:top; border-top:1px solid; }
[data-theme="forest"] .ff-band--light .ff-table th { color:var(--fh-bronze); }
[data-theme="forest"] .ff-band--light .ff-table td { border-color:var(--fh-cream-line); }
[data-theme="forest"] .ff-band--light .ff-table tbody tr:hover { background:rgba(var(--fh-ink-rgb),.04); }
[data-theme="forest"] .ff-band--green .ff-table th { color:var(--gold-mid); }
[data-theme="forest"] .ff-band--green .ff-table td { border-color:rgba(var(--gold-rgb),.2); }
[data-theme="forest"] .ff-band--green .ff-table tbody tr:hover { background:rgba(var(--gold-rgb),.07); }
[data-theme="forest"] .ff-table .ff-c-num, [data-theme="forest"] .ff-table td.ff-num { width:96px; text-align:center; font-variant-numeric:tabular-nums; }
[data-theme="forest"] .ff-table .ff-c-last, [data-theme="forest"] .ff-table td.ff-last { width:300px; }
[data-theme="forest"] .ff-table td.ff-num { font-size:calc(0.9375rem * var(--text-scale)); font-weight:600; }

[data-theme="forest"] .ff-name-link { font-family:'Alata',var(--fh-display); font-size:calc(1.0625rem * var(--text-scale)); letter-spacing:.03em; text-decoration:none; }
[data-theme="forest"] .ff-band--light .ff-name-link, [data-theme="forest"] .ff-band--light .ff-last-title { color:var(--fh-ink); }
[data-theme="forest"] .ff-band--light .ff-name-link:hover, [data-theme="forest"] .ff-band--light a.ff-last-title:hover { color:var(--fh-bronze); }
[data-theme="forest"] .ff-band--green .ff-name-link, [data-theme="forest"] .ff-band--green .ff-last-title { color:var(--bone); }
[data-theme="forest"] .ff-band--green .ff-name-link:hover, [data-theme="forest"] .ff-band--green a.ff-last-title:hover { color:var(--gold-light); }
[data-theme="forest"] .ff-last-title { display:block; font-size:calc(0.875rem * var(--text-scale)); font-weight:600; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px; }
[data-theme="forest"] .ff-desc { margin-top:5px; font-size:calc(0.875rem * var(--text-scale)); line-height:1.55; max-width:640px; }
[data-theme="forest"] .ff-by, [data-theme="forest"] .ff-mods { margin-top:5px; font-size:calc(0.78125rem * var(--text-scale)); }
[data-theme="forest"] .ff-mods { font-style:italic; }
[data-theme="forest"] .ff-muted { font-style:italic; opacity:.75; }
[data-theme="forest"] .ff-band--light .ff-desc { color:var(--fh-ink-soft); }
[data-theme="forest"] .ff-band--light .ff-by { color:var(--fh-ink-soft); }
[data-theme="forest"] .ff-band--light .ff-mods { color:var(--fh-bronze); }
[data-theme="forest"] .ff-band--green .ff-desc, [data-theme="forest"] .ff-band--green .ff-by { color:var(--frost); }
[data-theme="forest"] .ff-band--green .ff-mods { color:var(--gold-mid); }
[data-theme="forest"] .ff-flag { display:inline-block; margin-right:8px; padding:1px 7px; border:1px solid currentColor; border-radius:999px; font-size:calc(0.625rem * var(--text-scale)); font-weight:700; letter-spacing:.14em; text-transform:uppercase; vertical-align:middle; }
[data-theme="forest"] .ff-band--light .ff-flag { color:var(--fh-bronze); }
[data-theme="forest"] .ff-band--green .ff-flag { color:var(--gold-mid); }

[data-theme="forest"] .ff-crumbs { margin:0 0 18px; font-size:calc(0.75rem * var(--text-scale)); letter-spacing:.14em; text-transform:uppercase; white-space:pre-wrap; }
[data-theme="forest"] .ff-crumbs a { text-decoration:none; }
[data-theme="forest"] .ff-band--light .ff-crumbs { color:var(--fh-ink-soft); }
[data-theme="forest"] .ff-band--light .ff-crumbs a { color:var(--fh-bronze); }
[data-theme="forest"] .ff-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
[data-theme="forest"] .ff-head .ff-title { flex:1; }
[data-theme="forest"] .ff-btn {
  flex:none; padding:10px 22px; background:var(--fh-green); color:var(--fh-cream); border:1px solid rgba(var(--gold-rgb),.55); border-radius:2px; cursor:pointer;
  font-family:var(--font-body); font-size:calc(0.75rem * var(--text-scale)); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
[data-theme="forest"] .ff-btn:hover { background:var(--fh-green-hover); border-color:var(--gold); }
[data-theme="forest"] #forumView[data-ff="bands"] > .forum-form { width:min(1312px, calc(100% - 2 * max(4vw,16px))); margin:32px auto 60px; box-sizing:border-box; }

@media (max-width:760px) {
  [data-theme="forest"] .ff-table thead { display:none; }
  [data-theme="forest"] .ff-table, [data-theme="forest"] .ff-table tbody, [data-theme="forest"] .ff-table tr, [data-theme="forest"] .ff-table td { display:block; width:auto; }
  [data-theme="forest"] .ff-table tr { padding:14px 0; border-top:1px solid; }
  [data-theme="forest"] .ff-band--light .ff-table tr { border-color:var(--fh-cream-line); }
  [data-theme="forest"] .ff-band--green .ff-table tr { border-color:rgba(var(--gold-rgb),.2); }
  [data-theme="forest"] .ff-table td { padding:3px 0; border:0 !important; text-align:left !important; }
  [data-theme="forest"] .ff-table td.ff-num { display:inline-block; width:auto !important; margin-right:18px; font-size:calc(0.8125rem * var(--text-scale)); font-weight:400; }
  [data-theme="forest"] .ff-table td.ff-num::before { content:attr(data-label) ": "; opacity:.7; }
  [data-theme="forest"] .ff-table td.ff-last { width:auto !important; }
  [data-theme="forest"] .ff-last-title { max-width:none; }
}

/* a short forum page still reaches the bottom of the window: the last band grows to fill, so the footer
   sits at the bottom with no stray photo under it. Above 1440px the body is zoomed 0.8, so its minimum
   height is 100vh / 0.8. */
html[data-theme="forest"]:is(.pg-static, :has(.fh-hero--static)) body { min-height:100vh; display:flex; flex-direction:column; }
@media (min-width:1441px) { html[data-theme="forest"]:is(.pg-static, :has(.fh-hero--static)) body { min-height:calc(100vh / .8); } }
[data-theme="forest"] body:is(.pg-static, :has(.fh-hero--static)) .fh-main { flex:1; display:flex; flex-direction:column; }
[data-theme="forest"] body:is(.pg-static, :has(.fh-hero--static)) .fh-main .forum-wrap { flex:1; display:flex; flex-direction:column; }
[data-theme="forest"] body:is(.pg-static, :has(.fh-hero--static)) #forumView { flex:1; display:flex; flex-direction:column; }
[data-theme="forest"] #forumView > .ff-band:last-of-type { flex:1; }

/* the About page's forest-only parts (hidden in the default look by css/about.css) */
[data-theme="forest"] .about-forest-only { display:block; }

/* =======================================================================
   HERO (home, About, Pricing, Blog, Forum)
   - The picture sits 90px higher, as it was moved on the homepage (css/home.css gives the home page
     .hero-bg { top:-90px }; the other pages had no such rule, so their picture sat lower). The Forum's hero is under
     an in-flow navbar, so its picture box also starts above the part the other pages hide under the floating
     bar (56px, 67px above 1440px): the same part of the picture shows on every page.
   - The hero casts a 2px black shadow on what is below it (above the sections' z-index 2, under the navbar).
   ======================================================================= */
[data-theme="forest"] .fh-hero .hero-bg { top:-90px; }
[data-theme="forest"] .fh-hero--static .hero-bg { top:-146px; }
@media (min-width:1441px) { [data-theme="forest"] .fh-hero--static .hero-bg { top:-157px; } }
[data-theme="forest"] .fh-hero { z-index:5; box-shadow:0 2px 3px rgba(var(--shadow-rgb),.8); }

/* The scrollbar's space is kept from the first paint on the long pages, so the fixed navbar and the page do not
   shift sideways when the scrollbar appears once the content has arrived. (Not on the reading pages and the Forum,
   which fit one screen and have no scrollbar to reserve room for.) */
html[data-theme="forest"].pg-fh:not(.pg-static) { scrollbar-gutter:stable; }

/* =======================================================================
   CLOTH CARDS (About, "How a reading works"): woven, brocaded cloth cards that catch the light.
   - Cloth: a diamond brocade in faint brass thread over a basket weave (small SVG tiles), fading in below the header
     picture; a soft glare from the top left, darker edges (a domed look), a faint brass glow in the bottom corners,
     and a large, very faint rune watermark in the empty lower part (Ansuz, Jera, Raido, Othala: card 1 to 4).
   - Edge: a dashed brass line just inside the border, like stitching; a light rim and a drop shadow lift the card.
   - Medals: the number circles are brass foil with a soft glow. Titles are gilded, with a short brass rule.
   - Header picture: a brass line under it, and it zooms slowly on hover.
   - Hover: the card rises, its shadow deepens, a band of light sweeps across the cloth and the corner flourishes brighten.
   - Entrance: the four cards rise in one after another when the row scrolls into view (script at the end of about.php;
     without it, or with reduced motion, they are simply there).
   ======================================================================= */
[data-theme="forest"] .about-steps li:nth-child(1) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%23D2B781' fill-opacity='.075'%3E%E1%9A%A8%3C/text%3E%3C/svg%3E"); }
[data-theme="forest"] .about-steps li:nth-child(2) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%23D2B781' fill-opacity='.075'%3E%E1%9B%83%3C/text%3E%3C/svg%3E"); }
[data-theme="forest"] .about-steps li:nth-child(3) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%23D2B781' fill-opacity='.075'%3E%E1%9A%B1%3C/text%3E%3C/svg%3E"); }
[data-theme="forest"] .about-steps li:nth-child(4) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%23D2B781' fill-opacity='.075'%3E%E1%9B%9F%3C/text%3E%3C/svg%3E"); }
[data-theme="forest"] .about-steps li {
  background-color:var(--fh-card-dark);
  background-image:
    linear-gradient(105deg, rgba(var(--white-rgb),0) 40%, rgba(var(--white-rgb),.1) 50%, rgba(var(--white-rgb),0) 60%),
    linear-gradient(128deg, rgba(var(--white-rgb),.085) 0%, rgba(var(--white-rgb),.03) 26%, rgba(var(--white-rgb),0) 48%),
    linear-gradient(180deg, var(--fh-card-dark) 110px, transparent 250px),
    radial-gradient(ellipse 120% 90% at 50% 38%, rgba(var(--shadow-rgb),0) 55%, rgba(var(--shadow-rgb),.3) 100%),
    radial-gradient(circle at 0 100%, rgba(var(--gold-rgb),.16), transparent 52%),
    radial-gradient(circle at 100% 100%, rgba(var(--gold-rgb),.16), transparent 52%),
    var(--rune),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none' stroke='%23D2B781' stroke-width='1'%3E%3Cpath d='M18 0L36 18L18 36L0 18Z' stroke-opacity='.11'/%3E%3Cpath d='M18 9L27 18L18 27L9 18Z' stroke-opacity='.08'/%3E%3Cpath d='M18 14.5L21.5 18L18 21.5L14.5 18Z' stroke-opacity='.13'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='0' y='0' width='4' height='4' fill='%23fff' fill-opacity='.05'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23fff' fill-opacity='.05'/%3E%3Crect x='4' y='0' width='4' height='4' fill='%23000' fill-opacity='.11'/%3E%3Crect x='0' y='4' width='4' height='4' fill='%23000' fill-opacity='.11'/%3E%3Cpath d='M0 2h4M4 6h4' stroke='%23fff' stroke-opacity='.05' stroke-width='1'/%3E%3Cpath d='M6 0v4M2 4v4' stroke='%23fff' stroke-opacity='.035' stroke-width='1'/%3E%3C/svg%3E");
  background-size:260% 100%, auto, auto, auto, auto, auto, 150px 150px, 36px 36px, 8px 8px;
  background-position:160% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 50% 93%, 0 0, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  outline:1px dashed rgba(var(--gold-rgb),.42); outline-offset:-6px;
  box-shadow:inset 0 1px 0 rgba(var(--white-rgb),.08), inset 0 -34px 46px -24px rgba(var(--shadow-rgb),.4), 0 12px 26px -8px rgba(var(--shadow-rgb),.55);
  transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, background-position .9s ease;
}
[data-theme="forest"] .about-steps li:hover {
  transform:translateY(-7px); background-position:-60% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 50% 93%, 0 0, 0 0;
  box-shadow:inset 0 1px 0 rgba(var(--white-rgb),.12), inset 0 -34px 46px -24px rgba(var(--shadow-rgb),.4), 0 22px 36px -10px rgba(var(--shadow-rgb),.65), 0 0 26px -6px rgba(var(--gold-rgb),.25);
}
[data-theme="forest"] .about-steps li:hover::after { opacity:1; }

/* the header picture: its own layer, so it can zoom; a brass line under it */
[data-theme="forest"] .about-steps .fa-head { position:relative; overflow:hidden; background:none; border-bottom:1px solid rgba(var(--gold-rgb),.5); }
[data-theme="forest"] .about-steps .fa-head::before {
  content:''; position:absolute; inset:0; background:var(--fp-head, var(--fp-head-fallback)) center / cover no-repeat;
  transition:transform .9s cubic-bezier(.2,.8,.25,1);
}
[data-theme="forest"] .about-steps .fa-head::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,29,23,0) 45%, rgba(7,29,23,.8)); }
[data-theme="forest"] .about-steps li:hover .fa-head::before { transform:scale(1.1); }

/* brass foil medals */
[data-theme="forest"] .about-steps li::before {
  background:linear-gradient(145deg, var(--gold-light) 0%, var(--gold) 46%, var(--gold-dark) 100%); color:var(--midnight);
  border:1px solid var(--gold-light); font-weight:400; text-shadow:0 1px 0 rgba(var(--white-rgb),.35);
  box-shadow:0 0 16px rgba(var(--gold-rgb),.42), 0 3px 6px rgba(var(--shadow-rgb),.5), inset 0 1px 1px rgba(var(--white-rgb),.55), inset 0 -2px 3px rgba(var(--shadow-rgb),.25);
}

/* gilded titles with a short brass rule */
[data-theme="forest"] .about-steps li > h3 {
  background:linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 62%, var(--gold-mid) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold);
}
[data-theme="forest"] .about-steps li > h3::after {
  content:''; display:block; width:44px; height:1px; margin-top:12px; background:linear-gradient(90deg, var(--gold-mid), transparent);
  -webkit-text-fill-color:initial;
}

/* a soft green-and-gold halo behind the row lifts the cards off the dark band */
[data-theme="forest"] .about-steps { position:relative; isolation:isolate; }
[data-theme="forest"] .about-steps::before {
  content:''; position:absolute; inset:-50px -30px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 45%, rgba(var(--aurora-rgb),.13), rgba(var(--gold-rgb),.05) 45%, transparent 72%);
}

/* the entrance: only when the script has marked the row (js-reveal) */
[data-theme="forest"] .about-steps.js-reveal li { opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, background-position .9s ease; }
[data-theme="forest"] .about-steps.js-reveal li.in { opacity:1; transform:none; }
[data-theme="forest"] .about-steps.js-reveal li.in:hover { transform:translateY(-7px); }
@media (prefers-reduced-motion:reduce) {
  [data-theme="forest"] .about-steps li, [data-theme="forest"] .about-steps .fa-head::before { transition:none !important; }
  [data-theme="forest"] .about-steps li:hover { transform:none; }
  [data-theme="forest"] .about-steps li:hover .fa-head::before { transform:none; }
}

/* =======================================================================
   CLOTH CARDS (Pricing): the membership cards get the same woven, brocaded cloth as the About steps, a little stronger.
   Dark cards (the Premium band) use brass thread on green cloth; the light cards (Basic, Live and Recorded) use bronze
   thread on an off-white, linen-like cloth. Each has the stitched edge, brass-foil glyph medal, header picture that
   zooms on hover, a faint rune watermark (Fehu, Uruz, Thurisaz, Ansuz by position in its row), and the lift and glare
   sweep on hover. The cards rise in one after another (script in themes/forest/pricing.php; without it they are simply there).
   ======================================================================= */
[data-theme="forest"] .fp-green .fp-card:nth-child(1) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%23D2B781' fill-opacity='0.085'%3E%E1%9A%A0%3C/text%3E%3C/svg%3E"); }
[data-theme="forest"] .fp-green .fp-card:nth-child(2) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%23D2B781' fill-opacity='0.085'%3E%E1%9A%A2%3C/text%3E%3C/svg%3E"); }
[data-theme="forest"] .fp-green .fp-card:nth-child(3) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%23D2B781' fill-opacity='0.085'%3E%E1%9A%A6%3C/text%3E%3C/svg%3E"); }
[data-theme="forest"] .fp-green .fp-card:nth-child(4) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%23D2B781' fill-opacity='0.085'%3E%E1%9A%A8%3C/text%3E%3C/svg%3E"); }
[data-theme="forest"] .fp-light .fp-card:nth-child(1) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%2377592E' fill-opacity='0.085'%3E%E1%9A%A0%3C/text%3E%3C/svg%3E"); }
[data-theme="forest"] .fp-light .fp-card:nth-child(2) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%2377592E' fill-opacity='0.085'%3E%E1%9A%A2%3C/text%3E%3C/svg%3E"); }
[data-theme="forest"] .fp-light .fp-card:nth-child(3) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%2377592E' fill-opacity='0.085'%3E%E1%9A%A6%3C/text%3E%3C/svg%3E"); }
[data-theme="forest"] .fp-light .fp-card:nth-child(4) { --rune:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Ctext x='75' y='118' text-anchor='middle' font-size='124' font-family=%22Segoe UI Symbol, Noto Sans Runic, Arial Unicode MS, serif%22 fill='%2377592E' fill-opacity='0.085'%3E%E1%9A%A8%3C/text%3E%3C/svg%3E"); }

[data-theme="forest"] .fp-sec .fp-card {
  outline:1px dashed rgba(var(--gold-rgb),.42); outline-offset:-6px;
  background-position:160% 0, 0 0, 0 0, 0 0, 0 0, 50% 96%, 0 0, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, background-position .9s ease;
}
/* dark cards */
[data-theme="forest"] .fp-green .fp-card {
  background-color:var(--fh-card-dark);
  background-image:
    linear-gradient(105deg, rgba(var(--white-rgb),0) 40%, rgba(var(--white-rgb),.11) 50%, rgba(var(--white-rgb),0) 60%),
    linear-gradient(128deg, rgba(var(--white-rgb),.09) 0%, rgba(var(--white-rgb),.03) 26%, rgba(var(--white-rgb),0) 48%),
    linear-gradient(180deg, var(--fh-card-dark) 130px, transparent 290px),
    radial-gradient(ellipse 120% 90% at 50% 38%, rgba(var(--shadow-rgb),0) 55%, rgba(var(--shadow-rgb),.3) 100%),
    radial-gradient(circle at 0 100%, rgba(var(--gold-rgb),.16), transparent 50%),
    var(--rune),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none' stroke='%23D2B781' stroke-width='1'%3E%3Cpath d='M18 0L36 18L18 36L0 18Z' stroke-opacity='0.16'/%3E%3Cpath d='M18 9L27 18L18 27L9 18Z' stroke-opacity='0.115'/%3E%3Cpath d='M18 14.5L21.5 18L18 21.5L14.5 18Z' stroke-opacity='0.19'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='0' y='0' width='4' height='4' fill='%23fff' fill-opacity='0.07'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23fff' fill-opacity='0.07'/%3E%3Crect x='4' y='0' width='4' height='4' fill='%23000' fill-opacity='0.15'/%3E%3Crect x='0' y='4' width='4' height='4' fill='%23000' fill-opacity='0.15'/%3E%3Cpath d='M0 2h4M4 6h4' stroke='%23fff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M6 0v4M2 4v4' stroke='%23fff' stroke-opacity='0.042' stroke-width='1'/%3E%3C/svg%3E");
  background-size:260% 100%, auto, auto, auto, auto, 140px 140px, 36px 36px, 8px 8px;
  box-shadow:inset 0 1px 0 rgba(var(--white-rgb),.08), inset 0 -34px 46px -24px rgba(var(--shadow-rgb),.4), 0 12px 26px -8px rgba(var(--shadow-rgb),.55);
}
/* light cards: off-white cloth */
[data-theme="forest"] .fp-light .fp-card {
  background-color:var(--fh-paper); outline-color:rgba(119,89,46,.45);
  background-image:
    linear-gradient(105deg, rgba(var(--gold-rgb),0) 40%, rgba(var(--gold-rgb),.22) 50%, rgba(var(--gold-rgb),0) 60%),
    linear-gradient(128deg, rgba(var(--white-rgb),.75) 0%, rgba(var(--white-rgb),.3) 28%, rgba(var(--white-rgb),0) 50%),
    linear-gradient(180deg, var(--fh-paper) 130px, transparent 290px),
    radial-gradient(ellipse 120% 90% at 50% 38%, rgba(var(--fh-ink-rgb),0) 55%, rgba(var(--fh-ink-rgb),.09) 100%),
    radial-gradient(circle at 0 100%, rgba(119,89,46,.1), transparent 50%),
    var(--rune),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none' stroke='%2377592E' stroke-width='1'%3E%3Cpath d='M18 0L36 18L18 36L0 18Z' stroke-opacity='0.17'/%3E%3Cpath d='M18 9L27 18L18 27L9 18Z' stroke-opacity='0.12'/%3E%3Cpath d='M18 14.5L21.5 18L18 21.5L14.5 18Z' stroke-opacity='0.2'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='0' y='0' width='4' height='4' fill='%23fff' fill-opacity='0.75'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23fff' fill-opacity='0.75'/%3E%3Crect x='4' y='0' width='4' height='4' fill='%231A2C24' fill-opacity='0.055'/%3E%3Crect x='0' y='4' width='4' height='4' fill='%231A2C24' fill-opacity='0.055'/%3E%3Cpath d='M0 2h4M4 6h4' stroke='%23fff' stroke-opacity='0.6' stroke-width='1'/%3E%3Cpath d='M6 0v4M2 4v4' stroke='%23fff' stroke-opacity='0.420' stroke-width='1'/%3E%3C/svg%3E");
  background-size:260% 100%, auto, auto, auto, auto, 140px 140px, 36px 36px, 8px 8px;
  box-shadow:inset 0 1px 0 rgba(var(--white-rgb),.9), inset 0 -30px 40px -26px rgba(var(--fh-ink-rgb),.12), 0 12px 24px -10px rgba(var(--fh-ink-rgb),.3);
}
[data-theme="forest"] .fp-sec .fp-card:hover { transform:translateY(-7px); background-position:-60% 0, 0 0, 0 0, 0 0, 0 0, 50% 96%, 0 0, 0 0; }
[data-theme="forest"] .fp-green .fp-card:hover { box-shadow:inset 0 1px 0 rgba(var(--white-rgb),.12), inset 0 -34px 46px -24px rgba(var(--shadow-rgb),.4), 0 22px 36px -10px rgba(var(--shadow-rgb),.65), 0 0 26px -6px rgba(var(--gold-rgb),.25); }
[data-theme="forest"] .fp-light .fp-card:hover { box-shadow:inset 0 1px 0 rgba(var(--white-rgb),.9), inset 0 -30px 40px -26px rgba(var(--fh-ink-rgb),.12), 0 22px 32px -12px rgba(var(--fh-ink-rgb),.38), 0 0 24px -8px rgba(var(--gold-rgb),.3); }
[data-theme="forest"] .fp-sec .fp-card:hover::after { opacity:1; }
/* the card you are on keeps its ring */
[data-theme="forest"] .fp-green .fp-card.is-current { box-shadow:0 0 0 2px var(--fh-ornament), inset 0 1px 0 rgba(var(--white-rgb),.08), 0 12px 26px -8px rgba(var(--shadow-rgb),.55); }
[data-theme="forest"] .fp-light .fp-card.is-current { box-shadow:0 0 0 2px var(--fh-ornament), inset 0 1px 0 rgba(var(--white-rgb),.9), 0 12px 24px -10px rgba(var(--fh-ink-rgb),.3); }

/* header picture: a brass line under it, and a slow zoom on hover (its glyph and badge hang over the edge, so the zoom is the picture's own size) */
[data-theme="forest"] .fp-sec .fp-head { border-bottom:1px solid rgba(var(--gold-rgb),.5); background-size:auto, auto 100%; transition:background-size .9s cubic-bezier(.2,.8,.25,1); }
[data-theme="forest"] .fp-sec .fp-card:hover .fp-head { background-size:auto, auto 116%; }

/* brass foil glyph medal */
[data-theme="forest"] .fp-sec .fp-glyph {
  background:linear-gradient(145deg, var(--gold-light) 0%, var(--gold) 46%, var(--gold-dark) 100%); color:var(--midnight); border-color:var(--gold-light);
  text-shadow:0 1px 0 rgba(var(--white-rgb),.35);
  box-shadow:0 0 16px rgba(var(--gold-rgb),.42), 0 3px 6px rgba(var(--shadow-rgb),.5), inset 0 1px 1px rgba(var(--white-rgb),.55), inset 0 -2px 3px rgba(var(--shadow-rgb),.25);
}
/* names: gilded on the dark cards, a short brass rule on both */
[data-theme="forest"] .fp-green .fp-name {
  background:linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 62%, var(--gold-mid) 100%); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold);
}
[data-theme="forest"] .fp-sec .fp-name::after { content:''; display:block; width:44px; height:1px; margin-top:10px; background:linear-gradient(90deg, rgba(119,89,46,.9), transparent); -webkit-text-fill-color:initial; }
[data-theme="forest"] .fp-green .fp-name::after { background:linear-gradient(90deg, var(--gold-mid), transparent); }

/* a soft halo behind the Premium row */
[data-theme="forest"] .fp-green .fp-grid { position:relative; isolation:isolate; }
[data-theme="forest"] .fp-green .fp-grid::before {
  content:''; position:absolute; inset:-50px -30px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 45%, rgba(var(--aurora-rgb),.13), rgba(var(--gold-rgb),.05) 45%, transparent 72%);
}

/* the entrance */
[data-theme="forest"] .fp-grid.js-reveal .fp-card { opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, background-position .9s ease; }
[data-theme="forest"] .fp-grid.js-reveal .fp-card.in { opacity:1; transform:none; }
[data-theme="forest"] .fp-grid.js-reveal .fp-card.in:hover { transform:translateY(-7px); }
@media (prefers-reduced-motion:reduce) {
  [data-theme="forest"] .fp-sec .fp-card, [data-theme="forest"] .fp-sec .fp-head { transition:none !important; }
  [data-theme="forest"] .fp-sec .fp-card:hover { transform:none; }
  [data-theme="forest"] .fp-sec .fp-card:hover .fp-head { background-size:auto, auto 100%; }
}

/* =======================================================================
   BLOG POST PAGE (blog-post.php, ".fbp-sec"): no hero; the static navbar (pg-static) with the post on a light
   band, like the Blog list's. The title is the homepage's "From the blog" heading (Alata, capitals, a bronze
   rule after the words); the light band's tokens turn dark on cream, as on the About page, so the body text,
   links, comments and quotes follow without their own rules. The footer sits at the bottom of a short post.
   ======================================================================= */
[data-theme="forest"] .fbp-sec {
  flex:1;
  --bone:var(--fh-ink); --frost:var(--fh-ink-soft); --gold:var(--fh-bronze); --line:var(--fh-cream-line);
  --btn-bg:var(--fh-green); --btn-text:var(--fh-cream); --btn-hover-bg:var(--fh-green-hover);
  --field-text:var(--fh-ink); --error:#8B2E2E;
}
[data-theme="forest"] .fbp-sec .post-wrap { max-width:none; padding:0; }   /* the band's full content width, like every other page (Kira 2026-10-17) */
[data-theme="forest"] .fbp-sec .post-back { margin-bottom:22px; }
[data-theme="forest"] .fbp-sec .post-back a {
  font-family:var(--font-body); font-size:calc(0.78125rem * var(--text-scale)); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fh-ink); opacity:1;
}
[data-theme="forest"] .fbp-sec .post-back a:hover { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .post-cover { height:340px; margin-bottom:28px; border:1px solid var(--fh-cream-line); border-radius:3px; }
[data-theme="forest"] .fbp-sec .post-head { margin-bottom:28px; padding:0; text-align:left; }   /* padding: styles.css pads every <header> */
[data-theme="forest"] .fbp-sec .post-title {
  margin:0 0 12px;
  font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.625rem * var(--text-scale)); line-height:1.3; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fh-ink);
}
[data-theme="forest"] .fbp-sec .post-title::after { content:''; display:inline-block; width:60px; height:1px; margin-left:18px; vertical-align:middle; background:var(--fh-bronze); }   /* the rule follows the last line of a long title */
[data-theme="forest"] .fbp-sec .post-meta { font-weight:700; letter-spacing:.16em; color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .post-body { opacity:1; color:var(--fh-ink-soft); }   /* the base dims the body to 90%: full strength on cream */
[data-theme="forest"] .fbp-sec .post-body :is(h2, h3) { font-family:'Alata',var(--fh-display); font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .post-body blockquote { opacity:1; border-left-color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .post-body img { border-radius:3px; }
[data-theme="forest"] .fbp-sec .comments { max-width:none; margin-inline:0; padding-inline:0; }   /* styles.css caps every <section> at 980px and pads it by 24px at the sides */
[data-theme="forest"] .fbp-sec .comments-label { opacity:1; font-family:'Alata',var(--fh-display); font-size:calc(0.875rem * var(--text-scale)); letter-spacing:.1em; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .comment-text, [data-theme="forest"] .fbp-sec .comment-note { opacity:1; }
[data-theme="forest"] .fbp-sec .comment-meta { opacity:1; }
[data-theme="forest"] .fbp-sec :is(.comment-form textarea, .mod-editor textarea) { background:var(--fh-paper); }
[data-theme="forest"] .fbp-sec .comment-msg { color:var(--fh-green); }
[data-theme="forest"] .fbp-sec .comment-msg.err { color:var(--error); }
[data-theme="forest"] .fbp-sec .be-btn--danger { color:var(--error); border-color:var(--error); }
[data-theme="forest"] .fbp-sec :focus-visible { outline-color:var(--fh-green); }
@media (max-width:600px) {
  [data-theme="forest"] .fbp-sec .post-title { font-size:calc(1.3125rem * var(--text-scale)); }
  [data-theme="forest"] .fbp-sec .post-cover { height:200px; }
}

/* Phones and tablets: the green bands (Pricing, Forum) scroll with the page instead of staying fixed over the photo.
   A fixed background makes the browser repaint the whole band, a 300 KB photo under a veil, on every scroll frame, which
   is what made these pages stutter on phones. Desktops keep the fixed look. */
@media (max-width:1000px) {
  [data-theme="forest"] :is(.fp-green, .ff-band--green) { background-attachment:scroll; }
}

/* =======================================================================
   FORUM THREAD VIEW (forum.php sets data-ff="post" on #forumView): the thread on a light band, like the Blog post
   page, and the post and each reply as a linen card: a dashed bronze line just inside the border (the stitching, as on
   the pricing cards), the four corner flourishes, a soft glare and a light weave. The band's tokens turn dark on
   cream (as on the About page), so titles, text, links and the moderator buttons follow without their own rules.
   ======================================================================= */
[data-theme="forest"] #forumView[data-ff="post"] {
  background:var(--fh-cream); color:var(--fh-ink);
  --bone:var(--fh-ink); --frost:var(--fh-ink-soft); --gold:var(--fh-bronze); --line:var(--fh-cream-line);
  --btn-bg:var(--fh-green); --btn-text:var(--fh-cream); --btn-hover-bg:var(--fh-green-hover);
  --field-text:var(--fh-ink); --error:#8B2E2E;
}
/* the content column */
[data-theme="forest"] #forumView[data-ff="post"] > * { width:100%; max-width:1312px; margin-inline:auto; box-sizing:border-box; }   /* the content width of the other pages */
@media (min-width:1441px) { [data-theme="forest"] #forumView[data-ff="post"] > * { max-width:none; } }   /* the view's own side padding sets it there, as on the other pages */
[data-theme="forest"] #forumView[data-ff="post"] .forum-crumbs { opacity:1; margin-bottom:22px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:calc(0.75rem * var(--text-scale)); }
[data-theme="forest"] #forumView[data-ff="post"] .forum-crumbs a { color:var(--fh-ink); }
[data-theme="forest"] #forumView[data-ff="post"] .forum-crumbs a:hover { color:var(--fh-bronze); text-decoration:none; }

/* the card: the post and all its replies. Weave toned down (white .2, ink .012). */
[data-theme="forest"] #forumView[data-ff="post"] .forum-thread {
  position:relative; isolation:isolate; padding:40px 48px; margin-bottom:26px;
  border:1px solid var(--fh-ornament); border-radius:0 18px 18px 18px;   /* the top left corner is square */ background-color:var(--fh-paper); color:var(--fh-ink);
  background-image:
    linear-gradient(128deg, rgba(var(--white-rgb),.75) 0%, rgba(var(--white-rgb),.3) 28%, rgba(var(--white-rgb),0) 50%),
    radial-gradient(ellipse 120% 90% at 50% 38%, rgba(var(--fh-ink-rgb),0) 55%, rgba(var(--fh-ink-rgb),.07) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='0' y='0' width='4' height='4' fill='%23fff' fill-opacity='0.2'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23fff' fill-opacity='0.2'/%3E%3Crect x='4' y='0' width='4' height='4' fill='%231A2C24' fill-opacity='0.012'/%3E%3Crect x='0' y='4' width='4' height='4' fill='%231A2C24' fill-opacity='0.012'/%3E%3C/svg%3E");
  background-size:auto, auto, 8px 8px; background-repeat:no-repeat, no-repeat, repeat;
  outline:1px dashed rgba(119,89,46,.45); outline-offset:-6px;
  box-shadow:inset 0 1px 0 rgba(var(--white-rgb),.9), inset 0 -30px 40px -26px rgba(var(--fh-ink-rgb),.12), 0 12px 24px -10px rgba(var(--fh-ink-rgb),.3);
}
/* one flourish, bottom right (the top left one crowded the text, most of all on phones) */
[data-theme="forest"] #forumView[data-ff="post"] .forum-thread::after {
  -webkit-mask-image:var(--fh-corner-br); mask-image:var(--fh-corner-br);
  -webkit-mask-position:right bottom; mask-position:right bottom;
}
/* the posts inside it are plain */
[data-theme="forest"] #forumView[data-ff="post"] .forum-post { padding:0; margin:0; background:none; border:0; border-radius:0; box-shadow:none; }
/* a reply form inside a post (moderator edit) stays plain */
[data-theme="forest"] #forumView[data-ff="post"] .forum-post .forum-form { padding:0; background:none; border:0; box-shadow:none; outline:0; }
/* between replies: a long thin line that fades out at both ends, the triquetra in the middle (the reply count above the first
   reply is the same divider; its words stay for screen readers only, and with no replies it is hidden) */
[data-theme="forest"] #forumView[data-ff="post"] :is(.forum-sep, .forum-section-label) {
  display:flex; align-items:center; gap:34px; min-height:26px; margin:30px 0; opacity:1;
  font-size:0; color:transparent;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377592E' stroke-width='1.1'%3E%3Cpath d='M12 16.13A8.2 8.2 0 0 1 12 1.93A8.2 8.2 0 0 1 12 16.13ZM7.9 9.03A8.2 8.2 0 0 1 20.2 16.13A8.2 8.2 0 0 1 7.9 9.03ZM16.1 9.03A8.2 8.2 0 0 1 3.8 16.13A8.2 8.2 0 0 1 16.1 9.03Z'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
}
[data-theme="forest"] #forumView[data-ff="post"] :is(.forum-sep, .forum-section-label)::before,
[data-theme="forest"] #forumView[data-ff="post"] :is(.forum-sep, .forum-section-label)::after {
  content:''; flex:1; height:1px;
}
[data-theme="forest"] #forumView[data-ff="post"] :is(.forum-sep, .forum-section-label)::before { background:linear-gradient(90deg, rgba(119,89,46,0), rgba(119,89,46,.75)); }
[data-theme="forest"] #forumView[data-ff="post"] :is(.forum-sep, .forum-section-label)::after { background:linear-gradient(90deg, rgba(119,89,46,.75), rgba(119,89,46,0)); }
[data-theme="forest"] #forumView[data-ff="post"] .forum-section-label:last-child { display:none; }
/* the reply box: just a box, no card */
[data-theme="forest"] #forumView[data-ff="post"] > .forum-form { padding:0; margin-top:6px; background:none; border:0; outline:0; box-shadow:none; border-radius:0; }

/* the author column: avatar, name, post count, with a hairline between it and the post */
[data-theme="forest"] #forumView[data-ff="post"] .forum-post { gap:28px; }
[data-theme="forest"] #forumView[data-ff="post"] .forum-author { flex-basis:128px; padding-right:28px; border-right:1px solid var(--fh-cream-line); }
[data-theme="forest"] #forumView[data-ff="post"] .forum-avatar { width:72px; height:72px; border:2px solid var(--fh-ornament); font-family:'Alata',var(--fh-display); font-size:calc(1.75rem * var(--text-scale)); }
[data-theme="forest"] #forumView[data-ff="post"] .forum-author-name { font-family:'Alata',var(--fh-display); font-size:calc(0.875rem * var(--text-scale)); letter-spacing:.06em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] #forumView[data-ff="post"] a.forum-author-name:hover { color:var(--fh-bronze); }
[data-theme="forest"] #forumView[data-ff="post"] .forum-author-title { opacity:1; color:var(--fh-ink-soft); }
[data-theme="forest"] #forumView[data-ff="post"] .forum-author-title--staff { color:var(--fh-bronze); font-size:calc(0.65625rem * var(--text-scale)); text-transform:uppercase; }
[data-theme="forest"] #forumView[data-ff="post"] .forum-author-count { opacity:1; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:calc(0.65625rem * var(--text-scale)); color:var(--fh-bronze); }
[data-theme="forest"] #forumView[data-ff="post"] .forum-author-msg { color:var(--fh-green); font-weight:600; }
@media (max-width:600px) {
  /* phones keep the desktop order, avatar and details on the left and the post on the right, in a narrower column */
  [data-theme="forest"] #forumView[data-ff="post"] .forum-post { gap:14px; flex-wrap:nowrap; }
  [data-theme="forest"] #forumView[data-ff="post"] .forum-author { flex:0 0 74px; width:74px; padding:0 12px 0 0; border-right:1px solid var(--fh-cream-line); border-bottom:0; display:block; text-align:center; }
  [data-theme="forest"] #forumView[data-ff="post"] .forum-avatar { width:50px; height:50px; margin:0 auto 6px; font-size:calc(1.25rem * var(--text-scale)); border-width:1.5px; }
  [data-theme="forest"] #forumView[data-ff="post"] .forum-author-name { font-size:calc(0.71875rem * var(--text-scale)); letter-spacing:.03em; }
  [data-theme="forest"] #forumView[data-ff="post"] .forum-author-title { font-size:calc(0.65625rem * var(--text-scale)); }
  [data-theme="forest"] #forumView[data-ff="post"] .forum-author-title--staff { font-size:calc(0.59375rem * var(--text-scale)); letter-spacing:.04em; }
  [data-theme="forest"] #forumView[data-ff="post"] .forum-author-count { font-size:calc(0.59375rem * var(--text-scale)); letter-spacing:.04em; }
  [data-theme="forest"] #forumView[data-ff="post"] .forum-thread { padding:30px 18px; }
}[data-theme="forest"] #forumView[data-ff="post"] .forum-post-title {
  margin:0 0 10px; font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.375rem * var(--text-scale)); line-height:1.3; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fh-ink);
}
[data-theme="forest"] #forumView[data-ff="post"] .forum-post-meta { opacity:1; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:calc(0.6875rem * var(--text-scale)); color:var(--fh-bronze); }
[data-theme="forest"] #forumView[data-ff="post"] .forum-post-text { opacity:1; color:var(--fh-ink-soft); }
[data-theme="forest"] #forumView[data-ff="post"] .mod-btn { opacity:.75; }
[data-theme="forest"] #forumView[data-ff="post"] .mod-btn:hover { opacity:1; }
[data-theme="forest"] #forumView[data-ff="post"] :is(.forum-login-note, .forum-empty) { opacity:1; }
[data-theme="forest"] #forumView[data-ff="post"] .forum-form :is(input, textarea, select) { background:var(--fh-paper); border:1px solid rgba(var(--fh-ink-rgb),.3); }
[data-theme="forest"] #forumView[data-ff="post"] .forum-report-done { color:var(--fh-green); }
[data-theme="forest"] #forumView[data-ff="post"] :focus-visible { outline-color:var(--fh-green); }
@media (max-width:600px) {
  [data-theme="forest"] #forumView[data-ff="post"] .forum-thread { padding:30px 18px; }
  [data-theme="forest"] #forumView[data-ff="post"] .forum-post-title { font-size:calc(1.1875rem * var(--text-scale)); }
}
/* a post's rich text on the light card */
[data-theme="forest"] #forumView .forum-post-text a { color:var(--fh-green); }
[data-theme="forest"] #forumView .forum-post-text a:hover { color:var(--fh-bronze); }
[data-theme="forest"] #forumView .forum-post-text blockquote { border-left-color:var(--fh-ornament); background:rgba(var(--fh-ink-rgb),.04); }
[data-theme="forest"] #forumView .forum-post-text pre { background:rgba(var(--fh-ink-rgb),.05); }

/* FORUM EDITOR (forum-editor.js, css/forum-editor.css): on a thread's light card, a paper box with an ink toolbar; the
   new-thread form on the dark band keeps the default dark field look */
[data-theme="forest"] #forumView[data-ff="post"] .fe { background:var(--fh-paper); border:1px solid rgba(var(--fh-ink-rgb),.3); border-radius:var(--field-radius-lg); }
[data-theme="forest"] #forumView[data-ff="post"] .fe:focus-within { border-color:var(--fh-green); }
[data-theme="forest"] #forumView[data-ff="post"] .fe.fe-over { border-color:var(--error); }
[data-theme="forest"] #forumView[data-ff="post"] :is(.fe-bar, .fe-linkbar) { border-bottom-color:var(--fh-cream-line); background:var(--fh-cream); border-radius:var(--field-radius-lg) var(--field-radius-lg) 0 0; }
[data-theme="forest"] #forumView[data-ff="post"] .fe-linkbar { border-radius:0; }
[data-theme="forest"] #forumView[data-ff="post"] .fe-sep { background:var(--fh-cream-line); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-btn { min-height:0; color:var(--fh-ink-soft); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-btn:hover { border-color:var(--fh-ornament); color:var(--fh-ink); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-btn:is([aria-pressed="true"], [aria-expanded="true"]) { background:rgba(var(--fh-ink-rgb),.08); border-color:var(--fh-ornament); color:var(--fh-ink); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-area { color:var(--fh-ink); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-area.is-empty::before { color:var(--fh-ink-soft); opacity:.7; }
[data-theme="forest"] #forumView[data-ff="post"] .fe-area a { color:var(--fh-green); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-area blockquote { border-left-color:var(--fh-ornament); background:rgba(var(--fh-ink-rgb),.04); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-foot { color:var(--fh-ink-soft); opacity:1; }
[data-theme="forest"] #forumView[data-ff="post"] .fe-mini { min-height:0; background:var(--fh-green); border-color:var(--fh-green); color:var(--fh-cream); border-radius:2px; }
[data-theme="forest"] #forumView[data-ff="post"] .fe-mini:hover { background:var(--fh-green-hover); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-mini--ghost { background:none; color:var(--fh-green); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-mini--ghost:hover { background:rgba(var(--fh-ink-rgb),.06); }
[data-theme="forest"] #forumView[data-ff="post"] .fe .fe-linkbar input { background:var(--white); border:1px solid rgba(var(--fh-ink-rgb),.3); color:var(--fh-ink); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-emoji { background:var(--white); border:1px solid var(--fh-ornament); border-radius:10px; box-shadow:0 10px 30px rgba(var(--fh-ink-rgb),.18); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-tabs { border-bottom-color:var(--fh-cream-line); }
[data-theme="forest"] #forumView[data-ff="post"] :is(.fe-tab, .fe-pick) { min-height:0; color:var(--fh-ink); }
[data-theme="forest"] #forumView[data-ff="post"] :is(.fe-tab--rune, .fe-grid--runes .fe-pick) { color:var(--fh-bronze); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-tab:hover { border-color:var(--fh-ornament); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-tab[aria-selected="true"] { background:rgba(var(--fh-ink-rgb),.07); border-color:var(--fh-ornament); }
[data-theme="forest"] #forumView[data-ff="post"] .fe-pick:is(:hover, :focus-visible) { background:rgba(var(--fh-ink-rgb),.07); border-color:var(--fh-ornament); }

/* =======================================================================
   MESSAGES (messages.php, css/messages.css): the light band of the profile page (.fbp-sec turns the tokens dark on
   cream) at full content width, the homepage's heading style for the title, white panes and paper fields.
   ======================================================================= */
[data-theme="forest"] .fbp-sec .pm-wrap { max-width:none; padding:0; }
[data-theme="forest"] .fbp-sec .pm-title { display:flex; align-items:center; gap:18px; font-family:'Alata',var(--fh-display); font-size:calc(1.625rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .pm-title::after { content:''; flex:0 0 60px; height:1px; background:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .pm-app { background:var(--white); border-color:var(--fh-ornament); border-radius:14px; box-shadow:0 4px 18px rgba(var(--fh-ink-rgb),.06); }
[data-theme="forest"] .fbp-sec :is(.pm-list-pane, .pm-item, .pm-thread-head, .pm-compose, .pm-thread-pane > .pm-note--inline, .pm-find-list) { border-color:var(--fh-cream-line); }
[data-theme="forest"] .fbp-sec .pm-list-pane { background:var(--fh-paper); }
[data-theme="forest"] .fbp-sec .pm-item.is-open { background:rgba(46,74,58,.08); border-left-color:var(--fh-green); }
[data-theme="forest"] .fbp-sec .pm-unread { background:var(--fh-green); color:var(--fh-cream); }
[data-theme="forest"] .fbp-sec .pm-find-title { font-family:'Alata',var(--fh-display); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .pm-avatar { font-family:'Alata',var(--fh-display); }
[data-theme="forest"] .fbp-sec .pm-avatar--staff { background:var(--fh-green); color:var(--fh-cream); }
[data-theme="forest"] .fbp-sec .pm-msg.is-mine .pm-msg-body { background:rgba(46,74,58,.08); border-color:rgba(46,74,58,.25); }
[data-theme="forest"] .fbp-sec .pm-msg-body { background:var(--fh-paper); border-color:var(--fh-cream-line); }
[data-theme="forest"] .fbp-sec :is(.pm-compose textarea, .pm-report-form textarea, .pm-report-form select, .pm-find input) { background:var(--fh-paper); border:1px solid var(--fh-cream-line); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec :is(.pm-compose textarea, .pm-report-form textarea, .pm-report-form select, .pm-find input):focus { border-color:var(--fh-green); }
[data-theme="forest"] .fbp-sec :focus-visible { outline-color:var(--fh-green); }
@media (max-width:600px) { [data-theme="forest"] .fbp-sec .pm-title { font-size:calc(1.3125rem * var(--text-scale)); } }

/* =======================================================================
   MEMBER PROFILE (profile.php): the light band of the blog post page (.fbp-sec turns the tokens dark on cream), with the
   homepage's heading style for the name and the section titles (Alata, capitals, a bronze rule after the words).
   ======================================================================= */
[data-theme="forest"] .fbp-sec .pf-wrap { max-width:none; padding:0; }
[data-theme="forest"] .fbp-sec .pf-avatar { border-color:var(--fh-ornament); box-shadow:0 8px 20px -8px rgba(var(--fh-ink-rgb),.35); font-family:'Alata',var(--fh-display); }
[data-theme="forest"] .fbp-sec .pf-name { font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.625rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .pf-role { color:var(--fh-ink-soft); }
[data-theme="forest"] .fbp-sec .pf-role--staff { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .pf-count { font-weight:700; color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .pf-title { display:flex; align-items:center; gap:18px; font-family:'Alata',var(--fh-display); font-size:calc(1.25rem * var(--text-scale)); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .pf-title::after { content:''; flex:0 0 60px; height:1px; background:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .pf-kind { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .pf-post-title { font-family:'Alata',var(--fh-display); letter-spacing:.04em; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .pf-post-title:hover { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .pf-svg .house { fill:var(--fh-ink-soft); }
[data-theme="forest"] .fbp-sec .pf-wheel { padding:14px; border:1px solid var(--fh-ornament); border-radius:18px; background:var(--fh-paper); box-sizing:border-box; flex-basis:448px; width:448px; box-shadow:0 12px 24px -10px rgba(var(--fh-ink-rgb),.3); }
@media (max-width:600px) {
  [data-theme="forest"] .fbp-sec .pf-name { font-size:calc(1.3125rem * var(--text-scale)); }
  [data-theme="forest"] .fbp-sec .pf-wheel { flex:0 0 auto; width:100%; max-width:448px; margin-inline:auto; }   /* the chart is stacked above the list here: its 448px basis would be a height */
}

/* SKY CALENDAR (sky-calendar.php): the same light band as the profile; css/sky-calendar.css is all tokens, these give it the forest titles. */
[data-theme="forest"] .fbp-sec .sc-wrap { max-width:none; padding:0; }
[data-theme="forest"] .fbp-sec .sc-name { font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.625rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .sc-title { display:flex; align-items:center; gap:18px; font-family:'Alata',var(--fh-display); font-size:calc(1.25rem * var(--text-scale)); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .sc-title::after { content:''; flex:0 0 60px; height:1px; background:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .sc-what { font-family:'Alata',var(--fh-display); letter-spacing:.04em; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .bt-cycle { font-family:'Alata',var(--fh-display); color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec :is(.cp-title, .cp-item h4) { font-family:'Alata',var(--fh-display); letter-spacing:.04em; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .cp-h { font-family:'Alata',var(--fh-display); color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .cp-closing { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .cp-chips li { border-color:var(--fh-ornament); background:var(--fh-paper); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .cp-go:disabled:hover { background:transparent; }
[data-theme="forest"] .fbp-sec :is(.fc-title, .fc-item h4) { font-family:'Alata',var(--fh-display); letter-spacing:.04em; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .fc-h { font-family:'Alata',var(--fh-display); color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .fc-closing { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .fc-chips li { border-color:var(--fh-ornament); background:var(--fh-paper); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .sc-btn:hover { background:rgba(var(--gold-rgb),.14); }
[data-theme="forest"] .fbp-sec .sc-input { background:var(--fh-paper); }
[data-theme="forest"] .fbp-sec .sc-places { background:var(--fh-paper); border-color:var(--fh-ornament); }
[data-theme="forest"] .fbp-sec .sc-places li { color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .sc-moon { filter:drop-shadow(0 8px 14px rgba(var(--fh-ink-rgb),.3)); }
[data-theme="forest"] .fbp-sec .sc-hours tr.is-now td { color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec :focus-visible { outline-color:var(--fh-green); }
@media (max-width:600px) {
  [data-theme="forest"] .fbp-sec .sc-name { font-size:calc(1.3125rem * var(--text-scale)); }
}

/* MINERALOGY (mineralogy.php): the Sky Calendar's light band; css/mineralogy.css is all tokens, these give it the forest titles and the dark-on-cream active letter. */
[data-theme="forest"] .fbp-sec .mn-name { font-family:'Alata',var(--fh-display); font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec :is(.mn-tag, .mn-h) { font-family:'Alata',var(--fh-display); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .mn-sech { font-family:'Alata',var(--fh-display); color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .mn-letter { background:var(--fh-paper); border-color:var(--fh-ornament); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .mn-letter:hover:not(:disabled) { background:rgba(var(--gold-rgb),.14); border-color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .mn-letter.is-on { background:var(--fh-green); border-color:var(--fh-green); color:var(--fh-cream); }
[data-theme="forest"] .fbp-sec .mn-list { background:var(--fh-paper); border-color:var(--fh-ornament); }
[data-theme="forest"] .fbp-sec .mn-list li { border-color:var(--fh-cream-line); }
[data-theme="forest"] .fbp-sec .mn-list a[aria-current] { color:var(--fh-ink); box-shadow:inset 3px 0 0 var(--fh-bronze); }
[data-theme="forest"] .fbp-sec :is(.mn-col-title, .mn-card-name) { font-family:'Alata',var(--fh-display); font-weight:400; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .mn-col-title { letter-spacing:.06em; text-transform:uppercase; }
[data-theme="forest"] .fbp-sec .mn-col-sub { font-family:'Alata',var(--fh-display); color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .mn-card { background:var(--fh-paper); border-color:var(--fh-ornament); }
[data-theme="forest"] .fbp-sec .mn-chip { background:var(--fh-paper); border-color:var(--fh-ornament); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec a.mn-chip:hover, [data-theme="forest"] .fbp-sec a.mn-chip:focus-visible { border-color:var(--fh-bronze); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .mn-chip.is-on { background:var(--fh-green); border-color:var(--fh-green); color:var(--fh-cream); }
@media (max-width:600px) {
  [data-theme="forest"] .fbp-sec .mn-name { font-size:calc(1.3125rem * var(--text-scale)); }
}

/* Phones: a forum's thread list reads title, then Replies / Views / Last post in one left-aligned line, then the author and time.
   The name cell's children become the row's own flex items (display:contents) so the line can sit between the title and the author. */
@media (max-width:760px) {
  [data-theme="forest"] .ff-table--threads tr { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:baseline; column-gap:16px; }
  [data-theme="forest"] .ff-table--threads td.ff-name { display:contents; }
  [data-theme="forest"] .ff-table--threads td.ff-name > .ff-flag { order:0; }
  [data-theme="forest"] .ff-table--threads td.ff-name > .ff-name-link { order:1; flex:1 0 100%; padding:3px 0; }
  [data-theme="forest"] .ff-table--threads td.ff-num, [data-theme="forest"] .ff-table--threads td.ff-last { order:2; display:block; margin:0; padding:2px 0; text-align:left !important; white-space:nowrap; }
  [data-theme="forest"] .ff-table--threads td.ff-name > .ff-by { order:3; flex:1 0 100%; padding:2px 0 3px; }
  [data-theme="forest"] .ff-table--threads td.ff-last::before { content:"Last post: "; font-size:calc(0.8125rem * var(--text-scale)); opacity:.7; }
  [data-theme="forest"] .ff-table--threads td.ff-last > div { display:inline; font-size:calc(0.8125rem * var(--text-scale)); }
  [data-theme="forest"] .ff-table--threads td.ff-last .ff-by::before { content:" · "; }
}

/* the chart explanation on a member's profile sits on the light band: the page's light-on-dark colours turn dark on cream */
[data-theme="forest"] .pf-explain {
  --bone:var(--fh-ink); --frost:var(--fh-ink-soft); --gold:var(--fh-bronze); --line:var(--fh-cream-line);
  --gold-light:#7D5F33; --gold-mid:#6B4F29; --gold-dark:#54401F;
}

/* =======================================================================
   TANGLE OF WYRD (forest): tangle-of-wyrd.php reuses the card pull layout (.pl-), so the reading-pages
   block above already gives it the photo, the 0.8 scale, the panel flourishes and the header band.
   Only the scattered table is its own: there is no box behind the cards (they lie on the forest photo), and the stage takes the
   same top and bottom margin as the panel beside it (30px, 34px above 1440px where the layout is zoomed 0.9) so the two end on the same line.
   ======================================================================= */
@media (min-width:1001px) { [data-theme="forest"] .tw-stage { margin-block:30px; } }
@media (min-width:1441px) { [data-theme="forest"] .tw-stage { margin-block:34px; } }

/* =======================================================================
   MY ACCOUNT (forest; my-account.php, themes/forest/account-hero.php): the shared static-navbar hero ("The Well of Memory" on the
   My Readings tab, "My Account" on the other; the page's own title block is hidden) and then the page on a plain white background.
   Like the profile and blog bands, the page's light-on-dark tokens turn dark on the light ground, so the calendar, tabs, cards and
   forms follow without their own colours. The calendar takes the same content width as the other pages (side padding max(4vw,16px);
   above 1440px a 1440px column less 64px each side); the profile tab takes the same width, its cards in two columns. A saved reading is its own page
   (my-reading.php), styled with the reading pages above.
   ======================================================================= */
[data-theme="forest"] .acct-main {
  flex:1; background:var(--white);
  --acct-side:var(--fh-side);
  --bone:var(--fh-ink); --frost:var(--fh-ink-soft); --gold:var(--fh-bronze); --line:var(--fh-cream-line);
  --gold-light:#7D5F33; --gold-mid:#6B4F29; --gold-dark:#54401F;
  --btn-bg:var(--fh-green); --btn-text:var(--fh-cream); --btn-hover-bg:var(--fh-green-hover);
  --field-bg:var(--fh-paper); --field-border:1px solid var(--fh-cream-line); --field-text:var(--fh-ink); --field-focus-soft:var(--fh-green);
  --card-bg:var(--fh-paper); --card-border:1px solid var(--fh-cream-line);
  --error:#8B2E2E; --rune-red:#8B2E2E; --aurora:var(--fh-green);
  color:var(--bone);   /* text that sets no colour of its own (the delete and two-step sections) inherits ink, not the page's cream */
}
@media (min-width:1441px) { [data-theme="forest"] .acct-main { --acct-side:max(64px, calc((100% - 1440px) / 2 + 64px)); } }
[data-theme="forest"] .acct-main :focus-visible { outline-color:var(--fh-green); }

/* the hero replaces the page's own title; payment and booking notices stay, in the content column */
[data-theme="forest"] .acct-main .acct-hero { padding:0 var(--acct-side); }
[data-theme="forest"] .acct-main .acct-hero :is(.acct-eyebrow, .acct-title) { display:none; }
[data-theme="forest"] .acct-main .acct-notice { max-width:none; margin:24px 0 0; text-align:left; }
[data-theme="forest"] .acct-main .acct-hero .acct-notice a { color:var(--fh-bronze); }
[data-theme="forest"] .acct-main #tabReadings > .acct-sub { display:none; }

/* tabs and calendar: full content width */
[data-theme="forest"] .acct-main .acct-tabs { max-width:none; margin:0; padding:28px var(--acct-side) 0; border-bottom:0; }
[data-theme="forest"] .acct-main .acct-tab { padding:12px 22px 12px 0; margin-right:22px; font-family:'Alata',var(--fh-display); font-size:calc(0.875rem * var(--text-scale)); letter-spacing:.1em; opacity:.6; }
[data-theme="forest"] .acct-main .acct-tab.active { opacity:1; color:var(--fh-ink); border-bottom-color:var(--fh-bronze); }
[data-theme="forest"] .acct-main .acct-body { max-width:none; margin:0; padding:30px var(--acct-side) 90px; box-sizing:border-box; }
/* the profile tab takes the same content width as the calendar; on a wide screen its cards sit in two FIXED columns
   (my-account.php .profile-col--side: profile, hidden finds; .profile-col--main: plan, sessions, readings, birth details),
   each stacked from the top, so a short or missing card never leaves a gap whatever the member's plan */
@media (min-width:1001px) {
  [data-theme="forest"] .acct-main .profile-wrap { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:24px; align-items:start; padding-top:0; }
  [data-theme="forest"] .acct-main .profile-col { display:flex; flex-direction:column; gap:24px; min-width:0; }
}
[data-theme="forest"] .acct-main .acct-month-nav { margin-bottom:22px; }
[data-theme="forest"] .acct-main .acct-month-label { font-family:'Alata',var(--fh-display); font-size:calc(1.375rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .acct-main .acct-month-arrow { width:40px; height:40px; opacity:1; border-color:var(--fh-ornament); color:var(--fh-ink); background:var(--fh-paper); }
[data-theme="forest"] .acct-main .acct-month-arrow:hover { border-color:var(--fh-bronze); background:var(--fh-cream); }
[data-theme="forest"] .acct-main .cal-grid-header span { opacity:.75; font-weight:700; font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.14em; color:var(--fh-bronze); }
[data-theme="forest"] .acct-main .cal-grid { gap:8px; }
[data-theme="forest"] .acct-main .cal-cell { min-height:104px; padding:10px 12px; border-radius:4px; }
[data-theme="forest"] .acct-main .cal-cell.in-month { background:var(--fh-paper); border-color:var(--fh-cream-line); }
[data-theme="forest"] .acct-main .cal-cell.out-month { opacity:.4; }
[data-theme="forest"] .acct-main .cal-cell.has-readings { border-color:var(--fh-ornament); }
[data-theme="forest"] .acct-main .cal-cell.has-readings:hover { background:var(--fh-cream); border-color:var(--fh-bronze); }
[data-theme="forest"] .acct-main .cal-cell.selected { background:var(--fh-cream); border-color:var(--fh-bronze); box-shadow:0 0 0 1px var(--fh-bronze); }
[data-theme="forest"] .acct-main .cal-cell.today { border-color:var(--fh-green); }
[data-theme="forest"] .acct-main .cal-cell.today .cal-day-num { color:var(--fh-green); font-weight:700; }
[data-theme="forest"] .acct-main .cal-day-num { font-size:calc(0.9375rem * var(--text-scale)); opacity:.85; }
[data-theme="forest"] .acct-main .cal-dot-row { gap:5px; margin-top:8px; }
[data-theme="forest"] .acct-main .cal-dot { width:8px; height:8px; opacity:.9; }
[data-theme="forest"] .acct-main .cal-dot-more { opacity:.8; }
[data-theme="forest"] .acct-main .cal-day-panel { margin-top:0; background:var(--fh-paper); border:1px solid var(--fh-ornament); box-shadow:0 10px 24px -14px rgba(var(--fh-ink-rgb),.4); }
[data-theme="forest"] .acct-main .cal-side-empty { border-color:var(--fh-ornament); color:var(--fh-ink-soft); }
@media (max-width:900px) { [data-theme="forest"] .acct-main .cal-side .cal-day-panel { background:var(--fh-paper); } }
[data-theme="forest"] .acct-main .cal-day-panel-date { font-family:'Alata',var(--fh-display); font-size:calc(0.9375rem * var(--text-scale)); letter-spacing:.08em; }
[data-theme="forest"] .acct-main .cal-day-panel-close { opacity:.7; }
[data-theme="forest"] .acct-main .sess-row { border-bottom-color:var(--fh-cream-line); }
[data-theme="forest"] .acct-main .sess-row:hover { background:var(--fh-cream); }
[data-theme="forest"] .acct-main .sess-glyph { opacity:.8; }
[data-theme="forest"] .acct-main .sess-name { font-size:calc(0.875rem * var(--text-scale)); }
[data-theme="forest"] .acct-main .sess-meta { opacity:.8; }
[data-theme="forest"] .acct-main .sess-arrow { opacity:.6; }
[data-theme="forest"] .acct-main .cal-month-tools .clear-month-btn { opacity:1; border-color:var(--fh-ornament); background:var(--fh-paper); color:var(--fh-ink); font-weight:700; }
[data-theme="forest"] .acct-main .cal-month-tools .print-month-btn:hover { border-color:var(--fh-bronze); background:var(--fh-cream); color:var(--fh-ink); }
[data-theme="forest"] .acct-main .cal-month-tools .clear-month-btn:not(.print-month-btn):hover { border-color:var(--rune-red); background:var(--fh-cream); color:var(--rune-red); }
[data-theme="forest"] .acct-main .acct-cal-loading, [data-theme="forest"] .acct-main .history-window { opacity:.85; }
[data-theme="forest"] .acct-main .acct-loading-rune { color:var(--fh-bronze); }
/* Recap and Export fill the same width as Calendar, Entries and Patterns */
[data-theme="forest"] .acct-main .jr-recap-card, [data-theme="forest"] .acct-main .jr-export { max-width:none; margin-left:0; margin-right:0; }
@media (max-width:700px) {
  [data-theme="forest"] .acct-main .cal-grid { gap:4px; }
  [data-theme="forest"] .acct-main .cal-cell { min-height:58px; padding:6px; }
  [data-theme="forest"] .acct-main .cal-dot { width:6px; height:6px; }
}

/* the profile tab's dark-theme leftovers on the light ground */
[data-theme="forest"] .acct-main .birth-suggest { background:var(--white); border-color:var(--fh-ornament); box-shadow:0 10px 30px rgba(var(--fh-ink-rgb),.25); }
[data-theme="forest"] .acct-main .profile-field :is(input[type=date], input[type=time]) { color-scheme:light; }
[data-theme="forest"] .acct-main .profile-tier-badge { background:rgba(var(--gold-rgb),.1); }
[data-theme="forest"] .acct-main .profile-card-title { opacity:.85; font-weight:700; color:var(--fh-bronze); }

/* =======================================================================
   PHONE HEROES (700px and under): space is tight, so every hero (Home, About, Pricing, Blog, My Journal / My Account, Forum) shrinks to
   their text with even padding above and below it, and a smaller title, instead of the tall photo box (the homepage too).
   Pages whose navbar floats over the hero keep the 56px the bar covers on top.
   ======================================================================= */
@media (max-width:700px) {
  [data-theme="forest"] .fh-hero { height:auto; min-height:0; }
  [data-theme="forest"] .fh-hero .fh-hero-content { position:relative; top:auto; bottom:auto; left:auto; right:auto; padding:calc(56px + 20px) 18px 22px; }
  [data-theme="forest"] .fh-hero--static .fh-hero-content { padding:22px 18px; }
  [data-theme="forest"] .fh-hero .fh-eyebrow { margin-bottom:6px; font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.22em; }
  [data-theme="forest"] .fh-hero .fh-title { font-size:clamp(26px,8vw,34px); line-height:1.08; letter-spacing:.06em; }
  [data-theme="forest"] .fh-hero .fh-title span { display:inline; }   /* both words on one line when they fit */
  [data-theme="forest"] .fh-hero .fh-ornament { margin:8px 0; width:min(220px,80%); }
  [data-theme="forest"] .fh-hero .fh-ornament svg { width:18px; height:18px; }
  [data-theme="forest"] .fh-hero .fh-trio { font-size:calc(0.71875rem * var(--text-scale)); letter-spacing:.16em; }
  [data-theme="forest"] .fh-hero .fp-sub { font-size:calc(0.8125rem * var(--text-scale)); line-height:1.45; max-width:94%; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}

/* LOREBOOK (lorebook.php): css/lorebook.css is all tokens; these give it the forest band, titles and badge colours. */
[data-theme="forest"] .fbp-sec .lb-wrap { max-width:none; padding:0; --lb-modern:var(--fh-green); --lb-card-bg:var(--fh-paper);  --lb-pop-bg:var(--fh-paper); }
[data-theme="forest"] .fbp-sec .lb-name { font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.625rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .lb-title { display:flex; align-items:center; gap:18px; font-family:'Alata',var(--fh-display); font-size:calc(1.25rem * var(--text-scale)); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .lb-title::after { content:''; flex:0 0 60px; height:1px; background:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .lb-sub, [data-theme="forest"] .fbp-sec .lb-card-name, [data-theme="forest"] .fbp-sec .lb-rune-name { font-family:'Alata',var(--fh-display); }
[data-theme="forest"] .fbp-sec .lb-sub { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .lb-rune:hover, [data-theme="forest"] .fbp-sec .lb-card-link:hover { background:rgba(var(--gold-rgb),.14); }
[data-theme="forest"] .fbp-sec .lb-card, [data-theme="forest"] .fbp-sec .lb-rune { border-color:var(--fh-ornament); }
[data-theme="forest"] .fbp-sec .lb-chips li { border-color:var(--fh-ornament); background:var(--fh-paper); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec :focus-visible { outline-color:var(--fh-green); }
/* landing and trail index: book-like contents lists set in the inscription capitals, ink on cream */
[data-theme="forest"] .fbp-sec .lb-name--front { font-size:calc(2.5rem * var(--text-scale)); letter-spacing:.08em; }
[data-theme="forest"] .fbp-sec .lb-kicker { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .lb-shelf-name, [data-theme="forest"] .fbp-sec .lb-trail-name, [data-theme="forest"] .fbp-sec .lb-trail-no,
[data-theme="forest"] .fbp-sec .lb-shelf-mark:not(.lb-shelf-mark--rune) { font-family:var(--fh-display); font-weight:600; }
[data-theme="forest"] .fbp-sec .lb-shelf-name, [data-theme="forest"] .fbp-sec .lb-trail-name { color:var(--fh-ink); letter-spacing:.02em; }
[data-theme="forest"] .fbp-sec .lb-shelf-mark, [data-theme="forest"] .fbp-sec .lb-trail-no, [data-theme="forest"] .fbp-sec .lb-mk { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .lb-shelf, [data-theme="forest"] .fbp-sec .lb-shelf-item, [data-theme="forest"] .fbp-sec .lb-trails,
[data-theme="forest"] .fbp-sec .lb-trails > li, [data-theme="forest"] .fbp-sec .lb-front, [data-theme="forest"] .fbp-sec .lb-sec--key { border-color:var(--fh-cream-line); }
[data-theme="forest"] .fbp-sec a.lb-shelf-row:hover, [data-theme="forest"] .fbp-sec .lb-trail:hover { background:var(--fh-paper); }
[data-theme="forest"] .fbp-sec a.lb-shelf-row:hover .lb-shelf-name, [data-theme="forest"] .fbp-sec .lb-trail:hover .lb-trail-name { color:var(--fh-green); }
[data-theme="forest"] .fbp-sec .lb-front-fig img { background:var(--fh-paper); border-color:var(--fh-ornament); }
[data-theme="forest"] .fbp-sec .lb-front-link, [data-theme="forest"] .fbp-sec .lb-front-fig figcaption a { color:var(--fh-green); }
[data-theme="forest"] .fbp-sec .lb-mk--havamal::before { background:repeating-linear-gradient(to bottom, var(--fh-ink-soft) 0 1.5px, transparent 1.5px 4.5px); }
[data-theme="forest"] .fbp-sec .lb-path .lb-mk:not(:last-child)::after { background:var(--fh-ornament); }
/* index pages (runes, tarot, Hávamál, Yggdrasil) */
[data-theme="forest"] .fbp-sec .lb-spec-name, [data-theme="forest"] .fbp-sec .lb-ix-name, [data-theme="forest"] .fbp-sec .lb-ix-num,
[data-theme="forest"] .fbp-sec .lb-part-name, [data-theme="forest"] .fbp-sec .lb-part-no, [data-theme="forest"] .fbp-sec .lb-entry-name { font-family:var(--fh-display); font-weight:600; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .lb-spec-glyph, [data-theme="forest"] .fbp-sec .lb-ix-num, [data-theme="forest"] .fbp-sec .lb-part-no { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .lb-specimen, [data-theme="forest"] .fbp-sec .lb-specimen > li, [data-theme="forest"] .fbp-sec .lb-index > li,
[data-theme="forest"] .fbp-sec .lb-suit .lb-sub, [data-theme="forest"] .fbp-sec .lb-parts, [data-theme="forest"] .fbp-sec .lb-parts > li,
[data-theme="forest"] .fbp-sec .lb-entries > li, [data-theme="forest"] .fbp-sec .lb-filter { border-color:var(--fh-cream-line); }
[data-theme="forest"] .fbp-sec .lb-spec:hover, [data-theme="forest"] .fbp-sec .lb-ix:hover, [data-theme="forest"] .fbp-sec .lb-part:hover, [data-theme="forest"] .fbp-sec .lb-entry:hover { background:var(--fh-paper); }
[data-theme="forest"] .fbp-sec .lb-spec:hover .lb-spec-name, [data-theme="forest"] .fbp-sec .lb-ix:hover .lb-ix-name,
[data-theme="forest"] .fbp-sec .lb-part:hover .lb-part-name, [data-theme="forest"] .fbp-sec .lb-entry:hover .lb-entry-name { color:var(--fh-green); }
[data-theme="forest"] .fbp-sec .lb-filter a[aria-current] { border-bottom-color:var(--fh-green); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .lb-filter a:hover { color:var(--fh-green); }
@media (min-width:1100px) {
  [data-theme="forest"] .fbp-sec .lb-trails--numbered > li:nth-last-child(-n+2) { border-bottom-color:var(--fh-cream-line); }
}
@media (max-width:600px) {
  [data-theme="forest"] .fbp-sec .lb-name { font-size:calc(1.3125rem * var(--text-scale)); }
  [data-theme="forest"] .fbp-sec .lb-name--front { font-size:calc(1.875rem * var(--text-scale)); }
}

/* READING LANDING PAGES (tarot-readings.php, rune-readings.php, astrology-readings.php; css/readings-catalog.css): the Sky Calendar's light band,
   full content width; the cards are the Pricing page's membership cards (.fp-card above), header pictures themes/forest/reading-head-<key>.webp. */
[data-theme="forest"] .fbp-sec .rc-wrap { max-width:none; padding:0; }
[data-theme="forest"] .fbp-sec .rc-title { font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.625rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .rc-lead { color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .rc-head { border-bottom-color:var(--fh-cream-line); }
[data-theme="forest"] .fbp-sec .rc-card .fp-head { background-position:center, right center; }   /* the art sits at the right of each picture: keep it in view on narrow cards */
[data-theme="forest"] .fbp-sec .rc-card .fp-name { margin-top:0; font-family:'Alata',var(--fh-display); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec :is(.rc-alt, .rc-shared) { color:var(--fh-ink-soft); }
[data-theme="forest"] .fbp-sec .rc-needs { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .rc-foot a { color:var(--fh-green); }
[data-theme="forest"] .fbp-sec :focus-visible { outline-color:var(--fh-green); }
@media (max-width:600px) {
  [data-theme="forest"] .fbp-sec .rc-title { font-size:calc(1.3125rem * var(--text-scale)); }
}

/* HOMEPAGE ENTRIES (themes/forest/home.php): a section written in Admin > Pages sits on the cream band like the welcome text;
   the editor's about-* text styles are light-on-dark by default, so the tokens turn dark on cream here. */
[data-theme="forest"] .fh-entry { --bone:var(--fh-ink); --frost:var(--fh-ink-soft); --gold:var(--fh-bronze); --line:var(--fh-cream-line); color:var(--fh-ink); }
[data-theme="forest"] .fh-entry-inner { padding-bottom:40px; }
[data-theme="forest"] .fh-entry-inner > :first-child { margin-top:0; }
[data-theme="forest"] .fh-entry img { max-width:100%; height:auto; border-radius:6px; }
[data-theme="forest"] .fh-entry a:not([class]) { color:var(--fh-green); text-decoration:underline; text-underline-offset:3px; }

/* ERROR PAGES (error.php, error-500.html): the light band; css/error.css is all tokens, these give it the forest titles and paper cards. */
[data-theme="forest"] .fbp-sec .err-wrap { max-width:none; padding:0; }
[data-theme="forest"] .fbp-sec .err-title { font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.625rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .err-hint { color:var(--fh-ink-soft); }
[data-theme="forest"] .fbp-sec .err-paths-title { display:flex; align-items:center; gap:18px; font-family:'Alata',var(--fh-display); font-size:calc(1.25rem * var(--text-scale)); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .err-paths-title::after { content:''; flex:0 0 60px; height:1px; background:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .err-paths a { background:var(--fh-paper); border:1px solid var(--fh-cream-line); }
[data-theme="forest"] .fbp-sec .err-paths a:hover { border-color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .err-path-name { font-family:'Alata',var(--fh-display); letter-spacing:.04em; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .err-path-note { color:var(--fh-ink-soft); }
[data-theme="forest"] .fbp-sec :is(.err-contact, .err-contact a) { color:var(--fh-ink-soft); }
[data-theme="forest"] .fbp-sec .err-contact a { color:var(--fh-bronze); }

/* TAROT GUIDE (how-to-read-tarot.php): the same light band as the Sky Calendar; css/tarot-guide.css is all tokens, these give it the forest look. */
[data-theme="forest"] .fbp-sec .tg-wrap { max-width:none; padding:0; }
[data-theme="forest"] .fbp-sec .tg-name { font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.625rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .tg-title { display:flex; align-items:center; gap:18px; font-family:'Alata',var(--fh-display); font-size:calc(1.25rem * var(--text-scale)); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .tg-title::after { content:''; flex:0 0 60px; height:1px; background:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .tg-sub { font-family:'Alata',var(--fh-display); letter-spacing:.04em; color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec :is(.tg-sec p, .tg-list, .tg-lead, .tg-table, .tg-crumbs ol, .tg-fig figcaption) { color:var(--fh-ink-soft); }
[data-theme="forest"] .fbp-sec .tg-quote { border-left-color:var(--fh-bronze); background:var(--fh-paper); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .tg-table tbody th { color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .tg-table thead th { color:var(--fh-bronze); border-bottom-color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .tg-todo { border-color:var(--fh-bronze); background:var(--fh-paper); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .tg-btn { background:var(--fh-green); border-color:var(--fh-green); color:var(--fh-paper); }
[data-theme="forest"] .fbp-sec .tg-btn:hover { filter:brightness(1.12); color:var(--fh-paper); }
[data-theme="forest"] .fbp-sec .tg-link, [data-theme="forest"] .fbp-sec .tg-aside a, [data-theme="forest"] .fbp-sec .tg-table a { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec :focus-visible { outline-color:var(--fh-green); }
[data-theme="forest"] .fbp-sec .tg-table--wide tbody th { color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .tg-pick { border-color:var(--fh-cream-line); background:var(--fh-paper); }
[data-theme="forest"] .fbp-sec .tg-pick-name, [data-theme="forest"] .fbp-sec .tg-pick-name a { font-family:'Alata',var(--fh-display); letter-spacing:.03em; color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .tg-pick-count, [data-theme="forest"] .fbp-sec .tg-pick-pos summary { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec :is(.tg-pick-label, .tg-sec .tg-pick-price) { color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec :is(.tg-pick-pos, .tg-pick-plans, .tg-sec .tg-pick-none, .tg-sec .tg-pick-text) { color:var(--fh-ink-soft); }
[data-theme="forest"] .fbp-sec .tg-template { border-color:var(--fh-cream-line); border-left-color:var(--fh-bronze); background:var(--fh-paper); color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .tg-entry { border-color:var(--fh-cream-line); background:var(--fh-paper); }
[data-theme="forest"] .fbp-sec .tg-entry dt { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .tg-entry dd { color:var(--fh-ink); }
[data-theme="forest"] .fbp-sec .tg-entry a { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .tg-copystatus { color:var(--fh-ink-soft); }
[data-theme="forest"] .fbp-sec .tg-cell-fig { color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .tg-cell-kw { color:var(--fh-ink-soft); }

/* Side padding of every content band is --fh-side (4vw, at least 16px); above 1440px the 1440px column and body zoom rules apply. */
[data-theme="forest"] { --fh-side:max(4vw,16px); }


[data-theme="forest"] .fbp-sec .tg-toc { border-color:var(--fh-cream-line); border-left-color:var(--fh-bronze); background:var(--fh-paper); }
[data-theme="forest"] .fbp-sec .tg-sec .tg-toc-title { font-family:'Alata',var(--fh-display); color:var(--fh-bronze); }
[data-theme="forest"] .fbp-sec .tg-toc ol { color:var(--fh-ink); }

/* Home: "Divination, Astrology, and Crystals" entry (Admin > Pages > Home); a plain rich-text entry, styled to match the other bands */
[data-theme="forest"] .fh-about-entry .fh-entry-inner { max-width:none; }
[data-theme="forest"] .fh-about-entry h2 { margin:0 0 20px; display:flex; align-items:center; gap:18px; font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.25rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fh-ink); }
[data-theme="forest"] .fh-about-entry h2::after { content:''; flex:0 0 60px; height:1px; background:var(--fh-bronze); }
[data-theme="forest"] .fh-about-entry h3 { margin:30px 0 8px; font-family:'Alata',var(--fh-display); font-weight:400; font-size:calc(1.0625rem * var(--text-scale)); letter-spacing:.08em; text-transform:uppercase; color:var(--fh-bronze); }
[data-theme="forest"] .fh-about-entry p { margin:0 0 14px; font-size:calc(1rem * var(--text-scale)); line-height:1.8; color:var(--fh-ink-soft); }
[data-theme="forest"] .fh-about-entry h2 + p { font-size:calc(1.0625rem * var(--text-scale)); color:var(--fh-ink); }

/* Home entry folds: each heading 3 opens its text (themes/forest/home.php wraps them in <details>) */
[data-theme="forest"] .fh-fold { border-top:1px solid var(--fh-cream-line); }
[data-theme="forest"] .fh-fold:last-of-type { border-bottom:1px solid var(--fh-cream-line); }
[data-theme="forest"] .fh-fold summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; cursor:pointer; list-style:none; }
[data-theme="forest"] .fh-fold summary::-webkit-details-marker { display:none; }
[data-theme="forest"] .fh-fold summary::after { content:'+'; flex:0 0 auto; font-size:calc(1.5rem * var(--text-scale)); line-height:1; color:var(--fh-bronze); }
[data-theme="forest"] .fh-fold[open] summary::after { content:'−'; }
[data-theme="forest"] .fh-fold summary h3 { margin:0; }
[data-theme="forest"] .fh-fold summary:hover h3 { color:var(--fh-ink); }
[data-theme="forest"] .fh-fold-body { padding:0 0 18px; }
[data-theme="forest"] .fh-fold-body > p:last-child { margin-bottom:0; }

/* ── EDIT DIALOGS (forest): the "Edit this page" and crystal editors on the cream of the pages they edit
   (Kira, 2026-10-28; same token flip as MY ACCOUNT). css/page-edit.css and css/mineral-edit.css stay as they are. ── */
[data-theme="forest"] .pe-box {
  --panel-bg:var(--fh-paper); --panel-border:1px solid var(--fh-cream-line);
  --bone:var(--fh-ink); --frost:var(--fh-ink-soft); --frost-rgb:var(--fh-ink-rgb); --gold:var(--fh-bronze); --gold-rgb:119,89,46; --line:var(--fh-cream-line);
  --midnight:var(--white);
  --btn-bg:var(--fh-green); --btn-text:var(--fh-cream); --btn-hover-bg:var(--fh-green-hover);
  --field-bg:var(--white); --field-border:1px solid var(--fh-cream-line); --field-text:var(--fh-ink); --field-focus-soft:var(--fh-green);
  --error:#8B2E2E; --rune-red:#8B2E2E; --aurora:var(--fh-green);
  color:var(--fh-ink);
}
[data-theme="forest"] .pe-box :focus-visible { outline-color:var(--fh-green); }