/* Daylight blog (/blog/) — Reading Room.
   Scoped to #dlblog so it cannot reach the header, footer, the homepage
   or any single post.

   The tokens are declared here rather than inherited: daylight-home.css
   loads ONLY on the homepage (verified in Batch 99B), so :root would be
   undefined on this template and every var() would fall back to nothing.
   Values are copied verbatim from daylight-home.css. */
:root{
  --bg:#fcfaf7; --surface:#ffffff; --raised:#fffdfb;
  --sand:#f7f2ea; --sand-2:#f1ebe1;
  --sage:#5e8c77; --sage-deep:#3f6b58; --sage-darker:#2f5343;
  --sage-tint:#e6efe9; --sage-tint-2:#f0f6f2; --sage-line:#d7e6de;
  --peach:#e9a07b; --peach-deep:#b86f4a; --peach-tint:#fbeee5; --peach-line:#f3ddcc;
  --sky:#7fa9c4; --sky-tint:#e7eff4;
  --ink:#2e3335; --body:#5b6264; --muted:#5f6866;
  --line:#ece5db; --line-2:#f4efe7;
  --sh-1:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(92,74,58,.05), 0 4px 12px -5px rgba(92,74,58,.12);
  --sh-2:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(92,74,58,.06), 0 12px 26px -10px rgba(92,74,58,.16);
  --sh-3:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(92,74,58,.07), 0 26px 52px -18px rgba(92,74,58,.22);
  --sh-4:inset 0 1px 0 rgba(255,255,255,.95), 0 3px 8px rgba(92,74,58,.07), 0 44px 88px -28px rgba(92,74,58,.28);
  --wrap:1240px; --gut:clamp(20px,4.5vw,40px);
  --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px; --r-2xl:44px;
  --ease:cubic-bezier(.22,.9,.3,1);
}

#dlblog *,#dlblog *::before,#dlblog *::after{box-sizing:border-box}

/* The theme's constrained layout gives this group max-width:90% with BOTH
   side margins at 0, which pins it flush left and piles the whole gutter
   on the right (measured 20px left / 57px right at 375). Same defect the
   homepage had. Full width here; .wrap below does the centring. */
#dlblog{margin:0 auto!important;max-width:100%!important;
  background:var(--bg);position:relative;color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.68;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv05"}
#dlblog > *{max-width:100%!important;margin-left:auto!important;margin-right:auto!important}

#dlblog::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}

#dlblog a{color:inherit}
#dlblog img{max-width:100%;display:block}
#dlblog .wrap{max-width:var(--wrap);margin-left:auto;margin-right:auto;
  padding-left:var(--gut);padding-right:var(--gut);position:relative;z-index:2}

/* typography lock — the theme sets font-family and color directly on
   headings, and a direct declaration always beats an inherited one. */
#dlblog,#dlblog h1,#dlblog h2,#dlblog h3,#dlblog h4,#dlblog p,#dlblog a,
#dlblog span,#dlblog div,#dlblog li,#dlblog time,#dlblog input,#dlblog button{
  font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif!important}
#dlblog h1,#dlblog h2,#dlblog h3,#dlblog h4{
  color:var(--ink)!important;letter-spacing:-.022em;line-height:1.16;margin:0}
#dlblog h1{font-size:clamp(2.1rem,4.6vw,3.3rem)!important;font-weight:800!important}
#dlblog h2{font-size:clamp(1.55rem,2.6vw,2.15rem)!important;font-weight:800!important}
#dlblog p{margin:0}

/* ── hero ─────────────────────────────────────────────────────────── */
#dlblog .b-hero{padding:64px 0 52px;position:relative;overflow:hidden}
#dlblog .b-hero::before{content:"";position:absolute;width:760px;height:560px;left:50%;top:-320px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--sage-tint) 0,transparent 72%);opacity:.9}
#dlblog .b-hero .in{position:relative;z-index:2;text-align:center;max-width:800px;margin:0 auto}
#dlblog .b-hero h1{margin:18px 0 16px}
#dlblog .b-hero h1 em{font-style:normal;color:var(--sage-deep)!important}
#dlblog .b-hero .lead{color:var(--body);font-size:1.06rem;max-width:58ch;margin:0 auto 30px}
#dlblog .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  background:var(--sage-tint);color:var(--sage-deep);font-size:.79rem;font-weight:700}
#dlblog .pill i{width:6px;height:6px;border-radius:50%;background:var(--sage);font-style:normal}
#dlblog .b-stats{display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}
#dlblog .b-stats span{font-size:.83rem;font-weight:700;color:var(--body);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;box-shadow:var(--sh-1)}

/* search — posts through WordPress core search */
#dlblog .sbox{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:7px 7px 7px 20px;
  box-shadow:var(--sh-2);max-width:540px;margin:0 auto}
#dlblog .sbox svg{width:19px;height:19px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
#dlblog .sbox input{flex:1;border:0;outline:0;background:none;font:inherit;
  font-size:.97rem;color:var(--ink);min-width:0}
#dlblog .sbox button{border:0;background:var(--sage-deep);color:#fff;border-radius:999px;
  padding:12px 24px;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;flex:none}

/* ── section head ─────────────────────────────────────────────────── */
#dlblog .sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin:16px 0 28px;flex-wrap:wrap}
#dlblog .sec-head h2{margin:14px 0 0}
#dlblog .sec-head .cnt{color:var(--muted);font-size:.92rem;font-weight:600}

/* ── the query loop, restyled into Reading Room cards ─────────────── */
#dlblog .wp-block-query{margin:0}
#dlblog .wp-block-post-template{display:grid;grid-template-columns:repeat(2,1fr);
  gap:30px;list-style:none;margin:0;padding:0}
#dlblog .wp-block-post{display:flex;flex-direction:column;margin:0!important;
  background:var(--raised);border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
#dlblog .wp-block-post:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}

/* DOM order is title, date-group, image, excerpt, button — reorder it */
#dlblog .wp-block-post .wp-block-post-featured-image{order:1;margin:0;
  aspect-ratio:16/8.4;overflow:hidden;background:var(--sand-2)}
#dlblog .wp-block-post .wp-block-post-featured-image a,
#dlblog .wp-block-post .wp-block-post-featured-image img{
  width:100%;height:100%;display:block;object-fit:cover}
#dlblog .wp-block-post .wp-block-post-featured-image img{
  transition:transform .6s var(--ease)}
#dlblog .wp-block-post:hover .wp-block-post-featured-image img{transform:scale(1.045)}
#dlblog .wp-block-post > .wp-block-group{order:2;margin:0;padding:22px 26px 0}
#dlblog .wp-block-post .wp-block-post-title{order:3;margin:10px 0 10px;padding:0 26px;
  font-size:1.18rem!important;font-weight:800!important;line-height:1.28!important}
#dlblog .wp-block-post .wp-block-post-title a{text-decoration:none;color:var(--ink)!important}
#dlblog .wp-block-post:hover .wp-block-post-title a{color:var(--sage-deep)!important}
#dlblog .wp-block-post .wp-block-post-excerpt{order:4;margin:0;padding:0 26px;flex:1}
#dlblog .wp-block-post .wp-block-post-excerpt__excerpt{color:var(--body)!important;
  font-size:.94rem!important;line-height:1.62}
#dlblog .wp-block-post .wp-block-post-excerpt__more-text{display:none}
#dlblog .wp-block-post .wp-block-buttons{order:5;margin:18px 0 0;padding:15px 26px 24px;
  border-top:1px solid var(--line-2)}

/* date chip */
#dlblog .wp-block-post .wp-block-post-date{margin:0;font-size:.82rem!important;
  color:var(--muted)!important;font-weight:600}
#dlblog .wp-block-post .wp-block-post-date a,#dlblog .wp-block-post .wp-block-post-date time{
  color:var(--muted)!important;text-decoration:none}

/* "Read More" restyled as the Daylight text link */
#dlblog .wp-block-post .wp-block-button__link{
  background:none!important;background-color:transparent!important;
  color:var(--sage-deep)!important;padding:0!important;border:0!important;
  border-radius:0!important;font-size:.9rem!important;font-weight:800!important;
  box-shadow:none!important;display:inline-flex;align-items:center;gap:8px}
#dlblog .wp-block-post .wp-block-button__link::after{content:"\2192";
  font-style:normal;transition:transform .34s var(--ease);display:inline-block}
#dlblog .wp-block-post:hover .wp-block-button__link::after{transform:translateX(6px)}

/* ── lead story: the first card spans the row, PAGE 1 ONLY ─────────
   WordPress adds body.paged on /blog/page/2/ and beyond, so gating on
   body:not(.paged) keeps the featured treatment for the genuinely
   newest post and leaves pages 2-7 as a uniform grid. */
body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child{
  grid-column:1/-1;display:grid;align-content:center;
  grid-template-columns:1.12fr .88fr;
  grid-template-areas:"img meta" "img title" "img exc" "img btn";
  box-shadow:var(--sh-3)}
body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child:hover{box-shadow:var(--sh-4)}
body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child .wp-block-post-featured-image{
  grid-area:img;aspect-ratio:auto;height:100%;min-height:340px}
body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child > .wp-block-group{
  grid-area:meta;padding:0 44px}
body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child .wp-block-post-title{
  grid-area:title;padding:0 44px;margin:14px 0 14px;
  font-size:clamp(1.5rem,2.3vw,2rem)!important;line-height:1.16!important}
body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child .wp-block-post-excerpt{
  grid-area:exc;padding:0 44px;flex:none}
body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child .wp-block-post-excerpt__excerpt{
  font-size:1rem!important}
body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child .wp-block-buttons{
  grid-area:btn;border-top:0;padding:0 44px;margin-top:22px}

/* ── pagination ───────────────────────────────────────────────────── */
#dlblog .wp-block-query-pagination{display:flex;justify-content:center;align-items:center;
  gap:8px;margin-top:56px;flex-wrap:wrap}
#dlblog .wp-block-query-pagination .page-numbers,
#dlblog .wp-block-query-pagination a{min-width:44px;height:44px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:12px;text-decoration:none;
  font-weight:700;font-size:.95rem;background:var(--surface);border:1px solid var(--line);
  color:var(--body)!important;box-shadow:var(--sh-1);padding:0 14px;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
#dlblog .wp-block-query-pagination .page-numbers.current{
  background:var(--sage-deep);border-color:var(--sage-deep);color:#fff!important}
#dlblog .wp-block-query-pagination a:hover{
  color:var(--sage-deep)!important;border-color:var(--sage-line)}
#dlblog .wp-block-query-pagination .page-numbers.dots{
  border:0;background:none;box-shadow:none;min-width:22px;padding:0}

/* ── reveal on scroll — same contract as the homepage ─────────────── */
html.js-anim #dlblog .rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js-anim #dlblog .rv.in,
#dlblog .rv.in{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  html.js-anim #dlblog .rv{opacity:1!important;transform:none!important;transition:none!important}
  #dlblog .wp-block-post,#dlblog .wp-block-post .wp-block-post-featured-image img{transition:none!important}
}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:980px){
  body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child{
    grid-template-columns:1fr;grid-template-areas:"img" "meta" "title" "exc" "btn"}
  body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child .wp-block-post-featured-image{
    min-height:0;aspect-ratio:16/8}
  body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child > .wp-block-group{padding:24px 28px 0}
  body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child .wp-block-post-title,
  body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child .wp-block-post-excerpt,
  body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child .wp-block-buttons{padding:0 28px}
  body:not(.paged) #dlblog .wp-block-post-template > .wp-block-post:first-child .wp-block-buttons{padding-bottom:26px}
}
@media (max-width:760px){
  #dlblog .wp-block-post-template{grid-template-columns:1fr;gap:24px}
  #dlblog .b-hero{padding:46px 0 40px}
  #dlblog .sec-head{margin:10px 0 22px}
}
@media (max-width:560px){
  #dlblog .sbox{padding-left:16px}
  #dlblog .sbox button{padding:11px 18px}
}