:root{
    --paper:#fbfbf9;
    --ink:#22303f;
    --ink-soft:#4a5866;
    --rule:#d8d9d4;
    --annotate:#1f3a5f;
    --deep:#1f3a5f;
    --maxw:760px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Spectral', Georgia, serif;
    font-size:18px;
    line-height:1.8;
  }
  a{color:var(--deep);text-decoration-color:var(--rule);text-underline-offset:3px;}
  a:hover{text-decoration-color:var(--deep);}
  a:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:2px;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

  /* Masthead */
  header.wrap{padding:64px 28px 0;}
  .masthead{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--deep);padding-bottom:18px;flex-wrap:wrap;gap:12px;}
  .name{font-weight:500;font-size:1.15rem;letter-spacing:0.02em;}
  .name{display:flex;align-items:center;gap:12px;color:var(--deep);}
  .name .logo{width:34px;height:34px;border-radius:7px;display:block;flex:none;}
  nav{font-family:'Inter',sans-serif;font-size:0.78rem;}
  nav a{color:var(--ink-soft);text-decoration:none;margin-left:12px;letter-spacing:0.05em;text-transform:uppercase;}
  nav a:first-child{margin-left:0;}
  nav a:first-child{margin-left:0;}
  nav a:hover{color:var(--ink);}

  /* Hero */
  .wrap.hero{padding:110px 28px 100px;display:flex;gap:44px;align-items:center;flex-wrap:nowrap;}
  .hero-text{flex:1;min-width:0;}
  .hero h1{
    font-weight:300;
    font-size:clamp(1.9rem, 5vw, 2.8rem);
    line-height:1.3;
  }
  .hero p{margin-top:32px;color:var(--ink-soft);max-width:32em;}

  /* Author photo placeholder */
  .portrait{
    flex:0 0 clamp(130px, 26vw, 200px);
    width:clamp(130px, 26vw, 200px);
    aspect-ratio:4/5;
    border-radius:18px;
    box-shadow:0 12px 32px rgba(34,48,63,0.18);
    background:
      repeating-linear-gradient(45deg, transparent, transparent 12px, #f1f1ec 12px, #f1f1ec 13px);
    object-fit:cover;
    font-family:'Inter',sans-serif;
    font-size:0.75rem;
    color:var(--ink-soft);
    line-height:1.6;
  }
  /* When ready, replace the div above with:
     <img class="portrait" src="scott.jpg" alt="Scott Gough">
     and add: .portrait{object-fit:cover;} */

  /* Sections */
  section.wrap{padding:100px 28px;border-top:1px solid var(--rule);position:relative;}
  .eyebrow{
    font-family:'Inter',sans-serif;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:30px;
  }
  section h2{font-weight:500;font-size:1.55rem;margin-bottom:24px;line-height:1.35;color:var(--deep);}
  section p{margin-bottom:22px;max-width:36em;}
  section p:last-child{margin-bottom:0;}

  /* Margin annotations */
  .note{
    font-family:'Caveat',cursive;
    color:var(--annotate);
    font-size:1.25rem;
    line-height:1.2;
    position:absolute;
    right:-160px;
    top:96px;
    width:130px;
    transform:rotate(-2deg);
  }
  .note::before{content:"";display:block;width:34px;border-top:1.5px solid var(--annotate);margin-bottom:6px;transform:rotate(2deg);}
  @media (max-width:1120px){
    .note{position:static;width:auto;transform:none;margin:-10px 0 28px;}
    .note::before{display:inline-block;margin-right:8px;margin-bottom:0;vertical-align:middle;}
  }
  @media (max-width:640px){
    header.wrap{padding:40px 28px 0;}
    .masthead{flex-direction:column;align-items:flex-start;gap:14px;}
    nav{display:flex;flex-wrap:wrap;gap:10px 18px;}
    nav a{margin-left:0;}
    .wrap.hero{flex-direction:column;align-items:flex-start;padding:64px 28px 72px;gap:36px;}
    .portrait{flex:none;width:min(220px,58vw);}
  }

  /* Book block */
  .book{display:flex;gap:48px;align-items:flex-start;flex-wrap:wrap;}
  .cover{
    flex:0 0 180px;
    width:180px;
    height:auto;
    display:block;
    box-shadow:6px 6px 0 var(--rule);
  }
  .cover-wrap{position:relative;flex:0 0 180px;width:180px;overflow:hidden;box-shadow:6px 6px 0 var(--rule);}
  .cover-wrap .cover{width:100%;box-shadow:none;}
  .watermark{
    position:absolute;left:-30%;right:-30%;top:50%;
    transform:translateY(-50%) rotate(-30deg);
    background:rgba(251,251,249,0.88);
    color:var(--annotate);
    font-family:'Inter',sans-serif;font-size:0.68rem;font-weight:700;
    letter-spacing:0.12em;text-transform:uppercase;text-align:center;
    padding:8px 0;border-top:1px solid var(--annotate);border-bottom:1px solid var(--annotate);
    pointer-events:none;
  }
  .bookinfo{flex:1;min-width:280px;}
  .meta{
    font-family:'Inter',sans-serif;
    font-size:0.75rem;
    color:var(--ink-soft);
    letter-spacing:0.04em;
    margin-top:26px;
  }
  .status{
    display:inline-block;
    font-family:'Inter',sans-serif;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--annotate);
    border:1px solid var(--annotate);
    padding:6px 14px;
    border-radius:999px;
    margin-top:22px;
  }

  .status.out-now{color:var(--deep);border-color:var(--deep);}
  .buy{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;}
  .buy a{
    display:inline-block;
    font-family:'Inter',sans-serif;
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:0.04em;
    background:var(--deep);
    color:var(--paper);
    padding:10px 20px;
    text-decoration:none;
  }
  .buy a:hover{background:var(--ink);}

  .reviewline{
    font-family:'Inter',sans-serif;
    font-size:0.78rem;
    color:var(--ink-soft);
    letter-spacing:0.02em;
    margin-top:14px;
    line-height:1.7;
  }
  .reviewline a{font-weight:600;color:var(--deep);}
  .press{font-family:'Inter',sans-serif;font-size:0.82rem;color:var(--ink-soft);letter-spacing:0.02em;margin-top:10px;line-height:1.7;}
  .press a{font-weight:600;color:var(--deep);}
  .press em{font-style:normal;font-weight:700;color:var(--deep);}

  .readerquote{
    border-left:2px solid var(--deep);
    padding:2px 0 2px 20px;
    margin:26px 0 0;
    max-width:34em;
  }
  .readerquote .stars{
    font-size:0.8rem;
    letter-spacing:2px;
    color:var(--annotate);
  }
  .readerquote p{
    font-size:1.02rem;
    line-height:1.65;
    margin-top:8px;
    color:var(--ink);
  }
  .readerquote cite{
    display:block;
    font-family:'Inter',sans-serif;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    font-style:normal;
    color:var(--ink-soft);
    margin-top:10px;
  }

  .thanks{
    border-left:2px solid var(--annotate);
    padding:2px 0 2px 20px;
    margin:38px 0 0;
    font-size:0.97rem;
    color:var(--ink-soft);
  }
  .thanks strong{
    display:block;
    font-family:'Inter',sans-serif;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--annotate);
    margin-bottom:10px;
  }
  .thanks p + p{margin-top:12px;}

  /* Articles empty state */
  .empty{
    border:1px dashed var(--rule);
    padding:34px 32px;
    color:var(--ink-soft);
    max-width:36em;
    margin-top:8px;
  }
  .empty strong{color:var(--ink);font-weight:500;}

  /* In production */
  .next-item{padding:30px 0;border-bottom:1px solid var(--rule);max-width:38em;}
  .next-item:first-of-type{padding-top:8px;}
  .next-item:last-of-type{border-bottom:none;padding-bottom:0;}
  .next-item h3{font-weight:500;font-size:1.15rem;margin-bottom:10px;line-height:1.4;}
  .next-item .wt{
    font-family:'Inter',sans-serif;
    font-size:0.68rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    border:1px solid var(--rule);
    padding:3px 9px;
    border-radius:999px;
    vertical-align:middle;
    margin-left:10px;
    white-space:nowrap;
  }
  .next-item p{color:var(--ink-soft);font-size:0.98rem;margin:0;}
  .next-item.with-cover{max-width:none;}
  .next-item.with-cover .bookinfo p{margin-bottom:14px;}

  /* Storyboard */
  .storyboard{margin:56px 0 0;}
  .appshot{margin:56px -90px 0;}
  .appshot figcaption{padding:0 90px;}
  @media (max-width:960px){ .appshot{margin:48px 0 0;} .appshot figcaption{padding:0;} }
  .storyboard img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 12px 32px rgba(34,48,63,0.18);}
  .more-ideas{color:var(--ink-soft);font-size:0.98rem;margin-top:40px;max-width:38em;}
  .storyboard figcaption{font-family:'Inter',sans-serif;font-size:0.75rem;color:var(--ink-soft);letter-spacing:0.04em;margin-top:14px;}

  /* Church */
  .church-photo{
    width:100%;
    max-width:38em;
    aspect-ratio:16/8;
    object-fit:cover;
    display:block;
    border-radius:18px;
    box-shadow:0 12px 32px rgba(34,48,63,0.18);
    margin:10px 0 34px;
  }
  /* When ready, replace the div with:
     <img class="church-photo" src="st-philips.jpg" alt="St Philip the Deacon church, Upper Stratton">
     and add: .church-photo{object-fit:cover;} */
  .church-links{list-style:none;margin-top:34px;max-width:36em;}
  .church-links li{
    border-top:1px solid var(--rule);
    padding:18px 4px;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    flex-wrap:wrap;
  }
  .church-links li:last-child{border-bottom:1px solid var(--rule);}
  .church-links .label{font-family:'Inter',sans-serif;font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);}
  .church-links a{font-size:1rem;}

  /* Giving QR card */
  .giving-qr{
    display:flex;
    align-items:center;
    gap:24px;
    max-width:36em;
    margin-top:30px;
    padding:22px 24px;
    border:1px solid var(--rule);
    border-radius:18px;
    background:#f6f6f2;
  }
  .giving-qr img{
    width:112px;
    height:112px;
    border-radius:10px;
    flex-shrink:0;
  }
  .giving-qr p{
    margin:0;
    font-size:0.95rem;
    color:var(--ink-soft);
  }
  .giving-qr p strong{color:var(--ink);font-weight:500;}

  /* Contact */
  .contact a.button{
    display:inline-block;
    font-family:'Inter',sans-serif;
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.05em;
    background:var(--deep);
    color:var(--paper);
    padding:15px 30px;
    text-decoration:none;
    margin-top:14px;
  }
  .contact a.button:hover{background:var(--ink);}
  .beta-cta{display:inline-block;font-family:'Inter',sans-serif;font-size:0.85rem;font-weight:600;letter-spacing:0.05em;
    background:var(--deep);color:var(--paper);padding:15px 30px;text-decoration:none;margin-top:6px;}
  .beta-cta:hover{background:var(--ink);}
  button.beta-cta{border:0;cursor:pointer;margin-top:14px;}
  button.beta-cta:disabled{opacity:0.6;cursor:default;}
  .beta-form{max-width:460px;margin-top:10px;}
  .beta-form label{display:block;font-family:'Inter',sans-serif;font-size:0.8rem;font-weight:600;letter-spacing:0.03em;color:var(--ink-soft);margin-top:14px;}
  .beta-form input,.beta-form textarea{display:block;width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--rule);padding:9px 11px;margin-top:5px;}
  .beta-form input:focus,.beta-form textarea:focus{outline:2px solid var(--deep);outline-offset:1px;}
  .beta-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .beta-msg{margin-top:12px;font-size:1rem;}
  .beta-msg:empty{display:none;}
  .beta-msg.err{color:#8a1f1f;}
  .beta-alt{margin-top:10px;font-size:0.9rem;color:var(--ink-soft);}
  .hero-cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:'Inter',sans-serif;font-size:0.82rem;font-weight:600;letter-spacing:0.03em;
    color:var(--deep);border:1.5px solid var(--deep);padding:11px 18px;text-decoration:none;transition:background .15s,color .15s;}
  .hero-cta:hover{background:var(--deep);color:var(--paper);}

  .social{
    display:flex;
    gap:14px;
    margin-top:22px;
    align-items:center;
  }
  .social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border:1.5px solid var(--deep);
    border-radius:50%;
    color:var(--deep);
    text-decoration:none;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .social a svg{width:20px;height:20px;fill:currentColor;display:block;}
  .social a:hover{background:var(--deep);border-color:var(--deep);color:var(--paper);}

  footer.wrap{border-top:2px solid var(--deep);margin-top:88px;padding:36px 28px 80px;
    font-family:'Inter',sans-serif;font-size:0.75rem;color:var(--ink-soft);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}

  /* Article cards */
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:26px;margin-top:8px;}
  .card{display:block;text-decoration:none;color:var(--ink);}
  .card img{width:100%;height:auto;border-radius:12px;box-shadow:0 8px 22px rgba(34,48,63,0.18);display:block;}
  .card h3{font-weight:500;font-size:1.02rem;line-height:1.4;margin:14px 0 6px;}
  .card p{font-size:0.9rem;color:var(--ink-soft);line-height:1.6;margin:0;}
  .card:hover h3{color:var(--deep);}

  /* Books strip and building cards (v125) */
  .bookcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 36px;margin-top:14px;}
  @media (max-width:640px){ .bookcards{grid-template-columns:minmax(0,1fr);} }
  .bookcard{display:flex;gap:20px;align-items:flex-start;}
  .bookcard .bc-cover{flex:0 0 112px;width:112px;display:block;}
  .bookcard .bc-cover img{width:100%;height:auto;display:block;box-shadow:5px 5px 0 var(--rule);}
  .bookcard .bc-body{flex:1;min-width:0;}
  .bookcard .bc-eyebrow{font-family:'Inter',sans-serif;font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;}
  .bookcard h3{font-weight:500;font-size:1.05rem;line-height:1.35;margin:0 0 8px;}
  .bookcard h3 a{color:var(--ink);text-decoration:none;}
  .bookcard h3 a:hover{color:var(--deep);}
  .bookcard p{font-size:0.9rem;color:var(--ink-soft);line-height:1.6;margin:0;}
  .bookcard .status{margin-top:12px;}
  .bookcard .bc-also{font-family:'Inter',sans-serif;font-size:0.76rem;color:var(--ink-soft);margin-top:10px;line-height:1.5;}
  .bookcard .bc-more{display:block;font-family:'Inter',sans-serif;font-size:0.8rem;font-weight:600;margin-top:10px;color:var(--deep);text-decoration:none;}
  .bookcard .bc-more:hover{text-decoration:underline;}
  .morelink{font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:600;margin-top:34px;display:inline-block;color:var(--deep);text-decoration:none;}
  .morelink:hover{text-decoration:underline;}
  .backline{font-family:'Inter',sans-serif;font-size:0.85rem;padding:0 28px 80px;}
  .backline a{color:var(--deep);font-weight:600;text-decoration:none;}
  .name a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:inherit;}
  .appcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;margin-top:10px;}
  .appcards .card img{aspect-ratio:3/2;object-fit:cover;}
  @media (max-width:640px){ .appcards{grid-template-columns:minmax(0,1fr);} }
  .totop{display:inline-block;margin-top:44px;font-family:'Inter',sans-serif;font-size:0.78rem;font-weight:600;letter-spacing:0.04em;color:var(--ink-soft);text-decoration:none;}
  .totop:hover,.totop-inline:hover{color:var(--deep) !important;}
  .totop-inline{color:var(--ink-soft) !important;}
  html{scroll-behavior:smooth;}

.company{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:32px;align-items:center;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:30px 32px;}
.company img{width:100%;height:auto;display:block;}
.company p{margin:0;}
.company .hero-cta{margin-top:18px;}
@media (max-width:620px){.company{grid-template-columns:minmax(0,1fr);gap:20px;}.company img{max-width:200px;}}