/* Journal article reader — v1.4.0 (2026-08-21)
   v1.4.0  The Journal joins the sitewide eyebrow system. .journal-kicker is
           retired; the masthead now uses .eyebrow.eyebrow--on-light, the same
           pairing index.asp:659 already uses for its "The Journal" block. The
           old class was a hand-rolled .eyebrow-sm -- same weight, size,
           tracking and casing -- but carried a drifted hardcoded #d0ad64 and a
           hardcoded Montserrat stack rather than the palette and font tokens.
           Visible change: the eyebrow gains the gold leading rule that
           .eyebrow draws via ::before. --on-light is required, not optional:
           .journal-reader-page sets an ivory background (--journal-ivory
           #f4eee3), and plain .eyebrow resolves to --color-gold-bright
           (#e0bf62), which would be near-invisible on it; --on-light resolves
           to --color-gold-muted (#9b7623). journal/index.asp is unchanged --
           its "The Journal" is the h1 itself, so an eyebrow above it would
           only repeat the heading. journal-print.asp loads neither site.css
           nor this file and is untouched.
   v1.3.2  Breadcrumb top alignment. The reader sat its breadcrumb 46px below the
           nav (masthead padding-top) while journal/index.asp sits its own 12px
           below, so the crumb jumped down when you opened an article. Masthead
           padding-top is now 12px at every breakpoint and the difference was
           added to .journal-breadcrumbs margin-bottom (60 / 68 / 42px), so the
           crumb moves up and nothing below it -- kicker, title, hero -- shifts.
   v1.3.1  Print: force black ink on .journal-prose descendants. The Editorial DB
           column is emitted verbatim by JournalText (no sanitising), so pasted body
           HTML can carry inline style="color" spans that printed in colour.
   v1.3.0  Print block rewritten. /journal/journal-print.asp is the real print
           route; this block now only has to make a direct Ctrl+P on the reader
           come out sane. Dropped the inherited body{font-size:.75rem!important},
           which fought the explicit px sizes on every .journal-* element and
           printed two competing scales. Added the live chrome hide-list (the old
           one still named .article-breadcrumbs / .related / .print-btn, none of
           which exist), break/orphan/widow control, and @page margins.
   v1.2.0  CSS consolidation. journal/view.asp carried a 418-line inline <style>
           left over from the retired static-article template. Not one of its
           class selectors matched the page markup any more (the reader is 100%
           journal-* classes), and it even carried a .filterbar block copy-pasted
           from journal/index.asp. Deleted from view.asp; what still did work
           moved here:
             - print rules: four contradicting @media print blocks collapsed into
               the single block at the foot of this file (behaviour preserved).
             - .lede / .mistake / .article-mistakes added next to .pro-tip as
               light-theme equivalents, in case DB-authored body HTML still uses
               them. The old definitions were dark-theme (.lede was #e7e0d2,
               near-white) and would have been invisible on the ivory reader.
   v1.1.0  Root class .journal-article -> .journal-reader-page. The old name
           collided with journal/index.asp, where .journal-article is a
           listing CARD (styled from that page's own inline block, which does
           not load this file). Renaming the reader root removes the ambiguity;
           /journal/view.asp is the only consumer and now sets
           body class="site journal-reader-page".
           Added img border-radius 8px in .journal-masthead / .journal-reading-field.
   v1.0.0  Initial journal article reader layout.
*/
.journal-reader-page{
  --journal-ink:#211d18;
  --journal-muted:#675f55;
  --journal-ivory:#f4eee3;
  --journal-paper:#fbf8f1;
  --journal-gold:#b99242;
  --journal-dark:#17130f;
  background:var(--journal-ivory);
  color:var(--journal-ink);
}

.journal-progress{
  position:fixed;
  z-index:1200;
  top:0;
  left:0;
  width:0;
  height:3px;
  background:var(--journal-gold,#b99242);
  pointer-events:none;
}

.journal-masthead{
  position:relative;
  overflow:hidden;
  padding:12px 24px 64px;
  background:
    radial-gradient(circle at 78% 20%,rgba(185,146,66,.13),transparent 34%),
    linear-gradient(145deg,#211b15 0%,var(--journal-dark) 62%,#0e0c0a 100%);
  color:#f8f2e7;
}

.journal-masthead__shell{max-width:1180px;margin:0 auto}
.journal-breadcrumbs{margin:0 0 60px;color:#c7bdad;font:14px/1.5 Montserrat,system-ui,sans-serif}
.journal-breadcrumbs a{color:inherit;text-decoration:none}
.journal-breadcrumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.journal-breadcrumbs__separator{padding:0 8px;color:#81786c}

.journal-masthead__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:center}
/* .journal-kicker retired 2026-08-21 -- the article masthead now uses the
   sitewide component, .eyebrow.eyebrow--on-light, the same pairing the
   homepage Journal block already uses at index.asp:659 with the same "The
   Journal" text. The old rule was a hand-rolled .eyebrow-sm: identical weight,
   size (14px = .875rem), tracking and casing, but with a drifted hardcoded
   #d0ad64 and a hardcoded Montserrat stack instead of the palette and font
   tokens. It also had no leading rule, which is the visible difference --
   .eyebrow draws one via ::before, .eyebrow-sm does not. */
.journal-title{max-width:820px;margin:0;color:#fff;font:500 clamp(40px,5.4vw,61px)/.98 'EB Garamond',Georgia,serif;letter-spacing:-.025em;text-wrap:balance}
.journal-lede{max-width:720px;margin:22px 0 0;color:#ddd3c4;font:400 clamp(18px,2vw,21px)/1.55 'EB Garamond',Georgia,serif}
.journal-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:24px;color:#bdb3a4;font:14px/1.45 Montserrat,system-ui,sans-serif}
.journal-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 18px 3px 0;border-radius:50%;background:#8d8375}
.journal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.journal-action{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:transparent;
  color:#fff;
  font:600 16px/1.25 Montserrat,system-ui,sans-serif;
  font-size:16px;
  text-decoration:none;
  cursor:pointer;
}
.journal-action:hover{border-color:var(--journal-gold);background:rgba(185,146,66,.12)}
.journal-action:focus-visible{outline:3px solid #e2c27d;outline-offset:3px}
.journal-share-status{align-self:center;color:#d8ccb9;font:14px/1.4 Montserrat,system-ui,sans-serif}

.journal-hero{margin:0}
.journal-hero img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;box-shadow:0 24px 54px rgba(0,0,0,.34)}
.journal-hero figcaption{margin-top:10px;color:#a99f90;font:14px/1.5 Montserrat,system-ui,sans-serif}

.journal-reading-field{padding:54px 24px 82px;background:var(--journal-ivory)}
.journal-reader-layout{display:grid;grid-template-columns:minmax(0,700px);justify-content:center;gap:36px;max-width:1180px;margin:0 auto}
.journal-reader-main{min-width:0}
.journal-prose{max-width:700px;color:var(--journal-ink);font:18px/1.76 'EB Garamond',Georgia,serif;font-size:18px;overflow-wrap:anywhere}
.journal-prose> :first-child{margin-top:0}
.journal-prose> :last-child{margin-bottom:0}
.journal-prose p,.journal-prose ul,.journal-prose ol,.journal-prose blockquote,.journal-prose figure,.journal-prose table{margin:0 0 1.25em}
.journal-prose h2{scroll-margin-top:108px;margin:2.15em 0 .65em;color:#18140f;font:500 clamp(30px,4vw,38px)/1.12 'EB Garamond',Georgia,serif;letter-spacing:-.012em}
.journal-prose h3{scroll-margin-top:108px;margin:1.7em 0 .55em;color:#211c16;font:600 25px/1.2 'EB Garamond',Georgia,serif}
.journal-prose a{color:#72571e;text-decoration-thickness:1px;text-underline-offset:3px}
.journal-prose img{max-width:100%;height:auto}
.journal-prose blockquote{padding:4px 0 4px 22px;border-left:3px solid var(--journal-gold);color:#4d4439;font-style:italic}
.article-intro{margin:0 0 2.2em;color:#3d372f;font-size:20px;line-height:1.68}
.article-tips{display:grid;gap:12px;margin:0 0 2em}
.pro-tip{padding:17px 18px;border-left:3px solid var(--journal-gold);background:#ebe2d1;color:#342e27}
/* Legacy body-HTML classes. DB-authored article HTML is injected into .journal-prose,
   so it may still carry class names from the old static-article template. These are
   light-theme equivalents; the originals were dark-theme and rendered near-white on
   this ivory reader (invisible). Keep until the journal body HTML is audited. */
.lede{margin:0 0 1.25em;color:#4d4439;font-style:italic}
.mistake{color:#8c2f22;font-style:italic}
.article-mistakes{margin:.25em 0 1.25em;padding-left:1.6em}

.journal-toc{font-family:Montserrat,system-ui,sans-serif}
.journal-toc h2,.journal-toc__summary{margin:0;color:#29231c;font:700 14px/1.35 Montserrat,system-ui,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.journal-toc ol{display:grid;gap:4px;margin:14px 0 0;padding:0;list-style:none}
.journal-toc a{display:block;padding:9px 0 9px 14px;border-left:2px solid #cfc4b1;color:#62594e;font-size:16px;line-height:1.4;text-decoration:none}
.journal-toc a:hover{color:#211d18;border-left-color:#8d7442}
.journal-toc a[aria-current="location"]{border-left-color:var(--journal-gold);color:#211d18;font-weight:700}
.journal-toc--desktop{display:none}
.journal-toc--mobile{display:none;margin:0 0 34px;border-top:1px solid #cfc4b1;border-bottom:1px solid #cfc4b1}
.journal-toc--mobile summary{padding:16px 2px;cursor:pointer;font-size:16px;list-style:none}
.journal-toc--mobile summary::-webkit-details-marker{display:none}
.journal-toc--mobile summary::after{content:"+";float:right;font-size:20px;font-weight:400}
.journal-toc--mobile[open] summary::after{content:"−"}
.journal-toc--mobile ol{padding:0 0 14px}

.journal-end{max-width:700px;margin:58px auto 0;padding-top:32px;border-top:1px solid #cfc4b1}
.journal-end__back{display:inline-flex;min-height:44px;align-items:center;color:#30291f;font:700 16px/1.3 Montserrat,system-ui,sans-serif;text-decoration:none}
.journal-end__back::before{content:"←";margin-right:9px}
.journal-end__back:hover{text-decoration:underline;text-underline-offset:4px}

.journal-products,.journal-related{max-width:980px;margin:64px auto 0}
.journal-products h2,.journal-related h2{margin:0 0 22px;color:#211d18;font:500 34px/1.1 'EB Garamond',Georgia,serif}
.journal-product-grid,.journal-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.journal-product-card,.journal-related-card{display:block;min-width:0;color:#211d18;text-decoration:none}
.journal-product-card img,.journal-related-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#e7dece}
.journal-card__body{padding:13px 2px 0}
.journal-card__title{font:500 21px/1.2 'EB Garamond',Georgia,serif}
.journal-card__meta{margin-top:5px;color:var(--journal-muted);font:14px/1.45 Montserrat,system-ui,sans-serif}
.journal-masthead img,.journal-reading-field img{border-radius:8px}

@media (min-width:760px){
  .journal-masthead{padding:12px 36px 76px}
  .journal-breadcrumbs{margin-bottom:68px}
  .journal-masthead__grid{grid-template-columns:minmax(0,1.05fr) minmax(320px,.75fr);gap:58px}
  .journal-reading-field{padding:70px 36px 100px}
}

@media (min-width:1100px){
  .journal-reader-layout{grid-template-columns:220px minmax(0,700px);gap:64px}
  .journal-toc--desktop{display:block;position:sticky;top:104px;align-self:start;max-height:calc(100vh - 132px);overflow:auto}
}

@media (max-width:1099px){
  .journal-toc--mobile{display:block}
}

@media (max-width:720px){
  .journal-masthead{padding:12px 20px 48px}
  .journal-breadcrumbs{margin-bottom:42px}
  .journal-reading-field{padding:40px 20px 68px}
  .journal-product-grid,.journal-related-grid{grid-template-columns:1fr}
  .journal-products,.journal-related{margin-top:50px}
}

@media (prefers-reduced-motion:reduce){
  .journal-reader-page *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Print. The real print route is /journal/journal-print.asp -- a chrome-free,
   print-first page reached from the Print action. This block only has to make
   a direct Ctrl+P on the reader itself come out sane, so it does the minimum:
   drop the chrome, put ink on white paper, and let the reader's own type
   sizes stand. It deliberately does NOT restate a type scale; the previous
   version inherited body{font-size:.75rem!important} from the old static
   template, which fought the explicit px sizes on every .journal-* element
   and printed a mix of two scales. */
@media print{
  .journal-progress,
  .journal-breadcrumbs,
  .journal-actions,
  .journal-toc,
  .journal-products,
  .journal-related,
  .journal-end,
  nav,[role="navigation"],.site-nav,footer,#footer{display:none!important}

  .journal-reader-page{background:#fff}
  body{background:#fff;color:#111;line-height:1.5}
  .journal-masthead,.journal-reading-field{padding:0;background:#fff;color:#111}
  /* Paper is black ink. The Editorial column is emitted verbatim (JournalText does
     no sanitising), so pasted body HTML can carry inline style="color:..." spans.
     !important is needed to beat an inline style. */
  .journal-prose,.journal-prose *{color:#111!important}
  .journal-prose .mistake{color:#8c2f22!important}
  .journal-title,.journal-prose h2,.journal-prose h3{break-after:avoid;page-break-after:avoid}
  .journal-prose p,.journal-prose li{orphans:3;widows:3}
  .journal-prose blockquote,.journal-prose figure,.journal-prose img,.pro-tip{break-inside:avoid;page-break-inside:avoid}
  .journal-prose img,.journal-hero img{max-height:7.2in;object-fit:contain}
  .pro-tip{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@page{margin:.65in .65in .75in}