@font-face{font-family:"Caslon";src:url(/assets/pv-LibreCaslonDisplay-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(/assets/pv-Archivo-normal.woff2?v=2) format("woff2");font-weight:400 600;font-stretch:96% 115%;font-display:swap}
@font-face{font-family:"Archivo";src:url(/assets/pv-Archivo-italic.woff2?v=2) format("woff2");font-weight:400;font-stretch:96%;font-style:italic;font-display:swap}
:root{
  --ink:#1c1d1a;
  --ink-2:#5d5f58;
  --paper:#ffffff;
  --line:#e4e2dc;
  --tint:#f4f2ee;
  --green:#1f4a38;
  --gold:#a8812f;
  --red:#6f2229;
  --wrap:1360px;
  --gut:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:var(--ink-2) var(--paper);-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 16px/1.6 "Archivo",system-ui,sans-serif;font-stretch:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--green);color:#fff}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
h1,h2{font-family:"Caslon",Georgia,serif;font-weight:400;letter-spacing:-.01em;text-wrap:balance;line-height:1.04}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

.bar{background:var(--tint);color:var(--ink);text-align:center;font-size:13.5px;padding:8px 16px}
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:18px var(--gut);
  border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:5}
.logo{display:flex;align-items:center;gap:12px;font-family:"Caslon",Georgia,serif;font-size:25px;letter-spacing:.005em}
.nav{display:flex;gap:clamp(18px,3vw,40px)}
.nav a{white-space:nowrap}
.tools .order{font-size:15px;font-weight:500;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.nav a{font-size:12.5px;font-weight:500;font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.nav a:hover,.tools .order:hover{background-size:100% 1px}
.tools{display:flex;justify-content:flex-end;align-items:center;gap:22px}
.icon{display:grid;place-items:center;width:40px;height:40px;margin-right:-10px}

.hero-text{max-width:var(--wrap);margin:0 auto;padding:clamp(32px,4.5vw,64px) var(--gut) clamp(28px,3.5vw,44px);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,5vw,80px);align-items:end}
.hero h1{font-size:clamp(44px,6.4vw,92px);letter-spacing:-.02em}
.hero-side p{color:var(--ink-2);max-width:40ch}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:24px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;background:var(--ink);color:var(--paper);
  font-size:15.5px;font-weight:500;font-stretch:108%;border-radius:1px;
  transition:background-color .25s}
.btn:hover{background:var(--green)}
.link{display:inline-flex;align-items:center;gap:10px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:5px;text-decoration-color:var(--line);transition:text-decoration-color .25s}
.link:hover{text-decoration-color:currentColor}
.link svg{transition:transform .35s var(--ease)}
.link:hover svg{transform:translateX(4px)}
.hero-img{display:block;overflow:hidden;background:var(--red)}
.hero-img img{width:100%;max-height:80vh;object-fit:cover;object-position:50% 50%;animation:settle 1.8s var(--ease) both}
@keyframes settle{from{transform:scale(1.045);filter:blur(3px)}to{transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.hero-img img{animation:none}}

.block{padding-top:clamp(64px,9vw,128px)}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(24px,3vw,40px)}
.head h2{font-size:clamp(30px,3.6vw,52px);max-width:22ch}
.count{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(14px,2vw,28px)}
.card{display:block}
.ph{display:block;overflow:hidden;background:var(--line)}
.ph img{width:100%;transition:transform .9s var(--ease)}
.card:hover .ph img,.col:hover .ph img{transform:scale(1.03)}
.nm{display:block;margin-top:14px;font-size:15.5px;line-height:1.35;font-weight:500}
.meta{display:flex;gap:12px;align-items:baseline;margin-top:4px;font-size:14px;color:var(--ink-2)}
.pr{font-variant-numeric:tabular-nums}
.note{color:var(--ink);font-style:italic;font-stretch:96%}

.cols{--cg:clamp(14px,2vw,28px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,3.5vw,44px) var(--cg)}
.cols>li{flex:0 0 calc((100% - 2 * var(--cg)) / 3);min-width:0}
.col .cn{display:block;margin-top:16px;font-family:"Caslon",Georgia,serif;font-size:clamp(26px,2.4vw,34px);line-height:1.1}
.col .cc{font-size:14px;color:var(--ink-2)}
.col .ph img{aspect-ratio:4/3;object-fit:cover}

.fill{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);margin-top:clamp(72px,10vw,144px);background:var(--tint)}
.fill-img img{width:100%;height:100%;object-fit:cover}
.fill-text{padding:clamp(32px,5vw,80px);align-self:center}
.fill-text h2{font-size:clamp(32px,3.6vw,52px);margin-bottom:20px}
.fill-text p{color:var(--ink-2);max-width:44ch}

.about{padding-top:clamp(72px,10vw,144px);padding-bottom:clamp(72px,10vw,144px)}
.about p{font-family:"Caslon",Georgia,serif;font-size:clamp(24px,2.5vw,34px);line-height:1.3;max-width:34ch}
.about a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

.foot{background:var(--tint);color:var(--ink);padding:clamp(48px,6vw,80px) 0 28px}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:32px}
.fbrand{display:flex;align-items:center;gap:14px;font-family:"Caslon",Georgia,serif;font-size:28px}
.fbrand img{background:#fff;border-radius:50%}
.foot h2{font-size:22px;color:var(--ink);margin-bottom:14px}
.foot li{margin-bottom:8px}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.legal{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2);display:grid;gap:4px}

@media (max-width:1240px){   /* below this the menu doesn't fit between the logo and the tools */
  .top{grid-template-columns:1fr auto}
  .nav{grid-column:1/-1;order:3;justify-content:space-between}
}
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcols{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1/-1}
}
@media (max-width:700px){
  .bar{font-size:12.5px}
  .top{padding:14px var(--gut) 10px;gap:12px}
  .logo{font-size:21px}.logo img{width:34px;height:34px}
  .tools .order{display:none}
  .nav{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:8px 12px}.nav a{justify-self:start;font-size:11px;letter-spacing:.07em}   /* two rows of three: one row cut off KIDS and MORE */
  .hero-text{grid-template-columns:1fr;gap:18px;padding-top:32px}
  .hero-img img{aspect-ratio:4/5;max-height:none}
  .cols{row-gap:28px}
  .cols>li{flex-basis:calc((100% - var(--cg)) / 2)}
  .col .cn{margin-top:10px;font-size:21px}
  .fill{grid-template-columns:1fr}
  .head{flex-direction:column;gap:10px}
}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--paper);padding:8px 14px}
.skip:focus{left:8px}

/* inner pages */
.nav a[aria-current]{background-size:100% 1px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;max-width:var(--wrap);margin:0 auto;
  padding:20px var(--gut) 0;font-size:13.5px;color:var(--ink-2)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs a:hover{color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.small{font-size:14px;color:var(--ink-2)}
.prose{max-width:66ch}
.prose>*+*,.prose li>ul{margin-top:14px}
.prose ul,.prose ol{padding-left:20px}
.prose ul{list-style:disc}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--ink-2)}
.prose a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.prose strong{font-weight:600}

.prod{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);padding-top:clamp(20px,2.5vw,32px)}
.track{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,14px)}
.track li{background:var(--tint);display:grid;place-items:center}
.track li.w{grid-column:1/-1}
.track img{width:100%}
.dots{display:none}
.track img{cursor:zoom-in}

/* full-screen image viewer (built by preview.js) */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;background:var(--paper);color:var(--ink)}
.lb::backdrop{background:var(--paper)}
.lb-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.lb-track::-webkit-scrollbar{display:none}
.lb-track:focus{outline:0}
.lb-track li{flex:0 0 100%;scroll-snap-align:start;display:grid;place-items:center;padding:56px clamp(12px,6vw,96px)}
.lb-track img{max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px);width:auto;object-fit:contain}
.lb-n{position:absolute;top:16px;left:20px;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lb button{position:absolute;width:48px;height:48px;border:0;background:transparent;cursor:pointer;color:var(--ink)}
.lb button::before,.lb button::after{content:"";position:absolute;left:50%;top:50%}
.lb-x{top:4px;right:6px}
.lb-x::before,.lb-x::after{width:22px;height:1.5px;margin:-.75px 0 0 -11px;background:currentColor;transform:rotate(45deg)}
.lb-x::after{transform:rotate(-45deg)}
.lb-p,.lb-f{top:50%;margin-top:-24px}
.lb-p{left:max(8px,2vw)}
.lb-f{right:max(8px,2vw)}
.lb-p::before,.lb-f::before{width:12px;height:12px;margin:-6px 0 0 -6px;border:solid currentColor;border-width:0 1.5px 1.5px 0}
.lb-p::before{transform:rotate(135deg);margin-left:-3px}
.lb-f::before{transform:rotate(-45deg);margin-left:-9px}
.lb button:hover{color:var(--green)}
.buy-in{position:sticky;top:104px}
.buy h1{font-size:clamp(36px,3.8vw,56px)}
.price{display:flex;align-items:baseline;gap:14px;margin-top:18px;color:var(--ink-2);font-size:14px}
.price .pr{font-size:22px;color:var(--ink)}
.lead{margin-top:18px;font-size:17px;max-width:44ch}
.buy-acts{display:grid;gap:10px;margin-top:28px;max-width:420px}
.buy-acts .btn{justify-content:center}
.buy-acts .small{margin-top:-2px}
.facts{margin-top:32px;border-top:1px solid var(--line);max-width:420px}
.facts div{display:grid;grid-template-columns:9em 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.facts dt{color:var(--ink-2)}
.buy-in>.small{margin-top:20px;max-width:44ch}
.save{margin-top:18px;font-size:14px}

.text{padding-top:clamp(64px,8vw,112px)}
.row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,64px);padding:clamp(28px,3vw,40px) 0;border-top:1px solid var(--line)}
.row h2{font-size:clamp(26px,2.4vw,34px);line-height:1.1}
.qa details{border-bottom:1px solid var(--line)}
.qa details:first-child{border-top:1px solid var(--line)}
.qa summary,.faq summary{cursor:pointer;list-style:none;position:relative;padding:14px 36px 14px 0;font-weight:500}
.qa summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.qa summary::after,.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;
  border:solid var(--ink);border-width:0 1.3px 1.3px 0;transform:rotate(45deg);transition:transform .3s var(--ease)}
.qa details[open] summary::after,.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.qa details>div,.faq details>div{padding:0 0 18px;max-width:66ch;color:var(--ink-2)}
.qa summary:hover,.faq summary:hover{color:var(--green)}

.buybar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:none;align-items:center;justify-content:space-between;gap:16px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .35s var(--ease)}
.buybar.on{transform:none}
.buybar .pr{font-size:19px}

.hub-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end;
  padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.hub-head h1{font-size:clamp(44px,6vw,88px);letter-spacing:-.02em}
.hub-head .prose{color:var(--ink-2)}
main>.wrap>.count{margin-bottom:18px;font-size:14px}
.more{padding-top:clamp(48px,6vw,80px)}
.more h2{font-size:clamp(26px,2.4vw,34px);margin-bottom:18px}
.more ul{display:flex;flex-wrap:wrap;gap:10px 28px}
.more a{font-family:"Caslon",Georgia,serif;font-size:clamp(20px,1.8vw,26px);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line);transition:text-decoration-color .25s}
.more a:hover{text-decoration-color:currentColor}
main>.wrap:last-child,main>nav.more:last-child{padding-bottom:clamp(64px,8vw,112px)}

/* about, 404, search (bodies from pages.py) */
.prose.narrow{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(64px,8vw,112px)}
.prose.narrow h1,.search h1{font-size:clamp(40px,5vw,72px);letter-spacing:-.02em;margin-bottom:28px}
.prose.narrow h2{font-size:clamp(26px,2.4vw,34px);margin:48px 0 14px}
.prose.narrow .faq h2{margin-bottom:16px}
.prose.narrow .faq details:first-of-type{border-top:1px solid var(--line)}
.prose.narrow .faq details{border-bottom:1px solid var(--line)}
.prose.narrow .faq details>div{padding-top:0}
.prose.narrow .btn{margin:8px 10px 0 0}
.prose.narrow ol{list-style:decimal}
.search{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(64px,8vw,112px)}
.search-form{display:flex;max-width:620px;border-bottom:1px solid var(--ink)}
.search-form input{flex:1;min-width:0;border:0;background:transparent;font:400 clamp(20px,2vw,26px)/1.3 "Archivo",system-ui,sans-serif;
  padding:10px 0;color:var(--ink);outline:0}
.search-form input::placeholder{color:#6f7169}
.search-form:focus-within{border-bottom-color:var(--green);box-shadow:0 1px 0 var(--green)}
.search-form .btn{min-height:44px;align-self:center}
.search .sub{margin:18px 0 32px;color:var(--ink-2)}

@media (max-width:1000px){
  .prod{grid-template-columns:1fr}
  .buy-in{position:static}
  .buybar{display:flex}
  .hub-head{grid-template-columns:1fr;align-items:start}
}
@media (max-width:700px){
  .prod{padding-top:14px;gap:24px}
  .pics{margin:0 calc(var(--gut) * -1)}
  .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0}
  .track::-webkit-scrollbar{display:none}
  .track li{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:4/5}
  .track img{height:100%;object-fit:contain}
  .dots{display:flex;justify-content:center;gap:8px;padding-top:12px}
  .dots a{width:6px;height:6px;border-radius:50%;background:var(--line)}
  .dots a[aria-current]{background:var(--ink)}
  .lb-p,.lb-f{display:none}
  .lb-track li{padding:56px 0}
  .row{grid-template-columns:1fr;gap:12px}
  .facts div{grid-template-columns:8em 1fr}
  .search-form .btn{padding:0 18px}
}