/* Blog page hero (owner's choice, 5 Oct 2026): a compact centred headline in the homepage's family over a soft
   dome of warm light, which rises from one short bar of light; a glint slides along the bar from left to right.
   He saw the full "Glass cards" page live and kept only this hero: the post cards below it are the site's own
   (blog.css), pictures included. Loaded by the Blog page only. Every hero rule lives under .hero-ledger. */

/* ================================================================== hero */

/* ---- calm ground: one compact centred column, so the first posts show on the first screen ---- */
.hero-ledger{
  color-scheme:dark; /* forced dark modes would invert the headline gradient */
  --gl-ease:cubic-bezier(0.22,1,0.36,1);
  --gl-cycle:6.6s; /* one glint every 6.6s */
  --gl-loop:2.6s;  /* the loop waits for the entrance to finish */
  display:flex;flex-direction:column;align-items:center;text-align:center;
  min-height:0;
  padding-block:clamp(22px,3.6vh,40px) clamp(30px,4.4vh,48px);padding-inline:8px;margin-inline:-8px;
  overflow:clip
}
.hero-ledger::before{display:none}
.hero-ledger .lh-rule{display:none}

/* ---- the mast: one glass capsule, the jump link a lit segment inside it ---- */
.hero-ledger .lh-mast{
  display:inline-flex;align-items:center;gap:14px;max-width:100%;
  margin:0;padding:5px 5px 5px 16px;border-radius:999px;
  background:linear-gradient(180deg,rgba(241,239,232,0.075),rgba(241,239,232,0.025));
  border:1px solid rgba(241,239,232,0.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 12px 32px -14px rgba(0,0,0,0.8);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)
}
.hero-ledger .lh-kicker{gap:10px;font-size:0.66rem;font-weight:600;letter-spacing:0.2em;color:#a6a195}
.hero-ledger .lh-kicker::before{width:6px;height:6px;box-shadow:0 0 10px rgba(255,107,0,0.85)}
.hero-ledger .lh-hair{flex:none;width:1px;height:14px;background:rgba(241,239,232,0.16)}
.hero-ledger .lh-jump{
  gap:6px;min-height:30px;padding:0 13px;border-radius:999px;
  font-size:0.76rem;font-weight:600;letter-spacing:0.01em;color:#ece9e1;
  background:rgba(241,239,232,0.07);border:1px solid rgba(241,239,232,0.1);
  transition:border-color 0.3s var(--gl-ease),color 0.3s var(--gl-ease)
}
.hero-ledger .lh-jump span{color:#ff8a33}
.hero-ledger .lh-jump:hover{color:#fff;border-color:rgba(255,138,51,0.55)}

/* ---- headline: General Sans 600, one sentence balanced over two rows ---- */
.hero-ledger .mega-title{
  position:relative;z-index:1;
  font-family:var(--font-display);font-weight:600;font-style:normal;font-variation-settings:normal;
  font-size:clamp(2.4rem,4.7vw,5rem);line-height:1.06;letter-spacing:-0.034em;
  max-width:13em;margin-top:clamp(22px,3.2vh,34px);text-wrap:balance;color:#f1efe8
}
.hero-ledger .mega-title .line,
.hero-ledger .mega-title .line>span{display:inline;overflow:visible;padding-block:0}
.hero-ledger .mega-title .line .accent{
  display:inline;white-space:nowrap;
  font-family:inherit;font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit
}

/* metallic sheen, white at the top of each row and warm grey at the foot.
   Without JavaScript each row of the line carries it (clone); once motion.js
   splits the words, each word carries its own copy. */
.hero-ledger .mega-title .line>span,
.hero-ledger .mega-title .line .swi{
  background-image:linear-gradient(180deg,#ffffff 8%,#f6f3ec 44%,#c4bdb1 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
.hero-ledger .mega-title .line>span{background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-ledger .mega-title .line .swi{background-size:100% 100%;padding-bottom:0.06em;margin-bottom:-0.06em}
.hero-ledger .mega-title .line:nth-child(n)>span:has(.sw){background-image:none}
/* the accent: same sans, lit orange from above */
.hero-ledger .mega-title .line:nth-child(n) .accent,
.hero-ledger .mega-title .line:nth-child(n) .accent .swi{
  background-image:linear-gradient(180deg,#ffb347 4%,#ff8a33 46%,#ff6b00 92%);background-size:100% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone
}
.hero-ledger .mega-title .line:nth-child(n) .accent:has(.sw){background-image:none}

/* ---- the light: a short bar under the headline, a dome of warm light rising from it ---- */
.hero-ledger>.gl-light{
  position:relative;z-index:0;flex:none;display:block;
  width:min(320px,56%);height:1px;margin-top:clamp(24px,3.4vh,34px);pointer-events:none
}
.hero-ledger .gl-light>span{position:absolute;display:block}
/* the dome: a wide ellipse centred on the bar; its lower half is masked away, so the light only rises */
.hero-ledger .gl-dome{
  --w:min(1240px,100vw);
  left:50%;top:-300px;width:var(--w);height:601px;margin-left:calc(var(--w) / -2);
  background:
    radial-gradient(34% 3% at 50% 50%,rgba(255,232,210,0.55),rgba(255,184,120,0.18) 55%,rgba(255,150,70,0) 100%),
    radial-gradient(50% 50% at 50% 50%,rgba(255,122,26,0.29) 0%,rgba(255,112,12,0.18) 24%,rgba(255,107,0,0.085) 50%,rgba(255,107,0,0.026) 76%,rgba(255,107,0,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,0.3) 53%,rgba(0,0,0,0.1) 62%,transparent 74%);
  mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,0.3) 53%,rgba(0,0,0,0.1) 62%,transparent 74%)
}
/* the bar: white-hot in the middle, warm toward the ends, gone at both ends */
.hero-ledger .gl-bar{
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(255,150,70,0),rgba(255,170,100,0.7) 22%,#fff1e2 50%,rgba(255,170,100,0.7) 78%,rgba(255,150,70,0))
}
/* the glint: a white core on the bar inside a soft warm bloom; it rests unseen until the loop runs */
.hero-ledger .gl-glint{
  left:0;top:-18px;width:100%;height:37px;opacity:0;transform:translateX(-50%);
  background:
    linear-gradient(90deg,rgba(255,255,255,0) 41%,#fffaf3 50%,rgba(255,255,255,0) 59%) 50% 50% / 100% 2px no-repeat,
    radial-gradient(13% 50% at 50% 50%,rgba(255,240,222,0.85),rgba(255,176,104,0.32) 42%,rgba(255,122,26,0.08) 70%,rgba(255,107,0,0) 100%)
}

/* ---- opening paragraph: small and quiet ---- */
.hero-ledger>.lh-sub{
  margin-top:clamp(22px,3vh,30px);max-width:44em;
  font-size:clamp(0.98rem,1.06vw,1.06rem);line-height:1.6;font-weight:400;color:#9d988d;text-wrap:balance
}

/* ---- the shelf: buttons like the homepage, facts quiet underneath ---- */
.hero-ledger .lh-shelf{
  display:flex;flex-direction:column;align-items:center;gap:0;width:100%;
  margin-top:clamp(24px,3.4vh,34px);padding:0;border:0
}
.hero-ledger .lh-ctas{justify-content:center;gap:12px 14px}
.hero-ledger .btn-hero{
  min-height:50px;padding:0 28px;background:linear-gradient(180deg,#ff8f3a 0%,#ff6b00 100%);color:#1a0d02;
  box-shadow:inset 0 1px 0 rgba(255,232,205,0.55),inset 0 -1px 0 rgba(110,36,0,0.25),0 12px 34px -12px rgba(255,107,0,0.75)
}
.hero-ledger .btn-hero:hover{box-shadow:inset 0 1px 0 rgba(255,232,205,0.6),inset 0 -1px 0 rgba(110,36,0,0.25),0 16px 44px -12px rgba(255,107,0,0.9)}
.hero-ledger .lh-ghost{
  min-height:50px;padding:0 27px;color:var(--ink);border:1px solid rgba(241,239,232,0.16);
  background:linear-gradient(180deg,rgba(241,239,232,0.06),rgba(241,239,232,0.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 10px 30px -14px rgba(0,0,0,0.7);
  -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%)
}
.hero-ledger .lh-ghost:hover{border-color:rgba(255,138,51,0.6);color:#fff}
.hero-ledger .lh-facts{margin:clamp(20px,3vh,28px) 0 0;justify-content:center;gap:10px 40px}
.hero-ledger .lh-facts li{font-size:0.86rem;color:#8f8a80}
.hero-ledger .lh-facts b{color:#ece9e1}

/* ---- hero motion ---- */
@keyframes gl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gl-dawn{from{opacity:0;transform:translateY(7%) scale(0.88)}}
@keyframes gl-draw{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
/* the glint crosses the bar in the first 28% of the cycle, then rests */
@keyframes gl-glint{
  0%{transform:translateX(-50%);opacity:0}
  5%{opacity:1}
  23%{opacity:1}
  28%{transform:translateX(50%);opacity:0}
  100%{transform:translateX(50%);opacity:0}
}

@media (prefers-reduced-motion:no-preference){
  /* the site's own title choreography is replaced by the word rise below */
  html.motion-on .hero-ledger .mega-title{animation:none}
  html.motion-on .hero-ledger .mega-title .line>span{transform:none;animation:none;opacity:1;filter:none}
  html.motion-on .hero-ledger .lh-shelf{animation:none} /* its buttons and facts rise on their own */

  /* before the curtain lifts: everything waits, unlit */
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .hero-ledger :is(.lh-mast,.lh-ctas,.lh-facts,.gl-dome,.gl-bar),
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .hero-ledger>.lh-sub{opacity:0;animation:none}

  /* the words rise and sharpen (motion.js wraps them in .sw/.swi) */
  html.motion-on .hero-ledger .mega-title .swi{
    transition:transform 1.1s var(--gl-ease) var(--swd,0ms),opacity 1.1s var(--gl-ease) var(--swd,0ms),filter 1.25s var(--gl-ease) var(--swd,0ms)
  }
  html.motion-on:is(.si-intro,.si-quick):not(.si-revealed) .hero-ledger .mega-title .swi,
  html.motion-on .hero-ledger .mega-title:not(.sw-in) .swi{opacity:0;filter:blur(12px);transform:translateY(0.42em)}

  /* the entrance: the dome rises, the bar draws out from its centre, the rest settles in */
  html.motion-on.si-revealed .hero-ledger .lh-mast{animation:gl-rise 0.9s var(--gl-ease) 0.05s backwards}
  html.motion-on.si-revealed .hero-ledger .gl-dome{animation:gl-dawn 1.4s var(--gl-ease) 0.15s backwards}
  html.motion-on.si-revealed .hero-ledger .gl-bar{animation:gl-draw 1.1s cubic-bezier(0.45,0.05,0.25,1) 0.5s backwards}
  html.motion-on.si-revealed .hero-ledger>.lh-sub{animation:gl-rise 1s var(--gl-ease) 0.35s backwards}
  html.motion-on.si-revealed .hero-ledger .lh-ctas{animation:gl-rise 1s var(--gl-ease) 0.6s backwards}
  html.motion-on.si-revealed .hero-ledger .lh-facts{animation:gl-rise 1s var(--gl-ease) 0.8s backwards}

  /* the loop: one glint every 6.6s, left to right */
  html.motion-on.si-revealed .hero-ledger .gl-glint{animation:gl-glint var(--gl-cycle) linear var(--gl-loop) infinite}
  /* off screen, the loop rests (blog-hero.js toggles .gl-idle) */
  html.motion-on.si-revealed .hero-ledger.gl-idle .gl-glint{animation-play-state:paused}
}

/* ================================================================ tablet */
@media (max-width:1099px) and (min-width:701px){
  .hero-ledger{padding-block:clamp(22px,3vh,36px) clamp(30px,4vh,44px)}
  .hero-ledger .mega-title{font-size:clamp(2.6rem,6vw,4.2rem)}
}

/* ================================================================= phone */
@media (max-width:700px){
  .hero-ledger{padding-block:20px 30px}
  .hero-ledger .lh-mast{flex-direction:column;gap:10px;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-ledger .lh-hair{display:none}
  .hero-ledger .lh-kicker{display:block;font-size:0.6rem;line-height:1.7;letter-spacing:0.14em;text-wrap:balance}
  .hero-ledger .lh-kicker::before{display:inline-block;vertical-align:middle;margin:-2px 9px 0 0}
  .hero-ledger .lh-jump{min-height:36px;padding:0 15px;font-size:0.78rem;
    background:linear-gradient(180deg,rgba(241,239,232,0.075),rgba(241,239,232,0.025));border-color:rgba(241,239,232,0.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)}
  .hero-ledger .mega-title{font-size:clamp(2.1rem,10vw,2.7rem);line-height:1.07;margin-top:20px}
  .hero-ledger>.gl-light{width:min(220px,62%);margin-top:24px}
  .hero-ledger .gl-dome{top:-200px;height:401px}
  .hero-ledger>.lh-sub{margin-top:20px;font-size:0.97rem;line-height:1.58}
  .hero-ledger .lh-shelf{margin-top:24px}
  .hero-ledger .lh-ctas{width:100%;gap:10px 8px}
  .hero-ledger .btn-hero{padding:0 14px;font-size:0.88rem}
  .hero-ledger .lh-ghost{padding:0 14px;font-size:0.88rem}
  .hero-ledger .lh-facts{margin-top:22px;gap:6px 20px}
  .hero-ledger .lh-facts li{font-size:0.82rem}
}

/* ---- print / save as PDF: backgrounds are dropped, so the headline takes solid colours ---- */
@media print{
  .hero-ledger .mega-title .line:nth-child(n)>span,
  .hero-ledger .mega-title .line:nth-child(n) .swi,
  .hero-ledger .mega-title .line:nth-child(n) .accent,
  .hero-ledger .mega-title .line:nth-child(n) .accent .swi{background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
  .hero-ledger .mega-title .line:nth-child(n) .accent,
  .hero-ledger .mega-title .line:nth-child(n) .accent .swi{color:var(--orange)}
  .hero-ledger>.gl-light{display:none}
  /* the site's scroll-driven reveals would leave the cards and the "Everything else" heading invisible on paper */
  html.motion-on main.page .journal-card.reveal,
  html.motion-on main.page #queue .entries-head.reveal,
  main.page>section,
  main.page #queue .entries-head>h2,
  main.page #queue .entries-head>h2::before{animation:none;opacity:1;transform:none}
  main.page #queue .entries-head>h2 .sw{overflow:visible}
  main.page #queue .entries-head>h2 .swi{transform:none;opacity:1;filter:none}
}

/* ---- Windows high contrast: solid text gets backplates, so the rows need more leading ---- */
@media (forced-colors:active){.hero-ledger .mega-title{line-height:1.2}}