:root{--paper:#F2EADB;--paper2:#E9DEC9;--ink:#1B1714;--ink2:#4A423B;--red:#A3261B;--jade:#2E6553;--gold:#B88A3B;
--serif:'Fraunces',Georgia,'Times New Roman',serif;--sans:'Be Vietnam Pro',system-ui,sans-serif;--pad:clamp(20px,5vw,72px);--ease:cubic-bezier(.22,.8,.2,1)}
*{box-sizing:border-box;margin:0}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
body{font:400 clamp(16px,1.1vw,18px)/1.65 var(--sans);overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--red);color:var(--paper)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:12px 16px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* type */
.display{font-family:var(--serif);font-weight:340;font-variation-settings:'opsz' 144;font-size:clamp(52px,9.6vw,168px);line-height:.92;letter-spacing:-.035em}
.display em,.h2 em{font-style:italic;font-weight:300;color:var(--red)}
.h2{font-family:var(--serif);font-weight:360;font-variation-settings:'opsz' 120;font-size:clamp(36px,5.4vw,84px);line-height:1;letter-spacing:-.025em;max-width:16ch}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,76px);line-height:1;letter-spacing:-.02em}
.num{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,30px);color:var(--red);margin-bottom:18px}
.lead{font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:var(--ink2);max-width:34ch}
.note{color:var(--ink2);max-width:52ch}
q{quotes:"“" "”"}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:24px;padding:14px var(--pad);transition:background .4s,box-shadow .4s}
.nav.solid{background:rgba(242,234,219,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(27,23,20,.08)}
.logo{font-family:var(--serif);font-size:26px;text-decoration:none;letter-spacing:-.02em;min-height:44px;display:inline-flex;align-items:center}
.logo i,.foot-mark i{color:var(--red);font-weight:300;padding:0 1px}
.menu{display:flex;gap:28px;margin-left:auto}
.menu a{min-width:44px;justify-content:center;text-decoration:none;font-size:15px;min-height:44px;display:inline-flex;align-items:center;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.pill{min-height:44px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:15px;font-weight:500;transition:background .3s}
.pill:hover{background:var(--red)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 30px;border-radius:999px;background:var(--red);color:var(--paper);text-decoration:none;font-weight:500;font-size:17px;transition:background .3s,transform .3s var(--ease)}
.btn:hover{background:var(--ink);transform:translateY(-2px)}
.btn span{transition:transform .3s var(--ease)}.btn:hover span{transform:translateX(4px)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink)}.btn-light:hover{background:var(--red);color:var(--paper)}
.quiet{display:inline-flex;align-items:center;min-height:48px;margin-left:20px;font-family:var(--serif);font-style:italic;font-size:19px;text-underline-offset:6px}
/* hero */
.hero{padding:clamp(110px,14vh,150px) var(--pad) clamp(60px,8vw,120px)}
.hero-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--ink2);border-bottom:1px solid rgba(27,23,20,.18);padding-bottom:14px;margin-bottom:clamp(28px,4vw,56px)}
.hero h1{position:relative;z-index:2}
.hero-stage{display:grid;grid-template-columns:1.9fr 1fr;gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(28px,4vw,56px)}
.frame{position:relative;overflow:hidden;border-radius:2px;background:var(--ink)}
.frame-media{width:100%;aspect-ratio:16/9;object-fit:cover}
.frame figcaption{position:absolute;left:16px;bottom:12px;color:#fff;font-family:var(--serif);font-style:italic;font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero-side .lead{margin-bottom:28px}
.alt-contact{margin-top:28px;color:#E7DDCC;font-size:16px}.alt-contact a{display:inline-flex;min-height:44px;align-items:center;text-underline-offset:5px}
@media (min-width:901px){
 .hero{display:grid;grid-template-columns:1.55fr 1fr;column-gap:clamp(24px,4vw,64px);align-items:end;padding-top:clamp(96px,13vh,130px)}
 .hero-meta{grid-column:1/-1}.hero-stage{display:contents}
 .hero h1{grid-column:1;grid-row:2;font-size:clamp(52px,6.6vw,128px)}
 .hero-side{grid-column:2;grid-row:2;padding-bottom:.4em}
 .hero-side .lead{font-size:clamp(17px,1.35vw,22px);margin-bottom:22px}
 .frame{grid-column:1/-1;grid-row:3;margin-top:clamp(28px,4vw,56px)}
}
@media (min-width:901px) and (max-height:700px){.hero-meta{margin-bottom:20px;padding-bottom:10px}.hero h1{font-size:clamp(52px,6vw,96px)}}
/* chapters */
.chapter{padding:clamp(80px,12vw,180px) var(--pad)}
.problem .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin:clamp(40px,5vw,72px) 0;max-width:1200px}
.problem .cols p{border-top:1px solid var(--ink);padding-top:18px;color:var(--ink2)}
.problem .cols p::first-line{color:var(--ink);font-weight:500}
.pull{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(26px,3.2vw,48px);line-height:1.2;max-width:24ch;margin-left:auto;color:var(--jade);text-indent:-.4em}
.pull::before{content:"“"}
/* work */
.work{background:var(--ink);color:var(--paper);padding:clamp(80px,12vw,180px) 0}
.work .num{color:#E07A5F}
.work-head{padding:0 var(--pad);margin-bottom:clamp(56px,8vw,120px)}
.work .note{color:#CFC4B2;margin-top:24px}.work .note b{color:var(--paper)}
.piece{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;padding:0 var(--pad);margin-bottom:clamp(80px,10vw,160px)}
.piece-flip{grid-template-columns:1fr 1.6fr}.piece-flip .piece-media{order:2}
.piece-media{overflow:hidden;border-radius:2px}
.piece-media video,.piece-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transform:scale(1.08)}
.piece-text p{color:#D8CEBD;margin-bottom:18px;max-width:42ch}
.piece-text .place{font-family:var(--serif);font-style:italic;color:#B9AD99;margin:8px 0 22px}
.tag{font-size:12px;letter-spacing:.14em;color:#E07A5F!important;font-weight:600}
.work .btn-line{color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper);margin-top:8px}
.work .btn-line:hover{background:var(--paper);color:var(--ink)}
.strip{display:flex;gap:clamp(12px,2vw,28px);padding:0 var(--pad);margin-bottom:clamp(80px,10vw,160px);align-items:flex-end}
.strip img{height:clamp(160px,26vw,420px);width:auto;object-fit:cover;flex:0 1 auto;min-width:0}
.strip img:nth-child(2){height:clamp(120px,18vw,300px)}
/* calc */
.tab{background:var(--paper2)}
.receipt{max-width:640px;margin:clamp(40px,5vw,64px) auto 0;background:var(--paper);padding:clamp(24px,4vw,48px);border-radius:2px;position:relative;box-shadow:0 30px 60px -30px rgba(27,23,20,.35)}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:radial-gradient(circle at 10px 0,var(--paper) 7px,transparent 7.5px) 0 0/20px 10px}
.receipt label{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin-bottom:22px;font-size:15px;color:var(--ink2)}
.receipt output{font-family:var(--serif);font-size:22px;color:var(--ink)}
.receipt input{grid-column:1/-1;width:100%;height:44px;accent-color:var(--red);cursor:pointer}
.total{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px dashed var(--ink2);border-bottom:1px dashed var(--ink2);padding:22px 0;margin-top:8px}
.total span{display:block;font-size:13px;color:var(--ink2)}
.total b{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,60px);color:var(--red);line-height:1.1}
.formula{font-size:13px;color:var(--ink2);margin-top:16px}
.reset{margin-top:12px;min-height:44px;min-width:44px;padding:0 16px;border:0;background:none;font:italic 17px var(--serif);text-decoration:underline;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.reset.on{opacity:1;pointer-events:auto}
/* approach */
.trio{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px);margin:clamp(48px,6vw,96px) 0}
.trio li{padding-top:20px;border-top:1px solid var(--ink)}
.roman{font-family:var(--serif);font-style:italic;font-size:clamp(56px,6vw,96px);line-height:1;color:var(--red);display:block;margin-bottom:12px}
.trio h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1.15;margin-bottom:12px}
.trio p{color:var(--ink2)}
.steps{max-width:820px;margin-left:auto;display:grid;gap:22px;font-size:clamp(18px,1.4vw,21px)}
.steps b{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--jade);font-size:1.2em}
/* studio */
.studio{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,120px);align-items:center;padding:clamp(80px,12vw,180px) var(--pad);background:var(--jade);color:var(--paper)}
.studio .num{color:#F2C9A0}.studio p{max-width:46ch;margin-top:20px;color:#E4EDE7}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.15) contrast(1.05);border-radius:999px 999px 2px 2px}
/* faq */
.qs{max-width:900px;margin:clamp(40px,5vw,72px) 0 0 auto}
details{border-top:1px solid rgba(27,23,20,.25)}details:last-child{border-bottom:1px solid rgba(27,23,20,.25)}
summary{list-style:none;cursor:pointer;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--serif);font-size:clamp(20px,1.8vw,26px)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:28px;color:var(--red);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 24px;color:var(--ink2);max-width:60ch}
/* contact */
.contact{position:relative;min-height:90vh;display:grid;place-items:center;text-align:center;color:var(--paper);overflow:hidden;background:var(--ink)}
.contact-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.contact-in{position:relative;padding:120px var(--pad)}
.contact .display em{color:#F0A27F}
.contact .lead{color:#E7DDCC;margin:28px auto 36px}
/* footer */
.foot{padding:56px var(--pad) 110px;display:grid;gap:8px;color:var(--ink2);font-size:15px}
.foot-mark{font-family:var(--serif);font-size:44px;color:var(--ink);letter-spacing:-.02em}
.foot a{display:inline-flex;min-height:44px;align-items:center}
.sticky-cta{position:fixed;left:16px;right:16px;bottom:16px;z-index:55;min-height:52px;display:none;align-items:center;justify-content:center;border-radius:999px;background:var(--red);color:var(--paper);text-decoration:none;font-weight:500;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transform:translateY(150%);transition:transform .4s var(--ease)}
.sticky-cta.show{transform:none}
/* motion gate */
.motion .reveal{opacity:0;transform:translateY(28px)}
.motion-ready .reveal,.reveal.in{opacity:1!important;transform:none!important;transition:opacity .9s var(--ease),transform .9s var(--ease)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.piece-media video,.piece-media img{transform:none}}
/* responsive */
@media (max-width:900px){
 .menu{display:none}.pill{margin-left:auto}
 .hero-stage,.piece,.piece-flip,.studio{grid-template-columns:1fr}
 .piece-flip .piece-media{order:0}
 .hero-stage{margin-top:28px}
 .problem .cols,.trio{grid-template-columns:1fr}
 .strip img:nth-child(3){display:none}
 .sticky-cta{display:flex}
 .portrait{max-width:420px}
}
@media (max-width:480px){.hero-meta span:last-child{display:none}.frame-media{aspect-ratio:4/3}.quiet{margin-left:12px}.pill{padding:0 16px;font-size:14px}.btn{padding:0 24px;font-size:16px}}