/* swbpipe.org — the open manual.
   Design language: the 1941 Kellogg manual, Expansion Stresses and Reactions in Piping Systems.
   Loose-leaf pages, Caslon type, spaced capitals, italic initials, figures in heavy isometric
   line with drafting lettering, captions as "FIG. 1.—TITLE". Dark mode is the black cloth cover.
   Fonts are self-hosted: the host's Content-Security-Policy allows only 'self'. */

@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/libre-caslon-text-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-caslon-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Varela Round";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/varela-round-latin-400-normal.woff2) format("woff2")}

:root{
  --paper:#f8f6f0; --paper-2:#efebe1; --leaf:#fffdf8;
  --ink:#191918; --ink-2:#3f3e3a; --ink-3:#6d6a62;
  --rule:#d9d3c5; --rule-strong:#a9a18f;
  --mark:#a8412a; --link:#1f4f67;
  --text:"Libre Caslon Text", "Big Caslon", Georgia, serif;
  --display:"Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --letter:"Varela Round", "Avenir Next", system-ui, sans-serif;
  --measure:38rem; --wrap:68rem; --gutter:clamp(1rem,4vw,2.5rem);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#141413; --paper-2:#1b1b19; --leaf:#1d1d1b;
    --ink:#ece8dd; --ink-2:#c9c4b7; --ink-3:#98938a;
    --rule:#33322e; --rule-strong:#55534c;
    --mark:#e3876b; --link:#9cc3d6;
  }
}
:root[data-theme="dark"]{
  --paper:#141413; --paper-2:#1b1b19; --leaf:#1d1d1b;
  --ink:#ece8dd; --ink-2:#c9c4b7; --ink-3:#98938a;
  --rule:#33322e; --rule-strong:#55534c;
  --mark:#e3876b; --link:#9cc3d6;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.08rem/1.68 var(--text);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.18em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem 1rem}
.spaced{text-transform:uppercase;letter-spacing:.2em}
.sc{font-variant:small-caps;letter-spacing:.06em}

/* ---------- running head ---------- */
.running{border-bottom:1px solid var(--rule)}
.running .wrap{display:flex;justify-content:space-between;align-items:center;min-height:3.6rem;gap:1rem}
.running .brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-size:.82rem}
.running .brand i{width:1.25rem;height:1.38rem;background:var(--ink);
  -webkit-mask:url(swb-mark-160.png) center/contain no-repeat;mask:url(swb-mark-160.png) center/contain no-repeat}
.running nav{display:flex;gap:1.4rem;font-size:.8rem}
.running nav a{color:var(--ink-2);text-decoration:none}
.running nav a:hover{color:var(--ink);text-decoration:underline}

/* ---------- the leaf: a loose-leaf page with its punched holes ---------- */
.leaf{position:relative;background:var(--leaf);border:1px solid var(--rule);margin:clamp(1.5rem,4vw,3rem) auto;
  max-width:60rem;padding:clamp(2.2rem,6vw,5rem) clamp(1.3rem,7vw,6.5rem);box-shadow:0 1px 0 var(--rule),0 24px 50px -36px rgba(0,0,0,.35)}
.leaf::before{content:"";position:absolute;left:clamp(.55rem,1.6vw,1.4rem);top:0;bottom:0;width:.9rem;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,var(--paper) 0 .36rem,var(--rule-strong) .37rem .42rem,transparent .43rem) 0 3.2rem/100% 6.4rem repeat-y;opacity:.9}
.folio{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-3);margin-bottom:clamp(2rem,5vw,3.5rem)}
.folio .spaced{font-size:.72rem}

/* ---------- title page ---------- */
.title-page{text-align:center;padding:clamp(1rem,4vw,3rem) 0 1rem}
.title-page p{text-align:center;margin-left:auto;margin-right:auto}
.title-page .over{font-size:.8rem;color:var(--ink-2);margin:0}
.title-page h1{font:400 clamp(2.2rem,6vw,3.9rem)/1.15 var(--display);letter-spacing:.08em;text-transform:uppercase;margin:clamp(2.5rem,7vw,4.5rem) 0 1.2rem}
.title-page .sub{font:italic 400 clamp(1.1rem,2vw,1.3rem)/1.5 var(--text);color:var(--ink-2);max-width:30rem;margin:0 auto}
.title-page .imprint{margin:clamp(3rem,8vw,5.5rem) auto 0;display:grid;justify-items:center;gap:.35rem;font-size:.9rem;color:var(--ink-2)}
.title-page .mark{width:3.4rem;aspect-ratio:932/1032;background:var(--ink);margin:0 auto 1.1rem;
  -webkit-mask:url(swb-mark-640.png) center/contain no-repeat;mask:url(swb-mark-640.png) center/contain no-repeat}
.title-page .publisher{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}

/* ---------- headings ---------- */
h2{font:400 1.5rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;text-align:center;margin:0 0 .5rem}
.part{text-align:center;font:400 1.35rem/1.2 var(--text);margin:0 0 .6rem}
.subhead{text-align:center;font:400 1.3rem/1.35 var(--text);margin:0 0 2rem}
h3{font:700 1.02rem/1.4 var(--text);margin:2rem 0 .5rem}
h3 .n{margin-right:.35rem}
p{margin:0 0 1rem;hyphens:auto;text-align:justify}
.measure{max-width:var(--measure);margin-left:auto;margin-right:auto}
.initial::first-letter{float:left;font:italic 400 3.6em/.8 var(--display);margin:.08em .08em 0 0;color:var(--ink)}
hr.orn{border:0;text-align:center;margin:1.2rem 0 clamp(1.8rem,4vw,2.6rem)}
hr.orn::after{content:"\2042";font-size:1.1rem;color:var(--ink-3)}

/* ---------- contents, set with leaders ---------- */
.contents{max-width:34rem;margin:0 auto;padding:0;list-style:none;font-size:1rem}
.contents > li{margin:1.2rem 0 0}
.contents .row{display:flex;align-items:baseline;gap:.4rem}
.contents .row::after{content:"";flex:1;order:2;border-bottom:1px dotted var(--rule-strong);transform:translateY(-.3em)}
.contents .row .ref{order:3;color:var(--ink-3);font-size:.88rem;white-space:nowrap}
.contents .row a,.contents .row span.t{order:1;color:var(--ink);text-decoration:none}
.contents .row a:hover{text-decoration:underline}
.contents .part-row{font-variant:small-caps;letter-spacing:.06em;font-size:1.06rem}
.contents ol{list-style:none;padding:0 0 0 1.6rem;margin:.25rem 0 0}
.contents ol li{margin:.15rem 0;color:var(--ink-2)}

/* ---------- figures ---------- */
figure{margin:clamp(2rem,5vw,3rem) 0}
figure svg{width:100%;max-width:44rem;margin:0 auto;color:var(--ink)}
.fig .pipe{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.fig .anchor{stroke:currentColor;stroke-width:4;stroke-linecap:round}
.fig .thin{stroke:currentColor;stroke-width:1.1;fill:none}
.fig .thin2{stroke:currentColor;stroke-width:1.6;fill:none}
.fig .fillbg{fill:var(--leaf)}
.fig .dim{stroke:currentColor;stroke-width:1}
.fig .ext{stroke:currentColor;stroke-width:.7;opacity:.65}
.fig .arrow{fill:currentColor}
.fig text{font-family:var(--letter);fill:currentColor}
.fig text.lbl{font-size:12.5px;letter-spacing:.06em}
.fig text.sm{font-size:10.5px}
.fig text.head{font-size:14px;font-weight:700;letter-spacing:.08em}
figcaption{text-align:center;font-size:.86rem;letter-spacing:.06em;font-variant:small-caps;color:var(--ink-2);margin-top:.9rem}

/* ---------- tables, ruled as the manual rules them ---------- */
table{border-collapse:collapse;width:100%;font-size:.95rem;font-variant-numeric:lining-nums tabular-nums;margin:1.2rem 0 1.8rem}
caption{caption-side:top;text-align:center;font-variant:small-caps;letter-spacing:.06em;color:var(--ink-2);margin-bottom:.6rem}
th,td{padding:.42rem .7rem;text-align:right;border-bottom:1px solid var(--rule)}
th:first-child,td:first-child{text-align:left}
thead th{font-weight:400;font-style:italic;border-bottom:1.5px solid var(--ink);border-top:1.5px solid var(--ink)}
tbody tr:last-child td{border-bottom:1.5px solid var(--ink)}
td i,th i{font-style:italic}
td:not(:first-child),th:not(:first-child){white-space:nowrap}
.table-scroll{overflow-x:auto}

/* ---------- equations and code ---------- */
.eq{display:flex;justify-content:center;align-items:baseline;gap:2rem;margin:1.2rem 0 1.4rem;font-size:1.08rem}
.eq .no{color:var(--ink-3);font-size:.9rem}
.eq i{font-style:italic}
pre{font:400 .82rem/1.55 ui-monospace,"SF Mono",Menlo,monospace;background:var(--paper-2);border:1px solid var(--rule);padding:1rem 1.1rem;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:1rem 0 1.6rem}

/* ---------- notes ---------- */
.note{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:1.2rem 0 .4rem;margin:2.5rem 0}
.note .spaced{display:block;text-align:center;font-size:.78rem;margin-bottom:.8rem}
.teach{background:var(--paper-2);border-left:3px solid var(--mark);padding:1.1rem 1.3rem .3rem;margin:2rem 0}
.teach .spaced{display:block;font-size:.72rem;color:var(--mark);margin-bottom:.4rem}

/* ---------- a featured case on the contents leaf ---------- */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.feature figure{margin:0}
.feature p{text-align:left}
.more{font-variant:small-caps;letter-spacing:.06em}

/* ---------- back matter ---------- */
.back{text-align:center;font-size:.86rem;color:var(--ink-3);padding:2rem 0 3.5rem}
.back p{text-align:center;margin:.3rem 0}
.back a{color:var(--ink-2)}

@media (max-width:760px){
  .feature{grid-template-columns:1fr}
  .running nav a:not(.keep){display:none}
  .leaf::before{display:none}
  p{text-align:left}
  .eq{flex-direction:column;gap:.3rem;align-items:center}
}