:root{--lime:#F3EEE5;--plaster:#E6DDCF;--stone:#B9A993;--ink:#29241F;--soft:#5E544A;--oak:#80532B;--line:rgba(41,36,31,.16);--pan:max(300px,calc(100svh - 133.34vw));--g:20px;
--d:"Bodoni Moda",Georgia,serif;--b:"Jost",system-ui,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--lime);color:var(--ink);font:400 17px/1.55 var(--b);overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}a{color:inherit}
h1,h2,h3{font-family:var(--d);font-weight:500;line-height:1.04;margin:0;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--oak);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px}
/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:10px var(--g);transition:background .3s}
.hd::before{content:"";position:absolute;inset:0 0 -24px;background:linear-gradient(rgba(243,238,229,.62),rgba(243,238,229,0));z-index:-1;transition:opacity .3s;pointer-events:none}
.hd.solid{background:var(--lime);box-shadow:0 1px 0 var(--line)}.hd.solid::before{opacity:0}
.logo{text-decoration:none;display:flex;flex-direction:column;line-height:1;min-height:44px;justify-content:center}
.logo b{font:500 15px/1 var(--d);letter-spacing:.2em}.logo i{font:400 9.5px/1 var(--b);letter-spacing:.42em;margin-top:5px}
.nav{display:none;gap:30px;font-size:15px;letter-spacing:.04em}.nav a{text-decoration:none;padding:12px 0}.nav a[aria-current]{border-bottom:1px solid var(--ink)}
.hr{display:flex;gap:8px;align-items:center}
.call{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--ink);color:var(--lime);text-decoration:none;font-size:15px;letter-spacing:.03em}
.mb{min-height:44px;min-width:44px;background:none;border:1px solid var(--ink);color:var(--ink);font:400 15px var(--b);padding:0 12px;cursor:pointer}
.sheet{position:fixed;inset:0;z-index:29;background:var(--lime);padding:96px var(--g) 30px;display:none;flex-direction:column;gap:2px}
.sheet.open{display:flex}.sheet a{font:500 38px/1.25 var(--d);text-decoration:none;min-height:56px}
.sheet small{margin-top:auto;font-size:16px;color:var(--soft)}
/* hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--lime)}
.still{position:absolute;left:0;top:calc(100svh - var(--pan) - 133.34vw);width:100vw;height:133.34vw;object-fit:cover;max-width:none}
.poster,.gl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;display:none}
.anim .poster{display:block}.anim .gl{display:block}
.panel{position:absolute;left:0;right:0;bottom:0;height:var(--pan);background:var(--lime);padding:20px var(--g) 18px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.anim .panel>*{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.anim .panel.on>*{opacity:1;transform:none}.anim .panel.on>*:nth-child(2){transition-delay:.08s}.anim .panel.on>*:nth-child(3){transition-delay:.2s}.anim .panel.on>*:nth-child(4){transition-delay:.3s}
.eb{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--oak);font-weight:500}
.panel h1{font-size:clamp(50px,14.6vw,112px);line-height:.98}
.panel p.s{color:var(--soft);font-size:17px;line-height:1.4;max-width:30em}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;background:var(--ink);color:var(--lime);text-decoration:none;font:400 16px var(--b);letter-spacing:.03em;border:1px solid var(--ink);cursor:pointer}
.btn.ghost{background:none;color:var(--ink)}
/* rhythm */
.wrap{padding:0 var(--g);max-width:1280px;margin:0 auto}
section{padding:64px 0}
.lead{font:500 clamp(38px,10.8vw,84px)/1.04 var(--d)}
.lead em{font-style:italic;font-weight:400}
.body{max-width:34em;color:var(--soft);margin-top:18px}
figure{margin:0}
figcaption{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:9px 0 0;border-top:0;color:var(--soft)}
figcaption b{font-weight:500;color:var(--ink)}
.rake{position:relative;overflow:hidden;display:block;background:var(--plaster)}
.rake img{width:100%}
.rake::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:60%;background:linear-gradient(100deg,rgba(255,244,222,0),rgba(255,244,222,.34),rgba(255,244,222,0));transform:translateX(0);pointer-events:none}
.rake.in::after{transform:translateX(420%);transition:transform 1.7s cubic-bezier(.3,.1,.3,1)}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
/* run */
.run{display:grid;gap:34px}
.run .off{margin-left:18vw}.run .in-r{margin-right:18vw}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.pair figure:nth-child(2){margin-bottom:34px}
.more{display:inline-block;margin-top:26px;font-size:17px;padding:10px 0;border-bottom:1px solid var(--ink);text-decoration:none}
/* dark moment */
.vein{background:#191512;color:#F3EEE5;padding:0;position:relative}
.vein .vbox{position:relative;height:118vw;max-height:88svh;overflow:hidden;background:#191512}
.vein video,.vein .vp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.vein video{opacity:0;transition:opacity .4s}.vein video.hs-on{opacity:1}
.hs-fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}.hs-fb.hs-on{opacity:1}
.vein .t{padding:30px var(--g) 42px}
.vein h2{font-size:clamp(38px,10.4vw,76px)}.vein p{color:#D8CFC2;margin-top:12px;max-width:32em}
/* box */
.box{background:var(--plaster)}
.split{display:grid;gap:26px}
/* start chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;min-height:46px;padding:0 15px;border:1px solid var(--ink);background:none;color:var(--ink);font:400 16px var(--b);text-decoration:none;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:var(--lime)}
/* contact */
.ct a.big{display:block;font:400 clamp(38px,11vw,76px)/1.2 var(--b);text-decoration:none}
.ct a.mail{font-size:19px;display:inline-block;padding:10px 0}
/* page head */
.ph{padding-top:112px;padding-bottom:28px}.ph h1{font-size:clamp(46px,13vw,104px)}.ph p{color:var(--soft);margin-top:14px;max-width:32em}
/* sample book */
.book{display:grid;gap:0;border-top:1px solid var(--line)}
.smp{display:grid;grid-template-columns:38% 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.smp .rake{aspect-ratio:4/5}.smp .rake img{height:100%;object-fit:cover}
.smp h2{font-size:27px;margin-bottom:6px}.smp p{font-size:16px;color:var(--soft);line-height:1.42}
.smp .use{font-size:13.5px;letter-spacing:.04em;color:var(--oak);margin-top:8px;display:block}
.smp a{display:inline-flex;align-items:center;min-height:44px;font-size:16px}
/* work */
.fl{position:sticky;top:64px;z-index:5;background:var(--lime);padding:8px 0;margin:0 0 10px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.fl::-webkit-scrollbar{display:none}.fl .chip{white-space:nowrap;flex:none}
.mas{columns:2;column-gap:12px}.mas figure{break-inside:avoid;margin-bottom:18px}
.mas figure[hidden]{display:none}
.mas figcaption{display:block;font-size:13.5px;line-height:1.3}
.reel{position:relative;background:#191512;margin-top:30px}
.reel video{width:100%}.play{position:absolute;inset:auto auto 16px 16px}
/* steps */
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line);margin-top:26px}
.steps li{list-style:none;padding:16px 0 16px 46px;border-bottom:1px solid var(--line);position:relative;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:10px;font:500 30px var(--d);color:var(--oak)}
.steps b{font-weight:500}
.steps{padding:0}
.tick{padding:0;margin:20px 0 0;list-style:none;display:grid;gap:8px}.tick li{padding-left:20px;position:relative}.tick li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--oak)}
/* tool */
.tool{display:grid;gap:30px}
fieldset{border:0;padding:0;margin:0 0 24px}legend{font:500 23px/1.2 var(--d);padding:0;margin-bottom:10px}
label.f{display:block;font-size:15px;margin-top:12px}
select,textarea,input[type=text]{width:100%;font:400 17px var(--b);padding:12px;border:1px solid var(--ink);background:#FBF8F2;color:var(--ink);border-radius:0;min-height:48px;margin-top:5px}
.sch{background:#FBF8F2;border:1px solid var(--line);padding:18px}
.sch h2{font-size:26px;margin-bottom:10px}
.sch dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15.5px}.sch dt{color:var(--soft)}.sch dd{margin:0}
.sch .btns{margin-top:16px}.sch .btn{flex:1 1 130px}
.note{font-size:14.5px;color:var(--soft);margin-top:10px}
/* footer */
.ft{background:var(--ink);color:#EDE6DA;padding:44px 0 30px}.ft a{color:inherit}
.ft .g{display:grid;gap:22px}.ft b.n{font:500 24px var(--d);letter-spacing:.14em;display:block}
.ft p{font-size:15.5px;color:#CFC6B8}.ft ul{list-style:none;margin:0;padding:0}.ft li a{display:inline-flex;min-height:40px;align-items:center;text-decoration:none}
.cr{margin-top:26px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:14px;color:#CFC6B8;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(min-width:900px){
:root{--g:44px;--pan:0px}
.nav{display:flex}.mb{display:none}.hd{padding:12px var(--g)}
.still{left:auto;right:0;top:0;width:75svh;height:100svh;min-width:0}
.hero{--pw:calc(100vw - 75svh)}
.panel{right:auto;top:0;height:auto;width:calc(100vw - 75svh);padding:90px 48px 40px var(--g);gap:16px}
.panel h1{font-size:min(9.2vw,calc((100vw - 75svh)/4.4))}
section{padding:110px 0}
.run{grid-template-columns:repeat(12,1fr);gap:40px 24px}
.run>.a{grid-column:1/8}.run>.b{grid-column:9/13;align-self:end}.run>.c{grid-column:2/7}.run>.d{grid-column:7/13}
.run .off,.run .in-r{margin:0}
.vein{display:grid;grid-template-columns:1fr 1fr;align-items:center}.vein .vbox{height:88svh;max-height:none}.vein .t{padding:60px}
.split{grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.book{grid-template-columns:1fr 1fr;column-gap:40px}
.mas{columns:3;column-gap:18px}
.tool{grid-template-columns:1.2fr .8fr;align-items:start}.sch{position:sticky;top:90px}
.ft .g{grid-template-columns:2fr 1fr 1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}.rake::after{display:none}}

/* review */
.gl{opacity:0}
.anim .panel{transform:translateY(100%)}
.fl{flex-wrap:wrap;overflow:visible}
h1,h2,.lead{font-kerning:normal;text-rendering:optimizeLegibility}
.hd::before{background:linear-gradient(rgba(243,238,229,.86),rgba(243,238,229,0))}
@media(min-width:900px){.anim .panel{transform:translateX(-100%)}}
.kw{margin-right:-.14em}