@font-face {
  font-family: "osifont";
  src: url("assets/fonts/osifont.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root {
  color-scheme: light;
  background: #e8e9e7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --cut-line: .63;
  --object-line: .315;
  --detail-line: .18;
  --dimension-line: .225;
  --extension-line: .16;
  --type-title: 4.3px;
  --type-feature: 3.8px;
  --type-label: 3.3px;
  --type-detail: 3px;
  --type-note: 2.7px;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { padding: 24px; background: #e8e9e7; }
main {
  width: min(100%, 1500px);
  min-width: 1080px;
  margin-inline: auto;
}
.sheet-nav {
  display: flex;
  gap: 8px;
  margin-block-end: 16px;
  font: 13px/1.4 system-ui, sans-serif;
}
.sheet-nav a {
  padding: 9px 13px;
  border: 1px solid #b7b9b5;
  border-radius: 3px;
  color: #333;
  background: #f7f7f6;
  text-decoration: none;
}
.sheet-nav a[aria-current="page"] { color: #fff; background: #222; border-color: #222; }
.sheet-nav a:focus-visible { outline: 2px solid #145d99; outline-offset: 3px; }
#floor-plan {
  display: block;
  width: 100%;
  height: auto;
  background: white;
  box-shadow: 0 3px 18px rgb(0 0 0 / 8%);
}
#floor { fill: white; }
#sheet-border, #title-block path {
  fill: none;
  stroke: #111;
  stroke-width: .315;
}
#walls {
  fill: url(#wall-hatch);
  stroke: #111;
  stroke-width: var(--cut-line);
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.hatch-line { stroke: #777; stroke-width: .1; }
.tile-line { fill: none; stroke: #d5d5d5; stroke-width: .12; }
.wet-floor { fill: #fafafa; }
.bench-top, .cabinet {
  fill: #f5f5f3;
  stroke: #171717;
  stroke-width: var(--object-line);
}
.shower-fittings, .porcelain, .faucet-base {
  fill: white;
  stroke: #222;
  stroke-width: var(--object-line);
}
.source-fixture {
  fill: none;
  stroke: #222;
  stroke-width: var(--object-line);
  stroke-linecap: round;
  stroke-linejoin: round;
}
#linear-drain { fill: #aaa; stroke: #444; stroke-width: .16; }
#linear-drain .drain-outlet { fill: white; stroke: #222; stroke-width: .22; }
.fine { fill: none; stroke: #444; stroke-width: var(--detail-line); }
.faucet { fill: none; stroke: #222; stroke-width: .4; stroke-linecap: round; }
.door-panel { fill: white; stroke: #222; stroke-width: var(--object-line); }
.window-frame { fill: none; stroke: #222; stroke-width: var(--object-line); }
.glass { fill: none; stroke: #222; stroke-width: .22; }
.glass-clip { fill: #222; stroke: #222; stroke-width: .16; }
.curb-line { fill: none; stroke: #444; stroke-width: var(--object-line); }
.overhead {
  fill: none;
  stroke: #555;
  stroke-width: .18;
  stroke-dasharray: 1.5 .75;
}
.warmer-outline {
  fill: white;
  stroke: #333;
  stroke-width: .225;
  stroke-dasharray: 1 .6;
}
.niche-mask { fill: white; }
.niche-outline { fill: none; stroke: #222; stroke-width: var(--object-line); }
.niche-front { fill: none; stroke: #555; stroke-width: .18; stroke-dasharray: 1 .7; }
.bidet-fitting { fill: white; stroke: #222; stroke-width: var(--object-line); }
.bidet-hose { fill: none; stroke: #444; stroke-width: .225; }
.led-projection { fill: none; stroke: #666; stroke-width: .18; stroke-dasharray: .5 .6; }
#plan-keynotes text { text-anchor: start; font-size: var(--type-note); letter-spacing: .02em; }
#plan-keynotes .note-heading { font-size: var(--type-feature); letter-spacing: .06em; }
#plan-keynotes .note-title { font-size: var(--type-label); }
svg text {
  font-family: "osifont", "Arial Narrow", Arial, sans-serif;
  font-size: var(--type-label);
  font-weight: 400;
  font-synthesis: none;
  fill: #111;
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}
#labels .feature-label { font-size: var(--type-feature); }
#labels .small { font-size: var(--type-label); }
#labels .detail { font-size: var(--type-detail); }
#labels .tiny { font-size: var(--type-note); }
#dimensions path, .leader, #scale path {
  fill: none;
  stroke: #222;
  stroke-width: var(--dimension-line);
}
#dimensions .extension { stroke-width: var(--extension-line); }
#dimensions text {
  font-size: var(--type-label);
  letter-spacing: 0;
  paint-order: stroke fill;
  stroke: white;
  stroke-width: .65;
  stroke-linejoin: round;
}
#scale text { font-size: var(--type-note); }
#scale .print-note { text-anchor: start; font-size: 2.7px; }
.scale-dark { fill: #222; stroke: #222; stroke-width: .18; }
.scale-light { fill: white; stroke: #222; stroke-width: .18; }
#drawing-notes text { text-anchor: start; font-size: var(--type-note); letter-spacing: .02em; }
#title-block .sheet-name {
  text-anchor: start;
  font-size: var(--type-title);
  letter-spacing: .04em;
}
#title-block .drawing-name { text-anchor: start; font-size: var(--type-label); }
#title-block .sheet-number { font-size: 5px; }
#title-block .meta-label { font-size: 2.6px; letter-spacing: .05em; }
#title-block .meta-value { font-size: 2.9px; letter-spacing: 0; }
#title-block .left { text-anchor: start; }

@media print {
  @page { size: letter landscape; margin: .5in; }
  :root { background: white; }
  .sheet-nav { display: none; }
  body { padding: 0; background: white; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  main { width: 9.625in; min-width: 0; margin: 0 auto; }
  #floor-plan { width: 9.625in; height: 7in; box-shadow: none; }
}