/* Brand typefaces: Cinzel and EB Garamond, self-hosted (SIL Open Font License) */
@font-face{ font-family:"Cinzel"; src:url("fonts/cinzel-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"EB Garamond"; src:url("fonts/eb-garamond-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"EB Garamond"; src:url("fonts/eb-garamond-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
:root{
  --vellum:#E6DFCE; --vellum-light:#F7F3E9; --pitch:#14120F; --pitch-soft:#5A5248; --rubric:#7E2B22;
  --line:rgba(20,18,15,.16);
  --display:"Requiem Display","Cinzel",Georgia,serif;
  --text:"Lyon Text","EB Garamond",Georgia,serif;
  --wm:clamp(1.9rem, 6.2vw, 3.2rem);
  box-sizing:border-box;
}
*,*::before,*::after{ box-sizing:inherit; }
html{ background:var(--vellum-light); scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }
body{
  margin:0; background:var(--vellum-light); color:var(--pitch);
  font-family:var(--text); font-size:clamp(1.125rem, 1.04rem + .35vw, 1.3rem); line-height:1.62;
  font-feature-settings:"kern","liga","onum"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--rubric); outline-offset:4px; border-radius:2px; }
.wrap{ max-width:66rem; margin:0 auto; padding:0 clamp(1.5rem, 6vw, 3.5rem); }
.skip{ position:absolute; left:-999px; top:0; background:var(--pitch); color:var(--vellum-light); padding:.5rem 1rem; z-index:30; }
.skip:focus{ left:1rem; top:1rem; }
.text-link{ color:var(--rubric); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; }
.text-link:hover{ border-bottom-width:2px; }

/* ===== header ===== */
.site-head{ position:relative; z-index:10; }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.25rem; padding-bottom:1.25rem; max-width:none; }
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; font-family:var(--display); font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; }
.brand svg{ width:1.9rem; height:1.9rem; fill:currentColor; flex:none; }
.nav{ display:flex; gap:clamp(1.25rem, 3vw, 2.25rem); }
.nav a{ text-decoration:none; font-size:1rem; padding:.2rem 0; border-bottom:1px solid transparent; }
.nav a:hover,.nav a[aria-current="page"]{ border-bottom-color:currentColor; }
.head-over{ position:absolute; top:0; left:0; right:0; color:var(--vellum-light); }
.head-over .brand{ opacity:0; pointer-events:none; } /* the lockup below does this job on the home page */
@media (max-width:34rem){ .brand span{ display:none; } }

/* ===== home: first screen ===== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  background:var(--pitch); color:var(--vellum-light);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:5.5rem 1.5rem 2rem;
}
.hero .ghost{ position:absolute; inset:0; z-index:-2; background:url("img/stann-after.jpg") center 55% / cover no-repeat; opacity:.55; filter:saturate(.6); }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 50% 42%, rgba(20,18,15,.5) 0%, rgba(20,18,15,.78) 75%); }
@media (max-width:40rem){ .hero .ghost{ opacity:.6; } }
.hero .mark{ margin-top:auto; }
.hero .down{ margin-top:auto; }
.mark{ display:block; width:calc(var(--wm) * 3.5); height:auto; fill:currentColor; }
.wm{ font-family:var(--display); font-weight:400; font-size:var(--wm); line-height:1.05; letter-spacing:.16em; text-transform:uppercase; margin:0; }
.wm span{ display:inline-block; padding-left:.16em; }
.trade{ margin:1rem 0 0; font-size:.98em; letter-spacing:.02em; opacity:.82; }
.rule{ width:2.75rem; border:0; border-top:1px solid currentColor; opacity:.7; margin:clamp(2rem, 5.5vh, 2.75rem) auto; }
.promise{ font-family:var(--display); font-size:clamp(1.5rem, 1.1rem + 2vw, 2.4rem); letter-spacing:.05em; line-height:1.25; margin:0; }
.down{ display:block; padding:1rem; line-height:0; }
.down svg{ width:15px; height:15px; fill:#B4483B; transition:transform 200ms ease; }
.down:hover svg{ transform:translateY(3px); }
@media (prefers-reduced-motion:no-preference){
  .rise{ opacity:0; transform:translateY(8px); animation:rise 1.1s cubic-bezier(.22,.61,.36,1) forwards; }
  .d1{ animation-delay:.1s } .d2{ animation-delay:.4s } .d3{ animation-delay:.7s } .d4{ animation-delay:1.05s } .d5{ animation-delay:1.6s }
  @keyframes rise{ to{ opacity:1; transform:none; } }
}

/* the map: the seven lines, now below the first screen */
.map{ text-align:center; padding:clamp(5.5rem, 16vh, 10rem) 0; }
.map-rule{ width:2.5rem; border:0; border-top:1px solid var(--pitch); margin:clamp(2rem, 5vh, 2.75rem) auto; }
.standard{ font-family:var(--display); font-size:clamp(1.8rem, 1.1rem + 3vw, 3.3rem); letter-spacing:.04em; line-height:1.22; margin:0; }
.attributes{ list-style:none; margin:0; padding:0; line-height:2.1; }
.attributes a{ text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px; transition:border-color 160ms ease; }
.attributes a:hover{ border-bottom-color:var(--rubric); }

/* ===== sections ===== */
.line{ position:relative; padding:clamp(5rem, 14vh, 9rem) 0; }
h1.title,.line h2{ font-family:var(--display); font-weight:400; font-size:clamp(1.65rem, 1.15rem + 2.3vw, 2.75rem); line-height:1.15; letter-spacing:.035em; margin:0 0 2rem; max-width:16em; }
.body{ max-width:32em; }
.body p{ margin:0 0 1.1em; }
.body p:last-child{ margin-bottom:0; }
.lead{ font-family:var(--display); font-size:clamp(1.15rem, .95rem + .8vw, 1.45rem); letter-spacing:.03em; line-height:1.45; margin:0 0 1.5rem; max-width:30em; }
.close{ font-family:var(--display); letter-spacing:.03em; font-size:1.12em; line-height:1.4; }
.field{ background:var(--vellum); }

.trio{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2rem clamp(1.5rem, 4vw, 3rem); margin:0 0 clamp(3rem, 8vh, 4.5rem); border-top:1px solid rgba(20,18,15,.28); padding-top:1.75rem; }
.trio h3{ font-family:var(--display); font-weight:400; letter-spacing:.04em; font-size:1.2em; line-height:1.25; margin:0 0 .6rem; }
.trio p{ margin:0; }
@media (max-width:48rem){ .trio{ grid-template-columns:minmax(0, 1fr); } .trio > div + div{ border-top:1px solid var(--line); padding-top:1.5rem; } }

.night{ background:var(--pitch); color:var(--vellum-light); overflow:hidden; isolation:isolate; }
.night .ghost{ position:absolute; inset:0; z-index:-2; background:url("img/jesuit-forty.jpg") 100% 35% / cover no-repeat; opacity:.5; filter:saturate(.6); }
.night::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(20,18,15,.92) 0%, rgba(20,18,15,.7) 45%, rgba(20,18,15,.15) 100%); }
.night .credit{ position:absolute; right:clamp(1.5rem, 6vw, 3.5rem); bottom:1.25rem; left:clamp(1.5rem, 6vw, 3.5rem); text-align:right; font-size:.76em; color:rgba(247,243,233,.58); margin:0; }
.night .text-link{ color:var(--vellum-light); }
@media (max-width:40rem){ .night::before{ background:linear-gradient(180deg, rgba(20,18,15,.8) 0%, rgba(20,18,15,.7) 60%, rgba(20,18,15,.55) 100%); } .night .ghost{ background-image:url("img/jesuit-aisle.jpg"); background-position:52% 60%; background-size:cover; opacity:.6; } }

/* three photographs from the work */
.plates{ padding:clamp(4rem, 10vh, 6rem) 0 clamp(4rem, 10vh, 6rem); }
.plates .row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(.75rem, 2vw, 1.5rem); }
.plates figure{ margin:0; }
.plates img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.plates figcaption{ font-size:.85em; color:var(--pitch-soft); padding-top:.65rem; line-height:1.4; }
.plates .more{ margin:2rem 0 0; }
@media (max-width:48rem){ .plates .row{ grid-template-columns:minmax(0, 1fr); } .plates img{ aspect-ratio:4/3; } }

.formed{ overflow:hidden; isolation:isolate; }
.deboss{ position:absolute; z-index:-1; right:-6vw; top:50%; transform:translateY(-50%); width:min(62vw, 640px); height:auto; fill:var(--pitch); opacity:.045; }
@media (max-width:40rem){ .deboss{ width:90vw; right:-30vw; opacity:.035; } }

.people-head{ font-family:var(--display); font-weight:400; letter-spacing:.04em; font-size:1.05em; margin:2.75rem 0 0; }
.people{ list-style:none; margin:1rem 0 2.25rem; padding:0; border-top:1px solid var(--line); }
.people li{ display:grid; grid-template-columns:minmax(0, 13rem) minmax(0, 1fr); gap:.2rem 2rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.people .name{ font-family:var(--display); letter-spacing:.04em; }
.people .role{ color:var(--pitch-soft); font-style:italic; }
.people .role em{ display:block; color:var(--pitch); font-style:normal; margin-top:.3rem; max-width:32em; }
@media (max-width:40rem){ .people li{ grid-template-columns:minmax(0, 1fr); } }

.offering{ background:var(--pitch); color:var(--vellum-light); text-align:center; padding:clamp(6rem, 17vh, 11rem) 0; }
.offering h2{ font-family:var(--display); font-weight:400; font-size:clamp(1.65rem, 1.15rem + 2.3vw, 2.75rem); line-height:1.15; letter-spacing:.035em; margin:0 auto 1.25rem; }
.offering .lead{ margin:0 auto 2.25rem; color:rgba(247,243,233,.85); }
.offering .body{ margin:0 auto; max-width:30em; color:rgba(247,243,233,.82); }
.offering .close{ font-size:clamp(1.25rem, 1rem + 1.1vw, 1.7rem); margin:2.75rem auto 0; max-width:20em; }

/* ===== form ===== */
.write{ background:var(--vellum); }
.write h2{ max-width:14em; }
.write .lede{ margin:0; max-width:30em; color:var(--pitch-soft); }
.form{ max-width:40rem; margin-top:2.5rem; }
.form label{ display:block; margin:0 0 .4rem; font-size:.95em; }
.form input,.form textarea{ width:100%; font:inherit; color:var(--pitch); background:#FCFAF4; border:1px solid rgba(20,18,15,.28); border-radius:2px; padding:.7rem .85rem; margin:0 0 1.4rem; }
.form textarea{ min-height:9rem; resize:vertical; line-height:1.5; }
.form input:focus,.form textarea:focus{ outline:2px solid var(--rubric); outline-offset:1px; border-color:transparent; }
.form .pair{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 1.25rem; }
.form .optional{ color:var(--pitch-soft); font-style:italic; }
@media (max-width:40rem){ .form .pair{ grid-template-columns:minmax(0, 1fr); } }
.btn{ font-family:var(--display); font-size:1rem; letter-spacing:.14em; text-transform:uppercase; background:var(--rubric); color:var(--vellum-light); border:0; border-radius:2px; padding:1rem 2.4rem; cursor:pointer; }
.btn:hover{ background:#922f25; }
.btn[disabled]{ opacity:.6; cursor:default; }
.form-status{ margin:1.25rem 0 0; min-height:1.6em; }
.hp{ position:absolute; left:-9999px; }
.direct{ margin-top:2.5rem; color:var(--pitch-soft); }
.direct a{ color:var(--rubric); }

/* ===== inner pages ===== */
.page-head{ padding:clamp(3rem, 9vh, 5.5rem) 0 clamp(2rem, 5vh, 3rem); }
.page-head .body{ color:var(--pitch-soft); }

.project{ padding:clamp(3.5rem, 9vh, 5.5rem) 0; border-top:1px solid var(--line); }
.project h2{ font-family:var(--display); font-weight:400; font-size:clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem); letter-spacing:.035em; line-height:1.2; margin:0; }
.project .where{ color:var(--pitch-soft); margin:.2rem 0 0; }
.project .did{ margin:1rem 0 2rem; max-width:34em; }
.project .lead-img{ margin:0 0 clamp(.75rem, 2vw, 1.25rem); }
.project .lead-img img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.ba{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(.75rem, 2vw, 1.25rem); margin:0 0 clamp(.75rem, 2vw, 1.25rem); }
.ba figure{ margin:0; }
.ba img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.ba figcaption{ font-family:var(--display); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--pitch-soft); padding-top:.55rem; }
.details{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(.75rem, 2vw, 1.25rem); }
.details img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.details.two{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:40rem){ .ba{ grid-template-columns:minmax(0, 1fr); } .details{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

.underway{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); max-width:40rem; }
.underway li{ display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.underway .n{ font-family:var(--display); letter-spacing:.04em; }
.underway .c{ color:var(--pitch-soft); }
.note{ font-size:.92em; color:var(--pitch-soft); max-width:36em; }

.facts{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2rem clamp(1.5rem, 4vw, 3rem); border-top:1px solid rgba(20,18,15,.28); padding-top:1.75rem; margin-top:clamp(3rem, 8vh, 4.5rem); }
.facts h3{ font-family:var(--display); font-weight:400; letter-spacing:.04em; font-size:1.05em; margin:0 0 .5rem; }
.facts p{ margin:0; color:var(--pitch-soft); }
.facts a{ color:var(--rubric); }
@media (max-width:48rem){ .facts{ grid-template-columns:minmax(0, 1fr); } }

/* ===== colophon ===== */
.colophon{ background:var(--vellum-light); text-align:center; padding:clamp(3.5rem, 9vh, 5rem) 1.5rem clamp(2.5rem, 6vh, 3.25rem); border-top:1px solid var(--line); --cwm:clamp(1rem, 2.2vw, 1.25rem); }
.c-mark{ display:block; margin:0 auto calc(var(--cwm) * 3.5 * .11); width:calc(var(--cwm) * 3.5); height:auto; fill:var(--pitch); }
.c-wm{ font-family:var(--display); text-transform:uppercase; font-size:var(--cwm); letter-spacing:.16em; line-height:1; margin:0; }
.c-wm span{ display:inline-block; padding-left:.16em; }
.c-place{ font-family:var(--display); text-transform:uppercase; font-size:.64rem; letter-spacing:.26em; color:var(--pitch-soft); margin:1.25rem 0 0; line-height:2.1; }
.c-place span{ display:block; }
.c-place .yr{ margin-top:.9rem; }
.c-promise{ font-family:var(--display); letter-spacing:.05em; font-size:.82em; color:var(--pitch-soft); margin:1.1rem 0 0; }
.c-contact{ margin:1.6rem 0 0; font-size:.95em; }
.c-contact a{ color:var(--rubric); text-decoration:none; }

/* ===== work: after and before, gallery, list ===== */
.pairs{ margin:0 0 clamp(3.5rem, 9vh, 5rem); }
.pairs .ba{ margin:0; }
.pairs figure{ position:relative; }
.pairs .tag{ position:absolute; left:.75rem; top:.75rem; font-family:var(--display); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--vellum-light); background:rgba(20,18,15,.72); padding:.35rem .6rem .3rem .75rem; }
.pairs .cap{ font-size:.85em; color:var(--pitch-soft); margin:.6rem 0 clamp(2rem, 5vh, 3rem); }
.gallery{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(.75rem, 2vw, 1.25rem); }
@media (max-width:48rem){ .gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.gallery figure{ margin:0; }
.gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.gallery figcaption{ font-size:.8em; color:var(--pitch-soft); padding-top:.45rem; }
.served{ border-top:1px solid var(--line); margin-top:clamp(3.5rem, 9vh, 5rem); padding-top:clamp(2.5rem, 6vh, 3.5rem); }
.served h2{ font-family:var(--display); font-weight:400; font-size:clamp(1.3rem, 1rem + 1.2vw, 1.8rem); letter-spacing:.035em; margin:0 0 1.5rem; }
.served-cols{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 3rem; }
.served ul{ list-style:none; margin:0; padding:0; }
.served li{ padding:.55rem 0; border-bottom:1px solid var(--line); }
.served em{ color:var(--pitch-soft); font-size:.88em; margin-left:.4rem; }
@media (max-width:40rem){ .served-cols{ grid-template-columns:minmax(0, 1fr); } }
.work-end{ padding:clamp(3.5rem, 9vh, 5rem) 0 clamp(4rem, 10vh, 6rem); }

.plates img.pos-top{ object-position:50% 30%; }
.feature{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(.75rem, 2vw, 1.25rem); margin:0 0 clamp(2.5rem, 6vh, 3.5rem); }
.feature figure{ margin:0; }
.feature img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.feature figcaption{ font-size:.85em; color:var(--pitch-soft); padding-top:.6rem; }
@media (max-width:40rem){ .feature{ grid-template-columns:minmax(0, 1fr); } }

/* optical centering: lift the lockup slightly above true center */
.hero .promise{ margin-bottom:7vh; }
/* phones: tighter vertical rhythm between sections */
@media (max-width:40rem){
  .line{ padding:4.5rem 0; }
  .map{ padding:4.75rem 0; }
  .offering{ padding:5.25rem 0; }
  .plates{ padding:3.5rem 0; }
  .trio{ margin-bottom:3rem; }
  .people-head{ margin-top:2.25rem; }
}

/* closing lines after the leadership list */
.after-people .behind{ font-size:1.08em; margin:0 0 2rem; }
.after-people .close{ margin:0; }

/* header always visible on phones, clear of the status bar */
.head-over{ top:env(safe-area-inset-top, 0px); z-index:20; }
@media (max-width:40rem){
  .site-head .wrap{ padding-top:1.1rem; padding-bottom:1.1rem; }
  .nav a{ font-size:1.05rem; }
  .hero{ padding-top:4.75rem; }
  .hero .promise{ margin-bottom:12vh; }
}
#altar .trio{ margin-bottom:0; }
.form .pair.three{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:40rem){ .form .pair.three{ grid-template-columns:minmax(0, 1fr); } }
.form .btn{ margin-top:.6rem; }

/* phones: keep the promise on one line and let spacing, not a rule, separate it */
@media (max-width:40rem){
  .hero .trade{ font-size:min(.86em, 4.2vw); margin-top:.8rem; }
  .hero .rule{ margin:.6rem auto 4.6rem; }
  .hero .promise{ font-size:5.2vw; white-space:nowrap; }
  .hero .wm{ font-size:min(var(--wm), 7.6vw); white-space:nowrap; }
}
figcaption .scope, .cap .scope{ display:block; font-style:italic; color:var(--pitch-soft); opacity:.85; margin-top:.15rem; }
/* gallery: nine photos three across on desktop; phones show the first eight, two across */
@media (max-width:48rem){ .gallery figure:nth-child(n+9){ display:none; } }

/* work page: one rhythm between projects, wherever a caption ends */
:root{ --block:clamp(2.5rem, 4vw, 3.5rem); }
.pairs{ margin-bottom:0; }
.pairs .cap{ margin-bottom:var(--block); }
.feature{ margin-bottom:var(--block); }
@media (max-width:40rem){ .feature{ row-gap:var(--block); } }


/* 404 */
.lost{ overflow:hidden; isolation:isolate; min-height:62vh; display:flex; align-items:center; }
.lost .wrap{ width:100%; }
.lost .lede{ margin:0; max-width:30em; color:var(--pitch-soft); }
.lost-links{ display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; margin-top:2.25rem; }
@media (max-width:48rem){ .plates .row{ row-gap:var(--block); } }

/* Oct 27: Benji's type notes and the office phone */
.attributes{ font-size:clamp(1.2rem, 1rem + .8vw, 1.5rem); line-height:2; }
#altar .lead-text{ font-family:var(--text); letter-spacing:0; font-size:clamp(1.3rem, 1.08rem + .9vw, 1.65rem); line-height:1.4; max-width:24em; }
.close-text{ font-family:var(--text); font-style:italic; letter-spacing:0; font-size:clamp(1.2rem, 1.05rem + .55vw, 1.42rem); line-height:1.45; }
.c-contact a{ white-space:nowrap; }
.c-sep{ display:inline-block; margin:0 .65em; color:var(--pitch-soft); opacity:.6; }
/* leadership starts a new block: more air above it than any gap inside the section */
.people-head{ margin-top:clamp(3.5rem, 7vh, 4rem); }
@media (max-width:40rem){ .people-head{ margin-top:3.25rem; } }