/*
 * Missal theme — base.css
 * Tokens, @font-face, reset, roles, shell, layer, the objects (BUILD-PLAN §1.2).
 * This file is written in parts: T7 wrote the Faces block below; T8 adds the rest.
 *
 * Faces are self-hosted (no third-party font calls). Files are Google Fonts' own
 * pre-subset woff2 (css2 API, fetched 2026-11-14), not subset here; unicode-range
 * values are Google's, unchanged. Licences: SIL OFL 1.1, one OFL.txt per family
 * in assets/fonts/missal/<family>/. Preloads: assets/fonts/missal/PRELOAD.txt.
 */

/* === Tokens === (DESIGN §2; values from round9/ui.css) */
:root{
  /* colour — DESIGN §2.1. Nothing else in the Missal CSS writes a literal colour. */
  --paper:#FCFBF8;--ink:#141414;--red:#BF1B1B;--init:#BF1B1B;--faint:#6F6C66;
  --hair:rgba(20,20,20,.16);--rr:rgba(191,27,27,.55);--wash:rgba(191,27,27,.08);
  --sel:rgba(191,27,27,.16);--ghost:rgba(20,20,20,.3);
  /* the liturgical colours; --season is set per day by the server (white and black days are ink) */
  --lit-green:#2F6B3A;--lit-violet:#5B3A78;--lit-rose:#B0577A;--lit-red:#BF1B1B;
  --season:var(--ink);
  /* faces — DESIGN §2.2 */
  --scr:'EB Garamond',Georgia,serif;
  --disp:'Cormorant Garamond','EB Garamond',Georgia,serif;
  --dispsc:'Cormorant SC','Cormorant Garamond',Georgia,serif;
  --txt:'Alegreya',Georgia,serif;
  --txtsc:'Alegreya SC','Alegreya',serif;
  /* space — DESIGN §2.3: 12 24 36 48 72 96 */
  --u:24px;--bar:48px;
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  /* text size (A− A+): 0.9–1.3 in steps of 0.1; multiplies size and leading of the reading roles only */
  --scale:1;
  /* type roles — DESIGN §2.2, sizes from round9/ui.css. Chrome roles do not scale. */
  --f-scr:400 calc(20px * var(--scale))/calc(30px * var(--scale)) var(--scr);   /* scripture body (22/33 ≥700) */
  --f-txt:400 calc(18px * var(--scale))/calc(27px * var(--scale)) var(--txt);   /* commentary body (.g__t) */
  --f-note:italic 400 calc(18px * var(--scale))/calc(27px * var(--scale)) var(--txt); /* the library's own prose */
  --f-title:500 25px/36px var(--disp);                                           /* page title = menu-link role (28px ≥700) */
  --f-head:400 17px/1 var(--scr);                                                /* running head (18px ≥1080), all-small-caps */
  --f-meta:400 16px/24px var(--scr);                                             /* grey UI small caps (.hint) */
  --f-name:400 16.5px/24px var(--txtsc);                                         /* a writer's name, an era head */
  --f-year:400 14px/24px var(--txt);                                             /* year / tradition run (.g__y) */
}
@media(min-width:700px){:root{--f-scr:400 calc(22px * var(--scale))/calc(33px * var(--scale)) var(--scr);--f-title:500 28px/36px var(--disp)}}
@media(min-width:1080px){:root{--f-head:400 18px/1 var(--scr)}}

/* === Faces === */
/* ebgaramond — SIL OFL 1.1, see ../../fonts/missal/ebgaramond/OFL.txt */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../../fonts/missal/ebgaramond/ebgaramond-400-800-normal-greek-ext.woff2') format('woff2');
  unicode-range:U+1F00-1FFF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../../fonts/missal/ebgaramond/ebgaramond-400-800-normal-greek.woff2') format('woff2');
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../../fonts/missal/ebgaramond/ebgaramond-400-800-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../../fonts/missal/ebgaramond/ebgaramond-400-800-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;
  src:url('../../fonts/missal/ebgaramond/ebgaramond-400-800-italic-greek-ext.woff2') format('woff2');
  unicode-range:U+1F00-1FFF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;
  src:url('../../fonts/missal/ebgaramond/ebgaramond-400-800-italic-greek.woff2') format('woff2');
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;
  src:url('../../fonts/missal/ebgaramond/ebgaramond-400-800-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;
  src:url('../../fonts/missal/ebgaramond/ebgaramond-400-800-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* cormorantgaramond — SIL OFL 1.1, see ../../fonts/missal/cormorantgaramond/OFL.txt */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../../fonts/missal/cormorantgaramond/cormorantgaramond-500-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../../fonts/missal/cormorantgaramond/cormorantgaramond-500-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* cormorantsc — SIL OFL 1.1, see ../../fonts/missal/cormorantsc/OFL.txt */
@font-face{font-family:'Cormorant SC';font-style:normal;font-weight:500;font-display:swap;
  src:url('../../fonts/missal/cormorantsc/cormorantsc-500-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant SC';font-style:normal;font-weight:500;font-display:swap;
  src:url('../../fonts/missal/cormorantsc/cormorantsc-500-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* alegreya — SIL OFL 1.1, see ../../fonts/missal/alegreya/OFL.txt */
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../../fonts/missal/alegreya/alegreya-400-900-normal-greek-ext.woff2') format('woff2');
  unicode-range:U+1F00-1FFF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../../fonts/missal/alegreya/alegreya-400-900-normal-greek.woff2') format('woff2');
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../../fonts/missal/alegreya/alegreya-400-900-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../../fonts/missal/alegreya/alegreya-400-900-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* alegreya — SIL OFL 1.1, see ../../fonts/missal/alegreya/OFL.txt */
@font-face{font-family:'Alegreya';font-style:italic;font-weight:400;font-display:swap;
  src:url('../../fonts/missal/alegreya/alegreya-400-italic-greek-ext.woff2') format('woff2');
  unicode-range:U+1F00-1FFF}
@font-face{font-family:'Alegreya';font-style:italic;font-weight:400;font-display:swap;
  src:url('../../fonts/missal/alegreya/alegreya-400-italic-greek.woff2') format('woff2');
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Alegreya';font-style:italic;font-weight:400;font-display:swap;
  src:url('../../fonts/missal/alegreya/alegreya-400-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Alegreya';font-style:italic;font-weight:400;font-display:swap;
  src:url('../../fonts/missal/alegreya/alegreya-400-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* alegreyasc — SIL OFL 1.1, see ../../fonts/missal/alegreyasc/OFL.txt */
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:400;font-display:swap;
  src:url('../../fonts/missal/alegreyasc/alegreyasc-400-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Alegreya SC';font-style:normal;font-weight:400;font-display:swap;
  src:url('../../fonts/missal/alegreyasc/alegreyasc-400-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* === Reset === */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color:var(--ink);background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--f-scr);font-variant-numeric:oldstyle-nums;font-kerning:normal}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote{margin:0}
h1,h2,h3,h4,h5,h6{font:inherit}
ul,ol{padding:0}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit;touch-action:manipulation}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;font-size:max(16px,1em);color:inherit;border-radius:0}
:root:has(.ly.is-open,.mn.is-open){overflow:hidden}

/* === Roles === (DESIGN §2.2: each face keeps its job) */
::selection{background:var(--sel)}
:focus-visible{outline:1.5px solid var(--red);outline-offset:3px}
/* a layer takes focus itself when it opens (so Tab starts at its first control); the container shows no ring */
.mn:focus,.ly:focus{outline:none}
/* the head's search field fills the 48px bar: its ring is drawn inside, or the top edge is cut off */
.find input:focus-visible{outline-offset:-6px}
/* on a touch screen the caret and the underline already show the field is live: no ring (a keyboard keeps it) */
@media(hover:none) and (pointer:coarse){.find input:focus-visible,.field input:focus-visible{outline:none}}
.is-find .find:has(input:focus-visible)::after,.field:has(input:focus-visible)::after{content:none}   /* a keyboard ring replaces the underline (S9 critique) */
em,i,cite{font-style:italic}
b,strong{font-weight:600}

/* === Shell === */
/* skip link: off-screen until focused */
.skip-link{position:fixed;top:0;left:0;z-index:50;padding:12px 24px;background:var(--paper);color:var(--ink);font:var(--f-meta);font-variant-caps:all-small-caps;letter-spacing:.1em;transform:translateY(-100%)}
.skip-link:focus{transform:none}

/* the running head (DESIGN §3.1, round 9 top A): Menu · the place · Search. No bar until scrolled;
   .is-off leaves reading down, .is-set gives it paper and a hairline, .is-find is search in place */
.top{position:fixed;top:0;left:0;right:0;z-index:10;height:calc(var(--bar) + env(safe-area-inset-top,0px));display:grid;grid-template-columns:1fr auto 1fr;column-gap:12px;align-items:center;padding:env(safe-area-inset-top,0px) max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px));font:var(--f-head);font-variant-caps:all-small-caps;letter-spacing:.1em;color:var(--faint);transition:transform .28s var(--ease),background .2s}
.top.is-off{transform:translateY(-100%)}
.top.is-set{background:var(--paper)}
.top.is-set::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);pointer-events:none}
.top.is-find{transform:none}
.top__m{justify-self:start;display:inline-flex;align-items:center;min-width:44px;height:var(--bar);transition:color .15s}
.top__place{margin:0;display:flex;align-items:center;justify-content:center;gap:0;min-width:0;font:inherit;color:var(--season);white-space:nowrap}
.top__place>a,.top__place>span,.top__place>button:not(.arr){display:block;min-width:0;line-height:var(--bar);overflow:hidden;text-overflow:ellipsis}
.top__place>.arr{flex:none}   /* S7: the label gives way, never the ‹ › (a long work title with search open squeezed them to 35px) */
.top__lw{display:none}
@media(min-width:700px){.top__lw{display:inline}.top__ln{display:none}}
.top__lt{display:none}
@media(max-width:359px){.top__lt{display:inline}.top__lf{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}   /* J1: the wordmark's short form below 360 */
.arr{display:none;width:44px;height:var(--bar);text-align:center;font:400 18px/1 var(--scr);color:var(--faint);transition:color .15s}
@media(min-width:700px){.arr{display:inline-block}}
@media(max-width:699px){.top__place>a.arr{display:none}}   /* DESIGN §10 item 5: on a phone the day arrows are at the foot only */
@media(hover:hover){.top__m:hover,.arr:hover{color:var(--ink)}}

/* search, in place: the word is the field (DESIGN §3.4) */
.find{position:relative;justify-self:end;height:var(--bar)}
.find input{display:block;width:96px;height:var(--bar);border:0;background:none;color:var(--ink);text-align:right;font:italic 400 19px/1 var(--scr);font-variant-caps:normal;letter-spacing:0;padding:0;border-radius:0;-webkit-appearance:none;appearance:none;cursor:pointer;transition:width .22s var(--ease)}
.find input::placeholder{font:400 17px/1 var(--scr);font-variant-caps:all-small-caps;letter-spacing:.1em;color:var(--faint);opacity:1;transition:color .15s}
.find input::-webkit-search-cancel-button{display:none}
@media(hover:hover){.find input:hover::placeholder{color:var(--ink)}}
.is-find .find input{width:min(264px,100vw - 132px);cursor:text}
.is-find .find::after{content:'';position:absolute;left:0;right:0;bottom:13px;height:1px;background:var(--ink);pointer-events:none}
.is-find .find input::placeholder{color:var(--ghost)}
/* 320: Menu, the place and Search do not fit with a 96px field (S3 full gate, about-320) */
@media(max-width:359px){.top:not(.is-find) .find input{width:60px}}
@media(max-width:699px){.top.is-find .top__place{display:none}.top.is-find{grid-template-columns:auto 1fr}.top .sug{width:calc(100vw - 24px)}}
@media(min-width:1080px){.find input::placeholder{font-size:18px}.top{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}}

/* completions under a field: title and kind (round 9 .sug; a top hairline, not a box) */
.sug{display:none;position:absolute;z-index:1;top:calc(var(--bar) - 6px);right:-12px;width:min(336px,100vw - 24px);margin:0;padding:6px 12px;list-style:none;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--paper);font-variant-caps:normal;letter-spacing:0}
.is-find .sug:not(:empty){display:block;animation:fade .16s ease-out both}
.sug li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;height:44px;cursor:pointer;white-space:nowrap}
.sug__t{font:400 19px/44px var(--scr);color:var(--faint);overflow:hidden;text-overflow:ellipsis}
.sug__t b{font-weight:400;color:var(--ink)}
.sug__k{font:400 13.5px/44px var(--txtsc);letter-spacing:.08em;color:var(--faint)}
.sug li.is-on .sug__t,.sug li.is-on .sug__t b{color:var(--red)}
.sug li.sug__none{display:block;height:auto;padding:12px 0;cursor:default;white-space:normal;font:italic 400 16px/24px var(--txt);color:var(--faint)}
@media(hover:hover){.sug li:hover .sug__t,.sug li:hover .sug__t b{color:var(--red)}}

/* the menu (DESIGN §3.2): without JS, nav#menu is the last thing on the page;
   with JS it is hidden until opened, then it is a layer */
.mn{display:block;background:var(--paper)}
.mn[hidden]{display:none}
.mn.is-open{position:fixed;inset:0;z-index:25;overflow-y:auto;overscroll-behavior:contain;animation:fade .18s ease-out both}
.mn:not(.is-open) .x{display:none}
/* 60 on top: the × is 44 + 12. 36 below: nothing is fixed there. (STATE ruling 2: ≤ 844 at 393 on Today.) */
.mn__in{max-width:744px;margin:0 auto;padding:60px max(24px,env(safe-area-inset-right,0px)) calc(36px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}
@media(max-width:359px){.mn__in{padding-top:48px}}   /* Today's menu at 320: 852 → 840 (≤ 844) */
/* Today's readings: two columns at every width, so four readings take two 44px rows, not four.
   Below 700 a cell is the short label over the citation (20 + 24 = 44); from 700 one line. */
.mn__rd{position:relative;list-style:none;margin:0;padding:12px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rr);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.mn__rd::before{content:'';position:absolute;left:0;right:0;top:3px;height:1px;background:var(--ink)}
.mn__rd a,.mn__rd button{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:44px}
.mn__rd li{min-width:0}
.mn__l{font:400 15.5px/20px var(--txtsc);letter-spacing:.07em;color:var(--red)}
.mn__l,.mn__c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn__lw{display:none}
.mn__c{font:italic 400 17px/24px var(--scr);transition:color .15s}
.mn__nav{display:grid;grid-template-columns:1fr;row-gap:12px;margin:24px 0 0}
.mn__h{margin:0;font:400 16.5px/24px var(--txtsc);letter-spacing:.07em;color:var(--red)}
.mn__nav a{display:flex;align-items:center;min-height:44px;font:500 25px/36px var(--disp);letter-spacing:-.004em;white-space:nowrap;transition:color .15s}
.mn a[aria-current]{text-decoration:underline 1px var(--red);text-underline-offset:6px}
.mn__ft{margin:24px 0 0;padding-top:12px;border-top:1px solid var(--rr);font:400 15.5px/24px var(--txtsc);letter-spacing:.07em;color:var(--faint)}
.mn__fl,.mn__ts{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;margin:0}
.mn__ft a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;transition:color .15s}
.mn__ts button{min-width:44px;min-height:44px;text-align:center;font:400 18px/1 var(--scr);color:var(--ink);transition:color .15s}
.mn__ts button:disabled{color:var(--faint);cursor:default}
.mn__ts button+button{margin-left:-24px}
@media(hover:hover){.mn__rd a:hover .mn__c,.mn__rd button:hover .mn__c{color:var(--red)}.mn__nav a:hover,.mn__ft a:hover,.mn__ts button:not(:disabled):hover{color:var(--red)}}
@media(min-width:700px){.mn__lw{display:inline}.mn__ln{display:none}.mn__c{font-size:19px;line-height:44px}
  .mn__rd a,.mn__rd button{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;height:44px}.mn__l{font-size:16.5px;line-height:44px}
  .mn__nav{grid-template-columns:1fr 1fr;column-gap:48px;row-gap:24px;margin-top:36px}.mn__nav a{font-size:28px}.mn__ft{margin-top:36px}}

/* the foot (DESIGN §3.5): after a thick-and-thin rule; all content from Library Settings */
.ft{position:relative;width:min(696px,100% - 48px);margin:96px auto 0;padding:12px 0 calc(72px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--ink);font:var(--f-meta);font-variant-caps:all-small-caps;letter-spacing:.1em;color:var(--faint)}
.ft::before{content:'';position:absolute;left:0;right:0;top:3px;height:1px;background:var(--ink)}
.ft__nav,.ft__ask{display:flex;flex-wrap:wrap;column-gap:24px;margin:0;padding:0}
.ft__nav a,.ft__ask a,.ft__mark a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;transition:color .15s}
.ft__col,.ft__free{margin:12px 0 0;font:italic 400 16px/24px var(--txt);font-variant-caps:normal;letter-spacing:0}
.ft__ask{margin-top:12px}
.ft__mark{margin:24px 0 0;color:var(--ink)}
.ft__sub{font:italic 400 16px/24px var(--scr);font-variant-caps:normal;letter-spacing:0;color:var(--faint)}
@media(hover:hover){.ft a:hover{color:var(--ink)}}

/* === Layer === (DESIGN §3.6: the menu, the chooser and the glossed page are one object) */
@keyframes rise{from{opacity:0;transform:translateY(.5rem)}}
@keyframes fade{from{opacity:0}}
.ly{position:fixed;inset:0;z-index:20;display:none;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);font-kerning:normal;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.ly.is-open{display:block;animation:fade .18s ease-out both}
.x{position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:30;width:44px;height:44px;display:grid;place-items:center;transition:color .15s}
.x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round}
@media(hover:hover){.x:hover{color:var(--red)}}

/* === Objects === */
/* the voice (DESIGN §5.1): the name in red, tradition | year across from it, then what was written.
   <article class="voice"><h3 class="voice__nm">…</h3><span class="voice__k"><b>Patristic</b> <time>407</time> · on 22:1–14</span>
   <p class="voice__t">… <a class="voice__src">Source</a></p></article> */
.voice{display:flex;flex-wrap:wrap;column-gap:12px;align-items:baseline;margin:0 0 var(--u)}
.voice__nm{margin:0;font:var(--f-name);letter-spacing:.07em;color:var(--red)}
.voice__k{font:400 14px/var(--u) var(--txt);font-variant-numeric:oldstyle-nums tabular-nums;letter-spacing:.04em;color:var(--faint);white-space:nowrap;flex:1 0 auto;text-align:right}
.voice__k b{font-family:var(--txtsc);font-weight:400;letter-spacing:.08em;margin-right:.55em;padding-right:.6em;border-right:1px solid var(--hair)}
.voice__t{flex:1 1 100%;margin:0;font:var(--f-txt);font-variant-numeric:oldstyle-nums;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 3;text-wrap:pretty;hanging-punctuation:first}
.voice__t+.voice__t{text-indent:1.3em}
.voice__src{font:var(--f-meta);font-variant-caps:all-small-caps;letter-spacing:.1em;color:var(--faint);white-space:nowrap;transition:color .15s}
@media(hover:hover){.voice__src:hover{color:var(--ink)}}

/* the chronology (DESIGN §5.2): the year in a narrow gutter, a red hairline, the text; oldest first.
   On a phone the gutter closes and the year is the <time> in the voice's meta. */
.chron{list-style:none;margin:0;padding:0;max-width:34em}
.chron>li{display:grid;grid-template-columns:minmax(0,1fr)}
.chron__y{display:none;font:var(--f-year);font-variant-numeric:oldstyle-nums tabular-nums;letter-spacing:.04em;color:var(--faint);text-align:right;padding-right:12px}
.chron .voice{margin:0;padding-bottom:var(--u)}
.chron__era{position:relative;margin:48px 0 24px;padding-top:12px;border-top:2px solid var(--ink);font:var(--f-name);letter-spacing:.07em}
.chron__era::before{content:'';position:absolute;left:0;right:0;top:3px;height:1px;background:var(--ink)}
.chron>.chron__era{display:block}
.chron>li:first-child>.chron__era,.chron>.chron__era:first-child{margin-top:0}
.chron__gap{margin:0;padding:12px 0 36px;text-align:center;font:italic 400 16px/24px var(--txt);color:var(--faint)}
@media(min-width:700px){
  .chron>li{grid-template-columns:48px minmax(0,1fr)}
  .chron>li>.chron__era{grid-column:1/-1}
  .chron__y{display:block}
  .chron .voice,.chron__gap{grid-column:2;padding-left:24px;border-left:1px solid var(--rr)}
  .chron .voice__k time{display:none}
  .chron .voice__k b:last-child{margin-right:0;padding-right:0;border:0}
}

/* the ruled list (DESIGN §5.3): rows between hairlines; 1 / 2 / 3 columns by the list's own width */
.rl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(15em,(100% - 96px) / 3)),1fr));column-gap:48px;margin:0;padding:0;list-style:none}
.rl__r{display:block;padding:12px 0;border-bottom:1px solid var(--hair)}
.rl__t{display:block;margin:0;font:var(--f-scr);transition:color .15s}
.rl__s{display:block;margin:0;font:var(--f-note)}
.rl__m{display:block;margin:0;font:var(--f-meta);font-variant-caps:all-small-caps;letter-spacing:.1em;color:var(--faint)}
@media(hover:hover){a.rl__r:hover .rl__t,.rl__t a:hover,a.rl__t:hover{color:var(--red)}}

/* the facts list (DESIGN §6): a <dl>, term in grey small caps, value in Alegreya; stacks on a phone */
.facts{display:grid;grid-template-columns:minmax(0,1fr);margin:0}
.facts dt{padding-top:12px;border-top:1px solid var(--hair);font:var(--f-meta);font-variant-caps:all-small-caps;letter-spacing:.1em;color:var(--faint)}
.facts dd{margin:0;padding-bottom:12px;font:var(--f-txt)}
@media(min-width:700px){.facts{grid-template-columns:9em minmax(0,1fr);column-gap:24px}.facts dd{padding-top:12px;border-top:1px solid var(--hair)}}

/* the library's own prose (DESIGN §2.2): Alegreya italic under a small-caps label that says what it is */
.note{margin:0 0 var(--u);font:var(--f-note)}
.note p{margin:0;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
.note p+p{text-indent:1.3em}
.note .note__l{margin:0 0 12px;font:var(--f-meta);font-style:normal;font-variant-caps:all-small-caps;letter-spacing:.1em;color:var(--faint)}
.note .note__l+p{text-indent:0}
.note__l{display:block;margin:0;font:var(--f-meta);font-style:normal;font-variant-caps:all-small-caps;letter-spacing:.1em;color:var(--faint)}

/* the article / index head (DESIGN §6): title in Cormorant, dek, meta, a thick-and-thin rule */
.hd{position:relative;margin:0 0 36px;padding-bottom:24px;border-bottom:1px solid var(--ink)}
.hd::after{content:'';position:absolute;left:0;right:0;bottom:1px;height:2px;background:var(--ink)}
.hd__t{margin:0;font:var(--f-title);letter-spacing:-.004em;text-wrap:balance}
.hd__d{margin:12px 0 0;font:var(--f-note);text-wrap:pretty}
.hd__m{margin:12px 0 0;font:var(--f-meta);font-variant-caps:all-small-caps;letter-spacing:.1em;color:var(--faint)}

/* an option: a word that is a choice; the selected one is inked over a red underline */
.opt{position:relative;display:inline-flex;align-items:center;min-width:44px;min-height:44px;justify-content:center;font:var(--f-head);font-variant-caps:all-small-caps;letter-spacing:.1em;color:var(--faint);transition:color .15s}
.opt+.opt{margin-left:24px}
.opt.is-on,.opt[aria-pressed="true"],.opt[aria-current]{color:var(--ink)}
.opt.is-on::after,.opt[aria-pressed="true"]::after,.opt[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red)}
@media(hover:hover){.opt:hover{color:var(--ink)}}

/* the underlined field (DESIGN §3.4): every [data-csl-suggest] field outside the head */
.field{position:relative;display:block;max-width:24em}
.field input{display:block;width:100%;height:var(--bar);border:0;padding:0;border-radius:0;-webkit-appearance:none;appearance:none;background:none;color:var(--ink);font:italic 400 19px/1 var(--scr)}
.field::after{content:'';position:absolute;left:0;right:0;top:calc(var(--bar) - 14px);height:1px;background:var(--ink);pointer-events:none}
.field input::placeholder{font:400 17px/1 var(--scr);font-variant-caps:all-small-caps;letter-spacing:.1em;color:var(--faint);opacity:1}
.field input::-webkit-search-cancel-button{display:none}
.field input:focus::placeholder{color:var(--ghost)}
.field .sug{left:-12px;right:auto;width:min(336px,100% + 24px)}
.field.is-find .sug:not(:empty){display:block}

/* === States === (BUILD-PLAN §1.4: .is-on .is-open .is-off .is-set .is-find .is-busy .is-cut .is-hit) */
.is-hit{background:var(--wash);transition:background .5s}
.is-busy{cursor:progress}
.is-cut{overflow:hidden}

/* === Reduced motion === (DESIGN §2.5: no transforms, no smooth scroll) */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* === DESIGN §10 item 4: readings no longer take a full screen, at every width === */
.rd{min-height:0}