/* hero-1112 (2026-11-12): hero photo frame on inner pages, article cover in the first mobile screen,
   and the mobile sticky "Open the desk" bar. Loaded after the page stylesheets. */

/* inner-page hero photo, same treatment as the ledger on /pricing.html */
.hg-photo{margin:0 0 var(--s4);aspect-ratio:16/10;overflow:hidden;border:1px solid var(--seam);border-top-color:var(--face);background:var(--incise)}
.hg-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%;filter:grayscale(.3) contrast(1.04) brightness(.9);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,black 26%);mask-image:linear-gradient(90deg,transparent 0,black 26%)}
.bx-hero .hg-photo{aspect-ratio:2/1}

/* articles, desktop: a long intro pushed the wide data plate below the fold */
/* the left column under the catalogue card stays empty next to a long title, so it carries a square cut of the same plate */
.post-card .hg-side{display:none}
@media (min-width:1101px){
  .post > .wrap > .plate-art{margin-top:clamp(1.5rem,.5rem + 2vw,2.5rem)}
  .post-card .hg-side{display:block;aspect-ratio:1/1;margin-top:var(--s4)}
}

/* articles, phone: title, then the article's own data plate, then the intro and the catalogue card */
@media (max-width:760px){
  .post > .wrap{display:flex;flex-direction:column}
  .post .post-top,.post .post-head{display:contents}
  .post .crumbs{order:1}
  .post .post-head h1{order:2}
  .post > .wrap > .plate-art{order:3;aspect-ratio:2/1;margin-top:var(--s4)}
  .post .post-head .article-intro{order:4}
  .post .post-card{order:5;margin-top:var(--s4)}
  .post > .wrap > :not(.post-top):not(.plate-art){order:6}
  .hg-photo{aspect-ratio:16/10}
}

/* sticky lead bar: phones only, appears after 60% of the first screen (hero.js toggles .on) */
.hg-cta{display:none}
@media (max-width:760px){
  .hg-cta{position:fixed;z-index:110;left:10px;right:62px;bottom:calc(12px + env(safe-area-inset-bottom));
    display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:48px;padding:.55rem .9rem;
    background:var(--birch);color:var(--incise);border:1px solid var(--birch);text-decoration:none;
    box-shadow:0 10px 28px rgb(0 0 0 / .45);
    transform:translateY(140%);opacity:0;visibility:hidden;
    transition:transform .28s var(--ease-band),opacity .2s var(--ease-band),visibility 0s linear .28s}
  .hg-cta.on{transform:none;opacity:1;visibility:visible;transition:transform .28s var(--ease-band),opacity .2s var(--ease-band),visibility 0s}
  .hg-cta-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75;line-height:1.2}
  .hg-cta-v{font-family:var(--serif);font-size:1.0625rem;font-weight:500;white-space:nowrap}
  .hg-cta:focus-visible{outline:2px solid var(--slate-lit);outline-offset:3px}
  body.hg-cta-room{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){ .hg-cta,.hg-cta.on{transition:none} }
@media print{ .hg-cta{display:none!important} }