/* HQT magazine design: page layouts and the flipbook viewer.
   Loaded only on the design pages. Every size inside a page is in container
   units, so one page renders identically at any width, from a shelf thumbnail
   to full screen, and nothing reflows between them.

   Kepha's look comes from its subject: a serif with the warmth of a liturgical
   book, the lapis, garnet and gold of Mesopotamian ornament, warm paper, and
   the rosette that recurs in the art of the ancient Near East. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../assets/fonts/fraunces-latin.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url(../assets/fonts/fraunces-italic-latin.woff2) format('woff2'); }

.mag { --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --c1: #24477e; --c2: #b08a3e; --c3: #8a2332; --tint: #f3ecdf; --ink: #1f1b16; --muted: #6b6156; --rule: #d9cfbd; --paper: #fffdf8;
  --red: #8f2d2d; --orange: #b0702a; --blue: #2b4f86; --green: #4f6a3a; --navy: #1f2a44; --gold: #a8822f; --teal: #22686c; --plum: #5b3f72; --rose: #95405e; }

.mp { position: relative; aspect-ratio: 17 / 22; background: var(--paper); color: var(--ink); overflow: hidden; container-type: inline-size; font-family: var(--serif); text-align: left; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }
.mp *, .mp *::before, .mp *::after { box-sizing: border-box; }
.mp__in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 10.5cqw 7.5cqw 0; font-size: 1.76cqw; line-height: 1.5; }
.mp__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
:where(.mp) p { margin: 0 0 .6em; }
:where(.mp) a { color: inherit; }
:where(.mp) h2 { font-family: var(--serif); font-size: 6cqw; font-weight: 600; line-height: 1.04; letter-spacing: -.015em; color: var(--ink); margin: 0 0 .3em; }
:where(.mp) h3 { font-family: var(--font); font-size: 1.5cqw; font-weight: 800; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--t, var(--c1)); margin: 1em 0 .35em; }
:where(.mp) h3:first-child { margin-top: 0; }
:where(.mp) ul, :where(.mp) ol { margin: 0 0 .6em; padding-left: 1.2em; }
:where(.mp) li { margin-bottom: .25em; }
:where(.mp) strong { font-weight: 700; }
:where(.mp) em { font-style: italic; }
:where(.mp) picture, :where(.mp) img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
:where(.mp) figure { margin: 0; }
:where(.mp) blockquote { margin: .9em 0; padding: 0 0 0 2.4cqw; border-left: .35cqw solid var(--c2); background: none; color: var(--ink); font-style: italic; font-size: 1.12em; line-height: 1.45; }
:where(.mp) blockquote p { margin: 0; }

/* running head and folio */
.mp__run { position: absolute; z-index: 5; top: 4.4cqw; left: 7.5cqw; right: 7.5cqw; display: flex; justify-content: space-between; align-items: center; gap: 2cqw;
  font: 700 1.18cqw/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding-bottom: 1.3cqw; border-bottom: .14cqw solid var(--rule); }
.mp__run span:first-child { display: inline-flex; align-items: center; gap: 1.2cqw; color: var(--c3); }
.mp__run svg { width: 2.1cqw; height: 2.1cqw; color: var(--c2); flex: none; }
.mp__run--over { color: rgba(255,255,255,.88); border-bottom-color: rgba(255,255,255,.4); text-shadow: 0 .1cqw .6cqw rgba(0,0,0,.4); }
.mp__run--over span:first-child { color: #fff; }
.mp__run--over svg { color: #fff; }
.mp--r .mp__run { flex-direction: row-reverse; }
.mp__foot { flex: none; margin-top: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; padding: 1.6cqw 0 4.4cqw; font: 600 1.12cqw/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.mp__num { font: italic 600 2.1cqw/1 var(--serif); letter-spacing: 0; color: var(--ink); display: inline-flex; align-items: center; gap: 1.4cqw; }
.mp__num::before, .mp__num::after { content: ""; width: 3.4cqw; height: .14cqw; background: var(--c2); }
.mp__foot > span:last-child { text-align: right; }
.mp--r .mp__foot > span:first-child { order: 3; text-align: right; }
.mp--r .mp__foot > span:last-child { order: 1; text-align: left; }
.mp__foot--light { color: rgba(255,255,255,.8); }
.mp__foot--light .mp__num { color: #fff; }

/* shared pieces */
.kick { font: 800 1.36cqw/1.2 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--t, var(--c3)); margin: 0 0 1.4cqw; display: flex; align-items: center; gap: 1.2cqw; }
.kick::before { content: ""; width: 4.4cqw; height: .3cqw; background: var(--c2); flex: none; }
.cols { column-gap: 3cqw; orphans: 2; widows: 2; }
.cols--2 { column-count: 2; }
.cols--3 { column-count: 3; column-gap: 2.6cqw; }
.cols h3 { break-after: avoid; }
.cols ul, .cols blockquote { break-inside: avoid; }
.lede { font-size: 2.15cqw; line-height: 1.42; font-style: italic; color: #3d362e; }
.drop > p:first-child::first-letter { float: left; font-size: 4.6em; line-height: .8; font-weight: 600; margin: .06em .08em 0 0; color: var(--t, var(--c1)); }
.photo { position: relative; overflow: hidden; background: #e9e2d4; }
.photo > picture { position: absolute; inset: 0; }
.cap { font: 500 1.2cqw/1.35 var(--font); color: var(--muted); margin-top: .9cqw; }
.cap--over { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 4cqw 1.8cqw 1.3cqw; color: #fff; background: linear-gradient(transparent, rgba(20,15,10,.7)); letter-spacing: .04em; }
.box { padding: 2.6cqw 3cqw; color: #fff; background: var(--box, var(--c1)); }
.box h3 { color: #fff; }
.box p:last-child { margin-bottom: 0; }
.box--tint { background: var(--tint); color: var(--ink); border-top: .35cqw solid var(--c2); }
.box--tint h3 { color: var(--c1); }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw 3cqw; font-size: 1.55cqw; line-height: 1.35; }
.dates b { display: block; font-size: 1.75cqw; }
.seal { display: grid; place-items: center; }
.seal svg { width: 100%; height: auto; color: var(--c3); }
.icon-dot { display: inline-grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; border: .25cqw solid currentColor; flex: none; }
.icon-dot svg { width: 52%; height: 52%; }
.orn { display: block; width: 4.6cqw; height: 4.6cqw; color: var(--c2); }

/* cover */
.cv { position: absolute; inset: 0; color: #fff; }
.cv__photo { position: absolute; inset: 0; }
.cv__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,9,.7) 0%, rgba(15,12,9,.15) 30%, rgba(15,12,9,0) 46%, rgba(15,12,9,.25) 62%, rgba(15,12,9,.85) 100%); }
.cv__frame { position: absolute; inset: 2.8cqw; border: .3cqw solid var(--c2); pointer-events: none; }
.cv__frame::after { content: ""; position: absolute; inset: .9cqw; border: .12cqw solid rgba(255,255,255,.45); }
.cv__mast { position: absolute; top: 6.4cqw; left: 7cqw; right: 7cqw; text-align: center; }
.cv__over { font: 700 1.36cqw/1 var(--font); letter-spacing: .3em; text-transform: uppercase; margin: 0 0 .6cqw; color: rgba(255,255,255,.92); }
.cv__name { font: 700 23cqw/.9 var(--serif); letter-spacing: -.03em; margin: 0; color: #fff; text-shadow: 0 .4cqw 2.4cqw rgba(0,0,0,.25); font-variation-settings: 'SOFT' 50, 'WONK' 1; }
.cv__rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.6cqw; margin-top: 1.2cqw; font: 700 1.3cqw/1 var(--font); letter-spacing: .24em; text-transform: uppercase; }
.cv__rule span:first-child { text-align: right; }
.cv__rule span:last-child { text-align: left; }
.cv__rule span { display: flex; align-items: center; gap: 1.6cqw; }
.cv__rule span:first-child::before, .cv__rule span:last-child::after { content: ""; flex: 1; height: .14cqw; background: var(--c2); }
.cv__rule svg { width: 3.6cqw; height: 3.6cqw; color: var(--c2); }
.cv__story { position: absolute; left: 8cqw; right: 12cqw; bottom: 21cqw; }
.cv__kicker { display: inline-block; font: 800 1.4cqw/1 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); background: var(--c2); padding: 1cqw 1.6cqw; margin: 0 0 2cqw; }
.mp .cv__headline { font: 600 9.4cqw/.98 var(--serif); letter-spacing: -.02em; color: #fff; margin: 0; text-shadow: 0 .3cqw 2cqw rgba(0,0,0,.35); }
.cv__headline em { font-style: italic; font-weight: 500; }
.cv__dek { font: italic 400 2.2cqw/1.35 var(--serif); margin: 1.8cqw 0 0; max-width: 92%; color: rgba(255,255,255,.92); }
.cv__lines { position: absolute; left: 8cqw; right: 8cqw; bottom: 7cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: .14cqw solid rgba(255,255,255,.45); padding-top: 2cqw; }
.cv__lines p { margin: 0; padding-right: 3cqw; font: 400 1.75cqw/1.3 var(--serif); }
.cv__lines p + p { padding: 0 0 0 3cqw; border-left: .14cqw solid rgba(255,255,255,.45); }
.cv__lines b { display: block; font: 800 1.2cqw/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--c2); margin-bottom: .9cqw; }

/* contents */
.ct__head { flex: none; display: flex; align-items: baseline; justify-content: space-between; border-bottom: .3cqw solid var(--ink); padding-bottom: 1.4cqw; margin-bottom: 2.6cqw; }
.ct__head h2 { font-size: 8.4cqw; margin: 0; line-height: .95; }
.ct__head p { margin: 0; font-style: italic; font-size: 2.3cqw; color: var(--muted); }
.ct { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 38%; gap: 4cqw; }
.ct__lab { font: 800 1.3cqw/1 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--c3); margin: 0 0 1.4cqw; }
.ct__feats { list-style: none; margin: 0 0 3cqw; padding: 0; }
.ct__feats li { display: grid; grid-template-columns: 8cqw 1fr; gap: 1.6cqw; padding: 1.8cqw 0; border-top: .14cqw solid var(--rule); margin: 0; }
.ct__feats li:first-child { border-top: 0; padding-top: 0; }
.ct__feats b { font: 600 5.4cqw/1 var(--serif); color: var(--c1); letter-spacing: -.02em; }
.ct__t { font: 600 2.45cqw/1.15 var(--serif); margin: 0 0 .7cqw; }
.ct__d { font-size: 1.55cqw; line-height: 1.42; color: #4a4239; margin: 0; }
.ct__depts { list-style: none; margin: 0; padding: 0; }
.ct__depts li { display: flex; align-items: baseline; gap: 1cqw; font-size: 1.72cqw; line-height: 1.3; margin: 0 0 1.05cqw; }
.ct__depts i { flex: 1; border-bottom: .2cqw dotted #b9ad97; transform: translateY(-.5cqw); }
.ct__depts b { font: italic 600 1.9cqw/1 var(--serif); color: var(--c1); }
.ct__side { display: flex; flex-direction: column; gap: 2.4cqw; min-height: 0; }
.ct__photo { flex: 1 1 auto; min-height: 30cqw; }
.ct__promo { background: var(--tint); border-top: .35cqw solid var(--c2); padding: 2.2cqw 2.4cqw; }
.ct__promo-n { font: 600 4.2cqw/1 var(--serif); color: var(--c3); margin: 0 0 .7cqw; }
.ct__promo-t { font: 600 2.1cqw/1.2 var(--serif); margin: 0 0 .7cqw; }
.ct__promo p:last-child { font-size: 1.5cqw; margin: 0; }
.mast { font: 400 1.08cqw/1.45 var(--font); color: #4a4239; }
.mast p { margin: 0 0 .8em; }
.mast b { font-weight: 800; }

/* letter */
.lt { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 34%; gap: 4cqw; }
.lt h2 { font-size: 6.4cqw; margin-bottom: 2.4cqw; }
.lt__body { font-size: 1.82cqw; line-height: 1.55; }
.lt__sig { margin-top: 2cqw; font: 500 1.5cqw/1.4 var(--font); }
.lt__sig i { display: block; font: italic 500 2.6cqw/1.15 var(--serif); color: var(--c1); margin-bottom: .8cqw; }
.lt__sig b { display: block; font-weight: 800; }
.lt__side { display: flex; flex-direction: column; gap: 2.6cqw; }
.lt__photo { height: 34cqw; border: .3cqw solid var(--c2); outline: .9cqw solid var(--paper); outline-offset: -1.3cqw; }
.lt__box { border-top: .35cqw solid var(--c2); padding-top: 1.8cqw; }
.lt__box-h { font: 600 2.5cqw/1.15 var(--serif); margin: 0 0 1.6cqw; }
.lt__item { margin: 0; padding: 1.1cqw 0; border-top: .14cqw solid var(--rule); }
.lt__item b { display: block; font: 800 1.2cqw/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--c3); margin-bottom: .3cqw; }
.lt__item span { display: block; font-size: 1.62cqw; line-height: 1.32; }

/* feature opener */
.ft__photo { position: relative; margin: -10.5cqw -7.5cqw 0; height: 52cqw; flex: none; }
.ft__photo--short { height: 44cqw; }
.ft__photo--tall { height: 60cqw; }
.ft__photo::after { content: ""; position: absolute; inset: 0 0 auto; height: 18cqw; background: linear-gradient(180deg, rgba(15,12,9,.55), rgba(15,12,9,0)); }
.ft__photo .cap--over { background: none; padding: 0 2.4cqw 1.6cqw; text-align: right; text-shadow: 0 .1cqw .6cqw rgba(0,0,0,.6); }
.ft__head { flex: none; padding: 3.4cqw 0 2.2cqw; margin-bottom: 2.4cqw; border-bottom: .14cqw solid var(--rule); }
.ft__head h2 { font-size: 6.6cqw; margin: 0 0 1.2cqw; }
.ft__dek { font-style: italic; font-size: 2.15cqw; line-height: 1.38; color: #4a4239; margin: 0; max-width: 92%; }
.ft__text { flex: 1; min-height: 0; }
.ft__box { flex: none; margin-top: 2.2cqw; display: flex; gap: 2.4cqw; align-items: center; padding: 1.8cqw 2.4cqw; background: var(--tint); border-left: .5cqw solid var(--c2); font: 400 1.55cqw/1.4 var(--font); }
.ft__box p { margin: 0; }
.ft__box strong { font-weight: 800; }
.ft__box .icon-dot { color: var(--c3); width: 5.6cqw; height: 5.6cqw; }

/* feature continuation */
.fc__top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.6cqw; margin: 0 0 3cqw; height: 40cqw; flex: none; }
.fc__top--flip { grid-template-columns: 1fr 1.2fr; }
.fc__top--flip .fc__quote { order: -1; }
.fc__quote { background: var(--c1); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 3cqw 3.4cqw; }
.fc__quote .orn { color: var(--c2); margin-bottom: 2cqw; }
.fc__quote blockquote { margin: 0; padding: 0; border: 0; color: #fff; font: italic 400 2.5cqw/1.35 var(--serif); }
.fc__quote cite { display: block; margin-top: 2cqw; font: 800 1.25cqw/1 var(--font); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--c2); }
.fc__strip { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.2cqw; height: 24cqw; margin: 2.4cqw 0 0; }

/* news page: briefs plus a side column */
.nw { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 32%; gap: 3.6cqw; }
.nw__main { display: flex; flex-direction: column; min-height: 0; }
.nw__title { font-size: 7cqw; margin: 0 0 2.4cqw; padding-bottom: 1.6cqw; border-bottom: .3cqw solid var(--ink); }
.nw__story + .nw__story { margin-top: 2.4cqw; padding-top: 2.4cqw; border-top: .14cqw solid var(--rule); }
.nw__img { height: 20cqw; margin-bottom: 2cqw; }
.nw h2:not(.nw__title) { font-size: 3.5cqw; line-height: 1.1; margin-bottom: 1.4cqw; }
.nw .box { margin-top: 1.6cqw; }
.nw__side { background: var(--tint); border-top: .5cqw solid var(--sbg, var(--c2)); display: flex; flex-direction: column; align-self: start; }
.nw__side-img { height: 28cqw; flex: none; }
.nw__side-body { padding: 2.6cqw 2.6cqw 2.8cqw; font-size: 1.55cqw; }
.nw__side h3 { font: 600 3.1cqw/1.12 var(--serif); letter-spacing: -.01em; text-transform: none; color: var(--ink); margin: 0 0 1.6cqw; }

/* timeline */
.tl { position: relative; flex: 1; min-height: 0; }
.tl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: .2cqw; margin-left: -.1cqw; background: var(--c2); }
.tl__row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw; margin-bottom: 2.4cqw; }
.tl__row::before { content: ""; position: absolute; left: 50%; top: 1.6cqw; width: 2cqw; height: 2cqw; margin-left: -1cqw; transform: rotate(45deg); background: var(--c1); border: .4cqw solid var(--paper); }
.tl__item { grid-column: 1; text-align: right; }
.tl__row:nth-child(even) .tl__item { grid-column: 2; text-align: left; }
.tl__aside { grid-column: 2; grid-row: 1; }
.tl__row:nth-child(even) .tl__aside { grid-column: 1; }
.tl__year { font: 600 5cqw/1 var(--serif); color: var(--c1); margin: 0 0 .6cqw; letter-spacing: -.02em; }
.tl__t { font-weight: 700; font-size: 1.9cqw; margin: 0 0 .4cqw; line-height: 1.25; }
.tl__item p { font-size: 1.6cqw; line-height: 1.42; margin: 0; }
.tl__aside .photo { height: 17cqw; }
.tl__note { position: relative; z-index: 1; background: var(--tint); border-top: .35cqw solid var(--c2); padding: 2.4cqw 3cqw; font-size: 1.6cqw; }

/* parish spotlight */
.sp__photo { position: relative; margin: -10.5cqw -7.5cqw 0; height: 46cqw; flex: none; }
.sp__photo::after { content: ""; position: absolute; inset: 0 0 auto; height: 18cqw; background: linear-gradient(180deg, rgba(15,12,9,.55), rgba(15,12,9,0)); }
.sp__head { flex: none; padding: 3.2cqw 0 2cqw; margin-bottom: 2.6cqw; border-bottom: .14cqw solid var(--rule); }
.sp__head h2 { font-size: 5.4cqw; margin: 0; }
.sp__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 34%; gap: 3.6cqw; }
.sp__main { display: flex; flex-direction: column; min-height: 0; }
.sp__facts { font: 400 1.45cqw/1.38 var(--font); align-self: start; border-left: .14cqw solid var(--rule); padding-left: 2.6cqw; }
.sp__facts h3 { font-size: 1.22cqw; margin: 0 0 1cqw; }
.sp__facts h3 + * { margin-top: 0; }
.sp__facts dl { margin: 0 0 2.2cqw; display: grid; grid-template-columns: auto 1fr; gap: .7cqw 1.6cqw; }
.sp__facts dt { font-weight: 800; }
.sp__facts dd { margin: 0; }
.sp__facts p { margin: 0 0 1.2cqw; }
.sp__facts > div + h3, .sp__facts dl + h3 { margin-top: 2.2cqw; }
.sp__inset { flex: 1 1 auto; min-height: 12cqw; margin-top: 2.2cqw; }
.sp__clergy { display: flex; gap: 1.6cqw; align-items: center; margin: 0 0 1.4cqw; }
.sp__clergy .photo { width: 7cqw; height: 7cqw; border-radius: 50%; flex: none; }
.sp__clergy b { display: block; font-size: 1.5cqw; line-height: 1.25; }
.sp__clergy span { display: block; font-size: 1.32cqw; color: var(--muted); line-height: 1.25; }

/* roster */
.ro__intro { flex: none; display: grid; grid-template-columns: 1fr 1.2fr; gap: 3cqw; align-items: end; margin-bottom: 3cqw; padding-bottom: 2cqw; border-bottom: .3cqw solid var(--ink); }
.ro__intro h2 { margin: 0; }
.ro__intro p { margin: 0; font-size: 1.65cqw; }
.ro__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.2cqw 1.8cqw; }
.ro__grid--4 { grid-template-columns: repeat(4, 1fr); }
.ro__p .photo { aspect-ratio: 1; margin-bottom: 1cqw; }
.ro__p .photo img { object-position: 50% 18%; }
.ro__p b { display: block; font: 600 1.6cqw/1.2 var(--serif); }
.ro__p span { display: block; font: 400 1.2cqw/1.3 var(--font); color: var(--muted); margin-top: .3cqw; }
.ro__p--none .photo { display: grid; place-items: center; color: var(--c2); }
.ro__p--none .photo svg { width: 36%; height: auto; opacity: .6; }
.ro__more { margin-top: 2.6cqw; columns: 3; column-gap: 3cqw; font: 400 1.3cqw/1.4 var(--font); border-top: .14cqw solid var(--rule); padding-top: 2cqw; }
.ro__more p { margin: 0 0 .9cqw; break-inside: avoid; }
.ro__more b { display: block; font: 600 1.5cqw/1.2 var(--serif); }

/* calendar */
.ca__top { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; align-items: end; margin-bottom: 3cqw; padding-bottom: 2cqw; border-bottom: .3cqw solid var(--ink); }
.ca__top h2 { margin: 0; }
.ca__top p { margin: 0; font-size: 1.65cqw; font-style: italic; color: #4a4239; }
.ca__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw 3.4cqw; align-content: start; }
.ca__ev { display: flex; gap: 2cqw; align-items: flex-start; }
.ca__date { flex: none; width: 8.6cqw; text-align: center; border-right: .2cqw solid var(--c2); padding-right: 1.6cqw; line-height: 1; }
.ca__date i { display: block; font: 800 1.25cqw/1 var(--font); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--t, var(--c3)); }
.ca__date b { display: block; font: 600 4.6cqw/1 var(--serif); margin-top: .6cqw; letter-spacing: -.02em; color: var(--ink); }
.ca__ev h3 { margin: .1cqw 0 .6cqw; font: 600 2cqw/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.ca__ev p { margin: 0; font: 400 1.45cqw/1.4 var(--font); color: #4a4239; }
.ca__band { flex: none; margin-top: auto; padding-top: 2.4cqw; }
.ca__band .box { display: grid; grid-template-columns: 30% 1fr; gap: 3cqw; align-items: start; }
.ca__band .box h3 { margin: 0; font: 600 2.4cqw/1.15 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.ca__band .box p { font: 400 1.5cqw/1.42 var(--font); }
.ca__photo { height: 30cqw; flex: none; margin: 0 0 3cqw; }

/* worship / mass time tables */
.mp .wt { width: 100%; border-collapse: collapse; margin: 0 0 2.6cqw; border: 0; background: none; break-inside: avoid; }
.mp .wt th, .mp .wt td { text-align: left; vertical-align: top; padding: .9cqw 1.2cqw .9cqw 0; border: 0; border-bottom: .14cqw solid var(--rule); background: none; text-transform: none; letter-spacing: 0; font: 400 1.45cqw/1.35 var(--font); color: var(--ink); }
.mp .wt th { font-weight: 800; white-space: nowrap; width: 1%; }
.mp .wt caption { text-align: left; font: 600 2.1cqw/1.2 var(--serif); padding: 0 0 .8cqw; caption-side: top; color: var(--c1); }

/* directory */
.dr__cols { column-count: 2; column-gap: 3.4cqw; font: 400 1.28cqw/1.34 var(--font); }
.dr__group { break-inside: avoid-column; }
.dr__group h3 { display: block; font-size: 1.3cqw; color: var(--t, var(--c1)); margin: .6cqw 0 1.2cqw !important; padding-bottom: .7cqw; border-bottom: .3cqw solid var(--c2); }
.dr__item { margin: 0 0 1.1cqw; break-inside: avoid; }
.dr__item b { display: block; font: 600 1.55cqw/1.25 var(--serif); }
.dr__item span { display: block; color: #4a4239; }

/* gallery */
.ga { flex: 1; min-height: 0; display: grid; gap: 1cqw; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1.25fr 1fr 1fr; }
.ga .photo:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
.ga--b .photo:first-child { grid-column: 2 / 4; }
.ga__intro { flex: none; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3cqw; align-items: end; margin-bottom: 2.6cqw; padding-bottom: 2cqw; border-bottom: .3cqw solid var(--ink); }
.ga__intro h2 { margin: 0; }
.ga__intro p { margin: 0; font-size: 1.65cqw; font-style: italic; color: #4a4239; }

/* programme page */
.pg__hero { margin: -10.5cqw -7.5cqw 0; background: var(--t, var(--c1)); color: #fff; padding: 13cqw 7.5cqw 4.4cqw; flex: none; position: relative; overflow: hidden; }
.pg__hero > .orn { position: absolute; right: -8cqw; bottom: -10cqw; width: 44cqw; height: 44cqw; color: rgba(255,255,255,.08); }
.pg__hero > .orn circle:last-of-type { fill: var(--t, var(--c1)); }
.pg__kicker { font: 800 1.4cqw/1 var(--font); letter-spacing: .24em; text-transform: uppercase; margin: 0 0 1.6cqw; color: var(--c2); }
.mp .pg__hero h2 { color: #fff; font-size: 6.6cqw; margin: 0 0 1.6cqw; max-width: 80%; }
.pg__hero p:last-child { font-style: italic; font-size: 2.05cqw; line-height: 1.4; margin: 0; max-width: 76%; }
.pg__hero-img { position: absolute; z-index: 1; right: 5cqw; top: 9cqw; width: 22cqw; height: 22cqw; }
.pg__hero-img img { object-fit: contain; }
.pg__facts { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 -7.5cqw 3cqw; background: var(--tint); border-bottom: .3cqw solid var(--c2); }
.pg__facts--3 { grid-template-columns: repeat(3, 1fr); }
.pg__fact { padding: 2.2cqw 2cqw 2.2cqw 2.4cqw; border-left: .14cqw solid var(--rule); font: 400 1.5cqw/1.35 var(--font); }
.pg__fact:first-child { border-left: 0; padding-left: 7.5cqw; }
.pg__fact b { display: block; font-size: 1.15cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--c3); margin-bottom: .6cqw; }
.pg__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 36%; gap: 3.4cqw; }
.pg__list { border-top: .35cqw solid var(--c2); padding-top: 1.8cqw; font: 400 1.45cqw/1.4 var(--font); align-self: start; }
.pg__list h3 { font-size: 1.25cqw; margin: 0 0 1.4cqw; }
.pg__list ul { list-style: none; padding: 0; margin: 0; }
.pg__list li { position: relative; padding: 0 0 1.1cqw 3cqw; margin-bottom: 1.1cqw; border-bottom: .14cqw solid var(--rule); }
.pg__list li::before { content: ""; position: absolute; left: .3cqw; top: .45em; width: 1.1cqw; height: 1.1cqw; transform: rotate(45deg); background: var(--c2); }

/* liturgical year wheel */
.wh { flex: 1; min-height: 0; display: grid; grid-template-columns: 46% 1fr; gap: 3.4cqw; align-items: start; }
.wh__svg { width: 100%; height: auto; display: block; }
.wh__svg text { font-family: var(--serif); }
.wh__legend { list-style: none; margin: 0; padding: 0; }
.wh__legend li { display: grid; grid-template-columns: 2.2cqw 1fr; gap: 1.4cqw; margin: 0 0 1.2cqw; font: 400 1.32cqw/1.36 var(--font); }
.wh__legend i { width: 2.2cqw; height: 2.2cqw; transform: rotate(45deg) scale(.8); margin-top: .2cqw; }
.wh__legend b { font: 600 1.7cqw/1.2 var(--serif); }
.wh__legend em { color: var(--muted); font-family: var(--serif); }

/* full-bleed photograph with a quotation */
.qp { position: absolute; inset: 0; }
.qp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,9,.35) 0%, rgba(15,12,9,.05) 30%, rgba(15,12,9,.82)); }
.qp__frame { position: absolute; z-index: 2; inset: 2.8cqw; border: .3cqw solid var(--c2); }
.qp__text { position: absolute; z-index: 2; left: 9cqw; right: 11cqw; bottom: 16cqw; color: #fff; }
.qp__text .orn { color: var(--c2); width: 6cqw; height: 6cqw; margin-bottom: 2.4cqw; }
.qp__text blockquote { margin: 0; padding: 0; border: 0; color: #fff; font: italic 400 5.4cqw/1.16 var(--serif); }
.qp__text cite { display: block; margin-top: 2.6cqw; font: 800 1.4cqw/1 var(--font); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--c2); }
.mp--photo .mp__foot { position: absolute; z-index: 3; left: 7.5cqw; right: 7.5cqw; bottom: 0; }

/* notice */
.nt { flex: 1; min-height: 0; background: var(--tint); border: .3cqw solid var(--c2); outline: .14cqw solid var(--c2); outline-offset: -1.2cqw; padding: 5cqw 6cqw; margin-bottom: 2cqw; text-align: center; display: flex; flex-direction: column; }
.nt .seal { width: 6.4cqw; margin: 0 auto 2.4cqw; }
.nt__k { font: 800 1.36cqw/1 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--c3); margin: 0 0 1.6cqw; }
.nt h2 { font-size: 5cqw; line-height: 1.1; margin: 0 0 1.6cqw; }
.nt__sub { font-style: italic; font-size: 1.85cqw; color: #4a4239; margin: 0 0 3cqw; }
.nt__body { text-align: left; font-size: 1.8cqw; line-height: 1.55; }
.nt__sig { margin-top: auto; padding-top: 2cqw; text-align: left; font: 400 1.5cqw/1.4 var(--font); }
.nt__sig b { display: block; font: 600 1.9cqw/1.3 var(--serif); }

/* back cover */
.bc { position: absolute; inset: 0; display: flex; flex-direction: column; }
.bc__photo { position: relative; flex: 1 1 auto; }
.bc__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,9,.05) 25%, rgba(15,12,9,.8)); }
.bc__ad { position: absolute; z-index: 2; left: 8cqw; right: 8cqw; bottom: 33cqw; color: #fff; }
.bc__k { display: inline-block; font: 800 1.4cqw/1 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); background: var(--c2); padding: 1cqw 1.6cqw; margin: 0 0 2.2cqw; }
.mp .bc__ad h2 { color: #fff; font-size: 7.6cqw; margin: 0 0 1.6cqw; max-width: 92%; }
.bc__ad p { font-style: italic; font-size: 2.15cqw; line-height: 1.42; max-width: 84%; margin: 0 0 2.4cqw; }
.bc__cta { display: inline-block; border: .25cqw solid var(--c2); color: #fff; font: 800 1.6cqw/1 var(--font); letter-spacing: .12em; text-transform: uppercase; padding: 1.5cqw 2.4cqw; }
.bc__strip { flex: none; height: 26cqw; background: var(--paper); border-top: .5cqw solid var(--c2); display: grid; grid-template-columns: auto 1fr auto; gap: 3.4cqw; align-items: center; padding: 0 8cqw 2cqw; }
.bc__strip .seal { width: 7.6cqw; }
.bc__addr { font: 400 1.45cqw/1.45 var(--font); }
.bc__addr b { display: block; font: 600 2.1cqw/1.2 var(--serif); margin-bottom: .5cqw; }
.bc__mail { font: 400 1.18cqw/1.4 var(--font); border: .15cqw solid var(--rule); padding: 1.4cqw 1.8cqw; width: 29cqw; color: #4a4239; }
.bc__mail b { display: block; font-weight: 800; }

/* ---------- viewer ---------- */
.mag-head { padding: 2rem 0 1.5rem; background: #fff; }
.mag-head h1 { font-size: 2.1rem; margin-bottom: .35rem; }
.mag-head .lead { margin-bottom: 0; font-size: 1.08rem; }
.mag-head .eyebrow { margin-bottom: .35rem; }
.viewer { position: relative; scroll-margin-top: 70px; background: #1a1d24; color: #fff; overflow: hidden; isolation: isolate; }
.viewer__bg { position: absolute; inset: -40px; background: center/cover no-repeat; filter: blur(26px) saturate(1.15) brightness(.55); transform: scale(1.08); z-index: -1; }
.viewer__top { display: flex; align-items: center; gap: .75rem; padding: .85rem 20px .25rem; font-size: .92rem; max-width: 1600px; margin: 0 auto; }
.viewer__title { font-weight: 700; }
.viewer__count { background: rgba(255,255,255,.12); border-radius: 4px; padding: .2rem .6rem; font-variant-numeric: tabular-nums; }
.viewer__stage { position: relative; display: flex; align-items: center; justify-content: center; padding: .75rem 64px 1rem; }
.flipbook { width: 100%; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.flipbook > .mp { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.viewer__arrow, .viewer__bar, .viewer__thumbs { display: none; }

.viewer.is-live .flipbook { display: block; position: relative; width: calc(var(--pw, 300px) * 2); max-width: none; height: calc(var(--pw, 300px) * 22 / 17); perspective: 2600px; transition: transform .5s ease; }
.viewer.is-live.is-single .flipbook { width: var(--pw, 300px); }
.viewer.is-live .flipbook > .mp { display: none; }
.viewer.is-live .flipbook .mp[data-slot] { display: block; position: absolute; top: 0; width: var(--pw); box-shadow: none; }
.viewer.is-live .flipbook .mp[data-slot="l"] { left: 0; }
.viewer.is-live .flipbook .mp[data-slot="r"] { left: var(--pw); }
.viewer.is-live.is-single .flipbook .mp[data-slot] { left: 0; }
.viewer.is-live .flipbook::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--edge-l, 0); right: var(--edge-r, 0); box-shadow: 0 18px 50px rgba(0,0,0,.5); pointer-events: none; }
.viewer.is-live:not(.is-single) .flipbook .mp[data-slot="l"]::after,
.viewer.is-live:not(.is-single) .flipbook .mp[data-slot="r"]::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; z-index: 20; }
.viewer.is-live:not(.is-single) .flipbook .mp[data-slot="l"]::after { right: 0; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.16)); }
.viewer.is-live:not(.is-single) .flipbook .mp[data-slot="r"]::after { left: 0; background: linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,.2)); }
.leaf { position: absolute; top: 0; width: var(--pw); height: 100%; transform-style: preserve-3d; z-index: 30; }
.leaf--next { left: var(--pw); transform-origin: 0 50%; }
.leaf--prev { left: 0; transform-origin: 100% 50%; }
.leaf__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.leaf__face--back { transform: rotateY(180deg); }
.leaf__face > .mp { display: block !important; position: absolute !important; inset: 0; width: 100% !important; left: 0 !important; }
.leaf__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 60%); animation: leaf-shade var(--flip-ms, 700ms) ease-in-out forwards; }
.leaf__face--back::after { background: linear-gradient(270deg, rgba(0,0,0,.28), rgba(0,0,0,0) 60%); }
@keyframes leaf-shade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.leaf--next.is-turning { animation: leaf-next var(--flip-ms, 700ms) cubic-bezier(.45,.05,.35,1) forwards; }
.leaf--prev.is-turning { animation: leaf-prev var(--flip-ms, 700ms) cubic-bezier(.45,.05,.35,1) forwards; }
@keyframes leaf-next { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes leaf-prev { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.viewer.is-live .flipbook .mp[data-slot] { cursor: pointer; }
.viewer.is-live .flipbook .mp a { cursor: pointer; }
.viewer.is-fading .flipbook .mp[data-slot] { animation: page-fade .28s ease; }
@keyframes page-fade { from { opacity: .2; } to { opacity: 1; } }

.viewer.is-live .viewer__arrow { display: grid; place-items: center; position: absolute; top: 50%; width: 48px; height: 64px; margin-top: -32px; background: none; border: 0; color: rgba(255,255,255,.75); cursor: pointer; border-radius: 6px; }
.viewer__arrow:hover { color: #fff; background: rgba(255,255,255,.08); }
.viewer__arrow:disabled { opacity: .2; cursor: default; background: none; }
.viewer__arrow--prev { left: 8px; }
.viewer__arrow--next { right: 8px; }
.viewer__arrow svg { width: 30px; height: 30px; }
.viewer.is-live .viewer__bar { display: flex; justify-content: center; align-items: center; gap: .2rem; padding: .25rem 20px 1rem; }
.viewer__bar button { display: grid; place-items: center; width: 40px; height: 38px; background: none; border: 0; border-radius: 6px; color: rgba(255,255,255,.85); cursor: pointer; }
.viewer__bar button:hover, .viewer__bar button[aria-pressed="true"] { background: rgba(255,255,255,.12); color: #fff; }
.viewer__bar button:disabled { opacity: .3; cursor: default; background: none; }
.viewer__bar svg { width: 21px; height: 21px; }
.viewer__sep { width: 1px; height: 22px; background: rgba(255,255,255,.25); margin: 0 .45rem; }
.viewer__toast { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); background: #fff; color: #14213D; font-weight: 700; font-size: .9rem; padding: .45rem .9rem; border-radius: 4px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.viewer__toast.is-on { opacity: 1; }
.viewer.is-live .viewer__thumbs:not([hidden]) { display: block; position: absolute; inset: 0; z-index: 60; background: rgba(15,17,22,.94); overflow: auto; padding: 1.25rem 24px 2rem; }
.viewer__thumbs-head { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto 1rem; font-weight: 700; }
.viewer__thumbs-head button { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 4px; padding: .4rem .8rem; font: inherit; font-weight: 700; cursor: pointer; }
.viewer__thumbs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 14px; max-width: 1200px; margin: 0 auto; }
.viewer__thumb { background: none; border: 0; padding: 0; color: #cfd5df; cursor: pointer; font: inherit; font-size: .8rem; text-align: center; }
.viewer__thumb .mp { box-shadow: 0 4px 14px rgba(0,0,0,.4); margin-bottom: .4rem; pointer-events: none; outline: 3px solid transparent; outline-offset: 2px; }
.viewer__thumb:hover .mp, .viewer__thumb.is-here .mp { outline-color: #F5B400; }
.viewer:fullscreen { display: flex; flex-direction: column; justify-content: center; }
.viewer:fullscreen .viewer__stage { flex: 1; }
.viewer.is-zoomed .viewer__stage { overflow: auto; align-items: flex-start; max-height: calc(100vh - 140px); }

/* issue details below the viewer */
.issue-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 6px; margin: 0 0 2rem; }
.issue-meta div { padding: .9rem 1.1rem; border-left: 1px solid var(--line); }
.issue-meta div:first-child { border-left: 0; }
.issue-meta dt { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.issue-meta dd { margin: .15rem 0 0; font-weight: 700; color: var(--navy); }
.issue-toc { list-style: none; padding: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--line); }
.issue-toc li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.issue-toc .pg { font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; }
.issue-toc a { font-weight: 700; color: var(--navy); text-decoration: none; }
.issue-toc a:hover { text-decoration: underline; }
.issue-toc span.d { display: block; color: var(--muted); font-size: .92rem; }

/* cover shelves */
.shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.75rem; }
.shelf--3 { grid-template-columns: repeat(3, 1fr); }
.shelf__item { display: block; text-decoration: none; color: var(--navy); }
.shelf__item .mp { box-shadow: 0 2px 4px rgba(20,33,61,.12), 0 12px 28px rgba(20,33,61,.18); transition: transform .25s ease, box-shadow .25s ease; pointer-events: none; }
.shelf__item:hover .mp, .shelf__item:focus-visible .mp { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 4px 8px rgba(20,33,61,.12), 0 22px 40px rgba(20,33,61,.26); }
.shelf__label { display: block; margin-top: .9rem; font-weight: 800; font-size: 1.02rem; line-height: 1.3; }
.shelf__label span { display: block; font-weight: 500; font-size: .9rem; color: var(--muted); margin-top: .15rem; }
.shelf__year { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 1.25rem; }
.shelf__year h2 { margin: 0; }
.shelf__year span { color: var(--muted); }
.shelf + .shelf__year { margin-top: 3rem; }
.mag-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; }
.mag-feature__covers { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.mag-feature__covers .shelf__item:nth-child(2) { transform: translateY(2rem); }

@media (max-width: 960px) {
  .shelf { grid-template-columns: repeat(2, 1fr); }
  .shelf--3 { grid-template-columns: repeat(2, 1fr); }
  .issue-meta { grid-template-columns: 1fr 1fr; }
  .issue-meta div:nth-child(3) { border-left: 0; }
  .issue-meta div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .mag-feature { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .viewer__stage { padding-left: 12px; padding-right: 12px; }
  .viewer.is-live .viewer__arrow { display: none; }
  .viewer__bar button { width: 36px; }
  .mag-head h1 { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer.is-live .flipbook, .shelf__item .mp { transition: none; }
}
@media print {
  .viewer__top, .viewer__bar, .viewer__arrow, .viewer__bg { display: none !important; }
  .viewer { background: none; }
  .flipbook { display: block !important; width: auto !important; height: auto !important; transform: none !important; }
  .flipbook > .mp { display: block !important; position: relative !important; width: 100% !important; left: 0 !important; break-after: page; box-shadow: none !important; }
}