/* Southcoast town ADU pages - loaded only on the 15 town slugs */
:root{
    --ground:#FCFCFA;
    --raised:#F4F4F0;
    --ink:#16201C;
    --slate:#5D6B65;
    --faint:#8A9691;
    --accent:#2F5D4E;
    --accent-soft:#E3EDE8;
    --flag:#A8342A;
    --flag-soft:#F6E7E4;
    --rule:#DCDCD4;
    --measure:66ch;
    --display:"Bitter",Georgia,"Times New Roman",serif;
    --body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
    --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#121714;
      --raised:#1B221E;
      --ink:#EAEDE9;
      --slate:#9DA9A3;
      --faint:#75817C;
      --accent:#7FBBA4;
      --accent-soft:#1E2A25;
      --flag:#E8877C;
      --flag-soft:#2B1D1B;
      --rule:#2C342F;
    }
  }
  :root[data-theme="dark"]{
    --ground:#121714;
    --raised:#1B221E;
    --ink:#EAEDE9;
    --slate:#9DA9A3;
    --faint:#75817C;
    --accent:#7FBBA4;
    --accent-soft:#1E2A25;
    --flag:#E8877C;
    --flag-soft:#2B1D1B;
    --rule:#2C342F;
  }

  *{box-sizing:border-box}
  body{
    background:var(--ground);
    color:var(--ink);
    font-family:var(--body);
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}

  /* ---------- masthead ---------- */
  .masthead{
    border-bottom:1px solid var(--rule);
    padding:20px 0 18px;
    display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;
  }
  .wordmark{
    font-family:var(--display);font-weight:700;font-size:1.02rem;
    letter-spacing:-.01em;color:var(--ink);
  }
  .credential{
    font-family:var(--mono);font-size:.72rem;color:var(--faint);
    letter-spacing:.02em;
  }

  /* ---------- hero ---------- */
  .hero{padding:56px 0 12px;display:grid;gap:26px}
  .eyebrow{
    font-family:var(--mono);font-size:.73rem;font-weight:500;
    letter-spacing:.11em;text-transform:uppercase;color:var(--accent);
  }
  h1{
    font-family:var(--display);font-weight:700;
    font-size:clamp(2.1rem,5.2vw,3.35rem);
    line-height:1.08;letter-spacing:-.022em;margin:0;
    text-wrap:balance;max-width:22ch;
  }
  .standfirst{
    font-size:1.19rem;line-height:1.56;color:var(--slate);
    max-width:var(--measure);margin:0;
  }
  .standfirst strong{color:var(--ink);font-weight:600}

  /* ---------- the struck rule: page thesis ---------- */
  .thesis{
    margin:44px 0 8px;
    border-top:2px solid var(--flag);
    background:var(--flag-soft);
    padding:30px 30px 26px;
  }
  .thesis-label{
    font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
    text-transform:uppercase;color:var(--flag);margin-bottom:18px;
  }
  .quoted{
    font-family:var(--display);font-weight:600;
    font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.38;
    margin:0 0 6px;max-width:44ch;
    text-decoration:line-through;
    text-decoration-color:var(--flag);
    text-decoration-thickness:2px;
    color:var(--slate);
  }
  .quoted-plain{text-decoration:none;color:var(--ink)}
  .quoted-src{font-family:var(--mono);font-size:.75rem;color:var(--faint)}
  .thesis-turn{
    margin:22px 0 0;font-size:1.05rem;max-width:var(--measure);
  }
  .thesis-turn strong{font-weight:600}

  /* ---------- sections ---------- */
  section{padding:40px 0;border-top:1px solid var(--rule)}
  section:first-of-type{border-top:none}
  h2{
    font-family:var(--display);font-weight:600;
    font-size:clamp(1.4rem,3vw,1.8rem);line-height:1.2;
    letter-spacing:-.014em;margin:0 0 16px;text-wrap:balance;max-width:26ch;
  }
  h3{
    font-family:var(--body);font-weight:600;font-size:1.02rem;
    margin:26px 0 6px;
  }
  p{max-width:var(--measure);margin:0 0 15px}
  p:last-child{margin-bottom:0}
  a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
  a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

  /* citation marginalia */
  .cite{
    font-family:var(--mono);font-size:.74rem;color:var(--faint);
    display:block;margin-top:-8px;margin-bottom:15px;
  }

  /* ---------- the setback comparison ---------- */
  .compare-scroll{overflow-x:auto;margin:8px 0 4px}
  table.compare{
    border-collapse:collapse;width:100%;min-width:520px;
    font-variant-numeric:tabular-nums;
  }
  table.compare th,table.compare td{
    text-align:left;padding:11px 16px 11px 0;
    border-bottom:1px solid var(--rule);
  }
  table.compare thead th{
    font-family:var(--mono);font-size:.71rem;font-weight:500;
    letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
    border-bottom:1px solid var(--ink);
  }
  table.compare td:first-child{color:var(--slate)}
  .void{text-decoration:line-through;text-decoration-color:var(--flag);color:var(--faint)}
  .live{font-weight:600;color:var(--ink)}

  /* ---------- fact rows ---------- */
  .facts{display:grid;gap:0;margin:4px 0 0}
  .fact{
    display:grid;grid-template-columns:9.5rem 1fr;gap:4px 22px;
    padding:14px 0;border-bottom:1px solid var(--rule);
  }
  .fact:first-child{border-top:1px solid var(--rule)}
  .fact dt{
    font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;
    text-transform:uppercase;color:var(--faint);padding-top:3px;
  }
  .fact dd{margin:0}
  .fact dd .sub{
    display:block;font-family:var(--mono);font-size:.73rem;
    color:var(--faint);margin-top:4px;
  }
  @media (max-width:620px){
    .fact{grid-template-columns:1fr}
    .fact dt{padding-top:0}
  }

  /* ---------- callout ---------- */
  .note{
    background:var(--accent-soft);padding:22px 24px;
    border-left:3px solid var(--accent);margin:22px 0 0;
  }
  .note p{max-width:60ch}
  .note-label{
    font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
    text-transform:uppercase;color:var(--accent);margin-bottom:8px;
  }

  /* ---------- cta ---------- */
  .cta{
    margin:48px 0 0;padding:36px 32px;
    background:var(--ink);color:var(--ground);
  }
  :root[data-theme="dark"] .cta,
  .cta{background:var(--ink);color:var(--ground)}
  .cta h2{color:var(--ground);margin-bottom:12px}
  .cta p{color:var(--ground);opacity:.82;max-width:56ch}
  .btn{
    display:inline-block;margin-top:20px;
    background:var(--ground);color:var(--ink);
    font-family:var(--body);font-weight:600;font-size:1rem;
    padding:13px 26px;text-decoration:none;
  }
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .cta-fine{
    font-family:var(--mono);font-size:.74rem;margin-top:16px;
    opacity:.68;color:var(--ground);
  }

  /* ---------- sources ---------- */
  .sources{
    padding:34px 0 60px;border-top:1px solid var(--rule);
    font-size:.88rem;color:var(--slate);
  }
  .sources h2{font-size:1.05rem;font-family:var(--body);font-weight:600;color:var(--ink)}
  .sources ol{padding-left:1.3rem;max-width:var(--measure);margin:0}
  .sources li{margin-bottom:8px}
  .sources code{font-family:var(--mono);font-size:.83em;color:var(--ink)}

  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}