:root{
    --sand:#eee5cd;      /* almanac paper */
    --sand2:#e2d4b2;     /* deeper sand band */
    --paper:#f7f1e0;     /* bright plate */
    --slate:#3a5768;     /* river slate */
    --deep:#20313c;      /* night-river ink */
    --rust:#a34e2a;      /* channel-buoy rust */
    --hairline:#b9a87e;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--sand);color:var(--deep);font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-size:16.5px;line-height:1.62}
  .caps{font-family:"Copperplate","Copperplate Gothic Light","Palatino Linotype",Georgia,serif;letter-spacing:.09em;text-transform:uppercase}
  .mono{font-family:"Courier New",Courier,monospace}
  .shell{max-width:1000px;margin:0 auto;padding:0 22px}
  a{color:var(--slate)}
  a:focus-visible,button:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
  p{margin-bottom:14px}

  /* ---- edition bar ---- */
  .edition{background:var(--deep);color:#cdbf9d;font-family:"Courier New",Courier,monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:7px 14px}

  /* ---- almanac masthead ---- */
  .masthead{background:var(--sand);border-bottom:1px solid var(--hairline);padding:30px 0 24px;text-align:center}
  .masthead .rulepair{border-top:3px double var(--deep);max-width:640px;margin:0 auto 18px}
  .masthead .title{font-family:"Copperplate","Copperplate Gothic Light","Palatino Linotype",Georgia,serif;font-size:clamp(30px,5.4vw,52px);letter-spacing:.06em;line-height:1.05;color:var(--deep)}
  .masthead .title span{color:var(--rust)}
  .masthead .subtitle{font-style:italic;color:#5d5138;font-size:15px;margin-top:8px}
  .masthead .rulepair.low{margin-top:18px;border-top-width:1px;border-top-style:solid}
  .lineplate{display:inline-block;margin-top:16px;border:2px solid var(--deep);background:var(--paper);padding:10px 26px}
  .lineplate .k{font-family:"Courier New",Courier,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
  .lineplate a{display:block;text-decoration:none;color:var(--deep);font-family:"Copperplate","Copperplate Gothic Light",Georgia,serif;font-size:clamp(21px,3.4vw,29px);letter-spacing:.05em}

  /* ---- hero: the opening page ---- */
  .opening{padding:52px 0 46px;border-bottom:1px solid var(--hairline)}
  .opening .cols{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:start}
  @media(max-width:820px){.opening .cols{grid-template-columns:1fr}}
  .opening h1{font-family:"Palatino Linotype","Book Antiqua",Georgia,serif;font-weight:normal;font-size:clamp(29px,4.6vw,44px);line-height:1.14;margin-bottom:16px}
  .opening h1 b{font-weight:bold;color:var(--rust)}
  .opening .lede{font-size:17px;max-width:540px}
  .callbtn{display:inline-block;background:var(--rust);color:var(--paper);text-decoration:none;font-family:"Copperplate","Copperplate Gothic Light",Georgia,serif;letter-spacing:.07em;font-size:18px;padding:14px 26px;border:2px solid var(--deep);box-shadow:4px 4px 0 var(--deep)}
  .callbtn:hover{background:#8e3f1e}
  .opening .ctaline{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .opening .whisper{font-size:13px;font-style:italic;color:#5d5138;max-width:280px}
  /* quick readings card */
  .readings{border:2px solid var(--deep);background:var(--paper)}
  .readings .head{background:var(--slate);color:var(--paper);font-family:"Courier New",Courier,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px}
  .readings dl{padding:6px 14px 12px;font-family:"Courier New",Courier,monospace;font-size:14px}
  .readings .row{display:flex;align-items:baseline;padding:8px 0;border-bottom:1px dotted var(--hairline)}
  .readings .row:last-child{border-bottom:0}
  .readings dt{color:#4a5d47;white-space:normal}
  .readings .lead{flex:1;border-bottom:2px dotted var(--hairline);margin:0 8px;min-width:18px}
  .readings dd{font-weight:bold;white-space:nowrap;color:var(--deep)}
  .readings .foot{font-size:11.5px;font-family:"Courier New",Courier,monospace;color:#6a5c3d;padding:0 14px 12px}

  /* ---- section furniture ---- */
  .leaf{padding:50px 0}
  .leafhead{display:flex;align-items:center;gap:14px;margin-bottom:6px}
  .leafhead .no{font-family:"Courier New",Courier,monospace;font-size:12px;letter-spacing:.18em;color:var(--rust);white-space:nowrap}
  .leafhead .stem{flex:1;border-top:1px solid var(--hairline)}
  h2{font-family:"Copperplate","Copperplate Gothic Light",Georgia,serif;font-weight:normal;font-size:clamp(22px,3.4vw,31px);letter-spacing:.05em;color:var(--deep);margin-bottom:14px}
  h3{font-family:"Palatino Linotype",Georgia,serif;font-size:18px;margin-bottom:5px}

  /* ---- entries (services) ---- */
  .entries{margin-top:10px}
  .entry{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:16px 0;border-bottom:1px dotted var(--hairline)}
  @media(max-width:640px){.entry{grid-template-columns:1fr;gap:4px}}
  .entry .tag{font-family:"Courier New",Courier,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);padding-top:4px}
  .entry p{margin:0;font-size:15px;color:#42392a}

  /* ---- three readings (how it works) ---- */
  .band{background:var(--sand2);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
  .readingsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:20px;border-left:1px solid var(--hairline)}
  @media(max-width:760px){.readingsteps{grid-template-columns:1fr}}
  .rstep{border-right:1px solid var(--hairline);padding:6px 22px 6px 22px}
  @media(max-width:760px){.rstep{border-right:0;border-bottom:1px solid var(--hairline);padding:14px 6px}}
  .rstep .rn{font-family:"Copperplate","Copperplate Gothic Light",Georgia,serif;font-size:30px;color:var(--rust)}
  .rstep p{font-size:14.5px;color:#42392a;margin:6px 0 0}

  /* ---- flood gauge (signature) ---- */
  .highwater{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:start;margin-top:8px}
  @media(max-width:820px){.highwater{grid-template-columns:1fr}}
  .gaugecard{background:var(--deep);color:var(--sand);border:2px solid var(--deep);padding:18px 18px 14px;box-shadow:6px 6px 0 rgba(32,49,60,.22)}
  .gaugecard .gtitle{font-family:"Courier New",Courier,monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#d8b98a;border-bottom:1px solid #3c5568;padding-bottom:9px;margin-bottom:14px}
  .fg{position:relative;height:360px}
  .fg-col{position:absolute;left:96px;top:0;bottom:0;width:56px;border:2px solid #0e181f;
    background:linear-gradient(to top,
      #5b7482 0%,#5b7482 16%,
      #c8a45f 16%,#c8a45f 28%,
      #b5703f 28%,#b5703f 48%,
      #9a4e28 48%,#9a4e28 68%,
      #6e3115 68%,#6e3115 100%)}
  .fg-line{position:absolute;left:0;right:0;border-top:2px dashed rgba(247,241,224,.8)}
  .fg-line.rec{border-top:2px solid #f7f1e0}
  .fg-lab{position:absolute;left:0;width:86px;text-align:right;transform:translateY(50%);font-family:"Courier New",Courier,monospace;font-size:11.5px;line-height:1.25;color:#cdbf9d}
  .fg-lab b{display:block;color:#f7f1e0;font-size:12.5px}
  .fg-side{position:absolute;left:164px;transform:translateY(50%);font-family:"Courier New",Courier,monospace;font-size:11px;line-height:1.3;color:#cdbf9d;max-width:calc(100% - 170px)}
  .fg-side.rec{color:#f7f1e0}
  .crests{width:100%;border-collapse:collapse;font-family:"Courier New",Courier,monospace;font-size:12.5px;margin-top:16px}
  .crests caption{font-family:"Courier New",Courier,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:left;color:#d8b98a;padding-bottom:6px}
  .crests td{padding:4px 0;border-top:1px dotted #3c5568;color:#e8dfc6}
  .crests td:last-child{text-align:right;color:#f7f1e0}
  .hw-notes h3{color:var(--slate)}
  .hw-notes ul{list-style:none;margin:10px 0 16px}
  .hw-notes li{position:relative;padding-left:26px;margin-bottom:10px;font-size:15px}
  .hw-notes li::before{content:"~";position:absolute;left:2px;top:-1px;color:var(--rust);font-weight:bold;font-size:18px}

  /* ---- tide tables ---- */
  .tides{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:14px}
  @media(max-width:760px){.tides{grid-template-columns:1fr}}
  .tide{border:2px solid var(--deep);background:var(--paper)}
  .tide .thead{background:var(--slate);color:var(--paper);font-family:"Courier New",Courier,monospace;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;padding:8px 14px}
  .tide table{width:100%;border-collapse:collapse;font-family:"Courier New",Courier,monospace;font-size:13.5px}
  .tide th{font-weight:bold;text-align:left;padding:9px 14px 6px;color:var(--slate);border-bottom:2px solid var(--deep);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
  .tide th:last-child,.tide td:last-child{text-align:right}
  .tide td{padding:8px 14px;border-bottom:1px dotted var(--hairline);color:#3b3222}
  .tide tr:nth-child(even) td{background:#efe7d2}
  .tide td b{color:var(--deep)}
  .tide .tfoot{font-size:11.5px;font-family:"Courier New",Courier,monospace;color:#6a5c3d;padding:10px 14px}

  /* ---- before-the-truck checklist ---- */
  .manifest{margin-top:34px;border-top:3px double var(--deep);padding-top:22px}
  .manifest .mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:8px 34px;margin-top:12px}
  .manifest .item{display:flex;gap:12px;padding:9px 0;border-bottom:1px dotted var(--hairline);font-size:14.5px;color:#42392a}
  .manifest .item .box{flex:none;width:15px;height:15px;border:2px solid var(--slate);margin-top:5px}
  .manifest .item b{color:var(--deep)}

  /* ---- county plate ---- */
  .plate{position:relative;border:2px solid var(--deep);background:var(--paper);padding:30px 34px;margin-top:14px}
  .plate::before,.plate::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--rust)}
  .plate::before{top:6px;left:6px;border-right:0;border-bottom:0}
  .plate::after{bottom:6px;right:6px;border-left:0;border-top:0}
  .plate .cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 44px}
  @media(max-width:720px){.plate .cols{grid-template-columns:1fr}}
  .plate .fact{padding:11px 0;border-bottom:1px dotted var(--hairline);font-size:15px;color:#42392a}
  .plate .fact b{color:var(--deep)}
  .plate .clerk{margin-top:18px;font-family:"Courier New",Courier,monospace;font-size:13px;background:var(--sand2);padding:12px 16px;color:#42392a}

  /* ---- mileage table ---- */
  .mileage{columns:2;column-gap:56px;margin-top:14px;max-width:760px}
  @media(max-width:640px){.mileage{columns:1}}
  .mi{display:flex;align-items:baseline;font-family:"Courier New",Courier,monospace;font-size:14.5px;padding:6px 0;break-inside:avoid}
  .mi .dots{flex:1;border-bottom:2px dotted var(--hairline);margin:0 8px}
  .mi .d{white-space:nowrap;color:var(--slate)}

  /* ---- inquiries (FAQ) ---- */
  .inq{border-left:3px solid var(--slate);padding:4px 0 4px 26px;margin-bottom:30px}
  .inq h3{font-family:"Palatino Linotype",Georgia,serif;font-style:italic;font-weight:bold;font-size:18.5px;color:var(--deep);margin-bottom:8px}
  .inq h3 .qm{font-style:normal;font-family:"Copperplate","Copperplate Gothic Light",Georgia,serif;color:var(--rust);margin-right:10px}
  .inq p{font-size:15px;color:#42392a;margin-bottom:8px}

  /* ---- closing call ---- */
  .closing{background:var(--slate);color:var(--paper);text-align:center;padding:56px 0;border-top:2px solid var(--deep)}
  .closing h2{color:var(--paper)}
  .closing p{color:#d9d2ba;max-width:520px;margin:0 auto 22px;font-size:15px}
  .closing .callbtn{background:var(--paper);color:var(--rust);border-color:var(--deep);box-shadow:4px 4px 0 var(--deep)}
  .closing .callbtn:hover{background:#efe7d2}

  /* ---- footer ---- */
  footer{background:var(--deep);color:#9daab1;padding:34px 0 28px;font-size:12.5px;line-height:1.65}
  footer .fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-bottom:20px}
  @media(max-width:700px){footer .fcols{grid-template-columns:1fr}}
  footer h4{font-family:"Copperplate","Copperplate Gothic Light",Georgia,serif;font-weight:normal;color:var(--sand);font-size:14px;letter-spacing:.08em;margin-bottom:9px}
  footer a{color:#c2b28a;text-decoration:none}
  footer a:hover{text-decoration:underline}
  footer .disclosure{border-top:1px solid #354a58;padding-top:16px;font-size:11.8px}