/* See You In Heaven — shared stylesheet Structure colour: Atlantic blue. Accent: the liturgical colour of the day, set by adding data-season="green|violet|white|red|rose" to . */ :root { --paper:#EDF0F2; --surface:#FFFFFF; --band:#E4E9EC; --ink:#0F202B; --ink-soft:#48606E; --ink-faint:#7C929E; --rule:#D3DBE0; --rule-soft:#E2E8EB; --struct:#1B4B6B; --shadow:0 1px 2px rgba(15,32,43,.05), 0 10px 34px -18px rgba(15,32,43,.28); /* liturgical colours, light / dark */ --green-l:#2F6B4C; --green-d:#74C295; --violet-l:#59477F; --violet-d:#A896D8; --white-l:#94761E; --white-d:#DCB755; --red-l:#982C29; --red-d:#E5807B; --rose-l:#A05370; --rose-d:#E294B0; --accent-l:var(--green-l); --accent-d:var(--green-d); --accent:var(--accent-l); --measure:35rem; --wide:54rem; --full:74rem; } :root[data-season="green"] { --accent-l:var(--green-l); --accent-d:var(--green-d); } :root[data-season="violet"] { --accent-l:var(--violet-l); --accent-d:var(--violet-d); } :root[data-season="white"] { --accent-l:var(--white-l); --accent-d:var(--white-d); } :root[data-season="red"] { --accent-l:var(--red-l); --accent-d:var(--red-d); } :root[data-season="rose"] { --accent-l:var(--rose-l); --accent-d:var(--rose-d); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper:#0E1A21; --surface:#152430; --band:#122029; --ink:#E7EDEF; --ink-soft:#A0B5C0; --ink-faint:#728894; --rule:#253A47; --rule-soft:#1D2E39; --struct:#7FB2D0; --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 40px -20px rgba(0,0,0,.8); --accent:var(--accent-d); } } :root[data-theme="dark"] { --paper:#0E1A21; --surface:#152430; --band:#122029; --ink:#E7EDEF; --ink-soft:#A0B5C0; --ink-faint:#728894; --rule:#253A47; --rule-soft:#1D2E39; --struct:#7FB2D0; --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 40px -20px rgba(0,0,0,.8); --accent:var(--accent-d); } * { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; background:var(--paper); color:var(--ink); font-family:'Karla',system-ui,-apple-system,sans-serif; font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased; } h1,h2,h3,.disp { font-family:'Vollkorn',Georgia,serif; font-weight:600; text-wrap:balance; margin:0; } p { margin:0 0 1.15em; } a { color:var(--struct); } img { max-width:100%; } :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; } @media (prefers-reduced-motion:reduce) { *{ animation:none !important; transition:none !important; } } .wrap { max-width:var(--full); margin:0 auto; padding:0 1.75rem; } .wrap.narrow { max-width:var(--wide); } .col { max-width:var(--measure); } .lab { font-size:.688rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); } .vis-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ---------- site header ---------- */ .site { border-bottom:1px solid var(--rule); background:var(--surface); } .site-in { display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding:1.1rem 0; flex-wrap:wrap; } .brand { font-family:'Vollkorn',Georgia,serif; font-size:1.3rem; font-weight:600; letter-spacing:-.015em; color:var(--ink); text-decoration:none; } .nav { display:flex; gap:1.5rem; align-items:baseline; } .nav a { font-size:.875rem; color:var(--ink-soft); text-decoration:none; } .nav a:hover, .nav a[aria-current="page"] { color:var(--accent); } /* ---------- home page ---------- */ .home-hero { padding:4.5rem 0; border-bottom:1px solid var(--rule); } .home-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(16rem,.8fr); gap:clamp(3rem,7vw,6rem); align-items:center; } .home-grid-lead { grid-template-columns:minmax(0,2fr) minmax(16rem,1fr); } .home-copy { min-width:0; } .home-kicker { color:var(--struct); margin-bottom:1rem; } .home-copy h1 { font-size:clamp(2.8rem,6vw,5rem); line-height:1.02; letter-spacing:-.035em; margin-bottom:1.4rem; } .home-copy h2 { font-size:clamp(2.2rem,4vw,3.4rem); line-height:1.08; letter-spacing:-.025em; margin-bottom:1rem; } .home-intro { max-width:43rem; color:var(--ink-soft); font-family:'Vollkorn',Georgia,serif; font-size:clamp(1.2rem,2vw,1.45rem); line-height:1.55; } .home-intro em { color:var(--ink); } .home-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem; } .home-figure { margin:0; } .home-figure img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px; box-shadow:var(--shadow); } .home-figure .pcap { margin-top:.75rem; } .home-main { padding:5rem 0; background:var(--band); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .home-main-intro { color:var(--ink-soft); font-size:1.12rem; } .home-copy hr { border:0; border-top:1px solid var(--rule); margin:2rem 0; } .home-dedication { font-family:'Vollkorn',Georgia,serif; font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.45; color:var(--ink); } .home-closing { padding:5rem 0; } .home-refrain { margin:0 0 .55rem; color:var(--accent); font-family:'Vollkorn',Georgia,serif; font-size:clamp(2rem,5vw,4rem); font-style:italic; line-height:1.15; } .home-refrain-note { max-width:47rem; margin:0; color:var(--ink-faint); font-size:.875rem; line-height:1.55; } @media (max-width:720px) { .home-hero,.home-main,.home-closing { padding:3.5rem 0; } .home-grid,.home-grid-lead { grid-template-columns:1fr; gap:2.5rem; } .home-figure { grid-row:1; } .home-copy { grid-row:2; } .home-actions { align-items:stretch; flex-direction:column; } .home-actions .btn { text-align:center; } } /* ---------- buttons ---------- */ .btn { display:inline-block; font-family:'Karla',sans-serif; font-size:.875rem; font-weight:600; padding:.7rem 1.35rem; border-radius:3px; border:1px solid var(--accent); background:var(--accent); color:var(--paper); text-decoration:none; cursor:pointer; } .btn.ghost { background:transparent; color:var(--accent); } .btn:hover { opacity:.88; } /* ---------- this week ---------- */ .feature { padding:3rem 0 3.5rem; } .fcard { background:var(--surface); border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow); overflow:hidden; display:grid; grid-template-columns:5px 1fr; } .fband { background:var(--accent); } .fbody { padding:2rem 2.25rem 2.25rem; min-width:0; } .feyebrow { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; color:var(--accent); margin-bottom:1.1rem; } .seal { display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; flex:none; border:1.5px solid var(--accent); border-radius:50%; font-size:.72rem; font-weight:700; color:var(--accent); } .fdate { color:var(--ink-faint); font-size:.813rem; } .foccasion { font-size:clamp(1.8rem,3.8vw,2.7rem); line-height:1.1; letter-spacing:-.022em; margin:.1rem 0 .45rem; } .forig { color:var(--ink-soft); font-style:italic; font-family:'Vollkorn',Georgia,serif; font-size:1.05rem; margin-bottom:1.3rem; } .note { display:flex; padding:.75rem .95rem; margin-bottom:1.5rem; border-left:2px solid var(--accent); background:var(--band); border-radius:0 3px 3px 0; font-size:.875rem; line-height:1.55; color:var(--ink-soft); } .note b { color:var(--ink); font-weight:700; } .fgrid { display:grid; gap:2.5rem; grid-template-columns:minmax(0,1fr); } @media (min-width:900px) { .fgrid { grid-template-columns:minmax(0,1fr) 13.5rem; gap:3rem; } } .frail { font-size:.813rem; display:flex; flex-direction:column; gap:1.25rem; align-content:start; } @media (min-width:900px) { .frail { border-left:1px solid var(--rule-soft); padding-left:1.75rem; } } .rail-item { display:flex; flex-direction:column; gap:.3rem; } .rail-k { font-size:.688rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); } .rail-v { color:var(--ink); line-height:1.45; } .rail-v .muted { color:var(--ink-faint); display:block; } .swatch { display:inline-flex; align-items:center; gap:.45rem; } .swatch i { width:.7rem; height:.7rem; border-radius:2px; background:var(--accent); display:inline-block; } .rail-links { display:flex; flex-direction:column; gap:.4rem; } .rail-links a { color:var(--accent); text-decoration:none; } .rail-links a:hover { text-decoration:underline; } .excerpt { font-family:'Vollkorn',Georgia,serif; font-size:1.06rem; line-height:1.6; } .excerpt p { max-width:62ch; } .fade { position:relative; max-height:18rem; overflow:hidden; } .fade::after { content:""; position:absolute; inset:auto 0 0 0; height:6rem; background:linear-gradient(to bottom,transparent,var(--surface)); pointer-events:none; } .factions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.5rem; align-items:center; } .next-up { margin-top:1.1rem; color:var(--ink-faint); font-size:.813rem; } audio { width:100%; margin-top:1.25rem; } .audio-status { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; margin-top:.65rem; padding:.75rem .85rem; border-left:2px solid var(--accent); border-radius:0 3px 3px 0; background:var(--band); color:var(--ink-soft); font-size:.813rem; line-height:1.5; } .audio-status[hidden] { display:none; } .audio-retry { flex:none; padding:.38rem .65rem; border:1px solid var(--struct); border-radius:3px; background:transparent; color:var(--struct); font:600 .75rem 'Karla',sans-serif; cursor:pointer; } .audio-retry:hover { background:var(--surface); } /* ---------- stat strip ---------- */ .strip { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--band); } .strip-in { display:flex; gap:2.5rem; flex-wrap:wrap; padding:1.1rem 0; } .stat { display:flex; align-items:baseline; gap:.5rem; } .stat b { font-family:'Vollkorn',Georgia,serif; font-size:1.3rem; font-weight:600; font-variant-numeric:tabular-nums lining-nums; } .stat span { color:var(--ink-soft); font-size:.813rem; } /* ---------- archive ---------- */ .archive { padding:3rem 0 4.5rem; } .ahead { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.3rem; } .ahead h2 { font-size:1.55rem; letter-spacing:-.015em; } .count { color:var(--ink-faint); font-size:.813rem; font-variant-numeric:tabular-nums; } .controls { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.3rem; } #q { flex:1 1 17rem; min-width:0; } input[type="search"], select { font-family:'Karla',sans-serif; font-size:.875rem; padding:.62rem .8rem; border:1px solid var(--rule); border-radius:3px; background:var(--surface); color:var(--ink); } select { cursor:pointer; } .rows { border-top:1px solid var(--rule-soft); } .row { display:flex; align-items:center; gap:.9rem; width:100%; text-align:left; padding:.8rem .4rem; background:none; border:0; border-bottom:1px solid var(--rule-soft); cursor:pointer; color:inherit; font:inherit; } .row:hover { background:var(--surface); } .row-dot { width:7px; height:7px; border-radius:50%; flex:none; } .c-green{background:#2F6B4C} .c-violet{background:#59477F} .c-white{background:#B8952F} .c-red{background:#982C29} .c-rose{background:#A05370} .row-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.05rem; } .row-title { font-family:'Vollkorn',Georgia,serif; font-size:1.05rem; line-height:1.35; } .row-meta { color:var(--ink-faint); font-size:.75rem; } .row-tag { flex:none; color:var(--ink-faint); font-size:.688rem; letter-spacing:.09em; text-transform:uppercase; } .empty { padding:2.5rem .4rem; color:var(--ink-faint); font-style:italic; } .loading { padding:2.5rem .4rem; color:var(--ink-faint); } /* ---------- recordings ---------- */ .recordings { padding:4rem 0 5rem; } .recordings-head { max-width:42rem; margin-bottom:2.4rem; } .recordings-head h1 { font-size:clamp(2rem,4.5vw,3rem); line-height:1.08; letter-spacing:-.022em; } .recordings-head p { color:var(--ink-soft); margin-top:.8rem; } .recording-list { border-top:1px solid var(--rule); } .recording { display:grid; grid-template-columns:minmax(0,1fr); gap:.9rem 2rem; padding:1.35rem 0; border-bottom:1px solid var(--rule-soft); } .recording h2 { font-size:1.15rem; line-height:1.35; letter-spacing:-.01em; } .recording-meta { color:var(--ink-faint); font-size:.8rem; margin-top:.2rem; } .recording audio { margin:0; } @media(min-width:760px) { .recording { grid-template-columns:minmax(15rem,1fr) minmax(18rem,28rem); align-items:center; } } /* ---------- reader ---------- */ .reader { position:fixed; inset:0; z-index:50; background:var(--paper); overflow-y:auto; padding:0 0 5rem; } .reader[hidden] { display:none !important; } .rtop { position:sticky; top:0; background:var(--paper); border-bottom:1px solid var(--rule); padding:.85rem 0; z-index:2; } .rtop-in { display:flex; justify-content:space-between; align-items:center; gap:1rem; } .rbody { max-width:40rem; margin:0 auto; padding:2.5rem 1.75rem 0; } .rbody h2 { font-size:clamp(1.55rem,3vw,2.15rem); line-height:1.14; letter-spacing:-.02em; margin-bottom:.45rem; } .rmeta { color:var(--ink-faint); font-size:.813rem; margin-bottom:1.5rem; padding-bottom:1.3rem; border-bottom:1px solid var(--rule); } .rtext { font-family:'Vollkorn',Georgia,serif; font-size:1.08rem; line-height:1.66; } .rtext p { margin:0 0 1.15em; } .rtext p:first-of-type::first-letter { font-size:3.1em; line-height:.86; float:left; padding:.06em .09em 0 0; color:var(--accent); font-weight:600; } .rfoot { max-width:40rem; margin:2.5rem auto 0; padding:1.4rem 1.75rem 0; border-top:1px solid var(--rule); color:var(--ink-faint); font-size:.75rem; line-height:1.6; } .scrip { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.3rem; } .chip { font-size:.688rem; padding:.2rem .5rem; border:1px solid var(--rule); border-radius:2px; color:var(--ink-soft); } .audio-box { background:var(--surface); border:1px solid var(--rule); border-radius:4px; padding:1.4rem 1.5rem; } .audio-box p { margin:0 0 .9rem; color:var(--ink-soft); font-size:.938rem; font-family:'Karla',sans-serif; } /* ---------- tribute ---------- */ .hero { padding:5rem 0 4rem; border-bottom:1px solid var(--rule); } .hero-grid { display:grid; gap:3rem; grid-template-columns:1fr; } @media(min-width:860px) { .hero-grid { grid-template-columns:1fr 16rem; gap:4rem; align-items:start; } } .hero h1 { font-size:clamp(2.6rem,6.4vw,4.35rem); line-height:1.02; letter-spacing:-.025em; } .hero h1 .given { display:block; font-size:.42em; font-weight:400; letter-spacing:.02em; color:var(--ink-soft); margin-bottom:.5rem; font-style:italic; } .lifespan { font-family:'Vollkorn',Georgia,serif; font-size:1.28rem; color:var(--ink-soft); margin-top:1.1rem; } .refrain { margin-top:2.4rem; padding-left:1.35rem; border-left:3px solid var(--accent); } .refrain q { font-family:'Vollkorn',Georgia,serif; font-style:italic; font-size:clamp(1.35rem,2.6vw,1.7rem); line-height:1.34; quotes:none; display:block; } .refrain .src { display:block; margin-top:.7rem; font-size:.813rem; color:var(--ink-faint); } .portrait { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%; border-radius:3px; box-shadow:var(--shadow); background:var(--surface); } .pcap { margin-top:.7rem; font-size:.75rem; color:var(--ink-faint); line-height:1.5; } section.sec { padding:4.5rem 0; } .band { background:var(--band); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .sec h2 { font-size:clamp(1.6rem,3.2vw,2.15rem); line-height:1.16; letter-spacing:-.018em; margin-bottom:.35rem; } .dek { color:var(--ink-soft); font-size:1.05rem; margin-bottom:2.2rem; max-width:36rem; } .kicker { color:var(--struct); margin-bottom:.9rem; } blockquote { margin:2.2rem 0; padding:0 0 0 1.5rem; border-left:2px solid var(--rule); max-width:40rem; } blockquote p { font-family:'Vollkorn',Georgia,serif; font-size:1.16rem; line-height:1.56; color:var(--ink); } blockquote cite { display:block; font-style:normal; font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin-top:.35rem; } blockquote.big { border-left:3px solid var(--accent); padding-left:1.75rem; } blockquote.big p { font-size:clamp(1.2rem,2.4vw,1.42rem); font-style:italic; line-height:1.46; } .tl { border-top:1px solid var(--rule); max-width:44rem; } .tlrow { display:grid; grid-template-columns:4.75rem 1fr; gap:1.5rem; padding:1.15rem 0; border-bottom:1px solid var(--rule-soft); align-items:baseline; } .tlyear { font-family:'Vollkorn',Georgia,serif; font-size:1.05rem; font-weight:600; color:var(--struct); font-variant-numeric:tabular-nums lining-nums; } .tlbody span { display:block; color:var(--ink-soft); font-size:.938rem; margin-top:.1rem; } .voice { display:grid; gap:2.4rem; max-width:44rem; } .vitem { border-top:1px solid var(--rule); padding-top:1.5rem; } .vitem h3 { font-size:1.18rem; margin-bottom:.6rem; letter-spacing:-.01em; } .vitem > p { color:var(--ink-soft); max-width:40rem; } .figs { display:grid; gap:1.75rem 3rem; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); max-width:46rem; margin:2rem 0 2.5rem; } .fig b { display:block; font-family:'Vollkorn',Georgia,serif; font-size:2rem; font-weight:600; line-height:1.1; font-variant-numeric:lining-nums; color:var(--struct); } .fig span { display:block; color:var(--ink-soft); font-size:.875rem; margin-top:.2rem; } .sendoff { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--rule); } .sendoff q { font-family:'Vollkorn',Georgia,serif; font-style:italic; font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.28; quotes:none; color:var(--accent); display:block; } /* ---------- footer ---------- */ footer.end { border-top:1px solid var(--rule); background:var(--surface); padding:2.5rem 0 3.5rem; color:var(--ink-faint); font-size:.813rem; line-height:1.65; } footer.end p { max-width:56ch; } @media (max-width:640px) { body { font-size:16px; } .fbody { padding:1.5rem 1.35rem 1.75rem; } section.sec { padding:3.25rem 0; } .hero { padding:3.5rem 0 2.75rem; } .strip-in { gap:1.35rem; } }