/* ─────────────────────────────────────────────────────────────────────────
   Blueprints — dimensioned technical drawings, authored as inline SVG.
   Drawing conventions follow normal engineering practice: heavy outlines,
   thin construction lines, dashed hidden edges, chain-dot centrelines, and
   dimensions outside the part wherever possible.
   ───────────────────────────────────────────────────────────────────────── */

.fig {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-md); overflow: hidden; margin-bottom: 18px;
}
.fig-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--hairline); background: var(--bg-2);
}
.fig-t { font-family: var(--serif); font-weight: 800; color: var(--ink); font-size: 15px; letter-spacing: -.015em; }
.fig-n { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ember); letter-spacing: .08em; text-transform: uppercase; }
.fig-body { padding: 18px 16px; overflow-x: auto; }
.fig svg { display: block; width: 100%; height: auto; max-width: 100%; }
.fig-cap { padding: 0 16px 14px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.fig-cap b { color: var(--ink); }

/* ── Line weights ─────────────────────────────────────────────────────── */
.bp { color: var(--ink); }
.bp .o    { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linejoin: round; stroke-linecap: round; }
.bp .m    { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.bp .t    { fill: none; stroke: currentColor; stroke-width: .7;  opacity: .75; }
.bp .hid  { fill: none; stroke: currentColor; stroke-width: 1;   stroke-dasharray: 6 4; opacity: .55; }
.bp .ctr  { fill: none; stroke: currentColor; stroke-width: .8;  stroke-dasharray: 14 3 2 3; opacity: .5; }
.bp .lead { fill: none; stroke: currentColor; stroke-width: .8;  opacity: .7; }

/* ── Dimensions ───────────────────────────────────────────────────────── */
.bp .dim      { fill: none; stroke: var(--ember); stroke-width: .9; }
.bp .dim-ext  { fill: none; stroke: var(--ember); stroke-width: .7; opacity: .55; }
.bp .dim-txt  { fill: var(--ember); font-family: var(--mono); font-size: 11px; font-weight: 600; text-anchor: middle; }

/* ── Text ─────────────────────────────────────────────────────────────── */
.bp text { font-family: var(--sans); fill: var(--ink); }
.bp .lbl  { font-size: 11.5px; font-weight: 600; }
.bp .lbl-s{ font-size: 10px; font-weight: 600; opacity: .8; }
.bp .ttl  { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.bp .note { font-size: 10.5px; fill: var(--muted); font-style: italic; }
.bp .mid  { text-anchor: middle; }
.bp .end  { text-anchor: end; }

/* ── Materials ─────────────────────────────────────────────────────────
   Colour-coded by material, the way a modern engineering or architectural
   section is drawn: a tinted ground carries the identity, a hatch texture
   carries the material, and a darker line of the same hue outlines it. That
   is far faster to read than uniform grey hatching, and it survives print
   and dark mode because every value is a token rather than a literal.
   ───────────────────────────────────────────────────────────────────── */
:root {
  --m-earth:    #A9784B;  --m-earth-bg:    #F0E2D2;  --m-earth-ln:    #8A5D34;
  --m-masonry:  #C0674C;  --m-masonry-bg:  #F8E1D9;  --m-masonry-ln:  #9C4A33;
  --m-timber:   #C99A55;  --m-timber-bg:   #FBEEDA;  --m-timber-ln:   #A2762F;
  --m-metal:    #6E8BA8;  --m-metal-bg:    #E3ECF4;  --m-metal-ln:    #47637E;
  --m-fill:     #B9A275;  --m-fill-bg:     #F5EEDF;  --m-fill-ln:     #93794A;
  --m-stone:    #8A9099;  --m-stone-bg:    #EBEEF1;  --m-stone-ln:    #626973;
  --m-water:    #3E8FC4;  --m-water-bg:    #DCEEF9;  --m-water-ln:    #2A6E9C;
  --m-hot:      #E2632E;  --m-hot-bg:      #FFE0CC;  --m-hot-ln:      #C0431A;
  --m-void-bg:  #FDFCFA;
}
html[data-theme="dark"] {
  --m-earth:    #C79A6C;  --m-earth-bg:    #3A2E23;  --m-earth-ln:    #D9AF80;
  --m-masonry:  #D9846A;  --m-masonry-bg:  #3D2620;  --m-masonry-ln:  #E89C82;
  --m-timber:   #E0B471;  --m-timber-bg:   #3B2F1C;  --m-timber-ln:   #EFC98C;
  --m-metal:    #90AECB;  --m-metal-bg:    #1F2B36;  --m-metal-ln:    #A9C4DC;
  --m-fill:     #CBB68C;  --m-fill-bg:     #35301F;  --m-fill-ln:     #DCC9A4;
  --m-stone:    #A6ACB5;  --m-stone-bg:    #24272B;  --m-stone-ln:    #BFC5CD;
  --m-water:    #5FADE0;  --m-water-bg:    #16303F;  --m-water-ln:    #7CC3EF;
  --m-hot:      #F5854F;  --m-hot-bg:      #40220F;  --m-hot-ln:      #FFA06B;
  --m-void-bg:  #1A1813;
}

.bp .f-earth   { fill: url(#h-earth);   stroke: var(--m-earth-ln);   stroke-width: 1.1; }
.bp .f-masonry { fill: url(#h-masonry); stroke: var(--m-masonry-ln); stroke-width: 1.3; }
.bp .f-timber  { fill: url(#h-timber);  stroke: var(--m-timber-ln);  stroke-width: 1.3; }
.bp .f-metal   { fill: url(#h-metal);   stroke: var(--m-metal-ln);   stroke-width: 1.3; }
.bp .f-fill    { fill: url(#h-fill);    stroke: var(--m-fill-ln);    stroke-width: 1.1; }
.bp .f-flat    { fill: url(#h-stone);   stroke: var(--m-stone-ln);   stroke-width: 1.1; }
.bp .f-void    { fill: var(--m-void-bg); stroke: var(--m-stone-ln);  stroke-width: 1.2; }
.bp .f-hot     { fill: url(#h-hot);     stroke: var(--m-hot-ln);     stroke-width: 1.3; }
.bp .f-water   { fill: url(#h-water);   stroke: var(--m-water-ln);   stroke-width: 1.1; }
.bp .f-none    { fill: none; }

/* Pattern internals. Each is drawn in its own hue so the texture reinforces
   the tint rather than muddying it. */
.bp .hx-earth   { stroke: var(--m-earth);   fill: none; stroke-width: .9; }
.bp .hx-earth-d { fill: var(--m-earth); }
.bp .hx-masonry { stroke: var(--m-masonry); fill: none; stroke-width: 1; }
.bp .hx-timber  { stroke: var(--m-timber);  fill: none; stroke-width: 1; }
.bp .hx-metal   { stroke: var(--m-metal);   fill: none; stroke-width: .9; }
.bp .hx-fill    { fill: var(--m-fill); }
.bp .hx-stone   { fill: var(--m-stone); }
.bp .hx-water   { stroke: var(--m-water);   fill: none; stroke-width: 1; }
.bp .hx-hot     { stroke: var(--m-hot);     fill: none; stroke-width: 1.2; }

.bp .bg-earth   { fill: var(--m-earth-bg); }
.bp .bg-masonry { fill: var(--m-masonry-bg); }
.bp .bg-timber  { fill: var(--m-timber-bg); }
.bp .bg-metal   { fill: var(--m-metal-bg); }
.bp .bg-fill    { fill: var(--m-fill-bg); }
.bp .bg-stone   { fill: var(--m-stone-bg); }
.bp .bg-water   { fill: var(--m-water-bg); }
.bp .bg-hot     { fill: var(--m-hot-bg); }

/* ── Material legend under each figure ────────────────────────────────── */
.mat-key { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 16px 14px; }
.mat { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.mat i { width: 17px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid; }
.mat-earth   i { background: var(--m-earth-bg);   border-color: var(--m-earth-ln); }
.mat-masonry i { background: var(--m-masonry-bg); border-color: var(--m-masonry-ln); }
.mat-timber  i { background: var(--m-timber-bg);  border-color: var(--m-timber-ln); }
.mat-metal   i { background: var(--m-metal-bg);   border-color: var(--m-metal-ln); }
.mat-fill    i { background: var(--m-fill-bg);    border-color: var(--m-fill-ln); }
.mat-stone   i { background: var(--m-stone-bg);   border-color: var(--m-stone-ln); }
.mat-water   i { background: var(--m-water-bg);   border-color: var(--m-water-ln); }
.mat-hot     i { background: var(--m-hot-bg);     border-color: var(--m-hot-ln); }
.mat-void    i { background: var(--m-void-bg);    border-color: var(--m-stone-ln); }

/* ── Callout badges on drawings ───────────────────────────────────────── */
.bp .key circle { fill: var(--ember); stroke: var(--paper); stroke-width: 1.5; }
.bp .key text   { fill: #fff; font-size: 9.5px; font-weight: 700; text-anchor: middle; font-family: var(--mono); }

/* ── Build page furniture ─────────────────────────────────────────────── */
.spec-table td.k { width: 38%; color: var(--muted); }
.spec-table td.v { font-family: var(--mono); color: var(--ink); font-weight: 600; }
.spec-table td.n { color: var(--muted); font-size: 12.5px; }

.bom td.q { font-family: var(--mono); white-space: nowrap; color: var(--ink); font-weight: 600; }
.bom td.sub { color: var(--muted); font-size: 12.5px; }

.proc-step { margin-bottom: 22px; padding-left: 42px; position: relative; counter-increment: pstep; }
.proc-list { counter-reset: pstep; }
.proc-step::before {
  content: counter(pstep); position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--ember); color: #fff;
  display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.proc-step h4 { font-size: 15.5px; margin-bottom: 5px; }
.proc-step p { font-size: 14px; margin-bottom: 8px; }
.proc-check {
  display: flex; gap: 7px; align-items: flex-start; font-size: 13px;
  color: var(--green); margin-top: 4px;
}
.proc-check b { color: var(--ink); font-weight: 700; }

.plate { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); }
.plate img { width: 100%; height: auto; display: block; }
.plate figcaption { padding: 10px 14px; font-size: 12px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--hairline); }
.plate figcaption b { color: var(--ink); display: block; margin-bottom: 4px; }
.plate-lic { font-family: var(--mono); font-size: 10.5px; opacity: .8; }

/* The lead shot is a header, not a plate in a gallery: crop tall portrait
   photographs rather than letting one push the whole page down a screen. */
.plate-lead { margin: 0 0 26px; }
.plate-lead img { max-height: 420px; object-fit: cover; object-position: center; }

.build-card { display: block; }
.build-card .bc-fig { background: var(--bg-2); border-bottom: 1px solid var(--hairline); padding: 14px; }
.build-card .bc-fig svg { width: 100%; height: 128px; }
.build-card .bc-photo { border-bottom: 1px solid var(--hairline); background: var(--bg-2); }
.build-card .bc-photo img { display: block; width: 100%; height: 156px; object-fit: cover; }
.build-card .bc-body { padding: 14px 16px; }

@media (max-width: 640px) {
  .fig-body { padding: 12px 8px; }
  .proc-step { padding-left: 34px; }
  .proc-step::before { width: 24px; height: 24px; font-size: 11px; }
}

/* ── Field guides ─────────────────────────────────────────────────────── */
.lede-block { font-size: 16.5px; line-height: 1.65; margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--hairline); }
.gsec { margin-bottom: 46px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.gsec > h2 { margin-bottom: 14px; }
.gsec-body { margin-bottom: 20px; }
.gsec-body p { font-size: 15.5px; line-height: 1.65; }
.gsec-body ul, .gsec-body ol { font-size: 15.5px; line-height: 1.6; }
.todo-list { margin: 0 0 0 20px; }
.todo-list li { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.todo-list li::marker { color: var(--ember); }