/* Orthodox Christian Fellowship at Williams College
   styles.css: all styling for index.html.
   Fonts from Google Fonts: Jost (titles, text), Sorts Mill Goudy italic (subtitles),
   Cormorant Garamond italic (the sayings of the saints). */

[hidden]{display:none!important}
/* Layout: after Black Negative. Black ground, full-screen pages, a thin fixed bar along the bottom with
   one marker per page. Light geometric capitals with wide tracking (Jost, standing in for Geosans Light),
   calligraphic italics for subtitles and sayings (Sorts Mill Goudy), tiny tracked capitals for labels.
   Dividers are solid hairlines that fade out to the right; group dividers open with a short bright stroke.
   Pages: hero with incense; who we are | Scripture Reading Series; the Orthodox Church with sayings of the
   saints and resources; an about footer built around an interactive cross. One dark world, on purpose. */
:root{
  color-scheme: dark;
  --black:#000;
  --white:#fff;
  --text:rgba(255,255,255,.84);
  --dim:rgba(255,255,255,.58);
  --faint:rgba(255,255,255,.34);
  --rule:rgba(255,255,255,.14);
  --dash:rgba(255,255,255,.3);
  --gold:#f1c879;

  --sans:"Jost","Futura","Century Gothic","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --script:"Sorts Mill Goudy","Goudy Old Style","Iowan Old Style",Garamond,Georgia,serif;
  --hair:linear-gradient(90deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.1) 55%,rgba(255,255,255,0) 100%);
  --lead:linear-gradient(90deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.95) 28px,rgba(255,255,255,.24) 28px,rgba(255,255,255,.09) 60%,rgba(255,255,255,0) 100%);

  --bar:44px;
  --gutter-l:max(clamp(16px,4.5vw,64px),env(safe-area-inset-left,0px));
  --gutter-r:max(clamp(16px,4.5vw,64px),env(safe-area-inset-right,0px));
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--text);font-family:var(--sans);font-size:17px;font-weight:350;line-height:1.75;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--white);color:var(--black)}
a{color:var(--white);text-decoration-color:var(--dash);text-underline-offset:.3em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--white)}
:focus-visible{outline:1px solid var(--white);outline-offset:4px}
img{max-width:100%;display:block;-webkit-user-drag:none}
h1,h2,h3,h4{margin:0;font-weight:inherit;text-wrap:balance}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit}

/* type */
.caps{font-family:var(--sans);font-weight:500;font-size:10.5px;line-height:1.6;letter-spacing:.32em;text-transform:uppercase}
.display{font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.3em;color:var(--white)}
.it{font-family:var(--script);font-style:italic;font-weight:400;font-variant-numeric:oldstyle-nums}
.h2{font-size:clamp(24px,2.3vw,36px);line-height:1.45}
.sub{font-size:clamp(19px,1.45vw,23px);line-height:1.38;color:var(--dim)}
.body{max-width:34em;color:var(--text)}

/* the hairline button from the reference */
.frame{display:inline-block;padding:13px 2px 12px;border-top:1px solid var(--dash);border-bottom:1px solid var(--dash);background:none;border-left:0;border-right:0;color:var(--white);text-decoration:none;cursor:pointer;transition:letter-spacing .5s cubic-bezier(.2,.7,.1,1),border-color .3s}
.frame:hover{letter-spacing:.42em;border-color:var(--white)}

/* ---------- bottom bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--black);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
.bar-in{height:var(--bar);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.wordmark{justify-self:start;font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--white);text-decoration:none;white-space:nowrap;padding-block:8px}
.wordmark:hover{color:var(--gold)}
.marks{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.marks a{position:relative;display:block;width:36px;height:24px}
.marks a::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.26);transition:background-color .35s ease}
.marks a:hover::before{background:rgba(255,255,255,.6)}
.marks a[aria-current="true"]::before{background:var(--white)}
.marks a::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-weight:500;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--white);opacity:0;transition:opacity .25s;pointer-events:none}
.marks a:hover::after,.marks a:focus-visible::after{opacity:1}
.bar-r{justify-self:end;background:none;border:0;padding:8px 0;cursor:pointer;color:var(--white)}
.bar-r:hover{color:var(--gold)}
@media (max-width:640px),(hover:none){.marks a::after{display:none}}
@media (max-width:640px){.wordmark{letter-spacing:.22em}.marks a{width:28px}.bar-r{display:none}.bar-in{grid-template-columns:1fr auto}.marks{justify-self:end}}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;background:var(--black);display:grid;place-items:center;padding:24px var(--gutter-r) calc(var(--bar) + 24px) var(--gutter-l)}
.hero-photo{position:absolute;inset:0;z-index:-4;animation:settle 3.2s cubic-bezier(.16,.7,.2,1) both;pointer-events:none;user-select:none;-webkit-user-select:none}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo .soft{opacity:var(--blur,0)}
@keyframes settle{from{transform:scale(1.07)}to{transform:scale(1)}}
#incense{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block;mix-blend-mode:screen;pointer-events:none;opacity:calc(1 - var(--p,0) * 1.4)}
.hero-shade{position:absolute;inset:0;z-index:-3;pointer-events:none;background:
  radial-gradient(58% 44% at 50% 50%,rgba(0,0,0,.66) 0%,rgba(0,0,0,.3) 60%,rgba(0,0,0,0) 100%),
  linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 72%,rgba(0,0,0,.92) 100%)}
.hero-dark{position:absolute;inset:0;z-index:-1;background:var(--black);opacity:calc(var(--p,0) * .7);pointer-events:none}
.hero-in{display:grid;justify-items:center;text-align:center;gap:clamp(18px,2.6vh,28px);transform:translateY(calc(var(--p,0) * -80px));opacity:calc(1 - var(--p,0) * 1.5)}
.hero h1{color:var(--white);opacity:.82;padding-left:.32em}
.hero-quote{margin:0}
.hero-quote p{display:grid;gap:.12em}
.hero-quote span{display:block;font-size:clamp(28px,3.3vw,54px);line-height:1.38;letter-spacing:.32em;padding-left:.32em}
.hero-attr{font-size:clamp(18px,1.35vw,21px);color:var(--text)}
.hero-attr i{font-style:normal}
.hero-ru{color:var(--faint);padding-left:.32em}
.hero .frame{margin-top:clamp(6px,2vh,22px);padding-left:.32em}
.hero .frame:hover{padding-left:.42em}
.hero .tr{animation:trackin 1.9s cubic-bezier(.2,.7,.1,1) both}
.hero .tr.d1{animation-delay:.15s}.hero .tr.d2{animation-delay:.3s}
.hero .fd{animation:fadein 1.4s ease both}
.hero .fd.d3{animation-delay:.7s}.hero .fd.d4{animation-delay:.95s}
@keyframes trackin{from{letter-spacing:.85em;padding-left:.85em;opacity:.3}to{letter-spacing:.32em;padding-left:.32em;opacity:1}}
@keyframes fadein{from{opacity:.25}to{opacity:1}}

/* ---------- who we are | scripture reading series ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--black);border-top:1px solid var(--rule)}
.half{position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:center;padding:clamp(96px,13vh,150px) var(--gutter-r) clamp(96px,13vh,150px) var(--gutter-l)}
.half + .half{border-left:1px solid var(--rule)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w-title{font-size:22px}
.half-in{width:100%;max-width:540px;margin-inline:auto;display:grid;gap:26px}
.half-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;user-select:none;-webkit-user-select:none}
.half-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.5}
.half-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.9) 100%)}
.week{margin:6px 0 0;display:grid}
.week > div{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:16px;padding-block:16px;background:var(--hair) left top/100% 1px no-repeat}
.week > div:first-child{background-image:var(--lead)}
.week > div:last-child{background:var(--hair) left top/100% 1px no-repeat,var(--hair) left bottom/100% 1px no-repeat}
.week dt{color:var(--dim);padding-top:4px}
.week dd{margin:0}
.week b{display:block;font-weight:400;color:var(--white);letter-spacing:.02em}
.week span{display:block;color:var(--dim);font-size:15.5px;line-height:1.65}
.week span span{display:inline}
.reading{display:grid;gap:10px;padding-block:24px;background:var(--lead) left top/100% 1px no-repeat,var(--hair) left bottom/100% 1px no-repeat}
.reading .display{font-size:clamp(22px,2vw,30px);line-height:1.3}
.reading .it{font-size:20px;line-height:1.35;color:var(--dim)}
.label{color:var(--dim)}
.fathers{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.fathers li{display:grid;gap:0}
.fathers .caps{color:var(--white)}
.fathers .it{font-size:17.5px;line-height:1.4;color:var(--dim)}
.epigraph{margin:0;display:grid;gap:8px}
.epigraph p{font-size:clamp(20px,1.55vw,23px);line-height:1.4;color:var(--white)}
.epigraph cite{font-style:normal;color:var(--dim)}
.acts{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.next{color:var(--dim)}
@media (max-width:960px){
  .split{grid-template-columns:minmax(0,1fr)}
  .half{min-height:0}
  .half + .half{border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:520px){.week > div{grid-template-columns:minmax(0,1fr);gap:4px}}

/* ---------- the orthodox church ---------- */
.church{position:relative;background:var(--black);border-top:1px solid var(--rule);overflow-x:clip}
.church-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,110px);align-items:center;min-height:100svh;max-width:1360px;margin:0 auto;padding:clamp(96px,13vh,150px) var(--gutter-r) clamp(80px,10vh,120px) var(--gutter-l)}
.church-text{display:grid;gap:26px}
.quotes{position:relative;isolation:isolate;padding:clamp(40px,5vw,84px) clamp(4px,4vw,72px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vh,44px);text-align:center}
.quotes::before{content:"";position:absolute;inset:-6% -10%;z-index:-1;background:url("../img/candles-blur.jpg") center/cover no-repeat;opacity:.42;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent 100%);mask:radial-gradient(closest-side,#000 30%,transparent 100%)}
.q-stage{display:grid}
.q{grid-area:1/1;margin:0;display:grid;gap:22px;align-content:center;justify-items:center;opacity:0;visibility:hidden;filter:blur(6px);transition:opacity .9s ease,filter .9s ease,visibility 0s .9s}
.q.on{opacity:1;visibility:visible;filter:none;transition:opacity .9s ease,filter .9s ease,visibility 0s}
.q blockquote{margin:0}
.q blockquote p{font-family:"Cormorant Garamond","Cormorant",Garamond,Georgia,serif;font-weight:500;font-size:clamp(31px,3vw,50px);line-height:1.18;color:var(--white);text-wrap:balance;max-width:18em}
.q figcaption{display:grid;gap:4px;justify-items:center}
.q figcaption .caps{color:var(--white);padding-left:.32em}
.q figcaption .it{font-size:17.5px;color:var(--dim)}
.q-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px}
.q-nav button{background:none;border:0;padding:8px 4px;cursor:pointer;color:var(--dim)}
.q-nav button:hover{color:var(--white)}
.q-marks{display:flex;gap:6px}
.q-marks button{position:relative;width:26px;height:20px;padding:0;border:0;background:transparent;cursor:pointer}
.q-marks button::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.26);transition:background-color .35s ease}
.q-marks button:hover::before{background:rgba(255,255,255,.6)}
.q-marks button[aria-current="true"]::before{background:var(--white)}
.q-count{font-variant-numeric:tabular-nums;color:var(--dim)}
@media (max-width:520px){.q-marks{order:-1;flex-basis:100%;justify-content:center}}

.res{max-width:1360px;margin:0 auto;padding:clamp(40px,6vh,80px) var(--gutter-r) clamp(110px,14vh,160px) var(--gutter-l)}
.res-head{display:grid;gap:14px;margin-bottom:clamp(36px,5vw,64px)}
.res-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.res-col{display:grid;gap:18px;align-content:start;padding-top:22px;background:var(--lead) left top/100% 1px no-repeat}
.res-col h3{color:var(--white)}
.res-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.res-list li{display:grid;gap:2px}
.res-list a{color:var(--white);font-weight:400;letter-spacing:.02em}
.res-list .it{font-size:16.5px;color:var(--dim);line-height:1.45}
.books .it{font-size:20.5px;line-height:1.3;color:var(--white)}
.books .res-list .caps{color:var(--dim)}
@media (max-width:960px){.church-top{grid-template-columns:minmax(0,1fr);min-height:0}.res-cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- about footer ---------- */
.foot{position:relative;border-top:1px solid var(--rule);background:var(--black);min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:clamp(80px,10vh,120px) var(--gutter-r) calc(var(--bar) + 28px + env(safe-area-inset-bottom,0px)) var(--gutter-l)}
.foot-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4.4fr) minmax(0,4fr);gap:clamp(28px,4vw,64px);align-items:center;max-width:1360px;width:100%;margin:0 auto}
.about{display:grid;gap:22px}
.about .h2{font-size:clamp(20px,1.7vw,26px)}
.about .week{margin:0}
.cross-col{display:grid;gap:18px;justify-items:center;text-align:center}
.cross-wrap{position:relative;width:100%;height:min(70svh,700px);pointer-events:none;user-select:none;-webkit-user-select:none}
#cross{position:absolute;inset:0;width:100%;height:100%;display:block}
.cross-col .it{font-size:19px;line-height:1.4;color:var(--dim);max-width:22em}
.cross-col .caps{color:var(--faint)}
.parishes{display:grid;gap:30px}
.parish{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;align-items:start}
.logo{display:flex;justify-content:center;padding-top:2px;transition:opacity .25s}
.logo:hover{opacity:.82}
.logo img{display:block;height:auto}
.logo-goa img{width:72px}
.logo-oca img{width:48px}
.parish h3{font-weight:400;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--white);line-height:1.5}
.parish .it{font-size:16px;color:var(--dim);line-height:1.45;margin-top:2px}
.parish dl{margin:10px 0 0;display:grid;gap:2px;font-size:15.5px;line-height:1.6}
.parish dl div{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:10px}
.parish dt{color:var(--dim)}
.parish dd{margin:0}
.parish .links{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:15px}
.foot-base{max-width:1360px;width:100%;margin:clamp(48px,6vh,72px) auto 0;padding-top:22px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:baseline;gap:10px 32px;flex-wrap:wrap}
.foot-base .it{font-size:19.5px;color:var(--white)}
.foot-base .it span{color:var(--dim)}
.foot-base .fine{font-size:13px;color:var(--faint)}
.foot-base .fine a{color:var(--dim)}
@media (max-width:1100px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cross-col{grid-column:1/-1;order:-1}.cross-wrap{height:min(66svh,620px);max-width:560px}}
@media (max-width:720px){.foot-grid{grid-template-columns:minmax(0,1fr)}.cross-wrap{height:min(60svh,520px)}}

/* ---------- write dialog ---------- */
dialog.write{background:var(--black);color:var(--text);border:1px solid var(--rule);padding:clamp(24px,4vw,44px);width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 40px);overflow:auto}
dialog.write::backdrop{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.w-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.w-close{background:none;border:0;cursor:pointer;color:var(--dim);padding:6px 0}
.w-close:hover{color:var(--white)}
.write .sub{margin-bottom:24px}
form{display:grid;gap:22px}
.field{display:grid;gap:6px;min-width:0}
.field label,.legend-t{color:var(--dim)}
.field input,.field textarea{width:100%;font:inherit;font-size:17px;color:var(--white);background:transparent;border:0;border-bottom:1px solid var(--dash);border-radius:0;padding:8px 0}
.field textarea{min-height:96px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--white)}
fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip label{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--dash);cursor:pointer;font-size:15px;transition:background-color .2s,color .2s,border-color .2s}
.chip input:checked + label{background:var(--white);color:var(--black);border-color:var(--white)}
.chip input:focus-visible + label{outline:1px solid var(--white);outline-offset:3px}
.form-err{color:var(--gold);font-family:var(--script);font-style:italic;font-weight:400;font-size:17px}
.note-out{display:grid;gap:14px}
.note-text{margin:0;padding:14px 16px;white-space:pre-wrap;word-break:break-word;font-family:var(--sans);font-size:15.5px;line-height:1.6;border:1px solid var(--rule);max-height:260px;overflow:auto}
.sel{user-select:all;-webkit-user-select:all;color:var(--white)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}