/* ============================================================
   THREE PIPE PROBLEMS — Brand Foundation
   Shared across all three homepage directions.
   A modern field guide dressed in The Strand Magazine.
   ============================================================ */

/* ---- Web-font substitutes that honour the named families ----
   Athelas  -> local first, else Newsreader (signature italics), else Georgia
   Nimbus Sans -> local first, else Helvetica Neue / Arial            */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400;1,6..72,500;1,6..72,600&display=swap');

:root{
  /* Palette ------------------------------------------------ */
  --paper:      #F4EEE3;   /* aged-paper cream */
  --paper-2:    #ECE1CE;   /* deeper cream, alternating bands */
  --paper-3:    #E5D8C1;   /* deepest cream / card insets */
  --ink:        #2A241D;   /* near-black ink */
  --ink-2:      #463E33;   /* softer ink for body */
  --ink-soft:   rgba(42,36,29,.66);
  --ink-faint:  rgba(42,36,29,.40);
  --brick:      #9C4A35;   /* the single accent */
  --brick-deep: #803724;
  --brick-soft: rgba(156,74,53,.16);
  --tobacco:    #2E2620;   /* dark interior sections */
  --tobacco-2:  #241E18;
  --cream-on-dark:#EDE3D1;
  --slate:      #5E7180;   /* ONLY on the book cover pipe glyph */
  --rule:       rgba(42,36,29,.26);
  --rule-soft:  rgba(42,36,29,.14);
  --rule-on-dark: rgba(237,227,209,.22);

  /* Type --------------------------------------------------- */
  --serif: 'Athelas','Iowan Old Style','Newsreader',Georgia,'Times New Roman',serif;
  --sans:  'Nimbus Sans','Helvetica Neue','Helvetica',Arial,sans-serif;

  /* Measure & rhythm -------------------------------------- */
  --measure: 68ch;
  --shell:   1240px;
  --gutter:  clamp(22px, 5vw, 64px);
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.62;
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---- Faint paper grain: felt, not seen ---- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.012em;
  text-wrap:balance;
}
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; line-height:1.05; margin:0; text-wrap:balance; }
p{ margin:0 0 1.1em; text-wrap:pretty; }

/* The italic is a signature move */
.subtitle{
  font-style:italic;
  font-weight:400;
  color:var(--brick);
  letter-spacing:.004em;
}
em,.it{ font-style:italic; }

/* Small-caps letterspaced section labels — Nimbus Sans */
.label{
  font-family:var(--sans);
  font-weight:400;
  font-size:12.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:.7em;
}
.label--brick{ color:var(--brick); }
.label .pip{ width:18px; height:18px; opacity:.9; }

/* Athelas-italic numerals for numbered markers */
.numeral{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-variant-numeric:lining-nums;
  color:var(--brick);
  line-height:1;
}

/* Drop cap, where earned */
.dropcap::first-letter{
  font-family:var(--serif);
  font-weight:500;
  float:left;
  font-size:4.55em;
  line-height:.78;
  padding:.04em .1em 0 0;
  margin:.02em .04em 0 0;
  color:var(--brick);
}

/* Prose measure */
.prose{ max-width:var(--measure); }
.prose p{ color:var(--ink-2); }

/* Links in body */
.tlink{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--brick);
  padding-bottom:1px;
  transition:color .25s, border-color .25s, background .25s;
}
.tlink:hover{ color:var(--brick); background:var(--brick-soft); }

/* ============================================================
   LAYOUT
   ============================================================ */
.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.shell--wide{ max-width:1440px; }
section{ position:relative; }
.band{ background:var(--paper); }
.band--alt{ background:var(--paper-2); }
.band--dark{ background:var(--tobacco); color:var(--cream-on-dark); }
.band--dark .label{ color:rgba(237,227,209,.6); }
.band--dark h1,.band--dark h2,.band--dark h3{ color:var(--cream-on-dark); }

/* ============================================================
   THE PIPE RULE — a thin ink rule interrupted by the pipe mark
   ============================================================ */
.piperule{
  display:flex; align-items:center; gap:18px;
  width:100%;
}
.piperule::before,.piperule::after{
  content:""; flex:1 1 auto; height:1px; background:var(--rule);
}
.piperule__pipe{
  width:34px; height:24px; flex:0 0 auto;
  background-color:var(--ink);
  -webkit-mask:url(/threePipeProblems--logo.svg) no-repeat center/contain;
  mask:url(/threePipeProblems--logo.svg) no-repeat center/contain;
}
.piperule--center{ justify-content:center; }
.band--dark .piperule::before,.band--dark .piperule::after{ background:var(--rule-on-dark); }
.band--dark .piperule__pipe{ background-color:var(--cream-on-dark); }

/* hairline */
.hr{ border:0; height:1px; background:var(--rule); margin:0; }
.hr--soft{ background:var(--rule-soft); }

/* ============================================================
   BUTTONS — brick fill / outlined ink, slightly squared
   ============================================================ */
.btn{
  --b:var(--brick);
  font-family:var(--sans);
  font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500;
  display:inline-flex; align-items:center; gap:.6em;
  padding:14px 26px;
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid var(--b);
  transition:transform .2s ease, background .2s, color .2s, box-shadow .2s;
}
.btn--primary{
  background:var(--brick); color:var(--paper);
  box-shadow:3px 3px 0 rgba(42,36,29,.18);
}
.btn--primary:hover{ background:var(--brick-deep); transform:translate(-1px,-1px); box-shadow:5px 5px 0 rgba(42,36,29,.2); }
.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--ink);
}
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--ondark{ background:transparent; color:var(--cream-on-dark); border-color:var(--rule-on-dark); }
.btn--ondark:hover{ background:var(--cream-on-dark); color:var(--tobacco); }
.btn .arr{ font-size:1.05em; transition:transform .2s; }
.btn:hover .arr{ transform:translateX(3px); }

/* ============================================================
   ETCHED ILLUSTRATIONS — printed-on-paper treatment
   ============================================================ */
.etch{
  mix-blend-mode:multiply;            /* ink sinks into the paper */
}
.plate{
  position:relative;
  background:var(--paper);
  border:1px solid var(--rule);
  box-shadow:6px 6px 0 rgba(42,36,29,.10);  /* printed-plate offset */
}
.ghost{
  position:absolute; inset:0; pointer-events:none;
  opacity:.10; mix-blend-mode:multiply;
  background-repeat:no-repeat; background-position:center;
  background-size:contain;
}

/* ============================================================
   MOTION — restrained fade-ups + parallax (set by motion.js)
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .rise{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
  .rise.in{ opacity:1; transform:none; }
  .rise.d1{ transition-delay:.08s; } .rise.d2{ transition-delay:.16s; }
  .rise.d3{ transition-delay:.24s; } .rise.d4{ transition-delay:.32s; }
}

/* ============================================================
   SHARED COMPONENTS used by 2+ directions
   ============================================================ */

/* Endorsement / logo bar */
.markbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:38px; }
.markbar .mark{
  font-family:var(--serif); font-style:italic; font-size:21px; color:var(--ink-soft);
  opacity:.78; white-space:nowrap; transition:opacity .25s, color .25s;
}
.markbar .mark:hover{ opacity:1; color:var(--ink); }

/* Accordion (chapters / FAQ) */
.acc{ border-top:1px solid var(--rule); }
.acc__item{ border-bottom:1px solid var(--rule); }
.acc__head{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:baseline; gap:22px;
  padding:24px 4px; text-align:left; color:inherit;
}
.acc__head:hover .acc__title{ color:var(--brick); }
.acc__title{ font-family:var(--serif); font-size:clamp(20px,2.2vw,26px); font-weight:500; transition:color .2s; flex:1; }
.acc__plus{ font-family:var(--sans); font-size:22px; color:var(--brick); transition:transform .3s; line-height:1; }
.acc__item.open .acc__plus{ transform:rotate(45deg); }
.acc__body{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.acc__body-inner{ padding:0 4px 26px; color:var(--ink-2); max-width:62ch; }

/* Quote cards */
.qcard{ position:relative; padding:46px 34px 34px; background:var(--paper); border:1px solid var(--rule); box-shadow:6px 6px 0 rgba(42,36,29,.08); }
.qcard .qmark{ font-family:var(--serif); font-size:90px; line-height:.5; color:var(--brick); opacity:.5; height:42px; display:block; }
.qcard blockquote{ margin:0 0 22px; font-size:20px; line-height:1.5; font-style:italic; }
.qcard cite{ font-style:normal; font-family:var(--sans); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }

/* Pricing tier */
.tier{ background:var(--paper); border:1px solid var(--rule); padding:34px 30px; position:relative; display:flex; flex-direction:column; }
.tier--feature{ border-color:var(--brick); box-shadow:7px 7px 0 var(--brick-soft); }
.tier__tag{ position:absolute; top:-12px; left:30px; background:var(--brick); color:var(--paper); font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:5px 12px; border-radius:2px; }
.tier__price{ font-family:var(--serif); font-size:46px; font-weight:500; line-height:1; margin:.2em 0 .1em; }
.tier__price small{ font-size:15px; color:var(--ink-soft); font-style:italic; }
.tier ul{ list-style:none; padding:0; margin:18px 0 26px; font-size:16px; }
.tier li{ padding:9px 0; border-bottom:1px solid var(--rule-soft); color:var(--ink-2); display:flex; gap:.6em; }
.tier li::before{ content:"·"; color:var(--brick); font-weight:700; }

/* Email capture field */
.capture{ display:flex; gap:10px; max-width:480px; flex-wrap:wrap; align-items:stretch; }
.capture input{
  flex:1 1 200px; min-width:0; font-family:var(--sans); font-size:15px;
  padding:14px 16px; background:transparent; border:1px solid var(--ink);
  border-radius:2px; color:var(--ink); transition:border-color .2s, background .2s;
}
.capture input::placeholder{ color:var(--ink-faint); }
.capture input:focus{ outline:none; border-color:var(--brick); }
.capture .btn{ flex:0 0 auto; }
.band--dark .capture input{
  border-color:rgba(237,227,209,.32); color:var(--cream-on-dark);
  background:rgba(237,227,209,.04);
}
.band--dark .capture input::placeholder{ color:rgba(237,227,209,.5); }
.band--dark .capture input:focus{ border-color:var(--brick); background:rgba(237,227,209,.07); }

/* Footer */
.foot{ font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); }
.foot a{ text-decoration:none; color:var(--ink-soft); }
.foot a:hover{ color:var(--brick); }

/* PDF / sample modal (shared across pages) */
.pdf-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,40px); }
.pdf-modal[hidden]{ display:none; }
.pdf-modal__backdrop{ position:absolute; inset:0; background:rgba(20,16,12,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.pdf-modal__panel{ position:relative; z-index:1; width:min(900px,100%); height:min(88vh,100%); background:var(--paper); border-radius:6px; box-shadow:0 30px 80px rgba(20,16,12,.5); display:flex; flex-direction:column; overflow:hidden; }
.pdf-modal__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border-bottom:1px solid var(--rule-soft); }
.pdf-modal__title{ font-family:var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.pdf-modal__actions{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.pdf-modal__dl{ font-family:var(--sans); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brick); text-decoration:none; white-space:nowrap; }
.pdf-modal__dl:hover{ text-decoration:underline; }
.pdf-modal__close{ border:0; background:none; font-size:26px; line-height:1; color:var(--ink-soft); cursor:pointer; padding:0 2px; }
.pdf-modal__close:hover{ color:var(--brick); }
.pdf-modal__frame{ flex:1; width:100%; border:0; background:#525659; }
@media (max-width:540px){ .pdf-modal__title{ display:none; } }

::selection{ background:var(--brick); color:var(--paper); }