/* Products: an editorial catalogue. Black on white, serif, hairline rules, plates and spreads */
.hprod{padding:var(--s6) 0 var(--s8);border-bottom:1px solid #111}
.hprod .wrap{display:grid;gap:var(--s6);align-items:end}
@media(min-width:900px){.hprod .wrap{grid-template-columns:1fr 1fr;align-items:center}}
.meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;border-block:1px solid #111;padding:10px 0;margin:0 0 var(--s4);grid-column:1/-1}
.hprod h1{font-size:clamp(3rem,8.4vw,7.5rem);line-height:.86;letter-spacing:-.025em;margin:0 0 var(--s5);overflow-wrap:normal}
.idxl{list-style:none;padding:0;margin:var(--s5) 0 0;border-top:1px solid #111}
.idxl a{display:flex;gap:var(--s4);padding:12px 4px;border-bottom:1px solid #111;text-decoration:none;transition:background .2s,color .2s,padding .2s}
.idxl a:hover{background:#111;color:#fff;padding-inline:14px}.idxl span{font-size:.8rem;letter-spacing:.15em;opacity:.6}
.hprod figure{margin:0}.hprod figure .t{border:0;border-radius:0}
.hprod figcaption{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-top:10px}
.plate{position:relative;border:1px solid #111;padding:var(--s6) var(--s5) var(--s4);margin-bottom:var(--s6);background:radial-gradient(#D7D7D0 1px,transparent 1px) 0 0/16px 16px #fff}
.plate-n{position:absolute;top:-10px;left:20px;background:#fff;padding:0 10px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.plate .flow{margin:0}.plate .t{border-color:#111}
.plate figcaption{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#111;margin-top:10px}
.spread{padding:var(--s8) 0}.spread.s1{background:var(--surface)}
.spread-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);border-bottom:1px solid #111;margin-bottom:var(--s6);padding-bottom:var(--s3)}
.bcode{font:400 clamp(2rem,5vw,4rem)/1 var(--display);margin:0;letter-spacing:-.01em}
.spread-h .meta{border:0;padding:0;margin:0;text-align:right;display:block}
.spread .bg{margin-bottom:0}
.spread figcaption{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#111}
.steps .num{font:400 2.6rem/1 var(--display);color:#111}
.step{border-top:1px solid #111}

/* chapter-opener bands: big outlined number, serif heading, tight black band */
.divider{background:#111;color:#fff;padding:var(--s6) 0}
.divider .wrap{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--s5)}
.divider .no{font:400 clamp(3.2rem,7vw,5.6rem)/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75);letter-spacing:-.02em}
.divider h2{font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.05;margin:0;max-width:20em}
@media(max-width:600px){.divider .wrap{gap:var(--s4)}.divider h2{font-size:1.5rem}}

/* products: images open the viewer with a normal cursor */
[data-page="products"] a.zoom{cursor:default}
/* hero video: layered paper blocks behind the video, caption row below */
.hprod{overflow-x:clip}
.hprod figure{margin:0 18px 0 14px}
.fv{position:relative;isolation:isolate;margin-bottom:18px}
.fv::before{content:"";position:absolute;inset:18px -18px -18px 18px;background:#111;z-index:-1}
.fv::after{content:"";position:absolute;inset:-14px 14px 14px -14px;background:#F2E27C;z-index:-2}
.hprod figcaption{display:flex;justify-content:space-between;margin-top:var(--s6);padding-top:10px;border-top:1px solid #111}