:root{
  --ink:#1A140E;
  --ink-2:#3A3228;
  --mute:#7A7064;
  --gold:#B07A2E;
  --gold-soft:#D4B06A;
  --sign-gold:#D4AF37;
  --paper:#F6F0E6;
  --paper-2:#EDE5D6;
  --cream:#FBF7F0;
  --line:rgba(26,20,14,.1);
  --shadow:0 24px 80px rgba(26,20,14,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.2rem}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif;
  font-size:17px;
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}
a{color:inherit}
body.inner{padding-top:4.4rem}
body.inner nav{
  color:var(--ink);
  background:rgba(246,240,230,.92);
  backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
  text-shadow:none;
}

.kicker{
  font-family:'Outfit',sans-serif;
  text-transform:uppercase;
  letter-spacing:.38em;
  font-size:.68rem;
  font-weight:400;
  color:var(--gold);
}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;letter-spacing:-.02em;line-height:1.08}
.wrap{width:min(1280px, calc(100% - 2.5rem));margin-inline:auto}
.wrap-wide{width:min(1500px, calc(100% - 2rem));margin-inline:auto}

/* nav */
nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem clamp(1.25rem,4vw,3rem);
  color:#fff;
  transition:color .45s, background .45s, border-color .45s, backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  color:var(--ink);
  background:rgba(246,240,230,.9);
  backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
nav .mark{
  letter-spacing:.46em;text-transform:uppercase;font-size:.78rem;font-weight:400;
  text-decoration:none;color:inherit;
}
nav .links a[aria-current="page"]{opacity:1;color:var(--gold)}
nav:not(.scrolled){text-shadow:0 2px 18px rgba(0,0,0,.45)}
.chapter-hero .cap{display:none}
nav .links{display:flex;gap:1.8rem}
nav .links a{
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.62rem;
  opacity:.7;
  transition:opacity .3s;
}
nav .links a:hover,nav .links a:focus-visible{opacity:1}
@media(max-width:700px){
  nav .links{gap:.9rem}
  nav .links a{letter-spacing:.08em;font-size:.58rem}
  #threshold h1{letter-spacing:.16em;text-indent:.16em;font-size:clamp(2.4rem, 12vw, 3.2rem)}
}

/* hero */
#threshold{
  position:relative;
  height:100svh;min-height:620px;
  display:grid;place-items:end center;
  overflow:hidden;
  background:#0C0A08;
  color:#F6F0E6;
}
#plate{
  position:absolute;inset:0;
  background:#0C0A08 url('https://gregolsen.com/wp-content/uploads/2022/10/christian-art-walk-with-me-e1666991129841.jpg') center 30%/cover no-repeat;
  transform:scale(1.06);
  filter:brightness(.98) saturate(1.06);
  animation:wake 3.8s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes wake{
  from{filter:brightness(.42) saturate(.75);transform:scale(1.1)}
  to{filter:brightness(1) saturate(1.08);transform:scale(1)}
}
#threshold::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(12,10,8,.1) 0%, rgba(12,10,8,.02) 42%, rgba(12,10,8,.4) 100%);
}
#threshold .words{
  position:relative;z-index:2;
  text-align:center;
  padding:0 1.5rem 10vh;
  opacity:0;
  animation:rise 1.6s ease .6s forwards;
  text-shadow:0 8px 40px rgba(12,10,8,.45);
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
#threshold h1{
  margin:0;
  font-size:clamp(2.8rem, 8vw, 5.4rem);
  font-weight:300;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
}
#threshold .sub{
  margin:.85rem auto 0;
  max-width:28rem;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(1.15rem, 2vw, 1.55rem);
  line-height:1.35;
  opacity:.92;
  letter-spacing:.01em;
}
.hero-enter{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  margin:1.6rem auto 0;
  padding:.75rem 1.15rem;
  border:1px solid rgba(246,240,230,.5);
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-family:'Outfit',sans-serif;
  font-size:.64rem;
  font-style:normal;
  text-shadow:none;
  transition:background .3s,border-color .3s;
}
.hero-enter:hover,.hero-enter:focus-visible{
  background:rgba(246,240,230,.12);
  border-color:#fff;
}
.hero-enter span{font-size:.9rem;transition:transform .3s}
.hero-enter:hover span,.hero-enter:focus-visible span{transform:translateX(.2rem)}
.rule{width:1px;height:3.2rem;margin:1.4rem auto 0;background:linear-gradient(var(--gold-soft), transparent)}
#hero-credit{
  position:absolute;right:1.4rem;bottom:1.3rem;left:auto;z-index:2;
  text-align:right;
  opacity:1;
}
.study-credit{
  font-family:'Outfit',sans-serif;
  font-style:normal;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.study-credit{
  color:rgba(246,240,230,.76);
  font-size:.6rem;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
}

.frame,
.chapter-hero,
#threshold,
#stage{
  container-type: inline-size;
}
/* painter's signature — scales with the picture, not the window */
.sign{
  font-family:'Italianno',cursive;
  font-style:normal;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--sign-gold);
  background-image:linear-gradient(180deg,#F3E4A4 8%,#D4AF37 48%,#A67C28 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(40,24,8,.72)) drop-shadow(0 1px 2px rgba(0,0,0,.4));
  pointer-events:none;
  line-height:1.5;
  padding:.2em .12em .06em;
  white-space:nowrap;
}
.frame .sign{
  position:absolute;
  right:clamp(.28rem, 1.8cqw, .65rem);
  bottom:clamp(.08rem, 1cqw, .38rem);
  z-index:4;
  font-size:clamp(.72rem, 5.2cqw, 1.2rem);
  padding:.12em .08em 0;
}
.chapter-hero .sign{
  position:absolute;
  right:clamp(.55rem, 1.5cqw, 1.05rem);
  bottom:clamp(.32rem, 1.15cqw, .7rem);
  z-index:4;
  font-size:clamp(1.05rem, 3.3cqw, 1.65rem);
}
#hero-credit.sign{
  font-size:clamp(1.15rem, 2.15cqw, 1.8rem);
}
#work-sign{
  position:absolute;
  right:1.15rem;
  bottom:.85rem;
  z-index:4;
  font-size:clamp(1.05rem, 3.4cqw, 1.7rem);
}
#work-sign[hidden]{display:none}

/* manifesto */
#manifesto{
  padding:clamp(4.5rem, 12vh, 8rem) 1.5rem;
  text-align:center;
}
#manifesto p{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.55rem, 3.4vw, 2.35rem);
  font-weight:300;
  line-height:1.38;
  max-width:38rem;
  margin:1.2rem auto 0;
}
/* the life */
#life{padding:0 0 clamp(4rem, 10vh, 7rem)}
.section-head{text-align:center;padding:0 1.5rem 3.5rem}
.section-head h2{font-size:clamp(2.6rem, 7vw, 4.4rem);margin:.7rem 0 .9rem}
.section-head p{color:var(--ink-2);max-width:32rem;margin:0 auto}
.journey-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:1rem 1.5rem;
  margin-top:1.8rem;
}
.journey-actions .btn{text-decoration:none}
.quiet-link{
  color:var(--mute);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.62rem;
  border-bottom:1px solid transparent;
}
.quiet-link:hover,.quiet-link:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}

#life.home-life{padding-bottom:0}
.home-life .doors{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.7rem;
  margin:0 auto clamp(4.5rem, 10vh, 7rem);
}
.home-life .door{aspect-ratio:3/4}
.home-life .door:last-child:nth-child(odd){
  grid-column:auto;
  aspect-ratio:3/4;
}
.home-life .door .chapter-number{display:none}
.home-life .door .label{padding:2.6rem .9rem .95rem}
.home-life .door .label h3{font-size:clamp(1.2rem, 1.7vw, 1.7rem)}
.chapter-selector{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  width:min(1400px, calc(100% - 2rem));
  margin:0 auto clamp(5rem, 11vh, 8rem);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.chapter-selector a{
  min-height:9.5rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.5rem;
  padding:1.25rem;
  color:var(--ink);
  text-decoration:none;
  transition:background .35s,color .35s;
}
.chapter-selector a + a{border-left:1px solid var(--line)}
.chapter-selector a:hover,.chapter-selector a:focus-visible{
  background:rgba(212,176,106,.11);
  color:var(--gold);
}
.chapter-selector span{
  min-height:2.6em;
  color:var(--mute);
  font-size:.58rem;
  line-height:1.35;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.chapter-selector strong{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight:300;
  line-height:1.05;
}
.home-gallery-head{
  width:min(44rem, calc(100% - 3rem));
  margin:0 auto 2.4rem;
  text-align:center;
}
.home-gallery-head h2{
  margin:.6rem 0 .8rem;
  font-size:clamp(2.5rem, 6vw, 4rem);
}
.home-gallery-head p{max-width:35rem;margin:0 auto;color:var(--ink-2)}
.home-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.35rem 1.1rem;
  width:min(1180px, calc(100% - 2rem));
  margin:0 auto;
  align-items:start;
}
.home-picture{min-width:0}
.home-grid .frame,
.home-grid .frame.wide{
  grid-column:auto;
  aspect-ratio:3/4;
}
.home-grid .frame img{object-position:center 18%}
.home-grid .sign{display:none}
.home-beat{
  margin:.85rem 0 0;
  text-align:center;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:var(--ink-2);
}
@media(max-width:1100px){
  .home-life .doors{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .home-life .door:last-child:nth-child(odd){grid-column:auto;aspect-ratio:3/4}
}
@media(max-width:1000px){
  .chapter-selector{grid-template-columns:repeat(2, 1fr)}
  .chapter-selector a{min-height:7.5rem;border-bottom:1px solid var(--line)}
  .chapter-selector a:nth-child(odd){border-left:0}
  .chapter-selector a:last-child{grid-column:1 / -1;border-bottom:0}
  .home-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media(max-width:700px){
  .chapter-selector{grid-template-columns:1fr}
  .chapter-selector a{min-height:6.5rem;border-left:0!important}
  .chapter-selector a:last-child{grid-column:auto}
  .home-life .doors{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .home-life .door:last-child{grid-column:1 / -1;aspect-ratio:16/10}
  .home-grid{grid-template-columns:repeat(2, minmax(0, 1fr));width:calc(100% - 1.25rem);gap:1.1rem .75rem}
}

.chapter{
  display:grid;
  gap:1.1rem;
  padding:clamp(2.5rem, 7vh, 5rem) 0;
}
.chapter-hero{
  position:relative;
  width:min(1500px, calc(100% - 1.5rem));
  margin:0 auto;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#E8DFD0;
  cursor:pointer;
  border:0;padding:0;
  display:block;
}
.chapter-hero img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.03);
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1), filter .6s;
  filter:saturate(1.05);
}
.chapter-hero:hover img,.chapter-hero:focus-visible img{transform:scale(1)}
.chapter-copy{
  width:min(1100px, calc(100% - 2.5rem));
  margin:1.4rem auto 0;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:1.5rem 3rem;
  align-items:end;
}
.chapter-copy h3{font-size:clamp(2.1rem, 4.5vw, 3.3rem);margin:.45rem 0 0}
.chapter-copy p{color:var(--ink-2);margin:0;max-width:36rem}
.pair{
  width:min(1500px, calc(100% - 1.5rem));
  margin:1.4rem auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
}
.pair .frame{aspect-ratio:4/5}
@media(max-width:820px){
  .chapter-hero{aspect-ratio:4/5;width:calc(100% - 1.25rem)}
  .chapter-copy{grid-template-columns:1fr;gap:.8rem}
  .pair{grid-template-columns:1fr}
}

/* frames */
.frame{
  position:relative;
  display:block;
  width:100%;
  border:0;padding:0;
  background:#E8DFD0;
  cursor:pointer;
  overflow:hidden;
}
.frame img{
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1s ease, transform 1.3s cubic-bezier(.22,.61,.36,1), filter .5s;
  filter:saturate(1.04);
}
.frame img.in{opacity:1;transform:scale(1)}
.frame:hover img,.frame:focus-visible img{transform:scale(1.03);filter:saturate(1.1) brightness(1.03)}
.frame .cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:3rem 1.1rem 1rem;
  background:linear-gradient(transparent, rgba(20,14,8,.78));
  color:#F6F0E6;
  text-align:left;
  opacity:0;
  transition:opacity .4s;
}
.frame:hover .cap,.frame:focus-visible .cap{opacity:1}
.frame .cap .t{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;display:block;padding-right:min(46%, 7.5rem)}
.frame .cap .a{
  display:block;
  margin-top:.25rem;
  font-size:.56rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(246,240,230,.72);
}
/* collection */
#collection{padding:5rem 0 7rem;background:var(--cream)}
.filters{
  position:sticky;top:3.6rem;z-index:30;
  background:rgba(251,247,240,.92);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1rem clamp(1rem,4vw,2rem);
  margin-bottom:2rem;
}
.filter-row{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;justify-content:center}
.chip{
  background:transparent;
  border:1px solid transparent;
  color:var(--mute);
  padding:.4rem .95rem;
  cursor:pointer;
  font-size:.82rem;
  letter-spacing:.04em;
  transition:color .25s, border-color .25s;
}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--gold);border-color:rgba(176,122,46,.45)}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:1rem;
  width:min(1500px, calc(100% - 1.5rem));
  margin:0 auto;
}
body[data-page="wall"] #collection{padding:4.2rem 0 6rem}
body[data-page="wall"] .grid{
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
  gap:.38rem;
  width:min(1680px, calc(100% - 1rem));
}
body[data-page="wall"] .grid .frame.wide{grid-column:span 2;aspect-ratio:16/10}
body[data-page="wall"] .grid .frame.large{
  grid-column:span 2;
  aspect-ratio:4/5;
}
body[data-page="wall"] .frame .cap{padding:2.2rem .7rem .65rem}
body[data-page="wall"] .frame .cap .t{font-size:.95rem;padding-right:min(40%, 4.5rem)}
.wall-seam{
  grid-column:1 / -1;
  scroll-margin-top:8.2rem;
  padding:2.6rem 0 .55rem;
  text-align:center;
}
.wall-seam:first-child{padding-top:.4rem}
.wall-seam h2{
  margin:.35rem 0 0;
  font-size:clamp(1.85rem, 4vw, 2.7rem);
}
.reflection-block[hidden]{display:none}
#wall-count{
  display:block;
  margin-top:1rem;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}
@media(max-width:700px){
  body[data-page="wall"] .grid{
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  }
  body[data-page="wall"] .grid .frame.wide,
  body[data-page="wall"] .grid .frame.large{
    grid-column:span 2;
    aspect-ratio:3/4;
  }
}
@media(max-width:700px){.grid .frame.wide{grid-column:span 1;aspect-ratio:3/4}}

/* artists */
#artists{
  padding:clamp(5rem, 12vh, 8rem) 1.5rem 6rem;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,176,106,.18), transparent 55%),
    var(--paper);
}
#artists .lead{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.7rem, 3.8vw, 2.5rem);
  font-weight:300;
  line-height:1.3;
  max-width:36rem;
  margin:1rem auto 1.6rem;
}
.roster{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.7rem 1.5rem;
  max-width:44rem;
  margin:0 auto 2.6rem;
}
.roster a{
  text-decoration:none;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.roster a:hover,.roster a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.painter-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.15rem;
  max-width:58rem;
  margin:2.2rem auto 0;
  text-align:left;
}
@media(max-width:760px){.painter-list{grid-template-columns:1fr}}
.painter-card{
  padding:1.45rem 1.4rem 1.5rem;
  border:1px solid var(--line);
  background:rgba(251,247,240,.65);
}
.painter-card .known{
  color:var(--gold);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.painter-card h3{
  margin:.35rem 0 .7rem;
  font-size:clamp(1.55rem, 3vw, 1.95rem);
}
.painter-card p{
  color:var(--ink-2);
  font-size:.92rem;
  line-height:1.58;
  margin:0 0 1.05rem;
}
.painter-card a{
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.painter-card a:hover,.painter-card a:focus-visible{border-bottom-color:var(--gold)}
.painter-card .links{
  display:flex;flex-wrap:wrap;gap:.85rem 1.35rem;align-items:center;
}
.invite{
  margin-top:clamp(3.2rem, 8vh, 5.2rem);
  padding-top:3rem;
  border-top:1px solid var(--line);
}
.terms{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:2rem;
  max-width:52rem;
  margin:3rem auto;
  text-align:left;
}
.terms .n{color:var(--gold);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase}
.terms p{color:var(--ink-2);margin:.55rem 0 0;font-size:.95rem}

.btn{
  display:inline-block;
  border:1px solid rgba(176,122,46,.5);
  background:transparent;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.68rem;
  padding:1.05rem 2.2rem;
  cursor:pointer;
  transition:background .35s, color .35s, border-color .35s;
}
.btn:hover,.btn:focus-visible{background:var(--gold);border-color:var(--gold);color:#fff}
#submit-btn[hidden]{display:none!important}

#submit{
  display:none;
  max-width:28rem;
  margin:2.2rem auto 0;
  text-align:left;
}
#submit.open{display:block;animation:rise .5s ease}
#submit label{display:block;margin:1rem 0 .35rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
#submit input,#submit textarea{
  width:100%;
  background:var(--cream);
  border:1px solid var(--line);
  color:var(--ink);
  padding:.85rem 1rem;
  outline:none;
}
#submit input:focus,#submit textarea:focus{border-color:var(--gold)}
#submit textarea{min-height:7rem;resize:vertical}
#submit .btn{margin-top:1.3rem;width:100%}
#thanks{
  display:none;
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;
  font-style:italic;
  margin:2rem auto 0;
  max-width:28rem;
}
#thanks.open{display:block}

.crumbs{
  display:flex;flex-wrap:wrap;gap:.45rem 1rem;justify-content:center;
  margin:0 0 1.6rem;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}
.crumbs a{text-decoration:none;color:inherit;border-bottom:1px solid transparent}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.page-intro{
  text-align:center;
  padding:clamp(1.2rem, 4vh, 2.4rem) 1.5rem 2.6rem;
}
.page-intro h1{
  font-size:clamp(2.8rem, 8vw, 5.2rem);
  margin:.55rem 0 .9rem;
}
.page-intro .lead{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.2rem, 2.6vw, 1.55rem);
  font-style:italic;
  color:var(--ink-2);
  max-width:34rem;
  margin:0 auto;
  line-height:1.4;
}
.essay{
  width:min(38rem, calc(100% - 2.5rem));
  margin:0 auto 3.2rem;
  color:var(--ink-2);
}
.essay p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.12rem, 2.1vw, 1.32rem);
  line-height:1.58;
  margin:0 0 1.15rem;
}
.essay p.verse{
  color:var(--gold);
  font-style:italic;
  margin:0 0 1.6rem;
}
.essay p.cite{
  font-family:'Outfit',sans-serif;
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--mute);
  margin:-.4rem 0 1.5rem;
}
.doors{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.1rem;
  width:min(1500px, calc(100% - 1.5rem));
  margin:0 auto;
}
.door{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#E8DFD0;
  text-decoration:none;
  color:#F6F0E6;
}
.door:last-child:nth-child(odd){grid-column:1 / -1;aspect-ratio:16/10}
.door img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.door:hover img,.door:focus-visible img{transform:scale(1)}
.door .label{
  position:absolute;left:0;right:0;bottom:0;
  padding:4.2rem 1.3rem 1.2rem;
  background:linear-gradient(transparent, rgba(16,12,8,.82));
}
.door .chapter-number{
  display:block;
  margin-bottom:.35rem;
  color:rgba(246,240,230,.72);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.door .label .kicker{color:var(--gold-soft)}
.door .label h3{
  margin:.25rem 0 0;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  color:#F6F0E6;
}
@media(max-width:760px){
  .doors{grid-template-columns:1fr}
  .door:last-child:nth-child(odd){aspect-ratio:4/5}
}
.journey-progress{
  position:static;
  inset:auto;
  z-index:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  margin:-.25rem auto 1.5rem;
  padding:0;
  color:inherit;
  background:transparent;
  border:0;
  backdrop-filter:none;
  text-shadow:none;
  transition:none;
}
.journey-position{
  color:var(--mute);
  font-size:.58rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.journey-track{display:flex;align-items:center;gap:.35rem}
.journey-track a{
  display:block;
  width:2.2rem;
  height:2px;
  background:rgba(26,20,14,.14);
  transition:background .25s,height .25s;
}
.journey-track a:hover,.journey-track a:focus-visible{background:var(--gold-soft)}
.journey-track a[aria-current="step"]{height:3px;background:var(--gold)}
.journey-nav{
  position:static;
  inset:auto;
  z-index:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  width:min(64rem, calc(100% - 2.5rem));
  margin:2.5rem auto 3.5rem;
  padding:0;
  color:inherit;
  background:transparent;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  backdrop-filter:none;
  text-shadow:none;
  transition:none;
}
.journey-nav a{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  padding:1.45rem 1.2rem 1.55rem;
  text-decoration:none;
  color:var(--ink-2);
  transition:background .3s,color .3s;
}
.journey-nav a + a{border-left:1px solid var(--line)}
.journey-nav a:hover,.journey-nav a:focus-visible{background:rgba(212,176,106,.09);color:var(--ink)}
.journey-nav .journey-next{text-align:right;align-items:flex-end}
.journey-direction{
  color:var(--gold);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.journey-nav strong{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight:300;
}
@media(max-width:560px){
  .journey-nav{width:calc(100% - 1.5rem)}
  .journey-nav a{padding:1.15rem .85rem 1.25rem}
  .journey-track a{width:1.75rem}
}
.journey-closing{
  scroll-margin-top:4.5rem;
  width:min(64rem, calc(100% - 2.5rem));
  margin:0 auto clamp(4.5rem, 10vh, 7rem);
  padding:clamp(4.2rem, 10vw, 7rem) clamp(1.5rem, 7vw, 5.5rem);
  text-align:center;
  color:var(--paper);
  background:
    radial-gradient(circle at 50% 25%, rgba(212,176,106,.16), transparent 44%),
    #17120D;
}
.journey-closing h2{
  max-width:12em;
  margin:.75rem auto .4rem;
  color:#F6F0E6;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.35rem, 5.8vw, 4rem);
  font-weight:300;
  line-height:1.05;
}
.journey-closing .closing-lead{
  margin:0;
  color:rgba(246,240,230,.55);
  font-family:'Cormorant Garamond',serif;
  font-size:1.08rem;
  font-style:italic;
}
.closing-questions{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:clamp(2.4rem, 6vw, 4rem) auto;
  border-top:1px solid rgba(212,176,106,.28);
  border-bottom:1px solid rgba(212,176,106,.28);
}
.closing-questions p{
  margin:0;
  padding:clamp(1.8rem, 4vw, 3rem);
  color:#F6F0E6;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.35rem, 2.7vw, 1.9rem);
  font-style:italic;
  line-height:1.35;
}
.closing-questions p + p{border-left:1px solid rgba(212,176,106,.28)}
.closing-witness{
  max-width:37rem;
  margin:0 auto;
  color:rgba(246,240,230,.76);
  line-height:1.7;
}
.closing-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem 1.6rem;
  margin-top:2.2rem;
}
.journey-closing .quiet-link{color:rgba(246,240,230,.68)}
@media(max-width:620px){
  .journey-closing{width:calc(100% - 1.5rem);padding-inline:1.25rem}
  .closing-questions{grid-template-columns:1fr}
  .closing-questions p + p{border-left:0;border-top:1px solid rgba(212,176,106,.28)}
}
.artist-page{
  width:min(42rem, calc(100% - 2.5rem));
  margin:0 auto 2.4rem;
  text-align:left;
}
.artist-page .known{
  color:var(--gold);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.artist-page h1{font-size:clamp(2.6rem, 6vw, 4.2rem);margin:.4rem 0 1rem}
.artist-page p{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.12rem, 2vw, 1.3rem);
  color:var(--ink-2);
  line-height:1.58;
  margin:0 0 1.05rem;
}
.artist-page .shop-link{
  display:inline-block;
  margin-top:.6rem;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold);
  border-bottom:1px solid transparent;
}
.artist-page .shop-link:hover{border-bottom-color:var(--gold)}
.home-next{
  text-align:center;
  padding:4.5rem 1.5rem 5.5rem;
}
.home-next h2{font-size:clamp(2rem,5vw,3.2rem);margin:.7rem 0 1.4rem}
.home-next a.btn{text-decoration:none}
#chapter-art{padding-bottom:3rem}

footer{
  padding:3rem 1.5rem 4rem;
  text-align:center;
  border-top:1px solid var(--line);
}
footer .mark{letter-spacing:.4em;text-transform:uppercase;font-size:.78rem;text-decoration:none;color:inherit}
footer p{color:var(--mute);font-size:.85rem;max-width:36rem;margin:.8rem auto 0}
footer:not(:has(p)){padding-top:2.4rem}

/* viewer */
#work{
  position:fixed;inset:0;z-index:100;
  background:rgba(12,10,8,.96);
  color:var(--paper);
  display:none;
  grid-template-columns:1.7fr 1fr;
}
#work.open{display:grid;animation:fade .45s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
#stage{
  position:relative;
  overflow:hidden;
  background:#0A0806;
  display:grid;place-items:center;
  cursor:zoom-in;
}
#stage.zoomed{cursor:zoom-out}
#stage img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .7s cubic-bezier(.22,.61,.36,1);user-select:none;-webkit-user-drag:none}
#panel{padding:clamp(2rem,4.5vw,3.4rem);overflow-y:auto;border-left:1px solid rgba(246,240,230,.1)}
#panel h3{font-size:clamp(2rem, 3.4vw, 2.8rem);margin:.8rem 0 .35rem;color:#F6F0E6}
#panel .artist{font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.15rem;opacity:.8;margin:0 0 1.4rem}
#work-scripture{color:var(--gold-soft);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;margin:.65rem 0 0;line-height:1.5}
#work-story{color:rgba(246,240,230,.78);font-size:.95rem;line-height:1.65;margin:.65rem 0 0}
.reflection-sequence{margin-top:.2rem}
.reflection-block{
  padding:1.15rem 0 1.25rem;
  border-top:1px solid rgba(246,240,230,.1);
}
.reflection-block:first-child{border-top:0;padding-top:.35rem}
.reflection-block .kicker{display:block}
#work-consider{
  margin:.7rem 0 0;
  color:#F6F0E6;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.25rem, 2.1vw, 1.55rem);
  font-style:italic;
  line-height:1.38;
}
#work-witness{
  margin:.65rem 0 0;
  color:rgba(246,240,230,.8);
  font-family:'Cormorant Garamond',serif;
  font-size:1.08rem;
  line-height:1.55;
}
.reflection-block.consider{
  margin:.2rem 0;
  padding:1.35rem 1.15rem 1.45rem;
  border:1px solid rgba(212,176,106,.25);
  background:rgba(212,176,106,.06);
}
.reflection-block.consider + .reflection-block{border-top:0}
.learn-more{
  margin-top:.45rem;
  border-top:1px solid rgba(246,240,230,.14);
  border-bottom:1px solid rgba(246,240,230,.14);
}
.learn-more summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.05rem 0;
  color:var(--gold-soft);
  cursor:pointer;
  list-style:none;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.64rem;
}
.learn-more summary::-webkit-details-marker{display:none}
.learn-more summary::after{
  content:'+';
  color:rgba(246,240,230,.72);
  font-size:1rem;
  font-weight:300;
  line-height:1;
}
.learn-more[open] summary::after{content:'−'}
.learn-more summary:hover,.learn-more summary:focus-visible{color:#F6F0E6}
.learn-body{padding:.35rem 0 1.25rem}
#work-facts{margin:0 0 1.8rem}
#work-facts .kicker{display:block;margin-bottom:.7rem}
#work-facts ul{margin:0;padding:0 0 0 1.1rem;color:rgba(246,240,230,.68);font-size:.9rem;line-height:1.55}
#work-facts li{margin:.45rem 0}
#work-shops{margin:1.6rem 0 0;padding-top:1.4rem;border-top:1px solid rgba(246,240,230,.12)}
#work-shops .kicker{display:block;margin-bottom:.55rem}
#work-shops .lead{color:rgba(246,240,230,.55);font-size:.88rem;margin:0 0 1rem;line-height:1.5}
.shop{
  display:flex;flex-direction:column;gap:.15rem;
  text-decoration:none;
  border:1px solid rgba(212,176,106,.28);
  padding:.85rem 1rem;
  margin:.5rem 0 0;
  transition:border-color .3s, background .3s;
}
.shop:hover,.shop:focus-visible{border-color:var(--gold-soft);background:rgba(212,176,106,.08)}
.shop .who{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
.shop .what{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.12rem;color:#F6F0E6}
.meta{border-top:1px solid rgba(246,240,230,.12);padding:.85rem 0;display:flex;justify-content:space-between;gap:1rem;font-size:.95rem}
.meta span:last-child{color:rgba(246,240,230,.55);text-align:right}
#panel .note{color:rgba(246,240,230,.55);font-size:.88rem;margin-top:1.6rem;line-height:1.6}
.stage-btn{
  position:absolute;top:1.3rem;
  background:rgba(12,9,7,.55);
  border:1px solid rgba(212,176,106,.3);
  color:var(--paper);
  width:2.6rem;height:2.6rem;
  cursor:pointer;z-index:5;
}
#close{right:1.3rem}
#prev{left:1.3rem}
#next{left:4.3rem}
@media(max-width:860px){
  #work.open{grid-template-columns:1fr;grid-template-rows:52vh 1fr}
  #panel{border-left:0;border-top:1px solid rgba(246,240,230,.1)}
}

/* artist rooms */
body[data-page="artist"] #threshold{
  place-items:end center;
}
body[data-page="artist"] #threshold::after{
  background:linear-gradient(180deg, rgba(12,10,8,.42) 0%, rgba(12,10,8,.08) 38%, rgba(12,10,8,.78) 100%);
}
body[data-page="artist"] #threshold .words{
  width:min(52rem, calc(100% - 2.5rem));
  padding-bottom:8vh;
}
body[data-page="artist"] #threshold h1{
  text-transform:none;
  letter-spacing:-.03em;
  text-indent:0;
  font-size:clamp(2.5rem, 6.6vw, 5.4rem);
  overflow-wrap:break-word;
}
body[data-page="artist"] #threshold .sub{
  font-family:'Italianno',cursive;
  font-style:normal;
  font-size:clamp(2.1rem, 5vw, 3.6rem);
  letter-spacing:.04em;
  color:var(--gold-soft);
  max-width:none;
  margin-top:.15rem;
}
body[data-page="artist"] #threshold .kicker{
  display:block;
  margin-bottom:.55rem;
  color:var(--gold-soft);
}
body[data-page="artist"] #hero-credit.sign{
  font-size:clamp(1.25rem, 2.4cqw, 2rem);
}
.artist-plate{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  margin:0;
  cursor:zoom-in;
  background:#0C0A08;
}
.artist-plate img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 28%;
  transform:scale(1.08);
  filter:brightness(.46) saturate(.8);
  animation:wake 3.8s cubic-bezier(.22,.61,.36,1) forwards;
}
.artist-story{
  width:min(72rem, calc(100% - 2.5rem));
  margin:0 auto;
  padding:clamp(2.4rem, 7vh, 4.6rem) 0 3.2rem;
  text-align:left;
}
.artist-story .crumbs{justify-content:flex-start;margin-bottom:2.2rem}
.artist-story-layout{
  display:grid;
  grid-template-columns:minmax(200px, 17.5rem) minmax(0, 1fr);
  gap:clamp(1.6rem, 4vw, 3.2rem);
  align-items:start;
}
.artist-portrait{
  margin:0;
  position:sticky;
  top:5.5rem;
}
.artist-portrait img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center top;
  background:#1A140E;
}
.artist-portrait figcaption{
  margin-top:.7rem;
  color:var(--gold);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.artist-facts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  margin:0 0 2.2rem;
  border-top:1px solid rgba(176,122,46,.28);
  border-bottom:1px solid rgba(176,122,46,.28);
}
.artist-facts div{padding:1.15rem 1rem 1.2rem 0}
.artist-facts .n{
  display:block;
  color:var(--gold);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:.35rem;
}
.artist-facts p{
  margin:0;
  font-family:'Cormorant Garamond',serif;
  font-size:1.12rem;
  color:var(--ink);
  line-height:1.3;
}
.artist-line{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(1.45rem, 3vw, 1.9rem);
  color:var(--ink);
  line-height:1.35;
  margin:0 0 1.5rem;
}
.artist-story > p,
.artist-copy > p{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.12rem, 2vw, 1.3rem);
  color:var(--ink-2);
  line-height:1.58;
  margin:0 0 1.05rem;
}
.artist-story-links{
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem 2rem;
  margin-top:1.4rem;
}
.artist-story .shop-link{
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold);
  border-bottom:1px solid transparent;
}
.artist-story .shop-link:hover{border-bottom-color:var(--gold)}
.artist-salon{
  padding:2.4rem 0 5.5rem;
  background:var(--cream);
}
.artist-salon .section-head{padding-bottom:1.8rem}
.salon-count{
  display:block;
  margin-top:1.1rem;
  color:var(--mute);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.artist-salon .filters{
  position:sticky;
  top:4.2rem;
  margin:0 0 2.4rem;
}
.artist-salon .salon-seam{
  width:min(1500px, calc(100% - 1.5rem));
  margin:2.8rem auto 1.1rem;
}
.artist-salon .chapter-hero{margin-bottom:1.15rem}
.salon-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.15rem;
  width:min(1500px, calc(100% - 1.5rem));
  margin:0 auto 1.4rem;
}
.salon-grid .frame{aspect-ratio:4/5}
.salon-grid .frame.wide{grid-column:span 2;aspect-ratio:16/10}
.artist-shop .section-head{padding-inline:1.5rem}
.artist-shop .section-head h2{font-size:clamp(2.1rem, 5vw, 3.5rem);padding-inline:.5rem}
.artist-shop .section-head p{color:rgba(246,240,230,.62)}
.artist-shop .kicker{color:var(--gold-soft)}
.shop-catalog{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1px;
  width:min(1320px, calc(100% - 1.5rem));
  margin:0 auto;
  background:rgba(212,176,106,.22);
  border:1px solid rgba(212,176,106,.22);
}
.shop-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:10.5rem;
  padding:1.45rem 1.3rem 1.3rem;
  background:#120E0A;
  text-decoration:none;
  color:inherit;
  transition:background .35s;
}
.shop-card:hover,.shop-card:focus-visible{background:#1B1510}
.shop-card .who{
  color:var(--gold-soft);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.shop-card h3{
  margin:.7rem 0 1.4rem;
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  font-style:italic;
  font-size:clamp(1.35rem, 2.2vw, 1.7rem);
  line-height:1.2;
}
.shop-card .go{
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(246,240,230,.45);
}
.shop-card:hover .go{color:var(--gold-soft)}
.shop-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1.2rem 1.8rem;
  margin-top:2.6rem;
}
.artist-shop .quiet-link{
  color:rgba(246,240,230,.55);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.artist-shop .quiet-link:hover{color:var(--gold-soft);border-bottom-color:var(--gold-soft)}
.artist-shop-close{
  background:var(--cream);
  color:var(--ink);
  padding:0 0 4.2rem;
}
.artist-shop-close .quiet-link{color:var(--gold)}
.artist-shop-close .quiet-link:hover{color:var(--ink);border-bottom-color:var(--gold)}
body[data-page="artist"] footer{
  background:var(--cream);
}
@media(max-width:820px){
  .artist-story-layout{grid-template-columns:1fr}
  .artist-portrait{position:static;max-width:18rem}
  .artist-facts{grid-template-columns:1fr}
  .artist-facts div{padding:1rem 0}
  .artist-facts div + div{border-top:1px solid rgba(176,122,46,.18)}
  .salon-grid{grid-template-columns:1fr 1fr;width:calc(100% - 1.25rem)}
  .salon-grid .frame.wide{grid-column:span 2}
}
@media(max-width:560px){
  .salon-grid{grid-template-columns:1fr}
  .salon-grid .frame.wide{grid-column:auto;aspect-ratio:4/5}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
  #plate,.artist-plate img{filter:brightness(.62);transform:none}
  #threshold .words,#hero-credit{opacity:1}
}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
