/*
  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:12px;fill:var(--ink)}
.art-wall .art-t.small{font-size:16px}
.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:14px;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:15px}.art-season .art-t.small{font-size:14px;fill:var(--ink-soft)}
.rb-tree{stroke:var(--sage)}
.ln.rb-root{stroke:var(--hm-soft);stroke-dasharray:3 4}
.art-roof .cs-t,.art-light .cs-t{font-size:13px}
.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:15px;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}
}