:root{
  --paper:#f3efe6;--paper2:#ebe5d8;--ink:#171614;--ink2:#2a2824;--mute:#5f5a50;--line:#d6cfbf;--hair:rgba(23,22,20,.18);
  --acc:#d9de6c;--acc-ink:#6f7314;--red:#a33232;
  --b1:#d9de6c;--b1d:#171614;--b2:#82c0a2;--b2d:#c8952a;--b3:#eda43a;--b3d:#1a9bf0;--b4:#b7d86c;--b4d:#5f9a2e;--b5:#8b8b3d;--b5d:#c99a12;--b6:#d98852;--b6d:#a33232;--guide:#3696cf;
  --display:"Oswald","Arial Narrow",Impact,sans-serif;--body:"Source Serif 4","Georgia",serif;--ui:"Inter","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:740px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:.01em;text-wrap:balance;margin:0 0 .4em;text-transform:uppercase}
h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:700}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:1.35rem}
p{margin:0 0 1.05em}
.kicker{font:600 .78rem/1.2 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0 0 14px;display:block}
.lede{font-size:1.25rem;color:var(--ink2)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 .95rem/1 var(--ui);text-decoration:none;padding:15px 22px;border-radius:2px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.acc{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(243,239,230,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{font:700 1.15rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{font:600 .78rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:10px 10px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--ink)}
.menu{display:none;background:none;border:1px solid var(--ink);font:600 .8rem var(--ui);letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;cursor:pointer;color:var(--ink)}
@media (max-width:900px){.menu{display:block}.nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;padding:8px max(20px,env(safe-area-inset-left,0px)) 16px}.nav.open{display:flex}.nav a{padding:14px 0;border-bottom:1px solid var(--line)}}
/* strings decoration */
.strings{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.strings i{position:absolute;top:0;width:1px;background:linear-gradient(var(--hair),rgba(23,22,20,0));transform-origin:top;animation:sway 7s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.strings i{animation:none}}
/* hero */
.hero{position:relative;padding:56px 0 30px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px;align-items:center;position:relative}
.hero .art{position:relative}
.hero .art img{width:100%;max-width:540px;margin:0 auto;filter:contrast(1.05)}
.quote{border-left:3px solid var(--ink);padding:4px 0 4px 18px;margin:26px 0 0;font-style:italic;color:var(--ink2);font-size:1.08rem}
.quote small{display:block;font:500 .78rem var(--ui);font-style:normal;color:var(--mute);margin-top:6px;letter-spacing:.04em}
@media (max-width:860px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.hero .art{order:-1}.hero .art img{max-width:220px}.hero{padding-top:28px}}
/* band */
.band{background:var(--ink);color:var(--paper);padding:20px 0}
.band .wrap{display:flex;gap:14px 28px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.band b{font:700 1.5rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--acc)}
.band span{font:500 1rem var(--ui)}
.note{font:500 .85rem/1.5 var(--ui);color:var(--mute);background:var(--paper2);border:1px solid var(--line);padding:12px 16px;margin:0}
section.s{padding:84px 0;position:relative}
section.alt{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* tenets */
.tenets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.tenet{position:relative;display:block;text-decoration:none;color:var(--ink);aspect-ratio:3/4;overflow:hidden;background:#fff;border:1px solid var(--ink);outline-offset:4px}
.tenet .img{position:absolute;inset:0;background:url(media/puppeteer-paper.jpg) no-repeat;transition:transform .6s ease}
.tenet.t1 .img{background-size:250%;background-position:72% 6%}
.tenet.t2 .img{background-size:230%;background-position:58% 64%}
.tenet.t3 .img{background-size:240%;background-position:4% 30%}
.tenet .tint{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.55}
.t1 .tint{background:var(--b1)}.t2 .tint{background:var(--b3)}.t3 .tint{background:var(--b6)}
.tenet .lbl{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;background:var(--ink);color:var(--paper);transform:translateY(calc(100% - 78px));transition:transform .45s ease}
.tenet .lbl h3{font-size:2rem;margin:0 0 12px;color:var(--paper)}
.tenet .lbl h3 small{display:block;font:600 .72rem var(--ui);letter-spacing:.2em;color:var(--acc);margin-bottom:6px}
.tenet .lbl p{font-size:.98rem;line-height:1.5;margin:0 0 12px;color:#e7e2d6}
.tenet .lbl em{font:700 .82rem var(--ui);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
@media (hover:hover){.tenet:hover .lbl,.tenet:focus-visible .lbl{transform:none}.tenet:hover .img{transform:scale(1.05)}}
@media (hover:none){.tenet .lbl{transform:none}}
@media (max-width:860px){.tenets{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px}.tenet{flex:0 0 82%;scroll-snap-align:center}.tenet .lbl{transform:none}}
.dots{display:none;justify-content:center;gap:8px;margin-top:10px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--ink)}
@media (max-width:860px){.dots{display:flex}}
/* video */
.video{border:1px solid var(--ink);background:#000;aspect-ratio:16/9;width:100%}
.video video{width:100%;height:100%;display:block}
/* books */
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:26px 20px}
.book{display:flex;flex-direction:column;gap:12px;min-width:0}
.cover{position:relative;aspect-ratio:2/3;background:#fff url(media/puppeteer-paper.jpg) no-repeat center 8%/118%;border:1px solid #bdb6a6;box-shadow:6px 8px 0 rgba(23,22,20,.12);overflow:hidden;container-type:inline-size}
.cover .band2{position:absolute;left:0;right:0;top:61%;height:20%;background:var(--c);opacity:.86;mix-blend-mode:multiply}
.cover .t{position:absolute;left:5%;right:3%;top:62.5%;white-space:nowrap;font:700 10.6cqw/1 var(--display);color:#fff;text-transform:uppercase;text-shadow:2px 2px 0 rgba(0,0,0,.35);letter-spacing:.01em}
.cover .n{position:absolute;left:5%;top:73%;font:500 8cqw/1 var(--ui);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.35)}
.cover .a{position:absolute;left:0;right:0;top:81%;height:5.5%;background:var(--d);color:#fff;font:600 5.6cqw/1 var(--ui);letter-spacing:.06em;display:flex;align-items:center;padding-left:5%}
.cover.guide{background:#fff url(media/puppeteer-paper.jpg) no-repeat center 140%/110%}
.cover.guide .gb{position:absolute;left:0;right:0;top:0;height:52%;background:var(--guide);color:#fff;padding:7% 6%;font:300 12.5cqw/1.02 var(--ui)}
.cover.guide .gb small{display:block;font:500 5.4cqw var(--ui);margin-top:12%}
.cover.guide .a{top:52%;background:#0d0d0d}
.book h3{font-size:1.05rem;margin:0}
.book p{font:400 .9rem/1.45 var(--ui);color:var(--mute);margin:0}
.buy{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.buy a{font:700 .78rem/1 var(--ui);text-decoration:none;padding:10px 12px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper)}
.buy a.pb{background:transparent;color:var(--ink)}
.ku{font:700 .66rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;background:var(--acc);padding:5px 7px;align-self:flex-start}
.feature>div>.cover{max-width:300px;margin:0 auto}
.feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center}
@media (max-width:820px){.feature{grid-template-columns:minmax(0,1fr)}}
/* principles */
.princ{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.pc{background:#fbf9f4;border:1px solid var(--line);border-top:5px solid var(--c,var(--ink));padding:22px 22px 18px;min-width:0}
.pc .no{font:700 2.4rem/1 var(--display);color:var(--c,var(--ink));opacity:.9}
.pc h3{margin:8px 0 10px;font-size:1.2rem}
.pc p{font-size:.98rem;line-height:1.55;margin:0;color:var(--ink2)}
/* reading */
.read h2{margin-top:1.6em}
.read h2:first-child{margin-top:0}
.read blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--acc-ink);font-style:italic;color:var(--ink2)}
.read .sig{font:600 .85rem var(--ui);color:var(--mute);letter-spacing:.06em}
.drop::first-letter{font:700 4.1rem/.82 var(--display);float:left;padding:6px 10px 0 0}
.pagehead{padding:64px 0 34px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pagehead .wrap{position:relative}
.chip{display:inline-block;font:700 .72rem/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;padding:7px 10px;background:var(--c,var(--acc));margin-bottom:16px}
/* forms */
form.f{display:grid;gap:12px;max-width:640px}
form.f label{font:600 .8rem var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);display:grid;gap:6px}
form.f input,form.f select,form.f textarea{font:400 1rem/1.4 var(--ui);padding:13px 14px;border:1.5px solid var(--ink);background:#fffdf8;color:var(--ink);border-radius:0;width:100%}
form.f .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:560px){form.f .row{grid-template-columns:minmax(0,1fr)}}
.hp{position:absolute;left:-9999px}
.ok{font:600 .95rem var(--ui);color:#2f6b2f}.bad{font:600 .95rem var(--ui);color:var(--red)}
.fine{font:400 .85rem/1.5 var(--ui);color:var(--mute)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
@media (max-width:820px){.two{grid-template-columns:minmax(0,1fr)}}
.map{border:1px dashed var(--ink);padding:28px;background:#fbf9f4}
/* footer */
footer{background:var(--ink);color:#cfc9bc;padding:48px 0 calc(40px + env(safe-area-inset-bottom,0px));font:400 .9rem/1.6 var(--ui)}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:30px}
footer h4{font:700 .78rem var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
footer a{display:block;text-decoration:none;color:#e9e4d8;padding:3px 0}
footer .brandf{font:700 1.4rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:10px}
@media (max-width:760px){footer .wrap{grid-template-columns:minmax(0,1fr)}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}