/* ============================================================
   Illuminated ornament, matching the Mercy app (mercy repo,
   docs/design/ART-DIRECTION-illuminated.md, sections 12 and 14).
   - Line art is amber, static, never oxblood (oxblood = action).
   - Ornament is never behind body text.
   - SVGs are used as CSS masks, so the colour and opacity come from here
     and the boxes have fixed aspect ratios: no layout shift.
   ============================================================ */
:root{
  --amber: #7A5A1C;          /* line on light paper, 5.60:1 */
  --amber-glow: rgba(122, 90, 28, .08);
}

/* Paper plus a soft amber glow at the top. No tiled ornament. */
body{
  background:
    radial-gradient(ellipse 90% 520px at 50% 0, var(--amber-glow), transparent 70%) no-repeat,
    var(--paper);
}

/* Logo: the gold star-cross, one mark everywhere (mercy repo, 2026-10-16;
   replaces the vine roundel). The PNG is used as a mask so it is amber on paper.
   It is 3:4, not square. */
.roundel-simple, .roundel-full{
  display:inline-block; flex-shrink:0; background:var(--amber); aspect-ratio:3 / 4;
  -webkit-mask:url("/assets/illuminated/starcross.png") center/contain no-repeat;
          mask:url("/assets/illuminated/starcross.png") center/contain no-repeat;
}
.brand .roundel-simple{height:30px; width:auto}
.roundel-full{height:44px; width:auto}
footer .roundel-full{display:block; margin:4px 0 14px}

/* Headpiece: the vine-and-dove band at the top of a reading page.
   Full width of the reading column, at most 720px, faded out over its
   bottom 45%. Content starts below it, never on it. */
.headpiece{
  display:block; width:100%; max-width:720px; aspect-ratio:3086 / 632;
  background:var(--amber); opacity:.22; pointer-events:none;
  -webkit-mask:url("/assets/illuminated/headpiece.svg") center / 100% 100% no-repeat,
               linear-gradient(#000 55%, transparent);
  -webkit-mask-composite:source-in;
          mask:url("/assets/illuminated/headpiece.svg") center / 100% 100% no-repeat,
               linear-gradient(#000 55%, transparent);
          mask-composite:intersect;
}
.page-hero .headpiece{margin:0 0 4px}

/* Tailpiece: the cross-in-wreath divider, after a reading. */
.tailpiece{
  display:block; width:140px; aspect-ratio:1508 / 594; margin:28px auto;
  background:var(--amber); opacity:.70;
  -webkit-mask:url("/assets/illuminated/tailpiece.svg") center/contain no-repeat;
          mask:url("/assets/illuminated/tailpiece.svg") center/contain no-repeat;
}

/* Side gilt rules on the reading column: 1px amber at 8px, a hairline at 12px.
   Outside the text, never under it. Hidden on small screens. */
.post .wrap{position:relative}
.post .wrap::before, .post .wrap::after{
  content:""; position:absolute; top:0; bottom:0; pointer-events:none;
}
.post .wrap::before{
  left:calc(clamp(20px,5vw,56px) - 8px); right:calc(clamp(20px,5vw,56px) - 8px);
  border-left:1px solid rgba(122, 90, 28, .35); border-right:1px solid rgba(122, 90, 28, .35);
}
.post .wrap::after{
  left:calc(clamp(20px,5vw,56px) - 12px); right:calc(clamp(20px,5vw,56px) - 12px);
  border-left:.5px solid var(--rule-2); border-right:.5px solid var(--rule-2);
}
@media (max-width:480px){ .post .wrap::before, .post .wrap::after{display:none} }

/* Nav: the roundel and the Stories link made the bar crowded between 720px and 1100px (the home page has seven links).
   Keep labels on one line; below 1100px show only the brand and the CTA
   (every link is also in the footer). */
.nav-links a{white-space:nowrap}
.brand{flex-shrink:0}
.nav .wrap{gap:28px}
@media (max-width:1100px){ .nav-links a:not(.btn){display:none} }