/*
Theme Name: DWKD Studio
Theme URI: https://dowhatkennydoes.com/
Author: Kenny Davis
Author URI: https://dowhatkennydoes.com/
Description: Custom theme for Do What Kenny Does — a one-person digital consultancy. Dark cinematic hero, editorial serif accents, and a Sign in / Create account template. Ships with a Customizer panel for hero copy, videos, and CTAs.
Version: 1.5.7
Requires at least: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dwkd-studio
Tags: dark, one-column, custom-colors, custom-menu, custom-logo, editor-style, footer-widgets, full-width-template, translation-ready
*/

/* ---------- Design tokens ---------- */
:root{
  --black:#000; --card:#101010; --card-2:#212121; --cream:#E1E0CC; --primary:#DEDBC8;
  --gray-4:#9ca3af; --gray-5:#757c8a; --amber:#f0a13a;
  /* Height of the sticky top bar. Hero pages pull the page up by exactly
     this much, so a stale offset can never leave a strip of page
     background showing above the video. */
  --topbar-h:64px;
  /* The bar's own ground, painted on every page at every scroll position.
     The bar used to be transparent while it sat on a hero video, which left
     its legibility to whatever frame happened to be playing: measured against
     the six hero clips, the brand mark and Sign in ran from 8.6:1 down to
     1.0:1 — identical luminance, invisible. These are literals, never var()
     of another token, so a dark island can never strand them. .70 is the
     lowest alpha that still holds the 80%-alpha nav links at 4.5:1 over the
     brightest footage measured (peak relative luminance 0.834). */
  --bar-rgb:0,0,0; --bar-a:.70; --pill-bg:rgba(0,0,0,.35);
  /* Channel tokens: every hairline, hover lift and dim text derives from these,
     so a theme swap is a change of two values rather than sixty rules. */
  /* --accent-text is a literal, not var(--amber). A custom property defined
     from another resolves where it is DECLARED, not where it is used, so the
     aliased form could never follow an island. */
  --fg-rgb:225,224,204; --lift-rgb:255,255,255; --accent-text:#f0a13a; color-scheme:dark;
  --font:"Almarai",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto",sans-serif;
  --serif:"Instrument Serif",serif;
  --ease:cubic-bezier(0.16,1,0.3,1); --ease-card:cubic-bezier(0.22,1,0.36,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --navy:hsl(201 100% 13%); --fg:hsl(0 0% 100%); --muted-fg:hsl(240 4% 66%);
  --font-display:"Instrument Serif",serif; --font-body:"Inter",sans-serif;

  /* Auth-page tokens */
  --coal:#12100f; --coal-2:#1b1815; --coal-3:#252119;
  --bone:#efe9dd; --bone-2:#b9b2a3; --bone-3:#857f73; --bone-3-field:#928c7d;
  --amber-ink:#1a1206; --ok:#8fd18b; --bad:#ff7b6b;
  --line:#2b2823; --line-2:#3e3a32;
  --outline:oklch(1 0 0 / 0.1);
  --shadow-2:0 2px 6px rgba(0,0,0,0.4),0 24px 64px rgba(0,0,0,0.5);
  --font-auth-display:"Gloock","Georgia",serif;
  --font-auth-sans:"Instrument Sans","Helvetica Neue","Helvetica",sans-serif;
  --t-h1:clamp(26px,3vw,40px); --t-h3:18px; --t-body:16px; --t-small:14px; --t-micro:12px;
  --lh-mid:1.25; --lh-body:1.55; --ls-tight:-0.02em;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:36px; --s-7:56px; --s-8:88px;
  --gutter:clamp(20px,4.5vw,64px); --w-form:460px;
  --hit:48px; --hair:1px; --rule:2px; --pill:999px; --r-inner:6px; --r-field:8px; --r-panel:14px;
  --fast:140ms; --quick:180ms; --ease-out:cubic-bezier(0.23,1,0.32,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.26'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0;font-family:var(--font)}
html,body{background:var(--black);color:var(--cream);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img,video{max-width:100%;display:block}
/* The [hidden] attribute is only a UA declaration, so ANY author `display`
   rule outranks it. Without this line, every component that sets display on
   an element it later hides via `el.hidden` stays rendered and focusable —
   which silently broke the vault filter and showed a fabricated scorecard
   result to every visitor. Global and !important on purpose: if the attribute
   is present the thing is hidden, no exceptions. */
[hidden]{display:none!important}

/* WordPress admin bar spacing */
body.admin-bar .hero,body.admin-bar .auth-page{padding-top:32px}
@media (max-width:782px){body.admin-bar .hero,body.admin-bar .auth-page{padding-top:46px}}

/* ---------- Shared animation utilities ---------- */
@keyframes pull{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes fade-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.w{display:inline-block;opacity:0}
.is-in .w{animation:pull .6s var(--ease) both}
.fade{opacity:0}
.is-in .fade{animation:pull .8s var(--ease) both}
.fr,.fr-1,.fr-2{opacity:0}
.is-in .fr{animation:fade-rise .8s ease-out both}
.is-in .fr-1{animation:fade-rise .8s ease-out .2s both}
.is-in .fr-2{animation:fade-rise .8s ease-out .4s both}

/* ---------- Liquid glass utility ---------- */
.liquid-glass{background:rgba(var(--lift-rgb),0.01);background-blend-mode:luminosity;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:none;box-shadow:inset 0 1px 1px rgba(var(--lift-rgb),0.1);position:relative;overflow:hidden}
.liquid-glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(180deg,rgba(var(--lift-rgb),0.45) 0%,rgba(var(--lift-rgb),0.15) 20%,rgba(var(--lift-rgb),0) 40%,rgba(var(--lift-rgb),0) 60%,rgba(var(--lift-rgb),0.15) 80%,rgba(var(--lift-rgb),0.45) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.navpill.liquid-glass{position:absolute}

/* ---------- Hero ---------- */
.hero{height:100vh;height:100svh;padding:16px}
.hero-box{position:relative;height:100%;border-radius:2rem;overflow:hidden;background:#111}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.noise{position:absolute;inset:0;background-image:var(--noise);opacity:.7;mix-blend-mode:overlay;pointer-events:none}
.grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.3),transparent,rgba(0,0,0,.6));pointer-events:none}
.navpill{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;gap:clamp(12px,3vw,56px);background:var(--pill-bg);border-radius:0 0 24px 24px;padding:8px 32px;z-index:3}
.navpill a{font-size:clamp(10px,1vw,14px);color:rgba(var(--fg-rgb),.8);transition:color .2s;white-space:nowrap}
.navpill a:hover{color:var(--cream)}
.hero-actions{position:absolute;top:16px;right:16px;z-index:3;display:flex;align-items:center;gap:8px}
.auth-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:13px;color:var(--cream);text-decoration:none;transition:transform .2s,background .2s}
.auth-btn:hover{background:rgba(var(--lift-rgb),.08)}
.auth-btn .sep{opacity:.5}
.menu-toggle{display:none;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;font-size:13px;color:var(--cream);cursor:pointer;transition:transform .2s,background .2s}
.menu-toggle:hover{background:rgba(var(--lift-rgb),.08)}
.menu-toggle svg,.menu-close svg{width:18px;height:18px;stroke:var(--cream);stroke-width:2;fill:none;stroke-linecap:round}
.mobile-menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;padding:12px 16px calc(24px + env(safe-area-inset-bottom));background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--cream);opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.mobile-menu[hidden]{display:none}
.mobile-menu.is-open{opacity:1;transform:none}
.mobile-menu-bar{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.mobile-menu-brand{font-size:13px;letter-spacing:.06em;color:rgba(var(--fg-rgb),.8)}
.menu-close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border-radius:999px;font-size:13px;color:var(--cream);cursor:pointer}
.mobile-menu-links{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column}
.mobile-menu-links li{border-bottom:1px solid rgba(var(--fg-rgb),.12)}
.mobile-menu-links a{display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:14px 4px;font-size:clamp(26px,7vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--cream)}
.mobile-menu-links a .arrow{width:20px;height:20px;transform:rotate(-45deg);opacity:.6}
.mobile-menu-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:24px}
.mobile-menu-foot .pill{align-self:stretch;justify-content:space-between;min-height:56px;padding:8px 8px 8px 22px;font-size:16px}
.mobile-menu-auth{display:flex;justify-content:center;align-items:center;gap:6px;min-height:44px;font-size:14px;color:rgba(var(--fg-rgb),.8)}
.mobile-menu-auth a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--cream)}
.mobile-menu-auth .sep{opacity:.5}
body.menu-open{overflow:hidden}
@media (min-width:901px){.mobile-menu{display:none}}
.hero-content{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;gap:24px;padding:0 clamp(16px,3vw,40px) clamp(16px,3vw,40px);z-index:2}
.giant{flex:2 1 0;min-width:0;font-size:clamp(90px,19vw,340px);font-weight:500;line-height:.85;letter-spacing:-.07em;color:var(--cream);position:relative}
.giant .w{position:relative}
.star{position:absolute;top:.65em;right:-.3em;font-size:.31em;color:var(--amber)}
.hero-side{flex:1 1 0;min-width:240px;display:flex;flex-direction:column;gap:20px;padding-bottom:.4em}
.hero-side p{color:rgba(222,219,200,.7);font-size:clamp(12px,1.1vw,16px);line-height:1.2}
.hero-side .fade{animation-delay:.5s}
.hero-side .cta-wrap{animation-delay:.7s}
.pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--primary);color:var(--black);border-radius:999px;padding:6px 6px 6px 20px;font-weight:500;font-size:clamp(14px,1.1vw,16px);transition:gap .25s}
.pill:hover{gap:12px}
.circle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--black);transition:transform .25s}
.arrow{width:16px;height:16px;stroke:var(--cream);stroke-width:2;fill:none}

/* ---------- About ---------- */
.about{background:var(--black);padding:clamp(48px,8vw,120px) 16px;display:flex;justify-content:center}
.about-card{width:100%;max-width:72rem;background:var(--card);border-radius:2rem;padding:clamp(40px,7vw,96px) clamp(20px,5vw,72px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px}
.about-card .label{color:var(--primary);font-size:12px;letter-spacing:.06em}
.multi{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:0 .25em;max-width:48rem;font-size:clamp(30px,5vw,72px);line-height:.9;color:var(--cream);font-weight:500}
.multi .it{font-family:var(--serif);font-style:italic;font-weight:400}
.chars{max-width:44rem;color:var(--primary);font-size:clamp(13px,1.1vw,16px);line-height:1.6}
.chw{display:inline-block;white-space:pre}
.ch{opacity:.2;transition:opacity .15s linear}

/* ---------- Statement ---------- */
.stmt{--stair-in:min(160px,18vw);display:flex;flex-wrap:wrap;align-items:center;gap:40px;background:var(--black);padding:clamp(60px,10vw,140px) 0 clamp(30px,5vw,70px) clamp(20px,9vw,118px)}
.stmt-copy{flex:1 1 420px;min-width:300px;display:flex;flex-direction:column}
.stairs{display:flex;flex-direction:column;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.98;font-size:clamp(34px,6.5vw,72px);color:var(--cream)}
.stairs .in{padding-left:var(--stair-in)}
.stairs .acc{color:var(--amber)}
.stmt p{max-width:520px;margin:32px 0 0 var(--stair-in);font-size:clamp(14px,1.6vw,17px);line-height:1.7;color:var(--gray-4)}
.cham{display:inline-flex;align-items:center;gap:0;margin:36px 0 0 var(--stair-in)}
.cham a{display:inline-flex;background:var(--amber);border:1px solid #c97f1f;color:#1a1c1e;text-transform:uppercase;font-weight:700;letter-spacing:.14em;padding:18px 34px;font-size:clamp(13px,2.2vw,16px);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));box-shadow:0 0 0 1px rgba(240,161,58,.35),0 10px 30px -12px rgba(240,161,58,.6);transition:background .2s}
.cham a:hover{background:#f6b45a}
.cham span{display:block;width:22px;height:1px;background:var(--cream)}
.stmt-media{flex:1 1 360px;min-width:280px;display:flex;justify-content:flex-end;position:relative}
.stmt-video{display:block;width:100%;max-width:644px;height:auto}
.tint{position:absolute;top:0;right:0;width:100%;max-width:644px;height:100%;background:var(--amber);mix-blend-mode:hue;pointer-events:none}

/* ---------- Features ---------- */
.features{position:relative;min-height:100vh;background:var(--black);padding:clamp(48px,8vw,120px) clamp(16px,3vw,40px);display:flex;flex-direction:column;gap:48px}
.features-noise{position:absolute;inset:0;background-image:var(--noise-2);opacity:.15;pointer-events:none}
.fhead{position:relative;display:flex;flex-direction:column;gap:6px;font-size:clamp(20px,2.6vw,36px);line-height:1.15;color:var(--cream)}
.fhead .dim{color:var(--gray-5)}
.grid{position:relative;display:flex;flex-wrap:wrap;gap:4px}
.card{flex:1 1 calc(25% - 3px);min-width:0;min-height:480px;background:var(--card-2);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px;opacity:0;position:relative;overflow:hidden}
.grid.is-in .card{animation:cardIn .7s var(--ease-card) both}
.grid.is-in .card:nth-child(2){animation-delay:.15s}
.grid.is-in .card:nth-child(3){animation-delay:.3s}
.grid.is-in .card:nth-child(4){animation-delay:.45s}
.card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-caption{position:relative;margin-top:auto;color:var(--cream);font-size:18px;z-index:1}
.icon{width:48px;height:48px;border-radius:8px;background-size:cover;background-position:center}
.card h3{font-size:18px;font-weight:700;color:var(--cream);display:flex;justify-content:space-between;gap:8px}
.card h3 span{color:var(--gray-5);font-weight:400}
.list{display:flex;flex-direction:column;gap:12px}
.li{display:flex;gap:10px;align-items:flex-start;color:var(--gray-4);font-size:14px;line-height:1.45}
.check-svg{flex:0 0 auto;width:16px;height:16px;stroke:var(--primary);stroke-width:2;fill:none;margin-top:2px}
.more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:var(--cream);font-size:14px}
.more .arrow{transform:rotate(-45deg)}

/* ---------- Closer ---------- */
.closer{position:relative;min-height:100vh;min-height:100svh;background:var(--navy);display:flex;flex-direction:column;overflow:hidden}
.closer-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.closer-nav{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 32px;max-width:80rem;width:100%;margin:0 auto}
.closer-logo{font-family:var(--font-display);font-size:30px;letter-spacing:-.02em;color:var(--fg)}
.closer-logo sup{font-size:12px}
.closer-links{display:flex;gap:32px}
.closer-links a{font-family:var(--font-body);font-size:14px;color:var(--muted-fg);transition:color .2s}
.closer-links a:hover,.closer-links a.on{color:var(--fg)}
.glass-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:10px 24px;font-family:var(--font-body);font-size:14px;color:var(--fg);transition:transform .2s;cursor:pointer}
.closer-hero{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;padding:90px 24px}
.closer-h1{font-family:var(--font-display);font-weight:400;font-size:clamp(48px,7.5vw,96px);line-height:.95;letter-spacing:-.026em;max-width:80rem;color:var(--fg)}
.closer-h1 em{font-style:normal;color:var(--muted-fg)}
.closer-sub{font-family:var(--font-body);color:var(--muted-fg);font-size:clamp(16px,1.3vw,18px);max-width:42rem;margin-top:32px;line-height:1.6}
.closer-cta{margin-top:48px;padding:20px 56px;font-size:16px}

/* ---------- Auth page ---------- */
.auth-page{display:flex;align-items:flex-start;min-height:100vh;min-height:100svh;background-image:var(--grain);background-size:160px 160px;background-color:var(--coal);color:var(--bone);font-family:var(--font-auth-sans);font-size:var(--t-body);line-height:var(--lh-body);caret-color:var(--amber)}
.auth-page ::selection{background:var(--amber);color:var(--amber-ink)}
.auth-page *:focus-visible{outline:var(--rule) solid var(--amber);outline-offset:var(--s-1)}
.auth-page a{color:var(--bone);text-decoration-thickness:var(--hair);text-underline-offset:var(--s-1);transition:color var(--fast) ease}
.auth-page a:hover{color:var(--amber)}
.auth-page input{font:inherit}
.auth-page input::placeholder{color:var(--bone-3-field)}
.auth-side{display:flex;flex:1 1 44%;min-width:0;flex-direction:column;justify-content:flex-end;position:sticky;top:0;height:100vh;background-size:cover;background-position:50% 50%}
.side-bar{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5) var(--gutter);background:var(--coal);border-top:var(--rule) solid var(--amber)}
.auth-main{display:flex;flex:1 1 56%;min-width:0;min-height:100vh;flex-direction:column;justify-content:space-between;padding:var(--s-4) var(--gutter) var(--s-4)}
.auth-top{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:var(--s-4)}
.alt-link{display:inline-flex;align-self:flex-start;align-items:center;min-height:40px;font-weight:600;font-size:var(--t-small);color:var(--bone-2);text-decoration:none}
.alt-link:hover{color:var(--amber)}
.side-list{display:flex;flex-direction:column;gap:var(--s-2);padding-top:var(--s-2)}
.brand{font-family:var(--font-auth-display);font-size:var(--t-h3);color:var(--bone);text-decoration:none}
.brand:hover{color:var(--bone)}
.top-link{display:inline-flex;align-items:center;min-height:var(--hit);font-size:var(--t-small);color:var(--bone-2);text-decoration:none}
.top-link:hover{color:var(--bone)}
.form-wrap{display:flex;flex-direction:column;gap:var(--s-4);width:100%;max-width:var(--w-form);margin:var(--s-4) auto}
.head{display:flex;flex-direction:column;gap:var(--s-2)}
.h1{font-family:var(--font-auth-display);font-size:var(--t-h1);line-height:1.04;letter-spacing:var(--ls-tight);color:var(--bone);text-wrap:balance}
.lede{color:var(--bone-2);text-wrap:pretty}
.switch{display:flex;padding:var(--s-1);background:var(--coal-2);border-radius:var(--pill)}
.switch-btn{display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:calc(var(--hit) - var(--s-2));border-radius:var(--pill);font-weight:600;font-size:var(--t-small);color:var(--bone-2);transition:background-color var(--quick) var(--ease-out),color var(--quick) ease}
.switch-btn:hover{color:var(--bone)}
.switch-btn.is-on{background:var(--bone);color:var(--coal)}
.mock{display:inline-flex;align-self:flex-start;align-items:center;padding:var(--s-1) var(--s-3);border:var(--hair) dashed var(--amber);border-radius:var(--pill);font-size:var(--t-micro);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--amber)}
.form{display:flex;flex-direction:column;gap:var(--s-3)}
.field{display:flex;flex-direction:column;gap:var(--s-2)}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.field-label{font-size:var(--t-small);font-weight:600;color:var(--bone)}
.hint{font-size:var(--t-micro);color:var(--bone-3)}
.hint-bad{color:var(--bad)}
.hint-ok{color:var(--ok)}
.control{display:flex;align-items:center;gap:var(--s-2);min-height:var(--hit);padding:0 var(--s-2) 0 var(--s-4);background:var(--coal-2);border:var(--hair) solid var(--line-2);border-radius:var(--r-field);transition:border-color var(--quick) ease,box-shadow var(--quick) ease}
.control:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,161,58,0.18)}
.control.is-bad{border-color:var(--bad)}
.control.is-ok{border-color:var(--ok)}
.input{flex:1 1 auto;min-width:0;min-height:calc(var(--hit) - 2px);background:transparent;border:0;color:var(--bone);font-size:var(--t-body)}
.input:focus{outline:none}
.eye{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 var(--s-3);border-radius:var(--r-inner);font-size:var(--t-micro);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--bone-2);transition:background-color var(--fast) ease,color var(--fast) ease}
.eye:hover{background:var(--coal-3);color:var(--bone)}
.check-row{display:flex;align-items:center;gap:var(--s-3);min-height:var(--hit)}
.box{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:var(--hair) solid var(--line-2);border-radius:var(--r-inner);background:var(--coal-2);transition:background-color var(--fast) ease,border-color var(--fast) ease}
.box.is-on{background:var(--amber);border-color:var(--amber)}
.tick{display:flex;width:8px;height:8px;border-radius:2px;background:var(--amber-ink)}
.check-text{font-size:var(--t-small);color:var(--bone-2)}
.button-primary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--hit);padding:0 var(--s-5);background:var(--amber);color:var(--amber-ink);border-radius:var(--pill);font-weight:700;font-size:var(--t-small);transition-property:background-color,transform;transition-duration:var(--quick);transition-timing-function:var(--ease-out);border:0;cursor:pointer}
.button-primary:hover{background:var(--bone)}
.button-primary:active{transform:scale(0.96);transition-duration:var(--fast)}
.button-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:var(--hit);padding:0 var(--s-5);border:var(--hair) solid var(--line-2);color:var(--bone);border-radius:var(--pill);font-weight:600;font-size:var(--t-small);transition-property:border-color,background-color,transform;transition-duration:var(--quick);transition-timing-function:var(--ease-out);background:transparent;cursor:pointer}
.button-ghost:hover{border-color:var(--bone);background:var(--coal-2)}
.button-ghost:active{transform:scale(0.96);transition-duration:var(--fast)}
.fine{font-size:var(--t-small);color:var(--bone-3);text-wrap:pretty}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3);font-size:var(--t-small);color:var(--bone-3)}
.foot-link{display:inline-flex;align-items:center;min-height:var(--hit)}
.inc{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--t-small);color:var(--bone-2)}
.dot{display:flex;flex:0 0 auto;width:7px;height:7px;margin-top:0.5em;border-radius:50%;background:var(--amber)}

/* ---------- Hero positioning + CTAs ---------- */
.hero-side h2{font-size:clamp(18px,1.6vw,26px);line-height:1.15;font-weight:500;color:var(--cream);letter-spacing:-.01em}
.hero-side h2 em{font-style:italic;font-family:var(--serif);font-weight:400;color:var(--primary)}
.hero-side .kicker{color:rgba(222,219,200,.6);font-size:clamp(12px,1vw,14px);letter-spacing:.04em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px}
.pill--ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(var(--fg-rgb),.35)}
.pill--ghost .circle{background:rgba(var(--fg-rgb),.12)}
.book-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:500;background:var(--primary);color:var(--black);transition:transform .2s}

/* ---------- Pillars ---------- */
.pillars{background:var(--black);padding:clamp(24px,4vw,64px) 16px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:calc(72rem + 32px);margin:0 auto}
.pillar{background:var(--card);border-radius:1.5rem;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px;min-height:280px;color:var(--cream);transition:background .2s,transform .25s var(--ease)}
.pillar:hover{background:#151515}
.eyebrow{color:var(--amber);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.pillar h3{font-size:clamp(22px,2.2vw,30px);line-height:1.05;letter-spacing:-.02em;font-weight:500;color:var(--cream)}
.pillar p{color:var(--gray-4);font-size:15px;line-height:1.55}
.pillar .more{margin-top:auto}

/* ---------- Latest entries (home) ---------- */
.latest{padding:clamp(48px,8vw,120px) clamp(20px,6vw,80px);max-width:72rem;margin:0 auto}
.latest-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:8px}
.latest-head h2{font-size:clamp(26px,3vw,40px);line-height:1.05;letter-spacing:-.02em;font-weight:500;color:var(--cream);margin-top:8px}
.latest .more{color:var(--cream);font-size:14px;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}

/* ---------- Journal list ---------- */
.journal{padding:clamp(80px,10vw,140px) clamp(20px,6vw,80px) clamp(60px,8vw,100px);max-width:72rem;margin:0 auto}
.journal-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,5vw,64px)}
.journal-head h1,.hub-head h1{font-family:var(--serif);font-size:clamp(44px,7vw,96px);line-height:.92;letter-spacing:-.02em;font-weight:400;color:var(--cream)}
.journal-head p,.hub-head p{color:var(--gray-4);font-size:clamp(16px,1.3vw,19px);line-height:1.6;max-width:44rem}
.journal-list{display:flex;flex-direction:column}
.entry{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:28px 0;border-top:1px solid rgba(var(--fg-rgb),.12)}
.entry:last-child{border-bottom:1px solid rgba(var(--fg-rgb),.12)}
.entry time{color:var(--gray-5);font-size:13px;letter-spacing:.04em;padding-top:6px}
.entry h2{font-size:clamp(22px,2.4vw,32px);line-height:1.1;letter-spacing:-.015em;font-weight:500;color:var(--cream)}
.entry h2 a:hover{color:var(--amber)}
.entry p{color:var(--gray-4);font-size:15px;line-height:1.6;margin-top:10px;max-width:48rem}
.entry .cats{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.entry .cats a,.subnav a{font-size:13px;color:var(--primary);border:1px solid rgba(222,219,200,.25);border-radius:999px;padding:6px 12px;transition:background .2s,color .2s}
.entry .cats a:hover,.subnav a:hover{background:var(--primary);color:var(--black)}
.journal-empty{color:var(--gray-4);font-size:16px;line-height:1.6;padding:32px 0;border-top:1px solid rgba(var(--fg-rgb),.12)}

/* ---------- Single essay ---------- */
/* 53.5rem less the side padding puts the reading column at ~696px, inside the
   680-760 that stays comfortable. Paired with 19px body that is ~73 characters
   a line; at the old 56rem/20px it was 736px and 71ch, and dropping the type to
   19px without narrowing the column would have pushed it to 77ch. */
.essay{padding:clamp(80px,10vw,140px) clamp(20px,6vw,80px) clamp(60px,8vw,100px);max-width:53.5rem;margin:0 auto}
.essay-head{margin-bottom:clamp(32px,5vw,56px)}
.essay-head .meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--gray-5);font-size:13px;letter-spacing:.04em;margin-bottom:20px}
.essay-head .meta a{color:var(--amber)}
.essay-head h1{font-family:var(--serif);font-size:clamp(36px,5.5vw,68px);line-height:1;letter-spacing:-.02em;font-weight:400;color:var(--cream)}
.essay-head .dek{color:var(--gray-4);font-size:clamp(17px,1.45vw,21px);line-height:1.55;margin-top:20px}
.essay-body{color:var(--primary);font-size:clamp(17px,1.35vw,19px);line-height:1.65}
.essay-body>*+*{margin-top:1.3em}
.essay-body h2{color:var(--cream);font-family:var(--serif);font-size:clamp(28px,3.2vw,40px);font-weight:400;letter-spacing:-.01em;line-height:1.05;margin-top:2em}
.essay-body h3{color:var(--cream);font-size:clamp(20px,2vw,24px);font-weight:600;line-height:1.2;margin-top:1.8em}
.essay-body a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.essay-body a:hover{color:var(--cream)}
.essay-body ul,.essay-body ol{padding-left:1.15em}
.essay-body li+li{margin-top:.55em}
.essay-body li::marker{color:var(--amber)}
/* Emphasis has to outrank body text or a bolded line reads as an accident.
   Body is --primary, so strong steps up to --cream. */
.essay-body strong,.essay-body b{color:var(--cream);font-weight:600}
/* Pull quote: the one line worth stopping for. Breaks wider than the measure
   above 1024px, exactly like .essay-lead, so the two devices agree. */
.essay-quote{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.6vw,32px);
  line-height:1.24;letter-spacing:-.01em;color:var(--cream);text-wrap:balance;
  margin:clamp(30px,4vw,48px) 0;padding:clamp(22px,3vw,30px) 0;
  border-top:1px solid rgba(var(--fg-rgb),.16);border-bottom:1px solid rgba(var(--fg-rgb),.16)}
@media (min-width:1024px){.essay-quote{width:calc(100% + 4rem);margin-left:-2rem}}
/* What you walk away with: the deliverables block that turns a reader into
   an enquiry. Raised ground + amber rule, never a full card. */
.essay-take{background:rgba(var(--lift-rgb),.04);border-left:2px solid var(--amber);
  border-radius:0 12px 12px 0;padding:clamp(20px,3vw,28px) clamp(20px,3vw,30px);
  margin:clamp(28px,4vw,44px) 0}
.essay-take>*+*{margin-top:.7em}
.essay-take h3{margin-top:0;font-size:clamp(16px,1.5vw,18px);letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber);font-weight:600}
.essay-take ul{padding-left:1.15em;font-size:.96em}
/* Interior figure: same break as the lead image, optional caption. */
.essay-figure{margin:clamp(30px,4vw,50px) 0}
.essay-figure img{display:block;width:100%;height:auto;border-radius:14px}
.essay-figure figcaption{margin-top:.8em;font-size:14px;line-height:1.5;color:var(--bone-3)}
@media (min-width:1024px){.essay-figure{width:calc(100% + 4rem);margin-left:-2rem}
  .essay-figure figcaption{padding:0 2rem}}
.essay-body blockquote{border-left:2px solid var(--amber);padding-left:1.2em;color:var(--cream);font-family:var(--serif);font-size:1.15em;line-height:1.4}
.essay-body img{border-radius:12px}
/* The lead image breaks a little wider than the measure; it never exceeds
   the article box, so no horizontal scroll at any width. */
.essay-lead{margin:clamp(28px,4vw,52px) 0 clamp(32px,5vw,60px);border-radius:14px;overflow:hidden;background:var(--coal-2)}
.essay-lead img{display:block;width:100%;height:auto}
@media (min-width:1024px){.essay-lead{width:calc(100% + 7rem);margin-left:-3.5rem}}
.entry-thumb{display:block;border-radius:10px;overflow:hidden;background:var(--coal-2);align-self:start}
.entry-thumb img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;transition:opacity .25s}
.entry-thumb:hover img{opacity:.82}
.entry--img{grid-template-columns:140px 220px 1fr}
.essay-body pre{background:var(--card);padding:1em 1.2em;border-radius:12px;overflow:auto;font-size:.9em}
.essay-body code{background:var(--card);padding:2px 6px;border-radius:4px;color:var(--cream);font-size:.9em}
.essay-nav{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(48px,6vw,80px);padding-top:24px;border-top:1px solid rgba(var(--fg-rgb),.12);color:var(--gray-4);font-size:14px}
.essay-nav a:hover{color:var(--cream)}

/* ---------- Hub pages (Work / Learn / Resources) ---------- */
.hub{padding:clamp(80px,10vw,140px) clamp(20px,6vw,80px) clamp(60px,8vw,100px);max-width:72rem;margin:0 auto;display:flex;flex-direction:column;gap:clamp(40px,6vw,80px)}
.hub-head{display:flex;flex-direction:column;gap:16px;max-width:56rem}
.hub-head h1 em{font-style:italic;color:var(--primary)}
.hub-actions{display:flex;flex-wrap:wrap;gap:10px}
.subnav{display:flex;flex-wrap:wrap;gap:8px}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hub-grid .card{min-height:0}
.hub-grid .card h3 a:hover{color:var(--amber)}
.hub-grid .card p{color:var(--gray-4);font-size:14px;line-height:1.5}
.hub-section{display:flex;flex-direction:column;gap:20px}
.hub-section h2{font-size:clamp(24px,2.6vw,36px);line-height:1.1;letter-spacing:-.02em;font-weight:500;color:var(--cream)}
.hub-section h2 span{color:var(--gray-5);font-weight:400}
.lesson-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.lesson-list li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid rgba(var(--fg-rgb),.12);color:var(--cream);font-size:clamp(16px,1.4vw,20px);line-height:1.3}
.lesson-list li:last-child{border-bottom:1px solid rgba(var(--fg-rgb),.12)}
.lesson-list .tag{flex:0 0 auto;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-5)}
/* Measure in ch, not rem: 44rem is 704px, which at 15px is 92 characters a line
   — half again past the 45-75 that stays readable, and the widest running text
   on the site. ch ties the column to the type size, so it cannot drift again. */
.hub-note{color:var(--gray-4);font-size:15px;line-height:1.6;max-width:66ch}
.legacy-note{background:var(--card);border-left:2px solid var(--amber);padding:14px 18px;border-radius:0 12px 12px 0;color:var(--gray-4);font-size:14px;line-height:1.5;margin-bottom:clamp(24px,4vw,40px)}
.legacy-note a{color:var(--amber)}
.page-wide{max-width:72rem}

/* ---------- Site header / footer (non-front pages) ---------- */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--topbar-h);padding:0 clamp(16px,3vw,40px);background:rgba(var(--bar-rgb),var(--bar-a));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background-color 200ms ease,border-color 200ms ease}
/* Scrolling no longer decides whether the bar is readable — the ground above
   does that — so this only adds the hairline that separates bar from page. */
.topbar.is-scrolled{border-bottom-color:rgba(var(--fg-rgb),.1)}
body.admin-bar .topbar{top:32px}
.page-grain{position:fixed;inset:0;z-index:2;background-image:var(--noise-2);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.topbar .brand-mark{font-size:22px;font-weight:500;letter-spacing:-.04em;color:var(--cream)}
/* --amber is not restated for light mode, so it would land at 1.98:1 on the
   paper bar. --accent-text is restated, and resolves to amber in dark. */
.topbar .brand-mark .star{position:static;font-size:.6em;color:var(--accent-text);margin-left:2px}
.topbar .navpill{position:static;transform:none;border-radius:999px;padding:8px 24px}
.topbar .hero-actions{position:static}
/* Site footer — 1.0.10: brand + CTA lede, four-column link grid, legal row. */
.sitefoot{border-top:var(--hair) solid rgba(var(--fg-rgb),.10);padding:clamp(56px,7vw,96px) clamp(20px,4vw,48px) clamp(28px,4vw,40px);display:flex;flex-direction:column;gap:clamp(36px,5vw,64px);max-width:80rem;margin:0 auto;isolation:isolate}
.sitefoot-lede{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sitefoot-brand{display:flex;flex-direction:column;gap:12px;max-width:38ch}
.sitefoot-mark{font-family:var(--font-display);font-size:clamp(36px,4vw,56px);letter-spacing:-.02em;color:var(--cream);text-decoration:none;line-height:1;transition:color 160ms ease}
.sitefoot-mark:hover{color:var(--amber)}
.sitefoot-mark sup{font-size:.32em;margin-left:2px;letter-spacing:0;color:var(--gray-4)}
.sitefoot-tag{margin:0;color:var(--gray-4);font-size:15px;line-height:1.55;text-wrap:pretty}
.sitefoot-cta{flex:0 0 auto}
.sitefoot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.sitefoot-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.sitefoot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.sitefoot-eyebrow{margin:0;color:var(--gray-5);font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sitefoot-col a{color:var(--cream);font-family:var(--font);font-size:14px;line-height:1.4;text-decoration:none;transition:color 160ms ease}
.sitefoot-col a:hover{color:var(--amber)}
.sitefoot-col a:focus-visible{outline:1px solid var(--amber);outline-offset:3px;border-radius:2px}
.sitefoot-legal{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:clamp(24px,3vw,32px);border-top:var(--hair) solid rgba(var(--fg-rgb),.06);flex-wrap:wrap}
.sitefoot-legal small{color:var(--gray-5);font-size:12px;letter-spacing:.03em;font-variant-numeric:tabular-nums}
@media (max-width:768px){
  .sitefoot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .sitefoot-legal{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:420px){
  .sitefoot-grid{grid-template-columns:1fr;gap:28px}
}

/* Auth: additional panels + shared bits — 1.0.10 */
.auth-page [hidden]{display:none!important}
.auth-page .panel[hidden]{display:none}
.auth-page .panel{display:flex;flex-direction:column;gap:var(--s-4)}
.auth-page .switch[hidden]{display:none}
.auth-page .hint-link{color:var(--bone-2);text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:var(--s-1);transition:color var(--fast) ease}
.auth-page .hint-link:hover{color:var(--amber)}
.auth-page .stack-actions{display:flex;flex-direction:column;gap:var(--s-2)}
.auth-page .tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border:var(--hair) solid var(--amber);background:transparent;align-self:flex-start;font-variant-numeric:tabular-nums;margin-bottom:var(--s-3)}
.auth-page .tag--soft{color:var(--amber);border-color:rgba(240,161,58,.35);background:rgba(240,161,58,.08)}
.auth-page b[data-auth-sent-email]{color:var(--bone);font-weight:600;word-break:break-all}
/* Learn hub — full-viewport hero over a looping video (1.0.11) */
.page-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--black);isolation:isolate}
.page-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.4) 82%,rgba(0,0,0,.78) 100%)}
.page-hero-body{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);padding:clamp(24px,4vw,48px) clamp(24px,6vw,72px) clamp(36px,5vw,72px);max-width:60rem}
.page-hero-body .eyebrow{align-self:flex-start;color:var(--amber)}
.page-hero-body h1{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,6.4vw,84px);line-height:.98;letter-spacing:-.028em;color:var(--cream);text-wrap:balance;margin:0}
.page-hero-body h1 em{font-style:italic;font-family:var(--serif);font-weight:400;color:rgba(var(--fg-rgb),.72)}
.page-hero-body .lede{color:rgba(var(--fg-rgb),.82);font-size:clamp(15px,1.2vw,17px);line-height:1.55;max-width:46ch;margin:0;text-wrap:pretty}
.page-hero-body .hero-ctas{display:flex;flex-wrap:wrap;gap:10px}
.page-hero-body .subnav{display:flex;flex-wrap:wrap;gap:4px;padding-top:4px;margin-left:-10px}
.page-hero-body .subnav a{padding:8px 12px;border-radius:999px;font-size:13px;color:rgba(var(--fg-rgb),.72);text-decoration:none;transition:color 160ms ease,background-color 160ms ease}
.page-hero-body .subnav a:hover{color:var(--cream);background:rgba(var(--lift-rgb),.06)}
.page-hero-body .subnav a:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
.page-hero-body .fine{color:rgba(var(--fg-rgb),.6);font-size:13px;margin:0}
.contact-mega>span{display:inline-flex;align-items:center;gap:.25em}
.page-hero-body .about-role{color:rgba(var(--fg-rgb),.82)}
body:has(.page-hero) #site-content,body.home #site-content{margin-top:calc(var(--topbar-h) * -1)}
/* Hero pages used to strip the bar's background entirely, which is what made
   the header unreadable at the top of the page. The bar now keeps the same
   themed ground everywhere, so there is no hero-specific rule left here. */
body.admin-bar:has(.page-hero) .page-hero-body{padding-top:calc(clamp(24px,4vw,48px) + 32px)}
@media (max-width:782px){body.admin-bar:has(.page-hero) .page-hero-body{padding-top:calc(clamp(24px,4vw,48px) + 46px)}}
@media (max-width:640px){
  .page-hero-body{padding-left:20px;padding-right:20px}
  .page-hero-body h1{font-size:clamp(38px,10vw,56px)}
  /* The hero is full-height and its content is bottom-anchored, so the last row
     landed under the fixed theme toggle (14px from the bottom-left, 40px square).
     Measured on /journal/ at 375px: the toggle sat on 920px² of the topic link,
     eating the tap. Clear its 54px plus a gap. */
  .page-hero-body{padding-bottom:max(clamp(36px,5vw,72px),68px)}
}

/* About + Contact build-out (1.0.12) — role cycle, glass stats, marquee, mega mailto, FAQ, scroll cue */
.about-role{font-size:clamp(17px,1.8vw,22px);color:var(--gray-4);margin:0}
.role-word{display:inline-block;font-family:var(--font-display);font-style:italic;color:var(--cream);transition:opacity 260ms var(--ease),transform 260ms var(--ease)}
.role-word.is-out{opacity:0;transform:translateY(10px)}
.glass-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,40px);border-radius:1.5rem;padding:clamp(24px,4vw,48px)}
.glass-stats>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.glass-stats strong{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.4vw,48px);color:var(--cream);line-height:1;font-variant-numeric:tabular-nums}
.glass-stats span{color:var(--gray-4);font-size:13px;line-height:1.45;text-wrap:pretty}
@media (max-width:768px){.glass-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.marquee{overflow:hidden;border-top:var(--hair) solid rgba(var(--fg-rgb),.08);border-bottom:var(--hair) solid rgba(var(--fg-rgb),.08);padding:18px 0}
.marquee-track{display:flex;gap:48px;width:max-content;animation:marqueeSlide 32s linear infinite}
.marquee-track span{font-family:var(--font-display);font-style:italic;font-size:clamp(18px,2vw,26px);color:var(--gray-5);white-space:nowrap}
.marquee-track span em{font-style:normal;color:var(--amber)}
@keyframes marqueeSlide{to{transform:translateX(-50%)}}
.contact-mega-wrap{display:flex;flex-direction:column;gap:14px}
.contact-mega{display:inline-flex;align-self:flex-start;align-items:center;gap:.25em;font-family:var(--font-display);font-size:clamp(24px,3.4vw,50px);letter-spacing:-.02em;line-height:1.1;color:var(--cream);text-decoration:none;overflow-wrap:anywhere;transition:color 160ms ease}
.contact-mega .arrow{flex:0 0 auto;width:.7em;height:.7em;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform 200ms var(--ease-out)}
.contact-mega:hover{color:var(--amber)}
.contact-mega:focus-visible{outline:1px solid var(--amber);outline-offset:6px;border-radius:4px}
@media (hover:hover) and (pointer:fine){.contact-mega:hover .arrow{transform:translate(.09em,-.09em)}}
.contact-page .fine{color:var(--gray-5);font-size:13px}
.faq{display:flex;flex-direction:column}
.faq details{border-top:var(--hair) solid rgba(var(--fg-rgb),.1)}
.faq details:last-child{border-bottom:var(--hair) solid rgba(var(--fg-rgb),.1)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;cursor:pointer;font-size:16px;color:var(--cream);list-style:none;transition:color 160ms ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber)}
.faq summary:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
.faq summary::after{content:'+';flex:0 0 auto;font-size:20px;color:var(--gray-5);transition:transform 200ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 4px 22px;margin:0;color:var(--gray-4);font-size:15px;line-height:1.6;max-width:60ch;text-wrap:pretty}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;display:none;flex-direction:column;align-items:center;gap:8px;color:rgba(var(--fg-rgb),.55);font-size:10px;letter-spacing:.2em;text-transform:uppercase;pointer-events:none}
@media (min-width:900px){.scroll-cue{display:flex}}
.scroll-cue .line{position:relative;width:1px;height:36px;background:rgba(var(--fg-rgb),.25);overflow:hidden}
.scroll-cue .line::after{content:'';position:absolute;top:-8px;left:0;width:1px;height:8px;background:var(--amber);animation:cueDrop 1.6s var(--e-soft) infinite}
@keyframes cueDrop{to{transform:translateY(52px)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .scroll-cue .line::after{animation:none}
  .role-word{transition:none}
}

/* ---------- Motion: entrances, stagger, feedback ---------- */
/* One vocabulary site-wide: `pull` for words and blocks, `cardIn` for cards.
   Groups marked [data-stagger] reveal 55ms apart once they scroll into view;
   the hub/Journal/essay heads stage eyebrow -> title words -> intro -> actions. */
.is-in.fade{animation:pull .8s var(--ease) both}
/* Entrance vocabulary from the motionsites spec. Headline lines rise through a
   mask first; the supporting cast follows on a fixed timeline set per element
   with --d. --ease is the spec's --e-reveal curve; --e-soft supports. */
:root{--e-soft:cubic-bezier(.25,.8,.3,1)}
@keyframes lineRise{from{transform:translateY(calc(100% + .26em))}to{transform:translateY(0)}}
@keyframes subIn{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes subInFlat{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pillIn{from{opacity:0;transform:translateY(8px) scale(.972)}to{opacity:1;transform:none}}
@keyframes liftIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.ln{display:block;overflow:hidden;padding-top:.26em;padding-bottom:.26em;margin-top:-.26em;margin-bottom:-.26em}
.ln+.ln{margin-top:-.52em}
.ln-i{display:block;transform:translateY(calc(100% + .26em));will-change:transform}
.is-in .ln-i{animation:lineRise 1.05s var(--ease) both;animation-delay:.12s}
.is-in .ln:nth-child(2) .ln-i{animation-delay:.22s}
.is-in .ln:nth-child(3) .ln-i{animation-delay:.32s}
.lift-in,.lift-in-each>*,.sub-in,.pill-in>*{opacity:0}
.is-in .lift-in{animation:liftIn .55s var(--e-soft) both;animation-delay:var(--d,0s)}
.is-in .lift-in-each>*{animation:liftIn .55s var(--e-soft) both;animation-delay:calc(var(--d,0s) + var(--i,0) * 45ms)}
.is-in .sub-in{animation:subIn .85s var(--ease) both;animation-delay:var(--d,0s)}
.is-in .pill-in>*{animation:pillIn .7s var(--ease) both;animation-delay:var(--d,0s)}
.is-in .pill-in>:nth-child(2){animation-delay:calc(var(--d,0s) + .07s)}
/* Two copies of a looping clip cross-fade at the loop point (JS clones the
   video); the original is marked active in markup so first paint is never dark. */
.js video[data-loop-fade],.js video[data-loop-fade]+video{opacity:0;transition:opacity .9s linear}
.js video[data-loop-fade].is-active,.js video[data-loop-fade]+video.is-active{opacity:1}
/* Background clips never show a play glyph or controls, even when a browser
   refuses autoplay (iOS Low Power Mode); the first tap anywhere starts them. */
.hero-video::-webkit-media-controls,.stmt-video::-webkit-media-controls,.card-video::-webkit-media-controls,.closer-video::-webkit-media-controls,.hub-media video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button,.stmt-video::-webkit-media-controls-start-playback-button,.card-video::-webkit-media-controls-start-playback-button,.closer-video::-webkit-media-controls-start-playback-button,.hub-media video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
[data-stagger]>*{opacity:0}
[data-stagger].is-in>*{animation:pull .55s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
.hub-grid.is-in>.card{animation:cardIn .7s var(--ease-card) both;animation-delay:calc(var(--i,0) * 120ms)}
.no-js .w,.no-js .fade,.no-js .card,.no-js .fr,.no-js .fr-1,.no-js .fr-2,.no-js [data-stagger]>*,.no-js .lift-in,.no-js .lift-in-each>*,.no-js .sub-in,.no-js .pill-in>*{opacity:1;animation:none}
.no-js .ln,.no-js .ln+.ln{overflow:visible;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}
.no-js .ln-i{transform:none}
.pill,.book-btn,.glass-btn,.menu-toggle,.menu-close,.cham a{transition-property:transform,background-color,gap;transition-duration:150ms;transition-timing-function:var(--ease-out)}
.pill:active,.book-btn:active,.glass-btn:active,.menu-toggle:active,.menu-close:active,.cham a:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .book-btn:hover,.glass-btn:hover,.auth-btn:hover,.menu-toggle:hover{transform:scale(1.03)}
  .pill:hover .circle{transform:scale(1.1)}
  .pillar:hover{transform:translateY(-2px)}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.navpill a:focus-visible,.closer-links a:focus-visible,.subnav a:focus-visible{outline-offset:2px;border-radius:4px}

/* ---------- Cinematic media band (hubs) ---------- */
.hub-media{position:relative;margin:0;border-radius:1.5rem;overflow:hidden;aspect-ratio:21/9;background:#111;isolation:isolate}
.hub-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-media .tint{max-width:none;z-index:1}
.hub-media .noise{z-index:2}
.hub-media figcaption{position:absolute;left:clamp(16px,3vw,32px);bottom:clamp(14px,2.5vw,28px);z-index:3;color:var(--cream);font-size:clamp(14px,1.3vw,18px);max-width:28rem;text-wrap:pretty}
.hub-media::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px oklch(1 0 0 / .08);pointer-events:none;z-index:4}

/* ---------- Reading progress (essays) ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:6;pointer-events:none}
.progress span{display:block;height:100%;background:var(--amber);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
body.admin-bar .progress{top:32px}

/* ---------- Typographic polish ---------- */
.hub-head h1,.journal-head h1,.essay-head h1,.pillar h3,.entry h2,.hub-section h2,.latest-head h2,.card h3{text-wrap:balance}
.hub-head p,.journal-head p,.essay-body p,.hub-note,.pillar p,.entry p,.essay-head .dek,.hero-side p,.stmt p,.closer-sub{text-wrap:pretty}
.entry time,.essay-head .meta,.lesson-list .tag{font-variant-numeric:tabular-nums}
.essay-body img{outline:1px solid oklch(1 0 0 / .1);outline-offset:-1px}

/* ---------- Responsive ---------- */
@media (max-width:1024px){.card{flex:1 1 calc(50% - 2px)}}
@media (max-width:900px){
  /* The Menu button is taller than the nav pill it replaces, so the bar
     grows here and the hero's pull-up grows with it. */
  :root{--topbar-h:72px}
  /* Touch layouts: the five-link pill becomes a Menu button that opens a
     full-screen sheet; the sign-in pill shrinks to "Sign in". */
  .navpill{display:none}
  .hero-actions{top:12px;right:12px}
  .menu-toggle{display:inline-flex;min-height:44px}
  .auth-btn{display:none}
  .book-btn{min-height:44px;padding:10px 16px}
  .hero{padding:16px}.hero-box{border-radius:1rem}
  .hero-content{flex-direction:column;align-items:flex-start}
  .giant{font-size:26vw}
  .pillars,.hub-grid{grid-template-columns:1fr}
  .pillar{min-height:0}
  .entry,.entry--img{grid-template-columns:1fr;gap:8px}
  .entry-thumb{margin:4px 0 6px;max-width:420px}
  .auth-page{flex-direction:column}
  .auth-side{position:static;flex:0 0 auto;height:auto;min-height:clamp(200px,38vh,320px)}
  .auth-main{min-height:0}
  .form-wrap{margin:var(--s-6) auto}
}
@media (max-width:768px){
  .closer-links{display:none}
  /* Media wraps under the copy here, so the desktop right-bleed no longer
     applies; inset both sides so the paragraph can't touch the edge. */
  .stmt{padding-left:20px;padding-right:20px}
}
@media (max-width:640px){
  .hero-side p{font-size:14px}
  .is-in .sub-in{animation-name:subInFlat}
  .is-in .ln-i{animation-duration:.92s}
  .about-card{border-radius:1.25rem}
  .stmt{--stair-in:min(160px,10vw)}
  .stmt p{font-size:15px}
  .cham a{padding:16px 26px}
  .card{flex:1 1 100%;min-height:0}
  .card--video{min-height:280px}
  .closer-nav{padding:20px 16px}
  .closer-hero{padding:64px 20px}
  .closer-cta{padding:18px 40px}
}
@media (prefers-reduced-motion:reduce){
  .w,.fade,.card,.fr,.fr-1,.fr-2,[data-stagger]>*,.lift-in,.lift-in-each>*,.sub-in,.pill-in>*{opacity:1;animation:none}
  .ln,.ln+.ln{overflow:visible;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}
  .ln-i{transform:none;animation:none}
  .mobile-menu,.topbar{transition:none;transform:none}
  .pill,.book-btn,.glass-btn,.menu-toggle,.menu-close,.cham a{transition-property:background-color,gap}
  .pill:active,.book-btn:active,.glass-btn:active,.menu-toggle:active,.menu-close:active,.cham a:active{transform:none}
  .ch{opacity:1}
  .button-primary:active,.button-ghost:active{transform:none}
}


/* Pricing, concierge, and tasteful motion (1.0.15) */
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,28px)}
@media (max-width:768px){.price-grid{grid-template-columns:1fr}}
.price-card{display:flex;flex-direction:column;gap:18px;border-radius:1.5rem;padding:clamp(24px,3.5vw,40px);background:rgba(var(--lift-rgb),0.02)}
.price-card .eyebrow{align-self:flex-start}
.price-card .price{display:flex;align-items:baseline;gap:12px;margin:0}
.price-card .amount{font-family:var(--font-display);font-size:clamp(40px,4.5vw,64px);line-height:1;color:var(--cream)}
.price-card .per{color:var(--gray-5);font-size:13px}
.price-card .side-list{padding:0}
.price-card .inc{color:var(--gray-4);font-size:14px}
.price-card .pill{margin-top:auto}
.price-card .fine{color:var(--gray-5);font-size:12px;margin:0;text-wrap:pretty}
.price-card--full{box-shadow:inset 0 0 0 1px rgba(240,161,58,.35)}
.lesson-list .tag--free{color:var(--amber)}
.lesson-list .tag--lock{display:inline-flex;align-items:center;gap:6px}
.lesson-list .tag--lock .lock{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Concierge — bottom-right scripted assistant */
.concierge{position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:55}
.concierge-fab{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;color:var(--cream);cursor:pointer;transition:transform 150ms var(--ease-out),background-color 150ms ease}
.concierge-fab:hover{background:rgba(var(--lift-rgb),.08)}
.concierge-fab:active{transform:scale(.94)}
.concierge-fab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.concierge-ico-close{display:none}
.concierge.is-open .concierge-ico-close{display:block}
.concierge.is-open .concierge-ico-chat{display:none}
.concierge-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(360px,calc(100vw - 28px));height:min(70vh,540px);display:flex;flex-direction:column;border-radius:1.25rem;background:rgba(18,16,15,.92);color:var(--bone);opacity:0;transform:translateY(12px);transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.concierge-panel.is-open{opacity:1;transform:none}
.concierge-panel[hidden]{display:none}
.concierge-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 12px;border-bottom:1px solid rgba(var(--fg-rgb),.1)}
.concierge-head strong{display:block;font-size:15px;color:var(--bone)}
.concierge-head span{display:block;font-size:11px;color:var(--bone-3);margin-top:2px}
.concierge-close{padding:6px;border-radius:8px;color:var(--bone-2)}
.concierge-close:hover{color:var(--bone);background:rgba(var(--lift-rgb),.06)}
.concierge-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.concierge-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.concierge-msg{max-width:85%;padding:10px 12px;border-radius:14px;font-size:13.5px;line-height:1.5;animation:conciergeIn .28s var(--ease-out) both}
.concierge-msg p{margin:0}
.concierge-msg.is-bot{align-self:flex-start;background:var(--coal-2);color:var(--bone);border-bottom-left-radius:4px}
.concierge-msg.is-user{align-self:flex-end;background:var(--amber);color:var(--amber-ink);border-bottom-right-radius:4px}
@keyframes conciergeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.concierge-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.concierge-links a{display:inline-flex;padding:6px 12px;border-radius:999px;font-size:12px;background:rgba(240,161,58,.14);color:var(--amber);transition:background-color 150ms ease}
.concierge-links a:hover{background:rgba(240,161,58,.26)}
.concierge-typing{display:flex;gap:4px;padding:12px 14px}
.concierge-typing span{width:6px;height:6px;border-radius:50%;background:var(--bone-3);animation:conciergeDot 1s ease-in-out infinite}
.concierge-typing span:nth-child(2){animation-delay:.15s}
.concierge-typing span:nth-child(3){animation-delay:.3s}
@keyframes conciergeDot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.concierge-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.concierge-chips button{padding:7px 12px;border-radius:999px;font-size:12px;color:var(--bone-2);border:1px solid rgba(var(--fg-rgb),.18);transition:color 150ms ease,border-color 150ms ease,background-color 150ms ease}
.concierge-chips button:hover{color:var(--bone);border-color:rgba(var(--fg-rgb),.4);background:rgba(var(--lift-rgb),.04)}
.concierge-input{display:flex;gap:8px;padding:10px 14px 14px;border-top:1px solid rgba(var(--fg-rgb),.1)}
.concierge-input input{flex:1;min-width:0;background:var(--coal-2);border:1px solid rgba(var(--fg-rgb),.14);border-radius:999px;padding:9px 14px;font-size:13px;color:var(--bone)}
.concierge-input input::placeholder{color:var(--bone-3)}
.concierge-input input:focus{outline:none;border-color:var(--amber)}
.concierge-input button{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--amber);color:var(--amber-ink);transition:transform 150ms var(--ease-out)}
.concierge-input button:active{transform:scale(.92)}
.concierge-input button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.concierge *:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
@media (max-width:640px){.concierge-panel{position:fixed;left:12px;right:12px;bottom:84px;width:auto;height:min(72vh,560px)}}

/* Tasteful motion: parallax hint, smooth anchors, cross-page fades */
.page-hero video,.hero-box .hero-video{will-change:transform}
.hub-section[id]{scroll-margin-top:72px}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:220ms}
}
@media (prefers-reduced-motion:reduce){
  .concierge-msg{animation:none}
  .concierge-typing span{animation:none}
  .concierge-panel{transition:none}
}

/* Journal subscribe band (1.0.17) */
.journal-subscribe{max-width:46rem;margin:0 auto;padding:clamp(32px,5vw,72px) clamp(16px,3vw,40px) clamp(64px,8vw,120px)}
.journal-subscribe .wp-block-jetpack-subscriptions form{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.journal-subscribe input[type="email"]{flex:1;min-width:220px;background:var(--coal-2);border:1px solid rgba(var(--fg-rgb),.16);border-radius:999px;padding:12px 18px;font-size:14px;color:var(--bone)}
.journal-subscribe input[type="email"]:focus{outline:none;border-color:var(--amber)}
.journal-subscribe button,.journal-subscribe .wp-block-button__link{background:var(--amber);color:var(--amber-ink);border-radius:999px;padding:12px 22px;font-size:14px;font-weight:600;transition:transform 150ms var(--ease-out)}
.journal-subscribe button:active,.journal-subscribe .wp-block-button__link:active{transform:scale(.96)}
.journal-subscribe .wp-block-jetpack-subscriptions p{color:var(--gray-5);font-size:12px}

/* Accounts, lessons, and the engine wiring (1.0.18) */
.status-line{display:block;margin:0 0 4px;min-height:18px;font-size:13px;line-height:1.5}
.status-line button{color:var(--amber);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;background:none;border:0;padding:0}
button.pill,button.pill--ghost{font:inherit;cursor:pointer}
/* ==========================================================================
   LESSON DISCOVERY (1.4.9)
   One flat list works at 26 lessons and becomes a wall at 100. The library is
   grouped by the skill axis every lesson already carries, so the reader picks
   a drawer before picking a lesson, and the filter bar narrows to one drawer.
   ========================================================================== */
.lesson-groups{display:flex;flex-direction:column;gap:clamp(26px,3.5vw,40px)}
.lesson-group-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 10px;font-size:clamp(17px,1.6vw,20px);font-weight:600;letter-spacing:-.01em;color:var(--cream)}
.lesson-group-name{display:inline-flex;align-items:center;gap:12px;min-width:0}
/* Decorative, and marked so in the markup: the heading beside it already says
   which axis this is, so a screen reader repeating the picture adds nothing. */
.lesson-group-art{width:40px;height:40px;flex:0 0 auto;border-radius:10px;object-fit:cover;border:1px solid rgba(var(--fg-rgb),.14)}

/* Lead images. object-fit:cover with a fixed ratio so a portrait upload can
   never stretch the page, and the caption-free figure carries no margin of
   its own — the rhythm belongs to the column. */
.lesson-lead,.path-lead{margin:clamp(26px,3.5vw,38px) 0 0;border-radius:14px;overflow:hidden;background:var(--coal-2)}
.lesson-lead img,.path-lead img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.path-lead{margin:0 0 clamp(26px,3.5vw,38px)}
.lesson-group-head span{color:var(--gray-5);font-size:13px;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Minutes ride under the title so a row answers "is this worth opening now". */
.lesson-list li>span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
/* --gray-5 measures 4.10:1 here and fails AA in both themes; --gray-4 is the
   dimmest neutral that actually passes for text this size. */
.lesson-list li .fine{font-size:12.5px;color:var(--gray-4);font-variant-numeric:tabular-nums}
.filter-n{display:inline-block;margin-left:6px;color:var(--gray-5);font-variant-numeric:tabular-nums}
.filter-row button.is-on .filter-n{color:inherit;opacity:.7}

/* ==========================================================================
   BLOG FORMAT (1.4.7)
   An essay creates thought, so it gets the two things that make a long read
   usable — the short version for people who will not read 1,400 words, and a
   contents rail so a seven-screen piece stays navigable — plus one action at
   the end so the thought can become a change. Nothing here is a card for the
   sake of it: the contents is a list, the short version is an object worth
   quoting, and Try this is an action.
   ========================================================================== */

/* The short version. Placed before the body on purpose: the reader decides
   whether to spend the next six minutes having already got the point. */
.essay-short{margin:clamp(28px,4vw,40px) 0 0;padding:clamp(18px,2.4vw,24px) clamp(20px,2.6vw,26px);border:1px solid rgba(var(--fg-rgb),.16);border-radius:14px;background:rgba(var(--lift-rgb),.03)}
.essay-short-label{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}
.essay-short p{margin:0;color:var(--primary);font-size:clamp(16px,1.3vw,18px);line-height:1.6}
.essay-short p+p{margin-top:.7em}

/* Contents. A list, not a panel. Below the desktop breakpoint it sits inline
   above the body; from 1180px it moves into its own rail and sticks. */
.essay-toc{margin:clamp(28px,4vw,40px) 0 0;padding:16px 18px;border-left:2px solid rgba(var(--fg-rgb),.16)}
.essay-toc-label{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-4);margin-bottom:10px}
.essay-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.essay-toc li{counter-increment:toc;margin:0}
.essay-toc li+li{margin-top:8px}
.essay-toc a{display:block;color:var(--gray-4);font-size:14px;line-height:1.35;transition:color .15s ease}
.essay-toc a::before{content:counter(toc,decimal-leading-zero);margin-right:10px;color:var(--gray-5);font-variant-numeric:tabular-nums}
.essay-toc a:hover{color:var(--cream)}
.essay-body h2{scroll-margin-top:88px}

/* Try this — an action, so it gets a ground, same as the lesson's. */
.essay-try{margin-top:clamp(36px,5vw,56px);padding:clamp(20px,3vw,28px);border:1px solid rgba(var(--fg-rgb),.14);border-radius:14px;background:rgba(var(--lift-rgb),.03)}
.essay-try>h2{margin:0 0 2px;font-family:var(--font)}
.essay-try-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.essay-try>*+*{margin-top:1.1em}

/* From 1180px the essay becomes two columns: a sticky contents rail and the
   reading column, which stays pinned at 696px rather than stretching to fill
   — the whole point of the measure is that it does not grow with the window. */
@media (min-width:1180px){
  .essay.has-toc{display:grid;grid-template-columns:190px minmax(0,696px);column-gap:clamp(40px,4vw,64px);justify-content:center;max-width:none}
  .essay.has-toc>*{grid-column:2}
  .essay.has-toc>.essay-toc{grid-column:1;grid-row:1/-1;position:sticky;top:88px;align-self:start;margin:0;padding:0 0 0 16px}
}

/* ==========================================================================
   LESSON FORMAT (1.4.7)
   A lesson runs a fixed loop — why it matters, learn, see, try, test, apply,
   continue — and looks different from an essay on purpose: an essay creates
   thought, a lesson creates behaviour. Two rules hold this block together.
   First, text stays text: the promise, the scenario and the step headings are
   set with kickers and rules, not wrapped in panels, because a page where
   every section floats in its own card stops having a hierarchy. A panel is
   spent only on the two things that are an ACTION or an OBJECT — the thing to
   go and do, and the four lines worth screenshotting. Second, nothing here is
   required: a lesson with no scenario and no takeaways renders without them.
   ========================================================================== */

/* The promise. A summary says what the lesson covers; a labelled promise says
   what you will be able to do, which is the difference being sold. */
.lesson-promise{margin-top:22px;padding-left:18px;border-left:2px solid var(--accent-text)}
.lesson-promise-label{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin-bottom:6px}
.lesson-promise .dek{margin-top:0}
.lesson-meta{margin:24px 0 0}

/* Position in the path. A lesson that knows it is two of eight is a course. */
.lesson-progress{margin-top:26px;display:flex;flex-direction:column;gap:8px}
.lesson-progress-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lesson-progress-path{color:var(--cream);font-weight:500;font-size:14px}
.lesson-progress-path:hover{color:var(--accent-text)}
.lesson-progress-count{color:var(--gray-4);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.lesson-progress-track{height:3px;border-radius:999px;background:rgba(var(--fg-rgb),.14);overflow:hidden}
.lesson-progress-track span{display:block;height:100%;background:var(--accent-text);border-radius:inherit}

/* Step headings. The kicker carries the loop; the rule separates the step from
   the prose above it without boxing it in. */
.lesson-step{margin-top:clamp(36px,5vw,56px);padding-top:clamp(20px,3vw,28px);border-top:1px solid rgba(var(--fg-rgb),.12)}
.lesson-step>h2{margin-top:0}
.lesson-step-kicker{display:block;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.lesson-step>*+*{margin-top:1.1em}

/* Try it — an action, so it earns a ground. */
.lesson-try{padding:clamp(20px,3vw,28px);border:1px solid rgba(var(--fg-rgb),.14);border-radius:14px;background:rgba(var(--lift-rgb),.03)}
.lesson-try>h2{margin-bottom:2px}

/* The scenario is prose. It gets a rule, not a box. */

/* Remember — the part people screenshot, so it is an object. */
.lesson-remember{margin-top:clamp(36px,5vw,56px);padding:clamp(20px,3vw,28px);border:1px solid rgba(var(--fg-rgb),.16);border-radius:14px;background:rgba(var(--lift-rgb),.03)}
.lesson-remember h2{margin:0 0 12px;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.lesson-remember ul{margin:0;padding-left:1.1em;color:var(--primary)}
.lesson-remember li+li{margin-top:.5em}

/* Never end on "complete". End on the next thing. */
.lesson-next{margin-top:clamp(40px,5vw,64px);padding-top:clamp(20px,3vw,28px);border-top:1px solid rgba(var(--fg-rgb),.12)}
.lesson-next-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-4);margin-bottom:12px}
.lesson-next-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 18px;padding:18px 20px;border:1px solid rgba(var(--fg-rgb),.14);border-radius:14px;background:rgba(var(--lift-rgb),.03);transition:border-color .2s ease,transform .2s var(--ease-out)}
.lesson-next-card:hover{border-color:var(--accent-text);transform:translateY(-2px)}
.lesson-next-card strong{grid-column:1;color:var(--cream);font-weight:500;font-size:clamp(17px,1.6vw,20px);line-height:1.25}
.lesson-next-card .fine{grid-column:1;color:var(--gray-4)}
.lesson-next-card .circle{grid-column:2;grid-row:1/span 2;align-self:center}
@media (prefers-reduced-motion:reduce){.lesson-next-card{transition:none}.lesson-next-card:hover{transform:none}}

.lesson-lock{margin-top:2em;padding:clamp(20px,3vw,32px);border-radius:1.25rem;display:flex;flex-direction:column;gap:14px;background:rgba(var(--lift-rgb),.03)}
.lesson-lock .lesson-lock-head{margin:0;color:var(--cream);font-size:clamp(19px,2vw,23px)}
.lesson-lock p{margin:0}
.lesson-lock .pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.lesson-actions{margin-top:2.5em;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lesson-list .tag a,.lesson-list span a{color:inherit}
[data-dwkd-unlock-msg]{margin-top:8px}

/* Community threads (1.0.19) */
.thread-form{display:flex;flex-direction:column;gap:12px;max-width:44rem}
.thread-form .input{background:var(--coal-2);border:1px solid rgba(var(--fg-rgb),.16);border-radius:14px;padding:12px 16px;font:inherit;font-size:14px;color:var(--bone);width:100%}
.thread-form .input:focus{outline:none;border-color:var(--amber)}
.thread-form .pill,.thread-form .pill--ghost{align-self:flex-start}
.thread-replies{margin-top:3em}
.thread-replies h2{margin-bottom:1em}
.reply-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:18px}
.reply-list li{border-left:2px solid rgba(240,161,58,.35);padding-left:16px}
.reply-meta{margin:0 0 4px}
.reply-body p{margin:0 0 .6em}
.lesson-list span .fine{display:block;margin-top:2px}

/* The booker (1.0.20) */
.booker{max-width:44rem}
.booker-days,.booker-slots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.booker-days button,.booker-slots button{padding:9px 16px;border-radius:999px;font-size:13px;color:var(--bone-2);border:1px solid rgba(var(--fg-rgb),.18);cursor:pointer;font:inherit;transition:color 150ms ease,border-color 150ms ease,background-color 150ms ease}
.booker-days button:hover,.booker-slots button:hover{color:var(--bone);border-color:rgba(var(--fg-rgb),.4)}
.booker-days button.is-on,.booker-slots button.is-on{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.booker-picked{color:var(--cream);margin:0}
.booker [hidden]{display:none!important}


/* ==========================================================================
   Light mode.
   Dark stays the authored default; light applies only when a visitor asks
   for it, and the choice is remembered on their device. Everything below is
   a token swap - no rule is duplicated - because the palette resolves
   through --fg-rgb / --lift-rgb and the named surface tokens.
   ========================================================================== */
:root[data-theme="light"]{
  color-scheme:light;
  --black:#f7f5ee; --card:#f0ede2; --card-2:#e8e4d7;
  --cream:#17150f; --primary:#2f2c22;
  --gray-4:#586170; --gray-5:#626b77;
  --navy:hsl(201 44% 91%); --fg:#17150f; --muted-fg:hsl(240 4% 38%);
  --coal:#f7f5ee; --coal-2:#efece1; --coal-3:#e6e2d4;
  --bone:#17150f; --bone-2:#544f47; --bone-3:#6d685e; --bone-3-field:#797467;
  --line:#ddd7c8; --line-2:#c9c3b2;
  --fg-rgb:26,24,19; --lift-rgb:0,0,0;
  /* The accent set, restated for paper. Leaving these out was the whole bug:
     they kept their dark-mode values, so amber type sat at 1.82-1.95:1 on
     every light surface, the focus ring at 1.73:1, the hint colours at
     1.65 and 2.32:1, and .button-primary:hover put #1a1206 text on a #17150f
     ground at 1.02:1 — a label that vanished on hover.
     --amber #8a5a0c clears 4.5:1 as type and 3:1 as a line on all four light
     surfaces (worst case 4.56:1 on --card-2 #e6e2d4; the more obvious #8f5f0f
     drops to 4.25:1 there). It is the fill colour too, so --amber-ink flips to
     paper: white-on-ochre reads at 5.43:1, and on the --bone hover ground at
     16.73:1. Deep filled accents match what light mode already does with
     --primary on .book-btn. */
  --amber:#8a5a0c; --amber-ink:#f7f5ee; --ok:#256b28; --bad:#a4231b;
  --accent-text:#8a5a0c;
  --outline:oklch(0 0 0 / 0.14);
  /* Paper ground for the bar. Over the brightest hero footage this composites
     to 16.5:1 against the ink text, and over the darkest to 12.8:1, so the
     light bar is legible on every clip without depending on any of them. */
  --bar-rgb:247,245,238; --bar-a:.86; --pill-bg:rgba(26,24,19,.06);
  --shadow-2:0 2px 6px rgba(0,0,0,.08),0 24px 64px rgba(0,0,0,.12);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
}
/* Dark islands: sections whose text sits on video or photography keep the
   dark palette in both modes, so a light page never puts dark type on a
   moving image. Tokens inherit, so everything inside follows automatically. */
.hero,.page-hero,.closer,.stmt,.card,.auth-side,.hub-media,
.mobile-menu{
  color-scheme:dark;
  --black:#000; --card:#101010; --card-2:#212121;
  --cream:#E1E0CC; --primary:#DEDBC8;
  --gray-4:#9ca3af; --gray-5:#757c8a;
  --navy:hsl(201 100% 13%); --fg:hsl(0 0% 100%); --muted-fg:hsl(240 4% 66%);
  --coal:#12100f; --coal-2:#1b1815; --coal-3:#252119;
  --bone:#efe9dd; --bone-2:#b9b2a3; --bone-3:#857f73; --bone-3-field:#928c7d;
  --line:#2b2823; --line-2:#3e3a32;
  --fg-rgb:225,224,204; --lift-rgb:255,255,255;
  /* The accent set belongs in the island too. Now that light mode restates
     these, an island that omitted them would inherit the PAPER values and put
     #8a5a0c type and a paper-coloured tick on near-black footage. */
  --amber:#f0a13a; --amber-ink:#1a1206; --ok:#8fd18b; --bad:#ff7b6b;
  --accent-text:#f0a13a;
  --outline:oklch(1 0 0 / 0.1);
}
/* Amber is legible on coal but not on paper; links take the deeper tone. */
:root[data-theme="light"] .essay-body a,
:root[data-theme="light"] .hub-note a,
:root[data-theme="light"] .fine a,
:root[data-theme="light"] .essay-head .meta a{color:var(--accent-text)}
:root[data-theme="light"] .entry-thumb,
:root[data-theme="light"] .essay-lead{background:var(--coal-3)}
@media (prefers-reduced-motion:no-preference){
  html,body{transition:background-color .3s ease,color .3s ease}
}

/* The switch itself: bottom-left, mirroring the concierge on the right. */
.theme-toggle{position:fixed;left:20px;bottom:20px;z-index:55;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--cream);background:rgba(var(--lift-rgb),.06);border:1px solid rgba(var(--fg-rgb),.18);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform 150ms var(--ease-out),background-color 150ms ease}
.theme-toggle:hover{background:rgba(var(--lift-rgb),.12)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}
@media (max-width:640px){.theme-toggle{width:40px;height:40px;left:14px;bottom:14px}}
@media (prefers-reduced-motion:reduce){.theme-toggle{transition:none}}

/* -------- scorecard + read-next -------- */
.score{max-width:44rem}
.score-progress{height:3px;border-radius:2px;background:rgba(var(--fg-rgb),.12);overflow:hidden;margin-bottom:12px}
.score-progress span{display:block;height:100%;width:0;background:var(--amber);transition:width .35s var(--ease-out)}
.score-q h2{font-family:var(--serif);font-size:clamp(24px,3vw,36px);font-weight:400;line-height:1.1;letter-spacing:-.01em;color:var(--cream);margin:18px 0 26px}
.score-opts{display:flex;flex-direction:column;gap:10px}
.score-opt{text-align:left;padding:16px 20px;border-radius:14px;border:1px solid rgba(var(--fg-rgb),.16);background:rgba(var(--lift-rgb),.03);color:var(--primary);font-size:16px;line-height:1.45;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .18s var(--ease-out)}
.score-opt:hover{border-color:rgba(240,161,58,.55);background:rgba(var(--lift-rgb),.07);transform:translateX(3px)}
.score-back{margin-top:22px;background:none;border:0;color:var(--gray-4);font-size:14px;cursor:pointer;padding:0}
.score-back:hover{color:var(--cream)}
.score-result{padding:clamp(24px,4vw,40px);border-radius:1.5rem;display:flex;flex-direction:column;gap:14px}
.score-result h2{font-family:var(--serif);font-size:clamp(40px,7vw,72px);font-weight:400;line-height:1;color:var(--cream)}
.score-result h2 .fine{font-family:var(--font);font-size:15px;color:var(--gray-4)}
.score-areas{display:flex;flex-direction:column;gap:10px;margin:8px 0 4px}
.score-area{display:grid;grid-template-columns:96px 1fr 44px;gap:12px;align-items:center;font-size:14px;color:var(--gray-4)}
.score-area.is-weak{color:var(--cream)}
.score-meter{display:block;height:6px;border-radius:3px;background:rgba(var(--fg-rgb),.12);overflow:hidden}
.score-meter i{display:block;height:100%;background:rgba(var(--fg-rgb),.45);border-radius:3px}
.score-area.is-weak .score-meter i{background:var(--amber)}
.score-result .thread-form{margin-top:10px}
.read-next{margin-top:clamp(48px,6vw,80px);padding-top:28px;border-top:1px solid rgba(var(--fg-rgb),.12)}
.read-next h2{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:400;color:var(--cream);margin-bottom:18px}
.read-next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.read-next-card{display:flex;flex-direction:column;gap:10px;border-radius:14px;overflow:hidden;border:1px solid rgba(var(--fg-rgb),.12);background:rgba(var(--lift-rgb),.03);transition:border-color .2s ease,transform .2s var(--ease-out)}
.read-next-card:hover{border-color:rgba(240,161,58,.45);transform:translateY(-2px)}
.read-next-img{display:block;background:var(--coal-2)}
/* height:auto is load-bearing. WordPress emits width/height attributes on the
   thumbnail, and that presentational height beats aspect-ratio — a 768x435
   source rendered into a 358x435 box, which object-fit:cover then cropped to a
   tall portrait. With height:auto the ratio governs and the card gets its 16:9. */
.read-next-img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.read-next-body{display:flex;flex-direction:column;gap:6px;padding:0 16px 16px}
.read-next-body strong{color:var(--cream);font-weight:500;font-size:16px;line-height:1.25}
.read-next .fine{color:var(--gray-4)}
@media (max-width:680px){.read-next-grid{grid-template-columns:1fr}.score-area{grid-template-columns:82px 1fr 40px}}
@media (prefers-reduced-motion:reduce){.score-opt,.read-next-card,.score-progress span{transition:none}}

/* The topbar is no longer a dark island, so it needs no light-mode
   restatement: it reads :root directly and follows the visitor's theme on
   every page and at every scroll position. The whole block that used to
   re-declare the light palette for .topbar.is-scrolled is gone with it —
   an island that does not exist cannot strand a token it forgot. The
   scrolled hairline is rgba(var(--fg-rgb),.1), which is already per-theme. */

/* Auth: the bar crosses a dark photo on one side and a light panel on the
   other, so neither palette works across it — give it a solid ground. */
body.topbar-split .topbar{background:var(--black);border-bottom:1px solid rgba(var(--fg-rgb),.12)}
body.topbar-split .topbar.is-scrolled{background:var(--black)}


/* ==========================================================================
   MEMBER SURFACES (1.1.0)
   The platform half of the site: dashboard, paths, vault, library, tools.
   Everything here reads from the same tokens as the marketing pages, so a
   theme swap needs no second stylesheet and no literal colours appear.
   ========================================================================== */

.member-wrap{max-width:76rem;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.member-top{padding:clamp(28px,4vw,44px) 0 clamp(18px,2.5vw,26px);border-bottom:1px solid rgba(var(--fg-rgb),.12)}
.member-top h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,52px);line-height:1.02;letter-spacing:-.02em;color:var(--cream);margin:.12em 0 .5em}
.member-body{padding:clamp(24px,3.5vw,40px) 0 clamp(60px,8vw,110px);display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}

.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;border:1px solid rgba(var(--fg-rgb),.18);color:var(--gray-4);font-size:13px;line-height:1;background:rgba(var(--lift-rgb),.03)}
.chip.is-hot{color:var(--amber);border-color:rgba(240,161,58,.45)}
.chip--btn{cursor:pointer;font-family:inherit}
.chip--btn:hover{color:var(--cream);border-color:rgba(var(--fg-rgb),.4)}

/* The one thing the page exists for. */
.next-card{border:1px solid rgba(240,161,58,.42);border-left-width:3px;border-radius:0 16px 16px 0;background:rgba(var(--lift-rgb),.04);padding:clamp(22px,3vw,34px) clamp(20px,3vw,36px)}
.next-card .eyebrow{color:var(--amber);margin-bottom:10px}
.next-card h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.2vw,38px);line-height:1.08;color:var(--cream);margin:0 0 .35em;text-wrap:balance}
.next-detail{color:var(--gray-4);font-size:15.5px;line-height:1.55;max-width:56ch;margin:0 0 20px}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:rgba(var(--fg-rgb),.12);border:1px solid rgba(var(--fg-rgb),.12);border-radius:12px;overflow:hidden}
.stat{background:var(--coal);padding:16px 18px}
.stat strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,34px);line-height:1;color:var(--cream);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:6px;font-size:12.5px;color:var(--gray-5);line-height:1.35}

.member-cols{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,28px)}
@media (min-width:900px){.member-cols{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}}
.col-main,.col-side{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);min-width:0}

.mcard{border:1px solid rgba(var(--fg-rgb),.13);border-radius:14px;background:rgba(var(--lift-rgb),.02);padding:clamp(18px,2.4vw,26px)}
.mcard>h2{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-4);margin:0 0 14px}
.mcard .empty{margin:0;line-height:1.6}
.mcard .more{display:inline-block;margin-top:12px;color:var(--amber)}

.brief-card{display:flex;flex-direction:column;gap:7px;border:1px solid rgba(var(--fg-rgb),.12);border-radius:11px;padding:16px 18px;background:rgba(var(--lift-rgb),.03);transition:border-color .2s ease}
.brief-card:hover{border-color:rgba(240,161,58,.45)}
.brief-card strong{color:var(--cream);font-weight:500;font-size:17px;line-height:1.25}
.brief-meta{color:var(--gray-5)}

.meter{display:block;height:5px;border-radius:3px;background:rgba(var(--fg-rgb),.12);overflow:hidden}
.meter i{display:block;height:100%;background:var(--amber);border-radius:3px;transition:width .4s var(--ease-out)}
.path-prog{display:flex;flex-direction:column;gap:11px}
.path-prog-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.path-prog-head strong{color:var(--cream);font-weight:500;font-size:16px}

.rec-list{display:flex;flex-direction:column;gap:9px}
.rec-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;border:1px solid rgba(var(--fg-rgb),.12);border-radius:10px;padding:13px 15px;background:rgba(var(--lift-rgb),.02);transition:border-color .2s ease,transform .2s var(--ease-out)}
.rec-row:hover{border-color:rgba(240,161,58,.45);transform:translateX(2px)}
.rec-kind{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);white-space:nowrap}
.rec-title{color:var(--cream);font-size:15.5px;line-height:1.3;min-width:0}

.goal-list{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:9px}
.goal-list li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.goal-list li.is-done .goal-label{color:var(--gray-5);text-decoration:line-through}
.goal-tick{width:19px;height:19px;flex:none;border-radius:5px;border:1px solid rgba(var(--fg-rgb),.3);background:none;cursor:pointer;color:var(--amber);font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0}
.goal-tick:hover{border-color:var(--amber)}
.goal-label{color:var(--primary);font-size:14.5px;line-height:1.35}
.goal-x{background:none;border:0;color:var(--gray-5);font-size:17px;line-height:1;cursor:pointer;padding:0 2px}
.goal-x:hover{color:var(--cream)}
.goal-add{display:flex;gap:8px}
.goal-add input{flex:1;min-width:0;background:rgba(var(--lift-rgb),.04);border:1px solid rgba(var(--fg-rgb),.18);border-radius:8px;padding:9px 12px;color:var(--primary);font-family:inherit;font-size:14px}
.goal-add input:focus{outline:none;border-color:var(--amber)}
.mini{background:none;border:1px solid rgba(var(--fg-rgb),.22);border-radius:8px;color:var(--cream);padding:9px 15px;font-family:inherit;font-size:13.5px;cursor:pointer;transition:border-color .2s ease}
.mini:hover{border-color:var(--amber);color:var(--amber)}

.skill-list{display:flex;flex-direction:column;gap:11px}
.skill-row{display:grid;grid-template-columns:78px 1fr 26px;gap:11px;align-items:center;font-size:13.5px}
.skill-name{color:var(--gray-4)}
.skill-pct{text-align:right;color:var(--gray-5);font-variant-numeric:tabular-nums;font-size:12.5px}

.week-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--gray-4)}
.week-list strong{color:var(--cream);font-weight:500;font-variant-numeric:tabular-nums;display:inline-block;min-width:1.7em}

.saved-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.saved-list a{color:var(--primary)}
.saved-list a:hover{color:var(--amber)}

.badge-row{display:flex;flex-wrap:wrap;gap:7px}
.badge{display:inline-block;padding:5px 11px;border-radius:999px;border:1px solid rgba(240,161,58,.4);color:var(--amber);font-size:12px;line-height:1.2}

/* ---------- index pages: paths, vault, library, tools ---------- */

.idx-head{padding:clamp(30px,4.5vw,56px) 0 clamp(16px,2vw,24px);border-bottom:1px solid rgba(var(--fg-rgb),.12)}
.idx-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5vw,58px);line-height:1;letter-spacing:-.02em;color:var(--cream);margin:.1em 0 .3em}
.idx-head .lede{color:var(--gray-4);font-size:clamp(16px,1.5vw,19px);line-height:1.55;max-width:58ch;margin:0}
.idx-body{padding:clamp(24px,3.5vw,40px) 0 clamp(60px,8vw,110px)}

.filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filter-row button{background:none;border:1px solid rgba(var(--fg-rgb),.18);border-radius:999px;color:var(--gray-4);padding:7px 15px;font-family:inherit;font-size:13px;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.filter-row button:hover{color:var(--cream)}
.filter-row button.is-on{color:var(--amber);border-color:var(--amber)}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.lib-card{display:flex;flex-direction:column;gap:9px;border:1px solid rgba(var(--fg-rgb),.13);border-radius:13px;padding:19px 20px 21px;background:rgba(var(--lift-rgb),.02);transition:border-color .2s ease,transform .2s var(--ease-out)}
.lib-card:hover{border-color:rgba(240,161,58,.45);transform:translateY(-2px)}
.lib-kind{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.lib-card h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.18;color:var(--cream);margin:0}
.lib-card p{margin:0;color:var(--gray-4);font-size:14px;line-height:1.5}
.lib-meta{margin-top:auto;padding-top:9px;display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--gray-5)}

/* ---------- save button ---------- */

.save-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid rgba(var(--fg-rgb),.22);border-radius:999px;color:var(--gray-4);padding:8px 15px;font-family:inherit;font-size:13px;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.save-btn:hover{color:var(--cream);border-color:rgba(var(--fg-rgb),.42)}
.save-btn.is-saved{color:var(--amber);border-color:rgba(240,161,58,.5)}

/* ---------- copyable body ---------- */

.copy-box{position:relative;border:1px solid rgba(var(--fg-rgb),.14);border-radius:12px;background:rgba(var(--lift-rgb),.03);margin:22px 0}
.copy-box pre{margin:0;padding:20px 22px;overflow-x:auto;font-size:13.5px;line-height:1.6;color:var(--primary);white-space:pre-wrap;word-break:break-word;background:none;border-radius:12px}
.copy-box .mini{position:absolute;top:11px;right:11px;background:var(--coal-2)}

/* ---------- quiz ---------- */

.quiz{border:1px solid rgba(var(--fg-rgb),.14);border-radius:14px;padding:clamp(20px,3vw,28px);margin:clamp(30px,4vw,46px) 0;background:rgba(var(--lift-rgb),.02)}
.quiz h2{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin:0 0 6px}
.quiz .fine{margin:0 0 18px}
.quiz-q{margin:0 0 22px}
.quiz-q p{color:var(--cream);font-size:16.5px;line-height:1.4;margin:0 0 12px}
.quiz-opts{display:flex;flex-direction:column;gap:8px}
.quiz-opt{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;background:rgba(var(--lift-rgb),.03);border:1px solid rgba(var(--fg-rgb),.16);border-radius:10px;padding:12px 15px;color:var(--primary);font-family:inherit;font-size:14.5px;line-height:1.45;cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.quiz-opt:hover{border-color:rgba(240,161,58,.5)}
.quiz-opt.is-picked{border-color:var(--amber);background:rgba(240,161,58,.08)}
/* Correctness was carried by a green or red border and nothing else, which is
   invisible to anyone who cannot separate those two hues — WCAG 1.4.1. The
   glyph below is the real signal; colour only reinforces it. The old literal
   green and red also ignored the theme, so these now read --ok and --bad. */
.quiz-opt.is-right{border-color:var(--ok);background:rgba(var(--lift-rgb),.05)}
.quiz-opt.is-wrong{border-color:var(--bad);background:rgba(var(--lift-rgb),.05)}
.quiz-mark{flex:0 0 auto;width:18px;height:18px;margin-top:1px;border-radius:50%;border:1px solid rgba(var(--fg-rgb),.3);display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;font-weight:700}
.quiz-opt.is-picked .quiz-mark{border-color:var(--amber);background:var(--amber);color:var(--amber-ink)}
.quiz-opt.is-picked .quiz-mark::after{content:"\2022"}
.quiz-opt.is-right .quiz-mark{border-color:var(--ok);color:var(--ok)}
.quiz-opt.is-right .quiz-mark::after{content:"\2713"}
.quiz-opt.is-wrong .quiz-mark{border-color:var(--bad);color:var(--bad)}
.quiz-opt.is-wrong .quiz-mark::after{content:"\2715"}
.quiz-opt-text{flex:1 1 auto}
.quiz-opt:disabled{cursor:default;opacity:1}
.quiz-opt:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.quiz-why{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--gray-4)}
.quiz-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.quiz-score{font-size:14.5px;color:var(--cream)}

/* ---------- calculators ---------- */

.calc{border:1px solid rgba(var(--fg-rgb),.14);border-radius:14px;padding:clamp(20px,3vw,30px);background:rgba(var(--lift-rgb),.02);display:flex;flex-direction:column;gap:18px}
.calc h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,30px);line-height:1.1;color:var(--cream);margin:0}
.calc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.calc-field label{display:block;font-size:12.5px;color:var(--gray-4);margin-bottom:6px}
.calc-field input{width:100%;background:rgba(var(--lift-rgb),.04);border:1px solid rgba(var(--fg-rgb),.18);border-radius:8px;padding:10px 12px;color:var(--cream);font-family:inherit;font-size:15px;font-variant-numeric:tabular-nums}
.calc-field input:focus{outline:none;border-color:var(--amber)}
.calc-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:rgba(var(--fg-rgb),.12);border:1px solid rgba(var(--fg-rgb),.12);border-radius:11px;overflow:hidden}
.calc-cell{background:var(--coal);padding:15px 17px}
.calc-cell strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.8vw,30px);line-height:1;color:var(--amber);font-variant-numeric:tabular-nums}
.calc-cell span{display:block;margin-top:6px;font-size:12px;color:var(--gray-5);line-height:1.35}
.calc-note{margin:0;font-size:13px;line-height:1.55;color:var(--gray-5)}

/* ---------- mobile member bar ---------- */

.memberbar{display:none}
@media (max-width:820px){
  body.is-member .memberbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);background:var(--coal);border-top:1px solid rgba(var(--fg-rgb),.14);padding-bottom:env(safe-area-inset-bottom)}
  body.is-member{padding-bottom:62px}
  .memberbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;font-size:10.5px;letter-spacing:.03em;color:var(--gray-5)}
  .memberbar a.is-on{color:var(--amber)}
  .memberbar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
}
@media (max-width:820px){
  .member-cols{grid-template-columns:1fr}
  .skill-row{grid-template-columns:68px 1fr 24px}
}
@media (prefers-reduced-motion:reduce){
  .rec-row,.lib-card,.meter i,.quiz-opt,.brief-card{transition:none}
  .rec-row:hover,.lib-card:hover{transform:none}
}

/* ============================================================ ASSISTANT 1.2.0
   The chat surface. Everything derives from the channel tokens so it flips
   with the theme rather than being a dark island that survives only one of
   them. Elevation language is the hairline border already used by .mcard —
   no shadows here, because nothing on this page floats. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- the honest off state --- */
.ai-off{max-width:62ch;border:1px solid rgba(var(--fg-rgb),.13);border-radius:14px;padding:clamp(22px,3vw,34px);background:rgba(var(--lift-rgb),.02)}
.ai-off h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,30px);line-height:1.15;color:var(--cream);margin:0 0 .5em}
.ai-off p{color:var(--gray-4);line-height:1.65;margin:0 0 1em}
.ai-off .pill{margin-top:6px}
.ai-admin{margin:22px 0 18px;padding:18px;border-radius:10px;border:1px solid rgba(var(--fg-rgb),.13);background:rgba(var(--lift-rgb),.03)}
.ai-admin p{margin:0 0 10px}
.ai-admin p:last-child{margin-bottom:0}
.ai-code{margin:0 0 12px;padding:12px 14px;border-radius:8px;border:1px solid rgba(var(--fg-rgb),.14);background:rgba(var(--lift-rgb),.04);color:var(--cream);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;overflow-x:auto}

/* --- the conversation --- */
.chat{max-width:74ch}
.chat-about{margin:0 0 16px}
.chat-about a{color:var(--amber)}

.chat-log{display:flex;flex-direction:column;gap:14px;min-height:140px;margin-bottom:18px}
.chat-hello p{color:var(--gray-4);font-size:17px;line-height:1.65;margin:0;max-width:56ch}

.bubble{max-width:min(100%,60ch);padding:14px 18px;border-radius:14px;line-height:1.65}
.bubble p{margin:0 0 .75em}
.bubble p:last-child{margin-bottom:0}
.bubble ul{margin:.25em 0 .75em;padding-left:1.15em}
.bubble ul:last-child{margin-bottom:0}
.bubble li{margin:.3em 0}
.bubble li::marker{color:var(--amber)}
.bubble code{padding:.12em .35em;border-radius:4px;background:rgba(var(--fg-rgb),.1);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.bubble strong{color:var(--cream);font-weight:600}
.bubble a{color:var(--amber);text-underline-offset:3px}

.bubble.is-me{align-self:flex-end;background:var(--amber);color:var(--amber-ink);border-bottom-right-radius:5px}
.bubble.is-me strong,.bubble.is-me a{color:var(--amber-ink)}
.bubble.is-me code{background:rgba(0,0,0,.12)}

.bubble.is-ai{align-self:flex-start;border:1px solid rgba(var(--fg-rgb),.13);background:rgba(var(--lift-rgb),.02);color:var(--gray-4);border-bottom-left-radius:5px}
.bubble.is-err{border-color:rgba(255,123,107,.4)}
.bubble.is-pending{padding:18px}

/* Three dots, because a spinner would imply progress it cannot measure. */
.think{display:inline-flex;gap:5px;align-items:center}
.think i{width:6px;height:6px;border-radius:50%;background:var(--gray-5);animation:thinkPulse 1.25s infinite}
.think i:nth-child(2){animation-delay:.16s}
.think i:nth-child(3){animation-delay:.32s}
@keyframes thinkPulse{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* --- starters --- */
.chat-starters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.starter{border:1px solid rgba(var(--fg-rgb),.16);border-radius:999px;background:transparent;color:var(--gray-4);
  padding:9px 15px;font:inherit;font-size:14px;line-height:1.3;text-align:left;cursor:pointer;
  transition:border-color var(--quick) var(--ease-out),color var(--quick) var(--ease-out),background-color var(--quick) var(--ease-out)}
.starter:hover{border-color:rgba(var(--fg-rgb),.34);color:var(--cream);background:rgba(var(--lift-rgb),.04)}
.starter:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* --- composer --- */
.chat-form{display:flex;gap:10px;align-items:flex-end;border:1px solid rgba(var(--fg-rgb),.16);border-radius:14px;
  padding:10px 10px 10px 16px;background:rgba(var(--lift-rgb),.02);
  transition:border-color var(--quick) var(--ease-out)}
.chat-form:focus-within{border-color:rgba(var(--fg-rgb),.34)}
.chat-form textarea{flex:1;min-height:26px;max-height:220px;border:0;background:transparent;color:var(--cream);
  font:inherit;font-size:16px;line-height:1.6;padding:6px 0;resize:none;overflow-y:auto}
.chat-form textarea::placeholder{color:var(--bone-3-field)}
.chat-form textarea:focus{outline:none}
.chat-form textarea:disabled{opacity:.55}

.chat-send{position:relative;flex:0 0 auto;min-width:74px;min-height:44px;border:0;border-radius:10px;
  background:var(--amber);color:var(--amber-ink);font:inherit;font-weight:600;font-size:15px;cursor:pointer;
  transition:opacity var(--quick) var(--ease-out),transform var(--fast) var(--ease-out)}
.chat-send:hover:not(:disabled){opacity:.88}
.chat-send:active:not(:disabled){transform:scale(.97)}
.chat-send:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.chat-send:disabled{cursor:default}
.chat-send-dots{display:none;gap:4px;align-items:center;justify-content:center}
.chat-send-dots i{width:5px;height:5px;border-radius:50%;background:var(--amber-ink);animation:thinkPulse 1.25s infinite}
.chat-send-dots i:nth-child(2){animation-delay:.16s}
.chat-send-dots i:nth-child(3){animation-delay:.32s}
.is-asking .chat-send-label{display:none}
.is-asking .chat-send-dots{display:inline-flex}

.chat-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:12px 0 0}
.chat-clear{border:0;background:transparent;padding:0;color:var(--gray-5);font:inherit;font-size:inherit;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  transition:color var(--quick) var(--ease-out)}
.chat-clear:hover{color:var(--cream)}
.chat-clear:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.chat-note{margin:8px 0 0;max-width:56ch}
.chat-note a{color:var(--amber)}

@media (max-width:640px){
  .bubble{max-width:100%}
  .chat-starters{flex-direction:column;align-items:flex-start}
  .starter{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .think i,.chat-send-dots i{animation:none;opacity:.6}
  .starter,.chat-form,.chat-send,.chat-clear{transition:none}
  .chat-send:active:not(:disabled){transform:none}
}

/* ============================================================= WORKSHOP 1.3.0
   Recording a build, and the portfolio it produces. Same hairline elevation
   language as .mcard — nothing here floats, so nothing here has a shadow. */

/* --- the completion panel on a build --- */
.built-box{margin:36px 0 0;padding:clamp(20px,2.6vw,28px);border-radius:14px;
  border:1px solid rgba(var(--fg-rgb),.16);background:rgba(var(--lift-rgb),.02)}
.built-box.is-built{border-color:rgba(240,161,58,.34)}
.built-box h3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.2vw,24px);line-height:1.15;color:var(--cream);margin:0 0 .35em}
.built-box>.fine{margin:0 0 16px;line-height:1.6}
.built-box a{color:var(--amber)}

.built-form{display:flex;flex-direction:column;gap:10px}
.built-form input,.built-form textarea{width:100%;border:1px solid rgba(var(--fg-rgb),.16);border-radius:8px;
  background:rgba(var(--lift-rgb),.03);color:var(--cream);font:inherit;font-size:15px;line-height:1.55;
  padding:11px 13px;resize:vertical;
  transition:border-color var(--quick) var(--ease-out)}
.built-form input::placeholder,.built-form textarea::placeholder{color:var(--bone-3-field)}
.built-form input:focus,.built-form textarea:focus{outline:none;border-color:rgba(var(--fg-rgb),.4)}
.built-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:2px}

.built-save{border:0;border-radius:999px;background:var(--amber);color:var(--amber-ink);
  font:inherit;font-weight:600;font-size:15px;padding:11px 22px;min-height:44px;cursor:pointer;
  transition:opacity var(--quick) var(--ease-out),transform var(--fast) var(--ease-out)}
.built-save:hover:not(:disabled){opacity:.88}
.built-save:active:not(:disabled){transform:scale(.97)}
.built-save:focus-visible{outline:2px solid var(--cream);outline-offset:2px}

.built-done .built-link{margin:0 0 8px;word-break:break-all}
.built-done .built-link a{color:var(--amber);text-underline-offset:3px}
.built-done .built-note{margin:0 0 14px;color:var(--gray-4);line-height:1.65;
  padding-left:14px;border-left:2px solid rgba(240,161,58,.4)}
.built-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0}
.built-more{margin-left:auto;color:var(--amber)}

/* --- the +XP acknowledgement --- */
.xp-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);
  padding:11px 20px;border-radius:999px;background:var(--amber);color:var(--amber-ink);
  font-weight:600;font-size:15px;z-index:60;opacity:0;pointer-events:none;
  transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.xp-toast.is-in{opacity:1;transform:translate(-50%,0)}

/* --- the measured roadmap on Career OS --- */
.roadmap{margin-top:26px}
.roadmap-step{display:block;padding:15px 17px;margin-bottom:18px;border-radius:10px;
  border:1px solid rgba(240,161,58,.34);background:rgba(240,161,58,.05);
  transition:border-color var(--quick) var(--ease-out)}
.roadmap-step:hover{border-color:rgba(240,161,58,.6)}
.roadmap-step strong{display:block;color:var(--cream);font-size:17px;line-height:1.3;margin:4px 0 3px}
.roadmap-stats{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 18px}
.roadmap-stats span{color:var(--gray-5);font-size:13px}
.roadmap-stats strong{color:var(--cream);font-size:17px;margin-right:4px;font-variant-numeric:tabular-nums}

.roadmap-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:2px}
.roadmap-list li{display:grid;grid-template-columns:1fr auto 86px 42px;gap:12px;align-items:center;
  padding:10px 0;border-top:1px solid rgba(var(--fg-rgb),.09)}
.roadmap-list li:first-child{border-top:0}
.roadmap-list a{color:var(--gray-4);transition:color var(--quick) var(--ease-out)}
.roadmap-list a:hover{color:var(--cream)}
.roadmap-list li.is-done a{color:var(--cream)}
.roadmap-skill{color:var(--gray-5);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.roadmap-n{color:var(--gray-5);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.roadmap-list li.is-done .roadmap-n{color:var(--amber)}
.roadmap-sub{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gray-4);margin:24px 0 10px}
.roadmap-cert{margin:0 0 6px;line-height:1.6}
.roadmap-cert strong{color:var(--cream)}

/* --- the portfolio --- */
.folio{display:flex;flex-direction:column;gap:2px}
.folio-item{padding:24px 0;border-top:1px solid rgba(var(--fg-rgb),.12)}
.folio-item:first-child{border-top:0;padding-top:4px}
.folio-item h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.8vw,30px);
  line-height:1.15;letter-spacing:-.01em;margin:0 0 .25em}
.folio-item h2 a{color:var(--cream)}
.folio-item>header .fine{margin:0 0 14px}
.folio-brief{color:var(--gray-4);line-height:1.65;margin:0 0 12px;max-width:62ch}
.folio-note{margin:0 0 14px;padding-left:16px;border-left:2px solid var(--amber);
  color:var(--cream);line-height:1.7;font-size:17px;max-width:60ch}
.folio-link{margin:0}
.folio-link a{display:inline-flex;align-items:center;gap:8px;color:var(--amber);font-weight:600}
.folio-link .arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.folio-nolink{margin:0;max-width:60ch}
.folio-nolink a{color:var(--amber)}

@media (max-width:640px){
  .roadmap-list li{grid-template-columns:1fr 46px;grid-template-areas:"name n" "skill skill" "meter meter";gap:4px 10px}
  .roadmap-list li>a{grid-area:name}
  .roadmap-n{grid-area:n}
  .roadmap-skill{grid-area:skill}
  .roadmap-list .meter{grid-area:meter;margin-top:4px}
  .built-more{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .built-form input,.built-form textarea,.built-save,.roadmap-step,.roadmap-list a,.xp-toast{transition:none}
  .built-save:active:not(:disabled){transform:none}
  .xp-toast{transform:translate(-50%,0)}
}

/* =============================================== EVENTS + WORKBENCH 1.4.0 */

/* --- events --- */
.ev-list{display:flex;flex-direction:column;gap:2px}
.ev{display:grid;grid-template-columns:76px 1fr auto;gap:clamp(14px,2vw,26px);align-items:start;
  padding:22px 0;border-top:1px solid rgba(var(--fg-rgb),.12)}
.ev:first-child{border-top:0;padding-top:4px}
.ev.is-going{border-left:2px solid var(--amber);padding-left:16px;margin-left:-18px}
.ev-when{display:flex;flex-direction:column;padding-top:2px}
.ev-date{font-family:var(--serif);font-size:20px;line-height:1.1;color:var(--cream)}
.ev-time{color:var(--gray-5);font-size:13px;font-variant-numeric:tabular-nums}
.ev-kind{display:inline-block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber);margin-bottom:5px}
.ev-body h2{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.2vw,25px);
  line-height:1.2;color:var(--cream);margin:0 0 .3em}
.ev-blurb{color:var(--gray-4);line-height:1.6;margin:0 0 8px;max-width:58ch}
.ev-meta{margin:0}
.ev-act{display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right}

.ev-btn{border:1px solid rgba(var(--fg-rgb),.26);border-radius:999px;background:transparent;
  color:var(--cream);font:inherit;font-size:14px;font-weight:600;padding:10px 18px;min-height:44px;
  white-space:nowrap;cursor:pointer;
  transition:border-color var(--quick) var(--ease-out),background-color var(--quick) var(--ease-out),color var(--quick) var(--ease-out)}
.ev-btn:hover{border-color:rgba(var(--fg-rgb),.5)}
.ev-btn.is-on{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.ev-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ev-btn:disabled{opacity:.6;cursor:default}
.ev-join{display:inline-flex;align-items:center;gap:7px;color:var(--amber);font-weight:600;font-size:14px}
.ev-join .arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9}
.ev-soon{margin:0;max-width:16ch}
.chip.is-muted{opacity:.55}

.ev-h{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gray-4);margin:48px 0 14px}
.ev-past{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ev-past li{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:baseline;
  padding:11px 0;border-top:1px solid rgba(var(--fg-rgb),.09)}
.ev-past a{color:var(--gray-4)}
.ev-past a:hover{color:var(--cream)}

/* --- the Upcoming card on Member Home --- */
.ev-mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ev-mini li{display:flex;flex-direction:column;gap:2px}
.ev-mini a{color:var(--cream);line-height:1.4}
.ev-mini a:hover{color:var(--amber)}

/* --- workbench --- */
.wb-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.wb-tab{border:1px solid rgba(var(--fg-rgb),.16);border-radius:999px;padding:9px 17px;
  color:var(--gray-4);font-size:14px;font-weight:600;
  transition:border-color var(--quick) var(--ease-out),color var(--quick) var(--ease-out),background-color var(--quick) var(--ease-out)}
.wb-tab:hover{border-color:rgba(var(--fg-rgb),.34);color:var(--cream)}
.wb-tab.is-on{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.wb-tab:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.wb{max-width:74ch}
.wb-blurb{color:var(--gray-4);line-height:1.65;margin:0 0 22px;max-width:62ch}
.wb-log{display:flex;flex-direction:column;gap:14px;min-height:120px;margin-bottom:18px}
.wb-result .fine{margin:0 0 8px}
.wb-form{display:flex;flex-direction:column;gap:12px}
.wb-form textarea{width:100%;border:1px solid rgba(var(--fg-rgb),.16);border-radius:12px;
  background:rgba(var(--lift-rgb),.02);color:var(--cream);font:inherit;font-size:16px;line-height:1.6;
  padding:14px 16px;resize:vertical;
  transition:border-color var(--quick) var(--ease-out)}
.wb-form textarea::placeholder{color:var(--bone-3-field)}
.wb-form textarea:focus{outline:none;border-color:rgba(var(--fg-rgb),.4)}
.wb-form textarea:disabled{opacity:.55}
.wb-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.is-asking .wb-send-label{display:none}
.is-asking .chat-send-dots{display:inline-flex}

.wb-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0}
.wb-card{border:1px solid rgba(var(--fg-rgb),.13);border-radius:10px;padding:16px;
  background:rgba(var(--lift-rgb),.02)}
.wb-card h3{font-size:15px;font-weight:600;color:var(--cream);margin:0 0 6px}
.wb-card .fine{margin:0;line-height:1.55}

@media (max-width:700px){
  .ev{grid-template-columns:62px 1fr;grid-template-areas:"when body" "act act";gap:12px}
  .ev-when{grid-area:when}
  .ev-body{grid-area:body}
  .ev-act{grid-area:act;flex-direction:row;align-items:center;text-align:left;flex-wrap:wrap}
  .ev-past li{grid-template-columns:1fr;gap:2px}
  .wb-tabs{flex-direction:column}
  .wb-tab{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .ev-btn,.wb-tab,.wb-form textarea{transition:none}
}

/* A .pill inside prose is still a button, not a link. `.essay-body a` (0,1,1)
   and its light-theme twin (0,3,1) both outrank `.pill` (0,1,0), so the gated
   lesson CTA was rendering amber-on-amber at 1.53:1. Restate both pill colours
   at a specificity that wins, and keep the ghost variant on the accent -
   --black on a transparent ghost would be invisible on a dark ground. */
.essay-body .pill{color:var(--black)}
.essay-body .pill--ghost{color:var(--accent-text)}
:root[data-theme="light"] .essay-body .pill{color:var(--black)}
:root[data-theme="light"] .essay-body .pill--ghost{color:var(--accent-text)}