/* ===========================================================
   codePannu Blog — Design 5: "Minimal Typographic"
   Calm, premium, distraction-free. White + navy + one teal accent.
   =========================================================== */

:root{
  /* Brand palette. Accent is now brand YELLOW (client V1.2) — --teal kept as the
     accent token so existing accent rules flip to yellow in one place. */
  --teal:#fdc714;          /* accent = brand yellow */
  --teal-soft:#ffe9a1;
  --yellow:#fdc714;
  --indigo:#5361ab;        /* blue kept for a few text/serif variations */
  --amber:#fdc714;
  --navy:#2f3c4c;
  --slate:#566476;
  --slate-2:#545454;
  --line:#e9eaec;
  --paper:#ffffff;
  --offwhite:#fefeff;
  --pale-cyan:#f6fbff;     /* neutral image placeholder (no more teal tint) */
  --orange:#fd8549;
  --avatar:#8a929e;        /* grey avatar circles (client V1.2) */

  /* Type */
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Rubik", system-ui, -apple-system, sans-serif;

  /* Spacing rhythm */
  --gut:clamp(20px, 5vw, 64px);
  --maxw:1180px;
  --readw:740px;           /* wider reading column (client V1.2) */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* Focus rings — navy for accessible contrast (yellow accent is too light here) */
:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:1px;
}

/* Skip link */
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--navy);color:#fff;padding:10px 16px;z-index:100;
  font-size:14px;letter-spacing:.02em;
}
.skip:focus{left:12px;top:12px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}

/* ============ HEADER ============ */
.site-head{
  border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(140%) blur(8px);
  z-index:40;
}
.head-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:18px;padding-bottom:18px;
}
.brand{display:flex;align-items:center;gap:11px;}
.brand img{height:30px;width:auto;}
.brand .word{
  font-weight:500;font-size:18px;letter-spacing:-.01em;color:var(--navy);
}
.brand .word b{font-weight:600;}

.nav{display:flex;align-items:center;}
.nav .menu{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;
  list-style:none;margin:0;padding:0;
}
.nav .menu > li{position:relative;display:flex;align-items:center;}
.nav a{
  font-size:14.5px;color:var(--slate);font-weight:400;
  letter-spacing:.005em;position:relative;padding:4px 0;
  transition:color .2s ease;
}
.nav a .u{
  position:absolute;left:0;right:100%;bottom:-1px;height:1.5px;
  background:var(--teal);transition:right .28s ease;
}
.nav a:hover, .nav a[aria-current="page"]{color:var(--navy);}
.nav a:hover .u, .nav a[aria-current="page"] .u{right:0;}
.nav a.ext::after{content:"↗";font-size:11px;margin-left:3px;color:var(--slate);}

/* ---- Drop-down sub-menus (client-added nested menu items) ---- */
.nav .sub-menu{list-style:none;margin:0;padding:0;}
.nav .sub-toggle{
  background:none;border:0;cursor:pointer;color:var(--slate);
  padding:6px;margin-left:1px;line-height:0;display:inline-flex;align-items:center;
}
.nav .sub-toggle:hover{color:var(--navy);}
.nav .caret{
  display:inline-block;width:7px;height:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;transition:transform .2s ease;
}
@media (min-width:761px){
  /* invisible hover bridge so the pointer can cross the gap into the panel */
  .nav .menu > li.menu-item-has-children::after{
    content:"";position:absolute;left:0;top:100%;width:100%;height:16px;
  }
  .nav .menu .sub-menu{
    position:absolute;top:calc(100% + 12px);left:0;min-width:212px;
    background:#fff;border:1px solid var(--line);border-radius:12px;
    box-shadow:0 16px 38px -20px rgba(47,60,76,.55);
    padding:8px;display:flex;flex-direction:column;gap:1px;z-index:60;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .nav .menu li:hover > .sub-menu,
  .nav .menu li:focus-within > .sub-menu,
  .nav .menu li.sub-open > .sub-menu{
    opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav .menu > li:hover > .sub-toggle .caret,
  .nav .menu > li.sub-open > .sub-toggle .caret{transform:rotate(-135deg);margin-top:2px;}
  /* 3rd level and deeper flyout to the side */
  .nav .sub-menu .sub-menu{top:-9px;left:calc(100% + 9px);}
  .nav .sub-menu li{position:relative;display:flex;align-items:center;flex-wrap:wrap;}
  .nav .sub-menu a{
    display:block;white-space:nowrap;padding:8px 12px;border-radius:8px;
    font-size:14px;color:var(--slate);width:auto;
  }
  .nav .sub-menu a .u{display:none;}
  .nav .sub-menu a:hover{background:#fffdf3;color:var(--navy);}
}

.menu-btn{
  display:none;background:none;border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--navy);
}
.menu-btn svg{display:block;}

/* ============ HERO (home) ============ */
.hero{padding:clamp(64px,12vh,140px) 0 clamp(48px,8vh,96px);}
.hero .eyebrow{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);font-weight:500;margin:0 0 26px;
  display:inline-flex;align-items:center;gap:12px;
}
.hero .eyebrow::before{
  content:"";width:32px;height:1.5px;background:var(--teal);display:inline-block;
}
.hero h1{
  margin:0;font-weight:400;letter-spacing:-.018em;
  font-size:clamp(40px,7.4vw,86px);line-height:1.04;color:var(--navy);
  max-width:15ch;
}
/* Banner title variations (client V1.2 — choose one).
   Default (A): regular weight, current size.
   Variation B: add class "title-bold" on <body> → bold + one size smaller. */
body.title-bold .hero h1{font-weight:700;font-size:clamp(34px,6.4vw,72px);}
.hero h1 .em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:0;
}
.hero h1 .ul{
  border-bottom:3px solid var(--teal);padding-bottom:2px;
}
.hero .lede{
  margin:34px 0 0;max-width:48ch;font-size:clamp(17px,1.6vw,20px);
  color:var(--slate);line-height:1.6;
}
.hero .actions{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:500;letter-spacing:.005em;
  padding:13px 24px;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--indigo);transform:translateY(-1px);}
.btn-ghost{border-color:var(--line);color:var(--navy);}
.btn-ghost:hover{border-color:var(--navy);}
.btn .arrow{transition:transform .25s ease;}
.btn:hover .arrow{transform:translateX(3px);}

/* ============ SECTION HEADERS ============ */
.sec{padding:clamp(48px,8vh,90px) 0;}
.sec-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:6px;
}
.sec-top h2{
  margin:0;font-weight:500;letter-spacing:-.01em;
  font-size:clamp(22px,3vw,30px);color:var(--navy);
}
.sec-top h2 .n{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--indigo);
}
.sec-top .more{
  font-size:14px;color:var(--slate);white-space:nowrap;
  position:relative;padding-bottom:3px;
}
.sec-top .more::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--teal);transition:width .26s ease;
}
.sec-top .more:hover{color:var(--navy);}
.sec-top .more:hover::after{width:100%;}

/* ============ POST ROWS (quiet list) ============ */
.rows{list-style:none;margin:0;padding:0;}
.row{border-bottom:1px solid var(--line);}
.row a.row-link{
  display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,56px);
  align-items:center;padding:clamp(24px,3.6vw,38px) 0;
}
.row .row-main{min-width:0;}
.row .dept{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);font-weight:500;margin-bottom:14px;
}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;background:var(--teal);}
.row h3{
  margin:0;font-weight:400;letter-spacing:-.012em;
  font-size:clamp(23px,3vw,33px);line-height:1.14;color:var(--navy);
}
.row h3 .ttl{
  background-image:linear-gradient(var(--teal),var(--teal));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s ease;padding-bottom:2px;
}
.row a.row-link:hover h3 .ttl,
.row a.row-link:focus-visible h3 .ttl{background-size:100% 2px;}
.row .ex{
  margin:14px 0 0;color:var(--slate);font-size:15.5px;line-height:1.6;
  max-width:62ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.meta{
  margin-top:16px;font-size:12.5px;color:var(--slate-2);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;letter-spacing:.003em;
}
.meta .av{
  width:26px;height:26px;border-radius:50%;flex:none;background:var(--avatar);
  display:grid;place-items:center;font-size:10.5px;font-weight:600;color:#fff;
  letter-spacing:.02em;
}
.meta .dep{color:var(--slate);}
.meta .sep{color:var(--line);font-weight:400;}
.meta .who{color:var(--navy);font-weight:500;}
.row .thumb{
  width:clamp(120px,16vw,190px);aspect-ratio:4/3;overflow:hidden;border-radius:10px;
  background:var(--pale-cyan);
}
.row .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.row a.row-link:hover .thumb img{transform:scale(1.04);}

/* ============ CARD GRID (vertical preview cards — 2 per row, airy) ============ */
.cardgrid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(48px,6vw,96px) clamp(32px,5vw,72px); /* generous row-gap / column-gap */
}
.sec .cardgrid{margin-top:clamp(38px,4.5vw,58px);}
.card{min-width:0;}
.card .card-link{display:flex;flex-direction:column;}
.card .card-img{
  /* 16/9 matches the site's featured-image ratio (1600×900) exactly, so
     object-fit:contain fills the frame with NO top/bottom letterbox gap. */
  aspect-ratio:16/9;overflow:hidden;border-radius:0;background:var(--pale-cyan); /* sharp corners (client V1.2) */
  margin-bottom:18px;
}
.card .card-img img{width:100%;height:100%;object-fit:contain;transition:transform .6s ease;}
.card .card-link:hover .card-img img,
.card .card-link:focus-visible .card-img img{transform:scale(1.04);}
.card .dept{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);font-weight:500;margin-bottom:13px;
}
.card h3{
  margin:0;font-weight:500;letter-spacing:-.01em;
  font-size:clamp(18px,1.9vw,22px);line-height:1.22;color:var(--navy); /* smaller title (client V1.2) */
}
.card .meta{margin-top:12px;}
.card h3 .ttl{
  background-image:linear-gradient(var(--teal),var(--teal));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s ease;padding-bottom:2px;
}
.card .card-link:hover h3 .ttl,
.card .card-link:focus-visible h3 .ttl{background-size:100% 2px;}
.card .ex{
  margin:14px 0 0;color:var(--slate);font-size:15.5px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card .meta{margin-top:18px;}

/* ============ FEATURE (home top story) ============ */
.feature{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);
  align-items:center;padding:clamp(36px,5vw,56px) 0 clamp(48px,7vh,80px);
}
.feature .fimg{
  /* 16/9 = featured-image ratio (1600×900) → no letterbox gap (see .card-img). */
  aspect-ratio:16/9;overflow:hidden;border-radius:0;background:var(--pale-cyan); /* same size as cards (client V1.2) */
  order:2;
}
.feature .fimg img{width:100%;height:100%;object-fit:contain;transition:transform .6s ease;}
.feature a:hover .fimg img{transform:scale(1.035);}
.feature .fbody{order:1;}
.feature .tag{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);font-weight:600;margin-bottom:18px;
}
.feature .tag .dot{background:var(--amber);}
.feature h2{
  margin:0;font-weight:400;letter-spacing:-.016em;line-height:1.07;
  font-size:clamp(30px,4.6vw,52px);color:var(--navy);
}
.feature h2 .ttl{
  background-image:linear-gradient(var(--teal),var(--teal));
  background-size:0 2.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s ease;
}
.feature a:hover h2 .ttl{background-size:100% 2.5px;}
.feature .ex{margin:22px 0 0;color:var(--slate);font-size:16.5px;max-width:46ch;}
.feature-block{border-bottom:1px solid var(--line);}

/* ============ STAT STRIP ============ */
.values{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);
  padding:clamp(40px,6vh,72px) 0;border-bottom:1px solid var(--line);
}
.value h3{
  margin:0 0 10px;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(34px,4vw,52px);color:var(--indigo);line-height:1;letter-spacing:0;
}
.value p{margin:0;color:var(--slate);font-size:15px;line-height:1.55;max-width:34ch;}
.value .lbl{
  display:block;font-style:normal;font-family:var(--sans);
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);font-weight:600;margin-top:8px;
}

/* ============ ARCHIVE ============ */
.arc-head{padding:clamp(56px,10vh,110px) 0 clamp(28px,4vh,44px);}
.arc-head .eyebrow{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);
  font-weight:500;margin:0 0 22px;display:inline-flex;align-items:center;gap:12px;
}
.arc-head .eyebrow::before{content:"";width:32px;height:1.5px;background:var(--teal);display:inline-block;}
.arc-head h1{
  margin:0;font-weight:400;letter-spacing:-.018em;line-height:1.05;
  font-size:clamp(38px,6vw,72px);color:var(--navy);max-width:18ch;
}
.arc-head h1 .em{font-family:var(--serif);font-style:italic;}
.arc-head .sub{margin:24px 0 0;color:var(--slate);font-size:18px;max-width:50ch;}

/* Filter — understated text tabs */
.filters{
  position:sticky;top:64px;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  z-index:30;
}
.filters-inner{
  display:flex;gap:6px 22px;flex-wrap:wrap;align-items:center;
  padding-top:16px;padding-bottom:16px;
}
.filters .flabel{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  font-weight:500;margin-right:6px;
}
.chip{
  background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:14.5px;color:var(--slate);padding:5px 0;position:relative;
  transition:color .2s ease;letter-spacing:.003em;
}
.chip::after{
  content:"";position:absolute;left:0;bottom:1px;height:1.5px;width:0;
  background:var(--teal);transition:width .26s ease;
}
.chip:hover{color:var(--navy);}
.chip:hover::after{width:100%;}
.chip[aria-pressed="true"]{color:var(--navy);font-weight:500;}
.chip[aria-pressed="true"]::after{width:100%;background:var(--navy);}

/* Year-grouped timeline */
.timeline{padding:clamp(20px,4vh,40px) 0 clamp(56px,9vh,100px);}
.yeargroup{
  display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:clamp(20px,4vw,56px);
  padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--line);
}
.yeargroup:first-child{border-top:none;}
.yeargroup .ylabel{
  position:sticky;top:140px;align-self:start;
}
.yeargroup .ylabel .num{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(54px,8vw,104px);line-height:.9;color:var(--navy);
  letter-spacing:-.01em;display:block;
}
.yeargroup .ylabel .cnt{
  display:block;margin-top:10px;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);font-weight:500;
}
.yeargroup .ylabel .cnt b{color:var(--teal);font-weight:600;}
.yeargroup .ylist{list-style:none;margin:0;padding:0;}
.yeargroup .ylist .row:first-child{border-top:1px solid var(--line);}
.empty{
  padding:50px 0;color:var(--slate);font-size:16px;text-align:center;
  border-top:1px solid var(--line);
}

/* ============ SINGLE POST ============ */
.post-wrap{max-width:var(--readw);margin:0 auto;padding:0 var(--gut);}
.post-top{padding:clamp(48px,9vh,96px) 0 clamp(48px,8vh,80px);}
.crumb{
  font-size:13.5px;color:var(--slate);margin:0 0 30px;
  display:inline-flex;align-items:center;gap:8px;
}
.crumb a{position:relative;padding-bottom:2px;}
.crumb a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--teal);transition:width .25s ease;}
.crumb a:hover{color:var(--navy);}
.crumb a:hover::after{width:100%;}
.crumb .arrow{color:var(--teal);}

.post-kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);font-weight:600;margin-bottom:22px;
}
.post-title{
  margin:0;font-weight:400;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(34px,5.4vw,58px);color:var(--navy);
}
.post-meta{
  margin:30px 0 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  font-size:14.5px;color:var(--slate-2);
}
.post-meta .av{
  /* background was missing — white initials on a transparent circle were
     invisible on the white page. Same grey token the card avatars use. */
  width:40px;height:40px;border-radius:50%;flex:none;color:#fff;
  background:var(--avatar);
  display:grid;place-items:center;font-size:14px;font-weight:600;
}
.post-meta .who{color:var(--navy);font-weight:600;display:block;line-height:1.3;}
.post-meta .role{color:var(--slate);font-size:13px;display:block;}
.post-meta .mr{display:flex;flex-direction:column;}
.post-meta .pill{
  margin-left:auto;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--indigo);font-weight:600;display:inline-flex;align-items:center;gap:8px;
}
.post-meta .pill .dot{background:var(--amber);}
.post-meta .when{display:inline-flex;align-items:center;gap:8px;}
/* Two-row meta (client V1.2): Name + Department on row 1, Date + Reading time on row 2 */
.post-meta .pm-rows{display:flex;flex-direction:column;gap:3px;min-width:0;}
.post-meta .pm-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.post-meta .pm-top .who{color:var(--navy);font-weight:600;}
.post-meta .pm-top .dep{color:var(--slate);}
.post-meta .pm-sub{color:var(--slate-2);font-size:13.5px;}
.post-meta .pm-sub time{white-space:nowrap;}

.hero-fig{margin:clamp(34px,5vw,52px) 0 0;display:flex;justify-content:center;}
/* Single-post featured image: show the WHOLE image at its natural proportions —
   never crop it. Landscape banners fill the reading column; square/portrait
   uploads are height-capped and centered so they don't dominate the page. */
.hero-fig img{
  width:auto;max-width:100%;height:auto;max-height:min(78vh,700px);
  border-radius:14px;background:var(--pale-cyan);
}

/* Article body */
.article{
  font-size:18.5px;line-height:1.82;color:var(--slate);
  padding:clamp(36px,6vw,56px) 0 0;
}
.article > *:first-child{margin-top:0;}
.article p{margin:0 0 1.5em;}
.article h2,.article h3,.article h4{
  color:var(--navy);font-weight:500;letter-spacing:-.01em;line-height:1.25;
  margin:2em 0 .6em;
}
.article h2{font-size:clamp(25px,3.2vw,32px);}
.article h3{font-size:clamp(21px,2.6vw,25px);}
.article h4{font-size:19px;}
.article h4 b{font-weight:600;}
.article a{
  color:var(--indigo);text-decoration:underline;text-decoration-color:var(--teal);
  text-underline-offset:3px;text-decoration-thickness:1.5px;
}
.article a:hover{color:var(--navy);}
.article ul,.article ol{margin:0 0 1.5em;padding-left:1.3em;}
.article li{margin:0 0 .55em;}
.article li::marker{color:var(--teal);}
.article img{border-radius:12px;margin:1.8em 0;width:100%;}
.article strong,.article b{color:var(--navy);font-weight:600;}
.article blockquote{
  margin:1.8em 0;padding:6px 0 6px 28px;border-left:3px solid var(--teal);
  font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,27px);
  line-height:1.4;color:var(--navy);font-weight:400;letter-spacing:0;
}
.article blockquote p{margin:0;}

/* Related */
.related{
  /* .post-top now supplies the gap above; give the panel its own gap before the footer. */
  max-width:var(--readw);margin:0 auto clamp(56px,9vh,90px);padding:0 var(--gut);
}
/* Differentiate "More from the blog" from the reading section (client V1.2):
   a subtle pale-yellow panel with a yellow top accent. */
.related-inner{
  border-top:3px solid var(--yellow);
  background:#fffdf3;
  border-radius:0 0 16px 16px;
  padding:clamp(30px,5vh,48px) clamp(20px,4vw,34px) clamp(26px,4vh,40px);
}
.related h2{
  margin:0 0 6px;font-weight:500;font-size:22px;letter-spacing:-.01em;color:var(--navy);
}
.related h2 .n{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--indigo);}
.related .rows .row a.row-link{grid-template-columns:1fr;padding:22px 0;}
.related .row h3{font-size:clamp(20px,2.6vw,24px);}

/* ============ NEWSLETTER / CTA band ============ */
.cta{border-top:1px solid var(--line);}
.cta-inner{
  padding:clamp(56px,9vh,100px) 0;text-align:center;max-width:54ch;margin:0 auto;
}
.cta h2{
  margin:0;font-weight:400;letter-spacing:-.015em;line-height:1.08;
  font-size:clamp(28px,4.4vw,46px);color:var(--navy);
}
.cta h2 .em{font-family:var(--serif);font-style:italic;}
.cta p{margin:20px auto 0;color:var(--slate);font-size:17px;max-width:44ch;}
.cta .actions{margin-top:32px;display:flex;justify-content:center;}

/* ============ FOOTER ============ */
.site-foot{border-top:1px solid var(--line);background:var(--offwhite);}
.foot-inner{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(28px,5vw,64px);
  padding:clamp(48px,7vh,80px) 0 clamp(28px,4vh,40px);
}
.foot-brand .brand{margin-bottom:18px;}
.foot-brand p{margin:0 0 8px;color:var(--slate);font-size:14.5px;line-height:1.6;max-width:34ch;}
.foot-brand .tag{
  margin-top:16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--indigo);font-weight:600;display:inline-flex;align-items:center;gap:9px;
}
.foot-col h4{
  margin:0 0 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);font-weight:600;
}
.foot-col ul{list-style:none;margin:0;padding:0;}
.foot-col li{margin:0 0 11px;}
.foot-col a{
  color:var(--slate);font-size:14.5px;position:relative;padding-bottom:2px;
}
.foot-col a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--teal);transition:width .25s ease;}
.foot-col a:hover{color:var(--navy);}
.foot-col a:hover::after{width:100%;}
/* Nested footer menu items (if the owner adds a sub-menu to the Explore menu). */
.foot-col .sub-menu{list-style:none;margin:9px 0 11px;padding:0 0 0 12px;border-left:1px solid var(--line);}
.foot-col .sub-menu li{margin:0 0 9px;}
.foot-col .sub-menu a{font-size:13.5px;}
.foot-bottom{
  border-top:1px solid var(--line);padding:22px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13px;color:var(--slate);
}

/* ============ RESPONSIVE ============ */
@media (max-width:880px){
  .feature{grid-template-columns:1fr;}
  .feature .fimg{order:1;}
  .feature .fbody{order:2;}
  .values{grid-template-columns:1fr;gap:32px;}
  .foot-inner{grid-template-columns:1fr 1fr;}
  .foot-brand{grid-column:1/-1;}
  .yeargroup{grid-template-columns:1fr;gap:18px;}
  .yeargroup .ylabel{position:static;display:flex;align-items:baseline;gap:16px;}
  .yeargroup .ylabel .num{font-size:clamp(44px,12vw,64px);}
  .yeargroup .ylabel .cnt{margin-top:0;}
}
@media (max-width:760px){
  .mainsite{display:none;}
  .navrow{display:none;}
  .navrow.open{display:block;}
  .navrow-in{flex-direction:column;align-items:flex-start;gap:2px;padding-top:2px;padding-bottom:12px;}
  .tagline{display:none;}
  .nav{display:block;width:100%;}
  .nav .menu{flex-direction:column;align-items:stretch;gap:0;width:100%;flex-wrap:nowrap;}
  .nav .menu > li{flex-wrap:wrap;align-items:center;}
  .nav a{font-size:17px;padding:11px 0;width:auto;}
  .nav .menu > li > a{flex:1 1 auto;}
  .nav .sub-toggle{padding:11px 10px;margin-left:auto;}
  .nav .sub-menu{
    flex-basis:100%;width:100%;display:none;
    margin:0 0 6px 4px;padding:0 0 0 12px;border-left:2px solid var(--line);
  }
  .nav .menu-item-has-children.sub-open > .sub-menu{display:block;}
  .nav .menu-item-has-children.sub-open > .sub-toggle .caret{transform:rotate(-135deg);margin-top:2px;}
  .nav .sub-menu a{font-size:15.5px;padding:9px 0;}
  .nav .sub-menu a .u{display:none;}
  .menu-btn{display:block;}
  #site-header{position:static;}
  .filters{position:static;}
  .yeargroup .ylabel{position:static;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{order:-1;}
  .sec-head-in{flex-direction:column;align-items:flex-start;}
}
@media (max-width:640px){
  .cardgrid{grid-template-columns:1fr;gap:46px;}
}
@media (max-width:480px){
  body{font-size:16px;}
  .row a.row-link{grid-template-columns:1fr;}
  .row .thumb{display:none;}
  .foot-inner{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .row a.row-link:hover .thumb img,
  .card .card-link:hover .card-img img,
  .feature a:hover .fimg img,
  .btn:hover .arrow{transform:none !important;}
  #reading-progress{transition:none !important;}
}

/* =====================================================================
   ===============  V1.2 CHANGES (client feedback)  ====================
   ===================================================================== */

/* ---- Two-row top navigation (Editorial style), icon-only bigger logo ---- */
#site-header{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);
}
#site-header .mast{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:14px;padding-bottom:12px;
}
#site-header .brand img{height:46px;width:auto;}   /* logo slightly bigger, icon only */
/* Desktop only: on scroll, slide the whole header up by exactly the logo-row height
   so only the nav row remains at the top. Uses transform (NO layout reflow) so it is
   perfectly smooth and never jitters near the threshold. --mast-h is set from JS. */
@media (min-width:761px){
  #site-header{transition:transform .32s ease, box-shadow .3s ease;will-change:transform;}
  #site-header.compact{
    transform:translateY(calc(-1 * var(--mast-h, 72px)));
    box-shadow:0 8px 20px -14px rgba(47,60,76,.45);
  }
  #site-header.compact .navrow{border-top-color:transparent;}
}
/* ---- Logged-in WordPress admin bar: keep sticky/fixed chrome BELOW it so the
   header never tucks behind the black admin bar while scrolling. Visitors are
   not logged in, so they never get the `.admin-bar` body class and the plain
   top:0 rules above apply unchanged (works perfectly with no admin bar). ---- */
.admin-bar #site-header{top:32px;}
.admin-bar .filters{top:96px;}          /* 64 + 32 */
.admin-bar .yeargroup .ylabel{top:172px;} /* 140 + 32 */
.admin-bar #reading-progress{top:32px;}
@media screen and (max-width:782px){
  .admin-bar #site-header{top:46px;}     /* the admin bar is 46px tall here */
  .admin-bar #reading-progress{top:46px;}
}
.mainsite{
  font-size:13.5px;color:var(--slate);white-space:nowrap;position:relative;padding-bottom:2px;
}
.mainsite .ar{margin-left:3px;font-size:11px;}
.mainsite::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--yellow);transition:width .25s ease;}
.mainsite:hover{color:var(--navy);} .mainsite:hover::after{width:100%;}
.navrow{border-top:1px solid var(--line);}
.navrow-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:11px;padding-bottom:11px;}
/* Tagline: readable Rubik with letter-spacing (client V1.2 — was hard-to-read serif italic) */
.tagline{font-family:var(--sans);font-style:normal;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;color:var(--slate);white-space:nowrap;}
/* nav links (row 2): reuse .nav / .nav a underline (now yellow via --teal) */

/* ---- Homepage hero with banner image ---- */
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,68px);align-items:center;}
.hero-text .lede{max-width:42ch;}
.hero-media{aspect-ratio:4/3.4;overflow:hidden;border-radius:16px;background:var(--pale-cyan);}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero h1 .ul{border-bottom-color:var(--yellow);}   /* underline = yellow */

/* ---- Filter bar with search ---- */
.filters{position:static;}   /* avoid stacking under the two-row sticky header */
.filters-in{display:flex;align-items:center;justify-content:space-between;gap:14px 22px;flex-wrap:wrap;padding-top:15px;padding-bottom:15px;}
.filters-in .chips{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:center;}
.search{position:relative;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--slate);}
.search:focus-within{border-color:var(--navy);}
.search input{border:none;outline:none;background:none;font-family:inherit;font-size:14px;color:var(--navy);width:clamp(120px,20vw,190px);}
.search input::placeholder{color:var(--slate);}
/* realtime search dropdown */
.search-results{
  position:absolute;top:calc(100% + 10px);right:0;min-width:min(360px,86vw);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 22px 50px -20px rgba(47,60,76,.38);padding:6px;z-index:60;
  max-height:min(60vh,420px);overflow:auto;
}
.search-results[hidden]{display:none;}
.sr-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:9px;}
.sr-item:hover,.sr-item:focus-visible{background:var(--pale-cyan);}
.sr-t{font-weight:500;color:var(--navy);font-size:14.5px;line-height:1.3;}
.sr-m{font-size:12px;color:var(--slate);letter-spacing:.01em;}
.sr-empty{margin:0;padding:12px;color:var(--slate);font-size:14px;}

/* ---- Section listing pages (Elphie's Notes / Codie's POV / …) ---- */
#section-head{padding:clamp(44px,8vh,88px) 0 clamp(20px,3vh,32px);}
.sec-head-in{display:flex;align-items:center;gap:clamp(20px,4vw,44px);}
.sec-head-in .mascot{height:clamp(96px,13vw,150px);width:auto;flex:none;}
.sec-head-text .eyebrow{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);
  font-weight:500;margin:0 0 14px;display:inline-flex;align-items:center;gap:12px;
}
.sec-head-text .eyebrow::before{content:"";width:32px;height:1.5px;background:var(--yellow);display:inline-block;}
.sec-head-text .lead{
  margin:0 0 10px;font-weight:400;letter-spacing:-.015em;line-height:1.05;
  font-size:clamp(30px,4.6vw,54px);color:var(--navy);
}
.sec-head-text p{margin:6px 0 0;color:var(--slate);font-size:clamp(16px,1.7vw,19px);max-width:52ch;}

/* ---- Footer: mission text + Contact column + social badges ---- */
#site-footer{border-top:1px solid var(--line);background:var(--offwhite);}
#site-footer .brand img{height:44px;width:auto;}
#site-footer .foot-brand .brand{margin-bottom:16px;display:inline-flex;}
.foot-brand .mission{margin:0;color:var(--slate);font-size:14.5px;line-height:1.65;max-width:34ch;}
.foot-contact .fc-line{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;color:var(--slate);font-size:14.5px;line-height:1.5;}
.foot-contact .fc-ic{flex:none;margin-top:2px;color:var(--slate);}
.foot-contact a{color:var(--slate);} .foot-contact a:hover{color:var(--navy);}
.fsocial{display:flex;gap:10px;margin-top:16px;}
.fsocial a{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--indigo);border:1px solid var(--line);transition:.18s;
}
.fsocial a:hover{background:var(--yellow);color:var(--navy);border-color:var(--yellow);}

/* ---- Single post: reading progress bar ---- */
#reading-progress{
  position:fixed;top:0;left:0;right:0;height:3px;background:var(--yellow);
  transform:scaleX(0);transform-origin:0 50%;z-index:60;transition:transform .08s linear;
}

/* ---- Related list rows: keep single-column ---- */
.related .rows .row a.row-link{grid-template-columns:1fr;padding:20px 0;}

/* ---- Responsive overrides for the V1.2 additions (must come AFTER the base
   rules above so they win inside the media query) ---- */
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{order:-1;aspect-ratio:16/10;margin-bottom:6px;}
  .sec-head-in{flex-direction:column;align-items:flex-start;gap:20px;}
  .filters-in{flex-direction:column;align-items:stretch;gap:12px;}
  .search input{width:100%;}
}