/*
  How it works (howView.tsx, drawings in howArt.tsx). Built on /static/home.css: the same
  labels, headings, body, quotes and buttons, the same line and tints in the drawings.
  What is new here is the pinned drawing beside the six systems, the contents rail, and
  the page's own figures.
*/
.hw{--hw-dim:.26}
.hw section[id],.hw [id]{scroll-margin-top:calc(var(--hdr-h) + 24px)}
.hw-n{font-family:var(--mono);font-weight:500;color:var(--sage-deep);margin-right:14px;letter-spacing:.08em}
.hw-h2{max-width:18ch}

/* ---------- 00 · opening ---------- */
.hw-open{padding:calc(var(--hdr-h) + clamp(40px,7vw,110px)) 0 clamp(56px,7vw,110px)}
.hw-h1{font-weight:300;font-size:clamp(2.5rem,6vw,5.6rem);line-height:1.01;letter-spacing:-.04em;color:var(--ink);max-width:15ch;margin:0;text-wrap:balance}
.hw-intro{max-width:58ch}
.hw-master{margin:clamp(44px,6vw,90px) 0 0;padding:clamp(12px,2vw,28px);border-radius:var(--r-lg);background:var(--paper-2)}
.hw-master .cs-l,.hw-master .draw{opacity:1;stroke-dashoffset:0}
.hw-master .flow{animation:hm-flow 2.4s linear infinite}
.hw-master .curl{animation:hm-curl 3.6s ease-in-out infinite;transform-box:fill-box}
/* the contents: two rows, the house and then the depth */
.hw-rail{display:grid;gap:14px;margin-top:clamp(22px,2.6vw,34px)}
.hw-rail-row{display:grid;grid-template-columns:minmax(120px,.22fr) 1fr;gap:12px 24px;align-items:baseline;padding-top:14px;border-top:1px solid var(--line)}
.hw-rail-row > span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.hw-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 8px}
.hw-rail a{display:inline-flex;align-items:baseline;gap:9px;padding:9px 14px;border-radius:var(--r);background:var(--paper-2);color:var(--ink);font-size:15px;
  transition:background .2s,color .2s}
.hw-rail a i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--sage-deep);letter-spacing:.06em}
.hw-rail a:hover{background:var(--ink);color:var(--paper)}
.hw-rail a:hover i{color:var(--paper)}
.hw-rail a:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* ---------- 01 to 06 · the pinned drawing and the six systems ---------- */
.hw-sys{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:start;padding-bottom:var(--hm-sec)}
.hw-spine{position:sticky;top:calc(var(--hdr-h) + 10vh);margin:0;padding:clamp(10px,1.4vw,18px);border-radius:var(--r-lg);background:var(--paper-2)}
.hw-s{padding:clamp(56px,7vw,110px) 0;border-top:1px solid var(--line)}
.hw-s:first-child{border-top:0;padding-top:clamp(10px,2vw,30px)}
.hw-crop{display:none}
/* one part at full strength, the rest of the house quietly behind it */
.hw-focus .cs-l,.hw-focus .cs-base{opacity:var(--hw-dim);transition:opacity .6s ease}
.hw-focus .draw{stroke-dashoffset:0}
.hw-focus[data-focus=shell] .cs-l1,
.hw-focus[data-focus=earth] .cs-l2,.hw-focus[data-focus=earth] .cs-l6,.hw-focus[data-focus=earth] .cs-base,
.hw-focus[data-focus=roof] .cs-roof,.hw-focus[data-focus=roof] .cs-l2,
.hw-focus[data-focus=light] .cs-l3,
.hw-focus[data-focus=air] .cs-l4,
.hw-focus[data-focus=water] .cs-l5{opacity:1}
.hw-focus[data-focus=roof] .cs-base{opacity:.6}
.hw-focus[data-focus=roof] .cs-l2 ellipse{opacity:.4}
/* the shell is the one heavy line in the drawing */
.hw-focus .cs-l1 .ln,.hw-master .cs-l1 .ln{stroke-width:2.6}
.hw-focus[data-focus=air] .cs-l4 .flow,.hw-focus[data-focus=water] .cs-l5 .flow{animation:hm-flow 2.4s linear infinite}
.hw-focus[data-focus=earth] .curl{animation:hm-curl 3.6s ease-in-out infinite;transform-box:fill-box}

/* the figures of each system */
.hw-extra{display:grid;gap:clamp(18px,2vw,26px);margin-top:clamp(34px,4vw,54px)}
.hw-extra:empty{display:none}
.hw-fig{margin:0;padding:clamp(18px,2.4vw,32px);border-radius:var(--r-lg);background:var(--paper-2)}
.hw-fig figcaption,.hw-photo figcaption{margin-top:14px;font-size:13.5px;line-height:1.45;color:var(--ink-muted)}
.hw-fig figcaption.is-mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.hw-photo{margin:0}
.hw-photo .ph{width:100%;aspect-ratio:4/3;object-fit:cover}
.hw-photo.is-wide{margin-top:clamp(40px,5vw,72px)}
.hw-photo.is-wide .ph{aspect-ratio:21/9}
.hw-facts{list-style:none;margin:clamp(24px,2.6vw,34px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hw-facts li{padding:8px 13px;border-radius:var(--r);background:var(--paper-2);font-size:14px;color:var(--ink);letter-spacing:-.005em}
.hw-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.hw-chips li{padding:14px 16px;background:var(--paper);font-size:14.5px;color:var(--ink)}
.hw-chips li::before{content:'';display:inline-block;width:5px;height:5px;margin:0 10px 2px 0;border-radius:99px;background:var(--sage)}
.hw-line{margin:clamp(22px,2.4vw,30px) 0 0;font-weight:300;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink);max-width:28ch}

/* legends: the words the drawings keep out of the SVG */
.hw-legend{display:grid;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.hw-legend-2{grid-template-columns:1.4fr 1fr}
.hw-legend b{display:block;font-weight:500;font-size:13.5px;color:var(--ink);margin-bottom:8px}
.hw-legend ol{margin:0;padding:0;list-style:none;counter-reset:n;display:grid;gap:4px}
.hw-legend li{counter-increment:n;font-size:13.5px;color:var(--ink-soft)}
.hw-legend li::before{content:counter(n);display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:9px;border-radius:99px;
  border:1px solid var(--hm-line);font-family:var(--mono);font-size:10.5px;color:var(--ink)}
.hw-key{display:grid;gap:8px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-2)}
.hw-key div{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:baseline}
.hw-key dt{font-family:var(--mono);font-size:12px;color:var(--sage-deep)}
.hw-key dd{margin:0;font-size:14px;line-height:1.45;color:var(--ink-soft)}

/* the drawings' own tones */
.ln.hair-solid{stroke:var(--hm-soft);stroke-width:1}
.ln.wc-heavy{stroke-width:2.6}
.wc-heavy-fill{stroke-width:2.6}
.wc-dot{fill:var(--paper);stroke:var(--hm-line);stroke-width:1.2}
.wc-t{font-family:var(--mono);font-size:15px;fill:var(--ink)}
.art-wall .art-t.small{font-size:19px}
.wc-ins{fill:#EFEAE0}
.wc-hatch{stroke:#D7CFBE;stroke-width:1.2}
.wc-mem{fill:var(--ink)}
.wc-prot{fill:#CFC9BC}
.wc-drain{fill:#E6E0D2}
.wc-gravel-dot{fill:#B9AE97}
.wc-x{fill:none;stroke:var(--sage);stroke-width:2.4;stroke-linecap:round}
.wc-fail{fill:var(--sage-deep)!important}
.art-hbars .art-t,.art-grid .art-t{font-size:16px}.art-hbars .art-t.small,.art-grid .art-t.small{font-size:16.5px;fill:var(--ink-soft)}
.art-hbars .art-t.num,.art-grid .art-t.num{font-size:19px}
.hb-r{fill:#DAD5C8;transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 160ms)}
.hb.is-us .hb-r{fill:var(--sage);stroke:none}
.hb .art-t.num{opacity:0;transition:opacity .5s;transition-delay:calc(var(--i) * 160ms + 600ms)}
.was-seen .hb-r{transform:none}.was-seen .hb .art-t.num{opacity:1}
.sh-room{fill:var(--paper)}
.ln.sh-heat{stroke:#D9A35C;stroke-dasharray:6 6}
.sh-head{fill:none;stroke:#D9A35C;stroke-width:1.4}
.art-season .art-t{font-size:17px}.art-season .art-t.small{font-size:16.5px;fill:var(--ink-soft)}
.rb-tree{stroke:var(--sage)}
.ln.rb-root{stroke:var(--hm-soft);stroke-dasharray:3 4}
.art-roof .cs-t{font-size:19px}.art-light .cs-t{font-size:17px}
.lp-terrace{fill:#D8D5CC;stroke:var(--hm-line);stroke-width:1.4;vector-effect:non-scaling-stroke}
.ln.lp-ray{stroke:#D9B067;stroke-width:1.8}
.lp-beam{opacity:0;transition:opacity 1.2s ease .9s}
.was-seen .lp-beam{opacity:1}
.lp-sum .wc-x{opacity:0;transition:opacity .4s ease 1.2s}
.was-seen .lp-sum .wc-x{opacity:1}
.lp-win .draw{transition-delay:.5s}

/* the water loop */
.wl-bed{fill:#DCE3D2}
.wl-src{fill:var(--paper);stroke:var(--hm-water);stroke-width:1.4}
.wl-head{fill:none;stroke:var(--hm-water);stroke-width:1.4}
.wl-drop{fill:var(--hm-water);opacity:0}
.art-water .cs-t{font-size:20px;fill:var(--ink)}
.wl-m{transition:opacity .6s ease}
.is-armed .wl-m{opacity:0}
.is-armed .wl-m.is-on{opacity:1}
.is-playing .wl-drop,.was-played .wl-drop{opacity:1}
.ln.wl-drain{transition:stroke-width .3s,opacity .3s}
.is-armed .ln.wl-drain{opacity:.35}
.is-armed .ln.wl-drain.is-on{opacity:1;stroke-width:2.4}
.hw-stages{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line-2);list-style:none;counter-reset:n;display:grid;gap:6px}
.hw-stages li{counter-increment:n;display:grid;grid-template-columns:28px 1fr;font-size:14px;line-height:1.45;color:var(--ink-soft);transition:color .4s}
.hw-stages li::before{content:counter(n, decimal-leading-zero);font-family:var(--mono);font-size:11.5px;color:var(--ink-muted);padding-top:2px}
.hw-stages li.is-now{color:var(--ink)}
.hw-stages li.is-now::before{color:var(--sage-deep)}

/* comparisons: the boxes are the argument */
.hw-cmp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.hw-cmp h3{margin:0 0 12px;font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.hw-cmp-col.is-us h3{color:var(--sage-deep)}
.hw-cmp ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hw-cmp li{padding:13px 15px;border-radius:var(--r);border:1px solid var(--line-2);font-size:14.5px;line-height:1.35;color:var(--ink-soft);background:var(--paper)}
.hw-cmp-col.is-us li{border-color:transparent;background:var(--paper-2);color:var(--ink)}

/* ---------- 07 · structure ---------- */
.hw-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,6vw,110px);align-items:start}
.hw-two > div > .hm-body:first-child{margin-top:0}
.hw-two.is-art{align-items:center}
.hw-plans{list-style:none;margin:clamp(48px,6vw,90px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.hw-plans li{padding:clamp(16px,2vw,28px);border-radius:var(--r-lg);background:var(--paper-2)}
.hw-plans p{margin:16px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.ln.plan-wall{stroke:var(--hm-soft);stroke-width:1.3}

/* ---------- 07a · the halfway rung ---------- */
.hw-rung{padding:0 0 var(--hm-sec)}
.hw-rung-in{display:flex;align-items:center;justify-content:space-between;gap:24px 60px;flex-wrap:wrap;padding-top:clamp(34px,4vw,54px);border-top:1px solid var(--line)}
.hw-rung-in p{margin:12px 0 0;max-width:56ch;font-size:16px;line-height:1.55;color:var(--ink-soft)}

/* ---------- 08 · materials ---------- */
.hw-mat{border-top:1px solid var(--line)}
.hw-bu{padding:clamp(20px,3vw,44px)}
.bu-l{transform:translateY(calc(var(--k) * 24px));transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}
.was-seen .bu-l{transform:none}
.bu-top,.bu-side,.bu-front{stroke:none}
.bu-conc .bu-front,.bu-conc .bu-top{fill:#D8D5CC}.bu-conc .bu-side{fill:#C9C5BA}
.bu-foam .bu-front,.bu-foam .bu-top{fill:#E9E6DE}.bu-foam .bu-side{fill:#DAD6CC}
.bu-bub{fill:none;stroke:#C9C3B5;stroke-width:.9}
.bu-ins .bu-front,.bu-ins .bu-top{fill:#F1ECE1}.bu-ins .bu-side{fill:#E4DDCF}
.bu-root .bu-front,.bu-root .bu-top{fill:var(--hm-line)}.bu-root .bu-side{fill:#3A433A}
.bu-earth .bu-front,.bu-earth .bu-top{fill:var(--hm-earth)}.bu-earth .bu-side{fill:#E0D9C8}
.bu-green .bu-front,.bu-green .bu-top{fill:#CFD8C4}.bu-green .bu-side{fill:#BCC8AF}
.art-bu .cs-t{font-size:14px}
.hw-layers{list-style:none;margin:clamp(48px,6vw,90px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.hw-layers li{padding:clamp(20px,2.4vw,30px) clamp(16px,2vw,28px) clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line)}
.hw-layers li:not(:nth-child(3n+1)){padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--line)}
.hw-layers .hw-n{display:block;font-size:12px;margin-bottom:10px}
.hw-layers b{display:block;font-weight:500;font-size:16.5px;letter-spacing:-.01em;color:var(--ink)}
.hw-layers p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}

/* ---------- 09 · the build ---------- */
.hw-build{border-top:1px solid var(--line)}
.hw-strip{list-style:none;margin:clamp(48px,6vw,90px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.hw-strip .art-frame{display:block;width:100%;margin-bottom:18px}
.hw-strip li > :not(svg){padding-right:clamp(10px,1.2vw,18px)}
.hw-strip .hw-n{font-size:12px}
.hw-strip h3{margin:8px 0 0;font-weight:500;font-size:16px;letter-spacing:-.01em}
.hw-strip p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.bf-drops circle{fill:var(--hm-water)}
.ln.bf-ins{stroke:var(--sage);stroke-dasharray:4 3}

/* ---------- 10 · what runs it ---------- */
.hw-run .hw-cmp{margin-top:clamp(40px,5vw,72px)}
.hw-further{margin-top:clamp(56px,7vw,100px);padding-top:clamp(34px,4vw,54px);border-top:1px solid var(--line-2);align-items:center}
.hw-further .hw-fig{background:var(--paper)}
.hw-run .hw-cmp-col.is-us li{background:var(--paper)}
.hw-run .hw-cmp li{background:transparent}

/* ---------- 12 · close ---------- */
.hw-close{margin-top:var(--hm-sec)}
.hw-close-l{color:rgba(255,255,255,.72)}
.hw-close-visit{margin:18px 0 0}
.hw-close-visit a{color:rgba(255,255,255,.82);font-size:14.5px;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.hw-close-visit a:hover{color:#fff;border-color:#fff}

/* ---------- narrower screens: the drawing unpins, each system shows its own crop ---------- */
@media (max-width:900px){
  .hw-sys{grid-template-columns:1fr;gap:0}
  .hw-spine{display:none}
  .hw-crop{display:block;margin:0 0 clamp(22px,4vw,32px);padding:10px;border-radius:var(--r-lg);background:var(--paper-2)}
  .hw-s:first-child{padding-top:0}
  .hw-two{grid-template-columns:1fr}
  .hw-strip{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}
  .hw-layers{grid-template-columns:1fr 1fr}
  .hw-layers li:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .hw-layers li:nth-child(even){padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--line)}
  .hw-mat .hw-bu{order:2}
}
@media (max-width:640px){
  .hw-rail-row{grid-template-columns:1fr}
  .hw-rail a{padding:8px 12px;font-size:14px}
  .hw-plans{grid-template-columns:1fr}
  .hw-strip{grid-template-columns:1fr 1fr}
  .hw-layers{grid-template-columns:1fr}
  .hw-layers li:nth-child(even){padding-left:0;border-left:0}
  .hw-chips{grid-template-columns:1fr}
  .hw-cmp{grid-template-columns:1fr}
  .hw-legend-2{grid-template-columns:1fr}
  .hw-photo.is-wide .ph{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .bu-l,.hb-r{transform:none!important}
  .hb .art-t.num,.lp-beam,.lp-sum .wc-x{opacity:1!important}
  .hw-focus .cs-l,.hw-focus .cs-base{opacity:1!important}
}

/* the drawings sit in a narrow column here, so their small words are set larger than on
   the home page: nothing in a figure reads below about 11 px */
.hw .art-temp .art-t{font-size:19px}.hw .art-temp .art-t.small{font-size:17px}
.hw .art-heal .heal-tags .art-t{font-size:13px;fill:var(--ink-muted);letter-spacing:.02em}
/* the two lists side by side start on one line, whichever heading runs to two */
.hw-cmp{grid-template-rows:auto 1fr;row-gap:0}
.hw-cmp-col{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start}
/* on a phone the drawings are half their desktop width, so their words are set larger
   again, wherever the drawing has the room */
@media (max-width:640px){
  .hw .art-wall .art-t.small{font-size:25px}.hw .wc-t{font-size:19px}
  .hw .art-roof .cs-t{font-size:21px}.hw .art-light .cs-t{font-size:22px}.hw .art-water .cs-t{font-size:24px}
  .hw .art-temp .art-t{font-size:24px}.hw .art-temp .art-t.small{font-size:21px}
  .hw .art-hbars .art-t,.hw .art-grid .art-t{font-size:21px}.hw .art-hbars .art-t.small,.hw .art-grid .art-t.small{font-size:20px}
  .hw .art-bu .cs-t{font-size:22px}.hw .art-heal .heal-tags .art-t{font-size:15px}
}