/* Father's Tool Box, v4.
   A missal on limestone: lapis for the hand of the illuminator, vermilion only for rubrics,
   gold leaf for what is holy. One typeface, EB Garamond, used the way a printer would:
   small capitals for labels, versal initials, old-style figures. */

@font-face{font-family:"EB Garamond";src:url("/fonts/eb-garamond-latin-wght-normal.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/fonts/eb-garamond-latin-wght-italic.woff2") format("woff2");font-weight:400 800;font-style:italic;font-display:swap}

:root{
  --stone:#ebe7de;        /* nave limestone: the page */
  --stone-deep:#dfd9cc;   /* shadowed stone: alternate bands */
  --vellum:#f8f5ee;       /* lit surfaces: forms, cards */
  --ink:#231f1c;          /* iron-gall ink */
  --ink-soft:#544b43;
  --lapis:#1e3a6e;        /* ultramarine: the primary accent */
  --lapis-deep:#152a52;
  --rubric:#b3261e;       /* vermilion, used for rubrics only */
  --gold:#b8913a;         /* gold leaf */
  --gold-lit:#e8c877;
  --violet:#5b3b7a;--green:#2f6b3f;--white:#efe6cf;--red:#b3261e;
  --season:var(--green);
  --serif:"EB Garamond",Garamond,"Times New Roman",serif;
  --wrap:1160px;
  --measure:34em;
}
html[data-season=violet]{--season:var(--violet)}
html[data-season=white]{--season:var(--gold)}
html[data-season=red]{--season:var(--red)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--serif);font-size:1.25rem;line-height:1.6;font-variant-numeric:oldstyle-nums;font-feature-settings:"liga","dlig" 0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
p{margin:0 0 1em}
h1,h2,h3{font-weight:500;line-height:1.08;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:inherit;font-weight:inherit}
::selection{background:var(--lapis);color:var(--vellum)}
:focus-visible{outline:2px solid var(--lapis);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 3rem);margin-inline:auto}

/* Labels are rubrics: red, in small capitals, the way a missal marks what comes next. */
.rubric{margin:0;color:var(--rubric);font-variant-caps:all-small-caps;font-size:1.05rem;letter-spacing:.09em;font-weight:500}
.cite,cite{font-style:normal;font-variant-caps:all-small-caps;letter-spacing:.09em;font-size:1rem;color:var(--rubric)}

/* Versal initial: the first letter of each page headline, as an illuminator would mark it */
.hero h1::first-letter,.page-head h1::first-letter,.contact-grid h1::first-letter{color:var(--lapis);font-weight:600}

/* Top band */
.topband{background:var(--lapis-deep);color:#cfd6e6;font-size:1rem}
.topband .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.45rem}
.topband em{font-style:italic;color:var(--gold-lit)}
.season-now{display:inline-flex;align-items:center;gap:.55rem;font-variant-caps:all-small-caps;letter-spacing:.08em;font-size:1.05rem}
.season-now::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--season);box-shadow:0 0 0 2px var(--lapis-deep),0 0 0 3px var(--gold-lit)}

/* Header */
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.3rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;font-size:1.45rem;font-weight:500;font-variant-caps:small-caps;letter-spacing:.06em;white-space:nowrap}
.brand svg{width:28px;height:36px;flex:none}
nav ul{list-style:none;display:flex;gap:2rem;margin:0;padding:0}
nav a{text-decoration:none;font-size:1.15rem;font-variant-caps:all-small-caps;letter-spacing:.1em;padding:.3rem 0;border-bottom:1px solid transparent}
nav a:hover{color:var(--lapis);border-bottom-color:currentColor}
nav a[aria-current=page]{color:var(--lapis);border-bottom:2px solid var(--gold)}

/* Buttons */
.btn{display:inline-flex;align-items:center;font-family:var(--serif);font-size:1.15rem;font-variant-caps:all-small-caps;letter-spacing:.1em;text-decoration:none;padding:.85rem 1.6rem 1rem;border:1px solid var(--ink);border-radius:2px;background:none;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:var(--vellum)}
.btn-red{background:var(--lapis);border-color:var(--lapis);color:var(--vellum)}
.btn-red:hover{background:var(--lapis-deep);border-color:var(--lapis-deep)}
.btn-paper{background:var(--vellum);border-color:var(--vellum);color:var(--lapis-deep)}
.btn-paper:hover{background:var(--gold-lit);border-color:var(--gold-lit);color:var(--ink)}
.btn-plain{border:0;padding-inline:0;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.3em}
.btn-plain:hover{background:none;color:var(--lapis)}

/* Hero: the window is the one memorable thing; everything else stays quiet */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,6rem);align-items:end;padding-block:clamp(2.5rem,6vw,5rem) 0}
.hero .wrap>div{padding-bottom:clamp(2.5rem,6vw,5.5rem)}
.hero h1{font-size:clamp(3rem,6.4vw,5.75rem);margin-top:1.25rem;line-height:.98;letter-spacing:-.02em}
.lede{font-size:clamp(1.25rem,1.55vw,1.42rem);color:var(--ink-soft);max-width:var(--measure);margin-top:1.6rem}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem;margin-top:2.2rem}
.window{margin:0;justify-self:end;width:100%;max-width:430px;position:relative}
.window svg{width:100%;height:auto}
.window figcaption{font-style:italic;font-size:1.05rem;color:var(--ink-soft);text-align:center;padding:1.1rem 0 1.4rem}
.hero{border-bottom:1px solid var(--stone-deep);background:linear-gradient(to bottom,var(--stone),var(--stone) 70%,var(--stone-deep))}

/* The single orchestrated moment: on load, light passes through the window once. */
@media (prefers-reduced-motion:no-preference){
  .window svg{animation:kindle 2.4s cubic-bezier(.3,.6,.2,1) both}
  .window::after{content:"";position:absolute;inset:0 0 3.5rem;background:radial-gradient(60% 45% at 50% 32%,rgba(255,236,190,.55),transparent 70%);mix-blend-mode:soft-light;animation:dawn 3.2s ease-out .4s both;pointer-events:none}
  @keyframes kindle{from{filter:brightness(.35) saturate(.4)}to{filter:none}}
  @keyframes dawn{0%{opacity:0}45%{opacity:1}100%{opacity:.35}}
}

/* Scripture */
.scripture .wrap{padding-block:clamp(3.5rem,7vw,5.5rem);text-align:center;max-width:46rem}
.scripture blockquote{margin:1.2rem 0 0;font-style:italic;font-size:clamp(1.65rem,3vw,2.4rem);line-height:1.3;text-wrap:balance;color:var(--lapis-deep)}
.scripture cite{display:block;margin-top:1.1rem}
.fleuron{width:64px;height:16px;margin:0 auto;color:var(--gold)}

/* Sections */
section.block{padding-block:clamp(4rem,8vw,6.5rem)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem clamp(2rem,5vw,5rem);align-items:end;margin-bottom:clamp(2.25rem,4.5vw,3.75rem)}
.head h2{font-size:clamp(2.2rem,4.2vw,3.5rem);margin-top:.6rem}
.head>p{color:var(--ink-soft);margin:0;max-width:var(--measure)}
.tinted{background:var(--stone-deep)}

/* Services: three columns on a vellum leaf, separated by gold rules, no numbering (not a sequence) */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--vellum);border-radius:3px;box-shadow:0 1px 0 var(--stone-deep),0 18px 40px -28px rgba(35,31,28,.45)}
.service{padding:2.2rem clamp(1.4rem,2.5vw,2.2rem) 2.2rem}
.service+.service{border-left:1px solid #e3dccb}
.service .num svg{width:32px;height:32px;color:var(--lapis)}
.service .num svg [stroke="#a3231c"]{stroke:var(--gold)}
.service h3{font-size:1.75rem;margin:1.2rem 0 .7rem}
.service p{color:var(--ink-soft);font-size:1.13rem;margin:0}
.service ul{list-style:none;margin:1.3rem 0 0;padding:0;font-size:1.06rem;color:var(--ink-soft)}
.service li{padding:.4rem 0 .4rem 1.25rem;position:relative}
.service li::before{content:"\2720";position:absolute;left:0;top:.48rem;font-size:.72rem;color:var(--rubric)}

/* The liturgical year: a to-scale band, then the seasons */
.yearbar{position:relative;display:flex;height:14px;border-radius:7px;overflow:visible;margin:0 0 2.6rem;box-shadow:inset 0 0 0 1px rgba(35,31,28,.15)}
.yearbar .seg{height:100%;display:block}
.yearbar .seg:first-child{border-radius:7px 0 0 7px}.yearbar .seg:nth-last-child(2){border-radius:0 7px 7px 0}
.seg-violet{background:var(--violet)}.seg-green{background:var(--green)}.seg-white{background:var(--white)}
.seg-tri{background:linear-gradient(90deg,var(--white) 0 33%,var(--red) 33% 66%,var(--white) 66%)}
.yearbar .today{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--ink)}
.yearbar .today b{position:absolute;top:100%;left:0;margin-top:.35rem;white-space:nowrap;font-weight:500;font-size:1rem;font-variant-caps:all-small-caps;letter-spacing:.08em;color:var(--ink)}
.yearbar .today.flip b{left:auto;right:0}
.year{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin:0;padding:0}
.year li{list-style:none;padding:1.1rem 1rem 0 0;border-top:3px solid var(--c)}
.year li+li{padding-left:1rem;border-left:1px solid rgba(35,31,28,.12)}
.year li[data-season-key="Christmas"],.year li[data-season-key="Easter"]{border-top-color:var(--gold)}
.year h3{font-size:1.38rem}
.year .col{font-style:italic;font-size:1rem;color:var(--ink-soft);margin:.2rem 0 .55rem}
.year p{font-size:1.02rem;color:var(--ink-soft);margin:0;line-height:1.45}
.year li.now h3{color:var(--lapis)}
.year li.now .col::after{content:", now";color:var(--rubric);font-style:normal}
.year-note{margin:2rem 0 0;font-style:italic;font-size:1.05rem;color:var(--ink-soft);max-width:var(--measure)}

/* How we work: a deep lapis vault. This is a real sequence, so it keeps its numerals. */
.night{background:var(--lapis-deep);color:var(--vellum);position:relative}
.night .rubric{color:var(--gold-lit)}
.night .head>p{color:#c3cbdc}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(1.25rem,2.5vw,2.25rem)}
.steps li{position:relative;padding-top:1.4rem;border-top:1px solid rgba(232,200,119,.4)}
.steps .roman{font-size:3.4rem;line-height:1;color:var(--gold-lit);font-weight:400;display:block;margin-bottom:.9rem;font-variant-numeric:normal}
.steps h3{font-size:1.7rem}
.steps .sub{font-variant-caps:all-small-caps;letter-spacing:.09em;font-size:1.02rem;color:var(--gold-lit);margin:.3rem 0 .8rem}
.steps p{color:#d4dae6;font-size:1.1rem;margin:0}
.steps blockquote{margin:1.3rem 0 0;font-style:italic;font-size:1.06rem;line-height:1.45;color:#eef0f5}
.steps blockquote .cite{display:block;color:var(--gold-lit);margin-top:.35rem}

/* Call: a quiet vellum close, framed like a holy card */
.call{text-align:center;padding:clamp(1.5rem,4vw,3rem) 0}
.call .wrap{position:relative;background:var(--vellum);padding:clamp(3.5rem,7vw,5.5rem) clamp(1.5rem,4vw,3rem);border-radius:3px;box-shadow:inset 0 0 0 6px var(--vellum),inset 0 0 0 7px var(--gold)}
.call .cross{width:22px;height:29px;margin:0 auto 1.3rem;color:var(--rubric)}
.call h2{font-size:clamp(2.3rem,4.8vw,3.9rem)}
.call p{max-width:32rem;margin:1.1rem auto 2.1rem;color:var(--ink-soft)}
.call .btn-paper{background:var(--lapis);border-color:var(--lapis);color:var(--vellum)}
.call .btn-paper:hover{background:var(--lapis-deep)}

/* Page heads */
.page-head .wrap{padding-block:clamp(3rem,7vw,5rem) clamp(2.5rem,5vw,3.5rem)}
.page-head h1{font-size:clamp(2.8rem,6vw,5rem);margin-top:1rem;max-width:16ch;letter-spacing:-.02em;line-height:1}
.page-head .lede{max-width:var(--measure)}

/* About */
.prose-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2.5rem,6vw,6rem);align-items:start;padding-bottom:clamp(4rem,8vw,6.5rem)}
.prose{font-size:1.32rem;line-height:1.62;max-width:var(--measure)}
.prose p:first-child::first-letter{float:left;font-size:4.9rem;line-height:.8;padding:.07em .09em 0 0;color:var(--lapis);font-weight:500}
.verse{margin:0;background:var(--lapis-deep);color:var(--vellum);border-radius:3px;padding:clamp(2rem,4vw,3rem) clamp(1.6rem,3vw,2.5rem);text-align:center;box-shadow:inset 0 0 0 6px var(--lapis-deep),inset 0 0 0 7px var(--gold)}
.verse div{padding:0}
.verse svg{width:20px;height:26px;margin:0 auto 1.2rem;color:var(--gold-lit)}
.verse blockquote{margin:0;font-style:italic;font-size:clamp(1.55rem,2.5vw,2.05rem);line-height:1.28}
.verse cite{display:block;margin-top:1.2rem;color:var(--gold-lit)}
.witness{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.witness article{background:var(--vellum);border-radius:3px;padding:clamp(1.8rem,3.5vw,2.6rem)}
.witness .tag{font-variant-caps:all-small-caps;letter-spacing:.09em;font-size:1.02rem;color:var(--rubric)}
.witness h3{font-size:2rem;margin:.4rem 0 .9rem;color:var(--lapis-deep)}
.witness h3 i{font-weight:500}
.witness p{font-size:1.14rem;color:var(--ink-soft);margin:0 0 .85rem}
.witness p:last-child{margin:0}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,6rem);align-items:start;padding-block:clamp(3rem,7vw,5rem) clamp(4rem,8vw,6.5rem)}
.contact-grid h1{font-size:clamp(2.8rem,5.4vw,4.6rem);margin-top:1rem;letter-spacing:-.02em;line-height:1}
.notes{list-style:none;margin:2.2rem 0 0;padding:0}
.notes li{padding:.7rem 0;display:flex;gap:1rem;font-size:1.15rem;color:var(--ink-soft);border-bottom:1px solid var(--stone-deep)}
.notes li span{font-style:italic;color:var(--rubric);min-width:1.6rem}
.contact-verse{margin:2.2rem 0 0;padding:0 0 0 1.25rem;border-left:3px solid var(--gold)}
.contact-verse blockquote{margin:0;font-style:italic;font-size:1.3rem;line-height:1.38;color:var(--lapis-deep)}
.contact-verse .cite{display:block;margin-top:.4rem}
form{background:var(--vellum);border-radius:3px;padding:clamp(1.6rem,4vw,2.8rem);display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.6rem;box-shadow:0 18px 40px -28px rgba(35,31,28,.45)}
.field{display:flex;flex-direction:column;gap:.2rem}
.full{grid-column:1/-1}
label{font-variant-caps:all-small-caps;letter-spacing:.08em;font-size:1.05rem;color:var(--ink-soft)}
label i{font-variant-caps:normal;letter-spacing:0;font-size:.95rem;opacity:.8}
input,textarea,select{font:inherit;font-size:1.22rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid #bfb6a4;border-radius:0;padding:.3rem 0 .45rem;width:100%}
select{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231e3a6e' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .2rem center;padding-right:1.6rem}
textarea{min-height:8.5rem;resize:vertical;line-height:1.45}
input:focus,textarea:focus,select:focus{outline:none;border-bottom-color:var(--lapis);box-shadow:0 1px 0 var(--lapis)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.form-status{margin:0;font-style:italic;font-size:1.1rem;color:var(--ink-soft)}
.form-status.ok{color:var(--green)}
.form-status.err{color:var(--rubric)}

/* Footer */
footer{background:var(--stone-deep)}
footer .wrap{padding-block:2.6rem 2.2rem}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;padding-bottom:1.6rem;border-bottom:1px solid rgba(35,31,28,.15)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem;padding-top:1.2rem;font-size:1.02rem;color:var(--ink-soft)}
.foot-bottom em{color:var(--lapis)}
.foot-prayer{margin:0;padding-top:.6rem;font-style:italic;font-size:1.02rem;color:var(--ink-soft)}

@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr;align-items:start}
  .window{justify-self:center;max-width:340px;order:-1}
  .hero .wrap>div{padding-bottom:3rem}
  .window figcaption{padding-bottom:0}
  .head,.prose-grid,.contact-grid,.witness{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .service+.service{border-left:0;border-top:1px solid #e3dccb}
  .steps{grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem}
  .year{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 0}
  .year li:nth-child(odd){padding-left:0;border-left:0}
  .year li:last-child{grid-column:1/-1}
}
@media (max-width:560px){
  body{font-size:1.15rem}
  .wrap{width:calc(100% - 2.5rem)}
  .site-header .wrap{flex-direction:column;gap:.6rem;padding-block:1rem}
  .topband .wrap{justify-content:center}
  .topband em{display:none}
  .window{max-width:270px}
  .steps{grid-template-columns:1fr;gap:2.4rem}
  .year{grid-template-columns:1fr;gap:1.4rem}
  .year li,.year li+li{padding-left:0;border-left:0}
  .prose{font-size:1.2rem}
  form{grid-template-columns:1fr}
  .call{padding-inline:0}
  .call .wrap{width:calc(100% - 1.5rem)}
}
.year li[data-season-key="Triduum"]{border-top-color:transparent;background:linear-gradient(90deg,var(--white) 50%,var(--red) 50%) top left/100% 3px no-repeat;background-origin:border-box}