/* process.css — the How I Work page. Site tokens only: bone, navy, sand, brass. */

.pr-hero{
  margin:0 0 3rem;
  position:relative;
}
.pr-hero img{
  display:block;width:100%;height:auto;
}
.pr-hero__title{
  max-width:52rem;margin:0 auto;
  padding:2.4rem 1.5rem 0;
}
.pr-hero__title h1{
  font-family:"Newsreader",Georgia,serif;
  font-weight:600;
  font-size:clamp(2.4rem,1.6rem + 3.4vw,4.2rem);
  line-height:1.02;letter-spacing:-.015em;
  color:#1E2A38;
  margin:0 0 .75rem;
}
.pr-hero__title p{
  font-size:1.15rem;line-height:1.6;
  color:#4A5666;max-width:44ch;margin:0;
}

.pr-wrap{max-width:38rem;margin:0 auto;padding:0 1.5rem;}
.pr-wrap p{
  font-family:"Newsreader",Georgia,serif;
  font-size:1.15rem;line-height:1.75;color:#1E2A38;
  margin:0 0 1.3rem;
}
.pr-lede{font-size:1.32rem !important;line-height:1.6 !important;}

.pr-station{padding-top:4rem;}
.pr-station__head{
  border-top:1px solid #D9D5CB;
  padding-top:1.1rem;margin-bottom:1.6rem;
  display:flex;align-items:baseline;gap:1rem;
}
.pr-tab{
  flex:0 0 auto;
  align-self:flex-start;
  background:#B8862B;color:#FAF9F6;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.82rem;font-weight:500;
  padding:.3rem .62rem;border-radius:2px 2px 0 0;
  transform:translateY(-1.5rem);
}
.pr-station__head h2{
  font-family:"Newsreader",Georgia,serif;
  font-weight:600;
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);
  line-height:1.06;letter-spacing:-.012em;
  color:#1E2A38;margin:0;
}

.pr-plate{margin:2.4rem 0 2.2rem;}
.pr-plate img{display:block;width:100%;height:auto;}
.pr-plate figcaption{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.78rem;line-height:1.55;color:#6B7686;
  margin-top:.65rem;max-width:52ch;
}
.pr-bleed{
  width:100vw;margin-left:50%;transform:translateX(-50%);
  max-width:1180px;padding:0 1.5rem;
}
.pr-pair{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
@media (max-width:640px){.pr-pair{grid-template-columns:1fr;}}

.pr-shelf{
  background:#EDEAE3;
  border-left:3px solid #B8862B;
  padding:1.3rem 1.4rem;
  margin:2rem 0;
}
.pr-shelf p{margin:0;font-size:1.06rem;}

.pr-close{
  border-top:1px solid #D9D5CB;
  margin-top:4rem;padding-top:2.4rem;padding-bottom:3rem;
}


.pr-h3{
  font-family:"Newsreader",Georgia,serif;
  font-weight:600;font-size:1.32rem;color:#1E2A38;
  margin:2.4rem 0 1rem;
}

/* ---------- recommend a book ---------- */
.pr-form{margin:2.2rem 0 0;}
.pr-field{margin:0 0 1.3rem;}
.pr-field label{
  display:block;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.74rem;font-weight:500;color:#6B7686;
  margin:0 0 .45rem;
}
.pr-field input,
.pr-field textarea{
  display:block;width:100%;
  font-family:"Newsreader",Georgia,serif;
  font-size:1.02rem;line-height:1.5;color:#1E2A38;
  background:#F3F0E8;
  border:1px solid #D9D5CB;border-radius:2px;
  padding:.62rem .7rem;
}
.pr-field textarea{resize:vertical;min-height:7.5rem;}
.pr-field input::placeholder,
.pr-field textarea::placeholder{color:#9AA3B0;}
.pr-field input:focus,
.pr-field textarea:focus{
  outline:none;border-color:#B8862B;
  box-shadow:0 0 0 3px rgba(184,134,43,.16);
  background:#FAF9F6;
}
.pr-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media (max-width:560px){.pr-row{grid-template-columns:1fr;gap:0;}}

.pr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.pr-formfoot{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin:.4rem 0 0;
}
.pr-formfoot button{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.8rem;letter-spacing:.02em;
  color:#FAF9F6;background:#1E2A38;
  border:1px solid #1E2A38;border-radius:2px;
  padding:.62rem 1.3rem;cursor:pointer;
}
.pr-formfoot button:hover{background:#B8862B;border-color:#B8862B;}
.pr-formfoot button:focus-visible{outline:2px solid #B8862B;outline-offset:3px;}
.pr-fine{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;line-height:1.5;color:#6B7686;
  flex:1 1 16rem;
}
.pr-thanks{
  background:#EDEAE3;border-left:3px solid #B8862B;
  padding:1.2rem 1.3rem;margin:2.2rem 0 0;
}

/* ---------- the shelves index ---------- */
.pr-shelves{margin:2.2rem 0 0;line-height:0;}
.pr-shelves > *{line-height:1.72;}
.pr-shelfgroup{
  border-top:1px solid #D9D5CB;
  padding:0;
}
.pr-shelfgroup:last-of-type{border-bottom:1px solid #D9D5CB;}
.pr-shelfgroup > summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:baseline;gap:1rem;
  padding:1rem 0;
  font-family:"Newsreader",Georgia,serif;
  font-size:1.22rem;font-weight:600;color:#1E2A38;
}
.pr-shelfgroup > summary::-webkit-details-marker{display:none;}
.pr-shelfgroup > summary::before{
  content:"+";
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:1rem;color:#B8862B;margin-right:.7rem;
}
.pr-shelfgroup[open] > summary::before{content:"\2212";}
.pr-shelfgroup > summary:hover{color:#B8862B;}
.pr-shelfgroup > summary:focus-visible{outline:2px solid #B8862B;outline-offset:3px;}
.pr-count{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.76rem;font-weight:400;color:#6B7686;
  flex:0 0 auto;margin-left:auto;
}
.pr-sub{margin:0 0 1.5rem;padding-left:1.7rem;}
.pr-sub h4{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.74rem;font-weight:500;color:#6B7686;
  margin:1.1rem 0 .5rem;
}
.pr-sub ul{list-style:none;margin:0;padding:0;}
.pr-sub li{
  font-family:"Newsreader",Georgia,serif;
  font-size:1rem;line-height:1.5;
  padding:.28rem 0;
}
.pr-sub li a{color:#1E2A38;text-decoration:none;border-bottom:1px solid #D9D5CB;}
.pr-sub li a:hover{color:#B8862B;border-bottom-color:#B8862B;}
.pr-sub li a:focus-visible{outline:2px solid #B8862B;outline-offset:2px;}

/* ---------- mobile fixes ---------- */
/* 100vw includes the scrollbar and overflows on iOS, which scrolls the whole
   page sideways and leaves the footer short of the right edge. */
@media (max-width:760px){
  .pr-bleed{
    width:auto;margin-left:0;transform:none;padding:0;
  }
  .pr-wrap{padding:0 1.25rem;}
  .pr-hero__title{padding:1.8rem 1.25rem 0;}
}

/* the button and its fine print were fighting for one row */
@media (max-width:620px){
  .pr-formfoot{flex-direction:column;align-items:stretch;gap:.9rem;}
  .pr-formfoot button{width:100%;padding:.85rem 1rem;font-size:.85rem;}
  .pr-fine{flex:1 1 auto;}
  .pr-station__head{gap:.7rem;}
  .pr-tab{transform:translateY(-1.2rem);}
}

/* long book titles must not push the page wide */
.pr-sub li a{overflow-wrap:anywhere;}
.pr-shelfgroup > summary{overflow-wrap:anywhere;}

/* belt and braces against any stray horizontal overflow */
.pr-shelves{max-width:100%;}

/* ==== ZB-MEASURE START ==== */
/* Last in the file on purpose. The reading column is 38rem and nothing
   appended after this should be able to take it away again. */
.pr-wrap{
  max-width:38rem;
  margin:0 auto;
  padding:0 1.5rem;
}
@media (max-width:900px){
  .pr-wrap{ padding:0 1.25rem; }
}
/* full-bleed figures and the shelf index are the deliberate exceptions */
.pr-shelves{ max-width:100%; }
/* ==== ZB-MEASURE END ==== */

/* ==== ZB-CLOSE-SPACING START ==== */
/* .pr-close paragraphs had no margin rule, so the three closing paragraphs
   ran together as one block. Every other section inherits its spacing from
   .pr-station p, which does not reach inside .pr-close. */
.pr-close p {
  margin: 0 0 1.35rem;
}
.pr-close p:last-child {
  margin-bottom: 0;
}
/* ==== ZB-CLOSE-SPACING END ==== */

/* ==== ZB-FORM-FIT START ==== */
/* THE CAUSE: .pr-field is a <p>, so it inherits the section's paragraph
   measure of about 44ch. The single fields were capped at that width while
   the name/email row, being a <div>, filled the whole form. Releasing the
   cap on form fields lines every field up on the same right edge. */
.pr-field {
  max-width: none;
  margin: 0 0 1.15rem;
}
.pr-field label {
  margin: 0 0 .35rem;
}

.pr-field input,
.pr-field textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

.pr-row {
  align-items: start;
}
.pr-row > .pr-field {
  min-width: 0;
}

/* Keeps the whole form to the same measure as the prose above it. */
.pr-form {
  max-width: 38rem;
}

/* The fine print was flex:1 1 16rem beside the button, which squeezed it
   into four short lines. It belongs under the button. */
.pr-formfoot {
  display: block;
  margin: 1.5rem 0 0;
  max-width: none;
}
.pr-formfoot button {
  display: inline-block;
}
.pr-fine {
  display: block;
  flex: none;
  margin-top: .9rem;
  max-width: 58ch;
}

@media (max-width: 560px) {
  .pr-row { row-gap: 0; }
  .pr-row .pr-field { margin-bottom: 1.15rem; }
}
/* ==== ZB-FORM-FIT END ==== */