/* humphreyap.com — shared stylesheet */

@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Archivo Black';
  src:url('/assets/fonts/archivo-black.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --ground:#FFFBF5;
  --blue:#0054A8;
  --green:#067049;
  --accent:#D2691E;
  --ink:#1A1A1A;
  --muted:#4A4A4A;

  /* per-page theme: blue by default, green on the pack page */
  --theme:var(--blue);

  --rule:#1A1A1A1F;
  --trace:#0054A833;

  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --display:'Archivo Black','Archivo Black Fallback','Archivo',Helvetica,Arial,sans-serif;

  --measure:44rem;
  --pad:1.25rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---- circuit band ------------------------------------------------ */

.trace{
  display:block;
  width:100%;
  height:72px;
  border-bottom:1px solid var(--rule);
}

/* ---- layout ------------------------------------------------------ */

.wrap{
  max-width:var(--measure);
  margin:0 auto;
  padding:2.5rem var(--pad) 3rem;
}

/* ---- type -------------------------------------------------------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.015em;
  line-height:1.12;
}

h1{
  font-size:clamp(1.9rem,7vw,2.7rem);
  margin:0 0 1.4rem;
}

h2{
  font-size:.78rem;
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.25rem;
  line-height:1.4;
}

p{margin:0 0 1.1rem}

.lede{font-size:1.06rem}

a{color:var(--theme);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- book list --------------------------------------------------- */

.shelf{
  margin:2.75rem 0 0;
  padding-top:1.75rem;
  border-top:1px solid var(--rule);
}

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

.books li{
  display:grid;
  grid-template-columns:104px 1fr;
  gap:1.15rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--rule);
}

.books li:last-child{border-bottom:0;padding-bottom:.25rem}

.cover{
  width:104px;
  height:auto;
  display:block;
  border:1px solid var(--rule);
}

.cover--none{
  display:flex;
  align-items:flex-end;
  aspect-ratio:1/1.55;
  padding:.55rem;
  background:#fff;
  border:1px solid var(--rule);
  border-top:3px solid var(--node,var(--theme));
  font-family:var(--display);
  font-size:.72rem;
  line-height:1.15;
  color:var(--muted);
  overflow:hidden;
}

.title{
  font-family:var(--display);
  font-size:1.06rem;
  line-height:1.2;
  margin:0 0 .1rem;
  display:flex;
  gap:.55rem;
  align-items:baseline;
}

/* the square node is the circuit motif doing structural work:
   one per title, carrying that title's own colour */
.node{
  flex:0 0 auto;
  width:9px;
  height:9px;
  background:var(--node,var(--theme));
  transform:translateY(-1px);
}

.kind{
  font-size:.78rem;
  color:var(--muted);
  margin:0 0 .5rem;
}

.blurb{margin:0 0 .55rem;font-size:.95rem}

.buy{
  margin:0;
  font-size:.88rem;
  color:var(--muted);
}

.buy a{white-space:nowrap}

.sep{color:var(--rule);padding:0 .3rem}

/* ---- footer ------------------------------------------------------ */

.band{
  background:var(--theme);
  color:var(--ground);
  padding:1.4rem var(--pad);
  margin-top:3rem;
}

.band-inner{
  max-width:var(--measure);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  align-items:baseline;
  justify-content:space-between;
}

.band .name{
  font-family:var(--display);
  font-size:.9rem;
  letter-spacing:.2em;
  margin:0;
}

.band a{color:#fff;font-size:.9rem}
.band a:hover{color:#FFD9B8}
.band a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---- small screens ----------------------------------------------- */

@media (max-width:26rem){
  .books li{grid-template-columns:82px 1fr;gap:.9rem}
  .cover,.cover--none{width:82px}
  .trace{height:56px}
}

/* ---- page theme -------------------------------------------------- */

.theme-green{--theme:var(--green)}

/* ---- masthead (subpages) ----------------------------------------- */

.mast{
  max-width:var(--measure);
  margin:0 auto;
  padding:1.5rem var(--pad) 0;
}

.mast a{
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.2em;
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:#1A1A1A40;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}

.mast a:hover{color:var(--theme)}

/* ---- product page ------------------------------------------------ */

.product{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:1.6rem;
  align-items:start;
  margin:0 0 2.25rem;
}

.product .cover,
.product .cover--none{width:150px}

.product h1{font-size:clamp(1.6rem,6vw,2.2rem);margin:0 0 .5rem}

.subtitle{
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  margin:0 0 .35rem;
  line-height:1.3;
}

.meta{font-size:.88rem;color:var(--muted);margin:0}

.facts{
  list-style:none;
  margin:0 0 1.6rem;
  padding:0;
  font-size:.95rem;
}

.facts li{
  position:relative;
  padding:0 0 .55rem 1.15rem;
}

.facts li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  background:var(--theme);
}

.where{
  margin:2.5rem 0 0;
  padding:1.6rem 0 0;
  border-top:1px solid var(--rule);
}

.where h2{margin-bottom:1rem}

.btn{
  display:inline-block;
  background:var(--theme);
  color:#fff;
  font-family:var(--display);
  font-size:.95rem;
  letter-spacing:.01em;
  padding:.8rem 1.5rem;
  text-decoration:none;
}

.btn:hover{background:var(--ink);color:#fff}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.btn-note{
  margin:.85rem 0 0;
  font-size:.9rem;
  color:var(--muted);
}

.pending{
  margin:1.5rem 0 0;
  padding:1rem 1.15rem;
  background:#fff;
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  font-size:.93rem;
}

.pending p{margin:0 0 .7rem}
.pending p:last-child{margin:0}

.onward{
  margin:2.5rem 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  font-size:.93rem;
  color:var(--muted);
}

@media (max-width:30rem){
  .product{grid-template-columns:112px 1fr;gap:1.1rem}
  .product .cover,.product .cover--none{width:112px}
}

/* ---- forms -------------------------------------------------------- */

.signup{
  margin:2.25rem 0 0;
  padding-top:1.75rem;
  border-top:1px solid var(--rule);
}

.field{
  display:block;
  margin:0 0 1rem;
}

.field label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  margin:0 0 .35rem;
}

.field input[type=email]{
  width:100%;
  max-width:24rem;
  font-family:var(--sans);
  font-size:1rem;
  padding:.7rem .8rem;
  background:#fff;
  color:var(--ink);
  border:1px solid #1A1A1A33;
  border-radius:0;
}

.field input[type=email]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}

button.btn{
  border:0;
  cursor:pointer;
  font-family:var(--display);
}

/* honeypot: never shown, never announced */
.trap{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.smallprint{
  margin:1.1rem 0 0;
  font-size:.85rem;
  color:var(--muted);
  max-width:32rem;
}

.aside{
  margin:0 0 1.25rem;
  padding-left:.9rem;
  border-left:2px solid var(--rule);
  color:var(--muted);
  font-size:.95rem;
}

/* ---- article ------------------------------------------------------ */

.article{max-width:36rem}

.article h1{margin:0 0 .6rem}

.byline{
  font-size:.85rem;
  color:var(--muted);
  margin:0 0 2rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--rule);
}

.article h2{
  font-family:var(--display);
  font-size:1.15rem;
  text-transform:none;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:2.4rem 0 .9rem;
}

.article p{font-size:1.05rem;line-height:1.7}

.article blockquote{
  margin:1.6rem 0;
  padding:1.1rem 1.2rem;
  background:#fff;
  border:1px solid var(--rule);
  border-left:3px solid var(--theme);
}

.article blockquote p{
  margin:0 0 .8rem;
  font-size:.97rem;
  line-height:1.6;
}

.article blockquote p:last-child{margin:0}

.endnote{
  margin:2.75rem 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  font-size:.95rem;
}

/* ---- writing list ------------------------------------------------- */

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

.writing li{
  padding:0 0 1.25rem;
  border-bottom:1px solid var(--rule);
  margin:0 0 1.25rem;
}

.writing li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

.writing h3{
  font-family:var(--display);
  font-size:1.02rem;
  line-height:1.25;
  margin:0 0 .3rem;
}

.writing h3 a{text-decoration:none}
.writing h3 a:hover{text-decoration:underline}

.writing time{
  display:block;
  font-size:.8rem;
  color:var(--muted);
  margin:0 0 .4rem;
}

.writing p{margin:0;font-size:.95rem}