/*
   ....    ... ..  ...   ....    ....  ... ..  ...   ....
  ||. '    ||   ||  ||   ||. '  ||. '   ||   ||  ||   ||. '
  |  |     ||   ||  ||   ||  |  |  |    ||   ||  ||   ||
  |. '     ||   ||  ||   ||. '  |. '    ||   ||  ||   ||. '
   '...'  .||. .||. .||.  '...'   '...'  .||. .||. .||.  '...'
  ------------------------------------------------------------------
  home.css  --  the front page's own sheet
  One screen of ink on paper, with the shop's pastel red doing the pointing:
  the marker behind the last word of the headline, the one button, and the small
  proofs. Nothing here is shared with the box -- book.html keeps styles.css.
  art: https://patorjk.com/software/taag/#p=display&f=Kban&t=goode
*/

:root{
  --ink:#12161c;
  --ink-2:#3d4652;
  --ink-3:#6f7780;
  --paper:#fdfbfa;
  --line:#ece6e3;

  --rose:#f2b8b5;
  --rose-deep:#c9605b;
  --rose-tint:#fdeeec;

  color-scheme: light;
}

*{ box-sizing:border-box }

html{
  overflow-x:clip; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

.page{
  max-width:660px;
  margin:0 auto;
  padding:28px 22px 40px;
}

.top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:26px;
}

.brand{
  display:inline-block;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);
  border:2.5px solid var(--ink);border-radius:7px;
  padding:6px 11px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .14s ease, color .14s ease, border-color .14s ease;
}
.brand:hover{ background:var(--rose-tint); border-color:var(--rose-deep); color:#2b1310 }
.brand:focus-visible{ outline:2px solid var(--ink);outline-offset:3px }

.top__call{
  font-size:14px;font-weight:600;color:var(--ink-2);
  white-space:nowrap;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-decoration-color:rgba(18,22,28,.32);
  text-underline-offset:4px;
}
.top__call:hover{ color:var(--ink);text-decoration-color:var(--rose-deep) }

.hero{
  position:relative;
  padding:26px 0 8px;
}

.hero__bleed{
  position:absolute;
  top:0;
  bottom:-96px;
  left:-22px;
  right:-22px;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.hero__tyre{
  position:absolute;
  top:152px;
  right:-12px;
  width:min(252px, 34vw);
  height:auto;
  color:var(--rose);
  opacity:.4;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:linear-gradient(to right, #000 0 30%, rgba(0,0,0,.4) 62%, transparent 86%);
  mask-image:linear-gradient(to right, #000 0 30%, rgba(0,0,0,.4) 62%, transparent 86%);
}
.hero > p,
.hero > h1,
.hero > .cta{ position:relative; z-index:1 }

.eyebrow{
  margin:0 0 14px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rose-deep);
}

h1{
  margin:0;
  font-size:clamp(34px,8vw,54px);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:800;
}

.hi{
  position:relative;
  display:inline-block;
  white-space:nowrap;
  padding:0 .06em;
}
.hi__slash{
  position:absolute;
  left:-3%; width:110%; top:38%; height:60%;
  z-index:-1;
  overflow:visible;
  pointer-events:none;
}
.hi__slash path{
  fill:none;
  stroke-linecap:butt;
  stroke-dasharray:230;
  stroke-dashoffset:230;
}
.hi__slash-back{ stroke:var(--rose); stroke-width:25 }
html.arrive .hi__slash-back{ animation:slash-draw .62s cubic-bezier(.38,.02,.2,1) .55s forwards }
@keyframes slash-draw{ to{ stroke-dashoffset:0 } }

.lead{
  margin:20px 0 0;
  max-width:44ch;
  font-size:16.5px;
  line-height:1.6;
  color:var(--ink-2);
}

.cta{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  margin:26px 0 4px;
}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;
  background:var(--rose);
  color:#2b1310;
  border:2px solid var(--rose);
  border-radius:12px;
  font-size:16px;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;
  transition:background-color .14s ease, border-color .14s ease, transform .14s ease;
}
.btn:hover{
  background:var(--rose-deep);border-color:var(--rose-deep);color:#fff;transform:translateY(-1px);
}
.btn:active{ transform:translateY(0) }
.btn:focus-visible{ outline:2px solid var(--ink);outline-offset:3px }

.btn__arrow{
  width:1.3em;height:1.3em;flex:0 0 auto;display:block;
  transform:translateY(.5px);
}

.quiet{ font-size:14px;color:var(--ink-3);text-decoration:none }
.quiet b{ color:var(--ink-2);font-weight:600 }
.quiet:hover b{ text-decoration:underline;text-underline-offset:3px }

.proofs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  margin:40px 0 0;
  padding-top:26px;
  border-top:1px solid var(--line);
}

.proof h2{
  margin:12px 0 6px;
  font-size:16.5px;font-weight:700;letter-spacing:-.01em;
  line-height:1.25;
  min-height:2.5em;
}
.proof p{
  margin:0;
  font-size:15px;line-height:1.58;color:var(--ink-3);
}

.proof__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  background:var(--rose-tint);
  color:var(--rose-deep);
}

.about{
  margin:30px 0 0;
  padding-left:14px;
  border-left:2.5px solid var(--rose);
}
.about + .about{ margin-top:26px }

.about__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;
  list-style:none;
  font-size:14px;font-weight:700;color:var(--ink);
  padding:2px 0;
}
.about__head::-webkit-details-marker{ display:none }
.about__head::marker{ content:"" }
.about__head:hover{ color:var(--rose-deep) }
.about__head:focus-visible{ outline:2px solid var(--ink);outline-offset:3px;border-radius:4px }

.about__chev{
  flex:0 0 auto;color:var(--ink);
  width:21px;height:21px;
  transition:transform .18s ease, color .18s ease;
}
.about__chev path{ stroke-width:3 }
.about__head:hover .about__chev{ color:var(--rose-deep) }
.about[open] .about__chev, .about[data-open="true"] .about__chev{ transform:rotate(180deg) }

.about__body{ padding:12px 0 2px }
.about:not([open]) .about__body{ display:none }
.about__body p{
  margin:0;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);
  max-width:52ch;
}

.faq{ margin:10px 0 0 }
.faq dt{
  font-size:13.5px;font-weight:700;color:var(--ink);
  margin:0 0 3px;
  text-decoration:underline;
  text-decoration-color:var(--rose);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.faq dd{
  margin:0 0 14px;
  font-size:13.5px;line-height:1.6;color:var(--ink-3);
  max-width:54ch;
}
.faq dd:last-child{ margin-bottom:0 }

.cancel{ margin:16px 0 2px;display:grid;gap:12px;max-width:390px }
.cancel__field{ display:grid;gap:6px }
.cancel__field > span{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rose-deep);
}
.cancel__field input{
  width:100%;
  font:inherit;font-size:16px;line-height:1.2;
  padding:12px 13px;
  color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:11px;
  transition:border-color .14s ease, box-shadow .14s ease;
  -webkit-appearance:none;appearance:none;
}
.cancel__field input::placeholder{ color:#a9b1b9 }
.cancel__field input:hover{ border-color:#dfd5d0 }
.cancel__field input:focus{
  outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(18,22,28,.08);
}
.cancel__field--bad input{ border-color:var(--rose-deep) }

.cancel__go{
  justify-self:start;
  min-height:48px;
  font:inherit;font-size:15.5px;font-weight:700;
  color:#2b1310;background:var(--rose);
  border:2px solid var(--rose);border-radius:12px;
  padding:12px 22px;
  cursor:pointer;
  transition:background-color .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
}
.cancel__go:hover, .cancel__go:focus-visible{ background:var(--rose-deep);border-color:var(--rose-deep);color:#fff }
.cancel__go:active{ transform:translateY(1px) }
.cancel__go:disabled{ opacity:.6;cursor:progress }
.cancel__go:focus-visible{ outline:2px solid var(--ink);outline-offset:3px }

.cancel__msg{
  margin:0;
  min-height:20px;
  font-size:13.5px;line-height:1.5;font-weight:600;
}
.cancel__msg.cancel__msg--bad{ color:#b4463a }
.cancel__msg.cancel__msg--good{ color:#0d7a4a }

@media (max-width:420px){
  .cancel__go{ width:100%;justify-self:stretch;text-align:center }
}

.contact{
  list-style:none;margin:16px 0 0;padding:0;
  display:grid;gap:14px;
}
.contact li{ display:flex;flex-direction:column;gap:3px }
.contact__label{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rose-deep);
}
.contact__value{
  font-size:17px;font-weight:700;color:var(--ink);
  text-decoration:none;letter-spacing:-.01em;
  width:fit-content;
}
.contact__value:hover{ color:var(--rose-deep);text-decoration:underline;text-underline-offset:3px }
.contact__value:focus-visible{ outline:2px solid var(--ink);outline-offset:3px;border-radius:4px }

.contact__note{
  margin:20px 0 2px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:13px;line-height:1.6;color:var(--ink-3);
  max-width:52ch;
}
.contact__note .contact__label{
  display:block;
  margin-bottom:4px;
}

@media (prefers-reduced-motion: reduce){
  .about__chev{ transition:none }
}

.foot{
  margin:38px 0 0;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-3);
}

.foot__call{ margin:0 0 4px;font-size:13.5px }
.foot__call a{ color:var(--ink-2);text-decoration:none }
.foot__call a:hover{ color:var(--ink);text-decoration:underline;text-underline-offset:3px }
.foot__call span{ margin:0 7px;color:var(--line) }
.foot__area{ margin:0 }

.built{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:22px 0 0;font-size:12px;color:var(--ink-3);
  text-decoration:none;
  width:fit-content;margin-left:auto;margin-right:auto;
  transition:color .14s ease;
}
.built:hover{ color:var(--rose-deep) }
.built:focus-visible{ outline:2px solid var(--ink);outline-offset:3px;border-radius:3px }
.built__mark{ width:13px;height:13px;flex:0 0 auto;opacity:.9;display:block }
.built__word{ text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px }
.built:hover .built__word{ text-decoration-color:var(--rose-deep) }

@media (forced-colors: active){
  .built__mark{ forced-color-adjust:none;color:CanvasText }
}

@media (max-width:560px){
  .page{ padding:22px 18px 34px }
  .hero__bleed{ left:-18px; right:-18px }
  .hero{ padding-top:18px }
  .hero__tyre{
    top:auto; bottom:28px; right:-20px; width:202px;
  }
  .lead{ font-size:17.5px;font-weight:500;line-height:1.55 }
  .proofs{ grid-template-columns:1fr;gap:20px }
  .proof{ display:grid;grid-template-columns:42px 1fr;column-gap:13px }
  .proof h2{ min-height:0 }
  .proof p{ font-size:16px;line-height:1.55 }
  .proof__icon{ grid-row:span 2;align-self:start }
  .proof h2{ margin-top:2px }
  .cta{ gap:12px;flex-wrap:nowrap;align-items:center }
  .btn{ width:auto;padding:13px 18px;font-size:15.5px }
  .quiet{ width:auto;text-align:left;font-size:13px;line-height:1.35;flex:0 1 auto;min-width:0 }
}

@media (prefers-reduced-motion: reduce){
  .btn{ transition:none }
  .btn:hover{ transform:none }
}

@media (max-width:380px){
  .hero__tyre{
    top:auto; bottom:37px; right:-18px; width:178px;
  }
}

html.boot .proof,
html.boot main > .about{ opacity:0 }

html.arrive .proof{ animation:pop-in .5s cubic-bezier(.22,.61,.36,1) backwards }
html.arrive .proof:nth-of-type(1){ animation-delay:1.35s }
html.arrive .proof:nth-of-type(2){ animation-delay:1.47s }
html.arrive .proof:nth-of-type(3){ animation-delay:1.59s }

html.arrive main > .about{
  animation:pop-in .5s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay:var(--enter-delay, 1.93s);
}

@keyframes pop-in{
  from{ opacity:0; transform:translateY(9px) scale(.985) }
  to  { opacity:1; transform:none }
}

@media (prefers-reduced-motion: reduce){
  .proof, main > .about{ animation:none }
  html.boot .proof, html.boot main > .about{ opacity:1 }
  .hi__slash path{ animation:none;stroke-dashoffset:0 }
}

@media (max-width:560px){
  .hi__slash{ top:44%; height:48% }
  .hi__slash-back{ stroke-width:33 }
}

/*    .    ..       ..
     .||.  ||     .||.     ...
      ||   ||      ||    .|  '|.
      ||   ||      ||    ||   ||
     .||. .||.    .||.    '|..|'
   https://patorjk.com/software/taag/#p=display&f=Kban&t=legal
--------------------------------------------------------------------------
   the privacy page -- one column, read once, believed. Same paper and ink as
   the front page, nothing to click but the way back.
*/
.legal{ padding-top:10px }

.legal h1{
  margin:0 0 16px;
  font-size:clamp(27px,6.4vw,40px);
  letter-spacing:-.03em;line-height:1.12;
}

.legal__lede{
  margin:0 0 30px;
  font-size:16.5px;line-height:1.62;
  color:var(--ink-2);
}

.legal h2{
  margin:34px 0 12px;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);
}

.legal p{ margin:0 0 14px;font-size:15.5px;line-height:1.65;color:var(--ink-2) }
.legal a{ color:inherit;text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:2px }
.legal a:hover{ text-decoration-color:var(--rose-deep) }

.legal__list{ margin:0 }

.legal__list dt{
  margin:14px 0 4px;
  font-size:15px;font-weight:700;color:var(--ink);
}

.legal__list dd{
  margin:0 0 0 0;
  font-size:15px;line-height:1.6;color:var(--ink-3);
}

.legal__never{ margin:0;padding:0;list-style:none }

.legal__never li{
  position:relative;
  margin:0 0 12px;
  padding-left:20px;
  font-size:15px;line-height:1.62;color:var(--ink-2);
}

.legal__never li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;
  background:var(--rose);
}

.legal__never strong{ color:var(--ink);font-weight:700 }

.legal__num{
  display:inline-block;
  min-width:1.45em;
  margin-right:.55em;
  color:var(--rose-deep);
  font-weight:700;
}

.legal__contact{
  margin:0 0 14px;
  padding:12px 15px;
  background:var(--rose-tint);
  border-radius:11px;
  font-size:15px;line-height:1.75;color:var(--ink);
}

.legal__date{
  margin:34px 0 4px;
  font-size:12.5px;letter-spacing:.04em;
  color:var(--ink-3);
}

.legal__shop{
  margin:0 0 18px;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;
  color:var(--ink);
}

.legal__back{
  margin:0;padding-top:16px;
  border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-3);
}

@media (max-width:560px){
  .legal h1{ font-size:clamp(24px,7vw,30px) }
  .legal__lede{ font-size:16px }
}

.foot__legal{ margin:8px 0 0;font-size:12px;opacity:.62 }