/* page styles: journal.html */
/* journal — one featured post beside a sidebar list of the rest
       (More from the journal) plus Categories, built from the site's own
       primitives (.label/.dsp/.body, the gold accent, the pkgCard-style
       badge) rather than a multi-card grid. */
    .jrnHead{max-width:56ch;margin-bottom:clamp(36px,4.6vw,56px)}
    .jrnLayout{display:grid;grid-template-columns:1fr;max-width:860px;gap:clamp(32px,4vw,56px);align-items:start}
    @media (max-width:900px){.jrnLayout{grid-template-columns:1fr}}

    .jrnCard--featured .jrnCard__media{aspect-ratio:16/9}
    .jrnCard--featured .jrnCard__title{font-size:clamp(22px,2.4vw,30px);margin-bottom:12px}
    .jrnCard--featured .jrnCard__desc{font-size:15px;max-width:60ch}

    .jrnCard__media{
      position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
      background:var(--ink-lift);margin-bottom:16px;
    }
    .jrnCard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
    .jrnCard:hover .jrnCard__media img{transform:scale(1.05)}
    .jrnCard__brand{
      position:absolute;left:12px;top:12px;z-index:1;display:flex;align-items:center;gap:6px;
      font-size:11.5px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);
    }
    .jrnCard__brand img{width:18px;height:18px;display:block}
    .jrnCard__badge{
      position:absolute;right:12px;top:12px;z-index:1;
      background:var(--gold);color:var(--ink);font-size:10px;font-weight:700;
      letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
    }
    .jrnCard__title{margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
    .jrnCard__title a{color:inherit;text-decoration:none}
    .jrnCard__title a:hover{text-decoration:underline}
    .jrnCard__desc{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--muted-2)}
    .jrnCard__link{font-size:13.5px;font-weight:700;color:var(--accent);text-decoration:none}
    .jrnCard__link:hover{text-decoration:underline}

    .jrnSide__block + .jrnSide__block{margin-top:clamp(28px,3.6vw,40px)}
    .jrnSide__h{margin:0 0 18px;font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
    .jrnChips{display:flex;flex-wrap:wrap;gap:9px}
    .jrnChip{
      border:1px solid rgb(var(--deep-rgb) / .22);background:#fff;color:var(--deep);
      font-family:var(--f);font-size:12.5px;font-weight:600;text-decoration:none;
      padding:8px 15px;border-radius:999px;transition:border-color .25s var(--ease),color .25s var(--ease);
    }
    .jrnChip:hover{border-color:var(--accent);color:var(--accent)}
    .jrnPopular{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
    .jrnPopular a{display:flex;align-items:center;gap:12px;text-decoration:none}
    .jrnPopular__img{width:64px;height:52px;flex:none;border-radius:8px;overflow:hidden;background:var(--ink-lift)}
    .jrnPopular__img img{width:100%;height:100%;object-fit:cover;display:block}
    .jrnPopular__title{font-size:13.5px;font-weight:700;line-height:1.4;color:var(--ink)}
    .jrnPopular a:hover .jrnPopular__title{color:var(--accent)}

    /* the closing CTA doesn't need the full-viewport-ish height .band
       defaults to elsewhere on the site — this page's own content is
       short enough that the tall band read as an oversized full stop. */
    .jrnCta{height:clamp(500px,75vh,760px)}
    /* journal: every image is a placeholder slot until real content arrives */
    /* hero title a little smaller than the shared 134px max, and a soft shadow
       now that the photo carries no dark overlay */
    #main .band--hero .band__dsp{font-size:min(clamp(54px,12.5vw,112px),calc((100vw - 2 * var(--pad)) / var(--chars,6) / .7));text-shadow:0 2px 24px rgba(0,0,0,.45)}
    .jPh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#27474a,#0f2224)}
    .jPh span{font-size:clamp(10px,1.4vw,22px);font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.35)}
    .jrnPopular__img .jPh span{font-size:8px;letter-spacing:.06em}
    .band__figure.jPh--hero{inset:0;align-items:flex-start;padding-top:24vh}
    .jrnCard__media,.jrnPopular__img{position:relative}