/*
 * davidorban.com — Liquid Silver design system (main.css)
 * Ported 1:1 from designs/theme.css (visual source of truth).
 * Tokens in :root/[data-theme] — variants override tokens only.
 * RTL-first: logical properties throughout, no rtl.css.
 * Fonts self-hosted (OFL): Fraunces, Hanken Grotesk, Noto Naskh Arabic.
 */

/* ---------- FONTS (self-hosted) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  font-optical-sizing: auto;
  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;
  font-optical-sizing: auto;
  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;
  font-optical-sizing: auto;
  src: url('../fonts/fraunces-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;
  font-optical-sizing: auto;
  src: url('../fonts/fraunces-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: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-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: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/noto-naskh-arabic-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* ---------- TOKENS ---------- */
:root{
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-ar:"Noto Naskh Arabic","Hanken Grotesk",serif;
  /* Container: 1440 desktop → 1280 laptop → fluid (padding-bound) on tablet/mobile. */
  --maxw:1440px; --measure:68ch;
  --step--1:clamp(.83rem,.78rem + .25vw,.95rem);
  --step-0:clamp(1rem,.95rem + .3vw,1.15rem);
  --step-1:clamp(1.3rem,1.1rem + .8vw,1.7rem);
  --step-2:clamp(1.9rem,1.5rem + 1.8vw,2.9rem);
  --step-3:clamp(2.8rem,2rem + 3.6vw,5.2rem);
  /* One hero size for every inner page (owner, 2026-07-14). Front page only keeps step-3. */
  --hero-title:var(--step-2); --hero-lede:var(--step-0);
  --radius:18px; --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --bg:#0c0e11; --bg-2:#121519; --surface:#161a20; --surface-2:#1c2127;
  --ink:#e9ebee; --ink-soft:#aeb4bd; --ink-faint:#747b86; /* a11y: 4.53:1 on bg (design #727983 was 4.40) */
  --line:rgba(255,255,255,.09);
  --accent:#54d8e4; --accent-ink:#06222a;
  --silver:linear-gradient(135deg,#3a4046 0%,#9aa1a9 18%,#e7ebee 38%,#aab1b9 56%,#5a626b 74%,#cfd5da 100%);
  --silver-soft:linear-gradient(135deg,#1a1e23,#2a3037 45%,#1a1e23);
  --glow:radial-gradient(60% 80% at 70% 20%,rgba(84,216,228,.18),transparent 60%);
}
[data-theme="light"]{
  --bg:#f3f4f1; --bg-2:#ebece8; --surface:#fbfbf9; --surface-2:#f1f2ee;
  --ink:#14171b; --ink-soft:#454d56; --ink-faint:#697078; /* a11y: 4.54:1 on bg (design #7a828c was 3.52) */
  --line:rgba(20,23,27,.12);
  --accent:#0a7b88; --accent-ink:#effdff; /* a11y: links 4.53:1, button text 4.80:1 (design #0c8d9c) */
  /* --silver is used as a text-fill (background-clip:text) on h1 em and .brand
     b — it must stay legible against the light --bg, not just look shiny. The
     old value only used pale/white stops (matching --bg), so the text
     effectively vanished in light mode. Rebuilt from the already a11y-checked
     ink/ink-soft/ink-faint tones above so every stop keeps real contrast. */
  --silver:linear-gradient(135deg,#14171b 0%,#454d56 20%,#697078 40%,#454d56 60%,#14171b 80%,#2e343b 100%);
  --silver-soft:linear-gradient(135deg,#e8eae6,#fbfbf9 45%,#e8eae6);
  --glow:radial-gradient(60% 80% at 70% 20%,rgba(12,141,156,.12),transparent 60%);
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  /* bug-log #18 class: .reveal must never stay hidden when its animation is disabled */
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- BASE ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[dir="rtl"] body{font-family:var(--font-ar)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.5;mix-blend-mode:soft-light;
  background-image: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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem)}
/* laptop: 1280 content width */
@media(max-width:1439.98px){:root{--maxw:1280px}}
/* tablet & mobile: fluid — the container is bounded by padding, not max-width */
@media(max-width:1279.98px){:root{--maxw:100%}}
a{color:inherit;text-decoration:none}
.accent{color:var(--accent)}

/* ---------- HEADER ---------- */
header.site{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1rem}
.brand{font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.brand b{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
nav.main{display:flex;gap:1.4rem;font-size:var(--step--1);font-weight:500}
nav.main a{color:var(--ink-soft);transition:color .25s}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink)}
.tools{display:flex;align-items:center;gap:.7rem}
.lang{display:flex;gap:.35rem;font-size:var(--step--1);color:var(--ink-faint)}
.lang b{color:var(--ink)}
.toggle{cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1rem;transition:.25s} /* a11y: 44px touch target */
.toggle:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:768px){nav.main,.lang{display:none}}

/* ---------- HERO (home) ---------- */
.hero{position:relative;padding-block:clamp(3.5rem,9vw,7rem) clamp(2.5rem,6vw,4.5rem);overflow:hidden}
.hero::before{content:"";position:absolute;inset-block-start:-20%;inset-inline-end:-10%;width:65vw;height:65vw;
  background:var(--silver);filter:blur(60px) saturate(1.1);opacity:.16;border-radius:50%;
  animation:float 18s var(--ease) infinite alternate}
.hero::after{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
@keyframes float{to{transform:translate3d(-6%,8%,0) rotate(20deg) scale(1.1)}}
.eyebrow{font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-block-end:1.2rem}
[dir="rtl"] .eyebrow{letter-spacing:normal}
h1{font-family:var(--font-display);font-weight:400;font-size:var(--step-3);line-height:1.02;letter-spacing:-.025em;max-width:16ch;font-optical-sizing:auto}
[dir="rtl"] h1{font-family:var(--font-ar);letter-spacing:normal}
h1 em{font-style:italic;background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin-block-start:1.6rem;max-width:54ch;font-size:var(--step-1);color:var(--ink-soft);line-height:1.4}
/* Inner-page heroes (work, contact, podcast, /blog/, 404 …) match the page-hero
   component, so every page below the front page opens at the same size. */
body:not(.home) .hero h1{font-size:var(--hero-title);line-height:1.08;letter-spacing:-.02em;max-width:20ch}
body:not(.home) .hero .lede{font-size:var(--hero-lede);max-width:56ch}
.reveal{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease) forwards}
.reveal:nth-child(1){animation-delay:.05s}.reveal:nth-child(2){animation-delay:.18s}
.reveal:nth-child(3){animation-delay:.32s}.reveal:nth-child(4){animation-delay:.46s}
@keyframes rise{to{opacity:1;transform:none}}
/* ---------- SECTIONS / CARDS ---------- */
section.block{padding-block:clamp(2.4rem,5vw,3.8rem)}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-block-end:2rem;border-block-start:1px solid var(--line);padding-block-start:1.6rem}
.head h1,.head h2{font-family:var(--font-display);font-weight:500;font-size:var(--step-2);letter-spacing:-.02em}
.head a{color:var(--ink-faint);font-size:var(--step--1);font-weight:600}
.head a:hover{color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:768px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:var(--surface);transition:.35s var(--ease)}
.card:hover{background:var(--surface-2);transform:translateY(-3px)}
.chip{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:99px;padding:.2rem .6rem;margin-inline-end:.4rem}
.card h4{font-family:var(--font-display);font-weight:500;font-size:1.35rem;line-height:1.15;margin-block:.9rem .5rem;letter-spacing:-.01em}
.card p{color:var(--ink-soft);font-size:var(--step--1)}
.card .meta{margin-block-start:1rem;font-size:.78rem;color:var(--ink-faint);display:flex;gap:.6rem;align-items:center}
.langflag{font-weight:700;color:var(--accent)}

/* ---------- BUTTONS / CTA ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--accent-ink);
  font-weight:700;font-size:var(--step-0);padding:.85rem 1.6rem;border-radius:99px;transition:.3s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
.cta{position:relative;border-radius:calc(var(--radius) + 6px);overflow:hidden;padding:clamp(2.2rem,5vw,3.6rem);
  background:var(--silver-soft);border:1px solid var(--line);text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:var(--silver);opacity:.1}
.cta h2{position:relative;font-family:var(--font-display);font-weight:400;font-size:var(--step-2);letter-spacing:-.02em;max-width:20ch;margin-inline:auto}
.cta .btn{margin-block-start:1.6rem}

/* ---------- TOPIC PILLS (shared: tags, filters, search) ---------- */
.topics{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:1.6rem}
.topic{font-size:var(--step--1);font-weight:600;border:1px solid var(--line);border-radius:99px;padding:.4rem .9rem;color:var(--ink-soft)}
/* ---------- FOOTER ---------- */
footer.site{border-block-start:1px solid var(--line);padding-block:2.6rem;margin-block-start:2rem;color:var(--ink-faint);font-size:var(--step--1)}
.fcols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem}
footer.site a{color:var(--ink-soft)}footer.site a:hover{color:var(--accent)}
.flinks{display:flex;gap:1.2rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}
/* ===========================================================================
   FULL-COVERAGE COMPONENTS — mobile nav drawer, forms, lead magnet,
   publications, search, 404, alerts, newsletter
   =========================================================================== */

/* Mobile nav drawer (injected by theme.js from nav.main on small screens) */
.navtoggle{display:none;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  width:44px;height:44px;border-radius:10px;font-size:1.2rem;line-height:1;place-items:center} /* a11y: 44px touch target */
@media(max-width:768px){.navtoggle{display:grid}}
.drawer{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--bg) 70%,transparent);
  backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.drawer.open{opacity:1;pointer-events:auto}
.drawer .panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(82vw,340px);background:var(--surface);
  border-inline-start:1px solid var(--line);padding:1.4rem;display:flex;flex-direction:column;gap:.4rem;
  transform:translateX(100%);transition:transform .35s var(--ease)}
[dir="rtl"] .drawer .panel{transform:translateX(-100%)}
.drawer.open .panel{transform:none}
.drawer .panel a{padding:.8rem .4rem;font-family:var(--font-display);font-size:1.3rem;border-block-end:1px solid var(--line);color:var(--ink)}
.drawer .closex{align-self:flex-end;font-size:1.6rem;cursor:pointer;color:var(--ink-soft);background:none;border:0}
.drawer .dlang{margin-block-start:1rem;color:var(--ink-faint);display:flex;gap:.6rem}

/* Forms */
.form{max-width:560px}
.field{margin-block-start:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:var(--step--1);font-weight:600;color:var(--ink-soft)}
.field input,.field textarea,.field select{font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;transition:.2s}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field.error input,.field.error textarea{border-color:#e2575b;box-shadow:0 0 0 3px rgba(226,87,91,.18)}
.field .err{color:#e2575b;font-size:.78rem;font-weight:600}
.field.ok input{border-color:var(--accent)}
.alert{border-radius:12px;padding:.9rem 1.1rem;font-size:var(--step--1);border:1px solid var(--line);margin-block-start:1rem}
.alert.success{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink)}
.alert.error{border-color:#e2575b;background:rgba(226,87,91,.1)}
.alert b{color:var(--accent)}

/* Newsletter block */
.newsletter{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem,4vw,2.4rem);
  background:var(--silver-soft);position:relative;overflow:hidden}
.newsletter::before{content:"";position:absolute;inset:0;background:var(--silver);opacity:.07}
.newsletter>*{position:relative}
.newsletter h3{font-family:var(--font-display);font-weight:500;font-size:var(--step-1)}
.newsletter form{display:flex;gap:.6rem;margin-block-start:1rem;flex-wrap:wrap}
.newsletter input{flex:1 1 240px;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:.8rem 1.2rem}

/* ---------- BOOK COVER (shared: publications, download) ---------- */
.bookcover{aspect-ratio:3/4;border-radius:14px;background:var(--silver);border:1px solid var(--line);position:relative;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.bookcover::after{content:"";position:absolute;inset:0;background:var(--silver-soft);mix-blend-mode:overlay}
.bookcover .spineline{position:absolute;inset-block:0;inset-inline-start:8%;width:2px;background:rgba(0,0,0,.15)}

/* ===========================================================================
   WORDPRESS INTEGRATION — core classes the_content()/WP markup needs.
   Appended to the ported design system (above) so liquid-silver renders real
   WP output (blocks, captions, galleries, comments, pagination, admin bar).
   =========================================================================== */
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.skip-link{position:absolute;inset-block-start:-60px;inset-inline-start:1rem;background:var(--accent);color:var(--accent-ink);
  padding:.6rem 1rem;border-radius:10px;z-index:100;transition:inset-block-start .2s}
.skip-link:focus{inset-block-start:1rem}
:where(a,button,input,textarea,select,.toggle):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.admin-bar header.site{top:32px}
@media(max-width:782px){body.admin-bar header.site{top:46px}}

/* the_content blocks */
.prose :where(ul,ol){margin-block-start:1.2rem;padding-inline-start:1.4rem}
.prose li{margin-block-start:.4rem}
.prose blockquote{font-family:var(--font-display);font-size:1.4rem;line-height:1.3;margin-block:2rem;
  padding-inline-start:1.2rem;border-inline-start:3px solid var(--accent)}
.prose img,.prose figure img{max-width:100%;height:auto;border-radius:var(--radius)}
.prose figcaption,.wp-caption-text{font-size:var(--step--1);color:var(--ink-faint);margin-block-start:.5rem;text-align:start}
.prose pre,.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prose pre{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;overflow-x:auto;font-size:.9em}
.prose :not(pre)>code{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:.1em .35em;font-size:.88em}
.prose table{width:100%;border-collapse:collapse;margin-block:1.6rem;font-size:var(--step--1)}
.prose th,.prose td{border:1px solid var(--line);padding:.6rem .8rem;text-align:start}
.alignwide{width:min(100%,calc(var(--measure) + 12rem));margin-inline:auto}
.alignfull{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}
.aligncenter{display:block;margin-inline:auto}
.alignleft{float:inline-start;margin-inline-end:1.4rem;margin-block-end:1rem}
.alignright{float:inline-end;margin-inline-start:1.4rem;margin-block-end:1rem}
.wp-block-image,.wp-caption{margin-block:1.8rem}
.sticky .card,.card.is-sticky{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}

/* pagination */
.pagination{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-block:3rem 1rem}
.pagination .page-numbers{border:1px solid var(--line);border-radius:10px;padding:.5rem .9rem;color:var(--ink-soft);transition:.25s}
.pagination .page-numbers:hover,.pagination .page-numbers.current{border-color:var(--accent);color:var(--accent)}
.pagination .page-numbers.current{background:color-mix(in srgb,var(--accent) 14%,transparent)}

/* post navigation (single) */
/* .postnav lives in single.css — it is only ever rendered on a single post. */

/* comments */
.comments{max-width:var(--measure);margin-inline:auto;margin-block-start:3rem}
.comments .commentlist{list-style:none;padding:0}
.comments .comment-body{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;margin-block:1rem;background:var(--surface)}
.comments .comment-author{font-weight:600}
.comment-form .field input,.comment-form textarea{width:100%}

/* WPML / language switcher fallbacks */
.wpml-ls-statics-shortcode_actions{display:flex;gap:.35rem;list-style:none;margin:0;padding:0}
.lang a:hover{color:var(--accent)}
.lang .current,.lang [aria-current]{color:var(--ink)}

/* ===========================================================================
   BUILD ADDITIONS — layout utilities the templates need (replacing the
   mockups' inline styles, per kit rule: no inline styles in templates).
   =========================================================================== */
.hero--listing{padding-block:clamp(2.5rem,6vw,4rem) 1rem}
.hero-actions{margin-block-start:2rem;display:flex;gap:.8rem;flex-wrap:wrap}
.error-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-block-end:1.6rem}
.figure--lead{max-width:var(--measure)}
.figure--lead img{width:100%;height:auto;display:block}
.cta .cta-lede{position:relative;color:var(--ink-soft);max-width:48ch;margin:1rem auto 0}
.bookcover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagination ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0;padding:0}
.content-none{padding-block:2rem;color:var(--ink-soft)}
.content-none-actions{margin-block:1.2rem}
.breadcrumbs{font-size:var(--step--1);color:var(--ink-faint);margin-block-end:1rem}
.breadcrumbs a{color:var(--ink-soft)}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs .sep{opacity:.5;margin-inline:.4rem}

/* ===========================================================================
   FOUNDATION REFINEMENT — nav dropdowns, language dropdown, footer columns.
   Same tokens, richer chrome. (UI/UX refinement phase, EN-first.)
   =========================================================================== */

/* --- primary nav: real list structure with 2nd-level dropdown panels --- */
nav.main ul{list-style:none;margin:0;padding:0}
nav.main>ul.menu{display:flex;gap:1.3rem;font-size:var(--step--1);font-weight:500;align-items:center}
nav.main .menu>li{position:relative;display:flex;align-items:center;gap:.1rem}
nav.main a{padding-block:.4rem;display:inline-block}
nav.main .current-menu-item>a,nav.main .current-menu-ancestor>a{color:var(--ink);position:relative}
nav.main .current-menu-item>a::after{content:"";position:absolute;inset-inline:0;inset-block-end:-3px;height:2px;border-radius:2px;background:var(--accent)}
.subtoggle{cursor:pointer;border:0;background:none;color:var(--ink-faint);width:26px;height:44px;display:grid;place-items:center;padding:0}
.subtoggle:hover{color:var(--accent)}
.subtoggle .icon{transition:transform .25s var(--ease)}
li.open>.subtoggle .icon{transform:rotate(180deg)}
nav.main .sub-menu{position:absolute;inset-inline-start:-.9rem;inset-block-start:calc(100% + .5rem);min-width:230px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.45rem;z-index:30;display:none;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.45)}
nav.main li.open>.sub-menu,nav.main li:focus-within>.sub-menu{display:block}
@media(hover:hover){nav.main .menu>li:hover>.sub-menu{display:block}}
nav.main .sub-menu a{display:block;padding:.55rem .85rem;border-radius:9px;color:var(--ink-soft)}
nav.main .sub-menu a:hover{background:var(--surface-2);color:var(--ink)}

/* --- language dropdown (native <details>) --- */
details.lang{position:relative}
details.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:.4rem .85rem;min-height:36px;
  font-size:var(--step--1);font-weight:700;color:var(--ink-soft);transition:.25s}
details.lang summary::-webkit-details-marker{display:none}
details.lang summary:hover,details.lang[open] summary{color:var(--accent);border-color:var(--accent)}
.lang__panel{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + .5rem);min-width:190px;margin:0;padding:.4rem;
  display:flex;flex-direction:column;gap:.1rem;
  list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;z-index:31;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.45)}
.lang__panel li{display:block}
.lang__panel a{display:flex;gap:.6rem;align-items:center;padding:.5rem .8rem;border-radius:9px;color:var(--ink-soft)}
.lang__panel a:hover{background:var(--surface-2)}
.lang__panel b{color:var(--ink);font-size:var(--step--1)}
.lang__panel span{font-size:.78rem;color:var(--ink-faint);margin-inline-start:auto}
.lang__flag{width:20px;height:14px;flex:none;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.lang--static{display:flex;gap:.35rem;font-size:var(--step--1);color:var(--ink-faint)}
.lang--static b{color:var(--ink)}

/* nav collapses to the drawer below 1080 (9 top-level items need room) */
@media(max-width:1024px){nav.main{display:none}.navtoggle{display:grid}}
/* between laptop and desktop the 9-item nav is tight: shrink its gap, not the layout */
@media(min-width:1025px) and (max-width:1200px){nav.main>ul.menu{gap:.95rem}.bar{gap:1rem}}
@media(max-width:640px){details.lang{display:none}}
.drawer .panel a.drawer-sub{padding-inline-start:1.6rem;font-size:1.1rem;color:var(--ink-soft)}

/* --- footer columns --- */
footer.site{padding-block:0;margin-block-start:2rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:2.2rem;padding-block:3rem 2.2rem}
@media(max-width:1024px){.foot-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr}}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot-h{font-family:var(--font-display);font-weight:500;font-size:1.02rem;color:var(--ink);margin-block-end:.9rem}
.foot-col--brand .brand{font-size:1.25rem}
.foot-mission{margin-block-start:.9rem;max-width:36ch;color:var(--ink-faint);line-height:1.55}
.foot-mail{display:inline-flex;gap:.5rem;align-items:center;margin-block-start:1.1rem;color:var(--ink-soft);min-height:32px}
.foot-mail:hover{color:var(--accent)}
.foot-social a{display:inline-flex;gap:.6rem;align-items:center;min-height:34px;color:var(--ink-soft)}
.foot-social a:hover{color:var(--accent)}
/* Connect column reads like the other footer menus: plain text links, tight rhythm */
.foot-col ul{gap:.5rem}
.foot-col a{color:var(--ink-soft);font-size:var(--step--1);transition:color .2s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border-block-start:1px solid var(--line);padding-block:1.4rem;font-size:var(--step--1);color:var(--ink-faint)}

/* --- lite embeds (YouTube / Spotify — load on click only) --- */
.embed{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/9;background:var(--silver-soft)}
.embed--spotify-show{aspect-ratio:auto;height:232px}
.embed__facade{position:absolute;inset:0;display:grid;place-items:center}
.embed__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .5s var(--ease)}
.embed__facade:hover .embed__poster{transform:scale(1.03)}
.embed__play{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 92%,#000);color:var(--accent-ink);transition:transform .3s var(--ease)}
.embed__facade:hover .embed__play{transform:scale(1.08)}
.embed__title{position:absolute;inset-inline:0;inset-block-end:0;z-index:2;padding:1rem 1.2rem;color:#fff;
  font-weight:600;font-size:var(--step--1);background:linear-gradient(to top,rgba(0,0,0,.65),transparent);text-align:start}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- contact routes / follow platforms / link cards (refinement) --- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:1024px){.routes{grid-template-columns:1fr}}
.route{border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;background:var(--surface);
  display:block;transition:.35s var(--ease)}
.route:hover{background:var(--surface-2);transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.route .icon{color:var(--accent)}
.route__title{font-family:var(--font-display);font-weight:500;font-size:1.25rem;margin-block:.8rem .4rem}
.route p{color:var(--ink-soft);font-size:var(--step--1)}
.route__value{display:inline-block;margin-block-start:.9rem;font-weight:600;color:var(--accent);font-size:var(--step--1)}
.route__secondary{display:block;margin-block-start:.5rem;color:var(--ink-faint);font-size:var(--step--2)}
.route__secondary:hover{color:var(--ink-soft);text-decoration:underline}
.platforms{display:flex;flex-wrap:wrap;gap:.7rem}
.platform{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.6rem 1.1rem;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-weight:600;font-size:var(--step--1);transition:.25s}
.platform:hover{border-color:var(--accent);color:var(--accent)}
.card--link{display:block}
.card--link .icon{color:var(--accent)}
.card__title{font-family:var(--font-display);font-weight:500;font-size:1.25rem;margin-block:.7rem .4rem;letter-spacing:-.01em}
.portrait--wide{aspect-ratio:4/3}
.avkit-prose img{border-radius:12px}
.guest-prose iframe{width:100%;min-height:520px;border:1px solid var(--line);border-radius:var(--radius)}

/* ===========================================================================
   ROUND 2 — logo, motion system, carousel, hover craft.
   Motion is opt-in via the `js` class (JS adds it), so nothing is ever hidden
   without JavaScript. Everything below is disabled under reduced-motion.
   =========================================================================== */

/* --- brand logo (white artwork; inverts on the light theme) --- */
.brand__logo{display:block;height:34px;width:auto;transition:opacity .25s var(--ease),transform .35s var(--ease)}
[data-theme="light"] .brand__logo{filter:invert(1)}
.brand:hover .brand__logo{opacity:.82;transform:translateY(-1px)}
.foot-col--brand .brand__logo{height:40px}
@media(max-width:640px){.brand__logo{height:28px}}

/* --- scroll reveal: JS adds .js to <html>, so no-JS keeps content visible --- */
.js [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
/* children stagger inside a revealed section */
.js [data-reveal] .card,.js [data-reveal] .showcard,.js [data-reveal] .split__body,
.js [data-reveal] .split__media,.js [data-reveal] .story__portrait,.js [data-reveal] .story__body{
  opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js [data-reveal].in .card,.js [data-reveal].in .showcard,.js [data-reveal].in .split__body,
.js [data-reveal].in .split__media,.js [data-reveal].in .story__portrait,.js [data-reveal].in .story__body{
  opacity:1;transform:none}
.js [data-reveal].in .card:nth-child(2),.js [data-reveal].in .showcard:nth-child(2){transition-delay:.08s}
.js [data-reveal].in .card:nth-child(3),.js [data-reveal].in .showcard:nth-child(3){transition-delay:.16s}
.js [data-reveal].in .card:nth-child(4),.js [data-reveal].in .showcard:nth-child(4){transition-delay:.24s}
.js [data-reveal].in .split__body{transition-delay:.1s}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal] .card,.js [data-reveal] .showcard,
  .js [data-reveal] .split__body,.js [data-reveal] .split__media,
  .js [data-reveal] .story__portrait,.js [data-reveal] .story__body{
    opacity:1!important;transform:none!important;transition:none!important}
}

/* --- hover craft: cards lift with a silver sheen sweep --- */
.card{position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;background:var(--silver);opacity:0;mix-blend-mode:overlay;
  transition:opacity .45s var(--ease);pointer-events:none}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
  box-shadow:0 22px 44px -26px rgba(0,0,0,.55)}
.card:hover::after{opacity:.1}
.card--tight{padding:1.1rem 1.2rem}
.card--tight p{font-size:var(--step--1);color:var(--ink-soft)}
.card h4 a{background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease)}
.card:hover h4 a{background-size:100% 1px}
.btn{will-change:transform}
.btn:active{transform:translateY(0) scale(.98)}
.door{will-change:transform}

/* --- two-column split section (text | media) --- */
.split{display:grid;grid-template-columns:1.15fr .95fr;gap:clamp(1.4rem,3.5vw,3rem);align-items:center}
.split--reverse{grid-template-columns:.95fr 1.15fr}
@media(max-width:1024px){.split,.split--reverse{grid-template-columns:1fr}
  .split--reverse .split__media{order:-1}}
.split__title{font-family:var(--font-display);font-weight:500;font-size:var(--step-1);letter-spacing:-.01em;
  line-height:1.25;max-width:24ch}
.split__body p{color:var(--ink-soft);margin-block-start:1rem;max-width:56ch}
.split__body .pullquote{margin-block:1.4rem}
.split__body .hero-actions{margin-block-start:1.5rem}

/* --- carousel --- */
.carousel{position:relative;margin-block-start:.5rem}
.carousel{--slides:3;--carousel-gap:1.3rem}
.carousel__viewport{display:grid;grid-auto-flow:column;gap:var(--carousel-gap);
  grid-auto-columns:calc((100% - (var(--slides) - 1) * var(--carousel-gap)) / var(--slides));
  overflow-x:auto;scroll-snap-type:inline mandatory;scroll-behavior:smooth;
  padding-block:.4rem 1.2rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
@media(max-width:1024px){.carousel{--slides:2}}
@media(max-width:640px){.carousel{--slides:1.12}}
.carousel__viewport>*{scroll-snap-align:start}
.carousel__viewport::-webkit-scrollbar{height:6px}
.carousel__viewport::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.carousel__viewport:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius)}
.carousel__nav{display:flex;gap:.5rem;justify-content:flex-end;margin-block-start:.2rem}
.carousel__btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);transition:.25s var(--ease)}
.carousel__btn:hover:not(:disabled){color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.carousel__btn:disabled{opacity:.35;cursor:default}
.carousel__btn .icon{transform:rotate(90deg)}
.carousel__btn[data-carousel-next] .icon{transform:rotate(-90deg)}
[dir="rtl"] .carousel__btn .icon{transform:rotate(-90deg)}
[dir="rtl"] .carousel__btn[data-carousel-next] .icon{transform:rotate(90deg)}

/* --- podcast show cards --- */
.showcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem;background:var(--surface);transition:.4s var(--ease);position:relative;overflow:hidden}
.showcard:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  box-shadow:0 26px 50px -28px rgba(0,0,0,.6)}
.showcard__cover{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/10;
  background:var(--silver-soft);margin-block-end:.9rem}
.showcard__cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.showcard:hover .showcard__cover img{transform:scale(1.05)}
.showcard__play{position:absolute;inset-block-end:.7rem;inset-inline-end:.7rem;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 92%,#000);color:var(--accent-ink);
  transform:translateY(8px);opacity:0;transition:.35s var(--ease)}
.showcard:hover .showcard__play{transform:none;opacity:1}
.showcard__title{font-family:var(--font-display);font-weight:500;font-size:1.25rem;letter-spacing:-.01em;
  margin-block:.6rem .35rem;display:block}
.showcard__desc{color:var(--ink-soft);font-size:var(--step--1)}

/* --- image-led post cards (modern grid look) --- */
.card--post{padding:0;display:flex;flex-direction:column}
.card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--silver-soft);
  border-block-end:1px solid var(--line)}
.card__media img{width:100%;height:100%;object-fit:contain;display:block;transition:filter .5s var(--ease)}
.card--post:hover .card__media img{filter:brightness(1.06)}
.card__media--empty::after{content:"";position:absolute;inset:0;background:var(--silver);opacity:.28}
.card__chip{position:absolute;inset-block-start:.8rem;inset-inline-start:.8rem;z-index:2;
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  border-radius:99px;padding:.28rem .7rem}
.card__body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.card__body h4{margin-block:0 .5rem}
.card__body p{flex:1}
.card--post .meta{margin-block-start:1rem;flex-wrap:wrap}
.card--post .meta .langflag{margin-inline-start:auto}


/* --- text-only post cards (carousel with media hidden) --- */
.card--post:not(:has(.card__media)) .card__body{padding:1.5rem 1.5rem 1.4rem;position:relative}
.card--post:not(:has(.card__media)) .card__body::before{content:"";position:absolute;inset-block-start:0;
  inset-inline-start:0;width:44px;height:2px;background:var(--accent);opacity:.85;transition:width .45s var(--ease)}
.card--post:not(:has(.card__media)):hover .card__body::before{width:88px}
.card--post:not(:has(.card__media)) h4{font-size:1.4rem;line-height:1.2;margin-block-start:.9rem}
.card--post:not(:has(.card__media)) p{margin-block-start:.6rem}


/* Continuous auto-scroll rails: snap would fight the rAF drift, so it's off,
   and the cursor hints that the rail is draggable/scrollable. */
.carousel__viewport--auto{scroll-snap-type:none;scroll-behavior:auto;cursor:grab}
.carousel__viewport--auto:active{cursor:grabbing}

/* --- end CTA: contact + Patreon, one section, two columns (sitewide band) --- */
.endcta{display:grid;grid-template-columns:1.35fr .85fr;gap:0;
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);overflow:hidden;position:relative}
@media(max-width:1024px){.endcta{grid-template-columns:1fr}}
.endcta__col{padding:clamp(1.8rem,4vw,3rem);position:relative}
.endcta__col:first-child{background:var(--silver-soft)}
.endcta__col:first-child::before{content:"";position:absolute;inset:0;background:var(--silver);opacity:.08;pointer-events:none}
.endcta__col>*{position:relative}
.endcta__col--support{background:var(--surface);border-inline-start:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative}
.endcta__col--support::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:var(--accent);opacity:.9}
.endcta__col:first-child .eyebrow{color:var(--accent)}
@media(max-width:1024px){.endcta__col--support{border-inline-start:0;border-block-start:1px solid var(--line)}}
.endcta__col--support .icon{color:var(--accent)}
.endcta__title{font-family:var(--font-display);font-weight:400;font-size:var(--step-2);letter-spacing:-.02em;
  line-height:1.15;margin-block:.6rem .9rem;max-width:20ch}
.endcta__subtitle{font-family:var(--font-display);font-weight:500;font-size:1.35rem;margin-block:.8rem .5rem}
.endcta p{color:var(--ink-soft);max-width:46ch;line-height:1.65}
.endcta .hero-actions{margin-block-start:1.6rem}
.endcta__col--support .btn{margin-block-start:1.4rem}

/* Smaller lede variant (intro paragraphs, story bands) */
.lede--sm{font-size:var(--step-0);margin-block-start:1.1rem}