@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --ground:#0b0b0c;
  --ground-2:#141314;
  --bone:#e9e4d8;
  --bone-dim:rgba(233,228,216,.58);
  --bone-faint:rgba(233,228,216,.32);
  --hair:rgba(233,228,216,.14);
  --red:#c8351f;
  --serif:"Fraunces",Georgia,serif;
  --grot:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);color:var(--bone);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 14,"wght" 380;font-size:1.05rem;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
::selection{background:var(--red);color:var(--bone)}

/* grain, one fixed layer */
.grain{position:fixed;inset:-20%;z-index:40;pointer-events:none;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px;animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(3%,1%)}}

/* corner index */
.index{position:fixed;right:clamp(14px,2.4vw,34px);top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:6px;padding:10px 0;align-items:center}
.index a{width:30px;height:26px;display:grid;place-items:center;text-decoration:none;font-family:var(--serif);font-variation-settings:"opsz" 14,"wght" 420;font-style:italic;font-size:.82rem;color:var(--bone);text-shadow:0 0 10px rgba(11,11,12,1),0 0 3px rgba(11,11,12,1);opacity:.5;transition:opacity .4s var(--ease),color .4s var(--ease)}
.index a.on{opacity:1;color:var(--red)}
.index a:hover{opacity:1}

/* chapters */
.ch{position:relative;min-height:100dvh;display:grid;overflow:hidden;isolation:isolate}
.bg{position:absolute;inset:0;z-index:-2}
.bg img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.05);opacity:.9;transform:scale(1.08);transition:transform 2.4s var(--ease)}
.ch.in .bg img{transform:scale(1)}
.fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,12,.25) 0%,rgba(11,11,12,.05) 35%,rgba(11,11,12,.55) 75%,var(--ground) 100%)}
.veil-bottom{background:linear-gradient(180deg,var(--ground) 0%,rgba(11,11,12,.1) 30%,rgba(11,11,12,.15) 55%,var(--ground) 100%)}
.veil-left{background:linear-gradient(90deg,var(--ground) 0%,rgba(11,11,12,.85) 38%,rgba(11,11,12,.15) 80%),linear-gradient(180deg,var(--ground) 0%,transparent 20%,transparent 80%,var(--ground) 100%)}
.veil-top{background:linear-gradient(180deg,var(--ground) 0%,rgba(11,11,12,.3) 40%,rgba(11,11,12,.3) 60%,var(--ground) 100%)}
.veil-radial{background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(11,11,12,.15),rgba(11,11,12,.85) 100%),linear-gradient(180deg,var(--ground) 0%,transparent 18%,transparent 82%,var(--ground) 100%)}

.txt{position:relative;z-index:1;align-self:end;padding:var(--pad);padding-bottom:clamp(56px,10vh,120px);max-width:min(48rem,92vw)}
.txt-center{align-self:center;justify-self:center;text-align:center;padding-bottom:var(--pad)}
.txt-list{align-self:center;max-width:min(44rem,92vw)}

.num{font-family:var(--grot);font-weight:400;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:clamp(18px,3vh,32px);display:flex;gap:1.2em;align-items:baseline}
.num em{font-style:normal;color:var(--red);letter-spacing:.18em}
.num::before{content:"";width:2.4em;height:1px;background:var(--bone-faint);align-self:center}

.line{font-family:var(--serif);font-variation-settings:"opsz" 96,"wght" 320;font-size:clamp(1.55rem,3.3vw,2.7rem);line-height:1.14;letter-spacing:-.012em;text-wrap:balance}
.line-big{font-variation-settings:"opsz" 144,"wght" 300;font-size:clamp(2.2rem,6.4vw,5.6rem);line-height:1;letter-spacing:-.02em;font-style:italic}
.sub{margin-top:clamp(16px,2.4vh,28px);font-family:var(--serif);font-variation-settings:"opsz" 14,"wght" 380;font-style:italic;font-size:1.05rem;color:var(--bone-dim);line-height:1.5}
.rubric{color:var(--red)}
.sep{color:var(--bone-faint);padding:0 .4em}

.lnk{color:var(--bone);text-decoration:none;background-image:linear-gradient(var(--bone),var(--bone));background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px;transition:background-size .5s var(--ease),color .3s var(--ease);font-style:normal}
.lnk:hover{color:var(--red);background-image:linear-gradient(var(--red),var(--red));background-size:30% 1px}
.lnk:focus-visible{outline:1px solid var(--red);outline-offset:4px}

/* reveals */
.txt>*,.list li{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.ch.in .txt>*{opacity:1;transform:none}
.ch.in .txt>*:nth-child(2){transition-delay:.12s}
.ch.in .txt>*:nth-child(3){transition-delay:.26s}
.ch.in .list li{opacity:1;transform:none}
.ch.in .list li:nth-child(1){transition-delay:.15s}
.ch.in .list li:nth-child(2){transition-delay:.4s}
.ch.in .list li:nth-child(3){transition-delay:.65s}

/* the door */
.door{grid-template-rows:1fr auto}
.door .bg img{object-position:0% 62%}
.door .veil{background:linear-gradient(180deg,rgba(11,11,12,.3) 0%,rgba(11,11,12,.1) 30%,rgba(11,11,12,.55) 65%,rgba(11,11,12,.95) 100%),linear-gradient(90deg,rgba(11,11,12,.35) 0%,transparent 30%)}
.door-inner{position:relative;z-index:1;align-self:end;justify-self:end;text-align:right;padding:var(--pad);padding-bottom:clamp(40px,8vh,90px)}
.wordmark{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 144,"wght" 260;font-weight:260;font-size:clamp(4.2rem,15.5vw,15rem);line-height:.86;letter-spacing:-.045em;color:var(--bone);display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:.22em}
.wordmark .w{display:inline-block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.wordmark .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.4s var(--ease)}
.wordmark .w>span.i{transform:none}
.line-door{margin-top:clamp(18px,3vh,36px);font-variation-settings:"opsz" 48,"wght" 340;font-size:clamp(1.15rem,2.2vw,1.7rem);letter-spacing:0;opacity:0;transform:translateY(14px);transition:opacity 1.2s var(--ease) 1s,transform 1.2s var(--ease) 1s}
.line-door.i{opacity:1;transform:none}
.addr{position:absolute;left:var(--pad);top:var(--pad);z-index:1;font-family:var(--grot);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);text-shadow:0 1px 12px rgba(11,11,12,.9);display:flex;flex-direction:column;gap:.3em;opacity:0;transition:opacity 1.6s var(--ease) 1.6s}
.addr.i{opacity:1}
.scrollcue{position:absolute;left:50%;bottom:22px;z-index:1;width:1px;height:56px;overflow:hidden;opacity:0;transition:opacity 1.6s var(--ease) 2.2s}
.scrollcue.i{opacity:.7}
.scrollcue span{position:absolute;inset:0;background:linear-gradient(var(--bone),transparent);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* the building */
.building .bg img{object-position:50% 40%;opacity:.88}
.building .fx,.bazaar .fx{z-index:1;opacity:.9}
.building .veil{background:linear-gradient(180deg,var(--ground) 0%,rgba(11,11,12,.05) 25%,rgba(11,11,12,.35) 60%,rgba(11,11,12,.92) 100%),linear-gradient(90deg,rgba(11,11,12,.65) 0%,transparent 50%)}

/* the practice */
.practice{grid-template-columns:1fr}
.bg-right{left:auto;width:min(62vw,900px)}
.bg-right img{object-position:50% 50%;opacity:.75}
.arch{position:absolute;right:max(4vw,calc(50% - 560px));bottom:0;height:88vh;z-index:0;pointer-events:none;opacity:.55}
.arch-p{fill:none;stroke:var(--bone);stroke-width:1;stroke-dasharray:1800;stroke-dashoffset:1800;transition:stroke-dashoffset 3.2s var(--ease)}
.arch-p2{display:none}
.arch-key{fill:var(--red);opacity:0;transition:opacity 1s var(--ease) 2.8s}
.ch.in .arch-p{stroke-dashoffset:0}
.ch.in .arch-key{opacity:1}
.list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,4vh,44px)}
.list li{display:grid;grid-template-columns:2.6rem 1fr;gap:.8rem;align-items:baseline}
.list .line{font-size:clamp(1.25rem,2.35vw,1.9rem);font-variation-settings:"opsz" 72,"wght" 330}
.rn{font-family:var(--serif);font-variation-settings:"opsz" 144,"wght" 300;font-style:italic;font-size:1.6rem;color:var(--red);line-height:1}

/* the bazaar */
.bazaar .bg img{opacity:.62;object-fit:contain;object-position:50% 50%;transform:scale(1.25);transition-duration:4s}
.bazaar.in .bg img{transform:scale(1.05)}
.bazaar .veil{background:radial-gradient(circle at 50% 50%,rgba(11,11,12,.72) 0%,rgba(11,11,12,.45) 22%,rgba(11,11,12,.1) 45%,rgba(11,11,12,.7) 75%,var(--ground) 100%)}
.bazaar .txt{align-self:center;justify-self:center;text-align:center;padding-bottom:var(--pad);max-width:min(34rem,92vw)}
.bazaar .num{justify-content:center}
.bazaar .line{font-variation-settings:"opsz" 96,"wght" 300;font-size:clamp(1.5rem,3vw,2.5rem)}

/* the people */
.people .bg img{opacity:.7;filter:grayscale(.35) contrast(1.05);object-position:50% 40%}
.people .veil-top{background:linear-gradient(180deg,var(--ground) 0%,rgba(11,11,12,.2) 30%,rgba(11,11,12,.45) 62%,var(--ground) 100%),linear-gradient(90deg,rgba(11,11,12,.6) 0%,transparent 55%)}

/* the door again */
.contact{grid-template-rows:1fr auto}
.contact .bg img{opacity:.6;object-position:50% 30%}
.contact-lines{margin-top:clamp(24px,4vh,48px);display:flex;flex-direction:column;gap:.8em;font-family:var(--grot);font-size:.95rem;letter-spacing:.06em;color:var(--bone)}
.contact-lines .lnk{color:var(--bone);align-self:center;font-size:1.05rem}
.contact-lines span{color:var(--bone-dim)}
.colophon{position:relative;z-index:1;justify-self:center;padding:0 var(--pad) 28px;font-family:var(--grot);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone);opacity:.75}

/* mobile */
@media (max-width:760px){
  .index{display:none}
  .txt{max-width:100%;padding-bottom:clamp(48px,9vh,80px)}
  .txt-list{align-self:center;padding-bottom:var(--pad)}
  .people .txt{align-self:center;padding-bottom:var(--pad)}
  .people .veil-top{background:linear-gradient(180deg,var(--ground) 0%,rgba(11,11,12,.55) 35%,rgba(11,11,12,.7) 65%,var(--ground) 100%)}
  .num{margin-bottom:16px}
  .line{font-size:clamp(1.5rem,7vw,2rem)}
  .building .fx{-webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.2) 72%,transparent 92%);mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.2) 72%,transparent 92%)}
  .door-inner{justify-self:start;text-align:left}
  .wordmark{justify-content:flex-start}
  .bazaar .bg img{opacity:.8;transform:scale(1.5)}
  .bazaar.in .bg img{transform:scale(1.25)}
  .bg-right{width:100%}
  .bg-right img{opacity:.55}
  .veil-left{background:linear-gradient(180deg,var(--ground) 0%,rgba(11,11,12,.6) 30%,rgba(11,11,12,.7) 70%,var(--ground) 100%)}
  .arch{right:-10vw;height:70vh;opacity:.4}
  .list li{grid-template-columns:2rem 1fr}
  .wordmark{font-size:clamp(4rem,19vw,7rem)}
  .door .bg img{object-position:30% 45%}
  .addr{font-size:.64rem}
}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .bg img{transform:none!important;transition:none}
  .txt>*,.list li,.wordmark .w>span,.line-door,.addr,.scrollcue{opacity:1!important;transform:none!important;transition:none!important}
  .arch-p{stroke-dashoffset:0;transition:none}
  .scrollcue span{animation:none}
  .fx{display:none}
  html{scroll-behavior:auto}
}