@font-face{font-family:"DM Serif Display";src:url(../fonts/dm-serif-display-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(../fonts/dm-serif-display-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Karla;src:url(../fonts/karla-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Karla;src:url(../fonts/karla-latin-wght-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
:root{
  --paper:#fbf1e1;--paper2:#f5e4c8;--apricot:#f6b77a;--ochre:#e39a2d;--terra:#c65a3a;--rust:#8e3b2a;--rose:#e8a08a;--plum:#4a2740;--night:#2a1630;--sage:#7e8f6a;--ink:#2a1630;
  --serif:"DM Serif Display",Georgia,serif;--sans:Karla,system-ui,sans-serif;--pad:clamp(20px,4.6vw,72px);--max:1280px;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 clamp(17px,.5vw + 14.5px,20px)/1.6 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ochre);color:var(--night);padding:8px 14px;z-index:99}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.015em}
.grain::after,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.16;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 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")}
.tag{font:700 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}

/* nav */
.top{position:fixed;inset:0 0 auto;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:16px var(--pad);color:var(--paper);transition:background .4s,color .4s,box-shadow .4s}
.top.solid{background:var(--paper);color:var(--night);box-shadow:0 6px 0 -3px rgba(198,90,58,.0),0 8px 24px -14px rgba(42,22,48,.45)}
.logo{text-decoration:none;font:400 1.55rem/1 var(--serif);display:flex;gap:.3em;align-items:baseline}
.logo i{font-style:normal;color:var(--ochre)}
.logo small{font:700 .58rem var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-left:.6em;opacity:.85}
.top nav{display:flex;gap:clamp(14px,2.6vw,36px);align-items:center;font-weight:600;font-size:.95rem}
.top nav a{text-decoration:none}
.top nav a:not(.btn):hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--ochre)}
.btn{display:inline-block;background:var(--ochre);color:var(--night);padding:.78em 1.35em;font:700 .92rem var(--sans);text-decoration:none;border:0;cursor:pointer;border-radius:3px 3px 40% 40% / 3px 3px 14px 14px;box-shadow:0 3px 0 var(--rust);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--rust)}
.btn.dark{background:var(--night);color:var(--paper);box-shadow:0 3px 0 var(--ochre)}
@media (max-width:760px){.top nav a:not(.btn){display:none}.logo small{display:none}}

/* diorama hero */
.hero{position:relative;height:300vh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--plum);isolation:isolate}
.sky{position:absolute;inset:-4% -2% -2%;background:url(../img/sky.webp) center bottom/auto 150%;will-change:transform}
.dusk{position:absolute;inset:0;background:linear-gradient(180deg,rgba(74,39,64,.78),rgba(74,39,64,.55) 38%,rgba(74,39,64,0) 68%);opacity:1;pointer-events:none;z-index:1}
.dusk2{position:absolute;inset:0;background:var(--night);opacity:0;z-index:30;pointer-events:none}
.sunglow{position:absolute;left:50%;bottom:32%;width:min(120vh,1000px);aspect-ratio:1;translate:-50% 50%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,170,.75),rgba(255,190,110,.28) 45%,transparent 72%);z-index:1;mix-blend-mode:screen;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.07);opacity:.85}}
.clouds{position:absolute;inset:0;z-index:2;pointer-events:none}
.cloud{position:absolute;filter:drop-shadow(0 6px 8px rgba(74,39,64,.25));animation:drift linear infinite}
.cloud svg{display:block}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.layers{position:absolute;inset:0;z-index:3}
.layer{position:absolute;left:-7%;bottom:0;width:114%;will-change:transform}
.layer::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:120vh;background:var(--c)}
.layer svg{display:block;filter:drop-shadow(0 -4px 3px rgba(42,22,48,.25)) drop-shadow(0 -10px 16px rgba(42,22,48,.3))}
.hero-copy{position:absolute;z-index:20;left:0;right:0;top:clamp(86px,15vh,150px);text-align:center;color:var(--paper);padding:0 var(--pad);pointer-events:none}
.hero-copy .tag{display:inline-block;margin-bottom:18px;padding:7px 14px;border:1.5px solid rgba(251,241,225,.6);border-radius:99px}
.hero h1{font-size:clamp(3rem,8.4vw,8.4rem);text-wrap:balance;text-shadow:0 3px 0 rgba(74,39,64,.35),0 6px 36px rgba(42,22,48,.55);max-width:13em;margin:0 auto}
.hero h1 span{color:#ffd28a}
.hero p.lede{max-width:36ch;margin:22px auto 0;font-size:clamp(1.05rem,1.4vw,1.3rem);text-shadow:0 2px 20px rgba(42,22,48,.7)}
.scroll{position:absolute;z-index:20;left:50%;bottom:calc(var(--peak,120px) + 18px);translate:-50% 0;color:var(--paper);font:700 .68rem var(--sans);letter-spacing:.24em;text-transform:uppercase;text-align:center;pointer-events:none}
.scroll i{display:block;margin:8px auto 0;width:1.5px;height:28px;background:currentColor;transform-origin:top;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* roof dividers */
.roof-wrap{position:relative;z-index:10;height:var(--h,300px);margin-top:calc(var(--peak,120px) * -1);pointer-events:none}
.roof{position:absolute;inset:0;overflow:hidden;background:#4a1d1b}
.course{display:flex;position:relative}
.course i{flex:0 0 var(--tw);height:100%;display:block;border-radius:2px 2px 44% 44%/2px 2px 52% 52%;
  box-shadow:inset 0 -5px 7px -2px rgba(255,214,160,.3),inset 0 7px 9px -3px rgba(60,12,12,.5),inset 1px 0 0 rgba(60,12,12,.35),inset -1px 0 0 rgba(60,12,12,.35),0 3px 3px -1px rgba(42,10,10,.5);
  background-image:linear-gradient(180deg,rgba(60,12,12,.38),transparent 46%,rgba(255,200,140,.12))}
.eave{position:absolute;left:0;right:0;bottom:-34px;height:34px;background:linear-gradient(rgba(42,22,48,.34),transparent);pointer-events:none;z-index:-1}
.roof-wrap.on-dark .eave{background:linear-gradient(rgba(0,0,0,.4),transparent)}
.after{position:relative;padding-top:clamp(40px,6vw,80px)}

/* intro */
.intro{background:var(--paper);padding:clamp(50px,7vw,100px) 0 clamp(60px,9vw,130px)}
.intro .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(30px,6vw,100px);align-items:center}
.intro p.big{text-wrap:balance;font:400 clamp(2rem,4.6vw,4.2rem)/1.08 var(--serif);text-wrap:pretty}
.intro p.big em{color:var(--terra);font-style:normal}
.intro .note{display:grid;gap:18px;font-size:1rem}
.intro .note b{font:400 clamp(2.8rem,5vw,4.4rem)/1 var(--serif);color:var(--rust);display:block}
.cutout{background:var(--paper2);padding:22px 24px;border-radius:2px;box-shadow:0 1px 0 #fff inset,0 10px 24px -12px rgba(74,39,64,.5),0 2px 0 rgba(74,39,64,.08);transform:rotate(-1.3deg);clip-path:polygon(0 3%,5% 0,26% 2%,50% 0,77% 2%,100% 0,99% 34%,100% 70%,98% 100%,70% 98%,45% 100%,20% 98%,0 100%,1% 60%)}
@media (max-width:820px){.intro .wrap{grid-template-columns:1fr}}

/* services: cut paper cards */
.services{background:var(--paper);padding-bottom:clamp(70px,9vw,130px)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,56px)}
.sec-head h2{font-size:clamp(2.6rem,6vw,5.4rem)}
.sec-head p{max-width:36ch}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,28px)}
.card{position:relative;padding:28px 24px 30px;color:var(--night);text-decoration:none;display:flex;flex-direction:column;gap:12px;min-height:420px;
  filter:drop-shadow(0 12px 14px rgba(74,39,64,.28));transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s}
.card::before{content:"";position:absolute;inset:0;background:var(--bg);z-index:-1;clip-path:var(--cut)}
.card:nth-child(1){--bg:var(--apricot);--cut:polygon(1% 1%,22% 0,48% 2%,76% 0,99% 1%,100% 40%,98% 99%,70% 100%,40% 98%,12% 100%,0 97%,2% 50%);transform:rotate(-1.4deg)}
.card:nth-child(2){--bg:var(--rose);--cut:polygon(0 2%,30% 0,58% 2%,100% 0,98% 45%,100% 98%,64% 100%,32% 98%,2% 100%,1% 55%);transform:rotate(1.1deg) translateY(18px)}
.card:nth-child(3){--bg:#c7cfae;--cut:polygon(1% 0,35% 2%,68% 0,100% 1%,99% 52%,100% 100%,60% 98%,28% 100%,0 99%,2% 46%);transform:rotate(-.8deg)}
.card:nth-child(4){--bg:var(--ochre);--cut:polygon(0 1%,26% 0,54% 2%,82% 0,100% 2%,98% 48%,100% 100%,74% 98%,44% 100%,14% 98%,1% 100%,2% 52%);transform:rotate(1.5deg) translateY(10px)}
.card:hover{transform:rotate(0) translateY(-8px);filter:drop-shadow(0 22px 22px rgba(74,39,64,.35))}
.card .n{font:400 4.6rem/.8 var(--serif);color:rgba(42,22,48,.2)}
.card h3{font-size:clamp(1.7rem,2.2vw,2.2rem)}
.card p{font-size:.98rem}
.card .glyph{margin-top:auto;height:96px;width:100%}
.card .glyph svg{height:100%;width:auto;fill:var(--night)}
.card .more{font:700 .78rem var(--sans);letter-spacing:.16em;text-transform:uppercase;border-top:1.5px solid rgba(42,22,48,.4);padding-top:12px;display:flex;justify-content:space-between}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}.card{min-height:360px}.card:nth-child(n){transform:rotate(-.6deg)}.card:nth-child(even){transform:rotate(.8deg)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}.card{min-height:0}.card .glyph{height:70px;margin-top:8px}}

/* course (dark plum) */
.laid{background:var(--plum);color:var(--paper);padding-bottom:clamp(70px,9vw,130px)}
.laid h2{font-size:clamp(2.6rem,6vw,5.4rem);margin-bottom:12px}
.laid .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:start}
.sticky{position:sticky;top:110px}.col-fig{align-self:stretch}
.section-x{width:100%;max-width:560px;aspect-ratio:1.18;filter:drop-shadow(0 18px 26px rgba(0,0,0,.4))}
.section-x .lay{opacity:.12;transition:opacity .6s}
.section-x .lay.on{opacity:1}
.step{padding:28px 0 28px 28px;border-left:2px solid rgba(251,241,225,.25);position:relative;transition:border-color .4s}
.step::before{content:"";position:absolute;left:-7px;top:36px;width:12px;height:12px;border-radius:50%;background:var(--plum);border:2px solid rgba(251,241,225,.5);transition:.4s}
.step.on{border-color:var(--ochre)}.step.on::before{background:var(--ochre);border-color:var(--ochre)}
.step h3{font-size:clamp(1.5rem,2.3vw,2.1rem);margin-bottom:6px}
.step p{opacity:.88;max-width:44ch}
.step .tag{color:var(--apricot);display:block;margin-bottom:8px}
@media (max-width:820px){.laid .grid{grid-template-columns:1fr}.sticky{position:relative;top:0}.laid .col-fig{order:-1}}

/* work */
.work{background:var(--paper2);padding-bottom:clamp(70px,9vw,130px)}
.polys{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(18px,3vw,48px);align-items:start}
.snap{background:#fffaf0;padding:14px 14px 18px;box-shadow:0 18px 30px -14px rgba(74,39,64,.55);transform:rotate(-1.2deg);clip-path:polygon(0 0,100% 1%,99% 100%,1% 99%)}
.snap:nth-child(2){transform:rotate(1.6deg) translateY(40px)}
.snap img{width:100%;aspect-ratio:4/3;object-fit:cover}
.snap:nth-child(2) img{aspect-ratio:4/5}
.snap figcaption{padding-top:12px;font-size:.95rem}
.snap figcaption b{font:400 1.4rem var(--serif);display:block}
.quote{margin-top:clamp(70px,8vw,110px);display:grid;grid-template-columns:auto 1fr;gap:24px;max-width:920px}
.quote .q{font:400 7rem/.7 var(--serif);color:var(--terra)}
.quote p{font:400 clamp(1.6rem,3vw,2.6rem)/1.15 var(--serif)}
.quote cite{display:block;margin-top:14px;font:700 .8rem var(--sans);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--rust)}
@media (max-width:760px){.polys{grid-template-columns:1fr}.snap:nth-child(2){transform:rotate(1.2deg)}.quote .q{font-size:4rem}}

/* contact */
.contact{background:var(--night);color:var(--paper);padding-bottom:clamp(60px,8vw,110px)}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px)}
.contact h2{font-size:clamp(2.8rem,6.4vw,6rem)}
.contact h2 span{color:var(--apricot)}
.contact .lede{margin:20px 0 28px;max-width:34ch;opacity:.92}
.details{display:grid;gap:14px}
.details dt{font:700 .7rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--apricot)}
.details dd{margin:2px 0 0}
.details a{color:var(--paper)}
.sheet{background:var(--paper);color:var(--night);padding:clamp(24px,3vw,40px);clip-path:polygon(0 1%,18% 0,52% 1.5%,100% 0,99% 35%,100% 99%,74% 100%,40% 98.5%,0 100%,1% 60%);filter:none}
form{display:grid;gap:18px}
label{display:grid;gap:6px;font:700 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
input,select,textarea{font:400 1rem var(--sans);color:var(--night);background:#fffaf0;border:0;border-bottom:2px solid var(--terra);padding:11px 10px;border-radius:0;width:100%;letter-spacing:0;text-transform:none}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--ochre);outline-offset:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.note-f{min-height:1.6em;font-weight:700;color:#2d5a2e}
@media (max-width:820px){.contact .grid,.two{grid-template-columns:1fr}}
footer{background:var(--night);color:#d9c6c0;padding:20px 0 44px;font-size:.88rem}
footer .row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .logo{color:var(--paper)}
footer .credit{margin-top:34px;padding-top:20px;border-top:1px solid rgba(251,241,225,.2);font-size:.82rem;max-width:80ch}

/* reveal */
.rv{opacity:0;transform:translateY(32px)}
.noanim .rv{opacity:1;transform:none}

/* inner page */
.mini{position:relative;height:calc(var(--h,330px) + 78svh);min-height:640px;overflow:hidden;background:var(--plum);isolation:isolate}
.mini .hero-copy{top:auto;bottom:calc(var(--h,330px) + 15svh);text-align:left;max-width:var(--max);margin:0 auto}
.mini .hero-copy h1{margin:0}
.mini .hero-copy p.lede{margin:18px 0 0}
.mini .layers{inset:0}
.facts{background:var(--paper);padding:30px 0 clamp(50px,7vw,100px)}
.facts dl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:2px solid var(--night);padding-top:20px}
.facts dt{font:700 .7rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
.facts dd{font:400 1.5rem/1.1 var(--serif);margin-top:6px}
@media (max-width:760px){.facts dl{grid-template-columns:1fr 1fr}}
.prose{background:var(--paper);padding-bottom:clamp(60px,8vw,110px)}
.prose .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px);align-items:start}
.prose h2{font-size:clamp(2.2rem,4.6vw,4.2rem);margin-bottom:20px}
.prose p+p{margin-top:1em}
.prose figure{transform:rotate(1.2deg);background:#fffaf0;padding:14px;box-shadow:0 18px 30px -14px rgba(74,39,64,.55)}
.prose figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:820px){.prose .grid{grid-template-columns:1fr}}
.courses{background:var(--paper2);padding-bottom:clamp(60px,8vw,110px)}
.courses ol{list-style:none;padding:0;counter-reset:c;display:grid;gap:0;max-width:880px}
.courses li{counter-increment:c;display:grid;grid-template-columns:70px 1fr;gap:20px;padding:22px 0;border-top:1.5px solid rgba(42,22,48,.35)}
.courses li::before{content:counter(c);font:400 3.4rem/.9 var(--serif);color:var(--terra)}
.courses li h3{font-size:1.7rem;margin-bottom:4px}
details{border-top:1.5px solid rgba(42,22,48,.35);padding:16px 0}
details:last-of-type{border-bottom:1.5px solid rgba(42,22,48,.35)}
summary{cursor:pointer;font:400 1.45rem/1.2 var(--serif);list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::after{content:"+";color:var(--terra)}
details[open] summary::after{content:"\2212"}
details p{margin-top:10px;max-width:60ch}

@media (prefers-reduced-motion:reduce){.sunglow,.cloud,.scroll i{animation:none}}

.mini .sky{inset:-2% -2%}.mini .hero-copy{padding:0 var(--pad)}.mini h1{font-size:clamp(2.8rem,7vw,6.6rem);max-width:12em;text-align:left}.mini .tag{margin-bottom:16px}
.mini .lede{max-width:46ch}
.mini .hero-copy{left:50%;right:auto;translate:-50% 0;width:100%;max-width:var(--max)}

.courses .grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,6vw,90px);align-items:start}
.courses figure{position:sticky;top:110px;transform:rotate(1.4deg);background:#fffaf0;padding:14px 14px 18px;box-shadow:0 18px 30px -14px rgba(74,39,64,.55)}
.courses figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.courses figcaption{padding-top:10px;font-size:.92rem}
@media (max-width:820px){.courses .grid{grid-template-columns:1fr}.courses figure{position:relative;top:0}}
@media (max-width:760px){.cloud:first-child{top:9%!important}}