[hidden]{display:none!important}
/* Layout: a white imprint page. Centred serif masthead, book as object, price lists set like a catalogue, one dark band for publishers. */
:root{
  --paper:#ffffff; --stone:#f5f3ef; --ink:#141312; --soft:#5d5852; --rule:#e3dfd8; --ox:#8e1c22; --night:#121110;
  --display:"Libre Caslon Display","Bodoni 72",Georgia,serif;
  --serif:"Libre Caslon Text",Georgia,serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --max:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media(min-width:700px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.lede{font-family:var(--serif);font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:#2b2926;max-width:58ch}
.muted{color:var(--soft)}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px}


/* masthead */
.imprint{border-bottom:1px solid var(--rule);font:500 12px/1 var(--sans);letter-spacing:.08em;color:var(--soft)}
.imprint .wrap{display:flex;justify-content:space-between;gap:12px;padding-block:10px;flex-wrap:wrap}
.imprint a{text-decoration:none}
.imprint a:hover{color:var(--ink)}
header.mast{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
header.mast .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:16px}
.word{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);text-decoration:none;text-align:center;line-height:1;white-space:nowrap}
.word small{display:block;font:600 10px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--soft);margin-top:6px}
nav.main{display:flex;gap:22px;font:500 14px/1 var(--sans)}
nav.main a{text-decoration:none;color:var(--soft)}
nav.main a:hover{color:var(--ink)}
.mast .right{display:flex;justify-content:flex-end;gap:18px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--sans);letter-spacing:.02em;text-decoration:none;padding:15px 22px;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:#fff}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:var(--ox);border-color:var(--ox)}
.btn.sm{padding:11px 16px;font-size:13px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.burger{display:none}
@media(max-width:900px){nav.main{display:none}header.mast .wrap{grid-template-columns:auto 1fr}.word{text-align:left}.mast .left{display:none}}
@media(max-width:480px){.mast .right .btn{display:none}}

section{padding-block:clamp(64px,9vw,120px);border-bottom:1px solid var(--rule)}
section.tight{padding-block:clamp(48px,6vw,80px)}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,90px);align-items:center}
.hero h1{font-size:clamp(44px,6.4vw,92px);margin-top:22px}
.hero h1 em{font-style:italic;color:var(--ox)}
.hero .lede{margin-top:26px}
.hero .btns{margin-top:34px}
.promise{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:34px;font:500 13px/1.4 var(--sans);color:var(--soft)}
.promise span{padding-right:14px;margin-right:14px;border-right:1px solid var(--rule)}
.promise span:last-child{border-right:0}
.bookshot{background:var(--stone);aspect-ratio:4/5;display:grid;place-items:center;padding:12%;position:relative}
.bookshot img{box-shadow:24px 30px 50px rgba(20,19,18,.28),0 2px 4px rgba(20,19,18,.15);transform:rotate(-3deg)}
.bookshot figcaption{position:absolute;left:0;right:0;bottom:-30px;font:italic 400 14px/1.3 var(--serif);color:var(--soft)}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.bookshot{max-width:420px}}

/* reach */
.reach-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.reach-head h2{font-size:clamp(34px,4vw,54px);max-width:16ch}
.figs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-top:1px solid var(--ink)}
.fig{padding:26px 22px 26px 0;border-bottom:1px solid var(--rule);min-width:0}
.fig+.fig{padding-left:22px;border-left:1px solid var(--rule)}
.fig:nth-child(3n+1){padding-left:0;border-left:0}
.fig b{display:block;font:400 clamp(48px,6vw,84px)/1 var(--display);font-variant-numeric:lining-nums tabular-nums}
.fig span{display:block;margin-top:12px;font:500 14px/1.4 var(--sans);color:var(--soft)}
.src{margin-top:16px;font-size:13px;color:var(--soft)}
@media(max-width:720px){.figs{grid-template-columns:1fr 1fr}.fig,.fig+.fig{padding:22px 12px 22px 0;border-left:0}.fig:nth-child(even){padding-left:16px;border-left:1px solid var(--rule)}}

/* three reasons */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:44px}
.three h3{font-size:28px;margin-top:14px}
.three p{margin-top:12px;color:#3b3834}
.three .n{font:italic 400 18px/1 var(--serif);color:var(--ox)}
@media(max-width:820px){.three{grid-template-columns:1fr}}

.head2{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,5vw,80px);align-items:end}
.head2 h2{font-size:clamp(38px,4.6vw,64px)}
@media(max-width:820px){.head2{grid-template-columns:1fr}}

/* packages */
.pk{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;border:1px solid var(--rule)}
.pk>div{padding:30px 24px;display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--rule);min-width:0}
.pk>div:last-child{border-right:0}
.pk .name{font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.pk .price{font:400 48px/1 var(--display)}
.pk .price small{font:500 13px/1 var(--sans);color:var(--soft);letter-spacing:.04em;margin-left:4px}
.pk .for{font:italic 400 15px/1.4 var(--serif);color:var(--soft)}
.pk ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px;font-size:15px;line-height:1.45}
.pk li{padding-left:18px;position:relative}
.pk li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--ink)}
.pk li.web{font-weight:600}
.pk .btn{margin-top:auto;align-self:flex-start}
.pk>div.lead{background:var(--night);color:#f2efea}
.pk>div.lead .for{color:#b9b2a8}
.pk>div.lead li::before{background:#f2efea}
.pk>div.lead .btn{border-color:#f2efea;color:#f2efea}
.pk>div.lead .btn:hover{background:#f2efea;color:var(--night)}
.pk .tag{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#e0585a}
@media(max-width:1000px){.pk{grid-template-columns:1fr 1fr}.pk>div:nth-child(2){border-right:0}.pk>div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media(max-width:600px){.pk{grid-template-columns:1fr}.pk>div{border-right:0;border-bottom:1px solid var(--rule)}}
.after{margin-top:20px;font-size:15px;color:var(--soft);max-width:80ch}

/* price list */
.list{margin-top:44px;border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:22px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.row h3{font-size:26px}
.row p{grid-column:1;color:var(--soft);font-size:15px;max-width:60ch}
.row .p{grid-column:2;grid-row:1/3;font:400 30px/1 var(--display);white-space:nowrap;align-self:center}
.row .p small{font:500 13px/1 var(--sans);color:var(--soft)}

/* publishers band */
.dark{background:var(--night);color:#f2efea;border-bottom:0}
.dark .eyebrow{color:#a9a298}
.dark .lede{color:#ddd7cf}
.dark .head2 h2 em{font-style:italic;color:#e0585a}
.pub{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:1px solid #3a3734}
.pub>div{padding:28px 24px 30px 0;min-width:0}
.pub>div+div{padding-left:24px;border-left:1px solid #3a3734}
.pub h3{font-size:30px}
.pub .price{font:400 22px/1.2 var(--display);color:#e0585a;margin-top:10px}
.pub ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;color:#cfc9c0;font-size:15px}
.pub li::before{content:"— ";color:#7c756c}
.dark .btn{border-color:#f2efea;color:#f2efea}
.dark .btn:hover{background:#f2efea;color:var(--night)}
.dark .btn.solid{background:#f2efea;color:var(--night)}
.dark .btn.solid:hover{background:var(--ox);color:#fff;border-color:var(--ox)}
@media(max-width:820px){.pub{grid-template-columns:1fr}.pub>div+div{padding-left:0;border-left:0;border-top:1px solid #3a3734}}

/* books */
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:44px}
.shelf a,.shelf div.case{text-decoration:none;display:grid;gap:16px;align-content:start}
.shelf .cov{background:var(--stone);aspect-ratio:4/5;display:grid;place-items:center;padding:12%}
.shelf .cov img{box-shadow:14px 18px 30px rgba(20,19,18,.25);max-height:100%;width:auto}
.shelf .cov.stat{flex-direction:column;text-align:center}
.shelf .cov.stat b{font:400 clamp(64px,8vw,110px)/1 var(--display);color:var(--ox)}
.shelf h3{font-size:24px}
.shelf p{color:var(--soft);font-size:15px;margin-top:6px}
.shelf .when{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
@media(max-width:760px){.shelf{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.shelf{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid var(--ink);padding-top:18px;min-width:0}
.steps li::before{content:counter(s);display:block;font:italic 400 30px/1 var(--serif);color:var(--ox);margin-bottom:12px}
.steps b{display:block;font:600 15px/1.3 var(--sans)}
.steps span{display:block;color:var(--soft);font-size:15px;margin-top:4px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}

/* faq */
.faq{margin-top:36px;border-top:1px solid var(--ink);max-width:880px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font:400 clamp(21px,2vw,26px)/1.25 var(--display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font:300 28px/1 var(--sans);color:var(--soft);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:#3b3834;max-width:65ch}

/* submit */
.submit{background:var(--stone)}
.submit .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,90px)}
.submit h2{font-size:clamp(40px,5vw,68px)}
.tabs{display:flex;gap:0;margin-bottom:22px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.tabs button{font:600 14px/1 var(--sans);background:none;border:0;border-bottom:2px solid transparent;padding:14px 16px 14px 0;margin-right:16px;cursor:pointer;color:var(--soft)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
form.f{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.f .full{grid-column:1/-1}
form.f label{display:grid;gap:8px;font:600 13px/1 var(--sans);color:var(--ink)}
form.f input,form.f select,form.f textarea{font:400 16px/1.4 var(--sans);color:var(--ink);background:#fff;border:1px solid #cfc9c0;padding:14px;border-radius:0;width:100%}
form.f input:focus,form.f select:focus,form.f textarea:focus{border-color:var(--ink);outline:0}
.drop{grid-column:1/-1;border:1px dashed #b5aea4;background:#fff;padding:26px;text-align:center;font-size:15px;color:var(--soft);cursor:pointer}
.drop b{color:var(--ink)}
.drop input{display:none}
form.f .ok{grid-column:1/-1}
@media(max-width:820px){.submit .wrap{grid-template-columns:1fr}}
@media(max-width:520px){form.f{grid-template-columns:1fr}}

footer{padding-block:48px;font-size:14px;color:var(--soft)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer .word{text-align:left;font-size:22px;color:var(--ink)}

/* round 2b: Faber-style oxblood masthead + hero */
:root{--blood:#5b1f1a;--blood-2:#4a1915}
.imprint{background:#0e0d0c;color:#d8d2ca;border:0}
header.mast{background:var(--blood);border:0;color:#f6efe8;position:relative}
header.mast .wrap{display:flex;flex-direction:column;align-items:center;gap:20px;padding-block:30px 22px}
.word{font-size:clamp(34px,4.4vw,58px);color:#fff}
.word small{color:#e1c9c3;margin-top:10px}
nav.main{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
nav.main a{color:#f6efe8}
nav.main a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
nav.main a.pill{background:#f6efe8;color:var(--blood);padding:9px 12px}
nav.main a.pill:hover{text-decoration:none;background:#fff}
@media(max-width:900px){nav.main{display:flex}}
@media(max-width:600px){nav.main a:not(.pill){display:none}}
.hero{background:var(--blood);color:#f6efe8;border:0;padding-block:clamp(30px,5vw,70px) clamp(60px,8vw,110px)}
.hero .eyebrow{color:#e1c9c3}
.hero h1{color:#fff;font-size:clamp(46px,6.2vw,92px);line-height:1}
.hero h1 em{color:#f6efe8;font-style:italic;padding-left:1.2em}
.hero .lede{color:#efe3dc}
.hero .btn{border-color:#f6efe8;color:#f6efe8}
.hero .btn:hover{background:#f6efe8;color:var(--blood)}
.hero .btn.solid{background:#f6efe8;color:var(--blood)}
.hero .btn.solid:hover{background:#fff;color:var(--blood);border-color:#fff}
.fan{position:relative;aspect-ratio:1/1;max-width:520px;width:100%;justify-self:center}
.fan img{position:absolute;width:46%;box-shadow:18px 26px 50px rgba(0,0,0,.45)}
.fan .b1{left:2%;top:4%;transform:rotate(-6deg)}
.fan .b3{right:2%;top:10%;transform:rotate(5deg)}
.fan .b2{left:27%;top:18%;width:50%;z-index:2}
.statement{text-align:center;border-bottom:0}
.statement .mark{font:400 64px/1 var(--display);color:var(--blood)}
.statement .say{font:400 clamp(20px,2vw,25px)/1.5 var(--serif);max-width:44ch;margin:26px auto 0;color:var(--ink)}
.statement .promise{justify-content:center;margin-top:30px}
.pk>div.lead{background:var(--blood)}
.dark{background:var(--blood-2)}
.dark .pub,.dark .pub>div+div{border-color:rgba(255,255,255,.18)}

/* shelf rail */
#books .head2{position:relative}
.railnav{display:flex;gap:8px;justify-content:flex-end;margin-top:32px}
.railnav button{width:48px;height:48px;border:1px solid var(--rule);background:#fff;font-size:18px;cursor:pointer;color:var(--ink)}
.railnav button:hover{border-color:var(--ink)}
.rail{display:flex;gap:clamp(18px,2.6vw,34px);overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 0 12px;scrollbar-width:thin;overscroll-behavior-x:contain}
.bk{flex:0 0 clamp(240px,30vw,340px);scroll-snap-align:start;text-decoration:none;display:grid;gap:10px;align-content:start;min-width:0}
.bk .cov{background:var(--stone);aspect-ratio:4/5;display:grid;place-items:center;padding:11%;margin-bottom:8px;overflow:hidden}
.bk .cov img{box-shadow:14px 18px 30px rgba(20,19,18,.25);max-height:100%;width:auto;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.bk:hover .cov img{transform:translateY(-6px) rotate(-1deg)}
.bk .cov.light{background:#3a1512}
.bk .cov.stat{display:flex;flex-direction:column;justify-content:center;text-align:center}
.bk .cov.stat b{font:400 clamp(64px,8vw,110px)/1 var(--display);color:var(--blood)}
.bk h3{font-size:26px}
.bk p{color:var(--soft);font-size:15px}
.bk .when{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
@media (prefers-reduced-motion:reduce){.bk .cov img{transition:none}}

/* colour options */
:root{--blood:#141312;--blood-2:#1d1b19}
:root header.mast{border-bottom:3px solid #a53131}
:root .hero h1 em{color:#e0585a}
/* case study */
.case-study .wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(32px,6vw,90px);align-items:center}
.cs-cover{background:var(--stone);aspect-ratio:4/5;display:grid;place-items:center;padding:10%}
.cs-cover img{box-shadow:14px 18px 30px rgba(20,19,18,.25);max-height:100%;width:auto}
.cs-num{font:400 clamp(80px,11vw,150px)/.9 var(--display);color:var(--blood);margin-top:16px}
.cs-cap{font:italic 400 20px/1.3 var(--serif);color:var(--soft);margin-top:8px}
@media(max-width:760px){.case-study .wrap{grid-template-columns:1fr}.cs-cover{max-width:340px}}

/* packages: swipe on phones, side by side on desktop */
.swipe{display:none;font:500 13px/1 var(--sans);color:var(--soft);margin-top:30px}
@media(max-width:700px){
  .swipe{display:block}
  .pk{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;border:0;margin-top:14px;margin-right:calc(-1*max(16px,env(safe-area-inset-right,0px)));padding-right:16px;overscroll-behavior-x:contain}
  .pk>div{flex:0 0 84%;scroll-snap-align:start;border:1px solid var(--rule)!important}
}

/* proof: two case studies */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:44px}
.case{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:center;min-width:0}
.case .cs-cover{padding:12%}
.case .cs-num{font-size:clamp(64px,7vw,104px);margin-top:0}
.cs-book{margin-top:14px;font:400 18px/1.4 var(--serif)}
.cs-more{margin-top:8px;font-size:14px;color:var(--soft)}
@media(max-width:900px){.cases{grid-template-columns:1fr}}
@media(max-width:480px){.case{grid-template-columns:1fr}.case .cs-cover{max-width:260px}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
footer .foot{display:flex;flex-wrap:wrap;gap:8px 20px}
footer .foot a{text-decoration:none}
footer .foot a:hover{color:var(--ink)}
.row h3 a{text-decoration:none}
.row h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.cs-num{color:var(--ox)}
/* hero covers side by side, none covered (Ben, 22 Oct) */
.fan{display:flex;gap:4%;align-items:center;justify-content:center;aspect-ratio:auto;max-width:600px}
.fan img,.fan .b1,.fan .b2,.fan .b3{position:static;width:30.6%;transform:none;box-shadow:12px 18px 34px rgba(0,0,0,.5)}
.fan .b2{width:30.6%;transform:translateY(-6%)}
.hero .wrap{grid-template-columns:1fr 1fr}@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}}
/* hero covers: one big in the middle, one either side, sliding round (Ben, 22 Oct). Nothing covers another cover. */
.fan{position:relative;display:block;aspect-ratio:5/4;max-width:640px;width:100%}
.fan img,.fan img.l,.fan img.c,.fan img.r{position:absolute;top:50%;left:50%;width:40%;box-shadow:16px 24px 44px rgba(0,0,0,.55);cursor:pointer;
  transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .9s}
.fan img.c{transform:translate(-50%,-50%) scale(1);z-index:3;filter:none;cursor:default}
.fan img.l{transform:translate(-137.5%,-50%) scale(.68);z-index:1;filter:brightness(.6)}
.fan img.r{transform:translate(37.5%,-50%) scale(.68);z-index:1;filter:brightness(.6)}
@media (prefers-reduced-motion:reduce){.fan img{transition:none}}
/* phones: a shorter masthead and hero so the covers start higher (Ben, 22 Oct) */
@media(max-width:600px){
  header.mast .wrap{flex-direction:row;justify-content:space-between;gap:12px;padding-block:14px}
  .word{font-size:24px;text-align:left}
  .word small{display:none}
  nav.main a.pill{padding:8px 10px;font-size:11px;letter-spacing:.08em}
  .hero{padding-block:22px 40px}
  .hero .wrap{gap:22px}
  .hero h1{font-size:40px;margin-top:12px}
  .hero h1 em{padding-left:.6em}
  .hero .lede{margin-top:14px;font-size:17px}
  .hero .btns{margin-top:20px}
  .hero .btn{padding:13px 16px;font-size:13px}
  .fan{aspect-ratio:5/3.6}
}