/*
Theme Name:   MRAHAMAN.COM — Blocksy Child
Theme URI:    https://mrahaman.com/
Description:  Custom child theme for mrahaman.com (Mohammad Habibur Rahaman — Researcher & Advisory). Implements the MRAHAMAN.COM WordPress Build Specification: full navy/emerald/gold token system, Newsreader + Inter + Merriweather typography, custom header/footer, publication/project/research post types, and eight fully built page templates. Mobile-first, WCAG AA, PageSpeed-oriented.
Author:       Mohammad Habibur Rahaman
Author URI:   https://mrahaman.com/
Template:     blocksy
Version:      1.1.1
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  mrahaman
*/

/* =====================================================================
   §2 COLOUR SYSTEM  ·  §3 TYPOGRAPHY  ·  §4 SPACING  ·  §5 LAYOUT
   §6 RADII / SHADOWS / MOTION
   All values are literal from the build specification. Do not round.
   ===================================================================== */

:root{
  /* 2.2 navy ramp */
  --navy-900:#062637; --navy-800:#082F47; --navy-700:#0B3C5D; --navy-600:#14547D;
  --navy-500:#2A6E99; --navy-200:#AFC8D8; --navy-100:#DCE8F0; --navy-050:#EEF4F8;
  /* 2.3 emerald ramp */
  --emerald-800:#075243; --emerald-700:#0A6754; --emerald-600:#0E7C66;
  --emerald-500:#1A9B81; --emerald-200:#A9DACE; --emerald-050:#E8F5F1;
  /* 2.4 gold ramp */
  --gold-700:#9A742A; --gold-600:#B08733; --gold-500:#C89B3C; --gold-300:#E0C384; --gold-100:#F6ECD6;
  /* 2.5 neutrals */
  --gray-900:#111827; --gray-800:#1F2937; --gray-700:#374151; --gray-600:#4B5563;
  --gray-500:#6B7280; --gray-400:#9CA3AF; --gray-300:#D1D5DB; --gray-200:#E5E7EB;
  --gray-100:#F1F4F7; --gray-050:#F7F9FB; --white:#FFFFFF;

  /* 2.1 brand roles */
  --primary:var(--navy-700); --primary-hover:var(--navy-800); --primary-active:var(--navy-900);
  --secondary:var(--emerald-600); --secondary-hover:var(--emerald-700);
  --accent:var(--gold-500); --accent-hover:var(--gold-600);

  /* 2.6 semantic */
  --success:#198754; --success-tint:#E7F3EC;
  --danger:#DC3545;  --danger-tint:#FBE9EB;
  --warning:#B08733; --warning-tint:#F6ECD6;
  --info:#14547D;    --info-tint:#EEF4F8;

  /* 2.7 applied roles */
  --bg-page:var(--white);
  --bg-alt:var(--gray-050);
  --bg-card:var(--white);
  --bg-dark:var(--navy-700);
  --bg-deep:var(--navy-900);
  --tint-navy:var(--navy-050);
  --tint-emerald:var(--emerald-050);
  --tint-gold:var(--gold-100);
  --text-heading:var(--navy-700);
  --text-body:var(--gray-800);
  --text-muted:var(--gray-500);
  --text-subtle:var(--gray-400);
  --text-on-dark:var(--white);
  --text-muted-on-dark:var(--navy-200);
  --link:var(--navy-600);
  --link-hover:var(--emerald-600);
  --text-accent:var(--gold-700);
  --border:var(--gray-200);
  --border-strong:var(--gray-300);
  --border-on-dark:rgba(255,255,255,.18);
  --focus-ring:0 0 0 3px rgba(14,124,102,.28);

  /* 2.8 overlays */
  --scrim-hero:linear-gradient(90deg,rgba(6,38,55,.92) 0%,rgba(6,38,55,.78) 42%,rgba(6,38,55,.35) 100%);
  --scrim-card:linear-gradient(180deg,rgba(6,38,55,0) 35%,rgba(6,38,55,.72) 100%);

  /* 3.1 font stacks */
  --font-heading:"Newsreader","Merriweather",Georgia,serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-quote:"Merriweather",Georgia,"Times New Roman",serif;

  /* 3.2 type scale — desktop */
  --fs-display:clamp(2.5rem,4vw,3.5rem);
  --fs-h1:clamp(2rem,2.9vw,2.625rem);
  --fs-h2:clamp(1.5rem,2vw,1.9375rem);
  --fs-h3:1.3125rem;
  --fs-h4:1.125rem;
  --fs-h5:1rem;
  --fs-lead:1.0625rem;
  --fs-body:0.9375rem;
  --fs-body-sm:0.875rem;
  --fs-caption:0.75rem;
  --fs-eyebrow:0.6875rem;
  --fs-quote:1.25rem;

  /* 3.5 line-heights */
  --lh-tight:1.14; --lh-heading:1.22; --lh-snug:1.4; --lh-body:1.65; --lh-loose:1.8;
  /* 3.5 letter-spacing */
  --ls-display:-0.01em; --ls-heading:-0.005em; --ls-body:0; --ls-eyebrow:0.16em; --ls-button:0.02em;
  /* 3.5 measure */
  --measure-prose:68ch; --measure-lead:56ch;

  /* 4 spacing scale */
  --sp-4:4px;   --sp-8:8px;   --sp-12:12px; --sp-16:16px; --sp-20:20px;
  --sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px;
  --sp-80:80px; --sp-96:96px; --sp-120:120px; --sp-160:160px;
  --gap-inline:12px;
  --gap-card:24px;
  --gutter:32px;
  --pad-card:28px;
  --pad-card-lg:36px;
  --pad-input:12px 16px;
  --section-y:clamp(64px,7vw,120px);
  --section-y-tight:clamp(48px,4.5vw,72px);
  --gap-heading:16px;
  --gap-block:24px;

  /* 5 layout */
  --container:1320px;
  --container-narrow:820px;
  --container-pad:24px;
  --header-h:80px;
  --header-h-scrolled:68px;

  /* 5 z-index */
  --z-base:0; --z-raised:10; --z-header:100; --z-drawer:200; --z-dialog:300; --z-toast:400;

  /* 6.1 radii */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --r-card:16px; --r-control:8px; --r-media:14px;

  /* 6.2 shadows — cool navy-tinted, never black */
  --shadow-xs:0 1px 2px rgba(11,60,93,.06);
  --shadow-sm:0 2px 6px rgba(11,60,93,.07);
  --shadow-md:0 8px 20px rgba(11,60,93,.08);
  --shadow-lg:0 16px 40px rgba(11,60,93,.10);
  --shadow-xl:0 28px 64px rgba(11,60,93,.14);
  --shadow-card:0 1px 3px rgba(11,60,93,.05),0 1px 2px rgba(11,60,93,.04);
  --shadow-card-hover:0 24px 48px -12px rgba(11,60,93,.18),0 4px 12px rgba(11,60,93,.08);
  --shadow-header:0 1px 0 #E5E7EB,0 8px 24px rgba(11,60,93,.07);
  --shadow-header-scrolled:0 1px 0 #E5E7EB,0 12px 32px rgba(11,60,93,.10);

  /* 6.3 motion */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --dur-reveal:600ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
}

/* 3.3 tablet / mobile ≤768px */
@media (max-width:768px){
  :root{
    --fs-display:clamp(1.875rem,7.5vw,2.25rem);
    --fs-h1:clamp(1.625rem,6vw,1.875rem);
    --fs-h2:clamp(1.25rem,4.5vw,1.4375rem);
    --fs-h3:1.125rem;
    --fs-h4:1rem;
    --fs-h5:0.875rem;
    --fs-lead:0.9375rem;
    --fs-body:0.875rem;
    --fs-body-sm:0.8125rem;
    --fs-quote:1.0625rem;
  }
}
/* 3.4 small phones ≤480px */
@media (max-width:480px){
  :root{
    --fs-display:clamp(1.625rem,8vw,1.9375rem);
    --fs-h1:1.4375rem;
    --fs-h2:1.1875rem;
  }
}
@media (max-width:576px){ :root{ --container-pad:18px; } }

/* =====================================================================
   RESET / BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--bg-page);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:400;
  line-height:var(--lh-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);color:var(--text-heading);font-weight:600;
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:0 0 var(--gap-heading);
}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)} h5{font-size:var(--fs-h5)} h6{font-size:var(--fs-body-sm)}
p{margin:0 0 var(--gap-block);max-width:var(--measure-prose)}
p:last-child{margin-bottom:0}
a{color:var(--link);text-decoration:none;transition:color var(--dur-base) var(--ease-standard)}
a:hover{color:var(--link-hover)}
ul,ol{margin:0 0 var(--gap-block);padding-left:1.25em}
li{margin-bottom:var(--sp-8)}
hr{border:0;border-top:1px solid var(--border);margin:var(--sp-40) 0}
strong,b{font-weight:600}
small{font-size:var(--fs-caption)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-xs)}
::selection{background:var(--emerald-050);color:var(--navy-900)}

/* Accessibility: skip link */
.skip-link{
  position:absolute;left:var(--sp-16);top:-100px;z-index:var(--z-toast);
  background:var(--primary);color:#fff;padding:12px 20px;border-radius:var(--r-control);
  font-size:var(--fs-body-sm);font-weight:600;transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{top:var(--sp-16);color:#fff}
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal;
}
.screen-reader-text:focus{clip:auto;clip-path:none;height:auto;width:auto;position:static}

/* =====================================================================
   §5 LAYOUT PRIMITIVES
   ===================================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--container-pad)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--bg-dark);color:var(--text-on-dark)}
.section--deep{background:var(--bg-deep);color:var(--text-on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,.section--dark h5,
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4,.section--deep h5{color:var(--text-on-dark)}
.section--dark p,.section--deep p{color:var(--text-muted-on-dark)}
.tint-navy{background:var(--tint-navy)}
.tint-emerald{background:var(--tint-emerald)}
.tint-gold{background:var(--tint-gold)}

.grid{display:grid;gap:var(--gutter)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
/* Asymmetric split variants — declared above the md breakpoint ONLY, so the
   1-column collapse at <=768px can never be overridden (§5 card grid behaviour). */
@media (min-width:769px){
  .split--sidebar{grid-template-columns:1.2fr .8fr;align-items:start}
  .split--form{grid-template-columns:.85fr 1.15fr;align-items:start}
  .split--top{align-items:start}
}
@media (max-width:992px){ .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:768px){ .grid--3{grid-template-columns:1fr} .grid--2{grid-template-columns:1fr} .split{grid-template-columns:1fr} }
@media (max-width:576px){ .grid--4{grid-template-columns:1fr} }

.stack{display:flex;flex-direction:column;gap:var(--gap-block)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--gap-inline);align-items:center}
.text-center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mb-16{margin-bottom:var(--sp-16)}.mb-24{margin-bottom:var(--sp-24)}
.mb-32{margin-bottom:var(--sp-32)}.mb-40{margin-bottom:var(--sp-40)}.mb-48{margin-bottom:var(--sp-48)}

/* =====================================================================
   §7.5 SECTION HEADING PATTERN
   ===================================================================== */
.sec-head{margin-bottom:var(--sp-48);max-width:var(--measure-lead)}
.sec-head--center{margin-inline:auto;text-align:center}
.eyebrow{
  display:flex;align-items:center;gap:var(--sp-12);
  font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-accent);
  margin:0 0 var(--sp-16);
}
.sec-head--center .eyebrow{justify-content:center}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--accent);flex:none}
.sec-head--center .eyebrow::after{content:"";width:24px;height:2px;background:var(--accent);flex:none}
.section--dark .eyebrow,.section--deep .eyebrow{color:var(--gold-300)}
.section--dark .eyebrow::before,.section--dark .eyebrow::after,
.section--deep .eyebrow::before,.section--deep .eyebrow::after{background:var(--gold-300)}
.sec-head .lead,.lead{
  font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--text-muted);
  max-width:var(--measure-lead);margin:0;
}
.section--dark .lead,.section--deep .lead{color:var(--text-muted-on-dark)}
.sec-head h2{margin-bottom:var(--gap-heading)}
.sec-head--split{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-32);max-width:none}
.sec-head--split > div{max-width:var(--measure-lead)}
@media (max-width:768px){ .sec-head--split{flex-direction:column;align-items:flex-start} }

/* =====================================================================
   §7.1 BUTTONS
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  font-family:var(--font-body);font-weight:600;letter-spacing:var(--ls-button);
  border-radius:var(--r-control);border:1px solid transparent;cursor:pointer;
  text-align:center;text-decoration:none;
  padding:12px 22px;font-size:15px;min-height:44px;
  transition:background-color var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:var(--focus-ring)}
.btn svg{width:16px;height:16px;flex:none}
.btn--sm{padding:8px 14px;font-size:14px}
.btn--lg{padding:16px 28px;font-size:16px}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-hover);color:#fff}
.btn--secondary{background:var(--secondary);color:#fff}
.btn--secondary:hover{background:var(--secondary-hover);color:#fff}
.btn--outline{background:transparent;color:var(--primary);border-color:var(--border-strong)}
.btn--outline:hover{background:var(--tint-navy);border-color:var(--primary);color:var(--primary)}
.btn--ghost{background:transparent;color:var(--link)}
.btn--ghost:hover{background:var(--gray-100);color:var(--link)}
.btn--on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.18)}
.btn--on-dark:hover{background:rgba(255,255,255,.08);color:#fff}
.btn--block{width:100%}

/* arrow link (card footer / section links) */
.arrow-link{
  display:inline-flex;align-items:center;gap:var(--sp-8);
  font-size:var(--fs-caption);font-weight:600;color:var(--secondary);
  letter-spacing:.02em;text-transform:none;
}
.arrow-link svg{width:14px;height:14px;transition:transform var(--dur-base) var(--ease-out)}
.arrow-link:hover{color:var(--secondary-hover)}
.arrow-link:hover svg{transform:translateX(3px)}
.section--dark .arrow-link,.section--deep .arrow-link{color:var(--emerald-200)}
.link-more{font-size:var(--fs-body-sm);font-weight:600;color:var(--secondary);display:inline-flex;align-items:center;gap:var(--sp-8)}
.link-more svg{width:15px;height:15px;transition:transform var(--dur-base) var(--ease-out)}
.link-more:hover svg{transform:translateX(3px)}

/* =====================================================================
   §7.2 CARDS
   ===================================================================== */
.card{
  display:flex;flex-direction:column;gap:var(--gap-card);
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--pad-card);box-shadow:var(--shadow-card);height:100%;
  transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.card--lg{padding:var(--pad-card-lg)}
.card--flat{box-shadow:none}
.card--flat:hover{transform:none;box-shadow:var(--shadow-card)}
.card__media{border-radius:var(--r-media);overflow:hidden;aspect-ratio:16/10;background:var(--gray-100);margin:calc(var(--pad-card) * -1) calc(var(--pad-card) * -1) 0;border-radius:var(--r-card) var(--r-card) 0 0}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{display:flex;flex-direction:column;gap:var(--sp-12);flex:1}
.card__title{font-size:var(--fs-h4);color:var(--text-heading);font-weight:600;margin:0}
.card__title a{color:inherit}
.card__title a:hover{color:var(--link-hover)}
.card__text{font-size:var(--fs-body-sm);color:var(--gray-600);line-height:var(--lh-body);margin:0}
.card__meta{font-size:var(--fs-caption);color:var(--text-subtle);display:flex;flex-wrap:wrap;gap:var(--sp-12);align-items:center}
.card__meta span{display:inline-flex;align-items:center;gap:6px}
.card__foot{margin-top:auto;padding-top:var(--sp-4)}
.card__body > .badge,.card__body > .card__icon,.card__body > .arrow-link,
.card__body > .btn,.card__body > .cluster{align-self:flex-start}
.card__body > .btn--block{align-self:stretch}
.stack > .badge{align-self:flex-start}
.card--dark{background:rgba(255,255,255,.04);border-color:var(--border-on-dark);box-shadow:none}
.card--dark .card__title{color:#fff}
.card--dark .card__text{color:var(--text-muted-on-dark)}
.card--dark:hover{background:rgba(255,255,255,.07);box-shadow:none}

/* numbered / icon card */
.card__icon{
  width:44px;height:44px;border-radius:var(--r-control);display:grid;place-items:center;
  background:var(--tint-navy);color:var(--primary);flex:none;
}
.card__icon svg{width:20px;height:20px}
.card--dark .card__icon{background:rgba(255,255,255,.08);color:var(--gold-300)}

/* =====================================================================
   §7.4 BADGES & TAGS
   ===================================================================== */
.badge{
  display:inline-flex;align-items:center;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;padding:4px 10px;white-space:nowrap;line-height:1.5;
}
.badge--navy{background:var(--tint-navy);color:var(--navy-700)}
.badge--emerald{background:var(--tint-emerald);color:var(--emerald-700)}
.badge--gold{background:var(--tint-gold);color:var(--gold-700)}
.badge--outline{background:transparent;border:1px solid var(--border-strong);color:var(--gray-600)}
.badge--on-dark{background:rgba(255,255,255,.08);color:var(--gold-300)}

/* =====================================================================
   §7.3 FORMS
   ===================================================================== */
.form{display:flex;flex-direction:column;gap:var(--sp-20)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-20)}
@media (max-width:768px){ .form-row{grid-template-columns:1fr} }
.field{display:flex;flex-direction:column}
.field label{
  font-size:14px;font-weight:500;color:var(--gray-700);margin-bottom:var(--sp-8);
  font-family:var(--font-body);
}
.field .req{color:var(--accent);margin-left:2px}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:15px;color:var(--text-body);background:#fff;
  border:1px solid var(--border);border-radius:var(--r-control);padding:var(--pad-input);
  width:100%;min-height:44px;
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
}
.field textarea{min-height:140px;resize:vertical;line-height:var(--lh-body)}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--secondary);box-shadow:var(--focus-ring);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-subtle)}
.field .hint{font-size:var(--fs-caption);color:var(--text-muted);margin-top:6px}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger)}
.field .error{font-size:12px;color:var(--danger);margin-top:6px;display:block}
.form-note{font-size:var(--fs-caption);color:var(--text-muted)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.alert{border-radius:var(--r-control);padding:14px 18px;font-size:var(--fs-body-sm);border:1px solid transparent}
.alert--success{background:var(--success-tint);color:#0f5132;border-color:#BADBCC}
.alert--danger{background:var(--danger-tint);color:#842029;border-color:#F5C2C7}
.alert--info{background:var(--info-tint);color:var(--navy-700);border-color:var(--navy-100)}

/* dark form (newsletter card on dark sections) */
.form--dark .field label{color:var(--navy-200)}
.form--dark .field input,.form--dark .field select,.form--dark .field textarea{
  background:rgba(255,255,255,.06);border-color:var(--border-on-dark);color:#fff;
}
.form--dark .field input::placeholder{color:rgba(175,200,216,.7)}
.form--dark .field input:focus{background:rgba(255,255,255,.1);border-color:var(--emerald-500)}

/* =====================================================================
   §7.6 HEADER
   ===================================================================== */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  height:var(--header-h);
  transition:height var(--dur-slow) var(--ease-standard),background-color var(--dur-slow) var(--ease-standard),
             box-shadow var(--dur-slow) var(--ease-standard);
  background:transparent;
}
/* The WordPress admin bar is fixed at the top for logged-in users; offset the
   sticky header so it is not overlapped in the admin view. */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){ body.admin-bar .site-header{top:46px} }
body.admin-bar .hero,body.admin-bar .page-hero{scroll-margin-top:32px}
body.admin-bar .drawer,body.admin-bar .drawer-overlay,body.admin-bar .search-dialog{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .drawer,body.admin-bar .drawer-overlay,body.admin-bar .search-dialog{top:46px}
}

.site-header.is-solid,.site-header.is-scrolled{
  background:var(--white);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:var(--shadow-header);
}
.site-header.is-scrolled{height:var(--header-h-scrolled);box-shadow:var(--shadow-header-scrolled)}
.site-header__inner{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-24);
}
.wordmark{
  font-family:var(--font-heading);font-weight:600;font-size:1.25rem;letter-spacing:-.01em;
  color:var(--navy-700);white-space:nowrap;line-height:1;
  display:inline-flex;align-items:center;min-height:44px;
}
/* Only the ".COM" is gold — scoped so the .wordmark__type wrapper, which is
   itself a span, does not inherit the accent colour. */
.wordmark > span:not(.wordmark__type),.wordmark__type > span{color:var(--accent)}
.wordmark__type{color:inherit}
/* §13 — the commissioned mark sits as an emblem beside the type wordmark.
   The badge's own lettering is unreadable at header scale, so the type keeps
   carrying the name and the mark supplies recognition. */
.wordmark--logo{gap:11px}
.wordmark__type{white-space:nowrap}
.wordmark img{height:46px;width:auto;flex:none;transition:height var(--dur-slow) var(--ease-standard)}
.site-header.is-scrolled .wordmark img{height:38px}
.site-footer .wordmark img{height:56px}
.drawer .wordmark img{height:38px}
@media (max-width:576px){
  .wordmark img{height:36px}
  .wordmark--logo{gap:9px;font-size:1.05rem}
}
.site-header--over-hero.is-scrolled{background:var(--white)}
.site-header--over-hero:not(.is-scrolled):not(.is-solid) .wordmark{color:#fff}
.site-header--over-hero:not(.is-scrolled):not(.is-solid) .main-nav a{color:rgba(255,255,255,.86)}
.site-header--over-hero:not(.is-scrolled):not(.is-solid) .main-nav a:hover{color:#fff}
.site-header--over-hero:not(.is-scrolled):not(.is-solid) .icon-btn{color:#fff;border-color:rgba(255,255,255,.18)}

.main-nav{margin-left:auto}
.main-nav ul{display:flex;align-items:center;gap:var(--sp-24);list-style:none;margin:0;padding:0}
.main-nav li{margin:0;position:relative}
.main-nav a{
  font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--gray-700);
  padding:6px 0;display:inline-block;position:relative;
}
.main-nav a:hover{color:var(--navy-700)}
.main-nav .current-menu-item > a,.main-nav .current_page_item > a,.main-nav .is-active > a{
  color:var(--navy-700);font-weight:600;
}
.main-nav .current-menu-item > a::after,.main-nav .current_page_item > a::after,.main-nav .is-active > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);
}
.header-actions{display:flex;align-items:center;gap:var(--sp-12)}
.icon-btn{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-control);
  border:1px solid transparent;background:transparent;color:var(--gray-700);cursor:pointer;
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
.icon-btn:hover{background:var(--gray-100);color:var(--navy-700)}
.icon-btn:focus-visible{box-shadow:var(--focus-ring)}
.icon-btn svg{width:20px;height:20px}
.nav-toggle{display:none}

/* mobile drawer */
.drawer[hidden],.drawer-overlay[hidden],[hidden]{display:none!important}
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(360px,86vw);height:100dvh;
  background:#fff;z-index:var(--z-drawer);transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease-out);
  display:flex;flex-direction:column;padding:var(--sp-24);overflow-y:auto;
  box-shadow:var(--shadow-xl);
}
.drawer.is-open{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-32)}
.drawer nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.drawer nav a{
  font-size:18px;font-weight:500;color:var(--gray-800);font-family:var(--font-body);
  display:block;padding:12px 0;border-bottom:1px solid var(--border);
}
.drawer nav a:hover{color:var(--secondary)}
.drawer__foot{margin-top:var(--sp-32);display:flex;flex-direction:column;gap:var(--sp-12)}
.drawer-overlay{
  position:fixed;inset:0;background:rgba(6,38,55,.45);z-index:calc(var(--z-drawer) - 1);
  opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base);
}
.drawer-overlay.is-open{opacity:1;visibility:visible}
body.drawer-open{overflow:hidden}

@media (max-width:992px){
  .main-nav{display:none}
  .header-actions .btn{display:none}
  .nav-toggle{display:grid}
}

/* search dialog */
.search-dialog{
  position:fixed;inset:0;z-index:var(--z-dialog);display:none;
  background:rgba(6,38,55,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  padding:12vh var(--container-pad) 0;
}
.search-dialog.is-open{display:block}
.search-dialog__panel{
  max-width:680px;margin-inline:auto;background:#fff;border-radius:var(--r-lg);
  padding:var(--pad-card-lg);box-shadow:var(--shadow-xl);
}
.search-dialog__panel form{display:flex;gap:var(--sp-12)}
.search-dialog__panel input{flex:1}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;isolation:isolate;color:#fff;
  margin-top:calc(var(--header-h) * -1);
  padding-top:calc(var(--header-h) + clamp(56px,6vw,96px));
  padding-bottom:clamp(64px,7vw,120px);
  background:var(--navy-900);
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--scrim-hero)}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{
  font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);
  color:#fff;font-weight:600;margin-bottom:var(--sp-24);
}
.hero .lead{color:rgba(255,255,255,.86);max-width:var(--measure-lead);margin-bottom:var(--sp-32);font-size:var(--fs-lead)}
.hero .eyebrow{color:var(--gold-300)}
.hero .eyebrow::before{background:var(--gold-300)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--gap-inline)}
.hero__portrait{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-xl);aspect-ratio:4/5;background:rgba(255,255,255,.06)}
.hero__portrait img{width:100%;height:100%;object-fit:cover}
@media (max-width:992px){
  .hero__inner{grid-template-columns:1fr}
  /* §10: the portrait stacks BELOW the text on mobile, not above it. */
  .hero__portrait{max-width:340px;aspect-ratio:4/5;border-radius:var(--r-lg);margin-top:var(--sp-8)}
}

/* page hero (inner pages) */
.page-hero{
  background:var(--bg-deep);color:#fff;
  margin-top:calc(var(--header-h) * -1);
  padding-top:calc(var(--header-h) + clamp(48px,5vw,80px));
  padding-bottom:clamp(48px,5vw,80px);
  position:relative;
}
.page-hero h1{color:#fff;margin-bottom:var(--sp-16)}
.page-hero .lead{color:var(--text-muted-on-dark)}
.page-hero .eyebrow{color:var(--gold-300)}
.page-hero .eyebrow::before{background:var(--gold-300)}

/* breadcrumbs */
.breadcrumbs{font-size:var(--fs-caption);color:var(--navy-200);margin-bottom:var(--sp-20);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.breadcrumbs a{color:var(--navy-200)}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs .sep{opacity:.5}

/* =====================================================================
   §7.8 STAT GROUP
   ===================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.stat{padding:var(--sp-16) var(--sp-32);position:relative}
.stats--divided .stat + .stat::before{
  content:"";position:absolute;left:0;top:10%;height:80%;width:1px;background:var(--border-on-dark);
}
.stat__value{
  font-family:var(--font-heading);font-size:var(--fs-h2);font-weight:600;color:#fff;
  line-height:var(--lh-heading);display:block;margin-bottom:var(--sp-8);
}
.stat__label{
  font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  color:var(--text-muted-on-dark);
}
.stats--light .stat__value{color:var(--navy-700)}
.stats--light .stat__label{color:var(--text-muted)}
.stats--light .stat + .stat::before{background:var(--border)}
@media (max-width:992px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-24)}
  .stats--divided .stat + .stat::before{display:none} .stat{padding-inline:0} }
@media (max-width:480px){ .stats{grid-template-columns:1fr} }

/* =====================================================================
   §7.8 TIMELINE
   ===================================================================== */
.timeline{position:relative;padding-left:var(--sp-32);margin:0;list-style:none}
.timeline::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--navy-700);opacity:.25}
.timeline li{position:relative;margin:0 0 var(--sp-40);padding:0}
.timeline li:last-child{margin-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:calc(var(--sp-32) * -1 - 5px);top:6px;
  width:12px;height:12px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--white);
}
.timeline__year{
  font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  font-weight:600;color:var(--text-accent);display:block;margin-bottom:var(--sp-8);
}
.timeline__role{font-size:var(--fs-h4);font-family:var(--font-heading);font-weight:600;color:var(--navy-700);margin:0 0 4px}
.timeline__org{font-size:var(--fs-body-sm);color:var(--text-muted);margin:0 0 var(--sp-12)}
.timeline__desc{font-size:var(--fs-body-sm);color:var(--gray-600);margin:0}

/* =====================================================================
   §7.8 PUBLICATION ROW
   ===================================================================== */
.pub-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.pub{
  display:grid;grid-template-columns:88px 1fr auto;gap:var(--sp-24);
  padding:var(--sp-32) 0;border-bottom:1px solid var(--border);align-items:start;
  transition:background-color var(--dur-base) var(--ease-standard);
}
.pub__year{
  font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:600;color:var(--navy-700);
  line-height:1.1;
}
.pub__year small{display:block;font-family:var(--font-body);font-size:var(--fs-caption);font-weight:500;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.pub__body{min-width:0}
.pub__title{font-size:var(--fs-h4);font-family:var(--font-heading);font-weight:600;color:var(--navy-700);margin:var(--sp-12) 0 var(--sp-8);line-height:1.35}
.pub__title a{color:inherit}
.pub__title a:hover{color:var(--link-hover)}
.pub__authors{font-size:var(--fs-body-sm);color:var(--gray-600);margin:0 0 4px}
.pub__source{font-size:var(--fs-body-sm);color:var(--text-muted);font-style:italic;margin:0 0 var(--sp-12)}
.pub__doi{font-size:var(--fs-caption);font-family:var(--font-body);color:var(--secondary);font-weight:500;word-break:break-all}
.pub__actions{display:flex;flex-direction:column;gap:var(--sp-8);align-items:flex-end}
@media (max-width:768px){
  .pub{grid-template-columns:1fr;gap:var(--sp-12);padding:var(--sp-24) 0}
  .pub__year{font-size:var(--fs-body-sm);color:var(--text-muted);font-family:var(--font-body);font-weight:600}
  .pub__year small{display:inline;margin:0 0 0 8px}
  .pub__actions{flex-direction:row;align-items:flex-start;flex-wrap:wrap}
}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-bottom:var(--sp-40)}
.filters a{
  font-size:var(--fs-body-sm);font-weight:500;padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);color:var(--gray-600);background:#fff;min-height:38px;
  display:inline-flex;align-items:center;
}
.filters a:hover{border-color:var(--primary);color:var(--primary);background:var(--tint-navy)}
.filters a.is-active{background:var(--primary);border-color:var(--primary);color:#fff}

/* =====================================================================
   §7.8 PULL-QUOTE
   ===================================================================== */
.pullquote{
  font-family:var(--font-quote);font-size:var(--fs-quote);line-height:var(--lh-snug);
  color:var(--gray-700);border-left:3px solid var(--accent);padding-left:var(--sp-24);
  margin:0;max-width:var(--measure-prose);font-weight:400;
}
.pullquote cite{
  display:block;margin-top:var(--sp-20);font-family:var(--font-body);font-size:var(--fs-body-sm);
  font-style:normal;font-weight:600;color:var(--navy-700);
}
.pullquote cite span{display:block;font-weight:400;color:var(--text-muted);font-size:var(--fs-caption);margin-top:2px}

/* =====================================================================
   §7.8 BACK TO TOP
   ===================================================================== */
.to-top{
  position:fixed;right:var(--sp-24);bottom:var(--sp-24);width:46px;height:46px;
  border-radius:50%;background:var(--primary);color:#fff;border:none;cursor:pointer;
  display:grid;place-items:center;z-index:var(--z-raised);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base),
             transform var(--dur-base) var(--ease-out),background-color var(--dur-base);
  box-shadow:var(--shadow-lg);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--primary-hover)}
.to-top:focus-visible{box-shadow:var(--focus-ring)}
.to-top svg{width:20px;height:20px}

/* =====================================================================
   §7.8 ROADMAP / FUTURE EXPANSION
   ===================================================================== */
.roadmap-hub{position:relative;display:grid;place-items:center;margin-bottom:var(--sp-64);min-height:220px}
.roadmap-hub__node{
  width:120px;height:120px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 30%,var(--emerald-500),var(--navy-600) 70%);
  color:#fff;font-family:var(--font-heading);font-weight:600;font-size:1rem;text-align:center;
  box-shadow:0 0 40px rgba(26,155,129,.35);position:relative;z-index:2;line-height:1.2;
}
.roadmap-hub__ring{
  position:absolute;border-radius:50%;border:1px dashed rgba(175,200,216,.35);
  animation:mr-spin 44s linear infinite;
}
.roadmap-hub__ring--1{width:200px;height:200px}
.roadmap-hub__ring--2{width:280px;height:280px;animation-duration:68s;animation-direction:reverse;border-color:rgba(224,195,132,.28)}
@keyframes mr-spin{to{transform:rotate(360deg)}}
.roadmap-hub__stem{position:absolute;bottom:-32px;width:1px;height:32px;background:linear-gradient(180deg,rgba(175,200,216,.5),transparent)}
.roadmap-grid .card{perspective:800px}
.roadmap-grid .card:hover{transform:translateY(-4px) rotateX(2deg) rotateY(-2deg)}

/* =====================================================================
   PROSE / SINGLE POST
   ===================================================================== */
.prose{max-width:var(--measure-prose);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body)}
.prose > * + *{margin-top:var(--gap-block)}
.prose h2{font-size:var(--fs-h2);margin-top:var(--sp-48)}
.prose h3{font-size:var(--fs-h3);margin-top:var(--sp-40)}
.prose h4{font-size:var(--fs-h4);margin-top:var(--sp-32)}
.prose img,.prose figure{border-radius:var(--r-media);overflow:hidden}
.prose figcaption{font-size:var(--fs-caption);color:var(--text-muted);margin-top:var(--sp-8)}
.prose blockquote{
  font-family:var(--font-quote);font-size:var(--fs-quote);color:var(--gray-700);
  border-left:3px solid var(--accent);padding-left:var(--sp-24);margin:var(--sp-40) 0;
}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm)}
.prose th,.prose td{border:1px solid var(--border);padding:12px 16px;text-align:left}
.prose th{background:var(--gray-050);font-weight:600;color:var(--navy-700)}
.prose code{background:var(--gray-100);padding:2px 6px;border-radius:var(--r-xs);font-size:.9em}
.prose ul,.prose ol{padding-left:1.25em}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.entry-meta{display:flex;flex-wrap:wrap;gap:var(--sp-16);font-size:var(--fs-caption);color:var(--text-subtle);align-items:center}
.entry-meta span{display:inline-flex;align-items:center;gap:6px}

/* definition list (project facts / publication facts) */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-24);margin:0}
.facts > div{border-top:1px solid var(--border);padding-top:var(--sp-12)}
.facts dt{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-weight:600;color:var(--text-accent);margin-bottom:6px}
.facts dd{margin:0;font-size:var(--fs-body-sm);color:var(--text-body)}
@media (max-width:576px){ .facts{grid-template-columns:1fr} }

/* =====================================================================
   §7.7 FOOTER
   ===================================================================== */
.site-footer{background:var(--bg-deep);color:#fff;position:relative;padding:var(--sp-80) 0 var(--sp-32)}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-500),var(--emerald-600))}
.footer-grid{display:grid;grid-template-columns:1.5fr .8fr .9fr 1fr 1.3fr;gap:var(--gutter)}
@media (max-width:1200px){ .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--sp-48)} }
@media (max-width:992px){ .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:576px){ .footer-grid{grid-template-columns:1fr} }
.site-footer h5{
  font-size:var(--fs-h5);color:#fff;font-weight:600;margin:0 0 var(--sp-20);font-family:var(--font-heading);
}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-12)}
.site-footer li{margin:0}
.site-footer a{font-size:14px;color:var(--navy-200)}
.site-footer a:hover{color:#fff}
.footer-bio{font-size:14px;color:var(--navy-200);line-height:var(--lh-body);margin:var(--sp-16) 0 var(--sp-24);max-width:34ch}
.social-row{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.social-btn{
  width:38px;height:38px;border-radius:var(--r-control);display:grid;place-items:center;
  background:rgba(255,255,255,.06);color:var(--navy-200);
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
.social-btn:hover{background:var(--emerald-600);color:#fff}
@media (pointer:coarse){ .social-btn{width:44px;height:44px} }
.social-btn svg{width:18px;height:18px}
.footer-contact{font-size:14px;color:var(--navy-200);display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-20)}
.footer-contact a{display:inline-flex;align-items:center;gap:8px;word-break:break-word}
.footer-bottom{
  margin-top:var(--sp-64);padding-top:var(--sp-24);border-top:1px solid var(--border-on-dark);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-16);
  font-size:12px;color:var(--navy-200);
}
.footer-bottom ul{flex-direction:row;gap:var(--sp-20);flex-wrap:wrap}
.footer-bottom a{font-size:12px}

/* =====================================================================
   PAGINATION / ARCHIVE
   ===================================================================== */
.pagination{display:flex;flex-wrap:wrap;gap:var(--sp-8);justify-content:center;margin-top:var(--sp-64)}
.pagination .page-numbers{
  min-width:44px;min-height:44px;display:inline-grid;place-items:center;padding:0 12px;
  border:1px solid var(--border);border-radius:var(--r-control);font-size:var(--fs-body-sm);
  font-weight:500;color:var(--gray-700);background:#fff;
}
.pagination .page-numbers:hover{border-color:var(--primary);color:var(--primary)}
.pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}

.empty-state{
  text-align:center;padding:var(--sp-80) var(--sp-24);border:1px dashed var(--border-strong);
  border-radius:var(--r-card);color:var(--text-muted);
}
.empty-state h3{color:var(--navy-700);margin-bottom:var(--sp-12)}

/* =====================================================================
   SCROLL REVEAL (§6.3 — fades and short lifts only)
   ===================================================================== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .card:hover{transform:none}
  .roadmap-hub__ring{animation:none}
}

/* =====================================================================
   PRINT
   ===================================================================== */
@media print{
  .site-header,.site-footer,.to-top,.drawer,.drawer-overlay,.hero__bg,.filters{display:none!important}
  body{color:#000;font-size:11pt}
  a{color:#000;text-decoration:underline}
  .section{padding-block:16pt}
}