@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-normal-400-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-normal-400-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/overpass-mono-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/overpass-mono-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
[hidden]{display:none!important}
:root{
  /* the book's shadow, after the Disco Pogo product shot: light from the upper
     right, thrown left and down, soft and grey, with a tight contact edge */
  --book-drop:drop-shadow(-3px 3px 5px rgba(0,0,0,.13)) drop-shadow(-15px 13px 25px rgba(0,0,0,.17)) drop-shadow(-36px 30px 56px rgba(0,0,0,.12));
  /* the same drop at phone scale. The full one reaches 36px left plus 56px of blur,
     which runs past the edge of a 390px screen and gets sliced by the section's
     overflow, leaving a hard cut where the shadow should fade out. */
  --book-drop-sm:drop-shadow(-2px 2px 3px rgba(0,0,0,.13)) drop-shadow(-6px 5px 10px rgba(0,0,0,.16)) drop-shadow(-13px 11px 20px rgba(0,0,0,.11));
  /* the same light on the prints: a mounted print is thinner than a 188 page
     hardback, so the same angle casts a shallower shadow */
  --print-box:-2px 2px 4px rgba(0,0,0,.12),-10px 9px 18px rgba(0,0,0,.16),-24px 21px 42px rgba(0,0,0,.11);
  --book-box:-3px 3px 5px rgba(0,0,0,.13),-15px 13px 25px rgba(0,0,0,.17),-36px 30px 56px rgba(0,0,0,.12);

  --paper:#ffffff; --paper-2:#f1f1f1; --ink:#111111; --ink-2:#3d3d3d; --ink-3:#6b6b6b;
  --dayglo:#fe4c5a;--dayglo-lift:#fe5f6b;--dayglo-deep:#d80f0f; --on-black:#ffffff; --muted-on-black:#a6a6a6; --white:#ffffff;
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif; --typed:"Overpass Mono","Courier New",Courier,monospace;
  --max:1320px; --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
/* iOS turns anything it reads as an email, a phone number or a date into its own
   blue tappable link and paints it with -webkit-text-fill-color, which beats a
   plain colour. The meta stops most of it, this catches whatever still gets through. */
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;
  -webkit-text-fill-color:inherit!important;font-size:inherit!important;font-family:inherit!important}
h1,h2,h3{font-weight:800;letter-spacing:-.04em;line-height:.95;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.kick :focus-visible,.inside :focus-visible{outline-color:#fff}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:100;text-decoration:none;font-weight:700}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}
.typed{font-family:var(--typed);font-weight:700;text-transform:uppercase;letter-spacing:.13em;line-height:1.34;color:#efefef;text-shadow:.018em .022em 0 #b9b9b9,.036em .044em 0 #8a8a8a,.054em .066em 0 #5c5c5c,.072em .088em 0 #333,.09em .11em 0 #111}
.typed--light{color:var(--ink);text-shadow:.018em .022em 0 #fff,.036em .044em 0 #e6e6e6,.054em .066em 0 var(--dayglo),.072em .088em 0 var(--ink)}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:3px solid var(--ink)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:70px}
.brand img{height:22px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto;font-weight:600;font-size:16px}
.nav a{text-decoration:none;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--dayglo)}
/* The menu button. Three bars that fold into a cross when it is open, so the
   control says what it will do next without a word of text. Phone only: it is
   display:none until 720px. */
.burger{display:none;margin-left:auto;background:none;border:0;padding:12px 6px 12px 16px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:0}
.burger__bars,.burger__bars::before,.burger__bars::after{display:block;width:26px;height:2.5px;
  background:var(--ink);border-radius:2px}
.burger__bars{position:relative;transition:background .18s ease}
.burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0;
  transition:transform .26s cubic-bezier(.2,.7,.2,1)}
.burger__bars::before{top:-8px}
.burger__bars::after{top:8px}
.burger[aria-expanded="true"] .burger__bars{background:transparent}
.burger[aria-expanded="true"] .burger__bars::before{transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars::after{transform:translateY(-8px) rotate(-45deg)}
.burger:focus-visible{outline:3px solid var(--dayglo);outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.burger__bars,.burger__bars::before,.burger__bars::after{transition:none}}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 26px;font-weight:700;font-size:16px;line-height:1;text-decoration:none;border:3px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap;transition:transform .15s}
.pill:hover{transform:translateY(-2px)}
.pill--ink{background:var(--ink);color:var(--paper)}
.pill--paper{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.pill--dayglo{background:var(--dayglo);border-color:var(--dayglo);color:var(--ink)}
.pill--sm{padding:11px 18px;font-size:15px}
.tag{display:block;padding:0;margin:0 0 6px;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em;line-height:1.02;color:var(--ink)}
.tag--fill{color:var(--ink)}
.kick .tag,.inside .tag{color:var(--ink)}

/* hero */
.hero{padding-block:clamp(36px,5vw,72px) clamp(30px,5vw,64px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero__logo{width:min(100%,600px);height:auto}
.hero__deck{margin-top:32px;max-width:32em;font-size:clamp(18px,1.6vw,21px);line-height:1.45;color:var(--ink-2)}
.hero__deck b{color:var(--ink);font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.face{position:relative;aspect-ratio:1;max-width:600px;margin-inline:auto;width:100%}
.face__smiley{width:100%;height:100%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.28))}
.face__cover{position:absolute;right:-3%;bottom:-6%;width:42%;transform:rotate(8deg);box-shadow:var(--book-box);border-radius:3px}
.face__tag{position:absolute;left:-2%;top:6%;--r:-8deg}

/* kickstarter */
.kick{background:var(--ink);color:var(--on-black);padding-block:clamp(56px,7vw,96px)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:clamp(28px,4vw,44px)}
.head h2{font-size:clamp(40px,6vw,80px)}
.head p{max-width:32em;font-size:clamp(17px,1.4vw,19px);line-height:1.5}
.head .tag{margin-bottom:14px}
.kick .head p{color:var(--muted-on-black)}
.kick .tag,.inside .tag{color:var(--dayglo)}
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tier{background:var(--paper);color:var(--ink);padding:24px 22px 22px;display:grid;gap:10px;align-content:start;border:4px solid var(--paper)}
.tier--top{border-color:var(--dayglo)}
.tier__tag{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.tier h3{font-size:23px}
.tier p{color:var(--ink-2);font-size:15.5px;line-height:1.45}
.tier__price{font-weight:800;font-size:30px;letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums}
.tier .pill{justify-self:start}
.meter{margin-top:34px;background:#2b2b2b;border-radius:999px;height:14px;overflow:hidden;position:relative}
.meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--dayglo);border-radius:999px}
.meter__row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;margin-top:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-on-black)}
.party{margin-top:34px;border:3px solid var(--dayglo);padding:22px 26px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.party b{font-size:22px;letter-spacing:-.02em}
.party .party__typed{font-size:clamp(20px,2.2vw,28px);letter-spacing:.2em}
.party span{font-family:var(--mono);font-size:13.5px;color:var(--muted-on-black);flex:1 1 320px}

/* look inside */
.inside{background:var(--ink);color:var(--on-black);padding-block:clamp(56px,7vw,96px)}
.inside .head p{color:var(--muted-on-black)}
.fan{display:flex;gap:8px;height:clamp(240px,34vw,440px)}
.fan img{flex:1 1 0;min-width:0;height:100%;object-fit:cover;object-position:var(--o,50% 50%);border:4px solid var(--paper);transition:flex-grow .35s ease}
.fan img:hover{flex-grow:2.4}
.fan__line{font-size:clamp(17px,1.9vw,26px);text-align:center;margin-top:34px}


/* voice: pull quotes from the book */
.voice{background:var(--ink);padding-block:clamp(56px,8vw,120px)}
.voice__fig{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22%);gap:12px clamp(24px,4vw,64px);align-items:start}
.voice__q{margin:0;grid-column:1;font-size:clamp(22px,2.9vw,41px)}
.voice__q p{margin:0}
.voice__who{grid-column:1;font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--dayglo);margin-top:clamp(18px,2.4vw,34px)}
.voice__q .cite{display:inline;white-space:nowrap;font-size:.62em;letter-spacing:.18em;color:#cfcfcf;text-shadow:.018em .022em 0 #8a8a8a,.036em .044em 0 #4a4a4a}
.voice__photo{grid-column:2;grid-row:1/3;width:100%;height:auto;box-shadow:var(--print-box)}

/* the book */
.book{padding-block:clamp(64px,8vw,120px)}
.book .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,90px);align-items:center}
.book__obj{position:relative;max-width:440px;margin-inline:auto;width:100%;transform:rotate(-2deg)}
.book__obj img{box-shadow:var(--book-box);border-radius:3px}
.book__obj .tag{position:absolute;left:0;top:-26px}
.book h2{font-size:clamp(34px,4.6vw,60px)}
.book__copy{margin-top:26px;display:grid;gap:16px;max-width:36em;font-size:18px;color:var(--ink-2)}
.specs{margin:34px 0 0;padding:22px 0 0;border-top:3px solid var(--ink);display:grid;grid-template-columns:auto 1fr;gap:10px 26px;font-family:var(--mono);font-size:14.5px;line-height:1.4;text-transform:uppercase;letter-spacing:.02em}
ul.specs{grid-template-columns:1fr;gap:0;list-style:none;padding-left:0;font-weight:700}
ul.specs li{margin:0;padding:9px 0 9px 22px;position:relative;border-bottom:1px solid #e8e8e8}
ul.specs li:last-child{border-bottom:0}
ul.specs li::before{content:"";position:absolute;left:0;top:1.02em;width:9px;height:2px;background:var(--dayglo)}
.specs dt{color:var(--ink-3);margin:0}
.specs dd{margin:0;font-weight:700}

/* about: who took them, on white, between the dark quote and the shop */
.about{padding-block:clamp(56px,7vw,96px)}
/* Two columns, each still at a readable measure. The lead paragraph is set not to
   break, so it holds the first column whole and the rest fall into the second. */
.about__copy{max-width:78em;margin-top:30px;columns:2;column-gap:clamp(32px,4vw,64px);
  font-size:19px;line-height:1.6;color:var(--ink-2)}
.about__copy p{margin:0 0 18px;break-inside:avoid}
.about__copy p:last-child{margin-bottom:0}
@media(max-width:860px){.about__copy{columns:1;max-width:36em}}
.about__copy p:first-child{font-weight:700;color:var(--ink);font-size:21px}
/* his own site, sitting under the bio rather than inside it */
.about__site{margin:4px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.06em;break-inside:avoid}
.about__site a{color:var(--dayglo);text-decoration:none;border-bottom:1px solid currentColor}
.about__site a:hover{color:var(--ink)}
.about .specs{max-width:36em}

/* contact: one address, said once */
.contact{background:#17171a;color:#f2f2f2;padding-block:clamp(52px,6.5vw,88px)}
.contact h2{color:#fff}
.contact .tag{color:#8d8d96}
.contact__lead{max-width:34em;margin-top:26px;font-size:19px;line-height:1.6;color:#a8a8b0}
.contact__lead a{color:var(--dayglo)}
.contact__cols{margin:clamp(26px,3vw,38px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:#2e2e36;border:1px solid #2e2e36}
.contact__col{background:#17171a;padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,26px);min-width:0}
.contact__col dt{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#8d8d96}
.contact__col dd{margin:0;font-weight:700;font-size:clamp(15px,1.4vw,17px);line-height:1.35;overflow-wrap:anywhere}
.contact__col a{color:var(--dayglo);text-decoration:none}
.contact__col a:hover{color:#fff}
@media (max-width:700px){.contact__cols{grid-template-columns:1fr}}

/* three up: the whole shop across the top, the way a store opens */
.three{padding-block:clamp(34px,4vw,58px) clamp(52px,6.5vw,96px)}
.three__head{text-align:center;max-width:min(920px,100%);margin-inline:auto}
.three__head h1{font-size:clamp(26px,3.2vw,42px);letter-spacing:-.035em;line-height:1.02}
.three__head p{margin-top:16px;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);line-height:1.5}
.three__grid{display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:end;gap:clamp(18px,2.6vw,40px);margin-top:clamp(30px,3.4vw,50px)}
.three__item{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none}
.three__shot{display:grid;place-items:end center;width:100%}
.three__item--book .three__shot img{width:84%;filter:var(--book-drop)}
.three__print{width:92%;background:#fff;padding:8%;box-shadow:var(--print-box)}
.three__print img{width:100%;height:auto}
.three__tee{width:92%;height:auto}
.three__name{margin-top:26px;font-family:var(--mono);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3)}
.three__item--book .three__name{color:var(--ink)}
.three__item .pill{margin-top:14px}
.three__item:hover .pill{transform:translateY(-2px)}
@media (max-width:860px){
  .three__grid{grid-template-columns:1fr 1fr;align-items:start;gap:34px}
  .three__item--book{grid-column:1 / -1;order:-1}
  .three__item--book .three__shot img{width:58%}
}
@media (max-width:520px){
  .three__grid{grid-template-columns:1fr}
  .three__item--book .three__shot img{width:72%}
}

/* count: the print run, said out loud */
.count{background:var(--ink);color:var(--on-black);padding-block:clamp(26px,3.2vw,42px)}
.count__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px 24px;flex-wrap:wrap}
.count__line{font-weight:800;letter-spacing:-.04em;font-size:clamp(28px,4.6vw,56px);line-height:.95}
.count__n{color:var(--dayglo);font-variant-numeric:tabular-nums}
.count__note{font-family:var(--mono);font-size:13px;color:var(--muted-on-black);text-transform:uppercase;letter-spacing:.07em}
.count__bar{margin-top:16px;height:14px;background:#242424;border:2px solid #3d3d3d}
.count__bar span{display:block;height:100%;width:0;background:var(--dayglo);transition:width .9s ease}
@media (prefers-reduced-motion:reduce){.count__bar span{transition:none}}

/* shop: products float on white, nothing is boxed, prices are typed */
.shop{padding-block:clamp(64px,8vw,120px)}
.shop__strip{margin-top:34px;border-block:3px solid var(--ink);padding:15px 0;text-align:center;font-family:var(--mono);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.17em}
.cat{margin-top:clamp(56px,6.5vw,96px);text-align:center}
.cat h3{font-size:clamp(26px,3.2vw,38px);text-transform:uppercase;letter-spacing:-.015em}
.cat p{margin-top:clamp(14px,1.5vw,20px);font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.p{text-align:center;display:flex;flex-direction:column}
.p__img{aspect-ratio:3/4;display:grid;place-items:center;padding:2% 4%}
.p__img img{max-width:100%}
.p--hero{max-width:720px;margin-inline:auto;margin-top:clamp(34px,4.2vw,64px)}
.p--hero .p__img{aspect-ratio:auto;padding:0}
.p__img--book img{width:min(340px,62%);filter:var(--book-drop)}
.p__print{width:92%;background:#fff;padding:7%;box-shadow:var(--print-box)}
.p__tee{width:100%;height:auto}
.p__name{margin-top:26px;font-size:18px;font-weight:800;letter-spacing:-.015em;text-transform:uppercase}
.p__sub{margin-top:8px;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);min-height:2.6em}
.p__price{margin-top:18px;font-family:var(--mono);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.p__badge{display:block;margin-top:8px;min-height:1.3em;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dayglo)}
.p .pill{margin-top:18px;align-self:center}
.editions{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:660px;margin:34px auto 0;align-items:stretch}
.editions > div{display:flex;flex-direction:column;align-items:center}
.editions .pill{margin-top:auto;padding-top:15px}
.editions > div + div{border-left:2px solid var(--paper-2);padding-left:34px}
.editions .p__price{margin-top:0}

.p--soon .p__img{background:var(--paper-2);padding:0}
.p__soon{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);text-align:center;line-height:1.6}
.rest{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(18px,2.6vw,40px);margin-top:clamp(30px,3.4vw,50px)}
.rest > .p{flex:0 0 calc((100% - 2*clamp(18px,2.6vw,40px))/3)}
.bundles{margin-top:clamp(56px,6.5vw,96px);display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.bundles__tag{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.bundle{display:inline-flex;align-items:baseline;gap:14px;border:3px solid var(--ink);padding:12px 20px;text-decoration:none;font-weight:700;transition:background .15s}
.bundle:hover{background:var(--dayglo);border-color:var(--dayglo)}
.bundle span{font-family:var(--mono);font-variant-numeric:tabular-nums}
.shop__note{font-family:var(--mono);font-size:13px;color:var(--ink-2);margin:34px 0 clamp(40px,5vw,72px);display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;text-align:center}
.shop__note svg{height:18px;width:auto}

/* list: the handbag flyer, reprinted in day glo red */
.list{position:relative;background:var(--dayglo);color:var(--ink);padding-block:clamp(56px,7vw,96px);overflow:hidden}
.list::before{content:"";position:absolute;right:-4%;top:-10%;bottom:-10%;width:52%;background:url(../img/flyer-bag-red.webp) center 15%/cover;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 30%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%)}
.list .wrap{position:relative;z-index:1}
.list h2{font-size:clamp(40px,6vw,80px);color:var(--ink)}
.list .boxed{display:inline-block;border:4px solid #fff;color:#fff;padding:10px 18px;font-weight:800;font-size:clamp(20px,2.4vw,26px);margin-top:18px}
.list p{margin-top:18px;max-width:30em;font-size:18px;color:var(--ink)}
.list form{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;max-width:560px}
.list input{flex:1 1 240px;min-width:0;border:3px solid var(--ink);background:rgba(255,255,255,.18);border-radius:999px;padding:15px 22px;font:inherit;font-size:16px;color:var(--ink)}
.list input::placeholder{color:#4a1016}
.list .pill{border-color:var(--ink);background:var(--ink);color:#fff}
.list small{display:block;font-family:var(--mono);font-size:12.5px;margin-top:12px;color:#3a0c11;flex-basis:100%}

/* faq */
.faq{padding-block:clamp(56px,7vw,96px)}
.faq .head p{color:var(--ink-2)}
.faq__list{border-top:3px solid var(--ink);max-width:980px}
.faq details{border-bottom:1px solid #d9d9d9}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-weight:800;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:700;font-size:26px;color:var(--dayglo);flex:0 0 auto;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;max-width:44em;color:var(--ink-2);font-size:17px}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.list small a{color:inherit;text-decoration:underline}
.joined{display:none!important}
.joined:target{display:block!important;font-weight:700}


/* footer */


/* responsive */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .face{max-width:520px;margin-top:10px}
  .tiers{grid-template-columns:1fr}
  .book .wrap{grid-template-columns:1fr}
  .book__obj{max-width:360px}
  .list::before{width:100%;opacity:.25}
}
@media (max-width:720px){
  /* The menu takes the whole screen on a phone. Full bleed brand pink, the names
     set large enough to hit without looking, and each one arriving a beat after
     the last so the panel reads as one movement rather than a list appearing. */
  .nav{display:none;position:fixed;inset:0;z-index:60;flex-direction:column;justify-content:center;
    gap:0;padding:clamp(80px,16vh,130px) var(--gutter) clamp(40px,8vh,70px);
    background:linear-gradient(158deg,#ff7b82 0%,var(--dayglo) 38%,#ec2f4c 100%);
    overflow-y:auto;overscroll-behavior:contain}
  .nav.is-open{display:flex}
  /* A transition, not an animation. An animation on an element that starts at
     display:none can finish against the document timeline before the panel is
     ever shown, and fill-forwards then holds it at opacity 0 for good. With a
     transition the open state IS visible, so the worst case is no stagger. */
  .nav a{display:block;padding:clamp(10px,1.8vh,16px) 0;border:0;color:var(--ink);
    font-family:var(--display);font-weight:800;font-size:clamp(34px,10vw,52px);line-height:1.02;
    letter-spacing:-.035em;text-decoration:none;
    opacity:0;transform:translateY(14px);
    transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1)}
  .nav.is-open a{opacity:1;transform:none}
  .nav a:active{opacity:.6}
  .nav.is-open a:nth-child(1){transition-delay:.05s} .nav.is-open a:nth-child(2){transition-delay:.10s}
  .nav.is-open a:nth-child(3){transition-delay:.15s} .nav.is-open a:nth-child(4){transition-delay:.20s}
  .nav.is-open a:nth-child(5){transition-delay:.25s} .nav.is-open a:nth-child(6){transition-delay:.30s}
  /* the burger sits above the panel so the cross is always reachable */
  .burger{position:relative;z-index:70}
  /* and the wordmark comes up with it, on the same line, in black. brightness(0)
     paints every opaque pixel black and leaves the alpha alone, so the red mark
     reads on the pink without a second asset to keep in step with the first. */
  .top .wrap:has(.nav.is-open) .brand{position:relative;z-index:70}
  .top .wrap:has(.nav.is-open) .brand img{filter:brightness(0)}
  .brand img{transition:filter .2s ease}
  /* the page behind must not scroll while the panel is up */
  body:has(.nav.is-open){overflow:hidden}
  /* Join the list is hidden in the bar on a phone, so the panel is where it lives.
     Black on the pink, full width, sitting at the thumb end of the screen. */
  .top .wrap>.nav.is-open ~ .pill{display:flex;position:fixed;z-index:65;
    left:var(--gutter);right:var(--gutter);bottom:clamp(26px,5.5vh,52px);
    align-items:center;justify-content:center;background:var(--ink);color:#fff;border-color:var(--ink);
    padding:17px 22px;font-size:15px;letter-spacing:.02em}
  @media (prefers-reduced-motion:reduce){.nav a{transition:none}}
  .burger{display:inline-block}
  .top .wrap>.pill{display:none}
  .head{grid-template-columns:1fr}
  .hero__deck{font-size:17px}
  .voice__fig{grid-template-columns:minmax(0,1fr)}
  .voice__photo{grid-column:1;grid-row:auto;order:-1;width:46%;justify-self:end}
  .voice__q{font-size:clamp(17px,4.6vw,23px);letter-spacing:.11em}
  .typed{letter-spacing:.14em}
  .fan{gap:5px}
  .fan img{border-width:3px}
  .fan img:nth-child(n+7){display:none}
  .rest{grid-template-columns:1fr}
  .editions{grid-template-columns:1fr;gap:26px;max-width:340px}
  .editions > div + div{border-left:0;border-top:2px solid var(--paper-2);padding-left:0;padding-top:26px}
  .specs{grid-template-columns:1fr;gap:4px 0}
  .specs dt{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.pill,.fan img{transition:none}}

/* product pages */
.page-head{padding-block:clamp(38px,5vw,70px) 50px}
.page-head h1{font-size:clamp(34px,5vw,64px);letter-spacing:-.04em;line-height:1;color:var(--dayglo);margin:0}
.page-head__mark{margin:0;line-height:0}
.page-head__mark img{display:block;width:clamp(180px,26vw,320px);height:auto}
.page-head p{margin-top:14px;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}
.prod{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;padding-block:clamp(38px,5vw,70px);border-top:3px solid var(--ink)}
.prod__shots{display:grid;gap:16px;max-width:none}
.prod__main{position:relative}
.prod__main img,.prod__alts img{width:100%;height:auto;display:block}
.prod__main img{filter:var(--book-drop)}
.prod__alts{display:grid;grid-template-columns:repeat(2,minmax(0,96px));gap:12px}
.prod__alts button{border:2px solid var(--paper-2);background:none;padding:0;cursor:pointer;display:block;line-height:0}
.prod__alts button[aria-pressed="true"]{border-color:var(--ink)}
.prod__name{font-size:clamp(26px,3vw,38px);text-transform:uppercase;letter-spacing:-.015em}
.prod__price{margin-top:12px;font-family:var(--mono);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.prod__flag{display:block;margin-top:6px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dayglo)}
.prod__copy{margin-top:20px;display:grid;gap:14px;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:34em}
/* ---- the book page, wide cover, price on the foot of the book ---- */
.prod--wide{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch;border-top:0;padding-top:clamp(26px,3vw,44px)}
.prod--wide .prod__shots{max-width:min(100%,760px)}
.prod__say{display:flex;flex-direction:column;min-height:100%}
.prod__say .say__foot{margin-top:auto;padding-top:26px;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(14px,1.6vw,20px) clamp(16px,2vw,26px)}
.prod__say .hero__price,.prod__say .hero__go{display:contents}
.prod__say .hero__price b{margin:0}
.prod__say .hero__price span{justify-self:start}
.prod__say .hero__ship{justify-self:start}
.prod__say .hero__go .pill{margin:0}
.prod--wide .hero__price{margin:0 0 14px}
.edline{grid-column:1/span 2;margin:34px 0 0;display:flex;flex-wrap:wrap;gap:6px 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
  border-top:2px solid var(--ink);padding-top:16px}
.edline span{padding-right:14px;margin-right:14px;border-right:1px solid #d6d6d6}
.edline span:last-child{border-right:0}
.edline--about{margin:clamp(30px,3.4vw,44px) 0 0;padding-top:31px;justify-content:center;text-align:center}
/* the last item keeps the gap that sits before each divider bar, which would push
   the whole line 28px left of true centre, so it is cleared here */
.edline--about span:last-child{padding-right:0;margin-right:0}
.faq__list--two{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(26px,4vw,56px);
  border-top:2px solid var(--ink);margin-top:clamp(22px,2.6vw,32px)}
.faq__list--two details{border-bottom:1px solid #e4e4e4}
.edline--faq{margin-top:clamp(26px,3vw,38px)}
@media (max-width:760px){.faq__list--two{grid-template-columns:1fr}}
.edline--cred{margin-top:12px;border-top:0;padding-top:0;color:var(--ink-3)}
.edline--cred b{margin-right:16px;color:var(--ink)}
/* On a phone these lists wrap, and because every item carries its divider on the
   right, the bars end up dangling at the end of a wrapped line and a long item
   splits in two. One item per line, no bars, nothing left hanging. */
@media (max-width:620px){
  .book__obj img,.face__cover{box-shadow:-2px 2px 3px rgba(0,0,0,.13),-6px 5px 10px rgba(0,0,0,.16),-13px 11px 20px rgba(0,0,0,.11)}
  .edline{flex-direction:column;gap:0;padding-top:16px}
  .edline span{padding:9px 0;margin:0;border-right:0;border-bottom:1px solid rgba(0,0,0,.09)}
  .edline span:last-child{border-bottom:0;padding-bottom:0}
  .edline--cred b{display:block;margin:0 0 4px;padding-bottom:0}
  .edline--about{padding-top:20px;text-align:left;align-items:stretch}
  .edline--about span:last-child{padding-right:0;margin-right:0}
}
@media(max-width:820px){.prod--wide{grid-template-columns:1fr}.edline{grid-column:1}.prod__say .say__foot{padding-top:18px}}
.prod__two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.prod__two .specs{margin:0}
@media(max-width:900px){.prod__two{grid-template-columns:1fr;gap:24px}}
.prod .hero__mark img{width:min(100%,460px)}
.prod .hero__tag{display:block;line-height:1;margin:0 0 14px}
.prod__block{margin-top:26px}
.prod__block h3{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;font-weight:700}
.sizes{display:flex;gap:10px;flex-wrap:wrap}
.size{border:2px solid var(--ink);background:transparent;font:inherit;font-weight:700;font-size:15px;min-width:58px;padding:11px 14px;border-radius:999px;cursor:pointer;line-height:1}
.size[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.size:hover{border-color:var(--dayglo)}
.prod .pill{margin-top:26px}
.prod__soon{aspect-ratio:900/1286;background:var(--paper-2);display:grid;place-items:center;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);text-align:center;line-height:1.8}
@media (max-width:860px){.prod{grid-template-columns:1fr}}

.specs--credits{margin-top:0;padding-top:0;border-top:0}

/* prints: framed and mounted, two across, the way a print shop hangs them */
.prints{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,5vw,84px);margin-top:clamp(34px,4vw,58px)}
.print{margin:0}
.print__frame{display:block;padding:7%;background:#fff;border:12px solid #141414;box-shadow:0 38px 58px -26px rgba(0,0,0,.6)}
.print__mount{position:relative;display:block;width:100%;padding-top:75%}
.print img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.print figcaption{margin-top:22px;text-align:center;display:grid;gap:6px}
.print__title{font-size:18px;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.print__sub{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.print__badge{font-family:var(--mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--dayglo)}
.print__price{margin-top:4px;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink-2)}
.prints__note{max-width:38em;margin:clamp(44px,5vw,70px) auto 26px;text-align:center;font-size:17px;line-height:1.6;color:var(--ink-2)}
@media (max-width:620px){.prints{grid-template-columns:1fr;gap:40px}.print__frame{border-width:9px}}

/* merch collection: two across, matching the prints */
.merch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3.4vw,56px);margin:0 0 50px;align-items:stretch}
.mitem{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%}
.mitem__shot{display:block;width:100%}
.mitem__shot img{width:100%;height:auto;display:block}
.mitem__shot--soon{aspect-ratio:900/1286;background:var(--paper-2);display:grid;place-items:center;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);line-height:1.8}
.mitem__shot--turn{position:relative;outline-offset:3px}
.mitem__shot--turn .mitem__back{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.mitem__shot--turn:hover .mitem__back,.mitem__shot--turn:focus-visible .mitem__back,.mitem__shot--turn.is-back .mitem__back{opacity:1}
.mitem__shot--turn:hover #tee-main,.mitem__shot--turn:focus-visible #tee-main,.mitem__shot--turn.is-back #tee-main{opacity:0;transition:opacity .35s ease}
.mitem__turn{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  background:rgba(255,255,255,.88);padding:5px 10px;pointer-events:none;transition:opacity .25s}
.mitem__shot--turn:hover .mitem__turn,.mitem__shot--turn.is-back .mitem__turn{opacity:0}
.mitem__shot--turn{cursor:pointer}
@media (prefers-reduced-motion:reduce){.mitem__shot--turn .mitem__back,.mitem__shot--turn #tee-main{transition:none}}
.mitem figcaption{margin-top:20px;display:grid;gap:6px;justify-items:center;
  grid-template-rows:auto minmax(2.9em,auto) minmax(34px,auto) auto;align-content:start}
.mitem__title{grid-row:1}
.mitem__sub{grid-row:2}
.mitem figcaption .mitem__sizes{grid-row:3;align-self:center}
.mitem__price{grid-row:4}
.mitem__title{font-size:18px;font-weight:800;letter-spacing:-.015em;text-transform:uppercase}
.mitem__sub{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);max-width:26em;margin-inline:auto}
.mitem__badge{font-family:var(--mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--dayglo)}
.mitem__price{margin-top:4px;font-family:var(--mono);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.mitem__act{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:center;width:100%}
.mitem__act .nfy{width:auto;flex:0 0 auto}
.mitem__sizes{display:flex;align-items:center;gap:8px;margin:0}
.mitem__sizelab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sizeset{display:inline-flex;border:1px solid #c9c9c9}
.sizeset .size{border:0;border-right:1px solid #c9c9c9;border-radius:0;min-width:25px;padding:5px 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;background:#fff;color:var(--ink-2);line-height:1.3}
.sizeset .size:last-child{border-right:0}
.sizeset .size:hover{background:var(--paper-2);color:var(--ink)}
.sizeset .size[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.mitem .nfy{margin-top:0;padding-top:0}
.mitem .pill{margin-top:0}
@media (max-width:620px){.merch{grid-template-columns:1fr;gap:44px}}

/* announcement: a thin line across the very top of every page */
.annc{background:var(--dayglo);color:var(--ink);text-align:center}
.annc a{display:block;padding:10px 16px;font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;text-decoration:none;color:inherit}
.annc a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:620px){.annc a{font-size:10.5px;letter-spacing:.1em;padding:9px 14px}}

/* ---- prints: the grid, three across, no frames ---- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:clamp(22px,3vw,40px) 0 clamp(80px,8vw,120px)}
.ptile{position:relative;display:block;overflow:hidden;background:var(--paper-2);text-decoration:none}
.ptile::before{content:"";display:block;padding-top:100%}
.ptile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.ptile:hover img,.ptile:focus-visible img{transform:scale(1.045)}
.ptile__t{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.78));color:#fff;opacity:0;transition:opacity .25s}
.ptile:hover .ptile__t,.ptile:focus-visible .ptile__t{opacity:1}
.ptile__t b{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.ptile__t i{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:#bdbdbd}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,1fr);gap:6px}.ptile__t{opacity:1;padding:26px 11px 10px}}
@media (prefers-reduced-motion:reduce){.ptile img{transition:none}.ptile:hover img{transform:none}}

/* ---- prints: one print's own page ---- */
.crumb{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:#6d6d6d;margin:clamp(18px,2.4vw,30px) auto 0}
.crumb a{color:#6d6d6d}.crumb b{color:var(--ink)}
.pdp{display:grid;grid-template-columns:minmax(240px,292px) 1fr;gap:clamp(22px,3vw,46px);align-items:stretch;
  margin:clamp(20px,2.8vw,34px) auto clamp(30px,4vw,56px)}
.pdp__info{display:flex;flex-direction:column}
.pdp__info .pill{margin-top:auto}
.pdp__info h1{font-size:clamp(28px,3.4vw,44px);line-height:1.05;margin:0 0 6px}
.pdp__info h1{color:var(--dayglo)}
.ptile__t b{color:var(--dayglo)}
.pdp__meta{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6d6d6d;margin:0 0 18px}
.pdp__desc{font-size:15px;line-height:1.62;color:#333;margin:0 0 20px;max-width:46ch}
.pdp__h{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#8d8d8d;
  font-weight:700;margin:0 0 7px;padding-top:16px;border-top:1px solid #e4e4e4}
.pdp__med{font-size:14px;line-height:1.6;color:#333;margin:0 0 4px;max-width:44ch}
.pdp__sizes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pdp__sizes li{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid #eee}
.pdp__sizes li:last-child{border-bottom:0}
.pdp__sizes b{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.pdp__dim,.pdp__ed{grid-column:1;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8d8d8d}
.pdp__pr{grid-row:1;grid-column:2;font-family:var(--mono);font-size:13px;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pdp__note{font-size:13px;line-height:1.6;color:#6d6d6d;margin:16px 0 20px;max-width:42ch}
.pdp .pill{border-radius:0;display:flex;width:100%;max-width:320px;padding:16px 22px}
.pdp__frame{display:flex;align-items:center;justify-content:center;width:100%;max-width:320px;
  margin-top:10px;padding:14px 22px;background:none;border:2px solid var(--ink);cursor:pointer;color:var(--ink);
  font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;line-height:1}
.pdp__frame:hover{background:var(--ink);color:#fff}
.pdp__frame:focus-visible{outline:2px solid var(--dayglo);outline-offset:2px}
.pdp__stage{position:sticky;top:96px;display:flex;flex-direction:column}
.pdp__shot{margin:0;background:var(--paper);transition:padding .35s,background .35s;flex:1;min-height:0;aspect-ratio:1500/976;display:flex;align-items:center;justify-content:center}
.pdp__shot img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.pdp__scale{opacity:0;height:0;margin:0;overflow:hidden;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#8d8d8d;text-align:center;transition:opacity .3s}
/* view in frame: a black moulding and a white mount on a wall tone */
.pdp__stage.is-framed{background:#eceae6;padding:clamp(26px,4.5vw,66px)}
.pdp__stage.is-framed .pdp__shot{background:#fbfaf8;aspect-ratio:1500/1070;
  padding:clamp(14px,2vw,28px);
  border:clamp(9px,1.1vw,15px) solid #14110e;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--book-box)}
.pdp__stage.is-framed .pdp__scale{opacity:1;height:auto;margin-top:16px}
/* An upright print gets an upright frame. Less tall than the landscape one turned
   on its end, and a narrower mount top and bottom than at the sides, which is how
   a framer hangs a portrait anyway. Both moves give the picture the room. */
.pdp__stage.is-upright.is-framed .pdp__shot{aspect-ratio:976/1330;
  padding:clamp(12px,1.6vw,24px) clamp(16px,2.2vw,34px)}
.pdp__stage.is-upright.is-framed{margin-inline:auto;max-width:min(100%,560px)}

.pdp__nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 clamp(40px,5vw,72px);
  border-top:1px solid #e4e4e4;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:860px){.pdp{grid-template-columns:1fr}.pdp__stage{position:static;order:-1}}
@media (prefers-reduced-motion:reduce){.pdp__shot,.pdp__scale{transition:none}}

@media (max-width:900px) and (min-width:621px){.merch{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- the cards we take, in the footer ---- */
.pay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0 4px;border-top:1px solid rgba(0,0,0,.12);min-width:0;flex:1 1 100%;max-width:100%}
.pay__note{flex-basis:100%;min-width:0;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#8d8d8d;line-height:1.6}
.pay__lab{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#8d8d8d}
.pay__marks{display:flex;align-items:center;gap:9px}
.pay__card{display:grid;place-items:center;height:24px;min-width:38px;padding:0 7px;background:#fff;border-radius:3px}
.pay__card--visa{font-family:var(--display);font-style:italic;font-weight:900;font-size:13px;letter-spacing:.01em;color:#1434CB}
.pay__card--mc{padding:0 5px}
.pay__card svg{display:block}

/* ---- three upright prints, not one lonely one ---- */
.rest--prints{display:block}
.p--prints{max-width:1180px;margin-inline:auto}
.p__trio{aspect-ratio:auto;display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,2.4vw,34px);padding:0 0 10px}
.p__trio .p__print{flex:0 1 clamp(150px,30%,368px);width:auto;background:#fff;padding:clamp(10px,1.5vw,22px) clamp(10px,1.5vw,22px) clamp(18px,2.8vw,42px);box-shadow:var(--print-box);display:block}
.p__trio .p__print img{width:100%;height:auto;display:block}
@media (max-width:620px){.p__trio{gap:9px}.p__trio .p__print{padding:8px 8px 14px}}

/* ---- footer: 03 Hard split. Red meets black on a straight vertical edge,
   the cover's title panel running the full height of the footer. ---- */
.foot{display:grid;grid-template-columns:minmax(230px,32%) 1fr;background:#0d0d0d;color:#fff;border-top:4px solid var(--ink)}
.foot__panel{position:relative;display:grid;align-content:center;gap:0;
  padding:clamp(26px,3.4vw,52px) clamp(20px,2.6vw,40px);text-decoration:none;overflow:hidden;
  background:var(--dayglo);
  font-size:clamp(28px,3.9vw,54px)}
.foot__panel b{font-weight:900;font-size:1em;line-height:.86;letter-spacing:-.045em;color:#0b0b0b;font-stretch:98%}
.foot__by{position:absolute;top:.52em;right:.5em;font-weight:900;font-size:.33em;line-height:.94;
  text-align:right;color:#0b0b0b;letter-spacing:-.02em}
.foot__panel:focus-visible{outline:3px solid #fff;outline-offset:-6px}

.foot__body{padding:clamp(32px,4vw,56px) clamp(24px,3.2vw,52px) clamp(18px,2.2vw,26px);
  display:grid;align-content:space-between;gap:clamp(26px,3.4vw,44px)}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,34px)}
.foot__cols h3{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:400;color:var(--dayglo)}
.foot__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot__cols a{color:#ededed;font-size:15px;text-decoration:none}
.foot__cols a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.foot__bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 32px;
  padding-top:clamp(14px,1.8vw,20px);border-top:1px solid rgba(255,255,255,.15)}
.foot__legal{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#8d8d8d}
/* the domain sits in the red panel, under the wordmark */
.foot__panel .foot__dom{margin-top:.5em;font-family:var(--mono);font-size:.19em;
  letter-spacing:.14em;text-transform:lowercase;color:rgba(0,0,0,.62);font-weight:700}
/* Three things, three jobs. The cards take the top line on their own, then the
   copyright and the payment note share the line beneath it, one at each end. The
   note is a sentence, so it is never cut in half: when there is no room for both
   it drops whole onto its own line and stays at the right. */
.foot__bar .pay{order:1;flex:1 1 100%;padding:0;border-top:0;justify-content:flex-end}
.foot__bar .foot__legal{order:2;flex:0 1 auto;min-width:0}
.foot__bar .pay__note{order:3;flex:0 1 auto;margin:0 0 0 auto;text-align:right;text-wrap:balance}

.foot__bar .foot__legal{flex:0 1 auto;min-width:0}

/* narrow: everything to the left, stacked, nothing pinned to an edge it cannot reach */
@media (max-width:880px){
  .foot__bar{gap:14px}
  .foot__bar .pay{justify-content:flex-start}
  .foot__bar .foot__legal,.foot__bar .pay__note{flex:1 1 100%}
  .foot__bar .pay__note{margin-left:0;text-align:left}
}

@media (max-width:900px){
  .foot{grid-template-columns:1fr}
  .foot__panel{font-size:clamp(26px,6.4vw,40px);padding:clamp(22px,4vw,34px) clamp(20px,4vw,30px)}
  .foot__by{top:.5em;right:.5em}
}
@media (max-width:560px){
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
  .foot__bar{justify-content:flex-start}
  .foot__dom{margin-left:0}
}

/* ---- the homepage: the book first and big, then prints, then merch ---- */

/* 1. the book. Black ground so the cover hits, which is the point. */
.hero{background:#fff;color:var(--ink);padding-block:clamp(40px,5.4vw,86px)}
.hero__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:center}
.hero__shot{display:block}
.hero__shot img{width:100%;height:auto;display:block;filter:var(--book-drop)}
.hero__tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);padding:0;margin-bottom:clamp(12px,1.4vw,18px)}
.hero__mark{margin:0 0 clamp(16px,1.8vw,24px);line-height:0}
.hero__mark img{display:block;width:clamp(210px,24vw,330px);height:auto}
.hero__say h1{margin:0 0 clamp(14px,1.6vw,20px);font-size:clamp(34px,5.4vw,76px);line-height:.94;letter-spacing:-.04em}
.hero__line{margin:0 0 clamp(20px,2.4vw,30px);font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:var(--ink-2);max-width:26ch}
.hero__spec{list-style:none;margin:0 0 clamp(22px,2.6vw,32px);padding:0;display:grid;gap:7px}
.hero__spec li{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-2);padding-left:17px;position:relative}
.hero__spec li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--dayglo)}
.hero__price{margin:0 0 clamp(20px,2.3vw,28px);display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;font-family:var(--mono)}
.hero__price b{font-size:clamp(30px,3.6vw,46px);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.hero__price span{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dayglo)}
.hero__price i{font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--ink-3)}
.hero__go{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero__ship{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* 2 and 3. the bands under it */
.band{padding-block:clamp(40px,5vw,78px)}
.band--merch{background:var(--paper);--even:clamp(24px,2.6vw,34px)}
.band__head{margin-bottom:clamp(22px,2.8vw,38px)}
.band__head h2{margin:0 0 6px;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em}
.band__head p{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
/* the homepage prints band is a teaser of the prints page: the same square
   tile, bleed to bleed, six of the twelve */
.band--prints{background:var(--paper-2)}
.band__shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
@media (max-width:860px){.band__shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.band__shots{grid-template-columns:repeat(1,minmax(0,1fr))}}
.band__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(20px,2.4vw,30px)}
.band__price{margin:0;display:flex;align-items:baseline;gap:10px;font-family:var(--mono)}
.band__price b{font-size:clamp(20px,2.2vw,28px);font-variant-numeric:tabular-nums}
.band__price span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dayglo)}
.band__note{margin:var(--even,30px) 0 0;text-align:center;font-family:var(--mono);font-size:12px;color:var(--ink-3)}

.mrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,40px)}
.mrow__i{display:flex;flex-direction:column;align-items:stretch}
.mrow__shot{position:relative;display:block;width:100%;aspect-ratio:900/956;overflow:hidden;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.05),0 14px 34px rgba(0,0,0,.09)}
.mrow__shot img{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;padding:clamp(10px,1.4vw,22px);object-fit:contain}
.mrow__line{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:clamp(16px,1.9vw,22px) 0 var(--even,30px);padding-bottom:clamp(16px,1.8vw,22px);border-bottom:1px solid #e3e3e3}
.mrow__i h3{margin:0;font-size:clamp(17px,1.8vw,22px);letter-spacing:-.02em}
.mrow__i h3 i{display:block;margin-top:4px;font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mrow__i .pill{align-self:center}
.mrow__sub{margin:0 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mrow__p{margin:0;font-family:var(--mono);font-size:clamp(16px,1.7vw,20px);font-variant-numeric:tabular-nums}

.sf__more{margin-top:clamp(40px,5vw,78px);padding-top:18px;border-top:1px solid #dcdcdc;
  display:flex;justify-content:center;gap:10px 26px;flex-wrap:wrap}
.sf__more a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-2)}
.sf__more a:hover{color:var(--dayglo)}

@media (max-width:860px){
  .hero__in{grid-template-columns:1fr;gap:30px}
  .hero__shot{max-width:min(380px,66vw);margin-inline:auto}
  .hero__shot img{filter:var(--book-drop-sm)}
  .band__shots{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .mrow{grid-template-columns:1fr;gap:28px}
  .band__shots{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- prints on a wall, after the Disco Pogo shop: a thin black moulding,
   a generous white mount, and the title under it. Two across. ---- */
.fr-wrap{background:#f4f3f1;padding-block:clamp(34px,4.4vw,70px)}
.fr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,5vw,86px) clamp(30px,4.6vw,78px)}
.fr{margin:0;display:flex;flex-direction:column;align-items:center}
.fr__a{display:block;width:100%;text-decoration:none}
.fr__mount{position:relative;display:block;background:#fff;
  border:clamp(8px,0.85vw,13px) solid #15110e;
  box-shadow:var(--book-box);
  aspect-ratio:3/4}
.fr__mount img{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;
  padding:clamp(20px,3.4vw,54px);object-fit:contain;display:block}
.fr__cap{margin-top:clamp(14px,1.7vw,22px);text-align:center;display:grid;gap:5px}
.fr__cap a{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink-2);text-decoration:none}
.fr__cap a:hover{color:var(--dayglo)}
.fr__cap span{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}

/* paginated */
.pager{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:clamp(36px,4.6vw,66px)}
.pager button{border:1px solid #d9d6d1;background:#fff;color:var(--ink-2);cursor:pointer;
  font-family:var(--mono);font-size:13px;min-width:40px;height:40px;padding:0 11px;border-radius:2px}
.pager button:hover{border-color:var(--ink);color:var(--ink)}
.pager .is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.pager__b{font-size:15px}

/* side scroll */
.fr-wrap--scroll{padding-inline:0}
.fr-wrap .band__head{margin-bottom:clamp(10px,1.2vw,16px)}
.fr-wrap .band__head h1{margin:0 0 6px;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em}
.fr-wrap .band__head p{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.fr-hint{margin:0 0 clamp(20px,2.4vw,32px);font-family:var(--mono);font-size:12px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}
.fr-rail{display:flex;gap:clamp(26px,3.6vw,64px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter))) 10px;
  scrollbar-width:none}
.fr-rail::-webkit-scrollbar{display:none}
.fr-rail{--fh:clamp(280px,34vw,440px)}
.fr-rail .fr{flex:0 0 calc(var(--fh) * var(--w,3) / var(--h,4));scroll-snap-align:center;align-items:center}
.fr-rail .fr__mount{height:var(--fh);width:100%;aspect-ratio:auto}
.fr-rail .fr__cap{width:100%}
.fr-bar{height:2px;background:#ddd9d4;margin-top:clamp(22px,2.6vw,34px)}
.fr-bar__fill{display:block;height:100%;background:var(--ink);width:0;transition:width .12s linear}

@media (max-width:620px){
  .fr-grid{grid-template-columns:1fr;gap:34px}
  .fr__mount{border-width:7px;padding:16px}
  .fr-rail .fr{flex-basis:76vw}
}

/* ---- the presale band across the cover, the way a publisher wraps a belly
   band round a book. Hidden until the live count says copies are left, so it
   can never promise a price that has run out. ---- */
.hero__shot{position:relative;display:block}
.flash{position:absolute;left:0;right:0;top:0;z-index:2;
  display:flex;align-items:baseline;justify-content:center;gap:clamp(8px,1.2vw,16px);flex-wrap:wrap;
  padding:clamp(9px,1.2vw,15px) clamp(10px,1.6vw,20px);
  background:var(--dayglo);color:#0b0b0b;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7);pointer-events:none}
.flash b{font-family:var(--display);font-weight:900;font-size:clamp(13px,1.5vw,19px);
  letter-spacing:-.015em;line-height:1;text-transform:uppercase}
.flash i{font-style:normal;font-family:var(--mono);font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
/* On a phone the band has the width to itself, so it can afford to be taller and
   louder than the desktop one, where it sits beside everything else. */
@media (max-width:620px){
  .flash{gap:5px;padding:14px 14px 15px}
  .flash b{font-size:17px;letter-spacing:-.01em}
  .flash i{font-size:11px;letter-spacing:.12em}
}
/* the cast shadow the arriving band throws onto the cover. Only ever visible while
   the band is moving: at rest it is the band's own footprint at low opacity. */
.flash__cast{position:absolute;left:0;right:0;top:0;z-index:1;background:#000;
  transform-origin:50% 0;opacity:0;pointer-events:none;will-change:transform,opacity,filter}
.flash{will-change:transform;box-shadow:0 1px 5px rgba(0,0,0,.20)}


/* ---- buying the book: the destination decides the total, so it is chosen
   before the button does anything ---- */
/* ---- the watch list, kept per item ---- */
.nfy{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0;text-align:center}
.nfy__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:100%}
.nfy__in[hidden]{display:none}
.nfy input{font:inherit;font-size:15px;padding:12px 14px;border:1px solid #c9c9c9;background:#fff;min-width:0;width:min(220px,100%)}
.nfy input:focus{outline:2px solid var(--dayglo);outline-offset:-1px;border-color:var(--dayglo)}
.nfy__msg:empty{display:none}
.nfy__msg{width:100%;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.nfy__msg.is-on{color:var(--dayglo)}
/* ---- the checkout, the only job on the page ---- */
.co{padding-block:clamp(34px,4.5vw,64px)}
.co__in{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  grid-template-rows:auto auto;gap:clamp(26px,4vw,56px);align-items:stretch}
.co__obj{grid-column:1;grid-row:1;align-self:start}
.co__obj img{display:block;width:100%;height:auto;box-shadow:var(--book-box)}
.co__what{grid-column:1;grid-row:2;margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2);align-self:start}
.co__what b{font-size:16px;color:var(--ink)}
.co__in>.co__form{display:contents}
.co__top{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.6vw,20px)}
/* the eyebrow and the heading carry margins from before this column used gap, so every
   space between them was being paid for twice. The gap alone sets the rhythm now. */
.co__top>.hero__tag{margin-bottom:0}
.co__top>h1{margin-top:0;margin-bottom:0}
.co__go{margin-top:0;padding-top:clamp(14px,1.6vw,20px)}
.co__go .pill{display:flex;width:100%}
.co__top .buy__who{margin-bottom:0}
.co__top .buy__r{margin-bottom:0}
.co__top .buy__zones{margin-bottom:0}
.co__end{grid-column:2;grid-row:2;align-self:start}
.co__end .buy__small{margin:0}
.co__pay h1,.co__top h1{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;margin:8px 0 4px}
.co .buy{max-width:none}
@media(max-width:1180px){.co__in{grid-template-columns:1fr;grid-template-rows:auto}.co__obj,.co__what,.co__top,.co__end{grid-column:1;grid-row:auto}.co__obj{max-width:300px}}
.buy{display:grid;gap:4px;max-width:30em}
.buy__price{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-family:var(--mono)}
.buy__price b{font-size:clamp(26px,3.2vw,38px);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.buy__price span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dayglo)}
.buy__break{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3)}
.buy #buy-go[aria-disabled="true"]{background:#d6d6d6;border-color:#d6d6d6;color:#6b6b6b;cursor:not-allowed}
.buy__small{margin:14px 0 0;font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.03em;color:var(--ink-3);max-width:34em}

/* ---- where it is going. Rapyd takes the card and hands back no address, so
   the buyer gives it here and we hold it ourselves. ---- */
.buy__zones{border:0;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.buy__zones legend{float:left;width:100%;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:var(--dayglo);padding:0;margin:0 0 12px}
.buy__zones label{display:inline-flex;align-items:center;border:1px solid #c9c9c9;background:#fff;padding:10px 16px;cursor:pointer;font-size:15px;transition:background .12s,border-color .12s}
.buy__zones label:hover{border-color:var(--ink)}
.buy__zones input{position:absolute;opacity:0;width:0;height:0}
.buy__zones label:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.buy__zones label:has(input:focus-visible){outline:2px solid var(--dayglo);outline-offset:2px}
/* On a phone the four destinations wrapped on their own widths, so Ireland and the
   United Kingdom could end up on different lines. Two to a row, both halves equal,
   so Ireland sits beside the United Kingdom and Europe beside the rest of the world. */
@media (max-width:620px){
  .buy__zones label{flex:1 1 calc(50% - 4px);min-width:0;justify-content:center;text-align:center;
    padding:13px 6px;font-size:14px;line-height:1.25}
}
.buy__r{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;border:1px solid #ddd;padding:22px clamp(16px,3vw,24px);margin:0 0 22px}
.buy__r div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:6px 0}
.buy__r em{font-style:normal;font-weight:700}
.buy__r-tot{border-top:1px solid #ccc;margin-top:10px;padding-top:14px!important;font-size:19px;font-weight:700;letter-spacing:.02em}
.buy__r-tot i{font-style:normal;display:block;font-size:11px;font-weight:400;letter-spacing:.12em;color:var(--dayglo);margin-top:3px}
.buy__who{margin:0 0 18px}
.buy__wholab{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.buy__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.buy__f{display:grid;gap:4px}
.buy__f--wide{grid-column:1/-1}
/* what the checkout says when the two addresses disagree, or a domain looks mistyped */
.mailwarn{margin:2px 0 0;font-family:var(--mono);font-size:12px;line-height:1.5;
  letter-spacing:.03em;color:var(--dayglo);font-weight:700}
.mailwarn[hidden]{display:none}
.buy__f span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.buy__f input{font:inherit;font-size:15px;padding:10px 12px;border:1px solid #ddd;background:#fff;
  border-radius:2px;width:100%;min-width:0}
.buy__f input:focus{outline:2px solid var(--dayglo);outline-offset:-1px;border-color:var(--dayglo)}
.buy #buy-go{border:0;cursor:pointer;font:inherit;font-weight:700}
.buy #buy-go:disabled{background:#d6d6d6;color:#6b6b6b;cursor:not-allowed}
@media (max-width:480px){.buy__grid{grid-template-columns:1fr}}

/* ---- the web development credit, quiet at the very bottom ---- */
.dev-credit{--dc-mark:var(--dayglo);--dc-text:#8d8d8d;--dc-name:#fff;--dc-rule:#2a2a2a;
  grid-column:1/-1;margin:0;padding:18px clamp(20px,2.6vw,40px);
  border-top:1px solid var(--dc-rule);text-align:center}
.dev-credit a{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;
  font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dc-text)!important;text-decoration:none!important;transition:color .25s}
.dev-credit i{display:inline-flex;gap:1px;font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;letter-spacing:0;color:var(--dc-mark)}
.dev-credit i span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.dev-credit b{font-weight:600;color:var(--dc-name);letter-spacing:.06em;text-transform:none;font-size:13px;transition:color .25s}
.dev-credit a:hover i span:first-child{transform:translateX(-4px)}
.dev-credit a:hover i span:last-child{transform:translateX(4px)}
.dev-credit a:hover b{color:var(--dc-mark)}
@media (max-width:359px){.dev-credit a{letter-spacing:.08em;gap:8px 7px}}
@media (prefers-reduced-motion:reduce){.dev-credit i span{transition:none}}

/* the prints page head, the same air above the title as below it */
.ptop{padding-top:clamp(58px,6vw,84px)}
.ptop .band__head{margin-bottom:clamp(58px,6vw,84px)}