/* Clearing: shared layer: fonts, design tokens, scoped reset, buttons, site header, mobile menu, site footer.
   Loaded on the homepage and on every skinned page. It must not restyle anything outside its own containers
   (.site-head, .menu-panel, .site-foot, .clearing-main, .vdlg): the document also holds third-party markup
   (cookie banner, #wpadminbar, theme content). Element resets therefore sit inside :where(), which also keeps
   their specificity at zero so every component rule wins over them. */

/* ---------- fonts (self-hosted; files from tools/fetch_fonts.py) */
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-roman-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-roman-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-roman-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-roman-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- tokens */
:root{
  --c-night:#0b120d; --c-moss:#0c130e; --c-moss-2:#16211a; --c-bone:#f5efe2; --c-cream:#efe7d6; --c-gold:#e3a73f; --c-ink:#1b2a20;
  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* live palette: night by default; the homepage script moves --bg with the scroll position */
  --bg:rgb(11,18,13); --bg-rgb:11,18,13;
  --fg:#efe7d6; --fg-rgb:239,231,214;
  --fg-soft:rgba(239,231,214,.8);
  --line:rgba(239,231,214,.15);
  --surface:rgba(239,231,214,.035);
  --accent-text:#ebb85a;
  --btn-bg:#e3a73f; --btn-fg:#14201a; --btn-dot:#14201a;
  --gut:clamp(20px,4.6vw,72px);
  --max:1380px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* daylight palette: set on <html> by the homepage script, and fixed on the --day header/footer variants */
html.tone-light,.site-head--day,.site-foot--day{
  --fg:#1b2a20; --fg-rgb:27,42,32;
  --fg-soft:rgba(27,42,32,.8);
  --line:rgba(27,42,32,.15);
  --surface:rgba(255,251,242,.55);
  --accent-text:#7a4a0c;
  --btn-bg:#1b2a20; --btn-fg:#f7f1e4;
  --btn-dot:radial-gradient(circle at 35% 35%,#fff4d6,#f0b54c 60%,#c9831f);
}
.site-head--day,.site-foot--day{--bg:#f5efe2;--bg-rgb:245,239,226}

/* ---------- scoped reset */
:where(.site-head,.menu-panel,.site-foot,.clearing-main,.vdlg),
:where(.site-head,.menu-panel,.site-foot,.clearing-main,.vdlg) *,
:where(.site-head,.menu-panel,.site-foot,.clearing-main,.vdlg)::before,
:where(.site-head,.menu-panel,.site-foot,.clearing-main,.vdlg)::after,
:where(.site-head,.menu-panel,.site-foot,.clearing-main,.vdlg) *::before,
:where(.site-head,.menu-panel,.site-foot,.clearing-main,.vdlg) *::after{box-sizing:border-box}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) :where(img){max-width:100%;height:auto;display:block}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) :where(picture){display:contents}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) :where(a){color:inherit}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) :where(h1,h2,h3,h4){margin:0;font-weight:400}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) :where(p){margin:0 0 1em;max-width:68ch}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) :where(ul,ol){margin:0;padding:0}
:where(.site-head,.menu-panel,.site-foot,.clearing-main,.vdlg) :where(:focus-visible){outline:2px solid var(--fg);outline-offset:4px;border-radius:6px}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.site-head,.menu-panel,.site-foot{font:400 18px/1.65 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* the header and footer also sit inside theme pages: keep the theme's link colours out of them */
.site-head a:not(.btn),.menu-panel a:not(.btn),.site-foot a:not(.btn){color:inherit}

/* ---------- layout primitive + buttons (shared with the homepage sections) */
:where(.site-head,.menu-panel,.site-foot,.clearing-main) .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) .btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:14px 26px 14px 22px;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:600 16px/1.2 var(--font-body);letter-spacing:.005em;text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background-color .45s,color .45s;box-shadow:0 0 0 0 rgba(227,167,63,0)}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) .btn::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--btn-dot)}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) .btn:hover{transform:translateY(-2px);box-shadow:0 16px 44px -14px rgba(227,167,63,.8)}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) .btn:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.site-head .btn:is(:link,:visited,:hover,:focus,:active),.menu-panel .btn:is(:link,:visited,:hover,:focus,:active),.site-foot .btn:is(:link,:visited,:hover,:focus,:active){color:var(--btn-fg);text-decoration:none}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) .client{font-weight:500;font-size:16px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:rgba(var(--fg-rgb),.4);transition:text-decoration-color .3s}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) .client:hover{text-decoration-color:currentColor}
:where(.site-head,.menu-panel,.site-foot,.clearing-main) .fine{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);margin:22px 0 0}

/* ---------- skip link (homepage template) */
.clearing .skip{position:absolute;left:16px;top:-80px;z-index:300;background:var(--c-gold);color:#14201a;padding:10px 18px;border-radius:999px;font:600 16px/1.2 var(--font-body);text-decoration:none}
.clearing .skip:focus{top:12px}

/* ---------- header */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:24px;padding:20px var(--gut);border-bottom:1px solid transparent;transition:background-color .45s,border-color .45s,padding .45s,color .45s;color:var(--fg)}
.site-head.scrolled{background:rgba(var(--bg-rgb),.97);border-color:var(--line);padding-block:12px}
.admin-bar .site-head{top:32px}
@media (max-width:782px){.admin-bar .site-head{top:46px}}
/* day variant: a static light header for normal pages */
.site-head.site-head--day{position:sticky;background:var(--c-bone);border-bottom-color:var(--line);padding-block:14px}
.site-head .brand,.menu-panel .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:23px;font-weight:380;line-height:1.65;letter-spacing:-.015em;text-decoration:none;white-space:nowrap}
.site-head .brand i,.menu-panel .brand i{font-weight:300;font-variation-settings:"SOFT" 100,"WONK" 1}
.site-head .brand svg,.menu-panel .brand svg{width:32px;height:32px;flex:none}
.site-head .brand .brand-mark,.menu-panel .brand .brand-mark{width:40px;height:40px;flex:none;display:block}
.site-head .nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.55vw,26px);font-size:15px}
.site-head .nav a{text-decoration:none;position:relative;padding:6px 0;opacity:.88;transition:opacity .3s}
.site-head .nav a:hover,.site-head--day .nav a[aria-current]{opacity:1}
.site-head .nav a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.site-head .nav a:hover::after,.site-head--day .nav a[aria-current]::after{transform:scaleX(1)}
.site-head .bars{opacity:.4;margin-right:.3em;letter-spacing:-.08em}
.site-head .btn{min-height:44px;padding:10px 18px 10px 15px;font-size:14.5px}
.site-head .menu-btn,.site-head .menu-btn:hover,.site-head .menu-btn:focus{background:none;color:inherit;box-shadow:none}
.site-head .menu-btn{display:none;margin-left:auto;align-items:center;gap:12px;border:1px solid rgba(var(--fg-rgb),.3);border-radius:999px;padding:10px 18px;font:600 14px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.site-head .menu-btn span{display:grid;gap:5px}
.site-head .menu-btn span i{display:block;width:18px;height:1.5px;background:currentColor}
@media (max-width:1260px){.site-head .nav,.site-head>.btn{display:none}.site-head .menu-btn{display:inline-flex}}

/* ---------- mobile menu (always the night palette) */
.menu-panel{position:fixed;inset:0;z-index:80;background:var(--c-moss);color:#efe7d6;--fg:#efe7d6;--fg-rgb:239,231,214;--btn-bg:#e3a73f;--btn-fg:#14201a;--btn-dot:#14201a;display:flex;flex-direction:column;padding:22px var(--gut) 40px;overflow-y:auto;opacity:0;transition:opacity .4s var(--ease)}
.menu-panel::before{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;background:radial-gradient(closest-side,rgba(227,150,63,.35),rgba(227,150,63,0));pointer-events:none}
.menu-panel[hidden]{display:none}
.menu-panel.open{opacity:1}
.admin-bar .menu-panel{top:32px}
@media (max-width:782px){.admin-bar .menu-panel{top:46px}}
.menu-panel .menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6vh}
.menu-panel .menu-close,.menu-panel .menu-close:hover,.menu-panel .menu-close:focus{background:none;color:inherit;box-shadow:none}
.menu-panel .menu-close{border:1px solid rgba(239,231,214,.3);border-radius:999px;padding:10px 18px;font:600 14px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.menu-panel .menu-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;position:relative}
.menu-panel .menu-list a{font-family:var(--font-display);font-weight:320;font-size:clamp(2rem,8vw,3.4rem);line-height:1.15;text-decoration:none;letter-spacing:-.02em}
.menu-panel .menu-list a:hover{color:#f0c878}
.menu-panel .menu-foot{margin-top:auto;padding-top:40px;display:grid;gap:18px;position:relative}

/* ---------- footer */
.site-foot{position:relative;z-index:1;padding:clamp(56px,6vw,96px) 0 0;overflow-x:clip;color:var(--fg)}
.site-foot.site-foot--day{background:var(--c-bone)}
.site-foot .foot-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end;padding-bottom:56px;border-bottom:1px solid var(--line)}
.site-foot .foot-big{font-family:var(--font-display);font-weight:300;font-size:clamp(2.1rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.022em;text-decoration:none;display:inline-block;text-wrap:balance}
.site-foot .foot-big .arr{display:inline-block;color:var(--accent-text);transition:transform .5s var(--ease)}
.site-foot .foot-big:hover .arr{transform:translateX(10px)}
.site-foot .foot-top .fine{margin-top:18px}
.site-foot .foot-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.site-foot .foot-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px 40px;padding:40px 0}
.site-foot .foot-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:16px}
.site-foot .foot-nav a{text-decoration:none;opacity:.86}
.site-foot .foot-nav a:hover,.site-foot--day .foot-nav a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:5px}
.site-foot .foot-post{max-width:38ch;font-family:var(--font-display);font-style:italic;font-weight:320;font-size:1.15rem;line-height:1.35;text-decoration:none;font-variation-settings:"SOFT" 100,"WONK" 1}
.site-foot .foot-post:hover{text-decoration:underline;text-underline-offset:5px}
.site-foot .copy{font-size:14px;color:var(--fg-soft);margin:0}
.site-foot .foot-mark{font-family:var(--font-display);font-weight:300;font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:10.8vw;line-height:.82;letter-spacing:-.045em;white-space:nowrap;text-align:center;margin-top:28px;padding-bottom:1vw;background:linear-gradient(180deg,rgba(212,150,48,.6),rgba(212,150,48,.14) 92%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
@media (max-width:900px){.site-foot .foot-top{grid-template-columns:1fr}}

/* ---------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .site-head,.menu-panel,.site-head .nav a::after,.site-foot .foot-big .arr,
  :where(.site-head,.menu-panel,.site-foot,.clearing-main) .btn{transition:none}
}

/* footer directory: counseling topics and cities (added 5 Oct 2026) */
.site-foot .foot-dir{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 48px;padding:36px 0;border-bottom:1px solid var(--line)}
.site-foot .foot-dir__h{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin:0 0 12px}
.site-foot .foot-dir ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.site-foot .foot-dir a{text-decoration:none;font-size:.95rem}
.site-foot .foot-dir a:is(:hover,:focus-visible),.site-foot .foot-dir a[aria-current]{text-decoration:underline;text-underline-offset:4px}
@media (max-width:720px){.site-foot .foot-dir{grid-template-columns:minmax(0,1fr)}}

/* cookie banner in the site colours (6 Oct 2026) */
#cookie-notice .cn-button:not(.cn-button-custom){background:#e3a73f!important;color:#14201a!important;border-radius:999px!important;font-weight:600}
#cookie-notice{font-family:var(--font-body,inherit)}
#cookie-notice .cn-close-icon::before,#cookie-notice .cn-close-icon::after{background-color:#f5efe2!important}