/* ════════════════════════════════════════════════════════════════════════
   journal.css — Journal area styling.
   Brand tokens + chrome (top-bar / nav / buttons / footer / drawer) are
   mirrored from index.html so Journal pages are a faithful extension of the
   site. Journal-specific editorial styles follow under "JOURNAL" below.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --jd-purple:#320542;
  --jd-purple-2:#4a1660;
  --jd-purple-accent:#806296;
  --jd-ivory:#F9F7F2;
  --jd-ivory-2:#F2EEE6;
  --jd-cream:#FBF8F1;
  --jd-blush:#EBD9D6;
  --jd-dark:#1d0226;
  --jd-white:#FFFFFF;
  --jd-gold:#FFDB78;
  --jd-gold-deep:#C99A3F;
  --jd-line:rgba(50,5,66,.14);
  --jd-velvet:#1a0221;
  --jd-velvet-lift:#220330;
  --shadow-purple: 0 30px 60px -25px rgba(50,5,66,.45), 0 12px 24px -12px rgba(50,5,66,.25);
  --shadow-soft: 0 18px 40px -22px rgba(50,5,66,.35);
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Montserrat', sans-serif;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1320px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  background:var(--jd-ivory);
  color:var(--jd-dark);
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-weight:400;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{border:0;background:none;cursor:pointer;font-family:inherit}
.serif{font-family:var(--serif);letter-spacing:-.01em}
.eyebrow{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.32em;
  text-transform:uppercase;font-weight:600;color:var(--jd-gold-deep);
}
.eyebrow .dash{display:inline-block;width:32px;height:1px;background:currentColor;vertical-align:middle;margin-right:14px}

/* ── Top bar ── */

/* ── Nav ── */
/* Shown at every width, as on every other page. It was mobile-only while it
   was decorative furniture; a177 gave the journal the real shared drawer and
   the hamburger is now the way in to it, so hiding it above 900px left the
   journal the one page whose nav-tools row was a button short. */

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.9rem;font-family:var(--sans);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;border-radius:4px;cursor:pointer;transition:background .35s ease,color .35s ease,border-color .35s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.btn-gold{background:var(--jd-gold);color:var(--jd-purple);border:1px solid var(--jd-gold);box-shadow:0 18px 40px -16px rgba(255,219,120,.6)}
.btn-gold:hover{background:transparent;color:var(--jd-gold-deep);transform:translateY(-2px)}
.btn-purple{background:var(--jd-purple);color:var(--jd-ivory);border:1px solid var(--jd-purple)}
.btn-purple:hover{background:var(--jd-gold);color:var(--jd-purple);border-color:var(--jd-gold);transform:translateY(-2px)}
.btn-outline{background:transparent;border:1px solid var(--jd-purple);color:var(--jd-purple)}
.btn-outline:hover{background:var(--jd-purple);color:var(--jd-ivory);transform:translateY(-2px)}
.btn .arrow{display:inline-block;transition:transform .35s ease}
.btn:hover .arrow{transform:translateX(4px)}
.link-arrow{font-family:var(--sans);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--jd-gold-deep);display:inline-flex;align-items:center;gap:.5rem;transition:gap .3s ease,color .3s ease}
.link-arrow:hover{gap:.85rem;color:var(--jd-purple)}

/* ════════════════════════════════════════════════════════════════════════
   JOURNAL
   ════════════════════════════════════════════════════════════════════════ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ── Index hero ── */
.j-hero{padding-top:clamp(3.5rem,7vw,6.5rem);padding-bottom:clamp(2.5rem,4vw,3.5rem);text-align:center;border-bottom:1px solid var(--jd-line)}
.j-hero .eyebrow{display:inline-block;margin-bottom:1.4rem}
.j-hero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;line-height:.98;font-size:clamp(2.8rem,7vw,5.4rem);color:var(--jd-purple);margin:0 0 1.3rem}
.j-hero h1 em{font-style:italic;color:var(--jd-gold-deep)}
.j-hero p{max-width:46ch;margin:0 auto;font-size:1.02rem;line-height:1.7;color:#5a4664;font-weight:300}

/* ── Pillar filter chips ── */
/* .j-pillars / .j-chip removed at a194: the static bordered pills died with
   the merge — the live rail is .story-rail below, in the category pages'
   quiet chip form. */

/* ── Featured post ── */
.j-featured{padding:clamp(3rem,5vw,4.5rem) 0}
.j-featured a{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;gap:0;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-soft);background:var(--jd-white);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.j-featured a:hover{transform:translateY(-4px);box-shadow:var(--shadow-purple)}
.j-featured .img{position:relative;overflow:hidden;min-height:340px}
.j-featured .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.j-featured a:hover .img img{transform:scale(1.04)}
.j-featured .img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(50,5,66,.28),transparent 55%);mix-blend-mode:multiply}
.j-featured .body{padding:clamp(2rem,3.5vw,3.5rem);display:flex;flex-direction:column;justify-content:center}
.j-featured .tag{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--jd-gold-deep);margin-bottom:1rem}
.j-featured h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.9rem,3.2vw,2.9rem);color:var(--jd-purple);margin:0 0 1rem}
.j-featured p{font-size:.98rem;line-height:1.7;color:#5a4664;font-weight:300;margin:0 0 1.6rem;max-width:42ch}

/* ── Post grid ── */
.j-grid-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-top:1rem;margin-bottom:2rem;border-top:1px solid var(--jd-line)}
.j-grid-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.5vw,2.1rem);color:var(--jd-purple);margin:1.6rem 0 0;letter-spacing:-.01em}
.j-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,2.5vw,2.5rem);padding-bottom:clamp(4rem,7vw,7rem)}
.j-card{display:flex;flex-direction:column;background:var(--jd-white);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.j-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-purple)}
.j-card-img{position:relative;aspect-ratio:3/2;overflow:hidden}
.j-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.j-card:hover .j-card-img img{transform:scale(1.05)}
.j-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(50,5,66,.22),transparent 60%);mix-blend-mode:multiply}
.j-card-body{padding:1.6rem 1.6rem 1.9rem;display:flex;flex-direction:column;flex:1}
.j-card-cat{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--jd-gold-deep);margin-bottom:.8rem}
.j-card-title{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.15;font-size:1.42rem;color:var(--jd-purple);margin:0 0 .7rem}
.j-card-excerpt{font-size:.88rem;line-height:1.65;color:#5a4664;font-weight:300;margin:0 0 1.3rem;flex:1}
.j-card-meta{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--jd-purple-accent);font-weight:500;display:flex;gap:.6rem;align-items:center}
.j-card-meta .sep{opacity:.45}

/* ── Article (single post) ── */
/* THE ENTRY WEARS THE HOUSE SHAPE (2026-09-27, the walkthrough). It opens
   the way /gold/, /custom/ and /watches/ open: the photograph full-bleed with
   the copy left-set on a velvet scrim, then the prose at a reading measure,
   a hairline question grid, a signed byline and a full-bleed velvet close.
   Before this it was a centred blog head over a boxed photograph, with a
   rounded card for a close - a template shape no other page here uses.
   The scrim ramps are the ones measured on /gold/ (copy left, subject
   right); the phone ramp is that page's too. The three .j-breadcrumb rules
   below are copied verbatim into shop/breadcrumb.mjs and gated byte for
   byte - restyle the crumb band around them, never the rules themselves. */
.j-article{padding:0}
.j-breadcrumb{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--jd-purple-accent);font-weight:500;display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-bottom:2.2rem}
.j-breadcrumb a:hover{color:var(--jd-gold-deep)}
.j-breadcrumb .sep{opacity:.4}
.j-entry-hero{position:relative;overflow:hidden;background:var(--jd-dark);color:var(--jd-ivory);min-height:clamp(520px,62vh,700px);display:flex;align-items:center}
.j-entry-hero .j-entry-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.j-entry-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(97deg,rgba(13,0,18,.96) 0%,rgba(13,0,18,.94) 34%,rgba(18,2,24,.5) 50%,rgba(21,2,27,.08) 64%,rgba(21,2,27,0) 78%),
  linear-gradient(180deg,rgba(19,1,25,.24),rgba(19,1,25,.02) 44%,rgba(19,1,25,.3))}
.j-entry-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,7vw,6rem) var(--gutter) clamp(3rem,6vw,5rem)}
.j-entry-hero .eyebrow{color:var(--jd-gold);display:inline-block;margin-bottom:1.1rem}
.article-title{font-family:var(--serif);font-weight:300;font-style:italic;letter-spacing:-.015em;line-height:1.04;font-size:clamp(2.1rem,4.6vw,3.9rem);color:var(--jd-ivory);max-width:17ch;margin:0 0 1.1rem;text-wrap:balance;text-shadow:0 1px 2px rgba(15,1,21,.35),0 2px 28px rgba(15,1,21,.5)}
.article-lede{color:var(--jd-blush);font-size:.98rem;line-height:1.7;max-width:46ch;margin:0 0 1.6rem;font-weight:300;text-shadow:0 1px 2px rgba(15,1,21,.35)}
.article-meta{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(249,247,242,.78);font-weight:500;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.article-meta .sep{opacity:.45}
.article-meta .by{color:var(--jd-gold)}
/* The crumb sits in a slim band under the hero; the band overrides the
   rule's bottom margin without touching the rule. */
.j-crumb-band{padding-top:1.1rem;padding-bottom:0}
.j-crumb-band .j-breadcrumb{margin-bottom:0}
.j-entry-body{padding-top:0;padding-bottom:0}

/* ── Article body (long-form prose) ── */
.article-body{max-width:820px;margin:clamp(2.5rem,5vw,4rem) auto 0;font-size:1.06rem;line-height:1.8;color:#352340;font-weight:400}
.article-body > p:first-of-type{font-family:var(--serif);font-size:1.4rem;line-height:1.5;color:var(--jd-purple);font-weight:400}
.article-body h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.15;font-size:clamp(1.7rem,3vw,2.25rem);color:var(--jd-purple);margin:2.8rem 0 1rem}
.article-body h3{font-family:var(--serif);font-weight:600;font-size:1.45rem;color:var(--jd-purple);margin:2rem 0 .8rem;letter-spacing:-.01em}
.article-body p{margin:0 0 1.4rem}
.article-body a{color:var(--jd-gold-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .25s ease}
.article-body a:hover{color:var(--jd-purple)}
.article-body strong{font-weight:600;color:var(--jd-purple)}
.article-body ul,.article-body ol{margin:0 0 1.5rem;padding-left:1.3rem}
.article-body li{margin:0 0 .6rem;padding-left:.3rem}
.article-body li::marker{color:var(--jd-gold-deep)}
.article-body blockquote{margin:2rem 0;padding:.4rem 0 .4rem 1.6rem;border-left:2px solid var(--jd-gold-deep);font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.4;color:var(--jd-purple)}
.article-body figure{margin:2.2rem 0}
.article-body figure img{width:100%;border-radius:6px;box-shadow:var(--shadow-soft)}
.article-body figcaption{margin-top:.7rem;font-size:.78rem;letter-spacing:.04em;color:var(--jd-purple-accent);text-align:center;font-weight:400}
/* tables scroll inside their own box on narrow screens instead of
   overflowing the page (wrapper added in build.mjs) */
.article-body .table-wrap{margin:2rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-body table{width:100%;border-collapse:collapse;margin:0;font-size:.92rem}
.article-body th,.article-body td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--jd-line);vertical-align:middle}
.article-body th{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--jd-gold-deep);background:var(--jd-ivory-2)}
/* in-table imagery (e.g. gemstone swatches): fixed, consistent size that
   never collapses in a cramped cell */
.article-body td img{width:84px;height:84px;object-fit:cover;max-width:none;border-radius:8px;display:block;margin:0 auto}
/* ── The gem chart (a372) ──
   A table whose first cell holds a medallion (`<img class="j-medal">`): the
   gem seen through the loupe, a small round photograph in a gold hairline.
   The round frame is what lets photographs on a dozen different grounds sit
   in one column. Columns after it read month, gem, color, meaning. On a
   phone each row becomes a small card (medallion left, the four lines
   right) and nothing scrolls sideways. Authored as a plain markdown table;
   a browser without :has() falls back to the table rules above. */
.article-body table:has(img.j-medal) th{background:none;border-bottom:1px solid var(--jd-gold-deep);padding-top:.4rem}
.article-body table:has(img.j-medal) td{padding:1.05rem 1rem;line-height:1.5}
.article-body table:has(img.j-medal) td:nth-child(1){width:124px;padding-left:.4rem;padding-right:.6rem}
.article-body td img.j-medal{width:92px;height:92px;border-radius:999px;object-fit:cover;margin:5px auto;
  box-shadow:0 0 0 4px var(--jd-ivory),0 0 0 5px var(--jd-gold-deep),0 14px 22px -14px rgba(26,7,34,.5)}
.article-body table:has(img.j-medal) td:nth-child(2){font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--jd-gold-deep);white-space:nowrap}
.article-body table:has(img.j-medal) td:nth-child(3){font-family:var(--serif);font-size:1.5rem;font-weight:500;line-height:1.15;letter-spacing:-.01em;color:var(--jd-purple)}
.article-body table:has(img.j-medal) td:nth-child(4){font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.35;color:#5a4664}
.article-body table:has(img.j-medal) th:nth-child(3){width:25%}
.article-body table:has(img.j-medal) th:nth-child(4){width:29%}
.article-body table:has(img.j-medal) tr:last-child td{border-bottom-color:var(--jd-gold-deep)}
@media(max-width:640px){
  .article-body .table-wrap:has(img.j-medal){overflow:visible}
  .article-body table:has(img.j-medal) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .article-body table:has(img.j-medal),.article-body table:has(img.j-medal) tbody{display:block}
  .article-body table:has(img.j-medal) tr{display:grid;grid-template-columns:84px 1fr;column-gap:1.1rem;align-items:start;padding:1.15rem 0;border-bottom:1px solid var(--jd-line)}
  .article-body table:has(img.j-medal) tr:last-child{border-bottom-color:var(--jd-gold-deep)}
  .article-body table:has(img.j-medal) td{display:block;grid-column:2;padding:0;border:0}
  .article-body table:has(img.j-medal) td:nth-child(1){grid-column:1;grid-row:1 / span 4;align-self:center;width:auto;padding:0}
  .article-body td img.j-medal{width:72px;height:72px;margin:5px}
  .article-body table:has(img.j-medal) td:nth-child(2){margin-bottom:.25rem}
  .article-body table:has(img.j-medal) td:nth-child(3){font-size:1.4rem;margin-bottom:.3rem}
  .article-body table:has(img.j-medal) td:nth-child(4){font-size:1.05rem;margin-bottom:.25rem}
  .article-body table:has(img.j-medal) td:nth-child(5){font-size:.9rem}
}
/* ── The piece card (a373) ──
   One real piece inside an entry, linked to its own page: `<figure
   class="j-piece">` holding the photograph and a caption of four parts (who
   it is for, its name, one line, the link). It is the piece popup in small:
   white photograph left, cream panel right, the gold rule under the name and
   the gold-bordered pill. The link's ::after covers the card, so the whole
   card is one link and a screen reader meets it once. */
.article-body figure.j-piece{position:relative;display:grid;grid-template-columns:240px 1fr;align-items:stretch;margin:2.2rem auto 0;background:var(--jd-cream);border:1px solid var(--jd-line);border-radius:8px;overflow:hidden;transition:box-shadow .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.article-body figure.j-piece:hover{box-shadow:var(--shadow-soft);transform:translateY(-2px)}
.article-body figure.j-piece img{width:240px;height:100%;min-height:240px;object-fit:contain;background:var(--jd-white);border-radius:0;box-shadow:none;display:block}
.article-body figure.j-piece figcaption{margin:0;padding:1.6rem 2.2rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;letter-spacing:0;font-size:1rem;color:#352340}
.j-piece-for{font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--jd-gold-deep);margin-bottom:.6rem}
.j-piece-name{font-family:var(--serif);font-size:1.7rem;line-height:1.12;font-weight:400;letter-spacing:-.01em;color:var(--jd-purple)}
.j-piece-name::after{content:"";display:block;width:56px;height:1px;background:var(--jd-gold-deep);margin:.85rem 0 .8rem}
.j-piece-line{font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1.4;color:#5a4664;margin-bottom:1.15rem}
.article-body a.j-piece-link{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--jd-purple);text-decoration:none;border:1px solid var(--jd-gold-deep);border-radius:999px;padding:.72rem 1.35rem;transition:background .3s ease,color .3s ease,border-color .3s ease}
.article-body a.j-piece-link::after{content:"";position:absolute;inset:0}
.article-body figure.j-piece:hover a.j-piece-link,.article-body a.j-piece-link:focus-visible{background:var(--jd-purple);color:var(--jd-ivory);border-color:var(--jd-purple)}
@media(max-width:640px){
  .article-body figure.j-piece{grid-template-columns:1fr}
  .article-body figure.j-piece img{width:100%;height:210px;min-height:0}
  .article-body figure.j-piece figcaption{padding:1.3rem 1.4rem 1.6rem}
  .j-piece-name{font-size:1.5rem}
}
.article-body hr{border:0;border-top:1px solid var(--jd-line);margin:2.6rem 0}

/* ── Good questions ── */
/* The /gold/ question grid: a centred serif head, then hairline rows in two
   columns where the width allows, one on a phone. */
.faq{max-width:1080px;margin:clamp(3.5rem,6vw,5rem) auto 0;padding-top:0;border-top:0}
.faq h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3vw,2.5rem);color:var(--jd-purple);margin:0 0 1.6rem;letter-spacing:-.02em;text-align:center}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,3.5rem);align-items:start;border-bottom:1px solid var(--jd-line)}
.faq-item{border-top:1px solid var(--jd-line);padding:1.3rem 0}
.faq-q{font-family:var(--serif);font-weight:500;font-size:1.22rem;color:var(--jd-purple);margin:0 0 .5rem;line-height:1.3}
.faq-a{font-size:.94rem;line-height:1.7;color:#4a3656;font-weight:300;margin:0}

/* ── Author bio ── */
/* A signed byline, not a card: the author's photograph in a circle beside
   the name, on a hairline, at the reading measure. The house mark is the
   fallback for an author without a photograph. */
.author-bio{max-width:820px;margin:clamp(3rem,5vw,4rem) auto 0;display:flex;gap:1.5rem;align-items:center;padding:1.8rem 0 0;border-top:1px solid var(--jd-line)}
.author-bio .avatar{width:76px;height:76px;border-radius:999px;overflow:hidden;background:var(--jd-purple);display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow-soft)}
.author-bio .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.author-bio .avatar img.mark{width:38px;height:auto}
.author-bio .who{font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--jd-gold-deep);margin-bottom:.35rem}
.author-bio .name{font-family:var(--serif);font-size:1.4rem;color:var(--jd-purple);margin:0 0 .3rem;line-height:1}
.author-bio .blurb{font-size:.86rem;line-height:1.6;color:#5a4664;font-weight:300;margin:0}

/* ── The close ── */
/* Full-bleed velvet on the home page's builder ground (its three radials
   and the soft-light grain), copy centred like the home's final band. */
.article-cta{margin:clamp(4rem,7vw,6.5rem) 0 0;background:
    radial-gradient(95% 60% at 50% -8%, rgba(124,58,160,.16) 0%, transparent 60%),
    radial-gradient(75% 55% at 10% 108%, rgba(74,22,96,.32) 0%, transparent 55%),
    radial-gradient(65% 50% at 94% 114%, rgba(108,40,140,.18) 0%, transparent 55%),
    linear-gradient(180deg, var(--jd-velvet) 0%, var(--jd-velvet-lift) 55%, var(--jd-velvet) 100%);
  color:var(--jd-ivory);padding:clamp(5rem,9vw,8.5rem) var(--gutter);text-align:center;position:relative;overflow:hidden}
.article-cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='jcta'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='2' stitchTiles='stitch'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23jcta)'/%3E%3C/svg%3E")}
.article-cta-inner{position:relative;z-index:1;max-width:46rem;margin:0 auto}
.article-cta .eyebrow{color:var(--jd-gold);display:inline-block;margin-bottom:1.2rem}
.article-cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.2vw,4.4rem);margin:0 0 1.2rem;letter-spacing:-.02em;line-height:1}
.article-cta h2 em{font-style:italic;color:var(--jd-gold)}
.article-cta p{max-width:44ch;margin:0 auto 2.2rem;color:rgba(249,247,242,.85);font-weight:300;line-height:1.7;font-size:1.05rem}
.article-cta-act{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.btn-glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,219,120,.55);color:var(--jd-ivory);backdrop-filter:blur(8px)}
.btn-glass:hover{background:var(--jd-gold);color:var(--jd-purple);border-color:var(--jd-gold);transform:translateY(-2px)}
@media(max-width:760px){
  .j-entry-hero{min-height:480px}
  .j-entry-hero::before{background:linear-gradient(180deg,rgba(13,0,18,.88),rgba(13,0,18,.78) 44%,rgba(13,0,18,.92))}
  .article-title{font-size:clamp(1.9rem,8vw,2.4rem);max-width:none}
  .article-cta-act .btn{width:100%;justify-content:center}
}

/* ── Related posts ── */
.related{padding:clamp(4rem,7vw,7rem) 0 0}
.related h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.5vw,2.1rem);color:var(--jd-purple);margin:0 0 2rem;letter-spacing:-.01em;text-align:center}

/* THE MIRRORED FOOTER IS GONE (a299). It duplicated the shared chrome and
   had drifted from it: this file carried footer{margin-top:clamp(4rem,7vw,7rem)}
   and .footer-col ul{gap:.7rem}, neither of which the lifted chrome defines,
   so both leaked through on the FOURTEEN pages that link this stylesheet and
   made their footer 78px taller than the home page's. Brandon saw it on
   /gold/ and asked for every footer to match home.
   The lifted CHROME_CSS already defines all 44 footer rules including both
   noise pseudo-elements, so nothing was lost by deleting the copy. The
   header comment at the top of this file still says the chrome is "mirrored
   from index.html" - that was true before a192 unified the chrome, and the
   mirror is exactly what a194/a199 warned about: a static copy drifts, and
   it drifts silently because only the properties the real chrome does NOT
   define ever show. */

/* THE MIRRORED HEADER IS GONE TOO (a299). Same cause as the footer above:
   this file carried its own .nav-row / .brand / .top-bar / .nav-links block,
   and it had drifted - .brand img was 38px here against the chrome's 34px in
   the nav row, which made the nav 73px tall on the fourteen pages linking
   this stylesheet and 81px everywhere else. Removed, so the lifted chrome is
   the only definition.
   WHAT DELIBERATELY STAYED: .btn, .btn-gold, .btn-purple, .btn-outline,
   .link-arrow and .serif. The lifted chrome does NOT define those - each
   page's own stylesheet does - so deleting them would have stripped the
   buttons off the journal. Checked rather than assumed
   (.tmp/_chrome-coverage.mjs). */

/* ── Motion / a11y ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--jd-gold-deep);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}

/* ── Responsive ── */
@media(max-width:900px){
/* .menu-toggle is display:grid at every width now, so the override that used
   to live here is redundant. .nav-links still hides. */

  .j-featured a{grid-template-columns:1fr}

  .faq-grid{grid-template-columns:1fr}

  .j-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
/* match the homepage: on phones the utility bar wraps and centers so the
     locations + Book pill never overflow the viewport */

  .j-grid{grid-template-columns:1fr}


  /* match the homepage: on phones the utility bar wraps and centers so the
     locations + Book pill never overflow the viewport */

  .author-bio{flex-direction:column;text-align:center}

  .article-body table{font-size:.85rem}

  .article-body th,.article-body td{padding:.6rem .6rem}

  .article-body td img{width:60px;height:60px}
}

/* ════════ OUR STORY (a194) — heritage story + live journal rail ════════
   Heritage and the Journal merged into /our-story/. The story section reuses
   the home page's heritage visual language; the rail adopts the category
   pages' quiet chip (active = white pill with an inset hairline ring, so the
   row never shifts as the active chip moves) but as <button> filters that
   narrow the grid in place rather than links that leave. */
[hidden]{display:none!important}
.story-open{padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(2.5rem,5vw,4.5rem);border-bottom:1px solid var(--jd-line)}
/* align-items was CENTER, and that was the whole reason the page read empty
   on arrival (Brandon, 2026-09-25). The copy column runs ~1035px and the
   portrait is 550px, so centring it parked ~240px of nothing ABOVE the photo
   - and that nothing was the first screen. The founders were below the fold
   at 1440x900. STRETCH lets the figure own the full row so the image can
   stick inside it; start would only have moved the void to the bottom. */
.story-grid{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:stretch}
.story-portrait{margin:0}
/* height:auto is load-bearing: the img tag's height attribute is a
   presentational hint, and without this the photo rendered 440x1000 — a
   tower that object-fit:cover filled by cropping 45% off the sides, cutting
   Joel's face and making the section scroll (Brandon, 2026-09-02). */
.story-portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;box-shadow:var(--shadow-purple);
  position:sticky;top:7rem}
.story-text h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--jd-purple);margin:1.1rem 0 1.2rem}
.story-text h2 em{font-style:italic;color:var(--jd-gold-deep)}
.story-text p{font-size:1.02rem;line-height:1.85;color:#3a1545;max-width:48ch;margin:0 0 1.5rem}
.story-stats{display:flex;gap:2.5rem;margin:0 0 1.6rem}
.story-stats .num{font-family:var(--serif);font-size:2rem;color:var(--jd-purple);line-height:1;font-weight:500}
.story-stats .lbl{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--jd-purple-accent);margin-top:.5rem;font-weight:500}
.j-band-head{padding-top:clamp(2.8rem,5vw,4.2rem);padding-bottom:.4rem;text-align:center}
.j-band-head .eyebrow{display:inline-block;margin-bottom:1.2rem}
.j-band-head h2{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;line-height:1;font-size:clamp(2.2rem,5vw,3.6rem);color:var(--jd-purple);margin:0 0 1rem}
.j-band-head h2 em{font-style:italic;color:var(--jd-gold-deep)}
.j-band-head p{max-width:46ch;margin:0 auto;font-size:1rem;line-height:1.7;color:#5a4664;font-weight:300}
.story-rail{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;padding-top:1.6rem;padding-bottom:1.6rem;border-bottom:1px solid var(--jd-line);margin-bottom:.4rem}
.story-rail .chip{display:inline-flex;align-items:center;padding:.45rem .8rem;border:0;cursor:pointer;
  border-radius:999px;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--jd-purple-accent);background:transparent;white-space:nowrap;
  transition:color .25s ease,background .25s ease}
.story-rail .chip:hover{color:var(--jd-gold-deep)}
.story-rail .chip.active{color:var(--jd-purple);background:var(--jd-white);box-shadow:inset 0 0 0 1px var(--jd-line)}
.story-rail .chip:focus-visible{outline:2px solid var(--jd-gold-deep);outline-offset:2px}
@media (max-width:900px){

  .story-grid{grid-template-columns:1fr}

  .story-portrait{max-width:440px;margin:0 auto}

  /* One column here, so the figure is only as tall as the photo and sticky
     has nowhere to travel. Static says so rather than relying on it. */
  .story-portrait img{position:static}

  .story-stats{gap:1.5rem;flex-wrap:wrap}
}
/* When a topic hides the featured entry, the rail's own border and the grid
   head's top rule would sit a few pixels apart as a doubled hairline — the
   featured card normally separates them. Drop the grid rule in that state. */
#storyFeatured[hidden]+section .j-grid-head{border-top:0;padding-top:0}
/* THE SHORTHAND TRAP, twice in one day (a196): these sections sit ON the
   .wrap class, whose gutter is horizontal padding — so any later rule
   writing the padding SHORTHAND (padding: X 0) silently zeroes the gutter
   and the content touches the viewport edge below ~1380px. Section rules
   here set padding-top/padding-bottom ONLY, never the shorthand. */
/* a197 — the walls of text come down (Brandon: "luxury those sections up").
   The AGAPE band goes velvet-and-gold: a full-bleed centerpiece with the
   Greek word ghosted behind a dictionary-entry treatment. The CRAFTSMEN
   section gets a sketch-to-ring diptych (first and last stages only — the
   home page owns the four-step grid) over three credential pillars.
   Per this page's own scars: vertical paddings only on .wrap sections
   (a196), and every p-override out-specifies `.agape-band p` (a195). */
.agape-band{position:relative;overflow:hidden;background:linear-gradient(155deg,#1d0226 0%,#320542 55%,#1d0226 100%);border-top:1px solid rgba(255,219,120,.3);border-bottom:1px solid rgba(255,219,120,.3);text-align:center;padding-top:clamp(3.8rem,7vw,6.5rem);padding-bottom:clamp(3.8rem,7vw,6.5rem)}
.agape-ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:clamp(6rem,17vw,14rem);color:rgba(255,219,120,.07);letter-spacing:.04em;pointer-events:none;user-select:none;white-space:nowrap}
.agape-inner{position:relative}
.agape-band .eyebrow{display:inline-block;margin-bottom:1.5rem;color:var(--jd-gold)}
.agape-band h2{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.02em;line-height:1;font-size:clamp(3rem,7vw,4.6rem);color:var(--jd-gold);margin:0 0 1.6rem}
.agape-band p{max-width:54ch;margin:0 auto 1.2rem;font-size:1.02rem;line-height:1.8;color:var(--jd-ivory);font-weight:300}
.agape-band p.agape-entry{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.6}
.agape-band .agape-lex{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,219,120,.78);margin-bottom:1rem;font-weight:500}
.agape-band p.agape-bridge{color:rgba(249,247,242,.68);font-size:.93rem;max-width:46ch}
.agape-band p.agape-line{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.4;color:var(--jd-gold);margin-top:1.7rem;margin-bottom:0}
.story-craft{padding-top:clamp(2.8rem,5vw,4.2rem);padding-bottom:clamp(2rem,4vw,3rem)}
.craft-inner{max-width:960px;margin:0 auto;text-align:center}
.craft-inner h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--jd-purple);margin:1.1rem 0 1.6rem}
.craft-inner h2 em{font-style:italic;color:var(--jd-gold-deep)}
.craft-diptych{display:grid;grid-template-columns:minmax(0,340px) auto minmax(0,340px);justify-content:center;align-items:center;gap:clamp(1rem,3vw,2.4rem);margin:2rem 0 2.8rem}
.craft-diptych figure{margin:0}
.craft-diptych img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px;box-shadow:var(--shadow-soft)}
.craft-diptych figcaption{font-family:var(--sans);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--jd-purple-accent);margin-top:.9rem;font-weight:500}
.craft-arrow{font-size:1.9rem;color:var(--jd-gold-deep);line-height:1;padding-bottom:2rem}
.craft-pillars{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:stretch;margin:0 0 2.4rem}
.cpillar h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1.25;color:var(--jd-purple);margin:0 0 .6rem}
.cpillar p{font-size:.86rem;line-height:1.7;color:#5a4664;margin:0}
.cpillar-divider{width:1px;background:var(--jd-line)}
.craft-inner p.craft-standard{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.4rem);line-height:1.5;color:var(--jd-purple);margin:0 0 1.5rem}
@media (max-width:760px){

  .craft-diptych{grid-template-columns:minmax(0,300px);justify-items:center}

  .craft-arrow{transform:rotate(90deg);padding-bottom:0;margin:.2rem 0}

  .craft-pillars{grid-template-columns:1fr;gap:1.5rem}

  .cpillar-divider{width:110px;height:1px;margin:0 auto}
}

/* ════════ THE HALLMARK EDITION — the Journal skin (2026-09-28) ════════
   Opt-in per entry (`layout: hallmark`, build.mjs renderHallmark), every rule
   scoped under .hallmark so the entries not yet reviewed do not move a byte.
   The read stays on ivory at its measure; the rhythm is the furniture: a drop
   cap on the lede, the hallmark rule between chapters, the velvet pull, wide
   photographs, the showroom strip on the warmer ivory, the Inner Circle close
   on the same, More from the Journal, and the footer as the only purple at the
   end. Vertical paddings only on .wrap sections (the shorthand trap, a196). */
.hallmark .article-meta .j-by-face{width:28px;height:28px;border-radius:999px;object-fit:cover;vertical-align:middle;margin-right:.5rem;display:inline-block}
.hallmark .article-body{max-width:1080px}
.hallmark .article-body > :not(.j-wide){max-width:820px;margin-left:auto;margin-right:auto}
.hallmark .article-body.first > p:first-of-type::first-letter{float:left;font-family:var(--serif);font-weight:500;font-size:3.9em;line-height:.78;padding:.1em .14em 0 0;color:var(--jd-gold-deep)}
.hallmark .article-body:not(.first) > p:first-of-type{font-family:var(--sans);font-size:1.06rem;line-height:1.8;color:#352340;font-weight:400}
.hallmark .article-body:not(.first){margin-top:clamp(1.2rem,2.5vw,2rem)}
/* The hallmark rule: a hairline carrying the house mark, the jeweler's stamp. */
.j-hallmark{display:flex;align-items:center;gap:1.1rem;margin:3rem auto 1.5rem}
.j-hallmark::before,.j-hallmark::after{content:"";flex:1;height:1px;background:var(--jd-line)}
.j-hallmark .mark{width:30px;height:30px;border-radius:999px;background:var(--jd-purple);display:grid;place-items:center;flex:none}
.j-hallmark .mark img{width:14px;height:auto;display:block}
.hallmark .article-body .j-hallmark + h2{margin-top:0}
/* The velvet pull: one line per entry, the word behind it ghosted (the agape band's recipe). */
.j-pull{position:relative;overflow:hidden;background:linear-gradient(155deg,#1d0226 0%,#320542 55%,#1d0226 100%);border-top:1px solid rgba(255,219,120,.3);border-bottom:1px solid rgba(255,219,120,.3);text-align:center;padding:clamp(3.2rem,6vw,5.2rem) var(--gutter);margin:clamp(2.6rem,5vw,4rem) 0 0}
.j-pull-ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:clamp(6rem,17vw,14rem);color:rgba(255,219,120,.07);letter-spacing:.04em;pointer-events:none;user-select:none;white-space:nowrap}
.j-pull-inner{position:relative;max-width:54ch;margin:0 auto}
.j-pull p{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.4;color:var(--jd-gold);margin:0}
/* The wide photograph. */
.hallmark figure.j-wide{margin:2.6rem auto;max-width:1080px}
.hallmark figure.j-wide img{width:100%;height:auto;border-radius:8px;box-shadow:var(--shadow-soft);display:block}
.hallmark figure.j-wide figcaption{font-family:var(--serif);font-style:italic;font-size:1.02rem;letter-spacing:0;color:#5a4664;text-align:center;margin-top:.8rem}
/* The tall photograph (a360): a portrait frame keeps a narrower measure than the read, centered. */
.hallmark .article-body > figure.j-portrait{max-width:520px;margin:2.6rem auto}
.hallmark figure.j-portrait img{width:100%;height:auto;border-radius:8px;box-shadow:var(--shadow-soft);display:block}
.hallmark figure.j-portrait figcaption{font-family:var(--serif);font-style:italic;font-size:1.02rem;letter-spacing:0;color:#5a4664;text-align:center;margin-top:.8rem}
/* In the showroom now: three doors, real places, on the warmer ivory. */
.j-showroom{background:var(--jd-ivory-2);border-top:1px solid var(--jd-line);border-bottom:1px solid var(--jd-line);padding:clamp(2.8rem,5vw,4rem) var(--gutter);margin-top:clamp(3rem,5vw,4.5rem)}
.j-showroom-inner{max-width:var(--maxw);margin:0 auto;text-align:center}
.j-showroom .eyebrow{display:inline-block;margin-bottom:.9rem}
.j-showroom-line{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;color:var(--jd-purple);margin:0 0 1.8rem;letter-spacing:-.02em}
.j-showroom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem);text-align:left}
.j-tile{display:flex;flex-direction:column;background:var(--jd-white);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.j-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-purple)}
.j-tile-img{aspect-ratio:8/5;overflow:hidden}
.j-tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.j-tile-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.j-tile-eyebrow{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--jd-gold-deep)}
.j-tile-line{font-family:var(--serif);font-size:1.25rem;line-height:1.3;color:var(--jd-purple);margin:0;flex:1}
.j-tile .link-arrow{margin-top:.4rem}
/* The close: the Inner Circle, on the warmer ivory; the footer's form restyled for light ground. */
.j-close{background:var(--jd-ivory-2);border-top:1px solid var(--jd-line);padding:clamp(3.5rem,7vw,6rem) var(--gutter);margin-top:clamp(3rem,5vw,4.5rem);text-align:center}
.j-close-inner{max-width:42rem;margin:0 auto}
.j-close .eyebrow{display:inline-block;margin-bottom:1rem}
.j-close h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-.02em;color:var(--jd-purple);margin:0 0 .9rem}
.j-close h2 em{font-style:italic;color:var(--jd-gold-deep)}
.j-close-lede{font-size:1.02rem;line-height:1.7;color:#5a4664;font-weight:300;max-width:44ch;margin:0 auto 1.8rem}
.j-close .newsletter{max-width:30rem;margin:0 auto 1.2rem}
.j-close .newsletter form{background:var(--jd-white);border:1px solid var(--jd-gold-deep)}
.j-close .newsletter input{color:var(--jd-purple)}
.j-close .newsletter input::placeholder{color:#8a7a94}
.j-close .newsletter button{background:var(--jd-gold);color:var(--jd-purple)}
.j-close .nl-msg{color:var(--jd-purple);font-size:.86rem;margin:.7rem 0 0}
.j-close .nl-msg.is-error{color:#A9682B}
.j-close-alt{margin-top:.4rem}
/* More from the Journal. */
.j-related{padding-top:clamp(3rem,5vw,4.5rem);padding-bottom:0}
.j-related > .eyebrow{display:block;text-align:center;margin-bottom:1.6rem}
.hallmark .faq{margin-top:clamp(3rem,5vw,4.5rem)}
@media(max-width:900px){
  .j-showroom-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .j-pull{padding:2.6rem var(--gutter)}
  .hallmark figure.j-wide img{border-radius:4px}
  .j-hallmark{margin:2.4rem auto 1.2rem}
}