/* ============================================================================
Colours come from assets/theme.css, which must be linked BEFORE this file.
To change the site's palette, edit the one value at the top of theme.js.
Below are the old hue-named tokens, kept as aliases so that rules written
against --gold and friends keep working. They hold no colour of their own —
never give one a literal value, or it will stop following the theme. Note
that the names lie by design: --gold is cobalt blue under option 1 and only
becomes actual gold under option 2. Prefer the role names in new rules.
(--crimson-deep, --emerald, --indigo and --ash were declared here but used
nowhere, so they are gone.)
========================================================================= */
:root{
/* Height of the announcement banner. Stays 0 unless assets/script.js finds a
live announcement and sets it on , so a site with nothing to announce
keeps exactly the layout it had before the banner existed. Everything that
hangs off the top of the page reads this instead of hard-coding 0. */
--banner-h:0px;
--parchment:var(--text);
--parchment-2:var(--text-mute);
--gold:var(--accent);
--gold-bright:var(--accent-hi);
--gold-deep:var(--edge);
--crimson:var(--wash);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
background:var(--ink);
color:var(--parchment);
padding-top:var(--banner-h);
font-family:'Cormorant Garamond', serif;
font-size:18px;
line-height:1.7;
overflow-x:hidden;
position:relative;
}
/* Grain overlay across the whole page */
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:200;
opacity:.18;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
/* The grain is tinted inside an SVG data URI, and a data URI cannot read a CSS
variable — so the warm theme needs its own copy of the filter rather than a
token swap. Only the feColorMatrix RGB row differs: cool blue vs warm ochre. */
[data-theme="option2"] body::before{
background-image:url("data:image/svg+xml;utf8,");
}
::selection{background:var(--gold);color:var(--ink)}
h1,h2,h3,h4{font-family:'Cinzel', serif; font-weight:500; letter-spacing:.04em}
.geez{font-family:'Noto Sans Ethiopic', serif}
/* ---------------- NAV ---------------- */
nav{
position:fixed;top:var(--banner-h);left:0;right:0;z-index:100;
display:flex;justify-content:space-between;align-items:center;
padding:22px 48px;
backdrop-filter:blur(18px);
background:linear-gradient(to bottom, rgba(var(--ink-rgb),.85), rgba(var(--ink-rgb),.4));
border-bottom:1px solid rgba(var(--accent-rgb),.18);
}
nav .brand{
display:flex;align-items:center;gap:14px;
font-family:'Cinzel', serif;
color:var(--gold-bright);
letter-spacing:.18em;
font-size:14px;
text-transform:uppercase;
text-decoration:none;
}
nav .brand-mark{width:32px;height:32px}
nav ul{display:flex;gap:38px;list-style:none}
nav a{
color:var(--parchment);
text-decoration:none;
font-family:'Cinzel', serif;
font-size:12px;
letter-spacing:.22em;
text-transform:uppercase;
position:relative;
padding:6px 0;
transition:color .3s;
}
nav a:not(.brand):not(.donate)::after{
content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;
background:var(--gold-bright);transition:all .4s ease;transform:translateX(-50%);
}
nav a:hover{color:var(--gold-bright)}
nav a:not(.brand):not(.donate):hover::after{width:100%}
nav a.active{color:var(--gold-bright)}
nav a:not(.brand):not(.donate).active::after{width:100%}
/* Donate button in the top nav */
nav a.donate{
border:1px solid var(--gold);
padding:9px 20px;
color:var(--gold-bright);
transition:background .35s ease, color .35s ease;
}
nav a.donate:hover{
background:var(--gold);
color:var(--ink);
}
@media(max-width:820px){
nav{padding:16px 22px}
nav ul{display:none}
}
/* ---------------- MOBILE NAV (hamburger + drawer) ---------------- */
.nav-toggle{
display:none;
flex-direction:column;
justify-content:center;
gap:5px;
background:transparent;
border:none;
padding:10px;
cursor:pointer;
width:42px;height:42px;
}
@media(max-width:820px){
.nav-toggle{display:flex}
}
.nav-toggle span{
display:block;
width:22px;height:1.5px;
background:var(--gold-bright);
transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.nav-overlay{
position:fixed;
inset:0;
background:rgba(var(--ink-rgb),.7);
backdrop-filter:blur(4px);
opacity:0;
pointer-events:none;
transition:opacity .35s ease;
z-index:101;
}
.nav-overlay.open{
opacity:1;
pointer-events:auto;
}
.nav-drawer{
position:fixed;
top:0;right:0;
width:50vw;
height:100vh;
height:100dvh;
background:linear-gradient(180deg, var(--ink) 0%, var(--panel) 70%, var(--ink) 100%);
border-left:1px solid rgba(var(--accent-rgb),.25);
box-shadow:-20px 0 60px rgba(var(--shadow-rgb),.6);
padding:80px 28px 32px;
transform:translateX(100%);
transition:transform .42s cubic-bezier(.3,.6,.3,1);
z-index:102;
overflow-y:auto;
}
.nav-drawer.open{ transform:translateX(0); }
.nav-drawer ul{
list-style:none;
display:flex;flex-direction:column;
gap:6px;
}
.nav-drawer a{
display:block;
color:var(--parchment);
text-decoration:none;
font-family:'Cinzel', serif;
font-size:13px;
letter-spacing:.22em;
text-transform:uppercase;
padding:16px 4px;
border-bottom:1px solid rgba(var(--accent-rgb),.12);
transition:color .3s, padding-left .3s;
}
.nav-drawer a:hover,
.nav-drawer a.active{
color:var(--gold-bright);
padding-left:10px;
}
.nav-drawer a.donate{
margin-top:18px;
border:1px solid var(--gold);
text-align:center;
color:var(--gold-bright);
transition:background .35s ease, color .35s ease;
}
.nav-drawer a.donate:hover{
background:var(--gold);
color:var(--ink);
padding-left:4px;
}
.nav-close{
position:absolute;
top:14px;right:14px;
background:transparent;border:none;
color:var(--parchment);
font-family:'Cinzel', serif;
font-size:30px;line-height:1;
cursor:pointer;
padding:6px 12px;
transition:color .3s;
}
.nav-close:hover{ color:var(--gold-bright); }
/* ---------------- ANNOUNCEMENT BANNER ---------------- */
/* Injected by assets/script.js when /api/announcements returns something live.
Sits above the fixed nav; both are positioned off --banner-h. */
.banner{
position:fixed;
top:0;left:0;right:0;
z-index:150;
height:var(--banner-h);
display:flex;align-items:center;
overflow:hidden;
background:linear-gradient(90deg, var(--panel), var(--steel), var(--panel));
border-bottom:1px solid rgba(var(--accent-rgb),.35);
}
.banner::after{
/* Fades the text out at both ends so it enters and leaves the strip instead
of appearing and vanishing at a hard edge. */
content:"";
position:absolute;inset:0;
pointer-events:none;
background:linear-gradient(90deg,
var(--panel) 0%, rgba(var(--panel-rgb),0) 6%,
rgba(var(--panel-rgb),0) 94%, var(--panel) 100%);
}
.banner-track{
display:flex;
flex:none;
align-items:center;
white-space:nowrap;
will-change:transform;
animation:bannerScroll var(--banner-duration, 60s) linear infinite;
}
.banner:hover .banner-track{ animation-play-state:paused; }
.banner-item{
font-family:'Cormorant Garamond', serif;
font-size:16px;
letter-spacing:.02em;
color:var(--parchment);
padding:0 42px;
display:inline-flex;align-items:center;gap:14px;
}
.banner-item::before{
/* A small cross between announcements, in place of a bullet. */
content:"✛";
color:var(--gold-bright);
font-size:13px;
}
/* The track holds two identical copies of the announcement list and scrolls
exactly one copy's width, so the moment it resets the second copy is sitting
where the first began and the loop is seamless. */
@keyframes bannerScroll{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
/* Motion across the whole width of the screen, on every page, is exactly what
a vestibular-sensitive reader needs least. Stop it and let the text sit
still; it stays readable because the strip scrolls with the mouse instead. */
@media (prefers-reduced-motion:reduce){
.banner-track{ animation:none; }
.banner{ overflow-x:auto; }
}
@media (max-width:700px){
.banner-item{ font-size:14px; padding:0 26px; }
}
/* ---------------- HERO ---------------- */
.hero{
min-height:calc(100vh - var(--banner-h));
position:relative;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
background:
radial-gradient(ellipse at 50% 30%, rgba(var(--accent-rgb),.22), transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(var(--wash-rgb),.45), transparent 60%),
radial-gradient(ellipse at 10% 90%, rgba(var(--wash-3-rgb),.5), transparent 60%),
linear-gradient(180deg, var(--ink) 0%, var(--panel) 60%, var(--ink) 100%);
}
/* Heavenly light from above — bright bloom at the cloud break, warm rays piercing down */
.hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
/* The brightest core — like a sun breaking through a parting in the clouds */
radial-gradient(circle 200px at 50% -30px,
rgba(var(--halo-1-rgb),.65),
rgba(var(--halo-2-rgb),.35) 35%,
rgba(var(--text-cool-rgb),.18) 65%,
transparent 85%),
/* Wider warm halo around the source */
radial-gradient(ellipse 70% 50% at 50% -10%,
rgba(var(--text-cool-2-rgb),.42),
rgba(var(--accent-hi-rgb),.18) 45%,
transparent 80%),
/* Piercing rays — brighter, warmer, more numerous */
conic-gradient(from 88deg at 50% -12%,
transparent 0deg, rgba(var(--halo-3-rgb),.22) 4deg, transparent 12deg,
transparent 16deg, rgba(var(--text-cool-rgb),.28) 24deg, transparent 34deg,
transparent 38deg, rgba(var(--halo-3-rgb),.18) 46deg, transparent 56deg,
transparent 62deg, rgba(var(--text-cool-rgb),.24) 70deg, transparent 82deg,
transparent 98deg, rgba(var(--text-cool-rgb),.24) 110deg, transparent 122deg,
transparent 126deg, rgba(var(--halo-3-rgb),.18) 134deg, transparent 144deg,
transparent 148deg, rgba(var(--text-cool-rgb),.28) 156deg, transparent 166deg,
transparent 170deg, rgba(var(--halo-3-rgb),.22) 178deg, transparent 186deg);
opacity:.92;
will-change:opacity;
transform:translateZ(0);
animation:heavenlyBreathe 9s ease-in-out infinite;
}
/* Second light layer — soft golden dust shimmer, slower */
.hero::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(circle 120px at 50% -10px,
rgba(var(--halo-4-rgb),.5),
transparent 80%),
radial-gradient(ellipse 40% 25% at 50% 5%,
rgba(var(--halo-5-rgb),.15),
transparent 75%);
mix-blend-mode:screen;
will-change:opacity, transform;
transform:translateZ(0);
animation:heavenlyShimmer 6s ease-in-out infinite;
}
@keyframes heavenlyBreathe{
0%,100%{opacity:.78}
50%{opacity:1}
}
@keyframes heavenlyShimmer{
0%,100%{opacity:.6;transform:translateY(0)}
50%{opacity:1;transform:translateY(4px)}
}
.hero-content{
text-align:center;
position:relative;z-index:3;
max-width:1100px;
padding:0 32px;
}
.ge-tag{
display:inline-block;
font-family:'Noto Sans Ethiopic', serif;
font-size:14px;
color:var(--gold);
letter-spacing:.4em;
margin-bottom:24px;
opacity:0;
animation:fadeUp 1.4s .3s ease forwards;
}
.hero h1{
font-family:'Cinzel', serif;
font-size:clamp(20px, 5vw, 64px);
line-height:1;
color:var(--parchment);
font-weight:600;
letter-spacing:.02em;
margin-bottom:10px;
padding:0 12px;
white-space:nowrap;
text-shadow:
0 0 28px rgba(var(--accent-hi-rgb),.4),
0 0 60px rgba(var(--accent-rgb),.2),
0 6px 14px rgba(var(--shadow-rgb),.6);
opacity:0;
animation:fadeUp 1.4s .9s ease forwards;
}
.hero h1 em,
.hero h1 .accent{
color:var(--gold-bright);
font-style:italic;
font-family:'Cormorant Garamond', serif;
font-weight:300;
}
/* ---------------- DOVE PERCHED ON HERO LETTER ---------------- */
.hero .first-letter{
position:relative;
display:inline-block;
}
/* The letter "D" itself sits in front of the dove (dove z-index is 4) */
.hero .first-letter .letter-d{
position:relative;
z-index:5;
}
.dove-wrap{
position:absolute;
left:50%;
bottom:100%;
transform:translateX(-90%);
pointer-events:none;
z-index:4;
line-height:0;
}
.dove{
display:block;
width:clamp(64px, 8vw, 110px);
height:auto;
/* Soft drop shadow follows the dove silhouette (PNG alpha) */
filter:
drop-shadow(0 4px 8px rgba(var(--shadow-rgb),.5))
drop-shadow(0 0 14px rgba(var(--accent-hi-rgb),.25));
opacity:0;
transform:translateY(18%);
transform-origin:center bottom;
animation:dovePerch 1.8s cubic-bezier(.25,.6,.3,1) 1.2s forwards;
}
/* Settle from slightly above; resting position overlaps the letter top a little */
@keyframes dovePerch{
0% { opacity:0; transform:translateY(calc(40% - 12px)) scale(.94); }
60% { opacity:1; }
100% { opacity:1; transform:translateY(40%) scale(1); }
}
@media (prefers-reduced-motion: reduce){
.dove{
animation:none;
opacity:1;
transform:translateY(18%);
}
}
/* Amharic title above the English — polished chrome/cobalt, 3D extrusion, single line */
.hero-geez{
font-family:'Noto Sans Ethiopic', serif;
font-size:clamp(18px, 4.5vw, 56px);
line-height:1.1;
font-weight:600;
letter-spacing:.01em;
margin:0 auto 12px;
padding:0 12px;
white-space:nowrap;
/* Shiny chrome/cobalt gradient clipped to the glyphs */
background:linear-gradient(180deg,
#ffffff 0%,
var(--accent-pale) 14%,
var(--accent-hi) 32%,
var(--accent-3) 47%,
var(--accent-2) 50%,
var(--accent-3) 54%,
var(--accent-hi) 70%,
var(--text) 88%,
#ffffff 100%);
background-size:100% 200%;
background-position:0 0;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
/* Stacked 3D extrusion + soft drop shadow + heavenly outer glow */
text-shadow:
0 1px 0 var(--accent-2),
0 2px 0 var(--accent-1),
0 3px 0 var(--edge),
0 4px 0 var(--steel-2),
0 5px 0 var(--steel),
0 6px 0 var(--slate-2),
0 7px 0 var(--panel-2),
0 8px 10px rgba(var(--shadow-rgb),.65),
0 0 24px rgba(var(--accent-hi-rgb),.45),
0 0 50px rgba(var(--accent-rgb),.25);
opacity:0;
animation:fadeUp 1.4s .6s ease forwards, chromeShine 6s ease-in-out 2s infinite;
}
/* Slow shine sweep — gradient drifts to give a subtle reflective shimmer */
@keyframes chromeShine{
0%,100% { background-position:0 0; }
50% { background-position:0 100%; }
}
/* Hero name image — blends with navy background via screen blend and edge feather */
.hero-name{
display:block;
max-width:min(900px, 90vw);
width:100%;
height:auto;
margin:0 auto 8px;
opacity:0;
animation:fadeUp 1.6s .6s ease forwards;
mix-blend-mode:screen;
-webkit-mask-image:radial-gradient(ellipse 75% 90% at 50% 55%, #000 55%, transparent 100%);
mask-image:radial-gradient(ellipse 75% 90% at 50% 55%, #000 55%, transparent 100%);
filter:drop-shadow(0 0 40px rgba(var(--accent-rgb),.35)) drop-shadow(0 12px 30px rgba(var(--shadow-rgb),.6));
}
.hero .subtitle{
font-family:'Cormorant Garamond', serif;
font-style:italic;
font-size:clamp(18px, 2vw, 24px);
color:rgba(var(--text-warm-rgb),.7);
margin-top:24px;
letter-spacing:.04em;
opacity:0;
animation:fadeUp 1.4s .9s ease forwards;
}
/* Divider with cross */
.hero-divider{
display:flex;align-items:center;justify-content:center;
margin:42px auto 36px;
gap:24px;
opacity:0;
animation:fadeUp 1.4s 1.1s ease forwards;
}
.hero-divider .line{
width:120px;height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-divider svg{width:36px;height:36px;color:var(--gold-bright)}
.hero-cta{
display:inline-flex;align-items:center;gap:14px;
margin-top:36px;
padding:18px 38px;
background:transparent;
color:var(--gold-bright);
border:1px solid var(--gold);
font-family:'Cinzel', serif;
font-size:12px;letter-spacing:.3em;text-transform:uppercase;
text-decoration:none;
transition:all .4s ease;
position:relative;
overflow:hidden;
opacity:0;
animation:fadeUp 1.4s 1.3s ease forwards;
}
.hero-cta::before{
content:"";position:absolute;inset:0;
background:var(--gold);
transform:translateY(101%);
transition:transform .4s ease;
}
.hero-cta:hover{color:var(--ink)}
.hero-cta:hover::before{transform:translateY(0)}
.hero-cta span{position:relative;z-index:2}
/* Floating ornaments in hero */
.ornament{
position:absolute;
color:var(--gold);
opacity:.25;
animation:float 12s ease-in-out infinite;
}
.ornament.top-left{top:14%;left:8%;width:90px;animation-delay:0s}
.ornament.top-right{top:18%;right:10%;width:70px;animation-delay:-3s}
.ornament.bottom-left{bottom:14%;left:12%;width:80px;animation-delay:-6s}
.ornament.bottom-right{bottom:18%;right:8%;width:100px;animation-delay:-9s}
@keyframes float{
0%,100%{transform:translateY(0) rotate(0)}
50%{transform:translateY(-22px) rotate(4deg)}
}
@keyframes fadeUp{
to{opacity:1;transform:translateY(0)}
from{opacity:0;transform:translateY(30px)}
}
/* Scroll indicator */
.scroll-cue{
position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
color:var(--gold);font-family:'Cinzel',serif;font-size:10px;
letter-spacing:.4em;text-transform:uppercase;
display:flex;flex-direction:column;align-items:center;gap:14px;
opacity:.7;
}
.scroll-cue .stem{
width:1px;height:50px;background:linear-gradient(to bottom, var(--gold), transparent);
animation:scrollPulse 2.2s ease-in-out infinite;
transform-origin:top;
}
@keyframes scrollPulse{
0%,100%{transform:scaleY(.3);opacity:.3}
50%{transform:scaleY(1);opacity:1}
}
/* ---------------- PAGE HERO (smaller hero for inner pages) ---------------- */
.page-hero{
min-height:62vh;
position:relative;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
padding:120px 32px 80px;
background:
radial-gradient(ellipse at 50% 30%, rgba(var(--accent-rgb),.18), transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(var(--wash-rgb),.35), transparent 60%),
linear-gradient(180deg, var(--ink) 0%, var(--panel) 60%, var(--ink) 100%);
border-bottom:1px solid rgba(var(--accent-rgb),.15);
}
.page-hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:conic-gradient(from 90deg at 50% 0%,
transparent 0deg, rgba(var(--accent-hi-rgb),.05) 8deg, transparent 16deg,
transparent 22deg, rgba(var(--accent-hi-rgb),.06) 30deg, transparent 38deg,
transparent 120deg, rgba(var(--accent-hi-rgb),.05) 128deg, transparent 136deg,
transparent 142deg, rgba(var(--accent-hi-rgb),.06) 150deg, transparent 158deg);
opacity:.7;
}
.page-hero-content{text-align:center;position:relative;z-index:3;max-width:900px}
.page-hero .ge-tag{margin-bottom:18px;animation:fadeUp 1.2s .2s ease forwards}
.page-hero h1{
font-family:'Cinzel', serif;
font-size:clamp(40px, 6vw, 78px);
line-height:1.05;
color:var(--parchment);
font-weight:400;
margin-bottom:14px;
opacity:0;
animation:fadeUp 1.2s .4s ease forwards;
}
.page-hero h1 em{
font-style:italic;
font-family:'Cormorant Garamond', serif;
color:var(--gold-bright);
font-weight:300;
}
.page-hero .subtitle{
font-family:'Cormorant Garamond', serif;
font-style:italic;
font-size:clamp(17px, 1.8vw, 22px);
color:rgba(var(--text-warm-rgb),.7);
margin-top:16px;
letter-spacing:.04em;
opacity:0;
animation:fadeUp 1.2s .6s ease forwards;
}
.page-hero .hero-divider{margin:32px auto 0;animation:fadeUp 1.2s .8s ease forwards}
/* ---------------- SECTIONS GENERAL ---------------- */
section{padding:140px 48px;position:relative}
.container{max-width:1280px;margin:0 auto}
.section-label{
font-family:'Noto Sans Ethiopic', serif;
font-size:13px;
color:var(--gold);
letter-spacing:.3em;
margin-bottom:18px;
}
.section-title{
font-size:clamp(36px, 5vw, 68px);
line-height:1.05;
margin-bottom:32px;
color:var(--parchment);
font-weight:400;
}
.section-title em{
font-style:italic;
font-family:'Cormorant Garamond', serif;
color:var(--gold-bright);
font-weight:300;
}
/* ---------------- WELCOME (illuminated manuscript) ---------------- */
.welcome{
background:
radial-gradient(circle at 80% 50%, rgba(var(--wash-rgb),.3), transparent 60%),
linear-gradient(180deg, var(--ink) 0%, var(--panel) 100%);
border-top:1px solid rgba(var(--accent-rgb),.15);
border-bottom:1px solid rgba(var(--accent-rgb),.15);
}
.welcome-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:center;
}
@media(max-width:900px){.welcome-grid{grid-template-columns:1fr;gap:60px}}
.welcome-text p{
margin-bottom:24px;
color:rgba(var(--text-warm-rgb),.82);
font-size:19px;
}
.welcome-text p:first-of-type::first-letter{
font-family:'Cinzel', serif;
font-size:88px;
float:left;
line-height:.85;
padding:8px 16px 0 0;
color:var(--gold-bright);
text-shadow:0 2px 0 var(--gold-deep);
}
.welcome-text .ge-quote{
font-family:'Noto Sans Ethiopic', serif;
color:var(--gold);
font-size:20px;
line-height:1.6;
padding:24px 0 8px;
border-top:1px solid rgba(var(--accent-rgb),.25);
margin-top:34px;
letter-spacing:.04em;
}
.welcome-text .ge-quote-tr{
color:rgba(var(--text-warm-rgb),.55);
font-style:italic;
font-size:16px;
}
/* Stained-glass-style illustration card — same framing language as the visit-card.
Height follows the image's natural aspect (no forced aspect-ratio) so the inner
frame always wraps it cleanly, on mobile and desktop alike. */
.stained{
background:
radial-gradient(circle at 50% 40%, rgba(var(--accent-hi-rgb),.22), transparent 60%),
linear-gradient(180deg, var(--panel), var(--ink));
border:1px solid var(--gold);
position:relative;
overflow:hidden;
padding:32px;
box-shadow:0 30px 80px rgba(var(--shadow-rgb),.5);
}
.stained::before{
content:"";position:absolute;inset:14px;
border:1px solid rgba(var(--accent-rgb),.3);
pointer-events:none;
}
.stained .corner{position:absolute;width:30px;height:30px;color:var(--gold)}
.stained .corner.tl{top:8px;left:8px}
.stained .corner.tr{top:8px;right:8px;transform:rotate(90deg)}
.stained .corner.bl{bottom:8px;left:8px;transform:rotate(-90deg)}
.stained .corner.br{bottom:8px;right:8px;transform:rotate(180deg)}
.stained svg.corner{width:30px;height:30px}
.stained > svg:not(.corner){width:100%;height:100%}
.stained img{
display:block;
width:100%;
height:auto;
position:relative;
z-index:0;
}
@media(max-width:600px){
.stained{ padding:22px; }
}
/* ---------------- SERVICES ---------------- */
.services{
background:
radial-gradient(ellipse at 20% 0%, rgba(var(--wash-2-rgb),.35), transparent 50%),
radial-gradient(ellipse at 100% 100%, rgba(var(--wash-3-rgb),.45), transparent 50%),
var(--ink);
}
.services-head{text-align:center;margin-bottom:80px}
.services-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:28px;
}
@media(max-width:900px){.services-grid{grid-template-columns:1fr}}
.service-card{
background:linear-gradient(180deg, rgba(var(--panel-rgb),.6), rgba(var(--ink-rgb),.6));
border:1px solid rgba(var(--accent-rgb),.25);
padding:48px 36px;
position:relative;
overflow:hidden;
transition:all .5s ease;
}
.service-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
transform:scaleX(0);transform-origin:left;
transition:transform .6s ease;
}
.service-card:hover{
border-color:var(--gold);
transform:translateY(-6px);
box-shadow:0 30px 60px rgba(var(--shadow-rgb),.5);
}
.service-card:hover::before{transform:scaleX(1)}
.service-card .num{
font-family:'Cinzel', serif;
color:var(--gold);
font-size:13px;letter-spacing:.4em;
margin-bottom:24px;
display:flex;align-items:center;gap:14px;
}
.service-card .num::before{
content:"";width:30px;height:1px;background:var(--gold);
}
.service-card h3{
font-size:28px;
color:var(--parchment);
margin-bottom:14px;
font-weight:500;
}
.service-card .geez-sub{
font-family:'Noto Sans Ethiopic', serif;
color:var(--gold-bright);
font-size:15px;
margin-bottom:20px;
letter-spacing:.04em;
}
.service-card p{
color:rgba(var(--text-warm-rgb),.72);
font-size:17px;
}
.service-card .time{
margin-top:28px;
padding-top:20px;
border-top:1px dashed rgba(var(--accent-rgb),.3);
font-family:'Cinzel', serif;
font-size:11px;
letter-spacing:.25em;
color:var(--gold-bright);
text-transform:uppercase;
}
/* ---------------- CALENDAR / FEASTS ---------------- */
.feasts{
background:
linear-gradient(180deg, var(--ink), var(--panel)),
var(--ink);
border-top:1px solid rgba(var(--accent-rgb),.15);
}
.feasts-grid{
display:grid;
grid-template-columns:380px 1fr;
gap:80px;
align-items:start;
}
@media(max-width:900px){.feasts-grid{grid-template-columns:1fr;gap:50px}}
.feast-list{list-style:none}
.feast-item{
display:grid;
grid-template-columns:120px 1fr auto;
align-items:baseline;
gap:28px;
padding:24px 0;
border-bottom:1px solid rgba(var(--accent-rgb),.18);
transition:padding-left .35s ease;
}
.feast-item:hover{padding-left:14px}
.feast-item .date{
font-family:'Cinzel', serif;
color:var(--gold-bright);
font-size:14px;
letter-spacing:.18em;
}
.feast-item .name{
font-size:22px;
color:var(--parchment);
}
.feast-item .name small{
display:block;
font-family:'Noto Sans Ethiopic', serif;
color:rgba(var(--accent-hi-rgb),.7);
font-size:14px;
margin-top:4px;
letter-spacing:.05em;
}
.feast-item .tag{
font-family:'Cinzel', serif;
font-size:10px;
letter-spacing:.25em;
text-transform:uppercase;
padding:6px 12px;
border:1px solid rgba(var(--accent-rgb),.4);
color:var(--gold);
}
.feast-item .tag.major{background:var(--crimson);border-color:var(--crimson);color:var(--parchment)}
/* ---------------- LEADERSHIP ---------------- */
.clergy{
background:
radial-gradient(circle at 50% 0%, rgba(var(--wash-rgb),.35), transparent 55%),
var(--ink);
text-align:center;
}
.clergy-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:48px;
margin-top:72px;
}
@media(max-width:900px){.clergy-grid{grid-template-columns:1fr;gap:60px}}
.clergy-card{position:relative}
.clergy-portrait{
width:220px;
aspect-ratio:3/4;
margin:0 auto 28px;
background:linear-gradient(160deg, var(--slate), var(--ink));
border:2px solid var(--gold);
position:relative;
overflow:hidden;
padding:14px;
box-shadow:0 20px 50px rgba(var(--shadow-rgb),.5), inset 0 0 30px rgba(var(--accent-hi-rgb),.18);
}
.clergy-portrait::after{
content:"";position:absolute;inset:8px;
border:1px solid rgba(var(--accent-rgb),.3);
pointer-events:none;
}
.clergy-portrait svg{width:100%;height:100%;color:var(--gold)}
.clergy-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.clergy-card h4{
font-size:24px;
color:var(--parchment);
margin-bottom:6px;
}
.clergy-card .role{
font-family:'Noto Sans Ethiopic', serif;
color:var(--gold-bright);
font-size:14px;
margin-bottom:14px;
letter-spacing:.06em;
}
.clergy-card p{
color:rgba(var(--text-warm-rgb),.65);
font-size:16px;
max-width:300px;
margin:0 auto;
}
/* ---------------- BOARD MEMBERS ---------------- */
.board{
background:
radial-gradient(circle at 50% 0%, rgba(var(--wash-rgb),.3), transparent 55%),
linear-gradient(180deg, var(--ink), var(--panel) 100%);
border-top:1px solid rgba(var(--accent-rgb),.15);
text-align:center;
}
.board-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:50px 30px;
margin-top:64px;
}
@media(max-width:1000px){ .board-grid{grid-template-columns:repeat(3, 1fr)} }
@media(max-width:700px){ .board-grid{grid-template-columns:repeat(2, 1fr)} }
@media(max-width:420px){ .board-grid{grid-template-columns:1fr} }
.board-card{ position:relative; }
.board-portrait{
width:160px;
aspect-ratio:3/4;
margin:0 auto 18px;
background:linear-gradient(160deg, var(--slate), var(--ink));
border:2px solid var(--gold);
position:relative;
overflow:hidden;
box-shadow:0 12px 32px rgba(var(--shadow-rgb),.4), inset 0 0 22px rgba(var(--accent-hi-rgb),.15);
}
.board-portrait::after{
content:"";position:absolute;inset:6px;
border:1px solid rgba(var(--accent-rgb),.3);
pointer-events:none;
z-index:1;
}
.board-portrait svg{
width:100%;height:100%;
color:var(--gold);
}
.board-portrait img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
.board-card h4{
font-size:17px;
color:var(--parchment);
margin-bottom:6px;
font-family:'Cinzel', serif;
font-weight:500;
letter-spacing:.04em;
}
.board-card .role{
font-family:'Noto Sans Ethiopic', serif;
color:var(--gold-bright);
font-size:13px;
letter-spacing:.04em;
line-height:1.4;
}
/* ---------------- VISIT / CONTACT ---------------- */
.visit{
background:linear-gradient(180deg, var(--ink), var(--panel));
border-top:1px solid rgba(var(--accent-rgb),.15);
}
.visit-grid{
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
@media(max-width:900px){.visit-grid{grid-template-columns:1fr}}
.visit-info dt{
font-family:'Cinzel', serif;
color:var(--gold);
font-size:11px;
letter-spacing:.3em;
text-transform:uppercase;
margin-top:32px;
margin-bottom:10px;
}
.visit-info dt:first-child{margin-top:0}
.visit-info dd{
font-size:22px;
color:var(--parchment);
margin-left:0;
}
.visit-info dd small{
display:block;
font-family:'Noto Sans Ethiopic', serif;
color:rgba(var(--accent-hi-rgb),.7);
font-size:14px;
margin-top:4px;
}
.visit-info dd.visit-map{
margin-top:14px;
margin-bottom:8px;
}
.visit-info dd.visit-map iframe{
display:block;
width:100%;
border:1px solid rgba(var(--accent-rgb),.4);
box-shadow:0 12px 32px rgba(var(--shadow-rgb),.4);
}
.visit-card{
aspect-ratio:1/1.1;
background:
radial-gradient(circle at 50% 40%, rgba(var(--accent-hi-rgb),.22), transparent 60%),
linear-gradient(180deg, var(--panel), var(--ink));
border:1px solid var(--gold);
padding:48px;
position:relative;
display:flex;flex-direction:column;justify-content:space-between;
box-shadow:0 30px 80px rgba(var(--shadow-rgb),.5);
}
.visit-card::before{
content:"";position:absolute;inset:14px;
border:1px solid rgba(var(--accent-rgb),.3);
pointer-events:none;
}
.visit-card .corner{position:absolute;width:30px;height:30px;color:var(--gold)}
.visit-card .corner.tl{top:8px;left:8px}
.visit-card .corner.tr{top:8px;right:8px;transform:rotate(90deg)}
.visit-card .corner.bl{bottom:8px;left:8px;transform:rotate(-90deg)}
.visit-card .corner.br{bottom:8px;right:8px;transform:rotate(180deg)}
.visit-card h3{
font-size:32px;color:var(--gold-bright);
text-align:center;margin-bottom:8px;
}
.visit-card .geez{font-size:20px;text-align:center;color:rgba(var(--accent-hi-rgb),.85);margin-bottom:24px}
.visit-card p{text-align:center;color:rgba(var(--text-warm-rgb),.75);font-style:italic;font-size:19px}
.visit-card .seal{
align-self:center;width:80px;height:80px;color:var(--gold);margin-top:24px;
}
.visit-card img{
display:block;
width:100%;
height:100%;
object-fit:cover;
position:relative;
z-index:0;
}
/* ---------------- HOME TEASER GRID (link cards on home page) ---------------- */
.teasers{
background:
radial-gradient(ellipse at 100% 0%, rgba(var(--wash-2-rgb),.3), transparent 55%),
radial-gradient(ellipse at 0% 100%, rgba(var(--wash-3-rgb),.4), transparent 55%),
var(--ink);
border-top:1px solid rgba(var(--accent-rgb),.15);
}
.teasers-head{text-align:center;margin-bottom:80px}
.teasers-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:28px;
}
@media(max-width:900px){.teasers-grid{grid-template-columns:1fr}}
.teaser-card{
display:block;
background:linear-gradient(180deg, rgba(var(--panel-rgb),.5), rgba(var(--ink-rgb),.7));
border:1px solid rgba(var(--accent-rgb),.2);
padding:42px 32px;
text-decoration:none;
color:var(--parchment);
position:relative;
overflow:hidden;
transition:all .5s ease;
}
.teaser-card::after{
content:"→";
position:absolute;
right:32px;bottom:32px;
font-size:22px;
color:var(--gold);
transition:all .4s ease;
}
.teaser-card:hover{
border-color:var(--gold);
transform:translateY(-6px);
box-shadow:0 30px 60px rgba(var(--shadow-rgb),.45);
}
.teaser-card:hover::after{right:24px;color:var(--gold-bright)}
.teaser-card .teaser-label{
font-family:'Noto Sans Ethiopic', serif;
color:var(--gold);
font-size:12px;
letter-spacing:.3em;
margin-bottom:18px;
}
.teaser-card h3{
font-size:26px;
color:var(--parchment);
margin-bottom:12px;
font-weight:500;
}
.teaser-card p{
color:rgba(var(--text-warm-rgb),.7);
font-size:17px;
line-height:1.6;
}
/* ---------------- NEXT FEAST highlight on home ---------------- */
.next-feast{
background:
radial-gradient(circle at 50% 0%, rgba(var(--wash-rgb),.4), transparent 60%),
linear-gradient(180deg, var(--panel), var(--ink));
text-align:center;
border-top:1px solid rgba(var(--accent-rgb),.15);
}
.next-feast .badge{
display:inline-block;
font-family:'Cinzel', serif;
font-size:11px;
letter-spacing:.35em;
color:var(--gold);
padding:8px 18px;
border:1px solid rgba(var(--accent-rgb),.4);
margin-bottom:32px;
}
.next-feast .date-big{
font-family:'Cinzel', serif;
font-size:clamp(60px, 9vw, 110px);
color:var(--gold-bright);
letter-spacing:.05em;
line-height:1;
margin-bottom:14px;
}
.next-feast h2{
font-size:clamp(32px, 4vw, 52px);
color:var(--parchment);
margin-bottom:8px;
font-weight:400;
}
.next-feast .geez-sub{
font-family:'Noto Sans Ethiopic', serif;
color:var(--gold);
font-size:18px;
margin-bottom:28px;
letter-spacing:.04em;
}
.next-feast p{
color:rgba(var(--text-warm-rgb),.72);
max-width:640px;
margin:0 auto 36px;
font-size:18px;
}
/* ---------------- BUTTONS (general) ---------------- */
.btn{
display:inline-flex;align-items:center;gap:14px;
padding:18px 38px;
background:transparent;
color:var(--gold-bright);
border:1px solid var(--gold);
font-family:'Cinzel', serif;
font-size:12px;letter-spacing:.3em;text-transform:uppercase;
text-decoration:none;
transition:all .4s ease;
position:relative;
overflow:hidden;
cursor:pointer;
}
.btn::before{
content:"";position:absolute;inset:0;
background:var(--gold);
transform:translateY(101%);
transition:transform .4s ease;
}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn span{position:relative;z-index:2}
.btn.ghost{border-color:rgba(var(--accent-rgb),.4);color:var(--parchment)}
/* ---------------- RESOURCES (downloads / links list) ---------------- */
.resource-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:28px;
margin-top:50px;
}
@media(max-width:900px){.resource-grid{grid-template-columns:1fr}}
.resource-card{
background:linear-gradient(180deg, rgba(var(--panel-rgb),.5), rgba(var(--ink-rgb),.6));
border:1px solid rgba(var(--accent-rgb),.2);
padding:36px 32px;
position:relative;
transition:all .4s ease;
}
.resource-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.resource-card .kind{
font-family:'Cinzel', serif;
font-size:11px;letter-spacing:.3em;text-transform:uppercase;
color:var(--gold);
margin-bottom:14px;
}
.resource-card h3{
font-size:22px;color:var(--parchment);
margin-bottom:10px;font-weight:500;
}
.resource-card .geez-sub{
font-family:'Noto Sans Ethiopic', serif;
color:var(--gold-bright);font-size:14px;
margin-bottom:14px;
}
.resource-card p{color:rgba(var(--text-warm-rgb),.7);font-size:16px;margin-bottom:18px}
.resource-card .resource-link{
font-family:'Cinzel', serif;font-size:11px;
letter-spacing:.25em;text-transform:uppercase;
color:var(--gold-bright);text-decoration:none;
border-bottom:1px solid var(--gold);
padding-bottom:4px;transition:all .3s ease;
}
.resource-card .resource-link:hover{color:var(--parchment);border-color:var(--parchment)}
/* ---------------- GALLERY ---------------- */
.gallery-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
margin-top:50px;
}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.gallery-grid{grid-template-columns:1fr}}
.gallery-tile{
aspect-ratio:4/5;
background:
radial-gradient(circle at 50% 40%, rgba(var(--accent-hi-rgb),.18), transparent 60%),
linear-gradient(180deg, var(--panel), var(--ink));
border:1px solid var(--gold);
position:relative;overflow:hidden;
padding:12px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
transition:all .5s ease;
box-shadow:0 10px 28px rgba(var(--shadow-rgb),.4);
}
.gallery-tile::before{
content:"";
position:absolute;
inset:6px;
border:1px solid rgba(var(--accent-rgb),.4);
pointer-events:none;
z-index:2;
}
.gallery-tile:hover{
border-color:var(--gold-bright);
transform:scale(1.02);
}
.gallery-tile-wrap{
display:flex;flex-direction:column;
gap:14px;
margin:0;
}
.gallery-tile-caption{
text-align:center;
padding:0 6px;
display:flex;flex-direction:row;
flex-wrap:wrap;
align-items:baseline;
justify-content:center;
gap:6px;
}
.gallery-tile-caption .caption-en{
font-family:'Cinzel', serif;
font-size:13px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--parchment);
}
.gallery-tile-caption .caption-am{
font-family:'Noto Sans Ethiopic', serif;
color:var(--gold-bright);
font-size:15px;
letter-spacing:.02em;
}
.gallery-tile-caption .caption-am::before{
content:"- ";
color:rgba(var(--accent-hi-rgb),.55);
margin-right:2px;
}
.gallery-tile .placeholder{
font-family:'Cinzel', serif;font-size:11px;
letter-spacing:.3em;text-transform:uppercase;
color:rgba(var(--accent-hi-rgb),.5);
text-align:center;padding:24px;
}
.gallery-tile img{width:100%;height:100%;object-fit:cover;display:block}
/* ---------------- GALLERY LIGHTBOX ---------------- */
.gallery-lightbox{
position:fixed;inset:0;
background:rgba(var(--void-rgb),.94);
backdrop-filter:blur(10px);
z-index:300;
display:flex;align-items:center;justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity .35s ease;
padding:60px;
}
.gallery-lightbox.open{
opacity:1;
pointer-events:auto;
}
.lightbox-content{
position:relative;
max-width:100%;max-height:100%;
display:flex;flex-direction:column;align-items:center;gap:20px;
}
.lightbox-section{
font-family:'Noto Sans Ethiopic', serif;
color:var(--gold);
font-size:13px;letter-spacing:.3em;text-transform:uppercase;
}
.lightbox-image{
display:flex;align-items:center;justify-content:center;
max-width:90vw;max-height:75vh;
}
.lightbox-image img{
max-width:90vw;max-height:75vh;
object-fit:contain;
display:block;
border:1px solid var(--gold);
box-shadow:0 30px 80px rgba(var(--shadow-rgb),.7);
}
.lightbox-placeholder{
font-family:'Cinzel', serif;
color:var(--gold);
font-size:22px;letter-spacing:.25em;
text-transform:uppercase;
text-align:center;
padding:80px 60px;
border:1px solid rgba(var(--accent-rgb),.4);
background:linear-gradient(180deg, var(--panel), var(--ink));
min-width:min(420px, 80vw);
min-height:280px;
display:flex;align-items:center;justify-content:center;
}
.lightbox-caption{
color:var(--parchment);
font-family:'Cormorant Garamond', serif;
font-style:italic;
font-size:18px;
text-align:center;
}
.lightbox-counter{
font-family:'Cinzel', serif;
color:rgba(var(--accent-hi-rgb),.6);
font-size:11px;letter-spacing:.3em;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
position:absolute;
background:transparent;
border:1px solid rgba(var(--accent-rgb),.4);
color:var(--parchment);
font-family:'Cinzel', serif;
width:50px;height:50px;
cursor:pointer;
transition:all .3s ease;
display:flex;align-items:center;justify-content:center;
z-index:1;
}
.lightbox-close{ top:24px;right:24px;font-size:24px;line-height:1; }
.lightbox-prev{ left:24px;top:50%;transform:translateY(-50%);font-size:30px;line-height:1; }
.lightbox-next{ right:24px;top:50%;transform:translateY(-50%);font-size:30px;line-height:1; }
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
border-color:var(--gold);
color:var(--gold-bright);
background:rgba(var(--accent-rgb),.1);
}
@media(max-width:600px){
.gallery-lightbox{padding:20px}
.lightbox-close{top:12px;right:12px;width:40px;height:40px}
.lightbox-prev{left:8px;width:40px;height:40px}
.lightbox-next{right:8px;width:40px;height:40px}
}
/* ---------------- MODAL (generic overlay form) ---------------- */
.modal{
position:fixed;inset:0;
background:rgba(var(--void-rgb),.88);
backdrop-filter:blur(8px);
z-index:300;
display:flex;align-items:center;justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity .35s ease;
padding:32px 20px;
overflow-y:auto;
}
.modal.open{
opacity:1;
pointer-events:auto;
}
.modal-card{
position:relative;
background:
radial-gradient(circle at 50% 0%, rgba(var(--accent-hi-rgb),.18), transparent 60%),
linear-gradient(180deg, var(--panel), var(--ink));
border:1px solid var(--gold);
box-shadow:0 40px 100px rgba(var(--shadow-rgb),.7);
padding:48px 40px 40px;
max-width:720px;
width:100%;
margin:auto;
transform:translateY(20px);
transition:transform .35s ease;
}
.modal.open .modal-card{ transform:translateY(0); }
.modal-card::before{
content:"";position:absolute;inset:12px;
border:1px solid rgba(var(--accent-rgb),.25);
pointer-events:none;
}
.modal-close{
position:absolute;
top:12px;right:12px;
width:42px;height:42px;
background:transparent;
border:1px solid rgba(var(--accent-rgb),.4);
color:var(--parchment);
font-family:'Cinzel', serif;
font-size:22px;line-height:1;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .3s ease;
z-index:2;
}
.modal-close:hover{
border-color:var(--gold);
color:var(--gold-bright);
background:rgba(var(--accent-rgb),.1);
}
.modal-title{
font-family:'Cinzel', serif;
font-size:clamp(28px, 4vw, 40px);
color:var(--parchment);
font-weight:500;
margin:14px 0 14px;
}
.modal-title em{
font-style:italic;
font-family:'Cormorant Garamond', serif;
color:var(--gold-bright);
font-weight:300;
}
.modal-intro{
color:rgba(var(--text-warm-rgb),.72);
font-size:17px;
margin-bottom:30px;
}
/* A modal that holds an embedded third-party form. Wider than the standard card
because Google renders the form at its own fixed width and will letterbox in
anything narrower. The frame is deliberately inset and bordered: the embed
arrives on Google's white background, which cannot be restyled from out here,
so it is framed as an intentional panel rather than left as a bright hole. */
/* The card is capped to the viewport and laid out as a column so the heading and
intro take their natural height and the frame absorbs whatever is left. Sizing
the frame by viewport height instead made the card taller than the screen on a
laptop, which left the reader scrolling the overlay to reach a form that also
scrolls internally — two nested scrollbars for one task. */
.modal-card-embed{
/* Sized so the frame lands near 660px inside the card's 40px padding. Google
renders the form at a fixed ~640px and centres it, so a wider card just buys
black gutters either side of a form that will not grow to fill them. */
max-width:740px;
max-height:calc(100vh - 64px);
display:flex;
flex-direction:column;
}
.modal-frame{
position:relative;
/* The basis has to be a real length, not auto. The card's height comes from
its content, so a flex-basis of auto leaves nothing to grow into and the
frame collapses to min-height. Starting from a generous 720px instead means
the card wants to be tall and the max-height above shrinks the frame to fit
whatever screen it lands on. */
flex:1 1 720px;
min-height:300px;
border:1px solid rgba(var(--accent-rgb),.3);
background:var(--void);
overflow:hidden;
}
.modal-frame iframe{
display:block;
width:100%;height:100%;
border:0;
}
/* Sits under the frame, and matters more than it looks: a browser blocking
third-party content renders the iframe blank with no error, and this is the
only way out of that dead end. */
.modal-foot{
margin-top:18px;
font-size:15px;
color:rgba(var(--text-warm-rgb),.55);
text-align:center;
}
.modal-foot a{
color:var(--gold-bright);
text-decoration:none;
border-bottom:1px solid rgba(var(--accent-rgb),.4);
transition:border-color .3s ease;
}
.modal-foot a:hover{ border-bottom-color:var(--gold-bright); }
@media (max-width:700px){
.modal-card-embed{ max-height:calc(100vh - 40px); }
}
/* Custom file input styling */
.file-input-hidden{
position:absolute !important;
left:-9999px;
width:1px;height:1px;
overflow:hidden;
opacity:0;
}
.file-trigger{
display:flex;align-items:center;gap:12px;
padding:18px 20px;
background:rgba(var(--ink-rgb),.6);
border:1px dashed rgba(var(--accent-rgb),.4);
color:var(--gold-bright);
font-family:'Cinzel', serif;
font-size:12px;letter-spacing:.2em;text-transform:uppercase;
cursor:pointer;
transition:all .3s ease;
}
.file-trigger:hover{
border-color:var(--gold);
border-style:solid;
background:rgba(var(--accent-rgb),.08);
}
.file-trigger-icon{
font-size:18px;
color:var(--gold);
}
.file-list{
margin-top:10px;
color:rgba(var(--text-warm-rgb),.7);
font-family:'Cormorant Garamond', serif;
font-size:15px;
line-height:1.55;
font-style:italic;
}
.file-list.has-files{
font-style:normal;
}
.file-list ul{
list-style:none;padding:0;margin:0;
}
.file-list li{
display:flex;align-items:center;gap:10px;
padding:4px 0;
}
.file-list li::before{
content:"✦";color:var(--gold);font-size:12px;
}
@media(max-width:600px){
.modal-card{ padding:40px 22px 28px; }
}
/* ---------------- REGISTRATION (sacrament cards) ---------------- */
.sacrament-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:32px;
margin-top:50px;
}
@media(max-width:900px){.sacrament-grid{grid-template-columns:1fr}}
.sacrament-card{
background:linear-gradient(180deg, rgba(var(--panel-rgb),.55), rgba(var(--ink-rgb),.7));
border:1px solid rgba(var(--accent-rgb),.25);
padding:48px 40px;
position:relative;
transition:all .5s ease;
}
.sacrament-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.sacrament-card .icon{
width:50px;height:50px;color:var(--gold-bright);
margin-bottom:24px;
}
.sacrament-card h3{
font-size:28px;color:var(--parchment);
margin-bottom:8px;font-weight:500;
}
.sacrament-card .geez-sub{
font-family:'Noto Sans Ethiopic', serif;
color:var(--gold-bright);font-size:15px;
margin-bottom:18px;
}
.sacrament-card p{color:rgba(var(--text-warm-rgb),.72);font-size:17px;margin-bottom:24px}
.sacrament-card ul{
list-style:none;padding-left:0;margin-bottom:24px;
}
.sacrament-card ul li{
position:relative;padding-left:22px;
color:rgba(var(--text-warm-rgb),.72);font-size:16px;
margin-bottom:8px;
}
.sacrament-card ul li::before{
content:"✦";position:absolute;left:0;color:var(--gold);
}
/* ---------------- FORM ---------------- */
.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
margin-top:40px;
}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.form-field{display:flex;flex-direction:column}
.form-field.full{grid-column:1 / -1}
.form-field label{
font-family:'Cinzel', serif;
font-size:11px;letter-spacing:.25em;text-transform:uppercase;
color:var(--gold);
margin-bottom:10px;
}
.form-field input,
.form-field select,
.form-field textarea{
background:rgba(var(--ink-rgb),.6);
border:1px solid rgba(var(--accent-rgb),.3);
color:var(--parchment);
font-family:'Cormorant Garamond', serif;
font-size:17px;
padding:14px 16px;
transition:border .3s ease;
outline:none;
resize:vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{border-color:var(--gold)}
.form-field textarea{min-height:140px}
.form-submit-row{
grid-column:1 / -1;
margin-top:20px;
display:flex;justify-content:center;
}
/* Toast shown after FormSubmit redirects back with ?sent=1 */
.submit-toast{
position:fixed;
top:90px; right:20px;
max-width:360px;
background:linear-gradient(180deg, rgba(var(--ok-rgb),.18), rgba(var(--ok-rgb),.10));
border:1px solid rgba(var(--ok-rgb),.5);
color:var(--ok);
padding:16px 22px;
font-family:'Cinzel', serif;
font-size:13px;letter-spacing:.1em;
z-index:500;
box-shadow:0 14px 40px rgba(var(--shadow-rgb),.5);
animation:submitToastIn .4s cubic-bezier(.3,.6,.3,1);
}
.submit-toast.dismissed{
opacity:0;
transform:translateX(20px);
transition:opacity .5s ease, transform .5s ease;
}
@keyframes submitToastIn{
from{opacity:0; transform:translateX(20px);}
to{opacity:1; transform:translateX(0);}
}
@media(max-width:600px){
.submit-toast{ top:74px; left:16px; right:16px; max-width:none; }
}
/* FormSubmit AJAX status banner (success / error) */
.form-status{
grid-column:1 / -1;
margin-top:18px;
padding:16px 20px;
font-family:'Cinzel', serif;
font-size:12px;letter-spacing:.2em;
text-align:center;
border:1px solid rgba(var(--accent-rgb),.35);
background:rgba(var(--accent-rgb),.06);
color:var(--gold-bright);
line-height:1.6;
}
.form-status.success{
border-color:rgba(var(--ok-rgb),.5);
color:var(--ok);
background:rgba(var(--ok-rgb),.08);
letter-spacing:.1em;
text-transform:none;
font-size:14px;
}
.form-status.error{
border-color:rgba(var(--danger-rgb),.5);
color:var(--danger-hi);
background:rgba(var(--danger-rgb),.08);
letter-spacing:.1em;
text-transform:none;
font-size:14px;
}
/* ---------------- ABOUT prose blocks ---------------- */
.prose{
max-width:780px;margin:0 auto;
}
.prose p{
margin-bottom:22px;
color:rgba(var(--text-warm-rgb),.82);
font-size:19px;
}
.prose h3{
font-size:30px;
color:var(--gold-bright);
margin-top:50px;margin-bottom:18px;
font-weight:500;
}
.prose blockquote{
border-left:2px solid var(--gold);
padding:8px 0 8px 28px;
margin:32px 0;
font-style:italic;
color:rgba(var(--text-warm-rgb),.7);
}
/* ---------------- FOOTER (3-column standard layout) ---------------- */
footer{
padding:80px 48px 28px;
background:var(--void);
border-top:1px solid rgba(var(--accent-rgb),.2);
}
.footer-grid{
max-width:1280px;
margin:0 auto 50px;
display:grid;
grid-template-columns:1.4fr 1fr 1fr;
gap:60px;
align-items:start;
}
@media(max-width:820px){
.footer-grid{ grid-template-columns:1fr; gap:48px; text-align:center; }
}
.footer-col .foot-mark{width:48px;height:48px;color:var(--gold);margin-bottom:18px}
/* The seal is a circle on a white JPEG background — no alpha channel — so a
square crop puts a bright white box on the dark footer. Clipping to a circle
hides the corners; aspect-ratio + cover keeps it round rather than an ellipse,
since the source is 1320x1390 and the extra height is just whitespace. If a
transparent PNG of the seal ever replaces it, this rule stays correct. */
.foot-logo{
display:block;
width:80px;
aspect-ratio:1;
object-fit:cover;
margin-bottom:18px;
border-radius:50%;
}
.foot-name{
font-family:'Cinzel', serif;
color:var(--gold-bright);
letter-spacing:.22em;
font-size:15px;
text-transform:uppercase;
margin-bottom:8px;
}
.foot-ge{
font-family:'Noto Sans Ethiopic', serif;
color:rgba(var(--accent-hi-rgb),.78);
font-size:17px;
margin-bottom:14px;
}
.foot-tagline{
color:rgba(var(--text-warm-rgb),.65);
font-style:italic;
font-size:17px;
margin-bottom:24px;
max-width:340px;
line-height:1.55;
}
.foot-social{ display:flex; gap:14px; }
.foot-social a{
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;
border:1px solid rgba(var(--accent-rgb),.3);
color:var(--gold);
transition:border-color .3s ease, color .3s ease, transform .3s ease;
}
.foot-social a:hover{
border-color:var(--gold);
color:var(--gold-bright);
transform:translateY(-2px);
}
.foot-social svg{ width:16px; height:16px; }
.footer-heading{
font-family:'Cinzel', serif;
font-size:13px;letter-spacing:.3em;text-transform:uppercase;
color:var(--gold);
margin-bottom:24px;
font-weight:500;
}
.foot-contact dt{
font-family:'Cinzel', serif;
font-size:11px;letter-spacing:.25em;text-transform:uppercase;
color:var(--gold);
margin-top:18px;margin-bottom:6px;
}
.foot-contact dt:first-of-type{ margin-top:0; }
.foot-contact dd{
color:rgba(var(--text-warm-rgb),.82);
font-size:17px;line-height:1.55;
margin-left:0;
}
.foot-contact dd a{
color:rgba(var(--text-warm-rgb),.82);
text-decoration:none;
transition:color .3s ease;
}
.foot-contact dd a:hover{ color:var(--gold-bright); }
/* Visit menu — two columns to keep the column from running too tall */
.foot-menu{
list-style:none;padding:0;
display:grid;
grid-template-columns:1fr 1fr;
gap:12px 24px;
}
.foot-menu a{
color:rgba(var(--text-warm-rgb),.78);
text-decoration:none;
font-family:'Cinzel', serif;
font-size:13px;letter-spacing:.18em;text-transform:uppercase;
transition:color .3s ease, padding-left .3s ease;
display:inline-block;
}
.foot-menu a:hover{
color:var(--gold-bright);
padding-left:6px;
}
footer .copy{
max-width:1280px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
flex-wrap:wrap;
font-size:14px;
color:rgba(var(--text-warm-rgb),.5);
font-style:italic;
padding-top:24px;
border-top:1px solid rgba(var(--accent-rgb),.15);
}
footer .copy a{
color:var(--gold);
text-decoration:none;
transition:color .3s ease;
}
footer .copy a:hover{ color:var(--gold-bright); }
@media(max-width:600px){
footer .copy{ justify-content:center; text-align:center; }
}
@media(max-width:820px){
.foot-social{ justify-content:center; }
.foot-tagline{ margin-left:auto; margin-right:auto; }
.foot-logo{ margin-left:auto; margin-right:auto; }
.foot-contact{ display:inline-block; text-align:left; }
.foot-menu{ justify-items:center; }
.foot-menu a:hover{ padding-left:0; }
}
/* Scroll reveals */
.reveal{opacity:0;transform:translateY(30px);transition:all 1s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.visually-hidden{
position:absolute !important;
left:-9999px;
width:1px;height:1px;
overflow:hidden;
}
@media(max-width:600px){
section{padding:90px 24px}
nav .brand{font-size:11px}
}
/* ---------------- ADMIN PAGE ---------------- */
.admin-body{
min-height:100vh;
padding:60px 32px;
}
.admin-title{
font-family:'Cinzel', serif;
font-size:clamp(28px, 4vw, 44px);
color:var(--parchment);
font-weight:500;
margin:10px 0 16px;
}
.admin-title em{
font-style:italic;
font-family:'Cormorant Garamond', serif;
color:var(--gold-bright);
font-weight:300;
}
.admin-login{
min-height:80vh;
display:flex;align-items:center;justify-content:center;
}
.admin-login-card{
position:relative;
max-width:460px;
width:100%;
padding:48px 40px;
background:
radial-gradient(circle at 50% 0%, rgba(var(--accent-hi-rgb),.18), transparent 60%),
linear-gradient(180deg, var(--panel), var(--ink));
border:1px solid var(--gold);
box-shadow:0 40px 100px rgba(var(--shadow-rgb),.6);
}
.admin-login-card::before{
content:"";position:absolute;inset:12px;
border:1px solid rgba(var(--accent-rgb),.25);
pointer-events:none;
}
.admin-intro{
color:rgba(var(--text-warm-rgb),.72);
font-size:17px;
margin-bottom:28px;
}
.admin-error{
color:var(--danger);
font-family:'Cinzel', serif;
font-size:12px;letter-spacing:.18em;text-transform:uppercase;
padding:12px 14px;
border:1px solid rgba(var(--danger-rgb),.4);
background:rgba(var(--danger-rgb),.08);
}
.admin-header{
display:flex;justify-content:space-between;align-items:flex-end;
flex-wrap:wrap;gap:24px;
max-width:1280px;margin:0 auto 40px;
padding-bottom:24px;
border-bottom:1px solid rgba(var(--accent-rgb),.2);
}
.admin-header-actions{display:flex;gap:14px;flex-wrap:wrap}
.admin-grid{
max-width:1280px;margin:0 auto;
display:grid;
grid-template-columns:1fr 1.4fr;
gap:40px;
align-items:start;
}
@media(max-width:900px){ .admin-grid{ grid-template-columns:1fr; } }
.admin-panel{
background:linear-gradient(180deg, rgba(var(--panel-rgb),.6), rgba(var(--ink-rgb),.6));
border:1px solid rgba(var(--accent-rgb),.25);
padding:32px 28px;
}
.admin-panel-title{
font-family:'Cinzel', serif;
font-size:14px;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);
margin-bottom:24px;font-weight:500;
display:flex;gap:10px;flex-wrap:wrap;
}
#drop-zone.drop-active{
border-style:solid;
border-color:var(--gold-bright);
background:rgba(var(--accent-rgb),.12);
}
.admin-status{
font-family:'Cinzel', serif;
font-size:12px;letter-spacing:.18em;text-transform:uppercase;
padding:12px 14px;
border:1px solid rgba(var(--accent-rgb),.3);
color:var(--gold-bright);
background:rgba(var(--accent-rgb),.06);
}
.admin-status.success{
border-color:rgba(var(--ok-rgb),.5);
color:var(--ok);
background:rgba(var(--ok-rgb),.08);
}
.admin-status.error{
border-color:rgba(var(--danger-rgb),.5);
color:var(--danger-hi);
background:rgba(var(--danger-rgb),.08);
}
.admin-image-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
gap:14px;
}
/* ---------------- ADMIN: ANNOUNCEMENTS ---------------- */
.form-hint{
display:block;
margin-top:6px;
font-weight:normal;
font-size:14px;
color:rgba(var(--text-warm-rgb),.5);
}
.admin-note{
margin:-6px 0 20px;
font-size:15px;
color:rgba(var(--text-warm-rgb),.55);
}
.ann-row{
border:1px solid rgba(var(--accent-rgb),.25);
background:var(--panel);
padding:18px 20px;
margin-bottom:14px;
}
.ann-row-head{
display:flex;align-items:center;justify-content:space-between;
gap:14px;margin-bottom:10px;
}
.ann-text{
color:var(--parchment);
font-size:17px;
line-height:1.5;
margin-bottom:12px;
word-break:break-word;
}
.ann-dates{
font-family:'Cinzel', serif;
font-size:12px;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(var(--text-warm-rgb),.55);
}
/* Whether a notice is on the site right now is the one thing the parish needs
to see at a glance, so it is a badge rather than a date they have to compare
against today's. */
.ann-state{
flex:none;
font-family:'Cinzel', serif;
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
padding:5px 12px;
border:1px solid rgba(var(--accent-rgb),.4);
color:rgba(var(--text-warm-rgb),.6);
}
.ann-state.is-live{
border-color:var(--gold);
color:var(--ink);
background:var(--gold);
}
.ann-actions{ display:flex;gap:10px;flex-wrap:wrap; }
.ann-actions .btn{ padding:8px 16px;font-size:11px; }
.admin-empty{
grid-column:1 / -1;
color:rgba(var(--text-warm-rgb),.55);
font-style:italic;
font-size:16px;
text-align:center;
padding:40px 20px;
}
.admin-image{
position:relative;
border:1px solid rgba(var(--accent-rgb),.25);
background:var(--panel);
overflow:hidden;
aspect-ratio:4/5;
}
.admin-image img{
width:100%;height:65%;
object-fit:cover;
display:block;
}
.admin-image-meta{
padding:10px 12px;
display:flex;flex-direction:column;gap:4px;
font-size:13px;
}
.admin-image-meta .cap-en{
color:var(--parchment);
font-family:'Cinzel', serif;
font-size:12px;letter-spacing:.08em;
text-transform:uppercase;
}
.admin-image-meta .cap-am{
color:var(--gold-bright);
font-size:13px;
}
.admin-delete{
position:absolute;
top:6px;right:6px;
width:28px;height:28px;
background:rgba(var(--ink-rgb),.85);
border:1px solid rgba(var(--danger-rgb),.6);
color:var(--danger-hi);
font-family:'Cinzel', serif;
font-size:18px;line-height:1;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .3s ease;
}
.admin-delete:hover{
background:var(--danger-bg);
color:#ffffff;
border-color:var(--danger-lo);
}
@media(max-width:600px){
.admin-body{padding:30px 16px}
.admin-login-card{padding:36px 24px}
.admin-panel{padding:24px 18px}
}
/* ---------------- ADMIN TABS ---------------- */
.admin-tabs{
max-width:1280px;margin:0 auto 32px;
display:flex;gap:0;
border-bottom:1px solid rgba(var(--accent-rgb),.2);
}
.admin-tab{
background:none;border:none;border-bottom:2px solid transparent;
color:rgba(var(--text-warm-rgb),.55);
font-family:'Cinzel', serif;
font-size:12px;letter-spacing:.22em;text-transform:uppercase;
padding:14px 26px;
cursor:pointer;
transition:color .3s, border-color .3s;
}
.admin-tab:hover{color:var(--parchment)}
.admin-tab.is-active{
color:var(--gold-bright);
border-bottom-color:var(--gold-bright);
}
/* ---------------- ADMIN FUNDRAISING ---------------- */
.fund-eventbar{
max-width:1280px;margin:0 auto 28px;
}
.fund-eventbar-top{
display:flex;gap:24px;align-items:flex-end;
flex-wrap:wrap;
}
.fund-event-picker{flex:1 1 260px;min-width:220px}
.fund-actions{
display:flex;gap:10px;flex-wrap:wrap;
flex:1 1 auto;
}
.fund-actions .btn{
font-size:10px;
padding:12px 18px;
}
.btn.ghost.danger{
border-color:rgba(var(--danger-rgb),.45);
color:var(--danger-hi);
}
.btn.ghost.danger:hover{color:#fff}
.btn.ghost.danger::before{background:var(--danger-bg-2)}
.fund-event-form{
margin-top:28px;
padding-top:24px;
border-top:1px dashed rgba(var(--accent-rgb),.3);
}
.fund-stats{
max-width:1280px;margin:0 auto 28px;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:14px;
}
.fund-stat{
background:linear-gradient(180deg, rgba(var(--panel-rgb),.6), rgba(var(--ink-rgb),.6));
border:1px solid rgba(var(--accent-rgb),.25);
padding:20px 18px;
text-align:center;
}
.fund-stat-value{
font-family:'Cinzel', serif;
font-size:clamp(20px, 2.2vw, 28px);
color:var(--gold-bright);
letter-spacing:.02em;
line-height:1.2;
}
.fund-stat-label{
font-family:'Cinzel', serif;
font-size:10px;letter-spacing:.24em;text-transform:uppercase;
color:rgba(var(--text-warm-rgb),.5);
margin-top:8px;
}
/* A busy event can run to hundreds of gifts, so the ledger scrolls inside its
panel instead of stretching the page. The header stays put while it does. */
.fund-table-wrap{
overflow-x:auto;
overflow-y:auto;
max-height:min(58vh, 620px);
scrollbar-width:thin;
scrollbar-color:rgba(var(--accent-rgb),.45) transparent;
}
.fund-table-wrap::-webkit-scrollbar{width:10px;height:10px}
.fund-table-wrap::-webkit-scrollbar-track{background:rgba(var(--ink-rgb),.45)}
.fund-table-wrap::-webkit-scrollbar-thumb{
background:rgba(var(--accent-rgb),.35);
border:2px solid transparent;
background-clip:content-box;
}
.fund-table-wrap::-webkit-scrollbar-thumb:hover{
background:rgba(var(--accent-hi-rgb),.6);
background-clip:content-box;
}
.fund-table{
width:100%;
border-collapse:collapse;
font-size:16px;
}
.fund-table th{
position:sticky;top:0;z-index:2;
font-family:'Cinzel', serif;
font-size:10px;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);
text-align:left;
font-weight:500;
padding:10px 12px 12px 0;
/* Opaque, or the rows would show through the sticky header as they pass under.
The rule is a box-shadow because a border on a sticky cell drops out on scroll. */
background:var(--ink-2);
box-shadow:inset 0 -1px 0 rgba(var(--accent-rgb),.25);
white-space:nowrap;
}
.fund-table td{
padding:14px 12px 14px 0;
border-bottom:1px solid rgba(var(--accent-rgb),.12);
vertical-align:middle;
}
.fund-table th.num,
.fund-table td.num{
text-align:right;
padding-right:20px;
font-family:'Cinzel', serif;
color:var(--gold-bright);
white-space:nowrap;
}
.fund-table th.actions,
.fund-table td.actions{
text-align:right;
padding-right:0;
white-space:nowrap;
}
.fund-table tr:last-child td{border-bottom:none}
.fund-row-status{
background:rgba(var(--ink-rgb),.7);
border:1px solid rgba(var(--accent-rgb),.3);
color:var(--parchment);
font-family:'Cormorant Garamond', serif;
font-size:15px;
padding:6px 8px;
max-width:210px;
}
.fund-row-status:focus{border-color:var(--gold);outline:none}
.fund-note{
color:rgba(var(--text-warm-rgb),.45);
font-size:14px;
font-style:italic;
margin-top:4px;
}
.fund-muted{color:rgba(var(--text-warm-rgb),.35);font-style:italic;font-size:14px}
.fund-mini{
background:none;
border:1px solid rgba(var(--accent-rgb),.35);
color:var(--parchment);
font-family:'Cinzel', serif;
font-size:10px;letter-spacing:.16em;text-transform:uppercase;
padding:7px 12px;
margin-left:6px;
cursor:pointer;
transition:all .3s ease;
}
.fund-mini:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.fund-mini.danger{border-color:rgba(var(--danger-rgb),.4);color:var(--danger-hi)}
.fund-mini.danger:hover{background:var(--danger-bg);color:#fff;border-color:var(--danger-lo)}
@media(max-width:600px){
.admin-tab{padding:12px 16px;font-size:11px;letter-spacing:.16em}
.fund-actions .btn{flex:1 1 auto;text-align:center}
.fund-table{font-size:15px}
.fund-mini{margin:3px 0 0 4px}
}
/* The hidden attribute must beat any display rule set on these elements.
Without this, .form-grid/.form-field/.btn keep hidden panels on screen. */
[hidden]{display:none !important}
/* ---------------- ADMIN: WAYS TO GIVE EDITOR ---------------- */
.give-editor{display:flex;flex-direction:column;gap:10px;margin-top:6px}
/* .form-field is a column flex, so a bare button would stretch edge to edge. */
#giving-add{align-self:flex-start}
.give-row{
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,1.2fr) auto;
gap:10px;
align-items:center;
}
.give-row input{
background:rgba(var(--ink-rgb),.7);
border:1px solid rgba(var(--accent-rgb),.3);
color:var(--parchment);
font-family:'Cormorant Garamond', serif;
font-size:16px;
padding:10px 12px;
min-width:0;
}
.give-row input:focus{border-color:var(--gold);outline:none}
.give-row .give-x{margin:0;white-space:nowrap}
@media(max-width:700px){
.give-row{grid-template-columns:1fr 1fr;gap:8px}
.give-row .give-n{grid-column:1 / -1}
.give-row .give-x{grid-column:1 / -1;justify-self:start}
}