/* Catholic Information Wire — public teaser and day archives.
   Rendered by functions/_lib/news-teaser.ts. Extracted from that file's
   inline <style> on 2026-07-29: the module had reached 1016 lines against a
   500-line project cap, and the archive pages share this sheet.
   Type floor: no text below 11px. Both colour schemes are declared. */
/* The Marian register: ivory linen and lapis ink by day, a deep lapis night
   with parchment text after dark; antique gold carries every accent. */
:root{color-scheme:light dark;--bg:#faf9f5;--panel:#ffffff;--wash:#f5efdc;--ink:#232a3d;--muted:#46506a;--faint:#5d667f;--rule:#dcdbd2;--lapis:#1b2c55;--accent:#7d6420;--gold:#c0a054}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0f1524;--panel:#161d31;--wash:#141b2e;--ink:#e9e6da;--muted:#b6b7c6;--faint:#9a9db1;--rule:#2a3149;--lapis:#e9e6da;--accent:#d3b36a;--gold:#c0a054}
:root[data-theme="light"]{color-scheme:light;--bg:#faf9f5;--panel:#ffffff;--wash:#f5efdc;--ink:#232a3d;--muted:#46506a;--faint:#5d667f;--rule:#dcdbd2;--lapis:#1b2c55;--accent:#7d6420;--gold:#c0a054}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 "EB Garamond",Georgia,serif}
main{max-width:64rem;margin:0 auto;padding:1.1rem 1.25rem 3rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The bar. Full width and ONE row: the old masthead lived inside the article
   measure, so search + account + theme wrapped onto a second line and the
   sign-in control ended up at y=113, below where anyone looks for it. */
.topbar{position:sticky;top:0;z-index:50;border-bottom:2px solid var(--gold);background:var(--panel)}
.topbar-in{max-width:78rem;margin:0 auto;padding:.5rem 1.25rem;display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;flex:none;min-width:0}
.brand b{display:block;font-family:Cinzel,Georgia,serif;font-weight:600;font-size:1rem;letter-spacing:.02em;line-height:1.2;white-space:nowrap}
.verse{display:block;max-width:20rem;font-style:italic;font-size:.76rem;line-height:1.35;color:var(--muted)}
.verse span{display:inline}
.verse i{margin-left:.4rem;font-style:normal;font-family:Cinzel,serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.mark{width:2.1rem;height:2.1rem;flex:none;color:var(--gold);display:block}
.mast-search{flex:1 1 auto;min-width:0;max-width:26rem;margin-left:auto}
.mast-search input{width:100%;padding:.45rem .75rem;border:1px solid var(--rule);border-radius:4px;background:var(--wash);color:var(--ink);font:inherit;font-size:.9rem}
.mast-search input:focus{outline:2px solid var(--gold);outline-offset:1px}
.theme-toggle{flex:none;padding:.4rem .6rem;border:1px solid var(--rule);border-radius:4px;background:transparent;color:var(--muted);cursor:pointer;font:600 .72rem Cinzel,Georgia,serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.theme-toggle:hover{color:var(--accent);border-color:var(--gold)}
/* Account. State is filled by /assets/account.js per browser and is NEVER
   server-rendered: this page is edge-cached and a rendered session would be
   handed to the next anonymous visitor. Sign in is a SOLID button, not a
   muted link, because it is the one control a stranger must always find. */
.account{display:flex;align-items:center;gap:.45rem;flex:none}
.account a,.account button{display:inline-flex;align-items:center;min-height:34px;padding:.35rem .8rem;border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer;font:600 .76rem Cinzel,Georgia,serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.account a:hover,.account button:hover{color:var(--accent)}
.account .acct-join,.account .acct-out{background:var(--lapis);color:var(--bg);border:1px solid var(--lapis)}
.account .acct-join:hover,.account .acct-out:hover{background:transparent;color:var(--accent);border-color:var(--gold)}
.account .acct-who{max-width:11rem;overflow:hidden;text-overflow:ellipsis;color:var(--accent);text-transform:none;letter-spacing:.01em;font-family:"EB Garamond",Georgia,serif;font-size:.92rem;font-weight:600}
.account button[disabled]{opacity:.6;cursor:progress}
.dateline{margin:1.15rem 0 0;color:var(--faint);font:.76rem ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.09em}
.lit{white-space:nowrap}
.lit-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;border:1px solid var(--rule);margin-right:.3rem;vertical-align:-1px}
.lit-green{background:#3a7d44}.lit-violet{background:#5e3a87}.lit-red{background:#a8322d}.lit-rose{background:#cf7f96}.lit-white{background:#f6f2e4}.lit-black{background:#1c1c1c}
h1{margin:.25rem 0 .3rem;font-size:1.85rem;line-height:1.18;font-weight:600}
.tldr{margin:0 0 1.3rem;padding:.9rem 1.15rem;background:var(--wash);border-left:3px solid var(--gold);border-radius:0 6px 6px 0}
.tldr-head{display:flex;gap:.6rem;align-items:baseline;margin:0 0 .5rem}
.tldr-head span:first-child{font-family:Cinzel,serif;font-weight:700;font-size:.78rem;letter-spacing:.12em;color:var(--accent)}
.tldr-head span:last-child{color:var(--faint);font-style:italic;font-size:.85rem}
.tldr ol{margin:0;padding:0 0 0 1.4rem;columns:2;column-gap:2.2rem}
.tldr li{margin:.22rem 0;font-size:.95rem;line-height:1.38;break-inside:avoid}
.tldr li::marker{color:var(--accent);font-variant-numeric:tabular-nums;font-size:.86rem}
.tldr a{color:var(--ink);text-decoration:none}
.tldr a:hover{color:var(--accent);text-decoration:underline;text-decoration-color:var(--gold)}
.persp{color:var(--faint);font-style:italic}
.day-nav{display:flex;justify-content:space-between;gap:1rem;margin:1.15rem 0 0;font-size:.9rem}
.day-nav a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.day-nav a:hover{color:var(--accent);border-bottom-color:var(--gold)}
.lede{margin:.35rem 0 0;max-width:44rem;color:var(--muted);font-size:1.02rem;line-height:1.55}
.day{margin-top:1.5rem}
/* The Holy See section: the same wire rows, set apart by a gold frame. It is
   the one section on the page that is not sorted by time — it is sorted by
   authority, because the Church's own record comes first. */
.day.is-holy-see{margin-top:1.4rem;padding:.15rem 1rem .6rem;background:var(--wash);border:1px solid var(--gold);border-radius:6px}
.day.is-holy-see .day-head{border-bottom-color:var(--gold)}
.day.is-holy-see .day-head h2{letter-spacing:.1em}
.section-more{margin:.5rem 0 .1rem;font-size:.9rem}
.section-more a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.section-more a:hover{border-bottom-color:var(--gold)}
.day-head h2 a{color:inherit;text-decoration:none}
.day-head h2 a:hover{color:var(--accent);text-decoration:underline;text-decoration-color:var(--gold)}
.day-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;padding-bottom:.45rem;border-bottom:2px solid var(--gold)}
.day-head h2{margin:0;font-family:Cinzel,serif;font-weight:600;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.day-count{color:var(--faint);font-style:italic;font-size:.86rem}
.rail{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0 0 1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--rule)}
.rail{overflow:hidden}
.rail.is-open{overflow:visible}
.rail .chip-extra{display:none}
.rail.is-open .chip-extra,.rail.is-open .chip-wide-only{display:inline-flex}
.chip-more{font-style:italic}
.rail-label{margin-right:.35rem;font-family:Cinzel,serif;font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.rail-entities{margin-top:-.5rem;padding-bottom:.8rem}
/* A gold dot marks a chip whose subject has a record in this site. */
.chip.has-record::before{content:"";display:inline-block;width:.34rem;height:.34rem;margin-right:.36rem;border-radius:50%;background:var(--gold);vertical-align:.08em}
.rail-record{margin:0 0 1rem;font-size:.92rem;color:var(--muted)}
.rail-record a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.rail-record a:hover{border-bottom-color:var(--gold)}

.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.18rem .6rem;border:1px solid var(--rule);border-radius:999px;background:var(--panel);color:var(--muted);cursor:pointer;font:inherit;font-size:.82rem}
.chip b{color:var(--faint);font-weight:600;font-size:.78rem}
.chip:hover{border-color:var(--gold);color:var(--accent)}
.chip[aria-pressed="true"]{border-color:var(--gold);background:var(--wash);color:var(--accent)}
.chip[aria-pressed="true"] b{color:var(--accent)}
.chip b{margin-left:.05rem}
ol.wire{list-style:none;margin:0;padding:0}
ol.wire>li{border-bottom:1px solid var(--rule)}
ol.wire>li[hidden]{display:none}
.story-row{display:grid;grid-template-columns:1.8rem auto minmax(0,1fr) auto 4.6rem;align-items:baseline;column-gap:.75rem;row-gap:.1rem;padding:.5rem 0}
.rank{grid-column:1;grid-row:1}
ol.wire .vote{grid-column:2;grid-row:1 / span 2;align-self:start}
.story-head{grid-column:3;grid-row:1;min-width:0}
.col-topic{grid-column:4;grid-row:1;text-align:right;white-space:nowrap;color:var(--faint);font-size:.84rem}
.col-time{grid-column:5;grid-row:1;text-align:right;white-space:nowrap;color:var(--faint);font-size:.84rem;font-variant-numeric:tabular-nums}
.story-fold,.story-fold-static{grid-column:3;grid-row:2}
.story-fold summary{display:block;min-height:22px;list-style:none;cursor:pointer}
.story-fold summary::-webkit-details-marker{display:none}
.story-fold summary small,.story-fold-static{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;color:var(--faint);font-size:.84rem}
.story-fold summary:hover small{color:var(--accent)}
.story.is-corr .story-title{font-weight:700}
.fresh{display:inline-block;margin-right:.45rem;padding:.08rem .45rem;border-radius:3px;background:var(--gold);color:#20261a;font-family:Cinzel,serif;font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;vertical-align:.14em}
:root[data-theme="dark"] .fresh{color:#1a1608}
.story-title{color:var(--ink);text-decoration:none;font-weight:600;font-size:1.04rem;line-height:1.3}
.story-title:hover{color:var(--accent)}
a.discuss{grid-column:4 / -1;grid-row:2;justify-self:end;align-self:center;font-size:.84rem;font-weight:400;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule);white-space:nowrap}
a.discuss:hover{color:var(--accent);border-bottom-color:var(--gold)}
.caret{color:var(--gold);display:inline-block;opacity:.55;transition:transform .15s ease,opacity .15s ease}
.story-fold summary:hover .caret,.story-fold[open] .caret{opacity:1}
.story-fold[open] .caret{transform:rotate(180deg)}
.story-body{margin:.2rem 0 .8rem;padding:.7rem .9rem;background:var(--wash);border-left:2px solid var(--gold);border-radius:0 5px 5px 0}
.story-dek{margin:0;font-size:.96rem;line-height:1.55;color:var(--muted)}
.story-dek+.story-sources{margin-top:.55rem}
.story-sources{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0}
.story-sources span{font-family:Cinzel,serif;font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-right:.2rem}
.story-sources a{color:var(--ink);font-size:.88rem;text-decoration:none;padding:.14rem .6rem;border:1px solid var(--rule);border-radius:999px;background:var(--panel)}
.story-sources a:hover{border-color:var(--gold);color:var(--accent)}
ol.wire .vote{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-width:2.2rem;min-height:38px;padding:.25rem .3rem;border:1px solid var(--rule);border-radius:3px;background:transparent;color:var(--faint);cursor:pointer;font:600 .74rem "EB Garamond",serif;line-height:1.1}
ol.wire .vote:hover{border-color:var(--gold);color:var(--accent)}
ol.wire .vote[aria-pressed="true"]{border-color:var(--gold);color:var(--accent);background:var(--wash)}
ol.wire .rank{color:var(--faint);font-size:.8rem;font-variant-numeric:tabular-nums}
/* No room for columns on a phone: stack, and let topic and time share a line. */
b.corr{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.empty-note{margin:1rem 0 0;color:var(--faint);font-style:italic}
.cta{margin:1.8rem 0;padding:1.15rem 1.25rem;border:1.5px solid var(--gold);background:var(--panel);border-radius:6px}
.cta h2{margin:0 0 .3rem;font-family:Cinzel,serif;font-size:.95rem;font-weight:600;letter-spacing:.04em}
.cta p{margin:0 0 .8rem;color:var(--muted);font-size:.95rem;line-height:1.55}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem;margin:0}
.cta a.join{display:inline-flex;align-items:center;min-height:44px;padding:.35rem 1.15rem;border-radius:3px;background:var(--lapis);color:var(--bg);font-family:Cinzel,serif;font-weight:600;font-size:.86rem;letter-spacing:.04em;text-decoration:none;border:1.5px solid var(--lapis)}
.cta a.join:hover{background:transparent;color:var(--accent);border-color:var(--gold)}
.cta a.join:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cta a.signin{color:var(--accent);font-size:.94rem;text-decoration:none;border-bottom:1px solid var(--rule)}
.cta a.signin:hover{border-bottom-color:var(--gold)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--lapis);outline-offset:2px;border-radius:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 55%,transparent)}
/* --lapis inverts with the scheme (ink by day, parchment by night), so the
   ring keeps 3:1 both ways; gold alone was 2.37:1 on ivory. */
footer{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.84rem;line-height:1.6}
footer a{color:var(--muted)}

.legend{margin:0 0 1.15rem;color:var(--faint);font-size:.86rem;line-height:1.5}
.legend b.corr{font-weight:700}

/* ---------------------------------------------------------------------
   RESPONSIVE RULES LAST, AND THEY MUST STAY LAST.
   A media query adds NO specificity. While this sheet was inline in
   news-teaser.ts the @media blocks sat ABOVE the base declarations, so
   `.rail{flex-wrap:nowrap}` inside a breakpoint lost to `.rail{...wrap}`
   further down, and `.chip-extra{display:none}` lost to `.chip{...}`.
   Both needed defensive selectors (nav.rail, .rail .chip-extra) that are
   no longer necessary now the order is right. Do not move this block up.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme:dark){:root{--bg:#0f1524;--panel:#161d31;--wash:#141b2e;--ink:#e9e6da;--muted:#b6b7c6;--faint:#9a9db1;--rule:#2a3149;--lapis:#e9e6da;--accent:#d3b36a;--gold:#c0a054}}
@media (max-width:860px){.verse{display:none}.mast-search{max-width:none}}
@media (max-width:620px){
  /* 166px of sticky chrome on a 664px phone left ZERO headlines above the
     fold. The verse costs two lines here and the wordmark already carries the
     identity, so it stands down; brand and the account controls share row one
     and search takes row two. */
  /* Static, not sticky, on a phone. Two rows of chrome pinned to a 664px
     viewport is 20% of the reading area held permanently; static pays it once
     and every later screen is all content. The reference's header is static
     too. Sign in and Join stay at the top of the document, one flick away. */
  .topbar{position:static}
  .topbar-in{flex-wrap:wrap;gap:.4rem .5rem;padding:.4rem .9rem}
  .brand{flex:0 1 auto;gap:.45rem}
  .brand b{font-size:.92rem}
  .mark{width:1.8rem;height:1.8rem}
  .verse{display:none}
  /* Account before theme. DOM order puts the theme toggle first, which on a
     phone made a colour switch the most prominent control on the page while
     Sign in and Join wrapped below it. */
  .account{order:1;margin-left:auto}
  .account a,.account button{padding:.3rem .6rem;font-size:.72rem}
  .theme-toggle{order:2;padding:.3rem .5rem;font-size:.72rem}
  /* Theme and search share row two rather than taking one each: three rows of
     chrome was 160px, two is ~110px. */
  .mast-search{order:3;flex:1 1 12rem;max-width:none;margin-left:0}
  .mast-search input{padding:.35rem .6rem}
  h1{font-size:1.5rem}
  /* Chips scroll sideways on a phone instead of wrapping to three rows. One
     line, nothing hidden, and swiping a chip strip is the familiar gesture —
     truncating to three and hiding the rest behind "more" cost more height AND
     more taps. The label goes to assistive tech only to buy back the width. */
  /* nav.rail, not .rail: the base .rail declarations sit LATER in this sheet
     and a media query adds no specificity, so a bare .rail here loses. */
  nav.rail{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:.3rem;padding-bottom:.55rem;margin-bottom:.8rem}
  nav.rail::-webkit-scrollbar{display:none}
  nav.rail .chip,nav.rail .chip-wide-only,nav.rail .chip-extra{display:inline-flex;flex:none}
  nav.rail .chip-more{display:none}
  nav.rail .rail-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tldr li:nth-child(n+4){display:none}
  .tldr{padding:.8rem .9rem}
}
@media (max-width:760px){.tldr ol{columns:1}}
@media (max-width:700px){
  .story-row{grid-template-columns:1.6rem auto minmax(0,1fr);row-gap:.15rem}
  .story-head{grid-column:3;grid-row:1}
  .col-topic,.col-time{grid-row:2;text-align:left}
  .col-topic{grid-column:3}
  .col-time{grid-column:3;justify-self:end}
  .story-fold,.story-fold-static{grid-column:3;grid-row:3}
  a.discuss{grid-column:3;grid-row:3;justify-self:end}
  ol.wire .vote{grid-row:1 / span 3}
}
@media (pointer: coarse){
.account a,.account button{min-height:44px}
.story-fold summary{min-height:44px}

ol.wire .vote{min-width:44px}
ol.wire .vote .n{font-size:max(.74rem,12px)}
.chip{min-height:44px}
a.discuss{display:inline-flex;align-items:center;min-height:44px;padding-inline:.35rem;margin-inline:-.35rem;border-bottom:0;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.story-sources a{min-height:44px;display:inline-flex;align-items:center}
.cta a.signin{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
footer a{display:inline-flex;align-items:center;min-height:44px}

}