/* pd-site-v5-20260816 — PoolDraw(tm) drafting-sheet stylesheet */
/* Palette: Paper #F7F9FC | Tint #E3EBF4 | Blueline #2B5C8A | Ink #14283C | Redline #B3261E */

:root{
  --paper:#F7F9FC;
  --tint:#E3EBF4;
  --blueline:#2B5C8A;
  --blue-soft:#7A9CBD;
  --ink:#14283C;
  --redline:#B3261E;
  --frame:2px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--tint);
  color:var(--ink);
  font-family:"Source Sans 3",system-ui,Segoe UI,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  padding:18px;
}

/* ---- the plot: every page is one drawing sheet ---- */
.sheet{
  max-width:1080px;
  margin:0 auto;
  overflow:hidden;
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(43,92,138,.06) 31px,rgba(43,92,138,.06) 32px),
    repeating-linear-gradient(90deg,transparent,transparent 31px,rgba(43,92,138,.06) 31px,rgba(43,92,138,.06) 32px);
  background-color:var(--paper);
  border:var(--frame) solid var(--blueline);
  outline:1px solid var(--blueline);
  outline-offset:5px;
  padding:0;
  position:relative;
}
.sheet-inner{padding:34px 44px 28px}

/* margin ticks on the plot border */
.sheet::before,.sheet::after{
  content:"";position:absolute;left:-1px;right:-1px;height:8px;
  background:repeating-linear-gradient(90deg,var(--blueline) 0 1px,transparent 1px 120px);
}
.sheet::before{top:-1px}
.sheet::after{bottom:-1px}

/* ---- sheet-index navigation (drawing-set index) ---- */
.sheet-index{
  display:flex;flex-wrap:wrap;gap:0;
  border-bottom:1px solid var(--blueline);
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:12.5px;letter-spacing:.04em;
}
.sheet-index a{
  color:var(--blueline);text-decoration:none;
  padding:10px 16px;border-right:1px solid var(--tint);
}
.sheet-index a:hover{background:var(--tint)}
.sheet-index a:focus-visible{outline:2px solid var(--redline);outline-offset:-2px}
.sheet-index a[aria-current="page"]{
  background:var(--blueline);color:var(--paper);
}
.sheet-index .idx-ext{margin-left:auto;border-left:1px solid var(--tint);border-right:none}

/* ---- typography ---- */
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blueline);margin:26px 0 10px;
}
h1{
  font-family:"Big Shoulders","Big Shoulders Display",Arial Narrow,sans-serif;
  font-weight:800;font-size:clamp(40px,6vw,66px);
  line-height:1.02;text-transform:uppercase;letter-spacing:.01em;
  color:var(--ink);margin:0 0 18px;
}
h2{
  font-family:"Big Shoulders","Big Shoulders Display",Arial Narrow,sans-serif;
  font-weight:700;font-size:clamp(24px,3vw,32px);
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);
}
.lede{font-size:19px;max-width:62ch;margin-bottom:26px}
p{max-width:70ch;margin-bottom:14px}
a{color:var(--blueline)}
a:focus-visible{outline:2px solid var(--redline);outline-offset:2px}

/* dimension-line section header: |<---- LABEL ---->| */
.dim{
  display:flex;align-items:center;gap:14px;
  margin:44px 0 18px;color:var(--blueline);
}
.dim::before,.dim::after{
  content:"";flex:1;height:0;border-top:1px solid var(--blueline);position:relative;
}
.dim h2{white-space:nowrap}
.dim .tick{width:1px;height:14px;background:var(--blueline)}

/* ---- red-line stamp ---- */
.stamp{
  display:inline-block;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--redline);border:2px solid var(--redline);
  padding:6px 12px;border-radius:3px;
  transform:rotate(-1.6deg);
  margin:4px 0 20px;
}

/* ---- drawing figures ---- */
figure.sht{margin:26px 0}
figure.sht img{width:100%;height:auto;display:block;border:1px solid var(--blueline)}
figure.sht figcaption{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12.5px;color:var(--blueline);margin-top:8px;
}
figure.sht figcaption b{color:var(--ink)}
.annot{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--blueline);
}

/* ---- deliverables / spec grids ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--blueline);margin:20px 0}
.grid2 .cell{padding:18px 20px;border:0 solid var(--blueline)}
.grid2 .cell:nth-child(odd){border-right-width:1px}
.grid2 .cell:nth-child(-n+2){border-bottom-width:1px}
.cell h3{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blueline);margin-bottom:6px;
}
.cell p{font-size:15.5px;margin:0}

/* numbered process steps (a real sequence) */
.steps{counter-reset:step;margin:20px 0;border-left:2px solid var(--blueline)}
.step{position:relative;padding:6px 0 18px 58px;counter-increment:step}
.step::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:14px;top:8px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:14px;color:var(--paper);background:var(--blueline);
  padding:2px 6px;border-radius:2px;
}
.step h3{
  font-family:"Big Shoulders","Big Shoulders Display",Arial Narrow,sans-serif;
  font-size:22px;text-transform:uppercase;letter-spacing:.02em;
}
.step p{font-size:16px;margin:4px 0 0}

/* status block */
.status{
  border:1px solid var(--blueline);
  background:#fff;
  padding:20px 22px;margin:34px 0 10px;
}
.status .annot{display:block;margin-bottom:8px}
.status p{margin-bottom:8px}
.status p:last-child{margin-bottom:0}

/* buy CTA */
.cta{
  display:inline-block;background:var(--blueline);color:var(--paper);
  text-decoration:none;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 22px;border:1px solid var(--ink);
}
.cta:hover{background:var(--ink)}

/* ---- title block ---- */
.titleblock{
  margin-top:52px;border-top:2px solid var(--blueline);
  display:grid;grid-template-columns:2fr repeat(4,1fr);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;
}
.tb{border-right:1px solid var(--blueline);padding:8px 12px}
.tb:last-child{border-right:none}
.tb .k{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-soft)}
.tb .v{color:var(--ink)}
.tb .v.red{color:var(--redline)}

footer.legal{
  padding:16px 44px 26px;font-size:13px;color:var(--blueline);
  border-top:1px solid var(--tint);
}
footer.legal p{max-width:none;margin-bottom:4px}

/* ---- responsive ---- */
@media (max-width:760px){
  body{padding:10px}
  .sheet-inner{padding:22px 18px 18px}
  .grid2{grid-template-columns:1fr}
  .grid2 .cell{border-right-width:0!important;border-bottom-width:1px}
  .grid2 .cell:last-child{border-bottom-width:0}
  .titleblock{grid-template-columns:1fr 1fr}
  .tb{border-bottom:1px solid var(--tint)}
  footer.legal{padding:14px 18px 20px}
  .sheet-index{font-size:11.5px}
  .sheet-index a{padding:8px 10px}
  .sheet-index .idx-ext{margin-left:0}
}

/* ---- ribbon showcase (product sheet) ---- */
figure.ribbon{margin:22px 0 30px}
figure.ribbon img{
  width:100%;max-width:100%;height:auto;display:block;
  border:1px solid var(--blueline);
  background:#fff;
}
figure.ribbon figcaption{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12.5px;color:var(--blueline);margin-top:8px;
}
figure.ribbon figcaption b{color:var(--ink)}

/* seven-group legend, as a drawing-set key */
.ribbon-key{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--blueline);margin:6px 0 8px;
}
.ribbon-key .grp{
  padding:14px 16px;border:0 solid var(--blueline);
  border-right-width:1px;border-bottom-width:1px;
}
.ribbon-key .grp:nth-child(4n){border-right-width:0}
.ribbon-key .grp .gnum{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.1em;color:var(--blue-soft);
}
.ribbon-key .grp h3{
  font-family:"Big Shoulders","Big Shoulders Display",Arial Narrow,sans-serif;
  font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.02em;
  margin:2px 0 4px;color:var(--ink);
}
.ribbon-key .grp p{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;line-height:1.5;color:var(--blueline);margin:0;max-width:none;
}
/* the pool-specific group gets the spotlight */
.ribbon-key .grp.feature{
  grid-column:span 2;background:var(--tint);
}
.ribbon-key .grp.feature h3{color:var(--blueline)}
.ribbon-key .grp.feature .lead{
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:14px;color:var(--ink);margin-top:6px;text-transform:none;letter-spacing:0;
}

@media (max-width:760px){
  .ribbon-key{grid-template-columns:1fr 1fr}
  .ribbon-key .grp{border-right-width:1px!important}
  .ribbon-key .grp:nth-child(2n){border-right-width:0!important}
  .ribbon-key .grp.feature{grid-column:span 2}
}